/* ==========================================================================
   Zion Publishing House: design system v4 ("Modern Park Service")
   Palette is Colin's brand sheet, verbatim. Sturdy grotesk type, flat blocks
   of earth color, diamond motif, topo texture, one photograph in the hero.
   Tune everything from the tokens below.
   ========================================================================== */

:root {
  /* Brand palette (from the ZPH color sheet) */
  --bark:      #403827;
  --forest:    #2E3E1B;
  --sandstone: #E4522B;
  --gold:      #D69820;
  --sand:      #CBBCA3;

  /* Derived surfaces and text */
  --bark-deep:   #2A251A;
  --forest-deep: #22301A;
  --sand-light:  #F1EBE0;
  --sand-mid:    #DDD2BE;
  --sand-line:   #BBAD92;
  --cream:       #F6F1E7;
  --paper-white: #FBF8F2;
  --ink:         #2A251A;
  --ink-2:       #4F4636;
  --ink-3:       #524838;
  --on-dark:     #F3EDE0;
  --on-dark-2:   #D6CDB9;
  --on-dark-3:   #B3A88F;
  --sandstone-ink: #B8401E;  /* AA-safe sandstone for text on sand-light */
  --gold-ink:      #855C10;  /* AA-safe gold for text on sand-light */
  --error: #B8401E;

  /* Header: near-black bark. The wordmark is recolored from --logo-color
     (true forest #2E3E1B is only ~1.5:1 on this background, so it cannot be used as-is). */
  --header-bg:   #1B1711;
  --logo-color:  #E4522B;  /* brand sandstone, 4.71:1 on the header. #6F9247 (green) or var(--gold) also work. */

  /* Type: one family, two widths */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* Type test (home hero + CTA band only, see .type-b). Neue Haas Grotesk and Söhne are licensed
     faces: add @font-face rules for them and point these two variables at them to test that pairing. */
  --font-display-test: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body-test: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.5rem, 1.4rem + 4vw, 4.9rem);
  --fs-h1:      clamp(2.2rem, 1.5rem + 2.6vw, 3.7rem);
  --fs-h2:      clamp(1.7rem, 1.3rem + 1.7vw, 2.6rem);
  --fs-h3:      clamp(1.1rem, 1.05rem + .4vw, 1.35rem);
  --fs-lead:    clamp(1.02rem, 1rem + .3vw, 1.15rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;

  /* Rhythm */
  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem;
  --s-5: 3rem;  --s-6: 4rem; --s-7: 6rem;  --s-8: 8rem;
  --section-y: clamp(3.5rem, 2.5rem + 4.5vw, 6.5rem);
  --container: 75rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --radius: 6px;
  --radius-lg: 12px;
  --rule: 1px solid var(--sand-line);
  --rule-dark: 1px solid rgba(243, 237, 224, .16);
  --shadow-tile: 0 18px 30px -18px rgba(42, 37, 26, .45);
  --shadow-float: 0 24px 50px -26px rgba(42, 37, 26, .45);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-smooth: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 160ms; --t-med: 260ms; --t-slow: 650ms;
  --header-h: 84px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (min-width: 1800px) { html { font-size: 17px; } }
@media (min-width: 2300px) { html { font-size: 18px; } }
body {
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.6;
  color: var(--ink); background: var(--sand-light);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  padding-top: var(--header-h);
}
body.is-locked { overflow: hidden; }
img, picture, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font); font-weight: 700; line-height: 1.04;
  letter-spacing: -.02em; color: var(--bark); text-wrap: balance;
  font-variation-settings: "wdth" 82;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; font-variation-settings: "wdth" 90; letter-spacing: -.01em; }
p { max-width: 66ch; }
strong { font-weight: 600; }
::selection { background: var(--gold); color: var(--bark-deep); }
:focus-visible { outline: 3px solid var(--sandstone); outline-offset: 3px; border-radius: 3px; }
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 3000; background: var(--bark-deep); color: var(--on-dark); padding: .75rem 1.25rem; }
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--text { max-width: 780px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type helpers ---------- */
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); }
.small { font-size: var(--fs-small); color: var(--ink-3); }
.link { color: var(--bark); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; transition: color var(--t-fast); }
.link:hover { color: var(--sandstone-ink); }
.placeholder { background: var(--gold); color: var(--bark-deep); padding: 0 .3em; border-radius: 3px; }
.dia { display: inline-block; width: .5em; height: .5em; background: currentColor; transform: rotate(45deg); border-radius: 1px; vertical-align: middle; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; padding: .85rem 1.6rem;
  font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none;
  border-radius: var(--radius); border: 2px solid transparent; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(42, 37, 26, .55); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--cta { background: var(--gold); color: var(--bark-deep); border-color: var(--gold); }
/* Header CTA only. Uncomment to test a cream button against the orange wordmark. */
/* .site-header .btn--cta { background: var(--cream); border-color: var(--cream); }
   .site-header .btn--cta:hover { background: #fff; border-color: #fff; } */
.btn--cta:hover { background: #E6A72F; border-color: #E6A72F; }
.btn--primary { background: var(--forest); color: var(--on-dark); border-color: var(--forest); }
.btn--primary:hover { background: var(--forest-deep); border-color: var(--forest-deep); }
.btn--ghost { background: transparent; color: var(--bark); border-color: var(--bark); }
.btn--ghost:hover { background: var(--bark); color: var(--on-dark); }
.btn--ghost-light { background: transparent; color: var(--on-dark); border-color: rgba(243, 237, 224, .45); }
.btn--ghost-light:hover { border-color: var(--on-dark); background: rgba(243, 237, 224, .08); }
.btn--sm { min-height: 42px; padding: .55rem 1.1rem; font-size: .95rem; }
.btn--cta::after, .btn--primary::after {
  content: ""; width: 1em; height: 1em; flex: none; margin-left: .1rem;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-med) var(--ease-out);
}
.btn--cta:hover::after, .btn--primary:hover::after { transform: translateX(4px); }
.btn--sm::after { display: none; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: var(--header-bg);
  border-bottom: 1px solid rgba(243, 237, 224, .08);
  transition: background var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.site-header.is-hidden { transform: translateY(-100%); }
@media (max-width: 1024px) { .site-header.is-scrolled .header-inner { height: var(--header-h); } .site-header.is-scrolled .brand__logo { height: 44px; } }
.site-header { transition: transform var(--t-med) var(--ease-out), background var(--t-med), border-color var(--t-med), box-shadow var(--t-med); }
.site-header.is-scrolled { border-bottom-color: rgba(243, 237, 224, .12); box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .7); }
.header-inner { max-width: 85rem; margin-inline: auto; padding: 0 var(--gutter); height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; transition: height var(--t-med); }
.site-header.is-scrolled .header-inner { height: 68px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
/* The wordmark is a mask filled with --logo-color, so the header logo is recolorable from the tokens. */
.brand__logo { display: block; height: 54px; aspect-ratio: 406 / 127; background: var(--logo-color); transition: height var(--t-med), background var(--t-fast);
  -webkit-mask: url("../images/logo-zion-cream.png") center / contain no-repeat; mask: url("../images/logo-zion-cream.png") center / contain no-repeat; }
.site-header.is-scrolled .brand__logo { height: 46px; }
@media (max-width: 640px) { .brand__logo { height: 44px; } .site-header.is-scrolled .brand__logo { height: 40px; } }

.primary-nav { display: none; }
.primary-nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); }
.primary-nav a:not(.btn) { text-decoration: none; font-weight: 500; font-size: .98rem; color: var(--on-dark-2); padding: .5rem 0; position: relative; transition: color var(--t-fast); }
.primary-nav a:not(.btn):hover, .primary-nav a[aria-current="page"] { color: var(--on-dark); }
.primary-nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sandstone); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease-out); }
.primary-nav a:not(.btn):hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -.6rem; color: var(--on-dark); border-radius: var(--radius); }
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 890; background: var(--header-bg); color: var(--on-dark);
  overflow-y: auto;
  padding: var(--s-2) var(--gutter) var(--s-4); display: flex; flex-direction: column;
  border: 0; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s var(--t-med);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-nav:focus { outline: none; }
.mobile-nav a:not(.btn):focus:not(:focus-visible) { outline: none; }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav li { border: 0; }
.mobile-nav a:not(.btn) { display: block; padding: .95rem 0; text-decoration: none; font-size: 1.25rem; font-weight: 600; font-variation-settings: "wdth" 92; color: var(--on-dark); }
.mobile-nav a[aria-current="page"] { color: var(--gold); }
.mobile-nav .btn { margin-top: var(--s-4); width: 100%; }
.mobile-nav__foot { margin-top: auto; padding-top: var(--s-4); color: var(--on-dark-3); font-size: var(--fs-small); }
.mobile-nav__foot a { color: var(--on-dark-2); }
.site-header.menu-open { border-bottom-color: transparent; }
.site-header.menu-open .nav-toggle { color: var(--on-dark); }
@media (min-width: 1025px) { .primary-nav { display: block; } .nav-toggle, .mobile-nav { display: none; } }

.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 960; background: var(--sandstone); transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--sand { background: var(--paper-white); border-block: var(--rule); }
.section--sand-mid { background: var(--paper-white); border-block: var(--rule); }
.section--cream { background: var(--cream); }
.section--forest { background: var(--forest); color: var(--on-dark); }
.section--bark { background: var(--bark); color: var(--on-dark); }
.section--forest h1, .section--forest h2, .section--forest h3,
.section--bark h1, .section--bark h2, .section--bark h3 { color: var(--on-dark); }
.section--forest .lead, .section--bark .lead { color: var(--on-dark-2); }
.section--forest .small, .section--bark .small { color: var(--on-dark-3); }
.section--forest .link, .section--bark .link { color: var(--on-dark); }
.section--forest .link:hover, .section--bark .link:hover { color: var(--gold); }

.section-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.section-head h2 { max-width: 18ch; }
.section-head .lead { max-width: 56ch; }
.section-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); }
@media (min-width: 1025px) { .section-head--split { grid-template-columns: 1fr 1fr; align-items: end; } }

