/* ==========================================================================
   Tidy by Nature — "Beside You" v10 — Astra review implementation (2026-09-06)
   (stylesheet lineage: Beside You v3)
   One idea carried the whole way: the same home, with a different feeling.
   Photography fills the viewport. Type is large and quiet by turns.
   Complete photographs and local choices keep the pace in the visitor’s hands.
   ========================================================================== */

/* ---------- fonts, served from this folder ----------
   Three files replace the Google Fonts stylesheet: two fewer third-party
   connections before first paint, and the type no longer swaps in a beat late.
   Karla is one variable file covering the 300 and 500 the page uses. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("assets/fonts/cormorantgaramond-300.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic; font-weight: 300; font-display: swap;
  src: url("assets/fonts/cormorantgaramond-300-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Karla";
  font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("assets/fonts/karla-300-500.woff2") format("woff2");
}

/* ---------- tokens ---------- */
:root {
  --ink:        #171610;
  --ink-2:      #3a372c;
  --ink-3:      #6d6858;
  --night:      #14150f;
  --night-2:    #1d1e16;
  --cream:      #f6f1e6;
  --paper:      #fbf8f1;
  --sage:       #8e9b7e;
  --sage-dim:   #6f7c60;
  --sage-text:  #5f6b52;
  --gold:       #b2946a;
  --line:       rgba(23, 22, 16, .16);
  --line-light: rgba(246, 241, 230, .22);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --max: 1340px;
  --gut: clamp(1.35rem, 5vw, 5.5rem);

  --hero-size: clamp(3.6rem, 12.5vw, 16rem);
  --d1:        clamp(2.8rem, 8vw, 8rem);
  --d2:        clamp(2.2rem, 5.6vw, 5.4rem);
  --d3:        clamp(1.5rem, 3vw, 2.7rem);
  --body:      clamp(1rem, .55vw + .82rem, 1.2rem);
  --lbl:       clamp(.875rem, .25vw + .72rem, 1rem);
  --small:     clamp(.92rem, .3vw + .82rem, 1.02rem);

  --sec-pad: clamp(6rem, 13vh, 11rem);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* The focus ring takes its colour from the ground it lands on. Sage on cream
     was 2.4:1 and effectively invisible; ink on cream and cream on night are
     both above 15:1. Dark sections re-declare --focus below. */
  --focus: var(--ink);
  /* the fixed header is ~79px, so anchor and focus landings clear it */
  --head-clear: clamp(5.5rem, 11vh, 7.5rem);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  font-weight: 300;
  line-height: 1.78;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }
/* <picture> is inline by default, which would leave the full-bleed images with
   no block to measure their 100% height against. This puts the img back where
   it was in the box tree. */
picture { display: contents; }

[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
}
button { font: inherit; color: inherit; }

::selection { background: var(--sage); color: var(--paper); }

.sr-only, .skip:not(:focus) {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; z-index: 999; top: 1rem; left: 1rem;
  background: var(--ink); color: var(--paper);
  padding: .8rem 1.2rem; border-radius: 2px; text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
/* dark grounds flip the ring so it stays visible on night as well as paper */
.services, .stories, .support, .site-footer, .reveal__stage { --focus: var(--cream); }

/* anchor and focus landings clear the fixed header */
#top, #services, #about, #stories, #contact,
.svc__name, .story__title, .about-copy, .svc__card, .story__copy, #contactTitle {
  scroll-margin-top: var(--head-clear);
}

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

/* ---------- type primitives ---------- */
.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 300; color: var(--sage-text); }
.display--1 { font-size: var(--d1); }
.display--2 { font-size: var(--d2); }
.display--3 { font-size: var(--d3); line-height: 1.1; }
.display--light { color: var(--cream); }
.display--light em { color: var(--sage); }

.eyebrow {
  margin: 0 0 clamp(1.2rem, 2.4vh, 2rem);
  font-family: var(--sans);
  font-size: var(--lbl);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: .8em;
  flex-wrap: wrap;
}
.eyebrow--light { color: rgba(246, 241, 230, .62); }
.eyebrow__dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--sage); flex: none;
}

.sec-lede {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.1vw, 1.9rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 30ch;
  margin: clamp(1.6rem, 3vh, 2.4rem) 0 0;
}
.sec-lede--light { color: rgba(246, 241, 230, .86); }

.sec-note {
  margin: 1.6rem 0 0;
  max-width: 46ch;
  font-size: var(--small);
  line-height: 1.8;
  color: rgba(246, 241, 230, .62);
}

/* ---------- buttons + links ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--lbl);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  padding: 1.15em 2.4em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover { background: var(--sage-dim); border-color: var(--sage-dim); transform: translateY(-2px); }
.btn--sm { padding: .85em 1.7em; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.cta {
  display: inline-flex;
  align-items: baseline;
  gap: .8em;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  font-style: italic;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: .22em;
  position: relative;
}
.cta::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--ink);
  transform-origin: left; transition: transform .6s var(--ease);
}
.cta:hover::after { transform: scaleX(.35); }
.cta span::after { content: " \2192"; font-style: normal; }

.link-btn {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: .3em 0;
  margin-top: clamp(1.4rem, 2.6vh, 2.2rem);
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--lbl);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color .35s var(--ease), border-color .35s var(--ease), gap .35s var(--ease);
  display: inline-block;
  position: relative;
}
.link-btn:hover { color: var(--ink); }
/* every link-btn that sits on a dark ground, including the ones inside the
   expanded story panels, which were previously left at ink on night */
