/* ==========================================================================
   HOME — layout that only the home page uses. Loads after components.css.
   Anything here that a second page ends up needing should move to
   components.css rather than being copied.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   Copy left and deliberately wider than the portrait column; the cut-out sits
   straight on the section background with no panel behind it. On mobile the
   portrait comes first via `order` — a visual reorder only, so the H1 still
   leads the DOM for search engines and screen readers.
   ========================================================================== */

/* The .hero backdrop (gradient + grain) now lives in components.css, because
   the INSIGHTS page uses the same background. Only the home page's own
   two-column arrangement stays below. */

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(var(--sp-4), 4vw, var(--sp-6));
  align-items: center;
}

@media (max-width: 899px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .hero__figure { order: -1; }
}

.hero__copy { display: flex; flex-direction: column; gap: var(--sp-4); }

/* The one coloured phrase in the headline. */
.hero__hl { color: var(--burgundy); }

.hero__subhead {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  max-width: 46ch;
}

.hero .btn-row { margin-top: var(--sp-1); }

/* ---- Portrait ----------------------------------------------------------
   Sized by height, not width, so it stays comfortably taller than the copy
   block beside it at every breakpoint. max-width:none is deliberate: the
   global img rule would otherwise cap it to the grid column and quietly
   shrink it below the intended height. */

.hero__figure {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.hero__img {
  display: block;
  width: auto;
  max-width: none;
  /* Sized by height, not width, so it stays taller than the copy beside it.
     max-width:none is deliberate: the global img rule would otherwise cap it
     to the grid column and quietly shrink it below the intended height. */
  height: calc(clamp(400px, 44vw, 600px) + var(--hero-pad));
  object-fit: contain;
}

/* Desktop: drop the portrait to the section's bottom edge so the trust band
   crops her instead of the gradient — she reads as standing behind it. The
   negative margin is exactly the hero's own bottom padding, and the height
   above adds the same amount back, so her head stays put. */
@media (min-width: 900px) {
  .hero__grid { align-items: center; }
  .hero__figure {
    align-self: end;
    margin-bottom: calc(var(--hero-pad) * -1);
  }
}

/* Mobile puts the portrait above the copy, where there is no band to emerge
   from — so no negative margin, and no extra height. */
@media (max-width: 899px) {
  .hero__img { height: clamp(320px, 62vw, 460px); }
}
@media (max-width: 479px) {
  .hero__img { height: 300px; }
}

/* ==========================================================================
   2. PROBLEM
   Short-beat copy and the photo share a row and match heights; the resolution
   paragraphs run full width underneath, with the CTA centred on the section.
   ========================================================================== */

.problem__top {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(var(--sp-4), 4vw, var(--sp-6));
  align-items: stretch;
}
@media (max-width: 899px) {
  .problem__top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}

.problem__copy { display: flex; flex-direction: column; gap: var(--sp-4); }
.problem__copy h2 { max-width: 18ch; }

/* Styled as an H4 but left as a paragraph — it is a beat in the copy, not a
   section title, and promoting it would put an h4 under an h2 with no h3. */
.problem__turn {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--burgundy);
}

/* Fills the row height so both columns end level. */
/* The photo must match the copy column's height, not set it. Left in flow, a
   portrait source resolves to its intrinsic height at this column width
   (~680px), which made it the tallest item and left a gap under the copy.
   Absolute positioning removes it from height calculation entirely, so the
   row is sized by the copy and the photo stretches to fit. */
.problem__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream);
  min-height: 320px;
}
.problem__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;   /* keeps the laptop screen in frame */
}

/* Single column: nothing to match, so the box needs its own height. */
@media (max-width: 899px) {
  .problem__media { min-height: 380px; }
}

.problem__cta { margin-top: var(--sp-5); }

/* ---- Short-beat copy ---------------------------------------------------
   Each beat is its own paragraph with a tight gap so the rhythm survives,
   instead of one block held together with <br> tags. */

.beats { display: flex; flex-direction: column; gap: var(--sp-1); max-width: 58ch; }
.beats p { margin: 0; }
.beats p + p { margin-top: 0; }
.beats .beat--break { margin-top: var(--sp-3); }
.beats strong { color: var(--charcoal); }
.beats em { font-style: italic; }

/* ==========================================================================
   3. WHY ME
   ========================================================================== */

.why__head { text-align: center; }
.why__head h2 { max-width: 24ch; margin-inline: auto; }
.why__sub {
  margin-top: var(--sp-3);
  margin-inline: auto;
  max-width: 50ch;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--burgundy);
}

.why__cards { margin-top: var(--sp-6); }

.why__closing {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  text-align: center;
}

/* ==========================================================================
   4. OFFERS
   ========================================================================== */

.offers__head { text-align: center; }
.offers__head h2 { max-width: 22ch; margin-inline: auto; }
.offers__head .lede { max-width: 60ch; margin-inline: auto; }

