/* ============================================================
   TRIPLE A, shared stylesheet
   Palette is locked to the approved navy/teal/mint set below
   (updated 2026-09-18 from the earlier all-blue palette). Do not
   add new hues without updating this token set.
   ============================================================ */
:root{
  /* Brand */
  --blue-primary:#0E9488;   /* CTAs, buttons, interactive */
  --blue-light:#2DD4BF;     /* accents, secondary highlights */
  --blue-dark:#0B1628;      /* headings, authority elements */
  --blue-deep:#070E1A;      /* darkest tint, footer/hero base */
  --blue-tint:#99F0DF;      /* tint of --blue-light, small text on dark (AA) */

  /* Neutrals */
  --ink:#0B1628;
  --body:#41546B;
  --muted:#5F7089;          /* 4.7:1 on --surface, 5.0:1 on white */
  --line:#E2E9F1;
  --surface:#F5F8FC;
  --surface-2:#EDF3FA;
  --white:#FFFFFF;

  /* Type */
  --font-head:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Spacing scale (4/8 rhythm) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* Radius + elevation */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(11,22,40,.06), 0 2px 8px rgba(11,22,40,.05);
  --shadow-md:0 4px 12px rgba(11,22,40,.08), 0 12px 32px rgba(11,22,40,.07);
  --shadow-lg:0 8px 24px rgba(11,22,40,.10), 0 24px 64px rgba(11,22,40,.10);

  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:180ms; --dur-mid:260ms;

  --container:1160px;
  --z-nav:100; --z-menu:200;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* `clip` contains overflow WITHOUT creating a scroll container, so the
     sticky nav keeps working. `hidden` on body alone is the classic cause
     of position:sticky silently failing. */
  overflow-x:clip;
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;   /* fallback for Safari < 16 */
  overflow-x:clip;     /* preferred: does not break sticky positioning */
}
img,svg{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--blue-dark);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0;
  font-weight:700;
}
h1{font-size:clamp(2.5rem,6vw,4.4rem);letter-spacing:-.03em}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:1.32rem;font-weight:600;letter-spacing:-.01em}
p{margin:0}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s-5)}
@media(min-width:768px){.container{padding-inline:var(--s-7)}}

section{padding-block:var(--s-8)}
@media(min-width:768px){section{padding-block:var(--s-9)}}

/* Accessibility -------------------------------------------------- */
.skip-link{
  position:absolute;left:var(--s-4);top:-100px;z-index:1000;
  background:var(--blue-dark);color:#fff;padding:12px 20px;
  border-radius:var(--r-sm);font-weight:600;text-decoration:none;
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{top:var(--s-4)}
:focus-visible{outline:3px solid var(--blue-light);outline-offset:3px;border-radius:4px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   Navigation, brand left, menu bar top right
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:var(--z-nav);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out);
}
.nav[data-scrolled="true"]{border-bottom-color:var(--line);box-shadow:0 1px 20px rgba(11,22,40,.05)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:72px}
@media(min-width:960px){.nav__inner{gap:var(--s-4)}}

/* Right-hand cluster: links + CTA together, pushed right */
.nav__right{display:flex;align-items:center;gap:var(--s-1)}
@media(min-width:960px){.nav__right{gap:var(--s-6)}}

/* Wordmark */
.brand{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  min-height:44px;flex:none;   /* the mark alone is 32px, short of the tap minimum */
}
@media(min-width:960px){.brand{gap:10px}}
.brand__mark{flex:none;width:32px;height:32px}
.brand__text{
  font-family:var(--font-head);font-weight:700;font-size:1.06rem;
  letter-spacing:.08em;color:var(--blue-dark);white-space:nowrap;
}
@media(min-width:960px){.brand__text{letter-spacing:.14em}}

.nav__links{display:none;align-items:center;gap:var(--s-6);list-style:none;margin:0;padding:0}
@media(min-width:960px){.nav__links{display:flex}}
.nav__links a{
  position:relative;text-decoration:none;color:var(--body);
  font-size:.95rem;font-weight:500;padding-block:6px;
  transition:color var(--dur-fast) var(--ease-out);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--blue-primary);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-mid) var(--ease-out);
}
.nav__links a:hover{color:var(--blue-dark)}
.nav__links a:hover::after{transform:scaleX(1)}
/* Current page */
.nav__links a[aria-current="page"]{color:var(--blue-primary);font-weight:600}
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}

.nav__right .nav__cta{
  display:inline-flex;flex:none;white-space:nowrap;
  padding:6px 8px;min-height:34px;font-size:.66rem;border-radius:var(--r-sm);
}
@media(min-width:960px){
  .nav__right .nav__cta{padding:14px 28px;min-height:52px;font-size:1rem;border-radius:var(--r-full)}
}

/* Services dropdown, opens on hover and on keyboard focus */
.nav__dd{position:relative}
.nav__dd > a{display:inline-flex;align-items:center;gap:5px}
.nav__dd-caret{flex:none;transition:transform var(--dur-fast) var(--ease-out)}
.nav__dd:hover .nav__dd-caret,
.nav__dd:focus-within .nav__dd-caret{transform:rotate(180deg)}
/* invisible bridge so the pointer can cross the gap without closing it */
.nav__dd::after{
  content:"";position:absolute;left:-10px;right:-10px;top:100%;height:16px;
  display:none;
}
.nav__dd:hover::after{display:block}
.nav__dd-menu{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:264px;padding:8px;z-index:120;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             visibility var(--dur-fast);
}
.nav__dd:hover .nav__dd-menu,
.nav__dd:focus-within .nav__dd-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
/* reset the top-level link styling these inherit from .nav__links a */
.nav__dd-menu a{
  display:block;padding:9px 12px;border-radius:8px;
  font-size:.92rem;font-weight:500;color:var(--body);
}
.nav__dd-menu a::after{display:none}
.nav__dd-menu a:hover{background:var(--surface);color:var(--blue-primary)}
.nav__dd-menu a:first-child{
  font-weight:600;color:var(--blue-dark);
  border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;
  margin-bottom:4px;padding-bottom:11px;
}

/* Mobile menu button */
.menu-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;margin-right:-8px;
  background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--blue-dark);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.menu-btn:hover{background:var(--surface);border-color:var(--blue-light)}
