/* ==========================================================================
   Tiobit - shared stylesheet
   Design system v2: "Black, white, and just enough green."

   Ink (#042925) and white are the surfaces, sage separates them, and
   Signal (#00CFBD) is the accent - no more than one element per viewport.
   The cream ground is retired.

   This file is loaded by every page. It used to be six inline copies.
   ========================================================================== */

/* Google Sans Flex - self-hosted, SIL Open Font License 1.1.
   Subset to Latin + Latin Ext-A + the punctuation and symbols the site
   actually uses, and reduced to the single wght axis (400-700):
   4.7MB of TTF becomes 47KB of woff2. */
@font-face{
  font-family:'Google Sans Flex';
  src:url('../fonts/GoogleSansFlex-subset.woff2') format('woff2-variations'),
      url('../fonts/GoogleSansFlex-subset.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ---- Tiobit design system v2 ----
     Black, white, and just enough green.
     Ink and white are the surfaces; sage separates them; Signal is the accent.
     Signal appears on no more than one element per viewport. */

  /* core */
  --ink:#042925;          /* body text, dark surfaces, the wordmark */
  --ink-deep:#0A433F;     /* cards on dark, hover states, links */
  --sage-400:#A6C1C0;     /* secondary text on dark - never on white */
  --sage-200:#C7D9D7;     /* every rule, divider and card border */
  --sage-50:#E6EDED;      /* the tinted ground - replaces the cream */
  --signal:#00CFBD;       /* one per view: live dots, the bit mark */
  --signal-ink:#00A594;   /* signal darkened for accents on white */
  --white:#FFFFFF;
  --black:#000000;       /* nav, hero/banner and footer run on true black */
  --line-black:#1E1E1E;  /* neutral hairline on a black surface */
  --line-ink:#2C4B47;     /* borders on an ink ground */
  --muted:#5A6E6C;        /* muted text on white */

  /* status tints - form and system feedback only, never decorative */
  --tint-info:#E5F7F8; --tint-pending:#FEF4D2; --tint-error:#FFE2DF;

  /* ---- compatibility aliases ----
     The markup still uses the v1 token names; these map them onto v2
     so a rule that said var(--mint) now resolves to Signal. */
  --d-bg:var(--ink); --d-card:var(--ink-deep); --d-line:var(--line-ink);
  --d-text:var(--sage-50); --d-muted:var(--sage-400);
  --mint:var(--signal); --sagegreen:var(--ink-deep);
  --cream:var(--white); --sage:var(--sage-50); --sage-deep:var(--sage-200);
  --green:var(--signal); --green-deep:var(--ink-deep); --amber:var(--ink);

  /* type */
  --serif:'Fraunces', Georgia, serif;        /* italic 300, one phrase per page */
  --sans:'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', Consolas, monospace;

  /* shape: everything squares off; only buttons stay pills */
  --r:14px;          /* card radius */
  --r-bit:3px;
  --pill:100px;

  /* layout: the hero + trusted-by strip fill exactly one screen */
  --nav-h:74px;          /* header height - kept constant so nothing jumps */
  --trust-h:77px;        /* the trusted-by strip */
  --hero-floor:520px;    /* don't crush the hero copy on a short window */

  /* elevation: the ground is white now, so cards need a little lift to
     separate. Kept subtle - two soft layers, ink-tinted, plus a Sage 200
     hairline on each card so the edge reads even where the shadow doesn't. */
  --shadow-card:0 1px 2px rgba(4,41,37,.03), 0 5px 16px rgba(4,41,37,.05);
  --shadow-card-hover:0 2px 4px rgba(4,41,37,.04), 0 12px 28px rgba(4,41,37,.09);
  --shadow-deep:0 18px 44px rgba(4,41,37,.16);
}
*{margin:0;padding:0;box-sizing:border-box;}
:root{--cursor-bit:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2300CFBD%22%2F%3E%3Cstop%20offset%3D%220.5%22%20stop-color%3D%22%2300A594%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230A433F%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M96%2016%20L436%20352%20L242%20364%20L96%20496%20Z%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%2236%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") 5 1, auto;}
.hero,.door,.svc-card,.spec-card,.quote,.terminal,.photo-card,.featured,.post,.live,.compare,.cta-card,.step,.journey,.stat{cursor:var(--cursor-bit);}
html{scroll-behavior:smooth;}
body{background:var(--white);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
.wrap{max-width:1160px;margin:0 auto;padding:0 36px;}
::selection{background:var(--green);color:var(--ink);}
/* ============ NAV (dark) ============ */
header{position:sticky;top:0;z-index:100;background:var(--ink);border-bottom:1px solid var(--d-line);transition:background .25s ease;}
header.scrolled{background:rgba(4,41,37,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
nav{display:flex;align-items:center;justify-content:space-between;height:74px;}
.logo{display:flex;align-items:baseline;text-decoration:none;}
.logo .word{font-family:var(--sans);font-weight:600;font-size:26px;letter-spacing:-0.03em;color:var(--d-text);}
.logo .bits{display:inline-flex;margin-left:6px;position:relative;width:18px;height:18px;transform:translateY(-8px);}
.logo .bits i{position:absolute;border-radius:3px;}
.logo .bits i:first-child{width:11px;height:11px;background:var(--sagegreen);left:0;top:0;}
.logo .bits i:last-child{width:11px;height:11px;background:var(--mint);left:6px;top:6px;box-shadow:0 0 14px rgba(0,207,189,.45);}
.nav-links{display:flex;gap:32px;align-items:center;}
.nav-links a{text-decoration:none;color:var(--d-muted);font-size:14px;font-weight:500;}
.nav-links a:hover{color:var(--d-text);}
/* ============ BUTTONS ============
   Pills stay for buttons; everything else squares off. The animated
   gradient glow button is retired - solid ink, with the accent reserved
   for a single primary action. */
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:14.5px;padding:13px 26px;border-radius:var(--pill);transition:.18s;cursor:pointer;border:1px solid transparent;}

/* primary on ink - white pill, Signal on hover */
.btn-glow{background:var(--white);color:var(--ink);border-color:var(--white);}
.btn-glow:hover{background:var(--signal);border-color:var(--signal);color:var(--ink);}
.nav-links a.btn-glow,.nav-links a.btn-glow:hover{color:var(--ink);}

/* secondary on ink - hairline pill */
.btn-dline{background:transparent;color:var(--sage-50);border-color:var(--line-ink);}
.btn-dline:hover{border-color:var(--signal);color:var(--signal);}

/* primary on white - ink pill */
.btn-mint{background:var(--ink);color:var(--white);border-color:var(--ink);}
.btn-mint:hover{background:var(--ink-deep);border-color:var(--ink-deep);}

/* secondary on white - ink hairline pill */
.btn-cream{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-cream:hover{background:var(--ink);color:var(--white);}

/* square field + square button - the one deliberate mix */
.btn-green{background:var(--ink);color:var(--white);border-color:var(--ink);border-radius:10px;}
.btn-green:hover{background:var(--ink-deep);border-color:var(--ink-deep);}
/* ============ HERO (dark, split, animated bit graph) ============ */
.hero{background:var(--d-bg);color:var(--d-text);position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;top:-220px;left:30%;width:760px;height:520px;
background:radial-gradient(ellipse, rgba(10,67,63,.25), transparent 65%);pointer-events:none;}
.hero-grid{display:grid;grid-template-columns:1fr;min-height:600px;position:relative;}  /* one column - the photo is gone, the dot field is the picture */
.hero-copy{padding:100px 0 90px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;z-index:2;}
.status{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--d-muted);border:1px solid var(--d-line);border-radius:100px;padding:8px 18px;margin-bottom:34px;background:rgba(10,67,63,.6);width:fit-content;}
.status i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);animation:pulse 2s infinite;}
@keyframes pulse{50%{opacity:.35}}
h1{font-family:var(--sans);font-weight:600;font-size:clamp(38px,5.2vw,64px);line-height:1.02;letter-spacing:-0.035em;text-wrap:balance;}
h1 em{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-0.01em;color:var(--sage-400);}
.hero-sub{color:var(--d-muted);max-width:48ch;margin:24px auto 38px;font-size:19.5px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
/* the animated bit graph */
.graph{position:relative;overflow:hidden;
margin-right:calc(-1 * max(36px, (100vw - 1160px) / 2 + 36px));}
.graph .gridlayer{position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(0,207,189,.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,207,189,.09) 1px, transparent 1px);
background-size:44px 44px;
    -webkit-mask-image:linear-gradient(90deg,#000 68%,transparent 99%);
mask-image:linear-gradient(90deg,#000 68%,transparent 99%);}
#diff-logo .bit-a,#nav-logo .bit-a,#foot-logo .bit-a{animation:logo-click-a 9s ease-in-out infinite;}
#diff-logo .bit-b,#nav-logo .bit-b,#foot-logo .bit-b{animation:logo-click-b 9s ease-in-out infinite;}
/* in the logo SVG's own units (750 x 225 viewBox), so 24 is ~4px on screen */
@keyframes logo-click-a{
    0%,16%{transform:translate(0,0);}
    44%,56%{transform:translate(-24px,-24px);}
    80%{transform:translate(3px,3px);}
    86%,100%{transform:translate(0,0);}
  }
@keyframes logo-click-b{
    0%,16%{transform:translate(0,0);}
    44%,56%{transform:translate(24px,24px);}
    80%{transform:translate(-3px,-3px);}
    86%,100%{transform:translate(0,0);}
  }
.cellhl{position:absolute;top:0;left:0;width:43px;height:43px;border-radius:3px;
pointer-events:none;opacity:0;z-index:1;
transition:opacity .3s ease, transform .07s linear, background .12s ease;}
.graph .scan{position:absolute;top:0;bottom:0;width:44px;background:linear-gradient(90deg,transparent,rgba(0,207,189,.06),transparent);animation:scan 9s linear infinite;}
@keyframes scan{from{left:-44px}to{left:100%}}
.bit{position:absolute;border-radius:14px;will-change:transform;}
/* the two protagonist bits — converge into the logo mark, glow, part again */
.match-wrap{position:absolute;top:50%;left:50%;width:0;height:0;animation:lock-shake 10s linear infinite;}
@keyframes lock-shake{
    0%,37.8%{transform:translate(0,0);}
    38.6%{transform:translate(-2px,1px);}
    39.4%{transform:translate(2px,-1px);}
    40.2%{transform:translate(-1px,-1px);}
    41%{transform:translate(1px,1px);}
    41.8%,100%{transform:translate(0,0);}
  }
.pulse{position:absolute;inset:0;pointer-events:none;opacity:0;
background-image:linear-gradient(rgba(0,207,189,.55) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,207,189,.55) 1px, transparent 1px);
background-size:44px 44px;
    -webkit-mask-image:radial-gradient(circle, transparent 55%, #000 68%, #000 78%, transparent 90%);
mask-image:radial-gradient(circle, transparent 55%, #000 68%, #000 78%, transparent 90%);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;
    -webkit-mask-size:0 0;mask-size:0 0;
animation:grid-ripple 10s linear infinite;}
.pulse.p2{
background-image:linear-gradient(rgba(0,207,189,.45) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,207,189,.45) 1px, transparent 1px);
animation:grid-ripple-2 10s linear infinite;}
@keyframes grid-ripple{
    0%,38%{-webkit-mask-size:0 0;mask-size:0 0;opacity:0;}
    40%{opacity:.95;-webkit-mask-size:220px 220px;mask-size:220px 220px;}
    58%{opacity:0;-webkit-mask-size:1500px 1500px;mask-size:1500px 1500px;}
    100%{opacity:0;-webkit-mask-size:0 0;mask-size:0 0;}
  }
@keyframes grid-ripple-2{
    0%,41%{-webkit-mask-size:0 0;mask-size:0 0;opacity:0;}
    43%{opacity:.7;-webkit-mask-size:160px 160px;mask-size:160px 160px;}
    62%{opacity:0;-webkit-mask-size:1500px 1500px;mask-size:1500px 1500px;}
    100%{opacity:0;-webkit-mask-size:0 0;mask-size:0 0;}
  }
.flash{position:absolute;top:50%;left:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;
background:radial-gradient(circle, rgba(0,207,189,.32), transparent 65%);
opacity:0;pointer-events:none;animation:lock-flash 10s ease-out infinite;}
@keyframes lock-flash{
    0%,37.5%{opacity:0;transform:scale(.6);}
    39.5%{opacity:1;transform:scale(1);}
    47%{opacity:0;transform:scale(1.25);}
    100%{opacity:0;transform:scale(.6);}
  }
.bit.hero-a{width:84px;height:84px;background:var(--sagegreen);top:-64px;left:-64px;animation:matchA 10s ease-in-out infinite;}
.bit.hero-b{width:84px;height:84px;background:var(--green);top:-64px;left:-64px;animation:matchB 10s ease-in-out infinite;}
@keyframes matchA{
    0%,12%   {transform:translate(-132px,-88px);}
    38%,62%  {transform:translate(0,0);}
    88%,100% {transform:translate(-132px,-88px);}
  }
@keyframes matchB{
    0%,12%   {transform:translate(132px,88px);box-shadow:none;}
    38%,62%  {transform:translate(44px,44px);box-shadow:0 0 44px rgba(0,207,189,.5);}
    88%,100% {transform:translate(132px,88px);box-shadow:none;}
  }
/* ambient bits wandering the grid */
.bit.w1{width:40px;height:40px;background:var(--mint);opacity:.5;top:46px;left:46px;border-radius:7px;animation:walk1 14s steps(1,end) infinite;}
.bit.w2{width:40px;height:40px;background:var(--sagegreen);opacity:.55;top:442px;left:134px;border-radius:7px;animation:walk2 17s steps(1,end) infinite;}
.bit.w3{width:40px;height:40px;background:var(--sagegreen);opacity:.3;top:90px;left:618px;border-radius:7px;animation:walk3 12s steps(1,end) infinite;}
.bit.w1,.bit.w2,.bit.w3{transition:transform .5s cubic-bezier(.6,0,.3,1);}
@keyframes walk1{0%{transform:translate(0,0)}20%{transform:translate(88px,0)}40%{transform:translate(88px,132px)}60%{transform:translate(176px,132px)}80%{transform:translate(176px,44px)}100%{transform:translate(0,0)}}
@keyframes walk2{0%{transform:translate(0,0)}25%{transform:translate(-132px,0)}50%{transform:translate(-132px,-88px)}75%{transform:translate(0,-88px)}100%{transform:translate(0,0)}}
@keyframes walk3{0%{transform:translate(0,0)}33%{transform:translate(-88px,44px)}66%{transform:translate(-44px,-88px)}100%{transform:translate(0,0)}}
/* cells that softly light up */
.cell{position:absolute;width:43px;height:43px;background:rgba(0,207,189,.12);animation:cellblink 6s ease-in-out infinite;}
.cell.c1{top:45px;left:573px;animation-delay:0s;}
.cell.c2{top:441px;left:353px;animation-delay:2s;}
.cell.c3{top:265px;left:45px;animation-delay:4s;}
@keyframes cellblink{0%,100%{opacity:0}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){
.bit,.cell,.graph .scan,.status i,.cta-card .corner-bits i,.featured::after,#diff-logo .bit-a,#diff-logo .bit-b,#nav-logo .bit-a,#nav-logo .bit-b,#foot-logo .bit-a,#foot-logo .bit-b,.match-wrap,.pulse,.flash,.door::after,.svc-card::after,.spec-card::after,.net-points li:hover .nsq{animation:none !important;}
.door .bits-bg i,.svc-card .icon i,.spec-card .sq::before,.net-points .nsq::before{transition:none;}
.bit.hero-a{transform:translate(-44px,-44px);}
.bit.hero-b{transform:translate(0,0);}
  }
/* trusted-by (dark) */
.trust{background:var(--d-bg);border-top:1px solid var(--d-line);padding:24px 0;}
.trust .wrap{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;align-items:center;}
.trust span{font-family:var(--sans);font-weight:500;font-size:17px;letter-spacing:-0.01em;color:var(--sage-400);}
.trust small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--d-muted);}
/* ============ STATS RIBBON (light, mono) ============ */
.stats{background:var(--cream);border-bottom:1px solid var(--sage-200);display:grid;grid-template-columns:repeat(3,1fr);}
.stat{padding:34px 36px;border-right:1px solid var(--sage-200);}
.stat:last-child{border-right:none;}
.stat .v{font-family:var(--mono);font-size:30px;font-weight:500;letter-spacing:-0.02em;color:var(--ink);}
.stat .v span{color:var(--signal-ink);}
.stat .k{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:6px;}
/* ============ shared light section bits ============ */
section{padding:96px 0;}
.sec-label{display:inline-block;background:transparent;color:var(--signal-ink);font-size:14.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;border-radius:0;padding:0;margin-bottom:14px;}
h2{font-family:var(--sans);font-weight:600;font-size:clamp(28px,3.2vw,34px);line-height:1.12;letter-spacing:-0.025em;max-width:26ch;text-wrap:balance;}
h2 em{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-0.01em;color:inherit;}
h2.plain em{font-style:normal;}
h2.plain .amp{font-family:Georgia,serif;font-style:normal;}
.sec-intro{color:var(--muted);max-width:54ch;margin:16px 0 48px;}
/* two doors */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.door{border-radius:var(--r);padding:46px;position:relative;overflow:hidden;transition:.2s;}
.door:hover{transform:translateY(-5px);}
.door.employer{background:var(--ink);color:var(--cream);}
.door.candidate{background:var(--white);border:1px solid var(--sage-200);box-shadow:var(--shadow-card);}
.door h3{font-family:var(--sans);font-weight:600;font-size:23px;letter-spacing:-0.02em;margin-bottom:8px;}
.door p{font-size:15.5px;opacity:.85;max-width:40ch;margin-bottom:28px;}
.door .go{font-weight:600;font-size:15px;text-decoration:none;}
.door.employer .go{color:var(--green);}
.door.candidate .go{color:var(--green-deep);}
.door .door-tag{font-family:var(--serif);font-style:italic;font-weight:300;font-size:18px;opacity:1;margin:-2px 0 16px;}
.door.employer .door-tag{color:var(--green);}
.door.candidate .door-tag{color:var(--green-deep);}
.door .bits-bg{position:absolute;top:-24px;right:-24px;width:128px;height:128px;z-index:1;}
.door .bits-bg i{position:absolute;width:64px;height:64px;border-radius:11px;
transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
.door .bits-bg i:first-child{top:0;left:0;transform:translate(-16px,-16px);}
.door .bits-bg i:last-child{top:32px;left:32px;transform:translate(16px,16px);}
.door:hover .bits-bg i{transform:translate(0,0);}
.door.employer .bits-bg i:first-child{background:var(--sagegreen);}
.door.employer .bits-bg i:last-child{background:var(--green);}
.door.candidate .bits-bg i:first-child{background:var(--sage-deep);}
.door.candidate .bits-bg i:last-child{background:var(--sage);}
.door::after{content:"";position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;
background:radial-gradient(circle, rgba(0,207,189,.4), transparent 70%);
transform:scale(0);opacity:0;pointer-events:none;z-index:0;}
.door.candidate::after{background:radial-gradient(circle, rgba(10,67,63,.5), transparent 70%);}
.door:hover::after{animation:door-ripple .9s ease-out .32s forwards;}
@keyframes door-ripple{
    0%{transform:scale(0);opacity:.95;}
    100%{transform:scale(18);opacity:0;}
  }
.door h3,.door p,.door .go{position:relative;z-index:1;}
/* service cards */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.svc-card{background:var(--white);border-radius:var(--r);padding:42px;border:1px solid var(--sage-200);box-shadow:var(--shadow-card);position:relative;overflow:hidden;}
.svc-card .icon{width:52px;height:52px;border-radius:var(--r);background:var(--sage);display:flex;align-items:center;justify-content:center;margin-bottom:24px;position:relative;z-index:1;}
.svc-card .icon i{position:absolute;border-radius:4px;width:15px;height:15px;transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
.svc-card .icon i:first-child{background:var(--green-deep);transform:translate(-8px,-8px);}
.svc-card .icon i:last-child{background:var(--green);transform:translate(8px,8px);}
.svc-card:hover .icon i:first-child{transform:translate(-2.5px,-2.5px);}
.svc-card:hover .icon i:last-child{transform:translate(2.5px,2.5px);}
.svc-card::after{content:"";position:absolute;top:48px;left:48px;width:44px;height:44px;border-radius:50%;
background:radial-gradient(circle, rgba(10,67,63,.45), transparent 70%);
transform:scale(0);opacity:0;pointer-events:none;z-index:0;}
.svc-card:hover::after{animation:door-ripple .9s ease-out .3s forwards;}
.svc-card h3,.svc-card p,.svc-card .tags{position:relative;z-index:1;}
a.svc-card{display:block;color:inherit;text-decoration:none;}
.svc-card h3{font-family:var(--sans);font-weight:600;font-size:23px;letter-spacing:-0.02em;margin-bottom:8px;}
.svc-card p{color:var(--muted);font-size:15.5px;}
.svc-card .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;}
.svc-card .tag{font-family:var(--mono);font-size:12px;font-weight:400;background:var(--sage-50);border:1px solid var(--sage-200);border-radius:8px;padding:7px 14px;color:var(--ink);}
.hires{display:flex;flex-direction:column;gap:12px;max-width:880px;}
.hire-item{background:var(--white);border:1px solid var(--sage-200);border-radius:var(--r);overflow:hidden;}
.hire-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;padding:20px 24px;font-size:16px;font-weight:600;}
.hire-item summary::-webkit-details-marker{display:none;}
.hire-item summary:focus-visible{outline:2px solid var(--green-deep);outline-offset:-2px;}
.hire-item summary::after{content:"";width:8px;height:8px;margin:0 6px 4px 0;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s ease;flex-shrink:0;}
.hire-item[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px;}
.hire-initial{width:40px;height:40px;border-radius:50%;background:var(--ink-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:15px;font-weight:600;flex-shrink:0;}
.hire-label{flex-grow:1;}
.hire-item .tags{display:flex;flex-wrap:wrap;gap:10px;padding:18px 24px 24px;border-top:1px solid #E6EDED;}
.hire-item .tag{font-family:var(--mono);padding:7px 14px;background:var(--sage-50);border:1px solid var(--sage-200);border-radius:8px;font-size:12px;color:var(--ink);}
/* ============ NETWORK ============ */
.net-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
.net-art{background:var(--white);border-radius:var(--r);padding:34px;border:1px solid var(--sage-200);box-shadow:var(--shadow-card);}
.net-art img{width:100%;height:auto;display:block;}
.net-copy h2{margin-bottom:16px;}
.net-copy>p{color:var(--muted);max-width:52ch;margin-bottom:26px;}
.net-points{list-style:none;display:flex;flex-direction:column;gap:14px;}
.net-points li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;}
.net-points li b{font-weight:600;}
.net-points .nsq{flex-shrink:0;width:14px;height:14px;border-radius:4px;background:var(--green);position:relative;top:16px;margin-left:5px;}
.net-points .nsq::before{content:"";position:absolute;width:14px;height:14px;border-radius:4px;background:var(--green-deep);left:-5px;top:-5px;z-index:-1;opacity:.9;
transition:transform .5s cubic-bezier(.34,1.56,.64,1);transform:translate(-6px,-6px);}
.net-points li:hover .nsq::before{transform:translate(0,0);}
.net-points li:hover .nsq{animation:ring-burst .7s ease-out .3s;}
@keyframes ring-burst{
    0%{box-shadow:0 0 0 0 rgba(0,207,189,.45);}
    100%{box-shadow:0 0 0 22px rgba(0,207,189,0);}
  }
/* ============ DARK STRIP: ticker + live searches + process ============ */
.dark-strip{background:var(--d-bg);color:var(--d-text);}
.dark-strip section{padding:90px 0;}
.d-label{font-size:14.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);font-weight:600;margin-bottom:16px;}
.dark-strip h2{color:var(--d-text);}
.dark-strip h2 em{color:var(--sage-400);}
.live{background:var(--d-card);border:1px solid var(--d-line);border-radius:var(--r);overflow:hidden;margin-top:44px;}
.live-head{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;border-bottom:1px solid var(--d-line);font-size:12.5px;color:var(--d-muted);letter-spacing:.08em;text-transform:uppercase;}
.live-head b{display:flex;align-items:center;gap:8px;color:var(--d-text);}
.live-head b i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint);animation:pulse 2s infinite;}
.live-row{display:grid;grid-template-columns:2fr 1fr 1fr 150px;gap:18px;padding:20px 28px;border-bottom:1px solid var(--d-line);align-items:center;font-size:15px;}
.live-row:last-child{border-bottom:none;}
.live-row .role{font-weight:600;}
.live-row .dim{color:var(--d-muted);font-size:13.5px;text-align:center;}
.live-row .pill{text-align:center;justify-self:end;}
.pill{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:100px;border:1px solid var(--d-line);color:var(--mint);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px;}
.step{border:1px solid var(--d-line);border-radius:var(--r);padding:30px 26px;background:var(--d-card);}
.step .n{font-family:var(--mono);font-weight:500;font-size:28px;color:var(--signal-ink);line-height:1;letter-spacing:-0.02em;}
.step h4{font-size:16px;font-weight:600;margin:16px 0 8px;}
.step p{font-size:14px;color:var(--d-muted);}
/* ============ FOUNDER (light) ============ */
.founder-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;}
.photo-card{aspect-ratio:4/4.6;border-radius:var(--r);background:linear-gradient(160deg,var(--sage-deep),#A6C1C0 60%,var(--green-deep));position:relative;overflow:hidden;box-shadow:var(--shadow-deep);}
.photo-card .henna-wrap{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;}  /* no frame: the photo fills the card */
.photo-card .henna-wrap img{width:100%;height:100%;object-fit:cover;display:block;filter:none;transition:filter .45s ease;}
.photo-card .henna-wrap::after{content:"";position:absolute;inset:0;
background:linear-gradient(160deg,var(--sage-deep),#A6C1C0 55%,var(--green-deep));
mix-blend-mode:multiply;opacity:0;transition:opacity .45s ease;}
.photo-card:hover .henna-wrap img{filter:grayscale(1) contrast(1.03);}
.photo-card:hover .henna-wrap::after{opacity:1;}
.founder-copy h2{margin-bottom:16px;}
.founder-copy>p{color:var(--muted);max-width:52ch;margin-bottom:28px;}
.tlink{color:var(--green-deep);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.terminal{background:#0A433F55;background:var(--d-bg);border-radius:var(--r);padding:24px 26px;font-family:var(--mono);font-size:13px;color:#C7D9D7;line-height:1.9;box-shadow:var(--shadow-deep);}
.terminal .dots{display:flex;gap:6px;margin-bottom:14px;}
.terminal .dots i{width:10px;height:10px;border-radius:50%;background:#2C4B47;}
.terminal .dots i:first-child{background:var(--mint);}
.terminal .cmd{color:var(--mint);}
.type-cursor{display:inline-block;width:.55em;background:var(--mint);color:transparent;animation:cursor-blink .8s steps(1) infinite;}
@keyframes cursor-blink{50%{opacity:0;}}
.terminal .out{color:#A6C1C0;}
/* testimonials */
.quotes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:46px;}
.quote{background:var(--white);border-radius:var(--r);padding:34px;border:1px solid var(--sage-200);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:18px;}
.quote .stars{color:var(--amber);letter-spacing:3px;font-size:14px;}
.quote p{font-size:15.5px;flex:1;}
.quote .who{display:flex;align-items:center;gap:12px;}
.quote .ava{width:42px;height:42px;border-radius:50%;background:linear-gradient(140deg,var(--sage-deep),var(--green-deep));flex-shrink:0;}
.quote .who b{font-size:14.5px;display:block;}
.quote .who span{display:block;font-size:13px;line-height:1.45;color:var(--muted);}  /* role, then company on its own line */
/* ============ FINAL CTA — dark rounded card, Dark Signal copy ============ */
.cta-card{background:var(--ink);border-radius:var(--r);padding:96px 60px;text-align:center;color:var(--d-text);position:relative;overflow:hidden;}
.cta-card .glow{position:absolute;bottom:-260px;left:50%;transform:translateX(-50%);width:800px;height:500px;background:radial-gradient(ellipse, rgba(10,67,63,.35), transparent 65%);}
.cta-card .corner-bits{position:absolute;display:flex;}
.cta-card .corner-bits.tl{top:-28px;left:-22px;transform:rotate(12deg);}
.cta-card .corner-bits.br{bottom:-30px;right:-22px;transform:rotate(-14deg);}
.cta-card .corner-bits i{width:104px;height:104px;border-radius:18px;}
.cta-card .corner-bits.tl i{background:var(--sagegreen);opacity:.8;animation:drift-a 13s ease-in-out infinite;}
.cta-card .corner-bits.br i{background:var(--signal);opacity:.92;animation:drift-b 13s ease-in-out infinite;}
@keyframes drift-a{
    0%,100%{transform:translate(0,0) rotate(0deg);}
    20%{transform:translate(24px,15px) rotate(5deg);}
    45%{transform:translate(10px,32px) rotate(-4deg);}
    70%{transform:translate(-20px,14px) rotate(6deg);}
    88%{transform:translate(7px,-9px) rotate(-2deg);}
  }
@keyframes drift-b{
    0%,100%{transform:translate(0,0) rotate(0deg);}
    20%{transform:translate(-24px,-15px) rotate(-5deg);}
    45%{transform:translate(-10px,-32px) rotate(4deg);}
    70%{transform:translate(20px,-14px) rotate(-6deg);}
    88%{transform:translate(-7px,9px) rotate(2deg);}
  }
.cta-card .d-label{text-align:center;}
.cta-card h2{color:var(--d-text);margin:0 auto 18px;max-width:24ch;position:relative;z-index:1;}
.cta-card h2 em{color:var(--sage-400);}
.cta-card p{color:var(--d-muted);max-width:48ch;margin:0 auto 40px;position:relative;z-index:1;}
.cta-card .btn{position:relative;z-index:1;}
/* "Book a call" and "Email Henna" side by side; they stack on a narrow screen */
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;position:relative;z-index:1;}
.page-hero .page-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:0;position:relative;z-index:1;}  /* .sub already leaves 40px below it */
/* A short page (Contact) fills the window: the banner - dot field and
   all - stretches into the spare height, so the footer sits on the
   bottom edge instead of leaving a blank strip under it. */
body.fill-view{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}
body.fill-view > .page-hero{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;}
/* ============ SPECIALISMS ============ */
.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.spec-card{background:var(--white);border-radius:var(--r);padding:30px 30px 26px;border:1px solid var(--sage-200);box-shadow:var(--shadow-card);transition:.18s;position:relative;overflow:hidden;}
.spec-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);}
.spec-card .sq{width:13px;height:13px;border-radius:3.5px;background:var(--green);margin-bottom:18px;position:relative;margin-left:5px;}
.spec-card .sq::before{content:"";position:absolute;width:13px;height:13px;border-radius:3.5px;background:var(--green-deep);left:-5px;top:-5px;z-index:-1;
transition:transform .5s cubic-bezier(.34,1.56,.64,1);transform:translate(-6px,-6px);}
.spec-card:hover .sq::before{transform:translate(0,0);}
.spec-card::after{content:"";position:absolute;top:30px;left:34px;width:36px;height:36px;border-radius:50%;
background:radial-gradient(circle, rgba(10,67,63,.45), transparent 70%);
transform:scale(0);opacity:0;pointer-events:none;z-index:0;}
.spec-card:hover::after{animation:door-ripple .8s ease-out .3s forwards;}
.spec-card h4,.spec-card p{position:relative;z-index:1;}
.spec-card h4{font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:-0.02em;margin-bottom:6px;}
.spec-card p{font-size:13.5px;color:var(--muted);line-height:1.55;}
.dark-strip .spec-card{background:var(--ink);border:1px solid var(--line-ink);box-shadow:none;}
.dark-strip .spec-card:hover{box-shadow:none;border-color:var(--signal);}
.dark-strip .spec-card h4{color:var(--d-text);}
.dark-strip .spec-card p{color:var(--d-muted);}
.dark-strip .sec-intro{color:var(--d-muted);}
.dark-strip .faq details{background:var(--ink);border:1px solid var(--line-ink);box-shadow:none;}
.dark-strip .faq summary{color:var(--d-text);}
.dark-strip .faq summary::after{color:var(--mint);}
.dark-strip .faq details p{color:var(--d-muted);}
/* ============ COMPARISON (dark strip 2) ============ */
.compare{background:var(--d-card);border:1px solid var(--d-line);border-radius:var(--r);overflow:hidden;margin-top:44px;}
.compare-head,.compare-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;}
.compare-head{border-bottom:1px solid var(--d-line);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-muted);}
.compare-head div{padding:18px 26px;display:flex;align-items:center;}
.compare-head .ti{color:var(--mint);font-weight:600;}
.compare-row{border-bottom:1px solid var(--d-line);font-size:15px;}
.compare-row:last-child{border-bottom:none;}
.compare-row div{padding:17px 26px;}
.compare-row .q{font-weight:600;}
.compare-row .them{color:var(--d-muted);}
.compare-row .us{color:var(--d-text);}
.compare-row .us::before{content:"■ ";color:var(--mint);font-size:9px;vertical-align:2px;}
/* ============ INSIGHTS + NEWSLETTER ============ */
.insights-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch;}
.featured{background:var(--d-bg);color:var(--d-text);border-radius:var(--r);padding:44px;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.featured::after{content:"";position:absolute;top:-50px;right:-50px;width:150px;height:150px;border-radius:14px;background:var(--ink-deep);opacity:.5;transform:rotate(14deg);animation:drift-c 14s ease-in-out infinite;}
@keyframes drift-c{
    0%,100%{transform:rotate(14deg) translateY(0);}
    50%{transform:rotate(14deg) translateY(14px);}
  }
.featured .kind{font-family:var(--mono);font-size:12px;color:var(--mint);letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;}
.featured h3{font-family:var(--sans);font-weight:600;font-size:27px;letter-spacing:-0.025em;line-height:1.15;margin-bottom:12px;position:relative;z-index:1;max-width:18ch;}
.featured p{color:var(--d-muted);font-size:15px;max-width:44ch;flex:1;}
.featured .btn{margin-top:26px;width:fit-content;}
.post-list{display:flex;flex-direction:column;gap:16px;}
.post{background:var(--white);border-radius:var(--r);padding:24px 28px;border:1px solid var(--sage-200);box-shadow:var(--shadow-card);text-decoration:none;color:var(--ink);display:block;transition:.15s;}
.post:hover{transform:translateX(4px);}
.post h4{font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:-0.02em;margin-bottom:4px;}
.post span{font-size:13px;color:var(--muted);}
.newsletter{margin-top:26px;background:var(--sage);border-radius:var(--r);padding:26px 30px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.newsletter p{font-size:14.5px;color:var(--ink);margin:0;max-width:52ch;}
.newsletter p b{display:block;font-size:15.5px;}
.newsletter form{display:flex;gap:10px;flex-wrap:wrap;}
.newsletter input{border:1px solid var(--sage-200);background:var(--white);border-radius:100px;padding:12px 20px;font-family:var(--sans);font-size:14px;min-width:230px;outline:none;}
.newsletter input:focus{border-color:var(--green-deep);}
/* ============ FAQ ============ */
.faq{max-width:820px;}
.faq details{background:var(--white);border-radius:var(--r);margin-bottom:12px;border:1px solid var(--sage-200);box-shadow:var(--shadow-card);overflow:hidden;}
.faq summary{cursor:pointer;list-style:none;padding:22px 28px;font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:400;font-size:24px;color:var(--signal-ink);flex-shrink:0;transition:.2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{padding:0 28px 24px;color:var(--muted);font-size:15.5px;max-width:64ch;}
footer{background:var(--d-bg);color:var(--d-muted);font-size:14.5px;position:relative;overflow:hidden;}
.foot-cta{border-bottom:1px solid var(--d-line);padding:76px 0;position:relative;}
.foot-cta::after{content:"";position:absolute;top:-180px;right:-120px;width:460px;height:460px;background:radial-gradient(circle, rgba(10,67,63,.22), transparent 65%);pointer-events:none;}
.foot-cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;position:relative;z-index:1;}
.foot-cta h2{color:var(--d-text);max-width:18ch;margin:0;}
.foot-cta h2 em{color:var(--sage-400);font-style:italic;}
.foot-cta .btns{display:flex;gap:14px;flex-wrap:wrap;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:44px;padding:64px 0;}
.foot-col h5{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#5A6E6C;margin-bottom:18px;font-weight:600;}
.foot-col ul{list-style:none;}
.foot-col li{margin-bottom:11px;}
footer a{color:var(--d-muted);text-decoration:none;}
.foot-col a:not(.li-link){position:relative;transition:color .18s, padding-left .18s;}
.foot-col a:not(.li-link)::before{content:"\25A0";color:var(--mint);font-size:8px;position:absolute;left:0;top:4px;opacity:0;transition:opacity .18s;}
.foot-col a:not(.li-link):hover{color:var(--mint);padding-left:16px;}
.foot-col a:not(.li-link):hover::before{opacity:1;}
.foot-brand p{max-width:36ch;margin:20px 0 10px;font-size:14px;}
.foot-brand .biz{font-size:14px;color:#5A6E6C;}
.li-link{position:relative;width:38px;height:38px;display:inline-block;margin-top:8px;}
.li-link svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .22s ease, transform .22s ease;}
.li-link .li-blue{opacity:0;}
.li-link:hover .li-green{opacity:0;}
.li-link:hover .li-blue{opacity:1;}
.li-link:hover svg{transform:translateY(-2px);}
.foot-bottom{border-top:1px solid var(--d-line);padding:26px 0;}
.foot-bottom .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;}
.to-top{display:inline-flex;align-items:center;gap:10px;background:var(--d-card);border:1px solid var(--d-line);border-radius:100px;padding:10px 20px;color:var(--d-text);cursor:pointer;font-size:13.5px;font-family:var(--sans);transition:.18s;}
.to-top:hover{border-color:var(--mint);color:var(--mint);}
.to-top i{width:9px;height:9px;border-radius:2px;background:var(--mint);display:inline-block;}
@media(max-width:920px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px;}.foot-cta{padding:52px 0;}}
@media(max-width:920px){
.wrap{padding:0 22px;}
.hero-grid{grid-template-columns:1fr;}
.hero-copy{padding:70px 0 50px;}
.graph{min-height:340px;border-left:none;border-top:none;margin-right:-22px;}
.stats{grid-template-columns:1fr 1fr;}
.stat:nth-child(3){grid-column:1 / -1;}
.stat{border-bottom:1px solid var(--sage-200);}
.doors,.svc,.quotes,.steps,.founder-grid,.spec,.insights-grid,.net-grid{grid-template-columns:1fr;}
.compare-head .ti,.compare-head .th,.compare-row .them{display:none;}
.compare-head,.compare-row{grid-template-columns:1fr 1fr;}
.live-row{grid-template-columns:1fr auto;}
.live-row .dim{display:none;}
section{padding:60px 0;}
.cta-card{padding:64px 28px;}
  }
.btn.btn-sm{padding:9px 20px;font-size:13.5px;}
.nav-links a.btn-sm + a.btn-sm{margin-left:-18px;}
h2 + .spec{margin-top:44px;}
.book-choice{display:flex;flex-direction:column;gap:16px;}
.book-choice .choice{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;background:var(--white);border:1px solid var(--sage-200);border-radius:var(--r);padding:30px 34px;text-decoration:none;color:var(--ink);transition:.18s;}
.book-choice .choice:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);}
.book-choice .choice .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.book-choice .choice b{font-size:19px;color:var(--ink);font-family:var(--sans);font-weight:600;letter-spacing:-0.02em;}
.book-choice .choice p{font-size:14.5px;color:var(--muted);margin:0;}
.li-inline{width:34px;height:34px;margin-top:0;margin-left:12px;vertical-align:-6px;}
.quotes{display:flex;}
.quote{flex:1 1 0;min-width:0;transition:flex-grow .35s ease;}
.quote:hover{flex-grow:2.4;}
.quote p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden;}
.quote:hover p{display:block;-webkit-line-clamp:unset;overflow:visible;}
/* ============ MOBILE ============ */
.nav-toggle{display:none;background:none;border:0;padding:10px 2px 10px 12px;cursor:pointer;flex-direction:column;gap:5px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--d-text);border-radius:2px;transition:transform .25s ease,opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.quotes.cols-2{grid-template-columns:1fr 1fr;}
.spec.cols-2{grid-template-columns:1fr 1fr;}
.weeks.cols-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:920px){
.nav-toggle{display:flex;}
.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--ink);border-bottom:1px solid var(--d-line);padding:10px 22px 24px;box-shadow:0 24px 40px rgba(0,0,0,.35);}
.nav-links.open{display:flex;}
.nav-links a{display:block;padding:15px 2px;font-size:16.5px;color:var(--d-text);border-bottom:1px solid var(--d-line);}
.nav-links a.btn{margin-top:14px;text-align:center;border-bottom:none;padding:13px 26px;font-size:14.5px;}
.nav-links a.btn-sm + a.btn-sm{margin-left:0;margin-top:10px;}
.quotes.cols-2{grid-template-columns:1fr;}
.spec.cols-2{grid-template-columns:1fr;}
.weeks.cols-4{grid-template-columns:1fr 1fr;}
    /* hover effects replay when scrolled into view (driven by .in-view from script) */