.offers__footnote {
  margin-top: var(--sp-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.offers__footnote h3 { max-width: 22ch; }

/* ==========================================================================
   5. INSIGHTS BAND
   Background is sampled from the diagram artwork itself (#FDFAF6) so the
   image sits on the page with no visible edge.
   ========================================================================== */

.insights-band { background: #FDFAF6; }

.insights-band__head { text-align: center; }
.insights-band__head h2 { max-width: 24ch; margin-inline: auto; }
/* Subheading treatment, matching .why__sub — the section's one-line premise,
   sitting a step below the H2 rather than reading as body copy. */
.insights-band__sub {
  margin-top: var(--sp-3);
  margin-inline: auto;
  max-width: 54ch;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--burgundy);
}
.insights-band__sub strong { font-weight: var(--fw-semibold); }

.insights-band__body {
  margin-top: var(--sp-5);
  margin-inline: auto;
  max-width: 66ch;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.insights-band__body > p + p { margin-top: 0; }
/* Lede size, full-strength ink. */
.insights-band__body p { font-size: var(--fs-body-lg); color: var(--text); }

/* The artwork used to carry ~31% of its own height as empty space above the
   step cards, which read as a ~290px hole under the subheading. That space is
   cropped out of the file itself rather than pulled back with a negative
   margin: the plate is opaque, so any overlap would have painted over the
   copy. What is left here is the breathing room we actually want. */
.insights-band__figure { margin-top: var(--sp-5); }
.insights-band__figure img { width: 100%; border-radius: var(--radius-lg); }

.insights-band__cta { margin-top: var(--sp-5); }

/* ==========================================================================
   6. TESTIMONIALS  —  7. WORK
   Both use shared components; only the section heads need constraining.
   ========================================================================== */

.section-head h2 { max-width: 20ch; }
.section-head--center h2 { margin-inline: auto; }

/* ==========================================================================
   8. DOWNSTREAM SERVICES
   ========================================================================== */

.downstream__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-4), 5vw, var(--sp-7));
  align-items: stretch;   /* both columns run the full row height */
}
@media (max-width: 899px) {
  .downstream__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}

.downstream__copy h2 { max-width: 16ch; }

/* Spreads the three disclosures over the height of the taller column so the
   two sides finish level instead of the list stopping short. */
.downstream__grid .accordion {
  height: 100%;
  justify-content: space-between;
}

.downstream__cta { margin-top: var(--sp-6); }

/* ==========================================================================
   9. ABOUT PREVIEW
   Photo left and given more of the row than before, so it holds its own
   against the copy. Collapses to photo-then-copy on mobile, which is already
   the DOM order here.
   ========================================================================== */

.about-preview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(var(--sp-4), 5vw, var(--sp-6));
  align-items: center;
}
@media (max-width: 899px) {
  .about-preview__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}

.about-preview__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream);
}
.about-preview__media img { width: 100%; height: auto; display: block; }

.about-preview__copy { display: flex; flex-direction: column; gap: var(--sp-3); }
.about-preview__copy > p + p { margin-top: 0; }
.about-preview__copy p { color: var(--text-muted); max-width: 58ch; }
.about-preview__copy strong { color: var(--charcoal); }

/* ==========================================================================
   10. PROCESS SECTION HEAD
   ========================================================================== */

.process-head { text-align: center; }
.process-head h2 { max-width: 22ch; margin-inline: auto; }
.process-head .hl { color: var(--burgundy); }
.process-wrap { margin-top: var(--sp-6); }
.process-cta { margin-top: var(--sp-6); }

/* ---- Collapsing secondary stack -----------------------------------------
   Closed, the three secondary offers sit stacked beside the signature card
   exactly as they always have. Open one and it takes the whole column: the
   two shut cards are pulled out of flow and the open card stretches to the
   signature card's height, so the section keeps its two-column shape instead
   of growing a long tail on the right. Closing it puts all three back.

   .has-open is set by initStackCollapse in main.js. Without JS the class is
   never added, so every card stays visible and every panel stays open. */

.offer-stack.has-open .offer-card:not(.is-open) { display: none; }

/* align-self overrides the grid's align-items:start for this one item, which
   is what lets the column fill the row rather than shrink-wrap the card. */
.offer-stack.has-open {
  align-self: stretch;
  height: 100%;
}

.offer-stack.has-open .offer-card.is-open { flex: 1 1 auto; }

/* Height has to be handed down the whole panel chain or the body stops at
   its own content and the card fills with empty white below it. */
.offer-stack.has-open .offer-card.is-open .offer-card__panel { flex: 1 1 auto; }
.offer-stack.has-open .offer-card.is-open .offer-card__body { height: 100%; }

/* With the extra height to spend, the CTA drops to the bottom edge the way
   the signature card's does, instead of floating mid-card. */
.offer-stack.has-open .offer-card.is-open .offer-card__body .btn { margin-top: auto; }

/* One column below the layout breakpoint: nothing to match heights with, so
   the collapse is switched off and all three cards stay listed. */
@media (max-width: 899px) {
  .offer-stack.has-open .offer-card:not(.is-open) { display: flex; }
  .offer-stack.has-open { align-self: start; height: auto; }
  .offer-stack.has-open .offer-card.is-open .offer-card__body .btn { margin-top: var(--sp-1); }
}