/* Layout: a scroll journey past floating iMacs (one per promise) in a dark starfield, then calm editorial bands.
   One deliberate dark look, so every colour is set explicitly. */
:root{
  --bg:#08090D; --raise:#12141B; --ink:#F1F2EF; --mute:#8A8D96; --dim:#7C7F88; --line:rgba(241,242,239,.11);
  --acc:#6470FF;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.8,.2,1);
  --w:600px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1360px;margin-inline:auto;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
@media (max-width:640px){.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
.label{font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.two{font-weight:400;letter-spacing:-.045em;line-height:.98;margin:0;text-wrap:balance}
.two span{display:block;color:var(--dim)}
.arrow{width:14px;height:14px;flex:none}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}

/* ---------- header, after Brickly: status strip + tile, pill nav, log in, quote ---------- */
.top{position:fixed;z-index:40;left:0;right:0;top:env(safe-area-inset-top,0px)}
.strip{height:40px;overflow:hidden;transition:height .45s var(--ease),opacity .3s}
.strip .wrap{height:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.strip-l,.strip-r{display:flex;align-items:center;gap:12px;min-width:0}
.strip b{font-weight:500;color:var(--ink)}
.dia{width:6px;height:6px;background:var(--acc);transform:rotate(45deg);flex:none}
.sl{color:var(--dim)}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7CE3A1;margin-right:9px;vertical-align:.08em;animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(124,227,161,.45)}70%{box-shadow:0 0 0 7px rgba(124,227,161,0)}100%{box-shadow:0 0 0 0 rgba(124,227,161,0)}}
.bar{transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.bar .wrap{position:relative;display:flex;align-items:center;gap:8px;padding-block:10px}
.top.scrolled .strip{height:0;opacity:0}
.top.scrolled .bar{background:rgba(8,9,13,.92);border-bottom-color:var(--line)}
.tile{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:rgba(20,22,30,.72);border:1px solid rgba(255,255,255,.13);transition:background .3s,border-color .3s;flex:none}
.tile svg{width:27px;height:27px;color:var(--ink)}
.tile:hover{border-color:rgba(255,255,255,.3)}
.pill{position:absolute;left:50%;translate:-50% 0;display:flex;gap:2px;padding:4px;border-radius:99px;background:rgba(20,22,30,.72);border:1px solid rgba(255,255,255,.12);font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.pill a{padding:13px 17px;border-radius:99px;color:rgba(241,242,239,.72);white-space:nowrap;transition:background .25s,color .25s}
.pill a:hover{color:#fff;background:rgba(255,255,255,.07)}
.pill a.is-on{background:var(--ink);color:var(--bg)}
.acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.login,.cta{display:flex;align-items:center;gap:10px;height:50px;padding:0 20px;border-radius:99px;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background .3s,border-color .3s,color .3s}
.login{color:rgba(241,242,239,.86);background:rgba(20,22,30,.72);border:1px solid rgba(255,255,255,.16)}
.login svg{width:13px;height:13px}
.login:hover{border-color:rgba(255,255,255,.4);color:#fff}
.cta{background:var(--ink);color:var(--bg)}
.cta svg{width:11px;height:11px;transition:transform .3s var(--ease)}
.cta:hover{background:var(--acc);color:#fff}
.cta:hover svg{transform:translate(2px,-2px)}
.burger{display:none;width:50px;height:50px;border-radius:50%;background:var(--ink);color:var(--bg);align-content:center;gap:6px;flex:none}
.burger i{display:block;width:18px;height:1.5px;background:currentColor;margin:0 auto;transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.menu{position:fixed;z-index:45;right:max(16px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 112px);width:min(330px,calc(100vw - 32px));background:#14161D;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 24px 60px -18px rgba(0,0,0,.7);opacity:0;transform:translateY(-8px) scale(.98);transform-origin:100% 0;transition:opacity .25s var(--ease),transform .35s var(--ease)}
.top.scrolled ~ .menu{top:calc(env(safe-area-inset-top,0px) + 76px)}
.menu.open{opacity:1;transform:none}
.menu nav{display:flex;flex-direction:column}
.menu nav a{display:flex;align-items:baseline;gap:14px;padding:12px;border-radius:10px;font:400 26px/1.05 var(--sans);letter-spacing:-.03em;color:rgba(241,242,239,.86)}
.menu nav a span{font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--acc)}
.menu nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.menu nav a.is-on::after{content:"";margin-left:auto;align-self:center;width:6px;height:6px;background:var(--acc);transform:rotate(45deg)}
.menu-login{display:flex;align-items:center;gap:12px;margin-top:6px;padding:14px 12px;border-top:1px solid var(--line);font:400 20px/1 var(--sans);color:rgba(241,242,239,.86)}
.menu-login svg{width:14px;height:14px;color:var(--acc)}
.menu-login small{margin-left:auto;font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.menu-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 12px 6px;border-top:1px solid var(--line);font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.menu-foot a{padding:10px 14px;border-radius:99px;background:var(--ink);color:var(--bg)}
@media (max-width:1100px){.pill{display:none}.burger{display:grid}}
@media (max-width:820px){
  .hide-s{display:none!important}
  .login{display:none}
  .cta{height:46px;padding:0 16px;font-size:10.5px}
  .tile,.burger{width:46px;height:46px}
  .menu{top:calc(env(safe-area-inset-top,0px) + 104px)}
}

/* ---------- journey: iMacs in a starfield ---------- */
.journey{position:relative;height:560vh}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;touch-action:pan-y;cursor:grab;perspective:1100px;perspective-origin:50% 50%;background:radial-gradient(120% 90% at 70% 40%,#11131C 0%,var(--bg) 60%)}
.stage:active{cursor:grabbing}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.slot{position:absolute;left:0;top:0;transform-style:preserve-3d}
.imac{position:absolute;left:0;top:0;width:var(--w);transform:translate(-50%,-56%);transform-origin:50% 50%}
.imac::after{content:"";position:absolute;left:14%;right:14%;bottom:calc(var(--w) * -.035);height:calc(var(--w) * .07);background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0));z-index:-1}
.panel{display:flex;flex-direction:column;border-radius:calc(var(--w) * .028);overflow:hidden;background:var(--chin);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.face{padding:calc(var(--w) * .022);background:#EDEEF0;border-radius:calc(var(--w) * .028) calc(var(--w) * .028) 0 0}
.screen{position:relative;aspect-ratio:16/9;border-radius:calc(var(--w) * .006);overflow:hidden;container-type:inline-size;background:#0B0D16}
.chin{height:calc(var(--w) * .11);background:linear-gradient(180deg,var(--chin) 0%,var(--chin-d) 100%)}
.neck{width:27%;height:calc(var(--w) * .19);margin:0 auto;background:linear-gradient(90deg,var(--chin-d),var(--chin) 45%,var(--chin-d));clip-path:polygon(9% 0,91% 0,100% 100%,0 100%)}
.base{width:38%;height:calc(var(--w) * .018);margin:0 auto;border-radius:2px 2px 5px 5px;background:linear-gradient(180deg,var(--chin) 0%,var(--chin-d) 100%)}
.cap{position:absolute;left:0;right:0;top:calc(100% + 18px);margin:0;text-align:center;font-size:13px;line-height:1.35;transition:opacity .4s}
.cap b{display:block;font-weight:500}
.cap i{font-style:normal;color:var(--mute);font-size:12px}
.imac.live .cap{opacity:0}

/* screen content, sized in container units so it scales with the iMac */
.scr{position:absolute;inset:0;font-family:var(--sans);font-size:2.6cqw;line-height:1.3}
.s-boot{background:#0B0D16;color:#EDEFF6;display:grid;place-items:center;align-content:center;gap:2.6cqw}
.s-boot svg{width:15cqw;height:15cqw;color:#EDEFF6}
.s-boot b{font:600 4.6cqw/1 var(--sans);letter-spacing:-.04em}
.s-boot b em{font-style:normal;color:var(--acc)}
.s-boot .load{width:24cqw;height:.55cqw;border-radius:1cqw;background:rgba(255,255,255,.14);overflow:hidden}
.s-boot .load u{display:block;height:100%;width:100%;background:#EDEFF6;transform-origin:left;transform:scaleX(.3)}
.live .s-boot .load u{animation:load 2.6s var(--ease) infinite}
@keyframes load{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.s-build{background:#F6F7F9}
.s-build i{position:absolute;display:block;border-radius:.8cqw;background:#D9DCE3}
.s-build i.acc{background:#A58BF5}
.s-build i.dark{background:#1C1E26}
.live .s-build i{animation:pop .55s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.s-quote{background:#FBF6F0;display:grid;place-items:center;color:#1C1E26}
.s-quote .card{width:58cqw;background:#fff;border-radius:2cqw;padding:3.2cqw 3.6cqw;box-shadow:0 1.5cqw 4cqw rgba(60,40,20,.12)}
.s-quote h4{margin:0 0 .4cqw;font:700 3.6cqw/1 var(--sans);letter-spacing:-.03em}
.s-quote small{display:block;color:#8A8278;font-size:2.1cqw;margin-bottom:2.2cqw}
.s-quote .r{display:flex;align-items:center;gap:1.6cqw;padding:1.1cqw 0;border-top:1px solid #F0E9E1;font-size:2.4cqw}
.s-quote .r svg{width:2.8cqw;height:2.8cqw;color:#F0A25A;flex:none}
.s-quote .tot{margin-top:1.4cqw;padding:1.8cqw 2cqw;border-radius:1.4cqw;background:#FFF1E3;font:600 2.5cqw/1.25 var(--sans);color:#8A4B12}
.live .s-quote .r,.live .s-quote .tot{animation:pop .5s var(--ease) both}
.s-chat{background:#F2F6F4;display:flex;flex-direction:column;gap:1.6cqw;padding:3cqw 6cqw;color:#1C1E26}
.s-chat .hd{display:flex;align-items:center;gap:1.4cqw;font:600 2.6cqw/1 var(--sans);padding-bottom:1.6cqw;border-bottom:1px solid #DDE7E1}
.s-chat .hd i{width:1.4cqw;height:1.4cqw;border-radius:50%;background:#4CBF8A}
.s-chat p{margin:0;max-width:62%;padding:1.5cqw 2.2cqw;border-radius:2.2cqw;font-size:2.4cqw;background:#fff}
.s-chat p.me{align-self:flex-end;background:#4CBF8A;color:#fff}
.live .s-chat p{animation:pop .5s var(--ease) both}
.s-keys{background:#F4F5F7;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5cqw;padding:0 9cqw;color:#1C1E26}
.s-keys svg{width:18cqw;height:18cqw;color:#1C1E26}
.s-keys h4{margin:0 0 2cqw;font:700 4.2cqw/1.05 var(--sans);letter-spacing:-.04em}
.s-keys .r{display:flex;justify-content:space-between;gap:2cqw;padding:1.1cqw 0;border-top:1px solid #E1E3E8;font-size:2.3cqw}
.s-keys .r span{color:#7A7E88}
.live .s-keys h4,.live .s-keys .r{animation:pop .5s var(--ease) both}

.say{position:absolute;left:0;right:0;top:50%;translate:0 -50%;pointer-events:none;z-index:2}
.say-in{position:relative;min-height:330px}
.say-k{position:absolute;inset:0 auto auto 0;max-width:600px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.say-k.on{opacity:1;transform:none;pointer-events:auto}
.say-k .label{margin:0 0 18px}
.say-k h1{font-size:clamp(46px,6.2vw,90px);margin:0 0 22px}
.say-k h2{font:400 clamp(42px,5.4vw,78px)/1 var(--sans);letter-spacing:-.045em;margin:0 0 14px}
.say-k p{margin:0;color:var(--mute);max-width:40ch;font-size:16.5px}
.say-k p.cat{color:var(--ink);font-size:15px;margin-bottom:12px}
.say-k .go{display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding-bottom:8px;border-bottom:1px solid var(--line);font-weight:500;font-size:15px}
.hud{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:2}
.hud .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12.5px;color:var(--mute)}
.hud .count{font:500 12px/1 var(--mono);letter-spacing:.08em;display:flex;align-items:center;gap:12px}
.hud .count i{display:block;width:44px;height:1px;background:var(--line);position:relative;overflow:hidden}
.hud .count i b{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(.04)}
.side{position:absolute;z-index:2;right:max(22px,env(safe-area-inset-right,0px));top:50%;translate:0 -50%;margin:0;writing-mode:vertical-rl;font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
@media (max-width:820px){
  .say{top:auto;bottom:calc(64px + env(safe-area-inset-bottom,0px));translate:none}
  .say-in{min-height:250px}
  .say-k h1{font-size:clamp(40px,11vw,56px);margin-bottom:14px}
  .say-k h2{font-size:clamp(36px,10vw,50px)}
  .say-k p{font-size:15.5px}
  .say-k .go{margin-top:16px}
  .side,.cap{display:none}
}

/* ---------- offer ---------- */
.offer{padding-block:clamp(100px,13vw,180px) clamp(70px,9vw,120px)}
.offer-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:start}
.offer-top h2,.sec-head h2{font-size:clamp(42px,5.4vw,80px)}
.offer-top p{margin:0 0 26px;color:var(--mute);font-size:17px;max-width:44ch}
.btns{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.btn-w{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--bg);font:600 14.5px/1 var(--sans)}
.btn-w:hover{background:var(--acc);color:#fff}
.btn-t{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:14.5px;color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(60px,8vw,110px);border-top:1px solid var(--line)}
.fact{padding:28px 24px 0 0;display:grid;gap:10px;align-content:start}
.fact + .fact{padding-left:24px;border-left:1px solid var(--line)}
.fact h3{margin:0;font:500 20px/1.2 var(--sans);letter-spacing:-.02em}
.fact p{margin:0;color:var(--mute);font-size:15px}
@media (max-width:820px){
  .offer-top{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fact,.fact + .fact{padding:24px 14px 24px 0;border-left:0;border-bottom:1px solid var(--line)}
  .fact:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}
}

/* ---------- services checklist ---------- */
.services{padding-block:clamp(60px,8vw,110px) clamp(90px,11vw,150px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end;margin:16px 0 clamp(40px,5vw,64px)}
.sec-head p{margin:0;color:var(--mute);font-size:16.5px;max-width:42ch}
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.check{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;padding:26px 24px 26px 0;border-bottom:1px solid var(--line)}
.check:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--line)}
.box{width:26px;height:26px;border-radius:7px;border:1.5px solid rgba(100,112,255,.55);display:grid;place-items:center;margin-top:2px;transition:background .4s var(--ease),border-color .4s}
.box svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s var(--ease) .15s}
.check.on .box{background:var(--acc);border-color:var(--acc)}
.check.on .box svg{stroke-dashoffset:0}
.check h3{margin:0 0 6px;font:500 19px/1.25 var(--sans);letter-spacing:-.02em}
.check p{margin:0;color:var(--mute);font-size:15px}
@media (max-width:980px){.checks{grid-template-columns:repeat(2,minmax(0,1fr))}.check:not(:nth-child(3n+1)){padding-left:0;border-left:0}.check:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}}
@media (max-width:640px){.sec-head{grid-template-columns:minmax(0,1fr)}.checks{grid-template-columns:minmax(0,1fr)}.check:nth-child(even){padding-left:0;border-left:0}.check{padding:20px 0}}

/* ---------- who it's for ---------- */
.who{padding-block:clamp(60px,8vw,110px) clamp(100px,12vw,170px)}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:56px minmax(0,1.4fr) minmax(0,1fr) 120px 24px;align-items:center;gap:16px;padding-block:22px;border-bottom:1px solid var(--line);transition:background .3s}
.row:hover{background:rgba(241,242,239,.025)}
.row .ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center}
.row h3{margin:0;font:400 clamp(22px,2.4vw,32px)/1.1 var(--sans);letter-spacing:-.035em}
.row .cat{color:var(--mute);font-size:14px}
.row .st{display:flex;align-items:center;gap:8px;font-size:13px}
.row .st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
.row .ar{color:var(--mute);transition:transform .3s var(--ease),color .3s}
.row:hover .ar{transform:translate(3px,-3px);color:var(--ink)}
@media (max-width:820px){
  .row{grid-template-columns:48px minmax(0,1fr) 20px;gap:4px 14px}
  .row .st{display:none}
  .row .ic{grid-row:span 2}
  .row .cat{grid-column:2}
  .row .ar{grid-row:1;grid-column:3}
}

/* ---------- approach ---------- */
.approach{padding-block:clamp(90px,11vw,160px)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.step{padding:26px 26px 10px 0;display:grid;gap:14px}
.step + .step{padding-left:26px;border-left:1px solid var(--line)}
.step-h{display:flex;justify-content:space-between;align-items:baseline}
.step-h b{font:400 34px/1 var(--sans);letter-spacing:-.04em}
.step svg{width:100%;height:110px;color:var(--mute)}
.step h3{margin:0;font:500 19px/1.25 var(--sans)}
.step p{margin:0;color:var(--mute);font-size:15px;max-width:34ch}
@media (max-width:820px){.steps{grid-template-columns:minmax(0,1fr)}.step,.step + .step{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* ---------- contact ---------- */
.contact{padding-block:clamp(90px,11vw,150px) 40px;border-top:1px solid var(--line);background:radial-gradient(80% 70% at 85% 10%,#151829 0%,var(--bg) 60%)}
.ct-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:end;margin:16px 0 clamp(48px,6vw,80px)}
.ct-top h2{font-size:clamp(48px,7vw,108px)}
.ct-top p{margin:0;color:var(--mute);font-size:16px;max-width:34ch}
.ct-top p b{display:block;color:var(--ink);font-weight:500;margin-top:10px}
.mail{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mail span:first-child{font:400 clamp(26px,3.6vw,52px)/1.1 var(--sans);letter-spacing:-.035em;overflow-wrap:anywhere}
.mail .round{width:64px;height:64px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:background .3s,color .3s}
.mail:hover .round{background:var(--ink);color:var(--bg)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;padding-block:44px calc(40px + env(safe-area-inset-bottom,0px));color:var(--mute);font-size:13.5px}
@media (max-width:820px){.ct-top,.sec-head{grid-template-columns:minmax(0,1fr)}.mail .round{width:52px;height:52px}}

@media (prefers-reduced-motion:reduce){
  .say-k,.box svg,.box,.menu{transition:none}
  .live .s-boot .load u,.live .s-build i,.live .s-quote .r,.live .s-quote .tot,.live .s-chat p,.live .s-keys h4,.live .s-keys .r,.live-dot{animation:none}
}

html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
/* ---------- multi-page additions ---------- */
.menu{left:50%;right:auto;translate:-50% 0;width:min(420px,calc(100vw - 32px));transform-origin:50% 0}
.menu nav a{justify-content:center;text-align:center}
.menu nav a span{display:none}
.menu nav a.is-on{color:#fff;background:rgba(255,255,255,.06)}
.menu nav a.is-on::after{display:none}
.menu-login{justify-content:center}
.menu-login small{margin-left:8px}
.menu-foot{justify-content:center;gap:18px}
.menu-foot a{padding:10px 16px}

.phero{position:relative;padding-block:calc(160px + env(safe-area-inset-top,0px)) clamp(40px,6vw,80px);background:radial-gradient(70% 60% at 80% 0%,#151829 0%,var(--bg) 70%)}
.phero h1{font-size:clamp(48px,7.2vw,112px);margin:18px 0 0}
.phero .lead{margin:28px 0 0;max-width:48ch;color:var(--mute);font-size:clamp(17px,1.4vw,19px)}
.phero .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:28px}
.sec{padding-block:clamp(60px,8vw,110px)}

.explore{padding-block:clamp(40px,6vw,80px) clamp(90px,11vw,150px)}
.ex-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px;margin-top:clamp(30px,4vw,48px)}
.ex{position:relative;display:flex;flex-direction:column;min-height:340px;padding:28px;border-radius:20px;background:var(--raise);border:1px solid var(--line);overflow:hidden;transition:border-color .3s,transform .5s var(--ease)}
.ex:hover{border-color:rgba(255,255,255,.26);transform:translateY(-4px)}
.ex h3{margin:0 0 10px;font:400 clamp(28px,2.6vw,38px)/1.02 var(--sans);letter-spacing:-.04em;position:relative;z-index:1}
.ex p{margin:0;color:var(--mute);font-size:15px;max-width:30ch;position:relative;z-index:1}
.ex .go{margin-top:auto;display:flex;align-items:center;gap:10px;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;position:relative;z-index:1}
.ex .shot{position:absolute;right:-10%;bottom:-16%;width:82%;border-radius:10px;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px rgba(0,0,0,.5);transform:rotate(-5deg);transition:transform .7s var(--ease)}
.ex:hover .shot{transform:rotate(-3deg) translateY(-8px)}
.ex.bo{background:#160F0D}
.ex.bo p{max-width:24ch}
.ex .ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px;font-size:14px;position:relative;z-index:1}
.ex .ticks li{display:flex;align-items:center;gap:10px}
.ex .ticks svg{width:15px;height:15px;color:var(--acc)}
.cband{padding-block:clamp(80px,10vw,140px);border-top:1px solid var(--line);background:radial-gradient(80% 70% at 85% 10%,#151829 0%,var(--bg) 60%)}
.cband .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:32px}
.cband h2{font-size:clamp(48px,7vw,108px)}

.ffoot{border-top:1px solid var(--line);padding-block:48px calc(40px + env(safe-area-inset-bottom,0px))}
.ffoot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.ffoot .mark{display:flex;align-items:center;gap:10px;font:600 19px/1 var(--sans);letter-spacing:-.03em;margin-bottom:12px}
.ffoot .mark svg{width:26px;height:26px}
.ffoot p,.ffoot a{color:var(--mute);font-size:14px;margin:0}
.ffoot nav{display:grid;gap:8px;align-content:start}
.ffoot a:hover{color:var(--ink)}
.ffoot .small{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;padding-top:28px;border-top:1px solid var(--line);font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
@media (max-width:820px){.ex-grid{grid-template-columns:minmax(0,1fr)}.ex{min-height:300px}.ffoot .wrap{grid-template-columns:1fr 1fr}.ffoot .wrap > div:first-child{grid-column:1/-1}}

/* back office */
.bo-hero-shot{margin-top:clamp(40px,6vw,72px)}
.bo-hero-shot .frame{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 50px 120px rgba(0,0,0,.6);background:#0B0A09}
.bo-hero-shot .frame-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-bottom:1px solid var(--line);font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--mute)}
.bo-hero-shot .frame-bar i{width:9px;height:9px;border-radius:50%;background:#2A2C34}
.bo-hero-shot .frame-bar b{font-weight:500;margin-left:10px}
.bo-hero-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.note{font-size:13px;color:var(--dim);margin-top:14px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:26px 22px 26px 0}
.stat + .stat{padding-left:22px;border-left:1px solid var(--line)}
.stat b{display:block;font:400 clamp(30px,3vw,42px)/1 var(--sans);letter-spacing:-.04em;margin-bottom:8px}
.stat span{color:var(--mute);font-size:14.5px}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr}.stat,.stat + .stat{padding:20px 12px 20px 0;border-left:0}.stat:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}

.tour{position:relative;height:calc(var(--n) * 85vh)}
.tour-stick{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center;gap:clamp(24px,4vw,64px);padding-top:70px}
.tour-list{list-style:none;margin:0;padding:0;display:grid}
.tour-list li{padding:15px 0 15px 20px;border-left:2px solid var(--line);color:var(--dim);cursor:pointer;transition:color .4s,border-color .4s}
.tour-list li h3{margin:0;font:400 clamp(22px,2vw,28px)/1.1 var(--sans);letter-spacing:-.03em}
.tour-list li p{margin:0;font-size:15px;color:var(--mute);max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s,margin .4s}
.tour-list li.on{color:var(--ink);border-color:var(--acc)}
.tour-list li.on p{max-height:140px;opacity:1;margin-top:8px}
.tour-list li img{display:none}
.tour-mac{--w:min(780px,54vw)}
.tour-mac .imac{position:relative;left:auto;top:auto;transform:none;margin-inline:auto}
.tour-mac .imac::after{display:none}
.tour-mac .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity .6s var(--ease)}
.tour-mac .shot.on{opacity:1}
@media (max-width:820px){
  .tour{height:auto}
  .tour-stick{position:static;height:auto;grid-template-columns:minmax(0,1fr);padding-top:0}
  .tour-mac{display:none}
  .tour-list li{color:var(--ink);border-color:var(--line);padding:22px 0 22px 18px}
  .tour-list li p{max-height:none;opacity:1;margin-top:8px}
  .tour-list li img{display:block;margin-top:16px;border-radius:10px;border:1px solid var(--line);width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
}

.phones-sec{padding-block:clamp(70px,9vw,130px);background:radial-gradient(60% 60% at 50% 60%,#1A1210 0%,var(--bg) 70%)}
.phones{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,3vw,44px);margin-top:clamp(40px,5vw,64px)}
.phone{margin:0;width:min(270px,28vw);flex:none}
.phone .body{padding:9px;border-radius:44px;background:#1A1B21;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px rgba(0,0,0,.55)}
.phone img{width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:36px}
.phone:nth-child(2){transform:translateY(-36px)}
.phone figcaption{margin-top:18px;text-align:center;font-size:14px}
.phone figcaption b{display:block;font-weight:500}
.phone figcaption span{color:var(--mute);font-size:13px}
@media (max-width:820px){
  .phones{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 40px;margin-inline:-4px}
  .phone{width:62vw;scroll-snap-align:center}
  .phone:nth-child(2){transform:none}
}

.secure{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.secure > div{padding:26px;border-radius:18px;background:var(--raise);border:1px solid var(--line)}
.secure svg{width:26px;height:26px;color:var(--acc);margin-bottom:18px}
.secure h3{margin:0 0 8px;font:500 19px/1.25 var(--sans)}
.secure p{margin:0;color:var(--mute);font-size:15px}
@media (max-width:820px){.secure{grid-template-columns:minmax(0,1fr)}}

/* how it works: FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font:400 clamp(20px,2vw,26px)/1.2 var(--sans);letter-spacing:-.03em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;font-style:normal;color:var(--mute);transition:transform .3s var(--ease)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details p{margin:0 0 24px;color:var(--mute);max-width:62ch}

/* contact */
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,6vw,90px);align-items:start}
.cinfo{display:grid;gap:0;border-top:1px solid var(--line)}
.cinfo div{padding:22px 0;border-bottom:1px solid var(--line)}
.cinfo .label{margin:0 0 8px}
.cinfo b{font:400 clamp(22px,2.4vw,32px)/1.15 var(--sans);letter-spacing:-.03em;overflow-wrap:anywhere}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:grid;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.form .wide{grid-column:1/-1}
.form input,.form textarea{width:100%;font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-transform:none;letter-spacing:0}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--acc)}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{padding:11px 16px;border-radius:99px;border:1px solid var(--line);font:500 14px/1 var(--sans);color:var(--mute);text-transform:none;letter-spacing:0;transition:background .25s,color .25s,border-color .25s}
.pick[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.form .send{justify-self:start;border:0;cursor:pointer}
.sent{grid-column:1/-1;margin:0;padding:14px 16px;border-radius:12px;background:rgba(100,112,255,.12);color:var(--ink);font-size:15px}
@media (max-width:820px){.cgrid,.form{grid-template-columns:minmax(0,1fr)}}

/* ---------- loader + page transitions (Brickly-style, with the dotted D) ---------- */
html{background:#08090D}
.pt{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#12152A;color:var(--ink);transform:translate3d(0,100%,0);pointer-events:none;will-change:transform}
html.boot-load .pt,html.boot-nav .pt{transform:none;pointer-events:auto}
html.boot-load,html.boot-nav{overflow:hidden}
.pt.cover{transform:none;pointer-events:auto;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.pt.lift{transform:translate3d(0,calc(-100% - 15vh),0)!important;transition:transform 1s cubic-bezier(.76,0,.24,1)}
.pt::after{content:"";position:absolute;left:0;right:0;height:14vh;background:inherit;border-radius:0 0 50% 50%/0 0 100% 100%;top:100%;transform:scaleY(0);transform-origin:top;transition:transform 1s cubic-bezier(.76,0,.24,1)}
.pt.lift::after{transform:scaleY(1)}
.pt::before{content:"";position:absolute;left:0;right:0;height:14vh;background:inherit;border-radius:50% 50% 0 0/100% 100% 0 0;bottom:100%;transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.pt.cover::before{transform:scaleY(1)}
.pt-load{display:none;flex-direction:column;align-items:center;gap:24px;transition:opacity .5s var(--ease),transform .7s var(--ease)}
html.boot-load .pt-load{display:flex}
.pt.lift .pt-load{opacity:0;transform:translateY(-40px)}
.pt-box{position:relative;width:148px;height:148px;display:grid;place-items:center;transition:transform .6s var(--ease)}
.pt-box.done{transform:scale(.94)}
.pt-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pt-ring rect{fill:none;stroke-width:1.6}
.pt-ring .trk{stroke:rgba(241,242,239,.08)}
.pt-ring .orb{stroke:rgba(241,242,239,.45);stroke-linecap:round;stroke-dasharray:14 86;animation:orbit 1.7s linear infinite}
.pt-ring .prg{stroke:var(--acc);stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100;transition:stroke-dashoffset .25s linear}
.pt-box.done .orb{opacity:0;transition:opacity .3s}
@keyframes orbit{to{stroke-dashoffset:-100}}
.pt-d{width:78px;height:78px;overflow:visible}
.pt-d rect{fill:var(--ink);opacity:.12;transition:opacity .35s var(--ease)}
.pt-d rect.a{fill:var(--acc)}
.pt-d rect.on{opacity:1}
.pt-pct{margin:0;color:var(--mute);font:500 10.5px/1 var(--mono);letter-spacing:.12em;min-width:5ch;text-align:center}
.pt-sm{display:none;width:38px;height:38px;color:var(--ink);transition:opacity .4s var(--ease)}
html.boot-nav .pt-sm,.pt.cover .pt-sm{display:block}
.pt.cover .pt-load{display:none}
.pt.lift .pt-sm{opacity:0}
main,.ffoot{transition:transform .8s cubic-bezier(.76,0,.24,1),opacity .8s var(--ease)}
body.leaving main,body.leaving .ffoot{transform:translateY(-6vh);opacity:.4}
@media (prefers-reduced-motion:reduce){.pt-ring .orb{animation:none}}

/* back office for any business */
.any{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;margin-top:clamp(28px,4vw,44px)}
.any-l,.clock-card{padding:clamp(22px,3vw,32px);border-radius:20px;background:var(--raise);border:1px solid var(--line)}
.any-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.any-tab{padding:10px 16px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--mute);font:500 14px/1 var(--sans);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.any-tab:hover{color:var(--ink);border-color:rgba(241,242,239,.3)}
.any-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.any-pane h3{font:500 clamp(24px,2.4vw,32px)/1.1 var(--sans);letter-spacing:-.03em;margin:0 0 18px}
.any-pane ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.any-pane li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink);animation:anyin .5s var(--ease) both}
.any-pane li:nth-child(2){animation-delay:.06s}.any-pane li:nth-child(3){animation-delay:.12s}.any-pane li:nth-child(4){animation-delay:.18s}
.any-pane li svg{flex:none;width:20px;height:20px;padding:3px;border-radius:6px;background:var(--acc);color:#fff;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.any-pane p{margin:0;color:var(--mute);max-width:46ch;font-size:15.5px}
.any-pane .go{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding-bottom:6px;border-bottom:1px solid var(--line);font-weight:500;font-size:15px;color:var(--ink)}
.any-pane .go svg{width:14px;height:14px}
@keyframes anyin{from{opacity:0;transform:translateY(8px)}}
.clock-card{display:flex;flex-direction:column;gap:20px}
.cc-top{display:flex;justify-content:space-between;align-items:center}
.cc-top .label{margin:0}
.cc-now{font:500 12px/1 var(--mono);color:var(--mute);letter-spacing:.08em}
.cc-who{display:flex;align-items:center;gap:14px}
.cc-who .av{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(100,112,255,.16);color:#AEB4FF;font:600 15px/1 var(--sans)}
.cc-who b{display:block;font-weight:600;font-size:17px}
.cc-who small{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:14px;margin-top:4px}
.cc-who small::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dim)}
.clock-card.in .cc-who small{color:var(--ink)}
.clock-card.in .cc-who small::before{background:#4CBF8A;box-shadow:0 0 0 4px rgba(76,191,138,.18)}
.cc-btn{height:58px;border-radius:16px;border:0;background:var(--acc);color:#fff;font:600 17px/1 var(--sans);cursor:pointer;transition:background .25s,transform .15s}
.cc-btn:active{transform:scale(.98)}
.clock-card.in .cc-btn{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(241,242,239,.35)}
.cc-log{list-style:none;margin:0;padding:0;display:grid;gap:8px;min-height:20px}
.cc-log li{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--mute);padding-top:8px;border-top:1px solid var(--line);animation:anyin .4s var(--ease) both}
.cc-log li b{color:var(--ink);font-weight:500}
.clock-card .note{margin:auto 0 0;font-size:12.5px;color:var(--dim)}
.can{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.can span{padding:9px 14px;border-radius:99px;border:1px solid var(--line);color:var(--mute);font-size:13.5px}
@media (max-width:820px){.any{grid-template-columns:minmax(0,1fr)}.any-pane ul{grid-template-columns:minmax(0,1fr)}}

/* ---------- publishing fixes ---------- */
.cc-btn{background:#5762F5}
.btn-t{min-height:44px}
.ffoot nav{gap:0}
.ffoot nav a{display:block;padding:10px 0}
.ffoot .small a{color:var(--dim);font:inherit;letter-spacing:inherit}
.strip-r a,.menu-foot a[href^="tel"]{color:inherit}
.strip-r a{display:inline-block;padding:12px 4px;margin:-12px -4px}
.cinfo b a{display:inline-block;padding:6px 0;margin:-6px 0}
.cinfo b a{color:inherit}
.cinfo b a:hover{color:var(--acc)}
.form .bait{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form input[aria-invalid="true"]{border-color:#FF7A7A}
.form .err{grid-column:1/-1;margin:0;padding:14px 16px;border-radius:12px;background:rgba(255,122,122,.12);color:#FFC2C2;font-size:15px}
.form .fine{grid-column:1/-1;margin:0;color:var(--mute);font-size:13.5px}
.form .fine a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.form .send[disabled]{opacity:.6;cursor:progress}
.policy{max-width:68ch}
.policy h2{font:500 clamp(22px,2.2vw,28px)/1.2 var(--sans);letter-spacing:-.02em;margin:44px 0 12px}
.policy h2:first-child{margin-top:0}
.policy p{margin:0 0 14px;color:var(--mute);font-size:16.5px}
.policy strong{color:var(--ink);font-weight:600}
.policy a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.nf{min-height:70vh;display:grid;align-content:center}

/* ================= Home: the Digitalised brochure (v3) =================
   Scroll opens it, the left and right pages turn it, each page's button opens the real page. */
.bro{position:relative;height:calc(100svh + 165vh)}
.bro-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:radial-gradient(110% 85% at 62% 48%,#151827 0%,#0B0D14 45%,var(--bg) 75%)}
.bro-sky{position:absolute;left:-24px;top:-24px;width:calc(100% + 48px);height:calc(100% + 48px);display:block;will-change:transform}

.bro-intro{position:absolute;left:0;right:0;top:50%;transform:translateY(-44%);z-index:3;pointer-events:none}
.bro-intro .in{max-width:min(470px,36vw);pointer-events:auto}
.bro-intro .label{margin:0 0 20px}
.bro-intro h1{font-size:clamp(46px,6vw,92px);font-weight:300}
.bro-intro .lede{margin:28px 0 0;color:var(--mute);font-size:17px;line-height:1.65;max-width:400px}
.bro-hint{display:flex;align-items:center;gap:14px;margin:34px 0 0;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.bro-hint i{position:relative;width:22px;height:34px;border:1px solid rgba(241,242,239,.35);border-radius:12px;flex:none}
.bro-hint i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--ink);animation:broWheel 1.8s var(--ease) infinite}
@keyframes broWheel{0%{transform:translateY(0);opacity:0}25%{opacity:1}80%{transform:translateY(11px);opacity:0}100%{opacity:0}}

.bro-view{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:122px 0 96px;perspective:2400px;z-index:2;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.bro.bro-on .bro-view{cursor:pointer}
@media (pointer:fine){.bro.bro-on .bro-view.has-cur{cursor:none}}
.bro-tilt{position:relative;transform-origin:50% 55%;will-change:transform}
.book-shadow{position:absolute;left:4%;right:4%;bottom:-9%;height:16%;background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,0));transform:translateZ(-1px);pointer-events:none}

.book{--pw:min(39vw,calc((100svh - 250px)/1.38),540px);--ph:calc(var(--pw)*1.38);--l:0;--r:0;position:relative;width:calc(var(--pw)*2);height:var(--ph);perspective:2800px;transition:transform 1s cubic-bezier(.45,.05,.2,1)}
.book.one{--pw:min(82vw,calc((100svh - 270px)/1.42),430px);--ph:calc(var(--pw)*1.42);width:var(--pw)}
.book.two::before,.book.two::after{content:"";position:absolute;top:4px;bottom:4px;pointer-events:none;background:repeating-linear-gradient(90deg,#E4E4DE 0 1px,#B9BAB3 1px 2px);border-radius:3px;transition:width .9s,left .9s,right .9s}
.book.two::before{right:100%;width:calc(var(--l)*2px)}
.book.two::after{left:100%;width:calc(var(--r)*2px)}

.leaf{position:absolute;top:0;left:50%;width:var(--pw);height:100%;transform-origin:0 50%;transform-style:preserve-3d;--sh:0}
.book.one .leaf{left:0}
.book .face{position:absolute;inset:0;container-type:size;overflow:hidden;border-radius:3px 7px 7px 3px;box-shadow:0 34px 60px -26px rgba(0,0,0,.7)}
.book .face.back{transform:rotateY(180deg);border-radius:7px 3px 3px 7px}
.bro-on .leaf .face.back,.bro-on .leaf.show-back .face.front{visibility:hidden}
.bro-on .leaf.show-back .face.back{visibility:visible}
.book .face::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 3%,rgba(0,0,0,0) 8%)}
.book .face.back::after{background:linear-gradient(270deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 3%,rgba(0,0,0,0) 8%)}
.book .face::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;opacity:calc(var(--sh) * .85);background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.12) 60%,rgba(0,0,0,.1))}
/* ---- a page ---- */
.bp{position:absolute;inset:0;background:#F3F3EF;color:#111318;padding:8cqw 8cqw 12cqw;display:flex;flex-direction:column;gap:3.4cqw;font-size:max(12px,2.75cqw);line-height:1.5;overflow:hidden}
.bp::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(130% 90% at 0% 0%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%)}
.bp > *{position:relative;margin:0}
.bp.blank{background:#EDEDE8}
.bp-k{font:500 max(9.5px,1.9cqw)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#4E59EC}
.bp-h{font-weight:300;font-size:max(21px,7cqw);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.bp-p{color:#4B4F59;max-width:46ch}
.bp-n{position:absolute!important;bottom:5cqw;font:500 max(9.5px,1.8cqw)/1 var(--mono);color:#8D9099}
.book .face.front .bp-n{right:8cqw}.book .face.back .bp-n{left:8cqw}
.bp-btn{margin-top:auto!important;align-self:flex-start;display:inline-flex;align-items:center;gap:.7em;min-height:44px;padding:0 1.3em;border-radius:99px;background:#111318;color:#F3F3EF;font:600 max(13px,2.5cqw)/1 var(--sans);text-decoration:none;transition:background .25s var(--ease),transform .25s var(--ease)}
.bp-btn .arrow{width:.85em;height:.85em}
.bp-btn:hover{background:#4E59EC;transform:translateY(-2px)}
.bp-btn-l{margin-top:12px!important;background:#F3F3EF;color:#111318}.bp-btn-l:hover{background:#9BA2FF;color:#111318}
.bp-btn.acc{background:#4E59EC}.bp-btn.acc:hover{background:#111318}
.bp-btn:focus-visible,.bp-toc button:focus-visible,.bp a:focus-visible{outline:2px solid #4E59EC;outline-offset:3px}

/* cover and back cover */
.bp.cover{background:#0E1017;color:var(--ink);padding:8cqw;justify-content:space-between}
.bp.cover::before{opacity:1;background:radial-gradient(90% 70% at 70% 30%,rgba(100,112,255,.16),rgba(100,112,255,0) 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 2px,rgba(255,255,255,0) 2px 4px)}
.cv-top{display:flex;justify-content:space-between;align-items:center;font:500 max(9.5px,1.9cqw)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cv-mark{display:flex;align-items:center;gap:1.4cqw;color:var(--ink)}
.cv-mark svg{width:3.6cqw;height:3.6cqw}
.cv-d{width:62cqw;height:62cqw;align-self:center;overflow:visible}
.cv-d rect{fill:#F1F2EF;opacity:.12;transition:opacity .5s,fill .5s}
.cv-d.lit rect{opacity:1;transition-delay:var(--d)}
.cv-d.lit rect.a{fill:#6470FF}
.cv-t{font-weight:300;font-size:max(22px,8cqw);line-height:1;letter-spacing:-.04em}
.cv-t span{display:block;color:var(--dim)}
.cv-s{margin-top:2.6cqw!important;color:var(--mute);font-size:max(11.5px,2.4cqw)}
.back-cover{align-items:center;justify-content:center!important;text-align:center;gap:3cqw}
.bc-mark{width:16cqw;height:16cqw;color:var(--ink)}
.bc-t{font-weight:300;font-size:max(20px,6.4cqw);letter-spacing:-.03em}
.bc-s{color:var(--mute);max-width:34ch}
.bc-c{display:flex;flex-direction:column;gap:1.6cqw;margin-top:4cqw!important;font:500 max(10.5px,2.1cqw)/1.4 var(--mono);letter-spacing:.06em}
.bc-c a{color:var(--ink);text-decoration:none;display:inline-block;padding:.8em 0}
.bc-c span{color:var(--mute)}

/* hello / contents */
.bp-toc{list-style:none;padding:0;margin-top:2cqw!important;border-top:1px solid #DCDDD6}
.bp-toc li{border-bottom:1px solid #DCDDD6}
.bp-toc button{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;width:100%;min-height:max(40px,8cqw);cursor:pointer;font-size:max(13px,3cqw);color:#111318;transition:color .2s,padding .3s var(--ease)}
.bp-toc button span{font:500 max(9.5px,1.9cqw)/1 var(--mono);color:#8D9099}
.bp-toc button:hover{color:#4E59EC;padding-left:1.4cqw}
.bp-sig{margin-top:auto!important;font-weight:300;font-size:max(18px,5.4cqw);letter-spacing:-.02em;font-style:italic}
.bp-sig small{display:block;font:500 max(9.5px,1.8cqw)/1.6 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#8D9099}

/* websites: the little site that builds itself */
.mini{position:relative;flex:none;width:100%;aspect-ratio:16/10;border-radius:2cqw;background:#fff;border:1px solid #DADBD4;overflow:hidden;box-shadow:0 14px 30px -18px rgba(17,19,24,.35)}
.mini i{position:absolute;display:block;background:#E3E4DE;border-radius:1cqw;opacity:0;transform:translateY(10px) scale(.94);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.mini i.m-bar{left:0;top:0;width:100%;height:10%;border-radius:0;background:#111318}
.mini i.acc{background:#6470FF}
.bp.live .mini i{opacity:1;transform:none;transition-delay:calc(var(--d) + .35s)}
.bp-ticks{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw 3cqw}
.bp-ticks li{display:flex;align-items:center;gap:1.4cqw}
.bp-ticks svg{width:max(13px,2.8cqw);height:max(13px,2.8cqw);color:#4E59EC;flex:none}

/* back office screens */
.bp.dark{background:#11131A;color:var(--ink)}
.bp.dark::before{opacity:1;background:radial-gradient(90% 60% at 30% 30%,rgba(100,112,255,.14),rgba(100,112,255,0) 60%)}
.bp.dark .bp-k{color:#9BA2FF}
.bo-frame{margin-top:4cqw!important;border-radius:2cqw;overflow:hidden;border:1px solid rgba(241,242,239,.14);box-shadow:0 24px 50px -24px rgba(0,0,0,.9);transform:rotate(-2deg);flex:none}
.bo-frame img{display:block;width:100%;height:auto}
.bo-phone{position:absolute!important;right:7cqw;top:44cqh;width:31cqw;border-radius:4.5cqw;border:1.2cqw solid #1D2029;box-shadow:0 30px 50px -20px rgba(0,0,0,.9);transform:rotate(4deg)}
.bp-cap{margin-top:auto!important;max-width:52%;color:var(--mute);font-size:max(11px,2.2cqw)}

/* back office list */
.bp-list{list-style:none;padding:0;display:grid;gap:2.4cqw;border-top:1px solid #DCDDD6;padding-top:3cqw!important}
.bp-list li{color:#4B4F59}
.bp-list b{display:block;color:#111318;font-weight:600}

/* how it works */
.bp-steps{list-style:none;padding:0;display:grid;gap:4cqw;margin-top:1cqw!important}
.bp-steps li{display:grid;grid-template-columns:auto 1fr;column-gap:3.4cqw;color:#4B4F59}
.bp-steps b{display:block;color:#111318;font-weight:600}
.pips{grid-row:span 2;display:flex;gap:.9cqw;padding-top:.6em}
.pips i{width:1.6cqw;height:1.6cqw;min-width:6px;min-height:6px;border-radius:2px;background:#D5D6CF}
.pips[data-n="1"] i:nth-child(-n+1),.pips[data-n="2"] i:nth-child(-n+2),.pips[data-n="3"] i{background:#4E59EC}

/* what you get */
.bp-facts{display:grid;grid-template-columns:1fr 1fr;gap:4cqw 4cqw;border-top:1px solid #DCDDD6;padding-top:3.4cqw!important;color:#4B4F59}
.bp-facts b{display:block;color:#111318;font-weight:600;margin-bottom:.3em}
.bp-note{padding:3cqw 3.4cqw!important;border-radius:2cqw;background:#E7E8FF;color:#262B6B}

/* contact */
.bp-rows{display:grid;border-top:1px solid #DCDDD6}
.bp-rows div{display:flex;justify-content:space-between;align-items:center;gap:3cqw;min-height:max(42px,8.6cqw);border-bottom:1px solid #DCDDD6}
.bp-rows dt{font:500 max(9.5px,1.9cqw)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8D9099}
.bp-rows dd{margin:0;text-align:right}
.bp-rows a{color:#111318;text-decoration:none;padding:.5em 0;display:inline-block}
.bp-rows a:hover{color:#4E59EC}

/* quote card */
.q-card{flex:none;border-radius:3cqw;background:#fff;border:1px solid #DADBD4;padding:5cqw;display:grid;gap:2.2cqw;box-shadow:0 24px 44px -26px rgba(17,19,24,.45);margin-top:2cqw!important}
.q-card p{margin:0}
.q-h{font-weight:600;font-size:max(15px,3.8cqw)}
.q-s{color:#8D9099;margin-top:-1.2cqw!important;margin-bottom:1.4cqw!important}
.q-r{display:flex;align-items:center;gap:2cqw;padding:1.6cqw 0;border-top:1px solid #ECECE7;opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.q-r svg{width:max(13px,2.8cqw);height:max(13px,2.8cqw);color:#4E59EC}
.q-t{margin-top:1.4cqw!important;padding:2.6cqw 3cqw;border-radius:2cqw;background:#111318;color:#F3F3EF;font-weight:600;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.bp.live .q-r,.bp.live .q-t{opacity:1;transform:none;transition-delay:calc(var(--d) + .35s)}

/* small pages (phones): keep the essentials */
@container (max-width:380px){
  .bp-ticks,.bp-sig,.bp-cap{display:none}
  .bp-facts > div{font-size:0}.bp-facts b{font-size:max(12px,2.75cqw);margin:0}
  .bp-list li{font-size:0}.bp-list b{font-size:max(12px,2.75cqw)}
}
@container (max-height:520px){ .bp-p{display:none} .bp-toc{margin-top:0!important} }

/* ---- controls under the book ---- */
.bro-ui{position:absolute;left:0;right:0;bottom:max(22px,env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;gap:18px;z-index:4;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.bro.is-open .bro-ui{opacity:1;transform:none;pointer-events:auto}
.bro-arr{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(18,20,27,.85);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .25s,background .25s,opacity .25s}
.bro-arr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bro-arr:hover{border-color:rgba(241,242,239,.4);background:#1A1D27}
.bro-arr:disabled{opacity:.3;cursor:default}
.bro-arr:focus-visible,.bro-dots button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.bro-mid{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:170px}
.bro-lab{margin:0;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.bro-dots{display:flex}
.bro-dots button{width:26px;height:32px;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer}
.bro-dots button i{width:6px;height:6px;border-radius:2px;background:rgba(241,242,239,.25);transition:background .3s,width .35s var(--ease)}
.bro-dots button[aria-current="true"] i{width:18px;background:var(--ink)}
.bro-cur{position:fixed;left:0;top:0;z-index:20;pointer-events:none;padding:9px 14px;border-radius:99px;background:#4E59EC;color:#fff;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);font:600 12.5px/1 var(--sans);white-space:nowrap;opacity:0;transform:translate3d(-100px,-100px,0) scale(.8);transition:opacity .2s,scale .2s}
.bro-cur.on{opacity:1}

/* no JavaScript: the pages simply stack */
.bro:not(.bro-on){height:auto}
.bro:not(.bro-on) .bro-stage{position:relative;height:auto;padding:140px 0 80px}
.bro:not(.bro-on) .bro-intro{position:relative;transform:none;top:0;margin-bottom:60px}
.bro:not(.bro-on) .bro-view,.bro:not(.bro-on) .bro-ui,.bro:not(.bro-on) .bro-cur{display:none}
.bro:not(.bro-on) .bro-src{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;width:min(1360px,100% - 56px);margin:0 auto}
.bro:not(.bro-on) .bp{position:relative;aspect-ratio:1/1.38}
.bro:not(.bro-on) .bro-src{container-type:inline-size}
.bro.bro-on .bro-src{display:none}

@media (max-width:819px){
  .bro-intro{top:112px;transform:none}
  .bro-intro .in{max-width:none}
  .bro-intro h1{font-size:clamp(40px,11vw,60px)}
  .bro-intro .lede{font-size:15px;margin-top:16px}
  .bro-hint{margin-top:20px}
  .bro-view{padding:118px 0 92px}
  .bro-ui{gap:10px}
  .bro-mid{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .book,.book.two::before,.book.two::after{transition-duration:.01s}
  .bro-hint i::after{animation:none}
}

/* the "What clients say" spread (only in once a review is published) */
.bq-main{margin:2cqw 0 0!important;display:flex;flex-direction:column;gap:3cqw}
.bq-main blockquote{margin:0;font:300 max(17px,5cqw)/1.32 var(--sans);letter-spacing:-.02em;color:#111318;display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden}
.bq-main blockquote::before{content:"\201C"}.bq-main blockquote::after{content:"\201D"}
.bq-main figcaption{display:flex;flex-direction:column;font-size:max(12px,2.6cqw)}
.bq-main figcaption b{font-weight:600}.bq-main figcaption span{color:#4B4F59}
.bq-stars{margin:0!important;color:#C98A0B;letter-spacing:2px;font-size:max(13px,3cqw)}.bq-stars i{font-style:normal;color:#CFD0C8}
.bq-list{display:grid;gap:3.4cqw;margin-top:1cqw!important}
.bq-s{margin:0;padding:3.4cqw 3.6cqw;border-radius:2cqw;background:#fff;border:1px solid #DADBD4}
.bq-s blockquote{margin:0 0 1.6cqw;color:#111318;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.bq-s figcaption{font-size:max(11px,2.3cqw);color:#4B4F59}.bq-s figcaption b{color:#111318}
.bq-ask{color:#4B4F59}
@container (max-width:380px){.bq-s:nth-child(n+3){display:none}}

/* ================= Paper system (v3): printed sheets floating in the starfield =================
   Shared by every page: the quote form sheet, paper cards, flip-in reveals, the little brochure in each page header. */
:root{--paper:#F3F3EF;--paper-2:#EAEAE4;--pink:#111318;--pmute:#4B4F59;--pdim:#8D9099;--prule:#DCDDD6;--pacc:#4E59EC}

/* stars behind every page that isn't the home brochure (home draws its own) */
body:not([data-page="home"])::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1px 1px at 12% 18%,rgba(241,242,239,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 72% 12%,rgba(241,242,239,.4) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 38% 64%,rgba(140,149,255,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 86% 58%,rgba(241,242,239,.45) 50%,transparent 51%),
    radial-gradient(1px 1px at 22% 86%,rgba(241,242,239,.35) 50%,transparent 51%),
    radial-gradient(1px 1px at 58% 36%,rgba(241,242,239,.3) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 92% 88%,rgba(241,242,239,.45) 50%,transparent 51%),
    radial-gradient(1px 1px at 6% 48%,rgba(241,242,239,.3) 50%,transparent 51%);
  background-size:420px 380px,520px 460px,610px 540px,380px 420px,470px 510px,560px 400px,640px 600px,350px 330px;opacity:.9}
body:not([data-page="home"]){background:var(--bg)}
body:not([data-page="home"]) main{position:relative;z-index:0}

/* ---- a paper sheet ---- */
.sheet{position:relative;background:var(--paper);color:var(--pink);border-radius:10px;padding:clamp(24px,4vw,56px);box-shadow:0 40px 80px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04)}
.sheet::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.65),rgba(255,255,255,0) 55%)}
.sheet > *{position:relative}
.sheet .label{color:var(--pacc)}
.sheet .two span{color:#9A9DA6}
.sheet a:not(.btn-w):not(.bp-btn){color:var(--pink)}
.sheet-k{margin:0 0 18px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pacc)}
.sheet-n{position:absolute!important;right:clamp(20px,3vw,36px);bottom:clamp(16px,2.4vw,28px);font:500 11px/1 var(--mono);color:var(--pdim)}

/* flip-in: sheets and cards lie back, then stand up as they scroll into view */
.flipin{transform-origin:50% 100%;transform:perspective(1400px) rotateX(38deg) translateY(40px);opacity:0;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .7s ease;transition-delay:calc(var(--i,0) * 90ms)}
.flipin.in{transform:none;opacity:1}
.flipin.in:hover{transition:transform .25s ease-out,opacity .7s ease}
@media (prefers-reduced-motion:reduce){.flipin{transform:none;opacity:1;transition:none}}

/* ---- the little brochure in each page header ---- */
.phero .wrap{position:relative}
.mbro{position:absolute;right:max(28px,4vw);top:50%;width:clamp(170px,17vw,250px);aspect-ratio:1/1.38;perspective:1400px;transform:translateY(-38%) rotate(5deg);transform-style:preserve-3d}
.mbro-page,.mbro-cover{position:absolute;inset:0;border-radius:3px 8px 8px 3px}
.mbro-page{background:var(--paper);padding:14% 13%;display:flex;flex-direction:column;gap:7%;box-shadow:0 30px 60px -24px rgba(0,0,0,.85)}
.mbro-page i{display:block;height:5%;border-radius:2px;background:#DEDFD8}
.mbro-page i:nth-child(1){width:40%;height:3%;background:var(--pacc);opacity:.8}
.mbro-page i:nth-child(2){width:85%;height:9%;background:#C9CAC3}
.mbro-page i:nth-child(3){width:70%}.mbro-page i:nth-child(4){width:78%}.mbro-page i:nth-child(5){width:52%}
.mbro-page i:nth-child(6){margin-top:auto;width:45%;height:11%;border-radius:99px;background:var(--pink)}
.mbro-cover{background:#0E1017;transform-origin:0 50%;transform:rotateY(-22deg);transition:transform 1.2s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;justify-content:space-between;padding:12%;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(241,242,239,.08),0 30px 60px -24px rgba(0,0,0,.9);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.mbro-cover::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(90% 70% at 70% 30%,rgba(100,112,255,.2),rgba(100,112,255,0) 60%);pointer-events:none}
.mbro-cover svg{width:22%;height:auto;aspect-ratio:1;color:var(--ink);position:relative}
.mbro-cover b{position:relative;font:300 clamp(18px,1.9vw,26px)/1 var(--sans);letter-spacing:-.03em}
.mbro-cover small{display:block;margin-top:8px;font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.mbro.open .mbro-cover{transform:rotateY(-58deg)}
@media (hover:hover){.mbro:hover .mbro-cover{transform:rotateY(-128deg)}}
.phero h1,.phero .lead,.phero .row{max-width:min(860px,64vw)}
@media (max-width:899px){.mbro{display:none}.phero h1,.phero .lead,.phero .row{max-width:none}}

/* ---- the quote form sheet ---- */
.fsheet{position:relative;width:100%;height:100%;background:var(--paper);color:var(--pink);border-radius:8px;box-shadow:0 40px 80px -36px rgba(0,0,0,.85);overflow:hidden;-webkit-user-select:text;user-select:text;cursor:auto}
.fsheet::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.7),rgba(255,255,255,0) 55%),linear-gradient(90deg,transparent 0 28px,rgba(78,89,236,.16) 28px 29px,transparent 29px)}
.fs-in{position:relative;height:100%;overflow:auto;overscroll-behavior:contain;padding:28px 30px 22px 46px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.fs-top{display:flex;justify-content:space-between;align-items:center;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pdim)}
.fs-top .cv-mark{display:flex;align-items:center;gap:8px;color:var(--pink)}
.fs-top .cv-mark svg{width:16px;height:16px}
.fs-h{margin:8px 0 0;font:300 clamp(26px,3vw,36px)/1.05 var(--sans);letter-spacing:-.035em}
.fs-p{margin:0;color:var(--pmute);font-size:14.5px;line-height:1.5}
.fs-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin-top:6px}
.fs-form .wide{grid-column:1/-1}
.fs-form label{display:grid;gap:2px}
.fs-form label > span,.fs-picks > span{font:500 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pdim)}
.fs-form input,.fs-form textarea{width:100%;border:0;border-bottom:1.5px solid #C4C5BD;border-radius:0;background:transparent;color:var(--pink);font:400 16px/1.4 var(--sans);padding:6px 0 7px;outline:none;transition:border-color .25s}
.fs-form textarea{resize:none;min-height:66px;background:repeating-linear-gradient(transparent 0 29px,#D7D8D0 29px 30px);border-bottom:0;line-height:30px;padding:0}
.fs-form input:focus,.fs-form textarea:focus{border-color:var(--pacc)}
.fs-form textarea:focus{background:repeating-linear-gradient(transparent 0 29px,rgba(78,89,236,.45) 29px 30px)}
.fs-form [aria-invalid="true"]{border-color:#C0362C}
.fs-form .bait{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fs-picks{display:grid;gap:8px}
.fs-picks .picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px}
.fs-picks .pick{display:flex;align-items:center;gap:9px;min-height:34px;padding:0;border:0;background:none;color:var(--pink);font:500 14.5px/1.2 var(--sans);text-align:left;cursor:pointer;border-radius:4px}
.fs-picks .pick::before{content:"";flex:none;width:17px;height:17px;border:1.5px solid #9EA0A8;border-radius:4px;background:#fff center/12px no-repeat;transition:background-color .2s,border-color .2s}
.fs-picks .pick[aria-pressed="true"]::before{background-color:var(--pacc);border-color:var(--pacc);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.fs-picks .pick:hover::before{border-color:var(--pacc)}
.fs-form .pick:focus-visible,.fs-form .send:focus-visible,.fsheet a:focus-visible{outline:2px solid var(--pacc);outline-offset:3px}
.fs-send{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:4px}
.fs-send .bp-btn{margin-top:0!important;border:0;cursor:pointer;font-size:14.5px}
.fs-send .bp-btn:disabled{opacity:.6;cursor:default}
.fs-send .fine{margin:0;font-size:12px;color:var(--pdim)}
.fs-send .fine a{color:var(--pmute);text-decoration:underline;text-underline-offset:2px}
.fs-form .err{margin:0;padding:10px 12px;border-radius:8px;background:#FBE9E7;color:#9A2A20;font-size:14px}
.fs-form .sent{margin:0;padding:12px 14px;border-radius:8px;background:#E6F4EA;color:#1D5B33;font-size:14.5px;font-weight:500}
.fs-foot{margin-top:auto;padding-top:12px;border-top:1px dashed #CFD0C8;display:flex;flex-wrap:wrap;gap:4px 18px;font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--pdim)}
.fs-foot a{color:var(--pmute);text-decoration:none;display:inline-block;padding:12px 0}
.fs-foot span{padding:12px 0}
@media (max-width:520px){
  .fs-in{padding:22px 18px 16px 34px}
  .fsheet::before{background:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.7),rgba(255,255,255,0) 55%),linear-gradient(90deg,transparent 0 20px,rgba(78,89,236,.16) 20px 21px,transparent 21px)}
  .fs-form{grid-template-columns:1fr}
  .fs-picks .picks{grid-template-columns:1fr 1fr}
}

/* ---- the brochure turns portrait and becomes the form (home) ---- */
.bro-rot{position:relative;transition:transform .85s cubic-bezier(.55,.05,.25,1),opacity .3s}
.bro-sheet{position:absolute;left:50%;top:50%;z-index:10;opacity:0;transform:translate(-50%,-50%) scale(.97);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.bro-sheet.in{opacity:1;transform:translate(-50%,-50%)}
.bro-sheet.flipup{transform-origin:50% 100%;transform:translate(-50%,-50%) perspective(1200px) rotateX(70deg)}
.bro-sheet.flipup.in{transform:translate(-50%,-50%) perspective(1200px) rotateX(0deg)}
.bro.form-on .bro-view{cursor:auto}
.bro.form-on .bro-cur{display:none}
@media (prefers-reduced-motion:reduce){.bro-rot,.bro-sheet{transition:none}}

/* ---- headings printed on a sheet ---- */
.sheet-h{margin:0 0 clamp(24px,3vw,40px);font:300 clamp(30px,3.6vw,52px)/1.02 var(--sans);letter-spacing:-.04em;text-wrap:balance}
.sheet-h span{display:block;color:#9A9DA6}

/* services: the checklist printed on paper */
.sheet .checks{border-top-color:var(--prule)}
.sheet .check{border-color:var(--prule)!important}
.sheet .check h3{color:var(--pink)}
.sheet .check p{color:var(--pmute)}
.sheet .box{border-color:#B4B6BE;background:#fff}
.sheet .check.on .box{background:var(--pacc);border-color:var(--pacc)}

/* services: who it's for, as index cards */
.cards .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border:0}
.cards .row{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:220px;padding:24px 24px 22px;border:0;border-radius:12px;background:var(--paper);color:var(--pink);box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
.cards .row:hover{background:var(--paper)}
.cards .row h3{color:var(--pink);font-size:clamp(22px,2vw,28px);margin-top:8px}
.cards .row .cat{color:var(--pmute)}
.cards .row .st{margin-top:auto;color:var(--pink)}
.cards .row .st::before{background:var(--pacc)}
.cards .row .ar{position:absolute;right:22px;top:24px;color:var(--pdim)}
.cards .row:hover .ar{color:var(--pacc)}
@media (max-width:980px){.cards .rows{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cards .rows{grid-template-columns:1fr}.cards .row{min-height:0}}

/* how it works: three cards */
.paper-steps .steps{border:0;gap:16px}
.paper-steps .step,.paper-steps .step + .step{padding:26px 26px 30px;border:0;border-radius:12px;background:var(--paper);color:var(--pink);box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
.paper-steps .step-h b{font-size:0}
.paper-steps .step-h b::before{content:"";display:inline-block;width:46px;height:8px;background:radial-gradient(circle,var(--pacc) 0 3px,transparent 3.5px) 0 0/16px 8px repeat-x}
.paper-steps .step:nth-child(1) .step-h b::before{width:14px}
.paper-steps .step:nth-child(2) .step-h b::before{width:30px}
.paper-steps .step .label{color:var(--pacc)}
.paper-steps .step svg{color:#8D9099}
.paper-steps .step h3{color:var(--pink)}
.paper-steps .step p{color:var(--pmute)}
@media (max-width:900px){.paper-steps .steps{grid-template-columns:1fr}}

/* questions on paper */
.sheet .faq{border-top-color:var(--prule)}
.sheet .faq details{border-color:var(--prule)}
.sheet .faq summary{color:var(--pink)}
.sheet .faq summary i{border-color:#C4C5BD;color:var(--pmute)}
.sheet .faq details p{color:var(--pmute)}

/* back office: paper panels */
.any-l{background:var(--paper)!important;border:0!important;color:var(--pink)}
.any-l .any-tab{border-color:#C9CAC2;color:var(--pmute)}
.any-l .any-tab:hover{color:var(--pink);border-color:#9EA0A8}
.any-l .any-tab[aria-selected="true"]{background:var(--pink);border-color:var(--pink);color:var(--paper)}
.any-l .any-pane h3,.any-l .any-pane li{color:var(--pink)}
.any-l .any-pane p{color:var(--pmute)}
.any-l .any-pane .go{color:var(--pink);border-color:#C9CAC2}
.stats{border:0!important;background:var(--paper);border-radius:12px;padding:6px clamp(16px,2.4vw,30px);color:var(--pink);box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
.stats .stat{border-color:var(--prule)!important}
.stats .stat span{color:var(--pmute)}
.secure > div{background:var(--paper)!important;border:0!important;border-radius:12px!important;color:var(--pink);box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
.secure > div svg{color:var(--pacc)}
.secure > div p{color:var(--pmute)}
.tour-list{background:var(--paper);border-radius:12px;padding:14px 22px;box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
.tour-list li{border-left-color:var(--prule)!important;color:#6A6E77}
.tour-list li.on{color:var(--pink);border-left-color:var(--pacc)!important}
.tour-list li p{color:var(--pmute)}
@media (max-width:819px){.tour-list{padding:6px 16px}}

/* privacy + 404 */
.policy.sheet{max-width:860px}
.policy.sheet h2{color:var(--pink)}
.policy.sheet p{color:var(--pmute)}
.policy.sheet strong{color:var(--pink)}

/* ---- contact page: the form sheet turns upright as the page opens ---- */
.cpage .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(32px,5vw,80px);align-items:center}
.cpage h1{font-size:clamp(46px,6vw,96px)}
.c-rows{margin:34px 0 0;display:grid;border-top:1px solid var(--line);max-width:460px}
.c-rows div{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;border-bottom:1px solid var(--line)}
.c-rows dt{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.c-rows dd{margin:0;text-align:right;font-size:17px}
.c-rows a{color:var(--ink);text-decoration:none;display:inline-block;padding:10px 0}
.c-rows a:hover{color:#9BA2FF}
.c-note{margin:18px 0 0;color:var(--mute);font-size:15px}
.c-sheet .fsheet{height:auto}
.c-sheet .fs-in{height:auto;overflow:visible;padding:34px 36px 26px 54px}
.c-sheet .fsheet::before{background:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.7),rgba(255,255,255,0) 55%),linear-gradient(90deg,transparent 0 34px,rgba(78,89,236,.16) 34px 35px,transparent 35px)}
.turnin{transform:rotate(-90deg) scale(.62);opacity:0;transition:transform 1.1s cubic-bezier(.55,.05,.2,1),opacity .5s ease}
.turnin.in{transform:none;opacity:1}
@media (max-width:899px){
  .cpage .wrap{grid-template-columns:1fr}
  .turnin{transform:perspective(1200px) rotateX(60deg) translateY(40px)}
  .c-sheet .fs-in{padding:24px 20px 18px 36px}
  .c-sheet .fsheet::before{background:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.7),rgba(255,255,255,0) 55%),linear-gradient(90deg,transparent 0 22px,rgba(78,89,236,.16) 22px 23px,transparent 23px)}
}
@media (prefers-reduced-motion:reduce){.turnin{transform:none;opacity:1;transition:none}}

/* ---- case study (work.html) ---- */
.cs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.cs.cs-flip .cs-text{order:2}
.cs-p{margin:0 0 22px;color:var(--pmute);font-size:16.5px;line-height:1.6;max-width:46ch}
.cs-ticks{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.cs-ticks li{display:flex;align-items:center;gap:12px;color:var(--pink);font-size:15.5px}
.cs-ticks svg{width:20px;height:20px;flex:none;padding:3px;border-radius:6px;background:var(--pacc);color:#fff;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cs .bp-btn{margin-top:0!important;font-size:14.5px;min-height:46px}
.cs-shots{position:relative;aspect-ratio:16/12}
.cs-shot{position:absolute;margin:0;width:82%;border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(17,19,24,.55);border:1px solid rgba(17,19,24,.08);background:#0B0C10}
.cs-shot img,.cs-phone img{display:block;width:100%;height:auto}
.cs-shot{left:0;top:0;transform:rotate(-1.5deg)}
.cs-shot-2{left:auto;right:0;top:auto;bottom:6%;width:62%;transform:rotate(2deg)}
.cs-phone{position:absolute;margin:0;right:4%;top:6%;width:21%;border-radius:18px;overflow:hidden;border:5px solid #1D2029;box-shadow:0 30px 50px -20px rgba(0,0,0,.6);transform:rotate(4deg)}
.cs-note{margin-top:14px}
@media (max-width:899px){
  .cs{grid-template-columns:1fr}
  .cs.cs-flip .cs-text{order:0}
  .cs-shots{aspect-ratio:16/13}
}

/* ---- reviews from clients (hidden until there is one) ---- */
.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.rv{margin:0;display:flex;flex-direction:column;gap:16px;padding:28px 28px 24px;border-radius:12px;background:var(--paper);color:var(--pink);box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
.rv blockquote{margin:0;font:300 clamp(19px,1.6vw,22px)/1.45 var(--sans);letter-spacing:-.01em}
.rv blockquote::before{content:"\201C"}.rv blockquote::after{content:"\201D"}
.rv figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px;font-size:14.5px}
.rv figcaption b{font-weight:600}
.rv figcaption span{color:var(--pmute)}
.rv-stars{margin:0;color:#C98A0B;letter-spacing:2px;font-size:15px}.rv-stars i{font-style:normal;color:#CFD0C8}

/* ---- the D in the top left: slides open to read "Digitalised" on hover (same dark glass tile, no colour change) ---- */
.tile{position:relative;background:none!important;border:0!important;overflow:visible}
.tile-in{position:absolute;left:0;top:0;height:100%;width:100%;display:flex;align-items:center;gap:10px;padding-left:11px;
  border-radius:inherit;background:rgba(20,22,30,.72);border:1px solid rgba(255,255,255,.13);overflow:hidden;white-space:nowrap;
  transition:width .5s cubic-bezier(.2,.8,.2,1),border-color .3s}
.tile-in svg{flex:none}
.tile-t{font:600 15px/1 var(--sans);letter-spacing:-.01em;color:var(--ink);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .4s cubic-bezier(.2,.8,.2,1)}
.tile:hover .tile-in,.tile:focus-visible .tile-in{width:148px;border-color:rgba(255,255,255,.26)}
.tile:hover .tile-t,.tile:focus-visible .tile-t{opacity:1;transform:none;transition-delay:.08s}
.tile:focus-visible{outline:none}
.tile:focus-visible .tile-in{box-shadow:0 0 0 2px rgba(241,242,239,.45)}
@media (max-width:640px){.tile-in{padding-left:9px}.tile:hover .tile-in{width:46px}.tile:hover .tile-t{opacity:0}}
@media (prefers-reduced-motion:reduce){.tile-in,.tile-t{transition:none}}

/* six menu items: tighter between 1181 and 1320 px, the round menu button from 1180 px down */
@media (max-width:1320px){.pill a{padding:13px 12px}}
@media (max-width:1180px){.pill{display:none}.burger{display:grid}}

/* ---- review page: tap-to-rate stars ---- */
.rstars{display:flex;gap:4px}
.rstar{all:unset;cursor:pointer;font-size:30px;line-height:1;color:#CFD0C8;padding:4px 3px;border-radius:6px;transition:color .15s,transform .15s}
.rstar[aria-pressed="true"]{color:#C98A0B}
.rstar:hover{transform:scale(1.12)}
.rstar:focus-visible{outline:2px solid var(--pacc);outline-offset:2px}
.fs-form[hidden],.fsheet [hidden]{display:none!important}