.door.in-view{transform:translateY(-5px);}
.door.in-view .bits-bg i{transform:translate(0,0);}
.door.in-view::after{animation:door-ripple .9s ease-out .32s forwards;}
.svc-card.in-view .icon i:first-child{transform:translate(-2.5px,-2.5px);}
.svc-card.in-view .icon i:last-child{transform:translate(2.5px,2.5px);}
.svc-card.in-view::after{animation:door-ripple .9s ease-out .3s forwards;}
.spec-card.in-view{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);}
.spec-card.in-view .sq::before{transform:translate(0,0);}
.spec-card.in-view::after{animation:door-ripple .8s ease-out .3s forwards;}
.net-points li.in-view .nsq::before{transform:translate(0,0);}
.net-points li.in-view .nsq{animation:ring-burst .7s ease-out .3s;}
.post.in-view{transform:translateX(4px);}
.quotes{flex-direction:column;}
.quote:hover{flex-grow:1;}
.quote p{display:block;-webkit-line-clamp:unset;overflow:visible;}
.founder-grid .photo-card{order:2;}
  }
@media(max-width:560px){
.wrap{padding:0 18px;}
.hire-item summary{padding:16px 18px;gap:12px;}
.hire-item .tags{padding:14px 18px 18px;gap:8px;}
.hire-item .tag{font-size:13px;padding:7px 12px;}
.graph{margin-right:-18px;}
section{padding:52px 0;}
.dark-strip section{padding:56px 0;}
.page-hero{padding:84px 0 62px;}
.stat{padding:20px 18px;}
.stat .v{font-size:24px;}
.trust .wrap{gap:12px 26px;}
.trust span{font-size:16px;}
.door{padding:34px 26px;}
.svc-card{padding:30px 24px;}
.quote{padding:26px 22px;}
.cta-card{padding:56px 22px;}
.foot-grid{grid-template-columns:1fr;gap:30px;padding:46px 0;}
.newsletter{padding:22px;}
.newsletter form{width:100%;}
.newsletter input{flex:1;min-width:0;}
.live-head,.live-row{padding-left:18px;padding-right:18px;}
.compare-head div,.compare-row div{padding:14px 16px;}
.contact-card{padding:30px 24px;}
.founder-grid,.net-grid{gap:36px;}
.hero-copy{padding:56px 0 44px;}
.status{font-size:11.5px;padding:7px 14px;gap:8px;white-space:nowrap;}
  }
