/* ==========================================================================
   FIRSTPEAK STUDIO - HOMEPAGE (page-scoped)
   Loaded after /css/v2.css and /css/websites.css. Nothing here is used by
   another page, and neither shared stylesheet is touched.

   Doctrine, inherited from v2: content is readable with zero JavaScript,
   gold is a response and never decoration, one easing family throughout.
   Two lanes carry the page: BUILD (websites, granite) and REACH (media, bone).
   ========================================================================== */

/* ==========================================================================
   1. HERO additions (the video hero markup itself is unchanged)
   ========================================================================== */

/* The new H1 is a full sentence, not a four-word slogan, so it needs a wider
   measure and a smaller top end than the v2 default. */
.hero--bleed .hero__headline {
  max-width: 21ch;
  font-size: clamp(2rem, 4.5vw, 3.9rem);
  line-height: 1.04;
}

/* Credibility strip. Four plain facts, no vanity metrics. Each item carries
   its own marker rather than a divider between items, so a wrapped line never
   opens with an orphaned rule. */
.hero__cred {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 1.7rem;
  margin-top: clamp(1.5rem, 3vh, 2.1rem);
  padding-top: 1rem;
  border-top: 1px solid rgba(242, 238, 230, 0.2);
}
.hero__cred li {
  position: relative;
  padding-left: 0.95rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.74rem; line-height: 1.4;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: rgba(242, 238, 230, 0.84);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}
.hero__cred li::before {
  content: ""; position: absolute; left: 0; top: 0.44em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

/* The strip and the microcopy are not part of the GSAP intro timeline (that
   timeline is owned by v2.js and left alone). The hero gate hides every direct
   child of .hero__overlay while html.hero-armed is set, so these two simply
   fade up the moment the gate is released. Under reduced motion, or with no
   JS at all, the class is never added and they are visible from first paint. */
html:not(.hero-armed) .hero__cred,
html:not(.hero-armed) .hero--bleed .hero__micro {
  animation: heroLift 700ms var(--ease) both;
}
@keyframes heroLift {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.hero-armed) .hero__cred,
  html:not(.hero-armed) .hero--bleed .hero__micro { animation: none; }
}

/* ==========================================================================
   2. Shared micro-utilities used across the folio
   ========================================================================== */

/* CTA microcopy. One wording, used under every primary button on the page. */
.micro {
  margin-top: 0.9rem;
  font-size: 0.83rem; line-height: 1.55;
  color: rgba(242, 238, 230, 0.62);
  max-width: 48ch;
}
.micro--bone { color: var(--slate); }
.hero--bleed .hero__micro { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); }

/* Section heading used by every page-scoped band below. */
.band-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.65rem);
  letter-spacing: -0.015em; line-height: 1.1;
  max-width: 22ch;
}
.band-h em { font-style: normal; color: var(--gold); }
.fork .band-h em, .ledger .band-h em, .reach2 .band-h em { color: var(--gold-deep); }
.band-deck {
  font-family: var(--font-serif); font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.62; margin-top: 1.1rem; max-width: 54ch;
  color: rgba(242, 238, 230, 0.78);
}
.band-deck--bone { color: var(--slate); }

/* A gold-ruled arrow link, used on the fork cards and the band CTAs. */
.golink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold);
  transition: gap var(--t-fast) var(--ease), color var(--t-fast);
}
.golink--bone { color: var(--gold-deep); }
.golink:hover { gap: 0.85rem; color: var(--gold-bright); }
.golink--bone:hover { color: var(--granite); }

/* ==========================================================================
   3. THE FORK (bone) - a two-lane diagnostic that routes and self-qualifies
   ========================================================================== */
.fork { background: var(--bone); color: var(--granite); }
.fork__inner {
  padding-top: clamp(4.5rem, 10vh, 7.5rem);
  padding-bottom: clamp(4.5rem, 10vh, 7.5rem);
}
.fork .band-h { color: var(--granite); }

