/* Locally Visible v4.1 — Fora register: black canvas, warm off-white type, one green accent.
   World: Toronto skyline (far) and an Ontario main street (near). Copy always sits on black. */
:root{
  --canvas:#000000; --card:#0f0f0f; --card-2:#141414; --card-3:#1a1a1a;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12); --line-3:rgba(255,255,255,.22);
  --text:#fff3f0; --text-hi:#ffffff; --mute:#8a8a8a; --ghost:#5a5a5a;
  --green:#18e299; --green-ink:#0fa76e;
  --sky-top:#000000; --sky-mid:#2a333a; --sky-low:#4a3a36; --sky-glow:#7a5648;
  --r-pill:999px; --r-card:20px; --r-frame:16px;
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1200px; --gutter:clamp(20px,4vw,40px);
  --rail:min(calc(100vw - 96px),calc(var(--maxw) + 160px));
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --nav-h:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--canvas)}
body{margin:0;background:var(--canvas);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
p a.il{display:inline-block}
p a:hover{text-decoration-color:var(--green)}
h1,h2,h3,h4{margin:0;color:var(--text-hi);font-weight:500;letter-spacing:-.04em;text-wrap:balance}
h1{font-size:clamp(38px,4.4vw,60px);font-weight:400;line-height:1.08;color:var(--text)}
h2{font-size:clamp(30px,3vw,40px);line-height:1.15}
h1 .dim,h2 .dim{display:block;color:var(--mute)}
h3{font-size:clamp(22px,2vw,26px);line-height:1.25;letter-spacing:-.03em;font-weight:400}
h4{font-size:14px;letter-spacing:0;color:var(--mute);font-weight:500}
p{margin:0}
.lead{font-size:17px;color:var(--mute);max-width:52ch}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(80px,10vw,140px) 0}
.section.tight{padding:clamp(48px,7vw,96px) 0}
.sec-head{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin-bottom:clamp(32px,5vw,56px)}
.sec-head p{color:var(--mute);max-width:44ch;justify-self:end}
.sec-head p a.p-link{display:inline-block;padding:12px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 10px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--mute);margin-bottom:20px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.eyebrow a{display:inline-flex;align-items:center;height:100%}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--text);color:var(--canvas);padding:0 16px;min-height:44px;display:inline-flex;align-items:center;border-radius:8px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.opt{color:var(--ghost);font-weight:400}

/* vertical guides: two hairlines at the content edges, behind everything */
.guides{position:fixed;inset:0;z-index:45;pointer-events:none}
.guides::before,.guides::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.guides::before{left:calc(50% - var(--rail) / 2)}
.guides::after{right:calc(50% - var(--rail) / 2)}
main,.close,.foot{position:relative;z-index:1}
@media (max-width:1279px){.guides{display:none}}
/* The .close-world / .close-fore full-bleed reset for this breakpoint lives at the foot of this
   file, not here: the base rule that sets their rail inset is declared later than this block and
   at equal specificity, so an override written here never applied. */

/* buttons: full pills. primary light, glass translucent, ghost outline */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r-pill);font-size:15px;font-weight:500;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .08s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--text);color:#0d0d0d}
.btn-primary:hover{background:var(--text-hi)}
.btn-glass{background:rgba(255,255,255,.10);color:var(--text);border-color:var(--line)}
.btn-glass:hover{background:rgba(255,255,255,.16)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--text)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.arrow{width:16px;height:16px;transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* nav: fixed and locked. transparent at the top, blurred scrim once the page moves */
.nav{position:fixed;top:0;left:0;right:0;z-index:50}
.nav::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid transparent;opacity:0;transition:opacity .4s var(--ease),border-color .4s var(--ease)}
.nav.scrolled::before{opacity:1;border-bottom-color:var(--line)}
.nav-bar{position:relative;max-width:var(--maxw);margin:0 auto;height:var(--nav-h);padding:0 var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.nav-logo{display:flex;align-items:center;min-height:44px;justify-self:start}
.nav-logo img{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-links a{display:inline-flex;align-items:center;height:40px;padding:0 12px;border-radius:var(--r-pill);font-size:14px;font-weight:500;color:rgba(255,243,240,.7);transition:color .4s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text-hi)}
.nav-cta{display:flex;align-items:center;gap:10px;justify-self:end}
.nav-cta .btn{height:40px;font-size:14px;padding:0 16px}
.nav-toggle{display:none;width:44px;height:44px;border:0;background:transparent;border-radius:50%;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--text);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-menu{display:none}
@media (max-width:960px){
  .nav-bar{display:flex;justify-content:space-between}
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav-menu{display:none;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(var(--nav-h) + 6px);background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-frame);padding:8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
  .nav-menu.open{display:block}
  .nav-menu a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:10px;font-size:16px;font-weight:500}
  .nav-menu a:hover{background:var(--card-2)}
}
@media (max-width:480px){.nav-cta .btn{padding:0 14px}}

