/* ==========================================================================
   WITNERS — Main stylesheet
   Layout system modelled on the vooma.com reference composition,
   re-skinned with the WITNERS brand palette and Asap type.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (from Brand assets / Color palette.pdf) */
  --brand-deep:      #0B013E; /* darkest navy  */
  --brand-navy:      #1C0965; /* wordmark navy */
  --brand-violet:    #4E2BF5;
  --brand-blue:      #2050F5;
  --brand-teal:      #5ECDCD;

  --brand-gradient-dark:  linear-gradient(100deg, #0B013E 0%, #2A1090 55%, #4E2BF5 100%);
  --brand-gradient-light: linear-gradient(100deg, #2050F5 0%, #3B8BE0 55%, #5ECDCD 100%);

  /* Neutrals */
  --n-100: #ffffff;
  --n-200: #F7F7FC; /* page background        */
  --n-300: #E7E7F3; /* panels, dock fill      */
  --n-400: #D3D3E6;
  --n-500: #B9BAD6; /* hairlines, dotted path */
  --n-700: #5A5A72;
  --n-900: #12121C;

  /* Semantic — light theme (default) */
  --bg:            var(--n-200);
  --bg-secondary:  var(--n-300);
  --surface:       var(--n-100);
  --text:          var(--brand-deep);
  --text-secondary:var(--n-700);
  --text-tertiary: #8A8AA6;
  --line:          var(--n-400);
  --accent:        var(--brand-violet);

  /* Type */
  --font-sans: "Asap", "Asap Variable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --h1-size: clamp(2.5rem, 3.05vw + 1.76rem, 4.5rem);
  --h2-size: clamp(2rem, 2.29vw + 1.44rem, 3.5rem);
  --h3-size: clamp(1.5rem, 1.52vw + 1.13rem, 2.5rem);
  --h4-size: clamp(1.25rem, 1.14vw + .97rem, 2rem);
  --h5-size: clamp(1rem, .76vw + .81rem, 1.5rem);
  --h6-size: clamp(.95rem, .38vw + .84rem, 1.25rem);
  --eyebrow-size: clamp(.68rem, .19vw + .64rem, .78rem);
  --p-xl: 1.25rem;
  --p-sm: .875rem;
  --body-size: 1rem;
  --body-leading: 1.55;
  /* Supporting copy — card bodies, captions, footer links. A token rather than
     a per-component size, so mobile can lift the whole tier at once. */
  --support-size: .95rem;

  /* Space */
  --container: 90rem;
  --gutter: clamp(1.25rem, 3vw, 3rem);
  --section-y: clamp(4rem, 7vw, 8rem);
  --radius: 2px;
}

/* Dark theme block */
.u-theme-dark {
  --bg:             var(--brand-deep);
  --bg-secondary:   #150748;
  --surface:        rgba(255, 255, 255, .05);
  --text:           #F4F4FF;
  --text-secondary: #A9A7D6;
  --text-tertiary:  #7C79B8;
  --line:           rgba(255, 255, 255, .16);
  color: var(--text);
  background-color: var(--bg);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* Sideways scroll is never wanted, at any width. `hidden` is the floor every
   browser understands; `clip` is preferred where it exists because it is not
   scrollable or pannable at all and — unlike `hidden` — does not turn the root
   into a scroll container, so the sticky header keeps working. */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6, p { margin: 0; }
h1, .h1 { font-size: var(--h1-size); line-height: 1.06; letter-spacing: -.03em; font-weight: 600; }
h2, .h2 { font-size: var(--h2-size); line-height: 1.1;  letter-spacing: -.03em; font-weight: 600; text-wrap: balance; }
h3, .h3 { font-size: var(--h3-size); line-height: 1.08; letter-spacing: -.025em; font-weight: 600; }
.h4      { font-size: var(--h4-size); line-height: 1.12; letter-spacing: -.02em; font-weight: 600; }
.h5      { font-size: var(--h5-size); line-height: 1.2;  letter-spacing: -.02em; font-weight: 600; }
.h6      { font-size: var(--h6-size); line-height: 1.28; letter-spacing: -.015em; font-weight: 500; text-wrap: balance; }

.eyebrow {
  font-size: var(--eyebrow-size);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.p-xl { font-size: var(--p-xl); line-height: 1.5; }
.p-sm { font-size: var(--p-sm); line-height: 1.5; }

.u-color-secondary { color: var(--text-secondary); }
.u-color-tertiary  { color: var(--text-tertiary); }
.u-accent          { color: var(--accent); }
.u-align-center    { text-align: center; }
.u-events-none     { pointer-events: none; }

.u-gradient-text {
  background: var(--brand-gradient-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand-deep); color: #fff; padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.u-pb-0  { padding-bottom: 0; }
.u-pt-0  { padding-top: 0; }
.u-p-0   { padding: 0; }
.u-bg-secondary { background-color: var(--bg-secondary); }
.u-overflow-hidden { overflow: hidden; }
.u-z-1 { position: relative; z-index: 1; }
.u-relative { position: relative; }

.row { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 2.5rem); }
.row-between { justify-content: space-between; }
.row-center  { justify-content: center; }
.row-bottom  { align-items: flex-end; }
.col         { flex: 1 1 0; min-width: 0; }
.col-shrink  { flex: 0 0 auto; }
.col-6       { flex: 0 0 calc(50% - clamp(.75rem, 1.5vw, 1.25rem)); }
.col-7       { flex: 0 0 calc(58.333% - clamp(.75rem, 1.5vw, 1.25rem)); }
.col-8       { flex: 0 0 calc(66.666% - clamp(.75rem, 1.5vw, 1.25rem)); }

/* Below the tablet break the fractional columns go full width, so a header
   and the control/button beside it stack instead of squeezing. */
@media (max-width: 767px) {
  .col-6, .col-7, .col-8 { flex-basis: 100%; }
}

.vstack { display: flex; flex-direction: column; }
.gap-8  { gap: .5rem; }
.gap-16 { gap: 1rem; }
.gap-24 { gap: 1.5rem; }
.gap-32 { gap: 2rem; }
.gap-48 { gap: 3rem; }
.gap-64 { gap: clamp(2.5rem, 4vw, 4rem); }
.hstack { display: flex; align-items: center; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .95rem 1.6rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand-violet); color: #fff; border-color: var(--brand-violet);
}
.btn-primary:hover { background: var(--brand-blue); border-color: var(--brand-blue); }
.btn-ghost:hover { background: var(--text); color: var(--bg); }
.btn-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; align-self: stretch;
  background: var(--brand-violet); color: #fff;
  border: 1px solid var(--brand-violet); border-left: 0;
  transition: background-color .2s ease;
}
.btn-arrow:hover { background: var(--brand-blue); }
.btn-group { display: inline-flex; }
.btn-group .btn { border-right: 0; }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--n-200);
  border-bottom: 1px solid var(--n-400);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; height: 5rem;
}
.nav_logo img { height: 1.6rem; width: auto; }
.nav_list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); }
.nav_link {
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-deep); position: relative; padding-block: .35rem;
}
.nav_link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--brand-violet); transition: right .25s ease;
}
.nav_link:hover::after { right: 0; }
.nav_toggle { display: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; }
.nav_toggle span, .nav_toggle span::before, .nav_toggle span::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--brand-deep); position: relative;
}
.nav_toggle span::before { position: absolute; top: -7px; }
.nav_toggle span::after  { position: absolute; top: 7px; }