.fork__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.2vw, 1.7rem);
  margin-top: clamp(2.4rem, 5vh, 3.4rem);
  align-items: stretch;
}
.fork__card {
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  border: 1px solid var(--hairline-light); border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  transition: transform var(--t-med) var(--ease),
              border-color var(--t-fast), box-shadow var(--t-med) var(--ease);
}
.fork__card:hover {
  transform: translateY(-4px);
  border-color: rgba(216, 154, 69, 0.62);
  box-shadow: 0 22px 50px -28px rgba(34, 38, 45, 0.4);
}
.fork__card:focus-within {
  border-color: var(--gold-deep);
  box-shadow: 0 22px 50px -28px rgba(34, 38, 45, 0.4);
}
.fork__no {
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep);
}
.fork__say {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.08rem, 1.7vw, 1.3rem); line-height: 1.42;
  color: var(--granite); margin: 0.9rem 0 0;
}
.fork__then {
  margin-top: 1.1rem; padding-top: 0.9rem;
  border-top: 1px solid var(--hairline-light);
  font-size: 0.93rem; line-height: 1.6; color: var(--slate);
}
.fork__then b { font-family: var(--font-display); font-weight: 700; color: var(--granite); }
.fork__go { margin-top: auto; padding-top: 1.3rem; }
/* Card-wide hit area, so the whole panel is clickable but only one link
   lands in the tab order. */
.fork__go a::after { content: ""; position: absolute; inset: 0; }
.fork__card { position: relative; }

.fork__close {
  margin-top: clamp(2rem, 4vh, 2.8rem);
  padding-top: 1.4rem; border-top: 1px solid var(--hairline-light);
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.6;
  color: var(--granite); max-width: 56ch;
}

/* ==========================================================================
   4. THE LADDER - three tiers plus the Flagship anchor
   Reuses .web-tiers / .tier from websites.css; only the additions live here.
   ========================================================================== */
.web-tiers--home { background: var(--granite-deep); }

/* Every tier states what it does not include. That single line is what makes
   an owner self-select upward without being sold. */
.tier__not {
  margin-top: 1rem; margin-bottom: 1.2rem;
  font-size: 0.85rem; line-height: 1.55;
  color: rgba(242, 238, 230, 0.55);
}
.tier__not b {
  display: block; margin-bottom: 0.2rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242, 238, 230, 0.42);
}
.tier__cta { margin-top: 1.1rem; align-self: flex-start; }
.tier--home .tier__for { min-height: 0; }

/* Center-stage the $5,000 tier. On desktop it breaks the shared top and bottom
   edge of the row, which is what makes it read as the recommended one without
   another badge doing the talking. */
@media (min-width: 861px) {
  .web-tiers--home .tier--featured {
    margin-block: -1rem;
    padding-block: calc(clamp(1.5rem, 2.2vw, 2rem) + 1rem);
  }
}

/* The $10,000 engagement is not a fourth column. It is an anchor, presented
   on its own below the ladder. */
.anchor {
  position: relative;
  margin-top: clamp(2.2rem, 5vh, 3.2rem);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid rgba(216, 154, 69, 0.45); border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(216, 154, 69, 0.11), rgba(216, 154, 69, 0.02)),
    var(--granite);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.8);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 3.5vw, 3.2rem);
}
.anchor__lede { display: flex; flex-direction: column; }
.anchor__flag {
  display: inline-block; align-self: flex-start; margin-bottom: 0.9rem;
  padding: 0.3rem 0.8rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--granite-deep); background: var(--gold);
}
.anchor__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.02em; color: var(--gold-bright);
}
.anchor__price {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(2rem, 3.6vw, 3rem); color: var(--bone); margin: 0.4rem 0 0;
}
.anchor__price .num { color: var(--gold); }
.anchor__for {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.45;
  color: rgba(242, 238, 230, 0.86); margin-top: 0.9rem;
}
.anchor__who {
  margin-top: 1rem; font-size: 0.93rem; line-height: 1.65;
  color: rgba(242, 238, 230, 0.7);
}
.anchor__list { display: grid; gap: 0.6rem; }
.anchor__list li {
  position: relative; padding-left: 1.4rem;
  font-size: 0.93rem; line-height: 1.55; color: rgba(242, 238, 230, 0.85);
}
.anchor__list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold); opacity: 0.9;
}
.anchor__foot {
  margin-top: auto; padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
}
.anchor__time {
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  color: rgba(242, 238, 230, 0.8);
}
.anchor__time span {
  display: block; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright);
  margin-bottom: 0.25rem;
}
.anchor__not {
  margin-top: 1.1rem; font-size: 0.85rem; line-height: 1.55;
  color: rgba(242, 238, 230, 0.55);
}
.anchor__not b {
  display: block; margin-bottom: 0.2rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242, 238, 230, 0.42);
}

