/* ============================================================
   TOKENS
   Palette: deep trust blue #368CBF · eco green #7EBC59
            clean grey #DFDCE3 · dark slate #33363B
   ============================================================ */
:root{
  /* slate family — #33363B is the surface colour, canvas sits a step below it */
  --bg:#212327;
  --bg-2:#292B30;
  --panel:#33363B;
  --panel-2:#3B3F45;

  --line:rgba(223,220,227,.10);
  --line-2:rgba(223,220,227,.20);

  --text:#DFDCE3;
  --text-2:#BFBCC6;
  --muted:#A29FAA;

  --blue:#368CBF;
  --blue-hover:#48A0D3;
  --blue-lift:#5FA9D6;      /* lifted for small text on dark, keeps AA contrast */
  --blue-soft:rgba(54,140,191,.15);
  --green:#7EBC59;
  --green-soft:rgba(126,188,89,.14);
  --on-accent:#1A1D21;

  /* Native system typography.
     Apple  → SF Pro Display / SF Pro Text (real SF, rendered by the OS)
     Win 11 → Segoe UI Variable Display / Segoe UI
     Android→ Roboto                                                    */
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
         "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI",
         system-ui, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", SFMono-Regular, "Menlo",
         "Cascadia Code", "Segoe UI Mono", "Roboto Mono", Consolas, monospace;

  --pad:clamp(20px,5vw,64px);
  --maxw:1200px;
  --nav:68px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav,68px)}
html.snap{scroll-snap-type:y mandatory}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1;
  font-optical-sizing:auto;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
::selection{background:var(--blue);color:var(--on-accent)}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
section{scroll-margin-top:88px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

h1,h2,h3,h4{font-weight:600;letter-spacing:-0.03em;line-height:1.05}
.h-xl{font-size:clamp(38px,6.2vw,76px);letter-spacing:-0.045em;line-height:1.02}
.h-lg{font-size:clamp(30px,4.2vw,52px);letter-spacing:-0.035em}
.h-md{font-size:clamp(22px,2.4vw,30px);letter-spacing:-0.025em}
.dim{color:var(--muted)}
.lead{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--text-2);letter-spacing:-0.011em}

