/* ═══ the read ═════════════════════════════════════════════════════════
   Everything after the film. The film is the page's one bold move, so this
   half is deliberately quiet: no pinning, no hijack, no second cinematic
   moment. It is where the visitor decides whether to believe any of it, so
   it is built to be read.

   Theme lock: the page switched to dark once, across the card run, and it
   stays dark from here to the footer. Nothing below flips back to cream.

   Depth here is ground shifts and hairlines, never shadow. A drop shadow on
   a dark ground reads as dirt.
   ══════════════════════════════════════════════════════════════════════ */

.wrap {
  width: min(100% - 2 * var(--gutter), 1360px);
  margin-inline: auto;
}

/* one entrance, one direction, one curve, used by every section below */
[data-reveal-item] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}
[data-reveal-item].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 720ms var(--ease-soft) calc(var(--i, 0) * 70ms),
    transform 720ms var(--ease-out) calc(var(--i, 0) * 70ms);
}

/* Photographs arrive through the noise front in gl/dissolve.js, which paints
   a canvas over the image and hands back to the <img> when it finishes. The
   image waits at 0 until then; on the cheap tier the shader is skipped and
   this short fade is the whole entrance. */
[data-dissolve] { opacity: 0; }
[data-dissolve].is-shown { opacity: 1; transition: opacity 200ms linear; }

/* Review stills land on the finished entrance. Without this a capture
   catches the stagger mid-flight and reads as "half the section is missing". */
body.is-still [data-reveal-item] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
body.is-still [data-dissolve] { opacity: 1 !important; }

/* ── proof ─────────────────────────────────────────────────────────────── */

.proof {
  background: var(--forest-deep);
  color: var(--sand);
  padding-block: 128px;
}

.proof__head { max-width: 34ch; }

.proof__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 1.6rem + 3vw, 64px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.proof__lede {
  margin-top: 16px;
  font-size: clamp(16px, 0.95rem + 0.4vw, 18px);
  font-weight: 300;
  line-height: 1.6;
  color: color-mix(in srgb, var(--sand) 74%, transparent);
}

.stats {
  margin: 64px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

/* Hairlines, not cards. One rule per column, none on the first, so the row
   reads as a single object divided rather than four boxes placed. */
.stat {
  padding: 32px 24px;
  border-left: 1px solid var(--outline-inverse);
}
.stat:first-child { border-left: 0; padding-left: 0; }

.stat__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sand) 62%, transparent);
}

.stat__value {
  margin: 16px 0 0;
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(40px, 2.4rem + 3vw, 88px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.stat__plus {
  font-size: 0.42em;
  color: var(--gold);
  margin-left: 4px;
}

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--outline-inverse); }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; padding-left: 0; }
  .stat + .stat { border-top: 1px solid var(--outline-inverse); }
}

/* ── approach ──────────────────────────────────────────────────────────── */

.pillars {
  background: var(--forest-deepest, #012019);
  color: var(--sand);
  padding-block: 128px;
}

.pillars__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}

/* The heading holds while the list scrolls past it. That is the section's
   whole structure, and it is why this is not another stacked block. */
.pillars__aside {
  position: sticky;
  top: 96px;
}

.pillars__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 1.6rem + 3.2vw, 72px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--paper);
}

.pillars__lede {
  margin-top: 24px;
  max-width: 30ch;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: color-mix(in srgb, var(--sand) 74%, transparent);
}

.pillars__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pillar {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 24px;
  padding-block: 32px;
  border-top: 1px solid var(--outline-inverse);
}
.pillar:first-child { border-top: 0; padding-top: 0; }

.pillar__mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--outline-inverse);
  border-radius: 999px;
  color: var(--gold);
}
.pillar__ico { width: 20px; height: 20px; }

.pillar__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.1rem + 0.6vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--paper);
}

.pillar__body {
  margin-top: 8px;
  max-width: 52ch;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: color-mix(in srgb, var(--sand) 76%, transparent);
}

@media (max-width: 900px) {
  .pillars__grid { grid-template-columns: 1fr; gap: 48px; }
  .pillars__aside { position: static; }
}

/* ── projects ──────────────────────────────────────────────────────────── */

.projects {
  background: var(--forest-deep);
  color: var(--sand);
  padding-block: 128px;
}

.projects__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 1.6rem + 3vw, 64px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--paper);
  max-width: 18ch;
}

/* Exactly five cells for five projects, at three different sizes. No empty
   cell, and no row of identical thirds. */
.grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
.tile--wide { grid-column: span 4; }
.tile--tall { grid-column: span 2; }
.tile--std  { grid-column: span 2; }

.tile { display: block; color: inherit; }

/* These exports carry a cut-out sky: the region above the ridge is
   transparent, not white. Over a dark section it shows the ground straight
   through as a hard wavy edge along the skyline, so back every frame with a
   sky tone. Same reason the film's plate composites over one in the shader. */
.tile__frame {
  display: block;
  position: relative;              /* containing block for the dissolve canvas */
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #E4EBE4;
}
.tile--tall .tile__frame { aspect-ratio: 3 / 4; }

.tile__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 720ms var(--ease-out);
}
.tile:hover .tile__frame img { transform: scale(1.04); }

.tile__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--outline-inverse);
  margin-top: 16px;
  transition: transform var(--dur-base) var(--ease-out);
}
.tile:hover .tile__cap { transform: translateY(-4px); }

