/* ============================================================
   MELLOW MEDIA · V14 "ROAD TO THE SUN"
   City pop print system: cobalt, ink, paper, sun red, pink.
   ============================================================ */

@font-face { font-family: 'Anton'; src: url('assets/fonts/Anton.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Proba Pro'; src: url('assets/fonts/ProbaPro-Regular.woff2') format('woff2'), url('assets/fonts/ProbaPro-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Proba Pro'; src: url('assets/fonts/ProbaPro-Medium.woff2') format('woff2'), url('assets/fonts/ProbaPro-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Proba Pro'; src: url('assets/fonts/ProbaPro-SemiBold.woff2') format('woff2'), url('assets/fonts/ProbaPro-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Proba Pro'; src: url('assets/fonts/ProbaPro-Bold.woff2') format('woff2'), url('assets/fonts/ProbaPro-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }

:root {
  --ink: #100E0C;
  --ink-soft: #1C1916;
  --paper: #F4EFE2;
  --paper-dim: #E7E0CE;
  --cobalt: #1F35CE;
  --cobalt-deep: #14229B;
  --sun: #EF3B1B;
  --ember: #E14B27;
  --coral: #F2632D;
  --green: #17934A;
  --green-deep: #0C4A28;
  --pink: #F2A7D8;
  --gold: #FFB43C;
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body: 'Proba Pro', 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --rad: 20px;
  --border: 2.5px solid var(--ink);
  --shadow: 7px 8px 0 rgba(16, 14, 12, .92);
  --shadow-s: 4px 5px 0 rgba(16, 14, 12, .92);
  --ease: cubic-bezier(.22, .75, .22, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ink);
  overflow-x: hidden;
}
html.has-cursor body { cursor: none; }
html.has-cursor a, html.has-cursor button, html.has-cursor summary { cursor: none; }

::selection { background: var(--sun); color: var(--paper); }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { border-radius: 999px; }

html.no-webgl .hint { display: none; }

.mono { font-family: var(--mono); letter-spacing: .06em; }

/* ============ WORLD CANVAS ============ */
#world {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
html.no-webgl #world { display: none; }

/* ============ STAGE SECTIONS ============ */
.stage { position: relative; z-index: 1; }
.stage-pin {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.stage-hero { height: 118vh; }
.stage-tall { height: 260vh; }
.stage-svc { height: 240vh; }
.stage-finale { height: 170vh; }

/* CSS fallback backgrounds (painted when WebGL is unavailable) */
.stage-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 1; z-index: 0;
}
html.webgl .stage-bg { opacity: 0; }
html.no-webgl #problem .stage-bg { filter: grayscale(.92) contrast(1.05); }
.stage .stage-pin > * { position: relative; z-index: 2; }
.stage .stage-pin .stage-bg { z-index: 0; }
/* anchored widgets MUST stay absolute (the generic pin rule above would
   otherwise turn them into flex children and break their coordinates) */
.stage .stage-pin > .screen-anchor { position: absolute; z-index: 1; }

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 26px;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-mark { width: 34px; height: 34px; background: var(--paper); border: var(--border); border-radius: 9px; padding: 3px; box-shadow: var(--shadow-s); }
.nav-name {
  font-family: var(--display); font-size: 16px; letter-spacing: .05em; color: var(--paper);
  background: var(--ink); border: 2px solid rgba(244,239,226,.85); border-radius: 9px;
  padding: 6px 12px 5px; box-shadow: var(--shadow-s);
}
.nav-name b { color: var(--gold); font-weight: 400; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-tel {
  color: var(--paper); text-decoration: none; font-size: 11.5px;
  background: var(--ink); border: 2px solid rgba(244,239,226,.85); border-radius: 999px;
  padding: 8px 14px; box-shadow: var(--shadow-s);
}
.nav-tel:hover { color: var(--gold); }

/* ============ BUTTONS + CHIPS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 700; font-size: 15.5px;
  padding: 13px 24px; border-radius: 999px;
  border: var(--border); text-decoration: none;
  box-shadow: var(--shadow-s);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
  will-change: transform;
  background: var(--paper); color: var(--ink);
}
.btn:hover { transform: translate(-1px, -3px); box-shadow: 6px 8px 0 rgba(16,14,12,.92); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(16,14,12,.92); }
.btn-sun { background: var(--sun); color: var(--paper); }
.btn-sun:hover { background: var(--ember); }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--paper); box-shadow: 4px 5px 0 rgba(244,239,226,.28); }
.btn-ghost:hover { background: rgba(244,239,226,.12); box-shadow: 6px 8px 0 rgba(244,239,226,.28); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-s { padding: 10px 18px; font-size: 14px; }
.btn-wide { width: 100%; justify-content: center; }
.nav-cta { padding: 10px 18px; font-size: 14px; }
.arrow { font-family: var(--mono); }
button.btn { cursor: pointer; }

.chip {
  display: inline-block; font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; font-weight: 700;
  padding: 5px 11px 4px; border-radius: 7px;
  border: 2px solid var(--ink);
  background-image: radial-gradient(rgba(16,14,12,.16) 1px, transparent 1.4px);
  background-size: 6px 6px;
}
.chip-sun { background-color: var(--sun); color: var(--paper); }
.chip-ink { background-color: var(--ink); color: var(--paper); border-color: var(--paper); }
.chip-paper { background-color: var(--paper); color: var(--ink); }

.mile { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.mile .mono { font-size: 11.5px; letter-spacing: .16em; opacity: .85; }

/* ============ TYPE ============ */
h1, h2, h3, .giant { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .96; letter-spacing: .005em; }
h1 { font-size: clamp(3.4rem, 8.6vw, 8rem); }
h2, .giant { font-size: clamp(2.5rem, 5.6vw, 5rem); }
h3 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 560px; }

/* the sunword stays PLAIN INLINE so its glyphs share the exact baseline of
   the words around it (PEOPLE / PULL OVER align perfectly). The dots are an
   absolutely positioned row hung off the word — they paint in the gap
   below without touching ANY layout. `top` is tuned so the row sits
   centered between the glyph bottoms and the next block of text. */
.sunword { font-style: normal; color: var(--sun); position: relative; }
.sunword::after {
  content: ''; position: absolute; left: 2%; right: 2%;
  top: 1.26em; height: .1em;
  background-image: radial-gradient(var(--sun) 34%, transparent 36%);
  background-size: .18em .18em; background-position: 0 50%; background-repeat: repeat-x;
  opacity: .9; pointer-events: none;
}
h1:has(.sunword), h2:has(.sunword), h3:has(.sunword) { padding-bottom: .2em; }
.flat-ink .sunword, .stage .sunword { color: var(--sun); }
.flat-cobalt .sunword { color: var(--gold); }
.flat-cobalt .sunword::after { background-image: radial-gradient(var(--gold) 34%, transparent 36%); }

/* ============ REVEALS ============ */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--ease) var(--d, 0s), transform .75s var(--ease) var(--d, 0s); }
.rv.on { opacity: 1; transform: none; }

[data-slam] .wline { display: inline-block; overflow: hidden; vertical-align: bottom; }
[data-slam] .w { display: inline-block; transform: translateY(112%); transition: transform .7s var(--ease); }
[data-slam].on .w { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv, [data-slam] .w { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}

/* ============ HERO ============ */
.stage-hero .stage-pin { justify-content: flex-end; padding: 0 0 9vh; }
.hero-copy {
  width: min(1180px, 92vw); margin: 0 auto;
  color: var(--paper);
  text-shadow: 0 2px 0 rgba(16,14,12,.4);
}
.hero-copy::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 78vh; z-index: -1;
  background: linear-gradient(180deg, transparent 0%, rgba(16,14,12,.38) 46%, rgba(16,14,12,.66) 100%);
  pointer-events: none;
}
.kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.kicker .mono { font-size: 12px; letter-spacing: .2em; }
h1 .sunword { text-shadow: 3px 3px 0 rgba(16,14,12,.55); }
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.35rem); max-width: 520px; margin: 22px 0 30px; font-weight: 500; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-foot {
  width: min(1180px, 92vw); margin: 6vh auto 0;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--paper); font-size: 11.5px; letter-spacing: .22em; opacity: .9;
}
/* road dashes flowing toward MILE 00 — a seamless one-tile loop, the
   road passing under you (the old version shuttled back and forth) */
.hero-dashes {
  flex: 1; height: 3px; margin: 0 28px; align-self: center;
  background-image: linear-gradient(90deg, currentColor 0 14px, transparent 14px 30px);
  background-size: 30px 3px; background-repeat: repeat-x;
  animation: dashflow 1.1s linear infinite;
  opacity: .85;
}
@keyframes dashflow { from { background-position: 0 0; } to { background-position: 30px 0; } }
@media (prefers-reduced-motion: reduce) { .hero-dashes { animation: none; } }

/* ============ LANES (content over the world) ============ */
.lane { width: min(1240px, 94vw); margin: 0 auto; display: flex; }
.lane-l { justify-content: flex-start; }
.lane-r { justify-content: flex-end; }

/* Problem section: copy directly on the greyed world, with scrim */
#problem .lane-l { color: var(--paper); flex-direction: column; align-items: flex-start; }
#problem .stage-pin::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(16,14,12,.72) 0%, rgba(16,14,12,.42) 46%, transparent 72%);
  pointer-events: none;
}
#problem .lane { position: relative; z-index: 2; }
#problem h2 { max-width: 640px; margin-bottom: 18px; }
.stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 26px 0 22px; }
.stat {
  background: var(--paper); color: var(--ink);
  border: var(--border); border-radius: 16px; box-shadow: var(--shadow-s);
  padding: 14px 18px; max-width: 200px;
}
.stat b { display: block; font-size: 26px; letter-spacing: 0; color: var(--sun); }
.stat span { font-size: 13px; line-height: 1.35; display: block; margin-top: 4px; }
.grey-note { margin: 8px 0 6px; }
.grey-note .mono { font-size: 12px; letter-spacing: .2em; opacity: .75; }
.hint { font-size: 11.5px; letter-spacing: .18em; color: var(--gold); opacity: .95; }
.hint::before { content: '☼ '; }
@media (pointer: coarse) { .hint { display: none; } }

