:root { --soot:#1A1714; --copper:#C45C26; --cream:#F4EFE6; --ember:#E8803A; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--soot); color: var(--cream); }
body { font-family: 'Source Serif 4', Georgia, serif; overflow-x: hidden; }
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--soot); }
.stage { position: absolute; left: 0; top: 0; width: 100px; height: 100px; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd, .particles { display: block; }
.hall, .anvil { background-size: 100% 100%; background-repeat: no-repeat; }
.hall, .anvil, .hallfx { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hallfx { mix-blend-mode: screen; pointer-events: none; }
.glow { position: absolute; pointer-events: none; mix-blend-mode: screen; }
.glow i { position: absolute; inset: 0; }
.panel { --r: 14px; position: absolute; will-change: transform; border-radius: var(--r); cursor: default;
  box-shadow: 0 16px 38px -6px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35), 0 0 30px rgba(255,166,88,.12); }
.hero.phone .panel { --r: 11px; }
.glass { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: var(--r); }
.hero.nogl .panel { background: rgba(40,30,24,.28); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
.panel-clip { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r); }
.slot { position: absolute; inset: 0; overflow: hidden; display: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.slot.on { display: block; }
.slot .host { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.blank { position: absolute; inset: 0; border-radius: var(--r); background: radial-gradient(ellipse at 50% 60%, rgba(255,214,160,.20), rgba(255,170,90,.06) 60%, rgba(255,255,255,.03)); }
.glass-fx { position: absolute; inset: 0; border-radius: var(--r); pointer-events: none; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1.5px 0 rgba(255,255,255,.5), inset 1px 0 0 rgba(255,255,255,.14), inset 0 -12px 18px -14px rgba(255,255,255,.22), inset 0 0 26px rgba(255,255,255,.07); }
.glass-fx i { position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.10) 47%, rgba(255,240,220,.16) 50%, rgba(255,255,255,.10) 53%, transparent 62%); background-size: 100% 100%; mix-blend-mode: screen; will-change: transform; }

.scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(26,23,20,.7) 0%, rgba(26,23,20,.42) 20%, rgba(26,23,20,.12) 34%, rgba(26,23,20,0) 40%),
              linear-gradient(0deg, rgba(26,23,20,.55) 0%, rgba(26,23,20,0) 16%),
              linear-gradient(180deg, rgba(26,23,20,.6) 0%, rgba(26,23,20,0) 13%); }
.copy { position: absolute; inset: 0; pointer-events: none; }
.copy a { pointer-events: auto; }
.nav { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 4vw, 56px); }
.logo img { height: 38px; width: auto; display: block; }
.links { display: flex; gap: 28px; font: 500 15px/1 'Space Grotesk', system-ui, sans-serif; letter-spacing: .02em; }
.links a { color: var(--cream); text-decoration: none; opacity: .86; }
.links a:hover { opacity: 1; color: #FFB27A; }
.headline { position: absolute; left: clamp(20px, 4vw, 56px); top: 50%; transform: translateY(-50%); width: min(24vw, 360px); }
h1 span { display: block; white-space: nowrap; }
h1 { margin: 0 0 18px; font: 700 clamp(34px, 3vw, 52px)/1.06 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.02em; text-wrap: balance; }
.sub { margin: 0 0 28px; font: 400 clamp(15px, 1.1vw, 18px)/1.5 'Source Serif 4', Georgia, serif; color: rgba(244,239,230,.82); max-width: 30em; }
.cta { display: inline-block; padding: 15px 28px; background: var(--copper); color: #fff; font: 600 16px/1 'Space Grotesk', system-ui, sans-serif; text-decoration: none; border-radius: 3px; letter-spacing: .02em; box-shadow: 0 6px 24px rgba(196,92,38,.35); }
.cta:hover { background: #D86A30; }
.cta:focus-visible, .links a:focus-visible { outline: 2px solid #FFB27A; outline-offset: 3px; }

.next { min-height: 70vh; display: grid; place-items: center; background: #14110f; color: rgba(244,239,230,.5); font: 500 14px 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase; }

/* phone composition */
.hero.phone .nav { padding: 12px 16px 0; }
.hero.phone .logo img { height: 26px; }
.hero.phone .links { gap: 14px; font-size: 12px; }
.hero.phone .headline { left: 0; right: 0; top: 0; bottom: 0; width: auto; transform: none; }
.hero.phone h1 { position: absolute; left: 16px; right: 16px; top: 54px; font-size: 21px; line-height: 1.1; margin: 0; }
.hero.phone h1 span { display: inline; white-space: normal; }
.hero.phone .sub { display: none; }
.hero.phone .cta { position: absolute; bottom: max(14px, 3.5%); left: 16px; right: 16px; text-align: center; padding: 16px 0; margin: 0; }
.hero.phone .scrim { background:
  linear-gradient(180deg, rgba(26,23,20,.74) 0%, rgba(26,23,20,.62) 6%, rgba(26,23,20,.40) 11%, rgba(26,23,20,.16) 15%, rgba(26,23,20,.04) 18%, rgba(26,23,20,0) 20%),
  linear-gradient(0deg, rgba(26,23,20,.80) 0%, rgba(26,23,20,.66) 6%, rgba(26,23,20,.42) 11%, rgba(26,23,20,.16) 15%, rgba(26,23,20,.04) 18%, rgba(26,23,20,0) 20%); }