/* ===================================================================
   NeverOff
   BUILD. MARKET. AUTOMATE. GROW.

   The site is built as chapters. Each one owns the full viewport width
   and declares its own colour as a local token set, so a section is
   dark or light as a whole and never half-and-half. Type, rules,
   buttons and objects all read --fg and --bg off whichever chapter
   they happen to be sitting in, which is why there is almost no
   per-section styling further down this file.
   =================================================================== */

/* ---- TOKENS ------------------------------------------------------ */
:root{
  --blue:#2A60F5;
  --blue-deep:#16286B;
  --coral:#EA7B55;
  --cream:#F3EADF;
  --amber:#F5C04A;
  --ink:#101016;
  --ink-2:#1A1A22;
  --paper:#FBF8F4;

  --yellow-pill:#F6E978;

  --r:14px; --r-lg:26px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* Display is Archivo, a variable grotesque with a real width axis, set
     narrow and heavy. It replaced Anton, which has one weight, no width
     axis, clumsy caps at large sizes and is on half the free templates in
     existence. Body is Instrument Sans, which has more character than
     Inter at reading sizes without costing legibility. */
  --display:'Archivo','Archivo Black',Impact,sans-serif;
  --body-font:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --dsp-wdth:86%;

  --navh:74px;
  --gut:clamp(20px,4vw,64px);
  --maxw:1440px;

  /* Chapters default to the blue tone and override below. */
  --bg:var(--blue);
  --fg:#FFFFFF;
  --fg-dim:rgba(255,255,255,.72);
  --fg-mute:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.22);
  --line-soft:rgba(255,255,255,.12);
  --field:rgba(255,255,255,.08);
}

[data-tone="blue"]  {--bg:var(--blue);      --fg:#fff;        --fg-dim:rgba(255,255,255,.74);--fg-mute:rgba(255,255,255,.54);--line:rgba(255,255,255,.24);--line-soft:rgba(255,255,255,.13);--field:rgba(255,255,255,.09)}
[data-tone="navy"]  {--bg:var(--blue-deep); --fg:#fff;        --fg-dim:rgba(255,255,255,.74);--fg-mute:rgba(255,255,255,.52);--line:rgba(255,255,255,.22);--line-soft:rgba(255,255,255,.12);--field:rgba(255,255,255,.08)}
[data-tone="ink"]   {--bg:var(--ink);       --fg:#F6F5F2;     --fg-dim:rgba(246,245,242,.70);--fg-mute:rgba(246,245,242,.48);--line:rgba(246,245,242,.18);--line-soft:rgba(246,245,242,.10);--field:rgba(246,245,242,.07)}
[data-tone="coral"] {--bg:var(--coral);     --fg:#FFFCF8;     --fg-dim:rgba(255,252,248,.80);--fg-mute:rgba(255,252,248,.58);--line:rgba(255,252,248,.30);--line-soft:rgba(255,252,248,.16);--field:rgba(255,252,248,.12)}
[data-tone="cream"] {--bg:var(--cream);     --fg:var(--ink);  --fg-dim:rgba(16,16,22,.74);   --fg-mute:rgba(16,16,22,.52);  --line:rgba(16,16,22,.18);   --line-soft:rgba(16,16,22,.09); --field:rgba(16,16,22,.05)}
[data-tone="amber"] {--bg:var(--amber);     --fg:var(--ink);  --fg-dim:rgba(16,16,22,.76);   --fg-mute:rgba(16,16,22,.54);  --line:rgba(16,16,22,.22);   --line-soft:rgba(16,16,22,.11); --field:rgba(16,16,22,.06)}
[data-tone="paper"] {--bg:var(--paper);     --fg:var(--ink);  --fg-dim:rgba(16,16,22,.72);   --fg-mute:rgba(16,16,22,.50);  --line:rgba(16,16,22,.16);   --line-soft:rgba(16,16,22,.08); --field:rgba(16,16,22,.05)}

/* ---- BASE -------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ink);color:#fff;
  font-family:var(--body-font);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--yellow-pill);color:var(--ink)}
:focus-visible{outline:2px solid var(--yellow-pill);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- TYPE -------------------------------------------------------- */
/* The display face only ever runs uppercase. Archivo is set at 800 and
   narrowed to 86% on its width axis, which gives the poster weight
   without the crude letterforms of a single-weight condensed face. */
.dsp{
  font-family:var(--display);
  font-weight:800;font-stretch:var(--dsp-wdth);text-transform:uppercase;letter-spacing:-0.028em;
  line-height:.93;color:var(--fg);
  font-size:clamp(38px,7.1vw,112px);
}
.dsp.sm{font-size:clamp(29px,4.5vw,66px)}
.dsp.xs{font-size:clamp(23px,2.9vw,40px);line-height:1}
.dsp em{font-style:normal;color:var(--yellow-pill)}
[data-tone="amber"] .dsp em,[data-tone="cream"] .dsp em,[data-tone="paper"] .dsp em{color:var(--blue)}
[data-tone="coral"] .dsp em{color:var(--ink)}

/* Outline type. Sits behind the objects and gives the scene something
   to move against, which is most of why the parallax reads as depth. */
.ghost{
  font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);text-transform:uppercase;line-height:.95;
  font-size:clamp(40px,7.4vw,124px);letter-spacing:-0.01em;
  color:transparent;-webkit-text-stroke:1.4px var(--line);
  user-select:none;pointer-events:none;
}

.lbl{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute);
  display:inline-flex;align-items:center;gap:12px;
}
.lbl::before{content:'';width:28px;height:1px;background:var(--line);flex:none}
.lbl.bare::before{display:none}

.lede{font-size:clamp(16px,1.35vw,19px);line-height:1.56;color:var(--fg-dim);max-width:46ch}
.sub{font-size:clamp(14.5px,1.1vw,16px);line-height:1.6;color:var(--fg-dim)}
h2,h3,h4{font-weight:600;letter-spacing:-0.025em;line-height:1.15;color:var(--fg)}

/* ---- BUTTONS ----------------------------------------------------- */
.pill{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--yellow-pill);color:var(--ink);
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:13px 22px;border-radius:var(--r-pill);border:none;cursor:pointer;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),background .2s;
  box-shadow:0 2px 0 rgba(0,0,0,.14);will-change:transform;
}
.pill:hover{box-shadow:0 10px 26px -8px rgba(0,0,0,.4),0 2px 0 rgba(0,0,0,.14)}
.pill.lg{font-size:13px;padding:17px 30px}

.btn-line{
  display:inline-flex;align-items:center;justify-content:space-between;gap:34px;
  border:1px solid var(--line);color:var(--fg);background:none;cursor:pointer;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;padding:15px 20px;border-radius:4px;
  transition:background .3s var(--ease),border-color .3s var(--ease),gap .3s var(--ease);
}
.btn-line:hover{background:var(--field);border-color:var(--fg);gap:44px}
.btn-line svg{flex:none;transition:transform .35s var(--ease-out)}
.btn-line:hover svg{transform:translateX(5px)}
.btn-line.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-line.solid:hover{opacity:.88}

