/* ============================================================================
   PAARTIVI THEME — theme.css
   ----------------------------------------------------------------------------
   1. TOKENS        <- change your brand colours here, nowhere else
   2. BASE
   3. LAYOUT
   4. MOTION SYSTEM
   5. COMPONENTS
   6. SECTIONS
   7. RESPONSIVE
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   --------------------------------------------------------------------------
   Supplied palette:
     #0A192F  navy    primary text, backgrounds, dark bases
     #1D4ED8  blue    secondary text, large background sections
     #FACC15  yellow  CTA buttons, icons, badges
     #FFFCF2  cream   header and footer only
     #5C5346  taupe   tertiary text, short background sections

   Derived values below are tints or shades of those five. No new brand
   colours are introduced.
   ========================================================================== */
:root{
  /* ---- SUPPLIED ---- */
  --c-navy:      #0A192F;
  --c-blue:      #1D4ED8;
  --c-yellow:    #FACC15;
  --c-cream:     #FFFCF2;
  --c-taupe:     #5C5346;

  /* ---- ROLES ---- */
  --c-bg:        var(--c-navy);   /* page body                      */
  --c-bg-alt:    #0E2137;         /* derived lift, alternating rows  */
  --c-bg-blue:   var(--c-blue);   /* large feature sections          */
  --c-bg-warm:   var(--c-taupe);  /* short accent sections           */
  --c-surface:   #12253D;         /* derived lift, cards             */
  --c-chrome:    var(--c-cream);  /* header and footer ONLY          */

  --c-heading:   var(--c-cream);
  --c-body:      #A3B2C6;         /* derived: readable on navy       */
  --c-tertiary:  var(--c-taupe);

  --c-brand:     var(--c-blue);
  --c-brand-lt:  #3C6AE6;         /* derived hover                   */
  --c-on-brand:  var(--c-cream);  /* text on blue fills              */
  --c-on-yellow: var(--c-navy);   /* text on yellow fills            */
  --c-on-chrome: var(--c-navy);   /* text on the cream header/footer */

  /* derived — usually no need to touch */
  --c-brand-2:   var(--c-brand-lt);
  --c-line:      rgba(255,252,242,.13);
  --c-line-hi:   rgba(250,204,21,.55);
  --grad:        linear-gradient(120deg, var(--c-blue), var(--c-brand-lt));
  --grad-warm:   linear-gradient(120deg, var(--c-yellow), #E8A800);
  --glass:       linear-gradient(160deg, rgba(255,252,242,.06), rgba(255,252,242,.025));
  --shadow:      0 2px 4px rgba(0,0,0,.24), 0 14px 30px -18px rgba(0,0,0,.6);
  --shadow-hi:   0 4px 10px rgba(0,0,0,.3), 0 24px 48px -20px rgba(0,0,0,.7);

  /* ---- TYPE ---- */
  --f-display: 'Sora', sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  /* ---- SCALE ---- */
  --t-h1: clamp(38px, 5.6vw, 68px);
  --t-h2: clamp(30px, 4vw, 48px);
  --t-h3: 20px;
  --t-body: 16.5px;
  --t-small: 14.5px;

  /* ---- SPACE ---- */
  --s-section: 110px;
  --s-gap: 20px;
  --s-card: 30px;
  --wrap: 1220px;

  /* ---- SHAPE + MOTION ---- */
  --r: 14px;
  --r-sm: 9px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur: .7s;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{
  background:var(--c-bg);color:var(--c-body);
  font-family:var(--f-body);font-size:var(--t-body);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;  /* overridden below */
}
h1,h2,h3,h4,h5{font-family:var(--f-display);color:var(--c-heading);line-height:1.12;letter-spacing:-.025em}
h1{font-size:var(--t-h1);font-weight:800}
h2{font-size:var(--t-h2);font-weight:700}
h3{font-size:var(--t-h3);font-weight:600}
h4{font-size:17px;font-weight:600}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button,input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--c-brand-2);outline-offset:3px}
::selection{background:var(--c-brand);color:var(--c-on-brand)}

/* scrollbar */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--c-bg)}
::-webkit-scrollbar-thumb{background:#D9D2C2;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:var(--c-brand)}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sec{padding:var(--s-section) 0;position:relative}
.sec--alt{background:var(--c-bg-alt)}
.sec--tight{padding:70px 0}

.grid{display:grid;gap:var(--s-gap)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-split{grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}

.head{margin-bottom:56px}
.head--center{text-align:center;max-width:720px;margin-inline:auto}
.head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.lead{max-width:620px;font-size:17px}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ==========================================================================
   4. MOTION SYSTEM  (compositor-driven)
   --------------------------------------------------------------------------
   Scroll-linked motion uses CSS scroll-driven animations. The browser runs
   these off the main thread, so they stay smooth regardless of JS load.
   Only transform and opacity are animated: both are GPU-composited and
   neither triggers layout or paint.

   USAGE:  <div data-anim="up">        fade + rise on entry
           <div data-anim="left">      slide from left
           <div data-anim="zoom">      scale up
           <div data-anim="flip">      3D swing on the Y axis
           <div data-anim="rise3d">    3D lift on the X axis
           <div data-anim="parallax">  continuous drift while in view
           <div data-anim="spin">      full 360 rotation while in view
           <div data-anim="wipe">      clip-path reveal
           data-delay="1|2|3|4"        stagger within a group
   ========================================================================== */

/* --- preloader --- */
#preload{position:fixed;inset:0;z-index:9999;background:var(--c-bg);display:grid;place-items:center;transition:opacity .5s ease,visibility .5s}
#preload.done{opacity:0;visibility:hidden}
.pre-bar{width:180px;height:2px;background:var(--c-line);overflow:hidden;border-radius:2px}
.pre-bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .2s linear}
.pre-num{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--c-brand);margin-top:14px;text-align:center}

/* --- scroll progress (transform, not width: no layout) --- */
#progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--grad-warm);z-index:120;transform:scaleX(0);transform-origin:0 50%;}

/* --- custom cursor -------------------------------------------------------
   The dot has NO transform transition, so it sits exactly under the pointer
   with zero delay. The ring has a short transform transition — that is what
   creates the trailing feel, and the compositor handles it, so it costs
   nothing on the main thread. Keep the ring duration under ~200ms: longer
   than that and it stops reading as "follows you" and starts reading as lag.
   ------------------------------------------------------------------------ */
#cursor{
  position:fixed;top:0;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--c-brand);pointer-events:none;z-index:9998;
  transition:width .22s var(--ease),height .22s var(--ease),margin .22s var(--ease),background-color .22s;
}
#cursor-ring{
  position:fixed;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1.5px solid var(--c-line-hi);border-radius:50%;pointer-events:none;z-index:9997;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),
             width .28s var(--ease),height .28s var(--ease),margin .28s var(--ease),
             border-color .28s,background-color .28s;
}
body.cursor-on,body.cursor-on a,body.cursor-on button,
body.cursor-on input,body.cursor-on select,body.cursor-on textarea{cursor:none}
#cursor.hot{width:0;height:0;margin:0}
#cursor-ring.hot{
  width:66px;height:66px;margin:-33px 0 0 -33px;
  border-color:var(--c-yellow);background:rgba(250,204,21,.20);
}
@media(max-width:1040px){#cursor,#cursor-ring{display:none}}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes a-up      {from{opacity:0;transform:translate3d(0,44px,0)}   to{opacity:1;transform:none}}
@keyframes a-down    {from{opacity:0;transform:translate3d(0,-44px,0)}  to{opacity:1;transform:none}}
@keyframes a-left    {from{opacity:0;transform:translate3d(-56px,0,0)}  to{opacity:1;transform:none}}
@keyframes a-right   {from{opacity:0;transform:translate3d(56px,0,0)}   to{opacity:1;transform:none}}
@keyframes a-zoom    {from{opacity:0;transform:scale(.9)}               to{opacity:1;transform:none}}
@keyframes a-flip    {from{opacity:0;transform:perspective(1200px) rotateY(38deg)} to{opacity:1;transform:perspective(1200px) rotateY(0)}}
@keyframes a-rise3d  {from{opacity:0;transform:perspective(1200px) rotateX(26deg) translate3d(0,50px,0)} to{opacity:1;transform:perspective(1200px) rotateX(0) translate3d(0,0,0)}}
@keyframes a-wipe    {from{clip-path:inset(0 100% 0 0)}                 to{clip-path:inset(0 0 0 0)}}
@keyframes a-drift   {from{transform:translate3d(0,60px,0)}             to{transform:translate3d(0,-60px,0)}}
@keyframes a-spin360 {from{transform:rotate(0)}                         to{transform:rotate(360deg)}}
@keyframes a-scalex  {from{transform:scaleX(0)}                         to{transform:scaleX(1)}}
@keyframes a-heroout {to{opacity:0;transform:translate3d(0,-70px,0) scale(.95)}}
@keyframes a-spinloop{to{transform:rotate(360deg)}}
@keyframes a-rowin   {from{opacity:0;transform:translate3d(0,34px,0)} to{opacity:1;transform:none}}
@keyframes a-maskup  {from{clip-path:inset(100% 0 0 0)}              to{clip-path:inset(0 0 0 0)}}
@keyframes a-tiltin  {from{opacity:0;transform:perspective(1200px) rotateX(-18deg) translate3d(0,60px,0)} to{opacity:1;transform:perspective(1200px) rotateX(0) translate3d(0,0,0)}}
@keyframes a-widen   {from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes marquee   {to{transform:translateX(-100%)}}

/* ==========================================================================
   SCROLL-DRIVEN BINDINGS
   ========================================================================== */
@supports (animation-timeline: view()) {
  [data-anim]{
    backface-visibility:hidden;
    animation-timeline: view();
    animation-range: entry 5% cover 34%;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.2,.7,.3,1);
    animation-duration: auto;              /* MUST be auto: the scroll range IS the duration */
  }
  [data-anim="up"]     {animation-name:a-up}
  [data-anim="down"]   {animation-name:a-down}
  [data-anim="left"]   {animation-name:a-left}
  [data-anim="right"]  {animation-name:a-right}
  [data-anim="zoom"]   {animation-name:a-zoom}
  [data-anim="flip"]   {animation-name:a-flip}
  [data-anim="rise3d"] {animation-name:a-rise3d}
  [data-anim="wipe"]   {animation-name:a-wipe}
  [data-anim="bar"]    {animation-name:a-scalex;transform-origin:0 50%}

  /* continuous: run across the whole time the element is in view */
  [data-anim="parallax"],[data-anim="spin"]{
    animation-range: cover 0% cover 100%;
  }
  [data-anim="parallax"]{animation-name:a-drift}
  [data-anim="spin"]    {animation-name:a-spin360}
  [data-anim="rowin"]   {animation-name:a-rowin}
  [data-anim="maskup"]  {animation-name:a-maskup}
  [data-anim="tiltin"]  {animation-name:a-tiltin}
  [data-anim="widen"]   {animation-name:a-widen;transform-origin:0 50%}

  /* hero exits as it scrolls away */
  [data-anim="hero-out"]{
    animation-name:a-heroout;
    animation-range: exit 0% exit 100%;
  }

  /* stagger inside a group */
  [data-delay="1"]{animation-range:entry 9%  cover 36%}
  [data-delay="2"]{animation-range:entry 13% cover 38%}
  [data-delay="3"]{animation-range:entry 17% cover 40%}
  [data-delay="4"]{animation-range:entry 21% cover 42%}
  [data-delay="5"]{animation-range:entry 25% cover 44%}
  [data-delay="6"]{animation-range:entry 29% cover 46%}
  [data-delay="7"]{animation-range:entry 33% cover 48%}
  [data-delay="8"]{animation-range:entry 37% cover 50%}
}

/* Fallback for browsers without scroll timelines: JS adds .in */
@supports not (animation-timeline: view()) {
  [data-anim]{opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease),clip-path .7s var(--ease)}
  [data-anim="up"]     {transform:translate3d(0,44px,0)}
  [data-anim="down"]   {transform:translate3d(0,-44px,0)}
  [data-anim="left"]   {transform:translate3d(-56px,0,0)}
  [data-anim="right"]  {transform:translate3d(56px,0,0)}
  [data-anim="zoom"]   {transform:scale(.9)}
  [data-anim="flip"]   {transform:perspective(1200px) rotateY(38deg)}
  [data-anim="rise3d"] {transform:perspective(1200px) rotateX(26deg) translate3d(0,50px,0)}
  [data-anim="wipe"]   {opacity:1;clip-path:inset(0 100% 0 0)}
  [data-anim="bar"]    {opacity:1;transform:scaleX(0);transform-origin:0 50%}
  [data-anim="rowin"]  {transform:translate3d(0,34px,0)}
  [data-anim="maskup"] {opacity:1;clip-path:inset(100% 0 0 0)}
  [data-anim="tiltin"] {transform:perspective(1200px) rotateX(-18deg) translate3d(0,60px,0)}
  [data-anim="widen"]  {opacity:1;transform:scaleX(0);transform-origin:0 50%}
  [data-anim].in       {opacity:1;transform:none;clip-path:inset(0 0 0 0)}
  [data-anim="parallax"],[data-anim="spin"],[data-anim="hero-out"]{opacity:1;transform:none}
  [data-delay="1"].in{transition-delay:.08s}
  [data-delay="2"].in{transition-delay:.16s}
  [data-delay="3"].in{transition-delay:.24s}
  [data-delay="4"].in{transition-delay:.32s}
  [data-delay="5"].in{transition-delay:.40s}
  [data-delay="6"].in{transition-delay:.48s}
  [data-delay="7"].in{transition-delay:.56s}
  [data-delay="8"].in{transition-delay:.64s}
}