@media (prefers-reduced-motion: reduce){
.net-points li.in-view .nsq,.door.in-view::after,.svc-card.in-view::after,.spec-card.in-view::after{animation:none !important;}
.door.in-view .bits-bg i,.svc-card.in-view .icon i,.spec-card.in-view .sq::before,.net-points li.in-view .nsq::before{transition:none;}
  }
.intro-copy{margin-top:24px;}
.intro-copy p{color:var(--muted);max-width:68ch;margin-bottom:22px;}
.page-hero{position:relative;background:var(--d-bg);color:var(--d-text);text-align:center;padding:110px 0 90px;overflow:hidden;}
.page-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,207,189,.13) 1px, transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 65% 75% at 50% 15%, #000 20%, transparent 72%);mask-image:radial-gradient(ellipse 65% 75% at 50% 15%, #000 20%, transparent 72%);}
.page-hero::after{content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);width:720px;height:480px;background:radial-gradient(ellipse, rgba(10,67,63,.26), transparent 65%);pointer-events:none;}
.page-hero .wrap{position:relative;z-index:1;}
.page-hero h1{max-width:22ch;margin:0 auto;font-family:var(--sans);font-weight:600;font-size:clamp(38px,5.2vw,64px);line-height:1.02;letter-spacing:-0.035em;text-wrap:balance;}
.page-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-0.01em;color:var(--sage-400);}
.page-hero .kicker{display:inline-block;font-size:14.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);font-weight:600;margin-bottom:22px;}
.page-hero .sub{color:var(--d-muted);max-width:56ch;margin:24px auto 40px;font-size:18px;}
.page-hero .hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.svc-card ul{list-style:none;margin-top:20px;}
.svc-card ul li{padding:9px 0;border-top:1px solid var(--sage-200);font-size:14.5px;color:var(--ink);}
.svc-card ul li::before{content:"\25C6  ";color:var(--green-deep);font-size:10px;vertical-align:1px;}
.weeks{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.week{background:var(--white);border-radius:var(--r);padding:22px 18px;border:1px solid var(--sage-200);box-shadow:var(--shadow-card);cursor:var(--cursor-bit);}
.week .w{font-family:var(--mono);font-size:11px;color:var(--green-deep);text-transform:uppercase;letter-spacing:.08em;}
.week h5{font-size:14.5px;margin:8px 0 6px;}
.week p{font-size:13px;color:var(--muted);line-height:1.5;}
.booking{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:stretch;}
.contact-card{background:var(--white);border-radius:var(--r);padding:42px;border:1px solid var(--sage-200);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:16px;cursor:var(--cursor-bit);}
.contact-card a{color:var(--green-deep);font-weight:600;text-decoration:none;font-size:17px;}
.contact-card a:hover{text-decoration:underline;}
.contact-card .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:-10px;}
.cal-box{border:2px dashed var(--sage-deep);border-radius:var(--r);min-height:400px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:var(--mono);font-size:13px;background:var(--white);text-align:center;padding:20px;}
.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.note-mono{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:18px;}
.page-hero{cursor:var(--cursor-bit);}
.page-hero.has-canvas::before{opacity:0;}
.dot-canvas{position:absolute;inset:0;pointer-events:none;}
/* ============ SERVICE PAGES: pull the copy closer to the hero ============ */
.page-hero.svc-hero{padding-bottom:52px;}
.page-hero.svc-hero .sub{margin-bottom:4px;}
.svc-intro{padding-top:44px;}
.svc-intro .intro-copy p:first-child{font-size:19px;color:var(--ink);}
.steps.cols-5{grid-template-columns:repeat(5,1fr);}
.steps.cols-3{grid-template-columns:repeat(3,1fr);}
.svc-sub{color:var(--d-muted);font-size:18px;margin-top:12px;}
.svc-intro .svc-title{margin:0 0 10px;}  /* the banner h1 rule centres with margin:auto; the service intro is left-aligned */
.svc-tagline{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,2.2vw,26px);line-height:1.25;color:var(--muted);margin-bottom:26px;}
h2.svc-h2{font-size:clamp(26px,2.6vw,34px);}