.services .link-btn, .stories .link-btn, .support .link-btn {
  color: rgba(246, 241, 230, .78);
}
.services .link-btn:hover, .stories .link-btn:hover, .support .link-btn:hover { color: var(--cream); }
.link-btn .lbl-close { display: none; }
.link-btn[aria-expanded="true"] .lbl-open { display: none; }
.link-btn[aria-expanded="true"] .lbl-close { display: inline; }
.link-btn--close { margin-top: clamp(2rem, 4vh, 3rem); }

/* On a finger the small editorial links were 27px tall. Standalone links grow
   the area that answers a tap to 44px without moving the type or its rule.
   Links that sit in a stack get real padding instead, so neighbours cannot
   overlap each other's target. */
@media (pointer: coarse) {
  .link-btn, .cta { position: relative; }
  .link-btn::before, .cta::before {
    content: "";
    position: absolute;
    left: -.4rem; right: -.4rem;
    top: 50%; transform: translateY(-50%);
    height: max(44px, 100%);
  }
  .site-nav ul a { padding-block: .62rem; }
  .footer-links { gap: .35rem; }
  .footer-links a { padding-block: .72rem; }
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding: clamp(.9rem, 2vh, 1.6rem) 0;
  transform: translate3d(0, 0, 0);
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease),
              padding .5s var(--ease), transform .55s var(--ease), opacity .4s linear;
}
/* At the very top the header floats straight on the hero photograph, and the
   right-hand links landed on the brightest part of it (the rattan mirror),
   where uppercase ink at label size stopped being readable. A soft cream veil,
   only while the header is unstuck, gives the type a ground without reading as
   a bar. It fades out entirely once .is-stuck takes over. */
.site-header::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(251, 248, 241, .92) 0%,
    rgba(251, 248, 241, .74) 42%,
    rgba(251, 248, 241, 0) 100%);
  transition: opacity .5s var(--ease);
}
.site-header.is-stuck::before { opacity: 0; }

