/* ==========================================================================
   Direction A2d — Print, image hero, three chapters, with flora accents
   A printed journal for a movement practice. Light paper, a left-weighted
   12-column grid, running heads with italic folio numerals, captioned prints.

   Type roles (Newsreader, optical sizes on; Switzer for interface):
     display    Newsreader 200, 8rem+, -0.03em    hero, Work with me, Grit meets grace
     statement  Newsreader 300, ~3.4rem            section headlines
     voice      Newsreader italic 300              quotations, Kili's credo, the "possible" half of the thesis
     lead       Newsreader 400, 1.5rem, ink        first paragraph of a section
     body       Newsreader 400, 1.125rem, ink      reading text — never grey, never small
     ui         Switzer 400, 0.875–0.9375rem       nav, buttons, captions, offering summaries
     meta       Switzer 500 caps, 0.6875rem        running heads only
     numerals   Newsreader italic 300              folios, offering numbers, process steps

   Three chapters. Discover connection. (invitation, approach, who we work with, our philosophy, the guide) · Explore movement. (how we work, ways to work together) · Experience freedom. (where it leads, client experiences, begin).
   Numerals mark only the three chapter openers; every other running head carries its chapter's verb ("Discover · Who we work with").
   Value rhythm: paper · paper · DARK · paper · stone · paper | stone · paper | image/paper · DARK · paper/image · ink
   ========================================================================== */

:root {
  --paper: #F0EFE8;
  --stone: #E3E2D9;
  --body: #26312B;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --fs-display: clamp(3.25rem, 1rem + 7.9vw, 8.5rem);
  --fs-statement: clamp(2rem, 1.15rem + 2.45vw, 3.4rem);
  --fs-voice: clamp(1.5rem, 0.95rem + 1.6vw, 2.5rem);
  --fs-lead: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --fs-ui: 0.9375rem;
  --fs-meta: 0.6875rem;

  --space: clamp(5.5rem, 10vw, 10rem);
  --header-h: 4rem;   /* one height, scrolled or not: nothing about the bar moves while a photograph slides under it */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --hdr-fg: var(--ink);
  --hdr-fg-solid: var(--ink);
  --hdr-bg-solid: var(--paper);
  --menu-bg: var(--spruce-deep);
  --menu-fg: var(--on-dark);
}

html { scroll-padding-top: var(--header-h); }   /* anchor links land the section flush under the bar, no sliver of the section above */
body { background: var(--paper); color: var(--body); font-family: var(--serif); font-size: var(--fs-body); line-height: 1.62; font-optical-sizing: auto; }
::selection { background: var(--spruce); color: var(--on-dark); }

/* ---------- Shared pieces ---------- */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 1.8vw, 1.5rem); }
.section { padding-block: var(--space); }
.stone { background: var(--stone); }
.dark { position: relative; isolation: isolate; background: var(--spruce-deep); color: var(--on-dark-soft); }
.dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.09;
  background-image: var(--noise);
}

.meta { font: 500 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }

