/* ==========================================================================
   YOLEX LABS · warm paper · woodblock · one theme, no toggle

   Palette is pulled from bg-2.png so the page and the painting are one object:
   cream paper from the sky, green-teal ink from the pines, burnt orange from
   the sails. Candoor is the sibling site and shares this structure, but keeps
   its green accent. Same paper, same ink, different accent reads as a family.
   Identical would read as one product wearing two names.
   ========================================================================== */

:root {
  /* Paper and ink */
  --paper:      #faf5ea;
  --paper-warm: #f5ecdb;
  --ink:        #1b2b28;
  --ink-2:      #4a5c56;
  /* Was #7d8b85, which measured 3.27 on paper and 3.03 on paper-warm against
     AA's 4.5. The large-text exemption of 3.0 would have covered it, except
     every one of the 34 places this token is used is SMALL: 0.66rem to 0.95rem
     labels, footnotes, form help and panel captions. Smallest type on the
     lowest contrast, which is the worst pairing available, and it failed on
     plain paper with no artwork behind it at all.

     Gated on paper-warm rather than paper, since that is the darkest of the
     three surfaces this sits on and the panels use it. 4.53 there, 4.88 on
     paper, 5.18 on the panel white. The scale still reads as three clear
     steps: 13.6, 6.5, 4.9. */
  --ink-3:      #636e69;

  /* The painting shows through everything below the hero at roughly 5%. Enough
     to read as warmth and grain, not enough to fight body copy. It is a fixed
     layer, so this slides gently behind the content as you scroll, which is
     where most of the life on this page comes from. */
  --scrim:      rgba(250, 245, 234, 0.945);
  --scrim-open: rgba(250, 245, 234, 0.86);
  --surface:    rgba(255, 252, 245, 0.72);
  --surface-2:  rgba(255, 252, 245, 0.92);

  --line:       #e4dac5;
  --line-2:     #d3c6ab;

  /* Burnt orange off the sails. --sea is the quiet second accent, off the water,
     used only where orange would shout. */
  --accent:      #b8541f;
  --accent-deep: #8d3d13;
  --accent-soft: #f7e5d4;
  --sea:         #3d6b6b;

  --shadow:    0 1px 2px rgba(27, 43, 40, 0.04), 0 10px 30px rgba(27, 43, 40, 0.07);
  --shadow-lg: 0 2px 4px rgba(27, 43, 40, 0.05), 0 20px 50px rgba(27, 43, 40, 0.1);

  /* One webfont. Newsreader carries the display voice; body and mono ride the
     system stacks, which is what keeps this page to a single font request. */
  --serif: "Newsreader", "Iowan Old Style", Charter, Palatino, Georgia, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --maxw:   1180px;
  --pad:    clamp(1.5rem, 5vw, 4.5rem);
  --radius: 14px;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -0.015em; }
/* Browsers give figure a 1em/40px margin. Unset, it indents any figure inside a
   .wrap and stops a full-bleed one reaching the viewport edge. */