/* ============ LIGHT SURFACES ============
   Black is now reserved for two things: the header, and the photo frame
   in the founder block. Everything else is white with Sage 200 hairlines
   and a soft shadow where a card needs to separate. The contact card at
   the bottom keeps its Ink treatment untouched. */

/* --- the header stays black; the glass island stays dark glass --- */
header{background:var(--black);border-bottom:none;}
header.scrolled{background:rgba(0,0,0,.82);}

/* --- hero --- */
.hero{background:var(--white);color:var(--ink);}
.hero::before{display:none;}
h1{color:var(--ink);}
h1 em{color:var(--muted);}
.hero-sub{color:var(--muted);}
.status{color:var(--muted);border-color:var(--sage-200);background:var(--white);}
.status i{box-shadow:none;}

/* The bit graph was drawn for a dark ground: its rules and sweep are
   light-on-dark. Invert those to ink-on-white and keep everything else
   - geometry, timing, the Signal front bit - exactly as it was. */
.graph .gridlayer{background-image:
  linear-gradient(rgba(4,41,37,.07) 1px, transparent 1px),
  linear-gradient(90deg, rgba(4,41,37,.07) 1px, transparent 1px);}
.graph .scan{background:linear-gradient(90deg,transparent,rgba(4,41,37,.035),transparent);}
.pulse{background-image:
  linear-gradient(rgba(0,165,148,.40) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0,165,148,.40) 1px, transparent 1px);}
