/* Formrelay design refinements (layout and typography).
   Loaded after styles.css and stories.css; colors come from the tokens at the top of styles.css. */

/* ---------- Type scale: a clearer step between display, section and body ---------- */
.hero-copy h1{font-size:clamp(56px,6.4vw,100px);letter-spacing:-.045em;line-height:.98}
.eyebrow,.chapter-label{letter-spacing:.01em}
@media(max-width:760px){.hero-copy h1{font-size:clamp(46px,12vw,64px)}}

/* ---------- Hero stage: one object at a time ---------- */
.hero-stage{background:var(--tint-2);transition:background-color .9s cubic-bezier(.65,0,.2,1)}
.hero-stage:before{width:60%;height:56%;background:var(--tint-warm);transition:background-color .9s cubic-bezier(.65,0,.2,1),width 1s cubic-bezier(.65,0,.2,1),height 1s cubic-bezier(.65,0,.2,1)}
.hero-stage[data-tone=cool]{background:var(--tint)}
.hero-stage[data-tone=cool]:before{width:44%;height:72%;background:var(--paper-hi)}
.hero-stage[data-tone=dark]{background:var(--brand-deep)}
.hero-stage[data-tone=dark]:before{width:72%;height:44%;background:#2a3136}
.hero-stage .hero-stage-label{z-index:2;transition:color .6s}
.hero-stage[data-tone=dark] .hero-stage-label{color:var(--on-dark-muted)}
.stage-slide{position:absolute;inset:11% 9% 21%;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}
.stage-slide.is-active{opacity:1;pointer-events:auto}
.stage-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.stage-photo{inset:16% 7% 25%}
.stage-photo img{border-radius:2px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.stage-index{position:absolute;left:22px;right:22px;bottom:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;z-index:2}
.stage-index button{position:relative;display:flex;align-items:baseline;gap:10px;min-height:44px;padding:14px 0 0;background:none;border:0;text-align:left;cursor:pointer;font:12px/1.4 var(--mono);color:var(--muted);transition:color .4s}
.stage-index button .stage-num{color:inherit;opacity:.7}
.stage-index button i{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line-2);overflow:hidden}
.stage-index button i:after{content:'';position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.stage-index button.is-active{color:var(--ink)}
.stage-index button.is-active i:after{transform:scaleX(1)}
.stage-index button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.hero-stage[data-tone=dark] .stage-index button{color:var(--on-dark-muted)}
.hero-stage[data-tone=dark] .stage-index button.is-active{color:var(--on-dark)}
.hero-stage[data-tone=dark] .stage-index button i{background:rgba(255,255,255,.18)}
@media(max-width:480px){.stage-index .stage-name{display:none}}

/* ---------- Awards: three logos, still and centred ---------- */
.award-static{overflow:hidden}
.award-static .award-group{width:auto;max-width:1100px;margin:0 auto;justify-content:space-evenly}

/* ---------- Brand strip: hover pauses; the control only shows for keyboard users ---------- */
.marquee:hover .marquee-track{animation-play-state:paused}
.brand-heading .marquee-control:not(:focus-visible){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Teardown ---------- */
.teardown{position:relative;height:330vh;--e:0}
.teardown-sticky{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;align-items:center}
.teardown-copy{display:flex;flex-direction:column;gap:22px;max-width:420px}
.teardown-copy h2{margin:0;font-size:clamp(40px,4.2vw,64px);font-weight:450;line-height:1.02;letter-spacing:-.035em}
.teardown-copy p{margin:0;font-size:17px;line-height:1.55;color:var(--muted)}
.teardown-note{font:12px/1.5 var(--mono);color:var(--muted-2)}
.teardown-stage{position:relative;container-type:inline-size;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;align-self:center}
/* The drawing is always limited by height, so the labels (placed by % of height) line up with the layers */
.teardown-svg{height:min(84vh,760px,calc((100cqw - 250px) * 1.2667));width:auto;aspect-ratio:600/760;display:block;overflow:visible}
.td-all{transform-origin:300px 380px;transform:rotate(calc(-7deg + var(--e) * 7deg)) scale(calc(.92 + var(--e) * .08))}
.td-layer{transform:translateY(calc(var(--o) * var(--e) * 1px))}
.teardown-labels{position:relative;list-style:none;margin:0;padding:0}
.teardown-labels li{position:absolute;left:0;right:0;top:var(--y);transform:translate(calc((1 - var(--e)) * -18px),-50%);opacity:clamp(0,calc((var(--e) - .55) * 3.4),1);display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;row-gap:2px;padding-left:18px}
.teardown-labels li:before{content:'';position:absolute;right:calc(100% - 8px);top:.7em;width:clamp(30px,6vw,90px);height:1px;background:var(--ink);opacity:.45}
.teardown-labels li:after{content:'';position:absolute;left:4px;top:calc(.7em - 3px);width:7px;height:7px;border-radius:50%;background:var(--accent)}
.td-num{font:12px/1.6 var(--mono);color:var(--accent-ink);grid-row:span 2}
.td-name{font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.td-proc{font:12px/1.5 var(--mono);color:var(--muted)}
@media(max-width:900px){
  .teardown{height:280vh}
  .teardown-sticky{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:16px;align-content:center;padding-block:70px 20px}
  .teardown-copy{gap:10px}
  .teardown-copy p,.teardown-note{display:none}
  .teardown-copy h2{font-size:clamp(32px,8vw,44px)}
  .teardown-svg{height:min(58vh,calc((100cqw - 128px) * 1.2667))}
  .td-proc{display:none}
  .td-name{font-size:14px}
  .teardown-labels li{grid-template-columns:22px minmax(0,1fr);padding-left:12px}
  .teardown-labels li:before{width:16px}
}
@media(prefers-reduced-motion:reduce){
  .teardown{height:auto;--e:.9}
  .teardown-sticky{position:static;height:auto;padding-block:90px}

}

/* ---------- Industry list: an object follows the pointer ---------- */
.industry-list span[data-img]{cursor:default}
.fr-float{position:fixed;left:0;top:0;z-index:40;width:220px;height:160px;padding:14px;box-sizing:border-box;background:var(--surface);box-shadow:0 24px 50px -24px rgba(23,25,27,.45);pointer-events:none;opacity:0;scale:.85;transition:opacity .25s ease,scale .35s cubic-bezier(.2,.8,.2,1)}
.fr-float.is-on{opacity:1;scale:1}
.fr-float img{width:100%;height:100%;object-fit:contain;display:block}

/* ---------- Contact: open by default, clear final step ---------- */
.contact-panel>summary{cursor:pointer}