/* The floor that ships in all four, and the ownership line. Two facts that
   apply to every tier, so they sit outside the grid. */
.floor {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: clamp(2.4rem, 5vh, 3.4rem);
  padding-top: clamp(1.8rem, 4vh, 2.6rem);
  border-top: 1px solid var(--hairline-dark);
}
.floor__h {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; color: var(--bone); margin-bottom: 0.45rem;
}
.floor__p { font-size: 0.93rem; line-height: 1.7; color: rgba(242, 238, 230, 0.72); }
.floor__p em { font-style: normal; color: var(--gold-bright); }
.web-tiers__foot {
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem;
  font-size: 0.9rem; color: rgba(242, 238, 230, 0.62);
}

/* ==========================================================================
   5. REACH IN ONE SCREEN (bone) - what I run beside what I place
   ========================================================================== */
.reach2 { background: var(--bone); color: var(--granite); }
.reach2__inner {
  padding-top: clamp(4.5rem, 10vh, 7.5rem);
  padding-bottom: clamp(4.5rem, 10vh, 7.5rem);
}
.reach2 .band-h { color: var(--granite); max-width: 26ch; }
.reach2__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  margin-top: clamp(2.4rem, 5vh, 3.4rem);
}
.reach2__col { border-top: 2px solid var(--granite); padding-top: 1.1rem; }
.reach2__col--place { border-top-color: var(--gold-deep); }
.reach2__kicker {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate);
}
.reach2__col--place .reach2__kicker { color: var(--gold-deep); }
.reach2__h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem); letter-spacing: -0.01em;
  margin: 0.5rem 0 0.75rem; color: var(--granite);
}
.reach2__sub {
  font-family: var(--font-serif); font-style: italic;
  font-size: 0.98rem; line-height: 1.55; color: var(--slate); margin-bottom: 1.2rem;
}
.reach2__list { display: grid; gap: 0.7rem; }
.reach2__list li {
  position: relative; padding-left: 1.35rem;
  font-size: 0.95rem; line-height: 1.6; color: #2c3038;
}
.reach2__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--slate);
}
.reach2__col--place .reach2__list li::before { background: var(--gold); }
.reach2__list b { font-weight: 600; color: var(--granite); }
.reach2__foot {
  margin-top: clamp(2rem, 4vh, 2.8rem);
  padding-top: 1.4rem; border-top: 1px solid var(--hairline-light);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem;
}
.reach2__price {
  font-family: var(--font-serif); font-size: 1rem; line-height: 1.6;
  color: var(--slate); max-width: 52ch;
}

/* ==========================================================================
   6. THE ADVANTAGE (granite) - the mechanism, then the platform panel
   ========================================================================== */
.adv { position: relative; overflow: hidden; background: var(--granite); color: var(--bone); }
.adv::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 70% at 82% 0%, rgba(216, 154, 69, 0.13), rgba(34, 38, 45, 0) 62%);
}
.adv__inner {
  position: relative;
  padding-top: clamp(4.5rem, 10vh, 7.5rem);
  padding-bottom: clamp(4.5rem, 10vh, 7.5rem);
}
/* An editorial spread: the claim and its caveat on the left, the mechanism
   itself on the right. Keeps the most persuasive band on the page from
   trailing off into an empty right half. */