figure, figcaption { margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* Small caps mono label. Used for eyebrows, product names and status chips, and
   it is the only place on the page where type is set in caps. */
.label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   THE PAINTING
   Fixed rather than a background on the hero, so the whole page crawls over one
   still image. That IS the parallax: no scroll listener, nothing to keep in
   sync, and it sidesteps background-attachment: fixed, which iOS has never
   handled properly. Sized to the viewport, which is what rescues the phone.
   ========================================================================== */
.art {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Plain url() first as the floor, then image-set for anything that can do
     better. AVIF is 191KB against the PNG's 2.5MB, which matters more here than
     anywhere else on the site: this is the LCP image on every page that uses it. */
  background: var(--paper-warm) url("/bg-2.png") 62% 42% / cover no-repeat;
  background-image: image-set(
    url("/bg-2.avif") type("image/avif"),
    url("/bg-2.webp") type("image/webp"),
    url("/bg-2.png") type("image/png"));
  transform-origin: 40% 55%;
}

/* One keyframe is all a static painting needs to stop reading as a screenshot.
   Slow enough that you never catch it moving, only notice it has. */
@media (prefers-reduced-motion: no-preference) {
  .art { animation: art-breathe 87s ease-in-out infinite alternate; }
}
@keyframes art-breathe { from { scale: 1.04; } to { scale: 1.09; } }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
  border-block-end: 1px solid transparent;
}
.nav--scrolled {
  background: rgba(250, 245, 234, 0.82);
  backdrop-filter: saturate(1.4) blur(14px);
  border-block-end-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  block-size: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.brand em { font-style: italic; color: var(--accent); }
/* Sized in em so it tracks the wordmark rather than needing a value per context. */
/* Sized by height to the wordmark's cap height rather than by width, so the mark
   sits level with the Y rather than overshooting it. Newsreader's caps are about
   0.7em. */
.brand__mark { block-size: 0.72em; inline-size: auto; flex: none; }
.footer__brand { display: flex; align-items: center; gap: 0.5rem; }
.footer__brand .brand__mark { block-size: 1em; inline-size: auto; opacity: 0.7; }

/* Auto margins on the menu rather than on the brand. Pushing the brand with
   margin-inline-end: auto shunted the links and the button into one cluster on
   the right; letting the menu absorb the free space on both sides sits it
   between them instead. */
.nav__inner > nav { margin-inline: auto; }

.nav__links { display: flex; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  text-decoration: none;
  font-size: 0.925rem;
  color: var(--ink-2);
  transition: color 0.2s ease;
  position: relative;
}
.nav__links a::after {
  content: "";
  position: absolute;
  inset-block-end: -4px;
  inset-inline: 0;
  block-size: 1px;
  background: var(--accent);
  scale: 0 1;
  transition: scale 0.28s ease;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { scale: 1 1; }

/* Raised off the baseline rather than set in parentheses, so it reads as a
   status marker on the word instead of part of the product's name. */
.nav__links small {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  vertical-align: 0.42em;
  margin-inline-start: 0.2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.4rem;
  border-radius: 999px;
  font-size: 0.925rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, translate 0.22s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--accent); color: #fff8ef; }
.btn--primary:hover { background: var(--accent-deep); translate: 0 -1px; }
/* Carries its own cream so it stays readable where it sits over the painting. */
.btn--ghost { border-color: var(--line-2); color: var(--ink); background: rgba(255, 252, 245, 0.78); backdrop-filter: blur(4px); }
.btn--ghost:hover { border-color: var(--ink-3); background: var(--surface-2); translate: 0 -1px; }
.btn--sm { padding: 0.55rem 1.1rem; font-size: 0.875rem; }

.nav__toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; color: var(--ink); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: flex;
  align-items: center;
  padding-block: 8rem 6rem;
}

/* bg-2's sun sits low on the LEFT, which is also where the type goes. The sky
   above it is pale enough to hold dark ink unaided, so this wash is not here to
   rescue legibility. It seats the type on the painting and keeps the teal top
   corner from competing. Angled down-right so it thins out before it reaches
   the sun rather than washing out the brightest part of the picture. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(250, 245, 234, 0.88) 0%,
      rgba(250, 245, 234, 0.8) 28%,
      rgba(250, 245, 234, 0.46) 46%,
      rgba(250, 245, 234, 0.1) 62%,
      rgba(250, 245, 234, 0) 74%),
    linear-gradient(to bottom, rgba(250, 245, 234, 0.32) 0%, rgba(250, 245, 234, 0) 16%);
}

.hero .wrap { position: relative; z-index: 1; }
.hero__text { max-inline-size: 46rem; }

.hero__eyebrow { margin-block-end: 1.75rem; }

/* Held to the same column width as the sub. At the smaller size the headline
   fits more words per line and the last one ran out past the point where the
   veil gives out, putting the orange italic straight over the orange clouds. */
.hero h1 {
  font-size: clamp(1.85rem, 4.8vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  max-inline-size: 34rem;
  margin-block-end: 1.9rem;
  overflow-wrap: break-word;
}
.hero h1 em { font-style: italic; color: var(--accent); }

/* Full-strength ink rather than --ink-2. Body copy sitting on paper can afford
   the softer grey; body copy sitting on a painting cannot. */
.hero__sub {
  font-size: clamp(1.075rem, 1.65vw, 1.25rem);
  color: var(--ink);
  max-inline-size: 34rem;
  margin-block-end: 2.1rem;
}

/* The three products, stated before they are named. */
/* Held inside the wash. Left to run its natural width it reaches past the point
   where the veil has given out and the island takes over, and small mono type
   over a woodblock treeline is unreadable. */
.hero__triad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.15rem;
  max-inline-size: 32rem;
  margin-block-end: 2.75rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.hero__triad span { display: inline-flex; align-items: center; gap: 1.15rem; }
.hero__triad span:not(:last-child)::after { content: "·"; color: var(--accent); opacity: 0.55; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.hero__scroll {
  position: absolute;
  inset-block-end: 2.5rem;
  inset-inline-start: var(--pad);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.hero__scroll::before {
  content: "";
  inline-size: 34px;
  block-size: 1px;
  background: var(--line-2);
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll::before { animation: rule-pulse 3.4s ease-in-out infinite; }
}
@keyframes rule-pulse { 0%, 100% { scale: 1 1; opacity: 0.6; } 50% { scale: 1.5 1; opacity: 1; } }

/* ==========================================================================
   THE FADE
   The painting does not stop at the hero, it recedes. This gradient rides over
   the fixed art and lands at 94.5% cream, so a whisper of the picture keeps
   sliding behind the content the whole way down.
   ========================================================================== */
main { position: relative; }

/* Wraps everything BELOW the hero. The gradient has to live here rather than on
   main, or it starts fading at main's top edge and bleaches the hero it is
   supposed to be sitting under. */
.page {
  position: relative;
  background: linear-gradient(to bottom,
    rgba(250, 245, 234, 0) 0,
    var(--scrim-open) 16vh,
    var(--scrim) 52vh);
}

section { padding-block: clamp(5rem, 11vh, 8.5rem); }

.sec__head { max-inline-size: 44rem; margin-block-end: 3.5rem; }
.sec__head .label { display: block; margin-block-end: 1.25rem; }
.sec__head h2 {
  font-size: clamp(1.95rem, 3.9vw, 3rem);
  margin-block-end: 1.25rem;
}
.sec__head p { color: var(--ink-2); font-size: 1.075rem; max-inline-size: 38rem; }

.rule { border: 0; border-block-start: 1px solid var(--line); margin: 0; }

/* ==========================================================================
   PROBLEM
   ========================================================================== */
.stat {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block-end: 2.5rem;
  margin-block-end: 2.5rem;
  border-block-end: 1px solid var(--line);
}
.stat b {
  font-family: var(--serif);
  font-size: clamp(4rem, 12vw, 8.5rem);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: var(--accent);
}
.stat span { font-size: 1.125rem; color: var(--ink-2); max-inline-size: 26rem; }

.problem__body { max-inline-size: 40rem; color: var(--ink-2); font-size: 1.075rem; }
.problem__body p + p { margin-block-start: 1.15rem; }
.problem__body strong { color: var(--ink); font-weight: 500; }

.modes { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.modes li { border-block-start: 2px solid var(--ink); padding-block-start: 1.15rem; }
.modes h3 { font-size: 1.2rem; margin-block-end: 0.55rem; }
.modes p { color: var(--ink-2); font-size: 0.975rem; }

/* ==========================================================================
   PRODUCTS · the centrepiece
   ========================================================================== */
.products { position: relative; }

.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* block-size: 100% so the card fills its grid cell. Without it each card is only
   as tall as its own copy, the three end up ragged, and the "Explore" links stop
   sitting on a common baseline. */
.card {
  position: relative;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 1.9rem 1.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(3px);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.28s ease, background 0.28s ease, translate 0.28s ease, box-shadow 0.28s ease;
}
/* The accent rule reads as a bookmark down the card's edge and is the only
   thing that moves on hover, which keeps a grid of three from feeling busy. */
.card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--accent);
  scale: 1 0;
  transform-origin: top;
  transition: scale 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover, .card:focus-visible {
  border-color: var(--line-2);
  background: var(--surface-2);
  translate: 0 -3px;
  box-shadow: var(--shadow-lg);
}
.card:hover::before, .card:focus-visible::before { scale: 1 1; }

.card__top { display: flex; align-items: center; gap: 0.6rem; margin-block-end: 1.9rem; flex-wrap: wrap; }
.card__name { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 600; }

.chip {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  white-space: nowrap;
}
.chip--live { background: var(--accent-soft); border-color: transparent; color: var(--accent-deep); }
.chip--dir { margin-inline-start: auto; }

.card h3 { font-size: 1.45rem; line-height: 1.22; margin-block-end: 1rem; }
.card p { color: var(--ink-2); font-size: 0.975rem; }
.card__tag { margin-block-start: 1rem; font-style: italic; font-family: var(--serif); font-size: 1.025rem; color: var(--ink); }

.card__go {
  margin-block-start: auto;
  padding-block-start: 1.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent);
}
.card__go svg { transition: translate 0.24s ease; }
.card:hover .card__go svg { translate: 4px 0; }

/* ==========================================================================
   THE LOOP · say, do, done
   ========================================================================== */
.loop { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.loop li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  align-items: start;
  padding-block: 2.25rem;
  border-block-start: 1px solid var(--line);
}
.loop li:last-child { border-block-end: 1px solid var(--line); }
.loop__num { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); padding-block-start: 0.35rem; letter-spacing: 0.08em; }
.loop h3 { font-size: 1.4rem; }
.loop h3 small { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-block-end: 0.6rem; }
.loop p { color: var(--ink-2); }

.loop__close { margin-block-start: 2.5rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--ink); max-inline-size: 34rem; line-height: 1.4; }

/* ==========================================================================
   PILOT
   ========================================================================== */
.pilot { display: grid; gap: 3.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pilot { grid-template-columns: 1.15fr 1fr; gap: 5rem; } }

.weeks { list-style: none; margin: 0; padding: 0; }
.weeks li { padding-block: 1.5rem; border-block-start: 1px solid var(--line); }
.weeks li:last-child { border-block-end: 1px solid var(--line); }
.weeks .label { display: block; margin-block-end: 0.5rem; color: var(--accent); }
.weeks h3 { font-size: 1.2rem; margin-block-end: 0.3rem; }
.weeks p { color: var(--ink-2); font-size: 0.975rem; }

.deliver {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 2rem;
  align-self: start;
  position: sticky;
  inset-block-start: 6rem;
}
.deliver .label { display: block; margin-block-end: 1.1rem; }
.deliver p { font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; }

/* ==========================================================================
   TEAM
   ========================================================================== */
.team__logos { display: flex; flex-wrap: wrap; gap: 0.85rem 2.5rem; align-items: center; margin-block: 2.75rem 1.5rem; list-style: none; padding: 0; }
.team__logos li { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); opacity: 0.62; }
.team__adv { color: var(--ink-3); font-size: 0.95rem; }

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */
.close { text-align: center; }
.close h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-block-end: 1.5rem; }
.close p { color: var(--ink-2); max-inline-size: 36rem; margin-inline: auto; font-size: 1.075rem; }
.close__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-block: 2.5rem 1.75rem; }
.close__mail { font-size: 0.95rem; color: var(--ink-3); }
.close__mail a { color: var(--accent); text-underline-offset: 3px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* Carries its own paper. The footer sits outside .page, so it never picked up
   the scrim and the painting was running at full strength behind the type.
   Matched to .page's final stop so the two meet without a seam. */
.footer {
  position: relative;
  background: var(--scrim);
  border-block-start: 1px solid var(--line);
  padding-block: 2.75rem;
}
.footer__inner { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; justify-content: space-between; }
.footer p { font-size: 0.875rem; color: var(--ink-2); }
.footer ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.footer a { font-size: 0.875rem; color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--accent); }

