/* DigitalPlix shared stylesheet. Every page links this file, so a brand token
   changed here changes everywhere. Page-specific rules stay in that page. */
:root{
    --ink:#0C1A3F;       /* brand navy: dark sections, headings */
    --ink-2:#16295E;
    --blue:#4361EE;      /* brand blue: actions only */
    --blue-deep:#2F4FE0;
    --gain:#0A8F57;      /* profit green: money that came back */
    --gain-bright:#4BE3A4;
    --paper:#F3F5FA;     /* section wash */
    --warm:#FFF5EE;      /* where section 1 hands over to section 2 */
    --line:#DCE1EB;
    --body:#46506B;
    --muted:#77819A;
    --white:#FFFFFF;
    --sec:clamp(70px,6.4vw,100px);--r-photo:22px; --r-card:16px; --r-small:10px;
    --nav-h:76px;
    --wrap:1200px; --wrap-pad:40px;   /* content width — steps up on big monitors */
    --display:'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
    --text:'Hanken Grotesk', system-ui, sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;overflow-x:clip}
  body{font-family:var(--text);color:var(--body);background:var(--white);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{font-family:var(--display);color:var(--ink);font-weight:800;letter-spacing:-0.03em;line-height:1.04}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--wrap-pad)}
  @media(max-width:760px){.wrap{padding:0 20px}}

  :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
  .num{font-variant-numeric:tabular-nums lining-nums}

  /* photo frame — gradient shows through if an image fails to load */
  .ph{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--ink-2),var(--blue) 120%)}
  .ph img{width:100%;height:100%;object-fit:cover}

  /* buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--text);font-weight:700;font-size:16px;border-radius:999px;padding:16px 28px;border:0;cursor:pointer;transition:background .2s, transform .2s}
  .btn-main{background:var(--blue);color:#fff;box-shadow:0 10px 24px -8px rgba(67,97,238,.6)}
  .btn-main:hover{background:var(--blue-deep);transform:translateY(-2px)}
  .btn-ghost{color:var(--ink);padding:16px 6px;border-radius:0;border-bottom:2px solid var(--ink)}
  .btn-ghost:hover{color:var(--blue);border-color:var(--blue)}
  .btn-light{background:#fff;color:var(--ink)}
  .btn-light:hover{background:#E9EDFF;transform:translateY(-2px)}
  .btn-outline-light{color:#fff;border:1.5px solid rgba(255,255,255,.45)}
  .btn-outline-light:hover{border-color:#fff}

  /* ===== 3D BUTTONS (three.js) =====
     Each button keeps its real HTML text on top (clickable, readable by screen readers).
     A canvas behind it draws the glossy 3D body; JS moves text and body together.
     Until the 3D body has drawn once, the normal CSS button above is what people see. */
  .b3d{position:relative;isolation:isolate}
  .b3d-cv{position:absolute;pointer-events:none;z-index:-1}
  .b3d-label{display:inline-flex;align-items:center;gap:10px;backface-visibility:hidden;will-change:transform}
  .btn.b3d-ready,.subscribe button.b3d-ready{background:transparent!important;box-shadow:none!important;border-color:transparent!important}
  .btn.b3d-ready:hover{transform:none}
  .b3d-ready .b3d-label{text-shadow:0 1px 1px rgba(12,26,63,.18)}
  .btn-light.b3d-ready .b3d-label{text-shadow:none}
  .btn-line.b3d-ready .b3d-label{text-shadow:none}

  /* ===== NAV ===== */
  /* iOS-style glass bar: solid at the very top, frosted once the page moves, dark glass over dark sections */
  .nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 rgba(12,26,63,.08);transition:background .35s,box-shadow .35s}
  .nav .logo,.nav ul{transition:color .35s}
  /* At the very top the bar is solid, so it has to be the same colour the hero starts on.
     The hero wash changes per slide, so the bar changes with it on the same 1.15s clock.
     Once the page scrolls the bar goes frosted and these no longer apply. */
  .nav.is-top{background:#FCF1E9;box-shadow:0 1px 0 transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
    transition:background 1.15s cubic-bezier(.4,0,.2,1),box-shadow .35s}
  /* At rest the nav is painted as an extension of whatever section is under it. On the
     homepage that is one of the three lead variants below. On a service page it is the
     hero, whose top edge is exactly --svc-soft — so the nav simply takes the page's own
     accent tint and every new service page gets this for free, the same way svc3d.js
     picks up --svc. The .35s background transition on .nav is what makes it smooth, and
     the scrolled/blurred state (.nav, .nav.is-dark) is untouched. */
  .svc-page .nav.is-top{background:var(--svc-soft)}
  html.lead-2 .nav.is-top{background:#F2F4FE}
  html.lead-3 .nav.is-top{background:#EFF7F3}
  /* ---- Services dropdown (10.1) -------------------------------------------
     CSS only. :hover opens it for a pointer, :focus-within opens it for the keyboard,
     and because the trigger is a real link to the services section, a tap on a phone —
     where neither applies — still goes somewhere useful instead of doing nothing. */
  .nav .has-menu{position:relative}
  .nav .has-menu > a::after{content:'';display:inline-block;width:6px;height:6px;margin-left:7px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);opacity:.55;transition:transform .25s,opacity .25s}
  .nav .has-menu:hover > a::after,.nav .has-menu:focus-within > a::after{transform:translateY(0) rotate(225deg);opacity:1}
  /* Selector has to out-rank `.nav ul{display:flex}`, which otherwise laid the panel out
     as one flat row of six. Same reason the width and gap are restated here. */
  .nav .nav-menu{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
    width:540px;padding:14px;margin:10px 0 0;background:#fff;border:1px solid var(--line);
    border-radius:18px;box-shadow:0 30px 60px -28px rgba(12,26,63,.45);
    display:grid;grid-template-columns:1fr 1fr;gap:4px;list-style:none;align-items:stretch;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,transform .22s,visibility .22s;z-index:50}
  .nav .has-menu:hover .nav-menu,.nav .has-menu:focus-within .nav-menu{
    opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
  /* the gap between trigger and panel would otherwise drop the hover on the way down */
  .nav .has-menu::after{content:'';position:absolute;left:0;right:0;top:100%;height:14px}
  .nav .nav-menu li{margin:0}
  .nav .nav-menu a{display:block;padding:11px 13px;border-radius:11px;color:var(--ink);
    font-weight:600;font-size:15px;line-height:1.25;white-space:normal;
    transition:background .2s,color .2s}
  .nav .nav-menu a small{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:2px}
  .nav .nav-menu a:hover,.nav .nav-menu a:focus-visible{background:var(--paper);color:var(--blue)}
  .nav .nav-menu a:hover small,.nav .nav-menu a:focus-visible small{color:var(--body)}
  /* The panel stays white even when the bar above it has gone dark over a navy section. */
  .nav.is-dark .nav-menu a{color:var(--ink)}
  @media(max-width:980px){
    .nav .nav-menu{display:none}
    .nav .has-menu > a::after{display:none}
  }

  .nav.is-dark{background:rgba(12,26,63,.58);box-shadow:0 1px 0 rgba(255,255,255,.1)}
  .nav.is-dark .logo,.nav.is-dark ul{color:#fff}
  .nav.is-dark ul a:hover{color:#AFC0FF}
  @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.nav{background:rgba(255,255,255,.97)}.nav.is-dark{background:rgba(12,26,63,.96)}}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
  .logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-0.02em}
  .logo i{width:30px;height:30px;border-radius:9px;background:var(--blue);position:relative}
  .logo i::after{content:'';position:absolute;inset:8px 8px 8px 8px;border-top:3px solid #fff;border-right:3px solid #fff;transform:rotate(0deg);border-radius:2px}
  .nav ul{display:flex;gap:36px;list-style:none;font-weight:600;font-size:15.5px;color:var(--ink)}
  .nav ul a:hover{color:var(--blue)}
  .nav .btn{padding:12px 22px;font-size:15px}
  @media(max-width:900px){.nav ul{display:none}}
  .nav-actions{display:flex;align-items:center;gap:14px}
  @media(max-width:480px){.nav-actions{gap:8px}}

  /* ===== DROPDOWN (reusable) + CURRENCY SWITCHER =====
     .dd / .dd-trigger / .dd-menu / .dd-item is the whole visual contract, matching the
     data-dd* attributes dropdown.js reads. The currency switcher below is just the first
     thing built on it — a future nav submenu reuses these same four classes untouched. */
  .dd{position:relative}
  .dd-trigger{gap:9px;white-space:nowrap}
  .cur-label{display:inline-flex;align-items:center;gap:4px;font-weight:800;letter-spacing:.02em}
  .dd-chev{width:10px;height:7px;flex:0 0 auto;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
  .dd[data-open] .dd-chev{transform:rotate(180deg)}

  /* .dd-icon is the reusable icon slot: a flag here, but any future dropdown (a service
     picker, a language menu) can drop a logo or monogram into the same fixed box and get
     the same rounded-corner, hairline-border treatment for free. */
  .dd-icon{width:22px;height:16px;border-radius:4px;overflow:hidden;flex:0 0 auto;
    box-shadow:0 0 0 1px rgba(12,26,63,.14);display:block}
  .dd-icon svg{display:block;width:100%;height:100%}
  .dd-trigger .dd-icon{width:18px;height:13px}

  .dd-menu{position:absolute;top:calc(100% + 10px);left:50%;width:200px;list-style:none;margin:0;
    background:#fff;border-radius:var(--r-card);padding:6px;
    box-shadow:0 26px 50px -20px rgba(12,26,63,.38),0 3px 12px rgba(12,26,63,.08);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(-6px) scale(.98);transform-origin:top center;
    transition:opacity .18s,transform .2s cubic-bezier(.2,.7,.3,1),visibility 0s linear .18s;z-index:50}
  /* .nav ul{display:flex;gap:36px} further down is meant for the main nav links, but this
     .dd-menu is also a <ul> nested inside .nav, so it inherits that rule unless beaten on
     specificity — two classes here (.nav .dd-menu) outrank one class + one tag (.nav ul) in
     every viewport, including the @media(max-width:900px){.nav ul{display:none}} variant
     that would otherwise hide this menu on tablet/mobile too. */
  .nav .dd-menu{display:block;gap:0}
  .dd[data-open] .dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1);
    transition:opacity .18s,transform .2s cubic-bezier(.2,.7,.3,1),visibility 0s}

  /* One compact row: flag, name, code, tick — everything on one line, so five currencies
     read as a quick scan rather than a stack of cards. Each row also has its own small
     entrance (opacity+lift), staggered per row, so the panel doesn't just snap into place. */
  .dd-item{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;cursor:pointer;
    padding:7px 8px;border-radius:calc(var(--r-card) - 8px);font-family:var(--text);text-align:left;color:var(--ink);
    opacity:0;transform:translateY(-3px);transition:opacity .16s,transform .16s,background .15s}
  .dd-item:hover,.dd-item:focus-visible{background:var(--paper)}
  .dd[data-open] .dd-item{opacity:1;transform:translateY(0)}
  .dd[data-open] .dd-item:nth-child(1){transition-delay:.02s}
  .dd[data-open] .dd-item:nth-child(2){transition-delay:.05s}
  .dd[data-open] .dd-item:nth-child(3){transition-delay:.08s}
  .dd[data-open] .dd-item:nth-child(4){transition-delay:.11s}
  .dd[data-open] .dd-item:nth-child(5){transition-delay:.14s}
  .dd-item b{font-size:14px;font-weight:700;font-family:var(--text)}
  .dd-item small{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.02em;margin-left:auto;margin-right:2px}
  .dd-check{width:14px;height:14px;color:var(--blue);flex:0 0 auto;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
  .dd-item[aria-selected="true"] .dd-check{opacity:1;transform:scale(1)}
  @media(max-width:480px){
    .dd-menu{left:auto;right:0;transform:translateY(-6px) scale(.98);transform-origin:top right}
    .dd[data-open] .dd-menu{transform:translateY(0) scale(1)}
  }

  /* ===== STICKY ENQUIRY BUTTON + FORM MODAL =====
     .sticky-cta is a normal .btn (b3d.js gives it the same 3D candy-pill hover/press it
     gives every other button — no separate animation code needed here). The modal itself
     is plain, reusable overlay CSS: swap the form fields and it works for anything else
     that needs a popup form later. */
  .sticky-cta{position:fixed;right:26px;bottom:26px;z-index:45;box-shadow:0 20px 40px -16px rgba(67,97,238,.55)}
  @media(max-width:640px){.sticky-cta{right:16px;bottom:16px;padding:13px 20px;font-size:14.5px}}

  .enquiry-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
    opacity:0;visibility:hidden;transition:opacity .22s,visibility 0s linear .22s}
  .enquiry-modal[data-open]{opacity:1;visibility:visible;transition:opacity .22s,visibility 0s}
  .enquiry-backdrop{position:absolute;inset:0;background:rgba(12,26,63,.55);backdrop-filter:blur(3px)}
  .enquiry-panel{position:relative;width:100%;max-width:440px;max-height:88vh;overflow-y:auto;overflow-x:hidden;
    background:#fff;border-radius:24px;padding:28px 26px 22px;box-shadow:0 44px 84px -24px rgba(12,26,63,.5);
    transform:translateY(18px) scale(.96);transition:transform .28s cubic-bezier(.2,.7,.3,1);
    scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .enquiry-panel::-webkit-scrollbar{width:6px}
  .enquiry-panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
  .enquiry-panel::-webkit-scrollbar-track{background:transparent}
  .enquiry-modal[data-open] .enquiry-panel{transform:translateY(0) scale(1)}
  .enquiry-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:0;
    background:var(--paper);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background .2s}
  .enquiry-x:hover{background:var(--line)}
  .enq-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--blue);margin-bottom:5px}
  .enquiry-panel h3{font-family:var(--display);font-size:22px;line-height:1.15;margin-bottom:5px}
  .enq-sub{font-size:13.5px;color:var(--muted);margin-bottom:18px}
  .enq-field{display:block;margin-bottom:11px}
  .enq-field > span:first-child{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
  .enq-field input,.enq-field select{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 14px;
    font:inherit;font-size:15px;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
  .enq-field input:focus,.enq-field select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(67,97,238,.15)}
  .enq-email-row{display:flex;gap:8px}
  .enq-email-row input{flex:1;min-width:0}
  .enq-email-row .btn{flex:none;padding:0 16px;font-size:13.5px;white-space:nowrap}
  .enq-otp-status{display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--muted)}
  .enq-otp-status[data-state="ok"]{color:var(--gain)}
  .enq-otp-status[data-state="err"]{color:#D9435E}
  .enq-submit{width:100%;justify-content:center;margin-top:6px}
  .enq-note{margin-top:12px;font-size:12px;color:var(--muted);text-align:center}

  /* ===== 1. LEAD HERO ===== */
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* The warm glow now fades out before the section ends, and the bottom colour (--warm) is exactly
     where section 2 starts, so there is no white strip above the navy frame. */
  .lead-hero{position:relative;overflow:hidden;padding:clamp(56px,5vw,84px) 0 var(--sec);text-align:center;
    background:
      radial-gradient(55% 45% at 88% 18%, rgba(67,97,238,.10), transparent 70%),
      radial-gradient(52% 40% at 8% 62%, rgba(255,160,110,.24), transparent 70%),
      linear-gradient(180deg,#FCF1E9 0%,var(--warm) 100%)}
  /* block-level flex, not inline-flex: the title next to it is an inline-block, so on a wide
     container the two used to land on the same line and the eyebrow slid beside the heading */
  .eyebrow{display:flex;justify-content:center;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:22px}
  .lead-title{position:relative;display:inline-block;font-size:clamp(40px,8.2vw,122px);line-height:1;letter-spacing:-.045em;margin:0 auto 46px}
  .lead-title .ul{position:relative;white-space:nowrap}
  .lead-title .ul svg{position:absolute;left:-1%;bottom:-.16em;width:102%;height:.24em;overflow:visible}
  .spark{position:absolute;pointer-events:none;overflow:visible}
  .spark-l{left:-.62em;top:-.36em;width:.6em;height:.6em}
  .spark-r{right:-.5em;top:-.42em;width:.5em;height:.5em}
  .lead-sub{font-size:clamp(18px,1.6vw,21px);color:var(--body);max-width:640px;margin:0 auto 46px}

  /* --- rotating hero copy (eyebrow + heading + subheading only) ---
     The slides are stacked in one grid cell, so the section keeps the height of the tallest
     slide and nothing below it — form, note, chips, 3D layer — ever shifts when the copy changes.
     The two blocks barely overlap: the old one leaves over 0-460ms, the new one arrives over
     380-980ms, and they cross only at near-zero opacity. That is what kills the double-exposure
     during the swap and lets the full travel be seen instead of hiding behind a fade.
     Without JS only the first slide is rendered and the dots stay hidden. */
  .lead-slide:not(:first-child){display:none}
  .lead-slider.is-live .lead-slide{display:block}
  .lead-slider{display:grid}
  .lead-slide{grid-area:1/1;align-self:start}
  .lead-slide .lead-sub{margin-bottom:0}
  .lead-slider.is-live .lead-slide{
    opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(var(--sx,120px),0,0);
    transition:opacity .44s cubic-bezier(.45,.05,.55,.95),transform .50s cubic-bezier(.45,.05,.55,.95),visibility 0s linear .5s}
  .lead-slider.is-live .lead-slide.is-out{--sx:-120px}
  .lead-slider.is-live .lead-slide.is-active{
    opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0);
    transition:opacity .42s cubic-bezier(.2,.7,.3,1) .38s,transform .60s cubic-bezier(.16,.84,.3,1) .38s,visibility 0s}
  .lead-slider .lead-slide.no-tr{transition:none}

  /* --- hero wash, one layer per slide ---
     Two stacked layers ping-pong: the incoming wash fades in fully on top of the outgoing one,
     so the blend never dips through a third colour. Every variant still ends on --warm at the
     bottom, which is the colour section 2 starts on — that hand-off must not move. */
  .lead-bg{position:absolute;inset:0;z-index:0;isolation:isolate;pointer-events:none}
  .lead-bg i{position:absolute;inset:0;opacity:0;transition:opacity 1.15s cubic-bezier(.4,0,.2,1)}
  .lead-bg i.on{opacity:1}
  .lv1{background:
      radial-gradient(55% 45% at 88% 18%, rgba(67,97,238,.10), transparent 70%),
      radial-gradient(52% 40% at 8% 62%, rgba(255,160,110,.24), transparent 70%),
      linear-gradient(180deg,#FCF1E9 0%,var(--warm) 100%)}
  .lv2{background:
      radial-gradient(55% 45% at 88% 18%, rgba(255,160,110,.20), transparent 70%),
      radial-gradient(52% 40% at 8% 62%, rgba(67,97,238,.15), transparent 70%),
      linear-gradient(180deg,#F2F4FE 0%,var(--warm) 100%)}
  .lv3{background:
      radial-gradient(55% 45% at 88% 18%, rgba(10,143,87,.10), transparent 70%),
      radial-gradient(52% 40% at 8% 62%, rgba(255,160,110,.20), transparent 70%),
      linear-gradient(180deg,#EFF7F3 0%,var(--warm) 100%)}

  .lead-dots{display:none;justify-content:center;gap:8px;margin:26px 0 32px}
  .lead-slider.is-live + .lead-dots{display:flex}
  .lead-dots button{position:relative;width:28px;height:26px;padding:0;border:0;background:none;cursor:pointer;border-radius:8px}
  .lead-dots button::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:999px;background:rgba(12,26,63,.26);
    transition:width .4s cubic-bezier(.22,.61,.36,1),margin-left .4s cubic-bezier(.22,.61,.36,1),background .3s}
  .lead-dots button:hover::after{background:rgba(12,26,63,.4)}
  .lead-dots button[aria-current="true"]::after{width:26px;margin-left:-13px;background:var(--blue)}
  @media(prefers-reduced-motion:reduce){
    .lead-slider.is-live .lead-slide{transform:none;transition:opacity .3s linear,visibility 0s linear .3s}
    .lead-slider.is-live .lead-slide.is-active{transform:none;transition:opacity .3s linear .32s,visibility 0s}
    .lead-bg i{transition:opacity .6s linear}
    .lead-dots button::after{transition:background .3s}
  }

  /* audit form: a navy 3D slab. Without WebGL it is the same navy pill drawn in CSS. */
  .lf3d{position:relative;max-width:880px;margin:0 auto}
  .lf3d-cv{position:absolute;pointer-events:none;z-index:0}
  .lead-form{position:relative;z-index:1;display:flex;gap:10px;background:linear-gradient(180deg,#1F3478,var(--ink));border-radius:999px;padding:10px;box-shadow:0 30px 60px -28px rgba(12,26,63,.6);transform-origin:50% 50%}
  .lead-form input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:0 24px;height:58px;font:inherit;font-size:16px;color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 0 2px 8px rgba(0,0,0,.28);transition:border-color .2s,background .2s}
  .lead-form input::placeholder{color:#A3B0D6}
  .lead-form input:focus{outline:0;border-color:#8EA2FF;background:rgba(255,255,255,.12);box-shadow:inset 0 2px 8px rgba(0,0,0,.28),0 0 0 3px rgba(142,162,255,.28)}
  .lead-form input:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff;-webkit-box-shadow:0 0 0 40px #1A2B66 inset;transition:background-color 9999s}
  .lead-form .btn{height:58px;padding:0 30px;flex:none}
  .lf3d.is-3d .lead-form{background:transparent;box-shadow:none;transform-style:preserve-3d}
  .lf3d.is-3d .lead-form .btn{background:transparent;box-shadow:none;transition:none;will-change:transform}
  .lf3d.is-3d .lead-form .btn:hover{transform:none}
  .lead-note{margin-top:22px;font-size:14.5px;color:var(--muted)}
  @media(max-width:760px){
    .lead-hero{padding:56px 0 var(--sec)}
    .lead-form{flex-direction:column;border-radius:26px}
    .lead-form .btn{width:100%}
    .lead-form input{flex:none;width:100%;height:54px}
    .lead-title br{display:none}
    .spark{display:none}
    .eyebrow{font-size:13px;letter-spacing:.1em}
    .lead-dots{margin:20px 0 26px}
  }

  /* ===== PINNED STAGE (sections 1 + 2) ===== */
  /* one vertical rhythm for the whole page: every section pads by --sec, so the gap at any
     boundary is always 2x --sec. No section carries its own hand-picked margin. */
  .stage{position:relative;isolation:isolate}
  .stage-fx{position:absolute;left:0;right:0;top:calc(-1 * var(--nav-h));bottom:0;z-index:1;pointer-events:none;display:none}
  .stage-pin{position:sticky;top:0;height:100vh;overflow:hidden}
  #fx3d{position:absolute;inset:0;width:100%;height:100%;display:none;filter:drop-shadow(0 12px 14px rgba(240,132,58,.22))}
  .fx3d-on #fx3d{display:block}
  .lead-hero .wrap,.hero-inner,.industries{position:relative;z-index:2}
  @media(min-width:981px){.stage-fx{display:block}.fx3d-on .lead-title .spark{display:none}}

  .float-chip{position:absolute;left:0;top:0;display:none;align-items:center;gap:12px;padding:13px 18px 13px 13px;border-radius:20px;text-align:left;font-size:13.5px;line-height:1.3;color:var(--muted);
    background:rgba(255,255,255,.66);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(12,26,63,.06),0 22px 44px -22px rgba(12,26,63,.42);
    transition:background .45s,box-shadow .45s,color .45s;will-change:opacity}
  .float-chip b{display:block;font-family:var(--display);font-size:20px;color:var(--ink);letter-spacing:-.02em;transition:color .45s}
  .chip-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;transition:background .45s,color .45s}
  .chip-ic-gain{background:#E3F7EE;color:var(--gain)}
  .chip-ic-blue{background:#E9EDFF;color:var(--blue)}
  .chip-l{transform:rotate(-4deg)}
  .chip-r{transform:rotate(3deg)}
  .float-chip.on-dark{background:rgba(22,41,94,.5);color:#AEB8D6;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.1),0 22px 44px -18px rgba(0,0,0,.6)}
  .float-chip.on-dark b{color:#fff}
  .float-chip.on-dark .chip-ic-gain{background:rgba(75,227,164,.16);color:var(--gain-bright)}
  .float-chip.on-dark .chip-ic-blue{background:rgba(67,97,238,.3);color:#AFC0FF}
  @media(min-width:1320px){.float-chip{display:flex}}

  /* ===== 2. HERO (photo-led, dark) ===== */
  /* starts on the same warm colour section 1 ends on, then fades to white behind the frame */
  .hero{padding:14px 14px 0;background:linear-gradient(180deg,var(--warm) 0,#FFFFFF 420px)}
  /* clip, not hidden: with overflow:hidden this frame becomes a scroll container and the
     sticky receipt column inside it cannot move. The rounded photo still clips the same. */
  .hero-frame{position:relative;border-radius:30px;overflow:clip;color:#fff;background:var(--ink)}
  .hero-frame > .ph{position:absolute;inset:0}
  .hero-frame > .ph::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(12,26,63,.97) 0%,rgba(12,26,63,.9) 44%,rgba(12,26,63,.5) 100%)}
  .hero-inner{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:56px;align-items:end;padding-top:92px;padding-bottom:64px}
  .hero-pill{display:inline-flex;gap:10px;align-items:center;border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:8px 16px;font-weight:600;font-size:14.5px;color:#DCE3FA;margin-bottom:26px}
  .hero-pill i{width:8px;height:8px;border-radius:50%;background:var(--gain-bright);box-shadow:0 0 0 4px rgba(75,227,164,.2)}
  .hero .hero-h{color:#fff;font-size:clamp(46px,6.8vw,96px);margin-bottom:26px;max-width:820px}
  .hero-lede{font-size:19.5px;max-width:560px;margin-bottom:36px;color:#C9D1EA}
  .hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:40px}
  .hero-proof{display:flex;align-items:center;gap:16px}
  .doodle{flex:none;margin-top:-34px}
  .avatars{display:flex;flex:none}
  .avatars span{width:46px;height:46px;border-radius:50%;border:3px solid #13235A;display:grid;place-items:center;margin-left:-12px}
  .avatars span:first-child{margin-left:0}
  .hero-proof p{font-size:15px;line-height:1.4;color:#AEB8D6;max-width:300px}
  .hero-proof strong{display:block;color:#fff;font-size:17px;margin-bottom:2px}
  .hero-side{display:grid;gap:18px;justify-items:end}
  .hero-side-inner{display:grid;gap:18px;justify-items:end}
  @media(min-width:981px){
    /* left column scrolls, the founder chip and receipt hold still beside it */
    .hero-inner{align-items:start}
    .hero-side{align-self:stretch;align-content:center}
    .hero-side-inner{position:sticky;top:112px}
  }
  .founder-chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 18px 7px 7px;display:flex;align-items:center;gap:12px;font-weight:600;font-size:14.5px;color:#fff}

  /* Reusable pair of trust buttons — LinkedIn + Google today, but any two external-proof
     links can reuse .trust-links/.trust-btn. Light by default (proof section, white card);
     add .on-dark where it sits over a photo/navy backdrop, like the homepage hero. */
  .trust-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
  .trust-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;
    font-weight:700;font-size:14px;background:#fff;border:1px solid var(--line);color:var(--ink);
    transition:border-color .2s,box-shadow .2s,transform .2s,background .2s}
  .trust-btn:hover{border-color:#DADCE0;box-shadow:0 10px 20px -12px rgba(12,26,63,.3);transform:translateY(-2px)}
  .trust-btn .mark{width:18px;height:18px;background:var(--ink);flex:none;
    -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
  .trust-btn .g-ic{width:18px;height:18px;flex:none}
  .trust-btn .g-ic svg{display:block;width:100%;height:100%}
  .trust-links.on-dark .trust-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#fff}
  .trust-links.on-dark .trust-btn:hover{background:rgba(255,255,255,.2);box-shadow:none}
  .trust-links.on-dark .trust-btn .mark{background:#fff}
  .founder-chip .ini{display:flex}
  .founder-chip .ini span{width:34px;height:34px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-weight:700;font-size:12.5px;border:2px solid #13235A}
  .founder-chip .ini span + span{margin-left:-10px;background:var(--gain)}

  .receipt{position:relative;width:320px;background:#fff;padding:22px 24px 26px;border-radius:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);transform:rotate(-2deg)}
  .receipt-head{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);font-weight:600;padding-bottom:12px;border-bottom:1.5px dashed var(--line);margin-bottom:12px}
  .receipt-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font-size:15px;color:var(--body)}
  .receipt-row b{font-family:var(--display);font-size:22px;color:var(--ink);letter-spacing:-0.02em}
  .receipt-row.earned b{color:var(--gain);font-size:30px}
  .receipt-total{margin-top:12px;padding-top:12px;border-top:1.5px dashed var(--line);display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--ink);font-size:15px}
  .receipt-total span{background:#E3F7EE;color:var(--gain);padding:5px 12px;border-radius:999px;font-size:14px}

  .industries{position:relative;border-top:1px solid rgba(255,255,255,.14);padding:22px 0;overflow:hidden}
  .industries-track{display:flex;width:max-content;animation:slide 40s linear infinite}
  .industries span{font-family:var(--display);font-weight:700;font-size:22px;color:rgba(255,255,255,.6);white-space:nowrap;display:flex;align-items:center;gap:44px;padding-right:44px}
  .industries span::after{content:'';width:8px;height:8px;background:var(--gain-bright);transform:rotate(45deg)}
  @keyframes slide{to{transform:translateX(-50%)}}

  @media(max-width:980px){
    .hero-inner{grid-template-columns:1fr;align-items:start;padding-top:64px;padding-bottom:44px;gap:44px}
    .hero-side,.hero-side-inner{justify-items:start}
  }
  @media(max-width:520px){
    .hero{padding:8px 8px 0}.hero-frame{border-radius:22px}
    .receipt{width:100%;max-width:300px}
    .doodle{display:none}
  }

  /* ===== 3. EXPERIENCE ===== */
  .exp-sec{padding:var(--sec) 0;background:var(--paper)}
  .exp-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:88px;align-items:center}
  .exp-media{position:relative}
  .founders{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .founder-ph{border-radius:var(--r-photo);aspect-ratio:4/5}
  .founder figcaption{padding-top:14px}
  .founder b{display:block;font-family:var(--display);font-size:20px;color:var(--ink);letter-spacing:-.015em}
  .founder span{font-size:14.5px;color:var(--muted)}
  /* the second portrait steps down so the pair reads as people, not a spec sheet */
  .founder:nth-child(2){margin-top:34px}
  .exp-badge{margin-top:30px;background:var(--blue);color:#fff;border-radius:20px;padding:22px 26px;box-shadow:0 24px 50px -20px rgba(67,97,238,.75);display:inline-flex;align-items:center;gap:16px}
  .exp-badge b{font-family:var(--display);font-size:66px;line-height:.9;letter-spacing:-.04em}
  .exp-badge span{font-weight:600;font-size:15.5px;line-height:1.3;color:#E3E8FF}
  .exp-grid h2{font-size:clamp(36px,4.6vw,60px);margin-bottom:20px}
  .exp-lede{font-size:18.5px;max-width:540px;margin-bottom:36px}
  .exp-stats{border-top:1px solid var(--line);margin-bottom:40px}
  .exp-stat{display:grid;grid-template-columns:132px 1fr;gap:28px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line)}
  .exp-stat > b{font-family:var(--display);font-weight:800;font-size:58px;color:var(--ink);letter-spacing:-.03em;line-height:1}
  .exp-stat.gain > b{color:var(--gain)}
  .exp-stat h3{font-size:21px;letter-spacing:-.015em;line-height:1.2;margin-bottom:6px}
  .exp-stat p{font-size:16px;max-width:440px}
  .tools p{font-weight:600;color:var(--muted);font-size:14.5px;margin-bottom:14px}
  .tools ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
  .tools li{display:flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;font-weight:600;font-size:14.5px;color:var(--ink);background:#fff}
  .tools img{width:17px;height:17px;opacity:.85}
  @media(min-width:981px){
    .exp-grid{align-items:start}
    .exp-media{position:sticky;top:calc(var(--nav-h) + 26px)}
  }
  @media(max-width:980px){.exp-grid{grid-template-columns:1fr;gap:56px}.exp-media{max-width:520px}}
  @media(max-width:520px){.exp-stat{grid-template-columns:84px 1fr;gap:18px;padding:22px 0}.exp-stat > b{font-size:40px}.exp-stat h3{font-size:19px}.exp-badge b{font-size:52px}}

  /* ===== 4. RESULT LEDGER ===== */
  /* clip, not hidden: overflow:hidden would make this section a scroll container and the
     sticky ledger card would stop working inside it */
  /* --- industry switcher ---
     Five industries only, and each one is a full case with its own numbers. An empty tab is
     worse than no tab: a visitor who clicks Real estate and finds boilerplate learns instantly
     that there is no real estate client. Every tab here has to earn its place. */
  .case-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:38px}
  .case-tabs button{border:1px solid var(--line);background:#fff;color:var(--muted);font:inherit;font-weight:600;font-size:15px;
    padding:11px 20px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
  .case-tabs button:hover{border-color:rgba(12,26,63,.28);color:var(--ink)}
  .case-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 14px 26px -16px rgba(12,26,63,.7)}
  .case-panel{transition:opacity .34s ease,transform .34s ease}
  .case-panel.is-swapping{opacity:0;transform:translateY(10px)}
  @media(max-width:640px){
    .case-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--wrap-pad) * -1) 30px;padding:0 var(--wrap-pad) 4px}
    .case-tabs::-webkit-scrollbar{display:none}
    .case-tabs button{flex:none}
  }

  .ledger-sec{background:var(--white);color:var(--body);padding:var(--sec) 0;position:relative;overflow:clip}
    /* masked at the top so the circle fades in instead of being sliced flat by the section edge */
  .ledger-sec::before{content:'';position:absolute;right:-200px;top:0;width:720px;height:720px;border-radius:50%;
    background:radial-gradient(circle,rgba(67,97,238,.12),transparent 65%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 46%);mask-image:linear-gradient(180deg,transparent 0,#000 46%)}
  .ledger-sec h2{color:var(--ink);font-size:clamp(40px,5.6vw,76px);max-width:1040px;margin-bottom:24px}
  .case-label{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-weight:600;font-size:15px;color:var(--muted);margin-bottom:22px}
  .case-label b{background:#E3F7EE;color:var(--gain);padding:5px 12px;border-radius:999px;font-size:13.5px}
  .case-eyebrow{font-weight:700;font-size:14.5px;letter-spacing:.02em;color:var(--blue);margin-bottom:14px}
  .ledger-sub{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.2vw,40px);letter-spacing:-.02em;line-height:1.15;margin-bottom:18px}
  .ledger-sub{color:var(--ink)}.ledger-sub .in{color:var(--muted)}.ledger-sub .out{color:var(--gain)}
  .ledger-sec .lede{font-size:19px;max-width:680px;margin-bottom:34px}
  .ledger-main .lede{max-width:620px;margin-bottom:34px}
  /* left column (label, heading, story, photo) scrolls; the numbers card on the right
     holds still next to it, so the proof stays on screen while the story is read */
  .ledger-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:start;position:relative}
  @media(min-width:981px){
    .ledger-sec h2{font-size:clamp(34px,3.5vw,54px);max-width:none}
    .ledger-sub{font-size:clamp(24px,2.5vw,32px)}
    .ledger-sec .lede{font-size:18px;max-width:none;margin-bottom:40px}
    .ledger-col{position:sticky;top:calc(var(--nav-h) + 26px)}
  }
  .ledger-photo{border-radius:var(--r-photo);aspect-ratio:4/3}
  .ledger-photo img{object-position:50% 50%}
  .ledger-photo::after{content:'';position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,rgba(12,26,63,0),rgba(12,26,63,.55))}
  .ledger-photo .tag{position:absolute;z-index:1;left:20px;bottom:20px;right:20px;background:rgba(12,26,63,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border-radius:12px;padding:14px 18px}
  .ledger-photo .tag strong{display:block;font-family:var(--display);font-size:19px;letter-spacing:-0.01em}
  .ledger-photo .tag span{font-size:14.5px;color:#C5CDE3}

  /* paper card on the white section: soft edge and shadow keep it separated */
  .ledger{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:40px 40px;color:var(--body);box-shadow:0 30px 56px -34px rgba(12,26,63,.35)}
  .ledger-row{display:flex;align-items:baseline;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
  .ledger-row .what{font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap}
  .ledger-row .what small{display:block;font-weight:500;font-size:14px;color:var(--muted)}
  .ledger-row .dots{flex:1;border-bottom:2px dotted #C2CAD9;transform:translateY(-6px);min-width:20px}
  .ledger-row .val{font-family:var(--display);font-weight:700;font-size:28px;color:var(--ink);letter-spacing:-0.02em;white-space:nowrap}
  .ledger-row.spent .val{color:var(--muted)}
  .ledger-row.earned{border-bottom:3px double var(--ink)}
  .ledger-row.earned .val{color:var(--gain);font-size:34px}
  /* ---- proof, second shape: a movement instead of a ledger ----------------

     The ledger above answers one question — money in, money out — and that is the only
     question an ads page has. SEO, websites, social and design have no ad spend to divide
     revenue by, so forcing them into a ledger means inventing a denominator. Their proof
     is a MOVEMENT: what a number was, and what it became.

     So this is the same card, the same rows and the same dotted leader, with only the
     value cell swapped. A visitor moving between service pages reads the two as one
     family rather than as two designs, and nothing below .ledger needs to know which
     shape it is in — svc.js still counts [data-count], currency.js still converts
     [data-inr], and a page opts in with one class. */
  .ledger.is-shift .shift-v{display:flex;align-items:baseline;gap:11px;white-space:nowrap}
  .ledger.is-shift .was{font-family:var(--display);font-weight:700;font-size:21px;color:var(--muted);
    text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#C2CAD9}
  .ledger.is-shift .shift-v i{font-style:normal;font-weight:700;font-size:17px;color:var(--svc,#4361EE)}
  .ledger.is-shift .now{font-family:var(--display);font-weight:700;font-size:28px;color:var(--ink);letter-spacing:-.02em}
  .ledger.is-shift .ledger-row.earned .now{color:var(--gain);font-size:34px}
  @media(max-width:520px){
    .ledger.is-shift .was{font-size:17px}
    .ledger.is-shift .now{font-size:23px}
    .ledger.is-shift .ledger-row.earned .now{font-size:27px}
  }

  .ledger-result{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:26px}
  .ledger-result p{font-size:18px;font-weight:700;color:var(--ink);line-height:1.3}
  .ledger-result p small{display:block;font-weight:500;font-size:14.5px;color:var(--muted);margin-top:4px}
  .ledger-result .big{font-family:var(--display);font-weight:800;font-size:clamp(56px,6.4vw,84px);line-height:.9;color:var(--gain);letter-spacing:-0.04em}
  /* rows rise in the first time the card is seen; the 'anim' class is added by JS, so if JS
     or the observer is unavailable everything just shows normally */
  @media (prefers-reduced-motion: no-preference){
    .ledger.anim .ledger-row,.ledger.anim .ledger-result{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.68,.28,1)}
    .ledger.anim .ledger-row .dots{transform:translateY(-6px) scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.22,.68,.28,1) .15s}
    .ledger.anim .ledger-result .big{opacity:0;transform:scale(.9);transition:opacity .5s ease .25s,transform .6s cubic-bezier(.2,.9,.3,1.2) .25s}
    .ledger.anim.is-in .ledger-row,.ledger.anim.is-in .ledger-result{opacity:1;transform:none}
    .ledger.anim.is-in .ledger-row .dots{transform:translateY(-6px) scaleX(1)}
    .ledger.anim.is-in .ledger-result .big{opacity:1;transform:none}
    .ledger.anim .ledger-row:nth-child(1),.ledger.anim .ledger-row:nth-child(1) .dots{transition-delay:.02s}
    .ledger.anim .ledger-row:nth-child(2),.ledger.anim .ledger-row:nth-child(2) .dots{transition-delay:.14s}
    .ledger.anim .ledger-row:nth-child(3),.ledger.anim .ledger-row:nth-child(3) .dots{transition-delay:.26s}
    .ledger.anim .ledger-row:nth-child(4),.ledger.anim .ledger-row:nth-child(4) .dots{transition-delay:.38s}
    .ledger.anim .ledger-result{transition-delay:.5s}
  }
  .ledger-note{margin-top:22px;font-size:14.5px;color:var(--muted);display:flex;gap:10px;align-items:center}
  .ledger-note svg{flex:none}
  .ledger-note + .ledger-note{margin-top:8px}
  @media(max-width:1180px){.ledger{padding:32px 28px}.ledger-row .val{font-size:24px}.ledger-row.earned .val{font-size:28px}}
  @media(max-width:900px){
    .ledger-grid{grid-template-columns:1fr}
    .ledger-photo{min-height:0;aspect-ratio:4/3}
    .ledger{padding:28px 22px}
    .ledger-row .val{font-size:22px}
    .ledger-row.earned .val{font-size:26px}
    .ledger-row .what{white-space:normal}
  }
  @media(max-width:640px){
    /* small phones: caption sits under the photo so it never covers the children's faces */
    .ledger-photo{aspect-ratio:auto;background:var(--ink-2)}
    .ledger-photo img{display:block;height:auto;aspect-ratio:1600/1212}
    .ledger-photo::after{display:none}
    .ledger-photo .tag{position:static;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding:14px 18px 16px}
  }

  /* ===== 5. SERVICES ===== */
  .svc-sec{padding:var(--sec) 0;background:var(--paper)}
  .svc-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:start}
  .svc-intro h2{font-size:clamp(34px,3.7vw,52px);margin-bottom:18px}
  .svc-intro > p{font-size:17.5px;max-width:440px}

  /* audit card: a small 3D "check-up" that walks across the six services.
     Text and button sit below the scene, so nothing is on top of anything else. */
  .audit3d{position:relative;margin-top:30px;border-radius:var(--r-photo);background:linear-gradient(165deg,#1B2F6E 0%,var(--ink) 62%);box-shadow:0 34px 60px -36px rgba(12,26,63,.7)}
  .audit-stage{position:relative;height:clamp(150px, calc(100vh - 470px), 210px);border-radius:var(--r-photo) var(--r-photo) 0 0;overflow:hidden;
    background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
    background-size:26px 26px;background-position:center bottom;
    -webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.35));mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.35))}
  .audit-cv{position:absolute;inset:0;width:100%;height:100%;display:none}
  .audit3d.is-3d .audit-cv{display:block}
  /* plain bars for browsers without WebGL */
  .audit-bars{position:absolute;right:26px;bottom:18px;display:flex;align-items:flex-end;gap:12px;height:62%}
  .audit-bars i{width:22px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#6F88FF,#2F4FE0)}
  .audit-bars i:nth-child(1){height:55%}.audit-bars i:nth-child(2){height:75%}.audit-bars i:nth-child(3){height:45%}
  .audit-bars i:nth-child(4){height:100%;background:linear-gradient(180deg,#7BF0BE,#1FB57A)}.audit-bars i:nth-child(5){height:40%}.audit-bars i:nth-child(6){height:68%}
  .audit3d.is-3d .audit-bars{display:none}
  .audit-readout{position:absolute;left:20px;top:18px;z-index:1;display:flex;gap:10px;align-items:flex-start;color:#fff;max-width:36%}
  .audit-dot{width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--gain-bright);box-shadow:0 0 0 4px rgba(75,227,164,.18);flex:none}
  @media (prefers-reduced-motion: no-preference){.audit-dot{animation:ping 1.6s ease-out infinite}}
  @keyframes ping{0%{box-shadow:0 0 0 0 rgba(75,227,164,.55)}100%{box-shadow:0 0 0 10px rgba(75,227,164,0)}}
  .audit-readout small{display:block;font-size:12.5px;font-weight:600;color:#9FB0DA;line-height:1.2}
  .audit-readout b{display:block;font-family:var(--display);font-size:20px;letter-spacing:-.015em;line-height:1.15}
  .audit-readout em{display:block;font-style:normal;font-size:13.5px;color:var(--gain-bright);font-weight:600;line-height:1.3}
  .audit-readout.swap > span{animation:swap .45s ease}
  @keyframes swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .audit-body{position:relative;padding:18px 24px 26px;display:grid;gap:4px}
  .audit-body strong{font-family:var(--display);font-size:21px;color:#fff;letter-spacing:-.015em;line-height:1.2}
  .audit-body > span{font-size:15px;color:#AEB8D6;line-height:1.45}
  .audit-body .btn{justify-self:start;margin-top:14px;padding:13px 22px;font-size:15px}

  .svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  /* iPhone-style glass hover: the card takes the same frosted navy you see behind the nav
     over the dark sections. The check-up scene on the left is untouched — .is-scan still
     only lifts the border, so the magnifier's own highlight works exactly as before. */
  @media(hover:hover){
    .svc-card:hover{background:linear-gradient(168deg,#545F7D 0%,#2E3E6B 46%,#1D2D58 100%);border-color:rgba(255,255,255,.22);box-shadow:0 26px 48px -22px rgba(12,26,63,.6);transform:translateY(-3px)}
    .svc-card:hover h3{color:#fff}
    .svc-card:hover p{color:#C5CDE3}
    .svc-card:hover .svc-ic{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
    .svc-card:hover .svc-ic .mark{background:#fff}
    .svc-card:hover .svc-ic svg{stroke:#fff}
    .svc-card:hover .svc-metric{border-top-color:rgba(255,255,255,.3)}
    .svc-card:hover .svc-metric small{color:#9FAAC9}
    .svc-card:hover .svc-metric b{color:var(--gain-bright)}
  }
  .svc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px 26px 22px;display:flex;flex-direction:column;gap:12px;transition:background .35s,border-color .3s,box-shadow .3s,transform .35s}
  .svc-card h3,.svc-card p,.svc-metric,.svc-metric small,.svc-metric b,.svc-ic{transition:color .3s,background .35s,border-color .35s,box-shadow .35s}
  .svc-ic .mark,.svc-ic svg{transition:background .3s,stroke .3s}
  .svc-card:hover,.svc-card.is-scan{border-color:#B7C4F7;box-shadow:0 18px 40px -26px rgba(12,26,63,.4)}
  /* icons: brand marks for platforms, simple line icons for the rest, all on a soft tile */
  .svc-ic{width:52px;height:52px;border-radius:15px;background:#EEF1FD;display:grid;place-items:center;margin-bottom:6px;box-shadow:inset 0 0 0 1px rgba(67,97,238,.08);transition:transform .3s}
  .svc-card:hover .svc-ic,.svc-card.is-scan .svc-ic{transform:translateY(-2px)}
  .svc-ic .mark{width:26px;height:26px;display:block;background:var(--c,#4361EE);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
  .svc-card h3{font-size:26px;line-height:1.05}
  .svc-card p{font-size:15.5px;line-height:1.5}
  .svc-metric{margin-top:auto;padding-top:14px;border-top:2px dotted #C9D0DE}
  .svc-metric small{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:2px}
  .svc-metric b{display:block;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--gain)}

  /* The intro holds still at every screen height now (it used to switch off below 680px tall,
     which is why it stopped working at 100% zoom). On short screens it gets a little more compact. */
  @media(min-width:981px){.svc-intro{position:sticky;top:104px}}
  @media(min-width:981px) and (max-height:760px){
    .svc-intro h2{font-size:clamp(30px,3.2vw,44px);margin-bottom:12px}
    .svc-intro > p{font-size:16px}
    .audit3d{margin-top:20px}
    .audit-stage{height:clamp(112px, calc(100vh - 490px), 210px)}
    .audit-body{padding:16px 20px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
    .audit-body strong{font-size:19px}
    .audit-body > span{display:none}
    .audit-body .btn{margin-top:0;flex:none}
  }
  @media(max-width:980px){
    .svc-layout{grid-template-columns:1fr;gap:40px}
    .audit3d{max-width:620px}
    .audit-stage{height:200px}
  }
  @media(max-width:620px){
    .svc-grid{grid-template-columns:1fr}
    .audit-body .btn{justify-self:stretch}
  }

  /* ===== 6. PROCESS ===== */
  .proc-sec{padding:var(--sec) 0}
  .proc-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:72px;align-items:start}
  .proc-photo{border-radius:var(--r-photo);aspect-ratio:4/5;position:sticky;top:calc(var(--nav-h) + 26px)}
  @media(min-width:901px){.proc-photo{aspect-ratio:auto;height:min(590px, calc(100vh - 150px));min-height:360px}}
  .proc-photo .stamp{position:absolute;right:20px;bottom:20px;left:20px;background:#fff;border-radius:12px;padding:16px 18px;display:flex;gap:14px;align-items:center;color:var(--ink);font-weight:700;font-size:16px;line-height:1.35}
  .proc-photo .stamp svg{flex:none}
  .proc-grid h2{font-size:clamp(36px,4.6vw,60px);margin-bottom:18px}
  .proc-grid > div > p{font-size:18px;max-width:500px;margin-bottom:44px}
  .steps{list-style:none;counter-reset:s}
  /* equal rows, so the gap between the four steps is the same even though the
     descriptions are different lengths */
  @media(min-width:901px){.steps{display:grid;grid-template-rows:repeat(3,1fr) auto}}
  .steps li{counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:22px;padding-bottom:36px;position:relative}
  .steps li::before{content:counter(s);width:64px;height:64px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:26px;color:var(--ink);background:#fff;position:relative;z-index:1}
  .steps li:not(:last-child)::after{content:'';position:absolute;left:31px;top:64px;bottom:0;width:2px;background:var(--line)}
  .steps li:last-child::before{background:var(--gain);border-color:var(--gain);color:#fff}
  .steps li::before{transition:background .35s,border-color .35s,color .35s,box-shadow .35s}
  .steps li:hover::before{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 6px rgba(67,97,238,.14)}
  .steps li:last-child:hover::before{background:var(--gain);border-color:var(--gain);box-shadow:0 0 0 6px rgba(10,143,87,.16)}
  .steps h3{font-size:24px;letter-spacing:-0.02em;margin:10px 0 8px;line-height:1.15}
  .steps p{font-size:16.5px;max-width:460px}
  @media(max-width:900px){.proc-grid{grid-template-columns:1fr;gap:44px}.proc-photo{position:relative;top:0;aspect-ratio:16/11}}
  /* Experience follows Process now, so Process needs a real bottom edge before the wash starts */

  .cta{margin:100px 0 0;border-radius:28px;overflow:hidden;position:relative;color:#fff}
  .cta .ph{position:absolute;inset:0}
  .cta .ph::after{content:'';position:absolute;inset:0;background:linear-gradient(95deg,rgba(12,26,63,.97) 0%,rgba(12,26,63,.88) 48%,rgba(47,79,224,.55) 100%)}
  .cta-inner{position:relative;padding:80px 64px;max-width:720px}
  .cta h2{color:#fff;font-size:clamp(34px,4.4vw,58px);margin-bottom:18px}
  .cta p{font-size:18.5px;color:#D3D9EE;margin-bottom:34px;max-width:540px}
  .cta-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:22px}
  .cta small{font-size:14.5px;color:#AEB8D6}
  .cta-alt{font-size:15px;color:#AEB8D6;margin:-6px 0 18px}
  .cta-alt a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
  @media(max-width:700px){.cta-inner{padding:52px 26px}}

  .cta-sec{padding:calc(var(--sec) * .45) 0 var(--sec)}

  /* ===== STORIES ===== */
  .stories-sec{padding:var(--sec) 0}
  .stories-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
  .stories-intro{position:sticky;top:calc(var(--nav-h) + 26px)}
  .stories-intro h2{font-size:clamp(36px,4.4vw,58px);margin-bottom:20px}
  .stories-intro > p{font-size:18px;margin-bottom:30px;max-width:460px}
  .rating{display:flex;align-items:center;gap:18px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:32px}
  .rating b{font-family:var(--display);font-size:54px;color:var(--ink);letter-spacing:-.03em;line-height:1}
  .stars{color:#F5A524;letter-spacing:2px;font-size:18px;line-height:1}
  .rating span{display:block;font-size:15px;color:var(--muted);margin-top:6px}
  .story-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .story{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:30px;display:flex;flex-direction:column;gap:18px;transition:background .35s,border-color .3s,box-shadow .3s,transform .35s}
  .story blockquote,.story .result,.story figcaption,.story figcaption b,.story figcaption span{transition:color .3s,background .35s,border-color .35s}
  .story.lead{grid-column:1/-1;background:var(--ink);border-color:var(--ink);padding:40px}
  .story .result{align-self:flex-start;background:#E3F7EE;color:var(--gain);font-weight:700;font-size:14px;padding:6px 12px;border-radius:999px}
  .story.lead .result{background:rgba(75,227,164,.14);color:var(--gain-bright)}
  .story blockquote{font-size:17.5px;line-height:1.55;color:var(--ink);font-weight:500}
  .story.lead blockquote{font-family:var(--display);font-size:clamp(24px,2.4vw,32px);font-weight:700;line-height:1.25;color:#fff;letter-spacing:-.015em}
  .story figcaption{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
  .story.lead figcaption{border-color:rgba(255,255,255,.14)}
  .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none}
  .story figcaption b{display:block;color:var(--ink);font-size:16px;line-height:1.3}
  .story.lead figcaption b{color:#fff}
  .story figcaption span{font-size:14.5px;color:var(--muted)}
  .story.lead figcaption span{color:#AEB8D6}
  .story .stars{font-size:15px}
  @media(hover:hover){
    .story:not(.lead):hover{background:linear-gradient(168deg,#545F7D 0%,#2E3E6B 46%,#1D2D58 100%);border-color:rgba(255,255,255,.22);box-shadow:0 26px 48px -22px rgba(12,26,63,.6);transform:translateY(-3px)}
    .story:not(.lead):hover blockquote{color:#fff}
    .story:not(.lead):hover .result{background:rgba(75,227,164,.16);color:var(--gain-bright)}
    .story:not(.lead):hover figcaption{border-color:rgba(255,255,255,.16)}
    .story:not(.lead):hover figcaption b{color:#fff}
    .story:not(.lead):hover figcaption span{color:#AEB8D6}
  }
  @media(max-width:980px){.stories-grid{grid-template-columns:1fr;gap:44px}.stories-intro{position:static}}
  @media(max-width:620px){.story-list{grid-template-columns:1fr}.story.lead{padding:28px}}

  /* ===== FOOTER ===== */
  .site-foot{background:var(--ink);color:#AEB8D6;padding:calc(var(--sec) * .78) 0 0;font-size:15.5px}
  .site-foot .logo{color:#fff}
  .foot-top{display:grid;grid-template-columns:1fr .95fr 1.5fr 1.15fr;gap:28px 24px;align-items:start;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
  @media(max-width:1180px){.foot-top{grid-template-columns:repeat(2,1fr);gap:32px 24px}}
  .foot-contact{display:flex;gap:14px;align-items:flex-start}
  .foot-contact .ic{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.08);display:grid;place-items:center;flex:none}
  .foot-contact small{display:block;font-size:13.5px;color:#8E99BB;margin-bottom:2px}
    .foot-contact a,.foot-contact strong,.foot-contact address{color:#fff;font-weight:700;font-size:16.5px;font-style:normal;line-height:1.35}
  .foot-contact .stack a{display:block}
  .foot-contact .stack a + a{margin-top:3px}
  .foot-contact a.is-long{font-size:15.5px;overflow-wrap:anywhere}
  .foot-contact address{font-weight:600;font-size:15.5px;color:#E4E9F7}
  .foot-cols{display:grid;grid-template-columns:1.3fr .8fr .9fr 1.3fr;gap:48px;padding:56px 0}
  .foot-cols h4{font-family:var(--display);color:#fff;font-size:20px;font-weight:700;margin-bottom:20px;letter-spacing:-.01em}
  .foot-logo{margin-bottom:22px}
  .foot-cols ul{list-style:none;display:grid;gap:12px}
  .foot-cols a:hover{color:#fff}
  .socials{display:flex;gap:10px;margin-top:24px}
  .socials a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;transition:background .2s,border-color .2s}
  .socials a:hover{background:var(--blue);border-color:var(--blue)}
  .socials img{width:17px;height:17px;filter:invert(1)}
  .subscribe{display:flex;background:#fff;border-radius:999px;padding:6px;margin:18px 0 12px}
  .subscribe:focus-within{box-shadow:0 0 0 3px var(--blue)}
  .subscribe input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0 16px;font:inherit;font-size:15px;color:var(--ink)}
  .subscribe button{border:0;cursor:pointer;background:var(--blue);color:#fff;font:inherit;font-weight:700;font-size:15px;padding:12px 20px;border-radius:999px}
  .subscribe button:hover{background:var(--blue-deep)}
  .foot-cols small{font-size:13.5px;color:#8E99BB}
  .foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px 0 32px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:#8E99BB}
  .foot-bottom nav{display:flex;gap:24px}
  .foot-bottom a:hover{color:#fff}
  @media(max-width:980px){.foot-cols{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.foot-top,.foot-cols{grid-template-columns:1fr}.foot-cols{gap:36px}}

  @media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

  /* ===== BIG SCREENS (kept last on purpose, so these values win) =====
     The page used to sit at a fixed 1200px, so on 1920 / 2560 monitors wide empty strips
     showed on both sides. The container, the body text, the photos and the reading widths
     now step up together — this is a whole-page change, not one section. */
  @media(min-width:1500px){
    :root{--wrap:1400px;--wrap-pad:52px}
    body{font-size:17.5px}
    .lead-title{font-size:min(8.2vw,132px)}
    .lead-sub{max-width:720px}
    .lf3d{max-width:960px}
    .hero .hero-h{max-width:960px}
    .hero-lede{max-width:640px}
    .exp-lede{max-width:620px}
    .exp-stat p{max-width:520px}
    .svc-intro > p{max-width:500px}
    .steps p{max-width:560px}
    .stories-intro > p{max-width:520px}
    .cta-inner{max-width:860px}
    .cta p{max-width:600px}
    .hero-proof p{max-width:340px}
    .proc-grid > div > p{max-width:580px}
  }
  @media(min-width:1800px){
    :root{--wrap:1600px;--wrap-pad:60px}
    body{font-size:18px}
    .lead-title{font-size:min(8.2vw,142px)}
    .exp-stat{grid-template-columns:150px 1fr}
    .proc-photo{height:min(690px, calc(100vh - 150px))}
    .svc-card{padding:30px 30px 26px}
  }
  @media(min-width:2200px){
    :root{--wrap:1760px;--wrap-pad:68px}
    body{font-size:18.5px}
    .lead-title{font-size:min(8.2vw,150px)}
    .proc-photo{height:min(760px, calc(100vh - 150px))}
  }

  /* =========================================================================
     SERVICE PAGES (inner)
     One skeleton for every service. What changes per page is --svc (the accent),
     the hero visual and the copy — never the structure. That keeps five pages
     maintainable and stops them reading as five different websites.

     8.5 rewrite. Four things changed and they apply to every future service page:
       1. The hero eyebrow is its own component (.sp-eyebrow). It used to borrow the
          homepage .eyebrow, which is centre-aligned for a centred hero, so on a
          left-aligned service hero the logo and label floated into the middle.
       2. The heading swoosh has its own rule. .lead-title .ul does not match an
          .sp-hero h1, so the SVG was laying out as a full-width block under the
          heading instead of an underline.
       3. The FAQ toggle is .faq-t, not "any span in the summary". The old selector
          also matched the Overseas pill, which is why the pill was drawn as a
          circle with a plus sign through it.
       4. Section backgrounds alternate on a fixed rhythm (see SECTION RHYTHM below)
          so a long page does not read as one continuous sheet of white.
     ========================================================================= */
  .svc-page{--svc:var(--blue);--svc-soft:#E9EDFF;--svc-ink:#03264F}

  /* ---- SECTION RHYTHM ----------------------------------------------------
     hero (accent wash) → leak (NAVY) → do (white) → proof (white) → process
     (paper) → fit (white) → faq (paper) → bridge (white) → cta → footer (navy).
     One dark break in the middle of the page, then alternating light tones.
     Change these four background declarations and the whole page re-tunes. */

  /* ---- scroll reveal -----------------------------------------------------
     Set by an inline script in the head, so a visitor without JS or with
     reduced motion turned on sees everything immediately and nothing is hidden. */
  .rv-on [data-rv]{opacity:0;transform:translateY(20px);
    transition:opacity .72s cubic-bezier(.22,.7,.25,1), transform .72s cubic-bezier(.22,.7,.25,1)}
  .rv-on [data-rv].rv-in{opacity:1;transform:none}

  /* breadcrumb */
  .crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14.5px;color:var(--muted);margin-bottom:30px}
  .crumb a:hover{color:var(--ink)}
  .crumb i{width:4px;height:4px;border-radius:50%;background:var(--line);flex:none}
  .crumb b{color:var(--ink);font-weight:600}


  /* ---- 9.7: the scroll-assembled page title --------------------------------
     Section 1 of every service page. Tall on purpose — the extra height IS the
     scroll budget the assembly animates across — with a sticky inner panel that
     holds one screen while the letters travel. Background is the page's own
     --svc-soft handing down to white, exactly like .sp-hero below it, so the two
     sections read as one continuous opening rather than two stacked heroes.
     .nav.is-top is already --svc-soft, so the top of the page is seamless. */
  /* FLAT --svc-soft, not a gradient to white. 9.8 faded this section out to white while
     .sp-hero below it started again at --svc-soft, which drew a hard horizontal line
     across the page exactly where the two met. Holding one colour here means the join
     lands on --svc-soft from both sides and the two sections read as one opening; the
     gradient to white now happens once, further down, inside .sp-hero. */
  .split-hero{position:relative;height:140vh;background:var(--svc-soft)}
  .split-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;
    overflow:clip;padding:0 var(--wrap-pad)}
  .split-inner{text-align:center;max-width:1100px}
  .split-crumb{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--svc);margin-bottom:26px}
  .split-title{font-family:var(--display);font-weight:800;color:var(--ink);
    /* Big, but never wider than the screen: the second term is the largest size at which
       --chars characters still fit across 88vw, and min() takes whichever is smaller. */
    font-size:min(clamp(52px,11vw,168px), calc(88vw / (var(--chars,8) * .62)));
    line-height:.95;letter-spacing:-.035em;
    margin:0;/* the letters move; the box must not, or the line reflows as they land */
    white-space:nowrap}
  /* Each letter interpolates itself. --inv is 1 while scattered and 0 once assembled,
     and it is the ONLY thing the scroll handler writes. */
  .split-title.is-live span{display:inline-block;will-change:transform;
    transform:translate(calc(var(--dx) * var(--inv,0)), calc(var(--dy) * var(--inv,0)))
              rotate(calc(var(--rot) * var(--inv,0)))
              scale(calc(1 + (var(--sc) - 1) * var(--inv,0)))}
  .split-sub{margin-top:30px;font-size:19px;color:var(--body);max-width:560px;
    margin-left:auto;margin-right:auto;
    /* readable with the line, gone once the letters start leaving it */
    opacity:calc(1 - var(--inv,0) * 2.4)}
  .split-cue{position:absolute;left:50%;bottom:38px;transform:translateX(-50%);
    font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
    /* an instruction to scroll, so it is brightest before anything has moved and gone
       as soon as the letters start to break apart */
    opacity:calc(1 - var(--inv,0) * 2.4);display:flex;align-items:center;gap:10px}
  .split-cue i{display:block;width:1px;height:34px;background:var(--line)}
  @media(max-width:700px){
    .split-hero{height:130vh}
    .split-title{white-space:normal}
    .split-sub{font-size:17px}
  }
  /* No JS, or reduced motion: the title is simply the title. */
  @media(prefers-reduced-motion:reduce){
    .split-hero{height:auto}
    .split-pin{position:static;height:auto;padding:var(--sec) var(--wrap-pad);transform:none;opacity:1}
    .split-title.is-live span{transform:none}
    .split-sub,.split-cue{opacity:1}
    .split-cue{display:none}
  }


  /* ---- 9.7: portfolio grid (the Websites page's proof) ---------------------
     The ads pages prove themselves with a ledger and SEO with a before/after. A
     websites page has a third kind of proof that neither of those can carry: the
     work is public, so the only honest thing to do is put it on screen and let
     the visitor open it. Each card is a link to the live site.

     Five cards fit one view — two wide, three below — and the rest stay hidden
     behind "View more" rather than turning the page into an endless scroll. */
  .folio{display:grid;grid-template-columns:repeat(6,1fr);gap:26px}
  .folio-card{grid-column:span 3;display:block;color:inherit;text-decoration:none}
  .folio-card:nth-child(n+3){grid-column:span 2}
  .folio .is-more{display:none}
  .folio.is-open .is-more{display:block}
  /* the browser frame: what makes a rectangle read as "a website" and not "a photo" */
  /* every one of these is a <span> (they live inside an <a>), so each needs an explicit
     box — aspect-ratio and border-radius do nothing on a default inline element. */
  .folio-win{display:block;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);
    background:var(--white);box-shadow:0 26px 48px -30px rgba(12,26,63,.5);
    transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
  .folio-card:hover .folio-win{transform:translateY(-6px);box-shadow:0 38px 60px -30px rgba(12,26,63,.55);
    border-color:var(--svc)}
  .folio-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--paper);
    border-bottom:1px solid var(--line)}
  .folio-bar b{width:9px;height:9px;border-radius:50%;background:#D6DCE8;display:block}
  .folio-bar span{margin-left:8px;font-size:12px;color:var(--muted);font-weight:500;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .folio-shot{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;
    background:linear-gradient(135deg,var(--svc-soft),var(--paper) 60%,var(--white))}
  .folio-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
  .folio-go{position:absolute;right:14px;bottom:14px;z-index:1;display:flex;align-items:center;gap:7px;
    background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:9px 14px;border-radius:999px;
    opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
  .folio-card:hover .folio-go{opacity:1;transform:none}
  .folio-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 2px 0}
  .folio-meta b{font-family:var(--display);font-size:19px;color:var(--ink);letter-spacing:-.015em}
  .folio-meta span{font-size:14px;color:var(--muted);white-space:nowrap}
  .folio-foot{display:flex;align-items:center;justify-content:center;margin-top:44px}
  @media(max-width:900px){
    .folio{grid-template-columns:repeat(2,1fr);gap:20px}
    .folio-card,.folio-card:nth-child(n+3){grid-column:span 1}
  }
  @media(max-width:600px){
    .folio{grid-template-columns:1fr}
  }

  /* ---- 9.7: pick list (the Graphic design page's proof) --------------------
     Names on the left, one big image on the right that follows the pointer. Design
     work is judged by looking, but a grid of twelve thumbnails is a wall — this
     shows one piece at full size and lets the visitor drive. */
  .picklist-sec{background:var(--ink);color:#AEB8D6;padding:var(--sec) 0}
  .picklist-sec h2{color:#fff}
  .picklist-sec .sp-head p{color:#AEB8D6}
  .picklist{display:grid;grid-template-columns:1fr 1.08fr;gap:60px;align-items:start}
  .picks{border-top:1px solid rgba(255,255,255,.14)}
  .pick{display:flex;align-items:baseline;justify-content:space-between;gap:18px;width:100%;
    padding:22px 4px;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.14);
    text-align:left;cursor:pointer;color:#8E99BB;font:inherit;transition:color .28s,padding-left .28s}
  .pick b{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.1vw,27px);
    letter-spacing:-.02em;color:#6E7899;transition:color .28s}
  .pick span{font-size:14px;white-space:nowrap}
  .pick.is-on{padding-left:12px}
  .pick.is-on b{color:#fff}
  .pick.is-on span{color:var(--svc)}
  .picks-note{margin-top:26px;font-size:14.5px;color:#8E99BB}
  .pickview{position:relative;aspect-ratio:4/3;border-radius:var(--r-photo);overflow:hidden;
    background:linear-gradient(140deg,#16295E,#0C1A3F);border:1px solid rgba(255,255,255,.12)}
  .pickview figure{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.04);
    transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.3,1)}
  .pickview figure.is-on{opacity:1;transform:none}
  .pickview img{width:100%;height:100%;object-fit:cover;display:block}
  .pickview figcaption{position:absolute;left:18px;right:18px;bottom:18px;z-index:1;
    background:rgba(12,26,63,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    color:#fff;border-radius:12px;padding:13px 17px;font-size:14.5px}
  @media(max-width:980px){
    .picklist{grid-template-columns:1fr;gap:34px}
    .pickview{order:-1}
  }


  /* ---- 9.8: the two scroll-driven work sections ---------------------------
     Both are TALLER than the screen with a sticky panel inside; the extra height is
     the scroll budget the animation spends. Behaviour lives in assets/work.js. */

  /* WEBSITES — the travelling row. Cards move right-to-left while the panel is pinned. */
  .strip-sec{position:relative;height:300vh;background:var(--ink);color:#AEB8D6}
  /* MUST FIT ONE SCREEN, on a 768px laptop and on a 1440px monitor alike. Two rules do
     that work. The nav is sticky and paints over the top of this panel, so its height is
     reserved as padding rather than assumed away — without it the heading slid under the
     nav on short screens. And 100svh, not 100vh, so a mobile browser's collapsing toolbar
     cannot make the panel taller than the screen it is being read on. */
  .strip-pin{position:sticky;top:0;height:100svh;overflow:clip;display:flex;flex-direction:column;
    justify-content:center;gap:clamp(16px,2.4vh,34px);
    padding:calc(var(--nav-h) + 10px) 0 clamp(18px,3vh,34px)}
  @supports not (height:100svh){.strip-pin{height:100vh}}
  .strip-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
    padding:0 var(--wrap-pad);flex:none}
  .strip-head h2{color:#fff;font-size:clamp(24px,3.4vw,50px);margin:0;line-height:1.05}
  .strip-head p{font-size:clamp(14px,1.15vw,17px);margin-top:8px;max-width:520px}
  .strip-count{font-family:var(--display);font-weight:700;font-size:15px;color:var(--svc);
    letter-spacing:.06em;white-space:nowrap}
  /* A card is a browser bar + a 16:10 shot + a meta line. Its width is therefore capped by
     whatever vertical room is left, so the row can never be taller than the panel holding
     it: shot height is width x .625, and the bar and meta line cost about 96px together. */
  /* flex:none matters. As a shrinkable child of the column above, the track was being
     squeezed to fit and took the cards down with it — the browser bar and the meta line
     survived and the 16:10 shot between them collapsed to nothing. The card width is
     already capped to fit the height, so the track must keep its natural size. */
  .strip-track{display:flex;align-items:flex-start;flex:none;gap:clamp(16px,2vw,28px);
    padding:0 var(--wrap-pad);will-change:transform;
    --room:calc(100svh - var(--nav-h) - 200px)}
  .strip-sec.is-live .strip-track{transform:translate3d(var(--x,0),0,0)}
  .strip-sec:not(.is-live) .strip-pin{overflow-x:auto}
  .strip-card{flex:0 0 min(46vw, calc((var(--room) - 96px) * 1.6));display:block;color:inherit;
    text-decoration:none}
  /* Each of these is a <span> inside an <a>, so every one needs an explicit box before
     aspect-ratio or a radius means anything to it. */
  .strip-win{display:block;position:relative;border-radius:16px;overflow:hidden;
    border:1px solid rgba(255,255,255,.14);background:#16295E;
    transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.3,1)}
  .strip-card:hover .strip-win{transform:translateY(-6px);border-color:var(--svc)}
  .strip-bar{display:flex;align-items:center;gap:7px;padding:10px 13px;
    background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.1)}
  .strip-bar b{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28);display:block}
  .strip-bar span{margin-left:8px;font-size:12px;color:#8E99BB;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .strip-shot{display:block;position:relative;aspect-ratio:16/10;
    background:linear-gradient(140deg,#16295E,#0C1A3F)}
  .strip-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
  .strip-meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
    gap:2px 16px;padding:13px 2px 0}
  .strip-meta b{font-family:var(--display);font-size:clamp(16px,1.4vw,19px);color:#fff;
    letter-spacing:-.015em}
  .strip-meta span{font-size:13.5px;color:#8E99BB}
  /* The button rides at the END of the row rather than sitting under it. Stacking it
     below cost the panel a whole band of height and pushed the heading under the nav —
     and arriving after the last card is also where a reader actually wants it. */
  .strip-cta{flex:0 0 clamp(230px,20vw,300px);display:flex;flex-direction:column;
    align-items:flex-start;justify-content:center;gap:12px;padding-right:var(--wrap-pad);
    align-self:center}
  .strip-cta b{display:block;font-family:var(--display);font-size:clamp(19px,1.9vw,26px);
    color:#fff;letter-spacing:-.02em}
  .strip-cta p{font-size:14.5px;color:#8E99BB;max-width:250px}

  /* GRAPHIC DESIGN — the stacking panel. Each image rises over the one before it. */
  .stack-sec{position:relative;height:300vh;background:var(--ink);color:#AEB8D6}
  /* Same one-screen contract as the strip. The nav's height is reserved as padding so
     "Selected work." can never slide under it, the panel is vertically centred in what is
     left, and --room is the exact height the picture is allowed to use. */
  .stack-pin{position:sticky;top:0;height:100svh;overflow:clip;display:grid;
    grid-template-columns:1fr 1.06fr;gap:clamp(24px,3.6vw,56px);align-items:center;
    padding:calc(var(--nav-h) + 14px) var(--wrap-pad) clamp(20px,3vh,40px);
    --room:calc(100svh - var(--nav-h) - 70px)}
  @supports not (height:100svh){.stack-pin{height:100vh}}
  .stack-pin > *{min-height:0}          /* grid children shrink instead of overflowing */
  .stack-sec h2{color:#fff;font-size:clamp(26px,3.4vw,46px);margin-bottom:12px;line-height:1.05}
  .stack-left p.lede{color:#AEB8D6;font-size:clamp(14.5px,1.15vw,17px);max-width:520px;
    margin-bottom:clamp(14px,2.4vh,30px)}
  /* Rows breathe on a tall screen and tighten on a short one, so five of them plus the
     heading and the note always land inside one view. */
  .stack-left .pick{padding:clamp(9px,1.5vh,20px) 4px;cursor:default}
  .stack-left .pick b{font-size:clamp(17px,1.9vw,25px)}
  .stack-left .picks-note{margin-top:clamp(12px,2vh,24px);font-size:14px}
  .stack-left .picks-note a{color:var(--svc);font-weight:600}
  /* Width is whichever is smaller: the column, or the width a 4:3 box can be and still
     fit the height available. That is what keeps it inside the screen at any size. */
  .stack-view{position:relative;aspect-ratio:4/3;width:min(100%, calc(var(--room) * 4 / 3));
    justify-self:end;border-radius:var(--r-photo);overflow:hidden;
    border:1px solid rgba(255,255,255,.12);background:linear-gradient(140deg,#16295E,#0C1A3F)}
  .stack-view figure{position:absolute;inset:0;margin:0;
    /* --t is this image's own slice of the scroll: 0 = still below, 1 = fully covering */
    transform:translate3d(0,calc((1 - var(--t,0)) * 100%),0)}
  .stack-sec:not(.is-live) figure{transform:none;opacity:0}
  .stack-sec:not(.is-live) figure.is-on{opacity:1}
  .stack-view img{width:100%;height:100%;object-fit:cover;display:block}
  /* Only the dominant image's caption is shown. Mid-slide two figures are on screen at
     once, and letting both captions render put a name on the panel that disagreed with
     the highlighted row in the list. work.js owns .is-on, so the caption and the row are
     driven by the same decision and cannot drift apart. */
  .stack-view figure figcaption{opacity:0;transition:opacity .28s}
  .stack-view figure.is-on figcaption{opacity:1}
  .stack-view figcaption{position:absolute;left:18px;right:18px;bottom:18px;z-index:1;
    background:rgba(12,26,63,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    color:#fff;border-radius:12px;padding:12px 16px;font-size:14px}
  @media(max-width:980px){
    /* One column: the picture goes on top and the list under it, both sized off --room
       so the pair still fits a single phone screen. */
    .stack-pin{grid-template-columns:1fr;gap:18px;align-content:center;
      grid-template-rows:auto auto}
    .stack-view{order:-1;justify-self:stretch;width:100%;
      aspect-ratio:16/10;max-height:calc(var(--room) * .46)}
    .stack-left .pick{padding:clamp(7px,1.2vh,14px) 2px}
    .strip-card{flex-basis:min(78vw, calc((var(--room) - 96px) * 1.6))}
  }

  /* The pick list was written for the dark service section. On the light folio page it
     keeps the same structure and only re-grounds its colours. */
  .picklist-light .picks{border-top-color:var(--line)}
  .picklist-light .pick{border-bottom-color:var(--line);color:var(--muted)}
  .picklist-light .pick b{color:var(--body)}
  .picklist-light .pick.is-on b{color:var(--ink)}
  .picklist-light .pick.is-on span{color:var(--svc)}
  .picklist-light .picks-note{color:var(--muted)}
  .picklist-light .picks-note a{color:var(--svc);font-weight:600}
  .picklist-light .pickview{border-color:var(--line);
    background:linear-gradient(140deg,var(--svc-soft),var(--paper))}
  /* hover lift, the folio-page counterpart of the card lift on the grid */
  .picklist-light .pick{transition:color .28s,padding-left .28s,transform .28s}
  .picklist-light .pick:hover{transform:translateY(-2px)}

  /* ---- contact page (10.1) ------------------------------------------------ */
  .ct-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:start}
  .ct-block{padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--line)}
  .ct-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
  .ct-block h2{font-size:23px;margin-bottom:16px;color:var(--ink)}
  .ct-note{font-size:16px;color:var(--body);max-width:520px}
  .ct-note + .ct-hours{margin-top:16px}
  .ct-hours + .ct-note{margin-top:16px}
  .ct-list{list-style:none;display:grid;gap:18px}
  .ct-list li{display:flex;gap:14px;align-items:flex-start}
  .ct-ic{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;
    background:var(--svc-soft);color:var(--svc)}
  .ct-list small{display:block;font-size:13px;color:var(--muted);margin-bottom:2px}
  .ct-list a,.ct-list address{display:block;font-style:normal;font-weight:600;font-size:16.5px;color:var(--ink)}
  .ct-list a:hover{color:var(--svc)}
  .ct-hours{list-style:none;display:grid;gap:10px}
  .ct-hours li{display:flex;justify-content:space-between;gap:18px;padding-bottom:10px;
    border-bottom:1px solid var(--line);font-size:15.5px}
  .ct-hours li:last-child{border-bottom:0;padding-bottom:0}
  .ct-hours b{color:var(--ink)}
  .ct-hours span{color:var(--muted);text-align:right}
  .ct-form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-photo);
    padding:34px;position:sticky;top:calc(var(--nav-h) + 26px)}
  .ct-form-card h2{font-size:26px;margin:6px 0 8px}
  .ct-form-card form{margin-top:22px}
  .ct-form-card .enq-field span em{font-style:normal;color:var(--muted);font-weight:500}
  @media(max-width:980px){
    .ct-grid{grid-template-columns:1fr;gap:38px}
    .ct-form-card{position:static}
  }

  /* ---- 9.8: the portfolio pages -------------------------------------------
     The grid and the pick list from 9.7 live here now, shuffled per visit and
     rising into place as they enter. */
  .folio-rise{opacity:0;transform:translateY(26px);
    transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
  .folio-rise.is-in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.folio-rise{opacity:1;transform:none;transition:none}}
  /* A folio page is mostly gaps between cards, so on flat white it read as a lot of
     nothing. The page now sits on a soft wash built from the section's own accent —
     three very light tints that bleed into each other — and the head and the grid share
     one continuous background instead of being two stacked white bands. */
  .work-head,.work-sec{position:relative}
  .work-head{padding:calc(var(--nav-h) + 56px) 0 0;
    background:
      radial-gradient(1100px 620px at 12% -8%, var(--svc-soft), transparent 70%),
      radial-gradient(900px 520px at 92% 6%, #FFF3EC, transparent 68%),
      linear-gradient(180deg, #FBFCFE, #F6F8FC)}
  .work-head h1{font-size:clamp(36px,5.4vw,74px);letter-spacing:-.035em;margin-bottom:16px}
  .work-head .lede{font-size:18.5px;max-width:640px}
  .work-sec{padding:40px 0 var(--sec);
    background:
      radial-gradient(900px 700px at 88% 14%, #F3EEFC, transparent 66%),
      radial-gradient(760px 620px at 6% 62%, #EAF5F2, transparent 64%),
      linear-gradient(180deg, #F6F8FC 0, #FAFBFD 46%, #F4F7FB 100%)}
  /* Cards get a surface of their own so they lift off that wash rather than float on it */
  .work-sec .folio-win{background:#fff}
  .work-sec .folio{gap:22px}
  .work-sec .picklist{gap:48px}

  /* ---- hero --------------------------------------------------------------
     The 3D layer sits in the gap above the proof card, which is dead space
     otherwise. .wrap is lifted above it so the card can pass in front. */
  /* overflow-clip-margin lets the 3D layer paint ABOVE this box without making the page
     scrollable sideways. The chips rise faster than the page on their way out — that
     speed difference is the whole parallax — so with a hard clip the topmost ones were
     being sliced in half against the section's top edge. They now cross the join into
     the title section above, which is the same colour, so there is nothing to give it
     away. Browsers without the property simply clip as before. */
  .sp-hero{position:relative;overflow:clip;overflow-clip-margin:240px;
    padding:44px 0 var(--sec);
    background:linear-gradient(180deg,var(--svc-soft) 0,var(--white) 74%)}
  .sp-hero > .wrap{position:relative;z-index:1}
  /* The hero's three.js canvas, drawn by svc3d.js. It sits under the content
     (z-index 0, .wrap is z-index 1) so an object that drifts behind a card is
     occluded rather than fighting it — being occluded is what sells the depth. It
     starts invisible and only fades in once a real frame has been drawn, so a missing
     CDN or no WebGL costs the page nothing. */
  /* Extended upward by the same margin: svc3d.js lays objects out against the canvas, so
     the canvas is what has to be bigger for a chip to have somewhere to go. */
  /* Extended upward by --fx-bleed. A canvas only paints inside itself, so the parent's
     clip margin alone would change nothing — the canvas is what has to be taller. svc3d.js
     reads --fx-bleed and lays every object out against the SECTION box rather than the
     canvas box, so the composition is unchanged and the extra strip is purely somewhere
     for a rising chip to go. */
  .sp-fx{--fx-bleed:240px;
    position:absolute;left:0;right:0;top:calc(-1 * var(--fx-bleed));bottom:0;
    width:100%;height:calc(100% + var(--fx-bleed));
    z-index:0;pointer-events:none;opacity:0;transition:opacity 1.1s ease}
  .sp-fx.is-on{opacity:1}

  /* ---- the star field (9.0) ----------------------------------------------
     One canvas per SECTION, not one behind the page. 8.7's full-page .dp-star was
     removed in 8.8; this replaces it on the navy leak section alone, drawn by
     assets/star-field.js. Mount it by putting [data-starfield] on a dark section and
     this canvas as its first child.

     Three things here are load-bearing rather than stylistic:

     mix-blend-mode:screen — screen against navy is bright orange, and white copy on
     navy screens to white, so a point can never cost legibility however dense the
     field gets. It is also why the canvas needs no mask around the cards.

     z-index 0, under .leak-sec .wrap at z-index 1, so the field passes BEHIND the
     cards rather than over them.

     It starts at opacity 0 and only fades in once a real frame has been drawn, so no
     WebGL or a blocked CDN costs the section nothing at all. */
  .star-field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
    mix-blend-mode:screen;opacity:0;transition:opacity 1.2s ease}
  .star-field.is-on{opacity:1}
  @media(prefers-reduced-motion:reduce){.star-field{display:none}}

  .sp-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}

  /* the eyebrow: a pill, left-aligned, carrying the real platform mark */
  .sp-eyebrow{display:inline-flex;align-items:center;gap:10px;background:#fff;
    border:1px solid var(--line);border-radius:999px;padding:8px 18px 8px 9px;margin-bottom:24px;
    font-weight:700;font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--svc);
    box-shadow:0 8px 20px -14px rgba(12,26,63,.5)}
  .sp-eyebrow .mark{width:19px;height:19px;flex:none;display:block;background:var(--svc);
    -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}

  .sp-hero h1{font-size:clamp(36px,4.3vw,58px);margin-bottom:22px}
  /* the underline swoosh. Without this the inline SVG has no box of its own and
     lays out as a band under the whole heading. */
  .sp-hero h1 .ul{position:relative;display:inline-block}
  .sp-hero h1 .ul svg{position:absolute;left:-1%;bottom:-.14em;width:102%;height:.22em;overflow:visible}
  @media(min-width:981px){.sp-hero h1 .ul{white-space:nowrap}}

  .sp-hero .lede{font-size:clamp(17.5px,1.5vw,19.5px);max-width:540px;margin-bottom:32px}
  .sp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
  .btn-dark{background:var(--ink);color:#fff}
  .btn-dark:hover{background:var(--ink-2);transform:translateY(-2px)}
  .btn-line{color:var(--ink);border:1.5px solid var(--line);background:#fff}
  .btn-line:hover{border-color:var(--ink)}
  .sp-judged{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
    border-radius:999px;padding:10px 20px 10px 12px;font-size:15px;color:var(--muted)}
  .sp-judged em{font-style:normal;font-weight:700;color:var(--ink)}
  .sp-judged span{width:30px;height:30px;border-radius:50%;background:var(--svc-soft);color:var(--svc);
    display:grid;place-items:center;flex:none}

  /* hero proof card */
  .sp-card{position:relative;z-index:2;background:var(--ink);border-radius:var(--r-photo);
    padding:34px 34px 30px;color:#AEB8D6;box-shadow:0 40px 70px -40px rgba(12,26,63,.7)}
  .sp-card h2{color:#fff;font-size:21px;margin-bottom:4px}
  .sp-card > p{font-size:15px;margin-bottom:24px}
  .sp-figs{display:grid;gap:2px}
  .sp-fig{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .sp-fig:last-child{border-bottom:0}
  .sp-fig .k{font-size:15px}
  .sp-fig .d{flex:1;border-bottom:1px dotted rgba(255,255,255,.26);transform:translateY(-4px)}
  .sp-fig .v{font-family:var(--display);font-weight:700;font-size:24px;color:#fff;letter-spacing:-.02em}
  .sp-fig.gain .v{color:var(--gain-bright)}
  /* The before/after cell, on the dark hero card. Same component as the light ledger
     version, re-grounded: the struck-through "before" has to read as muted without
     disappearing into the navy. */
  .sp-fig .shift-v{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
  .sp-fig .shift-v .was{font-family:var(--display);font-weight:700;font-size:17px;color:#7C87A8;
    text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#59638A}
  .sp-fig .shift-v i{font-style:normal;font-weight:700;font-size:14px;color:var(--svc)}
  .sp-fig .shift-v .now{font-family:var(--display);font-weight:700;font-size:24px;color:#fff;
    letter-spacing:-.02em}
  .sp-fig.gain .shift-v .now{color:var(--gain-bright)}
  .sp-card small{display:block;margin-top:18px;font-size:13.5px;color:#8E99BB}

  /* generic inner section head */
  .sp-head{max-width:780px;margin-bottom:52px}
  .sp-head h2{font-size:clamp(32px,4.2vw,54px);margin-bottom:18px}
  .sp-head p{font-size:18.5px}

  /* ---- leak cards: the dark break in the page ---------------------------- */
  .leak-sec{padding:var(--sec) 0;background:var(--ink);position:relative;overflow:clip}
  .leak-sec::before{content:'';position:absolute;left:-260px;top:-160px;width:680px;height:680px;
    border-radius:50%;background:radial-gradient(circle,rgba(67,97,238,.34),transparent 68%);pointer-events:none}
  .leak-sec .wrap{position:relative;z-index:1}
  .leak-sec .sp-head h2{color:#fff}
  .leak-sec .sp-head p{color:#AEB8D6}
  .leaks{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  /* Tinted with --ink rather than white, and opaque enough to sit ON the star field
     instead of inside it: at 5% white the points behind were reading straight through the
     body copy. The blur keeps the panel feeling like glass, so the stars are still visible
     around and behind the cards and the section has not become a plain dark box. */
  .leak{background:rgba(12,26,63,.66);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    border:1px solid rgba(255,255,255,.14);border-radius:var(--r-card);
    padding:30px;transition:background .3s,border-color .3s,transform .3s}
  .leak:hover{background:rgba(12,26,63,.78);border-color:rgba(255,255,255,.28);transform:translateY(-3px)}
  .leak b{display:block;font-family:var(--display);font-size:21px;color:#fff;letter-spacing:-.02em;margin-bottom:10px}
  .leak p{font-size:16.5px;color:#AEB8D6}
  .leak i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
    background:rgba(240,132,58,.18);color:#F0843A;font-style:normal;font-weight:800;
    font-family:var(--display);margin-bottom:18px}
  .leak-foot{margin-top:30px;font-size:16px;color:#8E99BB}
  .leak-foot b{color:#fff;font-weight:600}

  /* ---- deliverables ------------------------------------------------------ */
  .do-sec{padding:var(--sec) 0}
  .do-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
  .do-list{list-style:none;border-top:1px solid var(--line)}
  .do-list li{display:grid;grid-template-columns:26px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);
    transition:background .28s,padding-left .28s}
  .do-list li:hover{background:var(--svc-soft);padding-left:14px}
  .do-list b{display:block;font-size:19px;color:var(--ink);font-family:var(--display);letter-spacing:-.015em;margin-bottom:4px}
  .do-list p{font-size:16.5px}
  .do-list svg{margin-top:3px;color:var(--svc)}

  /* ---- process: paper, and a horizontal timeline (8.7) -------------------

     Before 8.7 this section reused the homepage's vertical .steps inside a 780px
     column, which left roughly 800px of a 1440px page empty to its right. It is now
     four steps across the full width.

     The reason is not that the width was empty. Scroll runs down the page, so an
     object that also travels down moves at the page's own speed and reads as no
     motion at all; the same object travelling ACROSS reads as motion immediately.
     That is the same argument the hero parallax makes by moving faster than the page.
     A process is also a sequence, and left-to-right is how a sequence is read, so the
     star's position along the line means something: it is which step you are on.

     --p is the row's own scroll progress, 0 to 1, written by svc.js. Everything here
     — the fill, which numbers have lit, where the star sits — is that one number.

     FAIL-OPEN, the same way the reveal does. The lit state is the DEFAULT, and only
     a page that has confirmed both JS and motion (html.rv-on) dims the steps back
     down and starts moving the star. No JS, a 404 on svc.js, or reduced motion, and
     this is a plain finished timeline with every step on. */
  .sp-proc{background:var(--paper)}
  .sp-proc .sp-head{margin-bottom:60px}
  .steps-track{position:relative;--p:0;
    --col:calc((100% - 90px) / 4);
    --run:calc(3 * (var(--col) + 30px))}          /* first circle centre to last */
  .steps-track::before,.steps-track::after{content:'';position:absolute;left:30px;top:30px;
    height:2px;border-radius:2px}
  .steps-track::before{width:var(--run);background:var(--line)}
  .steps-track::after{width:calc(var(--run) * var(--p));background:var(--gain);display:none}
  .steps-h{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
  .steps-h li{counter-increment:s;position:relative}
  .steps-h li::before{content:counter(s);width:60px;height:60px;border-radius:50%;
    border:2px solid var(--ink);background:#fff;color:var(--ink);
    display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:24px;
    position:relative;z-index:1;margin-bottom:24px;
    transition:border-color .45s,color .45s,background .45s,box-shadow .45s}
  .steps-h li:last-child::before{background:var(--gain);border-color:var(--gain);color:#fff}
  .steps-h h3{font-size:21px;letter-spacing:-.02em;margin:0 0 8px;line-height:1.18}
  .steps-h p{font-size:16px}
  /* The marker: the same four-point star as the homepage, riding the line.

     z-index 2 is load-bearing. Nothing here makes a stacking context — .steps-track and
     the list items are all position:relative with z-index auto — so the track's ::before
     (grey line) and ::after (green fill) and this star all paint in tree order, and
     ::after is generated AFTER the star. The green fill therefore drew straight over
     the star, which is what it looked like: a line crossing the marker instead of
     running behind it. 2 puts the star above both lines and above the numbered circles
     (z-index 1), so it passes in front of everything on the track, which is the whole
     point of a marker. */
  .steps-star{position:absolute;top:30px;left:calc(30px + var(--run) * var(--p));
    width:34px;height:34px;margin:-17px 0 0 -17px;display:none;z-index:2;
    color:#F0843A;filter:drop-shadow(0 4px 10px rgba(240,132,58,.45))}
  .steps-star svg{display:block;width:100%;height:100%}
  html.rv-on .steps-track::after{display:block}
  html.rv-on .steps-star{display:block}
  html.rv-on .steps-h li::before{border-color:var(--line);color:var(--muted)}
  html.rv-on .steps-h li:last-child::before{background:#fff}
  html.rv-on .steps-h li.on::before{border-color:var(--ink);color:var(--ink)}
  html.rv-on .steps-h li.on:last-child::before{background:var(--gain);border-color:var(--gain);color:#fff}
  /* Laptops are the awkward middle. At 1024px the four columns are 213px wide, which
     is about 26 characters — readable, but dense. Rather than fall back to the
     vertical list there and hand back the empty right half this section was rebuilt
     to fix, the row tightens: less gap, slightly smaller type. */
  @media(max-width:1200px){
    .steps-track{--col:calc((100% - 72px) / 4);--run:calc(3 * (var(--col) + 24px))}
    .steps-h{gap:24px}
    .steps-h h3{font-size:19.5px}
    .steps-h p{font-size:15.5px}
  }
  /* Below 981px it is the vertical list again. That is the same breakpoint the hero
     grid and the FAQ collapse at, and on a phone the scroll and the steps run the
     same way — which is exactly the case the horizontal row was built for. */
  @media(max-width:980px){
    .steps-track::before,.steps-track::after,.steps-star{display:none}
    html.rv-on .steps-track::after,html.rv-on .steps-star{display:none}
    .steps-h{grid-template-columns:1fr;gap:0}
    .steps-h li{display:grid;grid-template-columns:60px 1fr;gap:22px;padding-bottom:34px}
    .steps-h li::before{margin-bottom:0}
    .steps-h li:not(:last-child)::after{content:'';position:absolute;left:29px;top:60px;bottom:0;width:2px;background:var(--line)}
    html.rv-on .steps-h li::before{border-color:var(--ink);color:var(--ink)}
    html.rv-on .steps-h li:last-child::before{background:var(--gain);border-color:var(--gain);color:#fff}
  }

  /* ---- engagement -------------------------------------------------------- */
  .fit-sec{padding:var(--sec) 0}
  .fit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .fit{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:30px;
    transition:border-color .25s,transform .25s,box-shadow .25s}
  .fit:hover{border-color:rgba(12,26,63,.24);transform:translateY(-3px);box-shadow:0 22px 40px -26px rgba(12,26,63,.4)}
  .fit h3{font-size:20px;margin-bottom:12px}
  .fit ul{list-style:none;display:grid;gap:10px;font-size:16.5px}
  .fit li{display:grid;grid-template-columns:20px 1fr;gap:10px}
  .fit li svg{margin-top:5px;color:var(--gain)}
  .fit-note{margin-top:26px;font-size:15.5px;color:var(--muted)}
  .fit-note a{color:var(--svc);font-weight:700;border-bottom:1px solid transparent;transition:border-color .2s}
  .fit-note a:hover{border-color:currentColor}

  /* ---- faq --------------------------------------------------------------- */
  .faq-sec{padding:var(--sec) 0;background:var(--paper)}
  .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
  .faq{border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;cursor:pointer;list-style:none;padding:22px 0}
  .faq summary::-webkit-details-marker{display:none}
  /* the question. The Overseas pill sits ABOVE it, so every question in the
     column still starts on the same left edge. */
  .faq-q{flex:1;min-width:0;font-family:var(--display);font-weight:700;font-size:19.5px;color:var(--ink);
    letter-spacing:-.015em;line-height:1.3;transition:color .22s}
  .faq summary:hover .faq-q{color:var(--svc)}
  .faq-flag{display:block;width:fit-content;font-family:var(--text);font-size:12.5px;font-weight:700;
    letter-spacing:.04em;text-transform:uppercase;color:var(--svc);background:var(--svc-soft);
    padding:4px 10px;border-radius:999px;margin-bottom:10px}
  /* the +/− toggle. Scoped to .faq-t so it can never catch the pill as well. */
  .faq-t{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);display:grid;
    place-items:center;position:relative;margin-top:2px;transition:background .25s,border-color .25s,transform .25s}
  .faq-t::before,.faq-t::after{content:'';position:absolute;background:var(--ink);border-radius:2px;
    transition:transform .3s cubic-bezier(.22,.7,.25,1),background .25s}
  .faq-t::before{width:11px;height:2px}
  .faq-t::after{width:2px;height:11px}
  /* Open state is written twice on purpose. `.is-open` is what svc.js drives; the
     plain `[open]` selector is the fallback for when that script has not run — a 404,
     a blocked file, an error earlier on the page. Without it the accordion would
     still toggle but open onto a permanently collapsed, zero-opacity panel, which
     looks like a broken site rather than a missing enhancement. */
  .faq details[open] .faq-t,
  .faq details.is-open .faq-t{background:var(--ink);border-color:var(--ink);transform:rotate(180deg)}
  .faq details[open] .faq-t::before,.faq details[open] .faq-t::after,
  .faq details.is-open .faq-t::before,.faq details.is-open .faq-t::after{background:#fff}
  .faq details[open] .faq-t::after,
  .faq details.is-open .faq-t::after{transform:scaleY(0)}
  /* default: no animation, answers simply show when the browser opens them */
  .faq .a-wrap{display:grid;grid-template-rows:1fr}
  .faq .a{overflow:hidden;min-height:0}
  /* the smooth version switches on only once svc.js has added .faq-js to <html> */
  .faq-js .faq .a-wrap{grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.22,.7,.25,1)}
  .faq-js .faq details.is-open .a-wrap{grid-template-rows:1fr}
  .faq-js .faq .a{opacity:0;transition:opacity .26s ease}
  .faq-js .faq details.is-open .a{opacity:1;transition-delay:.1s}
  .faq .a > p{padding:0 44px 24px 0;font-size:16.5px}
  @media(prefers-reduced-motion:reduce){
    .faq .a-wrap,.faq .a,.faq-t,.faq-t::before,.faq-t::after{transition:none}
  }

  /* ---- what Meta cannot do on its own (was "other services") -------------
     Each card leads with the GAP, not the service name. A visitor should be able
     to read the first line alone and know why the service is on this page. */
  .bridge-sec{padding:var(--sec) 0}
  .bridge{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .bridge-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
    border-radius:var(--r-card);padding:28px;overflow:hidden;
    transition:border-color .25s,transform .25s,box-shadow .25s}
  .bridge-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--svc);
    transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.22,.7,.25,1)}
  .bridge-card:hover{border-color:rgba(12,26,63,.24);transform:translateY(-4px);box-shadow:0 26px 46px -28px rgba(12,26,63,.45)}
  .bridge-card:hover::before{transform:scaleY(1)}
  .bridge-gap{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.35;
    color:var(--svc);letter-spacing:-.01em;margin-bottom:16px}
  .bridge-card b{display:block;font-family:var(--display);font-size:22px;color:var(--ink);letter-spacing:-.02em;margin-bottom:9px}
  .bridge-card p{font-size:16px;margin-bottom:18px}
  .bridge-card em{display:block;font-style:normal;font-size:14.5px;font-weight:700;color:var(--svc);margin-top:auto}
  /* the last card is the "which of these do I actually need" answer, so it reads
     as an offer rather than another service. */
  .bridge-card.is-ask{background:var(--ink);border-color:var(--ink)}
  .bridge-card.is-ask .bridge-gap{color:var(--gain-bright)}
  .bridge-card.is-ask b{color:#fff}
  .bridge-card.is-ask p{color:#AEB8D6}
  .bridge-card.is-ask em{color:#fff}
  .bridge-card.is-ask::before{background:var(--gain-bright)}

  @media(max-width:980px){
    .sp-hero-grid,.do-grid,.faq-grid{grid-template-columns:1fr;gap:44px}
    .fit-grid,.bridge{grid-template-columns:1fr}
    .sp-fx{display:none}
  }
  @media(max-width:640px){
    .leaks{grid-template-columns:1fr}
    .faq-q{font-size:18px}
    .do-list li:hover{padding-left:0}
  }
  @media(min-width:1500px){
    .sp-hero .lede{max-width:600px}
    .sp-head{max-width:880px}
  }