.split { display: grid; gap: var(--s-4); }
.split__head h2 { max-width: 14ch; }
.split__head .lead { margin-top: var(--s-3); }
.split__head .btn { margin-top: var(--s-4); }
@media (min-width: 1025px) {
  .split { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .split__head { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* Topographic texture (inline SVG data URI, tiled) */
.topo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23403827' stroke-opacity='.13' stroke-width='1.2'%3E%3Cpath d='M-20 120c60-40 120-60 200-40s120 80 200 60 120-70 160-60'/%3E%3Cpath d='M-20 160c60-40 120-60 200-40s120 80 200 60 120-70 160-60'/%3E%3Cpath d='M-20 200c60-40 120-60 200-40s120 80 200 60 120-70 160-60'/%3E%3Cpath d='M-20 380c70 30 130 40 210 10s130-70 210-40 100 60 140 50'/%3E%3Cpath d='M-20 420c70 30 130 40 210 10s130-70 210-40 100 60 140 50'/%3E%3Cpath d='M-20 460c70 30 130 40 210 10s130-70 210-40 100 60 140 50'/%3E%3Cpath d='M300 290c30-30 80-40 120-20s60 60 100 60'/%3E%3Cpath d='M300 320c30-30 80-40 120-20s60 60 100 60'/%3E%3Cpath d='M20 260c30-20 70-20 100 0s50 40 90 30'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Hero ----------
   Dark bark block, copy left, one photograph right in an offset forest frame.
   The figure is the media slot: an <img> today, a muted <video> if a brand film is made. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bark-deep); color: var(--on-dark); padding-block: clamp(3rem, 6vw, 6rem) clamp(3.5rem, 7vw, 7rem); }
.hero .topo { opacity: .28; filter: invert(1) sepia(1) saturate(4) hue-rotate(5deg); }
.hero__inner { position: relative; z-index: 1; display: grid; gap: var(--s-6); }
.hero__copy { max-width: 620px; }
.hero h1 { color: var(--on-dark); font-size: var(--fs-display); font-variation-settings: "wdth" 78; letter-spacing: -.025em; line-height: .98; }
.hero__lead { margin-top: var(--s-4); font-size: clamp(1.1rem, 1.02rem + .4vw, 1.3rem); line-height: 1.55; color: var(--on-dark-2); max-width: 50ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.hero__note { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--on-dark-3); }
.hero .btn--ghost { color: var(--on-dark); border-color: rgba(243, 237, 224, .45); }
.hero .btn--ghost:hover { background: rgba(243, 237, 224, .1); border-color: var(--on-dark); color: var(--on-dark); }

.hero__figure { position: relative; margin: 0; max-width: 560px; }
.hero__frame { position: relative; aspect-ratio: 5 / 4; }
.hero__frame::before { content: ""; position: absolute; z-index: 0; inset: 1.25rem -1.25rem -1.25rem 1.25rem; background: var(--forest); border-radius: var(--radius-lg); }
.hero__frame img, .hero__frame video { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; border-radius: var(--radius-lg); background: var(--sand-mid); box-shadow: var(--shadow-float); }
.hero__figure figcaption { margin-top: calc(var(--s-3) + 1.25rem); font-size: var(--fs-small); color: var(--on-dark-2); font-weight: 600; }
.hero__figure figcaption span { display: block; font-weight: 400; color: var(--on-dark-3); }
@media (max-width: 640px) { .hero__figure { margin-right: .9rem; } .hero__frame::before { inset: .9rem -.9rem -.9rem .9rem; } }
@media (min-width: 641px) { .hero__frame { aspect-ratio: 4 / 5; } }
@media (min-width: 1025px) {
  .hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 7rem); align-items: center; }
  .hero__figure { justify-self: end; width: 100%; }
}
@media (min-width: 1441px) { .hero { min-height: 78vh; display: flex; align-items: center; } .hero__inner { width: 100%; } }

/* Entrance: copy lines rise in sequence, the photo settles after them. One orchestrated moment; nothing else on the page auto-animates. */
.hero__copy[data-animate] > * { opacity: 0; transform: translateY(22px); }
.hero__copy.is-ready > * { opacity: 1; transform: none; transition: opacity 1300ms var(--ease-smooth), transform 1300ms var(--ease-smooth); }
.hero__copy.is-ready > :nth-child(2) { transition-delay: 220ms; }
.hero__copy.is-ready > :nth-child(3) { transition-delay: 440ms; }
.hero__copy.is-ready > :nth-child(4) { transition-delay: 660ms; }
.hero__figure { opacity: 0; transform: translateY(18px); }
.hero.is-live .hero__figure { opacity: 1; transform: none; transition: opacity 1400ms var(--ease-smooth) 500ms, transform 1400ms var(--ease-smooth) 500ms; }
.no-js .hero__figure { opacity: 1; transform: none; }

/* Ticker (Onyx-style service strip) */
.ticker { background: var(--forest); color: var(--on-dark); overflow: hidden; padding: .85rem 0; border-block: 1px solid rgba(243, 237, 224, .1); }
.ticker__track { display: flex; width: max-content; gap: 2.5rem; animation: ticker 48s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; gap: 2.5rem; align-items: center; white-space: nowrap; font-weight: 600; font-size: .95rem; letter-spacing: .01em; }
.ticker__group .dia { color: var(--gold); width: .45em; height: .45em; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; width: auto; flex-wrap: wrap; } .ticker__group[aria-hidden] { display: none; } .ticker__group { flex-wrap: wrap; justify-content: center; width: 100%; } }

/* Stats strip */
.stats { background: var(--cream); border-bottom: var(--rule); }
.stats__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-left: var(--rule); }
.stats__row > li { padding: var(--s-4) var(--s-3); border-right: var(--rule); border-bottom: var(--rule); }
.stats__num { display: block; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); font-weight: 700; font-variation-settings: "wdth" 80; letter-spacing: -.02em; line-height: 1; color: var(--forest); font-variant-numeric: tabular-nums; }
.stats__num .dia { color: var(--sandstone); width: .3em; height: .3em; margin-left: .35rem; vertical-align: .35em; }
.stats__label { display: block; margin-top: .5rem; color: var(--ink-2); font-size: var(--fs-small); }
@media (min-width: 641px) { .stats__row { grid-template-columns: repeat(4, 1fr); } .stats__row > li { border-bottom: 0; } }

/* ---------- Work wall: books on colored tiles ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filters button {
  min-height: 42px; padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid var(--sand-line);
  font-weight: 500; font-size: var(--fs-small); color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filters button:hover { border-color: var(--bark); color: var(--bark); }
.filters button[aria-pressed="true"] { background: var(--bark); border-color: var(--bark); color: var(--on-dark); }
.section--forest .filters button { border-color: rgba(243, 237, 224, .3); color: var(--on-dark-2); }
.section--forest .filters button:hover { border-color: var(--on-dark); color: var(--on-dark); }
.section--forest .filters button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--bark-deep); }

.wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
@media (min-width: 641px)  { .wall { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
@media (min-width: 1025px) { .wall { grid-template-columns: repeat(4, 1fr); } }
.wall--3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 641px) { .wall--3 { grid-template-columns: repeat(3, 1fr); } }
.tile { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.tile[hidden] { display: none; }
.tile__art {
  position: relative; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; padding: 12%;
  background: var(--tile, var(--sand-mid)); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.tile__art img { position: absolute; top: 12%; left: 12%; width: 76%; height: 76%; max-width: none; max-height: none; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(42, 37, 26, .35)); transition: transform var(--t-med) var(--ease-out); }
.tile:hover .tile__art { transform: translateY(-8px); box-shadow: 0 32px 44px -22px rgba(42, 37, 26, .6); }
.tile:hover .tile__art img { transform: scale(1.06); }
.tile__meta { padding: var(--s-2) .25rem 0; }
.tile__meta h3 { font-size: 1.1rem; }
.tile__meta h3 a { text-decoration: none; color: inherit; transition: color var(--t-fast); }
.tile:hover .tile__meta h3 a { color: var(--sandstone-ink); }
.section--forest .tile:hover .tile__meta h3 a { color: var(--gold); }
a.tile__art { text-decoration: none; }
.tile__author { color: var(--ink-2); font-size: var(--fs-small); margin-top: .15rem; }
.tile__genre { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .8rem; font-weight: 500; color: var(--ink-3); }
.tile__genre .dia { width: .4em; height: .4em; color: var(--sandstone); }
.tile__link { display: inline-block; margin-top: .5rem; font-size: var(--fs-small); }
.tile__tag { display: inline-block; margin-top: .5rem; font-size: .78rem; font-weight: 600; color: var(--sandstone-ink); }
/* Tile color rotation */
.wall > :nth-child(4n+1) .tile__art { --tile: var(--sand-mid); }
.wall > :nth-child(4n+2) .tile__art { --tile: var(--forest); }
.wall > :nth-child(4n+3) .tile__art { --tile: var(--sand); }
.wall > :nth-child(4n+4) .tile__art { --tile: var(--bark); }
.section--forest .tile__meta h3, .section--bark .tile__meta h3 { color: var(--on-dark); }
.section--forest .tile__author, .section--forest .tile__genre { color: var(--on-dark-2); }
.section--forest .tile__link { color: var(--on-dark); }
.section--forest .wall > :nth-child(4n+2) .tile__art { --tile: var(--bark); }
.section--forest .wall > :nth-child(4n+4) .tile__art { --tile: var(--forest-deep); }
.wall__empty { padding: var(--s-5) 0; color: var(--ink-3); }

/* ---------- Spotlight carousel ---------- */
.spot { position: relative; --slide-w: 86vw; }
@media (min-width: 641px)  { .spot { --slide-w: 72vw; } }
@media (min-width: 1025px) { .spot { --slide-w: min(60%, 46rem); } }
.spot__viewport { overflow: hidden; margin: 0 calc(-1 * var(--gutter)); padding: var(--s-2) 0 var(--s-3); touch-action: pan-y; cursor: grab; user-select: none; }
.spot__viewport:active { cursor: grabbing; }
.spot__viewport img { -webkit-user-drag: none; }
.spot__track { display: flex; gap: var(--s-4); will-change: transform; transition: transform 750ms var(--ease-smooth); }
.spot__track.no-anim { transition: none; }
.spot__slide { flex: 0 0 var(--slide-w); transform: scale(.9); opacity: .4; transition: transform 750ms var(--ease-smooth), opacity 750ms var(--ease-smooth); }
.spot__slide.is-active { transform: scale(1); opacity: 1; }
.spot__slide:not(.is-active) .feature { pointer-events: auto; cursor: pointer; }
.feature { display: grid; grid-template-columns: 1fr; text-decoration: none; color: inherit; background: var(--cream); border: 1px solid var(--sand-mid); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 18px 40px -24px rgba(42, 37, 26, .35); height: 100%; }
.feature__art { position: relative; background: var(--tile, var(--sand-mid)); aspect-ratio: 4 / 3; }
.feature__art img { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(42, 37, 26, .3)); transition: transform 900ms var(--ease-smooth); }
.spot__slide.is-active .feature:hover .feature__art img { transform: scale(1.04); }
.feature__body { padding: var(--s-3) var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: .35rem; }
.feature__body h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.7rem); margin-top: .25rem; }
.feature__author { color: var(--ink-2); }
.feature__desc { color: var(--ink-2); font-size: .95rem; margin-top: .5rem; max-width: 40ch; }
.feature__body .case__cta { margin-top: auto; padding-top: var(--s-3); }
.spot__slide.is-active .feature:hover .case__cta { color: var(--sandstone-ink); }
@media (min-width: 641px) {
  .feature { grid-template-columns: 5fr 7fr; }
  .feature__art { aspect-ratio: auto; min-height: 100%; }
  .feature__body { padding: var(--s-4); }
}
.spot__controls { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); }
.spot__btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--sand-line); color: var(--bark); display: grid; place-items: center; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.spot__btn:hover { background: var(--bark); border-color: var(--bark); color: var(--on-dark); }
.spot__btn svg { width: 20px; height: 20px; }
.spot__dots { display: flex; justify-content: center; gap: .3rem; }
.spot__dots button { width: 24px; height: 24px; display: grid; place-items: center; }
.spot__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sand-line); transition: width var(--t-med) var(--ease-out), background var(--t-fast); }
.spot__dots button:hover::before { background: var(--bark); }
.spot__dots button[aria-current="true"]::before { width: 24px; border-radius: 4px; background: var(--sandstone); }