/* ---- NAV --------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;
  transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--maxw);margin:0 auto;padding:18px var(--gut)}
.nav.stuck{background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg)}
.brand img{height:26px;width:auto}
.brand .wm{font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);font-size:21px;letter-spacing:.01em;
  text-transform:uppercase;line-height:1}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow-pill);
  margin-left:1px;align-self:flex-start;margin-top:3px}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--fg-mute);transition:color .25s;position:relative;padding:4px 0}
.nav-links a:hover{color:var(--fg)}
.nav-links a.on{color:var(--fg)}
.nav-links a.on::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--fg)}
.nav-tools{display:flex;align-items:center;gap:10px}

.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  background:none;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:15px;height:1.6px;background:var(--fg);border-radius:2px;
  transition:transform .32s var(--ease-out)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:69;background:var(--ink);color:#F6F5F2;
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.menu.open{opacity:1;visibility:visible}
.menu a{font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);text-transform:uppercase;font-size:clamp(32px,8vw,64px);
  line-height:1.12;color:#F6F5F2;opacity:.6;transition:opacity .25s,transform .45s var(--ease-out);
  transform:translateY(16px)}
.menu.open a{transform:none;opacity:.6}
.menu a:hover,.menu a.on{opacity:1}
.menu .m-foot{margin-top:38px;display:flex;flex-direction:column;gap:7px;
  font-family:var(--mono);font-size:12.5px;color:rgba(246,245,242,.6)}
.menu .m-foot a{font-family:inherit;font-size:inherit;opacity:1;transform:none;color:var(--yellow-pill)}

/* ---- CHAPTER ----------------------------------------------------- */
.ch{position:relative;background:var(--bg);color:var(--fg);overflow:hidden;
  padding:clamp(88px,11vh,130px) 0 clamp(72px,9vh,110px)}
.ch.full{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.ch-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

.ch-meta{position:absolute;left:var(--gut);right:var(--gut);bottom:26px;z-index:3;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;pointer-events:none}
.ch-count{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--fg-mute)}
.scroll-cue{display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fg-mute)}
.scroll-cue i{display:block;width:1px;height:34px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue i::after{content:'';position:absolute;inset:0;background:var(--fg);
  animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---- THE SCENE --------------------------------------------------- */
/* Objects are positioned in percentages of the chapter, then moved by
   scroll in JS. Keeping placement in percentages means the composition
   survives a resize instead of needing a breakpoint per object. */
.scene{position:absolute;inset:0;z-index:1;pointer-events:none}
.ob{position:absolute;display:block;will-change:transform}
.ob svg{width:100%;height:auto;overflow:visible}
.ob.float{animation:bob 6s var(--ease) infinite}
.ob.float.b{animation-duration:7.4s;animation-delay:-2s}
.ob.float.c{animation-duration:8.6s;animation-delay:-4s}
@keyframes bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}

/* The podium the hero cluster stands on. */
.podium{position:absolute;left:50%;bottom:-6%;width:min(560px,52vw);aspect-ratio:1/1;
  transform:translateX(-50%);z-index:1;pointer-events:none}
.podium .disc{position:absolute;left:0;right:0;top:46%;height:34%;border-radius:50%;
  background:linear-gradient(180deg,#F8F1E9 0%,#EADDD0 48%,#CBB8A6 100%);
  box-shadow:0 36px 70px -24px rgba(10,8,20,.46)}
.podium .disc::after{content:'';position:absolute;left:6%;right:6%;top:10%;height:52%;
  border-radius:50%;background:rgba(255,255,255,.5);filter:blur(10px)}

/* ---- GRIDS ------------------------------------------------------- */
.cols{display:grid;gap:0;border-top:1px solid var(--line)}
.cols.c4{grid-template-columns:repeat(4,1fr)}
.cols.c3{grid-template-columns:repeat(3,1fr)}
.col{padding:30px 26px 26px;border-left:1px solid var(--line);position:relative;
  transition:background .4s var(--ease)}
.col:last-child{border-right:1px solid var(--line)}
.col:hover{background:var(--field)}
.col .n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--fg-mute)}
.col .art{height:132px;margin:14px 0 20px;display:flex;align-items:flex-end;justify-content:center}
.col .art svg{width:auto;height:100%;overflow:visible}
.col h3{font-family:var(--display);text-transform:uppercase;font-weight:800;font-stretch:var(--dsp-wdth);
  font-size:clamp(20px,1.8vw,27px);letter-spacing:0;line-height:1}
.col p{margin-top:10px;font-size:14px;line-height:1.55;color:var(--fg-dim)}

.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r)}
.feat > div{background:var(--bg);padding:26px 24px}
.feat h3{font-size:17px;margin-bottom:8px}
.feat p{font-size:14.2px;color:var(--fg-dim);line-height:1.55}

/* ---- MARQUEE ----------------------------------------------------- */
.mq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:16px 0;background:var(--bg)}
.mq-track{display:flex;width:max-content;animation:run 30s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes run{to{transform:translateX(-50%)}}
.mq-item{display:flex;align-items:center;gap:22px;padding:0 22px;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);text-transform:uppercase;
  font-size:clamp(18px,2.4vw,34px);color:var(--fg)}
.mq-item s{text-decoration:none;color:var(--yellow-pill);font-size:.6em}

/* ---- ACCORDION --------------------------------------------------- */
.acc{border-top:1px solid var(--line)}
.acc-row{border-bottom:1px solid var(--line)}
.acc-head{width:100%;background:none;border:none;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:20px;padding:22px 0;color:var(--fg)}
.acc-head .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--fg-mute);flex:none;width:34px}
.acc-head .t{flex:1;font-family:var(--display);text-transform:uppercase;font-weight:800;font-stretch:var(--dsp-wdth);
  font-size:clamp(19px,2.4vw,32px);line-height:1.04}
.acc-head .s{flex:none;font-size:13px;color:var(--fg-mute);display:none}
@media (min-width:760px){.acc-head .s{display:block;max-width:34%;text-align:right}}
.acc-head .pm{flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;position:relative;transition:background .3s,transform .4s var(--ease-out)}
.acc-head .pm::before,.acc-head .pm::after{content:'';position:absolute;background:var(--fg);
  transition:transform .35s var(--ease-out)}
.acc-head .pm::before{width:12px;height:1.5px}
.acc-head .pm::after{width:1.5px;height:12px}
.acc-row.open .pm{background:var(--field);transform:rotate(180deg)}
.acc-row.open .pm::after{transform:scaleY(0)}
.acc-body{overflow:hidden;height:0;transition:height .45s var(--ease-out)}
.acc-inner{padding:0 0 28px 54px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.acc-inner h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-mute);margin-bottom:7px;font-weight:500}
.acc-inner p{font-size:14.4px;line-height:1.55;color:var(--fg-dim)}

/* ---- BOOKING ----------------------------------------------------- */
.booking{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);
  align-items:start}
.bk-card{background:var(--field);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px)}
.bk-step{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bk-step b{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-mute);font-weight:500}
.bk-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px}
.day{border:1px solid var(--line);border-radius:12px;background:none;cursor:pointer;
  padding:12px 6px;text-align:center;transition:background .25s,border-color .25s,transform .25s var(--ease-out)}
.day:hover{border-color:var(--fg)}
.day .d{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute);display:block}
.day .n{font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);font-size:23px;line-height:1.1;display:block;margin-top:3px}
.day .m{font-size:11px;color:var(--fg-mute);display:block}
.day[aria-pressed="true"]{background:var(--yellow-pill);border-color:var(--yellow-pill);color:var(--ink)}
.day[aria-pressed="true"] .d,.day[aria-pressed="true"] .m{color:rgba(16,16,22,.66)}

.bk-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin-top:8px}
.slot{border:1px solid var(--line);border-radius:var(--r-pill);background:none;cursor:pointer;
  padding:11px 8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  transition:background .25s,border-color .25s}