@media (max-width: 991px) {
  .nav_toggle { display: inline-flex; }
  .nav_menu {
    position: fixed; inset: 5rem 0 auto 0;
    background: var(--n-200); border-bottom: 1px solid var(--n-400);
    padding: 1.5rem var(--gutter) 2rem;
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;
  }
  .nav_menu.is-open { display: block; }
  .nav_list { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .nav_menu .btn { margin-top: 1rem; }
  .nav_link { min-height: 2.75rem; display: flex; align-items: center; }
  body.nav-open { overflow: hidden; }
  .nav_toggle span,
  .nav_toggle span::before,
  .nav_toggle span::after { transition: transform .2s ease, top .2s ease, opacity .2s ease; }
  .nav_toggle[aria-expanded="true"] span { background: transparent; }
  .nav_toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .nav_toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(34rem, 78vh, 46rem);
  display: flex; align-items: flex-end;
  padding-block: clamp(4rem, 9vw, 8rem);
  overflow: hidden;
}
.hero_bg { position: absolute; inset: 0; background: var(--brand-deep); }
.hero_bg img,
.hero_video { width: 100%; height: 100%; object-fit: cover; }
.hero_bg-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,1,62,.72) 0%, rgba(11,1,62,.28) 42%, rgba(11,1,62,.88) 100%),
    linear-gradient(90deg, rgba(11,1,62,.75) 0%, rgba(11,1,62,0) 62%);
}
.hero_pattern {
  position: absolute; inset: 0;
  background: url("../images/textures/witners pattern.svg") center / cover no-repeat;
  opacity: .5;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero_h1 { max-width: 22ch; }

/* The WITNERS way of work — heading scale, regular weight, one phrase a line. */
.hero_tagline {
  font-weight: 400;
  letter-spacing: -.02em;
}
.hero_tagline span { display: block; }
.hero_tagline::after {
  content: "";
  display: block;
  width: 4.5rem; height: 3px;
  margin-top: clamp(.75rem, 1.2vw, 1.25rem);
  background: var(--brand-gradient-light);
}
.hero_lead { max-width: 80.6ch; color: #fff; }

.hero_tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero_tag {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem;
  border: 1px solid rgba(255,255,255,.28);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: #E8E8FF;
}
.hero_tag::before {
  content: ""; width: 6px; height: 6px; background: var(--brand-teal); flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   7. TRACKS — "least valuable work" section
       Mirrors the reference motion: five bars ride five dotted paths on
       scroll; four peel off to the edges and vanish, one lands at the dock.
   -------------------------------------------------------------------------- */
/* The container is deliberately wider than the viewport on small screens so the
   scene keeps its proportions; the section clips the overflow. */
.track { overflow: clip; }

.tracks_container {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: var(--container);
  margin-inline: auto;
}
.tracks_middle {
  position: absolute; inset: 0;
  width: 21.5%; height: 100%;
  margin-inline: auto;
  padding-block: 22%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between;
  text-align: center;
  align-self: center;
}
.tracks_middle .h6 { color: var(--text); }
.tracks_middle .h6:first-child { translate: 0 -10%; }

.tracks_svg { width: 100%; height: auto; overflow: visible; }
.track_path { stroke: var(--n-500); stroke-dasharray: 2 2; fill: none; }
.track_tick { stroke: var(--brand-deep); fill: none; }
.track_tick-solid { fill: var(--brand-deep); }

/* Scroll reveals — CSS-driven so content is never trapped behind a JS frame
   loop. `.js` is set by an inline snippet before paint; without JS everything
   renders at its resting state. */
.js .reveal,
.js .tracks_middle .h6 {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.is-in,
.js .tracks_middle .h6.is-in { opacity: 1; transform: none; }

.js .hero_h1, .js .hero_tagline, .js .hero_lead, .js .hero_tags {
  opacity: 0;
  transform: translateY(26px);
  animation: hero-in .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.js .hero_h1      { animation-delay: .10s; }
.js .hero_tagline { animation-delay: .22s; }
.js .hero_lead    { animation-delay: .34s; }
.js .hero_tags    { animation-delay: .46s; }
@keyframes hero-in { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .tracks_middle .h6,
  .js .hero_h1, .js .hero_tagline, .js .hero_lead, .js .hero_tags {
    opacity: 1; transform: none; animation: none; transition: none;
  }
}

@media (max-width: 991px) { .tracks_middle { width: 27%; padding-top: 18%; } }
/* Below 768px the scene is re-framed in section 14 (Mobile hardening): the
   oversize moves onto .tracks_svg so the container itself never exceeds the
   viewport. Keep that sizing in one place — do not re-widen the container here. */

/* --------------------------------------------------------------------------
   8. Cards / grids
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(3, 1fr);
}
.card {
  background: var(--bg);
  display: flex; flex-direction: column;
  transition: background-color .25s ease;
}
.card:hover { background: var(--surface); }

/* Service photography sits flush to the cell edges; copy keeps the padding. */
.card_media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.card_media img,
.card_media .ph {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border: 0;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.card:hover .card_media img,
.card:hover .card_media .ph { transform: scale(1.04); }
.card_media-project { object-position: center 40%; }

.card_inner {
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1rem;
  flex: 1 1 auto;
}
.card_meta {
  font-size: .72rem; letter-spacing: .14em; font-weight: 600;
  color: var(--text-tertiary);
}
.card_body { color: var(--text-secondary); font-size: var(--support-size); }
/* Tags settle on the baseline of the cell whatever the copy length. */
.card_tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .5rem; }
.card_tag {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: .35rem .6rem; border: 1px solid var(--line); color: var(--text-secondary);
}

.industry-grid {
  display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  grid-template-columns: repeat(4, 1fr);
}
.industry {
  background: var(--bg); padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex; flex-direction: column; gap: .35rem; min-height: 11.5rem;
  justify-content: flex-end;
  transition: background-color .25s ease;
}
.industry:hover { background: var(--surface); }
.industry_name { font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
.industry_support { font-size: var(--support-size); color: var(--text-secondary); }

/* ---- Industry icons -------------------------------------------------------
   Each card carries a line-drawn SVG. The strokes draw themselves once the
   grid scrolls into view; the moving parts (wheels, gears, orbits, pulses)
   run only while the card is hovered or focused, so twelve tiles never
   animate at once. All of it is disabled under prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.industry_icon {
  display: block;
  color: var(--accent);
  margin-bottom: auto;
}
.industry_icon svg {
  width: clamp(2rem, 2.6vw, 2.5rem); height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.industry_icon .i-solid { fill: currentColor; stroke: none; }

.js .industry-grid .i-draw { stroke-dasharray: 260; stroke-dashoffset: 260; }
.js .industry-grid.is-in .i-draw { animation: ico-draw 1.1s cubic-bezier(.22,.61,.36,1) forwards; }
.industry:nth-child(4n+2) .i-draw { animation-delay: .08s; }
.industry:nth-child(4n+3) .i-draw { animation-delay: .16s; }
.industry:nth-child(4n+4) .i-draw { animation-delay: .24s; }
@keyframes ico-draw { to { stroke-dashoffset: 0; } }

/* Moving parts — hover / keyboard focus only. */
.i-spin, .i-orbit, .i-roll, .i-pulse, .i-flicker, .i-lift, .i-swing {
  transform-box: fill-box; transform-origin: center;
}
.industry:hover .i-spin,
.industry:focus-within .i-spin { animation: ico-spin 5s linear infinite; }
.industry:hover .i-roll,
.industry:focus-within .i-roll { animation: ico-spin 1.6s linear infinite; }
.industry:hover .i-orbit,
.industry:focus-within .i-orbit { animation: ico-orbit 3.4s linear infinite; }
.industry:hover .i-pulse,
.industry:focus-within .i-pulse { animation: ico-pulse 1.6s ease-in-out infinite; }
.industry:hover .i-flicker,
.industry:focus-within .i-flicker { animation: ico-flicker 1.1s ease-in-out infinite; }
.industry:hover .i-lift,
.industry:focus-within .i-lift { animation: ico-lift 1.8s ease-in-out infinite; }
.industry:hover .i-swing,
.industry:focus-within .i-swing { animation: ico-swing 2.4s ease-in-out infinite; }
.industry:hover .i-trace,
.industry:focus-within .i-trace { animation: ico-trace 1.6s linear infinite; }

.i-swing { transform-origin: 50% 0%; }
.i-orbit { transform-box: view-box; transform-origin: 16px 16px; }

@keyframes ico-spin    { to { transform: rotate(360deg); } }
@keyframes ico-orbit   { to { transform: rotate(360deg); } }
@keyframes ico-pulse   { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes ico-flicker { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(.82); opacity: .6; } }
@keyframes ico-lift    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes ico-swing   { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
/* The dash pattern lives inside the keyframes so the trace sits solid at rest. */
@keyframes ico-trace   { from { stroke-dasharray: 8 44; stroke-dashoffset: 0; }
                         to   { stroke-dasharray: 8 44; stroke-dashoffset: -52; } }

@media (prefers-reduced-motion: reduce) {
  .js .industry-grid .i-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .industry:hover *, .industry:focus-within * { animation: none !important; }
}

@media (max-width: 991px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 639px) {
  .card-grid { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   9. Stats strip — key figures
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; background: var(--brand-gradient-dark);
}
.stat-cell {
  background: transparent;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2vw, 2rem);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center;
}
.stat-cell + .stat-cell { border-left: 1px solid rgba(255, 255, 255, .24); }
/* 20% larger than the former clamp(1.75rem, 2vw + 1rem, 3rem).
   Tabular figures keep the cell from twitching while the counter runs. */
.stat-cell_value {
  font-size: clamp(2.1rem, 2.4vw + 1.2rem, 3.6rem);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
@media (max-width: 991px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-cell + .stat-cell { border-left: 0; }
  .stat-cell:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .24); }
  .stat-cell:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .24); }
}
@media (max-width: 479px) {
  .stat-grid { grid-template-columns: 1fr; }
  .stat-cell:nth-child(even) { border-left: 0; }
  .stat-cell:nth-child(n+2) { border-top: 1px solid rgba(255, 255, 255, .24); }
}

/* --------------------------------------------------------------------------
   10. Why WITNERS — statement slider
       Two slides in view on desktop, one on mobile. Each slide pairs a square
       visual (with the WITNERS mark chipped into its lower-left corner) with
       the statement itself, and a scroll-driven ruler doubles as pagination.
   -------------------------------------------------------------------------- */
#why {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--brand-gradient-dark);
}
#why::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: url("../images/textures/witners pattern.svg") center / cover no-repeat;
  opacity: .24;
  pointer-events: none;
}

/* A horizontal carousel: keep touch gestures vertical so a sideways swipe
   here can never turn into a page pan. */
.slider { width: 100%; overflow: hidden; touch-action: pan-y; }
.slider_track {
  display: flex;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.slider_slide { flex: 0 0 50%; min-width: 0; }

.slider_controls { display: flex; align-items: center; gap: 1rem; }
.slider_control {
  width: 3rem; height: 3rem; border: 1px solid var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.slider_control:hover { background: var(--text); color: var(--bg); }
.slider_control[disabled] {
  border-color: var(--text-tertiary); color: var(--text-tertiary);
  cursor: default; background: none;
}

/* overflow: hidden so the ruler's tips and travelling cursor can never poke
   past the section, whatever the slide count or width. */
.slider_timeline { position: relative; height: 2.5rem; overflow: hidden; }
.slider_ruler {
  position: absolute; inset: 0;
  display: flex; justify-content: space-between; align-items: stretch;
  pointer-events: none;
}
.slider_ruler-tick {
  position: relative;
  min-width: 1px;
  color: var(--line);
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
}
/* Absolute: the tip is ~12px wide inside a ~6px tick, so in flow it pushed the
   last tick's content past the ruler and leaked a few pixels out of the page. */
.slider_ruler-tip {
  position: absolute; top: 0; left: 50%;
  width: .75rem; height: .5rem;
  background: currentColor;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 1px);
}
.slider_ruler-line {
  flex: 1; width: 1px;
  background: currentColor;
  transform-origin: 50% 100%;
}
.slider_ruler-cursor {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 1;
  width: 4px;
  pointer-events: none;
  will-change: transform;
}
.slider_ruler-cursor::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: .875rem; height: .625rem;
  background: var(--brand-teal);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translateX(-50%);
}
.slider_ruler-cursor::after {
  content: "";
  position: absolute; top: .625rem; bottom: 0; left: 50%;
  width: 4px;
  background: var(--brand-teal);
  transform: translateX(-50%);
}
.slider_ruler-tabs {
  position: absolute; inset: 0; z-index: 2;
  display: flex;
}
.slider_tick { flex: 1 1 0; padding: 0; }
.slider_tick:focus-visible { outline-offset: -2px; }

.testimonial_grid {
  display: grid; grid-template-columns: 40fr 60fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-inline: 0 clamp(1.5rem, 4vw, 3rem);
}
.testimonial_about { display: flex; flex-direction: column; gap: 1.5rem; }
.testimonial_media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.testimonial_media img,
.testimonial_media .ph {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
}
.testimonial_chip {
  position: absolute; left: 0; bottom: 0;
  padding: .5rem .75rem;
  background: var(--brand-deep);
  display: flex; align-items: center;
}
.testimonial_chip img { max-height: 1.5rem; max-width: 6rem; width: auto; object-fit: scale-down; }
.testimonial_quote { display: flex; flex-direction: column; gap: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .slider_track { transition: none; }
  .card:hover .card_media img,
  .card:hover .card_media .ph { transform: none; }
}

@media (max-width: 991px) {
  .slider_slide { flex-basis: 100%; }
  .testimonial_grid { grid-template-columns: 1fr; padding-inline: 0; }
  .testimonial_about { flex-direction: row; align-items: flex-end; gap: 1.25rem; }
  .testimonial_media { flex: 0 0 clamp(6rem, 22vw, 9rem); }
}

/* --------------------------------------------------------------------------
   11. Process journey — animated point 01 → point 03
   -------------------------------------------------------------------------- */
.process_journey { position: relative; }

/* Desktop: markers in a row with the rail across them, copy in three columns. */
.process_stages {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.process_stage { display: flex; flex-direction: column; min-width: 0; }
.process_stage-marker {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.process_stage-body {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1.25rem;
  flex: 1 1 auto; min-width: 0;
}
.process_stage + .process_stage .process_stage-body { border-left: 1px solid var(--line); }

/* The rail is absolutely positioned, so it never takes a grid cell of its own
   — which matters on mobile, where the stages become `display: contents`. */
.process_rail {
  position: absolute;
  top: 1.5rem; left: 16.666%; right: 16.666%;
  height: 2px;
  background: var(--line);
}
.process_rail-progress {
  position: absolute; inset: 0;
  background: var(--brand-gradient-light);
  transform: scaleX(1);
  transform-origin: 0 50%;
  will-change: transform;
}
.process_mover-position {
  position: absolute; left: 0; top: 50%; z-index: 3;
  width: 0; height: 0;
  will-change: transform;
}
.process_mover {
  position: absolute; left: 0; top: 0;
  width: 1.75rem; height: 1.75rem;
  border: 3px solid var(--surface);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-teal);
  color: var(--brand-deep);
  box-shadow: 0 0 0 1px rgba(11, 1, 62, .12);
  transform: translate(-50%, -50%);
}
.process_node {
  width: 3rem; height: 3rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  color: var(--text-tertiary);
  font-size: .72rem; line-height: 1; font-weight: 700; letter-spacing: .12em;
  box-shadow: 0 0 0 .5rem var(--surface);
  will-change: transform;
}
.process_point-label {
  color: var(--text);
  font-size: .78rem; line-height: 1; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.process_step-outcome {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--brand-violet);
  font-size: .78rem; line-height: 1.5; font-weight: 600;
  letter-spacing: .04em;
}
.process_journey.is-complete .process_mover-position { display: none; }
.process_journey.is-complete .process_node {
  background: var(--brand-violet);
  border-color: var(--brand-violet);
  color: #fff;
}

/* Mobile: the journey turns vertical. `display: contents` drops each stage's
   marker and body straight into the grid, so every marker lines up with its
   own copy on the same row, and the rail runs down the marker column. Its
   exact top/height are measured in initProcess(), because the last row's
   height depends on the copy. */
@media (max-width: 767px) {
  .process_stages {
    grid-template-columns: 3rem 1fr;
    column-gap: 1.25rem;
    row-gap: 2.25rem;
    align-items: start;
  }
  .process_stage { display: contents; }
  .process_stage-marker { align-items: center; }
  .process_point-label { display: none; }
  .process_stage-body {
    margin-top: 0;
    padding: 0 0 .25rem;
    border-top: 0;
    gap: 1rem;
  }
  .process_stage + .process_stage .process_stage-body { border-left: 0; }

  .process_rail {
    top: 0; bottom: auto; left: 1.5rem; right: auto;
    width: 2px; height: 0;
    transform: translateX(-50%);
  }
  .process_rail-progress { transform: scaleY(1); transform-origin: 50% 0; }
  .process_mover-position { left: 50%; top: 0; }
  .process_mover svg { transform: rotate(90deg); }
}

/* --------------------------------------------------------------------------
   12. Final CTA + footer
   -------------------------------------------------------------------------- */
#contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--brand-gradient-dark);
}
#contact::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: url("../images/textures/witners pattern coloured.svg") center / cover no-repeat;
  opacity: .72;
  pointer-events: none;
}
.contact_cta {
  width: min(100%, 78rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
}
.contact_intro { align-items: flex-start; }
.contact_cta .eyebrow { color: var(--brand-teal); }
.contact_cta p { max-width: 48ch; }
.contact_cta .btn-primary {
  background: var(--brand-teal);
  border-color: var(--brand-teal);
  color: var(--brand-deep);
}
.contact_cta .btn-primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--brand-deep);
}