/* Strip mode: three visible, no dimming, cards flush left */
.spot--strip .spot__slide { flex: 0 0 100%; transform: none; opacity: 1; }
@media (min-width: 641px)  { .spot--strip .spot__slide { flex-basis: calc((100% - var(--s-4)) / 2); } }
@media (min-width: 1025px) { .spot--strip .spot__slide { flex-basis: calc((100% - 2 * var(--s-4)) / 3); } }
.spot--strip .spot__viewport { margin: 0; padding: var(--s-1) 0 var(--s-3); }
.spot--strip .review { height: 100%; }
.spot__btn--light { border-color: rgba(243, 237, 224, .35); color: var(--on-dark); }
.spot__btn--light:hover { background: var(--gold); border-color: var(--gold); color: var(--bark-deep); }
.spot__dots--light button::before { background: rgba(243, 237, 224, .3); }
.spot__dots--light button:hover::before { background: var(--on-dark); }
.spot__dots--light button[aria-current="true"]::before { background: var(--gold); }

/* Quick-view book card */
.modal--book .modal__card { width: min(100%, 780px); padding: 0; overflow: hidden; border-top: 0; }
.modal--book .modal__close { z-index: 5; width: 44px; height: 44px; top: .8rem; right: .8rem; background: var(--bark-deep); color: var(--on-dark); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.modal--book .modal__close:hover { background: var(--sandstone); color: var(--bark-deep); }
.modal--book .modal__close svg { width: 22px; height: 22px; }
.bookcard { display: grid; grid-template-columns: 38% 1fr; }
.bookcard__art { position: relative; background: var(--sand-mid); min-height: 200px; }
.bookcard__art img { position: absolute; top: 12%; left: 12%; width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(42, 37, 26, .25)); }
.bookcard__body { padding: clamp(1.1rem, 4vw, 2.5rem); }
.modal__close-text { display: none; }
@media (max-width: 640px) { .modal__close-text { display: inline-flex; } .modal--book .modal__actions .btn { flex: 1 1 100%; } .bookcard__body h2 { font-size: 1.3rem; padding-right: 2.4rem; } }
.bookcard__genre { font-size: .8rem; font-weight: 600; color: var(--sandstone-ink); display: inline-flex; align-items: center; gap: .4rem; }
.bookcard__genre .dia { width: .45em; height: .45em; }
.bookcard__body h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); margin-top: .4rem; padding-right: 2rem; }
.bookcard__author { color: var(--ink-2); margin-top: .2rem; }
.bookcard__body > p:not(.bookcard__genre):not(.bookcard__author) { margin-top: var(--s-3); color: var(--ink-2); }
.modal--book .modal__actions { margin-top: var(--s-4); }
@media (min-width: 641px) { .bookcard { grid-template-columns: 5fr 7fr; } .bookcard__art { min-height: 100%; } }

/* ---------- Case studies ---------- */
.cases { display: grid; gap: var(--s-4); }
@media (min-width: 641px) { .cases { grid-template-columns: repeat(3, 1fr); } }
.case { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--cream); box-shadow: 0 10px 24px -18px rgba(42, 37, 26, .25); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--sand-mid); transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.case:hover { transform: translateY(-8px); box-shadow: 0 34px 48px -24px rgba(42, 37, 26, .6); border-color: var(--gold); }
.case:hover .case__art img { transform: scale(1.06); }
.case:hover .case__cta { color: var(--sandstone-ink); }
.case__art { --art-h: clamp(220px, 22vw, 300px); height: var(--art-h); position: relative; background: var(--tile, var(--sand)); display: flex; align-items: center; justify-content: center; padding: 1.5rem; overflow: hidden; }
.case__art img { transition: transform 900ms var(--ease-smooth); }
.case__chip { position: absolute; top: 1rem; left: 1rem; z-index: 1; background: rgba(42, 37, 26, .78); color: var(--on-dark); font-size: .78rem; font-weight: 600; padding: .35rem .7rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .4rem; backdrop-filter: blur(6px); }
.case__chip .dia { color: var(--gold); width: .45em; height: .45em; }
.case__art img { max-height: calc(var(--art-h) - 3rem); width: auto; max-width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(42, 37, 26, .35)); }
.case__art--photo { padding: 0; }
.case__art--photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center 30%; filter: none; }
.case__art--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 37, 26, .15), rgba(42, 37, 26, 0) 40%); }
.case__body { padding: var(--s-3) var(--s-3) var(--s-4); display: grid; gap: .5rem; }
.case__genre { font-size: .8rem; font-weight: 600; color: var(--sandstone-ink); display: inline-flex; align-items: center; gap: .4rem; }
.case__body h3 { font-size: 1.35rem; }
.case__body p { color: var(--ink-2); font-size: .95rem; }
.case__cta { margin-top: .75rem; font-weight: 600; font-size: var(--fs-small); color: var(--bark); display: inline-flex; align-items: center; gap: .4rem; transition: color var(--t-fast); }
.case__cta::after { content: ""; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.cases > :nth-child(3n+1) .case__art { --tile: var(--sand); }
.cases > :nth-child(3n+2) .case__art { --tile: var(--forest); }
.cases > :nth-child(3n+3) .case__art { --tile: var(--bark); }

/* Case-study detail */
.case-hero { display: grid; gap: var(--s-5); align-items: center; }
.case-hero__art { aspect-ratio: 4 / 5; max-width: 420px; background: var(--sand); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; padding: 10%; }
.case-hero__art img { max-height: 100%; height: auto; width: auto; filter: drop-shadow(0 10px 14px rgba(42, 37, 26, .22)); }
@media (min-width: 1025px) { .case-hero { grid-template-columns: 7fr 5fr; } .case-hero__art { justify-self: end; } }
.case-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--rule); }
.case-facts dt { font-size: .8rem; font-weight: 600; color: var(--ink-3); }
.case-facts dd { font-weight: 600; color: var(--bark); margin-top: .2rem; }
@media (min-width: 641px) { .case-facts { grid-template-columns: repeat(4, 1fr); } }
.prose h2 { margin-top: var(--s-6); margin-bottom: var(--s-3); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); }
.prose h2:first-child { margin-top: 0; }
.prose p + p { margin-top: 1.1em; }
.prose ul { margin-top: 1em; padding-left: 0; display: grid; gap: .5rem; }
.prose li { position: relative; padding-left: 1.4rem; color: var(--ink-2); }
.prose li::before { content: ""; position: absolute; left: .2rem; top: .6em; width: .45em; height: .45em; background: var(--sandstone); transform: rotate(45deg); }
.results { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
@media (min-width: 641px) { .results { grid-template-columns: repeat(3, 1fr); } }
.results > div { background: var(--cream); border-radius: var(--radius-lg); padding: var(--s-3); border: 1px solid var(--sand-mid); }
.results dt { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); font-weight: 700; font-variation-settings: "wdth" 80; color: var(--forest); line-height: 1; }
.results dd { margin-top: .5rem; color: var(--ink-2); font-size: var(--fs-small); }

