/* Meddling Kids — dark poster-punk system
   The page is the game world: near-black blue like the megacorp city,
   orange as fire, Anton display type, notched corners + stencil stamps
   as the signature. Archivo for everything else. */

:root {
  --accent: #f2521b;
  --accent-bright: #ff6a33;
  --accent-deep: #d13f0d;
  --bg: #0c0f16;
  --bg-raise: #141926;
  --bg-card: #1a2130;
  --ink-on-orange: #1c1208;
  --text: #dfe3ec;
  --text-soft: #aab1c0;
  --text-faint: #7d8494;
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.07);
  --container: 1720px;
  --pad: clamp(20px, 4vw, 76px);
  --notch: 22px;
  /* Body type scale — four steps, use these instead of ad-hoc px */
  --fs-lead: 17px;   /* intros, product description */
  --fs-body: 16px;   /* standard paragraphs */
  --fs-card: 15px;   /* card bodies, feature/list items */
  --fs-meta: 13.5px; /* captions, tags, fine print */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent-bright); text-decoration: none; }
a:hover { color: #ff8a5c; }

.display {
  font-family: 'Anton', 'Archivo Black', sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 0.95;
  color: #fff;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Kicker: small orange label with a leading bar */
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 14px;
}
.kicker::before { content: ""; width: 26px; height: 4px; background: var(--accent); flex-shrink: 0; }

/* Notched corner — the hexagon's corner cut, applied to cards and panels */
.notch { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }

/* Stencil stamp */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent-bright);
  border: 2px dashed rgba(242, 82, 27, 0.75);
  border-radius: 4px;
  padding: 10px 16px;
  transform: rotate(-1.2deg);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(12, 15, 22, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header .bar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.site-header .logo img { height: 52px; width: auto; display: block; }

.site-nav { display: flex; gap: 30px; margin-left: auto; align-items: center; }

.site-nav a {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text);
  padding: 6px 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--accent-bright); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); color: #fff; }

.nav-cta {
  margin-left: 8px;
  background: var(--accent);
  color: #16100a !important;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 11px 20px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.nav-cta:hover { background: var(--accent-bright); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle svg { display: block; stroke: var(--text); }

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    background: var(--bg-raise);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5);
  }
  .site-nav.open { display: flex; }
  .site-nav a {
    padding: 15px var(--pad);
    border-bottom: 1px solid var(--line-soft);
    font-size: 16px;
  }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line-soft); color: var(--accent-bright); }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--accent);
  color: #16100a !important;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 13px 24px;
  border: 0;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.btn:hover { background: var(--accent-bright); }

.btn-ghost-dark {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.4);
  clip-path: none;
}
.btn-ghost-dark:hover { border-color: var(--accent-bright); color: var(--accent-bright) !important; background: transparent; }

.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-bright);
  border: 2px dashed rgba(242, 82, 27, 0.75);
  border-radius: 4px;
  padding: 11px 16px;
  transform: rotate(-1.2deg);
}
.badge-soon-dark { color: var(--accent-bright); border-color: rgba(255, 106, 51, 0.6); padding: 8px 14px; }

/* ---------- Hero (home) ---------- */

.hero { position: relative; overflow: hidden; background: var(--bg); }

.hero-bleed { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bleed img {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 140px);
  mask-image: linear-gradient(to right, transparent, #000 140px);
}
/* Dark mist: the page swallows the art's left side */
.hero-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 33%, rgba(12, 15, 22, 0.72) 52%, rgba(12, 15, 22, 0) 72%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 830px;
  padding-top: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(36px, 4vw, 64px);
}

.hero-mobile-art { display: none; }

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(52px, 6.4vw, 100px);
  letter-spacing: 1px;
}
.hero h1 .pop { color: var(--accent); }