.site-header.is-stuck {
  background: rgba(251, 248, 241, .95);
  backdrop-filter: saturate(130%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
/* out of the way while the visitor is reading downward, back on the way up */
.site-header.is-away {
  transform: translate3d(0, -110%, 0);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: background .3s linear; }
  .site-header.is-away { transform: none; opacity: 1; pointer-events: auto; }
}
.header-inner {
  width: min(100% - (var(--gut) * 2), var(--max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { width: clamp(128px, 13vw, 186px); height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.6rem); }
.site-nav ul {
  display: flex; gap: clamp(1.2rem, 2.2vw, 2.4rem);
  list-style: none; margin: 0; padding: 0;
}
.site-nav ul a {
  font-size: var(--lbl);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  position: relative;
}
.site-nav ul a::after {
  content: ""; position: absolute; left: 0; bottom: -.4em; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.site-nav ul a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle {
  display: none;
  align-items: center; gap: .6rem;
  min-height: 44px; padding: 0 .2rem;
  background: none; border: 0; cursor: pointer;
  font-size: var(--lbl); letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
}
.nav-toggle__bars { display: grid; gap: 5px; }
.nav-toggle__bars span { display: block; width: 24px; height: 1px; background: var(--ink); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; left: var(--gut); right: var(--gut); top: calc(100% + .6rem);
    flex-direction: column; align-items: flex-start; gap: 1.4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 1.8rem;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav .btn--sm { margin-top: .2rem; }
  .site-nav ul { flex-direction: column; gap: 1.1rem; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  /* the bottom padding is the foot's room: the meta line and the scroll cue sit
     inside it, so the CTA above can never land on them. On a 1366x768 laptop
     the two were three pixels apart. */
  padding: clamp(7rem, 15vh, 11rem) 0 clamp(7rem, 13vh, 9rem);
  overflow: hidden;
  isolation: isolate;
}
/* desktop screens are wide but not tall: the same composition at a smaller
   scale, in two steps, so the whole title page stays above the fold */
@media (min-width: 861px) and (max-height: 1120px) {
  .hero { --hero-size: clamp(3.6rem, 10vw, 13rem); padding-top: clamp(6rem, 11vh, 10rem); }
  .hero__soft { margin-top: clamp(1.2rem, 2.8vh, 2.2rem); }
  .hero__tag { margin-top: clamp(1.4rem, 3.2vh, 2.4rem); }
  .hero__actions { margin-top: clamp(1.6rem, 3.6vh, 2.6rem); }
}
@media (min-width: 861px) and (max-height: 840px) {
  .hero { --hero-size: clamp(3.6rem, 8.5vw, 11rem); padding-top: clamp(5.5rem, 10vh, 9rem); }
  .hero__soft { margin-top: clamp(1.2rem, 2.6vh, 2rem); }
  .hero__tag { margin-top: clamp(1.4rem, 3vh, 2.2rem); }
  .hero__actions { margin-top: clamp(1.6rem, 3.4vh, 2.4rem); }
}
.hero__media { position: absolute; inset: -8% 0 -8%; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 78% 46%;
  animation: heroIn 2.6s var(--ease) both;
}
@keyframes heroIn {
  from { scale: 1.12; filter: saturate(.72) brightness(1.04); }
  to   { scale: 1;    filter: none; }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg,
      rgba(251, 248, 241, .94) 0%,
      rgba(251, 248, 241, .88) 22%,
      rgba(251, 248, 241, .45) 38%,
      rgba(251, 248, 241, .08) 55%,
      rgba(251, 248, 241, 0) 68%),
    linear-gradient(to top, rgba(251, 248, 241, .35) 0%, rgba(251, 248, 241, 0) 28%);
}
.hero__inner {
  width: min(100% - (var(--gut) * 2), var(--max));
  margin-inline: auto;
}
.eyebrow--hero { margin-bottom: clamp(1.4rem, 3vh, 2.6rem); }

.hero__h1 { margin: 0; font-weight: 300; }
.hero__lead {
  display: block;
  font-family: var(--serif);
  font-size: var(--hero-size);
  line-height: .87;
  letter-spacing: -.032em;
  color: var(--ink);
}
.hero__lead .rise {
  display: block;
  /* Sol 2026-09-03: descender clearance for Cormorant "g" in Life changes. */
  padding-bottom: .18em;
  margin-bottom: -.12em; /* keep composition after extra padding */
}
.hero__soft {
  display: block;
  margin-top: clamp(1.5rem, 3.4vh, 2.8rem);
  font-family: var(--sans);
  font-size: clamp(.92rem, .5vw + .78rem, 1.15rem);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .1em;
  color: var(--ink-2);
  padding-left: .18em;
  position: relative;
}
.hero__soft::before {
  content: "";
  position: absolute; left: -1.9rem; top: .8em;
  width: 1.15rem; height: 1px; background: var(--sage);
}
.hero__soft .rise { display: block; }

.hero__tag {
  margin: clamp(1.8rem, 4vh, 3rem) 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.3vw, 2.1rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--sage-text);
  max-width: 22ch;
}
.hero__actions { margin-top: clamp(2rem, 4.4vh, 3.2rem); }

.hero__foot {
  position: absolute;
  left: 0; right: 0; bottom: clamp(1.4rem, 3.4vh, 2.6rem);
  width: min(100% - (var(--gut) * 2), var(--max));
  margin-inline: auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  pointer-events: none;
}
.hero__meta {
  margin: 0;
  max-width: 32ch;
  font-size: clamp(.84rem, .85vw, .94rem);
  line-height: 1.7;
  color: var(--ink-3);
}
.scrollcue {
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: var(--lbl); letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
}
.scrollcue__rule {
  display: block; width: clamp(48px, 7vw, 96px); height: 1px;
  background: linear-gradient(to right, var(--ink-2), rgba(23, 22, 16, 0));
  position: relative; overflow: hidden;
}
.scrollcue__rule::after {
  content: ""; position: absolute; inset: 0; width: 32%;
  background: var(--ink);
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateX(-100%); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateX(320%); opacity: 0; }
}

/* the quiet "you said" marker */
.said {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 1.5rem 0 0;
  font-size: .84rem; letter-spacing: .04em; color: var(--ink-3);
  background: rgba(142, 155, 126, .14);
  border: 1px solid rgba(142, 155, 126, .34);
  border-radius: 999px;
  padding: .45em 1.05em;
}
.said[hidden] { display: none; }
.said__clear {
  background: none; border: 0; cursor: pointer;
  line-height: 1; font-size: 1.05rem; color: var(--ink-3);
  padding: 0 .1em;
}

/* On a phone the photograph gets the whole screen and the words sit on top of
   it in light, the way the rest of the page reads. A cream veil at this size
   washed both the picture and the type out. */
@media (max-width: 860px) {
  .hero__scrim {
    background:
      linear-gradient(to bottom,
        rgba(15, 14, 9, .66) 0%,
        rgba(15, 14, 9, .54) 26%,
        rgba(15, 14, 9, .74) 58%,
        rgba(15, 14, 9, .9) 100%);
  }
  /* The old crop landed on the rattan mirror and pushed the console itself out
     of frame, so on a phone the picture read as one woven object. At 44% the
     eucalyptus, the mirror, the stacked books and the inlaid box are all in
     shot, and the headline gets a quiet stretch of wall behind it. */
  .hero__media img { object-position: 44% 50%; filter: brightness(.9) saturate(.94); }
  .hero .eyebrow { color: rgba(246, 241, 230, .94); }
  .hero__lead { color: var(--cream); }
  .hero__soft { color: rgba(246, 241, 230, .93); }
  .hero__tag { color: #cbd6b8; }
  .hero__meta { color: rgba(246, 241, 230, .84); }
  .hero .cta { color: var(--cream); }
  .hero .cta::after { background: rgba(246, 241, 230, .7); }
  .scrollcue { color: rgba(246, 241, 230, .8); }
  .scrollcue__rule { background: linear-gradient(to right, rgba(246, 241, 230, .6), rgba(246, 241, 230, 0)); }
  .scrollcue__rule::after { background: var(--cream); }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero__soft::before { display: none; }
  .hero__soft { padding-left: 0; }
}

/* ==========================================================================
   ASK
   ========================================================================== */
.ask-sec {
  background: var(--paper);
  padding: var(--sec-pad) 0;
  border-bottom: 1px solid var(--line);
}
.ask__q { max-width: 18ch; }
.chips {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-top: clamp(2.4rem, 5vh, 3.6rem);
  max-width: 60rem;
}
.chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .95em 1.6em;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--small);
  font-weight: 300;
  letter-spacing: .02em;
  color: var(--ink);
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
}
.chip:hover { border-color: var(--sage); transform: translateY(-2px); }
.chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--cream);
}

