/* Measured against fora.so, 2026-09-09. Content and artwork remain Locally Visible's.
   Three layout regimes: phone <810, tablet 810–1279, desktop >=1280. */
:root{--maxw:1080px;--gutter:24px;--rail:min(100%,1600px);--r-card:16px;--nav-h:64px;--mute:rgba(255,255,255,.65);--ghost:rgba(255,255,255,.25);--line:rgba(255,255,255,.10);--ease:cubic-bezier(.16,1,.3,1)}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:clip}
body{font-size:16px;line-height:1.5;letter-spacing:-.02em}
.wrap{width:calc(100% - 48px);max-width:var(--maxw);padding:0}
.guides{display:none}
main>.section,main>.hero,.close,.foot{max-width:1600px;margin-inline:auto;border-inline:0;box-shadow:inset 1px 0 var(--line),inset -1px 0 var(--line)}
h1{font-size:56px;line-height:1.3;font-weight:400;letter-spacing:-.04em;text-wrap:initial}
h2{font-size:40px;line-height:1.35;letter-spacing:-.04em}
h3{font-size:28px;line-height:1.35;letter-spacing:-.03em}
h1 .dim,h2 .dim{color:var(--mute)}
.section{padding:120px 0}.section.tight{padding:80px 0}
.sec-head{grid-template-columns:1.48fr 1fr;gap:64px;align-items:end;margin-bottom:80px}
.sec-head p{max-width:344px}.sec-head>div{max-width:522px}
.eyebrow{height:30px;font-size:14px;font-weight:400;margin-bottom:24px;padding:4px 16px;gap:10px;color:var(--text)}
.eyebrow::before{background:rgba(255,255,255,.25);animation:none;box-shadow:none}
.btn{height:48px;font-size:14px;font-weight:400;padding:0 32px;transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.btn-primary{background:rgba(255,255,255,.85);color:#000}.btn-primary:hover{background:#fff}
.btn::after{display:none}.btn:active{transform:scale(.98)}
.btn-glass{background:rgba(255,255,255,.08)}
.nav-bar{width:calc(100% - 48px);max-width:var(--maxw);padding:0;height:64px;grid-template-columns:auto 1fr auto;gap:28px}
.nav-links{justify-content:center;gap:8px}.nav-links a{padding:0 10px;color:rgba(255,255,255,.8);font-weight:400}
.nav-logo img{height:26px;max-width:180px}.nav-cta .btn{height:36px;background:rgba(255,255,255,.08);color:var(--text);border-color:var(--line);padding:0 18px}
.nav::before{inset:0 0 -32px;border:0!important;background:linear-gradient(#000 0%,rgba(0,0,0,.78) 42%,transparent 100%);backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-links a::before{display:none}.nav-links a:hover{color:#fff}
html.js .nav-bar>*{animation:none;opacity:1}
html.js .nav{animation:reference-nav 1s cubic-bezier(.44,0,.56,1) both}
@keyframes reference-nav{from{opacity:.001;transform:translateY(-36px)}to{opacity:1;transform:none}}

/* The scene is one clipped coordinate system. The card lags by .20 scroll px;
   skyline lags by .31; foreground follows document flow. No whole-scene fade. */
.hero{padding-top:160px;overflow:clip;background:radial-gradient(200% 83% at 50% 0%,#1b2228 0%,#353f44 42%,#d39794 100%)}
.hero-copy{z-index:2;padding:0}.hero-copy>.eyebrow{margin:0 0 24px}.hero-copy>.eyebrow::before{display:none}
.hero h1{max-width:960px;width:100%;font-size:56px;line-height:1.3}.hero .ln{white-space:normal}
.hero-sub{font-size:14px;line-height:21px;color:var(--text);max-width:420px;margin-top:24px}
.hero-ctas{margin-top:48px;gap:12px}
.hero-stage{margin-top:80px;padding:0;isolation:auto}
.hero-stage>.wrap{z-index:1}.hero-card{width:960px;max-width:100%;height:676px;transform:translate3d(0,var(--card-y,0px),0);will-change:transform}
.hero-world,.hero-fore{opacity:1;transition:none;overflow:visible}
.hero-world .sky{display:none}.hero-world{z-index:0}.hero-fore{z-index:2}
.hero-world .plane[data-plane=far]{width:100%;max-width:none;height:auto;bottom:0;transform:translate3d(0,var(--far-y,0px),0)!important}
.hero-fore .plane[data-plane=mid]{width:100%;max-width:none;height:auto;bottom:0;transform:none!important;mask-image:linear-gradient(#000 0%,#000 74%,rgba(0,0,0,.85) 86%,transparent 100%)}
.hero-fore::after{height:110px;background:linear-gradient(transparent,#000 80%);z-index:1}
.hero-stage::after{height:100px;background:linear-gradient(transparent,#000 90%);z-index:3}
.ans{height:100%;padding:28px 32px 180px;border-radius:24px;background:rgba(18,18,18,.92);backdrop-filter:blur(12px);box-shadow:none;overflow:hidden}
.ans-ctl{grid-template-columns:minmax(0,1fr) 110px auto}.ans-ctl select{min-width:0;width:100%}
.ans-list{gap:12px}.ans-list li{min-height:44px}.ans-note{line-height:1.5}
html.js .hero [data-lines] .ln{overflow:visible;padding:0;margin:0}
html.js .hero [data-lines] .ln>i{transform:none;transition:none;font-style:normal}
html.js .hero [data-lines]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:.1s}
html.js .hero [data-lines].in{opacity:1;transform:none}
html.js [data-appear],html.js .rv{filter:none;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0)*100ms)}
html.js [data-appear].in,html.js .rv.in{opacity:1;transform:none;filter:none}

/* Paragraphs take turns at full brightness and return to 25% after their beat. */
.why{padding:180px 0}.why .wrap{width:min(640px,calc(100% - 48px));display:block;text-align:left}
.lit{max-width:none;gap:36px}.lit p{font-size:28px;line-height:1.35;letter-spacing:-.03em;font-weight:600;color:#fff;opacity:.25;transition:opacity .6s var(--ease)}
.lit p.on{color:#fff;opacity:1}
#work{padding:180px 0 120px}.builds{padding:0}
.tabs{gap:8px;margin-bottom:24px}.tabs button{min-height:40px;padding:8px 16px;font-size:16px;font-weight:400}.tabs button small{display:none}
.tabs button::before{background:conic-gradient(from var(--a),transparent 0 64%,rgba(255,255,255,.6) 86%,transparent 100%)}
.gallery{aspect-ratio:1.88;border-radius:24px}.gallery .sky{background:radial-gradient(200% 100% at 50% 0%,#26343e,#d8a5a0)}
.shot{left:10%;right:10%;top:10%;bottom:0;border-radius:16px 16px 0 0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.shot.on{transform:none}.gallery:hover .shot.on img{transform:none}
.gallery-cap{position:relative;min-height:56px;margin-top:16px;gap:24px;font-size:14px}.gallery-cap p{max-width:760px}
.gallery-mobile-label{display:none}.gbtn{width:40px;height:40px}

/* Transform an inner surface, never the sticky element itself. */
#services{padding:80px 0 0}.stack{display:block;padding-bottom:48px}
.svc.stack-card{position:sticky!important;top:120px!important;z-index:1;display:block;border:0;background:none;padding:0;height:628px;min-height:0;overflow:visible;transform:none!important;opacity:1!important;filter:none!important;transition:none!important;isolation:auto}
.svc.stack-card+.svc.stack-card{margin-top:48px}
.svc-surface{height:100%;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:8px;background:rgba(15,15,15,.94);border:1px solid var(--line);border-radius:16px;overflow:clip;transform-origin:50% 50%;will-change:transform,opacity}
.svc-copy{padding:32px 32px 24px;justify-content:flex-start;min-width:0}.svc h3{font-size:28px;line-height:1.35;margin:16px 0 20px}
.svc-copy>.eyebrow{background:none;border:0;padding:0;margin:12px 0 8px;font-size:14px;white-space:normal;height:auto}
.svc-copy>p{font-size:14px;line-height:21px;margin:0;max-width:none}.svc .ticks{font-size:14px;line-height:1.5;margin-top:20px}.svc .price-terms{margin-top:auto;padding-top:20px}.svc .btn{margin-top:16px;height:40px;padding:0 20px}
.svc.flip .svc-copy{order:2}.svc .viz{min-height:0;height:100%;padding:0;order:initial;border-radius:4px;background:#26343e}
.viz .sky{background:radial-gradient(200% 100% at 50% 0%,#293840,#a78380)}
.viz-frame,.mock{position:absolute;left:8%;right:8%;top:10%;bottom:0;width:auto;aspect-ratio:auto}
.viz-frame{right:-26%}.mock{padding:24px;align-content:start;gap:18px}
.svc:last-child .mock{transform:translateY(var(--float-y,0px));will-change:transform}
.svc .viz{--image-enter:1;opacity:var(--image-enter);transition:opacity 1s var(--ease)}
.steps{gap:16px}.step{padding:32px}.step:hover,.num:hover,.faq-ask:hover,.post-card:hover{transform:none}
.faq{grid-template-columns:344px minmax(0,1fr);gap:48px}.faq-side{position:relative;top:auto;align-self:stretch;display:flex;flex-direction:column}.faq-tabs{display:grid;grid-auto-flow:row;gap:10px}.faq-tabs button{height:40px;font-size:16px}.faq-ask{margin-top:auto;padding:36px}
.faq-list{gap:8px}.faq-list details{padding:0 36px}.faq-list summary{min-height:106px;padding:30px 0;font-size:16px}.faq-list summary::after{width:32px;height:32px}.faq-list details p{font-size:14px;line-height:21px;padding:0 0 36px}
.posts{gap:8px}.post-card{border-radius:16px}.post-card .cover{aspect-ratio:1.4;border-radius:8px}.post-card h3{font-size:24px;line-height:1.35;font-weight:400;margin:28px 24px}.post-card .meta{margin:0 24px 24px}
.close{padding:180px 0 220px;min-height:910px;background:linear-gradient(#000,#1b2228)}
.close-world,.close-fore{inset:0;border-radius:0}.close-world .sky{background:none}.close-world .plane[data-plane=far]{opacity:.4;mask-image:linear-gradient(#000,transparent)}
.close-grid{grid-template-columns:344px minmax(0,1fr);gap:80px;align-items:start}.close h2{font-size:40px;line-height:1.35}.close-copy .lead{font-size:14px;line-height:21px;color:var(--text)}.close-copy .ticks{font-size:14px}
.close .form{padding:32px 32px 100px;background:rgba(255,255,255,.04);backdrop-filter:blur(12px)}
.close-fore{z-index:3}.close-fore .plane[data-plane=mid]{width:100%;max-width:none;height:auto;bottom:0;transform:translateY(var(--close-y,0px))!important;mask-image:linear-gradient(#000 70%,transparent 100%)}
.close-fore::after{height:24px;background:#000}.foot{padding:64px 0}.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}.foot-line{margin-top:48px;padding-top:48px}
.glow{position:relative;isolation:isolate}.glow::before{inset:-1px;z-index:2;padding:1px;background:radial-gradient(735px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.25),transparent);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask-composite:xor;opacity:var(--glow-alpha,0);transition:none;border-radius:inherit;pointer-events:none}
.glow:hover::before,.glow:focus-within::before{opacity:var(--glow-alpha,1)}

@media(min-width:810px) and (max-width:1279.98px){
 :root{--maxw:720px}h1{font-size:40px;line-height:52px}h2{font-size:36px;line-height:48.6px}
 .hero{padding-top:140px}.hero h1{max-width:620px;font-size:40px;line-height:52px}.hero-card{height:507px}.ans{padding:20px 24px 110px}.ans-list{gap:6px}.ans-list li{min-height:36px;padding:6px 10px;font-size:14px}.ans-note{font-size:12px}
 .section{padding:120px 0}.why{padding:120px 0}.why .wrap{max-width:560px}.lit p{font-size:24px;line-height:32.4px}
 .sec-head{grid-template-columns:1.1fr 1fr;gap:40px;margin-bottom:80px}.sec-head>p{font-size:16px}
 #work{padding:120px 0}.gallery{aspect-ratio:1.88}
 .svc.stack-card{height:560px}.svc-surface{gap:8px}.svc-copy{padding:20px}.svc h3{font-size:24px;line-height:1.35;margin:8px 0 16px}.svc .ticks{margin-top:12px;font-size:13px}.svc-copy>p{font-size:14px}.svc .price-terms{padding-top:12px}.svc .btn{font-size:13px;padding:0 14px}.mock{padding:16px;gap:12px}.mock-row{font-size:12px;gap:4px}.mock-row span{font-size:11px}.mock-big{font-size:26px}
 .faq{grid-template-columns:220px minmax(0,1fr);gap:24px}.faq-list details{padding:0 24px}.faq-list summary{min-height:96px}.faq-ask{padding:24px}
 .close{padding:120px 0 170px;min-height:820px}.close-grid{grid-template-columns:250px 1fr;gap:40px}.close h2{font-size:36px}.close .grid2{grid-template-columns:1fr}.close .form{padding:24px 24px 90px}.posts,.steps{grid-template-columns:repeat(3,1fr)}.post-card h3{font-size:20px;margin:20px 12px}.post-card .meta{margin:0 12px 16px}.step{padding:22px}.step h3{font-size:24px}.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:24px}
}
/* Fora uses the compact navigation throughout tablet, not only narrow phones. */
@media(max-width:1279.98px){
 .nav-bar{display:flex;justify-content:space-between;height:68px}.nav-links,.nav-cta>.btn{display:none}.nav-toggle{display:flex;width:36px;height:36px}.nav-toggle span{height:1.5px}.nav-toggle span::before{top:-5px;height:1.5px}.nav-toggle span::after{display:none}
 .nav-menu{display:flex;position:absolute;left:0;right:0;top:68px;height:auto;max-height:0;overflow:hidden;visibility:hidden;padding:0 24px;flex-direction:column;align-items:center;gap:16px;background:rgba(0,0,0,.92);backdrop-filter:blur(18px);border:0;border-radius:0;box-shadow:none;opacity:0;transform:translateY(-12px);transition:opacity .6s var(--ease),transform .6s var(--ease),max-height .6s var(--ease),visibility .6s}
 .nav-menu.open{display:flex;max-height:calc(100dvh - 68px);visibility:visible;padding-block:12px 32px;opacity:1;transform:none;overflow-y:auto}.nav-menu a{display:flex;justify-content:center;min-height:40px;font-size:16px;flex-shrink:0}.nav-menu a:last-child{border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.07);padding:0 20px;font-size:14px;margin-top:8px}
 .nav:has(.nav-menu.open){background:rgba(0,0,0,.95)}.nav-toggle[aria-expanded=true] span{transform:rotate(45deg)}.nav-toggle[aria-expanded=true] span::before{top:0;transform:rotate(-90deg)}
}
@media(max-width:809.98px){
 :root{--maxw:720px}h1{font-size:36px;line-height:46.8px}h2{font-size:32px;line-height:43.2px}h3{font-size:24px;line-height:32.4px}
 .wrap{width:calc(100% - 48px)}.section,.section.tight{padding:80px 0}.sec-head{grid-template-columns:1fr;gap:24px;margin-bottom:56px;align-items:start}.sec-head>p{max-width:none;justify-self:start}.sec-head>div{max-width:none}
 .hero{padding-top:120px}.hero h1{max-width:620px;font-size:36px;line-height:46.8px}.hero h1 .ln{display:inline!important}.hero h1 .ln>i{display:inline!important}.hero h1 .ln+.ln::before{content:' '}.hero-sub{margin-top:24px;max-width:400px}.hero-ctas{margin-top:48px;gap:12px}.hero-ctas .btn{padding:0 22px}.hero-stage{margin-top:80px}
 .hero-card{height:auto;min-height:540px;aspect-ratio:.756322;max-height:952px;transform:translate3d(0,var(--card-y,0px),0)}.ans{height:100%;min-height:540px;padding:18px 18px 145px;border-radius:24px}.ans-ctl{grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:14px}.ans-where{grid-column:1;grid-row:2;height:24px;padding:0}.ans-ctl>.btn{grid-column:2;grid-row:1/3;align-self:center;padding:0 16px}.ans-ctl select{font-size:12px;padding-left:10px;height:40px}.ans-head{font-size:11px}.ans-you{font-size:14px}.ans-list li{font-size:14px;padding:7px 8px;gap:8px;min-height:36px}.ans-tail{font-size:14px}.ans-note{font-size:12px}
 .hero-world .plane[data-plane=far]{width:calc(100% + 480px);left:-240px}.hero-fore .plane[data-plane=mid]{width:calc(100% + 240px);left:-120px}.hero-stage::after{height:64px}.hero-fore::after{height:64px}
 .why .wrap{max-width:560px}.lit{gap:36px}.lit p{font-size:20px;line-height:27px}
 #work{padding:80px 0}.builds>.tabs{display:none}.gallery{aspect-ratio:1.26;border-radius:16px}.shot{left:8%;right:8%;top:12%}.shot img{object-position:left top}.gallery-mobile-label{display:block;position:absolute;left:48px;right:48px;top:0;text-align:center;font-size:16px;color:var(--text)}.gallery-cap{padding-top:44px;margin-top:16px;align-items:start}.gallery-cap>.gbtn{position:absolute;top:-4px}.gallery-cap>[data-prev]{left:0}.gallery-cap>[data-next]{right:0}.gallery-cap p{font-size:14px;text-align:left;animation:none}
 #services{padding:80px 0 0}.stack{padding-bottom:0}.svc.stack-card{position:relative!important;top:auto!important;height:auto;min-height:0}.svc.stack-card+.svc.stack-card{margin-top:24px}.svc-surface{height:auto;grid-template-columns:1fr;gap:0;transform:none!important;opacity:1!important;padding:8px}.svc .svc-copy,.svc.flip .svc-copy{order:2;padding:28px 20px}.svc .viz{order:1;height:auto;aspect-ratio:1/1.15;min-height:300px}.svc h3{font-size:24px;line-height:32.4px;margin:24px 0}.svc-copy>.eyebrow{margin:0}.svc-copy>p{font-size:14px;line-height:21px}.svc .price-terms{margin-top:24px;padding-top:0}.svc .ticks{margin-top:20px}.svc .btn{margin-top:24px}.viz-frame,.mock{position:absolute;left:8%;right:8%;top:10%;bottom:0;width:auto}.viz-frame{right:-26%}.mock{padding:18px;gap:14px}.mock-row{font-size:13px}.mock-row span{font-size:12px}.svc:last-child .mock{transform:none}
 .faq{grid-template-columns:1fr;gap:32px}.faq-side{position:relative}.faq-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.faq-tabs button{padding:0 16px;font-size:14px}.faq-ask{display:none}.faq-list details{padding:0 24px}.faq-list summary{min-height:88px;font-size:14px;gap:12px;padding:24px 0}.faq-list details p{padding-bottom:28px}
 .posts,.steps,.nums,.cards2,.cards3{grid-template-columns:1fr}.posts{gap:24px}.post-card .cover{aspect-ratio:1.4}.post-card h3{font-size:24px;margin:28px 24px}.post-card .meta{margin:0 24px 24px}
 .close{min-height:0;padding:80px 0 160px}.close-grid{grid-template-columns:1fr;gap:48px}.close h2{font-size:32px;line-height:43.2px}.close-copy .lead{font-size:14px}.close .form{padding:24px 24px 56px}.close .grid2{grid-template-columns:1fr}.close-fore .plane[data-plane=mid]{width:calc(100% + 240px);left:-120px}.close-world .plane{display:none}.close-fore::after{height:20px}.foot-grid{grid-template-columns:1fr 1fr;gap:40px 24px}.foot-brand{grid-column:1/-1}.foot-line{padding-top:32px;margin-top:40px}.foot{padding:48px 0}
}
@media(max-width:374px){.ans{padding-inline:12px}.ans-ctl select{font-size:11px}.ans-ctl>.btn{padding:0 12px}.hero-ctas{flex-direction:column;align-items:center}.hero-ctas .btn{min-width:220px}.mock{padding:14px}.mock-row{font-size:12px}.mock-row span{font-size:11px}}
@media(prefers-reduced-motion:reduce){html.js .nav{animation:none}html.js [data-appear],html.js .rv,html.js .hero [data-lines]{opacity:1;transform:none;filter:none;transition:none}.hero-card,.hero-world .plane,.close-fore .plane{transform:none!important}.svc.stack-card{position:relative!important;top:auto!important}.svc-surface{transform:none!important;opacity:1!important}.svc:last-child .mock{transform:none}.lit p{opacity:1}.glow::before{display:none}.hero [data-lines] .ln>i{transform:none!important}.faq-list details>p{opacity:1;transform:none}.tabs button::before{animation:none!important}}

@property --close-y{syntax:"<length>";inherits:true;initial-value:36px}
.close{transition:--close-y 1s var(--ease)}.close.landscape-in{--close-y:0px!important}
/* Independent entrance and scroll transforms compose without fighting each other. */
.hero{background:#000}
.hero-copy>.eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.08)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(200% 83% at 50% 0%,#1b2228 0%,#353f44 42%,#d39794 100%)}
html.js .hero::before{animation:reference-scene .5s var(--ease) both}
html.js .hero-world .plane[data-plane=far]{animation:reference-hill 1s var(--ease) both}
@keyframes reference-scene{from{opacity:.001}to{opacity:1}}
@keyframes reference-hill{from{opacity:.001;translate:0 72px}to{opacity:1;translate:0 0}}
html.js .svc .viz{opacity:0;transition:opacity 1s var(--ease)}
html.js .svc .viz>:not(.sky){scale:1.1;transition:scale 1s var(--ease)}
html.js .svc .viz.image-in{opacity:1}
html.js .svc .viz.image-in>:not(.sky){scale:1}
@media(prefers-reduced-motion:reduce){html.js .hero::before,html.js .hero-world .plane[data-plane=far]{animation:none}html.js .svc .viz{opacity:1;transition:none}html.js .svc .viz>:not(.sky){scale:1;transition:none}}

/* Review corrections: full-width scenery, protected content, and inner-page layouts. */
html{scrollbar-gutter:stable}
html.menu-open{overflow:hidden}
html.lenis.lenis-stopped{overflow:hidden}
.nav{transition:background-color .24s ease}
main>.hero,.close,.foot{max-width:none;width:100%;box-shadow:none}
.hero-stage{padding-bottom:clamp(200px,20vw,380px)}
.hero-card{height:auto;min-height:676px;max-height:none;aspect-ratio:auto}
.ans{height:auto;min-height:676px;padding-bottom:180px}
.ans-note{position:relative}

/* The FAQ sidebar pins as one unit, within its own question list. */
@media(min-width:810px){
 .faq-side{position:sticky;top:104px;align-self:start;gap:32px;max-height:calc(100dvh - 128px);overflow-y:auto;scrollbar-width:thin}
 .faq-ask{margin-top:0;flex-shrink:0}
}

/* The scene occupies its own band below the copy and form. */
.close{--closing-scene-height:clamp(220px,28.41vw,640px);padding-bottom:calc(var(--closing-scene-height) + 32px);margin-block:0;background:linear-gradient(#000 30%,#1b2228 78%,#000 100%)}
.close-world{top:auto;height:calc(var(--closing-scene-height) + 100px);z-index:0}
.close-fore{top:auto;height:var(--closing-scene-height);z-index:1;overflow:hidden}
.close-fore .plane[data-plane=mid]{mask-image:none}
.close-fore::after{display:none}
.close::after{content:"";position:absolute;inset:auto 0 0;height:40px;background:linear-gradient(transparent,#000);z-index:1;pointer-events:none}
.close .wrap{z-index:2}
.close .form{padding-bottom:32px;background:rgba(15,15,15,.92)}
.close .fine{color:var(--mute)}
.foot{margin-top:0;border-top:0}

/* Text-only cards have natural heights and their own reading layout. */
.stack:has(>.stack-card:not(.svc)){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-bottom:0}
.stack-card:not(.svc){position:relative!important;top:auto!important;min-height:0;height:auto;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:32px;margin:0;background:var(--card);border:1px solid var(--line);border-radius:16px}
.stack-card:not(.svc)+.stack-card:not(.svc){margin-top:0}
.stack-card:not(.svc) h3{font-size:24px;line-height:1.35;margin:0}
.stack-card:not(.svc)>p{font-size:15px;line-height:1.6;margin:0}
.stack-card:not(.svc)>.eyebrow{font-size:13px;background:rgba(255,255,255,.04)}
.phero{padding:160px 0 80px}
.phero-inner{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:64px;align-items:end}
.phero h1{font-size:56px;line-height:1.2;letter-spacing:-.04em}
.phero-inner>p.side{max-width:344px;justify-self:end;font-size:16px;line-height:1.6}
.phero-ctas{margin-top:32px;gap:12px}
:is(.phero,.price,.stack-card:not(.svc)) .eyebrow{max-width:100%;height:auto;min-height:30px;padding-block:4px;line-height:20px}
.eyebrow::before{flex-shrink:0}
.post-card,.post-card .post-body{min-width:0;overflow-wrap:anywhere}
.phero+ .section{padding-top:64px}
html.js .phero [data-lines] .ln{overflow:visible;padding:0;margin:0}
html.js .phero [data-lines] .ln>i{transform:none;transition:none}
html.js .phero [data-lines]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:.1s}
html.js .phero [data-lines].in{opacity:1;transform:none}

@media(min-width:810px) and (max-width:1279.98px){
 .hero-card,.ans{min-height:507px}.ans{padding-bottom:110px}
 .phero{padding:140px 0 64px}.phero h1{font-size:40px;line-height:1.3}.phero-inner{gap:40px;grid-template-columns:1.1fr 1fr}
 .stack:has(>.stack-card:not(.svc)){grid-template-columns:1fr}
 .stack-card:not(.svc){padding:32px;max-width:100%}
}
@media(max-width:1279.98px){
 html.js .nav{animation:none}
 .nav-menu,.nav-menu.open{height:auto;max-height:calc(100dvh - 68px);padding:12px 24px 32px;overflow-y:auto;overscroll-behavior:contain}
 .nav-menu{opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,-8px,0);transition:opacity .22s ease,transform .28s var(--ease),visibility 0s linear .28s}
 .nav-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0);transition-delay:0s}
}
@media(max-width:809.98px){
 .hero-stage{padding-bottom:200px}.hero-card,.ans{min-height:540px}.ans{padding-bottom:145px}
 .faq-side{position:relative;top:auto;max-height:none;overflow:visible;gap:0}
 .close{--closing-scene-height:220px;padding-bottom:252px}
 .close .form{padding-bottom:24px}
 .phero{padding:120px 0 56px}.phero h1{font-size:36px;line-height:1.3}
 .phero-inner{grid-template-columns:1fr;gap:32px}.phero-inner>p.side{max-width:none;justify-self:start}
 .phero-ctas{margin-top:28px}.phero-ctas .btn{max-width:100%;height:auto;min-height:48px;padding:12px 22px;text-align:center}
 .phero+.section{padding-top:40px}
 .stack:has(>.stack-card:not(.svc)){grid-template-columns:1fr}
 .stack-card:not(.svc){padding:28px 24px}
}
@media(prefers-reduced-motion:reduce){.nav-menu,.nav-menu.open,.nav{transition:none}html.js .phero [data-lines]{opacity:1;transform:none;transition:none}}

/* Compact widget and overlapping closing scenery, revision 3. */
.hero-card{width:800px;min-height:0}
.ans{min-height:0;padding-bottom:90px}
.hero-stage{padding-bottom:var(--scene-padding,240px)}
.close{max-width:1600px;margin-inline:auto;min-height:0;padding-bottom:clamp(80px,7.5vw,144px)}
.close-fore .plane[data-plane=mid]{mask-image:linear-gradient(transparent,#000 42%)}
.close::after{height:24px}
.foot{padding-top:32px}
@media(max-width:1279.98px){.hero-card,.ans{min-height:0}.ans{padding-bottom:80px}}
@media(max-width:809.98px){.close{padding-bottom:72px}.foot{padding-top:24px}}

/* Foreground rises throughout the widget's visible scroll interval. */
.hero-fore .plane[data-plane=mid]{transform:translate3d(0,var(--front-y,0px),0)!important}
/* Only the distant city remains in the contained closing scene. */
.close-fore{display:none}
.close-world .plane[data-plane=far]{display:block;opacity:.55;mask-image:linear-gradient(transparent,#000 20%,#000 66%,transparent 100%);transform:translateY(var(--close-y,0px))!important}
.foot{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.foot-line{border-top:1px solid var(--line-2)}
@media(max-width:809.98px){.close-world .plane[data-plane=far]{width:calc(100% + 240px);left:-120px}}
@media(prefers-reduced-motion:reduce){.hero-fore .plane[data-plane=mid],.close-world .plane[data-plane=far]{transform:none!important}}

/* Generated closing landscape uses the reference's exact 1600 × 349 asset box. */
.close-world{inset:0;height:auto}
.close-world .plane[data-plane=far]{width:100%;left:0;bottom:0;height:auto;opacity:1;mask-image:none}

/* Three generated landscape planes, matching the reference asset proportions. */
.hero-world .plane[data-plane=far]{mask-image:url('/assets/world/hero-far-mask.svg');mask-repeat:no-repeat;mask-size:100% 100%;mask-mode:alpha}
.hero-world .plane[data-plane=middle]{z-index:2;width:100%;height:auto;max-width:none;left:0;bottom:0;transform:translate3d(0,var(--middle-y,0px),0)!important}
html.js .hero-world .plane[data-plane=middle]{animation:reference-middle 1s var(--ease) both}
@keyframes reference-middle{from{opacity:.001;translate:0 48px}to{opacity:1;translate:0 0}}
@media(max-width:809.98px){.hero-world .plane[data-plane=middle]{width:calc(100% + 304px);left:-152px}}
@media(prefers-reduced-motion:reduce){html.js .hero-world .plane[data-plane=middle]{animation:none}.hero-world .plane[data-plane=middle]{transform:none!important}}

/* Closing landscape settles below all copy; shared by /free-check and every closing form. */
.close{padding-bottom:var(--close-padding,132px)}
.close-world .plane[data-plane=far]{top:var(--close-landscape-top,calc(100% - 100px));bottom:auto}
.close,.foot{max-width:1600px;margin-inline:auto}
.close::before,.foot::before{content:"";position:absolute;inset:0;border-inline:1px solid var(--line);z-index:4;pointer-events:none}
.foot{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:810px){.close-grid,.page-check .close .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}}
@media(prefers-reduced-motion:reduce){.close{transition:none}}

/* Mobile gate, 2026-09-10. Scenery is clipped inside its own image layers, not at the hero, so the
   hero's copy never sits inside a clipping box while the foliage plate hangs below it at rest. At phone
   widths a service mock sizes its own window instead of hiding half its sample rows behind a 300px frame. */
.hero{overflow:visible}
.hero-world,.hero-fore{overflow:clip}
@media(max-width:809.98px){
 .svc .viz:has(.mock){display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:auto;min-height:300px;padding:10% 8% 0}
 .svc .viz:has(.mock)>.mock{position:relative;inset:auto;width:100%;flex:none}
}