.slot:hover{border-color:var(--fg)}
.slot[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.slot[disabled]{opacity:.32;cursor:not-allowed}

.field{display:block;margin-top:14px}
.field span{display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%;background:var(--field);border:1px solid var(--line);border-radius:12px;
  padding:14px 15px;color:var(--fg);font-size:15px;transition:border-color .25s,background .25s}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-mute)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--yellow-pill);background:transparent}
.field textarea{min-height:92px;resize:vertical}
.bk-sum{margin-top:16px;padding:14px 16px;border:1px dashed var(--line);border-radius:12px;
  font-size:14px;color:var(--fg-dim)}
.bk-sum b{color:var(--fg)}
.bk-note{margin-top:12px;font-size:12.5px;color:var(--fg-mute);line-height:1.5}

.bk-aside .big{font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);text-transform:uppercase;
  font-size:clamp(30px,4vw,58px);line-height:.94;margin-bottom:18px}
.bk-list{list-style:none;margin-top:22px;border-top:1px solid var(--line)}
.bk-list li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.bk-list .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--fg-mute);flex:none;width:30px;padding-top:2px}
.bk-list p{font-size:14.6px;color:var(--fg-dim);line-height:1.5}
.bk-list b{color:var(--fg);font-weight:600}
.direct{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* ---- CONCIERGE --------------------------------------------------- */
.cx-dock{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:80;
  display:flex;align-items:center;gap:10px}
.cx-tip{background:var(--ink);color:#F6F5F2;border-radius:var(--r-pill);padding:11px 17px;
  font-size:13.5px;box-shadow:0 14px 34px -12px rgba(0,0,0,.6);max-width:252px;
  opacity:0;transform:translateX(12px) scale(.96);transition:all .4s var(--ease-out);pointer-events:none}
.cx-tip.show{opacity:1;transform:none;pointer-events:auto}
.cx-btn{width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;flex:none;
  background:var(--yellow-pill);color:var(--ink);display:grid;place-items:center;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.5);transition:transform .35s var(--ease-out)}
.cx-btn:hover{transform:scale(1.07)}
.cx-btn .dot{position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;
  background:var(--coral);border:2.5px solid var(--yellow-pill)}

.cx-panel{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(84px,9vw,100px);z-index:81;
  width:min(394px,calc(100vw - 28px));height:min(588px,calc(100svh - 128px));
  background:var(--paper);color:var(--ink);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 34px 80px -20px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out),visibility .34s}
.cx-panel.open{opacity:1;visibility:visible;transform:none}
.cx-head{display:flex;align-items:center;gap:11px;padding:15px 17px;background:var(--ink);color:#F6F5F2}
.cx-head .av{width:36px;height:36px;border-radius:50%;background:var(--yellow-pill);
  display:grid;place-items:center;color:var(--ink);flex:none}
.cx-head .nm{font-weight:600;font-size:14.5px;line-height:1.25}
.cx-head .st{font-size:11.5px;color:rgba(246,245,242,.6);display:flex;align-items:center;gap:6px}
.cx-head .st i{width:6px;height:6px;border-radius:50%;background:#49D17E;display:block}
.cx-head .x{margin-left:auto;background:none;border:none;cursor:pointer;color:rgba(246,245,242,.7);
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center}
.cx-head .x:hover{background:rgba(255,255,255,.1);color:#fff}
.cx-log{flex:1;overflow-y:auto;padding:17px;display:flex;flex-direction:column;gap:11px;
  background:var(--paper);scroll-behavior:smooth}
.msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:14.6px;line-height:1.5;white-space:pre-wrap}
.msg.bot{background:#fff;border:1px solid rgba(16,16,22,.1);border-bottom-left-radius:5px;align-self:flex-start}
.msg.me{background:var(--blue);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg a{text-decoration:underline}
.typing{display:flex;gap:4px;align-self:flex-start;background:#fff;border:1px solid rgba(16,16,22,.1);
  padding:13px 15px;border-radius:16px;border-bottom-left-radius:5px}
.typing i{width:6px;height:6px;border-radius:50%;background:rgba(16,16,22,.34);
  animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.cx-chips{display:flex;gap:7px;flex-wrap:wrap;padding:0 17px 11px;background:var(--paper)}
.chip{background:#fff;border:1px solid rgba(16,16,22,.16);border-radius:var(--r-pill);
  padding:8px 13px;font-size:12.5px;cursor:pointer;transition:background .2s,border-color .2s}
.chip:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.cx-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid rgba(16,16,22,.1);background:#fff}
.cx-form input{flex:1;border:1px solid rgba(16,16,22,.16);border-radius:var(--r-pill);
  padding:12px 15px;font-size:14.5px;background:var(--paper)}
.cx-form input:focus{outline:none;border-color:var(--blue)}
.cx-form button{width:42px;height:42px;border-radius:50%;border:none;background:var(--ink);
  color:#fff;cursor:pointer;flex:none;display:grid;place-items:center;transition:transform .25s}
.cx-form button:hover{transform:scale(1.07)}
.cx-wa{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 14px 12px;
  background:#1FAD52;color:#fff;border-radius:var(--r-pill);padding:12px;font-size:13.5px;font-weight:600}

/* ---- FOOTER ------------------------------------------------------ */
.foot{background:var(--ink);color:#F6F5F2;padding:clamp(54px,7vw,88px) 0 30px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));
  gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(246,245,242,.14)}
.foot .big{font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);text-transform:uppercase;
  font-size:clamp(28px,4.2vw,58px);line-height:.95;margin-bottom:20px}
.foot h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(246,245,242,.48);margin-bottom:15px;font-weight:500}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot ul a{font-size:14.6px;color:rgba(246,245,242,.76);transition:color .2s}
.foot ul a:hover{color:var(--yellow-pill)}
.foot-bot{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  padding-top:24px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:rgba(246,245,242,.42)}

/* ---- REVEAL ------------------------------------------------------ */
/* Applied only once JS has confirmed it can also take it away, so a
   failed script leaves readable text instead of a blank page. */
html.anim .rv{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
html.anim .rv.in{opacity:1;transform:none}
html.anim .rv[data-d="1"]{transition-delay:.08s}
html.anim .rv[data-d="2"]{transition-delay:.16s}
html.anim .rv[data-d="3"]{transition-delay:.24s}
html.anim .rv[data-d="4"]{transition-delay:.32s}
html.anim .ln{display:block;overflow:hidden;padding-bottom:.06em}
html.anim .ln > span{display:block;transform:translateY(106%);
  transition:transform .9s var(--ease-out)}
html.anim .ln.in > span{transform:none}

/* ---- RESPONSIVE --------------------------------------------------- */
@media (max-width:1080px){
  .cols.c4{grid-template-columns:repeat(2,1fr)}
  .col:nth-child(2n){border-right:1px solid var(--line)}
  .feat{grid-template-columns:1fr}
  .booking{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-tools .pill{display:none}
  .ghost{-webkit-text-stroke-width:1px}
}
@media (max-width:860px){:root{--navh:66px}}
@media (max-width:620px){
  .cols.c4,.cols.c3{grid-template-columns:1fr}
  .col{border-right:1px solid var(--line)}
  .ch.full{min-height:auto;padding-top:104px}
  .acc-inner{padding-left:0}
  .foot-top{grid-template-columns:1fr}
  .ch-meta{position:static;margin-top:30px;padding:0}
  .scroll-cue{display:none}
}

@media (prefers-reduced-motion:reduce){
  .ob.float,.mq-track,.scroll-cue i::after{animation:none!important}
  html.anim .rv{opacity:1!important;transform:none!important}
  html.anim .ln > span{transform:none!important}
  .ob{transform:none!important}
}

/* Ten services want five across, not four, so the grid stays even. */
.cols.c5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1180px){.cols.c5{grid-template-columns:repeat(3,1fr)}
  .cols.c5 .col:nth-child(3n){border-right:1px solid var(--line)}}
@media (max-width:760px){.cols.c5{grid-template-columns:repeat(2,1fr)}
  .cols.c5 .col:nth-child(3n){border-right:none}
  .cols.c5 .col:nth-child(2n){border-right:1px solid var(--line)}}
@media (max-width:480px){.cols.c5{grid-template-columns:1fr}
  .cols.c5 .col{border-right:1px solid var(--line)}}

/* A stage card: numbered, with the object sitting in the corner. */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stage{background:var(--bg);padding:26px 24px 22px;position:relative;min-height:230px;
  display:flex;flex-direction:column}
.stage .n{font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);font-size:42px;line-height:1;color:var(--fg-mute);opacity:.5}
.stage h3{font-family:var(--display);text-transform:uppercase;font-weight:800;font-stretch:var(--dsp-wdth);
  font-size:22px;margin:12px 0 9px;letter-spacing:0}
.stage p{font-size:14.2px;color:var(--fg-dim);line-height:1.55}
.stage .when{margin-top:auto;padding-top:14px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute)}
.stage .obj{position:absolute;right:14px;top:14px;width:62px;opacity:.95}
@media (max-width:1080px){.stages{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stages{grid-template-columns:1fr}}

/* Plan columns. No prices anywhere by design. */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.plan{background:var(--bg);padding:30px 26px;display:flex;flex-direction:column;position:relative}
.plan.pick{background:var(--field)}
.plan .tag{position:absolute;top:16px;right:16px;background:var(--yellow-pill);color:var(--ink);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-pill);font-weight:600}
.plan h3{font-family:var(--display);text-transform:uppercase;font-weight:800;font-stretch:var(--dsp-wdth);
  font-size:clamp(26px,3vw,38px);line-height:1;letter-spacing:0}
.plan .for{font-size:14px;color:var(--fg-dim);margin:10px 0 20px;min-height:42px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;
  padding-top:18px;border-top:1px solid var(--line-soft);margin-bottom:22px}
.plan li{display:flex;gap:10px;font-size:14.3px;color:var(--fg-dim);line-height:1.45}
.plan li svg{flex:none;margin-top:3px;color:var(--fg)}
.plan .go{margin-top:auto}
.plan .go .btn-line{width:100%}
@media (max-width:900px){.plans{grid-template-columns:1fr}}

/* Two-up editorial block. */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,70px);
  align-items:center}
@media (max-width:860px){.duo{grid-template-columns:1fr}}

.quiet{font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--fg-mute);line-height:1.6}
.err{display:none;margin-top:10px;font-size:13.5px;color:var(--ink);background:var(--yellow-pill);
  padding:10px 13px;border-radius:10px}
/* Named for its section. A bare .done collided with the state class the
   live-system demo puts on a finished node, and hid the whole track. */
.bk-done{display:none;margin-top:14px;padding:15px 17px;border-radius:12px;
  background:var(--field);border:1px solid var(--line);font-size:14.4px;color:var(--fg-dim)}
.bk-done b{color:var(--fg)}

/* ---- HERO -------------------------------------------------------- */
.hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:clamp(20px,3vw,50px);align-items:center;width:100%}
.hero-copy{position:relative;z-index:3;max-width:660px}
.hero .dsp{margin:22px 0 0}
.hero .lede{margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-stage{position:relative;height:clamp(330px,44vw,540px)}
.hero-stage .ob{width:auto}
@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero-stage{height:300px;margin-top:4px}
  .podium{width:min(380px,76vw)}
}