.folio {
  --rule: var(--line);
  position: relative; grid-column: 1 / -1; display: flex; align-items: baseline; gap: 1.1rem;
  padding-top: 1.1rem; margin-bottom: clamp(3.5rem, 7vw, 6.5rem);
  border-top: 1px solid var(--rule);
  font: 500 var(--fs-meta)/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
}
.folio--sub { gap: 0.7rem; }
.folio__ch { opacity: 0.6; }
.folio__n { font: italic 300 1.5rem/0.8 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.dark .folio { --rule: var(--line-dark); color: var(--on-dark-mute); }
.dark .folio__n { color: var(--on-dark); }

.display { font-weight: 200; font-size: var(--fs-display); line-height: 0.9; letter-spacing: -0.032em; color: var(--ink); }
.statement { font-weight: 300; font-size: var(--fs-statement); line-height: 1.07; letter-spacing: -0.02em; color: var(--ink); }
.dark .statement { color: var(--on-dark); }
.lead { font-size: var(--fs-lead); line-height: 1.42; letter-spacing: -0.005em; color: var(--ink); }

.button {
  display: inline-flex; align-items: center; gap: 0.85rem; min-height: 3.25rem; padding: 0 1.6rem;
  border: 1px solid currentColor; border-radius: 999px;
  font: 400 var(--fs-ui)/1 var(--sans); letter-spacing: 0.005em; text-decoration: none; color: var(--ink);
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.button__arrow { transition: transform 0.45s var(--ease); }
.button--solid { background: var(--spruce); border-color: var(--spruce); color: var(--on-dark); }
@media (hover: hover) {
  .button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .button:hover .button__arrow { transform: translateX(0.3rem); }
  .button--solid:hover { background: var(--spruce-deep); border-color: var(--spruce-deep); }
}

.print { display: flex; flex-direction: column; gap: 0.8rem; }
.print__img { overflow: hidden; background: var(--stone); }
.print__img img { width: 100%; height: 100%; object-fit: cover; }
.print figcaption {
  display: flex; justify-content: space-between; gap: 1rem;
  font: 400 0.8125rem/1.3 var(--sans); color: var(--ink-mute);
}
.print figcaption strong { font-weight: 500; color: var(--ink); }
.dark .print figcaption { color: var(--on-dark-mute); }

/* ---------- Header ---------- */
.wordmark { display: inline-flex; flex-direction: column; font: 400 1.125rem/0.96 var(--serif); letter-spacing: -0.01em; }
.site-nav { align-items: center; gap: clamp(1.5rem, 2.6vw, 2.5rem); font: 400 var(--fs-ui)/1 var(--sans); }
.site-nav a { position: relative; padding-block: 0.4rem; }
.site-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease);
}
.nav-cta { padding: 0.7rem 1.2rem !important; border: 1px solid currentColor; border-radius: 999px; transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
@media (hover: hover) {
  .site-nav a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }
  .nav-cta:hover { background: var(--hdr-fg-solid); color: var(--hdr-bg-solid); border-color: var(--hdr-fg-solid); }
}
.menu-toggle { font: 400 var(--fs-ui)/1 var(--sans); }

/* The bar takes on the colour of whatever is behind it (shared/main.js sets data-tone from the section under the header).
   It is always present and always opaque: on the paper hero it simply is the page, so photographs slide cleanly under it and
   nothing ever fades in over an image. Only its colour moves. The dark bar carries the same grain as the dark sections so the two read as one surface. */
.site-header { transition: color 0.6s var(--ease); }
.site-header::before { opacity: 1; background: var(--hdr-bg-solid); backdrop-filter: none; -webkit-backdrop-filter: none; transition: background-color 0.6s var(--ease); }
.site-header::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background-image: var(--noise); transition: opacity 0.6s var(--ease); }
.site-header[data-tone="stone"] { --hdr-bg-solid: var(--stone); }
.site-header[data-tone="dark"] { --hdr-fg: var(--on-dark); --hdr-fg-solid: var(--on-dark); --hdr-bg-solid: var(--spruce-deep); }
.site-header[data-tone="dark"]::after { opacity: 0.09; }
.site-header[data-tone="footer"] { --hdr-fg: var(--on-dark); --hdr-fg-solid: var(--on-dark); --hdr-bg-solid: var(--spruce-ink); }
.site-header.menu-open::before, .site-header.menu-open::after { opacity: 0; }

/* ---------- Hero: the photograph, and nothing else competing with it ---------- */
.hero { padding-top: calc(var(--header-h) + clamp(0.5rem, 1.4vw, 1.25rem)); padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.hero__print { width: 100%; }
.hero__img { --pos: 22% 40%; height: clamp(24rem, calc(100svh - 9rem), 56rem); animation: unveil 1.8s var(--ease-out) 0.2s both; }
.js .hero__img img { scale: 1; transition-duration: 1.1s, 0s; }   /* the hero has its own settle, below */
.hero__img img { animation: settle 2.6s var(--ease-out) 0.2s both; }
.hero__print figcaption { animation: rise 1.2s var(--ease-out) 1s both; }

/* ---------- Chapter openers: the three statements, each heading its own section ---------- */
.chapter {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; column-gap: 0.22em;
  font-weight: 200; font-size: clamp(3rem, 0.6rem + 7.2vw, 7.6rem); line-height: 0.92; letter-spacing: -0.035em; color: var(--ink);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.chapter .v { color: var(--ink-mute); }
.dark .chapter .v { color: var(--on-dark-mute); }
.freedom__plate .chapter .v { color: var(--ink-soft); }

@keyframes rise { from { opacity: 0; transform: translateY(0.4em); } }
@keyframes unveil { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.08); } }

