/* Reelin — Color tokens
   Brand: predominantly white with warm peach + energetic green accents. */

:root {
  /* ---- Base palette ---- */
  --white: #ffffff;
  --black: #171512;

  /* Reelin Peach — warm, soft accent used for backgrounds, cards, highlights */
  --peach-50:  #fdf8f5;
  --peach-100: #f6e3d9; /* Reelin Peach (brand) */
  --peach-200: #f0d3c2;
  --peach-300: #e6b899;
  --peach-400: #d99b6e;

  /* Reelin Green — energetic accent for CTAs, success, stats */
  --green-50:  #eefbe6;
  --green-100: #d3f5bd;
  --green-400: #7ed957; /* Reelin Green (brand) */
  --green-500: #63c23e;
  --green-600: #4da12c;
  --green-700: #3a7d20;

  /* Star ratings — one brand gold everywhere, on light and dark alike. */
  --star-on-light: #ffbf00;
  --star-on-dark:  #ffbf00;

  /* Neutrals — warm-tinted grays (paired with peach undertone, not cold gray) */
  --gray-0:   #ffffff;
  --gray-50:  #faf8f6;
  --gray-100: #f3efec;
  --gray-200: #e6e0da;
  --gray-300: #d2c9c0;
  --gray-400: #a89e93;
  --gray-500: #7d7469;
  --gray-600: #5c554c;
  --gray-700: #3f3a33;
  --gray-800: #2a261f;
  --gray-900: #171512;

  /* Semantic surfaces */
  --surface-page:     var(--white);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--gray-50);
  --surface-accent:   var(--peach-100);
  --surface-inverse:  var(--gray-900);

  /* Semantic text */
  --text-primary:    var(--gray-900);
  --text-secondary:  var(--gray-600);
  --text-muted:      #6b6157; /* darkened from gray-500 to pass WCAG AA on white + peach */
  --text-on-accent:  var(--gray-900);
  --text-on-inverse: var(--white);
  --text-link:       var(--gray-900);

  /* Semantic borders */
  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-900);

  /* Semantic action */
  --action-primary:        var(--gray-900);
  --action-primary-hover:  var(--gray-700);
  --action-primary-active: var(--black);
  --action-accent:         var(--green-400);
  --action-accent-hover:   var(--green-500);
  --action-accent-active:  var(--green-600);

  /* Feedback */
  --feedback-success: var(--green-600);
  --feedback-success-bg: var(--green-50);
  --feedback-warning: #b7791f;
  --feedback-warning-bg: #fdf3e0;
  --feedback-danger: #c0392b;
  --feedback-danger-bg: #fbeae8;
}

/* Reelin — Typography (real brand fonts, self-hosted in assets/fonts/)
   Headings: Schibsted Grotesk (grotesque sans).
   Emphasis (<em> in headings), pull quotes & big numbers: Newsreader italic (serif).
   Body / UI / nav: Work Sans. */