/* ============ FLAT SECTIONS ============ */
.flat { position: relative; z-index: 2; padding: clamp(80px, 12vh, 140px) 0; }
.wrap { width: min(1240px, 92vw); margin: 0 auto; }
.wrap-narrow { width: min(860px, 92vw); }

.flat-ink { background: var(--ink); color: var(--paper); }
.flat-ink::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(244,239,226,.05) 1px, transparent 1.4px);
  background-size: 8px 8px; pointer-events: none;
}
.flat-paper { background: var(--paper); color: var(--ink); }
.flat-paper::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(16,14,12,.05) 1px, transparent 1.4px);
  background-size: 8px 8px; pointer-events: none;
}
.flat-cobalt { background: var(--cobalt); color: var(--paper); }
.flat-cobalt::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(16,14,12,.16) 1.2px, transparent 1.6px);
  background-size: 9px 9px; pointer-events: none;
}
.flat .wrap { position: relative; z-index: 1; }
.flat .giant { margin-bottom: 18px; max-width: 900px; }
.flat .lead { margin-bottom: 8px; }

.ascii-strip {
  margin-top: 46px; font-size: 12px; letter-spacing: .12em;
  white-space: nowrap; overflow: hidden; opacity: .7;
  text-align: center;
}

/* ============ SERVICE CARDS ============ */
.svc-card {
  background: var(--paper); color: var(--ink);
  border: var(--border); border-radius: var(--rad);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 34px);
  width: min(520px, 100%);
}
.svc-card .mile { margin-bottom: 12px; }
/* web stage: the painted drive-in screen sits left of center, so the card
   lives on the right and stays narrow enough to never cover the screen
   (the content lane is 1240px until 1600, so narrow the card up to there) */
@media (max-width: 1599px) { .svc-card-web { width: min(470px, 100%); } }
.svc-card h3 { margin-bottom: 12px; }
.svc-card > p { font-size: 15.5px; margin-bottom: 14px; }
.svc-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; margin: 4px 0 18px; }
.svc-list li { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; padding-left: 16px; position: relative; }
.svc-list li::before { content: '▸'; position: absolute; left: 0; color: var(--sun); }
.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
/* stops carry no prices; numbers live on the rate card (Mile 08) only */
.price-link { font-size: 10px; letter-spacing: .18em; font-weight: 700; color: var(--ember); text-decoration: none; }
.price-link:hover { color: var(--sun); text-decoration: underline; text-underline-offset: 4px; }