/* ---------- 01 Invitation ---------- */
.intro { padding-top: clamp(2rem, 3vw, 2.75rem); }   /* the 01 running head is implied, so the gap under the hero closes up */
.intro__title { grid-column: 5 / 12; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.intro__p1 { grid-column: 5 / 9; }
.intro__p2 { grid-column: 9 / 13; }

/* ---------- 02 Meet what is ---------- */
.meet__print { grid-column: 1 / 7; grid-row: 2 / 4; }
.meet__print .print__img { aspect-ratio: 1; }
.meet__print .print__img { --pos: 64% 50%; }
.meet__title {
  grid-column: 8 / 13; grid-row: 2; align-self: center;
  font-weight: 200; font-size: clamp(2.75rem, 0.6rem + 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--on-dark);
}
.meet__title > span { display: block; }
.meet__possible { font-style: italic; font-weight: 200; letter-spacing: -0.02em; margin-top: 0.12em; }
.meet__note { grid-column: 8 / 12; grid-row: 3; align-self: end; font-size: var(--fs-lead); line-height: 1.45; color: var(--on-dark-soft); padding-top: 2.5rem; border-top: 1px solid var(--line-dark); margin-top: 3rem; }

/* ---------- 03 Process ---------- */
.process__title {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: inherit;
  font-weight: 300; font-size: clamp(2rem, 1rem + 2.9vw, 3.6rem); line-height: 1; letter-spacing: -0.025em; color: var(--ink);
  margin-bottom: clamp(4rem, 8vw, 7rem);
}
.process__title > span { display: flex; flex-direction: column; gap: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.process__title i { font: italic 300 1.125rem/1 var(--serif); letter-spacing: 0; color: var(--ink-mute); }
.process__plate { grid-column: 1 / 6; }
.process__plate .print__img { aspect-ratio: 4 / 5; }
.process__text { grid-column: 7 / 12; align-self: center; display: grid; gap: 1.4rem; }
.process__text .lead { margin-bottom: 0.8rem; }

/* ---------- 04 Who ---------- */
.who__head { grid-column: 1 / 7; align-self: start; position: sticky; top: 7rem; display: grid; gap: 2rem; }
.who__lead { font-size: var(--fs-lead); line-height: 1.42; color: var(--ink-soft); max-width: 26ch; }
.voices { grid-column: 8 / 13; }
.voices li { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink); padding: 2rem 0 2.25rem; border-top: 1px solid var(--line); }
.voices li:first-child { border-top: 0; padding-top: 0; }
.who__close { grid-column: 8 / 13; margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line-strong); display: grid; gap: 1rem; }
.who__close p:first-child { font: 400 var(--fs-ui)/1.5 var(--sans); color: var(--ink-soft); }
.who__begin { font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.22; letter-spacing: -0.015em; color: var(--ink); }