.pulse.p2{background-image:
  linear-gradient(rgba(0,165,148,.30) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0,165,148,.30) 1px, transparent 1px);}
.cell{background:rgba(4,41,37,.06);}
.bit.w1{background:var(--signal);opacity:.55;}
.bit.w2{background:var(--sage-200);opacity:.9;}
.bit.w3{background:var(--sage-200);opacity:.55;}

/* Buttons sitting on white rather than on ink */
.hero .btn-glow,.page-hero .btn-glow{background:var(--ink);color:var(--white);border-color:var(--ink);}
.hero .btn-glow:hover,.page-hero .btn-glow:hover{background:var(--ink-deep);border-color:var(--ink-deep);color:var(--white);}
/* opaque, not transparent: the dot field sits behind the copy and would
   otherwise show straight through the button and read as being on top */
.hero .btn-dline,.page-hero .btn-dline{color:var(--ink);border-color:var(--ink);background:var(--white);}
.hero .btn-dline:hover,.page-hero .btn-dline:hover{background:var(--ink);color:var(--white);border-color:var(--ink);}

/* --- trusted-by strip --- */
.trust{background:var(--white);border-top:1px solid var(--sage-200);border-bottom:1px solid var(--sage-200);}
.trust span{color:var(--ink);}
.trust small{color:var(--muted);}

/* --- page banners --- */
.page-hero{background:var(--white);color:var(--ink);}
.page-hero::after{display:none;}
.page-hero h1{color:var(--ink);}
.page-hero h1 em{color:var(--muted);}
.page-hero .kicker{color:var(--signal-ink);}
.page-hero .sub{color:var(--muted);}
.svc-sub{color:var(--muted);}

/* --- the two dark bands --- */
.dark-strip{background:var(--white);color:var(--ink);}
.dark-strip h2{color:var(--ink);}
.dark-strip h2 em{color:var(--muted);}
.dark-strip .sec-intro{color:var(--muted);}
.dark-strip .d-label{color:var(--signal-ink);}
.dark-strip .spec-card{background:var(--white);border:1px solid var(--sage-200);box-shadow:var(--shadow-card);}
.dark-strip .spec-card:hover{box-shadow:var(--shadow-card-hover);border-color:var(--sage-200);}
.dark-strip .spec-card h4{color:var(--ink);}
.dark-strip .spec-card p{color:var(--muted);}
.dark-strip .faq details{background:var(--white);border:1px solid var(--sage-200);box-shadow:var(--shadow-card);}
.dark-strip .faq summary{color:var(--ink);}
.dark-strip .faq summary::after{color:var(--signal-ink);}
.dark-strip .faq details p{color:var(--muted);}

/* --- cards that were Ink --- */
.door.employer{background:var(--white);color:var(--ink);border:1px solid var(--sage-200);box-shadow:var(--shadow-card);}
.door.employer .door-tag,.door.employer .go{color:var(--muted);}
.door.employer .bits-bg i:first-child{background:var(--sage-200);}
.door.employer .bits-bg i:last-child{background:var(--ink);}
.live,.compare{background:var(--white);border:1px solid var(--sage-200);box-shadow:var(--shadow-card);}
.live-head,.live-row,.compare-head,.compare-row{border-bottom-color:var(--sage-200);}
.live-head,.live-head b,.compare-head{color:var(--ink);}
.live-head b i{box-shadow:none;background:var(--signal-ink);}
.live-row .dim,.compare-row .them{color:var(--muted);}
.compare-row .us{color:var(--ink);}
.step{background:var(--white);border:1px solid var(--sage-200);box-shadow:var(--shadow-card);}
.step p{color:var(--muted);}
.featured{background:var(--white);color:var(--ink);border:1px solid var(--sage-200);box-shadow:var(--shadow-card);}
.featured p{color:var(--muted);}
.featured::after{display:none;}

/* --- footer --- */
footer{background:var(--white);color:var(--muted);border-top:1px solid var(--sage-200);}
footer a{color:var(--muted);}
.foot-col a:not(.li-link):hover{color:var(--ink);}
.foot-col a:not(.li-link)::before{color:var(--signal-ink);}
.foot-cta{border-bottom-color:var(--sage-200);}
.foot-cta h2{color:var(--ink);}
.foot-cta h2 em{color:var(--muted);}
.foot-cta::after{display:none;}
.foot-bottom{border-top-color:var(--sage-200);}
.to-top{background:var(--white);border-color:var(--sage-200);color:var(--ink);}
.to-top:hover{border-color:var(--ink);color:var(--ink);}
.to-top i{background:var(--signal-ink);}

/* contact.html is banner + footer only - it runs on the white ground now */
body.page-ink{background:var(--white);}

/* --- the two things that stay black --- */
.photo-card{background:transparent;}
/* the terminal sits directly under the photo in the same block, and a
   terminal reading light-on-dark is the whole point of the motif */