.hero .stakes {
  margin: 0 0 22px;
  font-size: clamp(17px, 2vw, 23px);
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
}
.hero .stakes .pop { color: var(--accent-bright); }
.hero .stakes .empower {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: rgba(255, 106, 51, 0.5);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.hero p.body { margin: 0 0 14px; font-size: var(--fs-lead); line-height: 1.6; max-width: none; text-wrap: pretty; color: var(--text); }

.rally {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 14px 0 4px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 2px dashed rgba(242, 82, 27, 0.75);
  border-radius: 4px;
  padding: 12px 20px;
  background: rgba(12, 15, 22, 0.55);
}
.rally svg { flex-shrink: 0; }
.rally .lines { display: flex; flex-direction: column; gap: 3px; line-height: 1.25; }
.rally .r1 { font-size: 15px; color: #fff; }
.rally .r2 { font-size: 13.5px; color: var(--accent-bright); }

.hero .kicker { margin: 34px 0 14px; }

/* ---------- Path cards ---------- */

.path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.path-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 28px 22px;
  color: #fff !important;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.path-card:hover { transform: translateY(-5px); }
.path-card.dark { background: var(--bg-card); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.path-card.orange { background: var(--accent-deep); }

.path-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.path-head img.badge { width: 52px; height: 58px; object-fit: contain; flex-shrink: 0; }
.path-card h3 { margin: 0; font-size: clamp(26px, 2.2vw, 32px); }
.path-card p { margin: 0; font-size: var(--fs-card); line-height: 1.5; color: #f2f3f7; }
.path-card .cta {
  margin-top: auto;
  padding-top: 14px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: var(--accent-bright);
}
.path-card.orange .cta { color: #ffe1d3; }
.path-card:hover .cta { color: #fff; }

@media (max-width: 720px) {
  .path-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact band (full orange zone) ---------- */

.contact-band { background: var(--accent); color: var(--ink-on-orange); }
.contact-band .inner {
  display: flex;
  align-items: center;
  gap: 16px 36px;
  flex-wrap: wrap;
  padding-top: 26px;
  padding-bottom: 26px;
}
.contact-band .title { font-size: clamp(26px, 2.6vw, 36px); line-height: 1; color: var(--ink-on-orange); }
.contact-band .hook { font-size: var(--fs-body); font-weight: 800; }
.contact-band a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-on-orange);
  font-size: 16.5px;
  font-weight: 900;
  border-bottom: 2px solid rgba(28, 18, 8, 0.4);
  padding-bottom: 2px;
}
.contact-band a:hover { color: #000; border-bottom-color: #000; }
.contact-band .badge-soon-dark {
  color: var(--ink-on-orange);
  border-color: rgba(28, 18, 8, 0.55);
}

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line-soft); background: var(--bg); }
.site-footer .inner {
  display: flex;
  align-items: center;
  gap: 14px 34px;
  flex-wrap: wrap;
  padding-top: 22px;
  padding-bottom: 22px;
  font-size: var(--fs-card);
  font-weight: 700;
  color: var(--text-soft);
}
.site-footer .brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 900; }
.site-footer nav { margin-left: auto; display: flex; gap: 26px; }
.site-footer nav a { color: var(--text-soft); font-size: 13px; letter-spacing: 1px; }
.site-footer nav a:hover { color: var(--accent-bright); }
.site-footer .fine { color: var(--text-faint); font-weight: 600; }

@media (max-width: 720px) {
  .site-footer nav { margin-left: 0; }
}

/* ---------- Page headers (interior) ---------- */

.page-head { padding-top: clamp(44px, 4.5vw, 72px); padding-bottom: 10px; }
.ph-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.stamp-big {
  font-size: clamp(17px, 1.5vw, 25px);
  letter-spacing: 2px;
  line-height: 1.35;
  text-align: center;
  border-width: 3px;
  padding: 20px 30px;
  transform: rotate(-4deg);
  margin-right: clamp(0px, 4vw, 90px);
  flex-shrink: 0;
}
@media (max-width: 980px) { .stamp-big { display: none; } }
.page-head h1 { margin: 0; font-size: clamp(44px, 5.4vw, 84px); letter-spacing: 1.5px; }
.page-head h1 .pop { color: var(--accent); }
.page-head .tagline { margin: 12px 0 0; font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; color: var(--text-soft); max-width: 70ch; }

/* ---------- FaceEmote (ai-tools) ---------- */

.fe { padding-top: clamp(28px, 3vw, 48px); padding-bottom: clamp(40px, 4vw, 64px); }

.fe-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 6px; }
.fe-head img.mark { width: 62px; height: 70px; object-fit: contain; }
.fe-head h2 { margin: 0; font-size: clamp(44px, 4.6vw, 72px); letter-spacing: 1.5px; }
.fe-tagline {
  margin: 8px 0 26px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-bright);
  max-width: 72ch;
}

.fe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 980px) { .fe-grid { grid-template-columns: 1fr; } }