/* ---------- 05 Services ---------- */
.freedom { padding-top: 0; }
.freedom__body { margin-top: clamp(4rem, 7vw, 6.5rem); }
.freedom__plate { --pos: 30% 60%; position: relative; height: clamp(30rem, 58vw, 52rem); overflow: hidden; background: var(--stone); }
.freedom__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.freedom__plate-inner { position: relative; height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 1.8vw, 1.5rem); grid-template-rows: auto 1fr; padding-top: var(--space); }
.freedom__plate .folio { --rule: rgba(22, 33, 27, 0.28); }
.freedom__title { grid-column: 1 / -1; align-self: start; margin-top: clamp(1rem, 4vw, 3.5rem); margin-bottom: 0; }
.services__head { margin-bottom: clamp(3.5rem, 6vw, 5.5rem); align-items: end; }
.services__sub { grid-column: 1 / -1; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.services__intro { grid-column: 1 / 8; }
.services__note { grid-column: 9 / 13; font: 400 var(--fs-ui)/1.55 var(--sans); color: var(--ink-soft); padding-left: 1.25rem; border-left: 1px solid var(--line-strong); }

.offerings { border-bottom: 1px solid var(--line-strong); }
.offering { border-top: 1px solid var(--line-strong); }
.offering summary {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1.35fr) minmax(0, 1fr) 3rem; align-items: baseline; column-gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.6rem, 2.6vw, 2.25rem) 0;
}
.offering__num { font: italic 300 1.5rem/1 var(--serif); color: var(--ink-mute); }
.offering h3 { font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.05vw, 2.2rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--ink); transition: transform 0.6s var(--ease); }
.offering__lede { font: 400 var(--fs-ui)/1.55 var(--sans); color: var(--ink-soft); }
.offering .toggle { width: 3rem; height: 3rem; border: 1px solid var(--line-strong); border-radius: 50%; align-self: center; color: var(--ink); transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
.offering[open] .toggle { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: hover) {
  .offering summary:hover h3 { transform: translateX(0.5rem); }
  .offering summary:hover .toggle { border-color: var(--ink); }
}
.offering summary:focus-visible { outline-offset: 6px; }
.offering__body {
  display: grid; gap: 1.1rem; max-width: 40rem;
  margin-left: calc(4.5rem + clamp(1rem, 2.5vw, 2.5rem)); padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.offering__body h4 { font: 500 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 1.25rem; }
.offering__body ul { display: grid; }
.offering__body li { padding: 1rem 0; border-top: 1px solid var(--line); }
.offering__body li:last-child { border-bottom: 1px solid var(--line); }
.offering__body strong { font-weight: 500; color: var(--ink); }
.services__foot { margin-top: clamp(4rem, 7vw, 6rem); max-width: 34ch; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }

/* ---------- 06 Philosophy: the rock and the silk flank the type ---------- */
.philosophy__stage { grid-template-columns: minmax(0, 3.1fr) minmax(0, 4.4fr) minmax(0, 3.1fr); column-gap: clamp(1.25rem, 3.5vw, 3.5rem); align-items: center; }
.philosophy__copy { grid-column: 2; grid-row: 2; text-align: center; }
.philosophy__title { font-weight: 200; font-size: clamp(2.7rem, 1rem + 5.2vw, 6.2rem); line-height: 1; letter-spacing: -0.032em; color: var(--ink); margin-bottom: 1.6rem; }
.philosophy__line { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink); }
.philosophy__grit { grid-column: 1; grid-row: 2; }
.philosophy__grace { grid-column: 3; grid-row: 2; }
.philosophy__grit .print__img, .philosophy__grace .print__img { aspect-ratio: 2 / 3; }
/* what the plates stand for: the thesis on the left, the thinking on the right, the way Who we work with is laid out */
.philosophy__body { margin-top: clamp(5rem, 9vw, 8rem); align-items: start; }
.philosophy__thesis { grid-column: 1 / 7; position: sticky; top: 7rem; }
.philosophy__text { grid-column: 8 / 13; display: grid; gap: 1.25rem; }
.philosophy__pairs { margin: 1.5rem 0 1rem; padding: 2.25rem 0; border-block: 1px solid var(--line-strong); }
.philosophy__pairs p { font-style: italic; font-weight: 300; font-size: var(--fs-voice); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.philosophy__pairs .nb { white-space: nowrap; }
.philosophy__close { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.22; letter-spacing: -0.015em; color: var(--ink); }

/* ---------- 07 Ecology ---------- */
.ecology__title { grid-column: 4 / 12; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.ecology__lead { grid-column: 4 / 8; }
.ecology__p { grid-column: 9 / 13; padding-top: 0.35rem; }

/* ---------- 08 Clients ---------- */
.clients__title { grid-column: 1 / 7; }
.clients__intro { grid-column: 8 / 12; align-self: end; font: 400 var(--fs-ui)/1.6 var(--sans); color: var(--on-dark-mute); }
.quote { display: grid; gap: 1.75rem; }
.quote blockquote { font-style: italic; font-weight: 300; letter-spacing: -0.01em; color: var(--on-dark); }
.quote blockquote p { text-indent: -0.42em; }
.quote figcaption { font: 500 var(--fs-meta)/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-mute); display: flex; align-items: center; gap: 1rem; }
.quote figcaption::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; }
.quote--1 { grid-column: 1 / 11; margin-top: clamp(4rem, 8vw, 7rem); }
.quote--1 blockquote { font-size: var(--fs-voice); line-height: 1.24; }
.quote--2 { grid-column: 6 / 13; margin-top: clamp(4rem, 7vw, 6rem); }
.quote--2 blockquote { font-size: clamp(1.25rem, 0.95rem + 0.8vw, 1.7rem); line-height: 1.38; color: var(--on-dark-soft); }
.clients__note { grid-column: 6 / 13; margin-top: 3.5rem; font: 400 0.8125rem/1.5 var(--sans); color: var(--on-dark-mute); }

/* ---------- 09 About ---------- */
.about__aside { grid-column: 1 / 6; align-self: start; position: sticky; top: 7rem; }
.about__print { max-width: 28rem; }
.about__print .print__img { aspect-ratio: 4 / 5; }
.about__print .print__img { --pos: 30% 50%; }
.about__copy { grid-column: 7 / 13; display: grid; gap: 1.25rem; max-width: 38rem; }
.about__copy h2 { margin-bottom: 1.5rem; }
.about__copy .lead { margin-bottom: 0.75rem; }
.about__copy .lead::first-letter {
  float: left; font-weight: 200; font-size: 4.6em; line-height: 0.78; letter-spacing: -0.02em;
  margin: 0.06em 0.12em -0.05em -0.04em; color: var(--ink);
}
.about__more { font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); margin-top: 2.5rem; }

