/* SlyFox Solutions — Design System
   Generated by Frontend Wireframe Engine, Phase 4
   DNA Hash: e1f322961756
   Do not edit by hand. Regenerate via the engine.

   Axes: humanist-warm-readable / editorial-understated / editorial-magazine /
         offset-editorial / underline-reveal / photography-editorial /
         subtle-elegant / airy / off-white-sophisticated / solid-minimal /
         topographic-map / cultural: none
   Mutations: grid-break (spatial), topographic-pattern (textural), accent-font (typographic)
*/

:root {
  /* ── Typography ──────────────────────────────────────────────
     Brand lock: Raleway retained from the existing identity.
     Body is IBM Plex Sans (humanist, warm apertures, engineering pedigree).
     Mono is IBM Plex Mono, used as a data layer, never as decoration.
     Exactly three families. That is the ceiling under the Font Buffet rule. */
  --font-display: 'Raleway', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, monospace;

  --scale-ratio: 1.333;
  --display-weight: 800;
  --heading-weight: 700;
  --body-weight: 400;
  --display-tracking: -0.03em;   /* floor is -0.04em; we stay above it */
  --heading-tracking: -0.02em;
  --data-tracking: 0.06em;
  --display-leading: 1.02;
  --heading-leading: 1.15;
  --body-leading: 1.7;
  --body-size: 17px;
  --measure: 68ch;
  --measure-tight: 46ch;

  /* Fluid display scale, brand register */
  --step-hero: clamp(2.6rem, 1.15rem + 5.6vw, 5.5rem);
  --step-1: clamp(2rem, 1.15rem + 3.4vw, 3.75rem);
  --step-2: clamp(1.55rem, 1.1rem + 1.8vw, 2.5rem);
  --step-3: clamp(1.25rem, 1.05rem + 0.85vw, 1.65rem);
  --step-4: 1.125rem;

  /* ── Colour ──────────────────────────────────────────────────
     Every ratio below was measured, not estimated.
     The ground is cool, carrying a trace of the fox tail's navy.
     It is deliberately NOT cream: that band is the 2026 AI tell. */
  --paper:        #f6f7f9;   /* base surface */
  --surface:      #eceef3;   /* second surface, alternating bands */
  --navy:         #1e2a5a;   /* fox tail navy, contrast bands */
  --navy-deep:    #151b2e;   /* ink */
  --ink:          #151b2e;   /* 15.95:1 on paper */
  --slate:        #4a5468;   /*  7.10:1 on paper, secondary body */
  --steel:        #3f6e97;   /*  5.04:1 on paper, tertiary and metadata */
  --mist:         #b9c4da;   /*  7.80:1 on navy, body inside dark bands */
  --line:         rgba(21, 27, 46, 0.14);
  --line-strong:  rgba(21, 27, 46, 0.30);
  --line-invert:  rgba(246, 247, 249, 0.22);

  /* The single locked accent. Fox orange, straight off the logo. */
  --fox:        #f0601e;   /* 3.06:1 on paper. LARGE type, rules, fills ONLY. */
  --fox-amber:  #f0901a;   /* 5.68:1 on navy. Small accent text on dark only. */
  --rust:       #b8410f;   /* 5.15:1 on paper. Any orange below 24px. */

  /* ── Spacing, from the airy philosophy ─────────────────────── */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 48px;  --s-6: 64px;  --s-7: 80px;  --s-8: 96px;  --s-9: 128px;
  --section-gap: 96px;
  --pad-x: 24px;
  --maxw: 1440px;

  /* ── Motion, subtle-elegant over the craft floor ───────────── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --enter-duration: 500ms;
  --stagger: 60ms;
  --control-duration: 160ms;   /* controls stay on the fast floor */
  --hover-duration: 200ms;
}

@media (min-width: 768px)  { :root { --pad-x: 48px; } }
@media (min-width: 1280px) { :root { --pad-x: 80px; --section-gap: 128px; } }

/* ══ Base ══════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-leading);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s-3); max-width: var(--measure); }

a { color: inherit; }

img { max-width: 100%; display: block; }

::selection { background: var(--fox); color: var(--navy-deep); }

:focus-visible {
  outline: 2px solid var(--fox);
  outline-offset: 3px;
}

/* ══ Layout primitives ═════════════════════════════════════════ */
.shell {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* editorial-magazine: a real 12-column grid so no two sections
   have to share a composition. */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-4);
}

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: var(--s-6); }
.section--surface { background-color: var(--surface); }

/* Inner-page head. Without this, a full section-gap below the headline plus a
   full section-gap above the next block stacks to roughly 256px of dead air. */