/* ==========================================================================
   PERSONAL SUPPORT — full bleed
   ========================================================================== */
.support {
  position: relative;
  min-height: 0;
  display: grid;
  align-content: center;
  padding: clamp(3rem, 6vh, 5rem) 0;
  overflow: hidden;
  isolation: isolate;
}
.support__media { position: absolute; inset: -8% 0 -8%; z-index: -2; }
.support__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.support__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(84deg, rgba(14, 13, 9, .9) 0%, rgba(14, 13, 9, .72) 44%, rgba(14, 13, 9, .3) 76%, rgba(14, 13, 9, .18) 100%),
    linear-gradient(to top, rgba(14, 13, 9, .6), rgba(14, 13, 9, 0) 50%);
}
.support__inner { position: relative; }
.support__copy {
  margin-top: clamp(2rem, 4vh, 3rem);
  max-width: 34ch;
  color: rgba(246, 241, 230, .82);
}
.support__copy p { margin: 0 0 1.1em; }
.support__copy p:last-child { margin-bottom: 0; }

/* On a phone the words cross the whole frame, so the 84deg wash above (drawn
   for a wide screen, where the type sits on the left) left the right-hand end
   of every line on undimmed photograph at 3.5:1. A flat vertical wash instead.
   This has to sit after the base rule, not in the hero's media block, or the
   base rule wins on source order. */
@media (max-width: 860px) {
  .support__scrim {
    background:
      linear-gradient(to bottom,
        rgba(14, 13, 9, .8) 0%,
        rgba(14, 13, 9, .74) 40%,
        rgba(14, 13, 9, .84) 100%);
  }
  .support__copy { color: rgba(246, 241, 230, .93); }
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services {
  position: relative;
  background: var(--night);
  color: var(--cream);
  padding: calc(var(--sec-pad) * 1.1) 0;
  overflow: hidden;
}
.services::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .05; pointer-events: none; mix-blend-mode: overlay;
}
.services .wrap { position: relative; }
.sec-head { margin-bottom: clamp(4rem, 9vh, 7rem); }

/* The index rows read as one unit at 68rem. Across the full 1340px measure the
   "learn more" action floated most of a screen away from its own heading. */
.svc-list { border-top: 1px solid var(--line-light); max-width: 68rem; }
.svc { border-bottom: 1px solid var(--line-light); }
.svc__card {
  display: grid;
  grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr) auto;
  gap: clamp(1.4rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(2.4rem, 5vh, 4rem) 0;
  transition: opacity .5s var(--ease);
}
.svc__num {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: var(--sage);
  letter-spacing: .06em;
  padding-top: .35em;
}
.svc__head { min-width: 0; }
.svc__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 4.2vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--cream);
  transition: color .45s var(--ease);
}
.svc__teaser {
  margin: clamp(.9rem, 1.8vh, 1.4rem) 0 0;
  max-width: 46ch;
  color: rgba(246, 241, 230, .66);
  font-size: var(--small);
  line-height: 1.75;
}
.svc .link-btn { color: rgba(246, 241, 230, .7); margin-top: .5rem; white-space: nowrap; }
.svc .link-btn:hover { color: var(--cream); }
.svc:hover .svc__name { color: #fff; }
.svc.is-surfaced .svc__name { color: var(--sage); }
.svc.is-surfaced .svc__num { color: var(--cream); }

.svc__body { color: rgba(246, 241, 230, .78); }
.svc__body .lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.42;
  color: var(--cream);
  max-width: 34ch;
  margin: 0 0 1.4em;
}
.svc__body p { max-width: 62ch; }
.may {
  margin: clamp(2rem, 4vh, 3rem) 0 1.2rem;
  font-size: var(--lbl); letter-spacing: .12em; text-transform: uppercase;
  color: var(--sage);
}