@media(min-width:960px){.menu-btn{display:none}}
.menu-btn__bar{
  display:block;width:20px;height:2px;background:currentColor;border-radius:2px;
  transition:transform var(--dur-mid) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
}
.menu-btn__bars{display:flex;flex-direction:column;gap:5px}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile menu panel */
.mobile-menu{
  position:fixed;inset:72px 0 0;z-index:var(--z-menu);
  background:var(--white);
  padding:var(--s-6) var(--s-5) var(--s-8);
  display:flex;flex-direction:column;gap:var(--s-2);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out),visibility var(--dur-mid);
  overflow-y:auto;
}
.mobile-menu[data-open="true"]{opacity:1;visibility:visible;transform:none}
@media(min-width:960px){.mobile-menu{display:none}}
.mobile-menu a{
  text-decoration:none;color:var(--blue-dark);font-family:var(--font-head);
  font-size:1.3rem;font-weight:600;padding:var(--s-4) 0;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  min-height:56px;
}
.mobile-menu a[aria-current="page"]{color:var(--blue-primary)}
.mobile-menu .btn{margin-top:var(--s-5);justify-content:center;font-size:1rem;border-bottom:0}
body[data-menu-open="true"]{overflow:hidden}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 28px;
  font-family:var(--font-body);font-size:1rem;font-weight:600;
  text-decoration:none;border:1px solid transparent;border-radius:var(--r-full);
  cursor:pointer;touch-action:manipulation;
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn svg{flex:none;transition:transform var(--dur-mid) var(--ease-out)}
.btn--primary{
  background:var(--blue-primary);color:#fff;
  box-shadow:0 2px 8px rgba(14,148,136,.24), 0 8px 24px rgba(14,148,136,.18);
}
.btn--primary:hover{background:var(--blue-dark);box-shadow:0 4px 14px rgba(11,22,40,.3), 0 14px 36px rgba(11,22,40,.22)}
.btn--primary:hover svg{transform:translateX(3px)}
.btn--primary:active{transform:scale(.98)}
.btn--ghost{background:transparent;color:var(--blue-dark);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--blue-light);background:var(--surface);color:var(--blue-primary)}
.btn--ghost:hover svg{transform:translateX(3px)}
.btn--ghost:active{transform:scale(.98)}
.btn--onDark{background:#fff;color:var(--blue-dark)}
.btn--onDark:hover{background:var(--surface-2);color:var(--blue-primary)}
.btn--onDark:hover svg{transform:translateX(3px)}
.btn--onDark:active{transform:scale(.98)}
.btn--outlineLight{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--outlineLight:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ============================================================
   Shared bits
   ============================================================ */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue-primary);margin-bottom:var(--s-4);
}
.eyebrow--light{color:var(--blue-tint)}

.section-head{max-width:660px;margin-bottom:var(--s-7)}
.section-head p{margin-top:var(--s-4);font-size:1.06rem;color:var(--body)}
.section-head--center{margin-inline:auto;text-align:center}

.lead{font-size:clamp(1.05rem,2vw,1.22rem);line-height:1.6;color:var(--body)}
.surface{background:var(--surface)}

/* ============================================================
   Home hero
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 78% -10%, rgba(45,212,191,.28), transparent 60%),
    linear-gradient(160deg, #0B1628 0%, #0A1426 45%, #070E1A 100%);
  color:#fff;
  padding-block:var(--s-8) var(--s-9);
}
@media(min-width:768px){.hero{padding-block:var(--s-9) calc(var(--s-9) + var(--s-6))}}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(1000px 600px at 30% 20%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(1000px 600px at 30% 20%, #000 20%, transparent 78%);
}
/* Hero scroll stage ------------------------------------------
   Fail-open: without `html.js-heroscroll` this is just a normal hero,
   so a script failure can never leave a tall blank gap or a hero
   stuck at a 25% clip. */
.hero-scroll{position:relative}

.js-heroscroll .hero-scroll{height:calc(100vh + var(--hero-run,760px))}
.js-heroscroll .hero{
  position:sticky;top:0;
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;
  padding-block:var(--s-8);
}
/* The clipped video panel. Outside the clip you see the hero's own navy,
   so the panel reads as a window opening up to full bleed. */
.js-heroscroll .hero__bg{
  clip-path:polygon(
    var(--hero-cs,25%) var(--hero-cs,25%),
    var(--hero-ce,75%) var(--hero-cs,25%),
    var(--hero-ce,75%) var(--hero-ce,75%),
    var(--hero-cs,25%) var(--hero-ce,75%)
  );
  border-radius:2px;
}
/* Mobile: the hero content is taller than a phone viewport, so a sticky
   100dvh stage can never hold, the effect half-plays and the scene ends
   up below the fold. Phones get a normal, correctly-sized hero with the
   video still full-bleed. The cinematic reveal is a desktop affordance. */
@media(max-width:979px){   /* matches where .hero__inner drops to one column */
  .js-heroscroll .hero-scroll{height:auto}
  .js-heroscroll .hero{
    position:relative;
    min-height:0;
    padding-block:var(--s-7) var(--s-8);
  }
  .js-heroscroll .hero__bg{clip-path:none}
}
@media (prefers-reduced-motion:reduce){
  .js-heroscroll .hero-scroll{height:auto}
  .js-heroscroll .hero{position:relative;min-height:0}
  .js-heroscroll .hero__bg{clip-path:none}
}

/* Hero background video ------------------------------------- */
.hero{background:linear-gradient(160deg,#0B1628 0%,#0A1426 45%,#070E1A 100%)}
.hero__bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
  background:linear-gradient(160deg,#0B1628 0%,#0A1426 45%,#070E1A 100%);
}
/* Scrim: heavy on the left where the headline sits, light on the right so
   the footage is actually visible. Measured against the real frames. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(7,14,26,.88) 0%,
      rgba(7,14,26,.74) 34%,
      rgba(10,20,38,.42) 62%,
      rgba(10,20,38,.24) 100%),
    radial-gradient(900px 560px at 80% -10%, rgba(45,212,191,.24), transparent 62%);
}
/* Single column on mobile: text crosses the full width, so cover evenly. */
@media(max-width:979px){
  .hero__scrim{
    background:
      linear-gradient(180deg,rgba(7,14,26,.84) 0%,rgba(7,14,26,.7) 45%,rgba(7,14,26,.86) 100%),
      radial-gradient(700px 420px at 70% 0%, rgba(45,212,191,.22), transparent 60%);
  }
}

.hero__inner{position:relative;z-index:1;display:grid;gap:var(--s-8);align-items:center}
@media(min-width:980px){.hero__inner{grid-template-columns:1.05fr .95fr;gap:var(--s-8)}}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--blue-tint)}
.hero__sub{
  margin-top:var(--s-5);max-width:52ch;
  font-size:clamp(1.05rem,2vw,1.24rem);line-height:1.6;
  color:rgba(255,255,255,.82);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-7)}
.hero__actions .btn{flex:1 1 auto;min-width:210px}
@media(min-width:560px){.hero__actions .btn{flex:0 0 auto}}
/* Tighter vertical rhythm on phones so the CTA stays near the fold */
@media(max-width:560px){
  .hero__inner{gap:var(--s-7)}
  .hero__sub{margin-top:var(--s-4)}
  .hero__actions{margin-top:var(--s-6);gap:var(--s-2)}
  .hero__actions .btn{width:100%;min-width:0}
  .hero__note{margin-top:var(--s-4);align-items:flex-start}
  .hero__note svg{margin-top:3px}
}
.hero__note{
  display:flex;align-items:center;gap:10px;margin-top:var(--s-5);
  font-size:.9rem;color:rgba(255,255,255,.8);
}
.hero__note svg{flex:none;color:var(--blue-tint)}
.hero__tagline{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 16px 7px 10px;border-radius:var(--r-full);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  font-size:.85rem;font-weight:500;color:rgba(255,255,255,.9);
  margin-bottom:var(--s-5);
}
.hero__tagline .dot{
  width:7px;height:7px;border-radius:50%;background:var(--blue-light);
  box-shadow:0 0 0 4px rgba(45,212,191,.28);
  animation:pulse 2.6s var(--ease-out) infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(45,212,191,.3)}
  50%{box-shadow:0 0 0 8px rgba(45,212,191,0)}
}