/* ---------- Video block ---------- */
.video-poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bark-deep); border-radius: var(--radius-lg); }
.video-poster img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity var(--t-med), transform var(--t-slow) var(--ease-out); }
.video-poster:hover img { opacity: 1; transform: scale(1.02); }
.video-poster__play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; background: var(--sandstone); color: var(--bark-deep); display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6); transition: transform var(--t-fast); }
.video-poster:hover .video-poster__play { transform: scale(1.06); }
.video-poster__play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-poster__label { position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); color: var(--on-dark); font-weight: 600; text-align: left; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.video-poster__label span { display: block; font-weight: 400; font-size: var(--fs-small); color: var(--on-dark-2); }
.video-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 37, 26, 0) 55%, rgba(42, 37, 26, .85) 100%); pointer-events: none; }
.video-poster__play, .video-poster__label { z-index: 1; }
.video-poster--wide { box-shadow: var(--shadow-float); border: 1px solid rgba(243, 237, 224, .1); }
.video-poster--wide img { opacity: 1; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-float); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-fallback { margin-top: .75rem; font-size: var(--fs-small); color: var(--on-dark-3); }
.video-fallback a { color: var(--on-dark-2); }
.side-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.side-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: var(--radius-lg); }
.side-photos figcaption { margin-top: .5rem; font-size: var(--fs-small); color: var(--ink-3); }
.side-photos--stack { grid-template-columns: 1fr; gap: var(--s-4); }
.side-photos--stack img { aspect-ratio: 4 / 5; transition: transform var(--t-med) var(--ease-out); }
.side-photos--stack a:hover img { transform: translateY(-3px); }
.split__head--photos { position: static !important; }
.split--photos { align-items: start; }
@media (min-width: 1025px) { .split--photos { grid-template-columns: 4fr 8fr; gap: clamp(2.5rem, 5vw, 5rem); } }
.side-photos--stack { margin-top: 0; }
.video-poster--wide .video-poster__play { width: 96px; height: 96px; }
.video-poster--wide .video-poster__label { left: var(--s-4); bottom: var(--s-4); font-size: 1.15rem; }
@media (max-width: 640px) { .video-poster__play, .video-poster--wide .video-poster__play { width: 56px; height: 56px; } .video-poster__play svg { width: 22px; height: 22px; margin-left: 3px; } .video-poster--wide .video-poster__label { left: var(--s-3); bottom: var(--s-3); font-size: 1rem; } }
.modal__fallback { padding: .8rem 1rem; background: #000; color: var(--on-dark-3); font-size: var(--fs-small); }
.modal__fallback a { color: var(--on-dark); }
.video-grid { display: grid; gap: var(--s-4); }
@media (min-width: 1025px) { .video-grid { grid-template-columns: 7fr 5fr; align-items: center; } }

/* ---------- Icons (PNG slots; missing files remove themselves) ---------- */
.icon { display: block; width: 48px; height: 48px; object-fit: contain; margin-bottom: var(--s-3); }
.icon--sm { width: 32px; height: 32px; margin-bottom: .6rem; }
.has-icon::before { display: none !important; }

/* ---------- Steps ---------- */
.steps { display: grid; counter-reset: step; border-top: var(--rule); }
.step { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: var(--s-2); row-gap: .35rem; padding: var(--s-4) 0; border-bottom: var(--rule); counter-increment: step; }
.step::before { content: counter(step, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 3; font-weight: 700; font-size: 1.4rem; line-height: 1; color: var(--sandstone-ink); padding-top: .2rem; font-variation-settings: "wdth" 80; }
.step > * { grid-column: 2; }
.step h3 { margin: 0; }
.step p { color: var(--ink-2); }
.section--forest .steps, .section--forest .step { border-color: rgba(243, 237, 224, .16); }
.section--forest .step::before { color: var(--gold); }
.section--forest .step p { color: var(--on-dark-2); }

/* Steps as a 4-up card row (home) */
.steps--row { border-top: 0; grid-template-columns: 1fr; gap: var(--s-3); }
.steps--row .step { background: var(--cream); border: 1px solid var(--sand-mid); border-radius: var(--radius-lg); padding: var(--s-3); grid-template-columns: 1fr; }
.steps--row .step { position: relative; display: block; padding-top: var(--s-4); }
.steps--row .step::before { position: absolute; top: 1rem; right: 1.1rem; font-size: 1rem; color: var(--ink-3); padding: 0; }
.steps--row .step p { margin-top: .4rem; }
.steps--row .step > * { grid-column: 1; }
.steps--row .step p { font-size: var(--fs-small); }
@media (min-width: 641px) { .steps--row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) { .steps--row { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Phase stepper (process page) ---------- */
.phases { scroll-margin-top: calc(var(--header-h) + 1rem); }
.phases__rail { display: none; }
.phases__rail::-webkit-scrollbar { display: none; }
.phases__rail [role="tab"] { text-align: left; padding: 0 0 var(--s-3); margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--ink-2); display: grid; gap: .25rem; align-content: start; transition: color var(--t-fast), border-color var(--t-fast); }
.phases__rail { position: relative; }
.phases__dot { display: none; }
.phases__rail [role="tab"] { position: relative; }
.phases__rail [role="tab"]:hover .phases__dot { border-color: var(--bark); }
.phases__rail [aria-selected="true"] .phases__dot { background: var(--sandstone); border-color: var(--sandstone); transform: scale(1.2); }
.phases__big { display: block; font-size: clamp(3rem, 2rem + 4vw, 5.5rem); font-weight: 700; font-variation-settings: "wdth" 76; line-height: 1; color: var(--sandstone); letter-spacing: -.03em; margin: .5rem 0 .25rem; }
.split--phase .icon { width: 56px; height: 56px; margin-bottom: 0; opacity: .9; }
.split--phase .split__head { position: static; }
@media (min-width: 1025px) { .split--phase { grid-template-columns: 4fr 8fr; } .split--phase .split__head { position: sticky; top: calc(var(--header-h) + 2rem); } }
.trail { position: relative; }
.trail__step { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s-3); padding-bottom: var(--s-5); }
.trail__step::before { content: ""; position: absolute; left: 37px; top: 76px; bottom: 0; border-left: 2px dashed var(--sand-line); }
.trail__step:last-child::before { display: none; }
.trail__step:last-child { padding-bottom: 0; }
.trail__node { position: relative; width: 76px; height: 76px; border-radius: 50%; background: var(--cream); border: 2px solid var(--sand-line); display: grid; place-items: center; box-shadow: 0 8px 18px -12px rgba(42, 37, 26, .35); }
.trail__node .icon { width: 38px; height: 38px; margin: 0; grid-area: 1 / 1; }
.trail__fallback { grid-area: 1 / 1; font-weight: 700; font-size: 1.2rem; color: var(--sandstone-ink); font-variation-settings: "wdth" 80; }
.trail__node.has-icon .trail__fallback { display: none; }
.trail__body { padding-top: .6rem; }
.trail__num { display: block; font-size: .8rem; font-weight: 600; color: var(--sandstone-ink); letter-spacing: .02em; }
.trail__body h3 { margin-top: .2rem; font-size: 1.3rem; }
.trail__body p { margin-top: .45rem; color: var(--ink-2); max-width: 54ch; }
/* Phase intro row + horizontal trail on desktop */
.phase-intro { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.phase-intro__title { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.phase-intro__title .icon { margin: 0; width: 52px; height: 52px; }
.phase-intro__title .phases__big { margin: 0; font-size: clamp(2.6rem, 2rem + 2.5vw, 4.2rem); }
.phase-intro__title h2 { font-size: var(--fs-h2); }
.phase-intro .lead { max-width: 60ch; }
@media (min-width: 1025px) {
  .phases { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .phases__rail { display: flex; flex-direction: column; gap: .35rem; border: 0; padding: .6rem; margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 1.5rem); overflow: visible; }
  .phases__rail::before { display: none; }
  .phases__rail [role="tab"] { padding: 1rem 1.1rem; border: 0; border-radius: var(--radius); color: var(--on-dark-2); margin: 0; gap: .15rem; transition: background var(--t-fast), color var(--t-fast); }
  .phases__rail [role="tab"]:hover { background: rgba(243, 237, 224, .08); color: var(--on-dark); }
  .phases__rail [role="tab"][aria-selected="true"] { background: var(--gold); color: var(--bark-deep); }
  .phases__rail [role="tab"][aria-selected="true"] .phases__num, .phases__rail [role="tab"][aria-selected="true"] .phases__meta { color: var(--bark-deep); }
  .phases__rail .phases__num { color: var(--gold); font-size: 1.1rem; }
  .phases__rail .phases__name { font-size: 1.1rem; }
  .phases__rail .phases__meta { color: var(--on-dark-3); }
  .phases__dot { display: none; }
  .phases__panels { min-width: 0; }
  .phases__panel { padding-top: 0; }
  .phase-intro { grid-template-columns: 1fr 1fr; align-items: end; }
  .trail--h { display: grid; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: var(--s-4); position: relative; padding-top: 0; }
  .trail--h::before { content: ""; position: absolute; top: 37px; left: calc(100% / var(--steps, 4) / 2); right: calc(100% / var(--steps, 4) / 2); border-top: 2px dashed var(--sand-line); z-index: 0; }
  .trail--h .trail__step { display: block; padding-bottom: 0; text-align: center; }
  .trail--h .trail__step::before { display: none; }
  .trail--h .trail__node { margin: 0 auto; position: relative; z-index: 1; }
  .trail--h .trail__body { padding-top: var(--s-3); }
  .trail--h .trail__body p { margin-inline: auto; }
}
.phases__nav { margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--rule); display: grid; gap: var(--s-2); }
@media (min-width: 641px) { .phases__nav { grid-template-columns: auto 1fr; align-items: center; } .phases__nav-meta { justify-content: flex-end; gap: var(--s-4); } }
.phases__nav-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.phases__nav-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--ink-3); }
@media (min-width: 641px) { .phases__nav .phases__nav-meta { justify-content: flex-end; gap: var(--s-4); } }
.phases__rail [role="tab"]:hover { color: var(--bark); }
.phases__rail [role="tab"][aria-selected="true"] { color: var(--bark); border-bottom-color: var(--sandstone); }
.phases__num { font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--sandstone-ink); font-variation-settings: "wdth" 80; }
.phases__name { font-weight: 700; font-size: 1.2rem; line-height: 1.15; font-variation-settings: "wdth" 88; }
.phases__meta { font-size: var(--fs-small); color: var(--ink-3); }
.phases__panel { padding-top: var(--s-5); }
.phases__panel.is-in { animation: panelIn 380ms var(--ease-smooth) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.phases__panel.is-in .trail__step { animation: stepIn 520ms var(--ease-smooth) both; animation-delay: calc(120ms + var(--i, 0) * 90ms); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.phases__panel h2 { font-size: var(--fs-h2); }
.phases__panel > .lead { margin-top: var(--s-2); max-width: 58ch; }
.steps--grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); border-top: 0; margin-top: var(--s-4); }
.steps--grid .step { position: relative; display: block; background: var(--cream); border: 1px solid var(--sand-mid); border-radius: var(--radius-lg); padding: var(--s-4) var(--s-3) var(--s-3); transition: border-color var(--t-fast), transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }

.steps--grid .step::before { position: absolute; top: 1rem; right: 1.1rem; font-size: 1rem; color: var(--ink-3); padding: 0; }
.steps--grid .step > * { grid-column: auto; }
.steps--grid .step p { margin-top: .4rem; }
.steps--grid .step:hover { border-color: var(--sand-line); }
.steps--grid .step h3 { font-size: 1.15rem; }
.steps--grid .step p { font-size: var(--fs-small); }
@media (min-width: 641px) { .steps--grid { grid-template-columns: 1fr 1fr; } }
.phases__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.phases__nav .small { margin-left: auto; }
.no-js .phases__panel { display: block !important; }
.no-js .phases__panel + .phases__panel { margin-top: var(--s-6); }

/* ---------- Points list ---------- */
.points { border-top: var(--rule); }
.points > li { padding: var(--s-4) 0; border-bottom: var(--rule); display: grid; gap: .5rem; }
.points h3 { font-size: 1.3rem; }
.points p { color: var(--ink-2); }
@media (min-width: 641px) { .points > li { grid-template-columns: 1fr 2fr; gap: var(--s-4); } }
.section--forest .points, .section--forest .points > li { border-color: rgba(243, 237, 224, .16); }
.section--forest .points p { color: var(--on-dark-2); }