/* world: a sky gradient and bottom-aligned planes. planes carry their own transparent tops. */
.sky{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,var(--sky-top) 0%,#12181d 42%,var(--sky-mid) 68%,var(--sky-low) 90%,var(--sky-glow) 100%)}
.plane{position:absolute;left:0;bottom:0;width:100%;height:auto;pointer-events:none;will-change:transform;user-select:none}
.plane[data-plane="far"]{z-index:1}
.plane[data-plane="mid"]{z-index:2}

/* home hero: copy on black, then the stage: world under a product card. the world fades to black on scroll. */
.hero{position:relative;isolation:isolate;padding-top:calc(var(--nav-h) + 44px);overflow:hidden}
.hero-copy{position:relative;z-index:4;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero h1{max-width:none}
.ln{display:block}
.hero .ln{white-space:nowrap}
@media (max-width:1080px){.hero h1{font-size:clamp(30px,5.2vw,48px)}.hero .ln{white-space:normal}}
.hero-sub{margin-top:20px;font-size:17px;color:var(--mute);max-width:52ch}
.hero-ctas{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap;justify-content:center}
.hero-stage{position:relative;isolation:isolate;margin-top:36px;padding-bottom:clamp(130px,12vw,230px)}
.hero-world,.hero-fore{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:calc(1 - var(--fade,0));transition:opacity .1s linear}
.hero-world{z-index:0}
.hero-fore{z-index:3}
.hero-world .sky{background:linear-gradient(180deg,var(--canvas) 0%,var(--canvas) 34%,#0d1216 52%,#1b2329 68%,var(--sky-mid) 82%,var(--sky-low) 94%,var(--sky-glow) 100%)}
.hero-fore::after{content:"";position:absolute;inset:auto 0 0 0;height:26%;z-index:3;
  background:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,.26) 28%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.90) 80%,var(--canvas) 100%)}
.hero-stage > .wrap{position:relative;z-index:2}
.hero-card{width:min(760px,100%);margin:0 auto;text-align:left;transform:translate3d(0,calc(var(--fade,0) * -28px),0)}
/* the answer card */
.ans{background:rgba(12,12,12,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line-2);border-radius:var(--r-card);padding:20px 22px clamp(76px,10vw,150px);box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.ans-ctl{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ans-ctl select,.ans-ctl input{height:44px;padding:0 12px;border-radius:12px;background:var(--card);border:1px solid var(--line-2);color:var(--text);font:inherit;font-size:14px}
.ans-ctl select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238a8a8a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px}
.ans-head{display:flex;justify-content:space-between;font-size:12px;color:var(--ghost);letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.ans-you{font-size:15px;color:var(--text);padding:10px 12px;border-radius:12px;background:var(--card-2);border:1px solid var(--line)}
.ans-label{color:var(--ghost);margin-right:8px;font-size:14px}
.caret{display:inline-block;width:2px;height:1em;background:var(--text);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.ans-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.ans-list li{display:flex;align-items:baseline;gap:12px;padding:9px 12px;border-radius:12px;border:1px solid transparent;color:var(--ghost);opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.ans-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ghost);flex:none;transform:translateY(-2px)}
.ans-list li.on{opacity:1;transform:none;color:var(--text);border-color:var(--line)}
.ans-list li.on::before{background:var(--green)}
.ans-list li b{font-weight:500}
.ans-tail{margin-top:16px;font-size:15px;color:var(--mute)}
.ans-tail a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.ans-note{margin-top:14px;font-size:12px;color:var(--ghost)}
@media (max-width:640px){.ans-ctl{grid-template-columns:1fr}.hero-stage{margin-top:36px}}

/* inner page hero: compact, no world, content in the first screen */
.phero{position:relative;padding:calc(var(--nav-h) + 64px) 0 clamp(40px,5vw,64px)}
.phero h1{font-size:clamp(34px,4vw,52px)}
.phero-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
.phero-inner .lead{margin-top:18px}
.phero-ctas{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.phero-inner > p.side{color:var(--mute);max-width:44ch;padding-bottom:6px}
.phero-proof{position:relative;margin-top:48px}
.phero + .section{padding-top:clamp(32px,4vw,56px)}

/* frames, cards, grids */
.frame{border-radius:var(--r-frame);border:1px solid var(--line-2);overflow:hidden;background:var(--card)}
.frame img{width:100%;height:auto}
.frame.fade{position:relative}
.frame.fade::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(rgba(0,0,0,0),var(--canvas))}
.portrait{max-width:380px;justify-self:end}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:28px}
.card h3{margin:8px 0 12px}
.card p{color:var(--mute)}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;color:var(--mute)}
.ticks li{display:flex;gap:10px;align-items:baseline}
.ticks li::before{content:"";width:14px;height:14px;border-radius:50%;border:1px solid var(--line-2);flex:none;transform:translateY(2px);background:radial-gradient(circle at 50% 50%,var(--green) 0 30%,transparent 32%)}

/* light-up prose: one paragraph at a time */
.why .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.lit{max-width:56ch;margin:0 auto;display:grid;gap:26px}
.lit p{font-size:clamp(22px,2.1vw,28px);line-height:1.35;letter-spacing:-.03em;color:var(--ghost);transition:color .6s var(--ease)}
.lit p.on{color:var(--text)}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.num{padding:28px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.num .big{font-size:56px;font-weight:400;letter-spacing:-.04em;color:var(--text-hi);line-height:1}
.num .big b{color:var(--green);font-weight:400}
.num p{margin-top:12px;color:var(--mute)}
.num-src{display:block;margin-top:14px;font-size:12px;color:var(--ghost)}

/* the builds: tab pills with a sweeping ring, gallery of framed screenshots over a strip of world */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.tabs button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;padding:10px 16px;border-radius:var(--r-pill);border:1px solid transparent;background:transparent;color:var(--mute);font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:color .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease)}
.tabs button small{font-size:12px;font-weight:400;color:var(--ghost);transition:color .4s var(--ease)}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{background:var(--card);border-color:var(--line);color:var(--text-hi)}
.tabs button[aria-selected="true"] small{color:var(--mute)}
.tabs button::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a),transparent 0 64%,var(--green) 86%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.tabs button[aria-selected="true"]::before{opacity:1;animation:sweep var(--tab-ms,6000ms) linear infinite}
[data-tabs].paused .tabs button::before{animation-play-state:paused}
@keyframes sweep{to{--a:360deg}}
.gallery{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);border:1px solid var(--line-2);overflow:hidden;background:var(--card);isolation:isolate}
.gallery .sky{background:linear-gradient(180deg,#0a0d10 0%,#1a2228 50%,var(--sky-mid) 78%,var(--sky-low) 100%)}
.gallery .plane{opacity:.9}
.gallery .plane[data-plane="far"]{bottom:4%}
.gallery::after{content:"";position:absolute;inset:auto 0 0 0;height:20%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.85));z-index:3;pointer-events:none}
.shot{position:absolute;left:8%;right:8%;top:9%;bottom:0;z-index:4;margin:0;border-radius:14px 14px 0 0;border:1px solid var(--line-3);border-bottom:0;overflow:hidden;background:var(--card);box-shadow:0 40px 90px -24px rgba(0,0,0,.9);opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.shot.on{opacity:1;transform:none}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.gallery-cap{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px;color:var(--mute);font-size:15px;text-align:center}
.gallery-cap p{display:none;max-width:60ch}
.gallery-cap p.on{display:block}
.gallery-cap p a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.gallery-cap p a:hover{text-decoration-color:var(--green)}
.gbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:background .4s var(--ease)}
.gbtn:hover{background:var(--card-2)}
.gbtn svg{width:14px;height:14px}