/* ============================================================
   Hero visual, real 3D scene (CSS 3D transforms, no library)
   Messy manual inputs on the back plane flow into an automation
   core, and resolve into one outcome card lifted toward the viewer.
   ============================================================ */
.hero__visual{position:relative;display:flex;justify-content:center}

.scene{
  --rx:14deg;          /* tilt, updated by pointer parallax in script.js */
  --ry:-24deg;
  --depth:1;           /* scaled down on small screens */
  position:relative;
  width:100%;max-width:500px;
  aspect-ratio:1/.92;
  perspective:1150px;
  perspective-origin:52% 46%;
}
.scene__world{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform 420ms var(--ease-out);
}

/* Shared panel surface */
.pane{
  position:absolute;
  transform-style:preserve-3d;
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 18px 40px rgba(3,22,44,.42);
  padding:13px 15px;
  display:flex;align-items:center;gap:11px;
}
.pane__icon{
  flex:none;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;
  background:rgba(45,212,191,.3);color:#B8F5E9;
}
.pane__lines{display:grid;gap:6px;flex:1;min-width:0}
.pane__lines i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.5)}
.pane__lines i:last-child{width:58%;background:rgba(255,255,255,.24)}

/* Three inputs, receding into the back plane */
.pane--in{width:57%;left:0}
.pane--in1{top:6%;  transform:translateZ(calc(10px * var(--depth)))}
.pane--in2{top:32%; transform:translateZ(calc(46px * var(--depth)))}
.pane--in3{top:58%; transform:translateZ(calc(82px * var(--depth)))}

/* Automation core, an orb sitting above the floor */
.core{
  position:absolute;left:46%;top:40%;
  width:23%;aspect-ratio:1;
  transform-style:preserve-3d;
  transform:translateZ(calc(120px * var(--depth)));
}
.core__orb{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, #D8FFF7 0%, #2DD4BF 38%, #0E9488 70%, #0B1628 100%);
  box-shadow:
    0 0 0 1px rgba(153,240,223,.4),
    0 0 44px 10px rgba(45,212,191,.42),
    0 26px 50px rgba(3,22,44,.5);
  display:grid;place-items:center;
  color:#fff;
}
.core__ring{
  position:absolute;inset:-24%;border-radius:50%;
  border:1px dashed rgba(153,240,223,.4);
  transform:rotateX(76deg);
  animation:spin 14s linear infinite;
}
@keyframes spin{to{transform:rotateX(76deg) rotateZ(360deg)}}

/* Outcome card, lifted furthest toward the viewer */
.pane--out{
  right:0;top:20%;width:44%;
  flex-direction:column;align-items:flex-start;gap:2px;
  padding:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.07));
  border-color:rgba(255,255,255,.3);
  transform:translateZ(calc(178px * var(--depth)));
  box-shadow:0 30px 60px rgba(3,22,44,.5);
}
.pane--out b{
  font-family:var(--font-head);font-size:2.5rem;font-weight:700;
  line-height:1.05;color:#fff;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.pane--out span{font-size:.84rem;color:var(--blue-tint);line-height:1.35}

/* Light beams from inputs into the core */
.beam{
  position:absolute;height:2px;left:52%;
  background:linear-gradient(90deg,rgba(45,212,191,0),rgba(153,240,223,.85));
  transform-origin:left center;
  border-radius:2px;
}
.beam::after{
  content:"";position:absolute;top:-2.5px;left:0;
  width:7px;height:7px;border-radius:50%;
  background:#B8F5E9;box-shadow:0 0 10px 3px rgba(153,240,223,.75);
  animation:beamRun 3.2s var(--ease-out) infinite;
}
.beam--1{top:16%;width:22%;transform:translateZ(calc(60px * var(--depth))) rotate(19deg)}
.beam--2{top:47%;width:20%;transform:translateZ(calc(84px * var(--depth)))}
.beam--3{top:70%;width:22%;transform:translateZ(calc(104px * var(--depth))) rotate(-21deg)}
.beam--2::after{animation-delay:1s}
.beam--3::after{animation-delay:2s}
.beam--out{
  top:36%;left:66%;width:16%;
  transform:translateZ(calc(150px * var(--depth)));
  background:linear-gradient(90deg,rgba(153,240,223,.85),rgba(45,212,191,0));
}
.beam--out::after{animation-delay:.5s}
@keyframes beamRun{
  0%{opacity:0;transform:translateX(0)}
  15%{opacity:1}
  85%{opacity:1}
  100%{opacity:0;transform:translateX(90px)}
}

/* Floor plane for depth */
.floor{
  position:absolute;left:-14%;right:-14%;top:74%;height:62%;
  transform:rotateX(74deg) translateZ(calc(-30px * var(--depth)));
  transform-origin:top center;
  background-image:
    linear-gradient(rgba(153,240,223,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(153,240,223,.16) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(closest-side,#000,transparent 82%);
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent 82%);
  pointer-events:none;
}

/* Gentle idle drift so the scene feels alive before any interaction */
.scene__world{animation:drift 11s ease-in-out infinite}
@keyframes drift{
  0%,100%{transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(0)}
  50%{transform:rotateX(calc(var(--rx) - 2deg)) rotateY(calc(var(--ry) + 3deg)) translateY(-9px)}
}
/* Pointer parallax takes over from the idle drift while in use */
.scene[data-active="true"] .scene__world{animation:none}

/* Flatten the depth on small screens so nothing overlaps the text */
@media(max-width:980px){
  .scene{--depth:.6;--rx:10deg;--ry:-16deg;max-width:400px}
  .pane--out b{font-size:2.1rem}
}
@media(max-width:520px){
  /* Smaller and shallower so the hero stays close to one screen */
  .scene{--depth:.42;--rx:8deg;--ry:-12deg;max-width:320px;aspect-ratio:1/.82}
  .pane{padding:9px 11px;border-radius:12px}
  .pane__icon{width:26px;height:26px;border-radius:8px}
  .pane--out{padding:14px}
  .pane--out b{font-size:1.65rem}
  .pane--out span{font-size:.78rem}
}

@media (prefers-reduced-motion:reduce){
  .scene__world,.core__ring,.beam::after{animation:none !important}
  .scene__world{transition:none}
}

/* ============================================================
   Interior page header
   ============================================================ */
.page-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(820px 460px at 82% -20%, rgba(45,212,191,.26), transparent 62%),
    linear-gradient(155deg,#0B1628,#070E1A);
  color:#fff;
  padding-block:var(--s-8);
}
@media(min-width:768px){.page-hero{padding-block:var(--s-9)}}
.page-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(760px 420px at 25% 30%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(760px 420px at 25% 30%,#000,transparent 76%);
}
.page-hero__inner{position:relative;z-index:1;max-width:720px}
.page-hero h1{color:#fff;font-size:clamp(2.25rem,5vw,3.5rem)}
.page-hero p{
  margin-top:var(--s-5);font-size:clamp(1.02rem,2vw,1.18rem);
  line-height:1.6;color:rgba(255,255,255,.82);max-width:56ch;
}

/* Breadcrumb */
.crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.86rem;color:rgba(255,255,255,.66);margin-bottom:var(--s-4);
}
.crumb a{text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb svg{opacity:.5;flex:none}
.crumb [aria-current]{color:var(--blue-tint)}
/* ============================================================
   Testimonial / trust
   ============================================================ */
.trust{background:var(--surface);border-block:1px solid var(--line)}
.quote{max-width:820px;margin-inline:auto;text-align:center}
.quote__mark{width:40px;height:40px;margin-inline:auto;margin-bottom:var(--s-5);color:var(--blue-light);opacity:.55}
.quote__text{
  font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.3rem,3.1vw,1.85rem);line-height:1.42;
  letter-spacing:-.015em;color:var(--blue-dark);
}
.quote__author{display:flex;align-items:center;justify-content:center;gap:var(--s-3);margin-top:var(--s-6)}
.quote__avatar{
  width:46px;height:46px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--blue-light),var(--blue-primary));
  display:grid;place-items:center;
  color:#fff;font-family:var(--font-head);font-weight:700;font-size:1rem;
}
.quote__meta{text-align:left;line-height:1.4}
.quote__name{font-weight:600;color:var(--ink);font-size:.98rem}
.quote__role{font-size:.88rem;color:var(--muted)}

/* ============================================================
   Problem cards
   ============================================================ */
.problems{display:grid;gap:var(--s-4)}
@media(min-width:760px){.problems{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}}
.problem{
  padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--white);
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out),border-color var(--dur-mid) var(--ease-out);
}
.problem:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#D4E2F2}
.problem__icon{
  width:46px;height:46px;border-radius:var(--r-md);
  display:grid;place-items:center;margin-bottom:var(--s-5);
  background:var(--surface-2);color:var(--blue-primary);
}
.problem h3{margin-bottom:var(--s-3)}
.problem p{font-size:.98rem}

