/* ==========================================================================
   pages.css — thin page-level compositions only. Structure lives in layout.css
   and components.css; this file just arranges them per page.
   ========================================================================== */

/* ---- Home hero (7/5 split) -------------------------------------------- */
.home-hero {
  padding-block: var(--space-section) var(--space-7);
}

/* Home is content-dense (eight mandated sections). Tighten its vertical rhythm
   so the page stays close to the target length without cutting content. Padding
   only — this cannot affect horizontal overflow. */
.page-home .section { padding-block: var(--space-7); }
.page-home .home-hero { padding-block: var(--space-7); }
.page-home .section-head { margin-bottom: var(--space-6); }
.page-home .delivery-anatomy__roles,
.page-home .trust__bullets { margin-bottom: 0; }

.home-hero__thesis {
  max-width: 20ch;
}

.home-hero__lede {
  margin-top: var(--space-5);
  font-size: var(--text-body-long);
  color: var(--ink-muted);
  max-width: var(--measure-narrow);
}

.home-hero__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.home-hero__proof {
  margin-top: var(--space-5);
  font-size: var(--text-meta);
  color: var(--ink-muted);
}

/* ---- Section headers --------------------------------------------------- */
.section-head {
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure);
  margin-bottom: var(--space-7);
}

/* ---- Services groups (Understand / Design / Partner) ------------------- */
.services-group {
  display: grid;
  gap: var(--space-5);
}

.services-group + .services-group {
  margin-top: var(--space-8);
}

.services-group__tiers {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .services-group__tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Method sections --------------------------------------------------- */
.method-section {
  display: grid;
  gap: var(--space-5);
}

.method-section + .method-section {
  margin-top: var(--space-8);
}

/* ---- About leads ------------------------------------------------------- */
.about-leads {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .about-leads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.about-lead {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--paper-raised);
}

.about-lead__emblem {
  width: 64px;
  height: 64px;
}

.about-lead__title {
  font-size: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--copper-600);
}

/* ---- 404 (batch-06 layout) -------------------------------------------- *
   Big Fraunces "404" + "This path stops here." with the site-boundary SVG.  */
.error-404 {
  min-height: 60vh;
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-section);
}

@media (min-width: 768px) {
  .error-404 {
    grid-template-columns: 7fr 5fr;
  }
}

.error-404__code {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  line-height: 0.9;
  color: var(--moss-950);
}

.error-404__message {
  font-size: var(--text-h2);
  margin-top: var(--space-3);
}

.error-404__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.error-404__art {
  width: 100%;
  height: auto;
}

/* ---- Reveal-on-scroll base (JS-driven) -------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-reveal) var(--ease-out),
      transform var(--dur-reveal) var(--ease-out);
  }
  html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Phase 3 template additions — page-level compositions.
   ========================================================================== */

/* ---- Section head intro ------------------------------------------------ */
.section-head__intro { font-size: var(--text-body-long); color: var(--ink-muted); }

/* ---- Home hero columns ------------------------------------------------- */
.home-hero__ledger { align-self: center; }

/* ---- Stepline (numbered vertical steps) ------------------------------- */
.stepline { display: grid; gap: var(--space-5); }
.stepline__step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.stepline__num { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--copper-600); font-size: var(--text-h3); line-height: 1; }
.stepline__title { font-family: var(--font-ui); }

/* ---- Service detail hero ---------------------------------------------- */
.service-hero__problem { margin-top: var(--space-4); color: var(--ink-muted); max-width: var(--measure-narrow); }
.service-hero__summary { margin-top: var(--space-4); font-size: var(--text-body-long); color: var(--ink-muted); max-width: var(--measure-narrow); }
.service-hero__meta { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.service-hero__fee { font-size: var(--text-meta); color: var(--ink-muted); }

/* ---- Comparison table (scrolls inside its own container) -------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 42rem; }
.compare-table th, .compare-table td { text-align: left; padding: var(--space-4); border-bottom: 1px solid var(--line); font-size: var(--text-meta); vertical-align: top; }
.compare-table thead th { color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.compare-table tbody th { font-weight: var(--weight-semibold); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table__note { margin-top: var(--space-3); font-size: var(--text-meta); color: var(--ink-muted); }

/* ---- How It Works correction quote ------------------------------------ */
.correction-quote { font-family: var(--font-display); font-size: var(--text-h3); color: var(--ink); margin-block: var(--space-4); padding-left: var(--space-5); border-left: 3px solid var(--copper-600); }

/* ---- Method source cards ---------------------------------------------- */
.source-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.source-card { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background-color: var(--paper-raised); }
.source-card__title { font-family: var(--font-display); }
.source-card__meta { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.source-card__meta dt { font-size: var(--text-meta); text-transform: uppercase; letter-spacing: 0.05em; color: var(--copper-600); }
.source-card__meta dd { color: var(--ink-muted); font-size: var(--text-meta); }

/* ---- About origin ------------------------------------------------------ */
.about-origin__mark { width: 100%; max-width: 220px; height: auto; }
.origin-logic { margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.origin-logic dt { font-family: var(--font-display); font-size: var(--text-h3); color: var(--copper-600); }
.origin-logic dd { color: var(--ink-muted); }

/* ---- Case fixture layout ---------------------------------------------- */
.fixture-page .site-header { position: static; }
.case-fixture__layout { display: grid; gap: var(--space-6); padding-bottom: var(--space-section); }
@media (min-width: 900px) { .case-fixture__layout { grid-template-columns: 15rem 1fr; gap: var(--space-8); } }
.case-chapter { scroll-margin-top: 88px; display: grid; gap: var(--space-4); }

/* ---- Client portal states --------------------------------------------- */
.portal-state { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 900px) {
  .portal-state { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .portal-state--reverse .portal-state__media { order: 2; }
}

/* ---- D2 page-level compositions --------------------------------------- */
/* How It Works — concrete specimen flow line + selected-engagements note. */
.flow-line { font-family: var(--font-display); font-size: var(--text-h3); color: var(--ink); margin-bottom: var(--space-6); }
.engagements-note { margin-top: var(--space-4); font-size: var(--text-meta); color: var(--ink-muted); font-weight: var(--weight-medium); }
.method-distinguish { margin-top: var(--space-4); font-family: var(--font-display); font-size: var(--text-h3); color: var(--ink); }

/* About — concrete value example + Studio OS line. */
.about-lead__value { margin-top: var(--space-3); padding-left: var(--space-4); border-left: 3px solid var(--copper-600); color: var(--ink-muted); font-size: var(--text-meta); }
.about-os { margin-top: var(--space-4); font-family: var(--font-display); font-size: var(--text-h3); color: var(--ink); }

/* Client portal — 3 moments + review-room flow. */
.portal-moment__cards { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .portal-moment__cards { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } }
.review-room-flow__fixture { position: relative; padding-top: var(--space-8); }

/* ---- Legal pages ------------------------------------------------------- */
.legal { display: grid; gap: var(--space-5); }
.legal__updated { color: var(--ink-muted); font-size: var(--text-meta); }
.legal__section { display: grid; gap: var(--space-3); }
.legal__section h2 { font-size: var(--text-h3); font-family: var(--font-display); }