.eyebrow{
  margin-bottom:clamp(12px,2svh,22px);
  font:600 11.5px/1 var(--sans);letter-spacing:.085em;text-transform:uppercase;
  color:var(--blue-lift);display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue)}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--blue-lift);outline-offset:3px;border-radius:6px;
}
.skip{position:absolute;left:-9999px;top:0;background:var(--text);color:var(--bg);padding:10px 16px;z-index:300}
.skip:focus{left:0}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blue);color:var(--on-accent);
  border:1px solid var(--blue);border-radius:10px;
  padding:12px 18px;font-size:14px;font-weight:600;letter-spacing:-0.01em;
  transition:background .2s ease,transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  white-space:nowrap;cursor:pointer;
}
.btn .ar{transition:transform .2s ease;display:inline-block}
.btn:hover{background:var(--blue-hover);border-color:var(--blue-hover);transform:translateY(-1px)}
.btn:hover .ar{transform:translateX(3px)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2);box-shadow:none}
.btn-ghost:hover{background:rgba(223,220,227,.06);border-color:rgba(223,220,227,.34);box-shadow:none}
.link-ar{font-size:14px;font-weight:500;color:var(--text-2);display:inline-flex;gap:6px;align-items:center;min-height:44px;transition:color .2s}
.link-ar:hover{color:var(--blue-lift)}
.link-ar .ar{transition:transform .2s}
.link-ar:hover .ar{transform:translateX(3px)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(33,35,39,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease;
}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(33,35,39,.92)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav)}
.brand{font-size:17px;font-weight:600;letter-spacing:-0.02em;display:inline-flex;align-items:center;gap:9px}
.brand .bd{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.nav-links{display:flex;gap:28px}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500;color:var(--text-2);letter-spacing:-0.01em;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-actions{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;background:transparent;border:1px solid var(--line-2);border-radius:10px;color:var(--text);padding:10px 14px;min-height:44px;align-items:center;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer}

.sheet{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  padding:20px var(--pad) 40px;display:flex;flex-direction:column;justify-content:space-between;
  transform:translateY(-101%);visibility:hidden;
  transition:transform .4s cubic-bezier(.7,0,.2,1),visibility 0s .4s;
}
.sheet.open{transform:translateY(0);visibility:visible;transition:transform .4s cubic-bezier(.7,0,.2,1),visibility 0s 0s}
.sheet-top{display:flex;justify-content:space-between;align-items:center;height:48px}
.sheet-links{display:flex;flex-direction:column;margin-top:6vh}
.sheet-links a{
  font-size:clamp(28px,8vw,40px);font-weight:600;letter-spacing:-0.035em;
  padding:16px 0;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
}
.sheet-links a span{font:500 11px/1 var(--sans);letter-spacing:.07em;color:var(--muted)}
.sheet-foot{color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:6px}

/* ============================================================
   HERO
   ============================================================ */
/* the hero pins while the qualifier sheet slides up over it */
.stage{position:relative}
.hero{
  position:sticky;top:var(--nav);z-index:1;
  height:calc(100svh - var(--nav));display:flex;flex-direction:column;
  padding:clamp(14px,2.4svh,34px) 0 clamp(78px,10svh,112px);
  overflow:hidden;
}
.hero > .wrap{position:relative;z-index:1;flex:1;display:flex;flex-direction:column}
.hero-inner{
  flex:1;display:flex;flex-direction:column;justify-content:flex-start;
  gap:clamp(12px,2.2svh,28px);
  transform:translateY(calc(var(--hp,0) * -26px));
  opacity:calc(1 - var(--hp,0) * .68);
  will-change:transform,opacity;
}
.h-top{display:flex;flex-direction:column;gap:clamp(26px,4.5svh,54px)}
.h-say{display:flex;flex-direction:column;flex:0 0 auto}

/* scroll affordance, fades out as soon as you move */
.cue{
  position:absolute;left:50%;bottom:clamp(34px,5svh,58px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;z-index:3;
  pointer-events:none;
}
.cue span{font:600 11.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.cue em{font-style:normal;font-size:15px;line-height:1;color:var(--blue-lift);animation:cueBob 1.9s ease-in-out infinite}
@keyframes cueBob{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(5px);opacity:1}}
.cue i{
  width:1px;height:34px;background:linear-gradient(180deg,var(--line-2),transparent);
  position:relative;overflow:hidden;
}
.cue i::after{
  content:"";position:absolute;left:0;top:-10px;width:1px;height:10px;background:var(--blue);
  animation:cueRun 1.9s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes cueRun{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(44px);opacity:0}}

/* the sheet that scrolls over the pinned hero */
.overlay{
  position:relative;z-index:2;
  scroll-snap-align:start;scroll-snap-stop:always;
  min-height:calc(100svh - var(--nav));
  display:flex;flex-direction:column;justify-content:center;
  background:var(--bg);
  border-top:1px solid var(--line-2);
  border-radius:26px 26px 0 0;
  box-shadow:0 -30px 70px -20px rgba(0,0,0,.85), 0 -1px 0 rgba(223,220,227,.06);
  padding:clamp(34px,6svh,64px) 0 clamp(34px,6svh,64px);
}
.stage{scroll-snap-align:start}
.overlay::before{
  content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:42px;height:4px;border-radius:2px;background:var(--line-2);
}
.overlay .quiz{margin-top:12px}
@media (prefers-reduced-motion:reduce){
  .hero-inner{transform:none;opacity:1}
  .cue i::after,.cue em{animation:none}
}
/* last resort: a screen too short to pin anything sensibly */
@media (max-height:520px){
  .hero{height:auto;padding:28px 0 34px}
}

/* ---- automation graph running behind the hero ---- */
.grid-bg{
  position:absolute;inset:-6% -4% auto -4%;height:118%;width:108%;
  pointer-events:none;z-index:0;opacity:.5;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 34%, #000 0%, #000 42%, transparent 82%);
          mask-image:radial-gradient(120% 90% at 50% 34%, #000 0%, #000 42%, transparent 82%);
}
.gb-wires path{fill:none;stroke:var(--text);stroke-opacity:.08;stroke-width:1.2}
.gb-nodes rect{fill:var(--panel);fill-opacity:.35;stroke:var(--text);stroke-opacity:.10;stroke-width:1.2}
.gb-nodes line{stroke:var(--text);stroke-opacity:.09;stroke-width:2.5;stroke-linecap:round}
.gb-nodes .gb-port{fill:var(--blue);fill-opacity:.22}

/* a packet of data running each wire */
.gb-flow path{
  fill:none;stroke:var(--blue);stroke-opacity:.85;stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:26 1400;stroke-dashoffset:1400;
  animation-name:packet;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes packet{
  0%{stroke-dashoffset:1400;stroke-opacity:0}
  6%{stroke-opacity:.85}
  70%{stroke-opacity:.85}
  100%{stroke-dashoffset:1150;stroke-opacity:0}
}
.hero-inner{position:relative;max-width:920px}
.hero h1{margin-top:22px}
.hero .lead{margin-top:24px;max-width:60ch}
.hero-cta{display:flex;gap:14px;align-items:center;margin-top:clamp(14px,2.4svh,30px);flex-wrap:wrap}

/* ---- rotating question headline ---- */
.hero-h{font-size:clamp(25px,min(8.6vw,6.2svh),60px);letter-spacing:-.038em;line-height:1.06;font-weight:600}
.hero-h .rot{display:grid;color:var(--muted)}
.hero-h .rot > span{
  grid-area:1/1;opacity:0;filter:blur(13px);transform:translateY(11px);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1),
             filter .62s cubic-bezier(.2,.7,.3,1),
             transform .62s cubic-bezier(.2,.7,.3,1);
  will-change:opacity,filter,transform;
}
.hero-h .rot > span.on{opacity:1;filter:blur(0);transform:none}
.hero-h .ans{display:block;margin-top:clamp(8px,1.7svh,30px);color:var(--text)}
h1.lead{font-weight:400;letter-spacing:-.011em;line-height:1.55;
  font-size:clamp(13.5px,min(4vw,1.95svh),18.5px);margin-top:clamp(10px,1.9svh,24px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- credibility row ---- */
.cred{display:flex;align-items:center;gap:13px}
.cred .avatar{
  width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--line-2);background:var(--panel);
}
.avatar-fb{
  display:grid;place-items:center;font:600 15px/1 var(--sans);
  letter-spacing:-.01em;color:var(--text-2);
}
.cred p{font-size:clamp(11.5px,min(3.3vw,1.5svh),13.5px);line-height:1.5;color:var(--muted);max-width:52ch}
.cred p b{color:var(--text-2);font-weight:600}
.proof{
  align-self:center;
  margin-top:auto;margin-bottom:auto;
  display:inline-flex;align-items:center;gap:9px;
  font-size:clamp(11px,min(3.2vw,1.45svh),12.5px);font-weight:500;color:var(--green);
  background:var(--green-soft);border:1px solid rgba(126,188,89,.28);
  border-radius:999px;padding:8px 14px;
}
.proof .pd{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
@media (max-width:720px){
  .cred{align-items:flex-start}
  .cred .avatar{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .hero-h .rot > span{transition:none}
}

/* ---- hero qualifier (signature element) ---- */
.quiz{
  margin-top:clamp(34px,5.5vh,56px);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.75);
}
.q-bar{
  display:flex;align-items:center;gap:12px;padding:13px 18px;
  border-bottom:1px solid var(--line);background:rgba(223,220,227,.03);
}
.q-label{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--text-2)}
.q-prog{margin-left:auto;display:flex;gap:5px}
.q-prog i{width:20px;height:4px;border-radius:2px;background:var(--line-2);transition:background .35s ease}
.q-prog i.on{background:var(--blue)}
.q-prog i.done{background:var(--green)}

.q-body{position:relative;transition:height .42s cubic-bezier(.2,.7,.3,1)}
.q-panel{
  position:absolute;top:0;left:0;width:100%;
  padding:clamp(28px,4.5svh,52px) clamp(20px,3.4vw,40px) clamp(26px,4svh,46px);
  opacity:0;visibility:hidden;filter:blur(9px);transform:translateY(8px);
  transition:opacity .38s cubic-bezier(.2,.7,.3,1),
             filter .38s cubic-bezier(.2,.7,.3,1),
             transform .38s cubic-bezier(.2,.7,.3,1),
             visibility 0s .38s;
}
.q-panel.on{opacity:1;visibility:visible;filter:blur(0);transform:none;transition-delay:0s}

.q-ask{font-size:clamp(21px,min(6.2vw,4.4svh),34px);font-weight:600;letter-spacing:-.026em;line-height:1.24;color:var(--text);max-width:22ch}
.q-hint{margin-top:12px;font-size:clamp(13px,min(3.7vw,1.7svh),15.5px);color:var(--muted);line-height:1.55;max-width:40ch}
.q-btns{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:clamp(20px,3.4svh,34px)}
.q-btns button{
  height:clamp(52px,7svh,64px);border-radius:12px;cursor:pointer;
  font:600 clamp(15px,min(4.2vw,2svh),17px)/1 var(--sans);letter-spacing:-.01em;
  border:1px solid var(--line-2);background:transparent;color:var(--text);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.q-btns button:hover{background:rgba(223,220,227,.06);border-color:rgba(223,220,227,.34);transform:translateY(-1px)}
.q-btns .yes{background:var(--blue);border-color:var(--blue);color:var(--on-accent)}
.q-btns .yes:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.q-skip{
  display:inline-flex;align-items:center;min-height:44px;margin-top:12px;background:none;border:0;padding:6px 0;cursor:pointer;
  font:500 13px/1 var(--sans);color:var(--muted);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--line-2);transition:color .2s;
}
.q-skip:hover{color:var(--text-2)}

/* result panels */
.q-kicker{font:600 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--blue-lift)}
.q-title{margin-top:14px;font-size:clamp(20px,min(5.8vw,4svh),31px);font-weight:600;letter-spacing:-.026em;line-height:1.24;max-width:22ch}
.q-copy{margin-top:13px;font-size:clamp(14px,min(3.9vw,1.8svh),16px);line-height:1.6;color:var(--text-2);max-width:46ch}
.q-out{
  display:flex;align-items:flex-start;gap:9px;margin-top:16px;
  font-size:13.5px;font-weight:500;line-height:1.5;color:var(--green);
  background:var(--green-soft);border:1px solid rgba(126,188,89,.28);
  border-radius:11px;padding:11px 14px;
}
.q-out i{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;margin-top:6px}
.mini{display:flex;flex-wrap:wrap;align-items:center;gap:7px 9px;margin-top:18px}
.mini span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);white-space:nowrap}
.mini span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);flex:none}
.mini span:not(:last-child)::after{content:"→";color:var(--line-2);margin-left:2px}
.q-cta{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.q-again{
  display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:6px 0;cursor:pointer;
  font:500 13px/1 var(--sans);color:var(--muted);text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:var(--line-2);transition:color .2s;
}
.q-again:hover{color:var(--text-2)}

.q-foot{
  display:flex;gap:20px;flex-wrap:wrap;padding:13px 20px;
  border-top:1px solid var(--line);background:rgba(223,220,227,.03);
  font-size:12px;color:var(--muted);
}
.q-foot b{color:var(--text-2);font-weight:600}

.quiz{opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.quiz.seen{opacity:1;transform:none}
.quiz.seen .q-panel.on > *{animation:qIn .55s cubic-bezier(.2,.7,.3,1) backwards}
.quiz.seen .q-panel.on > *:nth-child(1){animation-delay:.10s}
.quiz.seen .q-panel.on > *:nth-child(2){animation-delay:.17s}
.quiz.seen .q-panel.on > *:nth-child(3){animation-delay:.24s}
.quiz.seen .q-panel.on > *:nth-child(4){animation-delay:.31s}
.quiz.seen .q-panel.on > *:nth-child(5){animation-delay:.38s}
@keyframes qIn{from{opacity:0;transform:translateY(12px);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}

@media (prefers-reduced-motion:reduce){
  .quiz{opacity:1;transform:none}
  .quiz.seen .q-panel.on > *{animation:none}
  .q-panel{transition:opacity .01s,visibility 0s}
  .q-body{transition:none}
  .gb-flow path{animation:none;stroke-opacity:0}
}

/* ============================================================
   MARQUEE
   ============================================================ */
.strip{border-top:1px solid var(--line);padding:24px 0 0;overflow:hidden}
.strip-label{font:500 10px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}

/* ============================================================
   STATEMENT
   ============================================================ */
.statement{padding:clamp(64px,10vh,110px) 0}
.statement .big{
  font-size:clamp(22px,2.8vw,36px);font-weight:600;letter-spacing:-0.032em;line-height:1.3;
  max-width:24ch;
}
.statement .big em{font-style:normal;color:var(--muted)}
.statement .sub{margin-top:24px;max-width:56ch;font-size:16px;color:var(--text-2);letter-spacing:-0.01em;line-height:1.65}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:clamp(64px,10vh,112px) 0}
.sec-head{max-width:760px;margin-bottom:clamp(34px,5vh,52px)}
.sec-head h2{margin-top:18px}
.sec-head .lead{margin-top:18px}

/* SERVICES */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.svc{background:var(--bg-2);padding:30px 26px;display:flex;flex-direction:column;transition:background .25s ease}
.svc:hover{background:var(--panel)}
.svc .n{font:500 10px/1 var(--sans);letter-spacing:.09em;color:var(--blue-lift);margin-bottom:20px}
.svc h3{font-size:20px;letter-spacing:-0.024em;line-height:1.2}
.svc > p{margin-top:12px;font-size:14.5px;line-height:1.62;color:var(--text-2)}
.svc ul{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.svc li{position:relative;padding-left:18px;margin-bottom:9px;font-size:13.5px;line-height:1.5;color:var(--text-2)}
.svc li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--muted)}


/* ---- service card visuals ---- */
.svc-viz{
  height:96px;margin-bottom:22px;border-radius:12px;overflow:hidden;
  background:var(--bg);border:1px solid var(--line);
}
.svc-viz svg{width:100%;height:100%;display:block}
.svc-viz *{transform-box:fill-box;transform-origin:center}

/* shared ink */
.vz-hub{fill:var(--blue-soft);stroke:var(--blue);stroke-width:1.2;stroke-opacity:.7}
.vz-ph{fill:var(--blue-lift)}
.vz-ring{fill:none;stroke:var(--blue);stroke-width:1.2;opacity:0}
.vz-link{stroke:var(--line-2);stroke-width:1.2;stroke-dasharray:3 5}
.vz-bar{fill:var(--blue-lift);opacity:.85;transform:scaleY(.35)}
.vz-done{fill:var(--green-soft);stroke:var(--green);stroke-width:1.2;stroke-opacity:.6}
.vz-tick{fill:none;stroke:var(--green);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vz-track{stroke:var(--line);stroke-width:1}
.vz-msg rect{fill:var(--panel);stroke:var(--line-2);stroke-width:1}
.vz-msg line{stroke:var(--muted);stroke-width:2;stroke-linecap:round;opacity:.8}
.vz-reply rect{fill:var(--green-soft);stroke:rgba(126,188,89,.5);stroke-width:1}
.vz-reply path{fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vz-msg,.vz-reply{opacity:0}
.vz-dot{fill:var(--line-2)}
.vz-mod{fill:var(--panel);stroke:var(--line);stroke-width:1}
.vz-scan{fill:var(--blue);opacity:.55}

/* motion, only once the card is on screen */
.svc.live .vz-ring{animation:vzRing 2.4s ease-out infinite}
.svc.live .vz-ring.r2{animation-delay:1.2s}
@keyframes vzRing{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.1);opacity:0}}

.svc.live .vz-bar{animation:vzBar .95s ease-in-out infinite}
@keyframes vzBar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1.45)}}

