@import url('assets/css/typography.css?v=product-sans-unified-1');
/* POET v2 — Bốn Nét. Tokens and the hero; see docs/ART_DIRECTION_BON_NET.md and docs/HERO_SPEC.md. */
:root {
  --paper: #fbf8f2;
  --ink: #2b2420;
  --coral: #fe8a7b;
  --blue: #6aa7bf;
  --yellow: #f7bc3c;
  --green: #3c9e77;
  /* Tile thickness: each stroke colour one step darker. */
  --coral-edge: #d8665a;
  --blue-edge: #4d879e;
  --yellow-edge: #cf9722;
  --green-edge: #2a7a5b;

  --display: var(--font-family-primary);
  --text: var(--font-family-primary);
  /* Five sizes: hero, section, statement, body, small. */
  --step-hero: clamp(64px, 6.4vw, 100px);
  --step-section: clamp(40px, 3.6vw, 58px);
  --step-statement: clamp(24px, 2.2vw, 34px);
  --step-body: clamp(17px, 1.3vw, 19px);
  --step-small: 14px;

  --margin: clamp(16px, 5vw, 80px);
  --mascot-w: 6.5vw; /* bé Mầm: 94 of the stage's 1440 units */

  --ease-enter: cubic-bezier(.23, 1, .32, 1);
  --ease-move: cubic-bezier(.77, 0, .175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--font-weight-regular) var(--step-body)/1.55 var(--text); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.skip-link { position: absolute; left: var(--margin); top: -100px; z-index: 10; padding: 10px 16px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 12px; }

.button {
  display: inline-block;
  padding: 16px 30px;
  border-radius: 999px; /* round caps, like the strokes */
  background: var(--coral);
  color: var(--ink);
  font: var(--font-weight-ui) var(--step-body)/1 var(--text);
  text-decoration: none;
  transition: transform 140ms var(--ease-enter), background-color 200ms ease;
}
.button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: #fd7867; }
}

/* ---------- Hero ---------- */
/* Clip sideways only: the phone stage is wider than the screen, but bé Mầm must still drop below the hero. */
.hero-wrap { height: 180vh; height: 180svh; overflow-x: clip; }
.hero {
  position: sticky;
  top: 0;
  height: 100vh; /* taste-skill-ignore: fallback for browsers without svh */
  height: 100svh;
}

.bar {
  position: absolute;
  inset: 0 var(--margin) auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}
.wordmark img { width: auto; height: 52px; }
.bar ul { margin: 0; padding: 0; list-style: none; }
.nav-list { display: flex; align-items: center; gap: 32px; }
.bar a { font-weight: var(--font-weight-ui); text-decoration: none; }
.bar a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; text-decoration-color: var(--coral); }
@media (hover: hover) and (pointer: fine) {
  .bar ul a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
}

/* PROVISIONAL text size and position: typography is not solved yet; kept top-left, clear of the platform. */
.hero-copy {
  position: absolute;
  z-index: 2;
  left: var(--margin);
  top: 15vh;
  width: min(30vw, 430px);
}
.hero h1 {
  margin: 0;
  font: var(--font-weight-regular) clamp(44px, 4.4vw, 68px)/1.04 var(--display);
  letter-spacing: -.02em;
}
.hero-support { max-width: 30em; margin: 20px 0 24px; }

/* Greeting: visible only while the intro plays (its final state is hidden, so no script means no greeting). */
.hero-greeting {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  font: var(--font-weight-regular) clamp(32px, 3.4vw, 52px)/1.1 var(--display);
  opacity: 0;
  pointer-events: none;
}

/* Isometric playground: one 1440 × 900 picture anchored to the bottom centre (geometry in docs/HERO_SPEC.md). */
.stage {
  --stage-w: 100vw;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--stage-w);
  margin-left: calc(var(--stage-w) / -2);
  aspect-ratio: 1440 / 900;
}
/* Clipped to the 1440 × 900 picture: the grass island runs past its edges and must not paint over Section 01. */
.playground { display: block; width: 100%; height: 100%; overflow: hidden; }
.playground .platform,
.playground .tile { transform-box: fill-box; transform-origin: 50% 100%; }
/* Objects and their moving parts carry their own ground / pivot points in SVG user units. */
.playground .obj,
.playground .swing-seat,
.playground .seesaw-plank { transform-box: view-box; }