/* --- 360 seal: pure CSS, no JS --- */
.seal{position:relative;width:148px;height:148px;display:grid;place-items:center;flex:none}
.seal__ring{position:absolute;inset:0;animation:a-spinloop 18s linear infinite;}
.seal__ring text{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;fill:var(--c-brand)}
.seal__core{width:60px;height:60px;border-radius:50%;background:var(--grad-warm);display:grid;place-items:center;font-size:21px;color:var(--c-on-yellow);z-index:1}
.ring-dash{width:100%;height:100%;border:2px dashed var(--c-yellow);border-radius:50%;opacity:.55}

/* --- magnetic button --- */
[data-magnet]{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .25s,background .25s}
[data-magnet]:active{transition-duration:.05s}

/* --- marquee --- */
.marquee{overflow:hidden;white-space:nowrap;display:flex}
.marquee__row{display:inline-flex;flex:none;gap:56px;padding-right:56px;animation:marquee 40s linear infinite;align-items:center;}
.marquee:hover .marquee__row{animation-play-state:paused}
.marquee__row .badge{display:inline-flex;align-items:center;gap:56px}
.marquee__row .badge::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-yellow)}

/* --- yellow highlight swipe --- */
.hl{position:relative;display:inline-block;z-index:0}
.hl::after{content:"";position:absolute;left:-.02em;right:-.02em;bottom:-.02em;height:.11em;
  background:var(--c-yellow);z-index:-1;border-radius:4px;transform:scaleX(0);transform-origin:left;
  animation:a-scalex .9s cubic-bezier(.2,.7,.3,1) .5s forwards}
.tx-brand{color:var(--c-brand)}

/* --- horizontal rail: honest overflow scroll, no scroll hijacking --- */
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rail > *{flex:0 0 clamp(280px,31vw,390px);scroll-snap-align:start}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--c-brand);border-radius:6px}

/* --- stacking cards --- */
[data-stack]{display:flex;flex-direction:column;gap:24px}
[data-stack-card]{position:sticky;top:110px;background:var(--c-surface);box-shadow:var(--shadow-hi)}
[data-stack-card]:nth-child(1){top:110px;z-index:1}
[data-stack-card]:nth-child(2){top:132px;z-index:2}
[data-stack-card]:nth-child(3){top:154px;z-index:3}
[data-stack-card]:nth-child(4){top:176px;z-index:4}
[data-stack-card]:nth-child(5){top:198px;z-index:5}
@media(max-width:900px){[data-stack-card]{position:static}}

/* --- stat bar --- */
.bar{height:3px;background:var(--c-line);border-radius:3px;overflow:hidden;margin-top:14px}
.bar i{display:block;height:100%;background:var(--grad-warm);border-radius:3px}

/* --- 3D shared stage --- */
.stage-3d{perspective:1400px;perspective-origin:50% 30%}

/* --- ambient glow --- */
/* radial-gradient instead of filter:blur() — a blurred surface must be
   re-rendered every frame it moves, which is what made scrolling stutter */
.glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.glow--brand{background:radial-gradient(circle at 50% 50%, rgba(29,78,216,.20), rgba(29,78,216,.07) 45%, transparent 70%)}
.glow--alt{background:radial-gradient(circle at 50% 50%, rgba(250,204,21,.34), rgba(250,204,21,.10) 45%, transparent 70%)}
.glow--warm{background:radial-gradient(circle at 50% 50%, rgba(92,83,70,.26), rgba(92,83,70,.08) 45%, transparent 70%)}

/* --- if embedded in an auto-height frame, create a real scrollport --- */
.is-embedded, .is-embedded body{height:100%}
.is-embedded body{height:100vh;overflow-y:auto;overflow-x:hidden}

/* --- reduced motion --- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .seal__ring{animation:none!important}
  [data-anim]{opacity:1!important;transform:none!important;clip-path:none!important}
  .hl::after{transform:scaleX(1)}
  #cursor,#cursor-ring{display:none}
  body.cursor-on{cursor:auto}
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- eyebrow --- */
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-brand);font-weight:500;display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--c-yellow)}
.head--center .eyebrow::after{content:"";width:26px;height:3px;border-radius:2px;background:var(--c-yellow)}
.head--center .eyebrow{justify-content:center}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 30px;border-radius:8px;font-weight:600;font-size:15.5px;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s;}
.btn--primary{background:var(--grad);color:var(--c-on-brand);box-shadow:0 10px 26px -12px rgba(29,78,216,.55)}
.btn--primary:hover{box-shadow:0 18px 36px -12px rgba(29,78,216,.65)}
.btn--ghost{border-color:var(--c-line);color:var(--c-heading);background:var(--c-surface)}
.btn--ghost:hover{border-color:var(--c-brand);color:var(--c-brand)}
.btn--yellow{background:var(--grad-warm);color:var(--c-on-yellow);box-shadow:0 10px 26px -12px rgba(92,83,70,.6)}
.btn--sm{padding:11px 22px;font-size:14.5px}
.btn--block{width:100%}

/* --- glass card --- */
.card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);padding:var(--s-card);box-shadow:var(--shadow);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.card--hover:hover{transform:translate3d(0,-6px,0);border-color:var(--c-line-hi);box-shadow:var(--shadow-hi)}
.card--solid{background:var(--c-surface)}

/* --- icon chip --- */
.chip{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--grad);color:var(--c-on-brand);font-size:18px;margin-bottom:18px}
.chip--soft{background:rgba(29,78,216,.10);color:var(--c-brand)}
.chip--yellow{background:var(--grad-warm);color:var(--c-on-yellow)}
.chip--sm{width:34px;height:34px;font-size:14px;border-radius:9px;margin:0}

/* --- number counter --- */
.count{font-family:var(--f-display);font-weight:800;line-height:1;color:var(--c-heading)}
.count--grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.count-label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-top:8px;color:var(--c-body)}

/* --- accordion --- */
.acc{max-width:840px;margin-inline:auto}
.acc__item{border-bottom:1px solid var(--c-line)}
.acc__btn{width:100%;background:none;border:0;color:var(--c-heading);font-family:var(--f-display);font-weight:600;font-size:17.5px;text-align:left;padding:24px 44px 24px 0;cursor:pointer;position:relative}
.acc__btn::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--c-brand);font-size:24px;font-weight:400;transition:transform .3s var(--ease)}
.acc__item.open .acc__btn::after{transform:translateY(-50%) rotate(45deg)}
.acc__panel{max-height:0;overflow:hidden;transition:max-height .38s var(--ease)}
.acc__panel p{padding:0 40px 24px 0;font-size:15.5px}

/* --- tabs --- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.tab{padding:10px 20px;border-radius:8px;border:1px solid var(--c-line);font-size:14.5px;cursor:pointer;background:var(--c-surface);color:var(--c-body);transition:.25s}
.tab.active{background:var(--grad);color:var(--c-on-brand);border-color:transparent;font-weight:600}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeUp .5s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- form --- */
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-sm);padding:13px 15px;color:var(--c-heading);font-size:15px;transition:border-color .25s,box-shadow .25s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c-brand);box-shadow:0 0 0 3px rgba(29,78,216,.10);outline:none}
.field select option{background:var(--c-surface)}
.field textarea{resize:vertical;min-height:104px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* --- table --- */
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th,.table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--c-line)}
.table th{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-brand)}
.table td strong{color:var(--c-heading)}