.svc.live .vz-msg,.svc.live .vz-reply{animation:vzMsg 3.6s ease-in-out infinite}
@keyframes vzMsg{0%{opacity:0;transform:translateY(7px)}12%{opacity:1;transform:none}72%{opacity:1}88%{opacity:0}100%{opacity:0}}
.svc.live .vz-dot{animation:vzDot 3.6s ease-in-out infinite}
@keyframes vzDot{0%{fill:var(--line-2)}12%{fill:var(--blue)}72%{fill:var(--blue)}90%{fill:var(--line-2)}}
.svc.live .vz-dot.ok{animation-name:vzDotOk}
@keyframes vzDotOk{0%{fill:var(--line-2)}12%{fill:var(--green)}72%{fill:var(--green)}90%{fill:var(--line-2)}}

.svc.live .vz-scan{animation:vzScan 3.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes vzScan{0%{transform:translateY(0);opacity:0}8%{opacity:.55}92%{opacity:.55}100%{transform:translateY(62px);opacity:0}}
.svc.live .vz-mod.flag{animation:vzFlag 3.2s ease-in-out infinite}
@keyframes vzFlag{0%,42%{fill:var(--panel);stroke:var(--line)}52%{fill:var(--blue-soft);stroke:var(--blue)}86%{fill:var(--blue-soft);stroke:var(--blue)}100%{fill:var(--panel);stroke:var(--line)}}

@media (prefers-reduced-motion:reduce){
  .svc.live .vz-ring,.svc.live .vz-bar,.svc.live .vz-msg,.svc.live .vz-reply,
  .svc.live .vz-dot,.svc.live .vz-scan,.svc.live .vz-mod.flag{animation:none}
  .vz-msg,.vz-reply{opacity:1}
  .vz-bar{transform:scaleY(1)}
}
/* Below 1000px the service grid collapses to one column, so a card is the full
   width of the page while the drawing stays 300 units wide. With
   preserveAspectRatio="meet" the scale is capped by the 96px height, which left
   the figure marooned in up to 229px of dead space per side at ~900px. Letting
   the frame keep the drawing's own ratio makes it grow with the card instead. */
@media (max-width:1000px){
  .svc-viz{height:auto;aspect-ratio:300/96;max-height:190px}
}
@media (max-width:720px){
  .svc-viz{margin-bottom:18px;max-height:150px}
}


/* ---- case studies: collapsed by default, architecture draws itself ---- */
.cases-list{border-top:1px solid var(--line);margin-top:clamp(28px,4vh,44px)}
.case2{border-bottom:1px solid var(--line)}
.case-h{margin:0;font:inherit;font-weight:inherit}
.case-head{
  width:100%;display:grid;grid-template-columns:44px 1fr auto auto;gap:16px;align-items:center;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
  padding:clamp(22px,3vh,30px) 0;transition:color .2s ease;
}
.case-head:hover .case-hl{color:var(--blue-lift)}
.case-no{font:600 11px/1 var(--sans);letter-spacing:.09em;color:var(--muted)}
.case-hl{display:block;font-size:clamp(19px,2.4vw,27px);font-weight:600;letter-spacing:-.026em;line-height:1.2;transition:color .2s}
.case-sub2{display:block;margin-top:7px;font-size:14px;line-height:1.5;color:var(--text-2);max-width:52ch}
.case-tag2{
  font:600 10px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-2);border-radius:999px;padding:7px 11px;white-space:nowrap;
}
.case-chev{
  width:26px;height:26px;border:1px solid var(--line-2);border-radius:50%;
  display:grid;place-items:center;color:var(--text-2);font-size:16px;font-weight:400;
  transition:transform .3s ease,border-color .2s,color .2s;
}
.case2.open .case-chev{transform:rotate(45deg);border-color:var(--blue);color:var(--blue-lift)}

.case-viz{
  border:1px solid var(--line);border-radius:14px;background:var(--bg-2);
  padding:8px 4px;margin-bottom:18px;overflow:hidden;
}
.case-viz svg{width:100%;height:auto;display:block}


.case-out2{
  display:flex;align-items:flex-start;gap:9px;
  font-size:14px;font-weight:500;line-height:1.5;color:var(--green);
  background:var(--green-soft);border:1px solid rgba(126,188,89,.28);
  border-radius:11px;padding:12px 15px;
}
.case-out2 i{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;margin-top:6px}
.case-more{
  margin-top:16px;background:none;border:0;padding:6px 0;cursor:pointer;
  font:600 13px/1 var(--sans);color:var(--blue-lift);
  display:inline-flex;align-items:center;gap:7px;
}
.case-more .ar{transition:transform .3s ease}
.case2.open .case-more .ar{transform:rotate(90deg)}
.case-drop{overflow:hidden;height:0;transition:height .45s cubic-bezier(.2,.7,.3,1)}
.case-drop-in{padding:22px 0 30px}
.case-drop .blk{margin-bottom:22px}
.case-drop .blk:last-child{margin-bottom:0}
@media (max-width:860px){
  .case-head{grid-template-columns:30px 1fr auto;gap:12px}
  .case-tag2{display:none}
}
@media (prefers-reduced-motion:reduce){
  .case-drop{transition:none}
}

