/* ==========================================================================
   Layout - containers, sections, the chevron/diagonal geometry, utilities
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-wide); /* match the hero/header so content aligns */
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }
.container--reading { max-width: var(--measure); }

/* --- Sections --------------------------------------------------------- */
/* Bottom padding is optically heavier than top so sections settle. */
.section { position: relative; padding-top: var(--section-pt); padding-bottom: var(--section-pb); }
.section--tight  { padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--ink    { background: var(--c-bg-dark);   color: var(--c-text-invert); }
.section--black  { background: var(--c-bg-darker); color: var(--c-text-invert); }
.section--alt    { background: var(--c-bg-alt); }
.section--green  { background: var(--c-green); color: var(--c-ink); }

.section--ink p, .section--black p { color: rgba(255,255,255,.82); }
.section--ink .lead, .section--black .lead { color: rgba(255,255,255,.9); }

/* --- The diagonal / chevron cut --------------------------------------- */
/* A section can carry an angled top or bottom edge that echoes the logo
   peaks. Implemented with clip-path so it works over any background/photo. */
.cut-top    { clip-path: polygon(0 var(--diagonal-h), 100% 0, 100% 100%, 0 100%); }
.cut-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diagonal-h)), 0 100%); }
.cut-both   { clip-path: polygon(0 var(--diagonal-h), 100% 0, 100% calc(100% - var(--diagonal-h)), 0 100%); }
/* Mirror the angle (peak pointing the other way) */
.cut-top--rev    { clip-path: polygon(0 0, 100% var(--diagonal-h), 100% 100%, 0 100%); }
.cut-bottom--rev { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--diagonal-h))); }

/* Pull a following section up so the diagonal overlaps cleanly */
.section + .cut-top,
.section + .cut-top--rev { margin-top: calc(var(--diagonal-h) * -1); }

/* --- Chevron-clipped media frame -------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.frame--notch    { border-radius: 0; clip-path: var(--clip-frame-tl); }
.frame--notch-br { border-radius: 0; clip-path: var(--clip-frame-br); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }

/* Brand corner wedges - faded green diagonals top-right + bottom-left, echoing
   the placeholder treatment so real photography keeps the same signature.
   Proportions match placeholder-*.svg; the gradient fade keeps them subtle
   over busy photos. */
.frame::before,
.frame::after {
  content: ""; position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
}
.frame::before {
  background: linear-gradient(225deg, rgba(112,212,75,.42) 0%, rgba(112,212,75,0) 58%);
  clip-path: polygon(70% 0, 100% 0, 100% 50%);
}
.frame::after {
  background: linear-gradient(45deg, rgba(112,212,75,.30) 0%, rgba(112,212,75,0) 58%);
  clip-path: polygon(0 55%, 0 100%, 32% 100%);
}
/* Linked media gets a restrained zoom on hover/focus (parent card opts in). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .has-media-zoom:hover .frame img,
  .has-media-zoom:focus-within .frame img,
  a.frame:hover img,
  a.frame:focus-visible img { transform: scale(1.045); }
}
.frame--tall   { aspect-ratio: 3 / 4; }
.frame--square { aspect-ratio: 1 / 1; }
.frame--wide   { aspect-ratio: 16 / 10; }
.frame--hero   { aspect-ratio: 16 / 9; }

/* Green peak accent that can sit on a corner of any framed media */
.peak-accent {
  position: absolute;
  width: clamp(56px, 8vw, 120px);
  aspect-ratio: 1;
  background: var(--c-green);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  z-index: 2;
  pointer-events: none;
}
.peak-accent--tr { top: 0; right: 0; transform: translate(15%, -15%); }
.peak-accent--bl { bottom: 0; left: 0; transform: rotate(180deg) translate(15%, -15%); }

/* --- Grid helpers ----------------------------------------------------- */
.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* Split layout for text + media (asymmetric by default - 7/5, not 50/50) */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 5.5rem);
  align-items: center;
  grid-template-columns: 1.15fr .85fr;
}
.split--media-first { grid-template-columns: .85fr 1.15fr; }
.split--media-first .split__media { order: -1; }

/* Editorial: a sticky heading rail on the left, stacked content on the right.
   Replaces stacked equal-card grids for "list of truths" sections. */
.grid--editorial {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 1rem + 4vw, 6rem);
  align-items: start;
}
.grid--editorial > .rail { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }

/* Feature pair: one emphasised block + supporting column. */
.grid--feature {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: start;
}

