/* ============================================================
   97 WORLD — HOME PAGE LAYER
   Mega hero with rotating word, on-page quote calculator,
   featured work, services strip, process rail, manifesto.
   ============================================================ */

/* ============ CINEMATIC SCROLL SCENES ============ */
/* Scene images are real <picture> elements now (AVIF + JPEG fallback,
   desktop/portrait sources) — scene 1 in HTML, 2-5 injected on idle. */
.scenes{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:#050506}
.scene{position:absolute;inset:0;opacity:0;transition:opacity 1.25s ease;will-change:opacity}
.scene img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  transform:scale(1.05);
}
.scene.active{opacity:1}
.scene.active img{animation:kenburns 15s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.14)}}
.scenes-veil{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,4,6,.96) 0%,rgba(4,4,6,.82) 30%,rgba(4,4,6,.52) 60%,rgba(4,4,6,.68) 100%),
    linear-gradient(180deg,rgba(4,4,6,.5),rgba(4,4,6,.28) 20%,rgba(4,4,6,.4) 80%,rgba(4,4,6,.74));
}
@media(max-width:820px){
  .scenes-veil{background:
    linear-gradient(180deg,rgba(4,4,6,.92) 0%,rgba(4,4,6,.64) 24%,rgba(4,4,6,.52) 54%,rgba(4,4,6,.86) 100%);}
}
@media(prefers-reduced-motion:reduce){
  .scene{transition:none}
  .scene img,.scene.active img{animation:none;transform:none}
}

