:root{
    --ink: #ffffff;
    --muted: rgba(255,255,255,.72);
    --faint: rgba(255,255,255,.45);
    --line: rgba(255,255,255,.30);
    --ease: cubic-bezier(.7,0,.2,1);

    /* -- Unified type scale (fixed px) --------------------------
       One ladder of font sizes shared across every page. Use these
       tokens instead of hard-coded px values so text stays consistent
       site-wide. Sizes are FIXED px -- no clamp(), no vw scaling --
       and are restepped at the two breakpoints below so headings stay
       readable on tablet/phone. Role-named, smallest -> largest. */
    --fs-eyebrow: 13px;   /* uppercase labels, badges, captions */
    --fs-xs:      14px;   /* fine print, meta, footnotes */
    --fs-sm:      15px;   /* small / secondary body */
    --fs-base:    16px;   /* standard body copy */
    --fs-md:      18px;   /* lead / large body */
    --fs-lg:      20px;   /* large lead */
    --fs-xl:      24px;   /* h3 -- every <h3> on the site */
    --fs-2xl:     30px;   /* non-heading display / decorative */
    --fs-3xl:     48px;   /* h1 + h2 -- every <h1> and <h2> on the site */
    --fs-4xl:     72px;   /* large display (non-heading) */
    --fs-5xl:     104px;  /* hero display (non-heading) */
    --fs-6xl:     180px;  /* mega watermark display */
  }

  /* Same ladder, restepped per breakpoint -- still fixed px, never fluid. */
  @media (max-width:1200px){
    :root{
      --fs-eyebrow:12px;  --fs-xs:13px;   --fs-sm:14px;    --fs-base:15px;
      --fs-md:16px;       --fs-lg:18px;   --fs-xl:21px;    --fs-2xl:26px;
      --fs-3xl:38px;      --fs-4xl:52px;  --fs-5xl:72px;   --fs-6xl:120px;
    }
  }
  @media (max-width:700px){
    :root{
      --fs-eyebrow:11px;  --fs-xs:12px;   --fs-sm:13px;    --fs-base:14px;
      --fs-md:15px;       --fs-lg:16px;   --fs-xl:18px;    --fs-2xl:22px;
      --fs-3xl:28px;      --fs-4xl:34px;  --fs-5xl:44px;   --fs-6xl:60px;
    }
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{background:#000000;color:var(--ink);font-family:'Inter',system-ui,sans-serif;}
  /* NOTE: `scroll-behavior:smooth` removed — it breaks GSAP ScrollTrigger's pin
     position-restore during refresh() (the reel pin desynced by its spacer height,
     rendering a black gap). Smooth anchor scrolling is done in JS instead. */
  body{min-height:100vh;overflow-x:hidden;}
  a{color:inherit;text-decoration:none;}
  img{display:block;}

  /* ---------- Pin wrapper: scroll length controls the slider ---------- */
  .scene{height:100vh;position:relative;}
  .hero{
    position:relative;height:100vh;width:100vw;overflow:hidden;
  }

  /* ---------- Slide track ---------- */
  .track{
    position:absolute;inset:0;display:flex;width:300vw;height:100%;
    will-change:transform;
  }
  .slide{
    position:relative;width:100vw;height:100%;flex:0 0 100vw;overflow:hidden;
  }
  .slide__bg{
    position:absolute;inset:0;background-size:cover;background-position:center;
    transform:scale(1.12);will-change:transform;
  }
  .slide__bg::after{ /* readability + color grade */
    content:"";position:absolute;inset:0;
  }
  .slide--1 .slide__bg::after{background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.40) 38%,rgba(0,0,0,.20) 70%,rgba(0,0,0,.60) 100%);}
  .slide--2 .slide__bg::after{background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.38) 38%,rgba(0,0,0,.22) 70%,rgba(0,0,0,.62) 100%);}
  .slide--3 .slide__bg::after{background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.42) 38%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.66) 100%);}

  .slide--1{background:#0a0a0a;}
  .slide--2{background:#070707;}
  .slide--3{background:#050505;}

  /* ---------- Slide copy ---------- */
  .copy{
    position:absolute;left:max(5vw,40px);top:50%;transform:translateY(-50%);
    max-width:760px;z-index:3;
  }
  .eyebrow{
    font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.28em;text-transform:uppercase;
    margin-bottom:18px;
  }
  .title{
    font-family:'Anton',sans-serif;font-weight:400;
    font-size:var(--fs-3xl);line-height:1.05;letter-spacing:.01em;
    text-transform:uppercase;margin-bottom:26px;
  }
  .desc{
    font-size:var(--fs-md);line-height:1.7;color:var(--muted);
    max-width:440px;margin-bottom:42px;font-weight:400;
  }
  .look{
    display:inline-flex;align-items:center;gap:16px;font-size:var(--fs-base);font-weight:500;
  }
  .look .dot{
    width:9px;height:9px;border:1.5px solid var(--ink);border-radius:50%;
    transition:.4s var(--ease);
  }
  .look span{position:relative;padding-bottom:4px;}
  .look span::after{
    content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--ink);
    transform-origin:left;transition:transform .4s var(--ease);
  }
  .look:hover .dot{background:var(--ink);transform:scale(1.25);}
  .look:hover span::after{transform:scaleX(0);transform-origin:right;}

  /* reveal animation hooks */
  .anim{opacity:0;transform:translateY(40px);}

  /* ---------- Top nav ---------- */
  .nav{
    position:fixed;top:0;left:0;width:100%;z-index:20;
    display:flex;align-items:center;justify-content:space-between;
    padding:26px max(5vw,40px);
  }
  .nav::before{
    content:"";position:absolute;left:0;right:0;top:0;bottom:-70px;
    z-index:-1;pointer-events:none;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    background:linear-gradient(to bottom,rgba(0,0,0,.14),rgba(0,0,0,0));
    -webkit-mask-image:linear-gradient(to bottom,#000 35%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 35%,transparent 100%);
  }
  .logo{
    display:grid;place-items:center;
  }
  .logo img{grid-area:1/1;height:clamp(46px,4vw,60px);width:auto;display:block;transition:opacity .35s var(--ease);}
  .logo .logo-dark{opacity:0;}              /* black logo hidden on dark sections */
  body.nav-light .logo .logo-light{opacity:0;}
  body.nav-light .logo .logo-dark{opacity:1;}
  .menu{display:flex;gap:40px;list-style:none;}
  .menu__close-item{display:none;}            /* close button only appears in the mobile overlay */
  /* all-caps nav links, matching the LID Group nav treatment */
  .menu a{font-weight:700;font-size:var(--fs-base);text-transform:uppercase;
    letter-spacing:.12em;opacity:.92;transition:opacity .3s;}
  .menu a:hover{opacity:.55;}
  /* active link → brand color. On dark nav the brand red is low-contrast, so use a
     brighter red; on light-nav sections keep the true brand red. */
  .menu a.is-active{color:#E23B41;opacity:1;}
  body.nav-light .menu a.is-active{color:#AE1F24;}
  /* per-letter wave: each glyph rises into place, staggered across the word */
  .menu a .wch{display:inline-block;will-change:transform,opacity;}
  /* six top-level items + all-caps tracking runs into the logo on narrow desktops,
     so tighten the row between the mobile breakpoint and full width */
  @media (min-width:761px) and (max-width:1150px){
    .menu{gap:clamp(16px,2.4vw,34px);}
    .menu a{font-size:clamp(12px,1.15vw,15px);letter-spacing:.07em;}
  }
  /* a single collapsed-state indicator: two short stacked bars centred in the nav,
     shown when the menu text hides on scroll-down */
  .navbars{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scaleX(0);
    transform-origin:center;opacity:0;pointer-events:none;
    transition:transform .35s var(--ease),opacity .3s var(--ease);
  }
  .navbars i{display:block;width:120px;height:2px;border-radius:2px;background:var(--ink);}
  .navbars i + i{margin-top:5px;}
  body.nav-collapsed .navbars{transform:translate(-50%,-50%) scaleX(1);opacity:.9;}
  .tools{display:flex;align-items:center;gap:26px;}
  .icon-btn{background:none;border:0;color:var(--ink);cursor:pointer;display:grid;place-items:center;opacity:.92;transition:color .35s var(--ease),opacity .3s,transform .3s;}
  .icon-btn:hover{opacity:.6;transform:scale(1.08);}
  .icon-btn svg{width:24px;height:24px;}

  /* nav theme: dark text/icons when the nav sits over a light section */
  .menu a{transition:color .35s var(--ease),opacity .3s;}
  .navbars i{transition:background-color .35s var(--ease);}
  .burger span{transition:background-color .35s var(--ease),transform .35s var(--ease);}
  body.nav-light .menu a{color:#000;}
  body.nav-light .icon-btn{color:#000;}
  body.nav-light .burger span{background:#000;}
  body.nav-light .navbars i{background:#000;}

  /* hamburger (hidden on desktop) */
  .burger{display:none;width:30px;height:22px;position:relative;}
  .burger span{position:absolute;left:0;width:100%;height:2px;background:var(--ink);border-radius:2px;transition:.35s var(--ease);}
  .burger span:nth-child(1){top:0;}
  .burger span:nth-child(2){top:50%;transform:translateY(-50%);}
  .burger span:nth-child(3){bottom:0;}
  body.menu-open .burger span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg);}
  body.menu-open .burger span:nth-child(2){opacity:0;}
  body.menu-open .burger span:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg);}

  /* ---------- Bottom controls ---------- */
  .controls{
    position:absolute;left:0;bottom:0;width:100%;z-index:10;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 max(5vw,40px) 46px;
  }
  .arrow{
    width:64px;height:64px;border-radius:50%;background:none;border:0;cursor:pointer;
    color:var(--ink);display:grid;place-items:center;transition:.4s var(--ease);
  }
  .arrow svg{width:42px;height:42px;stroke-width:1.6;}
  .arrow:hover{background:rgba(255,255,255,.12);}
  .arrow.is-dim{opacity:.4;}

  .pager{
    display:flex;align-items:center;gap:22px;font-weight:700;font-size:var(--fs-lg);
    flex:1;max-width:680px;margin:0 6vw;
  }
  .pager .num{min-width:34px;text-align:center;font-variant-numeric:tabular-nums;}
  .pager .num.cur{color:var(--ink);}
  .pager .num.total{color:var(--faint);}
  .bar{position:relative;flex:1;height:2px;background:rgba(255,255,255,.28);overflow:hidden;}
  .bar__fill{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--ink);
    transform:scaleX(.33);transform-origin:left;will-change:transform;}

  /* ---------- scroll hint ---------- */
  .hint{
    position:absolute;left:50%;bottom:118px;transform:translateX(-50%);z-index:9;
    font-size:var(--fs-eyebrow);letter-spacing:.25em;text-transform:uppercase;color:var(--faint);
    animation:floaty 2.2s var(--ease) infinite;
  }
  @keyframes floaty{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

  /* ---------- after-hero filler so the page can scroll naturally ---------- */
  .outro{min-height:100vh;background:#000000;display:grid;place-items:center;padding:80px 20px;text-align:center;}
  .outro h2{font-family:'Anton',sans-serif;font-size:var(--fs-4xl);text-transform:uppercase;opacity:.9;}
  .outro p{color:var(--faint);margin-top:16px;letter-spacing:.2em;text-transform:uppercase;font-size:var(--fs-eyebrow);}

  @media (max-width:760px){
    .hint{display:none;}
    .burger{display:grid;}
    .pager{margin:0 4vw;font-size:var(--fs-base);}
    .arrow{width:52px;height:52px;}
    .copy{max-width:88vw;}

    /* full-screen slide-in menu */
    .menu{
      position:fixed;inset:0;z-index:15;
      flex-direction:column;justify-content:center;align-items:center;gap:34px;
      background:rgba(0,0,0,.96);backdrop-filter:blur(14px);
      transform:translateX(100%);transition:transform .5s var(--ease);
      pointer-events:none;
    }
    body.menu-open .menu{transform:translateX(0);pointer-events:auto;}
    .menu a{font-size:var(--fs-xl);font-weight:600;}
    /* overlay is always dark — keep links white even when nav-light is active */
    body.menu-open .menu a{color:#fff;}
    /* no scroll-collapse "wave" inside the mobile sidebar — letters always sit still & visible */
    .menu a .wch{transform:none !important;opacity:1 !important;}
    /* the two-bar collapsed indicator belongs to the desktop nav only */
    .navbars{display:none !important;}

    /* close (X) button inside the slide-in menu */
    .menu__close-item{display:block;position:absolute;top:22px;right:max(5vw,24px);margin:0;}
    .menu__close{
      display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
      background:none;border:1.5px solid rgba(255,255,255,.35);color:#fff;cursor:pointer;
      transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
    }
    .menu__close svg{width:24px;height:24px;}
    .menu__close:hover{color:#AE1F24;border-color:#AE1F24;transform:rotate(90deg);}

    /* the in-overlay close button replaces the burger while the menu is open */
    body.menu-open .burger{opacity:0;pointer-events:none;}
  }

  /* ---------- What We Do ---------- */
  .whatwedo{
    background:#ffffff;color:#000000;
    padding:clamp(56px,7vw,96px) 24px clamp(8px,1vw,14px);
    position:relative;z-index:2;
  }
  .ww__inner{max-width:1180px;margin:0 auto;text-align:center;}
  .ww__eyebrow{
    font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.28em;text-transform:uppercase;
    color:#9aa0a6;margin-bottom:clamp(28px,4vw,46px);
  }
  .ww__title{
    font-family:'Inter',sans-serif;font-weight:700;
    font-size:var(--fs-2xl);line-height:1.2;letter-spacing:-.02em;
    color:#000000;max-width:1000px;margin:0 auto;
  }
  .ww__title span{color:#AE1F24;}
  .ww__title span.is-typing::after{
    content:'';display:inline-block;width:.06em;height:1em;
    background:#AE1F24;margin-left:.06em;vertical-align:-.12em;
    animation:wwBlink .7s steps(1) infinite;
  }
  @keyframes wwBlink{50%{opacity:0;}}
  .ww__person{margin-top:clamp(48px,7vw,80px);}
  .ww__name{font-weight:700;font-size:var(--fs-md);color:#000000;}
  .ww__role{margin-top:10px;color:#9aa0a6;font-size:var(--fs-base);}

  /* reveal hooks for the light section */
  .ww-anim{opacity:0;transform:translateY(36px);}

  /* ---------- Focus Carousel ---------- */
  .cara{
    --cw:clamp(300px,50vw,820px);   /* base = the BIG side slides */
    --gap:clamp(20px,3.5vw,56px);
    --mid:.74;                       /* scale of the smaller middle slide (focus zoom on slide change) */
    position:relative;color:#000000;
    background:#f2f2f2;
    padding:clamp(72px,10vw,150px) 0 clamp(72px,10vw,150px);
    overflow:hidden;z-index:2;
  }
  .cara__head{
    max-width:1180px;margin:0 auto clamp(36px,5vw,68px);
    padding:0 max(5vw,24px);text-align:center;
  }
  .cara__eyebrow{
    font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.28em;text-transform:uppercase;
    color:#9aa0a6;margin-bottom:clamp(14px,2vw,22px);
  }
  .cara__heading{
    font-family:'Inter',sans-serif;font-weight:800;
    font-size:var(--fs-3xl);line-height:1.05;letter-spacing:-.03em;color:#000000;
  }
  .cara__viewport{position:relative;width:100%;overflow:hidden;}
  /* cursor-following hover badge over the carousel images */
  .cara__cursor{
    position:absolute;top:0;left:0;z-index:4;
    width:60px;height:60px;border-radius:50%;
    border:2px solid #AE1F24;background:rgba(174,31,36,.12);backdrop-filter:blur(2px);
    display:grid;place-items:center;color:#AE1F24;
    transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none;
    transition:opacity .3s var(--ease),transform .35s var(--ease);
    will-change:transform,left,top;
  }
  .cara__cursor svg{width:22px;height:22px;}
  .cara__cursor.is-on{opacity:1;transform:translate(-50%,-50%) scale(1);}
  .cara__track{display:flex;gap:var(--gap);will-change:transform;cursor:grab;}
  .cara__track.is-dragging{cursor:grabbing;}
  .cara__track.is-dragging img{pointer-events:none;}
  .cara__viewport{user-select:none;-webkit-user-select:none;}
  .cslide{flex:0 0 var(--cw);width:var(--cw);}
  .cslide__media{
    position:relative;width:100%;aspect-ratio:7/5;overflow:hidden;
    background:#dfe3e6;box-shadow:0 34px 64px -34px rgba(20,30,50,.42);
    transform:scale(1);transition:transform .7s var(--ease);
  }
  .cslide__media img{width:100%;height:100%;object-fit:cover;display:block;
    cursor:pointer;transition:transform .6s var(--ease);}
  /* zoom the image in while hovering (within its own frame) */
  .cslide__media:hover img{transform:scale(1.18);}
  /* middle (active) slide is the SMALL one; sides stay big */
  .cslide.is-active .cslide__media{transform:scale(var(--mid));}

  /* per-card text block (below the image) — matches its image's width/position */
  .cslide__info{
    padding:clamp(18px,2vw,26px) 4px 0;width:100%;margin:0 auto;
    transition:width .7s var(--ease);
  }
  /* active (centred) slide is scaled to --mid, so its text matches that width */
  .cslide.is-active .cslide__info{width:calc(var(--mid) * 100%);}
  .cslide__titlerow{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    margin-bottom:clamp(10px,1.2vw,16px);
  }
  .cslide__title{
    font-family:'Inter',sans-serif;font-weight:800;
    font-size:var(--fs-xl);letter-spacing:-.02em;color:#000000;
  }
  .cslide__num{
    font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;
    color:#c2c6cb;font-size:var(--fs-lg);flex:0 0 auto;
  }
  .cslide__desc{
    font-size:var(--fs-base);line-height:1.65;color:#5a6068;
    margin-bottom:clamp(16px,1.6vw,22px);
  }
  .cslide__link{
    display:inline-flex;align-items:center;gap:10px;
    font-weight:700;font-size:var(--fs-sm);letter-spacing:.01em;color:#AE1F24;
  }
  .cslide__link span{transition:transform .35s var(--ease);}
  .cslide__link:hover span{transform:translateX(6px);}

  /* side arrows */
  .cara__nav{
    position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:100%;display:flex;align-items:center;justify-content:space-between;
    padding:0 clamp(12px,2.4vw,40px);pointer-events:none;z-index:5;
  }
  .cara__arrow{
    pointer-events:auto;border:0;cursor:pointer;color:#000000;
    width:clamp(48px,5vw,62px);height:clamp(48px,5vw,62px);border-radius:50%;
    background:rgba(255,255,255,.82);backdrop-filter:blur(6px);
    box-shadow:0 10px 28px -12px rgba(20,30,50,.55);
    display:grid;place-items:center;
    transition:transform .35s var(--ease),opacity .35s var(--ease),background .35s var(--ease);
  }
  .cara__arrow svg{width:24px;height:24px;stroke-width:1.5;}
  .cara__arrow:hover{background:#ffffff;}
  .cara__arrow.cprev:hover{transform:translateX(-4px);}
  .cara__arrow.cnext:hover{transform:translateX(4px);}

  /* caption (centred under the small middle slide) */
  .cara__cap{
    margin:clamp(22px,2.8vw,38px) auto 0;
    display:flex;align-items:baseline;justify-content:center;gap:18px;text-align:center;
  }
  .cara__name{font-weight:700;font-size:var(--fs-xl);letter-spacing:-.01em;color:#000000;}
  .cara__idx{
    font-weight:600;font-size:var(--fs-xl);color:#c2c6cb;
    font-variant-numeric:tabular-nums;letter-spacing:.02em;
  }
  .cara-anim{opacity:0;transform:translateY(30px);}

  @media (max-width:760px){
    .cara{--cw:72vw;--gap:5vw;--mid:.74;}
    .cara__arrow{width:46px;height:46px;}
  }

  /* ---------- Political Career timeline ---------- */
  .career{
    background:#f4f4f4;color:#000000;
    padding:clamp(72px,10vw,150px) max(5vw,24px);
    position:relative;z-index:2;
  }
  .career__inner{
    max-width:1180px;margin:0 auto;
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(48px,7vw,120px);align-items:start;
  }
  .career__intro{position:sticky;top:clamp(80px,12vh,140px);}
  .career__eyebrow{
    font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.28em;text-transform:uppercase;
    color:#9aa0a6;margin-bottom:clamp(18px,2.6vw,28px);
  }
  .career__title{
    font-family:'Inter',sans-serif;font-weight:800;
    font-size:var(--fs-3xl);line-height:1.0;letter-spacing:-.035em;
    color:#000000;margin-bottom:clamp(22px,3vw,34px);
  }
  .career__desc{
    font-size:var(--fs-md);line-height:1.7;color:#9aa0a6;max-width:32ch;
  }

  /* timeline list */
  .tl{list-style:none;}
  .tl__item{
    display:grid;grid-template-columns:64px 1fr;gap:clamp(24px,3vw,42px);
    padding-bottom:clamp(40px,5vw,66px);
  }
  .tl__item:last-child{padding-bottom:0;}
  .tl__media{position:relative;display:flex;justify-content:center;}
  .tl__icon{
    width:64px;height:64px;border-radius:50%;background:#fff;color:#000000;
    display:grid;place-items:center;flex:0 0 auto;position:relative;z-index:2;
    box-shadow:0 18px 38px -20px rgba(20,30,50,.40);
    transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  }
  .tl__icon svg{width:26px;height:26px;stroke-width:1.6;}
  .tl__img{width:34px;height:34px;object-fit:contain;display:block;}
  .tl__item:hover .tl__icon{transform:translateY(-3px);box-shadow:0 26px 46px -20px rgba(20,30,50,.5);}
  /* dashed connector down to the next icon */
  .tl__item:not(:last-child) .tl__media::after{
    content:"";position:absolute;left:50%;top:72px;
    bottom:calc(-1 * clamp(40px,5vw,66px));
    border-left:1.5px dashed #c9cccf;transform:translateX(-50%);
  }
  .tl__label{
    font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    color:#AE1F24;margin-bottom:10px;
  }
  .tl__heading{
    font-weight:700;font-size:var(--fs-xl);line-height:1.2;
    letter-spacing:-.01em;color:#000000;margin-bottom:clamp(12px,1.5vw,18px);
  }
  .tl__text{
    font-size:var(--fs-base);line-height:1.7;color:#9aa0a6;max-width:44ch;
  }
  .tl-anim{opacity:0;transform:translateY(36px);}

  @media (max-width:860px){
    .career__inner{grid-template-columns:1fr;gap:clamp(40px,8vw,60px);}
    .career__intro{position:static;}
    .career__desc{max-width:46ch;}
  }
  @media (max-width:560px){
    .tl__item{grid-template-columns:52px 1fr;gap:18px;}
    .tl__icon{width:52px;height:52px;}
    .tl__icon svg{width:22px;height:22px;}
    .tl__img{width:28px;height:28px;}
    .tl__item:not(:last-child) .tl__media::after{top:58px;}
  }

  /* ---------- Capabilities reel (pinned horizontal scroll) ---------- */
  .reel{background:#000;position:relative;z-index:2;}
  .reel__stage{position:relative;height:100vh;overflow:hidden;}
  .reel__bg{
    position:absolute;inset:0;
    background-size:cover;background-position:center;
  }
  .reel__overlay{
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.12) 38%,rgba(0,0,0,.34) 100%);
  }
  .reel__title{
    position:absolute;top:50%;left:0;transform:translateY(-50%);
    margin:0;z-index:2;white-space:nowrap;color:#ffffff;
    font-family:'Anton',sans-serif;font-weight:400;
    font-size:var(--fs-6xl);line-height:.86;letter-spacing:.012em;
    text-transform:uppercase;will-change:transform;pointer-events:none;
    opacity:.55;text-shadow:0 6px 40px rgba(0,0,0,.25);
  }
  .reel__track{
    position:absolute;top:0;left:0;width:100%;z-index:3;
    display:flex;flex-direction:column;
    gap:clamp(40px,7vw,110px);
    padding:34vh max(5vw,24px);
    will-change:transform;
  }
  .reel__card{
    flex:0 0 auto;width:clamp(290px,33vw,460px);aspect-ratio:3/2;
    background:#f7f5f1;color:#0c0c0c;
    padding:0;overflow:hidden;
    box-shadow:0 34px 80px rgba(0,0,0,.30);
  }
  .reel__card-img{
    display:block;width:100%;height:100%;
    aspect-ratio:3/2;object-fit:cover;
  }
  .reel__card:nth-child(odd){align-self:flex-end;}
  .reel__card:nth-child(even){align-self:flex-start;}
  .reel__ico{display:block;width:clamp(54px,4vw,68px);height:clamp(54px,4vw,68px);color:#0c0c0c;}
  .reel__ico svg{width:100%;height:100%;display:block;}
  .reel__card-title{
    font-family:'Inter',sans-serif;font-weight:800;text-transform:uppercase;
    font-size:var(--fs-xl);letter-spacing:.012em;line-height:1.1;
    margin:clamp(26px,2.2vw,40px) 0 0;
  }
  .reel__rule{display:block;height:1px;background:rgba(0,0,0,.16);margin:clamp(18px,1.5vw,26px) 0;}
  .reel__card-text{
    font-family:'Inter',sans-serif;font-weight:500;text-transform:uppercase;
    font-size:var(--fs-base);line-height:1.55;letter-spacing:.01em;color:#3b3b3b;
  }
  @media (max-width:760px){
    .reel__stage{height:auto;padding:72px 0;}
    .reel__title{position:relative;top:auto;transform:none;font-size:17vw;padding:0 24px 34px;text-align:left;}
    .reel__track{position:relative;flex-direction:column;height:auto;align-items:stretch;gap:22px;padding:0 24px;}
    .reel__card{flex:none;width:100%;align-self:auto!important;margin:0!important;}
  }

  /* ---------- Contact CTA ---------- */
  .cta{
    background:#f4f4f4;color:#000000;
    padding:clamp(80px,11vw,160px) max(5vw,24px) clamp(48px,5vw,72px);
    position:relative;z-index:2;
  }

  /* ===== CTA reveal =====
     The page content (.reveal-content, z-index:2, opaque) slides up to uncover the
     CTA, which is pinned behind it at position:fixed (z-index:1, exactly one viewport
     tall so it can't clip or leave a gap). The footer (z-index:2) then rises over it.
     JS adds .is-fixed + sizes the spacer; without JS / reduced-motion it stays inline. */
  .reveal-content{position:relative;z-index:2;background:#000000;}  /* opaque cover — no transform/overflow/filter here (would break the reel pin) */
  .reveal-spacer{display:none;}                                    /* scroll room; height set by JS */
  .cta.is-fixed{
    position:fixed;inset:0;min-height:100vh;z-index:1;
    display:grid;place-items:center;
    padding:max(8vh,40px) max(5vw,24px);
  }
  .cta.is-fixed .cta__inner{width:100%;}
  /* On the reveal page the footer must fill the viewport so it fully covers the
     fixed CTA at the end (otherwise the headline peeks above the footer's top).
     The content sits at the bottom (not centred) so the extra height becomes the
     black covering-space at the top, while the footer rests like a normal one. */
  .foot--reveal{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;}
  .cta__inner{max-width:1180px;margin:0 auto;}
  .cta__headline{text-align:center;margin-bottom:clamp(56px,8vw,120px);}
  .cta__title{
    font-family:'Inter',sans-serif;font-weight:800;
    font-size:var(--fs-4xl);line-height:1.05;letter-spacing:-.03em;
    max-width:16ch;margin:0 auto;
  }
  .cta__sub{
    font-size:var(--fs-lg);font-weight:400;color:#5a6068;
    margin-top:clamp(24px,3vw,40px);letter-spacing:-.01em;
  }
  .cta__sub a{
    color:#000000;font-weight:600;
    border-bottom:1.6px solid #AE1F24;padding-bottom:2px;
    transition:color .3s var(--ease);
  }
  .cta__sub a:hover{color:#AE1F24;}

  .cta__socials{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:clamp(24px,3vw,52px);
  }
  .cta__social{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    border-top:1px solid #c9cccf;padding-top:clamp(16px,1.5vw,24px);
  }
  .cta__social-text{display:flex;flex-direction:column;gap:5px;}
  .cta__name{font-weight:600;font-size:var(--fs-md);color:#000000;}
  .cta__handle{font-size:var(--fs-xs);color:#9aa0a6;}
  .cta__ico{
    width:clamp(40px,3.4vw,46px);height:clamp(40px,3.4vw,46px);border-radius:50%;
    background:#e6e7e9;color:#111111;display:grid;place-items:center;flex:0 0 auto;
    transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
  }
  .cta__ico svg{width:20px;height:20px;}
  .cta__social:hover .cta__ico{background:#AE1F24;color:#ffffff;transform:translateY(-3px);}
  .cta-anim{opacity:0;transform:translateY(30px);}

  @media (max-width:860px){
    .cta__socials{grid-template-columns:repeat(2,1fr);gap:clamp(24px,5vw,40px) clamp(28px,5vw,48px);}
  }
  @media (max-width:480px){
    .cta__socials{grid-template-columns:1fr;}
  }

  /* ---------- Stats counters ---------- */
  .stats{
    background:#000000;color:#fff;
    padding:clamp(64px,9vw,120px) max(5vw,24px);
    position:relative;z-index:2;
  }
  .stats__inner{
    max-width:1180px;margin:0 auto;
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:clamp(36px,5vw,72px);
  }
  .stat{position:relative;text-align:center;}
  .stat + .stat::before{   /* thin divider between columns */
    content:"";position:absolute;left:calc(-1 * clamp(18px,2.5vw,36px));
    top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.14);
  }
  .stat__label{
    font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:rgba(255,255,255,.6);
    margin-bottom:clamp(14px,1.8vw,22px);
  }
  .stat__num{
    font-family:'Anton',sans-serif;font-weight:400;line-height:.86;
    font-size:var(--fs-4xl);letter-spacing:.01em;
    display:flex;align-items:flex-end;justify-content:center;
  }
  .stat__plus{color:#AE1F24;}
  .stat__unit{
    font-family:'Inter',sans-serif;font-weight:700;
    font-size:var(--fs-md);letter-spacing:.12em;text-transform:uppercase;
    color:rgba(255,255,255,.5);margin-left:.55em;margin-bottom:.4em;
    align-self:flex-end;white-space:nowrap;
  }
  .stat-anim{opacity:0;transform:translateY(36px);}

  @media (max-width:760px){
    .stats__inner{grid-template-columns:1fr;gap:0;}
    .stat + .stat::before{display:none;}
    .stat:not(:first-child){
      border-top:1px solid rgba(255,255,255,.12);
      margin-top:clamp(30px,7vw,44px);padding-top:clamp(30px,7vw,44px);
    }
  }

  /* ---------- Footer ---------- */
  .foot{
    background:#000000;color:#fff;
    padding:clamp(56px,7vw,88px) max(5vw,24px) clamp(40px,5vw,56px);
    position:relative;z-index:2;
  }
  .foot__inner{
    max-width:1180px;margin:0 auto;
    display:grid;grid-template-columns:1fr 1fr 1fr 1fr;
    gap:clamp(32px,5vw,64px);
  }
  .foot__brand{
    display:inline-block;line-height:0;margin-bottom:clamp(20px,2.6vw,30px);
  }
  .foot__brand img{height:clamp(40px,4vw,54px);width:auto;display:block;}
  .foot__about{
    font-size:var(--fs-sm);line-height:1.7;
    color:rgba(255,255,255,.55);max-width:44ch;
  }
  .foot__h{
    font-size:var(--fs-md);font-weight:600;
    margin-bottom:clamp(18px,2.2vw,28px);color:#fff;
  }
  .foot__col p,.foot__col a{
    display:block;font-size:var(--fs-sm);line-height:1.6;
    color:rgba(255,255,255,.6);
  }
  .foot__col a{margin-bottom:14px;transition:color .3s var(--ease),transform .3s var(--ease);}
  .foot__col a:hover{color:#fff;transform:translateX(4px);}
  .foot__line{color:rgba(255,255,255,.6);margin-top:6px;}
  .foot__line + .foot__line{margin-top:0;}

  .foot__social{display:flex;gap:14px;}
  .foot__social a{
    width:44px;height:44px;border-radius:50%;
    border:1px solid rgba(255,255,255,.22);
    display:grid;place-items:center;color:rgba(255,255,255,.85);
    transition:.35s var(--ease);
  }
  .foot__social a svg{width:18px;height:18px;}
  .foot__social a:hover{background:#fff;color:#000000;border-color:#fff;transform:translateY(-3px);}

  .foot__bar{
    max-width:1180px;margin:clamp(44px,5vw,64px) auto 0;
    padding-top:clamp(22px,2.6vw,30px);border-top:1px solid rgba(255,255,255,.12);
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    font-size:var(--fs-eyebrow);color:rgba(255,255,255,.45);flex-wrap:wrap;
  }
  .foot__bar a{color:rgba(255,255,255,.6);}
  .foot__bar a:hover{color:#fff;}

  .foot-anim{opacity:0;transform:translateY(30px);}

  @media (max-width:860px){
    .foot__inner{grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,48px);}
    .foot__brandcol{grid-column:1 / -1;}
  }
  @media (max-width:520px){
    .foot__inner{grid-template-columns:1fr;}
    .foot__bar{justify-content:flex-start;}
  }

  /* ============================================================
     PAGE LOADER — logo with a light shimmer sweep + progress bar.
     Fades out once the page has loaded.
     ============================================================ */
  .loader{
    position:fixed;inset:0;z-index:9999;background:#000000;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(20px,3.6vh,34px);overflow:hidden;
    transition:opacity .7s var(--ease),visibility .7s var(--ease);
  }
  .loader.is-done{opacity:0;visibility:hidden;pointer-events:none;}

  .loader__brand{
    position:relative;overflow:hidden;padding:8px 14px;
    opacity:0;transform:translateY(14px);
    animation:lbrand .9s var(--ease) .1s forwards;
  }
  @keyframes lbrand{to{opacity:1;transform:translateY(0);}}
  .loader__logo{width:clamp(150px,24vw,236px);height:auto;display:block;}
  /* shimmer of light sweeping across the logo */
  .loader__shine{
    position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
    transform:skewX(-18deg);mix-blend-mode:screen;
    animation:lshine 2.6s var(--ease) 1s infinite;
  }
  @keyframes lshine{0%{left:-60%;}55%,100%{left:135%;}}

  .loader__tag{
    font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.34em;
    text-transform:uppercase;color:var(--faint);
  }

  .loader__bar{position:absolute;left:0;bottom:0;width:100%;height:3px;background:rgba(255,255,255,.1);}
  .loader__bar i{
    display:block;height:100%;width:100%;background:#E23B41;
    transform:scaleX(0);transform-origin:left;will-change:transform;
    box-shadow:0 0 12px rgba(226,59,65,.6);
  }
  .loader__pct{
    position:absolute;right:max(6vw,22px);bottom:18px;
    font-family:'Anton',sans-serif;font-size:clamp(18px,2.6vw,26px);
    letter-spacing:.06em;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;
  }

  @media (prefers-reduced-motion: reduce){
    .loader *{animation:none !important;}
    .loader__brand{opacity:1;transform:none;}
    .loader__shine{display:none;}
  }