/* Contact form — business email + inquiry, sits inside the dark CTA panel. */
.contact_panel { width: 100%; display: flex; flex-direction: column; gap: 1.25rem; }
.contact_form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact_field { display: flex; flex-direction: column; gap: .5rem; }
.contact_label {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--brand-teal);
}
.contact_input {
  width: 100%;
  padding: .85rem 1rem;
  font-family: inherit;
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--text);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s ease, background-color .2s ease;
}
.contact_input::placeholder { color: var(--text-tertiary); }
.contact_input:focus-visible {
  outline: none;
  border-color: var(--brand-teal);
  background: rgba(255, 255, 255, .1);
}
textarea.contact_input { resize: vertical; min-height: 8rem; }
.contact_submit { align-self: flex-start; justify-content: center; cursor: pointer; }
.contact_cta .contact_note {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--support-size);
}
.contact_note-ok { border-color: var(--brand-teal); color: var(--brand-teal); }
.contact_note-error { border-color: #FF8A8A; color: #FF8A8A; }
.contact_note a { color: inherit; text-decoration: underline; }
/* Honeypot — off-screen for bots, invisible and unfocusable for people. */
.contact_hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* The form column needs its width back before the 767px phone breakpoint. */
@media (max-width: 899px) {
  .contact_cta {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 2.75rem);
  }
  .contact_cta p { max-width: 56ch; }
  .contact_panel { max-width: 36rem; }
}

