/* Home page (index.html): hero, "How we split the work", services grid, ident monitor,
   industries line and the closing email band. Shared components live in piw.css. */

html{scroll-padding-top:calc(var(--header-h) + 16px)}   /* focus and anchors land below the fixed header (no snapping on this page) */
.section+.section{padding-top:0}
.section-head{display:grid;justify-items:start;gap:var(--s4);margin-bottom:clamp(32px,4vw,56px)}
.section-head .lede{max-width:60ch}

/* ---------- hero: 100svh stage. three.js canvas, blueprint notes and crosshair fill it (hero.js);
   the copy sits bottom-centre above the tapes; the logo is framed in the band between header and copy. */
.hero{position:relative;display:flex;flex-direction:column;height:100vh;height:100svh;min-height:560px;padding:var(--header-h) 0 112px}
.hero-gl,.hero-notes,.hero-xh{position:absolute;inset:0;width:100%;height:100%}
.hero-gl{z-index:0;touch-action:pan-y pinch-zoom}
.hero-notes,.hero-xh{z-index:1;pointer-events:none;overflow:hidden}
.hero-stage{position:relative;flex:1 1 auto;min-height:0}
/* no WebGL: the static logo fades in; hero.js adds .is-gl once the renderer is up */
.hero-fallback{position:absolute;left:50%;top:50%;width:auto;max-width:none;height:min(150%,100vw);transform:translate(-50%,-50%);opacity:0;pointer-events:none;animation:hero-fade 1s 4s forwards}
.hero.is-gl .hero-fallback,.hero:not(.is-gl) .hero-hint{display:none}
.page-home .bg-grid{transition:opacity .6s var(--ease)}   /* hero.js hides it under the hero's own sheet */

.hero-notes{opacity:0;transition:opacity 1.6s}
.hero-notes.on{opacity:1}
.note,.hero-xh span{position:absolute;left:0;top:0;white-space:nowrap;font-size:9px;font-weight:500;font-stretch:75%;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--gold-dim)}
.hero-xh{opacity:0;transition:opacity .4s}
.hero-xh.on{opacity:1}
.hero-xh i{position:absolute;left:0;top:0;background:rgba(217,179,106,.16)}
.hero-xh .h{width:100%;height:1px}
.hero-xh .v{width:1px;height:100%}
.hero-xh span{letter-spacing:.14em;color:var(--gold)}

.hero-copy{position:relative;z-index:2;width:min(1180px,100% - 2 * var(--gutter));margin-inline:auto;text-align:center;text-shadow:0 2px 20px rgba(0,0,0,.85)}
.hero-copy h1{margin:12px 0 14px;font-size:clamp(20px,min(2vw,3vh),30px);line-height:1.1;letter-spacing:.06em}
.hero-copy h1 span{white-space:nowrap}   /* wrap between the two halves, never at a hyphen */
.hero-copy .lede{max-width:50em;margin-inline:auto;font-size:clamp(15px,.3vw + 13.6px,18px);text-wrap:balance}
.hero-copy .btn-row{justify-content:center;margin-top:24px}
.hero-copy .btn{text-shadow:none}