/* ==========================================================================
   REVEAL
   ========================================================================== */
/* Gated on .js, which the inline script in <head> sets. Without it every section
   below the hero would sit at opacity 0 forever if the script failed to run, a
   blocked bundle or an old browser would blank the page, and the content would
   be invisible to anything that does not execute JS. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; translate: 0 22px; transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), translate 0.85s cubic-bezier(0.22, 1, 0.36, 1); }
  .js .reveal.is-in { opacity: 1; translate: 0 0; }
  .reveal[data-d="1"] { transition-delay: 0.1s; }
  .reveal[data-d="2"] { transition-delay: 0.2s; }
  .reveal[data-d="3"] { transition-delay: 0.3s; }
  .reveal[data-d="4"] { transition-delay: 0.4s; }

  /* Hero comes in on load rather than on scroll, staggered down the column. */
  .js .hero__text > * { opacity: 0; translate: 0 18px; animation: rise 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .hero__text > :nth-child(1) { animation-delay: 0.15s; }
  .hero__text > :nth-child(2) { animation-delay: 0.28s; }
  .hero__text > :nth-child(3) { animation-delay: 0.41s; }
  .hero__text > :nth-child(4) { animation-delay: 0.54s; }
  .hero__text > :nth-child(5) { animation-delay: 0.67s; }
  .js .hero__scroll { opacity: 0; animation: rise 1s ease forwards 1.1s; }
}
@keyframes rise { to { opacity: 1; translate: 0 0; } }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute;
    inset-block-start: 72px;
    inset-inline: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-block: 1px solid var(--line);
    padding: 0.5rem var(--pad) 1.25rem;
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links li { border-block-end: 1px solid var(--line); }
  .nav__links li:last-child { border: 0; }
  .nav__links a { display: block; padding-block: 0.9rem; font-size: 1rem; }
  .nav__links a::after { display: none; }
  .nav .btn--primary { display: none; }
  .nav--open { background: var(--paper); }

  .loop li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem 1rem; }
  .loop__num { grid-row: 1; }
  .loop p { grid-column: 2; }
  .deliver { position: static; }

  /* Portrait crops the landscape painting to a narrow vertical slice. 68% landed
     on the island, which is the busiest part of the picture and the worst thing
     to put type over. 26% is open water and the sun. */
  .art { background-position: 26% 52%; }

  /* The desktop veil washes the left and leaves the right vivid, which only
     works while the type occupies one half. On a phone it spans the full width,
     so the wash has to as well and the gradient runs top to bottom instead. */
  .hero::before {
    background: linear-gradient(to bottom,
      rgba(250, 245, 234, 0.88) 0%,
      rgba(250, 245, 234, 0.82) 52%,
      rgba(250, 245, 234, 0.62) 78%,
      rgba(250, 245, 234, 0.42) 100%);
  }

  .hero__triad { max-inline-size: none; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero { min-block-size: 92svh; }
  .stat { gap: 0.75rem; }
}