.section--pagehead { padding-block: var(--s-7) var(--s-5); }
.section--pagehead + .section,
.section--pagehead + .section--tight { padding-top: var(--s-6); }

/* Contrast band. Prevents the page reading as one continuous document. */
.band-navy {
  background-color: var(--navy);
  color: var(--paper);
}
.band-navy h1, .band-navy h2, .band-navy h3 { color: var(--paper); }
.band-navy p { color: var(--mist); }

/* ══ Texture: nautical chart contours ══════════════════════════
   Mutation: topographic-pattern, recoloured from the data file's
   green to the fox tail's navy. Read as depth soundings, tying the
   surface to the sailboat the company is named after. */
.chart {
  position: relative;
  isolation: isolate;
}
.chart::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%231e2a5a' stroke-width='1'%3E%3Cpath d='M-40 118 C 60 74 130 150 214 116 C 292 84 348 140 460 100' opacity='.30'/%3E%3Cpath d='M-40 156 C 66 108 138 188 218 152 C 300 116 352 176 460 138' opacity='.24'/%3E%3Cpath d='M-40 196 C 72 144 146 226 222 190 C 306 150 356 212 460 176' opacity='.19'/%3E%3Cpath d='M-40 238 C 78 182 154 264 226 228 C 312 186 360 250 460 216' opacity='.15'/%3E%3Cpath d='M-40 282 C 84 222 162 304 230 268 C 318 224 364 290 460 258' opacity='.12'/%3E%3Cpath d='M-40 330 C 90 266 170 346 234 310 C 324 264 368 332 460 302' opacity='.09'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 420px 420px;
  opacity: 0.55;
}
.band-navy.chart::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23f6f7f9' stroke-width='1'%3E%3Cpath d='M-40 118 C 60 74 130 150 214 116 C 292 84 348 140 460 100' opacity='.24'/%3E%3Cpath d='M-40 156 C 66 108 138 188 218 152 C 300 116 352 176 460 138' opacity='.19'/%3E%3Cpath d='M-40 196 C 72 144 146 226 222 190 C 306 150 356 212 460 176' opacity='.15'/%3E%3Cpath d='M-40 238 C 78 182 154 264 226 228 C 312 186 360 250 460 216' opacity='.12'/%3E%3Cpath d='M-40 282 C 84 222 162 304 230 268 C 318 224 364 290 460 258' opacity='.09'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.7;
}

/* ══ Typography roles ══════════════════════════════════════════ */
.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-hero);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
}
/* Display at heading scale. Same reason as .figure--word: a Tailwind
   font-size utility cannot beat .display on an equal-specificity tie. */
.display--md { font-size: var(--step-1); }
.h1 { font-size: var(--step-1); }
.h2 { font-size: var(--step-2); }
.h3 { font-size: var(--step-3); font-weight: var(--heading-weight); }
.h4 { font-size: var(--step-4); font-weight: 600; font-family: var(--font-body); letter-spacing: 0; }

.lede {
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.375rem);
  line-height: 1.55;
  color: var(--slate);
  max-width: var(--measure);
}
.band-navy .lede { color: var(--mist); }

.muted { color: var(--slate); }
.band-navy .muted { color: var(--mist); }

/* The mono data layer. Mutation: accent-font.
   Reserved for measured facts: figures, clearances, locations, counts.
   Never used for decoration and never dropped inside a heading. */
.data {
  font-family: var(--font-data);
  font-size: 0.8125rem;      /* 13px, above the 12px floor */
  letter-spacing: var(--data-tracking);
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 500;
}
.band-navy .data { color: var(--fox-amber); }

.figure {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.band-navy .figure { color: var(--paper); }
.figure .unit { color: var(--fox); font-size: 0.5em; }
.band-navy .figure .unit { color: var(--fox-amber); }

/* A figure whose value is a word rather than a number. Declared here, not as
   a Tailwind arbitrary value: the CDN injects its stylesheet ABOVE this file,
   so on an equal-specificity tie these component rules always win and a
   utility override silently does nothing. */
.figure--word {
  font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2rem);
  letter-spacing: 0;
  padding-top: 14px;
}

/* ══ The measured rule ═════════════════════════════════════════
   A chart scale bar. This is the site's sectioning device, used in
   place of the uppercase tracked eyebrow above every section, which
   is the 2023-era AI tell the anti-pattern set calls out. */
.rule {
  display: block;
  width: 100%;
  height: 9px;
  border: 0;
  margin: 0 0 var(--s-4);
  background-image:
    linear-gradient(to right, var(--fox) 0 68px, transparent 68px),
    linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px);
  background-size: 100% 2px, 17px 9px;
  background-position: left top, left top;
  background-repeat: no-repeat, repeat-x;
}
.band-navy .rule {
  background-image:
    linear-gradient(to right, var(--fox-amber) 0 68px, transparent 68px),
    linear-gradient(to right, var(--line-invert) 0 1px, transparent 1px);
}

