/* Home (option 1, "Classic": direction C's home, carried through every page) — hero (text 38.2 | photo 61.8),
   the bars, the three promises, the process, the bundles, closing.
   Shared pieces (cards, section heads, closing, buttons) come from style.css. */

/* ---------- hero: text on the minor side, photo on the major side ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s-4) var(--split-gap);
  align-items: center; padding-block: var(--s-5) 0;
}
.hero h1 { line-height: 1.08; margin: var(--s-3) 0; } /* size: the one h1 size (style.css --h1) */
.hero .lede { margin-bottom: var(--s-5); }
.hero-media { aspect-ratio: 1.272 / 1; }
.hero-media img { object-position: 50% 62%; }

/* ---------- the three promises: plain statements on the bar grid's three columns ---------- */
.promise { margin-top: var(--section); } /* on the page charcoal (Joe: no lighter bands) */
.promise .wrap > .promises { border-top: 1px solid var(--rule-strong); }
.promises {
  list-style: none; margin: 0; padding: var(--s-6) 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap);
}
.promises li {
  position: relative;
  font-size: clamp(var(--t-2), 1.3rem + .9vw, var(--t-3)); line-height: 1.2; color: var(--cream);
  text-wrap: balance;
}
.promises li + li::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--rule-strong); }

/* ---------- the process: four steps, photo and text alternating ---------- */
.process-index { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); list-style: none; margin: 0; padding: 0; }
.process-index a { display: inline-flex; align-items: baseline; gap: var(--s-1); padding-block: 10px; font: 500 var(--t-label)/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--text); }
.process-index a:hover { color: var(--cream); text-decoration: underline 1px var(--orange); text-underline-offset: 7px; }
.step {
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s-4) var(--split-gap);
  align-items: center; scroll-margin-top: var(--s-4);
}
.step + .step { margin-top: var(--s-6); }
.step:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); }
.step:nth-of-type(even) .step-media { order: 2; }
.step-media { aspect-ratio: 1.618 / 1; }
.step-head { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-2); }
.step-text h2 { margin-bottom: var(--s-3); }
.step-text p { max-width: 30em; }
.step-text .link-arrow { margin-top: var(--s-2); }

/* ---------- tablet ---------- */
@media (max-width: 999px) {
  .hero, .step, .step:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
  .step:nth-of-type(even) .step-media { order: 0; }
  .hero { padding-top: var(--s-4); }
  .hero-text { max-width: 34em; }
}

/* ---------- mobile ---------- */
@media (max-width: 759px) {
  .closing-aside .btn { width: 100%; } /* the last action, full width like the first */
  .hero .lede { margin-bottom: var(--s-4); }
  .hero .actions .btn { flex: 1 1 auto; }
  .promises { grid-template-columns: minmax(0, 1fr); padding: var(--s-4) 0; }
  .promises li { padding-block: var(--s-3); font-size: var(--t-2); }
  .promises li + li::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
  .process-index { display: none; }
  .step + .step { margin-top: var(--s-5); }
  /* one tile size: the bundles stay square, two across (the shared odd-count rule would widen the first) */
  .grid[data-odd] > .card:first-child { grid-column: auto; }
  .grid[data-odd] > .card:first-child .card-media { aspect-ratio: 1 / 1; }
  .grid[data-odd] > .card:first-child .card-media img { object-fit: cover; }
}