/* Trust strip under the hero copy. */
.trust{display:flex;flex-wrap:wrap;gap:9px 24px;margin-top:28px;padding-top:20px;
  border-top:1px solid var(--line)}
.trust span{display:flex;align-items:center;gap:8px;font-size:13.4px;color:var(--fg-dim)}
.trust svg{flex:none;color:var(--yellow-pill)}
[data-tone="cream"] .trust svg,[data-tone="amber"] .trust svg,[data-tone="paper"] .trust svg{color:var(--blue)}

/* The ghost headline sits behind a scattered object field. */
/* A ch max-width here would resolve against this wrapper's own 16px
   body font rather than the display font inside it, which crushes the
   headline into a narrow column. Measure in px. */
.ghost-wrap{position:relative;z-index:2;max-width:min(940px,78%)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:clamp(28px,4vw,48px)}
.stat-row > div{background:var(--bg);padding:24px 22px}
.stat-row .v{font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);font-size:clamp(30px,4vw,52px);line-height:1;color:var(--fg)}
.stat-row .k{font-size:13.6px;color:var(--fg-dim);margin-top:9px;line-height:1.5}
@media (max-width:760px){.stat-row{grid-template-columns:1fr}}

/* ---- DISPLAY ACCENTS ---------------------------------------------
   Two devices, both drawn from poster typography rather than editorial
   typography, so the headline stays one voice instead of borrowing a
   second typeface to make its point.

   .out  knocks a word back to its outline
   .hl   sets a word on a painted slab
   ------------------------------------------------------------------ */
.out{color:transparent;-webkit-text-stroke:2px var(--fg);paint-order:stroke fill}
@supports not (-webkit-text-stroke: 1px red){.out{color:var(--fg);opacity:.42}}
.hl{position:relative;display:inline-block;color:var(--ink);padding:0 .12em;isolation:isolate}
.hl::before{content:'';position:absolute;inset:.1em -.02em .06em;background:var(--yellow-pill);
  z-index:-1;transform:skewX(-5deg) scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-out) .15s}
html.anim .rv.in .hl::before,html:not(.anim) .hl::before{transform:skewX(-5deg) scaleX(1)}
[data-tone="amber"] .hl::before{background:var(--ink)}
[data-tone="amber"] .hl{color:var(--amber)}
.dsp .out{-webkit-text-stroke-width:clamp(1.4px,.22vw,3px)}
.dsp.sm .out{-webkit-text-stroke-width:clamp(1.2px,.16vw,2.2px)}

/* ---- THE LIVE SYSTEM --------------------------------------------
   The demo, not a diagram of one. A visitor fires a real enquiry and
   watches it move. This is the answer to "show me, do not tell me".
   ------------------------------------------------------------------ */
.pipe{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,54px);align-items:start;margin-top:clamp(28px,4vw,46px)}
@media (max-width:980px){.pipe{grid-template-columns:1fr}}

.track{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--field)}
.node{position:relative;padding:20px 12px 16px;text-align:center;border-left:1px solid var(--line);
  transition:background .4s var(--ease)}
.node:first-child{border-left:none}
.node .ic{width:58px;height:58px;margin:0 auto 10px;position:relative;
  transition:transform .5s var(--ease-out),filter .5s var(--ease)}
.node .ic svg{width:100%;height:100%;overflow:visible}
.node .t{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-mute);line-height:1.5;transition:color .4s}
.node .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--yellow-pill);
  transform:scaleX(0);transform-origin:left;transition:transform .5s linear}