/* widgets inside cards */
.board-flip {
  background: var(--ink); color: var(--paper);
  border: var(--border); border-radius: 12px; box-shadow: var(--shadow-s);
  padding: 12px 16px 14px; margin: 6px 0 16px;
  perspective: 400px;
}
.board-label { display: block; font-size: 9.5px; letter-spacing: .3em; color: var(--gold); margin-bottom: 4px; }
.board-flip b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; line-height: 1.12; text-transform: uppercase; transition: transform .45s var(--ease), opacity .45s; transform-origin: 50% 0; }
.board-flip b.flip { transform: rotateX(88deg); opacity: 0; transition: none; }

.post-stack { display: flex; gap: 10px; margin: 6px 0 16px; }
.post {
  flex: 1; background: #fff; border: 2px solid var(--ink); border-radius: 10px;
  box-shadow: var(--shadow-s); padding: 6px;
  transform: translateY(14px) rotate(var(--pr, -1.5deg)); opacity: 0;
  transition: transform .55s var(--ease), opacity .55s;
}
.post:nth-child(2) { --pr: 1deg; transition-delay: .12s; }
.post:nth-child(3) { --pr: -.6deg; transition-delay: .24s; }
.svc-card.rv.on .post { transform: rotate(var(--pr)); opacity: 1; }
.post-img { display: block; height: 54px; border-radius: 6px; border: 1.5px solid var(--ink); }
.post-img.p1 { background: linear-gradient(135deg, var(--coral), var(--pink)); }
.post-img.p2 { background: linear-gradient(135deg, var(--cobalt), #6FA8FF); }
.post-img.p3 { background: linear-gradient(135deg, var(--green), var(--gold)); }
.post span { display: block; font-size: 10.5px; padding: 5px 2px 1px; }

.term {
  background: var(--ink); border: var(--border); border-radius: 12px;
  box-shadow: var(--shadow-s); overflow: hidden; margin: 6px 0 16px;
}
.term-bar { font-size: 9.5px; letter-spacing: .26em; color: var(--paper); background: var(--ink-soft); padding: 7px 12px; border-bottom: 2px solid rgba(244,239,226,.15); }
.term pre { font-family: var(--mono); font-size: 12px; line-height: 1.55; color: #58E389; padding: 12px 14px 14px; min-height: 118px; white-space: pre-wrap; }
.term pre .t-dim { color: rgba(88,227,137,.55); }
.term pre .t-book { color: var(--gold); }

/* ============ NAME MARQUEE (in the brand card) ============ */
/* the cycling client names live on a mini sign plate INSIDE the card,
   styled like the painted marquee: same idea ("your name up there"),
   zero registration risk against the artwork */
.name-sign {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 262px; max-width: 100%;
  background: linear-gradient(178deg, #E8542F 0%, #C93A16 55%, #99280C 100%);
  border: var(--border); border-radius: 14px;
  box-shadow: 0 0 26px rgba(255, 122, 45, .5), var(--shadow-s);
  padding: 17px 26px 14px;
  margin: 4px 0 18px;
  transform: rotate(-1.2deg);
}
/* the bulb frame: four strips of warm marquee bulbs (top/bottom/left/
   right), each dot fully inside its band so no bulb is ever clipped,
   chasing between two positions like a real theater sign */
.name-sign::before {
  content: ''; position: absolute; inset: 4px; border-radius: 11px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #FFE4A8 1.6px, rgba(255, 228, 168, 0) 2.3px),
    radial-gradient(circle, #FFE4A8 1.6px, rgba(255, 228, 168, 0) 2.3px),
    radial-gradient(circle, #FFE4A8 1.6px, rgba(255, 228, 168, 0) 2.3px),
    radial-gradient(circle, #FFE4A8 1.6px, rgba(255, 228, 168, 0) 2.3px);
  background-size: 12px 9px, 12px 9px, 9px 12px, 9px 12px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 6px top, 0 bottom, left 6px, right 0;
  animation: nsbulbs 1.2s steps(1) infinite;
}
@keyframes nsbulbs {
  0% { background-position: 6px top, 0 bottom, left 6px, right 0; }
  50% { background-position: 0 top, 6px bottom, left 0, right 6px; }
  100% { background-position: 6px top, 0 bottom, left 6px, right 0; }
}
.ns-label { font-size: 8.5px; letter-spacing: .3em; color: #FFE2A6; opacity: .9; }
#signName {
  font-family: var(--display); text-transform: uppercase;
  font-size: 26px; line-height: 1; text-align: center;
  color: #FFF3E4;
  text-shadow: 0 0 18px rgba(255, 220, 160, .7), 0 2px 0 rgba(120, 20, 0, .45);
  letter-spacing: .035em;
  transition: opacity .3s, transform .3s;
}
#signName.swap { opacity: 0; transform: translateY(8px); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .name-sign::before { animation: none; }
}

/* ============ ANCHORED WIDGETS (glued to world artwork) ============ */

.screen-anchor {
  position: absolute; z-index: 1;
  pointer-events: none;
  opacity: 0; transition: opacity .5s;
  display: flex; align-items: center; justify-content: center;
}
.screen-anchor.live { opacity: 1; }
.screen-anchor.covered { opacity: 0; }
.mini-browser {
  width: 100%; height: 100%;
  background: #FDFBF4; border-radius: 6px;
  border: 2px solid rgba(16,14,12,.85);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 0 34px rgba(255, 244, 214, .55);
}
.mb-bar { display: flex; align-items: center; gap: 4px; padding: 4px 7px; background: var(--paper-dim); border-bottom: 1.5px solid rgba(16,14,12,.5); }
.mb-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .5; }
.mb-bar i:nth-child(1) { background: var(--sun); opacity: 1; }
.mb-bar i:nth-child(2) { background: var(--gold); opacity: 1; }
.mb-bar i:nth-child(3) { background: var(--green); opacity: 1; }
.mb-url { font-size: 8px; letter-spacing: .06em; margin-left: 5px; color: var(--ink); }
.mb-url::after { content: '▏'; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.mb-body { flex: 1; padding: 5% 6%; display: flex; flex-direction: column; gap: 4.5%; }
.mb-nav { display: flex; align-items: center; gap: 4%; height: 6%; opacity: 0; transition: opacity .5s var(--ease) .05s; }
.mb-nav i { width: 13%; height: 100%; background: var(--sun); border-radius: 2px; }
.mb-nav span { width: 9%; height: 55%; background: rgba(16,14,12,.3); border-radius: 2px; }
.mb-nav span:last-child { margin-left: auto; background: var(--ink); }
.mb-hero { height: 30%; border-radius: 4px; background: linear-gradient(120deg, var(--cobalt) 0%, var(--sun) 100%); opacity: 0; transform: translateY(8px); transition: all .5s var(--ease) .15s; }
.mb-line { height: 3.5%; border-radius: 2px; background: rgba(16,14,12,.28); opacity: 0; transition: opacity .5s var(--ease) .3s; }
.mb-line.l1 { width: 78%; }
.mb-line.l2 { width: 52%; }
.mb-row { display: flex; gap: 6%; height: 17%; }
.mb-block { flex: 1; border-radius: 4px; background: var(--paper-dim); border: 1.5px solid rgba(16,14,12,.35); opacity: 0; transform: translateY(8px); transition: all .5s var(--ease) .4s; }
.mb-cta {
  align-self: flex-start; font-size: 9px; letter-spacing: .18em; font-weight: 700;
  background: var(--sun); color: var(--paper); border-radius: 999px; padding: 4px 12px;
  opacity: 0; transform: translateY(8px); transition: all .5s var(--ease) .55s;
}
.screen-anchor.live .mb-nav, .screen-anchor.live .mb-hero, .screen-anchor.live .mb-line,
.screen-anchor.live .mb-block, .screen-anchor.live .mb-cta { opacity: 1; transform: none; }
.screen-anchor.live .mb-cta { animation: ctapulse 1.8s var(--ease) 1.2s infinite; }
@keyframes ctapulse { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.12); } 16% { transform: scale(1); } }

/* ============ PRINTS (real work) ============ */
.prints { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 38px); margin: 44px 0 24px; }
.print {
  background: #fff; border: var(--border); border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px 12px 10px; position: relative;
  transform: rotate(var(--rot, 0deg));
  transition: transform .35s var(--ease);
}
.print:hover { transform: rotate(0deg) translateY(-6px); }
.print::before {
  content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 92px; height: 24px; background: var(--pink); opacity: .85;
  border: 1.5px solid rgba(16,14,12,.4);
  background-image: radial-gradient(rgba(16,14,12,.18) 1px, transparent 1.3px); background-size: 5px 5px;
}
.print img { border-radius: 6px; border: 1.5px solid rgba(16,14,12,.35); aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.print figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 4px 2px; }
.print figcaption b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 19px; }
.print figcaption .mono { font-size: 9.5px; letter-spacing: .14em; opacity: .7; text-align: right; }

/* clickable project prints */
.prints-9 { grid-template-columns: repeat(3, 1fr); }
button.print { font: inherit; color: inherit; text-align: left; cursor: pointer; display: block; width: 100%; }
.pcap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 4px 0; }
.pcap b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 19px; }
.pcap i { font-style: normal; font-size: 9px; letter-spacing: .13em; opacity: .7; text-align: right; }
.pview { display: block; font-size: 9.5px; letter-spacing: .22em; font-weight: 700; color: var(--sun); padding: 6px 4px 2px; opacity: .55; transition: opacity .25s, transform .25s var(--ease); }
button.print:hover .pview { opacity: 1; transform: translateX(4px); }