/* Cost-of-doing-nothing list */
.cost{display:grid;gap:var(--s-4);max-width:760px}
.cost li{
  display:flex;gap:var(--s-4);align-items:flex-start;
  padding:var(--s-5);border-radius:var(--r-md);background:var(--white);
  border:1px solid var(--line);
}
.cost svg{flex:none;color:var(--blue-primary);margin-top:3px}
.cost strong{display:block;color:var(--blue-dark);font-family:var(--font-head);margin-bottom:4px}
.cost p{font-size:.97rem}
ul.cost{list-style:none;margin:0;padding:0}

/* ============================================================
   Services, 6 cards, 3 across on desktop
   ============================================================ */
.services{display:grid;gap:var(--s-4)}
@media(min-width:700px){.services{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}}
@media(min-width:1040px){.services{grid-template-columns:repeat(3,1fr)}}

.service{
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-6);
  display:flex;flex-direction:column;
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out),border-color var(--dur-mid) var(--ease-out);
}
.service::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--blue-primary),var(--blue-light));
  transform:scaleX(0);transform-origin:left;
  transition:transform 420ms var(--ease-out);
}
.service:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#D4E2F2}
.service:hover::before{transform:scaleX(1)}
.service__icon{
  width:48px;height:48px;border-radius:var(--r-md);
  display:grid;place-items:center;margin-bottom:var(--s-5);
  background:linear-gradient(140deg,rgba(45,212,191,.16),rgba(14,148,136,.1));
  color:var(--blue-primary);
}
.service h3{margin-bottom:var(--s-3)}
.service p{font-size:.97rem}
.service__eg{
  margin-top:auto;padding-top:var(--s-4);
  border-top:1px dashed var(--line);
  font-size:.9rem;color:var(--muted);line-height:1.55;
}
.service__eg-sp{margin-top:var(--s-5)}
.service__eg strong{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-primary);margin-bottom:6px;
}
/* Price tag, hidden pending Marc's approval. See HANDOFF.md */
.price-tag{
  display:none; /* ← change to inline-flex to publish pricing */
  align-items:center;gap:6px;margin-top:var(--s-4);
  align-self:flex-start;padding:5px 13px;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--blue-dark);
  font-size:.85rem;font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   How it works
   ============================================================ */
.steps{position:relative;display:grid;gap:var(--s-6);}
@media(min-width:860px){
  .steps{grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
  .steps::before{
    content:"";position:absolute;top:23px;left:11%;right:11%;height:2px;
    background:linear-gradient(90deg,var(--blue-light),var(--line));
    opacity:.5;
  }
}
.step{position:relative;padding-left:66px}
@media(min-width:860px){.step{padding-left:0}}
.step__num{
  position:absolute;left:0;top:0;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--white);border:2px solid var(--blue-primary);
  color:var(--blue-primary);font-family:var(--font-head);font-weight:700;font-size:1.05rem;
  box-shadow:0 0 0 6px var(--white);
}
@media(min-width:860px){.step__num{position:static;margin-bottom:var(--s-5)}}
.step h3{margin-bottom:var(--s-3)}
.step p{font-size:.97rem}
.step__meta{
  display:inline-block;margin-top:var(--s-3);font-size:.82rem;font-weight:600;
  color:var(--blue-primary);letter-spacing:.04em;
}