.terminal{background:var(--black);}
.terminal .dots i{background:#2A2A2A;}
.terminal .dots i:first-child{background:var(--signal);}


/* ============ GLASS ISLAND NAV ============
   At the top the nav is flush black on the black hero. Once the page
   moves, the bar detaches into a floating frosted island.

   The header keeps its 74px throughout - it gains 8px of padding top and
   bottom exactly as the island loses 16px of height - so the content
   below never shifts when the class flips. */
header{transition:background .28s ease, padding .28s ease;}

/* The island is drawn on a layer behind the nav rather than on the nav
   itself, and reaches 24px past the content on each side. The nav takes
   no padding in either state, so the logo, the links and the button hold
   exactly the same x position whether the header is flat or floating -
   only the shape behind them changes. (It used to pad the nav, which
   pushed the logo 26px right and the button 12px left on every scroll.)

   Vertically, the header gains 8px top and bottom as the nav loses 16px,
   so the row's centre line stays at 37px the whole way through. No
   z-index on the nav: a stacking context there could cut the blur off
   from the page behind it. */
nav{position:relative;transition:height .28s ease;}
nav::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;bottom:0;left:0;right:0;
  border:1px solid transparent;
  border-radius:var(--pill);
  pointer-events:none;
  transition:left .28s ease, right .28s ease, background .28s ease,
             border-color .28s ease, box-shadow .28s ease;
}

header.scrolled{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:8px 0;}
header.scrolled nav{height:58px;}
header.scrolled nav::before{
  left:-24px;right:-24px;
  background:rgba(0,0,0,.82);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
}
/* Without backdrop-filter the island would be a washed-out panel, so
   fall back to a near-solid one instead. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.scrolled nav::before{background:rgba(0,0,0,.94);}
}
/* The island floats over white content further down the page, so the
   links step up from Sage 400 to Sage 50 to hold their contrast. */
header.scrolled .nav-links a:not(.btn){color:var(--sage-50);}
header.scrolled .nav-links a:not(.btn):hover{color:var(--signal);}

/* ============ FULL-SCREEN HERO ============
   The hero and the trusted-by strip together fill exactly one screen, so
   the first scroll is what reveals the stats. Sized off the viewport
   rather than a fixed height, with a floor so a short window doesn't
   crush the copy. */
.hero-grid{min-height:max(var(--hero-floor), calc(100vh - var(--nav-h) - var(--trust-h)));}
@supports (height:100svh){
  /* svh so mobile browser chrome appearing doesn't resize the hero */
  .hero-grid{min-height:max(var(--hero-floor), calc(100svh - var(--nav-h) - var(--trust-h)));}
}

@media(max-width:920px){
  /* Stacked layout: the hero sizes to its content instead of a screen,
     since copy plus the graph already runs past most phone viewports. */
  .hero-grid{min-height:auto;}
  /* And the island gives way to a full-width frosted bar, so the
     dropdown menu still hangs off a full-width edge. */
  header.scrolled{padding:0;background:rgba(0,0,0,.82);
    -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);}
  header.scrolled nav{height:var(--nav-h);}
  header.scrolled nav::before{display:none;}
}



/* ============ TESTIMONIAL DECK ============
   A fanned deck: the active quote sits square-on in Ink with a turned
   corner, the neighbours fan out behind it, rotated and scaled back.
   Stepping through slides the deck sideways rather than cross-fading.

   Card transforms are written by the script so the fan can respond to
   the container width; everything here is the look, not the position. */
.deck{position:relative;margin-top:46px;}
.deck-stage{position:relative;transition:height .5s cubic-bezier(.4,0,.2,1);}

.deck .quote{
  position:absolute;top:0;left:50%;
  width:min(440px, 86vw);
  margin:0;
  transform-origin:50% 60%;
  transition:transform .55s cubic-bezier(.33,.1,.25,1),
             opacity .4s ease, background-color .4s ease,
             border-color .4s ease, box-shadow .4s ease;
  will-change:transform, opacity;
}
/* the deck shows each quote in full - no line clamp, no hover-to-expand */
.deck .quote p{display:block;-webkit-line-clamp:unset;overflow:visible;flex:1 1 auto;}
.deck .quote:hover{flex-grow:0;}
.deck .quote:not(.is-active){cursor:pointer;}

/* the card on top */
.deck .quote.is-active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--sage-50);
  box-shadow:0 26px 60px rgba(4,41,37,.26);
  /* the turned corner */
  clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
.deck .quote.is-active::after{
  content:"";position:absolute;top:0;right:0;width:34px;height:34px;
  background:linear-gradient(225deg, rgba(255,255,255,.22) 0 50%, transparent 50%);
  pointer-events:none;
}
.deck .quote.is-active p{color:var(--sage-50);}
.deck .quote.is-active .stars{color:var(--signal);}
.deck .quote.is-active .who b{color:var(--white);}
.deck .quote.is-active .who span{color:var(--sage-400);}
.deck .quote.is-active .ava{background:linear-gradient(140deg,var(--sage-400),var(--signal));}

.deck-nav{display:flex;gap:10px;justify-content:center;margin-top:30px;}
.deck-btn{
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--white);border:1px solid var(--sage-200);border-radius:10px;
  color:var(--ink);cursor:pointer;font-family:var(--sans);font-size:20px;line-height:1;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.deck-btn:hover{border-color:var(--ink);}
.deck-btn:focus-visible{outline:2px solid var(--signal-ink);outline-offset:2px;}

/* Reduced motion: keep the layout, drop the travel. */
@media (prefers-reduced-motion: reduce){
  .deck .quote,.deck-stage{transition:none !important;}
}

@media(max-width:760px){
  /* No room to fan - show the active card alone, full width. */
  .deck .quote{width:100%;}
  .deck .quote.is-active{clip-path:none;}
  .deck .quote.is-active::after{display:none;}
}

/* ============ FOOTER BASE BAR ============
   The copyright strip at the very bottom runs black, so each page closes
   on the same surface it opened with in the header. */
.foot-bottom{background:var(--black);border-top:none;color:var(--sage-400);}
.foot-bottom span{color:var(--sage-400);}
.to-top{background:transparent;border-color:var(--line-black);color:var(--sage-50);}
.to-top:hover{border-color:var(--signal);color:var(--signal);}
.to-top i{background:var(--signal);}

/* The fan reaches well past the text column by design. Clip it at the
   section, which already spans the page, so the cards bleed to the
   window edges and never push the page into a horizontal scroll.
   overflow-x:clip rather than hidden - hidden would force the vertical
   axis to scroll and cut the active card's shadow. */
.deck-section{overflow-x:clip;}

/* ============ PULL QUOTE ============
   The shorter testimonials carry their standout line above the stars,
   set large so it reads as the card's headline and the spare space
   below becomes deliberate rather than empty. Only the cards with room
   have one - the longest two fill their card already. */
.deck .quote .pull{
  font-size:21px;
  line-height:1.3;
  font-weight:500;
  letter-spacing:-0.022em;
  margin:0;
  text-wrap:pretty;
  transition:color .4s ease;
  /* setup clause muted, payoff at full contrast - never the reverse */
  color:var(--muted);
}
.deck .quote .pull .hi{color:var(--ink);transition:color .4s ease;}
.deck .quote.is-active .pull{color:var(--sage-400);}
.deck .quote.is-active .pull .hi{color:var(--white);}
/* the body text steps back so the pull quote leads */
.deck .quote .pull ~ p{font-size:15px;color:var(--muted);}
.deck .quote.is-active .pull ~ p{color:var(--sage-400);}

@media(max-width:560px){
  .deck .quote .pull{font-size:18.5px;}
}

/* ============ HERO DOT FIELD ============
   The same dot pattern the page banners carry, brought onto the
   homepage hero. It sits between the two layers: z-index 1 puts it in
   front of the photo (absolutely positioned, so z-index auto) and
   behind the copy, which already claims z-index 2.

   Re-enables .hero::before, which the light-surfaces pass had switched
   off when it was still the old green glow. */
.hero::before{
  display:block;
  content:"";
  position:absolute;
  inset:0;
  top:0;
  left:0;
  width:auto;
  height:auto;
  z-index:1;
  pointer-events:none;
  background:none;
  background-image:radial-gradient(rgba(0,207,189,.22) 1px, transparent 1px);
  background-size:26px 26px;
  /* no mask: the field runs edge to edge rather than fading out */
}

/* The canvas version of the dot field: same layer as the CSS dots, in
   front of the photo and behind the copy, but it reacts to the cursor -
   dots push away and brighten under it. The CSS ::before stays as the
   fallback and switches off once the script takes over, matching how
   the page banners already work. */
.hero .dot-canvas{z-index:1;}
.hero.has-canvas::before{opacity:0;}

/* ============ CURSOR ============
   The bit cursor everywhere, not just over the hero and the cards - it
   was flipping back to the system arrow on every plain surface in
   between. Listed with the classes that set cursor:pointer so it wins
   on specificity rather than relying on source order.
   Text fields keep the I-beam, so typing still reads as typing. */
html,body{cursor:var(--cursor-bit);}
a,button,summary,label,[role="button"],
.btn,.deck-btn,.to-top,.nav-toggle,.faq summary,.hire-item summary,
.deck .quote:not(.is-active){cursor:var(--cursor-bit);}
input[type="text"],input[type="email"],input[type="search"],textarea{cursor:text;}


/* ============ SERVICE PAGE BANNER ============
   The title block now sits inside the banner rather than in a section
   below it, so the reactive field runs behind the heading instead of
   stopping in a strip above it. The banner drops its own padding and
   lets the intro carry the spacing; alignment goes back to left, since
   .page-hero centres its content for the other pages. */
.page-hero.svc-hero{padding:0;text-align:left;}
.page-hero.svc-hero .svc-intro{position:relative;z-index:1;padding:96px 0 84px;}

/* TEMP: the deck cards stay opaque so they mask the ones behind them -
   only the text inside fades back, driven by --card-ink from the script.
   Before this the whole card was faded and you could read one through
   another. */
.deck .quote > *{opacity:var(--card-ink,1);transition:opacity .4s ease;}

/* ============ SERVICE CROSS-LINK ============
   Each service page points at the other one, just above the contact
   card. Built from the names and taglines already used on the homepage
   service cards, so it introduces no new wording. */
.svc-cross .cross-link{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:26px 30px;
  background:var(--white);
  border:1px solid var(--sage-200);
  border-radius:var(--r);
  box-shadow:var(--shadow-card);
  text-decoration:none;color:var(--ink);
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.svc-cross .cross-link:hover{box-shadow:var(--shadow-card-hover);border-color:var(--ink);}
.svc-cross .cross-bits{display:flex;gap:6px;flex-shrink:0;}
.svc-cross .cross-bits i{width:14px;height:14px;border-radius:2px;background:var(--sage-200);}
.svc-cross .cross-bits i:last-child{background:var(--signal);}
.svc-cross .cross-body{display:flex;flex-direction:column;gap:2px;margin-right:auto;}
.svc-cross .cross-body b{font-size:20px;font-weight:600;letter-spacing:-0.02em;}
.svc-cross .cross-tag{font-family:var(--serif);font-style:italic;font-weight:300;font-size:17px;color:var(--muted);}
.svc-cross .go{font-size:14.5px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--signal);padding-bottom:3px;white-space:nowrap;}
@media(max-width:560px){
  .svc-cross .cross-link{gap:14px;padding:22px;}
  .svc-cross .go{width:100%;}
}