/* ============ PROJECT ROOM (modal) ============ */
.pm { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; }
.pm[hidden] { display: none; }
.pm-backdrop {
  position: absolute; inset: 0; background: rgba(16,14,12,.86);
  background-image: radial-gradient(rgba(244,239,226,.06) 1px, transparent 1.4px);
  background-size: 7px 7px;
}
.pm-card {
  position: relative; width: min(1020px, 100%); max-height: 94vh;
  background: var(--paper); color: var(--ink);
  border: var(--border); border-radius: var(--rad); box-shadow: 10px 12px 0 rgba(0,0,0,.55);
  overflow-y: auto; overscroll-behavior: contain;
  animation: pmIn .35s var(--ease);
}
@keyframes pmIn { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pm-card { animation: none; } }
.pm-close {
  position: sticky; top: 14px; margin-left: auto; margin-right: 14px; z-index: 5;
  display: flex; font-size: 10.5px; letter-spacing: .18em; font-weight: 700;
  background: var(--ink); color: var(--paper); border: 2px solid var(--paper);
  border-radius: 999px; padding: 9px 16px; cursor: pointer; box-shadow: var(--shadow-s);
}
.pm-close:hover { background: var(--sun); }
.pm-body { padding: 0 clamp(20px, 4.5vw, 52px) clamp(28px, 4vw, 46px); margin-top: -18px; }
.pm-kicker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pm-body h3 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin-bottom: 10px; }
.pm-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 14px; }
.pm-pills span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 11px; }
.pm-lead { font-size: 16.5px; max-width: 640px; margin-bottom: 18px; }
.pm-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pm-meta div { background: #fff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow-s); padding: 10px 14px; }
.pm-meta dt { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: var(--ember); }
.pm-meta dd { font-weight: 700; font-size: 13.5px; margin-top: 2px; }
.pm-frame {
  background: #fff; border: var(--border); border-radius: 12px; box-shadow: var(--shadow);
  padding: 14px 14px 16px; margin: 30px 0; position: relative;
  transform: rotate(var(--fr, -.5deg));
}
.pm-frame:nth-child(even) { --fr: .55deg; }
.pm-frame::before {
  content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 92px; height: 24px; background: var(--pink); opacity: .85;
  border: 1.5px solid rgba(16,14,12,.4);
  background-image: radial-gradient(rgba(16,14,12,.18) 1px, transparent 1.3px); background-size: 5px 5px;
}
.pm-frame img { width: 100%; height: auto; border-radius: 6px; border: 1.5px solid rgba(16,14,12,.3); }
/* full gallery: every piece from the live portfolio as smaller taped
   prints in a two-column wall (§34) */
.pm-galhead {
  margin: 44px 0 20px; font-size: 11px; letter-spacing: .26em; font-weight: 700;
  color: var(--ember); display: flex; align-items: center; gap: 14px;
}
.pm-galhead::before, .pm-galhead::after {
  content: ''; height: 2px; flex: 1;
  background-image: linear-gradient(90deg, rgba(16,14,12,.35) 0 8px, transparent 8px 16px);
  background-size: 16px 2px;
}
.pm-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.pm-shot {
  background: #fff; border: var(--border); border-radius: 10px; box-shadow: var(--shadow-s);
  padding: 9px; margin: 0; transform: rotate(-.4deg);
}
.pm-shot:nth-child(even) { transform: rotate(.45deg); }
.pm-shot img { width: 100%; height: auto; border-radius: 5px; border: 1.5px solid rgba(16,14,12,.25); display: block; }
@media (max-width: 700px) { .pm-gallery { grid-template-columns: 1fr; } }
.pm-frame figcaption { padding: 12px 4px 0; }
.pm-frame .fl { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; font-weight: 700; color: var(--ember); }
.pm-frame .ft { display: block; font-family: var(--display); text-transform: uppercase; font-size: 21px; margin: 4px 0 6px; }
.pm-frame p { font-size: 14.5px; max-width: 620px; }
.pm-cta { text-align: center; padding: 8px 0 6px; }
.pm-cta p { font-weight: 700; margin-bottom: 14px; }
body.pm-open { overflow: hidden; }
@media (max-width: 1100px) { .prints-9 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .prints-9 { grid-template-columns: 1fr; }
  .pm { padding: 0; }
  .pm-card { max-height: 100vh; max-height: 100dvh; border-radius: 0; border-left: 0; border-right: 0; }
  .pm-kicker { padding-right: 96px; }
}
.quote { max-width: 780px; margin: 56px auto 0; text-align: center; }
.quote blockquote { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.08; }
.quote figcaption { margin-top: 16px; font-size: 11px; letter-spacing: .2em; opacity: .7; }

/* ============ TIERS ============ */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); margin: 46px 0 26px; align-items: stretch; }
.tier {
  background: var(--paper); color: var(--ink);
  border: var(--border); border-radius: var(--rad); box-shadow: var(--shadow);
  padding: 28px 26px; position: relative;
  display: flex; flex-direction: column;
}
.tier h4 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 25px; margin-bottom: 4px; }
.tier .range { font-size: 13px; letter-spacing: .1em; color: var(--sun); font-weight: 700; margin-bottom: 16px; }
.tier ul { list-style: none; margin-bottom: 22px; flex: 1; }
.tier .btn { margin-top: auto; align-self: flex-start; }
/* ghost buttons are for dark sections; inside a paper tier card they must
   switch to ink outlines or they disappear paper-on-paper */