/* Detail rows (how it works long form) */
.detail{display:grid;gap:var(--s-5);align-items:start;padding-block:var(--s-6)}
@media(min-width:820px){.detail{grid-template-columns:200px 1fr;gap:var(--s-8)}}
.detail + .detail{border-top:1px solid var(--line)}
.detail__label{
  font-family:var(--font-head);font-weight:700;color:var(--blue-dark);
  font-size:1.05rem;
}
.detail__label span{
  display:block;font-family:var(--font-body);font-size:.8rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue-primary);margin-bottom:6px;
}
.detail p + p{margin-top:var(--s-4)}
.detail ul{margin:var(--s-4) 0 0;padding-left:var(--s-5);display:grid;gap:var(--s-2)}
.detail li{font-size:.97rem}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;gap:var(--s-3);max-width:820px}
.faq details{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.faq details[open]{border-color:#D4E2F2}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s-5);
  font-family:var(--font-head);font-weight:600;color:var(--blue-dark);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  min-height:56px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:10px;height:10px;
  border-right:2px solid var(--blue-primary);border-bottom:2px solid var(--blue-primary);
  transform:rotate(45deg);transform-origin:center;
  transition:transform var(--dur-mid) var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .faq__body{padding:0 var(--s-5) var(--s-5);font-size:.98rem}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid{display:grid;gap:var(--s-5)}
@media(min-width:820px){.contact-grid{grid-template-columns:repeat(2,1fr);gap:var(--s-6)}}
.contact-card{
  padding:var(--s-7);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--white);display:flex;flex-direction:column;
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out),border-color var(--dur-mid) var(--ease-out);
}
.contact-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#D4E2F2}
.contact-card__icon{
  width:52px;height:52px;border-radius:var(--r-md);
  display:grid;place-items:center;margin-bottom:var(--s-5);
  background:linear-gradient(140deg,rgba(45,212,191,.16),rgba(14,148,136,.1));
  color:var(--blue-primary);
}
.contact-card h3{margin-bottom:var(--s-3);font-size:1.3rem}
.contact-card p{font-size:.98rem}
.contact-card .btn{margin-top:var(--s-6);align-self:flex-start}
.contact-card__note{margin-top:var(--s-4);font-size:.88rem;color:var(--muted)}

/* ============================================================
   Booking form
   ============================================================ */
.form-wrap{display:grid;gap:var(--s-6)}
@media(min-width:940px){.form-wrap{grid-template-columns:1.5fr .85fr;gap:var(--s-8);align-items:start}}

.form{
  padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--white);box-shadow:var(--shadow-sm);
}
@media(min-width:600px){.form{padding:var(--s-7)}}

.form__grid{display:grid;gap:var(--s-5)}
@media(min-width:640px){
  .form__grid{grid-template-columns:repeat(2,1fr)}
  .field--full{grid-column:1/-1}
}

.field{display:flex;flex-direction:column;gap:var(--s-2)}
.field label{
  font-size:.92rem;font-weight:600;color:var(--blue-dark);
  font-family:var(--font-body);
}
.field .req{color:var(--blue-primary);margin-left:2px}
.field .opt{font-weight:400;color:var(--muted);font-size:.86rem;margin-left:4px}

.field input,
.field select,
.field textarea{
  width:100%;min-height:52px;
  padding:13px 15px;
  font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--white);
  border:1px solid #CFDCEB;border-radius:var(--r-sm);
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
  -webkit-appearance:none;appearance:none;
}
.field textarea{min-height:132px;resize:vertical;line-height:1.6;padding-top:14px}
.field input::placeholder,.field textarea::placeholder{color:#9AACC1}

.field select{
  cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23185FA5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}

.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--blue-light)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue-primary);
  box-shadow:0 0 0 3px rgba(14,148,136,.16);
}

.field__help{font-size:.86rem;color:var(--muted);line-height:1.5}

/* Error state, never colour-only: icon + text + border all change */
.field__error{
  display:none;align-items:flex-start;gap:6px;
  font-size:.86rem;font-weight:500;color:#A32020;line-height:1.45;
}
.field__error svg{flex:none;margin-top:2px}
.field[data-invalid="true"] .field__error{display:flex}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{border-color:#A32020;background:#FDF6F6}
.field[data-invalid="true"] input:focus,
.field[data-invalid="true"] select:focus,
.field[data-invalid="true"] textarea:focus{box-shadow:0 0 0 3px rgba(163,32,32,.15)}

.form__footer{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);
  margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line);
}
.form__footer .btn{flex:1 1 auto}
@media(min-width:560px){.form__footer .btn{flex:0 0 auto}}
.form__privacy{font-size:.86rem;color:var(--muted);flex:1 1 240px;line-height:1.5}

/* Summary of errors, announced to screen readers */
.form__summary{
  display:none;gap:10px;align-items:flex-start;
  margin-bottom:var(--s-5);padding:var(--s-4) var(--s-5);
  border:1px solid #E9C4C4;background:#FDF6F6;border-radius:var(--r-sm);
  color:#A32020;font-size:.93rem;line-height:1.5;
}
.form__summary[data-show="true"]{display:flex}
.form__summary svg{flex:none;margin-top:3px}

/* Honeypot, hidden from humans, visible to bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Side panel next to the form */
.form-aside{display:grid;gap:var(--s-5)}
.form-aside__card{
  padding:var(--s-6);border-radius:var(--r-lg);
  /* White so the cards read against the gray form section */
  background:var(--white);border:1px solid var(--line);
}
.form-aside__card h3{margin-bottom:var(--s-4);font-size:1.05rem}
.form-aside__card p{font-size:.94rem}
.form-aside__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.form-aside__list li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem}
.form-aside__list svg{flex:none;color:var(--blue-primary);margin-top:4px}
/* Stacks as full-width rows so several contact routes can sit together,
   each with a 44px tap target. */
.form-aside__mail{
  display:flex;align-items:center;gap:10px;margin-top:var(--s-3);
  min-height:44px;
  font-weight:600;color:var(--blue-primary);text-decoration:none;
  font-size:.95rem;word-break:break-word;
}
.form-aside__mail svg{flex:none}
.form-aside__mail:hover{text-decoration:underline}

.prep{display:grid;gap:var(--s-4);max-width:760px;list-style:none;margin:0;padding:0;counter-reset:prep}
.prep li{
  display:flex;gap:var(--s-4);align-items:flex-start;
  font-size:.99rem;
}
.prep li::before{
  counter-increment:prep;content:counter(prep);
  flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;margin-top:1px;
  background:var(--surface-2);color:var(--blue-primary);
  font-family:var(--font-head);font-weight:700;font-size:.86rem;
}

/* ============================================================
   CTA band
   ============================================================ */
.cta{
  position:relative;overflow:hidden;
  background:
    radial-gradient(760px 460px at 82% 8%, rgba(45,212,191,.3), transparent 62%),
    linear-gradient(150deg,#0B1628,#070E1A);
  color:#fff;
}
.cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(700px 400px at 70% 30%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(700px 400px at 70% 30%,#000,transparent 75%);
}
.cta__inner{position:relative;z-index:1;max-width:720px;margin-inline:auto;text-align:center}
.cta h2{color:#fff}
.cta p{margin-top:var(--s-4);color:rgba(255,255,255,.82);font-size:1.08rem}
.cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3);margin-top:var(--s-7)}
.cta__actions .btn{flex:1 1 auto;min-width:230px}
@media(min-width:560px){.cta__actions .btn{flex:0 0 auto}}
.cta__reassure{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-5);
  margin-top:var(--s-6);font-size:.9rem;color:rgba(255,255,255,.8);
}
.cta__reassure span{display:inline-flex;align-items:center;gap:8px}
.cta__reassure svg{color:var(--blue-tint);flex:none}

/* Light variant of the CTA band. Used above the contact form so we don't
   stack two dark navy sections directly under the page header. */