.platform-shadow { fill: rgba(43, 36, 32, .08); }
.board-top { fill: #efe2cc; } .board-left { fill: #dcc3a2; } .board-right { fill: #c9a882; }
.curb-top { fill: #fdf6e6; } .curb-edge { fill: #e2d1b2; }
.tile-top.t-coral { fill: var(--coral); } .tile-edge.t-coral { fill: var(--coral-edge); }
.tile-top.t-blue { fill: var(--blue); } .tile-edge.t-blue { fill: var(--blue-edge); }
.tile-top.t-yellow { fill: var(--yellow); } .tile-edge.t-yellow { fill: var(--yellow-edge); }
.tile-top.t-green { fill: var(--green); } .tile-edge.t-green { fill: var(--green-edge); }
.contact { fill: rgba(43, 36, 32, .12); }
.o-coral { fill: #fe8a7b; } .o-coral-d { fill: #e9715f; } .o-coral-dd { fill: #d05c4c; }
.o-blue { fill: #8cc3d8; } .o-blue-d { fill: #6aa7bf; } .o-blue-dd { fill: #4f8aa1; }
.o-yellow { fill: #f7bc3c; } .o-yellow-d { fill: #e0a52a; } .o-yellow-dd { fill: #c78f1d; }
.o-green { fill: #3c9e77; } .o-green-d { fill: #2f8663; } .o-green-dd { fill: #256f51; }
.o-soil { fill: #8a5a3c; } .o-ink { fill: var(--ink); }

.mascot {
  position: absolute;
  left: var(--x);
  bottom: calc(100% - var(--y));
  width: var(--mascot-w);
  margin-left: calc(var(--mascot-w) / -2);
  aspect-ratio: 310 / 400;
  transform-origin: 50% 100%;
}
.mascot img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Poses: hopping on one leg at rest, jumping during the handoff, standing on landing (matches the Section 01 slot). */
.mascot .pose-stand, .mascot .pose-jump { opacity: 0; }
.mascot.is-jumping .pose-hop, .mascot.is-landed .pose-hop { opacity: 0; }
.mascot.is-jumping .pose-jump, .mascot.is-landed .pose-stand { opacity: 1; }
/* The planted foot is 22.6% left of the image centre; shift it onto the anchor so he stands on the tile. */
.mascot .pose-hop { translate: 22.6% 0; }

/* Surrounding world: tints of the brand colours, quieter than the playground. */
.ground-top { fill: #e4ecd6; } .ground-left { fill: #c9d7b8; } .ground-right { fill: #b7c8a5; }
.w-trunk { fill: #b98d6a; } .w-trunk-d { fill: #a17656; } .w-trunk-dd { fill: #8a6346; }
.w-leaf { fill: #7fbf9d; } .w-leaf-d { fill: #5fa682; }
.w-wall { fill: #fdf5e7; } .w-wall-d { fill: #f3e6cf; } .w-wall-dd { fill: #e4d3b6; }
.w-band { fill: #f7cf7a; } .w-window { fill: #b9d8e4; } .w-door { fill: #f2a194; }
.w-roof-coral { fill: #f2a194; } .w-roof-coral-d { fill: #d9867a; }
.w-roof-green { fill: #8cc3a8; } .w-roof-green-d { fill: #6fa98d; }
.w-post { fill: #e9dcc5; } .w-post-d { fill: #d9c9ad; } .w-post-dd { fill: #c7b596; }
.w-counter { fill: #fdf5e7; } .w-counter-d { fill: #f0e2c9; } .w-counter-dd { fill: #ddcaab; }
.w-cream { fill: #fffaf0; } .w-cream-d { fill: #f3e9d6; }
.w-stripe-coral { fill: #f7a99d; } .w-stripe-coral-d { fill: #e88f82; } .w-stripe-coral-dd { fill: #d77a6d; }
.w-stripe-blue { fill: #9ec8d8; } .w-stripe-blue-d { fill: #82b2c5; } .w-stripe-blue-dd { fill: #6b9eb2; }
.w-stripe-yellow { fill: #f8d27d; } .w-stripe-yellow-d { fill: #eabd5b; } .w-stripe-yellow-dd { fill: #d6a744; }
.w-base { fill: #e9dcc5; } .w-base-d { fill: #d9c9ad; } .w-base-dd { fill: #c7b596; }
.w-sign { fill: #fffaf0; } .w-sign-d { fill: #f3e9d6; } .w-sign-dd { fill: #e3d6bd; }
.w-frame { fill: #6aa7bf; } .w-frame-d { fill: #5590a8; } .w-frame-dd { fill: #437a91; }

/* Intro gate (set in <head>): the greeting shows; everything the build animates starts hidden. */
.intro-pending .hero-greeting { opacity: 1; }
.intro-pending .bar,
.intro-pending .platform-shadow,
.intro-pending .platform,
.intro-pending .tile,
.intro-pending .curb,
.intro-pending .obj,
.intro-pending .mascot,
.intro-pending .hero-copy > * { opacity: 0; }

/* ---------- Section 01 (stub: handoff landing target) ---------- */
.s01 { padding: 48px var(--margin) 200px; }
.s01-head { display: flex; align-items: flex-end; gap: 32px; }
.s01 h2 { margin: 0; font: var(--font-weight-regular) var(--step-section)/1.04 var(--display); letter-spacing: -.02em; }
.mascot-slot { width: var(--mascot-w); flex: none; visibility: hidden; }
.s01 p { max-width: 36em; margin: 40px 0 0; }

/* ---------- 1024 ---------- */
@media (max-width: 1180px) {
  .hero-wrap { height: 150vh; height: 150svh; }
  .hero-copy { top: 13vh; width: min(40vw, 420px); }
}

/* ---------- 390: no pin; text on top, the platform full width beneath ---------- */
@media (max-width: 700px) {
  :root { --mascot-w: 10.7vw; }
  .hero-wrap { height: auto; }
  .hero {
    position: relative;
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }
  .bar { height: 72px; }
  .wordmark img { height: 44px; }
  .hero-copy { position: relative; top: auto; left: auto; width: auto; padding: 15svh var(--margin) 0; }
  .hero h1 { font-size: 11vw; }
  .stage { --stage-w: 165vw; position: relative; bottom: auto; margin-top: auto; }
  .s01 { padding: 96px var(--margin) 120px; }
  /* Phones: bé Mầm lands above the heading so the heading keeps the full width. */
  .s01-head { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .s01 h2 { font-size: 8.4vw; }
}

/* =========================================================================
   Site pages (Home sections, Về chúng tôi, Dự án, Đồng hành). Information order follows the Website Audit IA;
   look follows docs/ART_DIRECTION_BON_NET.md: one motif (the crayon stroke = a round-capped pill), flat colour,
   no eyebrows / index numbers / thin rules / shadows. Five type sizes only (the --step-* tokens).
   ========================================================================= */
:root { --radius: 28px; --tint: #f2ebde; }

/* ---------- Navigation (rendered by chrome.js) ---------- */
poet-nav { display: block; position: relative; height: 88px; }
.hero poet-nav { position: static; height: 0; }
.nav-toggle,
.nav-join-toggle {
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font: var(--font-weight-ui) var(--step-small)/1 var(--text);
  cursor: pointer;
}
.nav-toggle { display: none; padding: 12px 20px; }
/* "Đồng hành cùng POET" is the highlighted item (IA: Highlight | Drop bar). */
.nav-join { position: relative; }
.nav-join-toggle { padding: 12px 20px; font-size: var(--step-body); }
.nav-join-toggle::after { content: ''; display: inline-block; width: .45em; height: .45em; margin-left: .55em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-.2em) rotate(45deg); }
.nav-join.is-current .nav-join-toggle { background: var(--coral); }
.nav-sub {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 5;
  display: none;
  min-width: 260px;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--ink);
}
.nav-join.is-open .nav-sub { display: block; }
.nav-sub a { display: block; padding: 12px 16px; border-radius: 999px; color: var(--paper); }
.nav-sub a[aria-current="page"] { background: var(--coral); color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .bar .nav-sub a:hover { background: rgba(251, 248, 242, .14); text-decoration: none; }
}

/* ---------- Shared section parts ---------- */
.section { padding: clamp(96px, 11vw, 168px) var(--margin) 0; }
.section h2,
.page-head h1 { margin: 0 0 32px; font: var(--font-weight-regular) var(--step-section)/1.04 var(--display); letter-spacing: -.02em; }
.page-head { padding: clamp(48px, 8vw, 120px) var(--margin) 0; }
.page-head h1 { font-size: var(--step-hero); }
h3 { margin: 0 0 12px; font: var(--font-weight-regular) var(--step-statement)/1.15 var(--display); }
h4 { margin: 0 0 12px; font: var(--font-weight-ui) var(--step-small)/1.3 var(--text); }
.lede { max-width: 34em; margin: 0 0 32px; font-size: var(--step-statement); line-height: 1.35; }
.prose { max-width: 38em; }
.prose p { margin: 0 0 20px; }
.small { font-size: var(--step-small); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button.ink { background: var(--ink); color: var(--paper); }
.button.paper { background: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .button.ink:hover { background: #463b35; }
  .button.paper:hover { background: #fff; }
}
.text-link { font-weight: var(--font-weight-ui); text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--coral); }

/* The motif at text size: a short round-capped stroke as the bullet. */
.marks { margin: 0; padding: 0; list-style: none; }
.marks li { position: relative; margin: 0 0 10px; padding-left: 1.6em; }
.marks li::before { content: ''; position: absolute; left: 0; top: .62em; width: 1em; height: .36em; border-radius: 999px; background: var(--mark, var(--coral)); }

/* The motif at photo scale: every photograph sits in a stroke (a round-capped band). */
.stroke-photo { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; border-radius: 999px; }
.photo-pair { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin-top: 48px; }
.photo-pair img:last-child { margin-top: 12vw; }

/* Key facts, label above value. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin: 0 0 32px; }
.facts div { padding: 22px 26px; border-radius: var(--radius); background: var(--tint); }
.facts dt { font-size: var(--step-small); }
.facts dd { margin: 4px 0 0; font: var(--font-weight-regular) var(--step-statement)/1.2 var(--display); }

/* ---------- Numbers: stepped figure tiles ---------- */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: start; margin: 0; padding: 0; list-style: none; }
.figures li { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 40vh; padding: 28px; border-radius: var(--radius); }
.figures li:nth-child(1) { min-height: 60vh; background: var(--coral); }
.figures li:nth-child(2) { margin-top: 10vh; background: var(--ink); color: var(--paper); }
.figures li:nth-child(3) { margin-top: 18vh; background: var(--yellow); }
.figures li:nth-child(4) { margin-top: 24vh; min-height: 34vh; background: var(--blue); }
.figures strong { font: var(--font-weight-regular) var(--step-section)/1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }

/* ---------- Season 6: four strokes, four stages ---------- */
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 48px 0 0; padding: 0; list-style: none; }
.stages li { display: flex; flex-direction: column; }
.stages li::before { content: ''; display: block; height: 22px; margin-bottom: 18px; border: 4px solid var(--c); border-radius: 999px; background: var(--c); }
.stages li:nth-child(1) { --c: var(--green); }
.stages li:nth-child(2) { --c: var(--blue); }
.stages li:nth-child(3) { --c: var(--yellow); }
.stages li:nth-child(4) { --c: var(--coral); }
.stages .is-now::before { height: 34px; margin-bottom: 6px; }
.stages .is-now ~ li::before { background: transparent; } /* still to come: the stroke is only outlined */
.stages h3 { margin-bottom: 4px; }
.stages time { display: block; margin-bottom: 8px; font-weight: var(--font-weight-ui); }
.stages p { margin: 0; }
.stages .stage-now { order: -1; margin-bottom: 12px; font-size: var(--step-small); font-weight: var(--font-weight-ui); }

/* ---------- Project bands (home + Dự án) ---------- */
.band { padding: clamp(28px, 4vw, 56px); border-radius: var(--radius); background: var(--c, var(--green)); }
.band + .band { margin-top: 12px; }
.band-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px 48px; }
.band .marks { --mark: var(--paper); }
.band p { margin: 0 0 16px; }

/* ---------- Three paths (CTA) ---------- */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.paths li { display: flex; flex-direction: column; padding: 32px; border-radius: var(--radius); background: var(--c); }
.paths li:nth-child(1) { --c: var(--green); }
.paths li:nth-child(2) { --c: var(--coral); }
.paths li:nth-child(3) { --c: var(--yellow); }
.paths p { margin: 0 0 28px; }
.paths .button { margin-top: auto; align-self: flex-start; }

/* ---------- Tabs (Dự án) ---------- */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 32px; background: var(--tint); }
.tabs button { padding: 12px 24px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: var(--font-weight-ui) var(--step-body)/1 var(--text); cursor: pointer; }
.tabs [aria-selected="true"] { background: var(--ink); color: var(--paper); }

/* ---------- Budget table ---------- */
.budget { width: 100%; max-width: 900px; border-collapse: separate; border-spacing: 0 4px; }
.budget th, .budget td { padding: 14px 18px; text-align: left; vertical-align: top; }
.budget thead th { font-size: var(--step-small); }
.budget tbody td { background: var(--tint); }
.budget tbody td:first-child { border-radius: 22px 0 0 22px; }
.budget tbody td:last-child { border-radius: 0 22px 22px 0; }
.budget .num { text-align: right; white-space: nowrap; }
.budget tfoot td { padding-top: 18px; font: var(--font-weight-regular) var(--step-statement)/1.2 var(--display); }

/* ---------- Về chúng tôi ---------- */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 20px; margin: 0; padding: 0; list-style: none; }
.team img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); margin-bottom: 16px; }
.team h3 { margin: 0; }
.team p { margin: 0; }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.timeline li { padding: 32px; border-radius: var(--radius); background: var(--c); }
.timeline li:nth-child(1) { --c: var(--yellow); }
.timeline li:nth-child(2) { --c: var(--blue); }
.timeline li:nth-child(3) { --c: var(--coral); }
.timeline p { margin: 0; }

/* ---------- Đồng hành: tiers ---------- */
.tiers-pick { display: flex; gap: 8px; margin: 0 calc(var(--margin) * -1) 16px; padding: 4px var(--margin) 12px; overflow-x: auto; }
.tiers-pick button { flex: none; padding: 14px 22px; border: 0; border-radius: 999px; background: var(--tint); color: var(--ink); font: var(--font-weight-ui) var(--step-small)/1.25 var(--text); text-align: left; cursor: pointer; }
.tiers-pick span { display: block; font-weight: var(--font-weight-regular); }
.tiers-pick [aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tier { padding: clamp(28px, 4vw, 48px); border-radius: var(--radius); background: var(--tint); }
.tier + .tier { margin-top: 12px; }
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 24px 0 8px; }
.phases > div:nth-child(1) { --mark: var(--coral); }
.phases > div:nth-child(2) { --mark: var(--blue); }
.phases > div:nth-child(3) { --mark: var(--green); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cards li { padding: 32px; border-radius: var(--radius); background: var(--tint); }
.cards p { margin: 0 0 12px; }

/* ---------- Footer: the mark, large ---------- */
poet-footer { display: block; margin-top: clamp(120px, 14vw, 200px); }
.foot {
  display: grid;
  grid-template-columns: auto 1.2fr 1fr 1fr;
  gap: 32px 48px;
  align-items: start;
  padding: 64px var(--margin) 40px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--ink);
  color: var(--paper);
}
.foot-mark { width: 96px; padding: 12px; border-radius: 24px; background: var(--paper); }
.foot p { margin: 0; }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li + li { margin-top: 8px; }
.foot a { text-decoration: none; }
.foot-note { grid-column: 1 / -1; font-size: var(--step-small); opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
}

@media (max-width: 1180px) {
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figures li:nth-child(n) { min-height: 30vh; margin-top: 0; }
  .figures li:nth-child(even) { margin-top: 6vh; }
  .stages, .cards, .paths { grid-template-columns: repeat(2, 1fr); }
  .foot { grid-template-columns: auto 1fr 1fr; }
  .foot-note { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  poet-nav { height: 72px; }
  .nav-toggle { display: inline-block; }
  .nav-list {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--ink);
  }
  .bar.is-open .nav-list { display: flex; }
  .nav-list > li > a { display: block; padding: 12px 16px; color: var(--paper); }
  /* Phones: the three ways to join are listed in the open menu directly. */
  .nav-join-toggle { width: 100%; text-align: left; pointer-events: none; }
  .nav-join-toggle::after { display: none; }
  .nav-sub { position: static; display: block; min-width: 0; padding: 4px 0 0; }
  .figures li:nth-child(n) { min-height: 0; margin-top: 0; aspect-ratio: 1; padding: 20px; }
  .figures li:nth-child(even) { margin-top: 32px; }
  .figures strong { font-size: 8.4vw; }
  .stages, .cards, .paths, .band-grid, .timeline, .phases, .photo-pair { grid-template-columns: 1fr; }
  .team { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
  .photo-pair img:last-child { width: 80%; margin-top: 0; justify-self: end; }
  .budget th, .budget td { padding: 12px 10px; font-size: var(--step-small); }
  .budget tfoot td { font-size: var(--step-body); }
  .foot { grid-template-columns: 1fr; }
}