/* round dots, as Lia asked */
/* measured on the small line, not the body size: 74ch of body was 100 characters of it */
.deck-list { list-style: none; margin: 0; padding: 0; max-width: 40rem; }
.deck-list li {
  position: relative;
  padding: 0 0 1.5rem 1.85rem;
  line-height: 1.7;
}
.deck-list li::before {
  content: "";
  position: absolute;
  left: .1rem; top: .78em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage);
}
.deck-list strong {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--cream);
}
.deck-list span {
  display: block;
  color: rgba(246, 241, 230, .66);
  font-size: var(--small);
}
.pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 2.15rem);
  line-height: 1.34;
  letter-spacing: -.01em;
  color: var(--sage);
  border-left: 1px solid currentColor;
  padding-left: clamp(1.2rem, 2.5vw, 2.2rem);
  margin: clamp(2.4rem, 5vh, 3.6rem) 0;
  max-width: 26ch;
}
.whenever {
  margin-top: clamp(2rem, 4vh, 3rem);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  color: rgba(246, 241, 230, .82);
}
.whenever a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.whenever a:hover { color: var(--sage); }
.whenever--story { color: rgba(246, 241, 230, .82); }

@media (max-width: 760px) {
  .svc__card { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .svc__num { padding-top: 0; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about { background: var(--paper); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.about-fig {
  margin: 0;
  position: relative;
  overflow: hidden;
  min-height: min(96svh, 940px);
}
.about-fig img {
  position: absolute; inset: -6% 0 -6%;
  width: 100%; height: 112%;
  object-fit: cover; object-position: 50% 24%;
}
.about-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(4rem, 12vh, 9rem) var(--gut);
  max-width: 42rem;
}
.about-copy__body { margin-top: clamp(1.8rem, 3.6vh, 2.8rem); max-width: 38ch; }
.about-copy__body p { margin: 0 0 1.2em; color: var(--ink-2); }
.about-copy .link-btn { align-self: flex-start; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-fig { min-height: 68svh; }
  .about-copy { padding-inline: var(--gut); max-width: none; }
}

.about-body { padding-block: clamp(3rem, 7vh, 5.5rem) clamp(4rem, 9vh, 7rem); }
.about-body .display--3 { margin-bottom: clamp(2rem, 4vh, 3rem); color: var(--ink); }
.about-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.6rem, 4vw, 4rem);
}
.about-cols p { margin: 0 0 1.25em; color: var(--ink-2); }
.about-cols .lead {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height: 1.4; color: var(--ink);
}

/* flip cards */
.more-me {
  margin-top: clamp(3rem, 6vh, 4.5rem);
  padding-top: clamp(2.4rem, 5vh, 3.6rem);
  border-top: 1px solid var(--line);
}
.more-me__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-style: italic;
  color: var(--ink);
}
.more-me__hint {
  margin: .5rem 0 clamp(1.8rem, 3.4vh, 2.6rem);
  font-size: var(--lbl); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.flips {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(9rem, 15vw, 12rem), 1fr));
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}
.flip {
  appearance: none; background: none; border: 0; padding: 0;
  width: 100%; aspect-ratio: 1 / 1; min-height: 132px;
  cursor: pointer; perspective: 900px;
}
.flip__inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .72s var(--ease);
}
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .flip:not(.is-flipped):hover .flip__inner { transform: rotateY(180deg); }
}
.flip__face {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 1rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.flip__face--front { background: rgba(142, 155, 126, .1); }
.flip__face--front svg {
  width: 44%; height: auto;
  fill: none; stroke: var(--sage-dim); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.flip__face--back {
  transform: rotateY(180deg);
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.3;
}

/* ==========================================================================
   STORIES
   ========================================================================== */
.stories {
  position: relative;
  background: var(--night);
  color: var(--cream);
}
.stories__intro { padding: calc(var(--sec-pad) * 1.05) 0 clamp(4rem, 8vh, 6.5rem); }
.stories__hint {
  margin: clamp(2.4rem, 5vh, 3.6rem) 0 0;
  font-size: var(--lbl); letter-spacing: .12em; text-transform: uppercase;
  color: var(--sage);
}
.stories__skip-wrap {
  margin: .9rem 0 0;
}
.stories__skip {
  font-size: var(--lbl);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(246, 241, 230, .62);
  text-decoration: underline;
  text-underline-offset: .35em;
  text-decoration-thickness: 1px;
}
.stories__skip:hover,
.stories__skip:focus-visible {
  color: var(--sage);
}

.story { position: relative; }

/* --- story summaries and optional narratives --- */
.story__copy {
  padding: clamp(3.6rem, 8vh, 6.5rem) 0 clamp(4.5rem, 10vh, 8rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.6rem, 5vw, 5rem);
  align-items: end;
  border-bottom: 1px solid var(--line-light);
}
.story__copy > * { max-width: 100%; }
.story__copy { max-width: 68rem; }
.story__lede { max-width: 46ch; }
.story__lede p {
  margin: 0 0 .7em;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.1vw, 1.85rem);
  font-weight: 300;
  line-height: 1.42;
  color: rgba(246, 241, 230, .9);
}
.story__copy .link-btn { color: rgba(246, 241, 230, .7); margin: 0; white-space: nowrap; }
.story__copy .link-btn:hover { color: var(--cream); }

.story.is-surfaced .story__lede p { color: #fff; }
.story.is-surfaced .story__copy { border-bottom-color: var(--sage); }

@media (max-width: 760px) {
  .story__copy { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; }
  .story__copy .link-btn { margin-top: 2rem; }
}

.story-body { padding-block: clamp(3rem, 7vh, 5rem) clamp(4rem, 9vh, 7rem); }
.story-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.story-text p {
  margin: 0 0 1.3em;
  color: rgba(246, 241, 230, .78);
  max-width: 62ch;
}
.story-text .lead {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.42; color: var(--cream);
}
.story-aside { position: sticky; top: clamp(5rem, 12vh, 8rem); }
.story-aside .pull { margin: 0; }

@media (max-width: 860px) {
  .story-cols { grid-template-columns: minmax(0, 1fr); }
  .story-aside { position: static; }
}

/* ==========================================================================
   PANELS
   ========================================================================== */
.panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .62s var(--ease); }
.panel.is-open { grid-template-rows: 1fr; }
.panel__inner { overflow: hidden; min-height: 0; }
.panel__body { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease) .1s, transform .5s var(--ease) .1s; }
.panel.is-open .panel__body { opacity: 1; transform: none; }
html:not(.js) .panel { grid-template-rows: 1fr; }
html:not(.js) .panel__body { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .panel, .panel__body, .flip__inner { transition: none !important; }
  .hero__media img { animation: none; }
  .scrollcue__rule::after { animation: none; }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact {
  background: var(--paper);
  padding: calc(var(--sec-pad) * 1.05) 0;
}
.contact-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  gap: clamp(2.4rem, 5vw, 5.5rem);
  align-items: end;
}
.contact-intro .eyebrow { grid-column: 1 / -1; }
.contact-intro .display {
  margin: 0;
  font-size: clamp(2.4rem, 6.4vw, 6.6rem);
}
.contact-intro__copy { max-width: none; padding-bottom: .45rem; }
@media (max-width: 900px) {
  .contact-intro { grid-template-columns: minmax(0, 1fr); }
  .contact-intro__copy { margin-top: clamp(1.6rem, 3vh, 2.4rem); max-width: 42ch; }
}
.contact-intro__copy p { margin: 0 0 1.15em; color: var(--ink-2); }
.contact-intro.is-lit .display { animation: lit 1.6s var(--ease); }
@keyframes lit {
  0%, 100% { color: var(--ink); }
  35%      { color: var(--sage-dim); }
}