.tier .btn-ghost { color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-s); }
.tier .btn-ghost:hover { background: rgba(16,14,12,.06); box-shadow: 6px 8px 0 rgba(16,14,12,.92); }
.tier li { padding: 7px 0 7px 20px; position: relative; font-size: 15px; border-bottom: 1.5px dashed rgba(16,14,12,.18); }
.tier li:last-child { border-bottom: 0; }
.tier li::before { content: '▸'; position: absolute; left: 0; color: var(--sun); }
.tier-hot { transform: translateY(-10px); border-color: var(--sun); box-shadow: 7px 8px 0 rgba(239, 59, 27, .9); }
.hot {
  position: absolute; top: -14px; left: 24px;
  background: var(--sun); color: var(--paper);
  font-size: 10px; letter-spacing: .22em; font-weight: 700;
  border: 2px solid var(--ink); border-radius: 7px; padding: 4px 10px;
}
.rate-note { text-align: center; font-size: 11.5px; letter-spacing: .16em; opacity: .8; }

/* ============ FAQ ============ */
.faqs { margin-top: 34px; }
.faqs details { border: var(--border); border-radius: 16px; background: #fff; box-shadow: var(--shadow-s); margin-bottom: 14px; overflow: hidden; }
.faqs summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-weight: 700; font-size: 17px; padding: 18px 22px;
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary i { font-style: normal; font-size: 18px; color: var(--sun); transition: transform .3s var(--ease); }
.faqs details[open] summary i { transform: rotate(45deg); }
.faqs details p { padding: 0 22px 20px; font-size: 15.5px; max-width: 700px; }

/* ============ AUDIT ============ */
.audit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.audit-copy .lead { margin: 6px 0 24px; }
.assure { list-style: none; }
.assure li { font-size: 11.5px; letter-spacing: .14em; padding: 10px 0 10px 30px; position: relative; border-bottom: 1.5px dashed rgba(244,239,226,.3); }
.assure li::before { content: '☼'; position: absolute; left: 2px; color: var(--gold); }
.audit-form {
  background: var(--paper); color: var(--ink);
  border: var(--border); border-radius: var(--rad); box-shadow: var(--shadow);
  padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 15px;
}
.audit-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13.5px; }
.audit-form input, .audit-form textarea {
  font-family: var(--body); font-size: 15.5px;
  padding: 11px 14px; border: 2px solid var(--ink); border-radius: 11px;
  background: #fff; color: var(--ink);
}
.audit-form input:focus, .audit-form textarea:focus { outline: 3px solid rgba(239,59,27,.4); outline-offset: 1px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.trust { font-size: 10px; letter-spacing: .2em; opacity: .6; text-align: center; margin-top: -4px; }
.form-msg { font-size: 11.5px; letter-spacing: .1em; min-height: 18px; }
.form-msg.err { color: var(--sun); }
.form-msg.ok { color: var(--green); }

/* ============ FINALE ============ */
.stage-finale .stage-pin { justify-content: center; }
.finale-copy { text-align: center; color: var(--paper); width: min(760px, 92vw); margin: 0 auto; position: relative; }
.finale-copy::before {
  content: ''; position: absolute; inset: -60px -80px; z-index: -1;
  background: radial-gradient(ellipse, rgba(16,14,12,.5) 0%, rgba(16,14,12,.28) 55%, transparent 75%);
}
.finale-mark {
  width: clamp(96px, 11vw, 150px); margin: 0 auto 18px;
  background: var(--paper); border: var(--border); border-radius: 26px;
  padding: 14px; box-shadow: var(--shadow);
  display: block;
}
.mark-rise .mk-m1, .mark-rise .mk-m2, .mark-rise .mk-m3, .mark-rise .mk-sun { transform-origin: 50% 80%; }
.mark-rise.on .mk-m1 { animation: mkrise .8s var(--ease) both; }
.mark-rise.on .mk-m2 { animation: mkrise .8s var(--ease) .15s both; }
.mark-rise.on .mk-m3 { animation: mkrise .8s var(--ease) .3s both; }
.mark-rise.on .mk-sun { animation: sunrise 1s var(--ease) .55s both; }
@keyframes mkrise { from { transform: translateY(120px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sunrise { from { transform: translateY(190px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* §37: the easter egg lives on this logo. Hover = it idles like a car
   that wants to run; each click revs it harder; third click = MILE RUN.
   §38: the hover idle is gated to real hover devices — iOS keeps :hover
   stuck after a tap, which left the logo wiggling forever ("breaks").
   Touch devices instead get a slow permanent bob as the tap hint. */
.finale-mark.egg { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .finale-mark.egg:hover {
    animation: eggidle .9s ease-in-out infinite;
    filter: drop-shadow(0 10px 26px rgba(239, 59, 27, .55));
  }
}
.finale-mark.egg-touch { animation: eggbob 2.6s ease-in-out infinite; }
@keyframes eggbob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-7px) rotate(-1.6deg); }
}
@keyframes eggidle {
  0%, 100% { transform: translateY(-6px) rotate(-2deg) scale(1.045); }
  50% { transform: translateY(-9px) rotate(2.2deg) scale(1.045); }
}
.finale-mark.egg-rev1 { animation: eggrev .5s var(--ease); }
@keyframes eggrev {
  0% { transform: scale(1); }
  30% { transform: scale(1.16) rotate(-5deg); }
  60% { transform: scale(.95) rotate(3.5deg); }
  100% { transform: scale(1); }
}
.finale-mark.egg-rev2 { animation: eggjump .6s var(--ease); }
@keyframes eggjump {
  0% { transform: translateY(0); }
  35% { transform: translateY(-30px) rotate(-7deg) scale(1.12); }
  68% { transform: translateY(5px) rotate(2deg) scale(.96); }
  100% { transform: translateY(0); }
}
.finale-mark.egg-go { animation: egggo .45s var(--ease); }
@keyframes egggo {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); filter: drop-shadow(0 0 40px rgba(239, 59, 27, .9)); }
  100% { transform: scale(1); }
}
.rail-tip.center { transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) {
  .finale-mark.egg, .finale-mark.egg-touch, .finale-mark.egg:hover, .finale-mark.egg-rev1, .finale-mark.egg-rev2, .finale-mark.egg-go { animation: none; }
}
.finale-copy h2 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); text-transform: none; font-family: var(--display); letter-spacing: .01em; }
.finale-copy h2 em { font-style: normal; color: var(--gold); }
.finale-copy .mono { font-size: 11px; letter-spacing: .3em; margin: 18px 0 26px; opacity: .9; }