/* METRICS */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.metric{background:var(--bg-2);padding:30px 24px 28px}
.metric .v{font-size:clamp(30px,3.4vw,42px);font-weight:600;letter-spacing:-0.04em;line-height:1;color:var(--text)}
.metric .k{margin-top:12px;font-size:13px;color:var(--text-2);line-height:1.5}


/* ---- metrics: reveal in sequence, the number counts up ---- */
.metric{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.metrics.live .metric{opacity:1;transform:none}
.metrics.live .metric:nth-child(2){transition-delay:.09s}
.metrics.live .metric:nth-child(3){transition-delay:.18s}
.metrics.live .metric:nth-child(4){transition-delay:.27s}
.metric .v{font-variant-numeric:tabular-nums}
.metric .v::after{
  content:"";display:block;height:2px;width:34px;margin-top:12px;border-radius:1px;
  background:var(--blue);transform:scaleX(0);transform-origin:left center;
  transition:transform .9s cubic-bezier(.2,.7,.3,1) .25s;
}
.metrics.live .metric .v::after{transform:scaleX(1)}

/* ---- approach: a rail that draws, markers that light in order ---- */
.steps{position:relative;padding-left:32px}
.steps::before{
  content:"";position:absolute;left:5px;top:22px;bottom:22px;width:1px;background:var(--line-2);
  transform:scaleY(0);transform-origin:top;transition:transform 1.2s cubic-bezier(.3,.7,.3,1);
}
.steps.live::before{transform:scaleY(1)}
.step{position:relative}
.step::before{
  content:"";position:absolute;left:-32px;top:34px;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line-2);
  transition:background .45s ease,border-color .45s ease,box-shadow .45s ease;
}
.steps.live .step:nth-child(1)::before{transition-delay:.35s}
.steps.live .step:nth-child(2)::before{transition-delay:.7s}
.steps.live .step:nth-child(3)::before{transition-delay:1.05s}
.steps.live .step::before{
  background:var(--blue-soft);border-color:var(--blue);box-shadow:0 0 0 4px rgba(54,140,191,.10);
}
@media (max-width:720px){ .steps{padding-left:24px} .step::before{left:-24px;top:26px} }
@media (prefers-reduced-motion:reduce){
  .metric{opacity:1;transform:none}
  .metrics.live .metric .v::after{transition:none;transform:scaleX(1)}
  .steps::before{transform:scaleY(1);transition:none}
  .step::before,.steps.live .step::before{transition:none}
}

/* CASE INDEX */
.index-rows{margin-top:clamp(34px,5vh,52px);border-top:1px solid var(--line)}
.irow{
  display:grid;grid-template-columns:52px 1.5fr 1fr auto;gap:24px;align-items:center;
  padding:26px 8px 26px 0;border-bottom:1px solid var(--line);
  transition:background .22s ease,padding-left .22s ease;
}
.irow:hover{background:rgba(223,220,227,.035);padding-left:14px}
.irow:hover .hl{color:var(--blue-lift)}
.irow .no{font:500 11px/1 var(--sans);letter-spacing:.06em;color:var(--muted)}
.irow .hl{font-size:clamp(18px,1.9vw,23px);font-weight:600;letter-spacing:-0.025em;line-height:1.25;transition:color .2s}
.irow .sub{font-size:14px;color:var(--text-2);line-height:1.5}
.irow .tag{
  font:500 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-2);border-radius:999px;padding:7px 12px;white-space:nowrap;
}

/* CASE STUDIES */
.case{padding-top:clamp(56px,8vh,86px);margin-top:clamp(56px,8vh,86px);border-top:1px solid var(--line)}
.case:first-of-type{margin-top:0}
.case-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:baseline}
.case-top .no{font:500 11px/1 var(--sans);letter-spacing:.08em;color:var(--blue-lift)}
.case-top .who{font:500 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.case h3{margin-top:22px;max-width:20ch}
.case .case-sub{margin-top:18px;max-width:62ch;font-size:16.5px;color:var(--text-2);line-height:1.6;letter-spacing:-0.01em}
.case-body{display:grid;grid-template-columns:.6fr 1.4fr;gap:clamp(28px,5vw,72px);margin-top:clamp(34px,5vh,52px);align-items:start}
.facts{border-top:1px solid var(--line)}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.facts dt{font:500 10.5px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.facts dd{font-size:13.5px;text-align:right;line-height:1.45;color:var(--text-2)}

.blk{margin-bottom:28px}
.blk h4{font:500 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.blk p{font-size:15.5px;line-height:1.7;color:var(--text-2);max-width:64ch;letter-spacing:-0.008em}
.blk p + p{margin-top:14px}
.blk li{position:relative;padding-left:22px;margin-bottom:11px;font-size:15px;line-height:1.65;color:var(--text-2);max-width:64ch}
.blk li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--blue)}

.outcome{
  border:1px solid rgba(126,188,89,.30);
  background:linear-gradient(180deg,rgba(126,188,89,.10),rgba(126,188,89,.02));
  border-radius:14px;padding:26px;margin-top:34px;
}
.outcome .k{font:600 10px/1 var(--sans);letter-spacing:.10em;text-transform:uppercase;color:var(--green)}
.outcome .h{display:block;margin-top:16px;font-size:clamp(19px,2vw,26px);font-weight:600;letter-spacing:-0.028em;line-height:1.24;max-width:26ch;color:var(--text)}
.outcome p{margin-top:14px;font-size:14.5px;line-height:1.65;color:var(--text-2);max-width:62ch}

/* APPROACH */
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:88px .6fr 1.5fr;gap:clamp(18px,3vw,44px);padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
.step .n{font:500 11px/1.4 var(--sans);letter-spacing:.07em;color:var(--muted)}
.step h3{font-size:21px;letter-spacing:-0.025em}
.step .dur{display:block;margin-top:9px;font:500 12px/1.4 var(--sans);color:var(--blue-lift)}
.step p{font-size:15px;line-height:1.7;color:var(--text-2);max-width:64ch}

/* STACK */
.stack-rows{border-top:1px solid var(--line)}
.stack-row{display:grid;grid-template-columns:.32fr 1fr;gap:clamp(18px,3vw,44px);padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.stack-row h3{font:500 11px/1.6 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:13px;font-weight:500;letter-spacing:-0.008em;color:var(--text-2);border:1px solid var(--line);background:var(--bg-2);border-radius:8px;padding:8px 13px;transition:border-color .2s,color .2s}
.chip:hover{border-color:rgba(54,140,191,.5);color:var(--text)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:start}
.about-body p{font-size:16px;line-height:1.75;color:var(--text-2);letter-spacing:-0.008em}
.about-body p + p{margin-top:16px}
.about-meta{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.about-meta span{font:500 11px/1 var(--sans);letter-spacing:.06em;color:var(--text-2);border:1px solid var(--line);border-radius:999px;padding:9px 14px}
.earlier{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);line-height:1.75;max-width:66ch}
.earlier b{color:var(--text-2);font-weight:600}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 0;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-size:clamp(16px,1.6vw,19px);font-weight:600;letter-spacing:-0.022em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue-lift)}
.faq summary .pm{flex:none;width:24px;height:24px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:var(--text-2);font-size:15px;font-weight:400;transition:transform .25s ease,border-color .2s,color .2s}
.faq details[open] summary .pm{transform:rotate(45deg);border-color:var(--blue);color:var(--blue-lift)}
.faq .ans{padding:0 0 26px;font-size:15px;line-height:1.72;color:var(--text-2);max-width:72ch}
.faq .ans p + p{margin-top:12px}