.node.on{background:var(--field)}
.node.on .ic{transform:translateY(-6px) scale(1.08)}
.node.on .t{color:var(--fg)}
.node.on .bar{transform:scaleX(1)}
.node.done .bar{transform:scaleX(1);background:var(--line)}
@media (max-width:860px){
  .track{grid-template-columns:repeat(3,1fr)}
  .node:nth-child(4){border-left:none}
  .node:nth-child(-n+3){border-bottom:1px solid var(--line)}
}
@media (max-width:480px){
  .track{grid-template-columns:repeat(2,1fr)}
  .node{border-left:1px solid var(--line)}
  .node:nth-child(odd){border-left:none}
}

.console{border:1px solid var(--line);border-radius:var(--r);background:var(--ink);color:#EDEBE6;
  padding:16px;font-family:var(--mono);font-size:12.2px;line-height:1.75;
  min-height:234px;max-height:300px;overflow-y:auto}
.console .ln2{display:flex;gap:10px;opacity:0;transform:translateY(5px);
  animation:logIn .34s var(--ease-out) forwards}
@keyframes logIn{to{opacity:1;transform:none}}
.console .ts{color:rgba(237,235,230,.4);flex:none}
.console .ok{color:#8BE9A6}
.console .hi{color:var(--yellow-pill)}
.console .me{color:#8AB4FF}
.pipe-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.pipe-note{font-size:13px;color:var(--fg-mute);margin-top:12px;line-height:1.55}

/* ---- FEATURED STRIP ---------------------------------------------- */
.strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.tagchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:8px 15px;font-size:13px;color:var(--fg-dim);
  transition:background .3s,border-color .3s,color .3s}
.tagchip:hover{background:var(--field);border-color:var(--fg);color:var(--fg)}
.tagchip svg{color:var(--yellow-pill);flex:none}
[data-tone="cream"] .tagchip svg,[data-tone="amber"] .tagchip svg,[data-tone="paper"] .tagchip svg{color:var(--blue)}

/* ===================================================================
   CINEMATIC
   For the service pages. Glass panels sitting in real perspective with
   the far ones defocused, so depth comes from the lens rather than from
   a drop shadow. Deliberately a different register from the flat colour
   chapters, because ten service pages that look exactly like the home
   page is how a site starts feeling repetitive.
   =================================================================== */
[data-tone="cine"]{
  --bg:#07080D; --fg:#F4F5F8; --fg-dim:rgba(244,245,248,.70); --fg-mute:rgba(244,245,248,.46);
  --line:rgba(244,245,248,.16); --line-soft:rgba(244,245,248,.08); --field:rgba(244,245,248,.055);
}
.ch.cine{position:relative;isolation:isolate}
/* One soft key light, off centre. Two would read as a gradient. */
.ch.cine::before{content:'';position:absolute;inset:-20% -10% auto;height:120%;z-index:0;
  background:radial-gradient(60% 55% at 72% 18%,rgba(74,110,255,.32),transparent 70%),
             radial-gradient(42% 40% at 18% 72%,rgba(170,110,255,.16),transparent 72%);
  pointer-events:none}
.ch.cine::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}

.cine-stage{position:relative;height:clamp(300px,36vw,460px);perspective:1500px;
  perspective-origin:62% 42%;z-index:2}
.cine-stack{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--crx,6deg)) rotateY(var(--cry,-17deg));
  transition:transform .6s var(--ease-out)}
.cine-stage.live .cine-stack{transition:none}

.pane{position:absolute;border-radius:16px;overflow:hidden;transform-style:preserve-3d;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 34px 70px -26px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;animation:paneIn 1s var(--ease-out) forwards}
@keyframes paneIn{from{opacity:0;transform:translate3d(var(--px,0),calc(var(--py,0px) + 40px),var(--pz,0)) rotateZ(var(--prz,0deg))}
                  to{opacity:1;transform:translate3d(var(--px,0),var(--py,0px),var(--pz,0)) rotateZ(var(--prz,0deg))}}