/* ============ SERVICES DROPDOWN ============
   Services opens to the two service pages, so they are reachable without
   going via the homepage anchor first. Opens on hover and on keyboard
   focus, so it is not mouse-only. */
.nav-item.has-sub{position:relative;display:inline-flex;align-items:center;}
.nav-sub{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  display:flex;flex-direction:column;min-width:190px;
  padding:8px;
  background:rgba(0,0,0,.92);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line-black);
  border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-item.has-sub:hover .nav-sub,
.nav-item.has-sub:focus-within .nav-sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav-links .nav-sub a{padding:9px 12px;border-radius:9px;font-size:13.5px;white-space:nowrap;}
.nav-links .nav-sub a:hover{background:rgba(255,255,255,.07);color:var(--signal);}

@media(max-width:920px){
  /* the nav is already a stacked dropdown here - show the two inline,
     indented, rather than nesting a flyout inside a flyout */
  .nav-item.has-sub{display:block;}
  .nav-sub{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:0;min-width:0;
  }
  .nav-links .nav-sub a{padding-left:18px;font-size:15px;opacity:.85;}
}

/* ============ DECK CARD FOOTER ============
   The attribution - avatar, name, role - sits in the normal flow at the
   foot of the card, with a clear gap above it. It used to be pinned to
   the bottom over a fixed reserve of padding, which let a role that
   wraps to two lines grow up into the text above. */
.deck .quote .who{margin-top:12px;}

/* ============ COPY OVER THE FIELD ============
   The hero and banner copy sits on top of the dot/glyph field, and at
   rest the characters crowd the text and make it harder to read. A
   stacked white glow burns a clear halo around the letters - several
   passes of the same shadow rather than one, since text-shadow has no
   spread of its own and compounding is the only way to get an opaque
   core out to ~20px.

   On hover the halo fades out, so the green glow and the scrambling
   characters come through around the words instead. */
.hero-copy h1,
.hero-copy .hero-sub,
.page-hero h1,
.page-hero .sub,
.page-hero .kicker,
.svc-intro .svc-title,
.svc-intro .svc-tagline,
.svc-intro .intro-copy p{
  text-shadow:
    0 0 20px #fff, 0 0 20px #fff, 0 0 20px #fff,
    0 0 10px #fff, 0 0 10px #fff, 0 0 4px #fff;
  transition:text-shadow .35s ease;
}
.hero-copy:hover h1,
.hero-copy:hover .hero-sub,
.page-hero:hover h1,
.page-hero:hover .sub,
.page-hero:hover .kicker,
.svc-intro:hover .svc-title,
.svc-intro:hover .svc-tagline,
.svc-intro:hover .intro-copy p{
  text-shadow:none;
}

@media (prefers-reduced-motion: reduce){
  /* no fade - the halo simply stays, so the copy is always legible */
  .hero-copy h1,.hero-copy .hero-sub,
  .page-hero h1,.page-hero .sub,.page-hero .kicker,
  .svc-intro .svc-title,.svc-intro .svc-tagline,.svc-intro .intro-copy p{transition:none;}
  .hero-copy:hover h1,.hero-copy:hover .hero-sub,
  .page-hero:hover h1,.page-hero:hover .sub,.page-hero:hover .kicker,
  .svc-intro:hover .svc-title,.svc-intro:hover .svc-tagline,.svc-intro:hover .intro-copy p{
    text-shadow:0 0 20px #fff, 0 0 20px #fff, 0 0 20px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 4px #fff;
  }
}

/* ============ HOMEPAGE HERO: DARK, WITH AURORA ============
   The homepage hero only - every other banner stays white. A deep
   green-black ground with slow drifting aurora light in the brand
   greens behind the dot field, and the copy in its light-on-dark
   colours. Stacking: aurora (::after, z 0) < dot field (z 1) < copy (z 2).
   It meets the black header above it. */
.hero{
  --hero-ground:#021A17;
  --field-rest:166,193,192;   /* Sage 400 - read by dotfield.js */
  --field-glow:0,207,189;     /* Signal */
  background:var(--hero-ground);
  color:var(--sage-50);
}
.hero::after{
  content:"";
  position:absolute;
  inset:-25% -15%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(38% 46% at 22% 34%, rgba(0,207,189,.30), transparent 70%),
    radial-gradient(30% 42% at 74% 22%, rgba(46,196,140,.22), transparent 70%),
    radial-gradient(46% 38% at 58% 88%, rgba(10,120,104,.40), transparent 72%),
    radial-gradient(26% 30% at 88% 70%, rgba(0,165,148,.18), transparent 70%);
  filter:blur(48px);
  animation:hero-aurora 24s ease-in-out infinite alternate;
}
@keyframes hero-aurora{
  0%  {transform:translate3d(-4%,-2%,0) rotate(0deg)  scale(1);}
  50% {transform:translate3d(3%,3%,0)  rotate(5deg)  scale(1.08);}
  100%{transform:translate3d(-1%,4%,0) rotate(-4deg) scale(1.03);}
}
@media (prefers-reduced-motion: reduce){ .hero::after{animation:none;} }

.hero h1{color:var(--white);}
.hero h1 em{color:var(--sage-400);}
.hero-sub{color:var(--sage-400);}

/* the halo that clears the glyphs from around the letters is dark here */
.hero-copy h1,
.hero-copy .hero-sub{
  text-shadow:
    0 0 20px var(--hero-ground), 0 0 20px var(--hero-ground), 0 0 20px var(--hero-ground),
    0 0 10px var(--hero-ground), 0 0 10px var(--hero-ground), 0 0 4px var(--hero-ground);
}
.hero-copy:hover h1,
.hero-copy:hover .hero-sub{text-shadow:none;}
@media (prefers-reduced-motion: reduce){
  .hero-copy:hover h1,.hero-copy:hover .hero-sub{
    text-shadow:0 0 20px var(--hero-ground), 0 0 20px var(--hero-ground), 0 0 20px var(--hero-ground),
                0 0 10px var(--hero-ground), 0 0 10px var(--hero-ground), 0 0 4px var(--hero-ground);
  }
}

/* buttons back to their on-dark forms: white primary that turns Signal
   on hover; an outline kept opaque so the field doesn't show through */
.hero .btn-glow{background:var(--white);color:var(--ink);border-color:var(--white);}
.hero .btn-glow:hover{background:var(--signal);border-color:var(--signal);color:var(--ink);}
.hero .btn-dline{background:var(--hero-ground);color:var(--sage-50);border-color:rgba(230,237,237,.35);}
.hero .btn-dline:hover{background:var(--hero-ground);color:var(--signal);border-color:var(--signal);}

/* The white banners (About, Contact, Insights, the service pages): the
   resting dots a touch larger than the field's default 1.1px, in the
   same light grey (13%) as before. The dark homepage hero keeps the
   defaults. */
.page-hero{--field-dot:1.45;}

/* About's banner: 100px taller than the others in total - 50 more above
   the copy, 50 more below (110/90 -> 160/140). Desktop only; the phone
   padding is left as it is. */
@media(min-width:921px){
  .page-hero.page-hero--tall{padding:160px 0 140px;}
}

/* White banners: the copy sits in a pure-white halo so the dots behind
   never wash into the letters. Tight layers build a solid white core
   right around each glyph, the wider ones feather it out to ~24px.
   It stays on - no fade on hover - so the text is always clean. The
   dark homepage hero has its own halo. */
.page-hero{
  --halo-white:
    0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff,
    0 0 6px #fff, 0 0 6px #fff, 0 0 8px #fff, 0 0 8px #fff,
    0 0 12px #fff, 0 0 12px #fff, 0 0 16px #fff, 0 0 16px #fff,
    0 0 24px #fff, 0 0 24px #fff;
}
.page-hero h1,
.page-hero .sub,
.page-hero .kicker,
.svc-intro .svc-title,
.svc-intro .svc-tagline,
.svc-intro .intro-copy p,
.page-hero:hover h1,
.page-hero:hover .sub,
.page-hero:hover .kicker,
.svc-intro:hover .svc-title,
.svc-intro:hover .svc-tagline,
.svc-intro:hover .intro-copy p{
  text-shadow:var(--halo-white);
}

/* ============ HOMEPAGE HERO AS A CARD ============
   The hero sits inset from the page edges as a rounded dark card on
   the white page, sized so the stats row lands on the window's bottom.
   */
:root{--hero-inset:clamp(10px, 1.4vw, 20px);}
/* the card sits on the white page, inset from its edges */
.hero-frame{background:var(--white);padding:var(--hero-inset);}
.hero{margin:0;border-radius:28px;isolation:isolate;}
/* The card is sized so the first screen ends exactly at the bottom of
   the stats row: header + card (with its frame) + trusted-by + stats =
   the window. --trust-h / --stats-h are measured and kept in sync by
   hero-bits.js; these are the fallbacks. Floor so a short window
   doesn't crush the copy. */
:root{--stats-h:143px;}
/* on desktop the copy's own padding is trimmed and the floor lowered,
   so the whole first screen fits a 1366x768 laptop too; the copy stays
   centred in whatever height the card gets */
@media(min-width:921px){
  :root{--hero-floor:400px;}
  .hero-copy{padding:60px 0 56px;}
}
.hero-grid{min-height:max(var(--hero-floor), calc(100vh - var(--nav-h) - var(--trust-h) - var(--stats-h) - 2 * var(--hero-inset)));}
@supports (height:100svh){
  .hero-grid{min-height:max(var(--hero-floor), calc(100svh - var(--nav-h) - var(--trust-h) - var(--stats-h) - 2 * var(--hero-inset)));}
}
@media(max-width:920px){
  .hero{border-radius:20px;}
  .hero-grid{min-height:auto;}
}

/* ---- the two logo bits, loose in the card (assets/js/hero-bits.js) ----
   Stacking inside the card: aurora (0) < bits (1) < dot field (2) <
   copy (3). Colours are the logo's Sage and Signal pre-mixed with the
   dark ground rather than faded with opacity, so where the pair overlaps
   the Signal bit covers the Sage one cleanly, as in the mark. */