/* render counter: the site is always in post */
.render{width:min(440px,100%);margin:26px auto 0;font-size:10px;font-weight:600;font-stretch:75%;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--muted)}
.render-row{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;line-height:1.2}
.render-row b{color:var(--gold);font-weight:600}
.render-bar{position:relative;height:2px;background:rgba(217,179,106,.18)}
.render-bar i{position:absolute;inset:0;background:repeating-linear-gradient(-45deg,var(--gold) 0 4px,var(--gold-dim) 4px 8px);transform-origin:left;transform:scaleX(0)}
.render-bar u{position:absolute;top:-3px;left:0;width:2px;height:8px;margin-left:-1px;background:var(--cream);box-shadow:0 0 8px 1px rgba(217,179,106,.8)}
.hero-hint{margin-top:14px;font-size:10px;font-weight:600;font-stretch:75%;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (hover:none){.h-mouse{display:none}}
@media (hover:hover){.h-touch{display:none}}

.tapes--hero{position:absolute;left:0;right:0;bottom:0;animation:hero-tapes 1.2s var(--ease) 2s both}

/* intro: the copy rises in while the particles settle */
@keyframes hero-rise{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes hero-tapes{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes hero-fade{to{opacity:1}}
.hero-copy>*{animation:hero-rise 1.2s var(--ease) both}
.hero-copy>:nth-child(1){animation-delay:.9s}
.hero-copy>:nth-child(2){animation-delay:1.05s}
.hero-copy>:nth-child(3){animation-delay:1.3s}
.hero-copy>:nth-child(4){animation-delay:1.5s}
.hero-copy>:nth-child(5){animation-delay:1.8s}
.hero-copy>:nth-child(6){animation-delay:2.4s}

@media (max-height:820px){.hero-hint{display:none}}
@media (max-height:800px){
  .hero-copy h1{margin:10px 0 12px}
  .hero-copy .btn-row{margin-top:18px}
  .hero-copy .btn--lg{min-height:48px;padding-inline:22px;font-size:12px}
  .render{margin-top:18px}
}
@media (max-width:640px){
  .hero{padding-bottom:96px}
  .hero-copy h1{margin:10px 0 12px;font-size:clamp(19px,5.4vw,24px);line-height:1.12}
  .hero-copy .btn-row{gap:10px;margin-top:20px}
  .hero-copy .btn--lg{min-height:48px;padding-inline:16px;font-size:11.5px;letter-spacing:.12em}
  .render{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){
  .hero-copy>*,.tapes--hero{animation-delay:0s!important}
  .hero-hint{display:none}   /* the sim is a still frame: nothing to disturb */
}

/* ---------- how we split the work: two glass columns, artists first */
.split-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.split-col{padding:clamp(24px,3vw,40px);--tick:16px}
.split-col h3{font-size:clamp(22px,1.4vw + 14px,34px);font-stretch:118%;line-height:1.05;letter-spacing:.01em;text-transform:uppercase}
.split-col--artists h3{color:var(--gold-hi)}
.split-col ul{list-style:none;counter-reset:task;margin-top:var(--s5);border-top:1px solid var(--line)}
.split-col li{counter-increment:task;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);color:var(--text)}
.split-col li::before{content:counter(task,decimal-leading-zero);font-size:var(--fs-micro);font-weight:600;font-stretch:75%;letter-spacing:.16em;font-variant-numeric:tabular-nums;color:var(--gold-dim)}
.split-close{display:flex;align-items:center;gap:var(--s4);margin-top:clamp(20px,2.4vw,32px);font-size:var(--fs-lede);line-height:1.45;color:var(--cream)}
.split-close .icon{width:34px;height:34px;padding:7px;border:1px solid var(--gold);border-radius:var(--radius);color:var(--gold)}
@media (max-width:760px){.split-cols{grid-template-columns:1fr}}

/* ---------- services: nine cards, 3 / 2 / 1 columns */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.svc-grid .card{min-height:100%;padding-top:clamp(22px,2.4vw,30px);--tick:12px;transition:translate var(--t) var(--ease),border-color var(--t) var(--ease)}
.svc-grid .card-num{position:absolute;top:clamp(20px,2.2vw,28px);right:clamp(20px,2.2vw,28px)}
.svc-grid .card>.icon{margin-bottom:var(--s2)}
/* lift with `translate`: the data-reveal animation owns `transform` once it has run */
.svc-grid a.card:hover{transform:none;translate:0 -3px}
@media (max-width:1000px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-grid>:last-child{grid-column:1/-1}
}
@media (max-width:620px){.svc-grid{grid-template-columns:1fr}}

/* ---------- studio ident: a review monitor */
.monitor{margin:0;padding:clamp(8px,1.2vw,14px);--tick:18px}
.monitor-screen{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--ink)}
.monitor-video{width:100%;height:100%;object-fit:cover}
.monitor-hud{position:absolute;left:0;right:0;top:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:12px 16px 32px;pointer-events:none;
  background:linear-gradient(rgba(10,9,8,.62),transparent);font-size:var(--fs-micro);font-weight:600;font-stretch:75%;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--text)}
.monitor-hud b{color:var(--gold);font-weight:600;text-transform:none}   /* clip name keeps its lowercase v */
.monitor-tc{color:var(--gold-hi)}
.monitor-toggle{position:absolute;left:12px;bottom:12px;min-height:44px;padding:0 16px;--btn-bg:rgba(10,9,8,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.monitor-toggle:hover{--btn-bg:rgba(30,26,20,.75)}
.monitor-toggle .icon{width:14px;height:14px}
.monitor-toggle.is-playing .icon-play,.monitor-toggle:not(.is-playing) .icon-pause{display:none}
.monitor-cap{max-width:72ch;padding:var(--s4) clamp(4px,1vw,10px) clamp(4px,.8vw,8px);font-size:15px;line-height:1.6;color:var(--muted)}
@media (max-width:520px){.monitor-hud{padding:10px 12px 24px;letter-spacing:.1em}}

/* ---------- industries */
.industries{position:relative;padding-bottom:var(--section-y)}
.industries-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,3.2fr);gap:var(--s4) var(--s6);align-items:baseline;padding-block:clamp(24px,3vw,40px);border-block:1px solid var(--line)}
.industries-line{max-width:62ch;font-size:clamp(18px,.9vw + 13px,26px);font-stretch:108%;line-height:1.45;color:var(--cream)}
@media (max-width:720px){.industries-row{grid-template-columns:1fr}}

/* ---------- closing band: start with an email */
.cta{padding-top:0}
.cta-slate{display:grid;justify-items:start;gap:var(--s4);padding:clamp(28px,5vw,72px);--tick:20px}
.cta-slate h2{font-size:clamp(32px,3.6vw + 12px,72px)}
.cta-slate .lede{max-width:56ch}
.cta-mail{margin-top:var(--s2);font-size:clamp(22px,3.2vw + 9px,54px);font-weight:500;font-stretch:100%;line-height:1.15;color:var(--gold);text-decoration:underline;text-decoration-color:rgba(217,179,106,.4);text-underline-offset:.18em;overflow-wrap:anywhere;transition:color var(--t-fast),text-decoration-color var(--t-fast)}
.cta-mail:hover{color:var(--gold-hi);text-decoration-color:currentColor}
.cta-slate .btn-row{margin-top:var(--s3)}