/* services: three sticky cards that stack, copy one side, a composed visual the other */
.stack{display:grid;gap:20px}
.stack-card{position:sticky;top:calc(var(--nav-h) + 40px + var(--i,0) * 14px)}
.svc{display:grid;grid-template-columns:1fr 1fr;min-height:540px;padding:0;overflow:hidden;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-card)}
.svc-copy{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.svc h3{font-size:clamp(24px,2.4vw,32px);margin:0}
.svc-copy > p{color:var(--mute);margin-top:14px;max-width:46ch}
.svc .ticks{margin-top:18px}
.svc .price-terms{margin-top:24px;color:var(--text);font-size:15px}
.svc .price-terms small{display:block;color:var(--ghost);font-size:13px;margin-top:2px}
.svc .btn{margin-top:18px}
.svc.flip .svc-copy{order:2}
.viz{position:relative;overflow:hidden;isolation:isolate;min-height:360px;background:#0a0d10}
.viz .sky{background:linear-gradient(180deg,#0a0d10 0%,#151c22 48%,var(--sky-mid) 80%,var(--sky-low) 100%)}
.viz .plane{opacity:.75}
.viz::after{content:"";position:absolute;inset:auto 0 0 0;height:24%;background:linear-gradient(rgba(10,13,16,0),rgba(10,13,16,.92));z-index:3;pointer-events:none}
.viz-frame,.mock{position:absolute;left:9%;right:9%;top:11%;bottom:0;z-index:4;border-radius:14px 14px 0 0;border:1px solid var(--line-3);border-bottom:0;overflow:hidden;background:var(--card);box-shadow:0 40px 90px -24px rgba(0,0,0,.9)}
.viz-frame{right:-28%}
.viz-frame img{width:100%;height:100%;object-fit:cover;object-position:left top}
.mock{background:var(--card);padding:20px 22px;display:grid;gap:12px;align-content:start}
.mock-head{display:flex;justify-content:space-between;font-size:12px;color:var(--ghost);text-transform:uppercase;letter-spacing:.04em}
.mock-big{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.04em;color:var(--text-hi);line-height:1.05}
.mock-big b{color:var(--green);font-weight:400}
.mock-sub{font-size:13px;color:var(--mute)}
.mock-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);color:var(--text);font-size:14px}
.mock-row span{color:var(--mute);font-size:13px}
.chip{flex:none;font-size:12px;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--mute)}
.chip.yes{color:var(--green);border-color:rgba(24,226,153,.35)}
.bars{display:flex;align-items:flex-end;gap:6px;height:64px;padding-top:4px}
.bars i{flex:1;background:var(--card-3);border-radius:4px 4px 0 0;height:var(--h,20%)}
.bars i:last-child{background:var(--green)}

/* process cards */
.step-n{font-size:13px;color:var(--green);letter-spacing:.04em;text-transform:uppercase}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{display:flex;flex-direction:column;padding:clamp(24px,2.4vw,32px);border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.step h3{margin:12px 0 12px}
.step > p{color:var(--mute)}
.step .meta{margin:auto 0 0;padding-top:20px;font-size:13px;color:var(--ghost)}
.step .step-n{margin:0}

/* faq: sticky left rail of tabs + ask card, right accordion */
.faq{display:grid;grid-template-columns:.4fr .6fr;gap:40px;align-items:start}
.faq-side{position:sticky;top:calc(var(--nav-h) + 40px)}
.faq-tabs{display:grid;gap:8px}
.faq-tabs button{height:44px;border-radius:var(--r-pill);border:1px solid transparent;background:transparent;color:var(--mute);font:inherit;font-size:15px;cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.faq-tabs button[aria-selected="true"]{background:var(--card);border-color:var(--line);color:var(--text-hi)}
.faq-ask{margin-top:24px}
.faq-list{display:grid;gap:12px}
.faq-list details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-frame);padding:0 20px}
.faq-list summary{list-style:none;cursor:pointer;padding:20px 0;font-size:16px;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff3f0' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");transition:transform .4s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(180deg)}
.faq-list details p{color:var(--mute);padding:0 0 20px}
.faq-list details[hidden]{display:none}

/* blog cards */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:8px;transition:border-color .4s var(--ease),transform .5s var(--ease)}
.post-card:hover{border-color:var(--line-3);transform:translateY(-4px)}
.post-card .cover{aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--card-2);border:1px solid var(--line)}
.post-card .cover img{width:100%;height:100%;object-fit:cover}
.post-card h3{font-size:20px;line-height:1.3;margin:20px 16px 12px;letter-spacing:-.02em;font-weight:500}
.post-card .meta{margin:auto 16px 16px;font-size:13px;color:var(--mute);display:flex;gap:8px;align-items:center}
.post-card .meta i{font-style:normal;color:var(--ghost)}
.post-card.wide{grid-column:1 / -1;display:grid;grid-template-columns:1.1fr .9fr;gap:0}
.post-card.wide .cover{aspect-ratio:16/10}
.post-card.wide .post-body{display:flex;flex-direction:column;justify-content:center;padding:24px 32px}
.post-card.wide h3{font-size:clamp(24px,2.4vw,32px);margin:14px 0 12px}
.post-card.wide p{color:var(--mute);margin-bottom:16px}
.post-card.wide .meta{margin:0}