/* CTA */
.cta{
  margin-top:clamp(64px,10vh,110px);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%);
  padding:clamp(38px,6vw,68px) clamp(24px,5vw,60px);position:relative;
}
.cta pre{
  position:absolute;right:-40px;bottom:-24px;margin:0;
  font:400 9px/1.15 var(--mono);color:var(--green);opacity:.16;
  pointer-events:none;user-select:none;white-space:pre;
}
.cta-inner{position:relative;max-width:620px}
.cta h2{margin-top:18px}
.cta > .cta-inner > p{margin-top:20px;font-size:16px;line-height:1.65;color:var(--text-2)}
.cta .row{display:flex;gap:14px;align-items:center;margin-top:32px;flex-wrap:wrap}
.cta-social{display:flex;gap:20px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.cta-social a{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;font-weight:500;color:var(--muted);transition:color .2s}
.cta-social a:hover{color:var(--blue-lift)}

/* FOOTER */
.footer{margin-top:clamp(56px,8vh,90px);border-top:1px solid var(--line);padding:44px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.foot-brand p{margin-top:14px;font-size:14px;color:var(--muted);line-height:1.6;max-width:34ch}
.foot-col h3{font:500 10px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:500}
.foot-col a{display:flex;align-items:center;min-height:44px;font-size:14px;color:var(--text-2);transition:color .2s}
.foot-col a:hover{color:var(--blue-lift)}
.foot-base{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--muted);
}

/* ============================================================
   SCROLL BLUR REVEALS
   Three levels:
   .rv        — block fades up out of blur once, on entry
   .bw        — headline resolves word by word out of blur
   .bs        — continuously tied to scroll position, sharpest at centre
   ============================================================ */
.rv{
  opacity:0;transform:translateY(22px);filter:blur(14px);
  transition:opacity .85s cubic-bezier(.2,.7,.3,1),
             transform .85s cubic-bezier(.2,.7,.3,1),
             filter .85s cubic-bezier(.2,.7,.3,1);
  will-change:opacity,transform,filter;
}
.rv.in{opacity:1;transform:none;filter:blur(0)}

.bw{visibility:hidden}
.bw.ready{visibility:visible}
.bw .w{
  display:inline-block;opacity:0;filter:blur(12px);transform:translateY(.22em);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),
             filter .7s cubic-bezier(.2,.7,.3,1),
             transform .7s cubic-bezier(.2,.7,.3,1);
  will-change:opacity,filter,transform;
}
.bw.in .w{opacity:1;filter:blur(0);transform:none}

.bs{
  filter:blur(var(--b,10px));
  opacity:var(--o,.35);
  will-change:filter,opacity;
}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;filter:none;transition:none}
  .bw{visibility:visible}
  .bw .w{opacity:1;filter:none;transform:none;transition:none}
  .bs{filter:none!important;opacity:1!important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .q-body{transition:none}
  .svc-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .case-body{grid-template-columns:1fr;gap:32px}
  .step{grid-template-columns:1fr;gap:12px}
  .stack-row{grid-template-columns:1fr;gap:12px}
  .about-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .irow{grid-template-columns:40px 1fr;row-gap:10px}
  .irow .sub{grid-column:2}
  .irow .tag{grid-column:2;justify-self:start}
}
/* ============================================================
   MOBILE  (most traffic lands here — treat it as the real design)
   ============================================================ */
@media (max-width:860px){
  /* scroll-linked blur is the most expensive effect on the page.
     It buys little on a small screen, so it is switched off. */
  .bs{filter:none!important;opacity:1!important}
  /* softer entry blurs, and drop the compositor hints once used */
  .rv{filter:blur(8px);transform:translateY(16px)}
  .bw .w{filter:blur(8px)}
  .rv.in,.bw.in .w{will-change:auto}

  /* ----------------------------------------------------------------
     THE PIN STAYS ON TOUCH. THE MANDATORY SNAP DOES NOT.
     These are two separate devices and only one of them is hostile on a
     phone. `scroll-snap-type: y mandatory` forces one flick to equal
     exactly one screen and cannot be overridden mid-gesture — that is
     the part that fights a thumb. The sticky hero is not: it is measured
     in `svh`, which is defined against the *expanded* browser chrome and
     therefore does not move when the chrome collapses. So the card keeps
     sliding up over the hero here, and only the snap softens.

     Snap stays `mandatory` here, same as pointer: `proximity` only catches
     a gesture that *ends* near a snap point, so a half scroll simply stops
     half way and leaves the card cut off. Mandatory always completes to the
     nearer of the two screens, which is the behaviour this section wants.

     It is safe because it is bounded: arm() below only keeps the snap
     armed across the hero and the card, and drops it the moment you are
     past them, so the long case-study sections never inherit it.
     ---------------------------------------------------------------- */
  /* the pill sits in the hero's leftover flex space; on a short phone
     give it a floor so it never collides with the buttons above it */
  .proof{margin-top:auto;margin-bottom:clamp(4px,1.4svh,16px)}
  .overlay{padding:clamp(30px,5svh,54px) 0 clamp(34px,6svh,64px)}
}
@media (max-width:720px){
  /* was a bare declaration here, which is invalid inside a media block and was
     silently dropped — the nav stayed 68px and every calc(100svh - var(--nav))
     was measured against the wrong offset. */
  :root{--nav:62px}
  .nav-links,.nav .btn{display:none}
  .menu-btn{display:inline-flex;padding:11px 15px}
  .nav-row{height:var(--nav)}

  /* hero owns the first screen */
  .grid-bg{opacity:.38}
  .gb-flow path{animation:none;stroke-opacity:0}
  .hero-cta{gap:16px}
  .btn{padding:14px 20px;font-size:15px}          /* 46px tap target */
  .link-ar{font-size:15px;padding:6px 0}
  .cred{gap:11px}
  .proof{padding:9px 14px}

  /* qualifier card */
  .quiz{margin-top:26px;border-radius:16px}
  .q-panel{padding:22px 16px 20px}
  .q-btns{gap:9px;margin-top:20px}
  .q-btns button{height:54px;font-size:16px}      /* thumb-sized */
  .q-foot{gap:6px 16px;padding:12px 16px;font-size:11.5px}
  .q-copy,.q-hint{font-size:14px}
  .mini span{font-size:11.5px}

  /* everything else */
  .sec{padding:56px 0}
  .sec-head{margin-bottom:28px}
  .metrics{grid-template-columns:1fr}
  .facts dd{text-align:left}
  .facts div{flex-direction:column;gap:4px}
  .foot-grid{grid-template-columns:1fr}
  .cta pre{display:none}
  .cta{border-radius:16px}
  .blk p,.blk li{font-size:15px}
  .faq summary{padding:20px 0;gap:16px}
  .chip{padding:9px 14px}                          /* easier to hit */
  .svc{padding:26px 20px}
  .statement .big{max-width:none}

  /* ---- touch targets ----------------------------------------------
     Most controls already carry min-height:44px. Three did not, and they
     measured 21–27px at 375px: fine to click, a coin-flip to tap. Only
     those three are set here — adding padding to the rest would loosen
     the footer rhythm to fix a problem that was already fixed.
     ------------------------------------------------------------- */
  .brand{min-height:44px}
  .case-more{min-height:44px;padding:10px 0}
  /* the slide-over menu is touch-only by definition, so its own controls
     were the worst ones to have left short. */
  .sheet-foot a{min-height:44px;display:flex;align-items:center}
  /* a fixed panel sizes to the viewport including any classic scrollbar
     gutter, which pushes scrollWidth past clientWidth. Not user-reachable
     (body is overflow-x:clip) but it should not report overflow either. */
  .sheet{max-width:100%}
}
@media (max-width:400px){
  .q-foot span{font-size:11px}
}
@media print{
  .nav,.sheet,.quiz,.cta,.strip,.hero-cta{display:none!important}
  body{background:#fff;color:#000}
  .rv,.bw,.bw .w,.bs{opacity:1!important;transform:none!important;filter:none!important;visibility:visible!important}
}


/* ==========================================================================
   MOTION LAYER
   Gated on html[data-motion="full"]. Switch the attribute to "calm" to keep
   only the scroll-reactive scrubbing and drop the pointer-reactive extras.
   Every block here is progressive: without scroll-driven-animation support
   the original loops and transitions below remain exactly as they were.
   ========================================================================== */

/* cross-document transitions (blog <-> site) */
@view-transition { navigation: auto; }

/* ---- scroll progress rail: a readout, not a decoration ---- */
.prog{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform:scaleX(var(--p,0));transform-origin:left center;
  background:linear-gradient(90deg,var(--blue),var(--blue-lift));
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.nav.scrolled .prog{opacity:1}

/* ---- hero recedes as the document rises over it ---- */
/* ---- the focal idea: the reader's scroll is the system's clock ----
   The service diagrams stop looping on a timer and advance across the
   viewport instead. Same keyframes, driven by position rather than time. */
/* ---- metric counter: tabular so the digits do not jitter while counting ---- */
.metric .v[data-count]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}


/* ---- index rows: sharpen the existing hover ---- */
html[data-motion="full"] .irow .no{transition:color .22s ease,transform .22s cubic-bezier(.2,.7,.3,1)}
html[data-motion="full"] .irow:hover .no{color:var(--blue-lift);transform:translateX(2px)}

/* ==========================================================================
   Reduced motion: strip the movement, keep every end state legible.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .prog{animation:none;transform:scaleX(var(--p,0))}
  html[data-motion="full"] .hero-inner{animation:none;transform:none;opacity:1;filter:none}
  html[data-motion="full"] .irow:hover .no{transform:none}
  }



/* ==========================================================================
   THE DOSSIER GRID
   A technical document has marginalia, figure numbers and section folios.
   The page did not. This is the structural layer that makes it one: an
   asymmetric header where the narrow outer column is a margin-note zone,
   section numbers set by CSS counter, and rules that draw as you reach them.
   No markup changes — the existing .sec-head structure carries all of it.
   ========================================================================== */

:root{ --rail: clamp(92px, 12vw, 168px); }
body{ counter-reset: secno; }

.sec-head{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,var(--rail)) minmax(0,1fr);
  column-gap:clamp(18px,4vw,64px);
  align-items:start;
  max-width:none;
  padding-top:22px;
  counter-increment:secno;
}