/* ==========================================================================
   SUB PAGES
   Same nav, same painting, same palette as the landing pages. The only thing
   that changes is how much runway there is before the content starts: a landing
   page is an arrival, a privacy policy is a document someone came to read.
   ========================================================================== */
.subhero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: 28svh;
  padding-block: 8.5rem 2.75rem;
}
.subhero--tall { min-block-size: 40svh; padding-block-end: 3.5rem; }
.subhero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Mostly vertical, unlike the landing heroes. Those wash one side and leave the
     other vivid because a headline occupies half the width. Here the title is
     short and the job is to hand over cleanly to the document below, so the veil
     closes back up toward its own bottom edge and meets .page--doc without a
     visible seam. */
  background:
    linear-gradient(to bottom,
      rgba(250, 245, 234, 0.6) 0%,
      rgba(250, 245, 234, 0.52) 48%,
      rgba(250, 245, 234, 0.74) 100%),
    linear-gradient(100deg,
      rgba(250, 245, 234, 0.45) 0%,
      rgba(250, 245, 234, 0.12) 55%,
      rgba(250, 245, 234, 0) 85%);
}

/* Prose needs a quieter surface than a landing section does, and there is no
   reveal-the-painting moment to protect here, so this starts high and settles
   higher. The picture stays as warmth and grain, nothing more. */