/* ============ FOOTER ============ */
.footer { position: relative; z-index: 2; background: var(--ink); color: var(--paper); padding: 64px 0 46px; border-top: 3px solid var(--sun); }
.foot-grid { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: clamp(30px, 5vw, 80px); }
.foot-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.foot-mark { width: clamp(84px, 8vw, 112px); filter: drop-shadow(2px 3px 0 rgba(0,0,0,.4)); }
.foot-est { font-size: 10.5px; letter-spacing: .26em; color: var(--gold); }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.foot-col a { color: var(--paper); text-decoration: none; }
.foot-col a:hover { color: var(--gold); }
.foot-h { font-size: 10.5px; letter-spacing: .26em; color: var(--gold); margin-bottom: 6px; }
.foot-dim { opacity: .55; font-size: 12.5px; }

/* ============ MILE RAIL ============ */
.rail {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 55; display: flex; gap: 10px; align-items: stretch;
}
.rail-road {
  width: 14px; border-radius: 999px; position: relative;
  background: rgba(16,14,12,.72);
  border: 2px solid rgba(244,239,226,.7);
  overflow: hidden;
}
.rail-road::before {
  content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; transform: translateX(-50%);
  background-image: linear-gradient(rgba(244,239,226,.85) 55%, transparent 55%);
  background-size: 2px 9px;
}
.rail-car {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, 0);
  width: 9px; height: 15px; border-radius: 4px;
  background: var(--sun); border: 1.5px solid var(--paper);
  box-shadow: 0 0 8px rgba(239,59,27,.8);
  transition: top .12s linear;
}
.rail-stops { display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0; }
.rail-stop { display: flex; align-items: center; gap: 7px; background: none; border: 0; padding: 2px; }
.rail-stop b {
  font-family: var(--mono); font-weight: 700; font-size: 8.5px; letter-spacing: .1em;
  width: 24px; text-align: right;
  color: rgba(244,239,226,.85); text-shadow: 1px 1px 0 rgba(16,14,12,.9);
  opacity: 0; transform: translateX(4px); transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.rail-stop:hover b, .rail-stop.act b { opacity: 1; transform: none; }
.rail-stop i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(244,239,226,.45); border: 1.5px solid rgba(16,14,12,.6);
  transition: all .25s var(--ease);
}
.rail-stop.act i { background: var(--sun); transform: scale(1.35); border-color: var(--paper); }
.rail { display: none; }
@media (min-width: 1100px) and (pointer: fine) { .rail { display: flex; } .rail-road { min-height: 300px; } }