.fe-quote {
  margin: 0 0 16px;
  font-size: clamp(19px, 1.6vw, 23px);
  font-style: italic;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  max-width: 56ch;
  border-left: 4px solid var(--accent);
  padding-left: 18px;
}

.fe-desc { margin: 0 0 26px; font-size: var(--fs-lead); line-height: 1.6; color: var(--text); }

.fe-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #fff;
}

.fe-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 22px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.fe-features li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-card); font-weight: 600; color: var(--text); }
.fe-features li svg { flex-shrink: 0; }
@media (max-width: 480px) { .fe-features { grid-template-columns: 1fr; } }

.fe-concept { margin: 0; max-width: 560px; justify-self: center; }
.fe-concept img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.fe-concept figcaption { margin-top: 10px; font-size: var(--fs-meta); color: var(--text-faint); }

.fe-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }

/* Workflows */
.workflows { margin-top: clamp(36px, 4vw, 60px); }
.workflows h3 { margin: 0 0 18px; font-size: clamp(26px, 2.6vw, 38px); }
.wf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .wf-grid { grid-template-columns: 1fr; } }

.wf-card {
  background: var(--bg-raise);
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  padding: 20px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.wf-card .tag { font-size: 12px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 2px; }
.wf-card .name { font-family: 'Anton', sans-serif; font-size: 24px; letter-spacing: 0.4px; color: #fff; margin-bottom: 10px; text-transform: uppercase; }
.wf-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
@media (min-width: 1240px) {
  .wf-card ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 26px; }
}
.wf-card li { display: flex; align-items: center; gap: 9px; font-size: var(--fs-card); font-weight: 600; color: var(--text); }
.wf-card li svg { flex-shrink: 0; }

/* Screenshot strip */
.shots { margin-top: clamp(36px, 4vw, 60px); }
/* Each card sizes to its screenshot (no letterbox bars), row centered like the original */
.shots .strip { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: flex-start; }
.shots figure { margin: 0; flex: 0 1 auto; min-width: 0; }
.shots button {
  padding: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: zoom-in;
  background: #000;
  display: block;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.shots button:hover { border-color: var(--accent); }
.shots img { display: block; height: 230px; width: auto; max-width: 100%; }
@media (max-width: 760px) {
  .shots .strip { flex-direction: column; }
  .shots figure { width: 100%; }
  .shots img { height: auto; width: 100%; }
}
.shots figcaption { font-size: var(--fs-meta); color: var(--text-faint); margin-top: 8px; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(3, 4, 7, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
  border: 0;
  width: 100%;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 94%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8);
}

/* ---------- Squad page ---------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(40px, 4vw, 64px);
  padding-bottom: clamp(30px, 3.5vw, 56px);
}
@media (max-width: 980px) { .about-grid { grid-template-columns: 1fr; } }

.about-grid h1 { margin: 0 0 6px; font-size: clamp(44px, 5vw, 80px); color: var(--accent); letter-spacing: 1.5px; }
.about-grid .lead { margin: 8px 0 18px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 900; color: #fff; }
.about-grid p { margin: 0 0 13px; font-size: var(--fs-body); line-height: 1.6; text-wrap: pretty; color: var(--text); }
.about-grid .vow { font-weight: 800; font-style: italic; color: #fff; }
.about-art img {
  display: block;
  width: 100%;
  /* clip just inside the illustration's baked hex frame (measured from the PNG) */
  clip-path: polygon(16% 5%, 84% 5%, 96% 50%, 84% 92%, 16% 92%, 4% 50%);
}
/* Orange neon hugging the clipped hex edge (drop-shadow follows the clip shape) */
.about-art { filter: drop-shadow(0 0 3px rgba(242, 82, 27, 0.9)) drop-shadow(0 0 22px rgba(242, 82, 27, 0.45)); }

.section-title { margin: 0 0 20px; font-size: clamp(30px, 3vw, 44px); color: var(--accent); }

.help { padding-bottom: clamp(30px, 3.5vw, 56px); }
.help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .help-grid { grid-template-columns: 1fr; } }