/* the section rule, drawn left to right on arrival */
.sec-head::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--line);transform:scaleX(1);transform-origin:left center;
}
/* margin note: the label sits beside the heading, not stacked above it */
.sec-head .eyebrow{
  grid-column:1;grid-row:1;
  margin:0;padding-top:.34em;
  display:block;
}
/* section folio, set by counter — no markup, never drifts out of order */
.sec-head::after{
  content:counter(secno, decimal-leading-zero);
  grid-column:1;grid-row:2;
  align-self:start;margin-top:20px;
  font:600 34px/1 var(--sans);letter-spacing:-.04em;
  color:rgba(223,220,227,.42);
}
.sec-head h2{ grid-column:2;grid-row:1;max-width:21ch }
.sec-head .lead{ grid-column:2;grid-row:2;margin-top:20px;max-width:54ch }

@media (max-width:860px){
  .sec-head{grid-template-columns:1fr;row-gap:0}
  .sec-head .eyebrow{grid-column:1;grid-row:1;padding-top:0;margin-bottom:14px}
  .sec-head h2{grid-column:1;grid-row:2;max-width:none}
  .sec-head .lead{grid-column:1;grid-row:3;max-width:none}
  .sec-head::after{
    position:absolute;top:18px;right:0;
    margin-top:0;font-size:22px;
  }
}

/* ---- figure labels: these are drawings in a report, so number them ---- */
.svc-viz{position:relative}
.svc-viz[data-fig]::after{
  content:attr(data-fig);
  position:absolute;top:8px;left:11px;z-index:2;pointer-events:none;
  font:600 9.5px/1 var(--sans);letter-spacing:.13em;
  color:var(--muted);
}

/* ---- systems index: a parts list, not a marquee ---- */
.sysdex{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--line);
  counter-reset:sysno;
}
.sysdex li{
  counter-increment:sysno;
  display:flex;align-items:baseline;gap:11px;
  padding:15px 16px 15px 0;
  border-bottom:1px solid var(--line);
  font-size:14.5px;font-weight:500;letter-spacing:-0.012em;color:var(--text-2);
}
.sysdex li::before{
  content:counter(sysno, decimal-leading-zero);
  font:600 10px/1 var(--sans);letter-spacing:.09em;color:var(--muted);
  flex:none;
}
@media (max-width:860px){
  .sysdex{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sysdex li{font-size:13.5px;padding:13px 12px 13px 0}
}

@media (prefers-reduced-motion:reduce){
  html[data-motion] .sec-head::before{animation:none;transform:scaleX(1)}
}


/* ==========================================================================
   SIGNAL TRACE — the 2D case diagram
   A logic-analyser trace: one lane per system component, time running left to
   right, events latching as the playhead passes them. Scroll IS the time axis,
   which makes it the most literal expression of this page's motion thesis.

   Driven by a plain --t custom property (0..1) set from JavaScript, NOT by
   animation-timeline: scroll-driven CSS animations are still missing from
   enough shipping browsers that the effect silently froze. One code path that
   runs everywhere beats a smoother one that half the visitors never see.

   The grid is aria-hidden; the numbered key beside it is real text.
   ========================================================================== */

.case-viz.trace{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(14px,3vw,44px);align-items:center;
  padding:clamp(16px,2.6vw,26px);
  background:var(--bg-2);
  --t:0;
}

.trace-grid{
  position:relative;
  display:grid;gap:0;
  padding:6px 0;
}

/* the swept region — everything time has already passed */
.trace-swept{
  position:absolute;left:var(--gutter,74px);right:0;top:0;bottom:0;
  background:rgba(223,220,227,.035);
  border-right:0;
  transform:scaleX(var(--t));transform-origin:left center;
  pointer-events:none;
}

.trace-lane{
  position:relative;
  display:grid;grid-template-columns:var(--gutter,74px) minmax(0,1fr);
  align-items:center;gap:0;
  height:clamp(38px,5.2vw,46px);
}
.trace-lbl{
  font:600 9.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
  min-width:0;overflow:hidden;
}
.trace-track{
  position:relative;height:100%;
  display:block;
}
/* the lane's baseline */
.trace-track::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--line);
}

/* an event on the lane */
.trace-ev{
  position:absolute;top:50%;left:calc(var(--at) * 100%);
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border:1px solid var(--line-2);border-radius:2px;
  background:var(--bg-2);
  transition:background .18s ease,border-color .18s ease,transform .28s cubic-bezier(.2,.7,.3,1);
}
.trace-ev.on              {border-color:var(--text-2);background:var(--text-2);transform:scale(1.18)}
.trace-ev.key.on          {border-color:var(--blue);background:var(--blue)}
.trace-ev.ok.on           {border-color:var(--green);background:var(--green)}
/* the moment it latches, a tick rises out of the lane */
.trace-ev.on::after{
  content:"";position:absolute;left:50%;bottom:100%;width:1px;height:9px;
  margin-left:-.5px;background:currentColor;opacity:.5;
}
.trace-ev.key.on{color:var(--blue)}
.trace-ev.ok.on{color:var(--green)}
.trace-ev.on{color:var(--text-2)}

/* the playhead */
.trace-head{
  position:absolute;top:0;bottom:0;left:var(--gutter,74px);width:1px;
  background:var(--blue-lift);
  transform:translateX(var(--hx,0px));
  opacity:0;transition:opacity .3s ease;
}
.case-viz.trace.armed .trace-head{opacity:.9}
.trace-head::before{
  content:"";position:absolute;top:-1px;left:-2.5px;width:6px;height:6px;
  border-radius:50%;background:var(--blue-lift);
}

/* ---- the key: real text, always legible ---- */
.trace-key{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line);
}
.trace-key li{
  display:grid;grid-template-columns:30px minmax(0,1fr);gap:11px;
  align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line);
  opacity:.42;transition:opacity .3s ease;
}
.trace-key li.on{opacity:1}
.trace-key b{font:600 10px/1.5 var(--sans);letter-spacing:.08em;color:var(--muted)}
.trace-key li.key.on b{color:var(--blue-lift)}
.trace-key li.ok.on  b{color:var(--green)}
.trace-key span{font-size:13px;line-height:1.45;color:var(--text-2);letter-spacing:-0.01em;min-width:0;overflow-wrap:anywhere}
.trace-key li.on span{color:var(--text)}