/* Depth of field: the further back it sits, the softer it gets. */
.pane.far{filter:blur(3.4px);opacity:0;animation-name:paneIn}
.pane.mid{filter:blur(1.1px)}
.pane .inner{padding:15px 16px;display:flex;flex-direction:column;gap:9px;height:100%}
.pane .ttl{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.pane .row{height:7px;border-radius:4px;background:rgba(255,255,255,.17)}
.pane .row.w70{width:70%} .pane .row.w45{width:45%} .pane .row.w90{width:90%}
.pane .row.lit{background:linear-gradient(90deg,#6E92FF,#C58CFF)}
.pane .chip2{align-self:flex-start;font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
  background:rgba(110,146,255,.22);border:1px solid rgba(110,146,255,.4);color:#CBD8FF}
.pane .big2{font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);font-size:30px;line-height:1;
  background:linear-gradient(120deg,#fff,#9FB6FF);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.pane .bars{display:flex;align-items:flex-end;gap:5px;flex:1;min-height:52px}
.pane .bars i{flex:1;border-radius:3px 3px 1px 1px;background:rgba(255,255,255,.2);display:block}
.pane .bars i.lit{background:linear-gradient(180deg,#8FA9FF,#4C6CF5)}
.pane .live-dot{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;
  font-family:var(--mono);color:#9FFFC2;letter-spacing:.1em}
.pane .live-dot i{width:6px;height:6px;border-radius:50%;background:#49D17E;
  box-shadow:0 0 0 4px rgba(73,209,126,.2)}
@media (max-width:860px){
  .cine-stage{height:270px}
  .pane.far{display:none}
}
@media (prefers-reduced-motion:reduce){.pane{animation:none;opacity:1}}

/* ===================================================================
   CATEGORY PERSONALISATION
   The visitor says what kind of business they run once, and every
   service page answers in those terms from then on. Stored per browser,
   never sent anywhere.
   =================================================================== */
/* The nav is fixed, so the bar carries the nav's height as top padding
   and the nav floats over it. Sticking at top:0 with that padding keeps
   the two from overlapping at any scroll position. */
.catbar{position:sticky;top:0;z-index:50;background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:calc(var(--navh) + 10px) 0 11px}
.catbar-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.catbar .lead2{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--fg-mute)}
.catpick{display:inline-flex;align-items:center;gap:9px;background:var(--field);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--fg);transition:border-color .25s,background .25s}
.catpick:hover{border-color:var(--fg)}
.catpick .dot2{width:7px;height:7px;border-radius:50%;background:var(--yellow-pill)}
.catpick svg{opacity:.6}

.catsheet{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;
  background:rgba(7,8,13,.72);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.catsheet.open{opacity:1;visibility:visible}
.catsheet-in{background:var(--paper);color:var(--ink);border-radius:22px;padding:clamp(22px,3vw,34px);
  width:min(760px,100%);max-height:86svh;overflow-y:auto;
  transform:translateY(14px) scale(.98);transition:transform .34s var(--ease-out)}
.catsheet.open .catsheet-in{transform:none}
.catsheet h3{font-family:var(--display);text-transform:uppercase;font-weight:800;font-stretch:var(--dsp-wdth);
  font-size:clamp(24px,3.2vw,36px);line-height:1;color:var(--ink);margin-bottom:8px}
.catsheet p{font-size:14.6px;color:rgba(16,16,22,.68);margin-bottom:20px;max-width:56ch}
.catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:9px}
.catopt{text-align:left;border:1px solid rgba(16,16,22,.16);background:#fff;border-radius:13px;
  padding:14px 15px;cursor:pointer;transition:border-color .22s,background .22s,transform .22s var(--ease-out)}
.catopt:hover{border-color:var(--ink);transform:translateY(-2px)}
.catopt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.catopt b{display:block;font-size:14.6px;font-weight:600;line-height:1.3}
.catopt span{display:block;font-size:11.6px;color:rgba(16,16,22,.56);margin-top:4px;line-height:1.4}
.catopt[aria-pressed="true"] span{color:rgba(255,255,255,.62)}
.catsheet .x2{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}

/* The sentence that changes. Flagged so it is obvious it is tailored. */
.tailored{border-left:3px solid var(--yellow-pill);padding:14px 0 14px 18px;margin:18px 0;
  background:linear-gradient(90deg,var(--field),transparent)}
.tailored .k2{font-family:var(--mono);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--fg-mute);display:block;margin-bottom:7px}
.tailored p{font-size:clamp(15px,1.25vw,17.4px);line-height:1.52;color:var(--fg)}
.tailored.flash{animation:tflash .7s var(--ease)}
@keyframes tflash{0%{background:linear-gradient(90deg,rgba(246,233,120,.3),transparent)}
                  100%{background:linear-gradient(90deg,var(--field),transparent)}}

/* ---- SERVICE PAGE BLOCKS ----------------------------------------- */
.helps{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.helps > div{background:var(--bg);padding:24px 22px}
.helps .no{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--fg-mute);margin-bottom:11px}
.helps h3{font-size:17.4px;margin-bottom:8px;letter-spacing:-0.02em}
.helps p{font-size:14.3px;color:var(--fg-dim);line-height:1.56}

.getlist{columns:2;column-gap:34px;list-style:none;margin-top:6px}
.getlist li{break-inside:avoid;display:flex;gap:11px;padding:9px 0;font-size:14.8px;
  color:var(--fg-dim);border-bottom:1px solid var(--line-soft)}
.getlist li svg{flex:none;margin-top:4px;color:var(--yellow-pill)}
[data-tone="cream"] .getlist li svg,[data-tone="amber"] .getlist li svg{color:var(--blue)}
@media (max-width:700px){.getlist{columns:1}}

.steps2{counter-reset:s;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.steps2 > div{background:var(--bg);padding:20px 24px;display:grid;
  grid-template-columns:48px minmax(0,1fr) minmax(0,1.6fr);gap:18px;align-items:baseline}
.steps2 .num{font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);font-size:26px;color:var(--fg-mute);opacity:.55}
.steps2 h4{font-family:var(--display);text-transform:uppercase;font-weight:800;font-stretch:var(--dsp-wdth);
  font-size:18px;letter-spacing:0}
.steps2 p{font-size:14.3px;color:var(--fg-dim);line-height:1.55}
@media (max-width:700px){.steps2 > div{grid-template-columns:36px 1fr;gap:10px}
  .steps2 p{grid-column:2}}

.foryou{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.foryou li{display:flex;gap:12px;font-size:15.4px;color:var(--fg-dim);line-height:1.5;list-style:none}
.foryou svg{flex:none;margin-top:4px;color:var(--yellow-pill)}

.cta-band{background:var(--bg);border-top:1px solid var(--line);padding:clamp(40px,5vw,66px) 0}
.cta-band-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cta-band .t2{font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);text-transform:uppercase;
  font-size:clamp(24px,3.4vw,46px);line-height:.98;max-width:19ch}
.cta-band .r2{display:flex;gap:11px;flex-wrap:wrap}

/* ---- SERP PREVIEW ------------------------------------------------- */
.serp{background:#fff;border:1px solid rgba(16,16,22,.14);border-radius:14px;
  padding:20px 22px;max-width:620px;box-shadow:0 10px 30px -14px rgba(0,0,0,.3)}
.serp .crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#4d5156;margin-bottom:4px}
.serp .crumb i{width:19px;height:19px;border-radius:50%;background:var(--blue);display:grid;
  place-items:center;flex:none}
.serp .crumb i img{width:12px;height:12px}
.serp .t3{color:#1a0dab;font-size:19px;line-height:1.3;margin-bottom:3px;font-weight:400}
.serp .d3{color:#4d5156;font-size:13.6px;line-height:1.58}
.serp .links{display:flex;gap:18px;margin-top:11px;padding-top:11px;border-top:1px solid #ebebeb}
.serp .links a{color:#1a0dab;font-size:13.4px}

/* Service columns are links now, so they need to look like it. */
a.col{text-decoration:none;color:inherit;display:flex;flex-direction:column}
a.col p{flex:1}
.more2{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-mute);transition:color .25s,gap .25s var(--ease)}
a.col:hover .more2{color:var(--fg);gap:12px}
.more2 svg{width:12px;height:12px}
.foot-top{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-top{grid-template-columns:1fr}}

/* ---- MOTION DETAIL ------------------------------------------------
   Small things that make a page feel alive without making it restless.
   ------------------------------------------------------------------- */
.prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:99;
  background:linear-gradient(90deg,var(--yellow-pill),#6E92FF);transition:width .1s linear}

/* Cards lift and the light moves with the pointer. */
.helps > div,.stage,.plan,.feat > div{transition:background .4s var(--ease),transform .45s var(--ease-out)}
.helps > div:hover,.feat > div:hover{background:var(--field);transform:translateY(-3px)}
.col{position:relative;overflow:hidden}
.col::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .4s var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--fg) 9%,transparent),transparent 62%)}
.col:hover::after{opacity:1}
.col .art svg{transition:transform .55s var(--ease-out)}
a.col:hover .art svg{transform:translateY(-8px) scale(1.06)}

/* Grid children arrive one after another rather than all at once. */
html.anim .stagger > *{opacity:0;transform:translateY(20px);
  transition:opacity .66s var(--ease-out),transform .66s var(--ease-out)}
html.anim .stagger.in > *{opacity:1;transform:none}
html.anim .stagger.in > *:nth-child(1){transition-delay:.02s}
html.anim .stagger.in > *:nth-child(2){transition-delay:.08s}
html.anim .stagger.in > *:nth-child(3){transition-delay:.14s}
html.anim .stagger.in > *:nth-child(4){transition-delay:.2s}
html.anim .stagger.in > *:nth-child(5){transition-delay:.26s}
html.anim .stagger.in > *:nth-child(6){transition-delay:.32s}
html.anim .stagger.in > *:nth-child(7){transition-delay:.38s}
html.anim .stagger.in > *:nth-child(8){transition-delay:.44s}
html.anim .stagger.in > *:nth-child(9){transition-delay:.5s}
html.anim .stagger.in > *:nth-child(10){transition-delay:.56s}

/* The pill presses properly instead of just changing colour. */
.pill:active,.btn-line:active{transform:translateY(1px) scale(.985)}

@media (prefers-reduced-motion:reduce){
  html.anim .stagger > *{opacity:1!important;transform:none!important}
  .prog{display:none}
  .col .art svg,.helps > div:hover{transform:none!important}
}

/* ===================================================================
   CAROUSEL

   Five items in an auto-fit grid leaves an orphan on the last row at
   most widths, which is what made the "how it helps" block look wrong.
   A track fixes the symmetry by removing the row entirely, and it buys
   room for each point to be made properly rather than in two lines.

   Built on scroll-snap so it still works with no JS: it degrades to a
   horizontally scrollable strip rather than to a broken grid.
   =================================================================== */
.car{position:relative}
.car-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 0 18px;
  scrollbar-width:none;-ms-overflow-style:none}
/* While the page scroll is driving the track, snapping and smoothing
   both fight the position we are setting directly. */
.car.driving .car-track{scroll-behavior:auto;scroll-snap-type:none}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 clamp(272px,30%,392px);scroll-snap-align:start;
  background:var(--field);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 26px 22px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:border-color .4s var(--ease),transform .5s var(--ease-out),background .4s var(--ease)}
.car-slide:hover{border-color:var(--fg);background:var(--field)}
.car-slide .sn{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  color:var(--fg-mute);margin-bottom:16px}
.car-slide .sart{height:118px;margin:0 0 18px;display:flex;align-items:flex-end;justify-content:center}
.car-slide .sart svg{height:100%;width:auto;overflow:visible;
  transition:transform .6s var(--ease-out)}
.car-slide:hover .sart svg{transform:translateY(-9px) scale(1.05)}
.car-slide h3{font-family:var(--display);text-transform:uppercase;font-weight:800;font-stretch:var(--dsp-wdth);
  font-size:clamp(19px,1.7vw,24px);line-height:1.02;letter-spacing:0;margin-bottom:11px}
.car-slide p{font-size:14.6px;line-height:1.58;color:var(--fg-dim);flex:1}
.car-slide .inpr{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:13.6px;line-height:1.52;color:var(--fg-dim)}
.car-slide .inpr b{display:block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:6px;font-weight:500}

/* The slide counter sits beside the arrows, not on the far right, where
   it lined up underneath the chapter counter and read as a duplicate. */
.car-bar{display:flex;align-items:center;gap:16px;margin-top:4px}
.car-bar .car-count{order:-1;margin-left:2px}
.car-nav{display:flex;gap:8px}
.car-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:none;
  color:var(--fg);cursor:pointer;display:grid;place-items:center;
  transition:background .25s,border-color .25s,transform .25s var(--ease-out)}
.car-btn:hover:not([disabled]){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.car-btn[disabled]{opacity:.3;cursor:not-allowed}
.car-btn:active:not([disabled]){transform:scale(.93)}
.car-dots{display:flex;gap:7px;flex:1}
.car-dot{height:3px;flex:1;max-width:58px;border-radius:2px;background:var(--line);
  border:none;padding:0;cursor:pointer;position:relative;overflow:hidden;transition:background .3s}
.car-dot[aria-current="true"]{background:var(--line)}
.car-dot i{position:absolute;inset:0;background:var(--yellow-pill);transform:scaleX(0);
  transform-origin:left;display:block}
.car-dot[aria-current="true"] i{transform:scaleX(1);transition:transform .45s var(--ease-out)}
.car-dot.timing i{animation:dotfill var(--dur,7s) linear forwards}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
[data-tone="cream"] .car-dot i,[data-tone="amber"] .car-dot i{background:var(--blue)}
.car-count{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--fg-mute);flex:none;opacity:.8}

@media (max-width:760px){
  .car-slide{flex:0 0 82%}
  .car-slide .sart{height:94px}
}
@media (prefers-reduced-motion:reduce){
  .car-track{scroll-behavior:auto}
  .car-dot.timing i{animation:none;transform:scaleX(1)}
  .car-slide:hover .sart svg{transform:none}
}

/* ---- THE LIVE SYSTEM, EXPANDED ------------------------------------ */
.sys-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:12px}
.sys-clock{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  color:var(--fg-mute);display:flex;align-items:center;gap:10px}
.sys-clock b{color:var(--fg);font-weight:500}
.sys-clock .rec{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none}
.sys-clock.on .rec{background:#E5484D;animation:recpulse 1.4s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.25}}

.sys-prog{height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-bottom:14px}
.sys-prog i{display:block;height:100%;width:0;background:var(--yellow-pill);
  transition:width .35s linear}
[data-tone="cream"] .sys-prog i,[data-tone="amber"] .sys-prog i{background:var(--blue)}

/* The panel that explains the stage you are looking at. Without it the
   demo was a row of lights and a log scrolling past too quickly. */
.sys-detail{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  margin-top:14px;background:var(--field);min-height:148px;
  transition:border-color .4s var(--ease)}
.sys-detail.on{border-color:color-mix(in srgb,var(--fg) 40%,var(--line))}
.sys-detail .sd-k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-mute);display:block;margin-bottom:9px}
.sys-detail h4{font-family:var(--display);text-transform:uppercase;font-weight:800;font-stretch:var(--dsp-wdth);
  font-size:clamp(19px,2vw,26px);line-height:1;letter-spacing:0;margin-bottom:10px}