.form-shell {
  margin-top: clamp(3.5rem, 8vh, 6rem);
  padding-top: clamp(3.5rem, 8vh, 6rem);
  border-top: 1px solid var(--line);
}
/* Across the full 1340px measure this fell into three columns, which left the
   support question alone with two empty cells beside it and stretched every
   rule the width of the screen. Two columns on a comfortable measure reads as
   a form somebody laid out rather than fields dropped on a page. */
.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
  max-width: 54rem;
}
@media (min-width: 46em) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.field { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: var(--lbl); letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-3);
}
.opt { text-transform: none; letter-spacing: .04em; }
.field input, .field textarea, .field select {
  font-family: var(--sans);
  font-size: clamp(1rem, 1vw, 1.08rem);
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: .8rem 0;
  min-height: 48px;
  transition: border-color .4s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; line-height: 1.7; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-bottom-color: var(--sage-dim);
  box-shadow: 0 1px 0 var(--sage-dim);
}
/* a keyboard arriving on a field gets the full ring, the way every other
   control on the page does; a pointer click keeps the quiet underline */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 4px;
}
.select-wrap { position: relative; }
.select-wrap select { appearance: none; padding-right: 2rem; cursor: pointer; }
.select-wrap select.is-prefilled { border-bottom-color: var(--sage); }
.select-arrow {
  position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 1.4;
  pointer-events: none;
}
.reassure {
  grid-column: 1 / -1;
  border-left: 1px solid var(--sage);
  padding-left: clamp(1.2rem, 2.4vw, 2rem);
  color: var(--ink-2);
  font-size: var(--small);
}
.reassure p { margin: 0 0 .35em; }
.reassure strong { color: var(--ink); font-weight: 500; }
.form-actions { grid-column: 1 / -1; }

/* A quiet error state. Sage is the page's accent but it reads as approval, so
   errors take a deeper ink and say what to do rather than what went wrong. */
.field.is-bad input, .field.is-bad textarea, .field.is-bad select {
  border-bottom-color: var(--ink);
  border-bottom-width: 2px;
}
.field__hint {
  margin: 0;
  font-size: clamp(.92rem, .95vw, 1.02rem);
  line-height: 1.5;
  color: var(--ink-2);
  font-style: italic;
  font-family: var(--serif);
}
.field__hint[hidden] { display: none; }
.form-thanks {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--ink); max-width: 40ch;
}