/* Points as a compact grid */
.points--grid { border-top: 0; display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
.points--grid > li { display: block; padding: var(--s-4); border: 1px solid var(--sand-mid); border-radius: var(--radius-lg); background: var(--cream); transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }

.points--grid > li::before { content: ""; display: block; width: 14px; height: 14px; background: var(--sandstone); transform: rotate(45deg); border-radius: 2px; margin: 0 0 var(--s-3) .2rem; }
.points--grid > li .icon { margin-bottom: var(--s-3); }
.points--grid h3 { font-size: 1.2rem; }
.points--grid p { margin-top: .6rem; font-size: 1rem; line-height: 1.55; }
@media (min-width: 641px) { .points--grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) { .points--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Reviews grid ---------- */
.reviews { display: grid; gap: var(--s-3); }
@media (min-width: 641px)  { .reviews { grid-template-columns: 1fr 1fr; gap: var(--s-4); } }
@media (min-width: 1025px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review { position: relative; background: var(--forest-deep); border: 1px solid rgba(243, 237, 224, .1); border-radius: var(--radius-lg); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.review::before { content: "\201C"; position: absolute; top: .4rem; right: 1.2rem; font-size: 5rem; line-height: 1; color: var(--gold); opacity: .35; font-weight: 700; }
.review p { font-size: 1.05rem; line-height: 1.55; color: var(--on-dark); max-width: none; flex: 1; }
.review footer { display: flex; align-items: center; gap: .8rem; font-size: var(--fs-small); color: var(--on-dark-3); }
.review footer strong { display: block; color: var(--on-dark); font-weight: 600; }
.review__avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--gold); color: var(--bark-deep); display: grid; place-items: center; font-weight: 700; font-size: .85rem; letter-spacing: .02em; }

/* ---------- Testimonials (JS carousel) ---------- */
.quotes { position: relative; }
.quotes__track { display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--s-2); margin: 0 calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.quotes__track::-webkit-scrollbar { display: none; }
.quote { flex: 0 0 min(86%, 560px); scroll-snap-align: start; display: flex; flex-direction: column; padding: var(--s-4) 0 0; border-top: 2px solid var(--gold); }
.quote p { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.9rem); line-height: 1.3; font-weight: 500; font-variation-settings: "wdth" 92; letter-spacing: -.01em; color: var(--on-dark); max-width: none; min-height: 4.2em; text-wrap: pretty; }
.quote footer { margin-top: var(--s-4); color: var(--on-dark-3); font-size: var(--fs-small); display: flex; align-items: center; gap: .9rem; }
.quote footer strong { color: var(--on-dark); font-weight: 600; display: block; }
.quote__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--bark-deep); display: grid; place-items: center; font-weight: 700; font-size: .9rem; letter-spacing: .02em; }
.quote__source { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; color: var(--on-dark-3); }
.quote__source .dia { color: var(--sandstone); width: .4em; height: .4em; }
.quotes__controls { display: flex; gap: .5rem; margin-top: var(--s-3); }
.quotes__controls button { width: 46px; height: 46px; border: 2px solid rgba(243, 237, 224, .35); border-radius: 50%; color: var(--on-dark); display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast), border-color var(--t-fast); }
.quotes__controls button:hover { background: rgba(243, 237, 224, .1); border-color: var(--on-dark); }
.quotes__controls svg { width: 18px; height: 18px; }
.quotes--js .quotes__track { display: grid; overflow: visible; margin: 0 -48px; padding: 0 48px; scroll-snap-type: none; }
.quotes--js .quote { grid-area: 1 / 1; flex: none; width: 100%; opacity: 0; pointer-events: none; }
.quotes--js .quote.is-active { opacity: 1; pointer-events: auto; animation: quoteHold var(--quote-hold, 7000ms) var(--ease-out) both; }
.quotes--js .quote.is-leaving { animation: quoteOut 600ms var(--ease-out) both; }
.quotes--js .quote.is-leaving.from-right { animation-name: quoteOutRight; }
.quotes--js.is-paused .quote.is-active { animation-play-state: paused; }
@keyframes quoteHold { 0% { opacity: 0; transform: translateX(36px); } 10% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(-10px); } }
@keyframes quoteOut { to { opacity: 0; transform: translateX(-36px); } }
@keyframes quoteOutRight { to { opacity: 0; transform: translateX(36px); } }
.quotes__foot { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.quotes__progress { flex: 1; height: 2px; background: rgba(243, 237, 224, .18); position: relative; overflow: hidden; }
.quotes__progress span { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.quotes__progress.is-running span { animation: quoteProgress var(--quote-hold, 7000ms) linear both; }
.quotes--js.is-paused .quotes__progress span { animation-play-state: paused; }
@keyframes quoteProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.quotes__dots { display: flex; gap: .5rem; }
.quotes__dots button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.quotes__dots button::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: rgba(243, 237, 224, .35); transition: background var(--t-fast), transform var(--t-fast); }
.quotes__dots button:hover::before { background: var(--on-dark-2); }
.quotes__dots button[aria-current="true"]::before { background: var(--gold); transform: rotate(45deg) scale(1.3); }

.pullquote { border-left: 3px solid var(--gold); padding-left: var(--s-3); }
.pullquote p { font-size: clamp(1.15rem, 1.05rem + .6vw, 1.5rem); line-height: 1.35; font-weight: 500; color: var(--bark); }
.pullquote footer { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--ink-3); }
.pullquote footer strong { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: .1rem; }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); }
@media (min-width: 1025px) { .team { grid-template-columns: repeat(4, 1fr); } }
.person { display: grid; gap: .5rem; align-content: start; }
.person__photo { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--sand-mid); display: grid; place-items: center; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.person__initials { font-size: 2.4rem; font-weight: 700; color: var(--bark); opacity: .5; font-variation-settings: "wdth" 80; }
.person h3 { font-size: 1.15rem; margin-top: .5rem; }
.person__role { font-size: var(--fs-small); color: var(--ink-2); }
.person p:not(.person__role) { font-size: var(--fs-small); color: var(--ink-3); }

/* Founder block */
.founder { display: grid; gap: var(--s-5); align-items: start; }
.founder__photo { width: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-float); }
.founder__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.founder__caption { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--ink-3); }
.founder__body h2 { margin-bottom: var(--s-3); }
.founder__body p + p { margin-top: 1.1em; }
.founder__body .btn { margin-top: var(--s-4); }
.founder__sig { margin-top: var(--s-4); font-weight: 700; font-size: 1.15rem; color: var(--bark); }
.founder__sig span { display: block; font-weight: 400; font-size: var(--fs-small); color: var(--ink-3); }
@media (min-width: 641px)  { .founder { grid-template-columns: 2fr 3fr; } }
@media (min-width: 1025px) { .founder { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 6vw, 7rem); } }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.photo-pair img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.photo-pair figcaption { margin-top: .5rem; font-size: var(--fs-small); color: var(--ink-3); }

/* ---------- Investment facts ---------- */
.facts { display: grid; gap: var(--s-3); }
.facts > div { background: var(--cream); border: 1px solid var(--sand-mid); border-radius: var(--radius-lg); padding: var(--s-3); }
.facts dt { font-weight: 700; font-size: 1.2rem; color: var(--bark); font-variation-settings: "wdth" 90; }
.facts dd { margin-top: .4rem; color: var(--ink-2); font-size: var(--fs-small); }
@media (min-width: 641px) { .facts { grid-template-columns: 1fr 1fr; } }

/* ---------- FAQ ---------- */
.faq { border-top: var(--rule); }
.faq details { border-bottom: var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 1.2rem 0; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); font-weight: 600; font-size: 1.1rem; color: var(--bark); transition: color var(--t-fast); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--sandstone-ink); }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t-med) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details > div { padding: 0 0 1.4rem; color: var(--ink-2); max-width: 66ch; }
.faq details > div p + p { margin-top: .8em; }

/* ---------- Page hero (interior) ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3rem, 5vw, 5.5rem) 0 clamp(2.5rem, 4vw, 4rem); border-bottom: var(--rule); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { max-width: 16ch; }
.page-hero .lead { margin-top: var(--s-3); max-width: 58ch; }
.page-hero--sand { background: var(--paper-white); border-bottom: var(--rule); }
.page-hero--book { background: var(--paper-white); border-bottom: var(--rule); }
.book-blurb { margin-top: var(--s-3); color: var(--ink); font-size: var(--fs-lead); line-height: 1.55; max-width: 52ch; }
.case-hero--book { align-items: center; }
.case-hero__art--book { max-width: 560px; width: 100%; height: clamp(360px, 38vw, 640px); aspect-ratio: auto; background: var(--sand-mid); padding: 8%; }
.case-hero__art--book img { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(42, 37, 26, .22)); }
.book-photo { margin-top: var(--s-6); }
.book-photo img { width: 100%; border-radius: var(--radius-lg); }
.book-photo figcaption { margin-top: .6rem; font-size: var(--fs-small); color: var(--ink-3); }
@media (min-width: 1025px) { .case-hero--book { grid-template-columns: 6fr 6fr; } }
.page-hero--forest { background: var(--forest); color: var(--on-dark); border-bottom: 0; }
.page-hero--forest h1 { color: var(--on-dark); }
.page-hero--forest .lead { color: var(--on-dark-2); }
.page-hero--forest .topo { opacity: .35; filter: invert(1); }
.breadcrumb { display: flex; gap: .5rem; font-size: var(--fs-small); color: var(--ink-3); margin-bottom: var(--s-4); }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-hero--forest .breadcrumb, .page-hero--forest .breadcrumb a { color: var(--on-dark-3); }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--s-3); }
.form__row { display: grid; gap: var(--s-3); }
@media (min-width: 641px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field label .opt { color: var(--ink-3); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: .75rem .9rem; background: #fff; border: 1.5px solid var(--sand-line); border-radius: var(--radius); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23574D3B' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(214, 152, 32, .3); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--error); }
.field__hint { font-size: var(--fs-small); color: var(--ink-3); }
.field__error { font-size: var(--fs-small); color: var(--error); display: none; }
.field.is-invalid .field__error { display: block; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.form__foot .small { max-width: 40ch; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.apply-layout { display: grid; gap: var(--s-6); }
.apply-aside { align-self: start; }
.apply-aside h2 { font-size: 1.5rem; margin-bottom: var(--s-3); }
.apply-aside .step { padding: var(--s-3) 0; }
.apply-aside .step h3 { font-size: 1.05rem; }
.apply-aside .step p { font-size: var(--fs-small); }
.apply-aside .pullquote { margin-top: var(--s-5); }
.aside-photo { margin-bottom: var(--s-4); }
.aside-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 22%; border-radius: var(--radius-lg); }
.aside-photo figcaption { margin-top: .6rem; font-size: var(--fs-small); color: var(--ink-3); }
@media (min-width: 1025px) { .apply-layout { grid-template-columns: 7fr 4fr; gap: clamp(3rem, 6vw, 7rem); } .apply-aside { position: sticky; top: calc(var(--header-h) + 2rem); } }

/* ---------- CTA strip (mid-page nudge) ---------- */
.cta-strip { background: var(--forest); color: var(--on-dark); border-block: 1px solid rgba(243, 237, 224, .1); }
.cta-strip .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-4); }
.cta-strip p { font-weight: 600; font-size: 1.05rem; max-width: none; }
.cta-strip p span { display: block; font-weight: 400; font-size: var(--fs-small); color: var(--on-dark-2); }
.phases__nav .link { font-size: var(--fs-small); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--bark-deep); color: var(--on-dark); padding-block: clamp(3.5rem, 6vw, 6rem); border-top: 6px solid var(--sandstone); }
.cta-band .topo { opacity: .35; filter: invert(1) sepia(1) saturate(4) hue-rotate(5deg); }
.cta-band .btn--ghost { color: var(--on-dark); border-color: rgba(243, 237, 224, .45); }
.cta-band .btn--ghost:hover { background: rgba(243, 237, 224, .1); border-color: var(--on-dark); color: var(--on-dark); }
.cta-band__trust { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: var(--s-3); font-size: var(--fs-small); color: var(--on-dark-3); }
.cta-band__trust span { display: inline-flex; align-items: center; gap: .5rem; }
.cta-band__trust .dia { color: var(--gold); width: .4em; height: .4em; }
.cta-band .container { position: relative; z-index: 1; display: grid; gap: var(--s-4); align-items: center; }
.cta-band h2 { color: var(--on-dark); max-width: 18ch; }
.cta-band p { color: var(--on-dark-2); margin-top: var(--s-3); font-size: var(--fs-lead); max-width: 48ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

@media (min-width: 1025px) { .cta-band .container { grid-template-columns: 1fr auto; gap: var(--s-6); } }

/* ---------- Review options panel (client review tool) ----------
   Three switches: headline/body type, header logo color, Apply button fill.
   Choices are stored in localStorage and re-applied on every page by main.js.
   To remove: delete this block, the .review markup in index.html, the
   Manrope/Newsreader part of the Google Fonts link, and the JS block. */

/* Type option B: Newsreader headline + Manrope body, hero and CTA band only. */
.type-b .hero, .type-b .cta-band { font-family: var(--font-body-test); }
.type-b .hero h1, .type-b .cta-band h2 { font-family: var(--font-display-test); font-weight: 500; font-variation-settings: "opsz" 72; letter-spacing: -.012em; line-height: 1.02; }
.type-b .hero h1 { font-size: clamp(2.6rem, 1.5rem + 4.2vw, 5.2rem); }
.type-b .hero .btn, .type-b .cta-band .btn { font-family: var(--font-body-test); font-weight: 700; }

/* Button option: cream Apply button in the header. */
.btn-cream .site-header .btn--cta { background: var(--cream); border-color: var(--cream); color: var(--bark-deep); }
.btn-cream .site-header .btn--cta:hover { background: #fff; border-color: #fff; }

.review { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 880; font-size: .8rem; max-width: calc(100vw - 2.5rem); display: flex; flex-direction: column-reverse; align-items: flex-start; }
.review__toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .5rem 1rem; background: var(--header-bg); color: var(--on-dark); border-radius: 999px; box-shadow: var(--shadow-float); font-size: .8rem; font-weight: 600; }
.review__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); }
.review__panel { margin-bottom: .5rem; max-height: min(70vh, 30rem); overflow-y: auto; padding: .9rem 1rem 1rem; background: var(--header-bg); color: var(--on-dark-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); display: grid; gap: .75rem; width: min(24rem, calc(100vw - 2.5rem)); }
.review__panel[hidden] { display: none; }
.review__row { display: grid; gap: .35rem; }
.review__label { font-weight: 600; color: var(--on-dark); font-size: .75rem; }
.review__opts { display: flex; flex-wrap: wrap; gap: .3rem; }
.review__opts button { display: inline-flex; align-items: center; gap: .4rem; min-height: 34px; padding: .35rem .7rem; border-radius: 999px; border: 1px solid rgba(243, 237, 224, .22); color: var(--on-dark-2); font-size: .78rem; font-weight: 600; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.review__opts button:hover { color: var(--on-dark); border-color: rgba(243, 237, 224, .5); }
.review__opts button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--bark-deep); }
.review__swatch { width: .75rem; height: .75rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); }
.review__note { font-size: .72rem; color: var(--on-dark-3); max-width: none; }
.review__note button { color: var(--on-dark-2); text-decoration: underline; font-size: .72rem; }
.review__note button:hover { color: var(--on-dark); }
@media (max-width: 640px) { .review { left: .75rem; bottom: .75rem; } }
@media print { .review { display: none; } }