/* ══ Components: editorial-understated ═════════════════════════
   Zero radius. No shadows. Bottom rule only. Hover is a weight shift,
   which is layout-stable because the weight change is compensated. */
.entry {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-4);
  background: transparent;
}
.band-navy .entry { border-bottom-color: var(--line-invert); }

/* ══ Service block ════════════════════════════════════════════
   The repeatable unit behind the extensible services architecture.
   A new service line is one more <article class="svc">. Nothing here
   or in the markup around it has to change to accept it. */
.svc {
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
}
.svc:first-child { border-top: 0; padding-top: 0; }
.svc--lead { border-top: 2px solid var(--fox); padding-top: var(--s-5); }

/* Capability keywords. Outlined and square, per editorial-understated.
   Deliberately not pills: pill-playful conflicts with this component set. */
.tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags li {
  font-family: var(--font-data);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--slate);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 7px 11px;
  white-space: nowrap;
}
.band-navy .tags li { color: var(--mist); border-color: var(--line-invert); }

/* ══ Buttons: three tiers, each internally consistent ══════════ */
/* Tier 1, primary. The single documented deviation from the
   underline-reveal archetype: a recruiting-first site whose only
   conversion action is a ghost link would fail the brief. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 15px 28px;
  border-radius: 0;
  border: 1px solid var(--navy);
  background-color: var(--navy);
  color: var(--paper);            /* 12.77:1 */
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--control-duration) var(--ease-out),
              border-color var(--control-duration) var(--ease-out),
              color var(--control-duration) var(--ease-out),
              transform var(--control-duration) var(--ease-out);
}
.btn .arrow { transition: transform var(--control-duration) var(--ease-out); }
.btn:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background-color: var(--fox);
    border-color: var(--fox);
    color: var(--navy-deep);       /* 5.21:1. Ink on orange, never white. */
  }
  .btn:hover .arrow { transform: translateX(5px); }
}

/* Tier 2, secondary. Outlined, same geometry as tier 1. */
.btn--ghost {
  background-color: transparent;
  color: var(--navy);
  border-color: var(--line-strong);
}
.band-navy .btn--ghost { color: var(--paper); border-color: var(--line-invert); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover {
    background-color: transparent;
    border-color: var(--fox);
    color: var(--rust);
  }
  .band-navy .btn--ghost:hover { color: var(--fox-amber); }
}

/* Tier 3, tertiary. The underline-reveal archetype proper. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
  padding: 8px 0;
  text-decoration: none;
  color: var(--ink);
}
.link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 2px;
  width: 100%;
  background-color: var(--fox);
  /* The underline-reveal archetype describes this as width 0 to 100%, but
     animating width forces layout on every frame. scaleX from a left origin
     is visually identical and stays on the compositor. */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--ease-out);
}
.link .arrow { transition: transform var(--control-duration) var(--ease-out); }
.link:active { transform: scale(0.97); }
.band-navy .link { color: var(--paper); }
.band-navy .link::after { background-color: var(--fox-amber); }
@media (hover: hover) and (pointer: fine) {
  .link:hover::after { transform: scaleX(1); }
  .link:hover .arrow { transform: translateX(5px); }
}
.link:focus-visible::after { transform: scaleX(1); }

/* ══ Navigation: solid-minimal ═════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 76px;
}
/* The logo is a light-on-dark lockup: its wordmark is #CCCCCC, which is
   effectively invisible on the paper ground. The brand lock forbids altering
   the mark, so it gets the dark ground it was drawn for instead. The plate
   also echoes the navy bands, so it reads as deliberate rather than patched. */
.nav__logo {
  display: inline-flex;
  align-items: center;
  background-color: var(--navy);
  padding: 11px 18px;
  flex: none;
}
.nav__logo img { height: 30px; width: auto; }
.nav__links { display: none; gap: var(--s-4); align-items: center; }
@media (min-width: 1024px) { .nav__links { display: flex; } }

.nav__link {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--slate);
  padding: 6px 0;
  position: relative;
  transition: color var(--control-duration) var(--ease-out);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background-color: var(--fox);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--ink); }
  .nav__link:hover::after { transform: scaleX(1); }
}
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--control-duration) var(--ease-out),
              transform var(--control-duration) var(--ease-out);
}
.nav__toggle:active { transform: scale(0.97); }
@media (min-width: 1024px) { .nav__toggle { display: none; } }