/* before / after slider (case studies) */
.cmp{position:relative;border-radius:var(--r-frame);overflow:hidden;border:1px solid var(--line-2);background:var(--card);aspect-ratio:16/10;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.cmp .before{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.cmp .tag{position:absolute;bottom:12px;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;border-radius:6px;background:rgba(0,0,0,.55);color:var(--text);border:1px solid var(--line-2);pointer-events:none;z-index:3}
.cmp .tag.b{left:12px}.cmp .tag.a{right:12px;background:rgba(255,255,255,.14)}
.cmp .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--text);transform:translateX(-1px);z-index:2;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.cmp .knob{position:absolute;top:50%;left:var(--x,50%);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;display:grid;place-items:center;z-index:3;pointer-events:none;box-shadow:0 6px 16px rgba(8,9,10,.18)}
.cmp .knob svg{width:18px;height:18px}
.cmp input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;-webkit-appearance:none;appearance:none}

/* price block (inner pages) */
.price{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.price .card.hi{background:var(--card-2);border-color:var(--line-2);transform:translateY(-12px)}
.price-amt{font-size:48px;letter-spacing:-.04em;color:var(--text-hi);line-height:1}
.price-amt small{font-size:16px;color:var(--mute);letter-spacing:0}
.price-terms{margin-top:8px;color:var(--mute)}
.price-list{list-style:none;margin:20px 0 0;padding:0}
.price-list li{padding:12px 0;border-top:1px solid var(--line);color:var(--text)}

/* split + close: the last word before the footer, world under it, fading to black */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.close{position:relative;isolation:isolate;overflow:hidden;padding:clamp(88px,10vw,132px) 0 clamp(110px,11vw,195px)}
.close-world,.close-fore{position:absolute;inset:0 calc(50% - var(--rail) / 2);pointer-events:none;overflow:hidden;border-radius:var(--r-card) var(--r-card) 0 0}
.close-world{z-index:0}
.close-fore{z-index:3}
.close-world .sky{background:linear-gradient(180deg,var(--canvas) 0%,var(--canvas) 26%,#101519 52%,#1b2329 70%,var(--sky-mid) 84%,var(--sky-low) 100%)}
.close-fore::after{content:"";position:absolute;inset:auto 0 0 0;height:26%;z-index:5;
  background:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,.26) 28%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.90) 80%,var(--canvas) 100%)}