/* ---------- Footer ---------- *//* ---------- Footer ---------- */
.site-footer { background: var(--bark-deep); color: var(--on-dark-2); padding: var(--s-7) 0 var(--s-5); font-size: var(--fs-small); position: relative; }
.footer-grid { display: grid; gap: var(--s-5); }
.footer-brand img { height: 42px; width: auto; }
.footer-brand p { margin-top: var(--s-3); max-width: 34ch; color: var(--on-dark-3); }
.footer-col h2 { font-size: .95rem; font-weight: 600; color: var(--on-dark); margin-bottom: var(--s-2); font-variation-settings: "wdth" 100; letter-spacing: 0; }
.footer-col li + li { margin-top: .5rem; }
.footer-col a { color: var(--on-dark-2); text-decoration: none; transition: color var(--t-fast); }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { margin-top: var(--s-6); padding-top: var(--s-3); border-top: var(--rule-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); color: var(--on-dark-3); }
.footer-bottom .dia { color: var(--sandstone); margin-right: .4rem; }
@media (min-width: 641px)  { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1025px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* ---------- 404 ---------- */
.notfound { min-height: 70vh; display: grid; place-items: center; }
.notfound__art { width: min(100%, 320px); margin-bottom: var(--s-4); }
.notfound h1 { font-size: var(--fs-display); }
.notfound p { margin-top: var(--s-3); color: var(--ink-2); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: var(--gutter); opacity: 0; visibility: hidden; transition: opacity var(--t-med) var(--ease-out), visibility 0s var(--t-med); overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) { .modal { place-items: start center; padding: 1rem; } }
.modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(42, 37, 26, .74); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal__card { position: relative; width: min(100%, 520px); background: var(--sand-light); color: var(--ink); padding: clamp(1.75rem, 4vw, 2.5rem); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); border-top: 4px solid var(--sandstone); transform: translateY(12px) scale(.98); transition: transform var(--t-med) var(--ease-out); }
.modal.is-open .modal__card { transform: none; }
.modal__card h2 { font-size: 1.7rem; padding-right: 2.5rem; }
.modal__card p { margin-top: var(--s-2); color: var(--ink-2); }
.modal__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.modal__close { position: absolute; top: .9rem; right: .9rem; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); transition: background var(--t-fast); }
.modal__close:hover { background: var(--sand-mid); }
.modal__close svg { width: 20px; height: 20px; }
.modal--video .modal__card { width: min(100%, 960px); padding: 0; border-top: 0; background: #000; overflow: hidden; }
.modal--video .modal__close { color: #fff; z-index: 2; }
.modal--video .modal__close:hover { background: rgba(255, 255, 255, .15); }
.modal__video { aspect-ratio: 16 / 9; }
.modal__video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 1.25rem; right: 1.25rem; left: 1.25rem; z-index: 1300; display: grid; gap: .6rem; pointer-events: none; }
@media (min-width: 641px) { .toasts { left: auto; width: 360px; } }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .75rem; background: var(--bark-deep); color: var(--on-dark); padding: .9rem 1rem; border-radius: var(--radius); box-shadow: var(--shadow-float); border-left: 4px solid var(--gold); font-size: var(--fs-small); transform: translateY(12px); opacity: 0; transition: transform var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out); }
.toast.is-in { transform: none; opacity: 1; }
.toast--error { border-left-color: var(--sandstone); }
.toast--success { border-left-color: #8DBB7C; }
.toast__close { margin-left: auto; color: var(--on-dark-3); width: 24px; height: 24px; display: grid; place-items: center; }
.toast__close:hover { color: var(--on-dark); }

/* ---------- Reveals ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
[data-stagger] > .reveal:nth-child(2) { transition-delay: 70ms; }
[data-stagger] > .reveal:nth-child(3) { transition-delay: 140ms; }
[data-stagger] > .reveal:nth-child(4) { transition-delay: 210ms; }
[data-stagger] > .reveal:nth-child(5) { transition-delay: 280ms; }
[data-stagger] > .reveal:nth-child(6) { transition-delay: 350ms; }
[data-stagger] > .reveal:nth-child(n+7) { transition-delay: 420ms; }
.no-js .reveal, .no-js .hero__copy[data-animate] > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; }
  .reveal, .hero__copy[data-animate] > *, .hero__figure { opacity: 1; transform: none; }
}
@media print {
  .site-header, .site-footer, .mobile-nav, .toasts, .modal, .scroll-progress { display: none; }
  .section--forest, .section--bark, .cta-band { background: #fff; color: #000; }
}

/* Accordion headers: hidden on desktop, the mobile control */
.phases__acc { display: none; }
@media (max-width: 1024px) {
  .phases__rail { display: none; }
  .phases__panel { display: block !important; border-top: var(--rule); }
  .phases__panel:last-child { border-bottom: var(--rule); }
  .phases__acc { display: grid; grid-template-columns: 2.2rem 1fr auto 1.4rem; align-items: center; gap: .6rem; width: 100%; text-align: left; padding: 1rem 0; background: var(--paper-white); position: sticky; top: var(--header-h); z-index: 20; scroll-margin-top: var(--header-h); border-bottom: 1px solid transparent; }
  .phases__acc[aria-expanded="true"] { border-bottom-color: var(--sand-line); }
  .phases__acc-num { font-weight: 700; color: var(--sandstone-ink); font-variation-settings: "wdth" 80; }
  .phases__acc-name { font-weight: 700; font-size: 1.05rem; color: var(--bark); }
  .phases__acc-meta { font-size: var(--fs-small); color: var(--ink-3); }
  .phases__acc-chev { width: 10px; height: 10px; border-right: 2px solid var(--bark); border-bottom: 2px solid var(--bark); transform: rotate(45deg); transition: transform var(--t-med) var(--ease-out); justify-self: center; }
  .phases__acc[aria-expanded="true"] .phases__acc-chev { transform: rotate(225deg); }
  .phases__body { padding: var(--s-3) 0 var(--s-5); }
  .phases__body[hidden] { display: none; }
  .phase-intro__title { display: none; }
  .phase-intro { margin-bottom: var(--s-4); }
  .phases__panel.is-in { animation: none; }
}

/* Desktop phase rail: hover states that stay readable; the active tab never changes on hover */
@media (min-width: 1025px) {
  .phases__rail [role="tab"], .phases__rail [role="tab"]:hover { color: var(--on-dark-2); }
  .phases__rail [role="tab"]:hover { background: rgba(243, 237, 224, .08); color: var(--on-dark); }
  .phases__rail [role="tab"]:hover .phases__num { color: var(--gold); }
  .phases__rail [role="tab"][aria-selected="true"], .phases__rail [role="tab"][aria-selected="true"]:hover { background: var(--gold); color: var(--bark-deep); }
  .phases__rail [role="tab"][aria-selected="true"] .phases__num, .phases__rail [role="tab"][aria-selected="true"]:hover .phases__num,
  .phases__rail [role="tab"][aria-selected="true"] .phases__meta, .phases__rail [role="tab"][aria-selected="true"]:hover .phases__meta { color: var(--bark-deep); }
}

/* ==========================================================================
   v5 (Colin round 2): photo hero, the seven promises,
   trailers, photo book wall, galleries. Tokens first.
   ========================================================================== */
:root {
  --charcoal: #3E3D3B;      /* the desk in the Author Roadmap photo; hero background */
  --charcoal-deep: #2F2E2C;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
}

/* ---------- Hero: the Author Roadmap photograph ----------
   The photo sits to the right and fades into the desk color on its left edge,
   so the headline sits on the same desk as the book. No overlay. */
.hero--photo { background: var(--charcoal); padding: 0; min-height: 0; display: block; }
.hero--photo .hero__inner { display: grid; gap: 0; min-height: inherit; }
.hero--photo .hero__copy { position: relative; z-index: 2; padding-block: clamp(2.75rem, 7vw, 4rem) var(--s-4); max-width: 640px; }
.hero--photo h1 { font-family: var(--font-serif); font-weight: 600; font-variation-settings: "opsz" 72; letter-spacing: -.015em; line-height: 1.02; font-size: clamp(2.7rem, 1.4rem + 5vw, 5.6rem); color: #ECE3D1; }
.hero__media { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.hero__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
.hero__media figcaption { position: absolute; right: var(--gutter); bottom: var(--s-2); font-size: .8rem; color: var(--on-dark-3); max-width: 26ch; text-align: right; }
.hero--photo .hero__note { color: var(--on-dark-2); }
.hero--photo .hero__note strong { color: var(--gold); font-weight: 600; }
@media (min-width: 1025px) {
  .hero--photo { min-height: min(88dvh, 860px); display: flex; align-items: center; }
  .hero--photo .hero__inner { width: 100%; }
  .hero--photo .hero__copy { padding-block: var(--s-7); max-width: min(46%, 640px); }
  .hero__media { position: absolute; inset: 0 0 0 auto; width: 66%; margin: 0; z-index: 1; }
  .hero__media img { height: 100%; aspect-ratio: auto; object-position: 30% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%); mask-image: linear-gradient(90deg, transparent 0, #000 34%); }
  .hero__media figcaption { bottom: var(--s-4); }
}
.hero--photo .hero__media { opacity: 0; transform: scale(1.015); }
.hero--photo.is-live .hero__media { opacity: 1; transform: none; transition: opacity 1600ms var(--ease-smooth) 300ms, transform 2200ms var(--ease-smooth) 300ms; }
.no-js .hero--photo .hero__media { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero--photo .hero__media { opacity: 1; transform: none; } }

/* ---------- Stats: four facts ---------- */
.stats__num small { font-size: .45em; font-weight: 700; margin-left: .15em; letter-spacing: 0; }

/* ---------- The Zion Author Experience: seven promises as a numbered sequence ----------
   Big serif numerals, the promise in the middle, Colin's one-liner pulled out to the right.
   The royalty promise closes the run as a gold finale. */
.promises { position: relative; isolation: isolate; overflow: hidden; background: var(--bark-deep); color: var(--on-dark); padding-block: var(--section-y); }
.promises .topo { opacity: .22; filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg); }
.promises .container { position: relative; z-index: 1; }
.promises__head { display: grid; gap: var(--s-3); padding-bottom: var(--s-4); }
.promises__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; color: var(--gold); margin-bottom: var(--s-2); }
.promises__eyebrow .dia { width: .45em; height: .45em; color: var(--sandstone); }
.promises__head h2 { color: var(--on-dark); font-family: var(--font-serif); font-weight: 600; font-variation-settings: "opsz" 72; font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); letter-spacing: -.015em; line-height: 1.04; max-width: 22ch; }
.promises__intro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.promises__intro .lead { color: var(--on-dark-2); }
@media (min-width: 1025px) { .promises__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-5); } .promises__intro { flex-direction: column; align-items: flex-start; } }