.adv__top {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.adv__body { display: flex; flex-direction: column; gap: 1.1rem; max-width: 58ch; }
.adv__body p { font-size: 1.02rem; line-height: 1.75; color: rgba(242, 238, 230, 0.82); }
.adv__body strong { font-weight: 600; color: var(--bone); }
.adv__fine {
  margin-top: clamp(1.6rem, 3.5vh, 2.4rem); padding-left: 1rem;
  border-left: 2px solid rgba(216, 154, 69, 0.5);
  font-size: 0.9rem; line-height: 1.65; color: rgba(242, 238, 230, 0.6);
  max-width: 52ch;
}

/* The platform's record lives in its own container, in third person, and
   carries no claim about this studio. Kept visually separate on purpose. */
.platform {
  margin-top: clamp(2.4rem, 5vh, 3.4rem);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(216, 154, 69, 0.34); border-radius: 16px;
  background: var(--granite-deep);
  box-shadow: inset 0 1px 0 rgba(242, 238, 230, 0.05);
}
.platform__label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-bright);
}
.platform__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: 1.4rem;
}
.platform__cell { border-top: 1px solid rgba(216, 154, 69, 0.28); padding-top: 0.9rem; }
.platform__n {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -0.02em;
  color: var(--gold);
}
.platform__t {
  margin-top: 0.5rem; font-size: 0.88rem; line-height: 1.5;
  color: rgba(242, 238, 230, 0.72);
}
.platform__note {
  margin-top: 1.4rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(242, 238, 230, 0.1);
  font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.6;
  color: rgba(242, 238, 230, 0.6); max-width: 60ch;
}

/* The connective line sits OUTSIDE the panel. It is the only place the two
   records are allowed to touch. */
.adv__connect {
  margin-top: clamp(1.6rem, 3.5vh, 2.2rem);
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.9vw, 1.42rem); line-height: 1.5;
  color: var(--bone); max-width: 44ch;
}
.adv__connect em { font-style: italic; color: var(--gold); }
.adv__mine {
  margin-top: clamp(1.6rem, 3.5vh, 2.2rem);
  max-width: 62ch; font-size: 0.98rem; line-height: 1.75;
  color: rgba(242, 238, 230, 0.78);
}
.adv__mine a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.adv__mine a:hover { color: var(--gold-bright); }
.adv__cta { margin-top: clamp(1.6rem, 3.5vh, 2.2rem); }

/* ==========================================================================
   7. THE HONEST LEDGER (bone) - two literal columns
   ========================================================================== */
.ledger { background: var(--bone); color: var(--granite); }
.ledger__inner {
  padding-top: clamp(4.5rem, 10vh, 7.5rem);
  padding-bottom: clamp(4.5rem, 10vh, 7.5rem);
}
.ledger .band-h { color: var(--granite); }
.ledger__cols {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  margin-top: clamp(2.4rem, 5vh, 3.4rem);
}
.ledger__col { border-top: 2px solid var(--gold-deep); padding-top: 1.1rem; }
.ledger__col--no { border-top-color: var(--slate); }
.ledger__h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -0.01em;
  color: var(--granite); margin-bottom: 1rem;
}
.ledger__list { display: grid; gap: 0; }
.ledger__list li {
  position: relative; padding: 0.6rem 0 0.6rem 1.7rem;
  border-bottom: 1px solid var(--hairline-light);
  font-size: 0.95rem; line-height: 1.5; color: #2c3038;
}
.ledger__list li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 10px; height: 2px; background: var(--gold-deep);
}
.ledger__col--no .ledger__list li::before { background: var(--slate); }
.ledger__why {
  margin-top: 1.2rem; font-family: var(--font-serif);
  font-size: 0.98rem; line-height: 1.65; color: var(--slate);
}
.ledger__line {
  margin-top: clamp(2.2rem, 5vh, 3.2rem);
  padding-top: clamp(1.6rem, 3.5vh, 2.2rem);
  border-top: 1px solid var(--hairline-light);
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.4vw, 1.85rem); line-height: 1.42;
  color: var(--granite); max-width: 34ch;
}
.ledger__line em { font-style: italic; color: var(--gold-deep); }
.ledger__guarantee {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
}
.ledger__g {
  padding-top: 0.8rem; border-top: 1px solid var(--hairline-light);
  font-size: 0.92rem; line-height: 1.55; color: var(--slate);
}
.ledger__g b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 0.35rem;
}
.ledger__g--none b { color: var(--slate); }