.tile__name {
  font-family: var(--font-display);
  font-size: clamp(18px, 1rem + 0.5vw, 24px);
  font-weight: 500;
  color: var(--paper);
}
.tile__note {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sand) 60%, transparent);
  text-align: right;
}

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .tile--wide { grid-column: span 4; }
  .tile--tall, .tile--std { grid-column: span 2; }
  .tile--tall .tile__frame { aspect-ratio: 3 / 2; }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .tile--wide, .tile--tall, .tile--std { grid-column: span 1; }
}

/* ── life ──────────────────────────────────────────────────────────────── */

.strip {
  background: var(--forest-deepest, #012019);
  color: var(--sand);
  padding-block: 128px;
  overflow: hidden;
}

.strip__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 1.6rem + 3vw, 64px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.strip__lede {
  margin-top: 16px;
  max-width: 46ch;
  font-size: clamp(16px, 0.95rem + 0.4vw, 18px);
  font-weight: 300;
  line-height: 1.6;
  color: color-mix(in srgb, var(--sand) 74%, transparent);
}

/* A rail rather than a grid: uneven widths, edge to edge, so it reads as a
   different rhythm from the project grid above it. */
.strip__rail {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 24px;
  padding-inline: var(--gutter);
  align-items: end;
}

.strip__item { margin: 0; position: relative; }
.strip__item img {
  background: #E4EBE4;
  width: 100%;
  height: clamp(240px, 30vw, 420px);
  object-fit: cover;
}
.strip__item:nth-child(2) img { height: clamp(200px, 24vw, 340px); }

.strip__item figcaption {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sand) 66%, transparent);
}

@media (max-width: 860px) {
  .strip__rail { grid-template-columns: 1fr; }
  .strip__item img,
  .strip__item:nth-child(2) img { height: clamp(220px, 52vw, 320px); }
}

/* ── questions ─────────────────────────────────────────────────────────── */

.questions {
  background: var(--forest-deep);
  color: var(--sand);
  padding-block: 128px;
}

.questions__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 1.6rem + 3vw, 64px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--paper);
  max-width: 20ch;
}

.questions__lede {
  margin-top: 16px;
  max-width: 46ch;
  font-size: clamp(16px, 0.95rem + 0.4vw, 18px);
  font-weight: 300;
  line-height: 1.6;
  color: color-mix(in srgb, var(--sand) 74%, transparent);
}

.questions__list {
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}

.q {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  padding-block: 32px;
  border-top: 1px solid var(--outline-inverse);
  color: inherit;
  transition: background var(--dur-base) var(--ease-out);
}
.questions__list li:last-child .q { border-bottom: 1px solid var(--outline-inverse); }

.q__n {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.q__text {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.05rem + 0.9vw, 32px);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--paper);
  transition: transform var(--dur-base) var(--ease-out);
}
.q:hover .q__text { transform: translateX(8px); }

.q__arrow {
  width: 20px;
  height: 20px;
  color: color-mix(in srgb, var(--sand) 50%, transparent);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.q:hover .q__arrow { transform: translateX(6px); color: var(--gold); }

@media (max-width: 640px) {
  .q { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding-block: 24px; }
  .q__arrow { display: none; }
}

/* ── close ─────────────────────────────────────────────────────────────── */

.close {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 88vh;
  padding-block: 128px;
  text-align: center;
  color: var(--paper);
  background: var(--forest-deepest, #012019);
  overflow: hidden;
}

.close__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.close::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(80% 70% at 50% 50%,
      color-mix(in srgb, var(--forest-deep) 72%, transparent) 0%,
      color-mix(in srgb, var(--forest-deepest, #012019) 94%, transparent) 100%);
}

.close__inner { display: grid; justify-items: center; }

.close__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 2rem + 4vw, 96px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 16ch;
}

.close__lede {
  margin-top: 24px;
  max-width: 44ch;
  font-size: clamp(16px, 0.95rem + 0.4vw, 19px);
  font-weight: 300;
  line-height: 1.6;
  color: color-mix(in srgb, var(--sand) 82%, transparent);
}

.close__inner .btn { margin-top: 32px; }
.btn--lg { padding: 20px 40px; font-size: 0.82rem; }

/* On this ground the solid forest button loses its edge, so the closing
   call to action inverts: cream plate, forest label. Same component, same
   hover wipe, and the label is the same one the hero uses. */
.close__inner .btn--solid {
  --btn-bg: var(--paper);
  --btn-fg: var(--forest-deep);
}

/* ── footer ────────────────────────────────────────────────────────────── */

.foot {
  background: var(--forest-deepest, #012019);
  color: color-mix(in srgb, var(--sand) 72%, transparent);
  padding-block: 96px 32px;
  border-top: 1px solid var(--outline-inverse);
}

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
}

.foot__mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--paper);
}
.foot__mark .site-header__leaf { width: 20px; height: 20px; }

.foot__col { display: grid; gap: 12px; align-content: start; }

.foot__h {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sand) 52%, transparent);
  margin-bottom: 4px;
}

.foot__col a {
  font-size: 15px;
  font-weight: 300;
  color: color-mix(in srgb, var(--sand) 84%, transparent);
  transition: color var(--dur-fast) var(--ease-out);
}
.foot__col a:hover { color: var(--paper); }

.foot__base {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--outline-inverse);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 300;
  color: color-mix(in srgb, var(--sand) 56%, transparent);
}
.foot__base p { margin: 0; }

@media (max-width: 860px) {
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot__mark { grid-column: 1 / -1; }
}

/* ── reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-reveal-item],
  [data-reveal-item].is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-dissolve] { opacity: 1; transition: none; }
  .tile__frame img,
  .tile__cap,
  .q__text,
  .q__arrow { transition: none; }
  .pillars__aside { position: static; }
}