.sys-detail p{font-size:14.6px;line-height:1.58;color:var(--fg-dim);margin-bottom:12px}
.sys-detail a{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg);border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:gap .3s var(--ease),border-color .3s}
.sys-detail a:hover{gap:13px;border-color:var(--fg)}
.sys-detail.swap{animation:sdswap .5s var(--ease-out)}
@keyframes sdswap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.node .ix{position:absolute;top:8px;left:9px;font-family:var(--mono);
  font-size:9px;letter-spacing:.1em;color:var(--fg-mute);opacity:.6}
.node.on .ix{opacity:1;color:var(--fg)}

.console{min-height:300px;max-height:364px}
.pipe-cta .ghost-btn{background:none;border:1px solid var(--line);color:var(--fg);
  border-radius:999px;padding:12px 20px;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;transition:background .25s,border-color .25s}
.pipe-cta .ghost-btn:hover{background:var(--field);border-color:var(--fg)}

@media (max-width:980px){.sys-detail{min-height:0}}

/* ---- SCROLL MOTION, SECOND PASS ----------------------------------
   Display type wipes up behind its own edge rather than fading, which
   is the one reveal that reads as typeset rather than as a transition.
   ------------------------------------------------------------------- */
html.anim .dsp.rv{opacity:1;transform:none;
  clip-path:inset(0 0 108% 0);
  transition:clip-path 1.05s var(--ease-out)}
html.anim .dsp.rv.in{clip-path:inset(0 0 -14% 0)}

/* The rule beside a label draws itself in. */
html.anim .lbl{overflow:visible}
html.anim .lbl::before{width:0;transition:width .7s var(--ease-out) .1s}
html.anim .rv.in .lbl::before,
html.anim .lbl.in::before,
html:not(.anim) .lbl::before{width:28px}

/* Panels and consoles arrive with a little depth rather than flat. */
html.anim .rv.depth{transform:translateY(26px) scale(.975)}
html.anim .rv.depth.in{transform:none}

/* A quiet marker of which chapter you are in, on the long pages. */
.chapdot{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:9px;pointer-events:none}
.chapdot b{display:block;width:6px;height:6px;border-radius:50%;background:currentColor;
  opacity:.26;transition:opacity .35s var(--ease),transform .35s var(--ease-out)}
.chapdot b.on{opacity:1;transform:scale(1.65)}
@media (max-width:1180px){.chapdot{display:none}}

@media (prefers-reduced-motion:reduce){
  html.anim .dsp.rv{clip-path:none!important}
  html.anim .lbl::before{width:28px!important;transition:none}
  .chapdot{display:none}
}