.close .wrap{position:relative;z-index:2}
.close h2{font-size:clamp(28px,3.1vw,42px);max-width:none}
.close-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,4vw,56px);align-items:start}
.close-copy .lead{margin-top:18px}
.close-panel{position:relative}
.close .form{padding:clamp(24px,2.4vw,30px) clamp(24px,2.4vw,30px) clamp(76px,9vw,124px)}
.form{display:grid;gap:14px;background:rgba(12,12,12,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line-2);border-radius:var(--r-card);padding:24px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.form label{display:block;font-size:13px;color:var(--mute);margin-bottom:6px}
.form input{width:100%;height:46px;padding:0 12px;border-radius:12px;border:1px solid var(--line-2);background:var(--card);color:var(--text);font:inherit;font-size:15px}
.form input::placeholder{color:var(--ghost)}
.form .btn{width:100%;height:48px;margin-top:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hp{position:absolute;left:-9999px}
.err{color:#ff9d8f;font-size:14px;min-height:1.2em}
.fine{font-size:12px;color:var(--ghost)}
.done{text-align:center;padding:24px 8px}
.done .tick{width:44px;height:44px;border-radius:50%;background:var(--green);color:#000;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.done p{color:var(--mute);margin-top:8px}

/* footer */
.foot{border-top:1px solid var(--line);padding:64px 0 32px;background:#000}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr .8fr;gap:32px}
.foot-brand img{height:30px;width:auto}
.foot-brand p{color:var(--mute);margin:18px 0 8px;max-width:32ch}
.foot-brand a{color:var(--text);display:inline-block;padding:12px 0}
.foot-col{display:grid;gap:6px;align-content:start}
.foot-col h4{margin-bottom:12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-hi)}
.foot-col a{color:var(--mute);font-size:15px;display:inline-block;padding:11px 0;transition:color .4s var(--ease)}
.foot-col a:hover{color:var(--text-hi)}
.foot-line{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.copy{font-size:13px;color:var(--ghost)}

/* entrances: everything arrives out of focus and settles. long ease, one beat apart. */
html.js [data-appear]{opacity:0;transform:translate3d(0,26px,0);filter:blur(10px);transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
html.js [data-appear].in{opacity:1;transform:none;filter:none}
html.js .rv{opacity:0;transform:translate3d(0,28px,0);filter:blur(10px);transition:opacity .95s var(--ease),transform .95s var(--ease),filter .95s var(--ease);transition-delay:calc(var(--i,0) * 85ms)}
html.js .rv.in{opacity:1;transform:none;filter:none}

/* headline: each line rises out from behind its own edge */
html.js [data-lines] .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
html.js [data-lines] .ln > i{display:block;font-style:normal;transform:translate3d(0,110%,0);transition:transform 1.05s var(--ease);transition-delay:calc(var(--i,0) * 110ms + 100ms)}
html.js [data-lines].in .ln > i{transform:none}
[data-lines] .ln.dim{color:var(--mute)}

/* responsive */
@media (max-width:960px){
  .svc{grid-template-columns:1fr;min-height:0}
  .svc.flip .svc-copy{order:0}
  .viz{min-height:0;order:1;padding:28px 20px 0}
  .viz-frame,.mock{position:relative;inset:auto;width:100%}
  .viz-frame{width:112%;aspect-ratio:16/10}
  .viz .plane{bottom:0}
  .gbtn{width:44px;height:44px}
  .nav-cta .btn{height:44px}
  .faq{grid-template-columns:1fr}
  .faq-side{position:relative;top:auto}
  .faq-tabs{grid-auto-flow:column;grid-auto-columns:1fr}
}
@media (max-width:860px){
  h2{font-size:28px}
  .sec-head,.phero-inner,.split,.close-grid,.cards2,.cards3,.nums,.steps,.price,.foot-grid,.posts{grid-template-columns:1fr}
  .post-card.wide{grid-template-columns:1fr}
  .post-card.wide .post-body{padding:16px 12px 12px}
  .sec-head p{justify-self:start}
  .portrait{justify-self:start;max-width:320px}
  .price .card.hi{transform:none}
  .stack-card{position:relative;top:auto}
  .tabs{gap:8px;margin-bottom:14px}
  .tabs button{min-height:48px;font-size:13px;padding:8px}
  .tabs button small{display:none}
  .gallery{aspect-ratio:4/3}
  .shot{left:5%;right:5%;top:8%}
  .shot img{object-position:left top}
  .close{padding-bottom:clamp(120px,32vw,220px)}
  .phero-inner > p.side{padding-bottom:0}
}
@media (max-width:640px){.grid2{grid-template-columns:1fr}.faq-tabs{grid-auto-flow:row}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-appear],html.js .rv{opacity:1;transform:none;transition:none}
  .plane{transform:none!important}
  .hero-world{opacity:1}
  .hero-card{transform:none}
  .lit p{color:var(--text)}
  .stack-card{position:relative;top:auto}
  .ans-list li{opacity:1;transform:none;color:var(--text)}
  .caret{display:none}
  .tabs button[aria-selected="true"]::before{animation:none;opacity:0}
  .shot{transition:none}
}


/* ============================================================
   v4.2 interaction layer. Nothing here moves more than a few
   pixels; the point is that every surface answers the pointer.
   ============================================================ */

/* pointer-tracked light. sits above the card's own background, under its text. */
.glow{position:relative;isolation:isolate}
.glow::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .55s var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.06),transparent 68%)}
.glow:hover::before,.glow:focus-within::before{opacity:1}

/* lift: cards that are not load-bearing in a sticky stack */
.num,.step,.post-card,.faq-ask{transition:border-color .55s var(--ease),transform .6s var(--ease),background .55s var(--ease)}
.num:hover,.step:hover,.faq-ask:hover{border-color:var(--line-2);transform:translate3d(0,-3px,0)}
.post-card:hover{border-color:var(--line-2)}
.svc{transition:border-color .55s var(--ease)}
.svc:hover{border-color:var(--line-3)}
.step:hover .step-n{color:var(--green)}

/* buttons: a sheen crosses once on hover */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;transform:translate3d(-120%,0,0);transition:transform .9s var(--ease);
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.20) 50%,transparent 78%)}
.btn-primary::after{background:linear-gradient(100deg,transparent 22%,rgba(0,0,0,.09) 50%,transparent 78%)}
.btn:hover::after{transform:translate3d(120%,0,0)}