/* Six promises in a ruled grid: number, title, text, Colin's one-liner. */
.promise-list { display: grid; grid-template-columns: 1fr; border-top: 1px solid rgba(243, 237, 224, .16); }
.promise { display: block; padding: var(--s-3) 0 var(--s-4); border-bottom: 1px solid rgba(243, 237, 224, .16); }
.promise__num { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; line-height: 1; color: var(--sandstone); letter-spacing: .02em; font-variant-numeric: lining-nums; margin-bottom: .6rem; }
.promise__body h3 { color: var(--on-dark); font-size: 1.15rem; line-height: 1.2; }
.promise__body p { color: var(--on-dark-2); margin-top: .45rem; font-size: .95rem; line-height: 1.55; }
.promise__line { margin-top: .7rem; font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; line-height: 1.35; color: var(--gold); }
@media (min-width: 700px) {
  .promise-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promise { padding: var(--s-4) var(--s-4) var(--s-4) 0; }
  .promise:nth-child(2n) { padding: var(--s-4) 0 var(--s-4) var(--s-4); border-left: 1px solid rgba(243, 237, 224, .16); }
}
@media (min-width: 1025px) {
  .promise-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promise, .promise:nth-child(2n) { padding: var(--s-4) var(--s-4) var(--s-4); border-left: 1px solid rgba(243, 237, 224, .16); }
  .promise:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  .promise:nth-child(3n) { padding-right: 0; }
}

/* Promise 7: a slim gold band */
.promise-final { display: grid; gap: var(--s-2) var(--s-4); align-items: center; margin-top: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--gold); color: var(--bark-deep); border-radius: var(--radius-lg); }
.promise-final__figure { display: flex; align-items: baseline; gap: .6rem; }
.promise-final__big { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.6rem, 2rem + 2.4vw, 3.8rem); line-height: 1; letter-spacing: -.03em; }
.promise-final__of { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.promise-final__of br { display: none; }
.promise-final__body h3 { color: var(--bark-deep); font-size: 1.15rem; }
.promise-final__body p { margin-top: .25rem; color: var(--bark); font-size: .95rem; }
.promise__num--sm { display: inline; font-size: .95rem; color: var(--bark); margin: 0 .5rem 0 0; }
.promise-final__body h3 { display: inline; }
@media (min-width: 900px) { .promise-final { grid-template-columns: auto minmax(0, 1fr); } .promise-final__body { border-left: 1px solid rgba(42, 37, 26, .25); padding-left: var(--s-4); } }

/* ---------- Trailers: poster cards that open a player ---------- */
.section--film { background: var(--charcoal-deep); color: var(--on-dark); }
.section--film h2 { color: var(--on-dark); }
.section--film .lead { color: var(--on-dark-2); }
.trailers { display: grid; gap: var(--s-3); }
.trailer-card { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); background: #111; color: var(--on-dark); text-align: left; box-shadow: var(--shadow-float); isolation: isolate; }
.trailer-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-smooth), filter var(--t-med); filter: saturate(.9) brightness(.86); }
.trailer-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 15, 0) 45%, rgba(20, 18, 15, .82) 100%); z-index: 1; }
.trailer-card:hover img, .trailer-card:focus-visible img { transform: scale(1.035); filter: saturate(1) brightness(.95); }
.trailer-card__play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(236, 227, 209, .14); border: 1.5px solid rgba(236, 227, 209, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; color: #ECE3D1; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-med) var(--ease-out), color var(--t-fast); }
.trailer-card__play svg { width: 26px; height: 26px; margin-left: 4px; }
.trailer-card:hover .trailer-card__play, .trailer-card:focus-visible .trailer-card__play { background: var(--gold); border-color: var(--gold); color: var(--bark-deep); transform: scale(1.06); }
.trailer-card:active .trailer-card__play { transform: scale(.97); }
.trailer-card__label { position: absolute; z-index: 2; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); display: grid; gap: .15rem; }
.trailer-card__label strong { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.1; color: #ECE3D1; }
.trailer-card__label span { font-size: var(--fs-small); color: var(--on-dark-2); }
@media (min-width: 1025px) {
  .trailers { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s-3); }
  .trailers .trailer-card:first-child { grid-row: span 2; height: 100%; aspect-ratio: auto; }
  .trailers .trailer-card:first-child .trailer-card__play { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
  .trailers .trailer-card:first-child .trailer-card__play svg { width: 32px; height: 32px; }
  .trailers .trailer-card:first-child .trailer-card__label { left: var(--s-4); bottom: var(--s-4); }
  .trailers .trailer-card:first-child .trailer-card__label strong { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); }
}
@media (max-width: 640px) { .trailer-card__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; } }
.modal__video video { width: 100%; height: 100%; display: block; background: #000; }

/* ---------- Photo book wall (mockup photography instead of cut-out covers) ---------- */
.tile__art--photo { padding: 0; aspect-ratio: 4 / 3; background: var(--sand-mid); }
.tile__art--photo img { inset: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.tile:hover .tile__art--photo img { transform: scale(1.04); }
.tile__facts { margin-top: .35rem; font-size: .8rem; color: var(--ink-3); font-variant-numeric: lining-nums; }
.section--forest .tile__facts { color: var(--on-dark-3); }
.wall--books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1025px) { .wall--books { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); } }
.feature__art--photo img { inset: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.year-head { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-6) 0 var(--s-3); padding-top: var(--s-3); border-top: var(--rule); }
.year-head:first-child { margin-top: 0; }
.year-head h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); color: var(--forest); font-variation-settings: "wdth" 78; }
.year-head span { color: var(--ink-3); font-size: var(--fs-small); }

/* Book page: mockup photo in the hero */
.case-hero__art--photo { padding: 0; height: auto; max-width: 640px; aspect-ratio: 4 / 3; overflow: hidden; box-shadow: var(--shadow-float); }
.case-hero__art--photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: none; }

/* ---------- Galleries (case studies, book pages) ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-4); }
.gallery figure { margin: 0; position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); aspect-ratio: 4 / 5; }
.gallery .is-wide { grid-column: span 2; }
.gallery .is-wide img { aspect-ratio: 3 / 2; }
.gallery figcaption { margin-top: .4rem; font-size: var(--fs-small); color: var(--ink-3); }
@media (min-width: 641px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } .gallery .is-wide { grid-column: span 2; } .gallery .is-wide img { aspect-ratio: auto; height: 100%; } }
.bleed { margin-inline: calc(50% - 50vw); }
.case-band { padding-block: var(--section-y); }
.case-band + .case-band { padding-top: 0; }
.case-split { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 1025px) { .case-split { grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 5vw, 5rem); } .case-split--flip > :first-child { order: 2; } }
.case-split h2 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.6rem); }
.case-split p { color: var(--ink-2); margin-top: var(--s-2); }
.section--bark .case-split p, .section--forest .case-split p { color: var(--on-dark-2); }
.case-split ul { margin-top: var(--s-3); display: grid; gap: .45rem; }
.case-split li { position: relative; padding-left: 1.4rem; color: var(--ink-2); }
.case-split li::before { content: ""; position: absolute; left: .2rem; top: .6em; width: .45em; height: .45em; background: var(--sandstone); transform: rotate(45deg); }
.section--bark .case-split li, .section--forest .case-split li { color: var(--on-dark-2); }
.photo-frame { margin: 0; }
.photo-frame img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.photo-frame figcaption { margin-top: .6rem; font-size: var(--fs-small); color: var(--ink-3); }
.section--bark .photo-frame figcaption, .section--forest .photo-frame figcaption { color: var(--on-dark-3); }

/* Reader quotes (Amazon, Facebook, endorsements) */
.voices { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
@media (min-width: 641px) { .voices { grid-template-columns: 1fr 1fr; } }
.voice { border-top: 2px solid var(--gold); padding-top: var(--s-3); }
.voice p { font-family: var(--font-serif); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.4; color: var(--bark); max-width: none; }
.voice footer { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--ink-3); }
.voice footer strong { display: block; color: var(--ink-2); font-weight: 600; }
.voice--big { grid-column: 1 / -1; }
.voice--big p { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2.1rem); line-height: 1.25; }
.section--forest .voice p, .section--bark .voice p { color: var(--on-dark); }
.section--forest .voice footer, .section--bark .voice footer { color: var(--on-dark-3); }
.section--forest .voice footer strong, .section--bark .voice footer strong { color: var(--on-dark-2); }

/* Case study cards: four now */
@media (min-width: 641px) { .cases--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .cases--4 { grid-template-columns: repeat(4, 1fr); } }
.cases > :nth-child(4n+4) .case__art { --tile: var(--sandstone); }