.cta--light{background:var(--white);color:var(--body)}
.cta--light::after{display:none}          /* drop the dark-only grid texture */
.cta--light h2{color:var(--blue-dark)}
.cta--light p{color:var(--body)}
.cta--light .cta__reassure{color:var(--muted)}
.cta--light .cta__reassure svg{color:var(--blue-primary)}

/* ============================================================
   Next-page pager
   ============================================================ */
.pager{
  display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;align-items:center;
  padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--white);
}
.pager__text strong{
  display:block;font-family:var(--font-head);color:var(--blue-dark);font-size:1.15rem;
}
.pager__text span{font-size:.94rem;color:var(--muted)}

/* ============================================================
   Footer
   ============================================================ */
.footer{background:var(--white);border-top:1px solid var(--line);padding-block:var(--s-8) var(--s-6)}
.footer__grid{display:grid;gap:var(--s-7)}
@media(min-width:760px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer__tag{margin-top:var(--s-4);font-size:.95rem;max-width:34ch}
.footer h4{
  font-family:var(--font-head);font-size:.78rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blue-dark);
  margin:0 0 var(--s-4);
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}
.footer ul a{
  /* Full-height hit area: footer links were 19px tall, well under the
     44px minimum, and they are the hardest links on the site to tap. */
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;
}
/* Contact icons: fixed box so the labels stay left-aligned with each other */
.footer ul a > svg{
  flex:none;width:17px;height:17px;
  color:var(--blue-primary);
}
.footer ul a:hover > svg{color:var(--blue-dark)}
.footer a{
  color:var(--body);text-decoration:none;font-size:.95rem;
  transition:color var(--dur-fast) var(--ease-out);
}
.footer a:hover{color:var(--blue-primary)}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;align-items:center;
  margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line);
  font-size:.88rem;color:var(--muted);
}

/* ============================================================
   SERVICES PAGE, richer sections
   ============================================================ */

/* Hero action row + secondary link on the page header */
.page-hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-7)}
.page-hero__actions .btn{flex:1 1 auto;min-width:210px}
@media(min-width:560px){.page-hero__actions .btn{flex:0 0 auto}}

/* Trust strip (logos placeholder + caption) */
.trust-strip{background:var(--surface);border-block:1px solid var(--line)}
.trust-strip__cap{text-align:center;color:var(--muted);font-size:.9rem;font-weight:600;letter-spacing:.02em}
.logos{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--s-6) var(--s-8);margin-top:var(--s-6);
}
.logos__item{
  height:34px;min-width:96px;border-radius:8px;
  display:grid;place-items:center;
  background:var(--surface-2);border:1px dashed #C7D6E8;
  color:var(--muted);font-size:.72rem;font-weight:600;letter-spacing:.08em;
  padding-inline:var(--s-4);
}

/* Numbered service rows */
.svc-list{display:grid;gap:var(--s-5)}
.svc-row{
  position:relative;
  display:grid;gap:var(--s-5);
  padding:var(--s-6);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out),border-color var(--dur-mid) var(--ease-out);
}
@media(min-width:820px){.svc-row{grid-template-columns:auto 1fr;gap:var(--s-7);padding:var(--s-7)}}
.svc-row:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#D4E2F2}
.svc-row__num{
  font-family:var(--font-head);font-weight:700;font-size:2.1rem;line-height:1;
  color:var(--blue-light);
  width:64px;height:64px;flex:none;border-radius:var(--r-md);
  display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(45,212,191,.14),rgba(14,148,136,.08));
  font-variant-numeric:tabular-nums;
}
.svc-row h3{font-size:1.35rem;margin-bottom:var(--s-3)}
.svc-row p{font-size:1rem}
.svc-row__link{
  display:inline-flex;align-items:center;gap:8px;margin-top:var(--s-5);
  font-weight:600;color:var(--blue-primary);text-decoration:none;font-size:.95rem;
}
.svc-row__link:hover{color:var(--blue-dark)}
.svc-row__link svg{transition:transform var(--dur-mid) var(--ease-out)}
.svc-row__link:hover svg{transform:translateX(3px)}

/* Compact service cards */
.svc-cards{display:grid;gap:var(--s-4)}
@media(min-width:640px){.svc-cards{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}}
@media(min-width:1000px){.svc-cards{grid-template-columns:repeat(3,1fr)}}
.svc-card{
  display:flex;flex-direction:column;
  padding:var(--s-6);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out),border-color var(--dur-mid) var(--ease-out);
}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#D4E2F2}
.svc-card__num{
  width:34px;height:34px;flex:none;border-radius:9px;
  display:grid;place-items:center;margin-bottom:var(--s-4);
  background:linear-gradient(140deg,rgba(45,212,191,.16),rgba(14,148,136,.1));
  color:var(--blue-primary);font-family:var(--font-head);font-weight:700;font-size:1rem;
  font-variant-numeric:tabular-nums;
}
.svc-card h3{font-size:1.12rem;margin-bottom:var(--s-3)}
.svc-card p{font-size:.93rem}
.svc-card .tags{
  margin-top:auto;padding-top:var(--s-5);
  border-top:1px dashed var(--line);gap:var(--s-1) var(--s-2);
}
.svc-card .tag{font-size:.76rem;padding:5px 10px}
.svc-card .tag--tool{padding-left:5px}
.svc-card .tag__logo{width:16px;height:16px;margin-right:6px;border-radius:5px}
.svc-card__link{
  display:inline-flex;align-items:center;gap:7px;margin-top:var(--s-5);
  font-weight:600;color:var(--blue-primary);text-decoration:none;font-size:.9rem;
}
.svc-card__link:hover{color:var(--blue-dark)}
.svc-card__link svg{transition:transform var(--dur-mid) var(--ease-out)}
.svc-card__link:hover svg{transform:translateX(3px)}

/* Hover/tap popover on the service number, "jobs we've done" */
.svc-card__work{position:relative;align-self:flex-start;margin-bottom:var(--s-4)}
button.svc-card__num{
  border:0;cursor:pointer;font:inherit;margin-bottom:0;
  position:relative;
}
button.svc-card__num::after{
  /* small chevron hint that it opens something */
  content:"";position:absolute;right:-3px;bottom:-3px;
  width:14px;height:14px;border-radius:50%;
  background:var(--blue-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/9px no-repeat;
}
.svc-pop{
  position:absolute;top:calc(100% + 10px);left:0;z-index:40;
  min-width:250px;padding:var(--s-4);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),visibility var(--dur-fast);
}
.svc-card__work:hover .svc-pop,
.svc-card__work:focus-within .svc-pop,
.svc-card__work[data-open="true"] .svc-pop{opacity:1;visibility:visible;transform:none}
.svc-pop__title{
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:2px 6px var(--s-2);
}
.svc-pop a{
  display:flex;align-items:center;gap:8px;
  padding:8px 8px;border-radius:8px;text-decoration:none;
  color:var(--blue-dark);font-size:.88rem;font-weight:500;line-height:1.35;
}
.svc-pop a:hover{background:var(--surface);color:var(--blue-primary)}
.svc-pop a svg{flex:none;color:var(--blue-light)}
.svc-pop__more{
  color:var(--blue-primary);font-weight:600;
  border-top:1px solid var(--line);margin-top:6px;padding-top:12px !important;
}
.svc-pop__more svg{color:currentColor !important}