/* Schibsted Grotesk — latin-ext 400 normal */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(./assets/fonts/schibsted-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Schibsted Grotesk — latin 400 normal */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(./assets/fonts/schibsted-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Newsreader — vietnamese 400 italic */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(./assets/fonts/newsreader-italic-400-italic-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Newsreader — latin-ext 400 italic */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(./assets/fonts/newsreader-italic-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader — latin 400 italic */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(./assets/fonts/newsreader-italic-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/d5608b53-e7f1-4617-a1e1-d95c8ce295bf.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/3d934fd4-e813-40a6-a2e3-58eefb6ee02f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/108ba22a-8034-4f93-a6c1-aa2b3d11addb.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/febdc16f-bba4-4aee-a9bc-bfbc8e82735f.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/ec0f29de-dd90-422d-8608-1fb9f84860e5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/cdf4c53a-9005-4134-81a7-020ed11c5f43.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/febdc16f-bba4-4aee-a9bc-bfbc8e82735f.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/ec0f29de-dd90-422d-8608-1fb9f84860e5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/cdf4c53a-9005-4134-81a7-020ed11c5f43.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/febdc16f-bba4-4aee-a9bc-bfbc8e82735f.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/ec0f29de-dd90-422d-8608-1fb9f84860e5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/cdf4c53a-9005-4134-81a7-020ed11c5f43.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/febdc16f-bba4-4aee-a9bc-bfbc8e82735f.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/ec0f29de-dd90-422d-8608-1fb9f84860e5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/cdf4c53a-9005-4134-81a7-020ed11c5f43.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --font-display: 'Schibsted Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --font-emphasis: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Work Sans', -apple-system, 'Segoe UI', sans-serif;
  /* legacy alias: any unremapped display reference falls back to headings */
  --font-serif-display: var(--font-display);

  /* Display / headline sizes — fluid: clamp() keeps the desktop size but scales
     down on small screens (the max values are the original desktop sizes). */
  --text-display-xl: 700 clamp(38px, 6.4vw, 66px)/1.04 var(--font-display);
  --text-display-lg: 700 clamp(30px, 4.6vw, 48px)/1.08 var(--font-display);
  --text-display-md: 600 clamp(25px, 3.4vw, 36px)/1.12 var(--font-display);
  --text-display-sm: 600 clamp(22px, 2.6vw, 28px)/1.18 var(--font-display);

  /* Body / UI — sans, clean, functional */
  --text-body-lg:   400 19px/1.55 var(--font-sans);
  --text-body-md:   400 16px/1.55 var(--font-sans);
  --text-body-sm:   400 14px/1.5 var(--font-sans);
  --text-label:     600 13px/1.3 var(--font-sans);
  --text-eyebrow:   600 13px/1.2 var(--font-sans);
  --text-stat:      600 40px/1 var(--font-sans);

  --tracking-eyebrow: 0.08em;
  --tracking-tight: -0.01em;
}

/* Reelin — Spacing, radius, shadow, motion tokens */
:root {
  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radius — soft, rounded, friendly (not sharp, not pill-everywhere) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadow — soft, warm, low-contrast (no harsh drop shadows) */
  --shadow-xs: 0 1px 2px rgba(23, 21, 18, 0.05);
  --shadow-sm: 0 2px 8px rgba(23, 21, 18, 0.06);
  --shadow-md: 0 8px 24px rgba(23, 21, 18, 0.08);
  --shadow-lg: 0 16px 48px rgba(23, 21, 18, 0.12);
  --shadow-focus: 0 0 0 3px rgba(126, 217, 87, 0.45);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 360ms; /* @kind other */

  /* Container */
  /* Layout: matches vosmarketing.nl — 1000px content measure inside 80px side
     gutters. The gutter scales down fluidly on smaller screens. */
  --container-max: 1160px;
  --gutter: clamp(20px, 6vw, 80px);
}



  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--surface-page); }

  /* Widow / orphan control, site-wide: balance heading lines so a single word
     never drops to its own last line, and let body copy avoid short last lines.
     Unsupported browsers simply ignore these. */
  h1, h2, h3, h4, h5 { text-wrap: balance; }
  p, li, blockquote, figcaption { text-wrap: pretty; }

  /* Keyboard focus ring (keyboard/AT only via :focus-visible, so mouse clicks stay
     clean). Green-700 clears 3:1 on both the light pages and the dark sections. */
  :focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
  /* interactive cards/tiles that toggle on tap should still show the ring cleanly */
  .proc-slot:focus-visible, .icv-tile:focus-visible { outline-offset: 3px; }
  img { max-width: 100%; }
  /* Emphasis words render in Newsreader italic; its optical size runs ~6% smaller
     than Schibsted at the same px, so compensate to make headlines read as one size. */
  h1 em, h2 em, h3 em, h4 em { font-family: var(--font-emphasis); font-style: italic; font-weight: 500; font-size: 1.06em; }
  a { color: var(--text-link); }
  a:hover { color: var(--gray-600); }
  .marquee-mask { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  /* `width: max-content` is load-bearing: without it the inline-flex box is clamped
     to the mask's width, so translateX(-50%) shifts by half the *mask* instead of
     one full logo set — the strip snaps backward every cycle. At max-content the
     track is exactly two sets wide, so -50% lands on a seamless loop point.
     Duration is tuned for ~32px/s. */
  .marquee-track { display: inline-flex; width: max-content; align-items: center; white-space: nowrap; animation: marquee 140s linear infinite; }
  .marquee-mask:hover .marquee-track { animation-play-state: paused; }
  /* Faster loop on mobile — the same 140s reads as sluggish on a narrow screen. */
  @media (max-width: 720px) { .marquee-track { animation-duration: 60s; } }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Hero entrance — elements sharpen out of a soft blur, rising into place.
     Staggered via .d1-.d4; the video layer gets a plain fade (blurring 1080p
     video is GPU-expensive and it sits behind everything anyway). */
  @keyframes hero-blur-in {
    from { opacity: 0; filter: blur(16px); transform: translateY(18px); }
    to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
  }
  @keyframes hero-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .hero-blur-in { animation: hero-blur-in 0.9s var(--ease-out) both; }
  .hero-blur-in.d1 { animation-delay: 0.10s; }
  .hero-blur-in.d2 { animation-delay: 0.28s; }
  .hero-blur-in.d3 { animation-delay: 0.50s; }
  .hero-scene-fade { animation: hero-fade-in 1.1s var(--ease-out) 0.35s both; }

  /* Site-wide scroll reveals — same rack-focus language as the hero.
     Elements get [data-reveal] from the runtime in the body script; .is-in is
     toggled by an IntersectionObserver both ways, so sections animate in on
     entry and reset when fully offscreen (replaying on the way back up).
     --reveal-delay staggers siblings inside grids. */
  [data-reveal] {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(22px);
    transition:
      opacity 0.7s var(--ease-out),
      filter 0.7s var(--ease-out),
      transform 0.7s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
  }
  [data-reveal].is-in {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
  /* Interactive lift for rounded cards (applied by the same runtime). */
  .hover-lift { transition: transform 0.7s var(--ease-out), box-shadow 0.25s var(--ease-out), opacity 0.7s var(--ease-out), filter 0.7s var(--ease-out); }
  .hover-lift.is-in:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

  /* FAQ portrait: the base cutout swaps to the caped version on hover.
     The base image is in flow (sets the size); the hero overlay is absolute
     and crossfades in. */
  .faq-portrait { position: relative; display: block; width: 100%; max-width: 360px; }
  .faq-portrait img { display: block; width: 100%; aspect-ratio: 1862 / 1930; transition: opacity 0.35s var(--ease-out); }
  .faq-portrait .faq-hero { position: absolute; inset: 0; opacity: 0; }
  /* Cross-dissolve: the base is a cutout, so it must fade OUT — merely covering
     it lets the original show through the costume image's transparent gaps. */
  .faq-portrait:hover .faq-base { opacity: 0; }
  .faq-portrait:hover .faq-hero { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .faq-portrait img { transition: none; } }

  /* Process — each step is a slot holding the founders cutout BEHIND a card.
     The photo is a sibling painted before the card, so the card's opaque white
     background truly occludes its lower half: at rest it's slid fully down
     behind the card (invisible); on hover it rises and its bottom comes to rest
     exactly on the card's top edge, emerging from behind (never over) the box.
     (A child can't sit behind its own parent's background, hence the wrapper.) */
  .proc-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 150px;      /* headroom for the peeking cutouts (they show in full) */
    margin-bottom: 48px;
  }
  .proc-slot {
    position: relative;
    z-index: 0;             /* stacking context: peek(1) behind card(2), both above the page */
    cursor: pointer;
    display: flex;          /* let the card stretch to the (equal-height) slot */
    flex-direction: column;
  }
  .proc-peek {
    position: absolute;
    left: 50%;
    bottom: 100%;                /* bottom edge sits exactly on the card's top edge */
    width: 64%;
    max-width: 190px;
    z-index: 1;                  /* behind the card (z-index 2), so it emerges from behind it */
    opacity: 0;
    transform: translate(-50%, 100%);  /* rest: slid its full height down, hidden behind the card */
    filter: drop-shadow(0 10px 14px rgba(23,21,18,0.20));
    transition: transform 0.5s var(--ease-out), opacity 0.3s var(--ease-out);
    pointer-events: none;
  }
  .proc-slot:hover .proc-peek, .proc-slot.is-active .proc-peek {
    opacity: 1;
    transform: translate(-50%, 0);   /* revealed: bottom flush with the card top */
  }
  .proc-card {
    position: relative;
    z-index: 2;             /* in front of the peek, so it occludes the hidden part */
    flex: 1;                /* fill the slot so all four cards match the tallest */
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 26px;
    min-height: 210px;
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
  }
  .proc-slot:hover .proc-card, .proc-slot.is-active .proc-card {
    border-color: var(--green-400);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
  }
  .proc-cardnum {
    position: absolute; top: 16px; right: 22px;
    font: italic 600 60px var(--font-emphasis); line-height: 1;
    color: var(--peach-100);
    transition: color var(--duration-base) var(--ease-out);
  }
  .proc-slot:hover .proc-cardnum, .proc-slot.is-active .proc-cardnum { color: var(--green-400); }
  .proc-card h3 { font: 700 17px var(--font-sans); color: var(--text-primary); margin: 62px 0 8px; }
  .proc-card p { font: var(--text-body-sm); font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0; }

  /* Keep the slots reliably visible. The site-wide scroll-reveal observer is
     laggy on this heavy page and can even toggle grid children back to
     opacity:0 while in view. Opt this section out of the fade so it always shows. */
  .proc-slot[data-reveal] { opacity: 1 !important; filter: none !important; transform: none !important; }

  @media (prefers-reduced-motion: reduce) {
    .proc-card, .proc-peek { transition: opacity 0.2s linear; }
    .proc-peek { transform: translate(-50%, 0); }
  }
  @media (max-width: 980px) { .proc-cards { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) {
    .proc-cards { grid-template-columns: 1fr; margin-top: 130px; }
    .proc-card { min-height: 0; }
  }

  /* Reelin Creative Academy — a depth-of-field photo cluster: the hero image
     anchored centre, student headshots scattered around it at sizes and blur set
     by "depth", drifting idly and fleeing the cursor like the hero's app icons.
     Positions/size are inline (% of the square stage); a rAF writes transforms. */
  .acad-cluster {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }
  .acad-photo {
    position: absolute;
    will-change: transform;
    border-radius: 14px;
    overflow: hidden;
    pointer-events: none;               /* the stage catches pointermove across its whole area */
    box-shadow: 0 14px 30px rgba(0,0,0,0.42);
    border: 1px solid rgba(255,255,255,0.10);
  }
  .acad-photo img { width: 100%; height: auto; display: block; -webkit-user-drag: none; user-select: none; }
  .acad-photo.is-hero { border-radius: 18px; box-shadow: 0 26px 64px rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.16); }
  @media (max-width: 900px) { .acad-cluster { max-width: 440px; } }
  @media (prefers-reduced-motion: reduce) { .acad-photo { transition: none; } }

  /* About Us — intro + stats, two-up founders, a four-beat origin-story timeline,
     an auto-scrolling team rail, and a closing CTA band. */
  .about-wrap { max-width: var(--container-max); margin: 0 auto; padding: 120px var(--gutter); }
  .about-intro { max-width: 640px; }
  .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 52px 0 0; }
  .about-stat .num { font: italic 600 46px/1 var(--font-emphasis); color: var(--text-primary); }
  .about-stat .lbl { font: 500 15px var(--font-sans); line-height: 1.4; color: var(--text-secondary); margin-top: 10px; }

  /* Founders: a free-standing transparent cutout (no container) sitting above a
     card that holds only the copy. Compact. */
  .about-founders { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 720px; margin: 96px auto 0; }
  /* Peach panel behind the photo (which overhangs the top for depth); the copy sits
     on a white block that fills the lower half of the container. */
  .founder-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 88px; padding: 0; background: var(--peach-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
  .founder-photo { margin-top: -88px; display: flex; justify-content: center; position: relative; z-index: 2; }
  .founder-photo img { height: 300px; width: auto; max-width: 100%; display: block; filter: drop-shadow(0 14px 20px rgba(23,21,18,.18)); }
  .founder-body { position: relative; z-index: 1; flex: 1; width: 100%; box-sizing: border-box; margin-top: 0; padding: 22px 24px 24px; background: var(--white); border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
  .founder-name { font: 700 18px var(--font-sans); color: var(--text-primary); }
  .founder-name .founder-nat { font-weight: 500; color: var(--text-secondary); }
  .founder-role { font: 600 12px var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--green-700); margin-top: 5px; }
  .founder-bio { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin-top: 12px; }
  @media (max-width: 560px) { .about-founders { max-width: 340px; } }

  /* Origin-story timeline: a centred line that draws in on scroll, with beats
     alternating left/right and sliding toward the centre as the line reaches
     them. The Timeline component's rAF scroll handler sets the .tl-fill height
     and toggles .is-active per beat. */
  .tl { position: relative; max-width: 1000px; margin: 92px auto 0; }
  /* tall element; the reveal runtime would otherwise strand it at opacity 0 */
  .tl[data-reveal] { opacity: 1 !important; filter: none !important; transform: none !important; }
  .tl-line { position: absolute; top: 4px; bottom: 4px; left: 50%; width: 2px; transform: translateX(-50%);
    background: var(--border-subtle); border-radius: 2px; overflow: hidden; }
  .tl-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0;
    background: linear-gradient(var(--green-500), var(--green-400)); }
  .tl-beat { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 76px; margin-bottom: 60px; }
  .tl-beat:last-child { margin-bottom: 0; }
  .tl-dot { position: absolute; left: 50%; top: 2px; width: 18px; height: 18px; transform: translateX(-50%);
    border-radius: 50%; background: var(--white); border: 3px solid var(--border-subtle); z-index: 2;
    transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out); }
  .tl-card { max-width: 420px; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  .tl-beat.left  .tl-card { grid-column: 1; justify-self: end;   text-align: right; opacity: 0; transform: translateX(28px); }
  .tl-beat.right .tl-card { grid-column: 2; justify-self: start; text-align: left;  opacity: 0; transform: translateX(-28px); }
  .tl-beat.is-active .tl-card { opacity: 1; transform: none; }
  .tl-beat.is-active .tl-dot { background: var(--green-400); border-color: var(--green-400); box-shadow: 0 0 0 5px rgba(126,217,87,0.22); }
  .tl-card .yr { font: 700 12px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--green-700); }
  .tl-card h4 { font: 700 19px var(--font-sans); color: var(--text-primary); margin: 5px 0 8px; }
  .tl-card p { font: var(--text-body-md); color: var(--text-secondary); margin: 0; }
  .tl-card .aside { margin-top: 16px; }
  .tl-beat.left .tl-card .aside { display: flex; justify-content: flex-end; }
  .tl-card .aside img { border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); display: block; width: 260px; max-width: 100%; }
  /* Narrow screens: drop the alternating layout to a single left-aligned column. */
  @media (max-width: 760px) {
    .tl { max-width: 100%; }
    .tl-line { left: 9px; }
    .tl-dot { left: 9px; }
    .tl-beat { grid-template-columns: 1fr; column-gap: 0; margin-bottom: 44px; }
    .tl-beat.left .tl-card, .tl-beat.right .tl-card { grid-column: 1; justify-self: start; text-align: left; padding-left: 34px; transform: translateX(-16px); }
    .tl-beat.is-active .tl-card { transform: none; }
    .tl-beat.left .tl-card .aside { justify-content: flex-start; }
    .tl-card .aside img { width: 240px; }
  }

  .team-block { border-top: 1px solid var(--border-subtle); background: var(--surface-sunken); }
  /* Static team grid — front-facing cutout cross-fades to the playful shot on
     hover (or on tap/focus, since touch has no hover). Tiles are pre-cropped to
     just below the chest so the Reelin wordmark reads at every size. */
  .team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
    max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter) 120px; }
  .team-card { text-align: center; }
  .team-card .tph { position: relative; display: block; width: 100%; aspect-ratio: 760 / 686;
    border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle);
    background: var(--peach-100); padding: 0; cursor: pointer;
    transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out); }
  .team-card .tph img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center top; display: block;
    transition: opacity .3s var(--ease-out); }
  .team-card .tph img.b { opacity: 0; }
  .team-card .tph:hover, .team-card .tph:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .team-card .tph:hover img.a, .team-card .tph:focus-within img.a, .team-card .tph:focus img.a { opacity: 0; }
  .team-card .tph:hover img.b, .team-card .tph:focus-within img.b, .team-card .tph:focus img.b { opacity: 1; }
  .team-card .tn { font: 700 15px var(--font-sans); color: var(--text-primary); margin-top: 14px; }
  .team-card .tr { font: 500 13px var(--font-sans); color: var(--text-secondary); margin-top: 2px; }
  @media (max-width: 900px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 560px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

  .about-cta { background: var(--gray-900); color: var(--white); border-radius: var(--radius-xl);
    padding: 52px 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
  .about-cta h3 { font: 600 clamp(26px, 3.4vw, 38px)/1.1 var(--font-emphasis); margin: 0; max-width: 520px; }
  .about-cta h3 em { font-style: italic; font-weight: 500; }
  .about-cta p { opacity: .72; margin: 12px 0 0; font: var(--text-body-md); }

  @media (max-width: 900px) {
    .about-stats { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
    .about-founders { grid-template-columns: 1fr; }
    .about-cta { flex-direction: column; align-items: flex-start; padding: 40px 28px; }
  }
  @media (max-width: 560px) { .about-stats { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) { .team-card .tph, .team-card .tph img { transition: none; } }

  /* --- Hero scene (code-driven, replaces the old scroll-scrubbed video) ---
     Icon motion (scroll pose + idle drift + cursor repulsion) is composed in a
     single rAF loop and written straight to each tile's transform, so there is
     deliberately no CSS animation here — a keyframe would overwrite it. */
  .hero-people { user-select: none; -webkit-user-drag: none; }

  /* --- Responsive layout ---
     The design system sets grid templates as inline styles (they win over
     classes), so these breakpoint overrides need !important. */
  @media (max-width: 980px) {
    .g-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .g-4 { grid-template-columns: repeat(2, 1fr) !important; }
  }
  @media (max-width: 900px) {
    .nav-links { display: none !important; }
    .g-2, .g-feature { grid-template-columns: 1fr !important; }
    .g-stats { grid-template-columns: repeat(2, 1fr) !important; row-gap: 40px !important; }
    /* stacked: the card grows with its content, so drop the desktop height floor */
    .g-feature { gap: 8px !important; padding: 40px 28px !important; min-height: 0 !important; }
    /* the sector photo is absolutely positioned; give it a row to live in */
    .roles-media { height: 300px; }
    .roles-media img { height: 300px !important; bottom: -40px !important; }
  }
  /* RemoteTeam — a draggable infinite canvas of team + gift photos and two
     videos. A fixed viewport (masked to fade at the sides) holds a translated
     "world" of identical tile blocks; dragging pans it and the block wrapping
     makes it endless. Hovering a tile brings it forward; videos preview on
     hover and open a lightbox on click. */
  .icv {
    position: relative;
    width: 100%;
    height: 560px;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none; -webkit-user-select: none;
    --fade: clamp(36px, 6vw, 96px);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  }
  .icv.icv-dragging { cursor: grabbing; }
  .icv-world { position: absolute; top: 0; left: 0; will-change: transform; }
  .icv-block {
    position: absolute;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(6, var(--cs));
    grid-template-rows: repeat(4, var(--cs));
    gap: var(--g);
    padding: calc(var(--g) / 2);
  }
  .icv-tile {
    position: relative;
    border: 0; padding: 0; margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--gray-100);
    box-shadow: var(--shadow-sm);
    transition: transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out);
  }
  .icv-tile img, .icv-tile video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    -webkit-user-drag: none; user-select: none; pointer-events: none;
  }
  .icv-tile:hover { transform: scale(1.14); z-index: 6; box-shadow: var(--shadow-lg); }
  .icv-dragging .icv-tile:hover { transform: none; z-index: auto; box-shadow: var(--shadow-sm); }
  .icv-play {
    position: absolute; top: 50%; left: 50%; z-index: 2; pointer-events: none;
    width: 52px; height: 52px; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(23,21,18,0.5); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    transition: transform 0.32s var(--ease-out), background 0.32s var(--ease-out), color 0.32s var(--ease-out);
  }
  .icv-play svg { margin-left: 3px; }
  .icv-video:hover .icv-play { transform: translate(-50%, -50%) scale(1.1); background: var(--green-400); color: var(--gray-900); }
  .icv-cap {
    position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 3; pointer-events: none;
    font: 500 12px var(--font-sans); color: var(--white);
    text-shadow: 0 1px 6px rgba(0,0,0,0.65);
    opacity: 0; transform: translateY(5px);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  }
  .icv-tile:hover .icv-cap { opacity: 1; transform: translateY(0); }
  .icv-hint {
    position: absolute; bottom: 16px; left: 50%; z-index: 10; pointer-events: none;
    transform: translateX(-50%);
    font: 500 12px var(--font-sans); color: var(--gray-900);
    background: rgba(255,255,255,0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: 8px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
    transition: opacity 0.5s var(--ease-out);
  }
  .icv-touched .icv-hint { opacity: 0; }

  /* click-to-expand video lightbox (portaled to <body>) */
  .bento-lightbox {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15,13,11,0.88);
    display: flex; align-items: center; justify-content: center;
    padding: 4vmin;
    animation: bento-fade 0.25s var(--ease-out);
  }
  @keyframes bento-fade { from { opacity: 0; } to { opacity: 1; } }
  .bento-lightbox-video {
    max-width: min(1100px, 94vw); max-height: 86vh; width: auto;
    border-radius: var(--radius-md); background: #000;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  }
  .bento-close {
    position: absolute; top: 20px; right: 24px;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.12); color: var(--white);
    border: 1px solid rgba(255,255,255,0.25); font-size: 17px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s var(--ease-out);
  }
  .bento-close:hover { background: rgba(255,255,255,0.25); }
  /* image sibling of .bento-lightbox-video — used by the Work lightbox */
  .bento-lightbox-img {
    max-width: min(1100px, 94vw); max-height: 86vh; width: auto;
    border-radius: var(--radius-md); box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  }
  .work-ph-lg { width: min(560px, 90vw); height: min(700px, 82vh); display: flex; align-items: flex-end; }

  /* ---- The Work — talent portfolio (work.html) ------------------------------
     A scattered, auto-scrolling band of samples; each tile click-expands into
     the shared .bento-lightbox above. Reuses the marquee idea (translateX -50%
     over a doubled track, pause on hover) with per-tile height + vertical
     scatter set inline by the component. */
  .work { position: relative; padding: 32px 0 120px; overflow: hidden; }
  .work-band { position: relative; width: 100%; }
  .work-strip {
    width: 100%; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .work-track {
    display: inline-flex; width: max-content; align-items: center; gap: 26px;
    padding: 64px 26px; animation: work-marquee 90s linear infinite;
  }
  .work-strip:hover .work-track { animation-play-state: paused; }
  @keyframes work-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  .work-tile {
    position: relative; flex: 0 0 auto; padding: 0; border: 0; cursor: pointer;
    border-radius: var(--radius-md); overflow: hidden; background: var(--peach-100);
    box-shadow: 0 12px 30px rgba(23,21,18,0.12);
    transition: box-shadow var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out);
  }
  .work-tile:hover, .work-tile:focus-visible { box-shadow: 0 22px 48px rgba(23,21,18,0.22); filter: brightness(1.02); }
  .work-media { width: 100%; height: 100%; object-fit: cover; display: block; }
  .work-ph { display: flex; align-items: flex-end; justify-content: flex-start; width: 100%; height: 100%; }
  .work-ph-tag {
    margin: 12px; font: 600 12px var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
    color: rgba(23,21,18,.5); background: rgba(255,255,255,.55); padding: 4px 11px; border-radius: var(--radius-pill);
  }
  .work-kind {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    font: 600 11px var(--font-sans); letter-spacing: .03em; color: var(--white);
    background: rgba(23,21,18,.62); padding: 4px 10px; border-radius: var(--radius-pill);
  }
  .work-play {
    position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; padding-left: 3px; color: var(--gray-900);
    background: rgba(255,255,255,.9); box-shadow: 0 6px 18px rgba(0,0,0,.28);
  }

  .work-intro { max-width: 640px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; position: relative; z-index: 2; }
  .work-eyebrow {
    display: inline-block; font: 600 13px var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
    color: var(--green-700); background: var(--peach-100); padding: 7px 16px; border-radius: var(--radius-pill); margin-bottom: 20px;
  }
  .work-title { font: 600 clamp(34px, 5vw, 54px)/1.05 var(--font-display); letter-spacing: -0.01em; margin: 0 0 18px; color: var(--gray-900); }
  .work-title em { font-family: var(--font-emphasis); font-style: italic; font-weight: 500; }
  .work-sub { font: var(--text-body-md); color: var(--text-muted); margin: 0 0 30px; }

  @media (prefers-reduced-motion: reduce) { .work-track { animation: none; } }
  @media (hover: none) {
    /* No hover to pause on touch — make the strip a native swipe instead. */
    .work-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .work-track { animation: none; }
  }
  @media (max-width: 720px) {
    .work { padding-top: 4px; padding-bottom: 84px; }
    .work-track { padding: 44px 18px; gap: 18px; }
  }

  /* ---- Built for Scaling — one aligned comparison table --------------------
     A real <table>, so every row's cells line up straight across regardless of
     how the text wraps. The Reelin column is a highlighted dark band. */
  /* headline: keep line 1 ("…choose Reelin") on one line above mobile so the
     manual <br> yields exactly two lines; on phones it wraps freely (no overflow). */
  .cmp-h2 { text-wrap: balance; }
  @media (min-width: 600px) { .cmp-h2 { white-space: nowrap; } }

  .cmp { max-width: 1040px; margin: 0 auto; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); }
  .cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .cmp-table th, .cmp-table td { padding: 15px 22px; text-align: left; vertical-align: middle; }
  .cmp-dimhead { width: 17%; background: var(--peach-50); }
  .cmp-colhead { width: 27.66%; font: 600 15px var(--font-sans); color: var(--text-primary);
    background: var(--peach-50); border-bottom: 1px solid var(--border-subtle); }
  .cmp-table tbody tr { border-top: 1px solid var(--border-subtle); }
  .cmp-dim { font: 600 12px var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted); background: var(--peach-50); }
  .cmp-in { display: flex; align-items: center; gap: 10px; }
  /* balance evens a wrapped cell into ~equal lines, so no single short word is
     left stranded on the last line */
  /* balance evens wrapped lines; min-width:0 lets the flex text shrink to the
     column, and break-word is a last-resort guard on very narrow phones so text
     never spills past the table edge. */
  .cmp-in span { text-wrap: balance; min-width: 0; overflow-wrap: break-word; }
  .cmp-cell { font: var(--text-body-md); color: var(--text-secondary); }
  .cmp-x, .cmp-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; }
  .cmp-x { background: var(--gray-100); color: var(--text-muted); font: 600 11px var(--font-sans); }
  .cmp-check { background: rgba(126,217,87,0.18); color: var(--green-700); }
  /* Highlighted Reelin column */
  .cmp-reelin { background: var(--gray-900); color: var(--white); }
  .cmp-colhead.cmp-reelin { border-bottom-color: rgba(255,255,255,0.14); }
  td.cmp-reelin { color: var(--white); }
  .cmp-reelin .cmp-check { background: rgba(126,217,87,0.22); color: var(--green-400); }
  /* name + pill on one line, so the Reelin header aligns with the other columns */
  .cmp-reelin-name { font: 600 15px var(--font-sans); vertical-align: middle; }
  .cmp-rec { display: inline-block; vertical-align: middle; margin-left: 10px;
    font: 600 10px var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
    background: var(--green-400); color: var(--gray-900);
    border-radius: var(--radius-pill); padding: 3px 9px; }
  @media (max-width: 820px) {
    /* Drop the dimension label early so the three options get the full width and
       most cells stay on one line (no stranded last word) well before phone size. */
    .cmp { border-radius: var(--radius-lg); }   /* gentler corners so content isn't crowded */
    .cmp-dimhead, .cmp-dim { display: none; }
    .cmp-colhead { width: 33.33%; }
    .cmp-table th, .cmp-table td { padding: 14px 13px; }
    /* "Reelin  Recommended" won't fit on one line in a 1/3-width column, so stack
       the badge under the name (left-aligned, no stray indent). */
    .cmp-reelin-name { display: block; }
    .cmp-rec { display: inline-block; vertical-align: baseline; margin: 6px 0 0; }
  }
  @media (max-width: 520px) {
    .cmp-table th, .cmp-table td { padding: 13px 12px; }
    .cmp-colhead, .cmp-reelin-name { font-size: 13px; }
    .cmp-cell { font-size: 13px; }
    .cmp-in { gap: 6px; }
    .cmp-x, .cmp-check { width: 17px; height: 17px; }
    .cmp-rec { font-size: 9px; padding: 2px 7px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .icv-tile, .icv-cap, .icv-play, .bento-lightbox { transition: none; animation: none; }
  }
  @media (max-width: 900px) {
    .icv { height: 440px; }
  }
  @media (max-width: 720px) {
    .g-3 { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 560px) {
    .g-4 { grid-template-columns: 1fr !important; }
  }

  /* --- Typography: no widows/orphans --- */
  /* `balance` evens out line lengths on short headings (kills the lone last word);
     `pretty` keeps a paragraph's last line from stranding a single word. */
  h1, h2, h3, h4 { text-wrap: balance; }
  p, li, blockquote { text-wrap: pretty; }

  /* --- Navigation interactivity --- */
  /* Colour lives here (not inline) so :hover can win over the inline style. */
  .nav-link {
    position: relative;
    color: var(--text-secondary);
    transition: color 260ms var(--ease-out), transform 260ms var(--ease-out);
  }
  .nav-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--green-400);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 320ms var(--ease-out);
  }
  .nav-link:hover { color: var(--text-primary); transform: translateY(-1px); }
  .nav-link:hover::after { transform: scaleX(1); }

  /* Shared "Work with us" hover — used by both the nav pill and the hero CTA.
     Button sets `transition` inline, so override the shorthand to animate the
     lift + shadow together rather than snapping. */
  .cta-lift {
    transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out),
                background-color 220ms var(--ease-out) !important;
  }
  .cta-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(23,21,18,0.22); }
  .cta-lift:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(23,21,18,0.18); }

  .nav-logo { transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
  .nav-logo:hover { opacity: 0.72; transform: translateY(-1px); }

  /* Mobile navigation — the hamburger + slide-down menu. Desktop keeps .nav-links;
     below 900px that hides and the burger opens an accessible overlay menu. */
  .nav-burger { display: none; }
  @media (max-width: 900px) {
    .nav-burger {
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; padding: 0; margin: -6px -8px -6px 0;
      background: transparent; border: none; border-radius: 12px;
      color: var(--text-primary); cursor: pointer;
    }
    .nav-burger:hover { background: rgba(23,21,18,0.06); }
  }
  .nav-scrim {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(23,21,18,0.45);
    animation: navScrimIn 0.2s var(--ease-out);
  }
  .nav-mobile {
    position: fixed; z-index: 61; top: 12px; left: 12px; right: 12px;
    background: var(--white); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl); box-shadow: 0 24px 60px rgba(23,21,18,0.28);
    padding: 12px; display: flex; flex-direction: column; gap: 4px;
    animation: navMenuIn 0.24s var(--ease-out);
  }
  .nav-mobile-top { display: flex; justify-content: flex-end; }
  .nav-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: transparent; border: none; border-radius: 12px;
    color: var(--text-primary); cursor: pointer;
  }
  .nav-close:hover { background: var(--surface-sunken); }
  .nav-mobile-link {
    display: flex; align-items: center; min-height: 52px; padding: 0 16px;
    border-radius: 14px; text-decoration: none;
    font: 600 17px var(--font-sans); color: var(--text-primary);
  }
  .nav-mobile-link:hover, .nav-mobile-link:focus-visible { background: var(--surface-sunken); }
  .nav-mobile-cta { margin-top: 10px; width: 100%; justify-content: center; }
  @keyframes navScrimIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes navMenuIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .nav-scrim, .nav-mobile { animation: none; } }

  @media (prefers-reduced-motion: reduce) {
    .hero-blur-in, .hero-scene-fade { animation: none; }
    [data-reveal] { opacity: 1; filter: none; transform: none; transition: none; }
    .nav-link, .nav-link::after, .cta-lift, .nav-logo { transition: none !important; }
    .nav-link:hover, .cta-lift:hover, .nav-logo:hover { transform: none; }
  }

  /* ===================================================================
     Customer Stories — index (stories.html) + case-study detail (story.html)
     Rebranded case studies from the legacy blog. Reuses brand tokens, the
     card + eyebrow patterns, and the peach/green accent system.
     =================================================================== */
  .cs-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
  /* Bottom breathing room so the last card grid doesn't butt against the dark
     Contact section that now follows it (index + story-detail "More stories"). */
  #stories-top, .cs-tail { padding-bottom: 104px; }
  @media (max-width: 720px) { #stories-top, .cs-tail { padding-bottom: 72px; } }
  .cs-hero { padding: 72px 0 8px; max-width: 760px; }
  .cs-hero h1 { font: var(--text-display-xl); color: var(--text-primary); margin: 0 0 18px; }
  .cs-hero p { font: var(--text-body-lg); color: var(--text-secondary); margin: 0; }
  .cs-hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
  .cs-stat { font: 600 14px var(--font-sans); color: var(--text-primary); background: var(--peach-100); border-radius: 999px; padding: 8px 16px; }

  .cs-filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 36px 0 32px; }
  .cs-filter { font: 600 14px var(--font-sans); color: var(--text-secondary); background: var(--white); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
  .cs-filter:hover { border-color: var(--gray-300); color: var(--text-primary); }
  .cs-filter.is-active { background: var(--text-primary); color: var(--white); border-color: var(--text-primary); }
  .cs-count { font: 500 14px var(--font-sans); color: var(--text-muted); margin-left: auto; align-self: center; }

  .cs-featured { display: grid; grid-template-columns: 1.25fr 0.75fr; background: var(--peach-100); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 32px; box-shadow: var(--shadow-md); }
  .cs-feat-body { padding: 40px 40px 38px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
  .cs-feat-title { font: 600 clamp(24px,3vw,32px)/1.14 var(--font-display); color: var(--text-primary); margin: 14px 0 12px; }
  .cs-feat-title a { color: inherit; text-decoration: none; }
  .cs-feat-ex { font: var(--text-body-md); color: var(--text-secondary); margin: 0 0 22px; }
  .cs-feat-metric { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px; border-left: 1px solid rgba(23,21,18,0.09); }
  .cs-feat-metric .m { font: 700 clamp(40px,5.4vw,58px)/1 var(--font-display); color: var(--green-700); }
  .cs-feat-metric .ml { font: 600 12px var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-top: 10px; }

  .cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .cs-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; text-decoration: none; }
  .cs-card-top { background: var(--peach-100); height: 108px; display: flex; align-items: center; justify-content: center; padding: 20px; }
  .cs-card-top img { max-height: 40px; max-width: 74%; width: auto; object-fit: contain; }
  .cs-wordmark { font: 600 22px var(--font-display); color: var(--gray-700); letter-spacing: -.01em; text-align: center; }
  .cs-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
  .cs-tag { align-self: flex-start; font: 600 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--green-700); background: #eef7e9; border-radius: 999px; padding: 4px 10px; margin-bottom: 12px; }
  .cs-card-title { font: 600 19px/1.25 var(--font-display); color: var(--text-primary); margin: 0 0 8px; }
  .cs-card-ex { font: 400 14px/1.55 var(--font-sans); color: var(--text-secondary); margin: 0 0 16px; }
  .cs-read { margin-top: auto; font: 600 14px var(--font-sans); color: var(--text-primary); display: inline-flex; align-items: center; gap: 6px; }
  .cs-read .arr { transition: transform .18s; }
  .cs-card:hover .cs-read .arr { transform: translateX(3px); }
  .cs-empty { grid-column: 1 / -1; text-align: center; color: var(--text-muted); font: 500 15px var(--font-sans); padding: 40px 0; }

  .cs-cta { background: var(--surface-inverse); border-radius: var(--radius-lg); padding: 48px 44px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin: 72px 0 96px; }
  .cs-cta h3 { font: var(--text-display-md); color: var(--white); margin: 0 0 6px; }
  .cs-cta h3 em { font-family: var(--font-emphasis); font-weight: 500; font-style: italic; }
  .cs-cta p { font: 400 16px var(--font-sans); color: rgba(255,255,255,0.7); margin: 0; }

  .cs-detail { padding-top: 40px; }
  .cs-crumb { font: 500 14px var(--font-sans); color: var(--text-muted); margin-bottom: 22px; }
  .cs-crumb a { color: var(--text-muted); text-decoration: none; }
  .cs-crumb a:hover { color: var(--text-primary); }
  /* Prominent "back to all stories" affordance on the case-study detail page. */
  .cs-back { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--font-sans);
    color: var(--text-primary); background: var(--white); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill); padding: 9px 18px 9px 15px; text-decoration: none;
    margin-bottom: 24px; transition: background .18s, border-color .18s, transform .18s; }
  .cs-back:hover, .cs-back:focus-visible { background: var(--peach-50); border-color: var(--gray-300); }
  .cs-back:hover { transform: translateX(-2px); }
  .cs-title-block { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: stretch; margin-bottom: 44px; }
  .cs-tb-text { display: flex; flex-direction: column; justify-content: center; }
  .cs-tb-text h1 { font: var(--text-display-lg); color: var(--text-primary); margin: 14px 0 16px; }
  .cs-byline { font: 500 15px var(--font-sans); color: var(--text-muted); }
  .cs-tb-panel { background: var(--peach-100); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 32px; text-align: center; box-shadow: var(--shadow-sm); }
  .cs-tb-panel img { max-height: 56px; max-width: 70%; width: auto; object-fit: contain; }
  .cs-tb-panel .cs-wordmark { font-size: 30px; color: var(--gray-800); }
  .cs-panel-role { font: 600 12px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--green-700); }

  .cs-meta { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; margin-bottom: 52px; }
  .cs-meta-item { background: var(--white); padding: 18px 20px; }
  .cs-meta-item .k { font: 600 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
  .cs-meta-item .v { font: 600 15px var(--font-sans); color: var(--text-primary); }

  .cs-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 52px; border-radius: var(--radius-lg); overflow: hidden; background: #000; box-shadow: var(--shadow-md); }
  .cs-video iframe, .cs-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }

  .cs-body { max-width: 720px; margin: 0 auto; }
  .cs-body h2 { font: var(--text-display-sm); color: var(--text-primary); margin: 40px 0 14px; }
  .cs-body h2.first { margin-top: 0; }
  .cs-body p { font: var(--text-body-md); color: var(--text-secondary); margin: 0 0 16px; }
  .cs-talent { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; }
  .cs-talent .t { font: 600 13px var(--font-sans); color: var(--green-700); background: #eef7e9; border-radius: 999px; padding: 7px 14px; }
  .cs-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 8px; }
  .cs-metric { background: var(--peach-50); border: 1px solid var(--peach-100); border-radius: 14px; padding: 22px 18px; text-align: center; }
  .cs-metric .m { font: 700 34px/1 var(--font-display); color: var(--green-700); }
  .cs-metric .ml { font: 500 13px var(--font-sans); color: var(--text-secondary); margin-top: 8px; }
  .cs-quote { border-left: 3px solid var(--green-600); padding: 6px 0 6px 24px; margin: 32px 0; }
  .cs-quote blockquote { font: 500 22px/1.5 var(--font-emphasis); font-style: italic; color: var(--text-primary); margin: 0 0 12px; }
  .cs-quote .cite { font: 600 14px var(--font-sans); color: var(--text-primary); }
  .cs-quote .cite span { font-weight: 400; color: var(--text-muted); }

  .cs-related-h { font: var(--text-display-sm); color: var(--text-primary); margin: 88px 0 24px; }

  @media (max-width: 900px) {
    .cs-featured { grid-template-columns: 1fr; }
    .cs-feat-metric { flex-direction: row; align-items: center; gap: 14px; padding: 24px 40px; border-left: none; border-top: 1px solid rgba(23,21,18,0.09); }
    .cs-grid { grid-template-columns: repeat(2, 1fr); }
    .cs-title-block { grid-template-columns: 1fr; }
    .cs-tb-panel { padding: 32px; }
    .cs-meta { grid-template-columns: repeat(2, 1fr); }
    .cs-cta { padding: 36px 28px; }
  }
  @media (max-width: 560px) {
    .cs-grid { grid-template-columns: 1fr; }
    .cs-metrics { grid-template-columns: 1fr; }
    .cs-meta { grid-template-columns: 1fr; }
    .cs-feat-body { padding: 28px 24px; }
    .cs-count { display: none; }
  }

  /* ===================================================================
     Site footer — brand column + grouped link columns, then a divided
     bottom bar for the legal line. Replaces the old single flat row.
     =================================================================== */
  .site-footer { background: var(--gray-900); color: var(--white); border-top: 1px solid var(--gray-800); }
  .footer-top { max-width: var(--container-max); margin: 0 auto; padding: 64px var(--gutter) 48px;
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px 32px; }
  .footer-logo { height: 22px; display: block; }
  .footer-tagline { font: 400 14px/1.65 var(--font-sans); color: var(--gray-400);
    margin: 18px 0 24px; max-width: 40ch; }
  .footer-col h4 { font: 600 12px var(--font-sans); letter-spacing: .09em; text-transform: uppercase;
    color: var(--gray-400); margin: 0 0 16px; }
  .footer-col { display: flex; flex-direction: column; align-items: flex-start; }
  .footer-col a { font: 500 14px var(--font-sans); color: var(--gray-300); text-decoration: none;
    padding: 5px 0; transition: color .18s var(--ease-out); }
  .footer-col a:hover, .footer-col a:focus-visible { color: var(--white); }

  .footer-bottom { max-width: var(--container-max); margin: 0 auto; padding: 24px var(--gutter) 40px;
    border-top: 1px solid var(--gray-800); display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 10px 28px; }
  .footer-copy { display: flex; flex-direction: column; gap: 3px;
    font: 400 13px var(--font-sans); color: var(--gray-400); }
  .footer-addr { color: var(--gray-500); }
  .footer-legal { display: flex; gap: 22px; flex-shrink: 0; }
  .footer-legal a { color: var(--gray-300); text-decoration: none; font: 500 13px var(--font-sans); }
  .footer-legal a:hover, .footer-legal a:focus-visible { color: var(--white); text-decoration: underline; }

  @media (max-width: 900px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding-top: 52px; }
    .footer-brand { grid-column: 1 / -1; }
  }
  @media (max-width: 560px) {
    .footer-bottom { flex-direction: column; align-items: flex-start; }
  }

  /* Legal pages (terms.html / privacy.html) — reuse the Stories prose column */
  .legal-back { padding: 40px 0 0; }
  .legal-back a { font: 600 14px var(--font-sans); color: var(--text-muted); text-decoration: none; }
  .legal-back a:hover, .legal-back a:focus-visible { color: var(--text-primary); }
  .legal-foot { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--border-subtle);
    display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  .legal-foot a { font: 600 15px var(--font-sans); color: var(--green-700); text-decoration: none; }
  .legal-foot a:hover, .legal-foot a:focus-visible { text-decoration: underline; }
  .legal-hero { padding: 24px 0 8px; max-width: 760px; }
  .legal-hero h1 { font: var(--text-display-lg); color: var(--text-primary); margin: 0 0 14px; }
  .legal-hero .legal-updated { font: 500 14px var(--font-sans); color: var(--text-muted); }
  .legal-body { max-width: 760px; margin: 0 auto 96px; padding-top: 32px; }
  .legal-body h2 { font: var(--text-display-sm); color: var(--text-primary); margin: 40px 0 12px; }
  .legal-body h2.first { margin-top: 0; }
  .legal-body p { font: var(--text-body-md); color: var(--text-secondary); margin: 0 0 14px; }
  .legal-body ul { margin: 0 0 16px; padding-left: 22px; }
  .legal-body li { font: var(--text-body-md); color: var(--text-secondary); margin-bottom: 8px; }
  .legal-body a { color: var(--green-700); }
  .legal-note { background: var(--peach-50); border: 1px solid var(--peach-100); border-radius: 14px;
    padding: 18px 20px; margin: 0 0 8px; font: 400 15px/1.6 var(--font-sans); color: var(--text-secondary); }

  /* Footer social icons (inside the brand column) */
  .footer-social { display: flex; gap: 10px; }
  .footer-social a { color: var(--gray-300); display: inline-flex; align-items: center;
    justify-content: center; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--gray-800); transition: color .2s var(--ease-out),
    border-color .2s var(--ease-out), background .2s var(--ease-out); }
  .footer-social a:hover, .footer-social a:focus-visible {
    color: var(--gray-900); background: var(--white); border-color: var(--white); }