/* easter-egg tease choreography */
.rail-tip {
  position: fixed; z-index: 70;
  background: var(--ink); color: var(--paper);
  border: 2px solid rgba(244,239,226,.85); border-radius: 8px;
  font-size: 9px; letter-spacing: .18em; font-weight: 700;
  padding: 6px 10px; box-shadow: var(--shadow-s);
  opacity: 0; transform: translateX(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none; white-space: nowrap;
}
.rail-tip.on { opacity: 1; transform: none; }
.rail-car.rev { animation: railrev .55s var(--ease); }
@keyframes railrev {
  0% { transform: translate(-50%, 0) scale(1); }
  35% { transform: translate(-50%, 0) scale(1.8); box-shadow: 0 0 16px rgba(239,59,27,1); }
  100% { transform: translate(-50%, 0) scale(1); }
}
.rail-car.dash { animation: raildash .9s var(--ease); }
@keyframes raildash {
  0% { transform: translate(-50%, 0); }
  42% { transform: translate(-50%, 74px) scale(1.25); }
  100% { transform: translate(-50%, 0); }
}
.rail-road.rush::before { animation: railrush .9s linear; }
@keyframes railrush {
  from { background-position: 0 0; }
  to { background-position: 0 44px; }
}
.rail-road.glowp { animation: railglow 1s var(--ease); }
@keyframes railglow {
  0%, 100% { box-shadow: none; }
  45% { box-shadow: 0 0 22px rgba(239,59,27,.85), inset 0 0 8px rgba(239,59,27,.5); }
}

/* ============ CURSOR ============ */
#cursor {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  display: none;
}
html.has-cursor #cursor { display: block; }
#cursor span {
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--sun);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1.5px rgba(16,14,12,.7), 0 0 14px rgba(239,59,27,.5);
  transition: transform .22s var(--ease), background .22s, opacity .22s;
}
#cursor.big span { transform: scale(2.1); background: transparent; border-color: var(--sun); box-shadow: 0 0 0 1.5px rgba(244,239,226,.8); }
#cursor.down span { transform: scale(.7); }

/* ============ MILE RUN (easter egg game) ============ */
.mg { position: fixed; inset: 0; z-index: 150; background: var(--ink); display: none; }
.mg.open { display: block; }
.mg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mg-dots {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image: radial-gradient(rgba(16,14,12,.32) 1px, transparent 1.5px);
  background-size: 5px 5px;
}
.mg-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: flex-start; gap: 26px;
  padding: 14px 22px;
  color: var(--paper); font-size: 12px; letter-spacing: .18em;
  text-shadow: 1px 1px 0 rgba(16,14,12,.9);
}
/* §31 HUD: boxless per Gabo (the plates read better without them) —
   arcade stats drawn straight on the sky: tiny mono label over a big
   Anton number with a hard ink drop. All four the same size. */
.mg-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.mg-stat em {
  font-style: normal; font-size: 9px; letter-spacing: .24em;
  color: var(--paper); opacity: .85;
  text-shadow: 1.5px 1.5px 0 rgba(16,14,12,.95);
  display: flex; align-items: center; gap: 7px;
}
.mg-stat b {
  font-family: var(--display); font-weight: 400; line-height: 1;
  font-size: 30px; letter-spacing: .02em; color: var(--paper);
  text-shadow: 2.5px 2.5px 0 rgba(16,14,12,.95);
  font-variant-numeric: tabular-nums;
}
.mg-stat-best b { color: var(--ember); }
/* score is GOLD (§32) and heats further as it climbs */
#mgPts { color: var(--gold); }
#mgPts.t2 { color: var(--ember); }
#mgPts.t3 { color: var(--sun); }
#mgPts.pop { animation: mgscorepop .32s var(--ease); }
@keyframes mgscorepop {
  0% { transform: scale(1); }
  40% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
/* multiplier badge: red = boost, cobalt = brake, ink = cruise */
.mg-mul {
  font-style: normal; font-size: 9px; letter-spacing: .14em; font-weight: 700;
  padding: 2px 7px 1px; border-radius: 6px;
  background: var(--ink); color: var(--paper);
}
.mg-mul.mul-hot { background: var(--sun); color: var(--paper); }
.mg-mul.mul-cold { background: var(--cobalt); color: var(--paper); }
.mg-close {
  margin-left: auto;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; font-weight: 700;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--paper); border-radius: 999px;
  padding: 9px 16px; cursor: pointer; box-shadow: var(--shadow-s);
}
.mg-close:hover { background: var(--sun); }
.mg-music {
  margin-left: auto;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; font-weight: 700;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--paper); border-radius: 999px;
  padding: 8px 12px; cursor: pointer; box-shadow: var(--shadow-s);
  -webkit-appearance: none; appearance: none;
  text-align: center; text-align-last: center;
}
.mg-music option { text-align: center; }
.mg-music:hover { color: var(--gold); }
.mg-vol { margin-left: 12px; }
.mg-snd { margin-left: 12px; }
.mg-snd + .mg-close { margin-left: 12px; }
.mg-boardcard { max-height: 82vh; }
.mg-entry-row { display: flex; gap: 10px; justify-content: center; align-items: center; }
#mgTag {
  width: 148px; text-align: center;
  font-family: var(--mono); font-size: 26px; letter-spacing: .3em; font-weight: 700;
  padding: 8px 6px 8px 12px; border: 2.5px solid var(--ink); border-radius: 12px;
  background: #fff; color: var(--ink); text-transform: uppercase;
}
.mg-list {
  list-style: none; width: 100%; max-height: 34vh; overflow-y: auto;
  border: 2px solid var(--ink); border-radius: 12px; background: #fff;
  padding: 8px 0; font-size: 12px; letter-spacing: .08em;
}
.mg-list li { display: flex; gap: 12px; align-items: baseline; padding: 5px 16px; }
.mg-list li i { font-style: normal; opacity: .5; width: 24px; }
.mg-list li b { letter-spacing: .22em; }
.mg-list li span { margin-left: auto; color: var(--ember); font-weight: 700; }
.mg-list li.me { background: var(--gold); }
.mg-bonus {
  position: absolute; right: 8%; top: 34%; z-index: 4;
  font-size: 15px; letter-spacing: .18em; font-weight: 700;
  color: var(--gold); text-shadow: 2px 2px 0 rgba(16,14,12,.9);
  opacity: 0; pointer-events: none;
}
.mg-bonus.on { animation: mgbonus 1.1s var(--ease); }
@keyframes mgbonus {
  0% { opacity: 0; transform: translateY(14px) scale(.8); }
  18% { opacity: 1; transform: translateY(0) scale(1.06); }
  70% { opacity: 1; transform: translateY(-10px) scale(1); }
  100% { opacity: 0; transform: translateY(-26px); }
}
.mg-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  background: var(--paper); color: var(--ink);
  border: var(--border); border-radius: var(--rad); box-shadow: var(--shadow);
  padding: 32px 36px; text-align: center;
  width: min(410px, 88vw);
}
.mg-card[hidden] { display: none; }
/* game-feel (§28): cards POP in like arcade inserts and SLAM away on
   launch; the primary button idles with a heartbeat so it begs to be
   pressed */