/* links: the rule drops away from the text on hover */
p a{transition:text-decoration-color .4s var(--ease),text-underline-offset .4s var(--ease)}
p a:hover{text-underline-offset:5px}
.sec-head p a.p-link,.foot-col a,.foot-brand a{transition:color .4s var(--ease)}

/* nav: a pill fades in under the pointer */
.nav-links a{position:relative;isolation:isolate}
.nav-links a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(255,255,255,.07);opacity:0;transform:scale(.86);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.nav-links a:hover::before,.nav-links a[aria-current="page"]::before{opacity:1;transform:none}
.nav-logo img{transition:opacity .4s var(--ease)}
.nav-logo:hover img{opacity:.72}

/* the nav arrives with the page */
html.js .nav-bar > *{opacity:0;animation:navIn .9s var(--ease) forwards}
html.js .nav-bar > *:nth-child(1){animation-delay:.06s}
html.js .nav-bar > *:nth-child(2){animation-delay:.14s}
html.js .nav-bar > *:nth-child(3){animation-delay:.22s}
@keyframes navIn{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}

/* the eyebrow dot breathes */
.eyebrow::before{animation:dot 3.4s var(--ease) infinite}
@keyframes dot{0%,100%{box-shadow:0 0 0 0 rgba(24,226,153,.42)}50%{box-shadow:0 0 0 5px rgba(24,226,153,0)}}