/* ============ HERO — THE BILL ============ */
/* 92svh + tight bottom: the ROUND 01 plate crests the fold (no scroll hint needed) */
.hero2{position:relative;min-height:92vh;min-height:92svh;display:flex;align-items:center;padding:104px 0 36px;overflow:hidden}
/* blueprint grid-paper underlay (was a dot grid) */
.hero2-grid{
  position:absolute;inset:0;z-index:0;opacity:.35;
  background:
    repeating-linear-gradient(0deg,var(--bp) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,var(--bp) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 110px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 110px);
  -webkit-mask-image:radial-gradient(110% 90% at 50% 10%,#000 0%,transparent 70%);
  mask-image:radial-gradient(110% 90% at 50% 10%,#000 0%,transparent 70%);
}
/* margin annotation (desktop only) */
.hero2 .dim.v{left:6px;top:50%;translate:0 -50%;height:min(46vh,420px)}
.hero2 .wm{
  position:absolute;right:-6vw;top:50%;transform:translateY(-52%);z-index:0;
  width:min(58vw,760px);opacity:.055;pointer-events:none;user-select:none;
}
.hero2-inner{position:relative;z-index:2;width:100%}

/* crown line above the bill (skeleton height reserved in critical) */
.bill-crown{justify-content:flex-start;min-height:18px;margin-bottom:14px}

/* height-capped so all three rows + lead + the proof CTAs share the first viewport */
h1.mega{font-size:clamp(58px,min(12.5vw,13.5vh),150px);line-height:.88;font-weight:900;letter-spacing:.01em}
h1.mega .row{display:block}
h1.mega .thin{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.6)}
/* the "name in lights" band: hairlines above and below the rotating word */
.rotwrap{display:block;min-height:1em;border-block:1px solid var(--hair);padding:.05em 0;margin:.03em 0}
#rotWord{display:inline-block;color:var(--ug-y)}
#rotWord.swap{animation:wordIn .55s var(--ease)}
@keyframes wordIn{
  0%{opacity:0;transform:translateY(.35em);filter:blur(10px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
.hero2 .tail{margin-top:18px}
.hero2 .lead{max-width:55ch;color:#c7c7cd;font-size:clamp(16px,2.2vw,18.5px)}
.hero2 .lead b{color:#fff}
/* event tape: cities + live clocks + the from-price */
.hero-tape{justify-content:flex-start;margin-top:16px}
.hero-tape .clock{color:#fff;font-weight:800;margin-left:.55em}
.hero-tape b{color:#fff;font-weight:800}
.hero2 .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px;align-items:center}
/* quiet third path beside the primary */
.cta-mini{
  font-family:var(--font-mono);font-size:12.5px;color:var(--mut);
  letter-spacing:.06em;padding:10px 6px;transition:color .25s;
}
.cta-mini:hover,.cta-mini:focus-visible{color:#fff}
/* proof welded beneath the CTAs: count + live site + stamp, one line */
.proof-line{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);transition:color .25s;
}
.proof-line b{color:#fff;font-weight:700}
.proof-line .stamp{font-size:10.5px;rotate:4deg}
a.proof-line:hover{color:#cfcfd5}
a.proof-line:hover .arr{translate:2px -2px}
.proof-line .arr{display:inline-block;transition:translate .25s}

/* mini TALE OF THE TAPE — ruled figures, no glass */
.hero2-stats{
  display:flex;gap:0;margin-top:38px;background:transparent;
  border-top:3px solid var(--rule);box-shadow:0 -6px 0 2.5px transparent,inset 0 6px 0 -2.5px var(--hair2);
}
.hero2-stats .st{flex:1;padding:18px 22px;border-right:1px solid var(--hair)}
.hero2-stats .st:last-child{border-right:none}
.hero2-stats .st b{
  display:block;font-family:var(--font-display);font-size:30px;font-weight:900;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
.hero2-stats .st span{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}

/* ============ SERVICES STRIP (exp lines) ============ */
.exp-lines{margin-top:44px}
.exp-line{
  display:flex;align-items:center;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);
  transition:.35s;position:relative;
}
.exp-line::before{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:linear-gradient(90deg,var(--ug-y),transparent);transition:width .5s ease;
}
.exp-line:hover::before{width:100%}
.exp-line:hover{padding-left:14px}
.exp-line .idx{
  font-family:var(--font-mono);font-size:11px;color:var(--mut);width:64px;flex:none;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:color .35s;
}
.exp-line:hover .idx{color:var(--ug-y)}
.exp-line .name{font-size:clamp(24px,4.6vw,44px);font-weight:800;letter-spacing:.01em;flex:1;transition:.35s}
/* classic bill rhythm: alternating solid / outline rows */
.exp-line:nth-child(even) .name{color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.55)}
.exp-line:hover .name{transform:translateX(4px)}
.exp-line:hover:nth-child(even) .name{-webkit-text-stroke-color:rgba(255,255,255,.8)}
.exp-line .desc{color:var(--mut);font-size:14.5px;max-width:240px;text-align:right}
.exp-line .amt{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--ug-y);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.exp-line .arrow{color:var(--ug-y);font-size:22px;opacity:0;transform:translateX(-8px);transition:.35s}
.exp-line:hover .arrow{opacity:1;transform:none}
@media(max-width:640px){.exp-line .desc{display:none}.exp-line .idx{width:44px}}

/* ============ WORK → QUOTE FUNNEL BRIDGE (leader lines + ticket) ============ */
.work-bridge{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:44px}
.work-bridge::before,.work-bridge::after{
  content:"";flex:1;height:7px;
  background:
    linear-gradient(var(--hair2),var(--hair2)) 0 50%/1px 7px no-repeat,
    linear-gradient(var(--hair2),var(--hair2)) 100% 50%/1px 7px no-repeat,
    linear-gradient(var(--hair2),var(--hair2)) 0 50%/100% 1px no-repeat;
}
.work-bridge span{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mut);flex:none;
}
@media(max-width:640px){
  .work-bridge{flex-wrap:wrap;gap:14px}
  .work-bridge::before,.work-bridge::after{display:none}
  .work-bridge .btn{width:100%;justify-content:center}
}

/* ============ MANIFESTO — THE DRAWING SHEET ============ */
.manifesto{
  margin-top:70px;text-align:center;position:relative;padding:64px 24px 72px;
  border:1px solid var(--hair2);border-radius:var(--r);
  background:rgba(6,6,8,.6);
}
.manifesto>.bp{opacity:.6}
.manifesto .reg.tl{top:10px;left:10px}
.manifesto .reg.tr{top:10px;right:10px}
.manifesto .reg.bl{bottom:10px;left:10px}
.manifesto .reg.br{bottom:10px;right:10px}
.manifesto .dim{max-width:520px;margin:0 auto 26px;position:relative}
.manifesto h3{position:relative;font-size:clamp(30px,6.5vw,66px);font-weight:900;letter-spacing:.005em;line-height:.98}
.manifesto h3 .x{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.5)}
.manifesto h3 .y{color:var(--ug-y)}
.manifesto>p{position:relative;color:var(--mut);margin-top:16px;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px}
.manifesto .stamp.lg{position:absolute;right:22px;bottom:-16px;rotate:-5deg;background:#070709}
@media(max-width:640px){.manifesto .stamp.lg{right:12px;bottom:-14px}}
/* ============ RESPONSIVE ============ */
@media(max-width:820px){
  .hero2{padding-top:110px}
  .hero-tape{justify-content:flex-start}
  .hero2-stats{flex-wrap:wrap}
  .hero2-stats .st{flex:1 1 40%;border-bottom:1px solid var(--hair)}
  .hero2-stats .st:nth-child(n+3){border-bottom:none}
  .hero2 .wm{right:-30vw;opacity:.045}
}
@media(max-width:640px){
  .hero2 .cta-row{flex-direction:column;align-items:stretch}
  .hero2 .cta-row .btn{justify-content:center}
  .hero2-stats .st{flex:1 1 40%}
}

/* ============ PHASE 2: scroll-driven hero (CSS owns it when supported) ============ */
@supports (animation-timeline: scroll()){
  .hero2-inner{animation:heroOut linear both;animation-timeline:scroll(root);animation-range:0 92vh}
  @keyframes heroOut{to{transform:translateY(28vh);opacity:0}}
  .hero2 .wm{animation:wmDrift linear both;animation-timeline:scroll(root);animation-range:0 130vh}
  @keyframes wmDrift{from{transform:translateY(-52%)}to{transform:translateY(calc(-52% + 12vh))}}
}
/* rotating word: reserve the widest word so lines never jump */
.rotwrap{min-inline-size:6.2ch}