.page--doc {
  background: linear-gradient(to bottom,
    rgba(250, 245, 234, 0.8) 0,
    rgba(250, 245, 234, 0.95) 20vh,
    rgba(250, 245, 234, 0.965) 50vh);
}
.subhero .wrap { position: relative; z-index: 1; }
.subhero .label { display: block; margin-block-end: 1rem; color: var(--ink-2); }
.subhero h1 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -0.022em; }
.subhero p { margin-block-start: 0.9rem; color: var(--ink); max-inline-size: 34rem; }

/* One painting, a different window onto it per page, so the sub pages read as
   one continuous world rather than the same image pasted five times. */
.art--water { background-position: 22% 62%; }
.art--sun { background-position: 8% 48%; }
.art--island { background-position: 86% 40%; }

/* ==========================================================================
   LONG FORM PROSE
   ========================================================================== */
.doc { max-inline-size: 46rem; }
.doc > :first-child { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.doc h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  margin-block: 3.25rem 1rem;
  padding-block-start: 2.25rem;
  border-block-start: 1px solid var(--line);
}
.doc h3 { font-size: 1.1rem; margin-block: 2rem 0.7rem; }
.doc p { margin-block-end: 1.15rem; color: var(--ink-2); }
.doc ul, .doc ol { margin: 0 0 1.15rem; padding-inline-start: 1.3rem; color: var(--ink-2); }
.doc li { margin-block-end: 0.5rem; }
.doc strong, .doc b { color: var(--ink); font-weight: 500; }
.doc a { color: var(--accent); text-underline-offset: 3px; }
.doc table { inline-size: 100%; border-collapse: collapse; margin-block-end: 1.5rem; font-size: 0.95rem; }
.doc th, .doc td { text-align: start; padding: 0.7rem 0.9rem; border-block-end: 1px solid var(--line); color: var(--ink-2); }
.doc th { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }


/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { display: grid; gap: 3rem; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }

.gets { list-style: none; margin: 0; padding: 0; }
.gets li { padding-block: 1.4rem; border-block-start: 1px solid var(--line); }
.gets li:last-child { border-block-end: 1px solid var(--line); }
.gets b { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-block-end: 0.45rem; font-weight: 400; }
.gets p { color: var(--ink-2); font-size: 0.975rem; }
.contact__mail { margin-block-start: 2rem; font-size: 0.95rem; color: var(--ink-2); }
.contact__mail a { color: var(--accent); text-underline-offset: 3px; }

.cform {
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  display: grid;
  gap: 1.15rem;
}
.cf-field { display: grid; gap: 0.4rem; }
.cf-field label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.cf-field input,
.cf-field textarea {
  font: inherit;
  font-size: 0.975rem;
  color: var(--ink);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.9);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cf-field textarea { resize: vertical; min-block-size: 6.5rem; line-height: 1.55; }
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: var(--ink-3); }
.cf-field input:focus,
.cf-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184, 84, 31, 0.13);
}
.cform .btn { inline-size: 100%; justify-content: center; }
.cf-note { font-size: 0.82rem; color: var(--ink-3); text-align: center; }
.cf-error { font-size: 0.87rem; color: var(--accent-deep); }
.cf-error a { color: inherit; }

.cdone {
  display: none;
  flex-direction: column;
  gap: 0.7rem;
  padding: 2.5rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.cdone h2 { font-size: 1.5rem; }
.cdone p { color: var(--ink-2); }

/* ==========================================================================
   QUESTIONS
   Shared by how-we-evaluate and arm.
   ========================================================================== */
/* ---- Questions. details/summary rather than a scripted accordion, so it works
   with no JS and stays keyboard operable for free. ---- */
.faq { border-block-start: 1px solid var(--line); }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 1.35rem;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.12rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--accent);
  transition: rotate 0.25s ease;
}
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:hover { color: var(--accent-deep); }
.faq details p { padding-block-end: 1.6rem; color: var(--ink-2); max-inline-size: 46rem; }