/* ==========================================================================
   8. CLINT (granite deep) - first person, and no platform numbers in here
   ========================================================================== */
.clint { background: var(--granite-deep); color: var(--bone); }
.clint__inner {
  max-width: 48rem; margin-inline: auto;
  padding-top: clamp(4.5rem, 10vh, 7rem);
  padding-bottom: clamp(4.5rem, 10vh, 7rem);
}
.clint__label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
}
/* Owner photo: a warm circular portrait between the label and the prose.
   Gold hairline ring; sized so the section stays intimate, not a hero. */
.clint__photo {
  display: block; width: clamp(96px, 14vw, 132px); height: clamp(96px, 14vw, 132px);
  margin-top: 1.4rem; border-radius: 50%;
  object-fit: cover; object-position: center;
  border: 2px solid var(--gold);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}
.clint__prose { margin-top: 1.3rem; display: flex; flex-direction: column; gap: 1.1rem; }
.clint__prose p {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.7vw, 1.32rem); line-height: 1.66;
  color: rgba(242, 238, 230, 0.88);
}
.clint__prose em { font-style: italic; color: var(--gold-bright); }
.clint__sign {
  margin-top: clamp(1.6rem, 3.5vh, 2.2rem);
  padding-top: 1.2rem; border-top: 1px solid var(--hairline-dark);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem;
}
.clint__name {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.04em; color: var(--bone);
}
.clint__name span {
  display: block; font-weight: 500; font-size: 0.74rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242, 238, 230, 0.5); margin-top: 0.25rem;
}

/* ==========================================================================
   9. FAQ + 10. THE CLOSE (both reuse v2 components)
   ========================================================================== */
/* The FAQ plate needs no background of its own: body is already granite, and
   .plate--faq in v2.css carries the accordion chrome. */
.cover--home .cover__heading {
  font-size: clamp(1.9rem, 3.8vw, 3.1rem);
  max-width: 24ch; margin-inline: auto; letter-spacing: -0.02em;
}
.cover--home .micro { margin-inline: auto; text-align: center; color: rgba(242, 238, 230, 0.75); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .anchor { grid-template-columns: 1fr; }
  .anchor__foot { margin-top: 1.6rem; }
  .adv__top { grid-template-columns: 1fr; }
  .adv__body { max-width: 62ch; }
  .ledger__cols { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .fork__grid { grid-template-columns: 1fr; }
  .reach2__grid { grid-template-columns: 1fr; }
  .floor { grid-template-columns: 1fr; }
  .platform__stats { grid-template-columns: 1fr; gap: 1.1rem; }
  .ledger__guarantee { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero__cred li { padding: 0 0.75rem; font-size: 0.68rem; letter-spacing: 0.09em; }
  .anchor__foot { gap: 1rem; }
}

/* Reach cards: a header image atop each column (imagery pass, 2026-08).
   The columns are open (border-top, no side padding), so the image sits
   full-width under the rule rather than bleeding out of a padded card. */
.reach2__img {
  width: 100%; height: auto; aspect-ratio: 21 / 10; object-fit: cover;
  display: block; border-radius: 6px;
  margin: 0.2rem 0 1.1rem;
  box-shadow: 0 10px 32px rgba(34, 38, 45, 0.16);
}