/* --- badge --- */
.badge{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-brand)}

/* ==========================================================================
   6. SECTIONS
   ========================================================================== */

/* --- header / nav --- */
.nav{position:fixed;inset:0 0 auto 0;z-index:90;padding:18px 0;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,padding .3s}
.nav.stuck{background:var(--c-bg);border-bottom-color:var(--c-line);padding:12px 0;box-shadow:0 2px 20px -12px rgba(10,25,47,.28)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;line-height:0;font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--c-heading);letter-spacing:-.03em}
.brand i{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.menu{display:flex;align-items:center;gap:28px;font-size:15px}
.menu > li{position:relative}
.menu a{color:var(--c-body);transition:color .2s}
.menu a:hover,.menu li.current > a{color:var(--c-heading)}
.drop{position:absolute;top:150%;left:-18px;min-width:252px;padding:10px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:12px;box-shadow:var(--shadow-hi);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s var(--ease)}
.menu li:hover .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:10px 14px;border-radius:var(--r-sm);font-size:14.5px}
.drop a:hover{background:rgba(29,78,216,.07);color:var(--c-brand)}
.burger{display:none;background:none;border:0;color:var(--c-heading);font-size:26px;cursor:pointer;z-index:95}

/* --- header mark ---------------------------------------------------------
   Icon only. The wordmark is dropped from the header because at nav height
   it renders too small to read, and the mark alone is more recognisable.
   The full lockup stays in the footer.
   ------------------------------------------------------------------------ */
.brand__mark{
  height:58px;width:auto;display:block;
  transition:height .3s var(--ease);
}
.nav.stuck .brand__mark{height:46px}          /* shrinks with the nav */
@media(max-width:1040px){
  .brand__mark{height:50px}
  .nav.stuck .brand__mark{height:42px}
}
@media(max-width:520px){
  .brand__mark{height:44px}
  .nav.stuck .brand__mark{height:38px}
}

/* --- hero --- */
.hero{position:relative;padding:190px 0 100px;overflow:hidden}
.hero > .wrap{position:relative;z-index:1}
.hero h1{max-width:15ch;margin-bottom:22px}
.hero h1 i{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0 60px}
.hero__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--c-line);padding-top:34px}
.hero__stats .count{font-size:clamp(28px,3.4vw,40px)}

/* --- page banner (inner pages) --- */
.banner{position:relative;padding:170px 0 70px;overflow:hidden;border-bottom:1px solid var(--c-line)}
.banner > .wrap{position:relative;z-index:1}
.crumb{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-body);margin-top:16px}
.crumb a:hover{color:var(--c-brand-2)}

/* --- numbered service card --- */
.svc__n{font-family:var(--f-mono);font-size:12px;color:var(--c-brand);letter-spacing:.14em;margin-bottom:22px;display:block;padding-bottom:14px;border-bottom:3px solid var(--c-yellow);width:fit-content}
.svc h3{margin-bottom:10px}
.svc p{font-size:15px;margin-bottom:14px}
.svc p:last-child{margin-bottom:0}
.svc{display:flex;flex-direction:column}
.svc__more{font-size:14px;color:var(--c-brand);font-weight:600}
.card--hover:hover .svc__more{color:var(--c-brand-lt)}

/* --- process steps --- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-line);border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden}
.step{background:var(--c-bg);padding:34px 28px;transition:background .3s}
.sec--alt .step{background:var(--c-bg-alt)}
.step:hover{background:var(--c-surface)}
.step:hover b{color:var(--c-orange)}
.step b{font-family:var(--f-mono);font-size:12px;color:var(--c-brand);letter-spacing:.14em;display:block;margin-bottom:20px;transition:color .3s}
.step h3{font-size:18px;margin-bottom:9px}
.step p{font-size:var(--t-small)}

/* --- case card --- */
.case h3{margin:14px 0 10px;font-size:22px}
.case p{font-size:15px;margin-bottom:24px}
.case__m{display:flex;gap:30px;border-top:1px solid var(--c-line);padding-top:20px}
.case__m .count{font-size:30px}

/* --- testimonial --- */
.quote{position:relative}
.quote::before{content:"\201C";position:absolute;top:6px;right:22px;font-family:var(--f-display);font-size:80px;line-height:1;color:var(--c-yellow);opacity:.55}
.quote p{font-size:15.5px;color:var(--c-heading);margin-bottom:22px;position:relative}
.quote footer{display:flex;align-items:center;gap:13px;border-top:1px solid var(--c-line);padding-top:18px}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--c-on-brand);flex:none}
.quote strong{color:var(--c-heading);font-size:15px;display:block;font-family:var(--f-display)}
.quote small{font-size:12.5px}

/* --- blog post card --- */
.post .badge + time{margin-left:10px;padding-left:10px;border-left:1px solid var(--c-line)}
.post time{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;color:var(--c-body);text-transform:uppercase}
.post .badge{color:var(--c-brand)}
.post h3{margin:13px 0 10px;font-size:19px;line-height:1.3}
.post p{font-size:var(--t-small)}

/* --- pricing --- */
.price{position:relative}
.price--featured{border-color:var(--c-orange);box-shadow:var(--shadow-hi)}
.price--featured::before{content:"Most chosen";position:absolute;top:-11px;left:var(--s-card);background:var(--grad-warm);color:var(--c-on-yellow);font-weight:500;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 12px;border-radius:20px}
.price__amt{font-family:var(--f-display);font-weight:800;font-size:40px;color:var(--c-heading);line-height:1;margin:14px 0 4px}
.price__amt small{font-size:14px;font-family:var(--f-body);font-weight:400;color:var(--c-body)}
.price__list{margin:24px 0;border-top:1px solid var(--c-line);padding-top:22px}
.price__list li{font-size:14.5px;padding:7px 0 7px 24px;position:relative}
.price__list li::before{content:"✓";position:absolute;left:0;color:var(--c-brand);font-weight:600}

/* --- contact info --- */
.ct-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--c-line)}
.ct-item:last-child{border-bottom:0}
.ct-item b{display:block;color:var(--c-heading);font-family:var(--f-display);font-size:15px}
.ct-item span{font-size:var(--t-small)}
.map{margin-top:26px;border-radius:var(--r);overflow:hidden;border:1px solid var(--c-line);height:210px}
.map iframe{width:100%;height:100%;border:0}

/* --- footer --- */
.foot{background:var(--c-bg-alt);border-top:1px solid var(--c-line);padding:70px 0 0}
.foot__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:50px}
.foot h4{font-size:14px;font-family:var(--f-mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--c-heading);margin-bottom:20px}
.foot li{margin-bottom:11px;font-size:var(--t-small)}
.foot li a:hover{color:var(--c-brand)}
.foot__btm{border-top:1px solid var(--c-line);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{width:34px;height:34px;border:1px solid var(--c-line);border-radius:var(--r-sm);display:grid;place-items:center;font-size:12px;font-family:var(--f-mono);transition:.25s}
.socials a:hover{background:var(--grad);color:var(--c-on-brand);border-color:transparent}
.socials a{background:var(--c-surface)}

/* --- floating actions --- */
.float{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:11px}
.float a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:21px;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.4);transition:transform .25s var(--ease)}
.float a:hover{transform:scale(1.08)}
.float .wa{background:#25D366}
.float .call{background:var(--grad);color:var(--c-on-brand)}
.float .top{background:var(--grad-warm);color:var(--c-on-yellow)}

/* --- modal --- */
.modal{position:fixed;inset:0;z-index:100;background:rgba(10,25,47,.6);display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:.3s}
.modal.show{opacity:1;visibility:visible}
.modal__box{max-width:460px;padding:38px;text-align:center;position:relative;box-shadow:var(--shadow-hi)}
.modal__box h3{font-size:26px;margin-bottom:12px}
.modal__box p{font-size:15px;margin-bottom:22px}
.modal__x{position:absolute;top:14px;right:18px;background:none;border:0;color:var(--c-body);font-size:27px;cursor:pointer;line-height:1}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */
@media(max-width:1040px){
  .menu{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:20px;background:var(--c-bg);font-size:20px;transform:translateX(100%);transition:transform .35s var(--ease);overflow-y:auto;padding:80px 24px}
  .menu.open{transform:none}
  .drop{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;text-align:center;padding:4px 0;min-width:0}
  .drop a{font-size:15px;padding:6px}
  .burger{display:block}
  #cursor,#cursor-ring{display:none}
  body.cursor-on{cursor:auto}
}
@media(max-width:980px){
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .g-split{grid-template-columns:1fr;gap:40px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot__g{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  :root{--s-section:76px;--s-card:24px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .hero{padding:150px 0 70px}
  .hero__stats{grid-template-columns:repeat(2,1fr);gap:26px}
  .banner{padding:140px 0 56px}
  .steps{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .foot__g{grid-template-columns:1fr}
}

/* ==========================================================================
   DYNAMIC PATTERNS
   Uses existing tokens only. No new colours are introduced anywhere below.
   ========================================================================== */

/* --- numbered service rows (title left, copy right, arrow far right) ----- */
.rows{border-top:1px solid var(--c-line)}
.row-item{
  position:relative;display:grid;grid-template-columns:62px 1.05fr 1.35fr 62px;
  gap:26px;align-items:center;padding:32px 10px;border-bottom:1px solid var(--c-line);
  transition:padding .45s var(--ease);overflow:hidden;isolation:isolate;
}
.row-item::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--c-brand);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);
}
.row-item:hover::before{transform:scaleY(1)}
.row-item:hover{padding-left:26px;padding-right:26px}
.row-num{font-family:var(--f-mono);font-size:13px;color:var(--c-brand);letter-spacing:.1em;transition:color .35s}
.row-item h3{font-size:clamp(20px,2.3vw,29px);transition:color .35s}
.row-item p{font-size:15px;transition:color .35s,opacity .35s}
.row-arrow{
  justify-self:end;width:46px;height:46px;border-radius:50%;border:1px solid var(--c-line);
  display:grid;place-items:center;font-size:16px;color:var(--c-heading);
  transition:transform .5s var(--ease),border-color .35s,background-color .35s,color .35s;
}
.row-item:hover .row-num,.row-item:hover h3{color:var(--c-on-brand)}
.row-item:hover p{color:var(--c-on-brand);opacity:.8}
.row-item:hover .row-arrow{
  transform:translate3d(5px,-5px,0) rotate(45deg);
  background:var(--c-yellow);border-color:transparent;color:var(--c-on-yellow);
}
@media(max-width:860px){
  .row-item{grid-template-columns:42px 1fr;gap:6px 14px;padding:24px 6px}
  .row-item p{grid-column:2}
  .row-arrow{display:none}
  .row-item:hover{padding-left:12px;padding-right:12px}
}

/* --- sticky scrollspy navigation ---------------------------------------- */
.spy-wrap{display:grid;grid-template-columns:250px 1fr;gap:54px;align-items:start}
.spy{position:sticky;top:118px;border-left:1px solid var(--c-line)}
.spy a{
  display:block;padding:13px 0 13px 20px;font-family:var(--f-display);font-weight:600;
  font-size:15.5px;color:var(--c-body);position:relative;transition:color .3s,padding .3s;
}
.spy a::before{
  content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--c-brand);
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease);
}
.spy a:hover{color:var(--c-heading)}
.spy a.active{color:var(--c-brand);padding-left:28px}
.spy a.active::before{transform:scaleY(1)}
.spy-panel{scroll-margin-top:120px;padding-bottom:64px;border-bottom:1px solid var(--c-line);margin-bottom:56px}
.spy-panel:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.spy-media{
  aspect-ratio:16/9;border-radius:var(--r);background:var(--grad);display:grid;place-items:center;
  color:var(--c-on-brand);font-family:var(--f-display);font-weight:700;font-size:21px;
  margin-bottom:24px;text-align:center;padding:20px;
}
.spy-list{display:grid;grid-template-columns:1fr 1fr;gap:9px 24px;margin-top:18px}
.spy-list li{font-size:15px;padding-left:19px;position:relative}
.spy-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--c-yellow)}
@media(max-width:900px){
  .spy-wrap{grid-template-columns:1fr;gap:26px}
  .spy{position:static;display:flex;gap:4px;overflow-x:auto;border-left:0;
       border-bottom:1px solid var(--c-line);padding-bottom:4px}
  .spy a{white-space:nowrap;padding:10px 14px;font-size:14.5px}
  .spy a::before{left:0;right:0;top:auto;bottom:0;width:auto;height:2px;transform:scaleX(0);transform-origin:left}
  .spy a.active{padding-left:14px}
  .spy a.active::before{transform:scaleX(1)}
  .spy-list{grid-template-columns:1fr}
}

