/* Round 9 (Oct 22, 2026; manager decision 3 on review r8 design question 1). The Services, About and Contact heroes are built around
   the same rendered gold star Home uses: the glass star (media/star/gstar-*.webp, cut from img/forge-poster-a.webp with its clipped
   top tip rebuilt) and, on the Services orbit, the drifting-star pictures (img/drift-star-*.webp). The star fills about 45 to 60% of
   the frame. One calm motion per hero; heroes.js runs it only on screen with the tab visible; reduced motion holds everything
   still. No photo of Isaac. Round 8's line-art stars and 2D projected orbit are gone. */
.stagef{background:radial-gradient(70% 70% at 64% 58%,#261f16 0%,#16120f 50%,#0d0b0a 100%)}
.stagef::before{content:"";position:absolute;left:30%;right:-8%;bottom:-18%;height:58%;z-index:-1;pointer-events:none;background:radial-gradient(50% 60% at 60% 100%,rgba(214,176,106,.42),rgba(201,163,94,.12) 48%,transparent 72%);filter:blur(16px)}
.stagef::after{content:"";position:absolute;left:42%;right:-10%;top:-22%;height:62%;z-index:-1;pointer-events:none;background:radial-gradient(45% 50% at 68% 30%,rgba(201,163,94,.15),transparent 70%)}
.stagef .hx .cap{max-width:24em}
.stagef>.grain{opacity:.24}
.stagef .hx h1{max-width:10em}

/* ── the rendered star ── */
.gstar{position:absolute;aspect-ratio:1;pointer-events:none}
.gstar .gs-glow{position:absolute;inset:-24%;border-radius:50%;background:radial-gradient(closest-side,rgba(227,198,142,.3),rgba(201,163,94,.1) 52%,transparent 74%)}
.gstar .gs-obj{position:absolute;inset:0;will-change:transform}
.gstar img{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 26px 46px rgba(0,0,0,.5))}
.gstar .gs-sheen{position:absolute;inset:0;background:linear-gradient(104deg,transparent 38%,rgba(255,243,214,.42) 49%,transparent 60%) 120% 0/260% 100% no-repeat;mix-blend-mode:screen;
  -webkit-mask:url(/media/star/gstar-420.webp) center/100% 100% no-repeat;mask:url(/media/star/gstar-420.webp) center/100% 100% no-repeat}
@keyframes gturn{0%,100%{transform:perspective(1100px) rotateY(-15deg) rotateX(4deg) rotateZ(-2.5deg)}50%{transform:perspective(1100px) rotateY(15deg) rotateX(-3deg) rotateZ(2.5deg)}}
@keyframes gsheen{0%{background-position:125% 0}55%,100%{background-position:-60% 0}}
@keyframes gfloat{0%,100%{transform:translateY(-1.2%) rotate(-1deg)}50%{transform:translateY(1.2%) rotate(1deg)}}
.gstar.turn .gs-obj{animation:gturn 16s ease-in-out infinite}
.gstar.turn .gs-sheen{animation:gsheen 8s ease-in-out infinite}
.gstar.float .gs-obj{animation:gfloat 9s ease-in-out infinite}
.gstar.float .gs-sheen{animation:gsheen 9s ease-in-out infinite}
.gstar.paused .gs-obj,.gstar.paused .gs-sheen{animation-play-state:paused}

/* ── Services: the six things we build on a tilted ring around the star ──
   The ring is a real rotateX plane (perspective + rotateX, one element, so every engine draws it). Its back half sits behind the
   star and its front half in front. The six links are upright chips placed by heroes.js on the same projected circle: depth is
   carried by scale and a slight blur, never by fading (opacity stays .74 or more), and every chip is a 48px link. */
.svc-orbit{position:absolute;z-index:1;left:40%;right:1%;top:3%;bottom:3%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;--tilt:64deg;--persp:1100px}
.svc-orbit:active{cursor:grabbing}
.svc-orbit .gstar{left:50%;top:48%;width:min(54%,calc((100svh - var(--hdr) - 12px) * .54));translate:-50% -50%;z-index:2}
.o-plane{position:absolute;left:var(--cx,50%);top:var(--cy,50%);width:calc(var(--R,200px) * 2);height:calc(var(--R,200px) * 2);margin:calc(var(--R,200px) * -1) 0 0 calc(var(--R,200px) * -1);border-radius:50%;pointer-events:none;
  transform:perspective(var(--persp)) rotateX(var(--tilt)) rotateZ(var(--rot,0deg))}
.o-plane::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(227,198,142,.55);box-shadow:0 0 30px rgba(201,163,94,.28),inset 0 0 30px rgba(201,163,94,.14)}
.o-plane::after{content:"";position:absolute;inset:6%;border-radius:50%;background:repeating-conic-gradient(rgba(227,198,142,.55) 0 .8deg,transparent .8deg 7.5deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(closest-side,transparent calc(100% - 7px),#000 calc(100% - 6px))}
.o-plane.back{z-index:1}
.o-plane.front{z-index:3;clip-path:inset(50% 0 0 0)}   /* the local lower half is the half that rotateX brings toward the viewer */
.svc-orbit .node{position:absolute;left:0;top:0;display:flex;flex-direction:row;width:auto;align-items:center;gap:10px;min-height:50px;padding:7px 18px 7px 10px;border-radius:99px;background:rgba(15,13,11,.74);
  box-shadow:inset 0 0 0 1px rgba(227,198,142,.26),0 12px 30px rgba(0,0,0,.4);color:#f2ede3;text-align:left;-webkit-user-drag:none;
  transform:translate(var(--x,0px),var(--y,0px)) translate(-50%,-50%) scale(var(--s,1));opacity:var(--o,1);filter:blur(var(--bl,0px));z-index:var(--z,5);transition:color .3s,box-shadow .3s}
.svc-orbit .node img{width:28px;height:28px;object-fit:contain;flex:none;filter:drop-shadow(0 0 6px rgba(227,198,142,.45))}
.svc-orbit .node b{font-weight:500;font-size:20px;letter-spacing:-.02em;line-height:1.1;white-space:normal;max-width:7.4em}
.svc-orbit .node:hover,.svc-orbit .node:focus-visible{box-shadow:inset 0 0 0 1px rgba(227,198,142,.7),0 12px 30px rgba(0,0,0,.4)}
.svc-orbit .node:hover b,.svc-orbit .node:focus-visible b{color:var(--gold-hi)}
html:not(.js) .svc-orbit .node{position:static;transform:none;display:inline-flex;margin:4px}
html:not(.js) .svc-orbit{display:flex;flex-wrap:wrap;align-content:flex-end;gap:4px}

/* ── About: the finished star turning slowly; the build runs in the next section ── */
.aboutf .about-star{right:7%;top:50%;width:min(34vw,56svh,560px);translate:0 -50%;z-index:1}
.forge-proc{position:relative;height:calc(100svh - var(--hdr) - 12px + 120svh)}   /* the scroll runway: the build runs over 1.2 screens of scroll */
.forge-proc .fp-pin{position:sticky;top:12px}
.fp-words{position:absolute;z-index:2;left:calc(var(--gut) - 12px);top:44px;bottom:40px;width:min(44%,560px);display:flex;flex-direction:column}
.fp-words .k{color:var(--gold-ink)}
.fp-words h2{margin:12px 0 0;font-weight:500;font-size:clamp(34px,3.4vw,52px);line-height:1.02;letter-spacing:-.035em;max-width:11em}
.forge-seq{position:absolute;z-index:1;left:46%;right:3%;top:5%;bottom:5%;container-type:size;--p:1}
.fs-star{position:absolute;left:50%;top:50%;width:min(86cqw,92cqh);aspect-ratio:1;translate:-50% -50%}
.fs-star svg,.fs-star .fs-real{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.fs-glow{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(closest-side,rgba(227,198,142,calc(.05 + var(--p) * .24)),transparent 72%)}
.fs-grid{opacity:calc(1 - var(--p) * .7);-webkit-mask-image:radial-gradient(closest-side,#000 52%,transparent);mask-image:radial-gradient(closest-side,#000 52%,transparent)}
.fs-grid path{stroke:rgba(201,163,94,.24);stroke-width:2;fill:none}
.fs-plan path{fill:none;stroke:#e3c68e;stroke-width:3.2;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,var(--p) * 4.4,1));opacity:calc(1 - clamp(0,var(--p) * 2.6 - 1.4,1) * .8);filter:drop-shadow(0 0 4px rgba(227,198,142,.8))}
.fs-plan .dash{stroke-dasharray:10 8;stroke-dashoffset:0;opacity:calc(clamp(0,var(--p) * 4.4,1) * .55 * (1 - clamp(0,var(--p) * 2.6 - 1.4,1)))}
.fs-design path{opacity:calc(clamp(0,var(--p) * 4 - 1,1) * (1 - clamp(0,var(--p) * 4 - 2.2,1)) * .9)}
.fs-real{opacity:clamp(0,calc(var(--p) * 4 - 2),1);transform:scale(calc(.9 + clamp(0,var(--p) * 4 - 2,1) * .1));filter:drop-shadow(0 26px 46px rgba(0,0,0,.5))}
.fs-measure circle{fill:none;stroke:#e3c68e}
.fs-measure .tk{stroke-width:14;stroke-dasharray:3 27.6;opacity:clamp(0,calc(var(--p) * 4 - 2.9),.8)}
.fs-measure .arc{stroke-width:4;stroke:#f6dfa6;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,var(--p) * 4 - 3,1));filter:drop-shadow(0 0 6px rgba(246,223,166,.85))}
.fs-steps{list-style:none;margin:auto 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 26px}
.fs-step{border-top:1px solid rgba(201,163,94,.28);padding-top:12px;color:rgba(242,237,227,.62);transition:color .35s,border-color .35s}
.fs-step span{font-family:var(--mono);font-size:13px;color:rgba(227,198,142,.6)}
.fs-step b{display:block;font-weight:500;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.02em;margin:4px 0 6px;color:inherit}
.fs-step p{margin:0;font-size:15.5px;line-height:1.42;color:inherit}
.fs-step.on{color:#f2ede3;border-top-color:var(--gold)}
.fs-step.on span{color:var(--gold-ink)}
html:not(.js) .fs-step{color:#f2ede3}
.proj3{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.proj3 li{position:relative;padding:28px 26px 30px;border-radius:var(--r);background:linear-gradient(165deg,#15120f,#0d0b0e 70%);box-shadow:inset 0 0 0 1px var(--line)}
.proj3 a{display:flex;flex-direction:column;gap:8px;min-height:44px}
.proj3 a .mono{color:var(--gold-ink)}
.proj3 a b{font-weight:500;font-size:clamp(24px,2vw,32px);letter-spacing:-.03em;line-height:1.05}
.proj3 a:hover b{color:var(--gold-hi)}
.proj3 p{margin:12px 0 0;color:var(--ink-2);font-size:16.5px;line-height:1.45}

/* ── Contact: the same star on a pool of light beside "what happens next" ── */
.contact-stage{position:relative;margin-top:26px;display:grid;grid-template-columns:min(25vw,46svh,400px) 1fr;gap:26px;align-items:center;pointer-events:auto}
.contact-stage .gstar{position:relative;width:100%}
.contact-stage .gstar::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-10%;height:30%;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(227,198,142,.42),rgba(201,163,94,.12) 55%,transparent);filter:blur(8px)}
ol.next3{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:n}
ol.next3 li{counter-increment:n;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:baseline;color:rgba(242,237,227,.88);font-size:16.5px;line-height:1.35}
ol.next3 li::before{content:"0" counter(n);font-family:var(--mono);font-size:12.5px;color:var(--gold-ink)}

/* tablets (portrait) */
@media (max-width:1100px){
  .svc-orbit{left:0;right:0;top:auto;bottom:2%;height:60%}
  .svc-orbit .gstar{width:min(46%,calc((100svh - var(--hdr) - 12px) * .36))}
  .aboutf .about-star{right:auto;left:50%;top:auto;bottom:4%;width:min(56vw,46svh);translate:-50% 0}
  .fp-words{left:28px;right:28px;width:auto;top:32px;bottom:auto}
  .forge-seq{left:0;right:0;top:auto;bottom:3%;height:42%}
  .fp-words .fs-steps{margin-top:22px}
  .proj3{grid-template-columns:1fr}
  .contact-stage{grid-template-columns:min(30vw,240px) 1fr;max-width:640px}
}
/* phones: the words, then the piece right under them; the frame ends under the piece, so there is no empty band */
@media (max-width:640px){
  .orbitf,.aboutf{height:auto;min-height:0;display:flex;flex-direction:column}
  .orbitf .hx,.aboutf .hx{position:relative;inset:auto;padding:22px 18px 0}
  .svc-orbit{position:relative;inset:auto;height:288px;margin:-6px 0 6px;--tilt:40deg;--persp:760px}
  .svc-orbit .gstar{width:min(58%,224px);top:48%}
  /* six chips do not fit around a 366px ring, so phones get text labels on a dark halo instead (same 44px links) */
  .svc-orbit .node{gap:6px;min-height:50px;padding:4px 6px;background:none;box-shadow:none}
  .svc-orbit .node:hover,.svc-orbit .node:focus-visible{box-shadow:none}
  .svc-orbit .node img{width:16px;height:16px}
  .svc-orbit .node b{font-size:18px;max-width:6em;text-shadow:0 0 14px rgba(8,7,6,.95),0 0 4px rgba(8,7,6,.9),0 1px 2px rgba(0,0,0,.9)}
  .aboutf .about-star{position:relative;left:auto;bottom:auto;translate:none;width:64%;margin:14px auto 22px}
  .forge-proc{height:calc(100svh - var(--hdr) - 12px + 110svh)}
  .forge-proc .fp-pin{display:flex;flex-direction:column}
  .fp-words{position:relative;inset:auto;width:auto;padding:18px 18px 0;flex:none}
  .fp-words h2{font-size:clamp(30px,9vw,36px)}
  .fs-steps{grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:14px}
  .fs-step{padding-top:8px}
  .fs-step b{font-size:17px;margin:2px 0 3px}
  .fs-step p{font-size:13.5px;line-height:1.36}
  .forge-seq{position:relative;inset:auto;flex:1 1 0;min-height:150px;height:auto;margin:4px 0 8px}
  .contact-stage{grid-template-columns:48% 1fr;gap:14px;margin-top:20px}
  ol.next3 li{font-size:15px;grid-template-columns:26px 1fr;gap:6px}
  .proj3 li{padding:22px 20px 24px}
}
/* landscape phones: words on the left half, the piece on the right half */
@media (max-height:520px) and (orientation:landscape){
  .svc-orbit{position:absolute;left:48%;right:1%;top:3%;bottom:3%;height:auto;margin:0;--tilt:46deg;--persp:760px}
  .svc-orbit .gstar{width:min(46%,calc((100svh - 72px) * .62));top:50%}
  .svc-orbit .node{gap:6px;min-height:50px;padding:4px 6px;background:none;box-shadow:none}
  .svc-orbit .node:hover,.svc-orbit .node:focus-visible{box-shadow:none}
  .svc-orbit .node img{width:16px;height:16px}
  .svc-orbit .node b{font-size:18px;max-width:6em;text-shadow:0 0 14px rgba(8,7,6,.95),0 0 4px rgba(8,7,6,.9),0 1px 2px rgba(0,0,0,.9)}
  .orbitf{height:calc(100svh - var(--hdr) - 12px);display:block}
  .orbitf .hx{position:absolute;padding:0}
  /* Contact: words on the left, the star and what happens next on the right */
  .contactf .hx>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:28px;align-items:start}
  .contactf .hx>div>h1{grid-column:1;grid-row:1}
  .contactf .hx>div>.cap{grid-column:1;grid-row:2}
  .contactf .hx>div>.cta-row{grid-column:1;grid-row:3;align-self:start}
  .contactf .hx>div>.contact-stage{grid-column:2;grid-row:1 / 4;margin-top:0;grid-template-columns:min(19vw,48svh) 1fr}
  .stagef:not(.contactf) .hx{right:52%}   /* Contact keeps its in-flow column */
  .aboutf .about-star{right:6%;left:auto;top:50%;bottom:auto;width:min(30vw,56svh);translate:0 -50%}
  .fp-words{left:20px;top:14px;bottom:12px;width:48%}
  .fp-words h2{font-size:24px;margin-top:6px}
  .fs-steps{grid-template-columns:1fr 1fr;gap:8px 16px}
  .fs-step{padding-top:6px}
  .fs-step b{font-size:15px;margin:1px 0 2px}
  .fs-step p{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* 390px is too short for four sentences: the names light up here, the sentences stay for screen readers */
  .forge-seq{left:52%;right:2%;top:3%;bottom:3%;height:auto}
  .contact-stage{gap:18px}
  ol.next3{gap:6px}
  ol.next3 li{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .gstar .gs-obj,.gstar .gs-sheen{animation:none!important}
  .svc-orbit .node{transition:none}
  .forge-proc{height:auto!important}
  .forge-proc .fp-pin{position:relative;top:auto}
}
.ph-only{display:none}
@media (max-width:640px){.ph-only{display:flex}}
@media (max-height:520px) and (orientation:landscape){.ph-only{display:flex}}

/* ═════ Round 10 (Oct 22, 2026) ═════ */
/* About first screen: no portrait. The three live projects and the four steps give it presence, under the Book button. */
.ab-live{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;pointer-events:auto;max-width:620px}
.ab-live a{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:12px 14px;border-radius:14px;background:rgba(10,9,12,.55);box-shadow:inset 0 0 0 1px rgba(201,163,94,.32);color:#f2ede3;text-decoration:none;font-weight:500;font-size:16px;letter-spacing:-.01em;line-height:1.2;transition:box-shadow .2s}
.ab-live a:hover,.ab-live a:focus-visible{box-shadow:inset 0 0 0 1px var(--gold)}
.ab-live .mono{font-size:11.5px;color:rgba(227,198,142,.75);font-weight:400;letter-spacing:.04em}
.ab-steps{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;color:rgba(242,237,227,.8);font-size:13px}
.ab-steps li{display:flex;gap:7px;align-items:baseline}
.ab-steps span{color:var(--gold-ink)}
@media (max-width:640px){
  .ab-live{grid-template-columns:1fr;gap:8px;margin-top:22px}
  .ab-live a{flex-direction:row;justify-content:space-between;align-items:center;min-height:48px;padding:10px 14px}
  .ab-live .mono{order:2}
  .ab-steps{gap:6px 16px;margin-top:14px}
  /* "How a project runs": one column on phones, and the panel grows to fit the four steps */
  .forge-proc .fp-pin{height:auto;min-height:calc(100svh - var(--hdr) - 12px)}
  .fs-steps,.fp-words .fs-steps{grid-template-columns:1fr;gap:10px}
}
.hx .ab-live a{padding:12px 14px}
@media (max-width:640px){.hx .ab-live a{padding:10px 16px}}
/* short phones: the steps row would sit under Safari's toolbar; the full four steps follow lower on the page */
@media (max-width:640px) and (max-height:740px){.ab-steps{display:none}.ab-live{margin-top:18px}}