/* Workvolve homepage (final, built from demos I and J). Needs theme-v2.css first. */

/* ================= HERO ================= */
.hero{position:relative;isolation:isolate;overflow:clip;display:flex;flex-direction:column;min-height:max(740px,min(100svh,1000px));padding-top:clamp(104px,12.5vh,140px)}
.hero-sky{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 46% at 50% 92%,rgba(228,196,126,.42) 0%,rgba(228,196,126,.14) 50%,rgba(228,196,126,0) 76%),
  radial-gradient(42% 38% at 12% 6%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
  radial-gradient(46% 44% at 90% 12%,rgba(240,224,186,.5),rgba(240,224,186,0) 72%),
  linear-gradient(180deg,#fbf7ef 0%,#fdfcf8 40%,#faf3e3 100%)}
.hero-sky::after{content:"";position:absolute;inset:0;opacity:.32;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .28 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hero-inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-title{font-size:var(--fs-h1);line-height:1;letter-spacing:-.052em;font-weight:500;color:var(--ink)}
.ht-line{display:block}
.rot{display:block;position:relative;height:1.15em;overflow:hidden;margin:.02em 0 -.08em}
.rot-word{display:inline-block;line-height:1;padding:.02em .04em .15em;color:#93732f;background:linear-gradient(180deg,#b3903f 8%,#86682a 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;will-change:transform}
.rot-ghost{position:absolute;left:0;right:0;top:0;text-align:center;pointer-events:none}
.hero-sub{margin-top:24px;max-width:700px;font-size:clamp(1.0625rem,.95rem + .45vw,1.25rem);line-height:1.55;color:var(--ink-2);text-wrap:balance}
.hs-a{display:block;margin-bottom:4px;color:var(--ink);font-weight:500;letter-spacing:-.012em}
.hero-ctas{margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.hero-proof{margin-top:22px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 22px}
.hero-note{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2)}
.hero-note .i{width:14px;height:14px;color:var(--gold-deep)}
/* the line crosses the top of the globe: an edgeless cream wash behind it (no border, it just fades out) keeps
   the globe's dots from sitting under the words */
.hero-note{position:relative;isolation:isolate;text-shadow:0 0 8px #fcf8ef,0 0 3px #fcf8ef}
.hero-note::before{content:"";position:absolute;inset:-9px -30px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(252,248,239,0),rgba(252,248,239,.94) 9%,rgba(252,248,239,.94) 91%,rgba(252,248,239,0));-webkit-mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent);mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent)}
.hero .globe-poster{transition:opacity .5s var(--ease)}
.trust{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 14px 0 6px;border-radius:var(--r-pill);background:rgba(255,255,255,.7);border:1px solid var(--line);box-shadow:var(--sh-xs),inset 0 1px 0 #fff;transition:transform .4s var(--ease),border-color .3s,background-color .3s}
.trust:hover{transform:translateY(-1px);background:#fff;border-color:var(--line-2)}
.trust-avs{display:flex}
.trust-avs .av{width:30px;height:30px;font-size:12px;box-shadow:0 0 0 2px #fff,0 2px 6px -2px rgba(60,44,12,.35)}
.trust-avs .av+.av{margin-left:-9px}
.trust-stars{display:inline-flex;gap:1px;color:var(--gold)}
.trust-stars .i{width:14px;height:14px}
.trust-t{font-size:14px;font-weight:550;letter-spacing:-.012em;color:var(--ink)}
.trust-arr{width:14px;height:14px;color:var(--ink-3);transition:transform .4s var(--ease)}
.trust:hover .trust-arr{transform:translateY(2px)}

/* mock-screen people (fictional Figbird Physio patients) */
.av-gh{background:linear-gradient(160deg,#f2e6c9,#dfc58a);color:#5f4818}
.av-mn{background:linear-gradient(160deg,#e9e4da,#cdc3b1);color:#3d3a33}
.av-ps{background:linear-gradient(160deg,#f6ecd4,#e7cf98);color:#6d531f}
.av-jm{background:linear-gradient(160deg,#e6dbc8,#c2ae8c);color:#3b3222}
.av-you{background:linear-gradient(160deg,#d9bb70,#bf9849);color:#2b2414}

/* globe: fixed aspect stage, poster first, live canvas crossfades in. The canvas shows the top 55% of a tilted
   globe; it sits on the hero's bottom edge and is sized from the hero's height so its rim tucks under the trust row */
.hero-globe{position:relative;z-index:1;flex:1 0 auto;min-height:clamp(220px,21vw,300px);margin-top:-30px}
.globe{--gw:clamp(600px,min(66vw,104vh),980px);position:absolute;left:50%;top:0;width:var(--gw);aspect-ratio:2/1;transform:translateX(-50%);touch-action:pan-y;-webkit-user-select:none;user-select:none}
.hero .globe{--gw:clamp(560px,min(calc((min(max(740px,100svh),1000px) - 548px) * 2.27),76vw),1000px);top:auto;bottom:0}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(253,252,248,0),#fdfcf8 92%)}
.globe-glow{position:absolute;left:-18%;right:-18%;top:-14%;height:150%;pointer-events:none;background:radial-gradient(42% 46% at 50% 62%,rgba(228,192,116,.5) 0%,rgba(228,192,116,.18) 48%,rgba(228,192,116,0) 74%)}
.globe-body{position:absolute;left:10%;top:12%;width:80%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 24%,#fffdf9 0%,#fbf5e7 30%,#f3e6c6 60%,#e9d3a2 84%,#ddbf82 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 26px 50px -30px rgba(201,160,74,.55),inset 0 0 0 1px rgba(214,178,98,.2),0 -2px 34px -6px rgba(214,176,92,.62),0 -26px 120px -26px rgba(214,176,92,.45)}
.globe-poster,.globe-canvas{position:absolute;inset:0;width:100%;height:100%}
.globe-poster{transition:opacity .5s var(--ease);pointer-events:none}
.globe-canvas{opacity:0;transition:opacity .5s var(--ease);cursor:grab}
.globe.live .globe-canvas{opacity:1}
.globe.live .globe-poster{opacity:0}
.globe.dragging .globe-canvas{cursor:grabbing}
.globe-pin{--fx:0.7324;--fy:0.8311;position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 8px;margin:-12px 0 0 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(140,109,44,.22),0 6px 14px -8px rgba(60,44,12,.5);font-size:11.5px;font-weight:550;letter-spacing:-.005em;color:var(--gold-ink);white-space:nowrap;pointer-events:none;transform:translate3d(calc(var(--gw) * var(--fx)),calc(var(--gw) * .5 * var(--fy)),0);transition:opacity .3s,translate .45s var(--ease)}
.globe-pin-dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.globe-pin.flip{margin-left:0;translate:calc(-100% - 12px) 0}
/* one quiet name for the overseas city nearest the front (fades between cities as the globe turns) */
.globe-tag{position:absolute;left:0;top:0;margin:-9px 0 0 11px;font-size:11.5px;font-weight:550;line-height:18px;letter-spacing:-.005em;color:var(--gold-ink);white-space:nowrap;pointer-events:none;opacity:0;text-shadow:0 0 5px #fbf6ea,0 0 2px #fbf6ea,0 0 1px #fbf6ea;transition:opacity .7s var(--ease),translate .45s var(--ease)}
.globe-tag.on{opacity:1}
.globe-tag.flip{margin-left:0;translate:calc(-100% - 11px) 0}

/* ================= REVIEWS: one proof block. Heading, the clients' logos, then what they say ================= */
.reviews{padding-top:clamp(56px,6vw,88px);padding-bottom:clamp(56px,6vw,88px)}
.rev-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:clamp(26px,3vw,34px)}
.rev-head .h2{max-width:760px}
.rev-hrow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 56px;width:100%}
.rev-lead{max-width:400px;padding-bottom:8px;font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.proof-rail{position:relative;margin:0 0 clamp(30px,3.2vw,40px)}
.proof-rail::before,.proof-rail::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(140,109,44,0),rgba(140,109,44,.26) 14%,rgba(140,109,44,.26) 86%,rgba(140,109,44,0))}
.proof-rail::before{top:0}
.proof-rail::after{bottom:0}
.proof-rail .mq-view{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.proof-rail .cl{height:92px;padding:0 clamp(26px,3.2vw,44px)}
.proof-rail .cl-cct img{height:54px}
/* Carer Sharers: their name set as a clean wordmark in the page's own type, in their dark green (no photo, no icon) */
.wm-cs{font-size:22px;font-weight:550;line-height:1;letter-spacing:-.04em;color:#16342f;white-space:nowrap}
/* PassNotes: the official logo, trimmed to its drawing */
.cl-pn img{height:29px}
/* the active foot row matches the width of the active cards (set by the script as --grp) */
.rev-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(100%,var(--grp,100%));margin:26px auto 0}
.rev-nav{display:flex;gap:10px;flex:none}
.round-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);border:1px solid var(--line-2);box-shadow:var(--sh-xs),inset 0 1px 0 #fff;color:var(--ink);transition:transform .4s var(--ease),border-color .3s,background-color .3s}
.round-btn:hover{transform:translateY(-1px);border-color:rgba(29,29,31,.2);background:#fff}
.round-btn:active{transform:scale(.96)}
.round-btn .i{width:18px;height:18px}
/* the carousel runs the full width of the page. The active cards sit in the middle with the same peek of the next
   card on each side. The script sets --edge (where the active cards start, the same on both sides) and --pk (peek width) */
.rev-view{--fade:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.62) var(--pk,0px),#000 var(--edge,0px),#000 calc(100% - var(--edge,0px)),rgba(0,0,0,.62) calc(100% - var(--pk,0px)),rgba(0,0,0,0) 100%);position:relative;margin-inline:calc(50% - 50vw);overflow:hidden;padding:14px 0 80px;margin-top:-14px;margin-bottom:-64px;touch-action:pan-y;cursor:grab;-webkit-mask-image:var(--fade);mask-image:var(--fade)}
.rev-view.dragging{cursor:grabbing}
.rev-view:focus-visible{outline:none}
.rev-view:focus-visible::after{content:"";position:absolute;left:calc(var(--edge,0px) - 7px);right:calc(var(--edge,0px) - 7px);top:7px;bottom:73px;border-radius:31px;box-shadow:0 0 0 2px var(--ink);pointer-events:none}
.rev-track{--cw:420px;--gap:20px;display:flex;gap:var(--gap);width:max-content;will-change:transform}
.rev-card{flex:0 0 var(--cw);display:flex;flex-direction:column;gap:16px;padding:28px 28px 24px;border-radius:var(--r-lg);background:rgba(255,255,255,.86);border:1px solid #fff;box-shadow:var(--sh-md);-webkit-user-select:none;user-select:none}
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rev-tag{font-size:12.5px;font-weight:550;letter-spacing:-.005em;color:var(--gold-ink);white-space:nowrap}
.review-quote{font-size:16.5px;line-height:1.62;letter-spacing:-.008em;color:var(--ink);text-wrap:pretty}
.rev-meta{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.rev-meta strong{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.rev-meta .role{display:block;font-size:13.5px;color:var(--ink-3);line-height:1.4}

/* ================= SERVICES ================= */
.products{padding-top:clamp(64px,7vw,96px);padding-bottom:clamp(40px,5vw,64px)}
.split-head .h2{margin-top:0}
.ex-note{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 7px;margin-bottom:22px;font-size:14px;color:var(--ink-3)}
.ex-note b{font-weight:600;color:var(--ink)}
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.svc{position:relative;display:flex;flex-direction:column;border-radius:28px;background:rgba(255,255,255,.66);border:1px solid #fff;box-shadow:var(--sh-md);transition:box-shadow .6s var(--ease)}
.svc:hover{box-shadow:var(--sh-lg)}
.svc-text{position:relative;display:flex;flex-direction:column;flex:1}
.svc-body{padding:24px 28px 0;display:flex;flex-direction:column;gap:9px}
.svc-tag{font-family:var(--mono);font-weight:500;font-size:11.5px;color:var(--gold-ink)}
.svc-body p{font-size:15.5px;line-height:1.62;color:var(--ink-2)}
.svc-link::after{content:"";position:absolute;inset:0;border-radius:0 0 28px 28px}
.svc-link:focus-visible{outline:none}
.svc-link:focus-visible::after{outline:2px solid var(--ink);outline-offset:-4px}
.svc-foot{margin-top:auto;padding:20px 28px 24px;display:flex;align-items:center;justify-content:space-between;font-size:14.5px;font-weight:500}
.svc-arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(255,255,255,.8);transition:background-color .35s,color .35s,border-color .35s,transform .5s var(--ease)}
.svc-text:hover .svc-arrow{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateX(2px)}

/* demo frame */
.demo{position:relative;display:flex;flex-direction:column;min-height:470px;margin:8px 8px 0;padding:50px 18px 18px;border-radius:21px;overflow:hidden;cursor:default;background:radial-gradient(80% 90% at 15% 0%,#fffdf8 0%,rgba(255,253,248,0) 62%),radial-gradient(70% 80% at 100% 100%,#f2e3bf 0%,rgba(242,227,191,0) 70%),#f9f4e9;box-shadow:inset 0 0 0 1px rgba(29,29,31,.05)}
.demo::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(122,93,34,.15) 1px,transparent 1.25px);background-size:16px 16px;-webkit-mask-image:radial-gradient(95% 90% at 50% 45%,#000 25%,transparent 88%);mask-image:radial-gradient(95% 90% at 50% 45%,#000 25%,transparent 88%);pointer-events:none}
.demo-top{position:absolute;left:16px;right:14px;top:12px;display:flex;align-items:center;justify-content:flex-end;z-index:4}
.replay{position:relative;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(29,29,31,.08),0 2px 6px -3px rgba(60,44,12,.25);font-size:12px;font-weight:550;color:var(--ink-2);transition:opacity .3s,background-color .25s,color .25s}
.replay::before{content:"";position:absolute;left:-4px;right:-4px;top:-7px;bottom:-7px}
.replay .i{width:13px;height:13px;transition:transform .5s var(--ease)}
.replay:hover{background:#fff;color:var(--ink)}
.replay:hover .i{transform:rotate(-140deg)}
.playing .replay,.playing>.replay{opacity:.5;cursor:default}
.dm-win{position:relative;flex:1;display:flex;flex-direction:column;border-radius:16px;background:#fff;box-shadow:var(--sh-win);overflow:hidden;z-index:1}
.dm-bar{display:flex;align-items:center;gap:10px;height:38px;flex:none;padding:0 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#fcfaf6)}
.dm-dots{display:flex;gap:5px}
.dm-dots i{width:9px;height:9px;border-radius:50%;background:#ebe5d9;box-shadow:inset 0 0 0 1px rgba(29,29,31,.05)}
.dm-title{display:inline-flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;font-weight:550;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.dm-title img,.dm-title .i{width:14px;height:14px;color:var(--ink-3)}
.dm-sep{color:var(--ink-4);font-weight:400}
.dm-meta{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
/* honest "Example" note: plain muted text inside the window bar, never a pill */
.dm-ex{display:inline-flex;align-items:center;height:14px;margin-left:3px;padding-left:9px;border-left:1px solid var(--line-2);font-size:11px;font-weight:500;letter-spacing:0;color:var(--ink-3);white-space:nowrap}
.dm-body{position:relative;flex:1;min-height:0}

/* small shared mock bits */
.tk{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--gold-fill);color:#fff;box-shadow:0 0 0 2px #fff,0 3px 8px -3px rgba(140,109,44,.7);transform:scale(0);transition:transform .25s var(--spring)}
.tk .i{width:11px;height:11px}
.tk.on{transform:scale(1)}
.sw{display:inline-grid;align-items:center}
.sw>*{grid-area:1/1;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.sw>.sw-b{opacity:0;transform:translateY(5px)}
.sw.on>.sw-a{opacity:0;transform:translateY(-5px)}
.sw.on>.sw-b{opacity:1;transform:none}
.no-anim,.no-anim *,.no-anim *::before,.no-anim *::after{transition:none!important;animation:none!important}

/* status in the window bar */
.dm-status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--ink-3)}
.dm-status>span:not(.dm-live){display:none}
.dm-live{width:7px;height:7px;border-radius:50%;background:#d8d1c3}
.dm-status .ds-a{display:inline}
.st-run .dm-status .ds-a{display:none}.st-run .dm-status .ds-b{display:inline}.st-run .dm-live{background:var(--gold);animation:blink 1s steps(2,start) infinite}
.st-ok .dm-status .ds-a{display:none}.st-ok .dm-status .ds-c{display:inline;color:var(--gold-ink)}.st-ok .dm-live{background:var(--gold)}
@keyframes blink{to{opacity:.25}}

/* wires (paths are drawn by script) */
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.wires path{fill:none;stroke-linecap:round}
.wires .w-base{stroke:#dccfb2;stroke-width:1.6;stroke-dasharray:3 4;marker-end:url(#m-arr)}
.wires .w-lit{stroke:var(--gold);stroke-width:1.8;stroke-dasharray:100 100;stroke-dashoffset:100;transition:stroke-dashoffset .55s var(--ease)}
.wires .w-dot{stroke:#e2b85a;stroke-width:5;stroke-dasharray:7 200;stroke-dashoffset:7;opacity:0}
.wires .w-glow{stroke:rgba(226,184,90,.35);stroke-width:12;stroke-dasharray:9 200;stroke-dashoffset:9;opacity:0}
.wires g.lit .w-lit{stroke-dashoffset:0}
.wires g.pulse .w-dot,.wires g.pulse .w-glow{opacity:1;stroke-dashoffset:-100;transition:stroke-dashoffset .6s cubic-bezier(.5,0,.4,1)}
.wires g.pulse.done .w-dot,.wires g.pulse.done .w-glow{opacity:0;transition:opacity .2s}

/* --- demo 1: workflow --- */
.fl{padding:14px}
.fl-form{position:absolute;left:14px;right:14px;top:14px;z-index:2;padding:10px 12px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08),0 10px 22px -16px rgba(60,44,12,.4)}
.fl-form-h{display:flex;align-items:center;gap:7px;margin-bottom:9px;font-size:12px;font-weight:600;color:var(--ink)}
.fl-form-h img{width:14px;height:14px}
.fl-new{font-size:11px;font-weight:500;color:var(--ink-3)}
.fl-form .fl-row{display:flex;gap:8px}
.fl-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.fl-form .fl-field:nth-of-type(1){flex:0 0 27%}
.fl-form .fl-field:nth-of-type(2){flex:1 1 auto}
.fl-form .fl-field:nth-of-type(3){flex:0 0 22%}
.fl-field>span{font-size:11px;font-weight:500;color:var(--ink-3);white-space:nowrap}
.fl-field b{display:flex;align-items:center;height:28px;padding:0 9px;border-radius:8px;background:#faf8f3;box-shadow:inset 0 0 0 1px rgba(29,29,31,.09);font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;transition:box-shadow .2s}
.fl-field b:empty::before{content:attr(data-ph);color:#b2aa9b;font-weight:450}
.fl-field b.typing{box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 3px rgba(200,164,85,.16);background:#fff}
.typing::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--ink);animation:caret .9s steps(2,start) infinite}
@keyframes caret{to{opacity:0}}
.fl-send{position:absolute;right:10px;top:8px;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:7px;background:var(--ink);color:#fff;font-size:11px;font-weight:550;transition:transform .15s var(--ease)}
.fl-send.press{transform:scale(.93)}
.fl-send::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(200,164,85,.6);opacity:0}
.fl-send.press::after{animation:ring .6s var(--ease)}
@keyframes ring{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25);box-shadow:0 0 0 4px rgba(200,164,85,.5)}}
.fl-hub{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;left:16%;top:calc(50% + 34px);transform:translate(-50%,-50%)}
.fl-hub-ico{position:relative;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08),0 12px 24px -14px rgba(60,44,12,.45);transition:transform .25s var(--spring)}
.fl-hub-ico::before{content:"";position:absolute;inset:-6px;border-radius:21px;background:radial-gradient(closest-side,rgba(214,176,92,.45),rgba(214,176,92,0));opacity:0;transition:opacity .35s}
.fl-hub.on .fl-hub-ico{transform:scale(1.06)}
.fl-hub.on .fl-hub-ico::before{opacity:1}
.fl-hub.rest .fl-hub-ico{transform:none}
.fl-hub-ico img{width:30px;height:30px}
.fl-hub-l{font-size:11.5px;font-weight:550;color:var(--ink-2)}
.fl-hub .tk{position:absolute;top:-6px;right:-8px}
.fl-out{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:9px 12px 9px 9px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08),0 10px 22px -16px rgba(60,44,12,.4)}
.fl-out-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#f7f4ee;flex:none}
.fl-out-ico img{width:18px;height:18px}
.fl-out-t{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.fl-out-t b{font-size:12.5px;font-weight:600}
.fl-out-t .sw{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.fl-out-t .sw-b{color:var(--ink-2)}
.fl-out .tk{margin-left:auto}
.fl-out::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px rgba(200,164,85,.55);opacity:0;pointer-events:none}
.fl-out.hit::after{animation:hit .7s var(--ease)}
@keyframes hit{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.06,1.18)}}
.fl-out[data-node="hs"]{left:40%;right:14px;top:calc(50% + 4px)}
.fl-out[data-node="sl"]{left:40%;right:14px;top:calc(50% + 66px)}
.fl-done{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px 0 6px;border-radius:var(--r-pill);background:#fff;box-shadow:0 0 0 1px rgba(200,164,85,.4),0 10px 22px -14px rgba(140,109,44,.6);font-size:12px;font-weight:600;color:var(--gold-ink);opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.fl-done.on{opacity:1;transform:none}
.fl-done .tk{width:20px;height:20px}

/* --- demo 2: agent --- */
.ag{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:12px 14px 14px}
.ag-mail{position:relative;overflow:hidden;padding:11px 13px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08),0 10px 22px -16px rgba(60,44,12,.4)}
.ag-txt{position:relative;z-index:0;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--ink-2);opacity:.3;transform:translateY(-3px);transition:opacity .35s var(--ease),transform .4s var(--ease)}
.ag-mail.on .ag-txt{opacity:1;transform:none}
.ag-unread{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:2px;transition:opacity .3s}
.ag-mail.on .ag-unread{opacity:0}
.ag-from{display:flex;align-items:center;gap:9px}
.ag-who{display:flex;flex-direction:column;line-height:1.25}
.ag-who b{font-size:12.5px;font-weight:600}
.ag-who span{font-size:11px;color:var(--ink-3)}
.ag-time{margin-left:auto;font-size:11px;color:var(--ink-3)}
.ag-subj{margin-top:8px;font-size:13px;font-weight:600;letter-spacing:-.01em}
.ag-txt mark{position:relative;background:none;color:inherit;padding:0 1px;white-space:nowrap}
.ag-txt mark::before{content:"";position:absolute;left:-2px;right:-2px;top:0;bottom:0;border-radius:4px;background:rgba(214,176,92,.32);box-shadow:inset 0 -1.5px 0 rgba(200,164,85,.8);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.ag-txt mark.on::before{transform:none}
.ag-txt mark.on{color:var(--ink)}
.ag-scan{position:absolute;left:0;right:0;top:0;height:46px;pointer-events:none;background:linear-gradient(180deg,rgba(214,176,92,0),rgba(214,176,92,.22) 70%,rgba(200,164,85,.85) 98%,rgba(200,164,85,0));opacity:0;transform:translateY(-50px)}
.ag-scan.go{animation:scan .8s cubic-bezier(.45,0,.3,1) forwards}
@keyframes scan{0%{opacity:0;transform:translateY(-50px)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(120px)}}
.ag-panel{display:flex;flex-direction:column;gap:9px;padding:10px 12px 12px;border-radius:12px;background:linear-gradient(180deg,#fdfaf2,#fbf6ea);box-shadow:inset 0 0 0 1px rgba(200,164,85,.28);opacity:.55;transition:opacity .35s var(--ease)}
.ag-panel.on{opacity:1}
.ag-state{margin-left:auto;justify-items:end}
.ag-wait{font-size:11.5px;color:var(--ink-3)}
.ag-ph{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ag-ph b{font-size:12px;font-weight:600}
.ag-spark{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--ink);color:#f0d698}
.ag-spark .i{width:12px;height:12px}
.ag-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 5px 0 8px;border-radius:var(--r-pill);background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08);font-size:11.5px;font-weight:550;color:var(--ink)}
.ag-chip img{width:13px;height:13px}
.ag-chip .tk{width:16px;height:16px;box-shadow:none}
.ag-state.sw>.sw-b{transform:scale(.85)}
.ag-state.sw.on>.sw-b{transform:none;transition:opacity .25s var(--ease),transform .25s var(--spring)}
.ag-draft{position:relative;padding:8px 10px 9px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.07)}
.ag-skel{position:absolute;left:10px;right:10px;top:27px;display:flex;flex-direction:column;gap:9px;transition:opacity .25s}
.ag-skel i{display:block;height:7px;border-radius:4px;background:linear-gradient(90deg,#efe9dd,#f6f2ea)}
.ag-skel i+i{width:62%}
.ag-draft.on .ag-skel{opacity:0}
.ag-dl{display:block;font-size:11px;font-weight:500;color:var(--ink-3);margin-bottom:2px}
.ag-draft p{min-height:3em;font-size:12.5px;line-height:1.5;color:var(--ink)}
.ag-foot{display:flex;align-items:center;gap:8px}
.ag-ok{position:relative;display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--r-pill);background:var(--gold-wash);box-shadow:inset 0 0 0 1px rgba(200,164,85,.38);font-size:11.5px;font-weight:550;color:var(--gold-ink);opacity:0;transition:opacity .3s}
.ag-ok.on{opacity:1}
.ag-ring{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px rgba(200,164,85,.55);opacity:0}
.ag-ok.pulse .ag-ring{animation:okp 1.1s var(--ease) 2}
@keyframes okp{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.22,1.5)}}
.ag-edit{margin-left:auto;display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.1);font-size:12px;font-weight:500;color:var(--ink-2)}
.ag-approve{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:8px;background:var(--ink);color:#fff;font-size:12px;font-weight:550;transition:transform .15s var(--ease),background-color .3s}
.ag-approve .sw-b{display:inline-flex;align-items:center;gap:5px}
.ag-approve .i{width:12px;height:12px;color:#f0d698}
.ag-approve.press{transform:scale(.92)}
.ag-approve.sent{background:#2c2a26}
.cursor{position:absolute;left:0;top:0;z-index:5;width:20px;height:20px;opacity:0;transform:translate3d(var(--cx,300px),var(--cy,300px),0);transition:transform .6s cubic-bezier(.5,0,.25,1),opacity .25s}
.cursor svg{width:20px;height:20px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.cursor.on{opacity:1}
.cursor.click svg{transform:scale(.86);transition:transform .12s}

/* --- demo 3: dashboard --- */
.db{display:flex;flex-direction:column;gap:12px;padding:12px 14px 14px}
.dm-seg{margin-left:auto;display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:#f4f1ea;font-size:11px;font-weight:500;color:var(--ink-3)}
.dm-seg span{padding:2px 8px;border-radius:6px;white-space:nowrap}
.dm-seg .on{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(29,29,31,.06)}
.db-chart{padding:10px 12px 8px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08)}
.db-ch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.db-ch b{font-size:12px;font-weight:600}
.db-leg{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)}
.db-leg i{width:8px;height:8px;border-radius:2px;display:inline-block}
.db-leg .lg-a{background:linear-gradient(180deg,#d7bb78,#c39d4c)}
.db-leg .lg-b{background:#e9dfc8;margin-left:6px}
.db-plot{position:relative;height:78px;margin:0 2px 18px 2px}
.db-axes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.db-axes path{fill:none;vector-effect:non-scaling-stroke}
.db-ax{stroke:#d9d0bf;stroke-width:1.2}
.db-grid{stroke:#efe9dd;stroke-width:1;opacity:0;transition:opacity .5s var(--ease) .15s}
.db.axes .db-grid{opacity:1}
.db-bars{position:absolute;left:4%;right:2%;top:0;bottom:0;display:flex;justify-content:space-around;align-items:flex-end}
.db-day{position:relative;height:100%;display:flex;align-items:flex-end;gap:3px;width:15%;justify-content:center}
.db-day .bar{position:relative;display:block;width:min(16px,42%);height:calc(var(--h) * 100%);border-radius:4px 4px 1px 1px;background:rgba(214,198,164,.26);overflow:hidden}
.db-day .bar i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#dcc286,#c39d4c);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.db-day .bar+.bar i{background:#e8decb}
.db-day .bar i.on{transform:scaleY(1)}
.db-day .db-dl{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);font-size:11px;color:var(--ink-3)}
.db-table{border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08);overflow:hidden}
.db-th{display:flex;justify-content:space-between;padding:7px 12px;font-size:11px;font-weight:500;color:var(--ink-3);background:#fbf9f4;border-bottom:1px solid var(--line)}
.db-row{position:relative;display:flex;align-items:center;gap:9px;padding:6px 12px;font-size:12.5px}
.db-row+.db-row{border-top:1px solid var(--line)}
.db-row .db-st{opacity:0;transform:scale(.85);transform-origin:right center;transition:opacity .3s var(--ease),transform .3s var(--spring)}
.db-row.on .db-st{opacity:1;transform:none}
.db-row b{font-weight:550}
.db-row::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(214,176,92,.18),rgba(214,176,92,0));opacity:0;transition:opacity .4s}
.db-row.glow::before{opacity:1}
.db-st{margin-left:auto}
.st{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:11px;font-weight:550;white-space:nowrap}
.st .i{width:11px;height:11px}
.st-sent{background:#f3f0e9;color:var(--ink-2)}
.st-paid{background:var(--gold-wash);color:var(--gold-ink);box-shadow:inset 0 0 0 1px rgba(200,164,85,.35)}
.st-over{background:#2b2926;color:#f5e7c6}
.db-st.sw{justify-items:end}
.db-st.sw>.sw-b{transform:scale(.7)}
.db-st.sw.on>.sw-b{transform:none;transition:opacity .2s,transform .25s var(--spring)}
.db-foot{height:36px;display:flex;align-items:center;padding:0 12px;border-top:1px solid var(--line);background:#fbf9f4}
.db-xero{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
.db-xero img{width:20px;height:20px;border-radius:50%;opacity:.55;transition:opacity .3s}
.db-xero b{font-weight:600;color:var(--ink)}
.db-xero.on img{opacity:1}

/* --- demo 4: crm sync --- */
.sy{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:12px 14px 14px}
.sy-foot{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;font-size:11.5px;color:var(--ink-3);background:#fbf9f4}
.sy-foot .i{width:13px;height:13px;color:var(--gold-deep)}
.sy-foot span{margin-left:auto;font-weight:550;color:var(--ink-2)}
.dm-night{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:var(--r-pill);background:#2b2926;color:#f3e3bb;font-size:11px;font-weight:550}
.dm-night .i{width:12px;height:12px}
.sy-route{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:#fbf9f4;box-shadow:inset 0 0 0 1px rgba(29,29,31,.06)}
.sy-sys{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;white-space:nowrap}
.sy-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08);color:var(--ink-2)}
.sy-ico .i{width:14px;height:14px}
.sy-ico img{width:16px;height:16px}
.sy-pipe{position:relative;flex:1;display:flex;align-items:center;justify-content:flex-end;height:22px;min-width:40px;color:var(--gold-deep)}
.sy-pipe>.i{width:14px;height:14px;position:relative;z-index:1}
.sy-line{position:absolute;left:0;right:6px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:repeating-linear-gradient(90deg,#d9c79c 0 5px,transparent 5px 9px)}
.sy-run{position:absolute;left:0;top:50%;width:26px;height:4px;margin-top:-2px;border-radius:4px;background:linear-gradient(90deg,rgba(200,164,85,0),#d4ad55);opacity:0}
.sy-pipe.go .sy-run{animation:run 1.2s cubic-bezier(.5,0,.4,1) 2}
@keyframes run{0%{opacity:0;transform:translateX(0)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(var(--run,120px))}}
.sy-way{position:absolute;left:50%;top:-11px;transform:translateX(-50%);font-size:11px;font-weight:500;color:var(--gold-ink);white-space:nowrap;background:#fbf9f4;padding:0 4px}
.sy-log{display:flex;flex-direction:column;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08);overflow:hidden}
.sy-row{position:relative;display:flex;align-items:center;gap:9px;min-height:46px;padding:6px 12px;font-size:12.5px;flex-wrap:wrap}
.sy-log>*+*{border-top:1px solid var(--line)}
.sy-row b{font-weight:550}
.sy-what{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.sy-row.q>.av,.sy-row.q>b,.sy-row.q>.sy-what{transition:opacity .45s var(--ease)}
.sy-row.q:not(.on)>.av,.sy-row.q:not(.on)>b{opacity:.42}
.sy-row.q:not(.on)>.sy-what{opacity:0}
.sy-q{position:absolute;right:12px;top:23px;transform:translateY(-50%);font-size:11.5px;color:var(--ink-4);transition:opacity .3s}
.sy-row.q.on>.sy-q{opacity:0}
.sy-merge .rm .sy-q{top:28px}
.sy-row.r2 .tk{margin-left:0}
.sy-merge{position:relative;height:56px}
.sy-rec{position:absolute;top:10px;width:calc(50% - 16px);display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.1),0 6px 14px -10px rgba(60,44,12,.5);opacity:0;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.sy-rec>span:last-child{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.sy-rec b{font-size:12px;font-weight:550}
.sy-rec span span{font-size:11px;color:var(--ink-3);white-space:nowrap}
.sy-rec.ra{left:12px;transform:translateX(-6px)}
.sy-rec.rb{right:12px;transform:translateX(6px)}
.sy-merge.show .sy-rec{opacity:1;transform:none}
.sy-merge.join .sy-rec.ra{transform:translateX(calc(50% + 4px))}
.sy-merge.join .sy-rec.rb{transform:translateX(calc(-50% - 4px));opacity:0}
.sy-merge.merged .sy-rec{opacity:0;transition-duration:.25s}
.sy-merge .rm{position:absolute;inset:0;padding:6px 12px;transition:opacity .3s var(--ease),transform .35s var(--ease)}
.sy-merge.show .rm{opacity:0;transform:scale(.97)}
.sy-merge.merged .rm{opacity:1;transform:none}
.sy-badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--r-pill);background:var(--gold-wash);box-shadow:inset 0 0 0 1px rgba(200,164,85,.38);font-size:11px;font-weight:600;color:var(--gold-ink);transform:scale(.6);opacity:0;transition:transform .25s var(--spring) .15s,opacity .2s .15s}
.sy-badge .i{width:11px;height:11px}
.sy-merge.merged .sy-badge{transform:none;opacity:1}
.sy-merge .rm .sy-what{margin-left:auto}
.sy-fail{color:var(--ink);font-weight:550}
.sy-alert{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:#2b2926;color:#f3d48a}
.sy-alert .i{width:12px;height:12px}
.sy-row.r4.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.sy-slack{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border-radius:var(--r-pill);background:var(--gold-wash);box-shadow:inset 0 0 0 1px rgba(200,164,85,.38);font-size:11px;font-weight:550;color:var(--gold-ink);white-space:nowrap;opacity:0;transform:translateX(14px);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.sy-slack img{width:12px;height:12px}
.sy-slack.on{opacity:1;transform:none}

/* catch-all card */
.ask{margin-top:20px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;padding:24px 28px 24px 24px;border-radius:28px;background:radial-gradient(60% 120% at 0% 50%,rgba(240,224,186,.5),rgba(240,224,186,0) 70%),rgba(255,255,255,.62);border:1px solid #fff;box-shadow:var(--sh-md)}
.ask-slot{width:128px;height:100px;border-radius:18px;border:1.5px dashed rgba(140,109,44,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--gold-ink);font-size:12px;font-weight:500;background:rgba(255,255,255,.55)}
.ask-slot .i{width:22px;height:22px}
.ask-eyebrow{font-size:13px;font-weight:500;color:var(--gold-ink)}
.ask-title{margin:6px 0 8px;font-size:1.5rem;line-height:1.2;letter-spacing:-.03em;font-weight:500}
.ask-desc{font-size:15px;line-height:1.6;color:var(--ink-2);max-width:620px}

/* ================= THE AUDIT: I's copy and example roadmap, then J's credit rail underneath ================= */
.audit{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(24px,3vw,40px)}
.au-band{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);grid-template-areas:"left road" "track track";column-gap:clamp(32px,4.4vw,64px);row-gap:clamp(26px,2.8vw,38px);align-items:center;border-radius:var(--r-2xl);padding:clamp(40px,5vw,64px) clamp(20px,4.4vw,56px) clamp(30px,3.4vw,46px);background:
  radial-gradient(46% 52% at 74% 44%,rgba(233,203,138,.5),rgba(233,203,138,0) 72%),
  radial-gradient(40% 52% at 0% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
  radial-gradient(48% 60% at 100% 0%,rgba(244,232,204,.85),rgba(244,232,204,0) 70%),
  radial-gradient(50% 40% at 50% 100%,rgba(240,222,180,.55),rgba(240,222,180,0) 72%),
  linear-gradient(180deg,#fbf7ee,#f5ebd3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 50px 100px -70px rgba(60,44,12,.55)}
.au-band::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-image:radial-gradient(rgba(122,93,34,.13) 1px,transparent 1.2px);background-size:20px 20px;-webkit-mask-image:radial-gradient(44% 46% at 72% 40%,#000 10%,transparent 82%);mask-image:radial-gradient(44% 46% at 72% 40%,#000 10%,transparent 82%)}
.au-left{grid-area:left;display:flex;flex-direction:column;align-items:flex-start;gap:30px}
.au-copy .h2{font-size:clamp(2.125rem,1.3rem + 2.3vw,3.25rem)}
.au-h-b{display:block;color:var(--gold-ink)}
.au-copy .lead{margin-top:20px;max-width:440px}
.au-points{margin-top:20px;display:flex;flex-direction:column;gap:11px}
.au-points li{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1.4;font-weight:500;letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.au-points .tk{width:20px;height:20px;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 3px 8px -3px rgba(140,109,44,.6)}
.au-ctas{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
.au-note{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-3)}
.au-note .i{width:15px;height:15px;color:var(--gold-deep)}

/* the example roadmap: four A4 pages drawn at a fixed design size, scaled to fit their column */
.au-road{grid-area:road;position:relative;margin:0}
.rd-fit{position:relative;height:650px}
.rd-fan{--dw:610;--dh:650;position:absolute;left:0;top:0;width:calc(var(--dw) * 1px);height:calc(var(--dh) * 1px);transform:scale(var(--s,1));transform-origin:0 0;perspective:1500px}
.rd-cap{margin-top:14px;font-size:12.5px;line-height:1.4;color:var(--ink-3);text-align:center}
.pg{--x0:140px;--y0:86px;--r0:0deg;position:absolute;left:0;top:0;width:330px;height:467px;display:flex;flex-direction:column;padding:20px 22px 13px;border-radius:3px;background:linear-gradient(180deg,#f1ede6,#ede8df);color:#2a2824;font-family:var(--font);box-shadow:0 0 0 1px rgba(60,44,12,.07),0 1px 2px rgba(60,44,12,.08),0 22px 44px -24px rgba(60,44,12,.5);transform:translate(var(--x0),var(--y0)) rotate(var(--r0)) rotateY(0deg);transform-origin:0 50%;transition:transform .85s var(--ease) var(--dl,0s);will-change:transform;backface-visibility:hidden}
.rd-fan.open .pg{transform:translate(var(--x1),var(--y1)) rotate(var(--r1)) rotateY(0deg)}
.pg-cover{z-index:5;--x0:140px;--y0:96px;--r0:-1.6deg;--xm:118px;--ym:96px;--x1:-4px;--y1:132px;--r1:-5deg}
.pg-list{z-index:2;--x0:146px;--y0:100px;--r0:1.4deg;--x1:262px;--y1:0px;--r1:-1.4deg}
.pg-sol{z-index:3;--x0:136px;--y0:102px;--r0:-.6deg;--x1:281px;--y1:88px;--r1:1.7deg;--dl:.03s}
.pg-table{z-index:4;--x0:143px;--y0:98px;--r0:.8deg;--x1:270px;--y1:178px;--r1:.3deg;--dl:.06s}
/* the cover turns away on its left edge like a page, slips behind while it is edge-on, then swings back into view at the back */
.rd-fan.open .pg-cover{z-index:0;animation:pgTurn 1.25s both}
@keyframes pgTurn{0%{transform:translate(var(--x0),var(--y0)) rotate(var(--r0)) rotateY(0deg);z-index:5;animation-timing-function:cubic-bezier(.45,0,.75,.5)}38%{transform:translate(var(--xm),var(--ym)) rotate(var(--r0)) rotateY(89deg);z-index:5;animation-timing-function:step-end}39%{transform:translate(var(--xm),var(--ym)) rotate(var(--r0)) rotateY(89deg);z-index:0;animation-timing-function:cubic-bezier(.2,.75,.3,1)}100%{transform:translate(var(--x1),var(--y1)) rotate(var(--r1)) rotateY(0deg);z-index:0}}
.rd-fan.open .pg-table{box-shadow:0 0 0 1px rgba(60,44,12,.07),0 2px 4px rgba(60,44,12,.08),0 34px 60px -28px rgba(60,44,12,.55)}
/* page furniture copied from the real roadmaps: ring mark and name, gold caps label and month, footer with page numbers */
.pg-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pg-brand{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:-.02em;color:#1d1d1f}
.pg-brand img{width:15px;height:15px}
.pg-meta{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.3}
.pg-meta b{font-size:7px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9a7a37}
.pg-meta span{font-size:7.5px;color:#8a8478}
.pg-f{margin-top:auto;display:flex;justify-content:space-between;gap:8px;padding-top:9px;border-top:1px solid rgba(60,44,12,.13);font-size:6.3px;line-height:1.4;color:#8a8478;white-space:nowrap}
.pg-hd{margin-top:20px;font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.2;font-weight:400;letter-spacing:-.005em;color:#1f1d1a}
.pg-in{margin-top:5px;font-size:9.5px;line-height:1.4;color:#6b665c}
/* cover */
.pg-cv{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:30px}
.pg-ring{width:72px;height:72px}
.pg-title{margin-top:20px;max-width:184px;font-family:Georgia,"Times New Roman",serif;font-size:20px;line-height:1.22;color:#1f1d1a}
.pg-subt{margin-top:10px;max-width:166px;font-size:9.5px;line-height:1.45;color:#6b665c}
.pg-prep{margin-top:auto;margin-bottom:16px;font-size:8.5px;line-height:1.6;color:#6b665c}
/* where things stand */
.pg-tb{width:100%;margin-top:14px;border-collapse:collapse;table-layout:fixed;font-size:10.5px;line-height:1.35}
.pg-tb th{padding:0 6px 6px 0;text-align:left;font-size:8.5px;font-weight:600;color:#6b665c;border-bottom:1px solid rgba(60,44,12,.24)}
.pg-tb th:nth-child(1){width:28.5%}.pg-tb th:nth-child(2){width:30%}
.pg-tb td{padding:8px 6px 8px 0;vertical-align:top;border-bottom:1px solid rgba(60,44,12,.11);color:#3a3731}
.pg-tb td:first-child{font-weight:600;color:#1f1d1a}
.rt{display:inline-flex;align-items:baseline;gap:5px;font-weight:600;color:#1f1d1a}
.rt::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;transform:translateY(-1px);box-shadow:inset 0 0 0 1.3px #b8913f}
.rt-high::before{background:#c39d4c;box-shadow:none}
.rt-mid::before{background:linear-gradient(90deg,#c39d4c 50%,transparent 50%)}
/* what I'd do, in order */
.pg-ol{margin-top:15px;display:flex;flex-direction:column;gap:11px;counter-reset:pg}
.pg-ol li{position:relative;display:flex;flex-direction:column;gap:2px;padding-left:23px;counter-increment:pg}
.pg-ol li::before{content:counter(pg);position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:600;color:#7a5d22;box-shadow:inset 0 0 0 1px rgba(184,145,63,.7)}
.pg-ol b{font-size:10.5px;font-weight:600;line-height:1.3;color:#1f1d1a}
.pg-ol span{font-size:9.5px;line-height:1.35;color:#6b665c}
/* a solution page */
.pg-sol .pg-hd{font-size:16.5px}
.pg-n{color:#9a7a37}
.pg-blk{margin-top:11px}
.pg-blk b{display:block;font-size:8.5px;font-weight:600;color:#7a5d22}
.pg-blk p{margin-top:3px;font-size:9.5px;line-height:1.42;color:#3d3a34}
.pg-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:3px;padding-top:2px;border-top:1px solid rgba(60,44,12,.1)}

/* J's credit rail: the audit card on the left, the build on the right, the $1,250 travels along the gold rail
   between them and lands as "Nothing extra". The rail is drawn from the cards' real positions */
.au-track{grid-area:track;position:relative;margin:0}
.au-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,.62fr) minmax(0,1.06fr);align-items:center}
.au-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.au-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.au-base{stroke:#d3bf92;stroke-width:1.6;stroke-dasharray:3 5}
.au-glow{stroke:rgba(214,176,92,.26);stroke-width:10}
.au-lit{stroke:#c8a455;stroke-width:2.4}
.au-arrow{stroke:#c8a455;stroke-width:2.2;opacity:.45;transition:opacity .3s}
.au-stage.lit .au-arrow{opacity:1}
.au-port{fill:#fff;stroke:#d3bf92;stroke-width:1.6;transition:fill .3s,stroke .3s}
.au-stage.lit .au-port{fill:#f6ead0;stroke:#c8a455}
.au-card{position:relative;z-index:2;display:flex;flex-direction:column;border-radius:18px;background:#fff;box-shadow:var(--sh-win);overflow:hidden}
.au-ch{display:flex;align-items:center;gap:11px;padding:13px 16px 12px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#fcfaf6)}
.au-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--gold-wash);box-shadow:inset 0 0 0 1px rgba(200,164,85,.35);color:var(--gold-ink);flex:none}
.au-ico .i{width:17px;height:17px}
.au-ico img{width:22px;height:22px}
.au-ct{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.au-ct b{font-size:14px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.au-ct span{font-size:12px;color:var(--ink-3)}
.au-ch .dm-ex{margin-left:auto}
.au-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:9px 16px;font-size:13px;color:var(--ink-2)}
.au-row+.au-row,.au-row+.au-total{border-top:1px solid var(--line)}
.au-fee{flex-wrap:wrap}
.au-amtw{display:inline-flex;align-items:center;gap:10px}
.au-sub{font-size:11.5px;font-weight:550;color:var(--gold-ink);opacity:0;transform:translateX(6px);transition:opacity .3s var(--ease),transform .35s var(--ease)}
.au-amt{position:relative;font-size:15px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink);transition:color .3s}
.au-amt::after{content:"";position:absolute;left:-3px;right:-3px;top:54%;height:1.6px;border-radius:2px;background:var(--gold-deep);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.au-a.struck .au-amt{color:var(--ink-3)}
.au-a.struck .au-amt::after{transform:none}
.au-a.struck .au-sub{opacity:1;transform:none}
.au-credit{transition:background-color .45s var(--ease)}
.au-b.got .au-credit{background:linear-gradient(90deg,rgba(214,176,92,.18),rgba(214,176,92,.04))}
.au-slot{display:inline-grid;align-items:center;justify-items:end;min-width:78px}
.au-slot>*{grid-area:1/1}
.au-wait{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;border:1.5px dashed rgba(140,109,44,.32);font-size:11.5px;color:var(--ink-3);transition:opacity .25s}
.au-got{font-size:15px;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--gold-ink);opacity:0;transform:scale(.7);transition:opacity .2s,transform .3s var(--spring)}
.au-b.got .au-wait{opacity:0}
.au-b.got .au-got{opacity:1;transform:none}
.au-total{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;min-height:48px;padding:7px 16px;background:#fbf9f4;font-size:13px;font-weight:550;color:var(--ink)}
.au-zero{justify-items:end}
.au-zero .sw-a{font-size:12px;font-weight:500;color:var(--ink-3)}
.au-zero .sw-b{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 6px;border-radius:var(--r-pill);background:var(--gold-wash);box-shadow:inset 0 0 0 1px rgba(200,164,85,.45);font-size:13.5px;font-weight:650;color:var(--gold-ink);transform:scale(.8)}
.au-zero.on .sw-b{transform:none;transition:opacity .25s,transform .3s var(--spring)}
.au-zero .tk{width:20px;height:20px;transform:none;box-shadow:none}
.au-mid{align-self:stretch;min-height:1px}
.au-cap{position:absolute;z-index:3;left:var(--rx,50%);top:calc(var(--ry,50%) - 40px);transform:translateX(-50%);font-size:12.5px;font-weight:550;letter-spacing:-.005em;color:var(--ink-2);white-space:nowrap;pointer-events:none}
.au-replay{position:absolute;z-index:3;left:var(--rx,50%);top:calc(var(--ry,50%) + 20px);transform:translateX(-50%)}
.au-stage.v .au-cap{left:auto;right:calc(100% - var(--rx,50%) + 60px);top:calc(var(--ry,50%) - 30px);transform:none}
.au-stage.v .au-replay{left:auto;right:calc(100% - var(--rx,50%) + 60px);top:calc(var(--ry,50%) + 4px);transform:none}
.au-coin{position:absolute;left:0;top:0;z-index:6;display:flex;pointer-events:none;will-change:transform}
.au-coin-in{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border-radius:var(--r-pill);background:linear-gradient(180deg,#efd79a 0%,#d2ad5c 62%,#c39d4c 100%);color:#2b2414;font-size:14.5px;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(120,90,30,.25),0 12px 24px -10px rgba(140,109,44,.85),0 0 0 5px rgba(214,176,92,.2);opacity:0;transform:scale(.6);transition:opacity .25s var(--ease),transform .35s var(--spring)}
.au-coin.on .au-coin-in{opacity:1;transform:scale(1.1)}
.au-coin.on.fly .au-coin-in{transform:scale(1)}

/* ================= TOOLS ================= */
.tools{position:relative;padding:clamp(40px,4.4vw,64px) 0 clamp(8px,1vw,16px)}
.tools+.reviews{padding-top:clamp(48px,5vw,72px)}
.tools-head{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.tools-h{font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);line-height:1.1;letter-spacing:-.04em;font-weight:500;color:var(--ink)}
.tools-deck{font-size:15.5px;color:var(--ink-3)}
.mq-tools{margin-top:26px}

/* ================= HOW WE WORK: one journey on a path ================= */
.process{overflow:clip;padding-top:clamp(64px,7vw,104px)}
.pr{position:relative;--pt:clamp(1.625rem,1.2rem + 1.1vw,2.25rem)}
.pr-rail{position:absolute;left:15px;top:var(--rt,0px);height:var(--rh,0px);width:2px;border-radius:2px;background:rgba(29,29,31,.09);pointer-events:none;z-index:0}
.pr-rail i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#dcc07a,#b8913f);transform-origin:top;transform:scaleY(var(--fill,0));transition:transform .6s var(--ease)}
.pr-text{position:relative;z-index:1;padding-left:64px}
.pr-head{position:relative}
.pr-t{font-size:var(--pt);line-height:1.1;letter-spacing:-.04em;font-weight:500;color:var(--ink);transition:color .35s}
.pr-dot{position:absolute;left:-64px;top:calc((var(--pt) * 1.1 - 32px) / 2);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px var(--line-2),0 0 0 6px var(--cream);font-size:13px;font-weight:600;color:var(--ink-3);transition:background-color .35s,color .35s,box-shadow .35s}
.pr-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(200,164,85,.5);opacity:0;transform:scale(.8);transition:opacity .35s,transform .45s var(--ease)}
.pr-step.past .pr-dot,.pr-step.on .pr-dot{background:linear-gradient(180deg,#dcc07a,#c39d4c);color:#2b2414;box-shadow:0 0 0 6px var(--cream),0 6px 14px -6px rgba(140,109,44,.75)}
.pr-step.on .pr-dot::after{opacity:1;transform:none}
.pr-fare{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:10px 0 12px;font-size:15px;font-weight:550;letter-spacing:-.01em;color:var(--gold-ink)}
.pr-fare.big{margin:12px 0 14px}
.pr-fare.big b{font-size:clamp(1.875rem,1.45rem + 1.1vw,2.5rem);line-height:1;font-weight:500;letter-spacing:-.035em;color:var(--gold-ink)}
.pr-fare.big span{font-size:14.5px;font-weight:500;color:var(--ink-2)}
.pr-d{font-size:16.5px;line-height:1.65;color:var(--ink-2);max-width:440px;transition:color .35s}
.pr-scene{position:relative}
.sc{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;padding:28px}
.sc-win{position:relative;border-radius:16px;background:#fff;box-shadow:var(--sh-win);overflow:hidden}
.sc-card{position:relative;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.07),0 30px 60px -28px rgba(60,44,12,.5)}
.pr-stage-bg{border-radius:32px;background:radial-gradient(50% 60% at 12% 10%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),radial-gradient(55% 70% at 92% 92%,rgba(232,206,150,.7),rgba(232,206,150,0) 72%),radial-gradient(40% 50% at 70% 8%,rgba(244,232,204,.9),rgba(244,232,204,0) 70%),linear-gradient(160deg,#f8f1e1,#f3e7cc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 40px 90px -60px rgba(60,44,12,.45)}
.pr-stage-bg::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(rgba(122,93,34,.12) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%)}

/* scene 1: the first call */
.cal{padding:12px 14px 14px}
.cal-row{display:grid;grid-template-columns:40px repeat(5,minmax(0,1fr))}
.cal-days span{font-size:11.5px;font-weight:500;color:var(--ink-3);text-align:center;padding-bottom:6px}
.cal-days .cal-thu{color:var(--gold-ink);font-weight:600}
.cal-t{font-size:11px;color:var(--ink-3);text-align:right;padding:3px 8px 0 0;border-top:1px solid var(--line)}
.cal-row .c{position:relative;height:44px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.busy{position:absolute;inset:4px;border-radius:7px;background:repeating-linear-gradient(135deg,#f1ece2 0 6px,#f8f5ef 6px 12px)}
.c-slot{z-index:1}
.slot{position:absolute;inset:3px;border-radius:8px;box-shadow:inset 0 0 0 1.5px rgba(200,164,85,.55);background:repeating-linear-gradient(135deg,rgba(250,245,232,.9) 0 5px,rgba(255,255,255,.9) 5px 10px)}
.slot-fill{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:4px 8px;border-radius:8px;background:linear-gradient(180deg,#e2c67f,#c9a352);color:#2b2414;line-height:1.2;clip-path:inset(0 100% 0 0 round 8px);transition:clip-path .45s var(--ease)}
.slot-fill b{font-size:11px;font-weight:600;white-space:nowrap}
.slot-fill span{font-size:11px;opacity:.8}
.slot-ic{display:none;width:14px;height:14px;align-self:center}
.sc-call.s1 .slot-fill{clip-path:inset(0 0 0 0 round 8px)}
.cal-card{width:min(330px,74%);align-self:flex-end;margin-top:-56px;margin-right:-8px;padding:14px 16px 12px;opacity:0;transform:translateY(14px);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.sc-call.s2 .cal-card{opacity:1;transform:none}
.cal-ch{display:flex;align-items:center;gap:11px;padding-right:76px}
.cal-ch>span:last-child{display:flex;flex-direction:column;line-height:1.3}
.cal-ch b{font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.cal-ch>span:last-child span{font-size:12px;color:var(--ink-3)}
.cal-vid{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--gold-wash);color:var(--gold-ink);box-shadow:inset 0 0 0 1px rgba(200,164,85,.35);flex:none}
.cal-booked{position:absolute;right:14px;top:16px;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px 0 7px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;transform:scale(.6);opacity:0;transition:transform .25s var(--spring),opacity .2s}
.cal-booked .i{width:12px;height:12px;color:#f0d698}
.sc-call.s3 .cal-booked{transform:none;opacity:1}
.cal-notes{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.cal-notes li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink);opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease),transform .35s var(--ease)}
.cal-notes .tk{width:16px;height:16px;box-shadow:none}
.sc-call.s4 .cal-notes li:nth-child(1),.sc-call.s5 .cal-notes li:nth-child(2){opacity:1;transform:none}

/* scene 2: the same example roadmap as the audit, smaller. It opens when the step becomes active, then stays open */
.rd-fit-mini{width:100%;flex:none}
.rd-fit-mini .rd-fan{left:50%;margin-left:calc(var(--dw) * var(--s,1) * -.5px)}
.sc-cap{margin-top:16px;font-size:12px;line-height:1.4;color:var(--ink-3);text-align:center}

/* scene 3: a fixed-price build */
.bd-prop{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:10px 14px 10px 10px;opacity:0;transform:translateY(-10px);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.sc-build.s1 .bd-prop{opacity:1;transform:none}
.bd-pi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--gold-wash);box-shadow:inset 0 0 0 1px rgba(200,164,85,.35);flex:none}
.bd-pi img{width:22px;height:22px}
.bd-pt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.bd-pt b{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:-.01em}
.bd-pt>span{font-size:11.5px;color:var(--ink-3)}
.bd-pst{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px 0 5px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:11px;font-weight:600;transform:scale(.6);opacity:0;transition:transform .25s var(--spring),opacity .2s}
.bd-pst .i{width:11px;height:11px;color:#f0d698}
.sc-build.s2 .bd-pst{transform:none;opacity:1}
.bd-pc{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.3;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.bd-pc b{font-size:14px;font-weight:650;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.bd-acct{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:var(--r-pill);background:var(--gold-wash);box-shadow:inset 0 0 0 1px rgba(200,164,85,.35);font-size:11px;font-weight:600;color:var(--gold-ink);white-space:nowrap}
.bd-acct .i{width:11px;height:11px}
.bd-acct-s{display:none}
.bd-canvas{position:relative;height:190px;background:#fbf9f4}
.bd-canvas::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(29,29,31,.13) 1px,transparent 1.2px);background-size:18px 18px}
.bd-node{position:absolute;z-index:1;transform:translate(-50%,-50%)}
.bd-in{display:flex;align-items:center;gap:9px;padding:8px 12px 8px 8px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08),0 10px 22px -14px rgba(60,44,12,.45);font-size:12.5px;font-weight:550;white-space:nowrap;opacity:.32;transform:translateY(-14px) scale(.96);transition:opacity .3s var(--ease),transform .4s var(--spring)}
.bd-node.on .bd-in{opacity:1;transform:none}
.bd-node small{display:block;font-family:var(--mono);font-weight:500;font-size:11px;color:var(--ink-3);line-height:1.2}
.bd-in>span:last-child{line-height:1.3}
.bd-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#f6f3ec;color:var(--ink-2);flex:none}
.bd-ico.gold{background:var(--gold-wash);color:var(--gold-ink)}
.bd-ico .i{width:15px;height:15px}
.bd-ico img{width:17px;height:17px}
.bd-node[data-node="t"]{left:17%;top:50%}
.bd-node[data-node="ai"]{left:45%;top:50%}
.bd-node[data-node="h"]{left:79%;top:25%}
.bd-node[data-node="s"]{left:79%;top:75%}
.bd-prog{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
.bd-pl{font-size:11.5px;font-weight:500;color:var(--ink-3);white-space:nowrap}
.bd-track{position:relative;flex:1;height:6px;border-radius:6px;background:#efe9dc;overflow:hidden}
.bd-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#e0c27c,#c39d4c);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.sc-build.s5 .bd-fill{transform:scaleX(.82)}
.bd-flag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--gold-ink);white-space:nowrap}
.bd-flag .i{width:13px;height:13px}
.bd-msg{display:flex;align-items:flex-start;gap:10px;width:min(330px,80%);margin:12px -6px 0 auto;padding:12px 14px;z-index:2;opacity:0;transform:translateY(14px);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.sc-build.s6 .bd-msg{opacity:1;transform:none}
.bd-msg img{width:28px;height:28px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);padding:3px;flex:none}
.bd-msg b{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.bd-msg b span{font-weight:500;font-size:11px;color:var(--ink-3)}
.bd-mt{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-2);margin-top:1px}

/* scene 4: full handover */
.ho-list{padding:6px 16px}
.ho-list li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.ho-list li:last-child{border-bottom:0}
.ho-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#f6f3ec;color:var(--ink-2);flex:none}
.ho-ico img{width:17px;height:17px}
.ho-ico .i{width:17px;height:17px}
.ho-list li>span:nth-child(2){display:flex;flex-direction:column;line-height:1.3}
.ho-list b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.ho-list li>span:nth-child(2) span{font-size:12px;color:var(--ink-3)}
.ho-list .tk{margin-left:auto;width:22px;height:22px}
.ho-list .tk .i{width:13px;height:13px}
.ho-own{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--line);background:#fbf9f4;perspective:600px}
.ho-ol{font-size:12px;font-weight:500;color:var(--ink-3)}
.ho-flip{position:relative;display:inline-grid;transform-style:preserve-3d;transition:transform .5s var(--ease)}
.ho-face{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 13px 0 7px;border-radius:var(--r-pill);font-size:13px;font-weight:600;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ho-a{background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.1);color:var(--ink-2)}
.ho-a img{width:18px;height:18px}
.ho-b{background:var(--ink);color:#fff;transform:rotateY(180deg)}
.ho-b .av{box-shadow:none;width:20px;height:20px;font-size:11px}
.sc-hand.s5 .ho-flip{transform:rotateY(180deg)}
.ho-keep{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--gold-ink);opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease) .15s,transform .35s var(--ease) .15s}
.ho-keep .i{width:14px;height:14px}
.sc-hand.s5 .ho-keep{opacity:1;transform:none}

/* ================= CASE STUDY ================= */
.case{padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(56px,7vw,96px)}
.case-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:stretch}
.cs{display:flex;flex-direction:column;border-radius:30px;padding:12px;background:linear-gradient(160deg,#f8f0de,#f0e1c0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),var(--sh-lg)}
.cs-win{flex:1;display:flex;flex-direction:column;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.06);overflow:hidden}
.cs-done{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:var(--r-pill);background:var(--gold-wash);box-shadow:inset 0 0 0 1px rgba(200,164,85,.35);font-size:11px;font-weight:600;color:var(--gold-ink)}
.cs-done .i{width:11px;height:11px}
.cs-body{flex:1;display:flex;flex-direction:column;gap:14px;padding:18px 18px 16px;background:linear-gradient(180deg,#fff,#fdfbf6)}
.cs-route{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:26px 6px 4px}
.cs-app{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:13px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08),0 10px 22px -16px rgba(60,44,12,.45)}
.cs-app>span:last-child{display:flex;flex-direction:column;line-height:1.25}
.cs-app b{font-size:13px;font-weight:600}
.cs-app>span:last-child span{font-size:11px;color:var(--ink-3)}
.cs-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#f6f3ec;color:var(--ink-2)}
.cs-ico .i{width:17px;height:17px}
.cs-mid{box-shadow:0 0 0 1px rgba(200,164,85,.45),0 10px 22px -14px rgba(140,109,44,.5);background:linear-gradient(180deg,#fffdf7,#fbf3df)}
.cs-night{position:absolute;left:50%;top:0;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px 0 8px;border-radius:var(--r-pill);background:#2b2926;color:#f3e3bb;font-size:11px;font-weight:550;white-space:nowrap}
.cs-night .i{width:12px;height:12px}
.cs-board{flex:1;display:flex;flex-direction:column;padding:12px;border-radius:14px;background:#faf8f3;box-shadow:inset 0 0 0 1px rgba(29,29,31,.06)}
.cs-bh{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:12px}
.cs-bh img{width:13px;height:13px}
.cs-bh b{font-weight:600}
.cs-toast{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:var(--r-pill);background:var(--gold-wash);box-shadow:inset 0 0 0 1px rgba(200,164,85,.38);font-size:11px;font-weight:550;color:var(--gold-ink);opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .35s var(--ease)}
.cs-toast .i{width:11px;height:11px}
.cs-toast.on{opacity:1;transform:none}
.cs-cols{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cs-col{position:relative;display:flex;flex-direction:column;gap:6px;min-height:190px;padding:8px;border-radius:11px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.05)}
.cs-ch{font-family:var(--mono);font-weight:500;font-size:11px;color:var(--ink-3);padding:0 2px 2px}
.cs-deal{position:relative;display:flex;flex-direction:column;gap:1px;padding:7px 9px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.09),0 4px 10px -7px rgba(60,44,12,.45);font-size:12px;line-height:1.3;will-change:transform}
.cs-deal b{font-weight:600}
.cs-deal span{font-size:11px;color:var(--ink-3)}
.cs-deal.moving{z-index:3;box-shadow:0 0 0 1.5px var(--gold),0 14px 24px -12px rgba(140,109,44,.6)}
.cs-deal.landed{box-shadow:0 0 0 1px rgba(200,164,85,.5),0 4px 10px -7px rgba(60,44,12,.45)}
.cs-dup{transition:opacity .35s var(--ease),transform .45s var(--ease)}
.cs-dtag{position:absolute;right:6px;top:7px;font-size:11px;font-weight:550;padding:0 6px;border-radius:var(--r-pill);background:var(--gold-wash);color:var(--gold-ink);box-shadow:inset 0 0 0 1px rgba(200,164,85,.38)}
.cs-dup.gone{opacity:0;transform:translateY(-38px) scale(.96)}
.cs-dup.hidden{display:none}
.cs-old{opacity:.75}
.cs-hand{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.07);font-size:12.5px;color:var(--ink-2)}
.cs-hand img{width:16px;height:16px}
.cs-hand b{color:var(--ink);font-weight:600}
.cs-doc{margin-left:auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#f6f3ec;color:var(--ink-2)}
.cs-doc .i{width:14px;height:14px}
.cs-cap{margin:12px 6px 0;font-size:12.5px;color:var(--gold-ink)}
/* the story column: a clear heading, the client's logo in a framed tile, the quote, who said it, what was built.
   It stretches to the illustration's height so both columns start and finish on the same lines */
.case-copy{display:flex;flex-direction:column;align-self:stretch;padding:4px 0 2px}
.case-top{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.case-hrow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;width:100%}
.case-h{font-size:clamp(2.125rem,1.5rem + 1.6vw,2.875rem);line-height:1.04;letter-spacing:-.045em;font-weight:500;color:var(--ink)}
.case-more{display:inline-flex;align-items:center;gap:8px;padding:6px 0;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink);border-bottom:1px solid rgba(29,29,31,.18);transition:border-color .25s,gap .35s var(--ease)}
.case-more:hover{border-color:var(--ink);gap:11px}
.case-more .i{width:15px;height:15px}
.case-client{display:inline-flex;align-items:center;height:50px;padding:0 20px 0 16px;border-radius:14px;background:#fff;box-shadow:var(--sh-sm)}
.case-cl{display:inline-flex;align-items:center;height:22px;padding-right:14px;margin-right:16px;border-right:1px solid var(--line-2);font-size:12.5px;font-weight:500;color:var(--ink-3)}
.case-logo{height:18px;width:auto}
.case-q{margin:30px 0 0;padding-bottom:30px}
.case-mark{display:block;height:44px;margin:0 0 4px -4px;font-size:96px;line-height:.92;font-weight:400;letter-spacing:0;color:var(--gold);user-select:none}
.case-quote p{font-size:clamp(1.375rem,1.1rem + .8vw,1.75rem);line-height:1.36;letter-spacing:-.028em;font-weight:450;color:var(--ink);text-wrap:pretty}
.case-meta{display:flex;align-items:center;gap:13px;margin-top:22px}
.case-meta>span:last-child{display:flex;flex-direction:column;line-height:1.35}
.case-meta strong{font-size:15.5px;letter-spacing:-.015em}
.case-meta .role{font-size:14px;color:var(--ink-3)}
.built{margin-top:auto;padding-top:22px;border-top:1px solid var(--line-2)}
.built-h{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:12px}
.built-list{display:flex;flex-direction:column;gap:10px}
.built-list li{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.built-list .tk{margin-top:2px;box-shadow:none}

/* ================= WHITE-LABEL: its own calm, full-width band, clearly for agencies ================= */
.wl{position:relative;padding:clamp(24px,3vw,44px) 0 clamp(8px,1vw,16px)}
.wl-band{position:relative;isolation:isolate;overflow:hidden;padding:clamp(72px,8.4vw,118px) 0 clamp(60px,7vw,96px);background:
  radial-gradient(38% 70% at 0% 0%,rgba(255,255,255,.8),rgba(255,255,255,0) 70%),
  radial-gradient(46% 80% at 100% 100%,rgba(233,210,160,.45),rgba(233,210,160,0) 72%),
  linear-gradient(180deg,#f9f3e5,#f4ead4);box-shadow:inset 0 1px 0 rgba(200,164,85,.3),inset 0 -1px 0 rgba(200,164,85,.3)}
.wl-band::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(122,93,34,.11) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(50% 70% at 82% 30%,#000 5%,transparent 75%);mask-image:radial-gradient(50% 70% at 82% 30%,#000 5%,transparent 75%)}
.wl-for{display:inline-flex;align-items:center;gap:11px;font-size:16.5px;font-weight:550;letter-spacing:-.014em;color:var(--gold-ink)}
.wl-for-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#fff;color:var(--gold-ink);box-shadow:0 0 0 1px rgba(200,164,85,.42),0 6px 14px -8px rgba(140,109,44,.5)}
.wl-for-ico .i{width:16px;height:16px}
.wl-top{margin-top:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:28px 48px}
.wl-h{max-width:900px;font-size:var(--fs-display);line-height:1.02;letter-spacing:var(--tr-display);font-weight:500;color:var(--ink);text-wrap:balance}
.wl-soft{display:block;color:#6f6656}
.wl-top .btn{flex:none;margin-bottom:6px}
.wl-facts{margin-top:clamp(36px,4.4vw,56px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(140,109,44,.2)}
.wl-fact{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:28px 24px 4px 0}
.wl-fact+.wl-fact{padding-left:24px;border-left:1px solid rgba(140,109,44,.16)}
.wl-ico{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#fff;color:var(--gold-ink);box-shadow:0 0 0 1px rgba(200,164,85,.4),0 10px 18px -12px rgba(140,109,44,.6)}
.wl-ico .i{width:19px;height:19px}
.wl-fact p{font-size:16.5px;line-height:1.45;font-weight:500;letter-spacing:-.016em;color:var(--ink);text-wrap:pretty}
.wl-fine{margin-top:26px;padding-top:18px;border-top:1px solid rgba(140,109,44,.15);font-size:14px;line-height:1.5;color:var(--ink-3)}

/* ================= FINAL CALL TO ACTION (demo E's): the real globe turning low behind the panel ================= */
.cta-warm{min-height:540px;padding-bottom:clamp(170px,17vw,230px)}
.cta-glow{position:absolute;inset:auto 0 0 0;height:70%;z-index:-2;pointer-events:none;background:radial-gradient(55% 70% at 50% 100%,rgba(232,201,132,.42),rgba(232,201,132,0) 72%)}
.cta-globe{position:absolute;inset:0;z-index:-1;pointer-events:none}
.globe-cta{--gw:clamp(760px,84vw,1180px);top:auto;bottom:calc(var(--gw) * -.255);touch-action:auto}
.globe-cta .globe-canvas{cursor:default}
.globe-cta .globe-glow{background:radial-gradient(42% 46% at 50% 60%,rgba(228,192,116,.42) 0%,rgba(228,192,116,.14) 48%,rgba(228,192,116,0) 74%)}

/* ================= FAQ (layout lives in the theme) ================= */
.faq{padding-top:clamp(56px,6vw,96px)}
.faq-btns{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
/* a booking path at the end of the journey */
.pr-cta{margin-top:clamp(40px,5vw,64px);display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;padding-left:64px}
.pr-cta p{font-size:15px;line-height:1.5;color:var(--ink-3);max-width:420px}

/* ================= HOW WE WORK: desktop sticky stage ================= */
@media (min-width:1024px){
  .pr{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(40px,5vw,80px)}
  .pr-step{display:contents}
  .pr-text{grid-column:1;min-height:42vh;display:flex;flex-direction:column;justify-content:center;padding-top:28px;padding-bottom:28px}
  .pr-step[data-step="0"] .pr-text{grid-row:1}
  .pr-step[data-step="1"] .pr-text{grid-row:2}
  .pr-step[data-step="2"] .pr-text{grid-row:3}
  .pr-step[data-step="3"] .pr-text{grid-row:4}
  .pr-step:not(.on) .pr-t,.pr-step:not(.on) .pr-d{color:var(--ink-3)}
  .pr-stage-bg,.pr-scene{grid-column:2;grid-row:1 / span 4;position:sticky;top:96px;align-self:start;height:min(560px,calc(100vh - 120px))}
  .pr-scene{opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
  .pr-step.on .pr-scene{opacity:1;visibility:visible;transition-delay:0s}
  .sc{padding:clamp(24px,3vw,44px)}
}
@media (max-width:1023.98px){
  .pr-stage-bg{display:none}
  .pr-step+.pr-step{margin-top:56px}
  .pr-scene{z-index:1;margin-top:22px}
  .sc{padding:clamp(14px,4vw,22px);border-radius:28px;background:radial-gradient(50% 60% at 12% 10%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),radial-gradient(55% 70% at 92% 92%,rgba(232,206,150,.7),rgba(232,206,150,0) 72%),linear-gradient(160deg,#f8f1e1,#f3e7cc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
  .pr-text{max-width:640px}
}

/* ================= BREAKPOINTS ================= */
@media (max-width:1080px){
  .case-grid{grid-template-columns:1fr}
  .case-copy{order:-1;max-width:640px}
}
/* tablets: the heading row runs the full width (so "More case studies" sits top right), the quote on the left
   and "What was built" in a soft panel on the right, bottoms aligned */
@media (min-width:721px) and (max-width:1080px){
  .case-copy{max-width:none;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"top top" "q built";column-gap:clamp(32px,5vw,56px);align-items:end}
  .case-top{grid-area:top}
  .case-q{grid-area:q;padding-bottom:0}
  .built{grid-area:built;margin-top:0;padding:22px 24px 24px;border-top:0;border-radius:20px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px var(--line)}
}
@media (max-width:940px){
  .hero{min-height:0}
  .hero .globe{--gw:min(112vw,900px)}
  .hero-globe{min-height:calc(min(112vw,900px) * .44 - 24px)}
  .globe-cta{--gw:min(150vw,1000px);bottom:calc(var(--gw) * -.3)}
  .cta-warm{min-height:0}
  .svc-grid{grid-template-columns:1fr}
  .ask{grid-template-columns:1fr;gap:20px;padding:24px}
  .ask .btn{justify-self:start}
}
@media (max-width:1279.98px){
  .au-band{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
}
/* one column: copy, the roadmap, the credit rail, then the button, so the story ends on the action */
@media (max-width:1099.98px){
  .au-band{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "road" "track" "cta";row-gap:30px;align-items:start}
  .au-left{display:contents}
  .au-copy{grid-area:copy;max-width:640px}
  .au-ctas{grid-area:cta}
  .au-copy .lead{max-width:560px}
  .au-road{width:100%;max-width:762px;justify-self:start}
  .au-road .rd-fan{--smax:1.25}
}
@media (max-width:1023.98px){
  .au-stage{grid-template-columns:1fr;grid-template-rows:auto 132px auto}
  .au-card{width:min(440px,100%);justify-self:center}
}
@media (max-width:1080px){
  .wl-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wl-fact:nth-child(3){padding-left:0;border-left:0}
  .wl-fact:nth-child(n+3){border-top:1px solid rgba(140,109,44,.13)}
}
@media (max-width:860px){
  .wl-top{flex-direction:column;align-items:flex-start;gap:24px}
  .rev-hrow{flex-direction:column;align-items:flex-start;gap:14px}
  .rev-lead{padding-bottom:0}
}
@media (max-width:720px){
  .hero{padding-top:104px;min-height:0}
  .hero-title{font-size:clamp(2.6rem,9.6vw,3.25rem)}
  .hero-sub{margin-top:20px;font-size:1.0625rem}
  .hero-ctas{flex-direction:column;align-items:stretch;width:100%;max-width:340px;margin-top:26px}
  .hero-ctas .btn{justify-content:space-between}
  .hero-proof{flex-direction:column;gap:14px;margin-top:20px}
  .hero-note{display:block;max-width:320px;text-align:center;text-wrap:balance;line-height:1.5}
  .hero-note .i{display:inline-block;vertical-align:-2px;margin-right:6px}
  .hero-globe{min-height:calc(min(168vw,680px) * .44 - 18px);margin-top:0}
  .hero .globe{--gw:min(168vw,680px)}
  .cta-warm{padding:44px 20px 150px}
  .globe-cta{--gw:min(150vw,640px);bottom:calc(200px - var(--gw) * .44)}
  .rev-head{flex-direction:column;align-items:flex-start;gap:14px}
  .rev-card{padding:24px 22px 22px}
  .wm-cs{font-size:19px}
  .cl-pn img{height:25px}
  .review-quote{font-size:16px}
  .demo{margin:6px 6px 0;padding:48px 12px 12px;min-height:0}
  .demo-top{left:12px;right:10px;top:10px}
  .dm-org{display:none}
  .svc-body{padding:22px 22px 0}
  .svc-foot{padding:18px 22px 22px}
  .fl{min-height:366px}
  .dm-seg span+span{display:none}
  .fl-form .fl-row{flex-wrap:wrap}
  .fl-form .fl-field:nth-of-type(1){flex:1 1 40%}
  .fl-form .fl-field:nth-of-type(2){flex:1 1 100%;order:3}
  .fl-form .fl-field:nth-of-type(3){flex:1 1 30%}
  .fl-hub{left:16%;top:auto;bottom:62px;transform:translate(-50%,0)}
  .fl-out{left:35%!important;right:10px!important;padding:8px 10px 8px 8px;gap:8px}
  .fl-out[data-node="hs"]{top:auto;bottom:112px}
  .fl-out[data-node="sl"]{top:auto;bottom:56px}
  .fl-done{left:10px;bottom:10px}
  .fl-out-ico{width:28px;height:28px}
  .ag-chip{margin-left:0}
  .sy-route{flex-wrap:nowrap;gap:6px;padding:8px}
  .sy-sys{font-size:11.5px;gap:6px}
  .sy-way{display:none}
  .sy-row.r4{row-gap:6px}
  .sy-merge .rm .sy-what{display:none}
  .sy-merge .rm .sy-badge{margin-left:auto}
  .sy-row.r4 .sy-slack{margin-left:33px}
  .sy-rec{width:calc(50% - 12px);padding:5px 7px}
  .sy-rec.ra{left:8px}.sy-rec.rb{right:8px}
  .sy-rec .av{display:none}
  .au-band{border-radius:28px;padding:40px 16px 22px;row-gap:26px}
  .au-ctas .btn{width:100%;justify-content:space-between}
  .au-ch{padding:12px 14px 11px}
  .au-row,.au-total{padding-left:14px;padding-right:14px}
  .au-road .rd-fan{--dw:330;--dh:590}
  .au-road .rd-fit{height:590px}
  .au-road .pg-cover{--x0:0px;--y0:118px;--r0:-1.4deg;--xm:-96px;--ym:84px;--rm:-9deg;--x1:6px;--y1:40px;--r1:-2.6deg}
  .au-road .pg-list{--x0:4px;--y0:120px;--r0:1.2deg;--x1:-5px;--y1:0px;--r1:-1.3deg}
  .au-road .pg-sol{--x0:-3px;--y0:121px;--r0:-.6deg;--x1:9px;--y1:60px;--r1:1.6deg}
  .au-road .pg-table{--x0:2px;--y0:119px;--r0:.7deg;--x1:0px;--y1:118px;--r1:.3deg}
  .au-road .pg-tb{font-size:11px}
  .rd-cap{margin-top:12px}
  .tools-deck{font-size:15px}
  .pr{--pt:1.625rem}
  .pr-rail{left:14px}
  .pr-text{padding-left:52px}
  .pr-cta{padding-left:0}
  .pr-cta .btn{width:100%;justify-content:space-between}
  .pr-dot{left:-52px;width:30px;height:30px;top:calc((var(--pt) * 1.1 - 30px) / 2);font-size:12.5px}
  .pr-fare.big b{font-size:2rem}
  .pr-d{font-size:16px}
  .cal-row{grid-template-columns:34px repeat(5,minmax(0,1fr))}
  .cal-row .c{height:38px}
  .cal-card{width:92%;margin-top:-26px}
  .slot-fill span,.slot-fill b{display:none}
  .slot-ic{display:block}
  .slot-fill{align-items:center}
  .sc-win .dm-dots,.sc-win .dm-meta,.demo .dm-meta{display:none}
  .bd-acct-l{display:none}
  .bd-acct-s{display:inline}
  .bd-prop{flex-wrap:wrap;row-gap:8px}
  .bd-pc{margin-left:46px;flex-direction:row;align-items:baseline;gap:8px}
  .bd-canvas{height:250px}
  .bd-in{padding:6px 9px 6px 6px;font-size:11.5px;gap:7px}
  .bd-ico{width:26px;height:26px}
  .bd-node[data-node="t"]{left:50%;top:15%}
  .bd-node[data-node="ai"]{left:50%;top:44%}
  .bd-node[data-node="h"]{left:27%;top:82%}
  .bd-node[data-node="s"]{left:73%;top:82%}
  .bd-msg{width:94%}
  .bd-pl{display:none}
  .ho-list{padding:4px 12px}
  .ho-own{flex-wrap:wrap;padding:12px}
  .cs{padding:8px;border-radius:24px}
  .cs-body{padding:14px 12px 12px}
  .cs-route{padding-top:30px;flex-wrap:nowrap;justify-content:space-between;gap:8px}
  .cs-app{flex-direction:column;gap:5px;padding:8px 10px;text-align:center;min-width:76px}
  .cs-app>span:last-child span{display:none}
  .cs-ico{width:28px;height:28px}
  .cs-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .cs-col{padding:7px;min-height:182px}
  .cs-deal{padding:6px 8px}
  .cs-bh .cs-toast{display:none}
  .wl-band{padding:56px 0 44px}
  .wl-for{font-size:15px;gap:10px}
  .wl-h{font-size:clamp(2.125rem,9.4vw,2.75rem)}
  .wl-top .btn{width:100%;justify-content:space-between}
  .wl-facts{grid-template-columns:1fr}
  .wl-fact,.wl-fact+.wl-fact,.wl-fact:nth-child(3){flex-direction:row;align-items:center;gap:14px;padding:16px 0;border-left:0}
  .wl-fact+.wl-fact{border-top:1px solid rgba(140,109,44,.13)}
  .wl-fact p{font-size:15.5px}
  .wl-ico{width:40px;height:40px}
}
@media (max-width:420px){
  .trust{padding-right:12px}
  .trust-t{font-size:13.5px}
}
/* short laptop screens: keep the client strip on the first screen */
@media (min-width:941px) and (max-height:860px){
  .hero{padding-top:clamp(90px,12vh,110px);min-height:100vh;min-height:100svh}
  .hero-title{font-size:min(4.5rem,8vh)}
  .hero-sub{margin-top:14px}
  .hero-ctas{margin-top:20px}
  .hero-proof{margin-top:12px}
  .hero-globe{min-height:190px}
}

/* Ben, 25 Oct: the client logo strip runs the full width of the screen, edge to edge */
.proof-rail{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.proof-rail .mq-view{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.proof-rail::before,.proof-rail::after{background:linear-gradient(90deg,rgba(140,109,44,0),rgba(140,109,44,.26) 8%,rgba(140,109,44,.26) 92%,rgba(140,109,44,0))}

/* Ben, 25 Oct (round 5): the tools strip has no heading and sits in the hero's own warm light. The hero now fades
   into a warm sand tone instead of white, the strip starts on that same tone, and it eases back to the page cream
   below the logos, so the globe melts into the strip with no white gap. */
.hero::after{height:64px;background:linear-gradient(180deg,rgba(248,239,219,0),#f8efdb 96%)}
.tools{padding:6px 0 clamp(64px,6.4vw,96px);background:linear-gradient(180deg,#f8efdb 0%,#f8f0dd 22%,#f9f3e4 42%,#fbf7ee 62%,#fcfaf4 80%,#fdfbf7 92%,#fdfcf8 100%)}
.tools .mq-tools{margin-top:0}
.tools+.reviews{padding-top:clamp(22px,2.4vw,36px)}

/* Ben, 25 Oct (round 5): "More we build", so the four cards don't read as the only things we make. An index
   list with hairlines rather than more boxes: icon, name, the service page's own one-liner, an arrow. */
.more{margin-top:20px;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,2fr);gap:20px 44px;padding:clamp(26px,2.6vw,36px) clamp(24px,2.6vw,36px);border-radius:28px;background:rgba(255,255,255,.55);border:1px solid #fff;box-shadow:var(--sh-sm,0 10px 30px -22px rgba(60,44,12,.35))}
.more-h{font-size:clamp(1.375rem,1.1rem + .8vw,1.75rem);line-height:1.15;letter-spacing:-.035em;font-weight:500;color:var(--ink)}
.more-p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:300px}
.more-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.more-list li{border-top:1px solid var(--line)}
.more-list li:nth-child(-n+2){border-top:0}
.more-list a{display:flex;align-items:center;gap:14px;min-height:76px;padding:12px 10px 12px 4px;border-radius:14px;color:inherit;text-decoration:none;transition:background-color .3s var(--ease)}
.more-list a:hover{background:rgba(246,239,223,.6)}
.more-list a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.more-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(160deg,#fbf5e6,#f3e6c6);box-shadow:inset 0 0 0 1px rgba(200,164,85,.35);color:var(--gold-deep);transition:transform .45s var(--ease)}
.more-ic .i{width:19px;height:19px}
.more-list a:hover .more-ic{transform:translateY(-2px) rotate(-4deg)}
.more-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.more-t b{font-size:15.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.more-t span{font-size:14px;color:var(--ink-3)}
.more-arr{flex:none;width:16px;height:16px;color:var(--ink-3);transition:transform .4s var(--ease),color .3s}
.more-list a:hover .more-arr{transform:translateX(3px);color:var(--ink)}
@media (max-width:900px){.more{grid-template-columns:1fr}.more-p{max-width:none}}
@media (max-width:620px){.more-list{grid-template-columns:1fr}.more-list li:nth-child(2){border-top:1px solid var(--line)}.more{padding:22px 18px}}

/* Ben, 26 Oct: the strip's heading is back. It sits inside the warm band right under the globe (no white, no gap),
   a real heading at a calmer size so it reads as part of the hero's fade rather than a new section */
.tools{padding-top:clamp(14px,1.6vw,22px)}
.tools-h2{max-width:min(92vw,760px);margin:0 auto clamp(16px,1.8vw,24px);padding:0 16px;text-align:center;font-size:clamp(1.25rem,1rem + .9vw,1.75rem);line-height:1.2;letter-spacing:-.03em;font-weight:500;color:var(--ink);text-wrap:balance}
.tools-h2 span{color:#86682a}
.tools-h2 span{display:inline-block}
/* QA, 26 Oct: on a phone the heading split "200+" from "tools". There the second half takes its own line, so it always reads "We work with 200+ tools," then "all of the big ones." */
@media (max-width:620px){.tools-h2 span{display:block}}

/* Ben, 26 Oct: the Hunt & Hawk sync was two-way, so the case study's wires carry an arrow at each end */
.cs-route .wires .w-base{marker-start:url(#m-arr-s)}

/* Ben, 26 Oct (second pass): the client logos come first, straight under the globe, with a heading in the tools
   heading's style. The clients band now does the tools band's old job: it starts on the hero's warm sand tone and
   eases back to the page cream. The tools strip moves under the reviews, on the plain page cream. */
.clients{position:relative;padding:clamp(14px,1.6vw,22px) 0 clamp(64px,6.4vw,96px);background:linear-gradient(180deg,#f8efdb 0%,#f8f0dd 22%,#f9f3e4 42%,#fbf7ee 62%,#fcfaf4 80%,#fdfbf7 92%,#fdfcf8 100%)}
.clients .cl{height:84px;padding:0 clamp(26px,3.2vw,44px)}
.clients .cl-cct img{height:54px}
.clients .mq-view{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.clients+.reviews{padding-top:clamp(22px,2.4vw,36px)}
.rev-hrow{justify-content:flex-start}
.reviews+.tools{padding:0 0 clamp(8px,1vw,16px);background:none}
@media (max-width:720px){.clients .cl{height:64px;padding:0 22px}.clients .cl-cct img{height:46px}}