@media (max-width:860px){
  .case-viz.trace{grid-template-columns:1fr;gap:10px}
  /* the lane label is nowrap in a fixed column, so give it room rather than
     letting a long one ("TELEPHONY") spill into the track */
  .trace-lane{--gutter:68px;height:36px}
  .trace-swept,.trace-head{left:68px}
  .trace-lbl{font-size:8.5px;letter-spacing:.09em}
  .trace-key li{padding:9px 0;grid-template-columns:34px minmax(0,1fr)}
  .trace-key span{font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  .trace-ev{transition:none}
  .trace-key li{transition:none}
  .trace-head{display:none}
  .trace-swept{transform:none;opacity:.5}
}

/* ==========================================================================
   SCRUBBED MOTION — driven by --t, never by animation-timeline
   Scroll-driven CSS animations are not yet in enough shipping browsers; where
   they are missing the effect does not degrade, it simply never plays. So a
   single rAF-throttled script sets --t (0..1) on each scrubbed element and
   everything below reads it. One code path, every browser.

   The diagram keyframes are reused verbatim: a paused animation with a
   negative delay renders at an arbitrary point in its own timeline, so --t
   scrubs the existing vzScan / vzRing / vzMsg sequences frame by frame.
   ========================================================================== */

html[data-motion] .svc.live .vz-ring,
html[data-motion] .svc.live .vz-bar,
html[data-motion] .svc.live .vz-msg,
html[data-motion] .svc.live .vz-reply,
html[data-motion] .svc.live .vz-dot,
html[data-motion] .svc.live .vz-scan,
html[data-motion] .svc.live .vz-mod.flag{
  animation-duration:1s;
  animation-iteration-count:1;
  animation-timing-function:linear;   /* scroll supplies the pacing */
  animation-fill-mode:both;
  animation-play-state:paused;
  /* Each element carries its own --d offset (0..1) instead of an inline
     animation-delay. Inline styles outrank a stylesheet rule, so the old
     per-element delays silently won this declaration and froze every one of
     them before frame 0 — and .vz-msg is opacity:0 at 0%, which is why the
     follow-up diagram rendered empty. */
  animation-delay:calc((var(--t,0) - var(--d,0)) * -1s);
}
html[data-motion] .svc.live .vz-ring.r2{ --d:.3 }

/* the section rule draws with the same variable */
html[data-motion] .sec-head::before{
  transform:scaleX(var(--t,1));
}

@media (prefers-reduced-motion:reduce){
  html[data-motion] .svc.live .vz-ring,
  html[data-motion] .svc.live .vz-bar,
  html[data-motion] .svc.live .vz-msg,
  html[data-motion] .svc.live .vz-reply,
  html[data-motion] .svc.live .vz-dot,
  html[data-motion] .svc.live .vz-scan,
  html[data-motion] .svc.live .vz-mod.flag{animation:none}
  html[data-motion] .sec-head::before{transform:scaleX(1)}
}

/* ==========================================================================
   CASE INSTRUMENTS 02 & 03
   A report does not draw every figure the same way. Case 01 is a signal
   trace (a sequence in time); 02 is a schedule (a cadence over dates); 03 is
   a matrix (a population, classified). Same palette, same scrub variable,
   three different instruments.

   Palette note: two tones of the same hue measure ΔE 9.4 for normal vision —
   below the 15 floor, i.e. not actually distinguishable. So the matrix's two
   finding classes are Blueprint Steel vs Ink (ΔE 30.8 normal, 26.7 protan),
   plus a hatch on one of them as secondary encoding. No new hue is
   introduced, which is what the Two-Chromatic Rule requires anyway.
   ========================================================================== */

.case-viz.cadence,.case-viz.matrix{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(14px,3vw,44px);align-items:center;
  padding:clamp(16px,2.6vw,26px);
  background:var(--bg-2);
  --t:0;
}

/* ---- 02 · the cadence schedule ------------------------------------- */
.cal-head,.cal-axis{
  display:flex;justify-content:space-between;
  font:600 9.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.cal-head{margin-bottom:10px}
.cal-axis{margin-top:12px}
.cal-grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.cal-d{
  position:relative;background:var(--bg);
  min-height:clamp(40px,6vw,54px);
  display:flex;align-items:flex-start;justify-content:flex-end;
  padding:6px 7px;
  transition:background .25s ease;
}
.cal-d b{font:600 9.5px/1 var(--sans);letter-spacing:.06em;color:var(--muted);font-weight:600}
.cal-d.on{background:var(--bg-2)}

/* a send: a filled steel square that lands in the day */
.cal-d.send::before,.cal-d.reply::before{
  content:"";position:absolute;left:7px;bottom:7px;
  width:11px;height:11px;border-radius:2px;
  border:1px solid var(--line-2);background:transparent;
  transition:background .22s ease,border-color .22s ease,transform .3s cubic-bezier(.2,.7,.3,1);
}
.cal-d.send.on::before{background:var(--blue);border-color:var(--blue);transform:scale(1.12)}
.cal-d.reply.on::before{background:var(--green);border-color:var(--green);transform:scale(1.12)}
/* the reply breaks the cadence — mark it */
.cal-d.reply.on::after{
  content:"";position:absolute;left:12px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--green));
}

/* ---- 03 · the audit matrix ----------------------------------------- */
.mx-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(9px,1fr));
  gap:3px;
}
.mx-c{
  aspect-ratio:1;border-radius:1px;
  background:rgba(223,220,227,.07);
  transition:background .2s ease,box-shadow .2s ease;
}
.mx-c.seen{background:var(--line-2)}
/* raw SQL — solid accent */
.mx-c.sql{background:var(--blue)}
/* legacy JS — ink, plus a hatch so the two classes survive CVD and print */
.mx-c.js{
  background:var(--text);
  background-image:repeating-linear-gradient(45deg,
    rgba(33,35,39,.55) 0 1.5px, transparent 1.5px 3px);
}
.mx-axis{
  display:flex;justify-content:space-between;margin-top:14px;
  font:600 9.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}

/* key swatches so identity is never carried by position alone */
.trace-key li.sql b,.trace-key li.js b{position:relative;padding-left:15px}
.trace-key li.sql b::before,.trace-key li.js b::before{
  content:"";position:absolute;left:0;top:.15em;width:9px;height:9px;border-radius:1px;
}
.trace-key li.sql b::before{background:var(--blue)}
.trace-key li.js b::before{
  background:var(--text);
  background-image:repeating-linear-gradient(45deg,
    rgba(33,35,39,.55) 0 1.5px, transparent 1.5px 3px);
}
.trace-key li.sql.on b,.trace-key li.js.on b{color:var(--text-2)}