/* --- oversized display counters ----------------------------------------- */
.big-stat{text-align:center;padding:28px 12px}
.big-stat .count{font-size:clamp(38px,5.2vw,68px)}

/* --- article body --------------------------------------------------------- */
.article{max-width:720px;margin:0 auto}
.article h2{font-size:clamp(22px,2.8vw,32px);margin:44px 0 14px}
.article h3{font-size:19px;margin:32px 0 10px}
.article p{margin-bottom:16px}
.article ul{margin:0 0 18px}
.article li{position:relative;padding-left:22px;margin-bottom:9px}
.article li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--c-yellow)}
.article blockquote{border-left:3px solid var(--c-yellow);padding:4px 0 4px 22px;margin:26px 0;
  font-family:var(--f-display);font-weight:600;font-size:19px;color:var(--c-heading);line-height:1.4}
.article-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-body)}
.article-meta .badge{color:var(--c-brand)}

/* ==========================================================================
   PALETTE OVERRIDES
   The body is now dark; the header and footer are cream. These rules flip
   text colour inside that chrome so contrast holds in both zones.
   ========================================================================== */

/* --- header: cream bar, navy text --- */
.nav{background:var(--c-chrome)}
.nav.stuck{background:var(--c-chrome);border-bottom-color:rgba(10,25,47,.14);
  box-shadow:0 2px 22px -14px rgba(0,0,0,.45)}