/* ---- PHONE IN THE NAV --------------------------------------------- */
.nav-tel{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);color:var(--fg);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;white-space:nowrap;transition:background .25s,border-color .25s}
.nav-tel:hover{background:var(--field);border-color:var(--fg)}
.nav-tel svg{flex:none;opacity:.8}
@media (max-width:1080px){.nav-tel span{display:none}
  .nav-tel{padding:11px;border-radius:50%}}
@media (max-width:860px){.nav-tel{display:none}}

.foot-tel{margin-top:16px;display:flex;flex-direction:column;gap:3px}
.foot-tel a{font-family:var(--display);font-weight:800;font-stretch:88%;font-size:clamp(20px,2.4vw,28px);
  color:#F6F5F2;letter-spacing:-0.01em}
.foot-tel a:hover{color:var(--yellow-pill)}
.foot-tel span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:rgba(246,245,242,.45);text-transform:uppercase}
.foot-bot a{text-decoration:underline;text-underline-offset:3px}
.foot-bot a:hover{color:var(--yellow-pill)}

/* Booking result states. Success and failure must look different, and
   failure must still give the visitor somewhere to go. */
.bk-done.ok{border-color:color-mix(in srgb,#34D399 55%,var(--line));
  background:color-mix(in srgb,#34D399 10%,transparent)}
.bk-done.warn{border-color:var(--yellow-pill);
  background:color-mix(in srgb,var(--yellow-pill) 13%,transparent)}
.bk-done a{text-decoration:underline;text-underline-offset:3px;color:var(--fg);font-weight:600}

/* ---- PRICING -------------------------------------------------------
   A range, clearly labelled as a range. The point is to let a buyer
   decide whether we are in their universe without booking a call, which
   is the whole reason for publishing anything at all.
   -------------------------------------------------------------------- */
.price{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);
  background:var(--field)}
.price .pk{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-mute);display:block;margin-bottom:10px}
.price .ph{font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);
  text-transform:uppercase;font-size:clamp(26px,3.4vw,44px);line-height:1;letter-spacing:-0.02em;
  margin-bottom:18px}
.price-rows{list-style:none;border-top:1px solid var(--line)}
.price-rows li{display:grid;grid-template-columns:minmax(0,1.1fr) auto;gap:6px 18px;
  padding:14px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.price-rows b{font-size:15.4px;font-weight:600;color:var(--fg)}
.price-rows .amt{font-family:var(--mono);font-size:14px;color:var(--fg);text-align:right;white-space:nowrap}
.price-rows small{grid-column:1/-1;font-size:13.4px;color:var(--fg-dim);line-height:1.5}
.price .pn{margin-top:16px;font-size:13.6px;line-height:1.56;color:var(--fg-dim)}
.price-foot{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);
  font-size:13px;line-height:1.56;color:var(--fg-mute)}
@media (max-width:560px){
  .price-rows li{grid-template-columns:1fr}
  .price-rows .amt{text-align:left}
}

.plan .pp{margin:2px 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.plan .pp b{display:block;font-family:var(--mono);font-size:15px;color:var(--fg);letter-spacing:.01em}
.plan .pp b + b{margin-top:4px}
.plan .pp span{display:block;font-size:12.6px;color:var(--fg-mute);margin-top:7px;line-height:1.5}

/* Placeholder blocks. Loud on purpose: this page must not go live with
   them still in it, and quiet placeholders are how that happens. */
.needs{border:2px dashed var(--yellow-pill);border-radius:var(--r);padding:20px 22px;
  background:color-mix(in srgb,var(--yellow-pill) 9%,transparent)}
.needs-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg);margin-bottom:10px;font-weight:500}
.needs p{font-size:14.6px;line-height:1.58;color:var(--fg-dim)}
.needs + .needs{margin-top:14px}

/* ---- FOUNDER ------------------------------------------------------- */
.founder{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(26px,4vw,60px);align-items:start}
.founder-photo{position:relative}
.founder-photo img{width:100%;border-radius:var(--r-lg);display:block;
  box-shadow:0 40px 80px -34px rgba(10,8,20,.6)}
.founder-photo figcaption{margin-top:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);line-height:1.7}
.founder-photo figcaption b{color:var(--fg);display:block;font-weight:500;letter-spacing:.1em}
.founder p + p{margin-top:16px}
.creds{list-style:none;margin-top:26px;border-top:1px solid var(--line)}
.creds li{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:8px 22px;
  padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:14.6px}
.creds .k3{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);padding-top:3px}
.creds .v3{color:var(--fg-dim);line-height:1.55}
.creds .v3 b{color:var(--fg);font-weight:600}
@media (max-width:860px){
  .founder{grid-template-columns:1fr}
  .founder-photo img{max-width:360px}
  .creds li{grid-template-columns:1fr;gap:4px}
}

/* ---- CASE STUDY ---------------------------------------------------- */
.cs{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--field)}
.cs-top{padding:clamp(24px,3.4vw,38px);border-bottom:1px solid var(--line)}
.cs-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:14px}
.cs-tag i{width:6px;height:6px;border-radius:50%;background:var(--yellow-pill)}
[data-tone="cream"] .cs-tag i,[data-tone="amber"] .cs-tag i{background:var(--blue)}
.cs h3{font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);
  text-transform:uppercase;font-size:clamp(24px,3.2vw,40px);line-height:1;letter-spacing:-0.02em}
.cs-sub{margin-top:10px;font-size:15.4px;color:var(--fg-dim);max-width:62ch;line-height:1.56}
.cs-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--line)}
.cs-nums > div{background:var(--bg);padding:22px 20px}
.cs-nums .n3{font-family:var(--display);font-weight:800;font-stretch:84%;
  font-size:clamp(24px,3vw,38px);line-height:1;color:var(--fg)}
.cs-nums .l3{font-size:13.2px;color:var(--fg-dim);margin-top:9px;line-height:1.5}
.cs-nums .b3{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:9px;display:block}
.cs-body{padding:clamp(24px,3.4vw,38px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
.cs-body h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:9px;font-weight:500}
.cs-body p{font-size:14.5px;line-height:1.58;color:var(--fg-dim)}
.cs-body ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:4px}
.cs-body li{display:flex;gap:10px;font-size:14.3px;color:var(--fg-dim);line-height:1.5}
.cs-body li svg{flex:none;margin-top:3px;color:var(--yellow-pill)}
[data-tone="cream"] .cs-body li svg,[data-tone="amber"] .cs-body li svg{color:var(--blue)}

/* Live builds you can open and judge for yourself. */
.builds{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.build{background:var(--bg);padding:26px 24px;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:background .35s var(--ease)}
.build:hover{background:var(--field)}
.build .bt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:12px}
.build h3{font-family:var(--display);font-weight:800;font-stretch:var(--dsp-wdth);
  text-transform:uppercase;font-size:21px;line-height:1.02;letter-spacing:0;margin-bottom:8px}
.build p{font-size:14.2px;color:var(--fg-dim);line-height:1.55;flex:1}
.build .bl{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 16px}
.build .bl span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:4px 9px;color:var(--fg-mute)}
.build .bgo{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin-top:auto;
  transition:gap .3s var(--ease)}
.build:hover .bgo{gap:14px}

/* Said out loud rather than buried in the policy: the conversation is
   not private, and the visitor should know that before they type. */
.cx-note{padding:0 16px 13px;background:#fff;font-size:11.4px;line-height:1.5;
  color:rgba(16,16,22,.52)}
.cx-note a{text-decoration:underline;text-underline-offset:2px;color:rgba(16,16,22,.72)}
.cx-note a:hover{color:var(--ink)}