.mg-card { animation: mgcardin .34s var(--ease) backwards; }
@keyframes mgcardin {
  0% { opacity: 0; transform: translate(-50%, -46%) scale(.92) rotate(-.6deg); }
  60% { opacity: 1; transform: translate(-50%, -50.5%) scale(1.02) rotate(.2deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
.mg-card.launch { animation: mgcardout .24s var(--ease) forwards; }
@keyframes mgcardout {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  35% { transform: translate(-50%, -49%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(.86); }
}
.mg-card .btn-sun { animation: mgbeat 1.7s ease-in-out infinite; }
.mg-card .btn-sun:hover { animation-play-state: paused; transform: translateY(-2px) scale(1.05); }
.mg-card .btn-sun:active { transform: translateY(2px) scale(.97); box-shadow: 1px 2px 0 rgba(16,14,12,.92); }
@keyframes mgbeat {
  0%, 100% { transform: scale(1); box-shadow: var(--shadow-s), 0 0 0 0 rgba(239,59,27,.45); }
  50% { transform: scale(1.035); box-shadow: var(--shadow-s), 0 0 0 9px rgba(239,59,27,0); }
}
.mg-hud.drop { animation: mghuddrop .4s var(--ease) backwards; }
@keyframes mghuddrop {
  0% { opacity: 0; transform: translateY(-22px); }
  70% { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
.mg-flash.go { animation: mggoflash .45s ease-out; }
@keyframes mggoflash {
  0% { opacity: .55; background: var(--gold); }
  100% { opacity: 0; background: var(--gold); }
}
@media (prefers-reduced-motion: reduce) {
  .mg-card, .mg-card .btn-sun, .mg-hud.drop { animation: none; }
}
.mg-card h3 { font-size: clamp(2.4rem, 5vw, 3.2rem); }
.mg-card p { font-size: 15.5px; }
.mg-keys { font-size: 10px; letter-spacing: .16em; opacity: .7; }
.mg-swatches { display: flex; gap: 14px; justify-content: center; padding: 2px 0; }
.mg-sw {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid var(--ink); cursor: pointer; padding: 0;
  box-shadow: var(--shadow-s);
  transition: transform .15s var(--ease);
}
.mg-sw:hover { transform: translateY(-2px); }
.mg-sw.on { outline: 3px solid var(--gold); outline-offset: 2px; }
.mg-sw[data-c="cobalt"] { background: #2A3ED2; }
.mg-sw[data-c="red"] { background: #C63722; }
.mg-sw[data-c="black"] { background: #1B1C24; }
.mg-tally { font-size: 12px; letter-spacing: .16em; }
.mg-tally b { color: var(--ember); }
.mg-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mg-flash { position: absolute; inset: 0; z-index: 3; background: var(--sun); opacity: 0; pointer-events: none; }
.mg-flash.on { animation: mgflash .5s ease-out; }
@keyframes mgflash { 0% { opacity: .7; } 100% { opacity: 0; } }
body.mg-open { overflow: hidden; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: rgba(16,14,12,.06); }
@media (max-width: 600px) {
  .mg-hud { gap: 12px; font-size: 10.5px; padding: 12px 14px; }
  .mg-stat b { font-size: 21px; }
  .mg-card { padding: 24px 20px; }
}

/* ============ RESPONSIVE ============ */
/* anchored widgets only make sense on wide landscape screens where the
   landscape art shows their target sign/screen */
/* §39: the glued browser hides on tablets and small landscape windows,
   but true portrait PHONES (aspect < 0.7 = the portrait art) show it on
   the painted drive-in screen */
@media (max-width: 1080px) and (min-aspect-ratio: 7/10),
       (orientation: portrait) and (min-aspect-ratio: 7/10) {
  .screen-anchor { display: none; }
}
@media (min-width: 1600px) {
  .lane { width: min(1500px, 93vw); }
}
@media (max-width: 1080px) {
  .lane-l, .lane-r { justify-content: center; }
  .stage-svc .stage-pin { justify-content: flex-end; padding-bottom: 5vh; }
  #problem .stage-pin::after { background: linear-gradient(180deg, transparent 0%, rgba(16,14,12,.55) 40%, rgba(16,14,12,.8) 100%); }
}
@media (max-width: 900px) {
  .prints { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .tier-hot { transform: none; }
  .audit-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 768px) {
  body { font-size: 16px; }
  .nav { padding: 12px 14px; }
  .nav-tel { display: none; }
  .stage-hero { height: 108vh; }
  .stage-tall { height: 220vh; }
  .stage-svc { height: 230vh; }
  .stage-hero .stage-pin { padding-bottom: 12vh; }
  .hero-ctas .btn { padding: 12px 18px; font-size: 14px; }
  /* §38 phone service stops: the card is COMPACT (the painting owns the
     top of the screen) and app.js slides it up only after the scene has
     had its moment. will-change keeps the per-frame transform cheap. */
  .svc-card { width: 100%; padding: 18px 18px 20px; will-change: transform; }
  .svc-card .mile { margin-bottom: 8px; }
  .svc-card h3 { font-size: 1.5rem; margin-bottom: 8px; }
  .svc-card > p { font-size: 14px; margin-bottom: 10px; }
  .svc-list { grid-template-columns: 1fr 1fr; gap: 5px 12px; margin: 2px 0 12px; }
  .svc-list li { font-size: 10.5px; }
  .board-flip { padding: 9px 14px 10px; margin: 4px 0 12px; }
  .board-flip b { font-size: 16px; }
  .post-stack { margin: 4px 0 12px; }
  .post-img { height: 42px; }
  .name-sign { min-width: 0; align-self: stretch; padding: 12px 16px 10px; margin: 2px 0 12px; }
  #signName { font-size: 20px; }
  .terminal { font-size: 11px; }
  .stats { gap: 10px; }
  .stat { padding: 10px 13px; max-width: 160px; }
  .stat b { font-size: 20px; }
  .row2 { grid-template-columns: 1fr; }
  /* the finale logo is the easter egg: give it presence on phones */
  .finale-mark { width: 148px; height: 148px; }
}