/* ---------- 10 Connect: the mist ----------
   The photograph is the ground of the whole ending. It comes in out of the paper above (::before, top), and the forest at its
   foot melts into the dark ground the copy sits on (::before, bottom). The grain that .dark carries is laid over the same
   stretch (::after), otherwise the two meet on a seam: .dark with its grain is a few levels lighter than the bare colour. */
.end { position: relative; padding: 0; background: var(--paper); }
.end__sky { --pos: 50% 100%; position: relative; isolation: isolate; overflow: hidden; min-height: clamp(38rem, 96vh, 58rem); padding-top: var(--space); }
.end__sky img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* the parallax rule takes over where it is supported */
.end__sky::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--paper) 0, rgba(239, 240, 233, 0) 30%, rgba(24, 35, 29, 0) 50%, var(--spruce-deep) 97%);
}
.end__sky::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.09; background-image: var(--noise);
  -webkit-mask-image: linear-gradient(180deg, transparent 50%, #000 97%); mask-image: linear-gradient(180deg, transparent 50%, #000 97%);
}
.end__head { position: relative; z-index: 2; }
.end__head .folio { margin-bottom: clamp(4rem, 9vw, 8rem); }
.end__title { max-width: 13em; margin-inline: auto; text-align: center; font-size: clamp(2.3rem, 1.1rem + 4.1vw, 4.7rem); line-height: 1.05; }
.end__tone { position: absolute; inset: 56% 0 0 0; pointer-events: none; }   /* the bar goes dark once the forest has, not once the copy starts: it flips when the picture behind it is about halfway between paper and spruce */
.end__body {
  margin-top: -2px;                                   /* tucks under the copy's own edge: two layers meeting on a fractional pixel would let the photo show through as a hairline */
  padding: calc(clamp(0.5rem, 2vw, 1.75rem) + 2px) 0 var(--space);
  background: linear-gradient(180deg, var(--spruce-deep) calc(100% - var(--space) * 1.1), var(--spruce-ink) 100%);   /* and it settles into the footer's colour, so the ending is one descent */
}
.end__body::before { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--space) * 1.1), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - var(--space) * 1.1), transparent 100%); }
.end__inner { max-width: calc(41rem + 2 * var(--gutter)); display: grid; gap: 1.25rem; justify-items: center; text-align: center; }
.end__inner .button { margin-top: 1.5rem; }
.end__body .button--solid { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.contact-note { font: 400 0.8125rem/1.5 var(--sans); color: var(--ink-mute); }
.end__body .contact-note { color: var(--on-dark-mute); margin-top: 0.5rem; }
@media (hover: hover) { .end__body .button--solid:hover { background: transparent; border-color: var(--on-dark); color: var(--on-dark); } }
/* ---------- Footer ---------- */
.site-footer { background: var(--spruce-ink); color: var(--on-dark-soft); padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: 2rem; overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: clamp(3rem, 6vw, 5rem); }
.footer__motto { font-weight: 300; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.4rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--on-dark); max-width: 18ch; }
.footer__nav { display: flex; gap: 2rem; font: 400 var(--fs-ui)/1 var(--sans); }
.footer__nav a { text-decoration: none; }
@media (hover: hover) { .footer__nav a:hover { color: var(--on-dark); } }
.footer__mark {
  grid-column: 1 / -1; font-weight: 200; font-size: calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) / 7.8); line-height: 0.8; letter-spacing: -0.045em;
  color: var(--on-dark); opacity: 0.92; white-space: nowrap; margin-left: -0.05em;
}
.footer__small { grid-column: 1 / -1; font: 400 0.8125rem/1 var(--sans); color: var(--on-dark-mute); padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }

/* ---------- Motion: quiet, and only for people who have not asked for less ----------
   Scroll-linked work is compositor-only (translate / scaleX) and lives behind @supports,
   so browsers without scroll-driven animations simply get the still page. */
@keyframes par { from { translate: 0 var(--k); } to { translate: 0 calc(var(--k) * -1); } }
@keyframes meet-up { from { translate: 0 var(--meet); } to { translate: 0 0; } }
@keyframes meet-down { from { translate: 0 calc(var(--meet) * -1); } to { translate: 0 0; } }
@keyframes plate-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes par-exit { from { translate: 0 0; } to { translate: 0 var(--k); } }
@keyframes rule-draw { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: no-preference) {
  /* Chapter openers land in two beats: the verb, then the noun */
  .js .chapter .n { opacity: 0; transform: translateY(0.14em); transition: opacity 1.3s var(--ease-out) 0.24s, transform 1.3s var(--ease-out) 0.24s; }
  .js .chapter.is-in .n { opacity: 1; transform: none; }

  @supports (animation-timeline: view()) {
    /* Plates sit in a slightly taller frame and drift inside it. --t is the extra height, as a % of the frame, on each side. */
    [data-par] { --t: 7; --k: calc(var(--t) / (100 + 2 * var(--t)) * 94%); position: relative; view-timeline: --par block; }
    [data-par] img {
      position: absolute; left: 0; top: calc(var(--t) * -1%); width: 100%; height: calc(100% + var(--t) * 2%);
      animation: par linear both; animation-timeline: --par; animation-range: cover;
    }
    [data-par="soft"] { --t: 5; }
        /* The rock rises and the silk descends until they sit level, as the module reaches the middle of the screen; both fade in on the way */
    .philosophy__grit, .philosophy__grace { --meet: 5.5rem; animation: meet-up linear both, plate-in linear both; animation-timeline: view(), view(); animation-range: entry 0% cover 52%, entry 0% entry 85%; }
    .philosophy__grace { animation-name: meet-down, plate-in; }
    .hero__img[data-par="exit"] img {                /* the portrait settles in on load, then trails the page as it leaves */
      animation: settle 2.6s var(--ease-out) 0.2s both, par-exit linear both;
      animation-timeline: auto, --par; animation-range: normal, exit;
    }

    /* Running-head rules draw in as each folio rises into view */
    .folio { border-top-color: transparent; view-timeline: --folio block; }
    .folio::before {
      content: ""; position: absolute; inset: -1px 0 auto 0; height: 1px; background: var(--rule);
      transform-origin: left center; animation: rule-draw linear both; animation-timeline: --folio; animation-range: cover 0% cover 30%;
    }
  }
}