/* ==== 404 not-found page (static, CSP-safe: styled by classes, no inline styles) ==== */
.nf-body{min-height:100vh;margin:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 80% 0%, #f6e3d9 0%, #fdf8f5 55%);
  font-family:'Work Sans',system-ui,-apple-system,sans-serif;color:#171512;padding:32px;}
.nf-wrap{max-width:560px;text-align:center;}
.nf-logo{display:inline-block;margin-bottom:40px;}
.nf-logo img{height:34px;width:auto;}
.nf-code{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:500;
  font-size:96px;line-height:1;color:#ffbf00;margin:0 0 4px;}
.nf-title{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;
  font-size:clamp(30px,5vw,42px);line-height:1.08;letter-spacing:-0.02em;margin:0 0 16px;}
.nf-sub{font-size:18px;line-height:1.55;color:#5a544c;margin:0 0 36px;}
.nf-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.nf-btn{display:inline-block;padding:14px 26px;border-radius:999px;font-weight:600;
  font-size:16px;text-decoration:none;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;}
.nf-btn-primary{background:#171512;color:#fdf8f5;}
.nf-btn-primary:hover{background:#2a261f;transform:translateY(-1px);}
.nf-btn-ghost{background:transparent;color:#171512;border:1.5px solid #e6b899;}
.nf-btn-ghost:hover{border-color:#171512;transform:translateY(-1px);}