.footer { padding-block: clamp(3.5rem, 6vw, 6rem) 2.5rem; }
.footer_grid {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1.6fr repeat(3, 1fr);
}
.footer_logo img { height: 1.5rem; width: auto; }
.footer_heading {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--text-tertiary); margin-bottom: 1rem;
}
.footer_links { display: flex; flex-direction: column; gap: .6rem; font-size: var(--support-size); }
.footer_links a { color: var(--text-secondary); }
.footer_links a:hover { color: var(--text); }
.footer_bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--text-tertiary);
}
@media (max-width: 767px) { .footer_grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .footer_grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   13. Placeholder imagery
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(78,43,245,.06) 0 12px, transparent 12px 24px),
    var(--n-300);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: .5rem; text-align: center;
  color: var(--text-tertiary);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  aspect-ratio: 4 / 3;
}
.ph.cc-wide { aspect-ratio: 16 / 10; }
.u-theme-dark .ph {
  background:
    repeating-linear-gradient(135deg, rgba(94,205,205,.10) 0 12px, transparent 12px 24px),
    rgba(255,255,255,.05);
}

/* --------------------------------------------------------------------------
   14. Mobile hardening
   Keep the desktop composition intact while giving narrow screens their own
   spacing, readable animation scale, full-width controls and stable overflow.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .card:hover .card_media img,
  .card:hover .card_media .ph { transform: none; }
}

@media (max-width: 767px) {
  /* Mobile type scale. The whole system moves together through the tokens
     rather than per-component font-size overrides: body copy lifts to 17px,
     supporting copy to 16px, and nothing on a phone sits below 13px. */
  :root {
    --gutter: 1.125rem;
    --section-y: 3.75rem;
    --h1-size: clamp(2.35rem, 9.5vw, 3rem);
    --h2-size: clamp(1.95rem, 7.8vw, 2.4rem);
    --h3-size: clamp(1.6rem, 6.4vw, 2rem);
    --h4-size: clamp(1.3rem, 5.2vw, 1.6rem);
    --h5-size: 1.2rem;
    --h6-size: 1.05rem;
    --eyebrow-size: .75rem;
    --p-xl: 1.15rem;
    --p-sm: .95rem;
    --body-size: 1.0625rem;
    --body-leading: 1.6;
    --support-size: 1rem;
  }

  /* Small UI text — labels, tags, buttons — lifted off the desktop sizes so
     nothing on a phone drops below roughly 12px. */
  .btn { font-size: .85rem; }
  .nav_link { font-size: .85rem; }
  .hero_tag { font-size: .74rem; }
  .card_tag { font-size: .72rem; }
  .process_step-outcome { font-size: .88rem; }
  .footer_bottom { font-size: .85rem; }
  .footer_heading { font-size: .74rem; }

  /* The sideways-scroll guard lives on html/body in section 2 and applies at
     every width — don't restate it here. */
  html { scroll-padding-top: 4.25rem; }
  body {
    position: relative;
    overflow-wrap: anywhere;
  }
  .page-main { width: 100%; max-width: 100%; }
  .section, .hero, .track, #why, #process, #contact {
    width: 100%;
    max-width: 100%;
  }
  .container,
  .row > *,
  .card-grid > *,
  .industry-grid > *,
  .stat-grid > *,
  .process_stage-body,
  .footer_grid > * {
    min-width: 0;
    max-width: 100%;
  }
  .btn, .btn-group { max-width: 100%; }
  .section, .hero { scroll-margin-top: 4.25rem; }
  .row { gap: 1.5rem; }
  .gap-48 { gap: 2.25rem; }
  .gap-64 { gap: 2.75rem; }

  .nav { height: 4.25rem; gap: 1rem; }
  .nav_logo img { height: 1.35rem; max-width: 12rem; }
  .nav_toggle { width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; }
  .nav_menu {
    inset: 4.25rem 0 auto;
    max-height: calc(100vh - 4.25rem);
    max-height: calc(100dvh - 4.25rem);
    padding-block: 1rem 1.5rem;
  }
  .nav_list { gap: .5rem; }
  .nav_list > li { width: 100%; }
  .nav_link { width: 100%; min-height: 3rem; }
  .nav_menu .btn { width: 100%; min-height: 3rem; justify-content: center; margin-top: .5rem; }

  .section .col-shrink { flex: 0 0 100%; }
  .section .col-shrink > .btn { width: 100%; justify-content: center; }

  .hero {
    min-height: calc(100vh - 4.25rem);
    min-height: calc(100svh - 4.25rem);
    padding-block: 3.25rem;
    align-items: flex-end;
  }
  .hero .row { gap: 1.75rem; }
  .hero .col-shrink { flex: 0 0 100%; }
  .hero_h1 { max-width: none; }
  .hero_tagline { font-size: clamp(1.55rem, 7vw, 2rem); }
  .hero_tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero_tag { justify-content: center; text-align: center; line-height: 1.35; }
  .hero_tag:last-child { grid-column: 1 / -1; }
  .hero .btn-group { width: 100%; }
  .hero .btn-group .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
  .hero .btn-arrow { flex: 0 0 3.25rem; }

  /* The scene stays oversized so it keeps its proportions, but the oversize
     now sits on the SVG inside a full-width frame that clips itself. The
     geometry is identical to the old 130% / -15% container; percentages on
     .tracks_middle are re-based onto the narrower frame (60% × 1.3 = 78%,
     15% × 1.3 = 19.5%). */
  .track { overflow: hidden; contain: paint; }
  .tracks_container { width: 100%; max-width: none; margin-left: 0; overflow: hidden; }
  /* max-width: none — the global `svg { max-width: 100% }` reset would
     otherwise cap the scene back to the frame width. */
  .tracks_svg { width: 130%; max-width: none; margin-left: -15%; }
  .tracks_middle { width: 78%; padding-block: 19.5%; }
  /* The scene is cramped, so its statements stay a step below body size. */
  .tracks_middle .h6 { font-size: .9rem; line-height: 1.4; }

  .card_inner { padding: 1.25rem; }
  .industry { min-height: 9.5rem; padding: 1rem; }
  .industry_name { font-size: 1.05rem; }
  .stat-cell { padding-block: 1.75rem; }

  #why .row-bottom { align-items: flex-start; }
  .slider_controls { gap: .75rem; }
  .slider_control { width: 2.75rem; height: 2.75rem; }


  #contact::before { background-size: auto 78%; }
  .contact_cta .btn { width: min(100%, 20rem); justify-content: center; }

  .footer_bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 639px) {
  .testimonial_grid { gap: 1.5rem; }
  .testimonial_about { flex-direction: column; align-items: stretch; gap: 1rem; }
  .testimonial_media {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 10;
  }
  .testimonial_quote { gap: 1rem; }
}

@media (max-width: 479px) {
  :root { --gutter: 1rem; --section-y: 3.5rem; }
  .hero { padding-block: 2.75rem; }
  .hero_tags { grid-template-columns: 1fr; }
  .hero_tag:last-child { grid-column: auto; }
  .slider_timeline { height: 2.25rem; }
}


@media (max-width: 359px) {
  .industry-grid { grid-template-columns: 1fr; }
  .btn { padding-inline: 1.15rem; letter-spacing: .09em; }
}