/* imagery: a slow push-in, never a jump */
.post-card .cover img,.shot img,.frame img{transition:transform 1.3s var(--ease)}
.post-card:hover .cover img{transform:scale(1.045)}
.gallery:hover .shot.on img{transform:scale(1.02)}
.card:hover .frame img{transform:scale(1.03)}
.gallery-cap p.on{animation:capIn .55s var(--ease) both}
@keyframes capIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

/* a null answer is the whole sales point, so it gets a row of its own rather than dead space */
.ans-list li.none{border-style:dashed;border-color:var(--line-2);color:var(--mute)}
.ans-list li.none::before{background:transparent;box-shadow:inset 0 0 0 1px var(--ghost)}

/* answers: rows already stagger in; give the card a lit rim while it is being used */
.ans{transition:border-color .6s var(--ease)}
.ans:focus-within{border-color:var(--line-3)}

/* faq: the panel opens rather than snaps */
.faq-list details{transition:border-color .45s var(--ease),background .45s var(--ease)}
.faq-list details:hover{border-color:var(--line-2)}
.faq-list details[open]{background:var(--card-2);border-color:var(--line-2)}
.faq-list summary::after{transition:transform .45s var(--ease),border-color .45s var(--ease),background-color .45s var(--ease)}
.faq-list summary:hover::after{border-color:var(--line-3)}
.faq-list details > p{opacity:0;transform:translate3d(0,-8px,0);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.faq-list details[open] > p{opacity:1;transform:none;transition-delay:.05s}
@supports selector(::details-content){
  html{interpolate-size:allow-keywords}
  .faq-list details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete;transition-behavior:allow-discrete}
  .faq-list details[open]::details-content{block-size:auto}
}