/* Image placeholder + figure (service detail pages) */
.img-fig{margin:var(--s-6) 0 0}
.img-ph{
  border-radius:var(--r-lg);border:1px dashed #C7D6E8;
  background:var(--surface-2);
  display:grid;place-items:center;text-align:center;
  min-height:240px;padding:var(--s-7);color:var(--muted);
}
.img-ph svg{width:42px;height:42px;color:var(--blue-light);margin-bottom:var(--s-3)}
.img-ph b{display:block;color:var(--blue-dark);font-family:var(--font-head);margin-bottom:4px}
.img-ph span{font-size:.9rem;max-width:44ch;line-height:1.5}
.img-cap{font-size:.82rem;color:var(--muted);margin-top:var(--s-3);line-height:1.5}
.img-cap a{color:var(--blue-primary)}

/* "We can help you", 2×2 box grid (two top, two bottom) */
.checks{display:grid;gap:var(--s-4);list-style:none;margin:0;padding:0}
@media(min-width:680px){.checks{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}}
.checks li{
  display:flex;gap:var(--s-4);align-items:flex-start;font-size:1rem;
  padding:var(--s-6);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out),border-color var(--dur-mid) var(--ease-out);
}
.checks li:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#D4E2F2}
.checks svg{
  flex:none;width:34px;height:34px;padding:7px;border-radius:9px;
  color:var(--blue-primary);
  background:linear-gradient(140deg,rgba(45,212,191,.16),rgba(14,148,136,.1));
  margin-top:1px;
}

/* Prose blocks on detail pages */
.prose{max-width:720px}
.prose p + p{margin-top:var(--s-4)}
.prose h3{margin-top:var(--s-6);margin-bottom:var(--s-3);font-size:1.3rem}

/* Tool tags */
.tags{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.tag{
  display:inline-flex;align-items:center;
  padding:6px 13px;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--blue-dark);
  font-size:.82rem;font-weight:500;border:1px solid var(--line);
}
/* Tool chip: small logo tile + name. Swap assets/logos/<tool>.svg for the
   official brand logo, same path, no HTML change needed. */
.tag--tool{padding-left:6px;background:var(--white)}
.tag__logo{
  width:20px;height:20px;flex:none;border-radius:6px;
  margin-right:8px;display:block;object-fit:contain;
}

/* Stat blocks */
.stats{display:grid;gap:var(--s-5)}
@media(min-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat__num{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(2.2rem,4.4vw,3rem);line-height:1;color:var(--blue-dark);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.stat__label{margin-top:var(--s-3);font-size:.96rem;color:var(--body);max-width:24ch}
.stats--onDark .stat__num{color:#fff}
.stats--onDark .stat__label{color:rgba(255,255,255,.8)}

/* Split heading + body (integrations) */
.split{display:grid;gap:var(--s-6)}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}}

.price-card{
  display:flex;flex-direction:column;
  padding:var(--s-6);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out),border-color var(--dur-mid) var(--ease-out);
}
.price-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#D4E2F2}
.price-card--featured{border-color:var(--blue-primary);box-shadow:var(--shadow-md)}
.price-card__badge{
  align-self:flex-start;margin-bottom:var(--s-4);
  padding:4px 11px;border-radius:var(--r-full);
  background:var(--blue-primary);color:#fff;font-size:.72rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
}
.price-card h3{font-size:1.2rem;margin-bottom:var(--s-3)}
.price-card__price{display:flex;align-items:baseline;gap:6px;margin-bottom:var(--s-4)}
.price-card__from{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.price-card__amt{
  font-family:var(--font-head);font-weight:700;font-size:2rem;color:var(--blue-dark);
  line-height:1;font-variant-numeric:tabular-nums;
}
.price-card p{font-size:.95rem}
.price-card .btn{margin-top:var(--s-6);justify-content:center}

/* Marc's 3-tier model: For / Price / Timeline / Includes */
.tier__for{font-size:.92rem;color:var(--muted);margin-top:-2px;margin-bottom:var(--s-4)}
.tier__meta{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:var(--s-2);
  font-size:.84rem;font-weight:600;color:var(--blue-primary);
}
.tier__meta svg{flex:none}
.tier__list{
  list-style:none;margin:var(--s-5) 0 0;padding:var(--s-5) 0 0;
  border-top:1px solid var(--line);
  display:grid;gap:var(--s-3);flex:1;
}
.tier__list li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--body)}
.tier__list svg{flex:none;color:var(--blue-primary);margin-top:3px}
.tier__list .muted{color:var(--muted)}

/* Case study cards */
.cases{display:grid;gap:var(--s-5)}
@media(min-width:700px){.cases{grid-template-columns:repeat(2,1fr)}}
.case-card{
  display:block;text-decoration:none;
  padding:var(--s-6);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out),border-color var(--dur-mid) var(--ease-out);
}
.case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#D4E2F2}
.case-card__metrics{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-4)}
.case-card__metric{
  padding:5px 12px;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--blue-dark);
  font-size:.82rem;font-weight:600;
}
.case-card h3{font-size:1.12rem;color:var(--blue-dark)}
.case-card__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:var(--s-4);
  color:var(--blue-primary);font-weight:600;font-size:.92rem;
}

/* Testimonials */
.tstm{display:grid;gap:var(--s-5)}
@media(min-width:860px){.tstm{grid-template-columns:repeat(3,1fr)}}
.tstm__card{
  display:flex;flex-direction:column;
  padding:var(--s-6);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.tstm__quote{font-size:.97rem;line-height:1.6;color:var(--body);flex:1}
.tstm__author{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-5)}
.tstm__avatar{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--blue-light),var(--blue-primary));
  display:grid;place-items:center;color:#fff;font-family:var(--font-head);font-weight:700;font-size:.95rem;
}
.tstm__name{font-weight:600;color:var(--ink);font-size:.95rem}
.tstm__role{font-size:.85rem;color:var(--muted)}

/* Process steps with body text (reuses .steps grid) */
.proc{display:grid;gap:var(--s-5)}
@media(min-width:760px){.proc{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.proc{grid-template-columns:repeat(4,1fr)}}
.proc__step{padding:var(--s-6);background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg)}
.proc__num{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-primary);color:#fff;
  font-family:var(--font-head);font-weight:700;margin-bottom:var(--s-5);
}
.proc__step h3{font-size:1.08rem;margin-bottom:var(--s-3)}
.proc__step p{font-size:.94rem}