.hero .dot-canvas{z-index:2;}
.hero-copy{z-index:3;}
.hero-bits{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .8s ease;}
.hero-bits.ready{opacity:1;}
.hero-bits i{position:absolute;top:0;left:0;display:block;border-radius:12.26%;will-change:transform;}  /* the logo file's 8.25 on a 67.27 square */
.hero-bits .hb-a{background:#5C7674;}
.hero-bits .hb-b{background:#00AB9C;box-shadow:0 0 44px rgba(0,207,189,.28);}
/* the click as they lock together in a corner */
.hero-bits.clicked i{animation:bits-click .7s ease-out;}
@keyframes bits-click{
  0%  {filter:brightness(1);}
  25% {filter:brightness(1.55);}
  100%{filter:brightness(1);}
}

/* ---- the easter egg: when the bits join they take the logo's exact
   colours, and the wordmark flashes in beside them. */
.hero-bits i{transition:background-color .25s ease;}
.hero-bits.clicked .hb-a{background:#A6C1C0;}
.hero-bits.clicked .hb-b{background:#00CFBD;}
.hb-word{position:absolute;top:0;left:0;opacity:0;pointer-events:none;transition:opacity .6s ease;}
.hb-word img{display:block;width:100%;height:100%;}
.hb-word.on{opacity:1;transition:opacity .18s ease;animation:word-flash .9s ease-out;}
@keyframes word-flash{
  0%  {filter:brightness(1) drop-shadow(0 0 0 rgba(0,207,189,0));}
  30% {filter:brightness(1.4) drop-shadow(0 0 18px rgba(0,207,189,.55));}
  100%{filter:brightness(1) drop-shadow(0 0 0 rgba(0,207,189,0));}
}

/* ============ TESTIMONIAL COMPANY LOGOS ============
   The company under each name and role is its logo rather than text,
   drawn in one colour through a mask so it takes the card's own muted
   tone - Muted on the white cards behind, Sage 400 on the dark card in
   front - and follows the card as the deck turns. --ar is each file's
   width/height; --h is set per logo by eye so they read at one weight. */
.quote .who .co-logo{
  display:block;margin-top:7px;
  height:var(--h);width:calc(var(--h) * var(--ar));
  background-color:var(--muted);
  -webkit-mask:var(--logo) left center / contain no-repeat;
          mask:var(--logo) left center / contain no-repeat;
  transition:background-color .4s ease;
}
.deck .quote.is-active .who .co-logo{background-color:var(--sage-400);}
.co-aspia           {--logo:url(../img/logos/aspia.svg);            --ar:2.681; --h:19px;}
.co-premium-security{--logo:url(../img/logos/premium-security.svg); --ar:5.017; --h:21px;}
.co-finago          {--logo:url(../img/logos/finago.png);           --ar:2.698; --h:18px;}
.co-ketryx          {--logo:url(../img/logos/ketryx.svg);           --ar:2.863; --h:19px;}
.co-iqm             {--logo:url(../img/logos/iqm.png);              --ar:2.823; --h:16px;}

/* ============ WHITE HEADER, DARK ISLAND ON SCROLL ============
   At the top of the page the header is white on every page: the logo in
   the footer's light-ground colours (Ink letters, Ink Deep and Signal
   bits), links Muted -> Ink, Contact as the Ink button, and a light
   Services dropdown and phone menu.
   Once the page scrolls it turns back into the black glass island that
   reads best over the rest of the site: white-letter logo with its Sage
   bit, Sage 50 links, the white Contact button, dark dropdown and menu.
   (The easter-egg wordmark in the hero clones this SVG without its id,
   so it keeps its white letters on the dark card.) */
header{background:var(--white);}
/* the logo is assets/logo/tiobit-lightmode.svg inlined; scrolled, it takes
   tiobit-darkmode.svg's colours (white letters, Sage first square) */
#nav-logo [fill="#042925"],#nav-logo .bit-a path{transition:fill .35s ease;}
.nav-links a{color:var(--muted);}
.nav-links a:hover{color:var(--ink);}
header .nav-links a.btn-glow{background:var(--ink);color:var(--white);border-color:var(--ink);}
header .nav-links a.btn-glow:hover{background:var(--signal);color:var(--ink);border-color:var(--signal);}
.nav-toggle span{background:var(--ink);}
.nav-sub{background:rgba(255,255,255,.96);border-color:var(--sage-200);box-shadow:0 14px 34px rgba(4,41,37,.12);}
.nav-links .nav-sub a:hover{background:var(--sage-50);color:var(--ink);}

/* scrolled: the black glass island (geometry from the island block above) */
header.scrolled{background:transparent;}
header.scrolled nav::before{
  background:rgba(0,0,0,.82);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.scrolled nav::before{background:rgba(0,0,0,.94);}
}
header.scrolled #nav-logo [fill="#042925"]{fill:var(--white);}
header.scrolled #nav-logo .bit-a path{fill:var(--sage-400);}
header.scrolled .nav-links a:not(.btn){color:var(--sage-50);}
header.scrolled .nav-links a:not(.btn):hover{color:var(--signal);}
header.scrolled .nav-links a.btn-glow{background:var(--white);color:var(--ink);border-color:var(--white);}
header.scrolled .nav-links a.btn-glow:hover{background:var(--signal);color:var(--ink);border-color:var(--signal);}
header.scrolled .nav-toggle span{background:var(--sage-50);}
header.scrolled .nav-sub{background:rgba(0,0,0,.92);border-color:var(--line-black);box-shadow:0 14px 34px rgba(0,0,0,.4);}
header.scrolled .nav-links .nav-sub a:hover{background:rgba(255,255,255,.07);color:var(--signal);}

@media(max-width:920px){
  .nav-links{background:var(--white);border-bottom:1px solid var(--sage-200);box-shadow:0 24px 40px rgba(4,41,37,.10);}
  .nav-links a{color:var(--ink);border-bottom-color:var(--sage-200);}
  .nav-sub{background:none;box-shadow:none;}
  /* scrolled on a phone: a full-width black frosted bar, dark menu */
  header.scrolled{background:rgba(0,0,0,.82);border-bottom:none;}
  header.scrolled .nav-links{background:var(--black);border-bottom-color:var(--line-black);box-shadow:0 24px 40px rgba(0,0,0,.35);}
  header.scrolled .nav-links a:not(.btn){color:var(--sage-50);border-bottom-color:var(--line-black);}
  header.scrolled .nav-sub{background:none;border:0;box-shadow:none;}
}

/* The island lifts out of the page rather than shrinking into shape.
   It's the same pill in both states - 58px tall, 20px below the top of
   the window - and the header itself no longer changes height or
   padding when scrolled, so nothing moves. At the top it's white on the white
   header, so it can't be seen; on scroll it fades quickly to black
   glass and casts its shadow, as if it's been picked up off the page.
   Same size throughout - no scaling. */
@media(min-width:921px){
  /* the pill sits the hero card's inset (20px) below the window's top,
     matching the card's side margins - and the hero frame's own top
     padding leaves the same gap between the pill and the card */
  :root{--island-h:58px;--nav-h:calc(var(--island-h) + var(--hero-inset));}
  header,header.scrolled{padding:var(--hero-inset) 0 0;}
  nav,header.scrolled nav{height:var(--island-h);}
  /* the header's own white drops away instantly - fading it swept a white
     band across the whole width over the hero; only the pill fades */
  header{transition:none;}
  nav::before{
    top:0;bottom:0;left:-24px;right:-24px;
    background:var(--white);
    box-shadow:0 0 0 rgba(0,0,0,0);
    transition:background .35s ease, border-color .35s ease, box-shadow .4s ease;
  }
}

/* founder block: the LinkedIn line sits under the terminal, its last
   line level with the bottom of the photo. The copy column stretches to
   the photo's height; the spare room is split between above the label
   and above this line, so the rest of the copy stays about centred. */
.founder-copy > .founder-hi{margin:auto 0 0;padding-top:26px;}
@media(min-width:921px){
  .founder-copy{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;}
  .founder-copy > :first-child{margin-top:auto;}
  .founder-copy > .terminal{align-self:stretch;}
  .founder-copy > .founder-hi{margin-bottom:-.45em;}   /* the last line's descender space, so its text sits on the photo's edge */
}

/* founder bio: the full width of its column (the terminal's width)
   rather than 52ch, so it sets in four lines instead of leaving
   "infrastructure." alone on a fifth; pretty wrapping keeps a lone word
   off the last line at other widths too */
.founder-copy > p{max-width:none;text-wrap:pretty;}
/* and ~25px more room for the copy column, so the bio fits four lines at
   full desktop width (the photo gives up ~9px) */
@media(min-width:1101px){
  .founder-grid{grid-template-columns:.82fr 1.18fr;gap:44px;}
}

/* the terminal's last cursor blinks like a real CLI prompt: hard on/off,
   ~1s a cycle; held solid under reduced motion */
.terminal .term-cursor{animation:term-blink 1.06s steps(1, end) infinite;}
@keyframes term-blink{0%{opacity:1;}50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){ .terminal .term-cursor{animation:none;} }

/* The network: a little more width for the copy on desktop so each point
   sets in two lines ("Context, not just CVs" needed ~40px more); the
   illustration card gives it up (488 -> 446px). Pretty wrapping keeps a
   lone word off the last line at other widths. */
@media(min-width:1101px){
  .net-grid{grid-template-columns:1.13fr .87fr;}
}
.net-points li > span:last-child{text-wrap:pretty;}

/* phones and tablets: the 3- and 5-column step variants stack like the
   plain one (their column counts out-specified the stacking rule, which
   pushed Targeted Search's third step off the side of a phone) */
@media(max-width:920px){
  .steps.cols-3,.steps.cols-5{grid-template-columns:1fr;}
}

/* No lone word on the last line anywhere: headings balance their lines,
   running text avoids an orphaned final word (both only change the
   wrapping when a line would otherwise break badly). */
h1,h2,h3,h4{text-wrap:balance;}
p,li,.svc-tagline,.hero-sub{text-wrap:pretty;}

/* service-page banners on phones: the same tighter padding as the other
   banners, rather than the desktop 96/84 that left a tall empty band */
@media(max-width:920px){
  .page-hero.svc-hero .svc-intro{padding:64px 0 52px;}
}

/* trusted-by: no divider above it - the hero card's white frame already
   separates them; the line below, into the stats, stays. Its content sits
   centred between the card and that line: the frame's bottom margin
   (--hero-inset) counts towards the top gap, so the strip's own padding
   is split unevenly by that much - same 48px total, so its height and
   the hero sizing don't change. */
.trust{
  border-top:none;
  padding-top:calc((48px - var(--hero-inset)) / 2);
  padding-bottom:calc((48px + var(--hero-inset)) / 2);
}

/* the hero headline's tight tracking (-0.035em) pulled the r and t of
   "partner" into each other; the r alone drops the negative tracking,
   which opens just that one gap. Splitting the word into its own run
   meant the next run's dark halo painted over the r, so the r sits on
   its own layer above it, without a halo of its own - the letters
   either side already cover that ground. */
.kern-rt{letter-spacing:0;position:relative;z-index:1;text-shadow:none !important;}

/* in-page links (Services, Focus Areas, Testimonials) stop short of the
   sticky header - its height plus a little air - instead of landing the
   section's label and heading underneath it */
html{scroll-padding-top:calc(var(--nav-h) + 32px);}