/* 4-up (stats) steps down to 2 before collapsing - avoids a tall lonely column. */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .grid--2, .grid--3, .split, .split--media-first,
  .grid--editorial, .grid--feature { grid-template-columns: 1fr; }
  .split--media-first .split__media { order: 0; }
  .grid--editorial > .rail { position: static; }
}
@media (max-width: 540px) {
  .grid--4 { grid-template-columns: 1fr; }
}

/* Anchored headings clear the fixed header. */
.h-section, .h-3 { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* --- In-page section nav (built by JS on long pages, desktop only) ----- */
.section-nav {
  position: fixed; right: clamp(1rem, 1.5vw, 2rem); top: 50%; transform: translateY(-50%);
  z-index: 60; display: none;
}
@media (min-width: 1200px) { .section-nav { display: block; } }
.section-nav ul { display: grid; gap: .15rem; }
.section-nav a {
  display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
  padding: .35rem 0; color: var(--c-grey-400);
}
.section-nav__dash {
  width: 16px; height: 2px; background: currentColor; flex: none; opacity: .6;
  transition: width var(--dur) var(--ease-out), background var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.section-nav__label {
  order: -1;
  font-size: .72rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  background: var(--c-ink); color: var(--c-white);
  padding: .3em .7em; border-radius: var(--radius-pill);
  opacity: 0; transform: translateX(6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  pointer-events: none;
}
.section-nav a:hover .section-nav__label,
.section-nav a:focus-visible .section-nav__label,
.section-nav a.is-active .section-nav__label { opacity: 1; transform: none; }
.section-nav a:hover .section-nav__dash,
.section-nav a.is-active .section-nav__dash { width: 26px; background: var(--c-green-text); opacity: 1; }
.section-nav a.is-active { color: var(--c-ink); }

/* --- Flow & rhythm ---------------------------------------------------- */
.flow > * + * { margin-top: var(--sp-4); }
.flow-lg > * + * { margin-top: var(--sp-6); }

.stack-center { display: grid; justify-items: center; text-align: center; }

/* --- Utilities -------------------------------------------------------- */
/* Eyebrow is a clean tracked label - the triangle marker that used to sit on
   every one is gone (the chevron now does fewer, more confident jobs). A short
   green rule reads as a kicker without repeating the logo shape everywhere. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-300);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-green-text);
}
.section--ink .eyebrow, .section--black .eyebrow { color: var(--c-green); }
.section--green .eyebrow, .footer-cta .eyebrow { color: var(--c-ink); }
.eyebrow::before {
  content: "";
  width: 1.6em; height: 2px;
  background: currentColor;
  flex: none;
}
/* Centred eyebrows: the single leading dash reads as broken, so give the rule
   a matching trailing dash (—— TEXT ——) which is balanced and deliberate. */
.cta-band .eyebrow::after,
.quote-band .eyebrow::after,
.footer-cta .eyebrow::after,
.text-center .eyebrow::after,
.stack-center .eyebrow::after,
.statement-band--center .eyebrow::after {
  content: "";
  width: 1.6em; height: 2px;
  background: currentColor;
  flex: none;
}

/* Lead: large body that carries hierarchy so kickers aren't needed. */
.lead {
  font-size: var(--fs-500);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-medium);
  color: var(--c-text);
  max-width: 56ch;
  text-wrap: pretty;
}
.lead--tight { max-width: 40ch; text-wrap: balance; }
.lead--prose { max-width: var(--measure); line-height: var(--lh-normal); letter-spacing: 0; color: var(--c-text-muted); text-wrap: pretty; }
.section--ink .lead, .section--black .lead { color: rgba(255,255,255,.92); }
.section--ink .lead--prose, .section--black .lead--prose { color: rgba(255,255,255,.78); }

.measure { max-width: var(--measure); }

/* Accent (highlighted) word - readable green on light, vibrant green on dark,
   ink on a green surface. */
.accent { color: var(--c-green-text); }
.section--ink .accent, .section--black .accent,
.hero .accent, .quote-band .accent { color: var(--c-green); }
.section--green .accent, .footer-cta .accent { color: var(--c-ink); }
.text-center { text-align: center; }
.text-center p, .text-center .lead { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.muted { color: var(--c-text-muted); }
.green { color: var(--c-green-text); }

/* Scroll reveal - only gated when JS is present, so content is visible by
   default for no-JS, search engines, and headless renderers. Subtle by design:
   a short lift + fade, nothing cinematic. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}