/* Team: real photo */
.person__photo img { object-position: center 25%; }
.book-sub { margin-top: .6rem; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height: 1.3; color: var(--ink-2); max-width: 36ch; }
/* fixes */
.hero--photo .hero__inner { position: static; }
.hero__media picture { display: block; height: 100%; }
@media (min-width: 1025px) { .hero--photo .hero__inner { grid-template-columns: 1fr; } }
.trailer video { height: auto; }
/* The review-options panel shares the .review class with testimonial cards; keep it plain. */
div.review[data-review] { background: none; border: 0; padding: 0; border-radius: 0; gap: 0; }
div.review[data-review]::before { content: none; }
@media (max-width: 640px) { .spot__dots button { width: 16px; } .spot__controls { gap: var(--s-1); } .spot__dots { flex-wrap: wrap; max-width: calc(100vw - 9rem); } }
@media (max-width: 1024px) {
  .hero__media img { aspect-ratio: 4 / 5; max-height: 78vh; object-position: 50% 60%; }
  .hero__media figcaption { position: static; text-align: left; padding: var(--s-1) var(--gutter) var(--s-3); max-width: none; }
}
@media (min-width: 1025px) { .hero__media figcaption { right: auto; left: 30%; text-align: left; } }
/* Testimonial cards also use .review; undo the review-panel positioning on them (they were rendering off-screen). */
blockquote.review { position: relative; left: auto; bottom: auto; z-index: auto; max-width: none; font-size: inherit; flex-direction: column; align-items: stretch; }
@media (max-width: 640px) { blockquote.review { left: auto; bottom: auto; } }
.hero__kicker { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; color: var(--sandstone-ink); margin-bottom: var(--s-2); }
.hero__kicker .dia { width: .45em; height: .45em; }
@media (max-width: 640px) { .spot:not(.spot--strip) .spot__dots { display: none; } .spot:not(.spot--strip) .spot__controls { justify-content: space-between; } }

/* Ticker: same desk as the hero, so the strip reads as the hero's bottom edge */
.ticker { background: var(--charcoal-deep); color: var(--on-dark-2); border-block: 1px solid rgba(243, 237, 224, .07); padding: .75rem 0; }
.ticker__group { font-weight: 500; font-size: .88rem; letter-spacing: .04em; }
.ticker__group .dia { color: var(--sandstone); width: .38em; height: .38em; }
@media (min-width: 1025px) {
  .trailers .trailer-card:not(:first-child) .trailer-card__play { left: var(--s-3); top: auto; bottom: var(--s-3); margin: 0; width: 46px; height: 46px; }
  .trailers .trailer-card:not(:first-child) .trailer-card__play svg { width: 18px; height: 18px; margin-left: 3px; }
  .trailers .trailer-card:not(:first-child) .trailer-card__label { left: calc(var(--s-3) + 58px); }
}

/* ---------- Colin's welcome letter ----------
   The note from the hero photo, set at reading size on a sheet of sand paper.
   The hand-drawn sandstone underline is the site's human mark; it draws itself once when the letter scrolls in. */
.letter { background: var(--paper-white); padding-block: var(--section-y); border-bottom: var(--rule); overflow: hidden; }
.letter__grid { display: grid; gap: var(--s-5); align-items: center; }
.letter__intro h2 { font-family: var(--font-serif); font-weight: 600; font-variation-settings: "opsz" 72; font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); line-height: 1.04; letter-spacing: -.015em; max-width: 13ch; }
.letter__intro .lead { margin-top: var(--s-3); max-width: 34ch; }
.letter__paper {
  position: relative; max-width: 620px; justify-self: center; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.75rem) clamp(2rem, 4vw, 3rem);
  background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .28), transparent 55%), #CFC3AD;
  color: #2E2A22; font-family: var(--font-serif); font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); line-height: 1.6;
  border-radius: 3px; box-shadow: 0 30px 50px -28px rgba(42, 37, 26, .55), 0 2px 0 rgba(42, 37, 26, .06);
  rotate: -1.2deg;
}
.letter__paper::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.letter__paper p { max-width: none; }
.letter__paper p + p { margin-top: 1em; }
.letter__mark { width: 54px; height: auto; margin: 0 auto var(--s-4); }
.letter__close { font-style: italic; }
.letter__sign { margin-top: var(--s-4) !important; font-style: italic; font-size: 2rem; line-height: 1; color: var(--sandstone-ink); }
.letter__sign span { display: block; margin-top: .5rem; font-style: normal; font-family: var(--font); font-size: .85rem; color: #5A5141; }
.hl { position: relative; white-space: nowrap; }
.hl__stroke { position: absolute; left: -2%; bottom: -.32em; width: 104%; height: .5em; color: var(--sandstone); overflow: visible; }
.hl__stroke path { stroke-dasharray: 320; stroke-dashoffset: 0; }
.js .letter__paper.reveal .hl__stroke path { stroke-dashoffset: 320; transition: stroke-dashoffset 1100ms cubic-bezier(.65, 0, .35, 1) 500ms; }
.js .letter__paper.reveal.is-visible .hl__stroke path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .js .letter__paper.reveal .hl__stroke path { stroke-dashoffset: 0; transition: none; } }
@media (min-width: 1025px) { .letter__grid { grid-template-columns: 4fr 6fr; gap: clamp(3rem, 6vw, 6rem); } .letter__paper { justify-self: start; } }

/* ---------- In their words: one author at a time, with a real photo ---------- */
.vf__head { font-family: var(--font-serif); font-weight: 600; font-variation-settings: "opsz" 72; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-bottom: var(--s-4); }
.vf__slides { display: grid; }
.vf__slide { display: grid; gap: var(--s-4); align-items: center; }
.vf__slide + .vf__slide { margin-top: var(--s-6); }
.vf__photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-float); aspect-ratio: 4 / 3; background: var(--sand-mid); }
.vf__photo img { width: 100%; height: 100%; object-fit: cover; }
.vf__quote p { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.22; letter-spacing: -.01em; color: var(--bark); max-width: 28ch; text-wrap: pretty; }
.vf__quote footer { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-3); }
.vf__quote footer strong { display: block; font-size: 1rem; color: var(--bark); font-weight: 600; }
.vf__quote footer a { color: var(--ink-2); }
.vf__quote footer a:hover { color: var(--sandstone-ink); }
.vf__nav { display: none; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.vf__count { font-size: var(--fs-small); color: var(--ink-3); min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
.js .vf__nav { display: flex; }
.js .vf__slide { grid-area: 1 / 1; margin-top: 0 !important; opacity: 0; visibility: hidden; transition: opacity 500ms var(--ease-out), visibility 0s 500ms; }
.js .vf__slide.is-active { opacity: 1; visibility: visible; transition: opacity 500ms var(--ease-out); }
@media (min-width: 900px) {
  .vf__slide { grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .vf__photo { aspect-ratio: 4 / 5; }
  .vf__nav { margin-left: calc(41.66% + clamp(2.5rem, 5vw, 5rem) * .41); }
}
@media (max-width: 1024px) {
  .trailer-card__play { left: var(--s-3); top: auto; bottom: var(--s-3); margin: 0; width: 46px; height: 46px; }
  .trailer-card__play svg { width: 18px; height: 18px; margin-left: 3px; }
  .trailer-card__label { left: calc(var(--s-3) + 58px); }
}

/* Steam off the espresso in the hero photo (canvas, main.js). Screen blend so it only ever lightens. */
.hero__media { position: relative; }
@media (min-width: 1025px) { .hero__media { position: absolute; } }
.hero__steam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; z-index: 1; }

/* Soft moving light across the desk (canvas, main.js). Screen blend, so it only ever lightens. */
.hero__leaves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hero--photo .hero__copy { z-index: 3; }
/* The hero is a flex container on desktop, so its inner wrapper must not form its own layer:
   media (1) < leaf shadows (2) < copy (3) */
.hero--photo .hero__inner { z-index: auto; }
.hero--photo .hero__media { z-index: 1; }
/* Phones: plain alpha blending for the steam (no full-screen blend layer to composite every frame). */
@media (max-width: 1024px) { .hero__steam { mix-blend-mode: normal; } }
/* Phones: the steam box can reach the top edge of the photo; fade it out there like the photo itself does. */
@media (max-width: 1024px) { .hero__steam { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); } }

/* ---------- Type option C: VS John Muir Sans (review panel) ----------
   An all-caps face (no lowercase), so it goes on headlines, subheads, numbers, and small labels only;
   paragraphs, buttons, and nav stay in Archivo. Wide for the big headlines, Regular for subheads and
   numbers, Thin for labels. font-size-adjust sets every John Muir cap to the same height relative to
   its box, so all-caps headlines don't overpower their sections. Fonts only download if this option is on. */
@font-face { font-family: "John Muir Sans Wide"; src: url("../fonts/john-muir-sans-wide.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "John Muir Sans"; src: url("../fonts/john-muir-sans-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "John Muir Sans"; src: url("../fonts/john-muir-sans-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "John Muir Sans"; src: url("../fonts/john-muir-sans-thin.woff2") format("woff2"); font-weight: 100; font-display: swap; }
.type-c :is(h1, h2), .type-c .promise-final__big {
  font-family: "John Muir Sans Wide", var(--font) !important; font-weight: 400 !important; font-style: normal !important;
  font-variation-settings: normal !important; letter-spacing: .01em !important; line-height: .86 !important;
  font-size-adjust: cap-height .5;
}
.type-c :is(h3, .stats__num, .trailer-card__label strong, .vf__quote footer strong, .phases__big, .results dt) {
  font-family: "John Muir Sans", var(--font) !important; font-weight: 400 !important; font-style: normal !important;
  font-variation-settings: normal !important; letter-spacing: .03em !important; font-size-adjust: cap-height .52;
}
.type-c :is(.promises__eyebrow, .hero__kicker, .tile__genre, .case__genre, .series__eyebrow, .breadcrumb, .footer-col h2, .promise__num, .person__role) {
  font-family: "John Muir Sans", var(--font) !important; font-weight: 100 !important; letter-spacing: .08em !important; font-size-adjust: cap-height .66;
}
.type-c .footer-col h2 { font-weight: 400 !important; }
.type-c .hero h1 { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 6rem); }
.type-c :is(h1, h2) { padding-top: .08em; }
.type-c h3 { line-height: 1.1 !important; }
/* Four trailers: the first runs full width, the other three sit in a row beneath it. */
@media (min-width: 641px) {
  .trailers:has(> :nth-child(4)) { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; }
  .trailers:has(> :nth-child(4)) .trailer-card:first-child { grid-column: 1 / -1; grid-row: auto; height: auto; aspect-ratio: 21 / 9; }
  .trailers:has(> :nth-child(4)) .trailer-card:not(:first-child) .trailer-card__label strong { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); }
  .trailers:has(> :nth-child(4)) .trailer-card:not(:first-child) .trailer-card__label span { font-size: .8rem; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .trailers:has(> :nth-child(4)) .trailer-card:not(:first-child) .trailer-card__play { left: 50%; top: 42%; bottom: auto; margin: -21px 0 0 -21px; width: 42px; height: 42px; }
  .trailers:has(> :nth-child(4)) .trailer-card:not(:first-child) .trailer-card__label { left: .75rem; right: .75rem; bottom: .7rem; }
  .trailers:has(> :nth-child(4)) .trailer-card:not(:first-child) .trailer-card__label span { display: none; }
  .trailers:has(> :nth-child(4)) .trailer-card:not(:first-child) .trailer-card__label strong { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}