@media (max-width:860px){
  .case-viz.cadence,.case-viz.matrix{grid-template-columns:1fr;gap:10px}
  .cal-d{min-height:42px;padding:5px 6px}
  .cal-d b{font-size:9px}
  .cal-d.send::before,.cal-d.reply::before{width:9px;height:9px;left:6px;bottom:6px}
  .cal-head,.cal-axis,.mx-axis{font-size:8.5px;letter-spacing:.09em;gap:12px}
  .cal-axis span,.cal-head span,.mx-axis span{min-width:0}
  .mx-grid{gap:2px;grid-template-columns:repeat(auto-fill,minmax(8px,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .cal-d,.cal-d.send::before,.cal-d.reply::before,.mx-c{transition:none}
  .cal-d.send.on::before,.cal-d.reply.on::before{transform:none}
}


/* ==========================================================================
   RESTRUCTURE LAYER
   Added for the multi-page split: case-study teasers, mid-page booking
   prompts, the after-hours test form, and the inline calendar frame.
   Everything below reuses the tokens above — no new colours, no new type.
   ========================================================================== */

/* ---- work teasers ------------------------------------------------------
   An .irow with a result line and a read-through link. The grid is the
   same one .irow already responds with at 1000px, so the teaser inherits
   its mobile behaviour for free. */
.teasers{margin-top:clamp(34px,5vh,52px);border-top:1px solid var(--line)}
.teaser{
  display:grid;grid-template-columns:52px 1fr auto;gap:10px 24px;align-items:start;
  padding:28px 8px 28px 0;border-bottom:1px solid var(--line);
  transition:background .22s ease,padding-left .22s ease;
}
.teaser:hover{background:rgba(223,220,227,.035);padding-left:14px}
.teaser:hover .hl{color:var(--blue-lift)}
.teaser .no{font:500 11px/1 var(--sans);letter-spacing:.06em;color:var(--muted);padding-top:5px}
.teaser .hl{font-size:clamp(18px,1.9vw,23px);font-weight:600;letter-spacing:-0.025em;line-height:1.25;transition:color .2s}
.teaser .tag{
  font:500 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-2);border-radius:999px;padding:7px 12px;white-space:nowrap;
  grid-column:3;grid-row:1;
}
.teaser .sub{grid-column:2;font-size:15px;line-height:1.6;color:var(--text-2);max-width:62ch}
.teaser .res{
  grid-column:2;display:flex;gap:10px;align-items:flex-start;
  font-size:14px;line-height:1.55;color:var(--text);font-weight:500;
}
.teaser .res i{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;margin-top:6px}
.teaser .go{
  grid-column:2;display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-size:14px;font-weight:500;color:var(--blue-lift);transition:color .2s;
}
.teaser .go .ar{transition:transform .2s;display:inline-block}
.teaser:hover .go .ar{transform:translateX(3px)}
@media (max-width:1000px){
  .teaser{grid-template-columns:40px 1fr}
  .teaser .tag{grid-column:2;grid-row:auto;justify-self:start;order:9}
}

/* ---- mid-page booking prompt -------------------------------------------
   The page now asks three times before the footer. This is the quiet
   version: a rule, a line of copy, and the button. */
.midcta{
  margin-top:clamp(30px,4.5vh,44px);padding-top:clamp(26px,3.5vh,34px);
  border-top:1px solid var(--line);
  display:flex;gap:18px 26px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.midcta p{font-size:15.5px;line-height:1.55;color:var(--text-2);max-width:52ch}
.midcta p b{color:var(--text);font-weight:600}

/* ---- after-hours test --------------------------------------------------
   NOT CURRENTLY USED. The section this styles was taken off the homepage on
   2026-09-22 — it offered a service with nothing behind it yet. Markup and
   JS are parked in _disabled/after-hours-test.*; these rules are left in
   place so restoring it is a paste, not a rebuild.

   The soft offer for visitors who will not book yet. Pitch left, form right. */
.soft{
  border:1px solid var(--line);border-radius:20px;background:var(--bg-2);
  padding:clamp(28px,4.5vw,52px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start;
}
.soft-say h2{margin-top:16px}
.soft-say > p{margin-top:18px;font-size:16px;line-height:1.7;color:var(--text-2);max-width:46ch}
.soft-list{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.soft-list li{position:relative;padding-left:20px;margin-bottom:10px;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.soft-list li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:1px;background:var(--blue)}
.soft-note{margin-top:20px;font-size:13px;line-height:1.55;color:var(--muted)}

/* ---- form controls ---- */
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.wide{grid-column:1 / -1}
.field label{font:600 11.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field input{
  width:100%;background:var(--bg);color:var(--text);
  border:1px solid var(--line-2);border-radius:10px;
  padding:14px 14px;min-height:48px;              /* thumb-sized on a phone */
  font:400 15px/1.3 var(--sans);letter-spacing:-0.005em;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
  -webkit-appearance:none;appearance:none;
}
.field input::placeholder{color:var(--muted)}
.field input:hover{border-color:var(--muted)}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(54,140,191,.18);background:var(--bg-2)}
.field input[aria-invalid="true"]{border-color:#C46B5E}
.field input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(196,107,94,.2)}
.f-err{font-size:12.5px;line-height:1.4;color:#D98B7E;min-height:0}
.field .f-err:empty{display:none}
.f-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:22px}
.f-status{font-size:13.5px;line-height:1.5;color:#D98B7E;max-width:40ch}
.f-status:empty{display:none}
.btn[disabled]{opacity:.55;pointer-events:none}

/* success state replaces the form in place, so the section does not jump */
.f-done{display:none;padding:26px 0}
.f-done.on{display:block}
.form-wrap.sent form{display:none}
.f-done h3{font-size:21px;letter-spacing:-0.025em;display:flex;gap:12px;align-items:center}
.f-done h3 i{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none}
.f-done p{margin-top:14px;font-size:15px;line-height:1.7;color:var(--text-2);max-width:44ch}

@media (max-width:1000px){
  .soft{grid-template-columns:1fr}
}
@media (max-width:720px){
  .soft{border-radius:16px;padding:26px 20px}
  .f-grid{grid-template-columns:1fr}
  .midcta{gap:16px}
  .midcta .btn{width:100%;justify-content:center}
}

/* ---- the booking page ---------------------------------------------------
   The calendar lives on /book now, where it gets the full page width. That
   width is the whole trick: under ~768px of container cal.com stacks the
   month grid above the slots and reports ~2,100px; given more it lays them
   side by side and reports ~540px.

   Named .book-* rather than .cal-*: cal.com's embed script injects its own
   `.cal-embed { margin:0 auto; border:0 }` rule after this stylesheet, which
   silently wins every tie. */
.book-sec{padding-top:clamp(34px,5vh,54px)}
.book-frame{
  width:100%;max-width:1000px;margin:0 auto;
  min-height:560px;                /* holds the space while the embed loads */
  border:1px solid var(--line);border-radius:16px;background:var(--bg-2);
  overflow:hidden;
}
/* On a phone there is no room for the side-by-side layout, so the embed is
   tall. That is fine on a page whose only job is the calendar — it simply
   scrolls with the page, with no inner scroll box to trap a thumb. */
@media (max-width:720px){
  .book-frame{border-radius:12px;min-height:520px}
}
.book-foot{
  max-width:1000px;margin:clamp(26px,4vh,38px) auto 0;
  padding-top:22px;border-top:1px solid var(--line);
}
.book-foot p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.book-foot a{color:var(--blue-lift);transition:color .2s}
.book-foot a:hover{color:var(--text)}

/* ---- about block on the homepage ---- */
.portrait{
  width:100%;max-width:280px;aspect-ratio:1/1;object-fit:cover;
  border-radius:16px;border:1px solid var(--line-2);background:var(--bg-2);display:block;
}
.portrait-fb{
  display:grid;place-items:center;font:600 34px/1 var(--sans);
  letter-spacing:.04em;color:var(--muted);
}
.about-mini .about-body p{font-size:16.5px}

/* ---- sub-page furniture ------------------------------------------------
   Inner pages open with a compact masthead instead of the pinned hero. */
.phead{padding:calc(var(--nav) + clamp(48px,8vh,92px)) 0 clamp(34px,5vh,54px);border-bottom:1px solid var(--line)}
.phead .back{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;
  font-size:13.5px;font-weight:500;color:var(--muted);transition:color .2s;
}
.phead .back:hover{color:var(--blue-lift)}
.phead .back .ar{transition:transform .2s;display:inline-block}
.phead .back:hover .ar{transform:translateX(-3px)}
.phead h1{
  margin-top:16px;font-size:clamp(32px,5.4vw,60px);font-weight:600;
  letter-spacing:-0.035em;line-height:1.05;max-width:18ch;
}
.phead .lead{margin-top:20px;max-width:64ch}
.phead .about-meta{margin-top:24px}
.pfacts{margin-top:30px}
.prose{max-width:72ch}
.prose h2{font-size:clamp(22px,3vw,30px);letter-spacing:-0.03em;margin-top:clamp(38px,5vh,56px)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;letter-spacing:-0.024em;margin-top:32px}
.prose p{margin-top:16px;font-size:16px;line-height:1.75;color:var(--text-2)}
.prose ul{margin-top:16px}
.prose li{position:relative;padding-left:20px;margin-bottom:11px;font-size:15.5px;line-height:1.65;color:var(--text-2)}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--muted)}
.pend{
  margin-top:clamp(44px,6vh,72px);padding-top:clamp(30px,4vh,44px);border-top:1px solid var(--line);
}
.pend h2{font-size:clamp(22px,3vw,30px);letter-spacing:-0.03em}
.pend p{margin-top:14px;font-size:16px;line-height:1.7;color:var(--text-2);max-width:54ch}
.pend .row{display:flex;gap:14px;align-items:center;margin-top:26px;flex-wrap:wrap}
@media (max-width:720px){
  .pend .btn{width:100%;justify-content:center}
}

/* the slide-over menu carries the booking action on a phone, because the
   nav's own button is display:none below 720px */
.sheet-foot .btn{justify-content:center;margin-bottom:12px;color:var(--on-accent)}
.sheet-foot .btn:hover{color:var(--on-accent)}

/* the teaser list already ends on a rule, and .midcta opens with one —
   drop the last teaser's so the two do not stack into a double line */
.teasers .teaser:last-child{border-bottom:0}