/* form fields answer the pointer before they are focused */
.form input,.ans-ctl select,.ans-ctl input{transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.form input:hover,.ans-ctl select:hover,.ans-ctl input:hover{border-color:var(--line-3)}
.form input:focus{border-color:var(--green)}
.gbtn{transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.gbtn:hover{border-color:var(--line-3);transform:scale(1.06)}
.gbtn:active{transform:scale(.94)}

@media (hover:none){
  .glow::before{display:none}
  .num:hover,.step:hover,.faq-ask:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html.js [data-lines] .ln > i{transform:none;transition:none}
  .glow::before,.btn::after{display:none}
  .eyebrow::before{animation:none}
  .num:hover,.step:hover,.faq-ask:hover,.gbtn:hover{transform:none}
  .post-card:hover .cover img,.gallery:hover .shot.on img,.card:hover .frame img{transform:none}
  .gallery-cap p.on{animation:none}
  html.js .nav-bar > *{opacity:1;animation:none}
  .faq-list details > p{opacity:1;transform:none}
}

/* blog index: category tabs and a search field */
.blog-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:22px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.blog-tabs{display:flex;gap:8px;flex-wrap:wrap}
.blog-tabs button{height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid transparent;background:transparent;color:var(--mute);font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.blog-tabs button:hover{color:var(--text)}
.blog-tabs button[aria-selected="true"]{background:var(--card);border-color:var(--line);color:var(--text-hi)}
.blog-search{position:relative;display:flex;align-items:center}
.blog-search svg{position:absolute;left:15px;width:16px;height:16px;color:var(--ghost);pointer-events:none}
.blog-search input{height:44px;width:min(280px,64vw);padding:0 14px 0 40px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--card);color:var(--text);font:inherit;font-size:15px;transition:border-color .4s var(--ease)}
.blog-search input:hover{border-color:var(--line-3)}
.blog-search input:focus{border-color:var(--green);outline:none}
.blog-search input::placeholder{color:var(--ghost)}
.post-card[hidden]{display:none!important}
.blog-empty{grid-column:1 / -1;color:var(--mute);padding:8px 0 40px}
@media (max-width:640px){.blog-bar{align-items:stretch;flex-direction:column}.blog-search input{width:100%}}

/* ---- v4.2b: world plates, and the sticky stack ---------------------------------- */

/* The street plate is a painted plate that stops on a ruler-straight edge at the kerb. Anchored
   at the foot of a clipped box that edge was hidden, but the moment parallax carries it off that
   foot it shows as a horizontal cut across the page. Dissolve the plate's own base instead, so
   the fade travels with it wherever the scroll puts it.
   Hero only. The close section keeps its street solid on the ground — there it reads as the floor
   of the page rather than as something leaving, and its own ::after already lands it on black. */
.hero-fore .plane[data-plane="mid"]{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,.5) 94%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,.5) 94%,transparent 100%)}

/* The skyline sits behind that dissolving street. Its own base is a hard waterline, so wherever
   the street has thinned out the waterline read as a second horizon — which is why the plate was
   pulled from the hero entirely. Dissolve its base too, over a longer run than the street's so the
   two never resolve into parallel edges, and the depth survives without the extra horizon. */
.hero-world .plane[data-plane="far"]{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.55) 80%,transparent 97%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.55) 80%,transparent 97%)}

/* The street now outruns the page and climbs over the card, so it vacates a strip at the foot
   of its box. Deepen the ground band that fills that strip, so what it leaves behind is night
   rather than the horizon glow burning through from the sky plate behind it. */
.hero-fore::after{height:38%;
  background:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,.30) 30%,rgba(0,0,0,.66) 56%,var(--canvas) 86%,var(--canvas) 100%)}

/* That ground band lives inside .hero-fore, so it fades out with it — and once it is no longer
   opaque, whatever the world's overflow:hidden clips at the foot of the stage lands as a hard
   line against the page. This band sits on the stage instead, above both world layers and
   outside the fade, so the hero always meets the next section on solid black. */
.hero-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:4;pointer-events:none;
  height:clamp(120px,16vw,260px);
  background:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 46%,var(--canvas) 78%,var(--canvas) 100%)}

/* The service cards stack: each one pins under the nav while the next rides up and covers it,
   stepped 14px apart so the buried edges stay legible. Two things had killed it.
   1. .stack was a grid, so each card's containing block was its own row — a sticky box with
      nowhere to travel. In normal flow the containing block is the whole stack.
   2. .glow is attached by script to every .card, and its position:relative was overriding
      position:sticky (same specificity, later in the file). Sticky is itself a positioned
      value, so it already gives .glow::before the containing block it needs.
   The media queries are repeated here because this block sits after them in the cascade. */
.stack{display:block}
.stack-card + .stack-card{margin-top:20px}
.stack-card{position:sticky}
@media (max-width:860px){.stack-card{position:relative}}
@media (prefers-reduced-motion:reduce){.stack-card{position:relative}}

/* The city is fixed, so it is stated rather than typed. Sized like the control it replaced so the
   three-column grid still lines up, but with no border and no cursor to invite an edit. */
.ans-where{display:flex;align-items:center;height:44px;padding:0 4px;color:var(--mute);font-size:14px;white-space:nowrap}
.ans-where::before{content:"in";color:var(--ghost);margin-right:6px}
@media (max-width:640px){.ans-where{height:auto;padding:2px 0}}

/* Below the rail breakpoint there is no room for the world to sit in an inset panel — the guides
   are hidden and the content column runs to the page gutters, so an inset left a dead strip down
   each edge of every close band. Full-bleed instead. This must come after the base .close-world
   rule: same specificity, so order decides. */
@media (max-width:1279px){
  .close-world,.close-fore{inset:0;border-radius:0}
}