/* ---------- Flora: three accents, one closing each chapter ----------
   Each plant is a silhouette (flora/*.svg) used as a mask over the colour of the section it grows from,
   so it reads as that section putting a shoot up into the one above it.
   The dark ones carry the same grain as .dark, otherwise the base shows as a seam.
   flora.js draws them on a canvas instead and grows them (see the notes at the top of that file); this mask is what stays
   when WebGL is missing or motion is reduced. */
.has-flora { position: relative; }
.flora {
  position: absolute; z-index: 0; pointer-events: none;
  bottom: calc(var(--space) * -1 - 2px);              /* stands on the edge of the next section, 2px in so no hairline shows */
  background: var(--flora, var(--stone));
  -webkit-mask: var(--flora-shape) bottom left / 100% 100% no-repeat;
          mask: var(--flora-shape) bottom left / 100% 100% no-repeat;
}
.flora--dark { --flora: var(--spruce-deep); }
/* Until flora.js has the plant on a canvas the still version would show, then vanish, then grow: hold it back. Reduced motion keeps the still version,
   and the failsafe brings it back if the script never answers (flora.js adds .is-static when it gives up). */
@media (prefers-reduced-motion: no-preference) {
  .js .flora:not(.is-gl):not(.is-static) { opacity: 0; animation: flora-failsafe 0s 4s forwards; }
}
@keyframes flora-failsafe { to { opacity: 1; } }
.flora.is-gl { background: none; -webkit-mask: none; mask: none; }          /* flora.js has drawn the plant on a canvas: the mask version steps aside */
.flora.is-gl::after { display: none; }
.flora--dark::after { content: ""; position: absolute; inset: 0; opacity: 0.09; background-image: var(--noise); }
.flora--branch { --flora-shape: url("flora/branch.svg"); aspect-ratio: 380 / 820; height: clamp(18rem, 30vw, 28rem); left: calc(var(--gutter) + 1.5rem); }
.flora--spray  { --flora-shape: url("flora/spray.svg");  aspect-ratio: 460 / 780; height: clamp(14rem, 21vw, 20rem); left: calc(var(--gutter) + 2rem); --flora: var(--stone); }
.flora--reeds  { --flora-shape: url("flora/reeds.svg");  aspect-ratio: 400 / 860; height: clamp(19.35rem, 30.1vw, 27.95rem); left: calc(var(--gutter) + 1rem); }   /* the plant's own size is unchanged; the box is 7.5% taller so the tall seed head fits */

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* Stacked layout: the plants stand on the edge of the next section, in a deeper bottom margin.
     They keep the desktop proportions (the same vw rules, capped at their size at 1080px so there is no jump at the breakpoint); only phones hold a floor. */
  :root { --fh-branch: clamp(8.5rem, 30vw, 20.25rem); --fh-spray: clamp(8.5rem, 21vw, 14.2rem); --fh-reeds: clamp(9.15rem, 30.1vw, 20.3rem); }
  .intro { padding-bottom: calc(var(--fh-branch) + 1.5rem); }
  .who { padding-bottom: calc(var(--fh-spray) + 1.5rem); }
  .freedom { padding-bottom: calc(var(--fh-reeds) + 1.5rem); }
  .flora { left: calc(var(--gutter) + 0.5rem); right: auto; height: var(--fh); bottom: calc((var(--fh) + 1.5rem) * -1 - 2px); }   /* base 2px into the next section; the 1.5rem is the clear space under the last line of text */
  .flora--branch { --fh: var(--fh-branch); }
  .flora--spray  { --fh: var(--fh-spray); left: auto; right: calc(var(--gutter) + 0.5rem); }   /* left, right, left down the page: the branch and reeds stand at the left as on desktop, the faint spray answers from the right */
  .flora--reeds  { --fh: var(--fh-reeds); }
  .meet__print { grid-column: 1 / 7; }
  .meet__title { grid-column: 7 / 13; }
  .meet__note { grid-column: 7 / 13; }
  .offering summary { grid-template-columns: 3.25rem minmax(0, 1fr) 3rem; }
  .offering__lede { grid-column: 2; grid-row: 2; padding-top: 0.6rem; }
  .offering .toggle { grid-column: 3; grid-row: 1 / 3; }
  .offering__body { margin-left: calc(3.25rem + clamp(1rem, 2.5vw, 2.5rem)); }
}