.closing {
  margin-top: clamp(5rem, 11vh, 9rem);
  padding-top: clamp(3.5rem, 8vh, 6rem);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.6rem, 4vw, 3rem);
}
.closing__line { font-style: italic; color: var(--ink); margin: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--night);
  color: rgba(246, 241, 230, .78);
  padding: clamp(4rem, 9vh, 7rem) 0 clamp(3rem, 6vh, 4.5rem);
}
.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.brand--footer img { filter: invert(1) brightness(1.9); width: clamp(150px, 16vw, 210px); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.footer-links a {
  color: rgba(246, 241, 230, .82); text-decoration: none;
  font-size: var(--small);
  display: inline-flex; gap: .7em; align-items: baseline;
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.footer-links a:hover { color: #fff; border-bottom-color: var(--sage); }
.footer-links__k {
  font-size: var(--lbl); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(246, 241, 230, .72);
  min-width: 6.2em;
}
.footer-note {
  margin: 0;
  font-size: var(--small);
  color: rgba(246, 241, 230, .74);
  max-width: 26ch;
}

/* ==========================================================================
   ENTRANCES
   ========================================================================== */
.rise { display: block; overflow: hidden; padding-bottom: .06em; }
.rise__i {
  display: block;
  transform: translateY(115%);
  animation: riseUp 1.15s var(--ease) both;
  animation-delay: var(--d, 0s);
}
.rise--sm .rise__i { animation-duration: .9s; }
@keyframes riseUp { to { transform: translateY(0); } }
html:not(.js) .rise__i { transform: none; animation: none; }

[data-r] {
  opacity: 1;
  transform: none;
  transition: opacity .95s var(--ease), transform .95s var(--ease);
}
[data-r].is-in { opacity: 1; transform: none; }
html:not(.js) [data-r] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise__i { transform: none; animation: none; }
  [data-r] { opacity: 1; transform: none; transition: none; }
}


.form-trust {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 44ch;
  font-size: var(--small);
  line-height: 1.7;
  color: var(--ink-3);
}
.form-trust a {
  color: var(--sage-text);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.form-thanks a {
  color: var(--sage-text);
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   anything that is display:none and we want them to fill this in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* v10: hidden always wins over component display rules. */
[hidden] { display: none !important; }

/* Enhancement controls appear only when their handlers are ready. */
html:not(.js) [data-expander], html:not(.js) [data-close],
html:not(.js) .chips, html:not(.js) .ask__hint { display: none; }
.js .ask__fallback { display: none; }
html:not(.js) .panel__inner { overflow: visible; }
html:not(.js) .flip__inner { transform: rotateY(180deg); }
@media (max-width: 860px) {
  html:not(.js) .site-header { position: relative; background: var(--paper); }
  html:not(.js) .header-inner { flex-wrap: wrap; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { position: static; display: flex; width: 100%; padding: 1rem 0; border: 0; }
  html:not(.js) .site-nav ul { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
}

.hero__actions .hero__meta { margin: 0 0 1rem; max-width: 32ch; font-size: 1rem; color: var(--ink-2); }
.hero__foot { justify-content: flex-end; }
.hero__media img { filter: none; }
@keyframes heroIn { from { scale: 1.04; } to { scale: 1; } }
.ask__hint { margin: 1.5rem 0 0; max-width: 42ch; color: var(--ink-2); }
.chips { margin-top: 1.5rem; }
.chip { font-weight: 400; min-height: 44px; }
.said { display: flex; flex-wrap: wrap; max-width: 42rem; border-radius: 0; gap: .3rem 1.2rem; padding: .6rem 1rem; color: var(--ink-2); font-size: 1rem; }
.said__text { margin: 0; flex: 1 1 20rem; }
.said__clear, .said__next { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--sans); font-size: .9375rem; font-weight: 500; color: var(--ink); text-underline-offset: .25em; }
.said__clear { text-decoration: underline; padding: 0; }
.said__next { gap: .8rem; }
.services { padding-block: clamp(3.5rem, 7vh, 6rem); }
.services .sec-head { margin-bottom: 2.5rem; }
.link-btn { justify-self: start; min-height: 44px; }
.stories__skip { display: inline-flex; align-items: center; min-height: 44px; }
/* --- the scroll driven reveal --- */
.reveal { position: relative; height: calc(100svh + clamp(420px, 62vh, 760px)); }
.reveal__stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--night-2);
}
.reveal__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.reveal__after {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 calc((1 - var(--p, 0)) * 100%));
}
/* promoted only while its story is on screen, released again after */
.reveal.is-live .reveal__after { will-change: clip-path; }
.reveal__edge {
  position: absolute; top: 0; bottom: 0;
  left: calc((1 - var(--p, 0)) * 100%);
  width: 1px;
  background: rgba(246, 241, 230, .85);
  box-shadow: 0 0 22px 2px rgba(246, 241, 230, .3);
  opacity: var(--edge, 0);
  transition: opacity .4s linear;
}
.reveal__scrim {
  position: absolute; inset: 0;
  /* v8: gently lighten story-card overlays so photos feel less crushed */
  background:
    linear-gradient(to top, rgba(12, 12, 8, .78) 0%, rgba(12, 12, 8, .44) 34%, rgba(12, 12, 8, .08) 62%),
    linear-gradient(to bottom, rgba(12, 12, 8, .38) 0%, rgba(12, 12, 8, 0) 28%);
}
.reveal__marks {
  position: absolute;
  top: clamp(4.8rem, 12vh, 8rem);
  left: 0; right: 0;
  width: min(100% - (var(--gut) * 2), var(--max));
  margin-inline: auto;
  display: flex; justify-content: space-between;
  font-size: clamp(.72rem, .88vw, .92rem);
  letter-spacing: .3em; text-transform: uppercase; font-weight: 500;
}
.reveal__mark {
  padding: .72em 1.5em;
  border: 1px solid rgba(246, 241, 230, .34);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(12, 12, 8, .84);
  transition: opacity .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.reveal__mark--b { opacity: calc(1 - var(--p, 0)); color: rgba(246, 241, 230, .95); }
.reveal__mark--a {
  opacity: var(--p, 0); color: #cbd6b8;
  border-color: rgba(203, 214, 184, .55);
  background: rgba(12, 16, 8, .84);
}

.reveal__caption {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(3.4rem, 8vh, 6rem);
  width: min(100% - (var(--gut) * 2), var(--max));
  margin-inline: auto;
}
.reveal__caption .eyebrow {
  margin-bottom: clamp(.9rem, 2vh, 1.5rem);
  color: rgba(246, 241, 230, .92);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .92), 0 0 3px rgba(0, 0, 0, .55);
}
.story__title { text-shadow: 0 2px 40px rgba(0, 0, 0, .5); }

.reveal__meter {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: rgba(246, 241, 230, .16);
}
.reveal__meterfill {
  display: block; height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--sage);
}

/* --- story copy under each reveal (v9 wipe layout) --- */
.story { position: relative; }
.story__copy {
  padding: clamp(3.6rem, 8vh, 6.5rem) 0 clamp(4.5rem, 10vh, 8rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.6rem, 5vw, 5rem);
  align-items: end;
  border-bottom: 1px solid var(--line-light);
  max-width: 68rem;
}
.story__copy > * { max-width: 100%; }
.story__lede { max-width: 46ch; }
.story__lede p {
  margin: 0 0 .7em;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.1vw, 1.85rem);
  font-weight: 300;
  line-height: 1.42;
  color: rgba(246, 241, 230, .9);
}
.story__copy .link-btn { color: rgba(246, 241, 230, .7); margin: 0; white-space: nowrap; }
.story__copy .link-btn:hover { color: var(--cream); }
.story.is-surfaced .story__lede p { color: #fff; }
.story.is-surfaced .story__copy { border-bottom-color: var(--sage); }
.story__title { text-shadow: 0 2px 40px rgba(0, 0, 0, .5); }

.contact { padding-block: clamp(3.5rem, 7vh, 6rem); }
.contact-intro { gap: 1.2rem 3rem; align-items: center; }
.contact-intro .eyebrow { margin-bottom: 0; }
.contact-intro__copy { margin-top: 0; }
.contact-intro__copy p:last-child { margin-bottom: 0; }
.form-shell { margin-top: 1.75rem; padding-top: 1.75rem; }
.form { gap: 1.4rem 2rem; }
.field label { color: var(--ink-2); letter-spacing: .08em; }
.field input, .field textarea, .field select { font-weight: 400; border-bottom-color: var(--ink-3); background: rgba(142, 155, 126, .05); padding-inline: .6rem; }
.field__help { margin: 0; font-size: .9375rem; color: var(--ink-2); }
.form-error, .form-fallback { max-width: 48ch; color: var(--ink-2); }
.form-error a, .form-fallback a { color: var(--sage-text); text-underline-offset: .2em; }
.form-error { padding: 1rem; border-left: 2px solid var(--ink); background: var(--cream); }
.form [type="submit"]:disabled { cursor: wait; opacity: .7; transform: none; }
.closing { margin-top: 2.5rem; padding-top: 2rem; }
@media (max-width: 860px) {
  .hero { padding-top: 7.5rem; padding-bottom: 3rem; }
  /* v13: no paper card / light scrim here — dark charcoal hero owns mobile colors above */
  .hero__actions { display: table; max-width: 100%; margin-top: 1.75rem; background: transparent; padding: 0; }
  .hero__actions .hero__meta { font-size: 1rem; line-height: 1.55; max-width: 29ch; color: rgba(246, 241, 230, .84); }
  .hero .cta { font-size: 1.25rem; min-height: 44px; align-items: center; color: var(--cream); }
  .hero__foot { display: none; }
  .hero__soft { font-weight: 400; }
  .ask-sec { padding-block: 3rem; }
  .chip { padding: .65em 1.2em; min-height: 44px; }
  .svc__card { padding-block: 1.75rem; }
  .support { padding-block: 3rem; }
  .support__copy { margin-top: 1.5rem; }
  .about-copy { padding-block: 3.5rem; }
  .about-fig { min-height: 56svh; }
}
@media (max-width: 760px) {
  .story__copy { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; }
  .story__copy .link-btn { margin-top: 2rem; }
  .reveal__marks { top: clamp(4.4rem, 10vh, 6rem); }
  .form .btn { padding-inline: 1.2rem; letter-spacing: .07em; }
  .site-footer { padding-block: 3rem; }
}
/* Sol 2026-09-03: static Before/After when motion is reduced — no scroll wipe. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    height: auto;
  }
  .reveal__stage {
    position: relative;
    height: auto;
    min-height: min(72svh, 640px);
  }
  .reveal__after {
    clip-path: inset(0 0 0 50%);
  }
  .reveal__edge {
    left: 50%;
    opacity: 1;
  }
  .reveal__mark--b,
  .reveal__mark--a {
    opacity: 1;
  }
  .reveal__meter {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; }
  [data-parallax] { transform: none !important; }
}