:root {
  --bg: #ffffff;
  --ink: #000000;
  --muted: #4d4d4d;
  --grey: #c5c5c5;
  --cyan: #7c5cff;
  --gold: #b8e600;
  --pink: #ff6a3d;
  --gold-soft: #cdf24a;
  --white: #ffffff;

  --display: "Red Hat Display", "Arial Black", system-ui, sans-serif;
  --text: "Red Hat Text", system-ui, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  --step-display: clamp(3.25rem, 9vw, 8.75rem);

  --m: clamp(16px, 2vw, 28px);
  --gap: clamp(72px, 8.5vw, 124px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--step-body);
  line-height: 1.5;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ul, fieldset { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
::selection { background: var(--cyan); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.display, .head, .hero-title, .cta-q, .coupon-head, .goal-big, .t-name, .tm-name, .ticket-title, .stub-price, .foot-call, .wordmark {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.03em;
}
.display { font-size: var(--step-display); line-height: 0.9; }
.head { font-size: var(--step-head); line-height: 0.92; }
.lead { font-size: var(--step-lead); line-height: 1.3; }
.pad { padding: var(--gap) var(--m); }
.ul { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
.ul:hover { text-decoration-thickness: 4px; }

/* Buttons: square, flat */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  font: 500 var(--step-body)/1 var(--text);
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform .25s var(--ease), background-color .2s, color .2s;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: var(--cyan); }
.btn-ink:hover { background: var(--cyan); color: var(--ink); }
.btn-cyan { background: var(--cyan); color: var(--ink); }
.btn-cyan:hover { background: var(--white); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--white); }

/* Bar */
.bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 32px;
  padding: 24px var(--m);
}
.wordmark { font-size: var(--step-lead); text-decoration: none; letter-spacing: -0.02em; }
.bar nav { display: flex; gap: 28px; margin-left: auto; }
.bar nav a { text-decoration: none; font-weight: 500; position: relative; }
.bar nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.bar nav a:hover::after { transform: scaleX(1); }

/* Hero: waterline */
.hero {
  --F: clamp(3.25rem, 9vw, 8.75rem);
  --seam: 50%;
  position: relative; height: 100svh; min-height: 640px; overflow: hidden;
}
.hero-paper, .hero-field { position: absolute; left: 0; right: 0; }
.hero-paper { top: 0; height: var(--seam); background: var(--gold); }
.hero-field { bottom: 0; top: var(--seam); background: var(--ink); }
.hero-title {
  position: absolute; left: 0; right: 0; margin: 0;
  top: calc(var(--seam) - 1.29 * var(--F));
  display: flex; flex-direction: column; align-items: center;
  font-size: var(--F); line-height: 0.86; text-align: center;
  pointer-events: none;
}
.hero-title--top { color: var(--ink); z-index: 2; pointer-events: auto; }
.hero-title--bottom { color: var(--cyan); clip-path: inset(calc(1.29 * var(--F)) 0 -20px 0); z-index: 3; }
.hero-title .line { display: block; overflow: hidden; padding: 0 0.04em; }
.hero-title .line > span { display: block; }
.hero-foot {
  position: absolute; left: var(--m); bottom: 40px; z-index: 2;
  max-width: min(560px, 46vw);
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}
.hero-lede { color: var(--white); font-size: var(--step-lead); line-height: 1.3; }
.hero-btn { background: var(--cyan); color: var(--ink); }
.hero-btn:hover { background: var(--gold); color: var(--ink); }
.hero-clip {
  position: absolute; right: calc(var(--m) + 2vw); bottom: 48px; width: clamp(220px, 28vw, 440px);
  transform: rotate(4deg); z-index: 1;
}
.hero-clip video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* About */
.about-text {
  margin-top: 56px;
  columns: 2; column-gap: 48px;
  font-size: var(--step-lead); line-height: 1.32; color: var(--ink);
  text-align: justify; hyphens: auto;
}
.about-text strong { font-weight: 500; }
mark { color: var(--ink); padding: 0 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-o { background: var(--gold); }
.hl-m { background: var(--cyan); }
.hl-g { background: var(--pink); }
.about-close { margin-top: 24px; text-align: left; }
.hl-link {
  background: var(--ink); color: var(--cyan); text-decoration: none; padding: 0.05em 0.2em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .2s, color .2s;
}
.hl-link:hover { background: var(--gold); color: var(--ink); }

/* Mission */
.mission {
  position: relative; background: var(--ink); color: var(--white);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px;
  padding: var(--gap) var(--m); min-height: 100svh; align-items: center;
}
.mission-inner { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 40px; }
.mission .display { color: var(--cyan); }
.statement { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1.2; font-weight: 500; max-width: 34ch; }
.mission-more { max-width: 52ch; }
.chip { position: relative; }
.chip img { width: 100%; object-fit: cover; }
.chip-a { grid-column: 9 / span 3; grid-row: 1; align-self: start; transform: rotate(4deg); }
.chip-a img { aspect-ratio: 4 / 5; }
.chip-b { grid-column: 8 / span 4; grid-row: 1; align-self: end; transform: rotate(-3deg); margin-bottom: -40px; z-index: 1; }
.chip-b img { aspect-ratio: 3 / 2; }
.chip figcaption, .where-map figcaption { font-size: var(--step-small); margin-top: 10px; }
.chip-b figcaption { color: var(--grey); }

/* Goals */
.goal-row { margin-top: 56px; display: grid; grid-template-columns: 3fr 2fr; gap: 0; }
.goal-row .goal:nth-child(3) { grid-column: 1; }
.goal-row { grid-template-areas: "a b" "c d"; }
.g1 { grid-area: a; } .g2 { grid-area: b; } .g3 { grid-area: c; } .g4 { grid-area: d; }
.goal-row { grid-template-columns: 3fr 2fr; }
.goal { padding: 40px; min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.goal p:last-child { max-width: 34ch; font-size: var(--step-lead); line-height: 1.3; }
.goal-big { font-size: var(--step-head); line-height: 0.9; }
.g1 { background: var(--gold); }
.g2 { background: var(--cyan); }
.g3 { background: var(--grey); }
.g4 { background: var(--ink); color: var(--white); }
.g4 .goal-big { color: var(--cyan); }
@media (min-width: 900px) {
  .goal-row { grid-template-columns: 3fr 2fr 2fr 3fr; grid-template-areas: "a a b b" "c d d d"; }
  .goal-row { grid-template-columns: 5fr 2fr 3fr 4fr; grid-template-areas: "a a b b" "c c d d"; }
}

/* Classes */
.classes { background: var(--grey); }
.classes-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; }
.classes-head .lead { max-width: 34ch; justify-self: end; }
.dispatch {
  margin-top: 64px; background: var(--ink); color: var(--white);
  display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 0;
}
.dispatch-title { grid-column: 1 / -1; padding: 32px 32px 0; font: 500 var(--step-lead)/1.3 var(--text); color: var(--cyan); }
.dispatch fieldset { border: 0; padding: 24px 32px 32px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dispatch legend { padding: 24px 0 8px; font-size: var(--step-small); color: var(--grey); float: left; width: 100%; }
.dispatch label { display: block; cursor: pointer; }
.dispatch input { position: absolute; opacity: 0; }
.dispatch label span {
  display: block; padding: 14px 18px; background: #1d1d1d; font-weight: 500;
  transition: background-color .2s, color .2s, transform .25s var(--ease);
}
.dispatch label:hover span { background: #2e2e2e; transform: translateX(4px); }
.dispatch input:checked + span { background: var(--cyan); color: var(--ink); }
.dispatch input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.dispatch-result {
  background: var(--gold); color: var(--ink); padding: 32px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.dr-name { font-family: var(--display); font-weight: 900; letter-spacing: -0.03em; font-size: var(--step-lead); line-height: 1.1; }
.dr-when { font-weight: 500; }
.dr-btn { margin-top: auto; }
.dispatch-result.flash { animation: flash .5s var(--ease); }
@keyframes flash { from { transform: translateY(8px); opacity: .4; } to { transform: none; opacity: 1; } }

.timetable { margin-top: 24px; font-size: var(--step-lead); line-height: 1.5; }
.tt-dayname {
  position: sticky; top: 0; z-index: 1; background: var(--grey);
  padding: 56px 0 12px; font-weight: 500; color: var(--ink);
}
.tt-dayname span { background: var(--ink); color: var(--cyan); padding: 0.05em 0.3em; }
.tt-row { display: grid; grid-template-columns: 38% 28% 18% 1fr; transition: transform .25s var(--ease); }
.tt-row:hover { transform: translateX(8px); }
.tt-row span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tt-free span:first-child { background: var(--cyan); justify-self: start; padding: 0 0.2em; }
.tt-fees { margin-top: 56px; font-size: var(--step-body); max-width: 60ch; }
.foot-meta p { max-width: 70ch; }

/* Crew wall */
.crew { background: var(--ink); color: var(--white); }
.crew-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.crew .display { color: var(--gold); }
.crew-link { font-size: var(--step-body); text-decoration: underline; text-underline-offset: .2em; }
.crew-link:hover { color: var(--cyan); }
.wall {
  margin-top: 40px; display: grid; grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 380px 260px 340px 300px; gap: 8px;
}
.tile {
  position: relative; overflow: hidden; padding: 24px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; color: var(--ink);
  transition: opacity .3s;
}
.wall:hover .tile { opacity: .55; }
.wall .tile:hover { opacity: 1; }
.t-o { background: var(--gold); }
.t-m { background: var(--cyan); }
.t-g { background: var(--grey); }
.t-w { background: var(--white); }
.t-photo { padding: 0; }
.t-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.t-photo:hover img { transform: scale(1.05); }
.t-name { font-size: var(--step-lead); line-height: 1; }
.t-style { font-size: var(--step-small); font-weight: 500; }

/* Team */
.team-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.team-intro { grid-column: 1 / span 4; font-size: var(--step-lead); line-height: 1.3; max-width: 26ch; }
.team-list { grid-column: 6 / -1; display: flex; flex-direction: column; }
.team-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 18px 0; transition: transform .25s var(--ease);
}
.team-list li:nth-child(odd) { background: transparent; }
.team-list li:hover { transform: translateX(-8px); }
.tm-name { font-size: var(--step-lead); line-height: 1.1; }
.tm-role { color: var(--muted); text-align: right; }
.team-list li:first-child .tm-name { background: var(--gold); padding: 0 0.15em; }

/* Achievements */
.wins { background: var(--cyan); }
.wins-body { margin-top: 56px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
.wins-run { grid-column: 1 / span 7; font-size: var(--step-lead); line-height: 1.25; font-weight: 500; }
.wins-run .w { color: #3a2a99; transition: color .4s; }
.wins-run .w.lit { color: var(--ink); }
.wins-pic { grid-column: 9 / -1; transform: rotate(3deg); }
.wins-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Event ticket */
.event { background: var(--gold); }
.ticket {
  --notch: 28px;
  position: relative; margin: 56px auto 0; width: min(1180px, 100%);
  display: grid; grid-template-columns: 7fr 3fr;
  transition: transform .4s var(--ease);
}
.ticket:hover { transform: rotate(-1deg); }
.ticket-main { background: var(--white); padding: 40px; display: flex; flex-direction: column; gap: 48px; }
.ticket-title { font-size: var(--step-head); line-height: 0.92; }
.ticket-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
.countdown { font-size: var(--step-small); font-weight: 500; margin-top: 8px; }
.ticket-sub { font-size: var(--step-lead); font-weight: 500; margin-top: 12px; }
.countdown span { background: var(--cyan); padding: 0 0.2em; font-variant-numeric: tabular-nums; }
.ticket-stub {
  position: relative; background: var(--cyan); padding: 40px 28px 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
}
.ticket-stub::before {
  content: ""; position: absolute; left: -3px; top: 36px; bottom: 36px; width: 6px;
  background: radial-gradient(circle, var(--gold) 3px, transparent 3.5px) 0 0 / 6px 16px repeat-y; /* taste-skill-ignore: perforation dots */
}
.ticket::before, .ticket::after {
  content: ""; position: absolute; left: 70%; width: var(--notch); height: var(--notch);
  border-radius: 50%; background: var(--gold); transform: translateX(-50%);
}
.ticket::before { top: calc(var(--notch) / -2); }
.ticket::after { bottom: calc(var(--notch) / -2); }
.stub-price { font-size: var(--step-head); line-height: 0.95; }
.stub-note { font-size: var(--step-small); }
.stub-btn {
  margin-top: 24px; align-self: stretch; min-height: 56px; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--cyan); text-decoration: none; font-weight: 500;
  transition: background-color .2s, color .2s, transform .25s var(--ease);
}
.stub-btn:hover { background: var(--gold); color: var(--ink); transform: translateY(-3px); }

/* Location */
.where { position: relative; background: var(--white); padding-bottom: var(--gap); }
.where-photo { height: 72svh; overflow: hidden; }
.where-photo img { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.where-bar {
  position: relative; z-index: 1; margin: -120px var(--m) 0; width: calc(62% - var(--m));
  background: var(--ink); color: var(--white); padding: 40px;
}
.where-bar .display { color: var(--cyan); }
.where-cols { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.where-cols p:last-child { grid-column: 1 / -1; }
.where-cols a:hover { color: var(--cyan); }
.where-map {
  position: absolute; right: var(--m); top: calc(72svh - 200px); width: calc(34% - var(--m)); z-index: 2;
  background: var(--white); padding: 12px; transform: rotate(3deg);
}
.where-map img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% 60%; }

/* CTA */
.cta {
  position: relative; background: var(--ink); color: var(--white); min-height: 0;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;
  padding: 32px var(--m) 24px;
}
.cta-q { display: contents; }
.cta-l1, .cta-l2 { display: block; font-size: clamp(4rem, 11vw, 10.5rem); line-height: 1; }
.cta-l1 { color: var(--cyan); }
.cta-l2 { color: var(--gold); }
.cta-mid { margin: 120px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cta-row { display: flex; align-items: center; gap: 40px; }
.cta-row .btn { min-width: 220px; min-height: 56px; }
.cta-or, .cta-note { color: var(--grey); }

/* Contact coupon */
.contact { background: var(--white); }
.coupon {
  --notch: 28px;
  position: relative; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 46fr 54fr; background: var(--gold);
}
.coupon::before, .coupon::after {
  content: ""; position: absolute; left: 46%; width: var(--notch); height: var(--notch);
  border-radius: 50%; background: var(--white); transform: translateX(-50%);
}
.coupon::before { top: calc(var(--notch) / -2); }
.coupon::after { bottom: calc(var(--notch) / -2); }
.coupon-left { padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.coupon-head { font-size: var(--step-head); line-height: 0.92; }
.coupon-right {
  position: relative; padding: 48px; display: flex; flex-direction: column; gap: 10px;
}
.coupon-right::before {
  content: ""; position: absolute; left: -3px; top: 36px; bottom: 36px; width: 6px;
  background: radial-gradient(circle, var(--white) 3px, transparent 3.5px) 0 0 / 6px 16px repeat-y; /* taste-skill-ignore: perforation dots */
}
.coupon input, .coupon select {
  height: 52px; padding: 0 16px; border: 0; border-radius: 0; background: var(--gold-soft); color: var(--ink);
  font: 400 var(--step-body) var(--text); appearance: none; -webkit-appearance: none;
}
.coupon input::placeholder { color: #2a3600; }
.coupon input:focus, .coupon select:focus { outline: 3px solid var(--ink); outline-offset: 0; background: #dcf77a; }
.coupon-submit {
  margin-top: 6px; height: 56px; border: 0; background: var(--ink); color: var(--cyan); cursor: pointer;
  font: 500 var(--step-body) var(--text); transition: background-color .2s, color .2s, transform .25s var(--ease);
}
.coupon-submit:hover { background: var(--cyan); color: var(--ink); transform: translateY(-3px); }

/* Footer */
.foot {
  background: var(--gold); padding: 40px var(--m) 24px;
  display: flex; flex-direction: column;
}
.foot-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 24px; font-size: var(--step-small); }
.foot-up { justify-self: end; }
.foot-call {
  margin-top: clamp(96px, 14vw, 220px); font-size: clamp(3rem, 10.5vw, 10rem); line-height: 0.95; text-decoration: none;
  white-space: nowrap; transition: color .2s;
}
.foot-call:hover { color: var(--gold); }
.foot-meta { margin-top: 32px; display: grid; grid-template-columns: 1fr 2fr auto; gap: 24px; font-size: var(--step-small); align-items: end; }
.foot-meta p:last-child { text-align: right; }
.credits { max-width: 75ch; }

/* Motion */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .55s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .chip-a[data-reveal].is-in { transform: rotate(4deg); }
.js .chip-b[data-reveal].is-in { transform: rotate(-3deg); }
.js .wins-pic[data-reveal].is-in { transform: rotate(3deg); }
.js .where-map[data-reveal].is-in { transform: rotate(3deg); }
.js .hero-title .line > span { transform: translateY(105%); }
.js.loaded .hero-title .line > span { transform: none; transition: transform .9s var(--ease); }
.js.loaded .hero-title .line:nth-child(2) > span { transition-delay: 110ms; }
.js .hero-foot, .js .hero-clip video { opacity: 0; transition: opacity .7s ease .55s, transform .7s var(--ease) .55s; }
.js .hero-foot { transform: translateY(16px); }
.js.loaded .hero-foot, .js.loaded .hero-clip video { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js .hero-title .line > span, .js .hero-foot, .js .hero-clip video { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .chip-a[data-reveal] { transform: rotate(4deg) !important; }
  .js .chip-b[data-reveal] { transform: rotate(-3deg) !important; }
  .js .wins-pic[data-reveal], .js .where-map[data-reveal] { transform: rotate(3deg) !important; }
  .ticket:hover, .tt-row:hover, .team-list li:hover, .btn:hover { transform: none; }
}

/* Tablet */
@media (max-width: 1024px) {
  .bar nav { gap: 18px; }
  .dispatch { grid-template-columns: 1fr 1fr; }
  .dispatch-result { grid-column: 1 / -1; }
  .wall { grid-template-rows: 300px 220px 280px 240px; }
  .team-intro { grid-column: 1 / -1; margin-bottom: 32px; max-width: 40ch; }
  .team-list { grid-column: 1 / -1; }
  .wins-run { grid-column: 1 / span 8; }
  .wins-pic { grid-column: 9 / -1; }
  .ticket-facts { grid-template-columns: 1fr; }
  .where-bar { width: auto; margin-right: calc(34% + var(--m)); }
  .where-cols { grid-template-columns: 1fr; }
  .where-cols p:last-child { grid-column: auto; }
  .mission-inner { grid-column: 1 / span 8; }
  .chip-a { grid-column: 9 / span 4; }
  .chip-b { grid-column: 8 / span 5; }
  .coupon { grid-template-columns: 1fr; }
  .coupon::before, .coupon::after { left: auto; top: calc(var(--coupon-split, 260px) - var(--notch) / 2); bottom: auto; transform: none; }
  .coupon::before { left: calc(var(--notch) / -2); }
  .coupon::after { right: calc(var(--notch) / -2); }
  .coupon-left { padding: 28px 20px; }
  .coupon-right { padding: 28px 20px; }
  .coupon-right::before { left: 36px; right: 36px; top: -3px; bottom: auto; width: auto; height: 6px;
    background: radial-gradient(circle, var(--white) 3px, transparent 3.5px) 0 0 / 16px 6px repeat-x; } /* taste-skill-ignore: perforation dots */
}

/* Phone */
@media (max-width: 700px) {
  .bar { flex-wrap: wrap; row-gap: 12px; padding: 16px; gap: 12px; }
  .bar .btn { margin-left: auto; min-height: 44px; padding: 0 16px; font-size: var(--step-small); }
  .bar nav { order: 3; width: 100%; margin: 0; gap: 0; justify-content: space-between; font-size: var(--step-small); }
  .hero { --F: 10.2vw; --seam: 58%; min-height: 680px; }
  .hero-foot { left: 16px; right: 16px; bottom: 24px; max-width: none; gap: 16px; }
  .hero-lede { font-size: var(--step-lead); }
  .hero-clip { width: 64vw; left: 18vw; right: auto; bottom: auto; top: 150px; transform: rotate(-4deg); }
  .about-text { columns: 1; text-align: left; hyphens: manual; line-height: 1.3; }
  .mission { display: flex; flex-direction: column; align-items: stretch; gap: 48px; min-height: 0; }
  .chip-a { width: 58%; align-self: flex-end; margin-right: 8px; }
  .chip-b { width: 80%; margin: 0 0 0 4px; }
  .goal-row { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d"; }
  .goal { min-height: 0; padding: 28px 24px; }
  .classes-head { grid-template-columns: 1fr; }
  .classes-head .lead { justify-self: start; }
  .dispatch { grid-template-columns: 1fr; }
  .dispatch-title, .dispatch fieldset { padding-left: 20px; padding-right: 20px; }
  .dispatch fieldset { padding-bottom: 16px; }
  .dispatch-result { padding: 24px 20px; }

  .tt-row { grid-template-columns: 1fr auto; padding-bottom: 18px; line-height: 1.25; }
  .tt-row span:first-child { grid-column: 1 / -1; }
  .tt-row span:nth-child(2), .tt-row span:nth-child(3), .tt-row span:nth-child(4) { font-size: var(--step-small); color: var(--muted); }
  .tt-row span:nth-child(2) { display: inline; }
  .tt-row { grid-template-columns: auto 1fr auto; column-gap: 10px; }
  .tt-row span:nth-child(3) { justify-self: start; }
  .crew-head { flex-direction: column; gap: 16px; }
  .wall { grid-template-columns: 62fr 38fr; grid-template-rows: none; grid-auto-rows: 150px; gap: 6px; }
  .wall .tile { grid-column: auto !important; padding: 16px; }
  .wall .tile:nth-child(3n+1) { grid-column: 1 / -1 !important; height: 220px; }
  .wall .tile:nth-child(3n+1) { grid-row: span 1; }
  .wall .tile:nth-child(6n+5) { order: 0; }

  .team-list li { flex-direction: column; gap: 4px; padding: 14px 0; }
  .tm-role { text-align: left; }
  .wins-body { grid-template-columns: 1fr; row-gap: 48px; }
  .wins-run, .wins-pic { grid-column: 1; }

  .wins-pic { width: 76%; justify-self: end; }
  .ticket { grid-template-columns: 1fr; }
  .ticket-main { padding: 28px 24px; }
  .ticket::before, .ticket::after { left: auto; top: auto; transform: none; }
  .ticket::before { left: calc(var(--notch) / -2); bottom: calc(var(--stub-h, 250px) - var(--notch) / 2); }
  .ticket::after { right: calc(var(--notch) / -2); bottom: calc(var(--stub-h, 250px) - var(--notch) / 2); }
  .ticket-stub { --dot: 1; }
  .ticket-stub::before { left: 36px; right: 36px; top: -3px; bottom: auto; width: auto; height: 6px;
    background: radial-gradient(circle, var(--gold) 3px, transparent 3.5px) 0 0 / 16px 6px repeat-x; } /* taste-skill-ignore: perforation dots */
  .where-photo { height: 56svh; }
  .where-bar { margin: -80px 12px 0; padding: 28px 20px; }
  .where-map { position: relative; top: auto; right: auto; width: 78%; margin: 40px 16px 0 auto; }
  .cta-l1, .cta-l2 { font-size: 10.2vw; }
  .cta-mid { margin: 72px 0; }
  .cta-row { flex-direction: column; gap: 12px; width: 72vw; }
  .cta-row .btn { width: 100%; min-width: 0; }
  .contact { padding-left: 12px; padding-right: 12px; }
  .coupon input, .coupon select { height: 54px; }
  .foot-top { grid-template-columns: 1fr; gap: 12px; font-size: var(--step-small); }
  .foot-up { justify-self: start; }
  .foot-call { font-size: 10.2vw; }
  .foot-meta { grid-template-columns: 1fr; gap: 10px; font-size: var(--step-small); }
  .foot-meta p:last-child { text-align: left; }
}

/* Logo (the JPG has a gold ground, so it always sits on gold) */
.logo-crop { display: block; width: 210px; height: 120px; overflow: hidden; position: relative; }
.logo-crop img { position: absolute; width: 254px; max-width: none; left: -22px; top: -68px; }
.logo-crop:hover img { transform: rotate(-3deg) scale(1.04); transition: transform .3s var(--ease); }
.foot { background: var(--gold); }
.foot-logo { display: block; width: 180px; }
.foot-logo img { width: 100%; }
.foot-call:hover { color: var(--white); }
@media (max-width: 700px) {
  .logo-crop { width: 140px; height: 80px; }
  .logo-crop img { width: 170px; left: -15px; top: -46px; }
}
.foot-top { grid-template-columns: 180px repeat(3, minmax(0, 1fr)) auto; align-items: start; }
@media (max-width: 700px) { .foot-top { grid-template-columns: 1fr; } .foot-logo { width: 140px; } }

.hero-title--bottom .line > span::before { content: attr(data-t); }
.foot-logo.logo-crop { width: 210px; height: 120px; }
@media (max-width: 700px) { .foot-logo.logo-crop { width: 140px; height: 80px; } }

/* Real photographs: shown in colour, cropped hard */
.hero-clip img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; animation: drift 14s ease-in-out infinite alternate; }
.hero-clip { overflow: hidden; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.08) translateX(-2%); } }
.js .hero-clip img { opacity: 0; transition: opacity .7s ease .55s; }
.js.loaded .hero-clip img { opacity: 1; }
.wins-pic figcaption { font-size: var(--step-small); margin-top: 10px; }
.sw { display: inline-block; width: .7em; height: .7em; margin-right: .45em; vertical-align: .02em; }
.sw-red { background: #ff6a3d; }
.sw-yellow { background: var(--gold); }
.sw-blue { background: #7c5cff; }
.tt-styles span:last-child { text-align: right; }
.t-m .t-name, .t-o .t-name { max-width: 16ch; }
@media (prefers-reduced-motion: reduce) { .hero-clip img { animation: none; opacity: 1 !important; } }
@media (max-width: 700px) {
  .tt-styles { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .tt-styles span { font-size: var(--step-body) !important; color: var(--ink) !important; grid-column: auto !important; text-align: left !important; }
}

/* Founder portrait in the management section */
.team-side { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 28px; }
.team-side .team-intro { grid-column: auto; }
.team-pic { transform: rotate(-3deg); }
.team-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; }
.team-pic figcaption { font-size: var(--step-small); margin-top: 10px; max-width: 34ch; }
.js .team-pic[data-reveal].is-in { transform: rotate(-3deg); }
.team-list li:hover { transform: none; }
@media (max-width: 1024px) {
  .team-side { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; margin-bottom: 32px; }
  .team-pic { width: 42%; flex: none; }
}
@media (max-width: 700px) {
  .team-side { flex-direction: column; align-items: stretch; }
  .team-pic { width: 72%; }
}
@media (prefers-reduced-motion: reduce) { .js .team-pic[data-reveal] { transform: rotate(-3deg) !important; } }

/* New logo: a transparent cut-out, shown whole (no crop) */
.logo-crop { width: 248px; height: auto; overflow: visible; }
.logo-crop img { position: static; width: 100%; height: auto; left: auto; top: auto; transition: transform .3s var(--ease); }
.logo-crop:hover img { transform: rotate(-3deg) scale(1.05); }
.foot-logo.logo-crop { width: 220px; height: auto; }
@media (max-width: 700px) {
  .logo-crop { width: 156px; height: auto; }
  .logo-crop img { width: 100%; left: auto; top: auto; }
  .foot-logo.logo-crop { width: 160px; height: auto; }
}

/* Management: featured founder + profile panels */
.lead-profile { margin-top: 56px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
.lead-profile .team-pic { grid-column: 1 / span 4; }
.lead-text { grid-column: 6 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lead-name { font-family: var(--display); font-weight: 900; letter-spacing: -0.03em; font-size: var(--step-head); line-height: 0.92; }
.lead-bio { font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; }
.profile-role { color: var(--muted); font-weight: 500; }
.profile-styles { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-styles li { background: var(--cyan); color: var(--ink); padding: 6px 12px; font-weight: 500; font-size: var(--step-small); }
.profile-styles li:nth-child(3n+2) { background: var(--gold); }
.profile-styles li:nth-child(3n) { background: var(--pink); }

.team .team-grid { margin-top: 120px; }
.team-list li { display: block; padding: 0; }
.tm-open {
  width: 100%; display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: 20px;
  padding: 14px 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: transform .25s var(--ease);
}
.tm-open:hover { transform: translateX(8px); }
.tm-open:hover .tm-go { background: var(--ink); color: var(--cyan); }
.tm-mono, .profile-mono {
  display: grid; place-items: center; font-family: var(--display); font-weight: 900; letter-spacing: -0.03em; color: var(--ink);
}
.tm-mono { width: 56px; height: 56px; font-size: var(--step-body); }
.mono-gold { background: var(--gold); } .mono-cyan { background: var(--cyan); } .mono-pink { background: var(--pink); } .mono-grey { background: var(--grey); }
.tm-go { padding: 8px 14px; background: var(--cyan); font-weight: 500; font-size: var(--step-small); transition: background-color .2s, color .2s; }
.team-list li:first-child .tm-name { background: none; padding: 0; }

.profile {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100%); height: 100dvh; max-height: none;
  border: 0; padding: 0; overflow-y: auto; background: var(--ink); color: var(--white);
}
.profile::backdrop { background: rgba(0, 0, 0, .55); }
.profile:popover-open { animation: slide-in .45s var(--ease); }
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.profile-close {
  position: sticky; top: 0; float: right; z-index: 1; margin: 16px; min-height: 44px; padding: 0 18px;
  background: var(--cyan); color: var(--ink); border: 0; font: 500 var(--step-body) var(--text); cursor: pointer;
}
.profile-close:hover { background: var(--gold); }
.profile-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.profile-mono { width: 100%; aspect-ratio: 4 / 3; font-size: clamp(5rem, 22vw, 9rem); }
.profile-body { padding: 32px 32px 48px; display: flex; flex-direction: column; gap: 16px; }
.profile-name { font-family: var(--display); font-weight: 900; letter-spacing: -0.03em; font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 0.95; color: var(--cyan); }
.profile .profile-role { color: var(--grey); }
.profile h4 { margin: 16px 0 0; font: 500 var(--step-body) var(--text); color: var(--gold); }
.profile-high { display: flex; flex-direction: column; gap: 10px; }
.profile-high li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; }
.profile-high span { font-weight: 500; color: var(--cyan); font-variant-numeric: tabular-nums; }
.profile-quote { margin: 16px 0 0; padding: 24px; background: var(--gold); color: var(--ink); }
.profile-quote p { font-size: var(--step-lead); font-weight: 500; line-height: 1.25; }
.profile-quote footer { margin-top: 8px; font-size: var(--step-small); }

@media (max-width: 1024px) {
  .lead-profile .team-pic { grid-column: 1 / span 5; width: auto; }
  .lead-text { grid-column: 7 / -1; }
}
@media (max-width: 700px) {
  .lead-profile { grid-template-columns: 1fr; row-gap: 32px; }
  .lead-profile .team-pic, .lead-text { grid-column: 1; }
  .lead-profile .team-pic { width: 78%; }
  .team .team-grid { margin-top: 72px; }
  .tm-open { grid-template-columns: 48px 1fr auto; gap: 14px; }
  .tm-mono { width: 48px; height: 48px; }
  .tm-role { grid-column: 2; grid-row: 2; text-align: left; }
  .tm-go { grid-row: 1 / span 2; grid-column: 3; }
  .profile-body { padding: 24px 20px 40px; }
}
@media (prefers-reduced-motion: reduce) { .profile:popover-open { animation: none; } .tm-open:hover { transform: none; } }