/* Homepage sections below the approved hero, in the Storm concept's design language.
   Everything is scoped to .st so the hero (preview.css) and footer keep their approved styles. */
.st{
  --bg:#0C0C0A; --raised:#1C1B16; --ink:#F7F5ED; --muted:#B4B0A1; --accent:#E8C547; --line:rgba(247,245,237,.12);
  --sans:'Archivo',system-ui,sans-serif; --pad:clamp(20px,5vw,72px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .97 0 0 0 0 .96 0 0 0 0 .93 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px,var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip
}
.st *{box-sizing:border-box;margin:0;padding:0}
.st a{color:inherit;text-decoration:none}
.st img{display:block;max-width:100%}
.st em{font-style:normal;color:var(--accent)}
.st a:focus-visible,.st summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.st .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.st .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.st .wi{display:inline-block}
.st .btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-stretch:110%;font-size:16px;padding:17px 28px;min-height:48px;border-radius:99px}
.st .btn-gold{background:var(--accent);color:#0C0C0A}
@media(hover:hover){.st .btn-gold:hover{background:#F3D363;translate:0 -2px}}
.st .btn:active{scale:.98}
.st .btn{transition:background .25s cubic-bezier(.23,1,.32,1),color .25s ease,border-color .25s ease,translate .25s cubic-bezier(.23,1,.32,1),scale .16s cubic-bezier(.23,1,.32,1),box-shadow .25s ease}
.st .btn-ghost{background:rgba(247,245,237,.1)}
@media(hover:hover){.st .btn-ghost:hover{background:rgba(247,245,237,.16)}}
/* Display type: Archivo Expanded, heavy and wide like the VOLT wordmark. */
.st h2,.st h3,.st .wall .big,.st .price b{font-stretch:125%;font-weight:800;letter-spacing:-.025em}
.st h2{text-wrap:balance}

/* ---------- proof wall ---------- */
.st .wall{position:relative;height:220vh}
.st .wall .pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
/* the wall's bottom edge melts into the page, so no hard line shows as it scrolls away */
.st .wall .pin{-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent)} /* taste-skill-ignore: alpha mask softening the wall's edge, not a colour fill */
/* clip, not hidden: a hidden box can still be scrolled inside (focusing a wall button or a jump link did it, splitting
   the shade from the wall); a clipped box cannot */
@supports (overflow:clip){.st .wall .pin{overflow:clip}}
.st .wall .cols{position:absolute;inset:-30% -20%;display:grid;grid-template-columns:repeat(6,1fr);gap:22px;transform:perspective(1800px) rotateX(28deg) rotateZ(-14deg) scale(1.05);transform-origin:center}
.st .wall .col{display:flex;flex-direction:column;gap:22px;will-change:transform}
.st .wall .shot{border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:#15140f;transition:opacity .5s cubic-bezier(.23,1,.32,1),filter .5s cubic-bezier(.23,1,.32,1)}
/* an industry button lights up its own nine websites and dims the rest (home.js) */
.st .wall.focus .shot{opacity:.16}
.st .wall.focus .shot.lit{opacity:1;filter:brightness(1.3) saturate(1.1)}
@media (prefers-reduced-motion: reduce){.st .wall .shot{transition:none}}
.st .wall .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.st .wall .shot img:not([src]){visibility:hidden}
/* preview.css also uses .shade and .copy for the hero; reset what it sets. */
.st .wall .shade{position:absolute;inset:0;z-index:auto;pointer-events:none;background:radial-gradient(64% 60% at 50% 52%,rgba(12,12,10,.95),rgba(12,12,10,.9) 38%,rgba(12,12,10,.42) 68%,rgba(12,12,10,.06)),linear-gradient(var(--bg),transparent 18%,transparent 82%,var(--bg))} /* taste-skill-ignore: neutral scrim over the demo screenshots */
.st .wall .copy{position:relative;top:auto;left:auto;transform:none;width:auto;text-shadow:none;text-align:center;padding:0 var(--pad);max-width:1000px}
.st .wall .big{font-size:clamp(90px,17vw,260px);font-weight:900;letter-spacing:-.07em;line-height:.8;color:var(--accent)}
.st .wall h2{font-size:clamp(22px,3vw,44px);line-height:1.05;margin-top:16px}
.st .wall p{color:var(--muted);font-size:18px;line-height:1.6;max-width:560px;margin:20px auto 0}
.st .wall .from{margin-top:14px;font-size:14px;color:#D6D2C3;letter-spacing:.01em}
.st .wall .tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px}
.st .wall .tags button{display:inline-flex;align-items:center;gap:7px;min-height:44px;font:inherit;font-size:13px;padding:0 15px;border:0;border-radius:99px;background:rgba(12,12,10,.72);color:#D6D2C3;cursor:pointer;transition:background .25s ease,color .25s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.st .wall .tags button b{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.st .wall .tags button[aria-pressed="true"]{background:var(--accent);color:#0C0C0A}
.st .wall .tags button[aria-pressed="true"] b{color:#0C0C0A}
@media (hover:hover){.st .wall .tags button:not([aria-pressed="true"]):hover{background:rgba(232,197,71,.2);color:var(--ink)}}
.st .wall .tags button:active{transform:scale(.97)}
.st .wall .reel-link{display:inline-block;margin-top:18px;padding:12px 2px;font-size:14px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:7px}
@media (hover:hover){.st .wall .reel-link:hover{color:var(--accent)}}

/* ---------- featured work: the browser scrolls through each real design ---------- */
.st .work{padding:12vh 0 4vh}
.st .work-head{padding:0 var(--pad);max-width:1440px;margin:0 auto 7vh;display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap}
.st .work-head h2,.st .sec-head h2,.st .faq-h{font-size:clamp(32px,4.6vw,74px);line-height:1}
.st .work-note{max-width:420px}
.st .work-note p{color:var(--muted);line-height:1.6;font-size:17px}
.st .work-note .loc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:18px;font-size:13px;line-height:1.4;color:#D6D2C3;font-variant-numeric:tabular-nums}
.st .work-note .loc svg{color:var(--accent);flex:none}
.st .work-note .loc span+span{padding-left:14px}
/* Showreel: a silent loop of eight concept sites, with its own pause button. */
.st .reel{max-width:1440px;margin:0 auto 4vh;padding:0 var(--pad)}
/* on wide screens the reel takes more of the width so the websites in it are easier to see (owner, 28 Oct) */
@media (min-width:1500px){.st .reel{max-width:1720px}}
/* the eight websites in the reel: the one playing is marked; a name jumps to it */
.st .reel-sites{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0}
.st .reel-sites button{min-height:44px;padding:0 14px;border:0;border-radius:99px;background:rgba(247,245,237,.05);color:var(--muted);font:inherit;font-size:13px;cursor:pointer;transition:background .25s ease,color .25s ease}
.st .reel-sites button[aria-current]{background:rgba(232,197,71,.14);color:var(--accent)}
@media (hover:hover){.st .reel-sites button:not([aria-current]):hover{color:var(--ink);background:rgba(247,245,237,.1)}}
.st .reel-sites button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.st .reel-frame{position:relative;border-radius:18px;overflow:hidden;background:#15140f}
/* preview.css styles every <video> for the hero entrance (absolute, hidden until playing); undo that here. */
.st .reel video{position:relative;inset:auto;opacity:1;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.st .reel-toggle{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:99px;border:1px solid rgba(247,245,237,.3);background:rgba(12,12,10,.72);color:var(--ink);font:600 14px/1 var(--sans);cursor:pointer;transition:border-color .4s ease,color .4s ease}
.st .reel-toggle:hover{border-color:var(--accent);color:var(--accent)}
.st .reel-toggle:focus-visible,.motion-toggle:focus-visible{outline:2px solid #E8C547;outline-offset:4px}
.st .reel figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px;color:var(--muted);font-size:14px;line-height:1.5}
@media (max-width:600px){.st .reel-toggle{right:10px;bottom:10px;width:44px;padding:0;justify-content:center}.st .reel-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* the footage licence (CC BY 3.0) needs a credit near the reel; it waits behind one quiet word (owner, 28 Oct 2026) */
.st .reel figcaption .reel-credit{font-size:13px;line-height:1.5;color:var(--muted)}
.st .reel figcaption .reel-credit[open]{flex-basis:100%}
.st .reel figcaption .reel-credit summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-color:rgba(247,245,237,.3);text-underline-offset:3px}
.st .reel figcaption .reel-credit summary::-webkit-details-marker{display:none}
@media(hover:hover){.st .reel figcaption .reel-credit summary:hover{color:var(--ink)}}
.st .reel figcaption .reel-credit:not([open]) p{display:none}
.st .reel figcaption .reel-credit summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.st .reel figcaption .reel-credit p{margin:0 0 4px}
.st .reel figcaption .reel-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(hover:hover){.st .reel figcaption .reel-credit a:hover{color:var(--accent)}}
.st .reel figcaption .reel-credit a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.st .reel figcaption .c{font-size:13px;font-weight:600;padding:5px 11px;border-radius:99px;background:rgba(232,197,71,.12);color:var(--accent)}

/* ---------- divider: a branching lightning strike (owner pick, 27 Oct 2026). One gold bolt in the centre echoes
   the V of the logo; thin branches grow outward as it scrolls into view (CSS scroll timeline, still elsewhere). ---------- */
.st .ridge{max-width:1440px;margin:0 auto;padding:0 var(--pad);height:clamp(72px,9vw,128px)}
.st .ridge svg{display:block;width:100%;height:100%;overflow:visible}
.st .ridge path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:0}
.st .ridge .core{stroke:#E8C547;stroke-width:2.2}
.st .ridge .arm{stroke:rgba(232,197,71,.45);stroke-width:1}
.st .ridge .twig{stroke:rgba(247,245,237,.16);stroke-width:1}
/* the lightning strikes once, by itself, as it comes into view: packages.js arms it (.is-armed hides the lines), then
   adds .is-struck: the bolt drops, then the branches spread from it. Without scripts, if the script fails, or with
   reduced motion, it is simply drawn. */
@media (prefers-reduced-motion: no-preference){.st .ridge.is-armed path{stroke-dashoffset:1}
.st .ridge.is-struck .core{animation:ridge-draw .5s cubic-bezier(.2,.8,.3,1) both,ridge-flash .9s linear .5s both}
.st .ridge.is-struck .arm{animation:ridge-draw 1.4s cubic-bezier(.16,1,.3,1) .35s both}
.st .ridge.is-struck .twig{animation:ridge-draw .8s cubic-bezier(.16,1,.3,1) 1.1s both}}
@keyframes ridge-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ridge-flash{0%,30%,100%{opacity:1}15%{opacity:.35}45%{opacity:.6}}

/* ---------- process + packages ---------- */
.st .sec{padding:14vh var(--pad);max-width:1440px;margin:0 auto}
.st #process{padding-bottom:4vh}
.st #packages{padding-top:9vh}
.st .sec-head{display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap;margin-bottom:64px}
.st .sec-head h2{max-width:780px}
.st .sec-head p{max-width:380px;color:var(--muted);font-size:17px;line-height:1.6}
/* the three steps hang from one gold line that fills left to right as the section comes into view (home.js); the
   order reads from the line, not from numbers (owner, 28 Oct 2026). Without scripts or with reduced motion the line is
   full and every point lit. */
.st .steps{--p:1;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;position:relative;padding-top:34px}
.st .steps::before,.st .steps::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px}
.st .steps::before{background:rgba(247,245,237,.12)}
.st .steps::after{background:var(--accent);transform-origin:left center;transform:scaleX(var(--p))}
.st .step{position:relative}
.st .step::before{content:"";position:absolute;left:0;top:-34px;width:14px;height:14px;border-radius:50%;box-sizing:border-box;border:2px solid var(--accent);background:var(--accent);transition:background .4s ease}
.st .steps.armed .step:not(.on)::before{background:var(--bg)}
.st .step h3{font-size:22px;font-weight:700;margin-bottom:10px}
.st .step p{color:var(--muted);line-height:1.6;max-width:360px}
.st .step .mini{height:132px;margin:0 0 26px;border-radius:16px;background:var(--raised);position:relative;overflow:hidden}
.st .mini-chat{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 22px}
.st .mini-chat .bub{max-width:80%;padding:8px 12px;font-size:12.5px;line-height:1.35;color:var(--ink)}
.st .mini-chat .you{align-self:flex-end;border-radius:12px 12px 3px 12px;background:rgba(232,197,71,.18)}
.st .mini-chat .us{align-self:flex-start;border-radius:12px 12px 12px 3px;background:#2c2b23}
.st .mini-draft .win{position:absolute;left:22px;right:22px;top:16px;bottom:-14px;border-radius:10px 10px 0 0;background:#2a2921;display:grid;align-content:start;gap:7px;padding:12px 14px 0}
.st .mini-draft .win b{display:block;border-radius:3px;background:#3a382f;height:6px}
.st .mini-draft .win .bar{width:34%;height:5px;margin-bottom:3px}
.st .mini-draft .win .blk{height:22px;width:72%;background:#45422f}
.st .mini-draft .win .short{width:52%}
/* comment pins on the draft, the way changes are marked during the refine stage */
.st .mini-draft .pin{position:absolute;width:13px;height:13px;border-radius:50% 50% 50% 2px;background:var(--accent);outline:3px solid rgba(232,197,71,.18)}
.st .mini-draft .p1{left:calc(22px + 14px + 60%);top:34px}
.st .mini-draft .p2{left:calc(22px + 14px + 38%);top:72px}
.st .mini-draft .chip{position:absolute;right:14px;top:12px;padding:5px 10px;border-radius:99px;background:#15140f;color:var(--accent);font-size:11.5px;font-weight:700}
.st .mini-live{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.st .mini-live .url{display:flex;align-items:center;gap:8px;width:72%;padding:8px 12px;border-radius:99px;background:#2a2921;color:var(--ink);font-size:12.5px}
.st .mini-live .lock{width:9px;height:7px;border-radius:2px;background:var(--muted);position:relative;margin-top:3px}
.st .mini-live .lock::before{content:"";position:absolute;left:1.5px;bottom:5px;width:6px;height:5px;border:1.5px solid var(--muted);border-bottom:0;border-radius:4px 4px 0 0;box-sizing:border-box}
.st .mini-live .live{display:flex;gap:9px;align-items:center;font-weight:800;font-stretch:115%}
.st .mini-live .live i{position:relative;width:10px;height:10px;border-radius:50%;background:var(--accent)}.st .mini-live .live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);opacity:0}
@media (prefers-reduced-motion: no-preference){.st .mini-live .live i::after{animation:live-pulse 2.4s ease-out infinite}}
@keyframes live-pulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(3);opacity:0}}
.st .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.st .card{position:relative;border-radius:26px;padding:38px 32px 32px;background:var(--raised);overflow:hidden;display:flex;flex-direction:column;transition:translate .8s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.st .card:hover{translate:0 -8px;background:#24231C}}
/* Pro, the recommended package, is outlined in gold and lifted above the other two on wide screens (owner, 28 Oct) */
.st .card.pro{background:#221F14;outline:1px solid rgba(232,197,71,.55);outline-offset:-1px}
@media (min-width:901px){.st .card.pro{translate:0 -14px}}
@media (min-width:901px) and (hover:hover){.st .card.pro:hover{translate:0 -22px}}
/* who each package is for, under its name; the setup price shows smaller raised cents */
.st .card .for{margin:-12px 0 24px;color:var(--muted);font-size:15px;line-height:1.4}
.st .price .cents{font-size:.48em;vertical-align:.78em;margin-left:2px;letter-spacing:0}
/* the Recommended pill sits on the package name's line, not above the price */
.st .card .tag{font-size:13px;font-weight:700;letter-spacing:.01em;background:var(--accent);color:var(--bg);padding:7px 11px;border-radius:99px}
.st .card h3{font-size:22px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.st .price{display:flex;flex-direction:column;align-items:flex-start;gap:6px}   /* the label sits under every price, so a four-digit price never wraps it */
.st .price b{font-size:52px;line-height:1;font-variant-numeric:tabular-nums}
.st .price > span{color:var(--muted);font-size:14px}
.st .reg{font-size:13px;color:var(--muted);margin-top:8px;min-height:18px}
.st .monthly{margin:18px 0 26px;padding:12px 14px;border-radius:12px;background:rgba(247,245,237,.04);font-size:14.5px;color:var(--muted)}
.st .monthly b{color:var(--ink)}
.st .card ul{list-style:none;display:grid;gap:13px;margin-bottom:32px;font-size:15.5px}
.st .card li{display:flex;gap:12px}
.st .card li::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;background:rgba(232,197,71,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23E8C547' stroke-width='1.6'/%3E%3C/svg%3E") center/16px}
.st .card .btn{margin-top:auto;justify-content:center}
.st .decide{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-top:28px;padding:26px 32px;border-radius:22px;background:rgba(232,197,71,.07)}
.st .decide p{max-width:620px;color:#D6D2C3;font-size:16.5px;line-height:1.6}
.st .decide p b{color:var(--ink)}
.st .fine{margin-top:22px;color:var(--muted);font-size:14px;line-height:1.6;text-align:center}
.st .fine a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(232,197,71,.5);text-underline-offset:5px;white-space:nowrap}
.st .fine a:hover{color:var(--accent)}

/* ---------- FAQ ---------- */
.st .faq{position:relative;padding:4vh var(--pad) 4vh;max-width:1100px;margin:0 auto}
.st .faq-v{position:absolute;top:4vh;right:calc(-1 * clamp(0px,6vw,110px));width:clamp(150px,16vw,230px);height:auto;pointer-events:none;fill:none;stroke:rgba(247,245,237,.08);stroke-width:.35}
@media (max-width:700px){.st .faq-v{display:none}}
.st .faq-v .g{stroke:rgba(232,197,71,.16)}
.st .faq-h{position:relative;margin:0 0 40px}
.st .faq details{background:var(--raised);border-radius:18px;padding:0 22px;margin-bottom:10px}
.st .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-stretch:112%;font-weight:700;font-size:clamp(18px,1.8vw,23px)}
.st .faq summary::-webkit-details-marker{display:none}
.st .faq summary i{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(247,245,237,.07);position:relative;transition:transform .6s cubic-bezier(.16,1,.3,1),background .4s ease}
.st .faq summary i::before,.st .faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);translate:-50% -50%}
.st .faq summary i::after{rotate:90deg;transition:rotate .6s cubic-bezier(.16,1,.3,1)}
.st .faq details[open] summary i{background:var(--accent)}
.st .faq details[open] summary i::before,.st .faq details[open] summary i::after{background:var(--bg)}
.st .faq details[open] summary i::after{rotate:0deg}
.st .faq summary:hover{color:var(--accent)}
.st .faq .a{padding:0 60px 26px 0;color:var(--muted);line-height:1.7;font-size:16px}
.st .faq .a p+p{margin-top:10px}
.st .faq .more{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:26px;font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px}
.st .faq .more:hover{color:var(--accent)}

/* ---------- final strike, over the same valley as the hero ---------- */
/* the concept strip opens the closing section, full width over the dark top of its photograph (owner, 28 Oct 2026);
   the column is held to the section width, or the strip's long row would stretch it */
.st .final{position:relative;min-height:70vh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;place-items:center;text-align:center;overflow:hidden;padding:8px var(--pad) clamp(48px,7vh,80px)}
/* the tilt drops the left end about 2.6vw below the row, so the padding clears it at the top and leaves the heading
   clear space underneath at every width */
.st .final>.work-strip{position:relative;z-index:2;align-self:start;width:calc(100% + 2 * var(--pad));margin:0 calc(-1 * var(--pad));padding:calc(2.6vw + 6px) 0 calc(2.6vw + clamp(40px,5vw,72px))}
/* the photograph fades in through a mask instead of under a solid band, so the page grain carries on across the top
   of the section with no seam */
.st .final .layer{position:absolute;inset:-6%;background:url('/settled-1600.webp') center 70%/cover no-repeat;filter:brightness(.4) contrast(1.25) saturate(.45) sepia(.2);-webkit-mask-image:linear-gradient(transparent 4%,#000 34%);mask-image:linear-gradient(transparent 4%,#000 34%)} /* taste-skill-ignore: alpha mask fading the photograph in, not a colour fill */
.st .final canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.st .final::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 70%,var(--bg));pointer-events:none} /* taste-skill-ignore: neutral scrim over a photo */
.st .final .in{position:relative;z-index:2}
.st .final h2{font-size:clamp(38px,7vw,116px);line-height:.95}
.st .final .langs{margin:-26px auto 34px;font-size:14px;color:var(--muted)}
.st .final p{color:#D6D2C3;margin:26px auto 40px;font-size:18px;max-width:470px;line-height:1.55}
.st .final .send-label{margin:30px auto 0;font-size:13px;color:var(--muted);letter-spacing:.01em}
.st .final .send{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px auto 0;max-width:640px}
.st .final .send{gap:8px 22px}
.st .final .send li{display:flex;align-items:center;gap:9px;font-size:14px;color:#D6D2C3}
.st .final .send li::before{content:"";width:6px;height:6px;rotate:45deg;background:var(--accent);flex:none}
.st .final .num{display:block;margin-top:22px;color:var(--muted);font-size:14px;line-height:1.6}
.st .final .num a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(232,197,71,.5);text-underline-offset:5px}
.st .final .num a:hover{color:var(--accent)}

/* Gold reading-progress line, as in Storm. */
.progress-line{position:fixed;left:0;top:0;height:2px;width:100%;z-index:95;transform-origin:left;transform:scaleX(0);background:#E8C547;pointer-events:none}
.progress-line[hidden]{display:none}

@media (max-width:900px){
  .st .wall .cols{grid-template-columns:repeat(3,1fr);inset:-30% -60%}
  .st .steps,.st .cards{grid-template-columns:1fr}
  /* on one column the line runs down the left edge */
  .st .steps{padding:0 0 0 34px;row-gap:34px}
  .st .steps::before,.st .steps::after{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .st .steps::after{transform-origin:center top;transform:scaleY(var(--p))}
  .st .step::before{left:-34px;top:0}
  .st .faq .a{padding-right:0}
}
@media (max-height:640px){
  .st .wall{height:auto}
  .st .wall .pin{position:relative;height:auto;min-height:100svh;padding:12vh 0}
}
@media (max-width:520px){
  .st .wall p{font-size:16px}
  .st .faq summary{font-size:17px}
}
/* phones: tighter gaps between sections (owner, 28 Oct 2026; up to 200 px stood empty after the steps and the prices),
   and the showreel's site list as one row the visitor swipes sideways instead of four rows under a small video */
@media (max-width:600px){
  .st .sec{padding:64px var(--pad)}
  .st #process{padding-bottom:16px}
  .st #packages{padding-top:48px}
  .st .sec-head{margin-bottom:36px;gap:20px}
  .st .work{padding:72px 0 16px}
  .st .work-head{margin-bottom:32px;gap:20px}
  .st .faq{padding:24px var(--pad)}
  .st .faq-h{margin-bottom:28px}
  .st .reel-sites{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin:14px calc(-1 * var(--pad)) 0;padding:0 var(--pad)}
  .st .reel-sites::-webkit-scrollbar{display:none}
  .st .reel-sites li{flex:none;scroll-snap-align:start;scroll-margin-left:var(--pad)}
  .st .reel-sites button{white-space:nowrap}
}
/* Still version: reduced motion (unless reviewed with ?motion=on) or no animation library. */
/* The still wall belongs to reduced motion only (html.rm), so a phone whose motion starts on the first touch keeps the
   same wall layout before and after, with nothing jumping. */
html.rm .st .wall{height:auto}
html.rm .st .wall .pin{position:relative;height:auto;min-height:92vh;padding:14vh 0}
@media (scripting: none){.st .wall{height:auto}.st .wall .pin{position:relative;height:auto;min-height:92vh;padding:14vh 0}}
html.rm .st *,html.rm .st *::before,html.rm .st *::after{animation:none!important;transition:none!important}

/* ---------- 3D clouds and section blending ---------- */
/* Hero: WebGL clouds over the valley, between the scenery and the logo/headline; they appear once the entrance settles. */
.hero-clouds{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 2.6s cubic-bezier(.16,1,.3,1)}
.hero.settled .hero-clouds.on{opacity:1}
/* The hero melts into the page instead of ending on a hard edge. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32vh;z-index:-1;pointer-events:none;background:linear-gradient(rgba(12,12,10,0),rgba(12,12,10,.55) 55%,#0C0C0A)} /* taste-skill-ignore: neutral scrim over a photo */
/* A cloud bank the visitor flies through between sections; home.js sets its opacity from the scroll position. */
.pass-clouds{position:fixed;inset:0;width:100vw;height:100lvh;z-index:15;pointer-events:none;opacity:0;visibility:hidden}
/* Lenis smooth scrolling (desktop wheel only; touch and keyboard stay native). */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
html.rm .hero-clouds{transition:none}
/* One button pauses every self-running animation on the page (WCAG 2.2.2). */
.motion-control .motion-toggle{position:static;translate:none}
@media(hover:hover){.motion-toggle:hover{border-color:#E8C547;color:#E8C547}}

.st .final .flash{position:absolute;inset:0;background:#FFF1C9;opacity:0;pointer-events:none}
/* focus arrives here from the wall's "Watch the showreel" link; a ring shows only for keyboard visitors */
.st #showreel:focus:not(:focus-visible){outline:none}
/* card names read as the card's heading from tablet up, so the who-for line belongs to the name, not the price */
@media (min-width:600px){.st .card h3{font-size:clamp(26px,1.95vw,30px)}}
/* 44 px touch targets at every width (critique, 28 Oct 2026) */
.st .wall .reel-link{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.st .reel figcaption .reel-credit summary{min-width:44px;justify-content:center}
/* phones: the scrim's oval is sized to the screen, so on a narrow phone it stopped short of each line's ends and a light
   tile behind could drop the paragraph to 3.3:1; a wider, stronger oval keeps the wall's text at 4.5:1 or better (audit,
   28 Oct 2026) */
@media (max-width:600px){.st .wall .shade{background:radial-gradient(130% 62% at 50% 50%,rgba(12,12,10,.95),rgba(12,12,10,.9) 46%,rgba(12,12,10,.5) 76%,rgba(12,12,10,.12)),linear-gradient(var(--bg),transparent 18%,transparent 82%,var(--bg))}} /* taste-skill-ignore: neutral scrim over photographs, not a colour fill */
/* phones: the sections below the wall are laid out only as they come near the screen. Shaping all of the page's text
   in the site font at once froze a slow phone for up to 0.4 s after the font arrived (Lighthouse, 28 Oct 2026); with
   this the first load has no freeze over 0.1 s. home.js refreshes the scroll positions as the real heights arrive. */
@media (max-width:760px){.st .work,.st #process,.st #packages,.st .faq,.st .final{content-visibility:auto;contain-intrinsic-size:auto 900px}}