.help-card {
  display: flex;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  padding: 22px 24px;
  transition: transform 0.18s ease;
}
.help-card:hover { transform: translateY(-4px); }
.help-card img { width: 52px; height: 58px; object-fit: contain; flex-shrink: 0; }
.help-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; line-height: 1.25; color: #fff; }
.help-card p { margin: 0; font-size: var(--fs-card); line-height: 1.55; text-wrap: pretty; color: var(--text-soft); }

.beliefs { padding-bottom: clamp(30px, 3.5vw, 56px); }
.beliefs .band {
  background: var(--bg-raise);
  border: 1px solid var(--line-soft);
  border-left: 5px solid var(--accent);
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 38px);
}
.beliefs .band-grid { display: grid; grid-template-columns: 190px repeat(4, minmax(0, 1fr)); gap: 0; align-items: start; }
.beliefs h2 { margin: 0; font-size: clamp(28px, 2.6vw, 40px); color: #fff; line-height: 0.92; }
.belief { padding: 0 24px; border-left: 1px solid var(--line); }
.belief h3 { margin: 0 0 5px; font-size: 16.5px; font-weight: 900; color: var(--accent-bright); line-height: 1.2; }
.belief p { margin: 0; font-size: var(--fs-card); line-height: 1.5; color: var(--text); text-wrap: pretty; }
@media (max-width: 1100px) {
  .beliefs .band-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .beliefs h2 { grid-column: 1 / -1; margin-bottom: 6px; }
  .belief:nth-child(2), .belief:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .beliefs .band-grid { grid-template-columns: 1fr; }
  .belief { border-left: 0; padding: 0; }
}

.proof { padding-bottom: clamp(40px, 4vw, 64px); }
.proof .row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (max-width: 980px) { .proof .row { grid-template-columns: 1fr; } }
.proof p { margin: 0; font-size: var(--fs-card); line-height: 1.6; text-wrap: pretty; color: var(--text-soft); }
.proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.proof-card {
  border: 1px solid var(--line);
  background: #000;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.proof-card img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
@media (max-width: 480px) { .proof-grid { grid-template-columns: 1fr; } }

/* ---------- Legal / prose pages ---------- */

.prose { padding-top: 34px; padding-bottom: 64px; max-width: 780px; margin-left: auto; margin-right: auto; }
.prose h1 { font-size: clamp(36px, 4.5vw, 54px); margin: 0 0 8px; }
.prose .updated { color: var(--text-faint); font-size: 14px; margin-bottom: 28px; }
.prose h2 { font-size: 21px; margin: 30px 0 8px; color: #fff; }
.prose p, .prose li { font-size: var(--fs-body); line-height: 1.65; color: var(--text); }

/* Anything up to a 1080p desktop: tighten the hero's vertical rhythm so the
   section (and the art's baked slogan at its bottom edge) fits the first
   screenful, with the card tops sliced by the fold as the scroll cue */
@media (min-width: 1240px) and (max-height: 1080px) {
  .hero-content { padding-top: 14px; padding-bottom: 22px; }
  .hero h1 { font-size: clamp(46px, 5vw, 72px); margin-bottom: 12px; }
  .hero .stakes { margin-bottom: 14px; font-size: clamp(16px, 1.6vw, 20px); }
  .hero p.body { font-size: 16px; margin-bottom: 10px; }
  .rally { margin: 8px 0 0; padding: 10px 16px; }
  .hero .kicker { margin: 16px 0 10px; }
  .path-card { padding: 18px 22px 16px; }
}

/* Mid widths: zoom the art so its baked slogan crops cleanly below the section
   edge instead of being sliced mid-word by the orange card */
@media (min-width: 1240px) and (max-width: 1559px) {
  .hero-bleed img { height: 112%; bottom: -12%; }
}

/* ---------- Mobile hero ---------- */

@media (max-width: 1239px) {
  .hero-bleed, .hero-fade { display: none; }
  .hero-content { max-width: none; padding-top: 0; }
  /* Full-bleed: break out of the container padding, edge to edge */
  .hero-mobile-art {
    display: block;
    margin: 0 calc(-1 * var(--pad)) 26px;
    border-bottom: 3px solid var(--accent);
  }
  .hero-mobile-art img {
    display: block;
    width: 100%;
    max-width: none;
  }
}