/* Home only. The hero frame, title 2 and stars are v3's, just placed on the dark page. */
.stage-wrap{position:relative}
.stage{position:relative;height:calc(100vh - var(--hdr) - 12px);height:calc(100svh - var(--hdr) - 12px);min-height:500px;border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:#121212;box-shadow:0 0 0 1px rgba(201,163,94,.14),0 40px 120px rgba(0,0,0,.55)}
/* the still of the star scene (was this frame's CSS background): first paint; the canvas fades in over it */
.stage .poster,.stage .poster img{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;object-fit:cover;object-position:50% 50%}
.stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:pan-y;opacity:0;transition:opacity 1.2s ease}
.stage.ready canvas{opacity:1}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(transparent,rgba(8,8,8,.6));pointer-events:none;z-index:1}
.hx{position:absolute;left:calc(var(--gut) - 12px);right:calc(var(--gut) - 12px);bottom:44px;z-index:2;pointer-events:none;color:#f4f3ef;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.hx h1{font-weight:500;letter-spacing:-.035em;text-wrap:balance;font-size:clamp(46px,4.7vw,78px);line-height:.98;max-width:11.5em;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hx .cap{color:rgba(255,255,255,.86);font-size:19px;line-height:1.45;max-width:30em;margin-top:20px;text-shadow:0 1px 18px rgba(0,0,0,.9);text-wrap:pretty}
.hx .cta-row{margin-top:26px}
.hx::before{content:"";position:absolute;z-index:-1;left:calc(12px - var(--gut));right:calc(12px - var(--gut));bottom:-44px;height:140%;background:radial-gradient(54% 76% at 16% 88%,rgba(6,6,6,.64) 0%,rgba(6,6,6,.42) 42%,rgba(6,6,6,.12) 66%,transparent 80%);pointer-events:none}
.rail{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;padding-top:18px;color:var(--ink-2)}
.stage-wrap.hero{padding-bottom:0}
.stage-wrap .stage{margin-bottom:12px}
.stage-wrap .rail{padding:6px calc(var(--gut) - 12px) 0}
.rail span:nth-child(2){text-align:center}
.rail span:nth-child(3){text-align:right}
.rail .tick{display:inline-block;width:9px;height:9px;position:relative;margin-right:10px;vertical-align:-1px}
.rail .tick::before,.rail .tick::after{content:"";position:absolute;background:var(--gold);left:4px;top:0;width:1px;height:9px}
.rail .tick::after{left:0;top:4px;width:9px;height:1px}

.intro{padding-top:150px;padding-bottom:150px}
.intro p.big{font-weight:500;font-size:clamp(44px,6vw,108px);line-height:1;letter-spacing:-.04em;max-width:15em}
.intro p.big .ln{display:block}
.intro .star-inline{display:inline-block;width:.62em;height:.62em;vertical-align:.04em;margin:0 .08em}
.intro .who{margin-top:36px;color:var(--ink-2);font-size:19px;line-height:1.5;max-width:38em;text-wrap:pretty}
.intro .who a{color:var(--ink);background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;padding-bottom:2px}
.intro .who a:hover{color:var(--gold-hi)}
.help{padding-bottom:150px}
/* how we help (round 6, Oct 21): four equal cards. Hover: the card tilts toward the pointer on a spring, a soft gold light follows it,
   the icon floats above the text (depth layers), and the icon plays. Nothing changes size or layout: transforms and opacity only. */
.strip{display:flex;gap:12px;height:clamp(460px,68vh,760px)}
.sp{flex:1 1 0;min-width:0;position:relative;border-radius:var(--r);isolation:isolate;perspective:1100px;color:#f4f3ef}
.sp-3d{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;transform-style:preserve-3d;box-shadow:0 0 0 1px var(--line);transition:box-shadow .5s;will-change:transform}
.sp.hot .sp-3d{box-shadow:0 0 0 1px rgba(201,163,94,.45),0 40px 90px rgba(0,0,0,.45)}
.sp .bg{position:absolute;inset:0;z-index:0;background:radial-gradient(80% 60% at 70% 22%,rgba(201,163,94,.16),transparent 70%),linear-gradient(165deg,#1a1611,#0d0b0e 60%);transform:translateZ(0)}
.sp .bg .ic{position:absolute;left:26px;right:26px;top:30px;width:min(230px,calc(100% - 52px));height:auto;opacity:.85;transform:translateZ(0);transition:opacity .5s,transform .9s cubic-bezier(.2,.8,.2,1)}
.sp.hot .bg .ic{opacity:1;transform:translateZ(54px) translateY(-6px)}
.sp .lt{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;z-index:1;pointer-events:none;opacity:0;border-radius:50%;
  background:radial-gradient(circle,rgba(227,198,142,.34) 0%,rgba(201,163,94,.14) 34%,transparent 66%);will-change:transform,opacity;mix-blend-mode:screen}
.sp-3d::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(transparent 35%,rgba(8,7,10,.9));pointer-events:none}
.sp .t{position:absolute;left:26px;right:26px;top:48%;z-index:3;display:flex;flex-direction:column;gap:10px;color:#f4f3ef;transform:translateZ(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.sp.hot .t{transform:translateZ(30px)}
.sp .t .mono{color:var(--gold-ink)}
.sp h3{font-weight:500;font-size:clamp(26px,2.4vw,40px);line-height:1.02;letter-spacing:-.035em;max-width:11em;min-height:3.06em;display:flex;align-items:flex-end}
.sp .d{color:rgba(242,237,227,.78);font-size:16px;max-width:24em;min-height:2.9em;opacity:1;transform:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}   /* round 7: always readable; hover adds depth */
.sp.hot .d,.sp:focus-visible .d{opacity:1;transform:none}
@media (hover:none){.sp .d{opacity:1;transform:none}}
/* the icons: static line drawings; while the card is hot each one plays its own short piece */
.ic-web .dr{stroke-dasharray:1;stroke-dashoffset:0}
.ic-web .fl{opacity:0;transition:opacity .4s}
.sp.hot .ic-web .dr{animation:ic-draw .9s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.sp.hot .ic-web .fl{animation:ic-in .6s ease 1.15s both}
@keyframes ic-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ic-in{from{opacity:0}to{opacity:1}}
.ic-ai .rg{transform-box:fill-box;transform-origin:center}
.sp.hot .ic-ai .r1{animation:ic-ring 1.6s ease-out infinite}
.sp.hot .ic-ai .r2{animation:ic-ring 1.6s ease-out .5s infinite}
@keyframes ic-ring{0%{transform:scale(.96);opacity:.7}100%{transform:scale(1.22);opacity:0}}
.ic-ai .wv line{transform-box:fill-box;transform-origin:center;transform:scaleY(.25);opacity:.55;transition:transform .5s,opacity .5s}
.sp.hot .ic-ai .wv line{animation:ic-wave 1.1s ease-in-out calc(var(--i) * -.13s) infinite alternate;opacity:1}
@keyframes ic-wave{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.ic-auto .pk{opacity:0}
.sp.hot .ic-auto .pk{animation:ic-travel 1.5s cubic-bezier(.4,0,.2,1) var(--d,0s) infinite}
@keyframes ic-travel{0%{transform:translateX(0);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateX(14px);opacity:0}}
.ic-seo .ty tspan{opacity:0}
.sp.hot .ic-seo .ty tspan{animation:ic-in .08s linear calc(.15s + var(--i) * .075s) both}
.ic-seo .cr{opacity:0}
.sp.hot .ic-seo .cr{animation:ic-caret .7s steps(2) infinite}
@keyframes ic-caret{to{opacity:1}}
.ic-seo .br{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.18);transition:transform .5s}
.sp.hot .ic-seo .br{animation:ic-grow .9s cubic-bezier(.2,.8,.2,1) calc(1.1s + var(--i) * .18s) both}
@keyframes ic-grow{from{transform:scaleY(.18)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .sp .sp-3d,.sp .lt,.sp .bg .ic,.sp .t{transform:none!important;transition:none}
  .sp .lt{opacity:0!important}
  .sp.hot .ic *,.sp .ic *{animation:none!important}
  .ic-web .fl{opacity:1}.ic-ai .wv line{transform:none;opacity:1}.ic-seo .ty tspan{opacity:1}.ic-seo .br{transform:none}.ic-auto .pk{opacity:0}
}

/* blueprint to finished site: desktop pins briefly; phones play it as the section passes, no pin */
.bp{position:relative;height:230vh}
.bp .pin{position:sticky;top:0;height:100vh;display:grid;grid-template-rows:auto 1fr auto;gap:18px;padding-top:28px;padding-bottom:28px}
.bp .bp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.bp .bp-head h2{font-weight:500;font-size:clamp(44px,5.6vw,92px);line-height:.94;letter-spacing:-.045em;max-width:11em}
.bp .bp-head .mono{color:var(--ink-2);max-width:300px;text-align:right}
.bp .view{position:relative;height:100%;aspect-ratio:16/10;max-width:100%;margin:0 auto;border-radius:var(--r);overflow:hidden;background:#0b0a0d;box-shadow:0 0 0 1px var(--line);min-height:0}
.bp .view .still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.bp .view canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s}
.bp.live .view canvas{opacity:1}
.bp.live .view .still{visibility:hidden}
.bp .steps{display:flex;gap:28px;color:var(--mute);flex-wrap:wrap}
.bp .steps span{transition:color .4s}
.bp .steps span.on{color:var(--gold-ink)}
.bp .steps span::before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;background:currentColor;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.bp .cap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--ink-2)}
.bp .cap a{color:var(--ink)}

/* featured work (v3 grid + ripple) */
.work{padding-top:40px;padding-bottom:110px}
.grid{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:72px}
.proj{display:block;position:relative}
.proj .media{position:relative;aspect-ratio:16/10.4;border-radius:var(--r);overflow:hidden;background:var(--page-2);transform:translateZ(0);box-shadow:0 0 0 1px var(--line)}
.proj .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;transition:object-position 7s cubic-bezier(.45,0,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1)}
.proj:hover .media img{object-position:50% 100%;transform:scale(1.025)}
.proj .media .chip{position:absolute;left:16px;top:16px;background:rgba(8,7,10,.78);color:#f3f3f1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 12px;border-radius:99px;opacity:0;transform:translateY(-6px);transition:.4s;z-index:2}
.proj:hover .media .chip{opacity:1;transform:none}
.proj .media .rip{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:1}
.proj.hot .media .rip{opacity:1}
.proj .meta{padding-top:20px}
.proj .meta .mono{color:var(--ink-2)}
.proj h3{font-weight:500;font-size:clamp(30px,2.9vw,44px);line-height:1.05;letter-spacing:-.03em;margin-top:8px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.proj h3 small{font-family:var(--mono);font-size:12.5px;letter-spacing:0;color:var(--mute);font-weight:400}

/* Sarah band with v3 glass star */
.band{position:relative;border-radius:var(--r);overflow:hidden;background:#0e0e0e;color:#f2f1ee;min-height:640px;display:grid;grid-template-columns:1.1fr 1fr;isolation:isolate;box-shadow:0 0 0 1px var(--line)}
.band .bg{position:absolute;inset:0;z-index:-1;background:url(/img/forge-poster-a.webp) 78% 50%/cover no-repeat;opacity:.55;filter:saturate(.9)}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0e0e0e 0%,rgba(14,14,14,.86) 42%,rgba(14,14,14,.15) 100%)}
.band canvas.glass{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity .9s ease;pointer-events:none}
.band.glass-on canvas.glass{opacity:1}
.band .copy{padding:64px 0 56px 64px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.band h2{font-weight:500;font-size:clamp(48px,6vw,96px);line-height:.94;letter-spacing:-.045em}
.band .steps{list-style:none;display:flex;flex-direction:column;max-width:440px;border-top:1px solid rgba(255,255,255,.14)}
.band .steps li{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.42);transition:color .5s}
.band .steps li b{font-weight:500;font-family:var(--sans);font-size:22px;letter-spacing:-.02em;text-transform:none}
.band .steps li.on{color:#fff}
.band .steps li .st{width:9px;height:9px;border-radius:50%;border:1px solid currentColor;transition:.5s}
.band .steps li.on .st{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px rgba(201,163,94,.2)}
.band .foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.band .foot .mono{color:rgba(255,255,255,.7)}

.why{padding-top:150px;padding-bottom:110px}
.why h2{font-weight:500;font-size:clamp(40px,3.9vw,56px);line-height:.98;letter-spacing:-.04em}   /* round 7: Isaac, no big type near the end */
.why ol{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:64px 6vw;margin-top:64px}
.why li{display:grid;grid-template-columns:auto 1fr;gap:6px 26px;align-items:start}
.why li .p{grid-row:span 2}
.why li .p svg{width:clamp(54px,5vw,84px);height:auto;display:block;color:var(--ink)}
.why li p{max-width:26em}
.why li .p .tip{fill:var(--gold)}
.why li h3{font-weight:500;font-size:clamp(26px,2.6vw,42px);line-height:1.04;letter-spacing:-.03em}
.why li p{color:var(--ink-2);font-size:17px}
.explore{padding-bottom:140px}

.drift{position:relative;width:100%;height:0;pointer-events:none;z-index:3}
.drift img{position:absolute;left:0;top:0;opacity:0;object-fit:contain;will-change:transform,opacity;filter:drop-shadow(0 18px 24px rgba(0,0,0,.4))}

@media (max-width:1100px){
  .sp h3,.sp .d{min-height:0}
  .sp .t{top:auto;bottom:26px}
  .grid{grid-template-columns:1fr}            /* 960: one big work card per row, not a tiny 2x2 */
  .hx{grid-template-columns:1fr;gap:16px}
  .band{grid-template-columns:1fr}
  .strip{height:auto;flex-direction:column}
  .sp{flex:none;height:clamp(250px,36vh,340px)}
  .sp .lt{width:380px;height:380px;margin:-190px 0 0 -190px}
  .sp .bg .ic{left:auto;right:22px;top:22px;width:min(150px,36%)}   /* phones and tablets: the icon sits top right, the words bottom left, never on each other */
  .sp .t{right:22px}
  .sp .d{opacity:1;transform:none}
  .bp .bp-head{flex-direction:column;align-items:flex-start}
  .bp .bp-head .mono{text-align:left}
}
@media (max-width:640px){
  .stage{min-height:460px}
  .hx{left:16px;right:16px;bottom:20px}
  .stage-wrap .stage{margin-bottom:8px}
  .hx h1{font-size:34px;line-height:1.02}
  .hx .cap{font-size:15.5px;margin-top:14px}
  .hx .cta-row{margin-top:18px}
  .hx::before{left:-18px;right:-18px;bottom:-20px;height:175%;background:linear-gradient(to top,rgba(6,6,6,.88) 0%,rgba(6,6,6,.72) 45%,rgba(6,6,6,.35) 75%,transparent 100%)}
  .rail{grid-template-columns:1fr auto}
  .rail>span:nth-child(1){display:none}
  .rail>span:nth-child(2){text-align:left}
  .intro{padding-top:64px;padding-bottom:80px}
  .intro p.big{font-size:40px;line-height:1.04}
  .intro .cta-row{margin-top:32px}
  .intro .who{font-size:16.5px;margin-top:26px}
  .intro .cta-row .pill{flex:1;justify-content:space-between}
  .help{padding-bottom:80px}
  .bp{height:auto}
  .bp .pin{position:relative;height:auto;padding-top:0;padding-bottom:70px;gap:16px}
  .bp .bp-head h2{font-size:40px}
  .bp .view{aspect-ratio:16/10;height:auto;width:100%}
  .bp .steps{gap:8px 16px}
  .grid{grid-template-columns:1fr;row-gap:44px}
  .proj .media{aspect-ratio:4/5}
  .proj:hover .media img{object-position:50% 0%;transform:none}
  .proj h3{font-size:32px}
  .band{min-height:0;margin:0 calc(var(--gut) * -1 + 8px)}
  .band canvas.glass{display:none}
  .band .bg{background:url(/img/forge-poster-a.webp) 100% 0/150% auto no-repeat;opacity:.7;filter:saturate(.95)}   /* round 7 (B1): the desktop star, no text baked in */
  .band::after{background:linear-gradient(180deg,rgba(14,14,14,.1) 0%,#0e0e0e 46%)}
  .band .copy{padding:200px 22px 30px;gap:34px}
  .band h2{font-size:48px}
  .band .steps li b{font-size:19px}
  .why{padding-top:80px;padding-bottom:70px}
  .why h2{font-size:clamp(30px,9vw,36px)}
  .why ol{grid-template-columns:1fr;gap:36px;margin-top:36px}
  .why li{gap:4px 16px}
  .why li .p svg{width:42px}
  .why li h3{font-size:24px}
  .explore{padding-bottom:80px}
}
@media (prefers-reduced-motion:reduce){.bp{height:auto}.bp .pin{position:relative;height:auto}.bp .view{aspect-ratio:16/10;height:auto;width:100%}.proj .media img{transition:none}}
/* round 7 (Oct 21, 2026) */
.sp.played .ic-web .dr{animation:none;stroke-dashoffset:0}.sp.played .ic-web .fl{animation:none;opacity:1}.sp.played .ic-seo .ty tspan{animation:none;opacity:1}.sp.played .ic-seo .br{animation:none;transform:none}   /* a drawn icon stays drawn: no restart on every re-entry */
.band .bg{background-position:84% 50%}
@media (max-width:640px){.band .copy{padding-top:150px}.band .bg{background-size:150% auto;background-position:100% 0}.bp .pin{padding-bottom:0}.bp .cap{margin-top:6px}}
/* round 9: the phone sketch. blueprint.js adds .sketch and the .bpl drawing on screens up to 640px wide (no canvas, no animation loop); the .still picture fades in over it.
   Without .sketch (computers, reduced motion, before the script runs) none of this applies and the plain finished picture shows, as before. */
.bp .view .bpl{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.bp.sketch .view .bpl{display:block}
.bp .bpl .bpg{fill:none;stroke:#8a744c;stroke-width:.5}
.bp .bpl .o{fill:#c9a35e;fill-opacity:0;stroke:#d9b26a;stroke-width:1.1;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.bp .bpl .o.k{stroke:#c9a35e;stroke-width:2.6}
.bp .bpl .o.x{stroke:#b8985c;stroke-width:.6;opacity:.45}
.bp .bpl .bpd circle{fill:#f0d9a8}
.bp .bpl .bpw{opacity:0}
.bp.settling .view .still,.bp.settling .view .bpl{transition:opacity .35s ease}

/* ═════ Round 10 (Oct 22, 2026) ═════ */
/* hero: a softer, deeper dark scrim behind the words over the star field (black and gold kept) */
.hx::before{background:radial-gradient(60% 80% at 18% 86%,rgba(6,6,6,.78) 0%,rgba(6,6,6,.58) 40%,rgba(6,6,6,.2) 66%,transparent 82%)}
@media (max-width:640px){.hx::before{background:linear-gradient(to top,rgba(6,6,6,.9) 0%,rgba(6,6,6,.76) 45%,rgba(6,6,6,.4) 75%,transparent 100%)}}
/* short phones (iPhone SE): one action on the first screen, Book. Try the AI Front Desk opens the next section instead. */
.try-short{display:none}
@media (max-width:640px) and (max-height:740px){
  .hx .cta-row .ghost{display:none}
  .intro .try-short{display:flex;margin:0 0 28px}
}
@media (max-width:640px) and (max-height:740px){.hx .cta-row .cta{flex:1 1 auto;width:100%}}
/* the card light (span.lt) was 380px wide on phones, 10px past each side at 360: it now fits inside the card */
@media (max-width:640px){.sp .lt{width:min(380px,100%);height:auto;aspect-ratio:1;margin:0;left:50%;top:50%;translate:-50% -50%}}