@media (max-width: 760px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .site-nav { gap: 1.75rem; align-items: flex-start; font: 300 2.25rem/1.1 var(--serif); letter-spacing: -0.015em; }
  .site-nav .nav-cta { border: 0; padding: 0.4rem 0 !important; }
  .site-nav a:not(.nav-cta)::after { display: none; }

  .hero__img { --pos: 22% 50%; height: auto; aspect-ratio: 4 / 5; }
  .chapter { font-size: 15.4vw; flex-direction: column; margin-bottom: 2.25rem; }

  .intro__title { margin-bottom: 2.25rem; }
  .intro__p2 { margin-top: 1.25rem; }

  .meet__title { margin-top: 2.75rem; }
  .meet__note { margin-top: 2rem; }

  .process__title { grid-template-columns: 1fr 1fr; row-gap: 2.25rem; }
  .process__text { margin-top: 2.75rem; }

  .who__head, .philosophy__thesis { position: static; margin-bottom: 2.5rem; }

  .freedom__plate { height: 34rem; }
  .freedom__plate { --pos: 22% 70%; }
  .freedom__plate-inner { grid-template-columns: minmax(0, 1fr); }
  .freedom__plate-inner > * { grid-column: 1 / -1; }
  .freedom__title { margin-top: 0; }
  .services__note { margin-top: 2rem; }

  .offering summary { grid-template-columns: 2.25rem minmax(0, 1fr) 2.75rem; column-gap: 0.9rem; }
  .offering .toggle { width: 2.75rem; height: 2.75rem; }
  .offering__body { margin-left: 0; }

  .philosophy__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; align-items: start; }
  .philosophy__stage > .philosophy__grit { grid-column: 1 !important; }
  .philosophy__stage > .philosophy__grace { grid-column: 2 !important; }
  .philosophy__copy { padding-bottom: 0; margin-bottom: 3rem; }
  .philosophy__grit, .philosophy__grace { --meet: 2.5rem; }

  .ecology__lead { margin-bottom: 1.25rem; }

  .quote--2, .clients__note { margin-top: 3rem; }
  .clients__intro { margin-top: 1.5rem; }

  .about__aside { position: static; margin-bottom: 3rem; }

  .end__sky { --pos: 60% 100%; min-height: 36rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__nav { flex-wrap: wrap; gap: 1.25rem 1.75rem; }
}

/* Portrait beneath the philosophy statement. Preserve the full photograph. */
.philosophy__portrait { width: 100%; margin: 0 0 1rem; }
.philosophy__portrait img { display: block; width: 100%; height: auto; }

/* Keep the philosophy words in their original typeface, over the photograph. */
.philosophy__portrait { position: relative; isolation: isolate; }
.philosophy__portrait::after { content: ""; position: absolute; inset: 0 0 48%; background: linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.18) 72%, transparent); pointer-events: none; }
.philosophy__portrait .philosophy__pairs { position: absolute; z-index: 1; inset: 0 0 auto; margin: 0; padding: clamp(1.25rem, 2.5vw, 2rem); border: 0; }
.philosophy__portrait .philosophy__pairs p { color: var(--paper); text-shadow: 0 1px 8px rgba(0,0,0,.3); }

/* Place the words in the open space beside the portrait, below chin level. */
.philosophy__portrait .philosophy__pairs { top: 35%; right: auto; width: 62%; padding: 0 0 0 6%; }
.philosophy__portrait .philosophy__pairs p { font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.14; text-wrap: balance; }
.philosophy__portrait::after { inset: 0; background: radial-gradient(ellipse at 24% 44%, rgba(0,0,0,.18), transparent 60%); }
@media (max-width: 760px) { .philosophy__portrait .philosophy__pairs p { font-size: clamp(1rem, 4.4vw, 1.5rem); } }

.philosophy__line-fixed { display: block; white-space: nowrap; }