/* Mobile menu: full-viewport overlay, explicit close button. */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  background-color: var(--navy);
  color: var(--paper);
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line-invert);
  color: var(--paper);
  cursor: pointer;
  transition: border-color var(--control-duration) var(--ease-out),
              transform var(--control-duration) var(--ease-out);
}
.mobile-menu__close:active { transform: scale(0.97); }
.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-top: 88px;
}
.mobile-menu__link {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem);
  letter-spacing: var(--heading-tracking);
  text-decoration: none;
  color: var(--paper);
  padding: 12px 0;
  border-bottom: 1px solid var(--line-invert);
}

/* ══ Hero: offset-editorial + grid-break ═══════════════════════ */
.hero { position: relative; padding-top: var(--s-7); padding-bottom: var(--s-8); }
@media (min-width: 1024px) { .hero { padding-top: var(--s-8); } }  /* stays under the pt-24 cap */

.hero__media {
  position: relative;
  background-color: var(--surface);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  max-height: 520px;
  overflow: hidden;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* grid-break: on desktop the portrait escapes the container to the
   viewport edge while the headline column stays held. Height is capped
   rather than left to the aspect ratio, which at a 7-column span would
   drive the hero past 1200px and push everything below the fold. */
@media (min-width: 1024px) {
  .hero__media {
    margin-right: calc(-1 * var(--pad-x));
    aspect-ratio: auto;
    height: min(74vh, 640px);
    max-height: none;
  }
}
@media (min-width: 1440px) {
  .hero__media { margin-right: calc((100vw - var(--maxw)) / -2 - var(--pad-x)); }
}

/* ══ Photography placeholders ══════════════════════════════════
   Marked, not fabricated. Each carries a shot brief. */
.shot {
  position: relative;
  background-color: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.shot::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, transparent 0 49.6%, var(--line) 49.6% 50.4%, transparent 50.4%),
    linear-gradient(45deg, transparent 0 49.6%, var(--line) 49.6% 50.4%, transparent 50.4%);
  opacity: 0.5;
}
.shot__brief {
  position: relative;
  padding: var(--s-3);
  font-family: var(--font-data);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--slate);
  background-color: color-mix(in srgb, var(--paper) 92%, transparent);
  border-top: 1px solid var(--line);
  width: 100%;
}
.shot__brief b { color: var(--rust); font-weight: 500; text-transform: uppercase; }

/* ══ Entrances: fade-only, per subtle-elegant ══════════════════
   The signature moment. Section text cross-fades in gently enough
   that the reader notices the content, never the animation. */
[data-animate] {
  opacity: 0;
  transition: opacity var(--enter-duration) var(--ease-in-out);
}
[data-animate].is-in { opacity: 1; }
[data-animate-group] > * { transition-delay: calc(var(--i, 0) * var(--stagger)); }

/* The set-piece: the fox tail curve draws itself once, on load.
   Derived from the existing mark's tail. The logo itself is untouched. */
.tail-draw path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1;
  animation: tail-draw 1600ms var(--ease-out) 260ms forwards;
}
@keyframes tail-draw { to { stroke-dashoffset: 0; } }

/* ══ Forms ════════════════════════════════════════════════════ */
.field { display: block; margin-bottom: var(--s-4); }
.field__label {
  display: block;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 8px;
}
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 12px 0;
  transition: border-color var(--control-duration) var(--ease-out);
}
.field__textarea { resize: vertical; min-height: 132px; }
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-bottom: 2px solid var(--fox);
  padding-bottom: 11px;
}

/* ══ Footer ═══════════════════════════════════════════════════ */
.footer { background-color: var(--navy); color: var(--paper); }
/* Steel (#3f6e97) is a paper-ground token. On navy it measures 2.53:1 and
   fails AA, so the data layer switches to amber (5.68:1) on every dark
   surface, not just those tagged .band-navy. */
.footer .data { color: var(--fox-amber); }
.footer .rule {
  background-image:
    linear-gradient(to right, var(--fox-amber) 0 68px, transparent 68px),
    linear-gradient(to right, var(--line-invert) 0 1px, transparent 1px);
}
.footer a { color: var(--mist); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .footer a:hover { color: var(--fox-amber); }
}

/* ══ Reduced motion ═══════════════════════════════════════════
   Gentler, not zero: opacity and colour survive, movement does not.
   Scroll-driven rules are nulled explicitly, since they are not
   duration-based and a duration reset alone will not stop them. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-parallax], [class*="parallax"], .zoom-element, .scroll-rotate {
    animation: none !important;
    animation-timeline: none !important;
    transform: none !important;
  }
  [data-animate] { opacity: 1 !important; }
  .tail-draw path { animation: none !important; stroke-dashoffset: 0 !important; }
  .btn:hover .arrow, .link:hover .arrow { transform: none !important; }
}