:root{
    --black:#0a0a0a;
    --near-black:#141414;
    --panel:#161616;
    --white:#f7f7f5;
    --off:#c9c9c5;
    --mid:#8a8a86;
    --line:rgba(247,247,245,0.14);
    --line-strong:rgba(247,247,245,0.28);
    --display: 'Bebas Neue', 'Archivo Narrow', sans-serif;
    --body: 'Archivo', -apple-system, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --container: 1240px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  body{
    background:var(--black);
    color:var(--white);
    font-family:var(--body);
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img,svg{display:block;max-width:100%;}

  ::selection{background:var(--white);color:var(--black);}

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

  .wrap{
    max-width:var(--container);
    margin:0 auto;
    padding:0 32px;
  }

  .eyebrow{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--mid);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:'';
    width:7px;height:7px;
    border:1px solid var(--mid);
    display:inline-block;
    flex-shrink:0;
  }

  h1,h2,h3{
    font-family:var(--display);
    font-weight:400;
    letter-spacing:0.005em;
    text-transform:uppercase;
    line-height:0.94;
  }

  /* ---------- grain texture ---------- */
  .grain{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:80;
    opacity:0.05;
    mix-blend-mode:overlay;
  }

  /* ---------- FALLING NUMBERS (Case Studies hub only) ----------
     Digits fall from the top of the viewport, fading in then out, and
     are simply never drawn over any block of real copy — checked live
     against each block's on-screen position, so it stays clear of the
     text at any window width. Built by initFallingNumbers() in
     site.js; a no-op wherever #fallingNumbers isn't on the page. */
  #fallingNumbers{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    width:100%; height:100%; display:block;
  }

  /* ---------- NAV ---------- */
  header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:60;
    background:rgba(10,10,10,0.82);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:76px;
  }
  .logo{
    font-family:var(--display);
    font-size:22px;
    letter-spacing:0.06em;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .logo .mark{
    width:10px;height:10px;
    background:var(--white);
    display:inline-block;
    transform:rotate(45deg);
  }
  .logo .logo-img{
    height:26px;
    width:auto;
    display:block;
  }
  .nav-links{
    display:flex;
    gap:36px;
    align-items:center;
  }
  .nav-links a{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--off);
    position:relative;
    padding:6px 0;
  }
  .nav-links a::after{
    content:'';
    position:absolute;
    left:0;bottom:0;
    width:0%;height:1px;
    background:var(--white);
    transition:width 0.25s ease;
  }
  .nav-links a:hover::after,
  .nav-links a:focus-visible::after{width:100%;}
  .nav-cta{
    border:1px solid var(--line-strong);
    padding:10px 20px !important;
  }
  .nav-cta::after{display:none;}
  .nav-cta:hover{background:var(--white);color:var(--black);}

  .burger{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
  }
  .burger span{width:22px;height:1px;background:var(--white);display:block;}

  .mobile-menu{
    display:none;
    position:fixed;
    inset:76px 0 0 0;
    background:var(--black);
    z-index:55;
    padding:40px 32px;
  }
  .mobile-menu.open{display:block;}
  .mobile-menu a{
    display:block;
    font-family:var(--display);
    font-size:34px;
    text-transform:uppercase;
    padding:16px 0;
    border-bottom:1px solid var(--line);
  }

  /* ---------- HERO ---------- */
  .hero{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:76px;
    position:relative;
  }
  .hero-inner{
    position:relative;
    z-index:1;
    padding:80px 0 60px;
  }

  /* ---------- HERO EMBERS (ambient background, homepage only) ----------
     Small points drift upward and fade; each sits in a wrapper that
     smoothly dodges the cursor, so the two motions (rise + dodge) never
     fight over the same transform. Respects prefers-reduced-motion. */
  .hero-embers{ overflow:hidden; }
  .hero-embers-bg{ position:absolute; inset:0; z-index:0; }
  .ember-wrap{
    position:absolute; bottom:-5%;
    transition:transform 420ms cubic-bezier(0.25,0.46,0.45,0.94);
    will-change:transform;
  }
  .ember{
    border-radius:50%; background:var(--white);
    opacity:0; animation:emberRise linear infinite;
    will-change:transform, opacity;
  }
  @keyframes emberRise{
    0%{ transform:translateY(0) translateX(0); opacity:0; }
    10%{ opacity:0.9; }
    85%{ opacity:0.5; }
    100%{ transform:translateY(-115vh) translateX(var(--drift)); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .ember, .ember-wrap{ animation:none; transition:none; }
  }

  /* ---------- HERO CONSTELLATION (Services page only) ----------
     A field of drifting dots that link up with faint lines when close
     together; the cursor pushes nearby points away. Built by
     initHeroConstellation() in site.js — canvas-based, so it's a no-op
     wherever #servicesConstellation isn't on the page. */
  .hero-constellation{ position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; }
  .hero h1{
    font-size:clamp(52px, 9.2vw, 128px);
    margin-top:22px;
    max-width:15ch;
  }
  .hero h1 .thin{
    -webkit-text-stroke:1px var(--white);
    color:transparent;
  }

  /* ---------- HERO WORD-IN (headline entrance, every page) ----------
     Each word starts soft/out-of-focus and resolves sharp, staggered
     left to right. Built by wrapHeroWords() in site.js; degrades to
     plain static text if JS doesn't run or motion is reduced. */
  .hero-word{
    display:inline-block;
    filter:blur(14px);
    opacity:0;
    transform:translateY(6px);
    will-change:filter, opacity, transform;
  }
  .hero-word.on{
    filter:blur(0);
    opacity:1;
    transform:translateY(0);
    transition:filter 0.85s cubic-bezier(0.16,1,0.3,1), opacity 0.7s ease-out, transform 0.85s cubic-bezier(0.16,1,0.3,1);
  }
  @media (prefers-reduced-motion: reduce){
    .hero-word{ filter:none; opacity:1; transform:none; }
  }

  /* ---------- SCROLL CUE (sits under the hero copy) ----------
     A dot falls along a line, looping, to nudge visitors past a hero
     that fills the viewport. Lives in normal flow under hero-sub, so
     it scrolls away naturally once the hero is passed — no JS needed. */
  .scroll-cue{
    display:flex; flex-direction:column; align-items:center;
    width:100%; margin-top:56px; padding:10px 0;
    color:var(--mid); text-decoration:none;
    transition:color 0.2s ease;
  }
  .scroll-cue:hover, .scroll-cue:focus-visible{ color:var(--white); }
  .scroll-cue-track{
    position:relative; width:2px; height:64px; background:var(--line-strong);
  }
  .scroll-cue-dot{
    position:absolute; left:50%; top:-10px; width:9px; height:9px;
    margin-left:-4.5px; border-radius:50%; background:currentColor;
    opacity:0;
    animation:scrollCueDrop 2s ease-in-out infinite;
  }
  @keyframes scrollCueDrop{
    0%{ top:-10px; opacity:0; }
    25%{ opacity:1; }
    75%{ opacity:1; }
    100%{ top:62px; opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .scroll-cue-dot{ animation:none; top:26px; opacity:1; }
  }
  .hero-sub{
    max-width:520px;
    margin-top:28px;
    color:var(--off);
    font-size:17px;
    line-height:1.6;
  }
  .hero-cta-row{
    margin-top:44px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    align-items:center;
  }
  .btn{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:16px 30px;
    border:1px solid var(--white);
    background:var(--white);
    color:var(--black);
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:background 0.2s ease, color 0.2s ease;
  }
  .btn:hover{background:transparent;color:var(--white);}
  .btn-ghost{
    background:transparent;
    color:var(--white);
    border:1px solid var(--line-strong);
  }
  .btn-ghost:hover{border-color:var(--white);}

  .card-link{
    display:inline-block;
    margin-top:14px;
    color:var(--white);
    font:600 14px/1 var(--mono);
    text-decoration:none;
    border-bottom:1px solid var(--line-strong);
    padding-bottom:2px;
  }
  .card-link:hover{border-color:var(--white);}

  /* ---------- TICKER (signature) ---------- */
  .ticker{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--near-black);
    overflow:hidden;
    padding:16px 0;
    position:relative;
  }
  .ticker::before, .ticker::after{
    content:'';
    position:absolute;
    top:0;bottom:0;
    width:80px;
    z-index:2;
    pointer-events:none;
  }
  .ticker::before{left:0;background:linear-gradient(90deg, var(--near-black), transparent);}
  .ticker::after{right:0;background:linear-gradient(270deg, var(--near-black), transparent);}
  .ticker-track{
    display:flex;
    width:max-content;
    animation:scroll-left 34s linear infinite;
  }
  @keyframes scroll-left{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .ticker-item{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--off);
    white-space:nowrap;
    padding:0 28px;
    display:flex;
    align-items:center;
    gap:28px;
  }
  .ticker-item b{color:var(--white);font-weight:600;}
  .ticker-item .dot{
    width:4px;height:4px;
    background:var(--mid);
    border-radius:50%;
    display:inline-block;
  }

  /* ---------- SECTION generic ---------- */
  section{
    padding:120px 0;
    border-bottom:1px solid var(--line);
    position:relative;
  }
  .section-head{
    max-width:680px;
    margin-bottom:64px;
  }
  .section-head h2{
    font-size:clamp(36px, 5.6vw, 64px);
    margin-top:16px;
  }
  .section-head p{
    color:var(--off);
    margin-top:20px;
    font-size:16px;
    max-width:52ch;
  }

  /* ---------- RESULT / PROOF ---------- */
  .proof{
    background:var(--black);
  }
  .proof-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:60px;
    align-items:center;
  }
  .proof-number{
    font-family:var(--display);
    font-size:clamp(90px, 15vw, 220px);
    line-height:0.85;
    letter-spacing:0.01em;
  }
  .proof-number sup{
    font-family:var(--mono);
    font-size:0.16em;
    vertical-align:super;
    color:var(--mid);
    margin-left:6px;
  }
  .proof-caption{
    font-size:19px;
    color:var(--off);
    margin-top:12px;
    max-width:34ch;
    line-height:1.55;
  }
  .readout{
    border:1px solid var(--line-strong);
    padding:28px;
    background:var(--panel);
  }
  .readout-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-family:var(--mono);
  }
  .readout-row:last-child{border-bottom:none;}
  .readout-row .k{
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--mid);
  }
  .readout-row .v{
    font-size:20px;
    color:var(--white);
  }

  /* ---------- RECENT WORK (IG SLIDESHOW) ---------- */
  .recent-work{background:var(--near-black);}
  .live-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--off);
  }
  .live-dot{
    width:7px;height:7px;
    border-radius:50%;
    background:var(--white);
    animation:pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:0.35;transform:scale(0.75);}
  }
  /* Desktop (>920px): featured slide + "up next" rail, using the section's
     full width. Mobile/tablet (<=920px): the original single wide stage +
     thumbnail strip, just given a Ken Burns zoom and a Stories-style
     progress bar. Only one is ever in the DOM's visible flow at a time. */
  .ig-desktop{display:block;}
  .ig-mobile{display:none;}
  @media (max-width:920px){
    .ig-desktop{display:none;}
    .ig-mobile{display:block;}
  }

  .ig-desktop-layout{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .ig-stage-desktop{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    background:var(--panel);
    isolation:isolate;
  }
  .ig-rail{
    display:flex;
    flex-direction:column;
    background:var(--panel);
    overflow-y:auto;
  }
  .ig-rail-item{
    display:flex;
    gap:14px;
    align-items:center;
    width:100%;
    padding:16px;
    border:none;
    border-bottom:1px solid var(--line);
    background:transparent;
    cursor:pointer;
    opacity:0.55;
    text-align:left;
    transition:opacity 0.25s ease, background 0.2s ease;
  }
  .ig-rail-item:last-child{border-bottom:none;}
  .ig-rail-item:hover, .ig-rail-item.active{opacity:1;background:rgba(247,247,245,0.03);}
  .ig-rail-thumb{
    position:relative;
    width:56px;height:56px;
    flex-shrink:0;
    overflow:hidden;
  }
  .ig-rail-text{min-width:0;display:flex;flex-direction:column;gap:4px;}
  .ig-rail-caption{
    font-size:13px;
    color:var(--white);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .ig-rail-meta{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--mid);
  }

  .ig-widget{
    border:1px solid var(--line);
    background:var(--panel);
    max-width:720px;
    margin:0 auto;
  }
  .ig-stage{
    position:relative;
    aspect-ratio:1/1;
    overflow:hidden;
    border-bottom:1px solid var(--line);
    isolation:isolate;
  }
  .ig-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 0.9s ease;
    pointer-events:none;
  }
  .ig-slide.active{opacity:1;pointer-events:auto;}
  /* Slow zoom on whichever post is currently showing — same effect on both
     the mobile stage and the desktop featured slide, since both reuse
     .ig-slide under the hood. */
  .ig-slide.active .ig-slide-bg,
  .ig-slide.active .ig-slide-pattern{
    animation:igKenBurns 6s ease-in-out forwards;
  }
  @keyframes igKenBurns{
    from{transform:scale(1);}
    to{transform:scale(1.08);}
  }
  @media (prefers-reduced-motion: reduce){
    .ig-slide.active .ig-slide-bg,
    .ig-slide.active .ig-slide-pattern{animation:none;}
  }
  .ig-slide-link{
    position:absolute;
    inset:0;
    display:block;
  }
  .ig-slide-link:not([href]){cursor:default;}
  .ig-slide-bg{
    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
  }
  .ig-slide-pattern{
    position:absolute;
    inset:0;
    z-index:0;
  }
  .ig-video-badge{
    position:absolute;
    top:12px;
    right:14px;
    z-index:2;
    width:22px;
    height:22px;
    border-radius:50%;
    background:rgba(10,10,10,0.55);
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
  }
  .ig-video-badge svg{width:9px;height:9px;}
  .ig-thumb .ig-video-badge,
  .ig-rail-thumb .ig-video-badge{
    width:16px;height:16px;
    top:6px;right:6px;
  }
  .ig-thumb .ig-video-badge svg,
  .ig-rail-thumb .ig-video-badge svg{width:6px;height:6px;}
  .ig-slide-hover{
    position:absolute;
    inset:0;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:36px;
    background:rgba(10,10,10,0.62);
    opacity:0;
    transition:opacity 0.25s ease;
  }
  .ig-slide-link:hover .ig-slide-hover,
  .ig-slide-link:focus-visible .ig-slide-hover{opacity:1;}
  .ig-stat{
    font-family:var(--mono);
    text-align:center;
  }
  .ig-stat .num{
    font-size:24px;
    color:var(--white);
    display:block;
    line-height:1;
  }
  .ig-stat .lbl{
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--off);
    margin-top:6px;
    display:block;
  }
  .ig-slide-info{
    position:absolute;
    left:0;right:0;bottom:0;
    z-index:2;
    padding:26px 30px;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    background:linear-gradient(0deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0) 65%);
    pointer-events:none;
  }
  .ig-slide-caption{
    font-size:15px;
    color:var(--white);
    max-width:60ch;
  }
  .ig-slide-meta{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--off);
    text-align:right;
    white-space:nowrap;
    flex-shrink:0;
  }
  .ig-strip{
    position:relative;
    z-index:1;
    display:flex;
    gap:1px;
    background:var(--line);
  }
  .ig-thumb{
    flex:1;
    aspect-ratio:1/1;
    position:relative;
    cursor:pointer;
    border:none;
    padding:0;
    background:var(--black);
    opacity:0.55;
    transition:opacity 0.25s ease;
    overflow:hidden;
  }
  .ig-thumb:hover, .ig-thumb.active{opacity:1;}
  .ig-thumb .ig-thumb-bg,
  .ig-rail-thumb .ig-thumb-bg{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    display:block;
  }
  .ig-thumb .ig-thumb-pattern,
  .ig-rail-thumb .ig-thumb-pattern{position:absolute;inset:0;}
  .ig-thumb.active::after{
    content:'';
    position:absolute;
    inset:0;
    border:2px solid var(--white);
  }
  /* Instagram Stories-style progress bar — mobile stage only. */
  .ig-progress{
    position:absolute;
    top:12px;left:12px;right:12px;
    z-index:3;
    display:flex;
    gap:4px;
  }
  .ig-progress-bar{
    flex:1;
    height:2px;
    background:rgba(247,247,245,0.25);
    border-radius:2px;
    overflow:hidden;
  }
  .ig-progress-fill{
    display:block;
    height:100%;
    width:0%;
    background:var(--white);
  }
  .ig-progress-bar.done .ig-progress-fill{width:100%;}
  .ig-progress-bar.active .ig-progress-fill{
    animation:igProgressFill 4.2s linear forwards;
  }
  @keyframes igProgressFill{from{width:0%;}to{width:100%;}}
  @media (prefers-reduced-motion: reduce){
    .ig-progress-bar.active .ig-progress-fill{animation:none;width:0%;}
  }
  .ig-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 20px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--mid);
  }
  .ig-footer a{color:var(--off);}
  .ig-footer a:hover{color:var(--white);}

  /* ---------- SERVICES ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
  }
  .service-card{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:40px 34px;
    min-height:260px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:background 0.25s ease;
  }
  .service-card:hover{background:var(--near-black);}
  .service-code{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.14em;
    color:var(--mid);
    text-transform:uppercase;
  }
  .service-card h3{
    font-size:30px;
    margin-top:26px;
    font-family:var(--display);
  }
  .service-card p{
    color:var(--off);
    font-size:14.5px;
    margin-top:14px;
    line-height:1.55;
  }

  /* ---------- SPECIALISM ---------- */
  .specialism{background:var(--near-black);}
  .format-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin-top:20px;
  }
  .format-card{
    background:var(--black);
    padding:44px;
  }
  .format-tag{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--mid);
    border:1px solid var(--line-strong);
    display:inline-block;
    padding:5px 10px;
  }
  .format-card h3{
    font-size:34px;
    margin-top:22px;
  }
  .format-card p{
    color:var(--off);
    margin-top:14px;
    font-size:15px;
    line-height:1.6;
    max-width:42ch;
  }
  .format-meta{
    margin-top:24px;
    display:flex;
    gap:22px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.08em;
    color:var(--mid);
    text-transform:uppercase;
  }

  .spec-body{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
  }
  .spec-body .lead p{
    color:var(--off);
    font-size:17px;
    line-height:1.7;
    margin-bottom:18px;
  }
  .spec-body .lead p:first-child{
    font-size:20px;
    color:var(--white);
  }

  /* ---------- GLOBAL ---------- */
  .global-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
  }
  .map-wrap{
    border:1px solid var(--line);
    padding:20px;
    background:var(--panel);
  }
  .wm-label{
    font-family:var(--mono);
    font-size:9.5px;
    letter-spacing:0.06em;
    fill:var(--off);
    text-transform:uppercase;
  }
  .wm-dot{fill:var(--mid);opacity:0.4;}
  .wm-line{fill:none;stroke:var(--white);stroke-width:1;opacity:0.55;}
  .wm-node{fill:var(--white);}
  .wm-node-ring{fill:none;stroke:var(--white);stroke-width:1;}
  .stat-list{margin-top:36px;}
  .stat-row{
    display:flex;
    justify-content:space-between;
    padding:20px 0;
    border-top:1px solid var(--line);
    align-items:baseline;
  }
  .stat-row:last-child{border-bottom:1px solid var(--line);}
  .stat-row .label{
    font-size:15px;
    color:var(--off);
  }
  .stat-row .val{
    font-family:var(--mono);
    font-size:13px;
    color:var(--white);
    text-transform:uppercase;
    letter-spacing:0.08em;
    text-align:right;
  }

  /* ---------- CTA ---------- */
  .cta{
    text-align:left;
    border-bottom:none;
  }
  .cta-inner{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    flex-wrap:wrap;
  }
  .cta h2{
    font-size:clamp(44px, 8vw, 96px);
    max-width:14ch;
  }
  .cta-right{
    display:flex;
    flex-direction:column;
    gap:20px;
    align-items:flex-start;
    min-width:260px;
  }
  .cta-email{
    font-family:var(--mono);
    font-size:16px;
    border-bottom:1px solid var(--line-strong);
    padding-bottom:6px;
  }
  .cta-email:hover{border-color:var(--white);}

  /* ---------- FOOTER ---------- */
  footer{
    padding:40px 0;
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--mid);
  }
  .footer-inner a{color:var(--off);}
  .footer-inner a:hover{color:var(--white);}
  .footer-links{display:flex;gap:24px;}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:920px){
    .nav-links{display:none;}
    .burger{display:flex;}
    .proof-grid, .spec-body, .global-grid{grid-template-columns:1fr;}
    .services-grid{grid-template-columns:1fr 1fr;}
    .format-grid{grid-template-columns:1fr;}
    .cta-inner{flex-direction:column;align-items:flex-start;}
  }
  @media (max-width:600px){
    .wrap{padding:0 20px;}
    section{padding:80px 0;}
    .services-grid{grid-template-columns:1fr;}
    .proof-number{font-size:clamp(70px, 22vw, 120px);}
    .ig-strip{flex-wrap:wrap;}
    .ig-thumb{flex:1 1 33.33%;}
    .ig-slide-info{flex-direction:column;align-items:flex-start;gap:8px;}
    .ig-slide-meta{text-align:left;}
  }

  /* reveal-on-scroll */
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.in{
    opacity:1;
    transform:translateY(0);
  }