/* Beliefs (About page), big stat + supporting line */
.beliefs{display:grid;gap:var(--s-5)}
@media(min-width:640px){.beliefs{grid-template-columns:repeat(2,1fr)}}
.belief{
  padding:var(--s-6);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.belief__stat{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(2rem,4vw,2.6rem);line-height:1;color:var(--blue-primary);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-bottom:var(--s-3);
}
.belief p{font-size:.98rem}

/* Team grid (About page) */
.team{display:grid;gap:var(--s-5)}
@media(min-width:560px){.team{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.team{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1140px){.team{grid-template-columns:repeat(4,1fr)}}
.team__card{
  padding:var(--s-5);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out),border-color var(--dur-mid) var(--ease-out);
}
.team__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#D4E2F2}
/* Photo placeholder, swap the inner <img> in when real team photos exist */
.team__photo{
  width:100%;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;
  display:grid;place-items:center;margin-bottom:var(--s-5);
  background:linear-gradient(150deg,#0E6B60,#070E1A);
  color:rgba(255,255,255,.7);
}
.team__photo img{width:100%;height:100%;object-fit:cover;display:block}
.team__photo svg{width:46%;height:46%}
.team__name{font-family:var(--font-head);font-weight:600;color:var(--blue-dark);font-size:1.08rem}
.team__role{color:var(--blue-primary);font-size:.86rem;font-weight:600;margin-top:2px}
.team__bio{color:var(--muted);font-size:.9rem;line-height:1.55;margin-top:var(--s-3)}

/* ============================================================
   ROI calculator
   ============================================================ */
.calc{display:grid;gap:var(--s-6)}
@media(min-width:960px){.calc{grid-template-columns:1fr .9fr;gap:var(--s-8);align-items:start}}
.calc__form{padding:var(--s-6);background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg)}
@media(min-width:600px){.calc__form{padding:var(--s-7)}}
.calc__out{display:grid;gap:var(--s-4);position:sticky;top:96px}
.calc__card{
  padding:var(--s-5) var(--s-6);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-md);
}
.calc__card--hero{background:linear-gradient(150deg,#0B1628,#070E1A);border-color:transparent;color:#fff}
.calc__label{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.calc__card--hero .calc__label{color:var(--blue-tint)}
.calc__num{
  font-family:var(--font-head);font-weight:700;line-height:1.1;
  font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--blue-dark);
  font-variant-numeric:tabular-nums;margin-top:4px;
}
.calc__card--hero .calc__num{color:#fff}
.calc__sub{font-size:.86rem;color:var(--muted);margin-top:4px}
.calc__card--hero .calc__sub{color:rgba(255,255,255,.75)}
.calc__assume{
  margin-top:var(--s-2);padding:var(--s-5);
  background:var(--surface);border:1px dashed #C7D6E8;border-radius:var(--r-md);
}
.calc__assume summary{cursor:pointer;font-weight:600;color:var(--blue-dark);font-size:.95rem}
.calc__assume .field{margin-top:var(--s-4)}
.calc__reco{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-2)}
.calc__reco li{display:flex;gap:8px;align-items:flex-start;font-size:.92rem;color:var(--body)}
.calc__reco svg{flex:none;color:var(--blue-primary);margin-top:3px}

/* ============================================================
   Floating WhatsApp button (rendered by script.js only when a
   number is configured, no dead button otherwise)
   ============================================================ */
/* Sits above the chat bubble (also bottom-right) so the two never overlap. */
.wa-fab{
  position:fixed;right:18px;bottom:86px;z-index:300;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;
  background:#25D366;color:#fff;
  box-shadow:0 4px 14px rgba(3,22,44,.28), 0 12px 32px rgba(3,22,44,.18);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out);
}
.wa-fab:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(3,22,44,.3), 0 18px 44px rgba(3,22,44,.22)}
.wa-fab:active{transform:scale(.96)}
.wa-fab svg{width:30px;height:30px}
@media(max-width:560px){.wa-fab{right:14px;bottom:78px}}

/* ============================================================
   Floating contact button — one control, Call + WhatsApp.
   Same footprint/position as .wa-fab above, so it still stacks
   cleanly above the chat bubble when a phone number is configured.
   ============================================================ */
.fab-group{
  position:fixed;right:18px;bottom:86px;z-index:300;
  display:flex;flex-direction:column-reverse;align-items:center;gap:12px;
}
.fab-toggle{
  width:56px;height:56px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:var(--blue-primary);
  box-shadow:0 4px 14px rgba(3,22,44,.28), 0 12px 32px rgba(3,22,44,.18);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.fab-toggle:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(3,22,44,.3), 0 18px 44px rgba(3,22,44,.22)}
.fab-toggle:active{transform:scale(.96)}
.fab-toggle svg{width:26px;height:26px;transition:transform var(--dur-mid) var(--ease-out)}
.fab-group[data-open="true"] .fab-toggle{background:var(--blue-dark)}
.fab-group[data-open="true"] .fab-toggle svg{transform:rotate(90deg)}
.fab-option{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;color:#fff;
  box-shadow:0 4px 14px rgba(3,22,44,.24), 0 10px 26px rgba(3,22,44,.16);
  opacity:0;transform:translateY(10px) scale(.7);pointer-events:none;
  transition:opacity var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out);
}
.fab-option svg{width:21px;height:21px}
.fab-option--call{background:var(--blue-primary)}
.fab-option--whatsapp{background:#25D366}
.fab-group[data-open="true"] .fab-option{opacity:1;transform:none;pointer-events:auto}
.fab-group[data-open="true"] .fab-option--call{transition-delay:30ms}
.fab-group[data-open="true"] .fab-option--whatsapp{transition-delay:80ms}
@media(max-width:560px){.fab-group{right:14px;bottom:78px}}

/* ============================================================
   Cal.com booking modal (script.js upgrades "Book a call" CTAs
   only when a Cal link is configured; href fallback otherwise)
   ============================================================ */
.cal-modal{
  position:fixed;inset:0;z-index:400;
  display:none;align-items:center;justify-content:center;
  padding:var(--s-4);
  background:rgba(7,14,26,.6);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.cal-modal[data-open="true"]{display:flex}
.cal-modal__box{
  position:relative;width:100%;max-width:920px;height:min(80vh,700px);
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.cal-modal__box iframe{width:100%;height:100%;border:0}
.cal-modal__close{
  position:absolute;top:10px;right:10px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--white);border:1px solid var(--line);color:var(--blue-dark);
}
.cal-modal__close:hover{background:var(--surface);color:var(--blue-primary)}

/* ============================================================
   Scroll reveal
   Fail-open: .reveal is visible by default. Only once JS confirms it can
   run the animation does <html> get .js-anim, which hides pending items.
   ============================================================ */
.js-anim .reveal{opacity:0;transform:translateY(22px)}
.js-anim .reveal.is-visible{
  opacity:1;transform:none;
  transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out);
  transition-delay:var(--delay,0ms);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js-anim .reveal{opacity:1;transform:none}
}

/* Triple A logo (brand update) */
.brand__logo{display:block;height:34px;width:auto}
@media(min-width:960px){.brand__logo{height:40px}}