.nav .menu > li > a{color:#4A5A70}
.nav .menu > li > a:hover,.nav .menu li.current > a{color:var(--c-on-chrome)}
.nav .burger{color:var(--c-on-chrome)}
.drop{background:var(--c-chrome);border-color:rgba(10,25,47,.12);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.45)}
.drop a{color:#4A5A70}
.drop a:hover{background:rgba(29,78,216,.10);color:var(--c-brand)}
@media(max-width:1040px){
  .menu{background:var(--c-chrome)}
  .menu > li > a{color:var(--c-on-chrome)}
}

/* --- footer: cream, navy text --- */
.foot{background:var(--c-chrome);border-top-color:rgba(10,25,47,.12);color:#4A5A70}
.foot h4{color:var(--c-on-chrome)}
.foot li a{color:#4A5A70}
.foot li a:hover{color:var(--c-brand)}
.foot__btm{border-top-color:rgba(10,25,47,.12);color:#5F6D80}
.foot .socials a{border-color:rgba(10,25,47,.16);background:transparent;color:var(--c-on-chrome)}
.foot .socials a:hover{background:var(--grad-warm);color:var(--c-on-yellow);border-color:transparent}
.foot input{background:rgba(10,25,47,.05)!important;border-color:rgba(10,25,47,.16)!important;
  color:var(--c-on-chrome)!important}
.foot input::placeholder{color:#8A94A3}

/* --- CTA buttons are yellow, per the palette --- */
.btn--primary{background:var(--grad-warm);color:var(--c-on-yellow);
  box-shadow:0 10px 26px -12px rgba(250,204,21,.5)}
.btn--primary:hover{box-shadow:0 18px 36px -12px rgba(250,204,21,.65)}
.btn--ghost{background:transparent;color:var(--c-heading);border-color:var(--c-line)}
.btn--ghost:hover{border-color:var(--c-yellow);color:var(--c-yellow)}
.nav .btn--primary{color:var(--c-on-yellow)}

/* --- eyebrow + accents --- */
.eyebrow{color:var(--c-yellow)}
.eyebrow::before,.head--center .eyebrow::after{background:var(--c-yellow)}
.badge,.svc__n,.step b,.post time,.article-meta .badge,.table th{color:var(--c-yellow)}
.acc__btn::after{color:var(--c-yellow)}
.svc__n{border-bottom-color:var(--c-yellow)}
.price__list li::before{color:var(--c-yellow)}
.spy a.active{color:var(--c-yellow)}
.spy a.active::before{background:var(--c-yellow)}
.seal__ring text{fill:var(--c-yellow)}
.svc__more{color:var(--c-yellow)}
.card--hover:hover .svc__more{color:var(--c-heading)}

/* --- the highlight sits behind text, so that text must go dark --- */

/* --- cards --- */
.card{background:var(--c-surface);border-color:var(--c-line)}
.card--hover:hover{border-color:var(--c-line-hi)}
.card--solid{background:var(--c-surface)}
.quote p{color:var(--c-heading)}
.quote::before{color:var(--c-yellow)}

/* --- section variants --- */
.sec--alt{background:var(--c-bg-alt)}
.sec--blue{background:var(--c-bg-blue);color:var(--c-on-brand)}
.sec--blue h1,.sec--blue h2,.sec--blue h3,.sec--blue h4{color:var(--c-cream)}
.sec--warm{background:var(--c-bg-warm);color:#EDE7DC}
.sec--warm h1,.sec--warm h2,.sec--warm h3,.sec--warm h4{color:var(--c-cream)}
.sec--alt .step{background:var(--c-bg-alt)}
.step:hover{background:var(--c-surface)}

/* --- forms on dark --- */
.field input,.field select,.field textarea{background:rgba(255,252,242,.05);
  border-color:var(--c-line);color:var(--c-heading)}
.field input::placeholder,.field textarea::placeholder{color:#7E8CA0}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--c-yellow);box-shadow:0 0 0 3px rgba(250,204,21,.16)}
.field select option{background:var(--c-surface);color:var(--c-heading)}

/* --- numbered rows --- */
.row-item::before{background:var(--c-yellow)}
.row-item:hover .row-num,.row-item:hover h3,.row-item:hover p{color:var(--c-on-yellow)}
.row-item:hover .row-arrow{background:var(--c-navy);color:var(--c-yellow);border-color:transparent}

/* --- map needs inverting again on a dark page --- */
.map{filter:invert(.92) hue-rotate(180deg) saturate(.8)}

/* --- ambient glows --- */
.glow--brand{background:radial-gradient(circle at 50% 50%, rgba(29,78,216,.34), rgba(29,78,216,.10) 45%, transparent 70%)}
.glow--alt{background:radial-gradient(circle at 50% 50%, rgba(250,204,21,.20), rgba(250,204,21,.06) 45%, transparent 70%)}
.glow--warm{background:radial-gradient(circle at 50% 50%, rgba(92,83,70,.34), rgba(92,83,70,.10) 45%, transparent 70%)}

/* --- misc --- */
::-webkit-scrollbar-track{background:var(--c-bg)}
::-webkit-scrollbar-thumb{background:#1E3450}
::-webkit-scrollbar-thumb:hover{background:var(--c-yellow)}
#cursor{background:var(--c-yellow)}
#cursor-ring{border-color:rgba(250,204,21,.5)}
#cursor-ring.hot{border-color:var(--c-yellow);background:rgba(250,204,21,.16)}
#preload{background:var(--c-bg)}
.pre-num{color:var(--c-yellow)}
.ring-dash{border-color:var(--c-yellow)}
.spy-media{background:var(--grad)}
.ct-item b{color:var(--c-heading)}
.chip--soft{background:rgba(250,204,21,.14);color:var(--c-yellow)}
.modal{background:rgba(4,10,20,.72)}
.count--grad{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent}

/* --- specificity catch-ups: these would otherwise stay blue on the dark body --- */
.rows .row-item .row-num{color:var(--c-yellow)}
.post .badge,.case .badge,.spy-panel .badge{color:var(--c-yellow)}
.foot .brand{color:var(--c-on-chrome)}
.tx-brand{color:var(--c-yellow)}

/* ==========================================================================
   TWO-TONE SECTIONS
   Full-bleed yellow blocks alternating with the navy body. Everything inside
   a .sec--yellow inverts: text goes navy, cards go navy, buttons flip.
   Navy on yellow measures 11.49:1, so contrast is comfortable throughout.
   ========================================================================== */
.sec--yellow{background:var(--c-yellow);color:#3A3524}
.sec--yellow h1,.sec--yellow h2,.sec--yellow h3,.sec--yellow h4,
.sec--yellow strong,.sec--yellow b{color:var(--c-navy)}
.sec--yellow p,.sec--yellow li,.sec--yellow .lead{color:#3F3A28}

/* labels and accents go navy so they still read */
.sec--yellow .eyebrow{color:var(--c-navy)}
.sec--yellow .eyebrow::before,
.sec--yellow .head--center .eyebrow::after{background:var(--c-navy)}
.sec--yellow .badge,.sec--yellow .svc__n,.sec--yellow .step b,
.sec--yellow .post time,.sec--yellow .count-label,
.sec--yellow .table th,.sec--yellow .row-num{color:var(--c-navy)}
.sec--yellow .svc__n{border-bottom-color:var(--c-navy)}

/* cards invert to navy — the strongest note in the whole layout */
.sec--yellow .card{background:var(--c-navy);border-color:rgba(10,25,47,.22);
  box-shadow:0 4px 10px rgba(58,53,36,.14), 0 22px 44px -22px rgba(58,53,36,.45)}
.sec--yellow .card h2,.sec--yellow .card h3,.sec--yellow .card h4{color:var(--c-cream)}
.sec--yellow .card p,.sec--yellow .card li{color:#A3B2C6}
.sec--yellow .card .badge,.sec--yellow .card .svc__n,
.sec--yellow .card .count-label,.sec--yellow .card time{color:var(--c-yellow)}
.sec--yellow .card .svc__n{border-bottom-color:var(--c-yellow)}
.sec--yellow .card--hover:hover{border-color:var(--c-navy)}
.sec--yellow .count,.sec--yellow .card .count{color:var(--c-cream)}
.sec--yellow .count--grad{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec--yellow > .wrap > .grid > .count--grad{color:var(--c-navy)}

/* counters sitting directly on yellow, not in a card */
.sec--yellow .big-stat .count,
.sec--yellow .hero__stats .count{color:var(--c-navy)}

/* buttons flip: navy fill with yellow type */
.sec--yellow .btn--primary{background:var(--c-navy);color:var(--c-yellow);
  box-shadow:0 10px 26px -12px rgba(10,25,47,.55)}
.sec--yellow .btn--primary:hover{box-shadow:0 18px 36px -12px rgba(10,25,47,.7)}
.sec--yellow .btn--ghost{color:var(--c-navy);border-color:rgba(10,25,47,.3);background:transparent}
.sec--yellow .btn--ghost:hover{border-color:var(--c-navy);background:rgba(10,25,47,.07);color:var(--c-navy)}

/* structural lines darken */
.sec--yellow .steps{background:rgba(10,25,47,.22);border-color:rgba(10,25,47,.22)}
.sec--yellow .step{background:var(--c-yellow)}
.sec--yellow .step:hover{background:#F5C400}
.sec--yellow .step:hover b{color:var(--c-navy)}
.sec--yellow .acc__item{border-bottom-color:rgba(10,25,47,.18)}
.sec--yellow .acc__btn{color:var(--c-navy)}
.sec--yellow .acc__btn::after{color:var(--c-navy)}
.sec--yellow .acc__panel p{color:#3F3A28}
.sec--yellow .rows,.sec--yellow .row-item{border-color:rgba(10,25,47,.2)}
.sec--yellow .row-item::before{background:var(--c-navy)}
.sec--yellow .row-item h3{color:var(--c-navy)}
.sec--yellow .row-item:hover h3,.sec--yellow .row-item:hover p,
.sec--yellow .row-item:hover .row-num{color:var(--c-yellow)}
.sec--yellow .row-arrow{border-color:rgba(10,25,47,.3);color:var(--c-navy)}
.sec--yellow .row-item:hover .row-arrow{background:var(--c-yellow);color:var(--c-navy)}

/* chips, seals, rings */
.sec--yellow .chip{background:var(--c-navy);color:var(--c-yellow)}
.sec--yellow .chip--soft{background:rgba(10,25,47,.12);color:var(--c-navy)}
.sec--yellow .seal__ring text{fill:var(--c-navy)}
.sec--yellow .seal__core{background:var(--c-navy);color:var(--c-yellow)}
.sec--yellow .ring-dash{border-color:rgba(10,25,47,.4)}
.sec--yellow .quote::before{color:rgba(10,25,47,.3)}
.sec--yellow .avatar{background:var(--c-navy);color:var(--c-yellow)}

/* forms on yellow: white fields */
.sec--yellow .field label{color:#3A3524}
.sec--yellow .field input,.sec--yellow .field select,.sec--yellow .field textarea{
  background:var(--c-cream);border-color:rgba(10,25,47,.2);color:var(--c-navy)}
.sec--yellow .field input::placeholder,.sec--yellow .field textarea::placeholder{color:#8A8474}
.sec--yellow .field input:focus,.sec--yellow .field select:focus,.sec--yellow .field textarea:focus{
  border-color:var(--c-navy);box-shadow:0 0 0 3px rgba(10,25,47,.14)}
.sec--yellow .field select option{background:var(--c-cream);color:var(--c-navy)}
.sec--yellow .ct-item{border-bottom-color:rgba(10,25,47,.18)}
.sec--yellow .ct-item b{color:var(--c-navy)}
.sec--yellow .map{filter:none;border-color:rgba(10,25,47,.2)}
.sec--yellow .svc__more{color:var(--c-navy)}
.sec--yellow .card .svc__more{color:var(--c-yellow)}
.sec--yellow .spy a{color:#3F3A28}
.sec--yellow .spy a.active{color:var(--c-navy)}
.sec--yellow .spy a.active::before,.sec--yellow .spy{border-color:rgba(10,25,47,.2)}
.sec--yellow .spy a::before{background:var(--c-navy)}
.sec--yellow .spy-panel{border-bottom-color:rgba(10,25,47,.18)}
.sec--yellow .spy-media{background:var(--c-navy);color:var(--c-yellow)}
.sec--yellow .spy-list li::before{background:var(--c-navy)}
.sec--yellow .bar{background:rgba(10,25,47,.18)}
.sec--yellow .bar i{background:var(--c-navy)}
.sec--yellow .glow{display:none}

/* highlighted word: cream text on navy, navy text on yellow — the bar is an
   underline in both cases, so it never covers the letterforms */
.hl{color:inherit}
.sec--yellow .hl::after{background:var(--c-navy)}

/* ==========================================================================
   PINNED HORIZONTAL SCROLL
   The section sticks to the viewport while vertical scrolling drives the row
   sideways. Default state below is a plain horizontally-scrollable rail, so
   if JS never runs the content is still fully reachable. JS adds .is-pinned
   to upgrade it.
   ========================================================================== */
.hpin__viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.hpin__viewport::-webkit-scrollbar{height:6px}
.hpin__viewport::-webkit-scrollbar-thumb{background:var(--c-brand);border-radius:6px}
.hpin__track{display:flex;gap:20px;padding:0 24px 18px}
.hpin__track > *{flex:0 0 clamp(280px,31vw,390px)}
.hpin__hint{opacity:0}                       /* only meaningful once pinned */

/* --- upgraded state --- */
.hpin.is-pinned{position:relative}
.hpin.is-pinned .hpin__stage{
  position:sticky;top:0;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;gap:0;
  overflow:hidden;padding:96px 0 44px;
}
.hpin.is-pinned .hpin__viewport{overflow:visible}
.hpin.is-pinned .hpin__track{padding-bottom:0}
.hpin.is-pinned .hpin__hint{opacity:1;transition:opacity .4s var(--ease)}
.hpin.is-pinned .head{margin-bottom:0}

@media(prefers-reduced-motion:reduce){
  .hpin.is-pinned .hpin__stage{position:static;min-height:0;padding:0;overflow:visible}
  .hpin.is-pinned .hpin__viewport{overflow-x:auto}
  .hpin.is-pinned .hpin__track{transform:none!important}
}

/* overflow-x:hidden on body creates a scroll container, which silently breaks
   position:sticky for every descendant — the pinned row, the scrollspy nav and
   the stacking cards all depend on it. clip stops horizontal overflow without
   creating that container. */
@supports (overflow-x: clip){
  body{overflow-x:clip}
}

/* the pinned section manages its own vertical rhythm inside the sticky stage */
.hpin.is-pinned{padding:0}

/* ==========================================================================
   BACKGROUND TEXTURES
   All drawn with CSS gradients on a ::before, so there is no extra markup,
   no image requests and no blur filters. Each is masked so it fades out
   rather than stopping at a hard edge.

     <section class="sec" data-bg="grid">    engineering grid
     <section class="sec" data-bg="dots">    dot matrix
     <section class="sec" data-bg="beams">   diagonal light beams
     <section class="sec" data-bg="rings">   concentric outlines
     <section class="sec" data-bg="glow">    soft corner spotlight
   ========================================================================== */
[data-bg]{position:relative;isolation:isolate}
[data-bg]::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}

/* --- grid --- */
[data-bg="grid"]::before{
  background-image:
    linear-gradient(to right, rgba(255,252,242,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,252,242,.055) 1px, transparent 1px);
  background-size:72px 72px;
}

/* --- dot matrix --- */
[data-bg="dots"]::before{
  background-image:radial-gradient(circle, rgba(255,252,242,.11) 1.1px, transparent 1.1px);
  background-size:26px 26px;
}

/* --- diagonal beams --- */
[data-bg="beams"]::before{
  background-image:repeating-linear-gradient(112deg,
    transparent 0 78px,
    rgba(250,204,21,.05) 78px 79px,
    transparent 79px 150px);
}

/* --- concentric rings --- */
[data-bg="rings"]::before{
  background-image:repeating-radial-gradient(circle at 88% 18%,
    transparent 0 88px,
    rgba(250,204,21,.075) 88px 89px);
}

/* --- soft spotlight --- */
[data-bg="glow"]::before{
  background:
    radial-gradient(ellipse 46% 62% at 12% 12%, rgba(29,78,216,.24), transparent 62%),
    radial-gradient(ellipse 40% 55% at 92% 82%, rgba(250,204,21,.10), transparent 62%);
}

/* --- combinations get both layers --- */
[data-bg="grid-glow"]::before{
  background-image:
    linear-gradient(to right, rgba(255,252,242,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,252,242,.05) 1px, transparent 1px),
    radial-gradient(ellipse 55% 70% at 15% 20%, rgba(29,78,216,.26), transparent 62%);
  background-size:72px 72px, 72px 72px, 100% 100%;
}

/* --- on yellow sections the lines flip to navy --- */
.sec--yellow[data-bg]::before{opacity:1}
.sec--yellow[data-bg="grid"]::before,
.sec--yellow[data-bg="grid-glow"]::before{
  background-image:
    linear-gradient(to right, rgba(10,25,47,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,25,47,.09) 1px, transparent 1px);
  background-size:72px 72px;
}
.sec--yellow[data-bg="dots"]::before{
  background-image:radial-gradient(circle, rgba(10,25,47,.16) 1.1px, transparent 1.1px);
  background-size:26px 26px;
}
.sec--yellow[data-bg="beams"]::before{
  background-image:repeating-linear-gradient(112deg,
    transparent 0 78px, rgba(10,25,47,.07) 78px 79px, transparent 79px 150px);
}
.sec--yellow[data-bg="rings"]::before{
  background-image:repeating-radial-gradient(circle at 88% 18%,
    transparent 0 88px, rgba(10,25,47,.10) 88px 89px);
}

@media(max-width:700px){
  [data-bg="grid"]::before,[data-bg="grid-glow"]::before{background-size:48px 48px}
  [data-bg="dots"]::before{background-size:20px 20px}
}

.orb{position:absolute;pointer-events:none}
.orb .ring-dash{position:absolute;inset:0}

/* the ring stays faint; the graphic inside reads clearly */
.orb .ring-dash{opacity:.42}

/* ==========================================================================
   VIDEO HERO
   ========================================================================== */

/* screen-reader-only: the h1 lives here because the video carries it visually */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.hero--video{padding:118px 0 90px;position:relative}

.hero__media{
  position:relative;max-width:1360px;margin:0 auto 52px;padding:0 24px;
}
.hero__video{
  display:block;width:100%;height:auto;border-radius:18px;
  border:1px solid var(--c-line);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
  background:var(--c-navy);
}
/* No scrim. The videos already sit on the same navy as the page, and a scrim
   over the bottom quarter was covering the lowest row of labels. */

.hero--video .hero__lead{margin-bottom:0}
.hero--video .hero__cta{margin:28px 0 56px}

@media(max-width:700px){
  .hero--video{padding:100px 0 60px}
  .hero__media{margin-bottom:34px;padding:0 16px}
  .hero__video{border-radius:12px}
}

/* reduced motion: hold the poster frame instead of playing */
@media(prefers-reduced-motion:reduce){
  .hero__video{animation:none}
}

/* sub-items inside the services dropdown */
.drop__sub{padding-left:30px!important;font-size:13.5px!important;opacity:.82}

/* ==========================================================================
   PATTERN FADE WITHOUT MASKS
   mask-image allocates an offscreen buffer per element. With nine full-width
   masked layers per page that was enough GPU memory to crash the renderer,
   which Chrome then recovers by reloading the tab.

   Same visual result, no buffer: a vignette layer painted ON TOP of the
   pattern, fading to the section's own background colour.
   ========================================================================== */
[data-bg]::before{background-position:center}
[data-bg="grid"]::before,
[data-bg="dots"]::before,
[data-bg="beams"]::before,
[data-bg="rings"]::before,
[data-bg="grid-glow"]::before{
  background-image:
    radial-gradient(ellipse 92% 82% at 50% 45%, rgba(10,25,47,0) 45%, var(--c-bg) 94%),
    var(--pattern, none);
}
.sec--alt[data-bg]::before{
  background-image:
    radial-gradient(ellipse 92% 82% at 50% 45%, rgba(10,25,47,0) 45%, var(--c-bg-alt) 94%),
    var(--pattern, none);
}
.sec--yellow[data-bg]::before{
  background-image:
    radial-gradient(ellipse 92% 82% at 50% 45%, rgba(250,204,21,0) 45%, var(--c-yellow) 94%),
    var(--pattern, none);
}

/* each pattern is now just a custom property the rules above compose with */
[data-bg="grid"],[data-bg="grid-glow"]{
  --pattern:
    linear-gradient(to right, rgba(255,252,242,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,252,242,.10) 1px, transparent 1px);
}
[data-bg="dots"]{
  --pattern:radial-gradient(circle, rgba(255,252,242,.19) 1.4px, transparent 1.4px);
}
[data-bg="beams"]{
  --pattern:repeating-linear-gradient(112deg, transparent 0 78px,
    rgba(250,204,21,.13) 78px 80px, transparent 80px 150px);
}
[data-bg="rings"]{
  --pattern:repeating-radial-gradient(circle at 88% 18%, transparent 0 88px,
    rgba(250,204,21,.15) 88px 90px);
}
.sec--yellow[data-bg="grid"],.sec--yellow[data-bg="grid-glow"]{
  --pattern:
    linear-gradient(to right, rgba(10,25,47,.19) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,25,47,.19) 1px, transparent 1px);
}
.sec--yellow[data-bg="dots"]{--pattern:radial-gradient(circle, rgba(10,25,47,.30) 1.4px, transparent 1.4px)}
.sec--yellow[data-bg="beams"]{--pattern:repeating-linear-gradient(112deg, transparent 0 78px, rgba(10,25,47,.17) 78px 80px, transparent 80px 150px)}
.sec--yellow[data-bg="rings"]{--pattern:repeating-radial-gradient(circle at 88% 18%, transparent 0 88px, rgba(10,25,47,.20) 88px 90px)}

[data-bg="grid"]::before,[data-bg="grid-glow"]::before{background-size:100% 100%, 72px 72px, 72px 72px}
[data-bg="dots"]::before{background-size:100% 100%, 26px 26px}
[data-bg="beams"]::before,[data-bg="rings"]::before{background-size:100% 100%, auto}

/* ==========================================================================
   CURSOR — inverted by class, not by blend mode
   JS adds .on-light when the pointer is over a cream or yellow area. Pure
   colour swap: no backdrop snapshot, no recomposite, no GPU cost.
   ========================================================================== */
#cursor{background:var(--c-yellow);transition:background-color .18s var(--ease),width .22s var(--ease),height .22s var(--ease),margin .22s var(--ease)}
#cursor-ring{border-color:rgba(250,204,21,.6);background:transparent;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),border-color .18s,background-color .18s,width .28s var(--ease),height .28s var(--ease),margin .28s var(--ease)}
#cursor.on-light{background:var(--c-navy)}
#cursor-ring.on-light{border-color:rgba(10,25,47,.55)}
#cursor-ring.hot{border-color:var(--c-yellow);background:rgba(250,204,21,.22)}
#cursor-ring.hot.on-light{border-color:var(--c-navy);background:rgba(10,25,47,.14)}

/* ==========================================================================
   INDUSTRIES CONSTELLATION
   Eight digital-marketing glyphs — search, analytics, targeting, commerce,
   advertising, clicks, email and video — wired together, filling the space
   above the heading. Static SVG, transform-only drift, no filters.
   ========================================================================== */
/* In normal flow, not absolute. Absolute positioning let it sit on top of
   the heading; as a flow child of the flex column it simply takes its own
   space and nothing can overlap. */
.cst-wrap{
  position:relative;width:100%;display:grid;place-items:center;
  pointer-events:none;padding:0 24px;margin-bottom:26px;flex:0 0 auto;
}
.cst{width:100%;max-width:1020px;max-height:26vh;height:auto;opacity:.55}

.cst__links line{
  stroke:var(--c-yellow);stroke-width:1.4;stroke-dasharray:3 9;
  stroke-linecap:round;opacity:.34;
}
.cst__halo{fill:var(--c-brand);opacity:.10}
.cst__disc{fill:var(--c-bg-alt);stroke:rgba(250,204,21,.42);stroke-width:1.3}
.cst__icon{stroke:var(--c-yellow);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none}
.cst__icon circle{fill:none}

/* Each node is positioned by its transform attribute, so the drift is applied
   to the children instead — otherwise the animation would clobber the position.
   Staggered via --i so nothing moves in lockstep. */
.cst__halo{animation:cst-pulse 5.5s ease-in-out infinite;animation-delay:calc(var(--i) * -0.7s);transform-box:fill-box;transform-origin:center}
@keyframes cst-pulse{
  0%,100%{opacity:.10;transform:scale(1)}
  50%    {opacity:.20;transform:scale(1.16)}
}
.cst__disc{animation:cst-bob 6.5s ease-in-out infinite;animation-delay:calc(var(--i) * -0.9s);transform-box:fill-box;transform-origin:center}
.cst__icon{animation:cst-bob 6.5s ease-in-out infinite;animation-delay:calc(var(--i) * -0.9s);transform-box:fill-box;transform-origin:center}
@keyframes cst-bob{
  0%,100%{transform:translateY(-3px)}
  50%    {transform:translateY(3px)}
}

@media(max-width:1100px){.cst{opacity:.4}}
@media(max-width:820px){.cst-wrap{display:none}}
@media(prefers-reduced-motion:reduce){
  .cst__node,.cst__halo,.cst__disc,.cst__icon{animation:none}
}

/* the cursor must not intercept hit-testing, or elementFromPoint returns
   the cursor itself and the surface underneath can never be identified */
#cursor,#cursor-ring{pointer-events:none}

/* not enough vertical room to show the constellation and the row together */
@media(max-height:820px){.cst-wrap{display:none}}

/* ==========================================================================
   ORB GRAPHICS
   Each dashed ring carries a different digital-marketing glyph. The growth line
   is now used once only, in the process section on the homepage.
   Transform and opacity only, no filters.
   ========================================================================== */
.orbfx{
  position:absolute;top:50%;left:50%;width:56%;height:auto;
  transform:translate(-50%,-50%);
  color:var(--c-yellow);
  stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  animation:orbfx-bob 7s ease-in-out infinite;
}
.sec--yellow .orbfx{color:var(--c-navy)}
@keyframes orbfx-bob{
  0%,100%{transform:translate(-50%,-53%)}
  50%    {transform:translate(-50%,-47%)}
}
.orbfx .fx-line,.orbfx .fx-axis,.orbfx .fx-ring,.orbfx .fx-path,.orbfx .fx-arc,.orbfx .fx-arrow{fill:none}
.orbfx .fx-axis,.orbfx .fx-path{opacity:.4;stroke-width:1.5}
.orbfx .fx-ring{opacity:.55}

/* --- funnel: drops falling through --- */
.orbfx--funnel .fx-drop{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:fx-fall 3.4s ease-in infinite}
.orbfx--funnel .d2{animation-delay:-1.1s}
.orbfx--funnel .d3{animation-delay:-2.2s}
@keyframes fx-fall{
  0%  {opacity:0;transform:translateY(-14px)}
  20% {opacity:1}
  70% {opacity:1;transform:translateY(30px)}
  100%{opacity:0;transform:translateY(48px)}
}
.orbfx--funnel .fx-out{animation:fx-drip 3.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes fx-drip{0%,60%{opacity:0}75%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(8px)}}

/* --- chart: bars growing --- */
.orbfx--chart .fx-bar{fill:currentColor;opacity:.75;transform-box:fill-box;transform-origin:bottom;
  animation:fx-grow 3.6s ease-in-out infinite}
.orbfx--chart .b2{animation-delay:-.35s}
.orbfx--chart .b3{animation-delay:-.7s}
@keyframes fx-grow{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.orbfx--chart .fx-trend{fill:none;stroke-dasharray:90;stroke-dashoffset:90;
  animation:fx-draw 3.6s ease-in-out infinite}
@keyframes fx-draw{0%{stroke-dashoffset:90}45%,100%{stroke-dashoffset:0}}
.orbfx--chart .fx-tip{animation:fx-ping 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes fx-ping{0%,40%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1)}100%{opacity:1}}

/* --- target: rings pulsing outward --- */
.orbfx--target .fx-ring{transform-box:fill-box;transform-origin:center;
  animation:fx-pulse 3.2s ease-out infinite}
.orbfx--target .r2{animation-delay:-.4s}
.orbfx--target .r3{animation-delay:-.8s}
@keyframes fx-pulse{0%{opacity:.7;transform:scale(.9)}70%{opacity:.2}100%{opacity:0;transform:scale(1.12)}}
.orbfx--target .fx-arrow{animation:fx-strike 3.2s ease-out infinite}
@keyframes fx-strike{0%{opacity:0;transform:translate(8px,-8px)}30%{opacity:1;transform:none}90%{opacity:1}100%{opacity:0}}

/* --- radar: sweeping beam --- */
.orbfx--radar .fx-sweep{transform-box:fill-box;transform-origin:center;
  animation:fx-scan 4s linear infinite}
.orbfx--radar .fx-sweep path{stroke:none}
@keyframes fx-scan{to{transform:rotate(360deg)}}
.orbfx--radar .fx-blip{opacity:0;animation:fx-blip 4s linear infinite}
.orbfx--radar .p2{animation-delay:-2.1s}
@keyframes fx-blip{0%,8%{opacity:1}45%,100%{opacity:0}}

/* --- orbit: nodes circling --- */
.orbfx--orbit g[class^="fx-spin"]{transform-box:fill-box;transform-origin:center}
.orbfx--orbit .fx-spin1{animation:fx-scan 6s linear infinite}
.orbfx--orbit .fx-spin2{animation:fx-scan 8.5s linear infinite reverse}
.orbfx--orbit .fx-spin3{animation:fx-scan 11s linear infinite}
.orbfx--orbit .fx-core{animation:fx-breathe 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes fx-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.14);opacity:1}}

/* --- browser: blinking caret --- */
.orbfx--browser .fx-caret{animation:fx-blinkc 1.2s steps(1) infinite}
@keyframes fx-blinkc{0%,50%{opacity:1}51%,100%{opacity:0}}
.orbfx--browser .fx-code{opacity:.85}

/* --- gauge: needle sweeping --- */
.orbfx--gauge .fx-needle{transform-box:fill-box;transform-origin:50% 100%;
  animation:fx-swing 4.2s ease-in-out infinite}
@keyframes fx-swing{0%,100%{transform:rotate(-52deg)}50%{transform:rotate(46deg)}}
.orbfx--gauge .fx-arc{opacity:.45}
.orbfx--gauge .fx-tickdot{animation:fx-breathe 4.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

/* --- magnet: particles drawn in --- */
.orbfx--magnet .fx-part{transform-box:fill-box;transform-origin:center;
  animation:fx-attract 3.8s ease-in infinite}
.orbfx--magnet .q2{animation-delay:-1.3s}
.orbfx--magnet .q3{animation-delay:-2.5s}
@keyframes fx-attract{
  0%  {opacity:0;transform:translate(0,-10px) scale(.6)}
  25% {opacity:1;transform:none}
  80% {opacity:1;transform:translate(0,26px) scale(.9)}
  100%{opacity:0;transform:translate(0,34px) scale(.5)}
}

@media(prefers-reduced-motion:reduce){
  .orbfx,.orbfx *{animation:none!important}
  .orbfx .fx-trend{stroke-dashoffset:0}
  .orbfx .fx-drop,.orbfx .fx-part,.orbfx .fx-blip{opacity:.7}
}

/* --- About hero: same video treatment as the homepage, slightly tighter --- */
.hero--about{padding-bottom:70px}
.hero--about .hero__media{margin-bottom:34px}
.hero--about .hero__lead{max-width:660px}
.hero--about .hero__cta{margin:26px 0 22px}
.hero--about .crumb{margin-top:0}
@media(max-width:700px){
  .hero--about{padding:96px 0 52px}
  .hero--about .hero__media{margin-bottom:28px}
}

/* ==========================================================================
   OFF-SCREEN ANIMATION PAUSING
   Every infinite CSS animation holds a composited layer for as long as it
   runs, whether or not anyone can see it. With ~45 animated elements on the
   homepage that was enough GPU pressure to kill the renderer, which Chrome
   recovers by reloading the tab.

   JS adds .anim-paused to any animation container that scrolls out of view.
   Paused animations release their layers and cost nothing.
   ========================================================================== */
.anim-paused,
.anim-paused *{
  animation-play-state:paused!important;
}

/* ==========================================================================
   SERVICES HUB
   One full-width block per service: description on the left, what it includes
   on the right, alternating navy and yellow down the page.
   ========================================================================== */
.svc-block{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:start}
.svc-block__n{
  font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;color:var(--c-yellow);
  display:block;padding-bottom:14px;margin-bottom:16px;
  border-bottom:3px solid var(--c-yellow);width:fit-content;
}
.sec--yellow .svc-block__n{color:var(--c-navy);border-bottom-color:var(--c-navy)}
.svc-block h2{font-size:clamp(28px,3.8vw,46px);margin-bottom:16px}
.svc-block .lead{margin-bottom:28px}
.svc-block__subs{border-left:1px solid var(--c-line);padding-left:34px;padding-top:6px}
.sec--yellow .svc-block__subs{border-left-color:rgba(10,25,47,.22)}
.svc-block__list{margin-top:16px}
.svc-block__list li{border-bottom:1px solid var(--c-line)}
.sec--yellow .svc-block__list li{border-bottom-color:rgba(10,25,47,.18)}
.svc-block__list li:last-child{border-bottom:0}
.svc-block__list a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 0;font-family:var(--f-display);font-weight:600;font-size:16.5px;
  color:var(--c-heading);transition:color .25s,padding-left .3s var(--ease);
}
.svc-block__list a::after{content:"\2192";color:var(--c-yellow);transition:transform .3s var(--ease)}
.sec--yellow .svc-block__list a{color:var(--c-navy)}
.sec--yellow .svc-block__list a::after{color:var(--c-navy)}
.svc-block__list a:hover{color:var(--c-yellow);padding-left:10px}
.svc-block__list a:hover::after{transform:translateX(5px)}
.sec--yellow .svc-block__list a:hover{color:var(--c-navy);opacity:.72}
@media(max-width:900px){
  .svc-block{grid-template-columns:1fr;gap:34px}
  .svc-block__subs{border-left:0;padding-left:0;border-top:1px solid var(--c-line);padding-top:24px}
  .sec--yellow .svc-block__subs{border-top-color:rgba(10,25,47,.22)}
}
.drop__all{font-weight:600;color:var(--c-brand)!important;border-bottom:1px solid var(--c-line);margin-bottom:4px;padding-bottom:12px!important}

/* A background layer is as tall as its section. On very tall sections that is
   megabytes of GPU memory for a decorative grid, so cap the painted area and
   let the section colour carry the rest. */
[data-bg]::before{max-height:1600px}

/* --- Contact hero: same video treatment, tightened for the form below --- */
.hero--contact{padding-bottom:62px}
.hero--contact .hero__media{margin-bottom:34px}
.hero--contact .hero__lead{max-width:640px}
.hero--contact .hero__cta{margin:26px 0 22px}
.hero--contact .crumb{margin-top:0}
@media(max-width:700px){
  .hero--contact{padding:96px 0 46px}
  .hero--contact .hero__media{margin-bottom:26px}
}

/* ==========================================================================
   FAQ — yellow boxes
   Each question is a solid yellow card with navy type. Open items keep the
   yellow header and drop a navy answer panel beneath, so the two states read
   clearly apart.
   ========================================================================== */
.acc{display:flex;flex-direction:column;gap:14px}
.acc__item{
  border:0;border-radius:14px;overflow:hidden;
  background:var(--c-yellow);
  box-shadow:0 4px 10px rgba(0,0,0,.18), 0 18px 38px -24px rgba(250,204,21,.45);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.acc__item:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.22), 0 24px 46px -22px rgba(250,204,21,.6)}

.acc__btn{
  width:100%;background:none;border:0;cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:24px 24px 24px 28px!important;
  font-family:var(--f-display);font-weight:700;font-size:18px;text-align:left;
  color:var(--c-navy)!important;line-height:1.35;
}
.acc__btn::after{
  content:"+";position:static;transform:none;flex:none;
  width:38px;height:38px;border-radius:50%;
  background:var(--c-navy);color:var(--c-yellow)!important;
  display:grid;place-items:center;font-size:24px;font-weight:400;line-height:1;
  transition:transform .3s var(--ease);
}
.acc__item.open .acc__btn::after{transform:rotate(45deg)}

.acc__panel{max-height:0;overflow:hidden;transition:max-height .38s var(--ease);background:var(--c-navy)}
.acc__panel p{
  padding:22px 28px 26px!important;margin:0;
  color:#B9C6D8;font-size:15.5px;line-height:1.7;
}

/* inside a yellow section the boxes invert so they stay distinct */
.sec--yellow .acc__item{
  background:var(--c-navy);
  box-shadow:0 4px 10px rgba(0,0,0,.2), 0 18px 38px -24px rgba(10,25,47,.6);
}
.sec--yellow .acc__btn{color:var(--c-cream)!important}
.sec--yellow .acc__btn::after{background:var(--c-yellow);color:var(--c-navy)!important}
.sec--yellow .acc__panel{background:rgba(255,252,242,.06)}
.sec--yellow .acc__panel p{color:#C8D3E2}

@media(max-width:600px){
  .acc__btn{font-size:16px;padding:20px 18px 20px 20px!important;gap:14px}
  .acc__btn::after{width:32px;height:32px;font-size:21px}
  .acc__panel p{padding:18px 20px 22px!important;font-size:15px}
}

/* ==========================================================================
   HERO VIDEO — full bleed
   All three videos are now 1920x840 (2.29:1), a proper hero banner shape, so
   they span the full viewport width without running past the fold. No frame,
   no rounded corners, no letterboxing.
   ========================================================================== */
.hero__media{
  position:relative;
  width:100vw;
  max-width:none;
  margin-left:calc(50% - 50vw);       /* break out of the container */
  margin-right:calc(50% - 50vw);
  margin-bottom:40px;
  padding:0;
  overflow:hidden;
}
.hero__video{
  display:block;width:100%;height:auto;
  border:0;border-radius:0;box-shadow:none;
  background:var(--c-bg);
}
/* The nav is fixed and 94px tall, so the hero starts just below it with no
   extra gap. padding-top:0 pushed the video behind the nav. */
.hero--video{padding-top:94px}
.hero--video .wrap{padding-top:2px}

@media(max-width:700px){
  .hero__media{margin-bottom:32px}
}

/* ==========================================================================
   GROWTH LINE
   Replaces the jellyfish inside the dashed ring. Bars rise in sequence, the
   trend line draws itself upward and the arrow head lands at the peak, then
   the cycle repeats so it keeps climbing. Uses the existing palette and the
   same transform-only approach as the other decorative graphics.
   ========================================================================== */
.grow{
  position:absolute;top:50%;left:50%;width:56%;height:auto;
  transform:translate(-50%,-50%);
  color:var(--c-yellow);
  stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
}
.sec--yellow .grow{color:var(--c-navy)}
.grow__axis{fill:none;opacity:.45;stroke-width:1.6}
.grow__grid path{fill:none;stroke-width:1.1;stroke-dasharray:2 5;opacity:.22}
.grow__bar{
  fill:currentColor;stroke:none;opacity:.42;
  transform-box:fill-box;transform-origin:bottom;
  animation:grow-bar 4.4s cubic-bezier(.3,.8,.35,1) infinite;
}
.grow__bar.g2{animation-delay:.16s}
.grow__bar.g3{animation-delay:.32s}
.grow__bar.g4{animation-delay:.48s}
@keyframes grow-bar{
  0%      {transform:scaleY(0);opacity:0}
  18%,72% {transform:scaleY(1);opacity:.42}
  92%,100%{transform:scaleY(1);opacity:0}
}
.grow__line{
  fill:none;stroke-width:2.6;stroke-dasharray:96;stroke-dashoffset:96;
  animation:grow-draw 4.4s cubic-bezier(.3,.8,.35,1) infinite;
}
@keyframes grow-draw{
  0%      {stroke-dashoffset:96}
  55%,78% {stroke-dashoffset:0;opacity:1}
  95%,100%{stroke-dashoffset:0;opacity:0}
}
.grow__head{fill:none;stroke-width:2.6;animation:grow-tip 4.4s ease-out infinite}
@keyframes grow-tip{
  0%,48%  {opacity:0}
  60%,78% {opacity:1}
  95%,100%{opacity:0}
}
.grow__peak{
  fill:currentColor;stroke:none;transform-box:fill-box;transform-origin:center;
  animation:grow-peak 4.4s ease-out infinite;
}
@keyframes grow-peak{
  0%,48%  {opacity:0;transform:scale(.3)}
  62%     {opacity:1;transform:scale(1.35)}
  70%,78% {opacity:1;transform:scale(1)}
  95%,100%{opacity:0;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .grow__bar,.grow__line,.grow__head,.grow__peak{animation:none;opacity:1}
  .grow__line{stroke-dashoffset:0}
  .grow__bar{opacity:.42}
}
@media(max-width:700px){.grow{width:52%}}

/* ==========================================================================
   CURSOR — hot state
   #cursor.hot set the dot to width:0, so on every button and link the dot
   disappeared entirely and only a faint ring was left. That is why the cursor
   looked invisible on buttons regardless of which colour the script chose.
   The dot now stays visible, and the ring fills more strongly so both states
   read clearly on any surface.
   ========================================================================== */
#cursor.hot{width:10px;height:10px;margin:-5px 0 0 -5px}
#cursor-ring.hot{
  border-width:2px;
  border-color:var(--c-yellow);
  background:rgba(250,204,21,.28);
}
#cursor-ring.hot.on-light{
  border-color:var(--c-navy);
  background:rgba(10,25,47,.24);
}
/* keep the dot's own colour authoritative in every state */
#cursor{background:var(--c-yellow)}
#cursor.on-light{background:var(--c-navy)}

/* ==========================================================================
   SERVICES FULL-VIEWPORT HERO
   Scoped entirely to .hero--svc. Nothing in this block touches .hero--video,
   .hero--about or .hero--contact on their own, so index, about and contact
   render exactly as before. Appended at the end of the file so it wins on
   cascade order without editing any rule above it.

   The video is 16:9. object-fit:cover crops the sides on anything narrower,
   so the artwork is composed inside a 150..1770 safe zone, which holds down
   to a 1.5:1 viewport. Below 1:1 cover would crop to roughly a quarter of
   the frame, so portrait drops to the natural aspect instead and the section
   fills the screen with the copy underneath rather than by cropping.
   ========================================================================== */
/* The nav is fixed and opaque cream, so a video pinned to the top of the
   viewport loses its first 95px behind it. The hero keeps the same 94px
   offset the other video heroes use and the media takes the rest, which
   makes "full screen" mean the full visible area rather than the full
   document. --svc-nav tracks the measured nav height per breakpoint. */
.hero--svc{--svc-nav:95px;padding-top:var(--svc-nav)}
.hero--svc .hero__media{
  margin-bottom:0;
  /* Full viewport height whenever the window can afford it. The floor at
     100vw/2.56 stops a short window from cropping past the safe band the
     artwork is composed for; below that the hero simply runs a little past
     the fold rather than eating the kicker and the wordmark. */
  height:calc(100vh - var(--svc-nav));
  height:max(calc(100svh - var(--svc-nav)), calc(100vw / 2.56));
  min-height:440px;
}
.hero--svc .hero__video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.hero--svc .wrap{padding-top:56px}
.hero--svc .hero__lead{max-width:720px}

/* portrait: no crop, natural aspect, section still fills the viewport */
@media(max-aspect-ratio:1/1){
  .hero--svc{
    --svc-nav:87px;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .hero--svc .hero__media{height:auto;min-height:0;margin-bottom:34px}
  .hero--svc .hero__video{height:auto;object-fit:fill}
  .hero--svc .wrap{padding-top:0}
}

@media(max-width:700px){
  .hero--svc{--svc-nav:81px}
}

/* ==========================================================================
   FULL-HEIGHT DOT MATRIX
   [data-bg]::before is capped at 1600px because its first layer is a
   100% 100% vignette, and on a 6300px section that single gradient is a
   ~36MB texture. The cap is the right call and stays in place globally.

   The service-list sections are ~6300px tall, so the cap left five sixths of
   them undotted. This restores the pattern for the whole section without
   re-introducing the buffer: the vignette is replaced with a horizontal-only
   fade that is constant down the page, so it tiles at 100% x 40px instead of
   allocating a full-size layer. The dot tile already repeats. Both layers are
   now bounded regardless of how tall the section grows.

   Opt-in per section via .sec--dots-full. Nothing without that class changes.
   ========================================================================== */
.sec--dots-full[data-bg="dots"]::before{
  max-height:none;
  background-image:
    linear-gradient(to right,
      var(--c-bg) 0%, rgba(10,25,47,0) 8%,
      rgba(10,25,47,0) 92%, var(--c-bg) 100%),
    var(--pattern);
  background-size:100% 40px, 26px 26px;
  background-repeat:repeat, repeat;
  background-position:top left, center top;
}

/* ==========================================================================
   COUNTER STABILITY
   Proportional digits are not the same width in Sora, so a running counter
   re-centres itself on almost every frame. Tabular figures make every digit
   occupy the same advance width, which removes that shimmer. Paired with the
   box reservation in theme.js (see the counters module), a counter now holds
   completely still while it runs.
   Appended, and it changes no colour, font family or animation.
   ========================================================================== */
.count{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ==========================================================================
   HORIZONTAL OVERFLOW AT THE ROOT

   body{overflow-x:clip} above stops the body box from painting wide, but the
   root element keeps its own scrollWidth, so the page could still be swiped
   sideways on a phone until the reveal animations had run.

   The source is the reveal transform itself: [data-anim="right"] starts at
   translate3d(56px,0,0), which extends the scrollable area by up to 56px on
   pages that use it (home, about, contact). Once revealed the transform is
   removed and the overflow disappears, which is why it only showed on load.

   clip rather than hidden, for the reason given in the note above: hidden
   creates a scroll container and silently breaks position:sticky for every
   descendant, which the pinned row, the scrollspy nav and the stacking cards
   all rely on. clip stops the overflow without creating that container.
   ========================================================================== */
@supports (overflow-x: clip){
  html{overflow-x:clip}
}

/* ==========================================================================
   TOUCH TARGET SIZING

   Scoped to coarse pointers only, so the desktop layout is untouched. Apple
   asks for 44x44 and Google for 48x48; the footer link lists were rendering
   at 16px tall, the social buttons at 34px and the burger at 23px wide, all
   of which are hard to hit accurately on a phone.

   The links keep their type size and colour. Only the hit area grows, using
   padding on an inline-block rather than a larger font, so nothing about the
   type scale or the palette changes.
   ========================================================================== */
@media(pointer:coarse){
  .foot li{margin-bottom:2px}
  .foot li a{display:inline-block;padding:14px 0;line-height:1.15;min-height:44px}
  .foot__btm{gap:4px 18px}
  .foot__btm a{display:inline-block;padding:12px 6px;min-width:44px;text-align:center}
  /* breadcrumbs are secondary navigation but still need a real hit area */
  .crumb a{display:inline-block;padding:11px 2px}
  .crumb{line-height:1.1}
  .socials{gap:12px}
  .socials a{width:46px;height:46px;font-size:13px}
  .burger{min-width:46px;min-height:46px;display:grid;place-items:center}
  .brand{min-height:46px;min-width:46px;display:inline-flex;align-items:center;justify-content:center}
  /* form labels sit directly above their input; a taller hit area makes the
     label itself a reliable way to focus the field */
  .field label,.field-row label{display:inline-block;padding:6px 0}
}

/* ==========================================================================
   iOS ZOOM ON FOCUS

   Safari on iOS zooms the whole page in whenever a focused form control has a
   font-size below 16px, and it does not zoom back out afterwards. The contact
   form was at 15px, so tapping the first field left the visitor pinching to
   read the rest of the page. 16px is the threshold, not a preference.

   Coarse pointers only, so the desktop form is unchanged.
   ========================================================================== */
@media(pointer:coarse){
  input,select,textarea,.field input,.field textarea,.field select{font-size:16px}
  /* the footer newsletter field sets its own size later in the cascade and
     needs the same treatment, or it zooms on focus too */
  .foot input{font-size:16px!important}
}