/* home-bundle.css — scapes + site + home + hand + mobile, concatenated in load order.
   Rebuild this whenever a source file changes. */

/* ==================== scapes.css ==================== */
/* ============================================================
   Scapes Environmental Design — colors_and_type.css
   "Where Luxury Takes Root."
   Warm, immersive, ultra-luxury landscape brand.
   ============================================================ */

/* --- Web fonts: loaded via <link> in each page head (hoisted out of @import
   2026-08-08 — @import forced a serial chain HTML->css->fonts and cost ~1.3s FCP) --- */

/* --- Begin-a-conversation consult control (puzzle icon + hand label) --- */
.consult-open{display:inline-flex;align-items:center;gap:14px;text-decoration:none;padding:14px 26px;border-radius:24px;transition:background .4s ease;}
.consult-open,.consult-open:hover{text-decoration:none;border:0;}
.consult-open img{width:164px;height:auto;filter:drop-shadow(0 3px 12px rgba(0,0,0,.45)) drop-shadow(0 0 16px rgba(232,145,60,.30));transition:transform .3s ease,filter .4s ease;}
.consult-open:hover img,.consult-open:focus-visible img{transform:rotate(-3deg) scale(1.06);filter:drop-shadow(0 3px 12px rgba(0,0,0,.45)) drop-shadow(0 0 30px rgba(242,163,82,.72)) drop-shadow(0 0 60px rgba(232,145,60,.34));}
.consult-open:hover,.consult-open:focus-visible{background:radial-gradient(ellipse at center, rgba(58,34,10,.86) 0%, rgba(30,18,8,.60) 46%, rgba(0,0,0,0) 80%);}
.consult-open span{font-family:'Architects Daughter',cursive;font-size:30px;line-height:1.15;color:#ebe3d2;transition:color .35s ease,text-shadow .35s ease;}
.consult-open:hover span,.consult-open:focus-visible span{color:#fbf3e4;text-shadow:0 0 22px rgba(242,163,82,.55);}

/* grand variant — the CTA stands alone, bigger, pieces breathing (Jason 7/11) */
.consult-open--grand img{width:clamp(150px,16vw,200px);animation:consult-snap 5.5s ease-in-out infinite;transform-origin:52% 55%;}
.consult-open--grand span{font-size:clamp(28px,3vw,38px);}
@keyframes consult-snap{
  0%,100%{transform:rotate(0deg) scale(1);}
  42%{transform:rotate(-2.4deg) scale(1.015);}
  50%{transform:rotate(-2deg) scale(1.03);filter:drop-shadow(0 3px 12px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(224,162,104,.28));}
  58%{transform:rotate(1.6deg) scale(1.015);}
}
@media (prefers-reduced-motion:reduce){.consult-open--grand img{animation:none;}}
/* phones — keep the door inside the screen (was clipping the label off the right) */
@media (max-width:620px){
  /* phones have no hover — the door must read as a lit, tappable target at rest (Jason 8/2) */
  .consult-open{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;max-width:380px;min-height:112px;margin:0 auto;padding:18px 16px;border-radius:20px;background:radial-gradient(ellipse at center, rgba(0,0,0,.86) 0%, rgba(0,0,0,.66) 52%, rgba(0,0,0,0) 84%);}
  .consult-open img{width:clamp(84px,22vw,104px);}
  .consult-open span{font-size:clamp(22px,6.4vw,26px);text-align:center;}
  .consult-open--grand img{width:clamp(88px,24vw,112px);}
  .consult-open--grand span{font-size:clamp(24px,7vw,30px);}
}

:root {
  /* ============================================================
     COLOR SYSTEM
     Warm, earthen, cinematic. Dark surfaces are primary.
     ============================================================ */

  /* --- Brand core (drawn from the logo) --- */
  --scapes-olive:        #5b5d2e;  /* Logo wordmark olive */
  --scapes-olive-deep:   #3f4220;  /* Darker olive — dusk foliage */
  --scapes-olive-soft:   #7a7d4a;  /* Hover/lifted state */
  --scapes-sandstone:    #cab686;  /* Logo seedhead tan */
  --scapes-sandstone-dk: #9c8a5d;

  /* --- Earth + atmosphere --- */
  --ink:           #0a0807;   /* True black, warm-tinted */
  --char-warm:     #130f0b;   /* Warm intermediate — between ink and charcoal; alternating panel bg */
  --charcoal:      #16120e;   /* Primary dark surface — warm charcoal */
  --loam:          #221c16;   /* Rich brown-black, panels */
  --bark:          #3a312a;   /* Elevated dark surface */
  --stone:         #9c948a;   /* Warm mid-grey — tertiary text, AA on all dark surfaces */
  --mist:          #b0a89b;   /* Light stone, muted text */
  --linen:         #ebe3d2;   /* Warm cream — primary on-dark text */
  --paper:         #f6f0e1;   /* Lightest cream — page on light mode */
  --vellum:        #ddd2bd;   /* Slightly deeper cream divider on light */

  /* --- Accent: warmth + light --- */
  --bronze:        #8a6a3a;   /* Muted architectural bronze */
  --bronze-soft:   #a98654;   /* Hover state */
  --ember:         #c4773c;   /* Firelight glow */
  --firelight:     #e0a268;   /* Lantern warmth */
  --water:         #4a5c5e;   /* Cool slate — pool reflection */

  /* ============================================================
     SEMANTIC TOKENS
     (Dark theme — primary. Light variant in .theme-light below.)
     ============================================================ */
  --bg:               var(--charcoal);
  --bg-elevated:      var(--loam);
  --bg-raised:        var(--bark);
  --bg-inverse:       var(--paper);
  --surface-overlay:  rgba(10, 8, 7, 0.72);     /* image protection */
  --surface-veil:     rgba(10, 8, 7, 0.42);

  --fg:               var(--linen);             /* primary text on dark */
  --fg-muted:         var(--mist);              /* secondary text */
  --fg-subtle:        var(--stone);             /* tertiary / metadata */
  --fg-inverse:       var(--charcoal);

  --accent:           var(--scapes-sandstone);  /* primary accent on dark */
  --accent-deep:      var(--bronze);            /* hover / pressed */
  --accent-warm:      var(--ember);             /* glow / highlight */
  --brand:            var(--scapes-olive);      /* literal brand mark */

  --border:           rgba(235, 227, 210, 0.12);
  --border-strong:    rgba(235, 227, 210, 0.22);
  --divider:          rgba(235, 227, 210, 0.08);

  /* ============================================================
     LADDER COMPONENT TOKENS  —  Root · Compose · Elevate
     The offering's organizing system, born in the Programs puzzle
     (PROGRAMS-LADDER-MAP.md). Each tier is an identity token set:
     a surface color, a lifted "ink" for text/marks, a numeral, and
     an emblem. Wear them anywhere a service/program/project sits on
     the ladder via the .ladder-chip primitive (site.css). These
     SURFACE/INK values are the SAME hues the puzzle paints — keep
     the two in lockstep if either changes.
     ============================================================ */
  --root-surface:     #47512a;   /* moss — foundation */
  --root-ink:         #93a458;   /* lifted moss, AA on dark */
  --compose-surface:  #8f4f2a;   /* clay — the build layer */
  --compose-ink:      #cf7d49;   /* lifted clay */
  --elevate-surface:  #8a6e33;   /* bronze — the crown */
  --elevate-ink:      #cda75e;   /* lifted bronze */

  /* ============================================================
     TYPOGRAPHY
     Display: Cormorant Garamond (transitional serif, refined).
     Body / UI: Manrope (humanist sans, warm geometry).
     ============================================================ */
  --font-display: "Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, serif;
  --font-body:    "Manrope", "Söhne", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Reading text — Newsreader: warm editorial serif paired with the Cormorant display.
     Used for paragraphs, leads, essays. UI/labels/nav/buttons stay on --font-body. */
  --font-text:    "Newsreader", "Cormorant Garamond", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — generous for hospitality / editorial feel */
  --t-hero:       clamp(56px, 7.4vw, 116px);   /* @kind font */ /* "Where Luxury Takes Root." */
  --t-display:    clamp(42px, 5vw, 78px);      /* @kind font */
  --t-h1:         clamp(36px, 4vw, 62px);      /* @kind font */
  --t-h2:         clamp(30px, 3.1vw, 46px);    /* @kind font */
  --t-h3:         clamp(24px, 2.2vw, 34px);    /* @kind font */
  --t-h4:         22px;
  --t-lead:       22px;     /* opening paragraph */
  --t-body:       17px;
  --t-small:      14px;
  --t-eyebrow:    12px;     /* uppercase labels */
  --t-micro:      11px;

  --lh-tight:     1.04;   /* @kind font */
  --lh-snug:      1.18;   /* @kind font */
  --lh-default:   1.55;   /* @kind font */
  --lh-prose:     1.7;    /* @kind font */

  --ls-display:   -0.018em;  /* @kind font */
  --ls-body:      0.005em;   /* @kind font */
  --ls-eyebrow:   0.22em;    /* @kind font */

  /* ============================================================
     ELEVATION + RADIUS + MOTION  (used across UI kit)
     ============================================================ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;          /* default; restrained */
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 12px 30px -12px rgba(0,0,0,0.55);
  --shadow-3: 0 30px 80px -30px rgba(0,0,0,0.7);
  --glow-ember: 0 0 60px -10px rgba(196,119,60,0.45);

  --ease-out:   cubic-bezier(0.16, 0.84, 0.30, 1.00);  /* @kind other */ /* cinematic ease */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1.00);  /* @kind other */
  --dur-fast:   220ms;      /* @kind other */
  --dur-base:   520ms;      /* @kind other */
  --dur-slow:   1100ms;     /* @kind other */ /* slow fades, glow transitions */

  /* Spacing — 4px base, generous luxury rhythm */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;
}

/* Light theme override (rare — for printable docs / quiet pages) */
.theme-light {
  --bg:           var(--paper);
  --bg-elevated:  #fbf6e9;
  --bg-raised:    #ffffff;
  --fg:           var(--charcoal);
  --fg-muted:     var(--stone);
  --fg-subtle:    #9c958a;
  --accent:       var(--bronze);
  --accent-deep:  var(--scapes-olive);
  --brand:        var(--scapes-olive);
  --border:       rgba(34, 28, 22, 0.10);
  --border-strong:rgba(34, 28, 22, 0.20);
  --divider:      rgba(34, 28, 22, 0.07);
}

/* ============================================================
   BASE  +  SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-default);
  letter-spacing: var(--ls-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* No slanted serif anywhere: neutralize the browser's default em/i italic so
   every emphasis renders upright in Manrope. Context rules still add the
   sandstone gold / weight where emphasis needs to read. */
em, i, cite, address { font-style: normal; }

/* HERO — the cinematic opener, e.g. "Where Luxury Takes Root." */
.t-hero,
h1.hero {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--linen);
  text-wrap: balance;
}
.t-hero em, h1.hero em {
  font-style: normal; 
  font-weight: 400;
  color: var(--scapes-sandstone);
}

/* DISPLAY — section openers */
.t-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

/* H1–H4 */
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.006em;
}
h4, .t-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.3;
  letter-spacing: 0;
}

/* Lead paragraph — opening statement under hero */
.t-lead {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--mist);
  max-width: 32ch;
}

/* Body prose */
p, .t-body {
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  color: var(--fg);
  max-width: 62ch;
  text-wrap: pretty;
}
p + p { margin-top: 1em; }

/* Small / metadata */
.t-small  { font-size: var(--t-small);  color: var(--fg-muted); line-height: 1.55; }
.t-micro  { font-size: var(--t-micro);  color: var(--fg-subtle); line-height: 1.5; }

/* EYEBROW — section label, uppercase, tracked */
.t-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.t-eyebrow--muted { color: var(--fg-subtle); }

/* Tagline (logo subtitle echo): "Environmental Design, Inc." */
.t-tag {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--mist);
}

/* Inline rule used between display lines, e.g. ┄ */
.t-rule {
  display: inline-block;
  width: 48px;
  border-top: 1px solid var(--accent);
  vertical-align: middle;
  margin: 0 var(--space-4);
}

/* Link */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--firelight); border-bottom-color: currentColor; }

/* Selection */
::selection { background: var(--bronze); color: var(--paper); }


/* ==================== site.css ==================== */
/* ============================================================
   Scapes — site.css
   Production-grade global patterns: nav, footer, sections,
   buttons, reveals, accessibility floor.
   Loads on every page after scapes.css (tokens).
   ============================================================ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--linen);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip-to-content for keyboard users */
.skip-to-content {
  position: absolute; top: -200px; left: 16px;
  padding: 10px 16px;
  background: var(--charcoal); color: var(--linen);
  border: 1px solid var(--scapes-sandstone);
  border-radius: 4px;
  font-family: var(--font-body); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  z-index: 1000;
  transition: top 220ms var(--ease-out);
}
.skip-to-content:focus { top: 16px; outline: none; }

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

/* ============================================================
   NAV — fixed transparent, settles to backdrop-blur on scroll
   ============================================================ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: clamp(16px, 1.8vw, 22px) clamp(20px, 3.6vw, 56px);
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  transition: padding 520ms var(--ease-out);
}
/* Scrolled background lives on a masked layer so its BOTTOM EDGE fades out
   instead of cutting a hard line. The blurred panel dissolves over its lower
   third; logo + links sit crisp above it. No border. */
.site-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(22, 18, 14, 0.82);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  opacity: 0;
  transition: opacity 520ms var(--ease-out);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}
.site-nav.is-scrolled::before { opacity: 1; }
.site-nav.is-scrolled {
  padding-top: clamp(12px, 1.4vw, 18px);
  padding-bottom: clamp(12px, 1.4vw, 18px);
}
.site-nav__brand {
  display: flex; align-items: center;
  border-bottom: none;
  transition: opacity 320ms var(--ease-out);
}
.site-nav__brand img {
  height: clamp(36px, 3.4vw, 45px);
  width: auto; display: block;
}
.site-nav__brand:hover { opacity: 0.82; }

.site-nav__links {
  display: flex; align-items: center;
  gap: clamp(12px, 1.4vw, 24px);
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mist); font-weight: 500;
}
/* Bilingual nav twins: English is the default; the ES/EN switch flips
   [data-lang] on <html> to reveal the Spanish twins. Without this rule
   the Spanish spans render alongside English (the bleed Jason caught). */
.es-only { display: none; }
html[data-lang="es"] .en { display: none !important; }
html[data-lang="es"] .es-only { display: inline; }
html[data-lang="en"] .es-only { display: none; }

.site-nav__link {
  position: relative;
  color: var(--mist);
  border-bottom: none;
  padding-bottom: 6px;
  transition: color 320ms var(--ease-out);
}
.site-nav__link::after {
  content: ""; position: absolute;
  left: 0; bottom: 0; height: 1px; width: 0;
  background: currentColor;
  transition: width 320ms var(--ease-out);
}
.site-nav__link:hover,
.site-nav__link:focus-visible { color: var(--firelight); }
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after { width: 100%; }

/* Aquarius — the only iconned nav item, so it reads at a glance */
.site-nav__link--aq { display: inline-flex; align-items: center; gap: 8px; }
.site-nav__aq-icon {
  width: 20px; height: 20px; border-radius: 50%;
  background: transparent; padding: 0;
  object-fit: contain; flex: 0 0 auto;
}
.site-nav__link--aq:hover .site-nav__aq-icon,
.site-nav__link--aq[aria-current="page"] .site-nav__aq-icon {
  box-shadow: 0 0 10px -1px rgba(177,203,79,0.55);
}

/* The Rain Lady Society — the front door into the period brand world.
   Bronze-toned with a raindrop mark so it reads, at a glance, as its own
   place: a separate, older world that Scapes stewards. */
.site-nav__link--society { display: inline-flex; align-items: center; gap: 7px; color: var(--bronze); }
.site-nav__drop {
  width: 12px; height: 14px; flex: 0 0 auto;
  fill: var(--bronze);
  transition: fill 320ms var(--ease-out), filter 320ms var(--ease-out);
}
.site-nav__link--society:hover,
.site-nav__link--society:focus-visible { color: var(--firelight); }
.site-nav__link--society:hover .site-nav__drop,
.site-nav__link--society[aria-current="page"] .site-nav__drop {
  fill: var(--firelight);
  filter: drop-shadow(0 0 6px rgba(224,162,104,0.6));
}

.site-nav__cta {
  background: var(--bronze); color: var(--paper);
  padding: 10px 20px; border-radius: var(--radius-md);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 500;
  border-bottom: none;
  margin-left: 6px;
  transition: background 320ms var(--ease-out);
}
.site-nav__cta:hover,
.site-nav__cta:focus-visible {
  background: var(--bronze-soft); color: var(--paper);
}

/* WORK TODAY — the one hiring door. Olive pill, deliberately DIFFERENT from the
   bronze client CTA, so jobs read as a separate action at a glance. Site-wide. */
.site-nav__work {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--scapes-olive); color: var(--paper);
  padding: 10px 20px; border-radius: var(--radius-md);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  border-bottom: none; margin-left: 6px; white-space: nowrap;
  border: 1px solid var(--scapes-olive-soft);
  transition: background 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.site-nav__work:hover,
.site-nav__work:focus-visible {
  background: var(--scapes-olive-soft); color: var(--paper); transform: translateY(-1px);
}
.site-nav__work span[aria-hidden] { display: inline-block; transition: transform 320ms var(--ease-out); }
.site-nav__work:hover span[aria-hidden] { transform: translateX(3px); }

/* Mobile menu toggle */
.site-nav__toggle {
  appearance: none; background: none; border: 0;
  /* 44x44 thumb target (Apple/Google guideline); inner padding keeps the
     three bars at their original 36px visual width, centered. */
  width: 44px; height: 44px; padding: 8px 4px; box-sizing: border-box;
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  cursor: pointer;
}
.site-nav__toggle span {
  display: block; height: 1px; background: var(--linen);
  transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
.site-nav.is-open .site-nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav.is-open .site-nav__toggle span:nth-child(2) { opacity: 0; }
.site-nav.is-open .site-nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .site-nav__toggle { display: flex; }
  .site-nav__links {
    position: fixed; top: 0; left: 0; right: 0;
    flex-direction: column; align-items: flex-start;
    gap: 0;
    background: rgba(10, 8, 7, 0.96);
    backdrop-filter: blur(24px) saturate(140%);
    padding: 100px 32px 48px;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 520ms var(--ease-out),
                opacity 520ms var(--ease-out),
                visibility 520ms;
    font-size: 14px;
  }
  .site-nav.is-open .site-nav__links {
    transform: none; opacity: 1; visibility: visible;
  }
  .site-nav__link, .site-nav__cta { padding: 16px 0; width: 100%; }
  .site-nav__cta { margin: 16px 0 0; display: inline-block; padding: 12px 22px; width: auto; }
  .site-nav__work { margin: 16px 0 0; padding: 12px 22px; width: auto; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot {
  background: var(--ink);
  padding: clamp(64px, 9vw, 104px) clamp(24px, 3.6vw, 56px) clamp(40px, 6vw, 56px);
  border-top: 1px solid var(--border);
}
.site-foot__inner { max-width: 1320px; margin: 0 auto; }
.site-foot__manifesto {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(34px, 4.4vw, 64px); line-height: 1.1;
  letter-spacing: -0.014em; color: var(--linen);
  max-width: 20ch; text-wrap: balance; margin: 0;
}
.site-foot__manifesto em {
  font-style: normal;  color: var(--scapes-sandstone);
}
.site-foot__manifesto .muted { color: var(--mist); display: block; }
.site-foot__rule {
  margin-top: clamp(40px, 6vw, 68px);
  margin-bottom: clamp(24px, 3.5vw, 40px);
  border-top: 1px solid var(--border);
}
.site-foot__cols {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
@media (max-width: 980px) { .site-foot__cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .site-foot__cols { grid-template-columns: 1fr; } }

.site-foot__about img {
  height: 44px; width: auto; display: block;
}
.site-foot__about p {
  font-family: var(--font-body); font-size: 13px; line-height: 1.7;
  color: var(--stone); max-width: 34ch; margin: 24px 0 0;
}
/* Social row — brand channels, linen glyphs in bordered circles,
   sandstone on hover. Lives in the footer About column, site-wide. */
.site-foot__social {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px;
}
.site-foot__social a {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--linen); opacity: 0.8;
  transition: color 300ms var(--ease-out), border-color 300ms var(--ease-out),
              opacity 300ms var(--ease-out), background 300ms var(--ease-out);
}
.site-foot__social a:hover, .site-foot__social a:focus-visible {
  color: var(--scapes-sandstone); border-color: var(--scapes-sandstone);
  opacity: 1; background: rgba(202,182,134,0.06); outline: none;
}
.site-foot__social svg { width: 18px; height: 18px; display: block; }
.site-foot__col-head {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--scapes-sandstone); font-weight: 500;
}
.site-foot__col-list {
  margin-top: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.site-foot__col-list a {
  font-family: var(--font-body); font-size: 14px;
  color: var(--linen); border-bottom: none;
  transition: color 220ms var(--ease-out);
}
.site-foot__col-list a:hover,
.site-foot__col-list a:focus-visible { color: var(--scapes-sandstone); }
/* Mobile: footer links were 16px-tall taps in a dense stack — a thumb misses
   them. Pad each to a real target without changing the desktop rhythm. */
@media (max-width: 760px) {
  .site-foot__col-list { gap: 4px; }
  .site-foot__col-list a { display: block; padding: 11px 0; font-size: 15px; }
}

.site-foot__legal {
  margin-top: clamp(40px, 6vw, 60px); padding-top: 24px;
  border-top: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--stone); font-weight: 500;
}
.site-foot__legal a { color: var(--stone); border-bottom: none; }
.site-foot__legal a:hover { color: var(--scapes-sandstone); }
.site-foot__legal-links { display: flex; gap: 24px; flex-wrap: wrap; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500;
  padding: 16px 28px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none; border-bottom: none;
  transition: background 320ms var(--ease-out),
              color 320ms var(--ease-out),
              border-color 320ms var(--ease-out);
  appearance: none;
}
.btn--primary { background: var(--bronze); color: var(--paper); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--bronze-soft); color: var(--paper); }
/* Ghost = a quiet doorway, not a boxed button. No border, no rounded rect —
   the label carries its own hairline, which lights up on hover. */
.btn--ghost {
  background: transparent; color: var(--linen);
  border: 0; border-radius: 0;
  padding-left: 0; padding-right: 0;
  align-self: center;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: .7em;
  transition: color 320ms var(--ease-out), text-decoration-color 320ms var(--ease-out);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  color: var(--scapes-sandstone);
  text-decoration-color: var(--scapes-sandstone);
}
.btn--link {
  background: transparent; color: var(--scapes-sandstone);
  padding: 4px 0; border-radius: 0; letter-spacing: 0.24em;
  border-bottom: 1px solid transparent;
}
.btn--link:hover, .btn--link:focus-visible {
  color: var(--firelight); border-bottom-color: currentColor;
}
.btn .arrow {
  display: inline-block; width: 18px; height: 1px;
  background: currentColor; position: relative;
  transition: width 320ms var(--ease-out);
}
.btn .arrow::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arrow, .btn:focus-visible .arrow { width: 30px; }

/* ============================================================
   LADDER CHIP  —  the drop-in component-token badge.
   Wear a service / program / project's place on the ladder
   anywhere: ●  I  Root. Pulls from the LADDER COMPONENT TOKENS
   in scapes.css. Render <a> for a link to its tier, <span> for a
   static mark. Add a tier modifier: --root | --compose | --elevate.

     <a class="ladder-chip ladder-chip--compose" href="programs.html#tier-compose">
       <span class="ladder-chip__dot"></span>
       <span class="ladder-chip__num">II</span>
       <span class="ladder-chip__name">Compose</span>
     </a>

   The chip's text color IS its tier ink — so border + dot derive
   from currentColor; only the surface-tinted background + dot halo
   are set per tier (no local custom props, to keep the token
   closure clean).
   ============================================================ */
.ladder-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 11px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, currentColor 36%, transparent);
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  line-height: 1; text-decoration: none; vertical-align: middle;
  transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.ladder-chip__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: currentColor;
}
.ladder-chip__num {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 14px; letter-spacing: 0; line-height: 1; opacity: 0.92;
}
.ladder-chip__name { letter-spacing: 0.16em; }
a.ladder-chip:hover, a.ladder-chip:focus-visible {
  border-color: color-mix(in oklab, currentColor 62%, transparent);
  outline: none;
}
/* Per-tier: ink (text → drives border + dot via currentColor) + surface tints */
.ladder-chip--root    { color: var(--root-ink);    background: color-mix(in oklab, var(--root-surface) 15%, transparent); }
.ladder-chip--compose { color: var(--compose-ink); background: color-mix(in oklab, var(--compose-surface) 15%, transparent); }
.ladder-chip--elevate { color: var(--elevate-ink); background: color-mix(in oklab, var(--elevate-surface) 15%, transparent); }
.ladder-chip--root .ladder-chip__dot    { box-shadow: 0 0 0 3px color-mix(in oklab, var(--root-surface) 34%, transparent); }
.ladder-chip--compose .ladder-chip__dot { box-shadow: 0 0 0 3px color-mix(in oklab, var(--compose-surface) 34%, transparent); }
.ladder-chip--elevate .ladder-chip__dot { box-shadow: 0 0 0 3px color-mix(in oklab, var(--elevate-surface) 34%, transparent); }
a.ladder-chip--root:hover,    a.ladder-chip--root:focus-visible    { background: color-mix(in oklab, var(--root-surface) 26%, transparent); }
a.ladder-chip--compose:hover, a.ladder-chip--compose:focus-visible { background: color-mix(in oklab, var(--compose-surface) 26%, transparent); }
a.ladder-chip--elevate:hover, a.ladder-chip--elevate:focus-visible { background: color-mix(in oklab, var(--elevate-surface) 26%, transparent); }
/* Compact variant — for dense lists / cards */
.ladder-chip--sm { padding: 4px 11px 4px 9px; gap: 7px; font-size: 10px; }
.ladder-chip--sm .ladder-chip__dot { width: 7px; height: 7px; }
.ladder-chip--root.ladder-chip--sm .ladder-chip__dot    { box-shadow: 0 0 0 2.5px color-mix(in oklab, var(--root-surface) 34%, transparent); }
.ladder-chip--compose.ladder-chip--sm .ladder-chip__dot { box-shadow: 0 0 0 2.5px color-mix(in oklab, var(--compose-surface) 34%, transparent); }
.ladder-chip--elevate.ladder-chip--sm .ladder-chip__dot { box-shadow: 0 0 0 2.5px color-mix(in oklab, var(--elevate-surface) 34%, transparent); }
.ladder-chip--sm .ladder-chip__num { font-size: 12px; }

/* ============================================================
   SECTION SCAFFOLDING + EYEBROW + DIVIDERS
   ============================================================ */
.section {
  padding: clamp(64px, 8vw, 112px) clamp(24px, 4vw, 80px);
}
.section--inset { padding-top: clamp(88px, 10vw, 140px); padding-bottom: clamp(48px, 6vw, 88px); }
.section--tight { padding: clamp(48px, 6vw, 76px) clamp(24px, 4vw, 80px); }
.section__inner { max-width: 1480px; margin: 0 auto; }
.section--ink {
  background: linear-gradient(to bottom,
    var(--charcoal) 0,
    var(--ink) clamp(72px, 9vw, 140px),
    var(--ink) calc(100% - clamp(72px, 9vw, 140px)),
    var(--charcoal) 100%);
}
.section--loam { background: var(--loam); }
/* A SHALLOWER dip, for the panel that follows another --ink section (Jason m0340).
   Two identical ink panels stacked read as one long flat band; this one only falls
   to the warm intermediate, so the page breathes deep–shallow instead of deep–deep. */
/* Two different jobs, two classes (verifier m0530 — they were sharing one).
   --ink-deep: a full dip to true ink over a LONG ramp. Breaks up a run of
   identical charcoal sections. Used on the homepage's Three Components.
   --ink-swell: a shallow dip that only reaches the warm intermediate, for a
   panel sitting next to another dipping section so the two do not read as one
   flat band (Jason m0340). Used on Root Juice. */
.section--ink-deep {
  background: linear-gradient(to bottom,
    var(--charcoal) 0,
    var(--ink) clamp(90px, 11vw, 180px),
    var(--ink) calc(100% - clamp(90px, 11vw, 180px)),
    var(--charcoal) 100%);
}
.section--ink-swell {
  background: linear-gradient(to bottom,
    var(--charcoal) 0,
    var(--char-warm) clamp(56px, 7vw, 108px),
    var(--char-warm) calc(100% - clamp(56px, 7vw, 108px)),
    var(--charcoal) 100%);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--scapes-sandstone); font-weight: 500;
  margin: 0;
}
.eyebrow::before {
  content: ""; display: inline-block;
  width: 36px; height: 1px; background: currentColor;
}
.eyebrow--muted { color: var(--mist); }

.section__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--t-display);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--linen);
  max-width: 18ch; text-wrap: balance;
  margin: clamp(20px, 2.4vw, 32px) 0 0;
}
.section__title em {
  font-style: normal;  font-weight: 400;
  color: var(--scapes-sandstone);
}
.section__lead {
  font-family: var(--font-text); font-style: normal;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.5;
  color: var(--mist);
  max-width: 52ch; text-wrap: pretty;
  margin: clamp(22px, 2.4vw, 32px) 0 0;
}

/* ============================================================
   REVEAL — IntersectionObserver target
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1100ms var(--ease-out),
              transform 1100ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   ALL-ORGANIC MARK — reusable sitewide lockup (Jason m0103/m0105)
   Placed ONLY where literally true: the soil / feed / bed program.
   Links to Root Juice so it promotes the program. Never on the
   mosquito page (synthetic barrier) — the claim stays honest.
   ============================================================ */
.organic-mark {
  display: inline-flex; align-items: center; gap: 13px;
  margin-top: clamp(20px, 2.4vw, 30px);
  padding: 10px 18px 10px 13px;
  border: 1px solid rgba(176,150,60,0.26); border-radius: 999px;
  text-decoration: none; background: rgba(0,0,0,0.12);
  transition: border-color 320ms var(--ease-out), background 320ms var(--ease-out);
}
.organic-mark:hover { border-color: var(--bronze); background: rgba(176,150,60,0.07); }
.organic-mark__seal {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--bronze); box-shadow: inset 0 0 0 3px rgba(176,150,60,0.12);
  position: relative;
}
.organic-mark__seal::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 9px; border-radius: 50%; background: var(--firelight);
}
.organic-mark__txt {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--linen); line-height: 1.05;
}
.organic-mark__txt small {
  font-family: var(--font-text); font-size: 11.5px; font-weight: 400;
  letter-spacing: 0.01em; text-transform: none; color: var(--stone);
}
.organic-mark__txt small b { color: var(--bronze-soft); font-weight: 600; }

/* ============================================================
   AMBIENT AUDIO TOGGLE — global chrome
   Fixed bottom-right, quiet, mutable. The brand's ambient layer.
   ============================================================ */
.ambient {
  position: fixed; z-index: 2147483000;
  right: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(10, 8, 7, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--mist); font-weight: 500;
  cursor: pointer; appearance: none;
  transition: border-color 320ms var(--ease-out),
              color 320ms var(--ease-out),
              transform 520ms var(--ease-out);
}
.ambient:hover, .ambient:focus-visible {
  border-color: var(--scapes-sandstone);
  color: var(--scapes-sandstone);
  outline: none;
}
body.aqg-open .ambient { opacity: 0; pointer-events: none; }
.ambient .bars { display: inline-flex; align-items: end; gap: 2px; height: 12px; }
.ambient .bars span {
  display: block; width: 2px; background: currentColor;
  height: 30%; opacity: 0.4;
  transition: height 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
.ambient.is-on .bars span { opacity: 1; }
.ambient.is-playing .bars span { opacity: 1; animation: ambientBar 1.6s var(--ease-in-out) infinite; }
.ambient.is-playing .bars span:nth-child(1) { animation-delay: 0.0s; }
.ambient.is-playing .bars span:nth-child(2) { animation-delay: 0.2s; }
.ambient.is-playing .bars span:nth-child(3) { animation-delay: 0.4s; }
.ambient.is-playing .bars span:nth-child(4) { animation-delay: 0.6s; }
@keyframes ambientBar {
  0%, 100% { height: 30%; }
  50% { height: 90%; }
}
.ambient__label { transition: opacity 320ms var(--ease-out); }
@media (max-width: 540px) {
  /* Label drops away on phones — pad the pill back up to a 44px thumb target. */
  .ambient__label { display: none; }
  .ambient { padding: 16px; }
}

/* ============================================================
   BACK TO TOP — stacks above the ambient toggle, fades in on scroll.
   Matches the ambient toggle's glass-and-border language so the two
   read as a pair in the corner. Especially serves mobile, where the
   seedhead section-rail is hidden.
   ============================================================ */
.to-top {
  position: fixed; z-index: 40;
  right: clamp(16px, 2.4vw, 28px);
  /* Sits just above the ambient pill (≈34px tall at the corner) with a small
     gap — not floating high up the rail (Jason m0053). The Aquarius orb
     computes its dock from this element's live position, so it follows down. */
  bottom: calc(clamp(16px, 2.4vw, 28px) + 42px);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 8, 7, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--mist);
  cursor: pointer; appearance: none;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease-out),
              transform 420ms var(--ease-out),
              visibility 420ms var(--ease-out),
              border-color 320ms var(--ease-out),
              color 320ms var(--ease-out);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover, .to-top:focus-visible {
  border-color: var(--scapes-sandstone);
  color: var(--scapes-sandstone);
  outline: none;
}
.to-top svg { width: 15px; height: 15px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: opacity 200ms var(--ease-out), visibility 200ms var(--ease-out),
                border-color 320ms var(--ease-out), color 320ms var(--ease-out);
    transform: none;
  }
  .to-top.is-shown { transform: none; }
}

/* ============================================================
   STUDIO NOW — open-hours card in footer (signature moment #7)
   ============================================================ */
.studio-now {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  background: var(--char-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.studio-now::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--scapes-sandstone), var(--ember));
  opacity: 0.85;
}
.studio-now__pulse {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  position: relative;
}
.studio-now__pulse span {
  display: block; width: 10px; height: 10px;
  background: var(--ember); border-radius: 50%;
  box-shadow: 0 0 16px rgba(196,119,60,0.65);
  animation: snPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes snPulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50%      { transform: scale(1.35); opacity: 0.55; }
}
.studio-now__body { min-width: 0; }
.studio-now__head {
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap;
}
.studio-now__label {
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--scapes-sandstone); font-weight: 500;
}
.studio-now__time {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mist); font-weight: 500;
}
.studio-now__crew {
  margin: 12px 0 6px;
  font-family: var(--font-body); font-style: normal;
  font-weight: 300; font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.35; color: var(--linen);
  text-wrap: pretty;
}
/* Per-crew roster — Maintenance · Mowing · Construction · Supervisor */
.studio-now__roster {
  list-style: none; margin: 15px 0 13px; padding: 0;
  display: grid; gap: 9px;
}
.studio-now__row {
  display: grid; grid-template-columns: 168px 1fr; gap: 20px;
  align-items: baseline;
}
.studio-now__crewname {
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--scapes-sandstone); font-weight: 500;
  white-space: nowrap;
}
.studio-now__crewstat {
  font-family: var(--font-body); font-style: normal; font-weight: 300;
  font-size: clamp(15px, 1.35vw, 18px); line-height: 1.4;
  color: var(--linen); text-wrap: pretty;
}
.studio-now__note {
  margin: 0;
  font-family: var(--font-body); font-size: 13px; line-height: 1.7;
  color: var(--mist);
}
@media (max-width: 540px) {
  .studio-now { grid-template-columns: 1fr; gap: 12px; }
  .studio-now__pulse { width: 22px; height: 22px; }
  .studio-now__row { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   SEEDHEAD SCROLL BOOKMARK (signature moment #3)
   ============================================================ */
.bookmark {
  position: fixed; z-index: 30;
  top: 50%; right: clamp(10px, 1.4vw, 18px);
  transform: translateY(-50%);
  pointer-events: none;
}
@media (max-width: 900px) { .bookmark { display: none; } }
.bookmark__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 14px;
}
.bookmark__dot {
  position: relative;
  display: flex; align-items: center;
  width: 16px; height: 18px;
  pointer-events: auto;
  border-bottom: none;
}
.bookmark__bead {
  position: relative;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(190,180,160,0.34);
  transition: background 320ms var(--ease-out),
              transform 320ms var(--ease-out),
              box-shadow 320ms var(--ease-out);
}
.bookmark__caption {
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%) translateX(8px);
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--scapes-sandstone); font-weight: 500;
  white-space: nowrap;
  padding: 4px 10px;
  background: rgba(10,8,7,0.86);
  border: 1px solid var(--border);
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out),
              transform 220ms var(--ease-out);
}
.bookmark__dot:hover .bookmark__bead,
.bookmark__dot:focus-visible .bookmark__bead {
  background: var(--scapes-sandstone);
  transform: scale(1.4);
  box-shadow: 0 0 12px rgba(202,182,134,0.45);
}
.bookmark__dot:hover .bookmark__caption,
.bookmark__dot:focus-visible .bookmark__caption {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
.bookmark__dot.is-active .bookmark__bead {
  background: var(--scapes-sandstone);
  transform: scale(1.25);
  box-shadow: 0 0 10px rgba(202,182,134,0.55);
}
.bookmark__dot.is-active::before {
  content: ""; position: absolute;
  right: -6px; top: 50%;
  width: 14px; height: 1px;
  background: var(--scapes-sandstone);
  transform: translateY(-50%);
  opacity: 0.65;
}

/* ============================================================
   RESPONSIVE UTILITIES
   Generic collapse for hand-rolled 2-column grids defined via
   inline styles (e.g. lifestyle / battle-cry / build sections on
   founder + careers). The inline style supplies the desktop
   grid-template-columns; this class enforces a 1-column stack
   below 760px so the layout works on phones.
   ============================================================ */
@media (max-width: 760px) {
  .page-split-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(28px, 6vw, 44px) !important;
    text-align: left;
  }
  .page-split-grid > * { max-width: 100%; }
}

/* ============================================================
   STREAM — "listen on" platform links for The Dirt Church
   releases (I AM SCAPES). Used on the homepage Studio block and
   atop the anthems listening room. Buttons borrow the ghost
   language: bordered, transparent, linen text, sandstone on hover.
   A staggered, one-track-a-week rollout — the Spotify follow link
   collects each new single automatically, so nothing here needs
   re-deploying as platforms catch up.
   ============================================================ */
.stream {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
}
.stream--left { align-items: flex-start; text-align: left; }

.stream__label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--scapes-sandstone); font-weight: 500; margin: 0;
}
.stream__label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--scapes-sandstone); flex: none;
  box-shadow: 0 0 0 0 rgba(202,182,134,0.5);
  animation: streamPulse 2.8s var(--ease-out) infinite;
}
@keyframes streamPulse {
  0%   { box-shadow: 0 0 0 0 rgba(202,182,134,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(202,182,134,0); }
  100% { box-shadow: 0 0 0 0 rgba(202,182,134,0); }
}
@media (prefers-reduced-motion: reduce) {
  .stream__label::before { animation: none; }
}

.stream__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(21px, 2vw, 27px); line-height: 1.2;
  color: var(--linen); margin: 0; text-wrap: balance;
}
.stream__title em { font-style: italic; color: var(--scapes-sandstone); }
.stream__by { color: var(--mist); }

.stream__links {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 2px;
}
/* The [hidden] attr loses to display:flex — restore it so the Listen
   disclosure actually collapses instead of only flipping its caret. */
.stream__links[hidden] { display: none; }
.stream--left .stream__links { justify-content: flex-start; }

.stream__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  color: var(--linen); text-decoration: none;
  border: 1px solid var(--border-strong); border-radius: 40px;
  background: rgba(255,255,255,0.015);
  transition: color 320ms var(--ease-out),
              border-color 320ms var(--ease-out),
              background 320ms var(--ease-out);
}
.stream__btn svg { width: 17px; height: 17px; flex: none; }
.stream__btn:hover, .stream__btn:focus-visible {
  color: var(--scapes-sandstone);
  border-color: var(--scapes-sandstone);
  background: rgba(202,182,134,0.06);
  outline: none;
}

.stream__follow {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mist); text-decoration: none; border-bottom: none;
  transition: color 320ms var(--ease-out);
}
.stream__follow:hover, .stream__follow:focus-visible { color: var(--scapes-sandstone); }

/* ============================================================
   THE SEED HEAD — the site's artistic mark (sibling to the Hand).
   Hand-drawn sabal seed head, cream line on transparent.
   Clean, light, luxurious. Faint and hand-placed — never a
   stamped pattern. Drop it anywhere in one line:

     <span class="seed" aria-hidden="true"></span>              small, right
     <span class="seed seed--lg seed--left"></span>             large, left
     <span class="seed seed--seam"></span>                      centered section seam
     <span class="seed seed--xl seed--bleed seed--right"></span> big, half off-page

   Sits behind content (z-index 0) and never catches a click.
   ============================================================ */
.seed{position:absolute;z-index:0;pointer-events:none;display:block;width:180px;aspect-ratio:1.5/1;
  background:url('../assets/seed-head-mark.png') center/contain no-repeat;opacity:.10;
  filter:saturate(.6)}
.seed--sm{width:120px}
.seed--lg{width:300px}
.seed--xl{width:460px}
.seed--right{right:-40px;top:8%}
.seed--left{left:-40px;top:12%;transform:scaleX(-1)}
.seed--bleed{right:-14%}
.seed--left.seed--bleed{right:auto;left:-14%}
.seed--seam{left:50%;top:auto;bottom:-30px;transform:translateX(-50%);opacity:.085;width:220px}
.seed--faint{opacity:.07}
.seed--tilt{rotate:-8deg}
.seed--tilt-r{rotate:9deg}
/* any section holding a seed needs a containing block + clipping */
.has-seed{position:relative;overflow:hidden}
/* Safety net: a seed dropped into a section that forgot .has-seed used to push
   the page ~59px wide (Jason m0445 audit). overflow-x:clip trims the bleed
   without creating a scroll container the way overflow:hidden would. */
html{overflow-x:clip}
@media (max-width:760px){.seed{opacity:.06}.seed--xl,.seed--lg{width:220px}}
@media print{.seed{display:none}}
/* Homepage — the Root Juice creed IS the link (Jason: kill the button) */
/* Homepage — the Root Juice creed IS the link (Jason: kill the button).
   The glow lives on a pseudo-element that extends WELL PAST the box and fades
   to nothing inside its own bounds, so there is no clipped edge and no visible
   rounded panel — just light behind the words (Jason m0420). */
/* The Root Juice creed IS the link (Jason: kill the button). No glow, no second
   label — one cue underneath, and that is the whole affordance (Jason m0540). */
.rj__creed-link{display:block;text-decoration:none;color:inherit;position:relative;padding:0;margin:0;background:none}
.rj__creed-link .rj__creed{transition:color .3s ease}
/* An obvious door. The glow alone reads as decoration and people scroll past it,
   so the creed carries a real cue with a hairline that slides on hover (Jason m0429). */
.rj__creed-cue{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--scapes-sandstone);padding-bottom:7px;border-bottom:1px solid var(--scapes-sandstone);transition:color .3s ease,border-color .3s ease,gap .3s ease}
.rj__creed-cue .arrow{transition:transform .45s var(--ease-out)}
.rj__creed-link:hover .rj__creed-cue,.rj__creed-link:focus-visible .rj__creed-cue{color:var(--firelight);border-color:var(--firelight);gap:15px}
.rj__creed-link:hover .rj__creed-cue .arrow{transform:translateX(4px)}
.rj__creed-link,.rj__creed-link:hover,.rj__creed-link:focus{border:0;box-shadow:none;text-decoration:none}
.rj__creed-link:focus-visible{outline:1px solid var(--firelight);outline-offset:8px}


/* The Work — closing CTA: centered, and the hard top/bottom edges feathered
   into the page instead of butting against it (Jason 2026-07-29). */
.hp-cta__inner--centered{max-width:820px;margin:0 auto;text-align:center}
.hp-cta__inner--centered .hp-cta__title{text-wrap:balance;margin-left:auto;margin-right:auto}
.hp-cta__inner--centered .hp-cta__lead{max-width:56ch;margin-left:auto;margin-right:auto;text-wrap:pretty}
.hp-cta__actions--centered{justify-content:center}
.hp-cta--feathered{position:relative;isolation:isolate}
.hp-cta--feathered .hp-cta__plate{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.hp-cta--feathered::before,.hp-cta--feathered::after{content:"";position:absolute;left:0;right:0;height:clamp(70px,9vw,130px);pointer-events:none;z-index:1}
.hp-cta--feathered::before{top:0;background:linear-gradient(180deg,var(--ink,#0d0b0a) 0,transparent 100%)}
.hp-cta--feathered::after{bottom:0;background:linear-gradient(0deg,var(--ink,#0d0b0a) 0,transparent 100%)}
.hp-cta--feathered .hp-cta__inner{position:relative;z-index:2}

/* ============================================================
   THE STUDIO NOW — live weather at the studio (Jason 2026-07-29).
   Sits at the right of the card head. Hand-drawn line marks in
   firelight, sized to the type. When the ground is wet the crew
   lines rewrite themselves; J's Desk never does.
   ============================================================ */
.studio-now__head{justify-content:space-between}
.studio-now--haswx{grid-template-columns:auto 1fr minmax(240px,300px)}
.studio-wx{align-self:start;padding:18px 20px 17px;border:1px solid rgba(202,182,134,.20);border-radius:8px;background:linear-gradient(158deg,rgba(202,182,134,.09),rgba(202,182,134,.015) 70%);color:var(--scapes-sandstone,#cab686)}
.studio-wx__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-family:var(--font-body,system-ui);font-size:9px;letter-spacing:.24em;text-transform:uppercase}
.studio-wx__eye{color:#f0b256;opacity:.9}
.studio-wx__place{opacity:.5}
.studio-wx__read{display:flex;align-items:center;gap:14px}
.studio-wx__orb{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(240,178,86,.26),rgba(202,182,134,.05) 72%);box-shadow:inset 0 0 0 1px rgba(202,182,134,.20)}
.studio-wx__orb svg{width:30px;height:30px}
.studio-wx--sun .studio-wx__orb svg,.studio-wx--partly .studio-wx__orb svg{color:#f0b256}
.studio-wx--rain .studio-wx__orb svg,.studio-wx--storm .studio-wx__orb svg,.studio-wx--snow .studio-wx__orb svg{color:#9fc4d6}
.studio-wx--sun .studio-wx__orb{animation:wxGlow 5.5s ease-in-out infinite}
@keyframes wxGlow{0%,100%{box-shadow:inset 0 0 0 1px rgba(202,182,134,.20)}50%{box-shadow:inset 0 0 0 1px rgba(240,178,86,.44),0 0 18px rgba(240,178,86,.16)}}
@media (prefers-reduced-motion:reduce){.studio-wx--sun .studio-wx__orb{animation:none}}
.studio-wx__temp{font-family:var(--font-display,Georgia,serif);font-weight:300;font-size:46px;line-height:.86;color:var(--linen,#efe7db);font-variant-numeric:tabular-nums}
.studio-wx__temp i{font-style:normal;font-size:16px;opacity:.55;margin-left:2px}
.studio-wx__cond{font-family:var(--font-body,system-ui);font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.78;margin:12px 0 0}
.studio-wx__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(202,182,134,.16)}
.studio-wx__meta span{display:flex;flex-direction:column;align-items:center;gap:3px}
.studio-wx__meta i{font-style:normal;font-family:var(--font-body,system-ui);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.52}
.studio-wx__meta b{font-family:var(--font-display,Georgia,serif);font-weight:300;font-size:19px;line-height:1;color:var(--linen,#efe7db);font-variant-numeric:tabular-nums}
.studio-wx__say{font-family:var(--font-text,Georgia,serif);font-style:italic;font-size:13.5px;line-height:1.5;color:rgba(239,231,219,.60);margin:14px 0 0;text-wrap:pretty}
.studio-wx__alert{margin:14px -20px -17px;padding:12px 20px 14px;border-top:1px solid rgba(240,178,86,.28);background:linear-gradient(158deg,rgba(240,178,86,.16),rgba(240,178,86,.03) 78%);border-radius:0 0 7px 7px}
.studio-wx__alert b{display:block;font-family:var(--font-body,system-ui);font-size:9px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#f0b256}
.studio-wx__alert span{display:block;margin-top:5px;font-family:var(--font-text,Georgia,serif);font-size:13.5px;line-height:1.5;color:rgba(239,231,219,.76);text-wrap:pretty}
.studio-wx--alert{border-color:rgba(240,178,86,.30)}
@media (max-width:900px){.studio-now--haswx{grid-template-columns:auto 1fr}.studio-wx{grid-column:1 / -1;margin-top:4px}}
@media (max-width:540px){.studio-now--haswx{grid-template-columns:1fr}}
/* wet day — the pulse dims; the studio is holding */
.studio-now--wet .studio-now__pulse span{animation-duration:4.2s;opacity:.55}
@media (prefers-reduced-motion:reduce){.studio-now--wet .studio-now__pulse span{animation:none}}

@media (max-width: 700px){
  .studio-now__label,
  .studio-now__crewname,
  .bookmark__caption,
  .stream__label,
  .studio-wx__top,
  .studio-wx__cond,
  .studio-wx__alert b {
    font-size: 12px /*mbump*/;
    letter-spacing: 0.16em;
  }
}


/* ==================== home.css ==================== */
/* ============================================================
   Scapes — home.css
   Homepage-specific patterns: hero, premise, founder, grids.
   ============================================================ */

/* ============================================================
   HERO — full-bleed photographic opener with Ken-Burns
   ============================================================ */
.hp-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.hp-hero__plate { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hp-hero__plate-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(0.88) brightness(0.72) contrast(1.04);
  animation: hpHeroKen 24s var(--ease-out) forwards;
}
.hp-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(10,8,7,0.20) 0%,
      rgba(10,8,7,0.05) 32%,
      rgba(10,8,7,0.55) 78%,
      rgba(10,8,7,0.92) 100%);
}
.hp-hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(80px, 14vw, 160px) clamp(24px, 4vw, 80px) clamp(60px, 9vw, 120px);
}
.hp-hero__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(50px, 7vw, 112px);
  line-height: 0.98; letter-spacing: -0.022em;
  color: var(--linen);
  margin: clamp(24px, 3vw, 36px) 0 0;
  max-width: 18ch; text-wrap: balance;
}
.hp-hero__title em {
  font-style: normal;  font-weight: 400;
  color: var(--scapes-sandstone);
}
.hp-hero__lead {
  font-family: var(--font-text); font-style: normal;
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.5;
  color: var(--linen); opacity: 0.92;
  max-width: 44ch; text-wrap: pretty;
  margin: clamp(24px, 3vw, 36px) 0 0;
}
.hp-hero__actions {
  margin-top: clamp(36px, 4.4vw, 56px);
  display: flex; flex-wrap: wrap; gap: 14px;
}
.hp-hero__scroll-cue {
  position: absolute; left: 50%; bottom: clamp(40px, 8vh, 84px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
  opacity: 1;
}
.hp-hero__scroll-hand {
  --hand-w: clamp(120px, 13vw, 180px);
  opacity: 0;
  animation: hpHeroHandIn 1700ms var(--ease-out) 1400ms forwards,
             hpHeroHandBob 3400ms var(--ease-in-out) 3200ms infinite;
}
@keyframes hpHeroHandIn { to { opacity: 0.2; } }
@keyframes hpHeroHandBob {
  0%, 100% { transform: translateY(0); opacity: 0.16; }
  50%      { transform: translateY(9px); opacity: 0.26; }
}
.hp-hero__scroll-cue::after {
  content: none;
}
@keyframes hpHeroKen { from { transform: scale(1.08); } to { transform: scale(1.0); } }
@keyframes hpHeroCue { to { opacity: 1; } }
@keyframes hpHeroCueFall {
  0%   { background-position: 0 -60%, 0 0; }
  100% { background-position: 0 160%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-hero__scroll-hand { animation: none; opacity: 0.2; }
}

/* ============================================================
   PREMISE — calm prose section
   ============================================================ */
.hp-premise {
  /* fade in from the hero's dark base, then settle to the charcoal body */
  background: linear-gradient(to bottom, var(--ink) 0, var(--charcoal) clamp(140px, 16vw, 240px));
  padding: clamp(72px, 9vw, 124px) clamp(24px, 4vw, 80px) clamp(36px, 4vw, 56px);
}
/* Close the big empty band between the Premise and the puzzle (Jason m0044) —
   the two sections' stacked padding left ~264px of dead space. */
#anatomy.section--inset { padding-top: clamp(40px, 4.5vw, 64px); }
/* Same treatment BELOW the puzzle (Jason m0048) — the caption + The Work's
   stacked padding left ~228px of negative space under the pieces. */
#anatomy.section--inset { padding-bottom: clamp(28px, 3vw, 44px); }
section[aria-labelledby="work-title"].section--inset { padding-top: clamp(44px, 5vw, 76px); }
/* Round 2 (Jason m0044) — kill the ~250px dead bands stacked below the two
   centered "See the…" CTAs: trim the host section's bottom padding AND the
   next inset section's top padding so the rhythm tightens. */
section[aria-labelledby="work-title"].section--inset { padding-bottom: clamp(24px, 3vw, 40px); }
section[aria-label="Root Juice"] { padding-bottom: clamp(40px, 5vw, 72px); }
section[aria-labelledby="products-title"].section--inset { padding-top: clamp(40px, 5vw, 68px); }
.hp-premise__inner {
  max-width: 1480px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 880px) { .hp-premise__inner { grid-template-columns: 1fr; } }
.hp-premise__body p {
  font-family: var(--font-text);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.72; color: var(--linen);
  max-width: 62ch; text-wrap: pretty;
}
.hp-premise__body p em {
   font-style: normal;
  font-weight: 600; color: var(--scapes-sandstone);
  font-size: 1em;
}
.hp-premise__body p + p { margin-top: 1.2em; }

/* ============================================================
   FOUNDER'S NOTE — short, declarative lines
   ============================================================ */
.hp-founder {
  /* top stays ink to meet the anatomy plan above; bottom fades to the
     charcoal body so the seam into Programs dissolves */
  background: linear-gradient(to bottom,
    var(--ink) 0,
    var(--ink) calc(100% - clamp(72px, 9vw, 140px)),
    var(--charcoal) 100%);
  padding: clamp(56px, 7vw, 100px) clamp(24px, 6vw, 96px);
}
.hp-founder__inner {
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 52px);
  align-items: start;
}
.hp-founder__tag {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--stone); font-weight: 500;
  writing-mode: vertical-rl;
  padding-top: 8px;
}
.hp-founder__lines {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(27px, 3.3vw, 44px);
  line-height: 1.14; letter-spacing: -0.015em;
  color: var(--linen);
  max-width: 34ch; text-wrap: balance;
  margin: 0;
}
.hp-founder__lines em {
  font-style: normal;  font-weight: 400;
  color: var(--scapes-sandstone);
}
.hp-founder__line + .hp-founder__line { margin-top: 0.08em; display: block; }
.hp-founder__closing {
  margin-top: clamp(28px, 3vw, 40px);
  font-family: var(--font-body); font-size: 12.5px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--scapes-sandstone); font-weight: 500;
  line-height: 1.7; max-width: 52ch;
}
.hp-founder__signature {
  margin-top: clamp(16px, 1.6vw, 22px);
  font-family: var(--font-body); font-style: normal; font-weight: 400;
  font-size: clamp(19px, 1.4vw, 22px); color: var(--mist);
  letter-spacing: 0.01em;
}

/* ============================================================
   GRID CARDS — used by Programs, Products, Triptych
   ============================================================ */
.hp-cardgrid { display: grid; gap: clamp(16px, 2vw, 28px); }
.hp-cardgrid--programs { grid-template-columns: repeat(6, 1fr); }
.hp-cardgrid--products { grid-template-columns: repeat(4, 1fr); }

/* Planting Moon card — illustrated, not photographed. Two stacked
   tinted CSS moons read as the seasonal range of the calendar. */
.hp-card__photo--moon {
  background: radial-gradient(ellipse 90% 60% at 50% 110%, #2a2018, var(--ink)) !important;
  position: relative;
  overflow: hidden;
}
.hp-card__moon {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%,
    currentColor 0%,
    color-mix(in oklab, currentColor 90%, #2a1d12) 80%,
    color-mix(in oklab, currentColor 55%, #0a0805) 100%);
  filter: drop-shadow(0 0 22px color-mix(in oklab, currentColor 40%, transparent));
}
.hp-card__moon--harvest {
  color: #e69a48;
  width: 64%;
  aspect-ratio: 1 / 1;
  left: -8%;
  bottom: -22%;
}
.hp-card__moon--cold {
  color: #d6dceb;
  width: 38%;
  aspect-ratio: 1 / 1;
  right: 12%;
  top: 14%;
  filter: drop-shadow(0 0 18px rgba(214,220,235,0.32));
}
@media (max-width: 1100px) { .hp-cardgrid--programs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1280px) { .hp-cardgrid--products  { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px)  { .hp-cardgrid--products  { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .hp-cardgrid--programs { grid-template-columns: 1fr; } }
@media (max-width: 540px)  { .hp-cardgrid--products  { grid-template-columns: 1fr; } }

.hp-card {
  display: block;
  text-decoration: none; border-bottom: none;
  background: var(--loam);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 520ms var(--ease-out),
              transform 1100ms var(--ease-out),
              box-shadow 1100ms var(--ease-out);
}
.hp-card:hover, .hp-card:focus-visible {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 0 80px -30px rgba(196,119,60,0.45);
  outline: none;
}
.hp-card--span-2 { grid-column: span 2; }
@media (max-width: 720px) { .hp-card--span-2 { grid-column: span 1; } }

.hp-card__photo {
  aspect-ratio: 5 / 4;
  background-size: cover; background-position: center;
  filter: saturate(0.9) brightness(0.78);
  transition: filter 1100ms var(--ease-out), transform 1100ms var(--ease-out);
}
.hp-card:hover .hp-card__photo { filter: saturate(1.0) brightness(0.86); transform: scale(1.02); }
/* The Society portal — the rain-wings figure, framed high so the raised hands
   and wings hold the card; a touch warmer + deeper so it reads like its world. */
.hp-card__photo--society {
  background-position: center 22%;
  filter: saturate(1.04) contrast(1.03) brightness(0.96);
}
.hp-card:hover .hp-card__photo--society { filter: saturate(1.12) contrast(1.04) brightness(0.9); transform: scale(1.03); }
.hp-card__body {
  padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px) clamp(24px, 2.6vw, 32px);
}
.hp-card__eyebrow {
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--scapes-sandstone); font-weight: 500;
}
.hp-card__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.15; letter-spacing: -0.008em;
  color: var(--linen);
  margin: 14px 0 0; text-wrap: balance; max-width: 16ch;
}
.hp-card__title em { font-style: normal;  color: var(--scapes-sandstone); }
.hp-card__lead {
  font-family: var(--font-text); font-size: 14px; line-height: 1.7;
  color: var(--mist); margin: 14px 0 0; max-width: 42ch;
}
.hp-card__link {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--linen); font-weight: 500;
  transition: color 320ms var(--ease-out);
}
.hp-card:hover .hp-card__link { color: var(--scapes-sandstone); }
.hp-card__link .arrow { transition: transform 520ms var(--ease-out); }
.hp-card:hover .hp-card__link .arrow { transform: translateX(6px); }

/* ============================================================
   BASICS — three named layers (condensed from the full service set)
   ============================================================ */

/* ============================================================
   HOME LADDER — Root · Compose · Elevate grouped under their
   emblems. Each tier: a clickable emblem header → its Programs
   section, then its services & programs as individual clickable
   items. Replaces the flat program row + the old layer cards.
   ============================================================ */
.hp-ladder { display: flex; flex-direction: column; gap: clamp(46px, 5.4vw, 84px); margin-top: clamp(40px, 5vw, 64px); }
.hp-tier__head {
  display: flex; align-items: center; gap: clamp(18px, 2.2vw, 30px);
  text-decoration: none; padding-bottom: clamp(20px, 2.2vw, 28px);
  border-bottom: 1px solid rgba(202,182,134,0.16);
  transition: border-color 360ms var(--ease-out);
}
.hp-tier__head:hover { border-color: rgba(202,182,134,0.42); }
.hp-tier__head:focus-visible { outline: 2px solid var(--scapes-sandstone); outline-offset: 4px; }
.hp-tier__emblem { flex: none; width: clamp(60px, 6.6vw, 86px); }
.hp-tier__emblem img { width: 100%; height: auto; display: block; }
.hp-tier__headtext { flex: 1 1 auto; min-width: 0; }
.hp-tier__verb {
  display: flex; align-items: center; gap: 11px; margin: 0;
  font-family: var(--font-body); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--scapes-sandstone); font-weight: 500;
}
.hp-tier__verb .num { font-style: normal; font-weight: 300; font-size: 13px; color: var(--bronze); letter-spacing: 0; }
.hp-tier__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.8vw, 50px); line-height: 1; letter-spacing: -0.01em;
  color: var(--linen); margin: 10px 0 0;
}
.hp-tier__name em { font-style: italic; color: var(--scapes-sandstone); }
.hp-tier__tag { font-family: var(--font-body); font-style: italic; color: var(--mist); font-size: clamp(14px,1.4vw,16px); margin: 9px 0 0; }
.hp-tier__go {
  flex: none; align-self: center; font-family: var(--font-body);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--scapes-sandstone); display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.hp-tier__head:hover .hp-tier__go .arrow { transform: translateX(4px); }
.hp-tier__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: clamp(20px, 2.2vw, 28px); }
.hp-svc {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.01em; color: var(--mist);
  background: var(--loam); border: 1px solid rgba(202,182,134,0.12);
  border-radius: 999px; padding: 5px 13px; text-decoration: none;
  transition: border-color 280ms var(--ease-out), background 280ms var(--ease-out), color 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.hp-svc:hover { border-color: var(--scapes-sandstone); background: var(--bark); color: var(--linen); transform: translateY(-1px); }
.hp-svc--lead { border-color: rgba(202,182,134,0.42); font-weight: 600; color: var(--linen); }
.hp-tier__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 1.8vw, 24px); margin-top: clamp(22px, 2.4vw, 32px); }
@media (max-width: 760px) { .hp-tier__cards { grid-template-columns: 1fr; } }

.hp-layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 880px) { .hp-layers { grid-template-columns: 1fr; } }

.hp-layer {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(30px, 3vw, 44px) clamp(26px, 2.6vw, 36px);
  background:
    radial-gradient(120% 82% at 50% -12%, rgba(202,182,134,0.07), transparent 60%),
    var(--loam);
  border: 1px solid rgba(202,182,134,0.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 52px -34px rgba(0,0,0,0.72);
  text-decoration: none;
  transition: background 360ms var(--ease-out), border-color 360ms var(--ease-out),
              transform 360ms var(--ease-out), box-shadow 360ms var(--ease-out);
}
/* Feathered accent line along the top — a soft glow, never a hard edge. */
.hp-layer::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(202,182,134,0.55), transparent);
  opacity: 0.55; pointer-events: none;
}
.hp-layer:hover {
  background:
    radial-gradient(120% 82% at 50% -12%, rgba(202,182,134,0.13), transparent 60%),
    var(--bark);
  border-color: rgba(202,182,134,0.28);
  transform: translateY(-3px);
  box-shadow: 0 32px 64px -32px rgba(0,0,0,0.82);
  outline: none;
}
.hp-layer:focus-visible {
  outline: 2px solid var(--scapes-sandstone);
  outline-offset: 3px;
}
.hp-layer__icon {
  display: inline-flex; align-items: center; width: clamp(66px, 7vw, 88px); height: auto;
}
.hp-layer__icon img { width: 100%; height: auto; display: block; }
.hp-layer__verb {
  display: flex; align-items: center; gap: 12px; margin: 20px 0 0;
  font-family: var(--font-body); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--scapes-sandstone); font-weight: 500;
}
.hp-layer__num {
  font-family: var(--font-body); font-style: normal; font-weight: 300;
  font-size: 13px; line-height: 1; color: var(--bronze);
  letter-spacing: 0;
}
.hp-layer__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.1vw, 30px); line-height: 1.12;
  letter-spacing: -0.01em; color: var(--linen);
  margin: 16px 0 0;
}
.hp-layer__title em { font-style: italic; color: var(--scapes-sandstone); }
.hp-layer__desc {
  font-family: var(--font-body); font-size: 14px; line-height: 1.62;
  color: var(--mist); margin: 12px 0 0; text-wrap: pretty;
}
.hp-layer__set {
  font-family: var(--font-body); font-size: 11.5px; line-height: 1.7;
  letter-spacing: 0.01em; color: var(--stone); margin: 18px 0 0;
}
.hp-layer__link {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--scapes-sandstone);
  margin-top: auto; padding-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
}

/* ============================================================
   REPORT CARD — soil intelligence proof block
   ============================================================ */
/* ROOT JUICE — the diagnosis (report) hands off to the prescription.
   No box, no hard border: the report floats on a warm shadow and the
   type carries the weight (Jason m0016/m0027). */
.rj__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 900px) { .rj__inner { grid-template-columns: 1fr; gap: clamp(36px, 8vw, 56px); } }

/* The report image — floated, feathered into the charcoal, no border box.
   Capped so it reads as a tasteful artifact, not a wall (Jason m0178). */
.rj__report {
  margin: 0 auto; position: relative;
  width: 100%; max-width: 380px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 60px 130px -55px rgba(0,0,0,0.82), 0 8px 30px -18px rgba(0,0,0,0.6);
  transform: rotate(-1.1deg);
  transition: transform 600ms var(--ease-out);
}
.rj__report:hover { transform: rotate(0deg) scale(1.012); }
/* Keep the tilt THROUGH the reveal — .reveal.is-visible{transform:none} was
   flattening the document. Carry rotate(-1.1deg) in every reveal state, only
   straightening on hover. (Jason m0065 — match the root-juice report.) */
.rj__report.reveal { transform: rotate(-1.1deg) translateY(20px); }
.rj__report.reveal.is-visible { transform: rotate(-1.1deg); }
.rj__report.reveal.is-visible:hover { transform: rotate(0deg) scale(1.012); }
.rj__report img { display: block; width: 100%; height: auto; }
/* feather the lower edge so the report melts into the section, not a hard cut */
.rj__report::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 48%, rgba(22,18,14,0.72) 82%, var(--charcoal, #16120e) 100%),
    radial-gradient(120% 80% at 50% 0%, transparent 60%, rgba(22,18,14,0.4) 100%);
}
.rj__report-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px);
  font-family: var(--font-text); font-style: italic;
  font-size: clamp(13px, 1.05vw, 15px); line-height: 1.4;
  color: var(--mist);
}
.rj__report-tag {
  font-family: var(--font-body); font-style: normal; font-weight: 600;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--scapes-sandstone);
  padding: 5px 10px; border-radius: 4px;
  background: rgba(22,18,14,0.6); backdrop-filter: blur(6px);
  border: 1px solid var(--border);
}

/* The prescription copy — big type carries it.
   Emblem + eyebrow ride together as one left-aligned lockup so the mark
   belongs to the program name instead of floating centered above it (Jason m0202). */
.rj__lockup { display: flex; align-items: center; gap: clamp(13px, 1.3vw, 18px); margin: 0 0 clamp(20px, 2.4vw, 30px); }
.rj__emblem { width: clamp(54px, 5.4vw, 72px); height: auto; margin: 0; flex: none;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.5)); }
.rj__eyebrow { margin: 0; }
.rj__eyebrow::before { display: none; }
.rj__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(52px, 7vw, 104px);
  line-height: 0.94; letter-spacing: -0.02em;
  color: var(--linen); margin: 0; position: relative;
}
.rj__title em { font-style: italic; color: var(--scapes-sandstone); }
.rj__tm {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.18em; vertical-align: super;
  letter-spacing: 0; color: var(--bronze);
  margin-left: 0.15em;
}
.rj__lead {
  font-family: var(--font-text); font-weight: 400;
  font-size: clamp(17px, 1.45vw, 21px); line-height: 1.6;
  color: var(--mist); margin: 28px 0 0; max-width: 46ch;
}
.rj__lead em { font-style: italic; color: var(--linen); }
/* the all-organic / Houston-partner flag on the front door (Jason m0103/m0105) */
.rj__organic-line {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze-soft);
  margin: clamp(20px, 2.2vw, 28px) 0 0;
}
.rj__organic-line b { color: var(--linen); font-weight: 600; letter-spacing: 0.08em; }
.rj__organic-text { min-width: 0; }
.rj__organic-dot {
  flex: none; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--firelight); box-shadow: inset 0 0 0 2.5px rgba(0,0,0,0.25);
}
.rj__creed {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(26px, 2.8vw, 40px); line-height: 1.12;
  letter-spacing: -0.012em; color: var(--linen);
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--border);
  text-wrap: balance;
}
.rj__creed em { font-style: italic; color: var(--firelight); }
.rj__cta { margin-top: clamp(28px, 3vw, 36px); }

/* legacy report-card styles (retired Jason m0027) — kept below, unused
   ============================================================ */
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  background: var(--loam);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 64px);
}
@media (max-width: 880px) { .hp-report { grid-template-columns: 1fr; padding: clamp(28px, 5vw, 40px); } }
.hp-report__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1; letter-spacing: -0.012em;
  color: var(--linen);
  margin: 24px 0 0; text-wrap: balance; max-width: 16ch;
}
.hp-report__title em { font-style: normal;  color: var(--scapes-sandstone); }
.hp-report__lead {
  font-family: var(--font-text); font-style: normal; font-weight: 400;
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55;
  color: var(--mist); margin: 22px 0 0; max-width: 42ch;
}
.hp-report__meta {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--stone); font-weight: 500;
}
.hp-report__meta .dot { color: var(--divider); }
.hp-report__figure {
  margin: 0; background: var(--charcoal);
  border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; position: relative;
  box-shadow: 0 40px 100px -50px rgba(0,0,0,0.7);
}
.hp-report__figure img { display: block; width: 100%; height: auto; }
.hp-report__figcap {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--scapes-sandstone); font-weight: 500;
  background: rgba(22,18,14,0.78);
  backdrop-filter: blur(8px);
  padding: 6px 10px; border-radius: 4px;
  border: 1px solid var(--border);
}

/* ============================================================
   DISCIPLINES — "every surface," as a uniform icon grid
   (replaced the 3 mismatched photos — Jason m0019/m0024)
   ============================================================ */
.hp-disciplines {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.5vw, 18px);
  max-width: 980px;
}
.hp-discipline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.4vw, 16px);
  padding: clamp(24px, 2.6vw, 34px) 14px;
  background: var(--loam);
  border: 1px solid rgba(202, 182, 134, 0.13);
  text-align: center;
  transition: border-color 420ms var(--ease-out),
              background 420ms var(--ease-out),
              transform 420ms var(--ease-out);
}
.hp-discipline__icon {
  width: clamp(28px, 3vw, 34px);
  height: clamp(28px, 3vw, 34px);
  color: var(--scapes-sandstone);
  transition: color 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.hp-discipline__icon svg { width: 100%; height: 100%; display: block; }
.hp-discipline__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--scapes-sandstone-dk);
  transition: color 420ms var(--ease-out);
}
.hp-discipline:hover {
  border-color: rgba(202, 182, 134, 0.34);
  background: #1d1812;
}
.hp-discipline:hover .hp-discipline__icon { color: var(--firelight); transform: translateY(-3px); }
.hp-discipline:hover .hp-discipline__label { color: var(--scapes-sandstone); }
@media (max-width: 760px) { .hp-disciplines { grid-template-columns: repeat(2, 1fr); max-width: 420px; } }

/* ============================================================
   THE CONTINUE SEAM — replaces the terminal "See the work" button
   at the foot of The Work (Jason m0223/m0227). A centered button
   alone in whitespace read as the end of the page; this reads as
   "keep going," names the next section, and pulls the eye down so
   visitors reach Dirt Church / Root Juice / Aquarius / Begin.
   ============================================================ */
.hp-continue {
  margin-top: clamp(10px, 1.4vw, 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hp-continue__next {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  text-align: center;
  padding: 6px 8px;
}
.hp-continue__lead {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone, #9c948a);
}
.hp-continue__name {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--linen, #ebe3d2);
  transition: color 300ms ease;
}
.hp-continue__next:hover .hp-continue__name,
.hp-continue__next:focus-visible .hp-continue__name { color: var(--scapes-sandstone, #cab686); }
.hp-continue__chev {
  display: inline-flex;
  color: var(--firelight, #e0a268);
  width: 26px; height: 26px;
  animation: hpContinueBob 2.2s ease-in-out infinite;
}
.hp-continue__next:hover .hp-continue__chev { animation-duration: 1.1s; }
.hp-continue__chev svg { width: 100%; height: 100%; }
.hp-continue__aside {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--stone, #9c948a);
  text-decoration: none;
  transition: color 240ms ease;
}
.hp-continue__aside:hover,
.hp-continue__aside:focus-visible { color: var(--linen, #ebe3d2); }
@keyframes hpContinueBob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hp-continue__chev { animation: none; }
}

/* ============================================================
   MANIFESTO PULL — full-bleed editorial quote
   ============================================================ */
.hp-pull {
  background: linear-gradient(to bottom,
    var(--charcoal) 0,
    var(--ink) clamp(80px, 10vw, 150px),
    var(--ink) 100%);
  padding: clamp(88px, 10vw, 140px) clamp(24px, 4vw, 80px);
  text-align: center;
}
.hp-pull__inner { max-width: 1280px; margin: 0 auto; }
.hp-pull__quote {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(48px, 7vw, 120px);
  line-height: 1.0; letter-spacing: -0.022em;
  color: var(--linen);
  margin: 0; text-wrap: balance;
}
.hp-pull__quote em {
  font-style: normal;  font-weight: 400;
  color: var(--scapes-sandstone);
}
.hp-pull__quote .muted { color: var(--mist); display: block; font-size: 0.6em; margin-top: 0.6em; }

/* ============================================================
   CTA — final block before footer
   ============================================================ */
.hp-cta {
  position: relative; isolation: isolate;
  /* charcoal at top to meet the Founder's note, deepening to ink at the bottom so
     it lands on the same value as the footer below — no hard seam (Jason m0127) */
  background: linear-gradient(to bottom, var(--charcoal) 0%, var(--charcoal) 52%, var(--ink) 100%);
  padding: clamp(88px, 10vw, 140px) clamp(24px, 4vw, 80px) clamp(48px, 5vw, 72px);
  overflow: hidden;
}
.hp-cta__plate { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  /* feather BOTH the top and bottom of the photo so it emerges from the charcoal
     above and melts into the footer below — no hard box edges (Jason m0094) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(72px, 9vw, 150px), #000 calc(100% - clamp(56px, 7vw, 120px)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(72px, 9vw, 150px), #000 calc(100% - clamp(56px, 7vw, 120px)), transparent 100%); }
/* where the footer follows the homepage CTA, the CTA already deepens to ink —
   drop the divider line so the two melt together (Jason m0127; selector fixed
   m0079 — footer is a sibling of <main>, not of .hp-cta) */
.hp-cta + .site-foot,
main:has(.hp-cta) + .site-foot { border-top: none; }
.hp-cta__plate-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(0.85) brightness(0.55);
}
.hp-cta__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,8,7,0.62) 0%, rgba(10,8,7,0.88) 100%);
}
.hp-cta__inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; }
.hp-cta__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 1.04; letter-spacing: -0.018em;
  color: var(--linen);
  margin: clamp(20px, 2vw, 28px) 0 0;
  max-width: 20ch; text-wrap: balance;
}
.hp-cta__title em { font-style: normal;  color: var(--scapes-sandstone); }
.hp-cta__lead {
  font-family: var(--font-text); font-style: normal;
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.55; color: var(--linen); opacity: 0.92;
  max-width: 56ch; text-wrap: pretty;
  margin: clamp(24px, 2.4vw, 32px) 0 0;
}
.hp-cta__actions { margin-top: clamp(36px, 4vw, 56px); display: flex; flex-wrap: wrap; gap: 14px; }

/* ============================================================
   AQUARIUS — studio-intelligence promo strip
   A slim editorial promo between Studio and Pull. Small but
   intentional — a single ember dot + italic line + CTA.
   ============================================================ */
.hp-afterhours {
  position: relative;
  overflow: visible;
  padding: clamp(96px, 11vw, 156px) clamp(24px, 4vw, 80px) clamp(96px, 11vw, 156px);
  /* Segmented as its own after-hours panel — but SOFT, not a hard rule. The deeper
     center feathers back up to the page value at both ends so Aquarius reads as a
     distinct darker strip that melts in rather than being cut by a line (Jason m0093). */
  background:
    radial-gradient(120% 62% at 12% 62%, rgba(40,30,18,0.34), transparent 58%),
    linear-gradient(to bottom,
      transparent 0,
      #0c0906 26%,
      #0c0906 74%,
      var(--ink) 100%);
}
.hp-afterhours__inner { position: relative; z-index: 1; }
/* a soft ember seam, feathered — the only "line," and it glows rather than cuts */
.hp-afterhours::before {
  content: "";
  position: absolute; left: 50%; top: clamp(40px, 5vw, 72px); transform: translateX(-50%);
  width: min(54%, 680px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,162,104,0.42), transparent);
  filter: blur(0.3px);
  pointer-events: none;
}
.hp-afterhours::after {
  content: "";
  position: absolute; left: 50%; bottom: clamp(40px, 5vw, 72px); transform: translateX(-50%);
  width: min(54%, 680px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,162,104,0.28), transparent);
  filter: blur(0.3px);
  pointer-events: none;
}
.hp-afterhours__inner {
  text-decoration: none; color: inherit; cursor: pointer;
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(156px, 19vw, 324px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@keyframes aqGrowIn { from { transform: scale(0.9); } to { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hp-afterhours__inner {
      transform-origin: center;
      animation: aqGrowIn linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 42%;
    }
  }
}
@media (max-width: 820px) {
  .hp-afterhours__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-left: 0;
    padding-top: clamp(104px, 30vw, 158px);
  }
  .hp-afterhours__inner .hp-afterhours__body { align-items: center; text-align: center; }
  .hp-afterhours__lead { width: 100%; }
}
.hp-afterhours__body {
  display: flex; flex-direction: column;
  min-width: 0;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 22px);
}
.hp-afterhours__face-link {
  position: absolute;
  left: clamp(-30px, -0.8vw, -6px);
  top: 50%;
  width: clamp(158px, 17.5vw, 280px);
  transform: translateY(-50%);
  z-index: 3;
  display: block;
  border-radius: 50%;
  isolation: isolate;
  transition: transform 460ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
/* candle-glow halo — warm ember bleeding into brand green, breathing slowly */
.hp-afterhours__face-link::before {
  content: "";
  position: absolute;
  inset: -26%;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%,
    rgba(177,203,79,0.26) 0%,
    rgba(168,128,64,0.20) 30%,
    rgba(132,86,44,0.12) 50%,
    rgba(132,86,44,0.04) 66%,
    transparent 76%);
  filter: blur(16px);
  animation: aqCandle 6.5s var(--ease-in-out) infinite;
}
.hp-afterhours__inner:hover .hp-afterhours__face-link,
.hp-afterhours__inner:focus-visible .hp-afterhours__face-link {
  transform: translateY(-50%) scale(1.045);
}
.hp-afterhours__inner:focus-visible .hp-afterhours__face-link {
  outline: 2px solid var(--scapes-sandstone);
  outline-offset: 8px;
}
.hp-afterhours__face {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  /* dissolve the hard disc rim into the dark so it stops reading as a card */
  -webkit-mask-image: radial-gradient(circle at 49% 50%, #000 54%, rgba(0,0,0,0.7) 66%, rgba(0,0,0,0.25) 75%, transparent 83%);
  mask-image: radial-gradient(circle at 49% 50%, #000 54%, rgba(0,0,0,0.7) 66%, rgba(0,0,0,0.25) 75%, transparent 83%);
  filter: drop-shadow(0 0 26px rgba(177,203,79,0.22)) drop-shadow(0 16px 50px rgba(0,0,0,0.45));
  transform-origin: center;
  animation: hpFaceFloat 7.5s var(--ease-in-out) infinite;
  transition: filter 460ms var(--ease-out);
  will-change: transform;
}
.hp-afterhours__inner:hover .hp-afterhours__face,
.hp-afterhours__inner:focus-visible .hp-afterhours__face {
  filter: drop-shadow(0 0 38px rgba(177,203,79,0.40)) drop-shadow(0 18px 56px rgba(0,0,0,0.5));
}
@keyframes aqCandle {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
@keyframes hpFaceFloat {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50%      { transform: translateY(-12px) rotate(0.8deg); }
}
@media (max-width: 820px) {
  .hp-afterhours__face-link {
    left: clamp(-10px, 2vw, 16px);
    top: clamp(-14px, -2vw, -6px);
    transform: none;
    width: clamp(116px, 30vw, 168px);
  }
  .hp-afterhours__face-link:hover,
  .hp-afterhours__face-link:focus-visible { transform: none; }
  .hp-afterhours__face { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-afterhours__face { animation: none; }
  .hp-afterhours__face-link::before { animation: none; opacity: 0.85; }
}
.hp-afterhours__signal {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 16px;
  background: var(--loam);
  border: 1px solid var(--border);
  border-radius: 999px;
  flex-shrink: 0;
  justify-self: start;
}
.hp-afterhours__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 12px rgba(196,119,60,0.65);
  animation: hpAfterPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes hpAfterPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.6; }
}
.hp-afterhours__label {
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--scapes-sandstone); font-weight: 500;
}
/* Aquarius's way-in lives INSIDE the line now — "Ask Aquarius" is the lime
   link, no floating button, no underline (Jason m0174). */
.hp-afterhours__link,
.hp-afterhours__link em {
  color: #8fd14a;
  font-style: normal;
  text-decoration: none;
  transition: color 320ms var(--ease-out), text-shadow 320ms var(--ease-out);
}
.hp-afterhours__link:hover,
.hp-afterhours__link:hover em,
.hp-afterhours__link:focus-visible,
.hp-afterhours__link:focus-visible em {
  color: #b6ea78;
  text-shadow: 0 0 18px rgba(143, 209, 74, 0.45);
  outline: none;
}
.hp-afterhours__lead {
  font-family: var(--font-display); font-weight: 300;
  text-align: center;
  width: max-content; max-width: 100%;
  align-self: stretch;
  font-size: clamp(22px, 2.6vw, 38px); line-height: 1.2;
  color: var(--linen); margin: 0;
  letter-spacing: -0.012em; text-wrap: balance;
}
.hp-afterhours__lead em { font-style: normal;  color: var(--scapes-sandstone); }
.hp-afterhours__cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #8fd14a; font-weight: 600;
  text-decoration: none;
  padding: 4px 1px;
  border-bottom: 1px solid rgba(143, 209, 74, 0.42);
  transition: color 320ms var(--ease-out), border-color 320ms var(--ease-out), gap 320ms var(--ease-out);
  white-space: nowrap;
  justify-self: end;
}
.hp-afterhours__cta:hover,
.hp-afterhours__cta:focus-visible {
  color: #a8e266;
  border-color: #a8e266;
  gap: 14px;
  outline: none;
}
.hp-afterhours__cta .arrow {
  display: inline-block; width: 14px; height: 1px;
  background: currentColor; position: relative;
}

/* "Listen" disclosure on the homepage Dirt Church block — collapses the
   Spotify/Apple/YouTube/Follow links behind one move (Jason m0151). */
.stream__toggle {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  color: var(--linen); background: none;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 11px 20px; cursor: pointer;
  transition: color 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.stream__toggle:hover,
.stream__toggle:focus-visible {
  color: var(--scapes-sandstone); border-color: var(--scapes-sandstone); outline: none;
}
.stream__toggle-caret {
  width: 7px; height: 7px; margin-bottom: 2px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform 320ms var(--ease-out);
}
.stream__toggle[aria-expanded="true"] .stream__toggle-caret {
  transform: rotate(-135deg); margin-bottom: 0; margin-top: 3px;
}
.hp-studio__stream .stream__links { margin-top: 16px; }
.hp-afterhours__cta .arrow::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 700px){
  .hp-card__eyebrow,
  .hp-tier__verb,
  .hp-layer__verb,
  .rj__report-tag,
  .hp-report__figcap,
  .hp-continue__lead,
  .hp-afterhours__label {
    font-size: 12px /*mbump*/;
    letter-spacing: 0.16em;
  }
}


/* ==================== hand.css ==================== */
/* ============================================================
   THE HAND — the architect's directional line.
   One firelight gesture, drawn by hand, that guides the eye
   through the site: down between sections, toward a doorway,
   or ghosted in the background. Source: a single charcoal arrow,
   recolored to firelight, rotated/flipped into 8 gestures
   (assets/hand/<dir>.png). Keep it deliberate — never sloppy.
   ============================================================ */

.hand {
  --hand-w: 150px;
  display: block;
  width: var(--hand-w);
  height: auto;
  pointer-events: none;
  user-select: none;
  /* ghosted in — a whisper of firelight, no hard glow */
  filter: none;
}

/* ---- SEAM: the descender baked INTO the boundary between sections ----
   No band, no height of its own. The seam is a zero-height line sitting
   exactly between two sections; the hand is absolutely centered on that
   line so it STRADDLES it — half in the section above, arrowhead crossing
   down into the next so the eye is carried across. Ghosted faint. */
.hand-seam {
  position: relative;
  height: 0;
  margin: 0;
  z-index: 20;
  pointer-events: none;
}
.hand-seam .hand {
  position: absolute;
  left: 50%;
  top: 0;
  --hand-w: clamp(96px, 9vw, 140px);
  --lean: 0px;            /* horizontal nudge off-center */
  --rot: 0deg;            /* tilt */
  --flip: 1;             /* -1 mirrors the stroke for shape variety */
  --op: 0.07;            /* ghosted */
  transform: translate(calc(-50% + var(--lean)), -50%) rotate(var(--rot)) scaleX(var(--flip));
  opacity: var(--op);
}
/* default leans if a seam carries no inline vars (kept as a fallback) */
.hand-seam--left  .hand { --lean: -9%; --rot: -7deg; }
.hand-seam--right .hand { --lean: 9%;  --rot: 6deg; }

/* draw-in: the stroke wipes toward its arrowhead as it enters view.
   Rides the site's existing .reveal/.is-visible IntersectionObserver. */
.hand-seam.reveal .hand {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms cubic-bezier(.22,.61,.36,1);
}
.hand-seam.reveal.is-visible .hand { clip-path: inset(0 0 0 0); }

/* ---- AIM: a small hand pointing at a doorway (a CTA, a link) ---- */
.hand-aim {
  --hand-w: 84px;
  position: absolute;
  pointer-events: none;
  opacity: 0.9;
}

/* ---- GHOST: the hand sketched faint in the background ---- */
.hand--ghost {
  position: absolute;
  z-index: 0;
  opacity: 0.06;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .hand-seam.reveal .hand { clip-path: none; transition: none; }
}
@media (max-width: 640px) {
  .hand-seam .hand { --hand-w: clamp(80px, 22vw, 120px) !important; --lean: 0px !important; }
}


/* ==================== mobile.css ==================== */
/* ============================================================
   mobile.css — THE MOBILE LAYER
   Loaded LAST. Every rule is gated to <=760px, so desktop
   renders byte-identical to before this file existed.

   Principle (Jason m0015): the desktop is the art. Mobile is the
   art, streamlined — image-led, few words on first read, one door.
   Patterns drawn from luxury/high-end contractor mobile practice:
   minimal copy + big editorial imagery, progressive disclosure,
   one persistent thumb-zone CTA, 44px+ tap targets.
   ============================================================ */

@media (max-width: 760px) {

  /* --- 1 · FRAME: give the page air, take back the scroll ----- */
  section { padding-top: 3.4rem; padding-bottom: 3.4rem; }
  section + section { padding-top: 3rem; }

  /* Type: bigger headline, calmer body. Reading, not skimming a wall. */
  h1 { line-height: 1.02; letter-spacing: -0.015em; }
  h2 { line-height: 1.06; margin-bottom: 0.7em; }
  p { line-height: 1.62; text-wrap: pretty; }

  /* Never let a paragraph run wider than comfort, never narrower than the frame */
  section p, section h2, section h3 { max-width: none; }

  /* --- 2 · IMAGERY LEADS ------------------------------------- */
  /* On a phone the photograph is the argument. Let it reach the edges. */
  .m-bleed, figure.m-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw; border-radius: 0; }
  .m-bleed img { width: 100%; height: auto; display: block; border-radius: 0; }

  /* --- 3 · PROGRESSIVE DISCLOSURE ----------------------------
     The lead line stays. The rest waits behind a hand-drawn cue.
     Injected by js/mobile.js — no markup changes anywhere.
     ----------------------------------------------------------- */
  .m-more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 420ms cubic-bezier(.22,.61,.36,1), opacity 300ms ease;
    opacity: 0;
  }
  .m-more > .m-more__inner { overflow: hidden; min-height: 0; }
  .m-more.is-open { grid-template-rows: 1fr; opacity: 1; }

  /* Anything marked .m-hide is desktop-only — off the page on phones. */
  .m-hide { display: none !important; }

  .m-cue {
    -webkit-appearance: none; appearance: none; background: none; border: 0;
    display: flex; align-items: center; gap: 0.55rem;
    min-height: 48px; padding: 0.5rem 0; margin: 0.2rem 0 0;
    font-family: 'Architects Daughter', cursive;
    font-size: 1.02rem; letter-spacing: 0.01em;
    color: var(--firelight, #e0a268);
    opacity: 0.72; cursor: pointer; text-align: left;
  }
  .m-cue:active { opacity: 1; }
  .m-cue__arrow {
    display: inline-block; width: 15px; height: 15px; flex: 0 0 auto;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 380ms cubic-bezier(.22,.61,.36,1);
  }
  .m-cue[aria-expanded="true"] .m-cue__arrow { transform: rotate(-135deg) translate(-2px, -2px); }
  .m-cue[aria-expanded="true"] { opacity: 0.45; }

  /* On light panels the firelight cue would shout — go bronze */
  .theme-light .m-cue, .section--light .m-cue, .panel--light .m-cue { color: var(--bronze, #8a6a3a); opacity: 0.85; }

  /* --- 4 · THE DOCK: one door, always in the thumb zone -------
     Luxury restraint: a single CTA, not a bar of choices. Appears
     once the hero is behind you, retreats when the real invitation
     (the page's own CTA / footer) is on screen — never a double-ask.
     ----------------------------------------------------------- */
  .m-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(10,8,7,0.96) 55%, rgba(10,8,7,0));
    transform: translateY(120%);
    transition: transform 420ms cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
  }
  .m-dock.is-up { transform: translateY(0); pointer-events: auto; }
  .m-dock__row { display: flex; gap: 0.5rem; }
  .m-dock__row--minor { margin-top: 0.42rem; }
  .m-dock__minor {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    min-height: 46px; padding: 0.5rem 0.6rem;
    background: rgba(235,227,210,0.05);
    border: 1px solid var(--border, rgba(235,227,210,0.12));
    border-radius: 2px; text-decoration: none;
    color: var(--fg-muted, #b0a89b);
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  }
  .m-dock__minor span { font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--fg-subtle, #9c948a); font-size: 0.8rem; }
  .m-dock__minor:hover, .m-dock__minor:focus { color: var(--accent, #cab686); }
  .m-dock__minor:active { background: rgba(235,227,210,0.1); }
  .m-dock__btn {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    width: 100%; min-height: 54px; padding: 0.9rem 1.2rem;
    background: var(--scapes-sandstone, #cab686);
    color: var(--ink, #0a0807);
    font-family: inherit; font-size: 1.02rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
    border-radius: 2px;
    box-shadow: 0 10px 34px rgba(0,0,0,0.55);
  }
  .m-dock__btn:hover, .m-dock__btn:focus { color: var(--ink, #0a0807); background: var(--scapes-sandstone, #cab686); }
  .m-dock__btn:active { background: var(--bronze-soft, #a98654); }

  /* the dock floats over content — give the page a floor to land on */
  body.has-dock { padding-bottom: 0; }
  body.has-dock footer { padding-bottom: 8.5rem; }

  /* --- 4b · THE RAIL: card grids swipe, they do not stack ------
     Four stacked cards is 2,000px of scroll on a phone. As a
     snap rail with a peek of the next card it is one screen, and
     the peek is what tells the thumb there is more. Standard in
     luxury retail and high-end contractor galleries.
     ----------------------------------------------------------- */
  .hp-cardgrid, [data-rail] {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 78vw;
    grid-template-columns: none !important;
    gap: 0.9rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.2rem 1.1rem 1.1rem;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw; max-width: 100vw;
  }
  .hp-cardgrid::-webkit-scrollbar, [data-rail]::-webkit-scrollbar { display: none; }
  .hp-cardgrid > *, [data-rail] > * { scroll-snap-align: center; height: auto; }

  /* --- 7 · AQUARIUS: the face centered, the box in reach -------
     Jason m0069 — landing here from the homepage is a fast
     transition and the whole point is the question. Center the
     emblem, tighten the masthead, and get the ask box onto the
     first screen so there is nothing to scroll before typing.
     ----------------------------------------------------------- */
  .aj-mast {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "emblem emblem" "title status" "lead lead";
    justify-content: center; align-items: center;
    column-gap: 0.7rem;
    text-align: center;
    padding: 1rem 1.25rem 0.5rem !important;
  }
  .aj-mast > * { max-width: 100%; }
  .aj-mast__emblem { grid-area: emblem; justify-self: center; }
  .aj-mast .eyebrow { display: none; }
  .aj-mast__title { grid-area: title; }
  .aj-mast__lead { grid-area: lead; }
  .aj-mast__emblem {
    width: 104px !important; height: auto !important; margin: 0 0 0.6rem;
    align-self: center;
  }
  .aj-mast .eyebrow { margin: 0; }
  .aj-mast__title {
    font-size: clamp(2.5rem, 12.5vw, 3.4rem) !important;
    line-height: 0.95; margin: 0 0 0.45rem !important;
  }
  .aj-mast__lead {
    font-size: 0.9rem; line-height: 1.45;
    max-width: 32ch; margin: 0 auto !important;
  }
  /* AWAKE rides beside his name as a status, not its own row (Jason m0085) */
  .aj-line {
    grid-area: status; align-self: center; justify-self: start;
    margin: 0 !important; transform: translateY(0.1em);
    scale: 0.86; transform-origin: left center;
  }

  /* the thread starts immediately — no gap between the face and the box */
  .aj-thread { padding-top: 0.7rem !important; }
  .aj-ask { margin-top: 0 !important; }
  .aj-form__textarea { min-height: 62px; font-size: 16px; }  /* 16px stops iOS zoom-on-focus */
  .aj-ask { padding-top: 0.9rem !important; padding-bottom: 0.9rem !important; }

  .aj-form__note { display: none !important; }

  /* Aquarius is his own door — the dock is suppressed in mobile.js */

  /* Homepage Aquarius doorway — face enlarged and centered (Jason m0105) */
  .hp-afterhours { padding-top: 2.6rem !important; padding-bottom: 2.8rem !important; }
  .hp-afterhours__inner { flex-direction: column; align-items: center; text-align: center; padding-top: 0 !important; }
  .hp-afterhours__face-link { position: static !important; transform: none !important; inset: auto !important; justify-self: center; align-self: center; width: 168px !important; max-width: 46vw; height: auto !important; margin: 0 auto 0.9rem !important; }
  .hp-afterhours__face { width: 168px !important; height: auto !important; max-width: 46vw; }
  .hp-afterhours__body { align-items: center; text-align: center; }
  .hp-afterhours__signal { justify-content: center; margin-left: auto; margin-right: auto; }

  .stream__doors { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .stream__door { justify-content: center; text-align: center; }
  /* --- 9 · ROOT JUICE: close the dead air under the title ------ */
  .rjh { min-height: 58vh !important; }
  .rj-split { padding-top: 1.5rem !important; }

  /* One alignment down the whole page, not a left/center flip-flop
     (Jason m0144). Centered throughout on mobile. */
  .rjh__inner, .rj-split__text, .rj-split__media,
  .rj-band, .rj-organic, .rj-creed, .rj-gulf { text-align: center; }
  .rjh__inner :is(h1, h2, h3, h4, p, ul, ol, li, .eyebrow, blockquote, figcaption),
  .rj-split__text :is(h1, h2, h3, h4, p, ul, ol, li, .eyebrow, blockquote, figcaption),
  .rj-band :is(h1, h2, h3, h4, p, ul, ol, li, .eyebrow, blockquote, figcaption) {
    text-align: center; margin-left: auto; margin-right: auto;
  }
  .rjh__inner ul, .rj-split__text ul, .rj-band ul,
  .rjh__inner ol, .rj-split__text ol, .rj-band ol { list-style-position: inside; padding-left: 0; }
  .rj-split__text > *, .rj-band > * { margin-left: auto; margin-right: auto; }
  .rjh__inner .m-cue, .rj-split__text .m-cue, .rj-band .m-cue { justify-content: center; }

  /* Steps: the numeral is the separator, not a rule (Jason m0149) */
  .rj-flow > li::before, .rj-flow > li::after { display: none !important; content: none !important; }
  .rj-flow > li { padding: 2.4rem 0 0 !important; }
  .rj-flow > li:first-child { padding-top: 0.6rem !important; }
  .rj-flow__n {
    display: block;
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 3.5rem !important; line-height: 1;
    letter-spacing: 0.01em; font-weight: 400;
    color: var(--accent, #cab686); opacity: 0.3;
    margin-bottom: 0.5rem;
  }
  .rj-flow__t { margin-top: 0 !important; }

  /* Loose paragraphs given a container so they read as cards (Jason m0155) */
  .rj-year__steady { gap: 0.75rem; }
  .rj-steady__item {
    background: var(--bg-elevated, #221c16);
    border: 1px solid var(--border, rgba(235,227,210,0.12));
    border-radius: 3px;
    padding: 1.3rem 1.15rem 1.4rem;
  }
  .rj-steady__k { margin-top: 0 !important; }

  /* The gulf band's scrim was a left-to-right gradient built for the
     desktop split — on a phone the text spans full width and sat on
     bare photo. Even, heavier veil instead (Jason m0157). */
  .rj-gulf__bg::after {
    background: linear-gradient(to bottom, rgba(16,14,11,0.90) 0%, rgba(16,14,11,0.84) 45%, rgba(16,14,11,0.93) 100%) !important;
  }
  .rj-gulf__bg img { filter: brightness(0.72) saturate(0.9); }

  /* --- 10 · FOOTER LEGAL BAR ---------------------------------- */
  .site-foot__legal {
    display: flex; flex-direction: column; align-items: center;
    gap: 1rem; text-align: center;
    padding-top: 1.6rem; margin-top: 1.4rem;
    border-top: 1px solid var(--divider, rgba(235,227,210,0.08));
  }
  .site-foot__legal > div:first-child { max-width: 26ch; line-height: 1.5; }
  .site-foot__legal-links {
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: center; gap: 0.2rem 1.35rem;
  }
  .site-foot__legal-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0; }
  .site-foot__legal-links span {
    flex: 0 0 100%; margin-top: 0.5rem;
    color: var(--fg-subtle, #9c948a); letter-spacing: 0.16em;
  }

  /* Disciplines modal door (Jason m0169) */
  .disc-modal__door {
    display: inline-flex; align-items: center; gap: 0.45rem;
    min-height: 48px; margin-top: 0.5rem;
    font-family: 'Architects Daughter', cursive;
    font-size: 1.02rem; color: var(--firelight, #e0a268);
    text-decoration: none; opacity: 0.85;
  }
  .disc-modal__door:hover, .disc-modal__door:focus { color: var(--firelight, #e0a268); opacity: 1; }

  /* Hero crops: a landscape photo in a portrait frame loses its subject
     at 50%. Pull the frame to where the subject actually is. */
  .m-focus-x14 { background-position: 14% 50% !important; }
  .m-focus-x30 { background-position: 30% 50% !important; }

  /* Trade Partners hero: centered ragged prose over a photo read as
     juvenile. Left-aligned in a contained block (Jason m0270). */
  .tp-hero, .tp-hero__inner { text-align: left !important; }
  .tp-hero .eyebrow { justify-content: flex-start; }
  .tp-hero__title { text-align: left !important; }
  .tp-hero__lead {
    text-align: left !important; max-width: none !important;
    background: rgba(10,8,7,0.66);
    border: 1px solid var(--border, rgba(235,227,210,0.12));
    padding: 1.15rem 1.2rem;
    line-height: 1.6;
  }
  .tp-hero__lead + p { text-align: left !important; }

  /* 72px of section tail meeting 64px of the next section's head read as a
     blank screen between them (Jason m0378). */
  .gwm-invest { padding-bottom: 2.4rem !important; }
  .pg-pull { padding-top: 2.4rem !important; }

  /* Investment ledger ran past its container: the grid track was a fixed
     260px inside a 227px content box (Jason m0359). */
  .gwm-example { grid-template-columns: minmax(0, 1fr) !important; }
  .gwm-ledger { width: auto !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .gwm-ledger__row { gap: 12px !important; align-items: baseline; min-width: 0 !important; }
  .gwm-ledger__k { min-width: 0 !important; flex: 1 1 auto; }
  .gwm-ledger__v { white-space: nowrap; flex: 0 0 auto; }

  /* CTA: 88px above the block and 28 below read as a drop-out under the
     button. Even padding so the block sits centred in its plate. */
  .hp-cta { padding-top: 3.4rem !important; padding-bottom: 3.4rem !important; }

  /* Founder's note: the vertical rail was top-aligned against a taller
     column, so the block read off-centre with dead space under it. */
  .hp-founder__inner { align-items: center !important; }
  .hp-founder { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  /* --- 11 · THE GEAR: pictures, not paragraphs (Jason m0386) ---
     Each item was ~1,978px of copy and spec tables — 27 screens for
     eleven products. On a phone gear is browsed by eye: a big photo,
     the name, the price. The spec sheet stays on desktop.
     ----------------------------------------------------------- */
  .gr-item { padding: 0 0 2.6rem !important; }
  .gr-item__inner { display: flex !important; flex-direction: column; gap: 0 !important; }
  .gr-item__photo {
    order: -1; margin: 0 calc(50% - 50vw) 0.9rem !important;
    width: 100vw; max-width: 100vw; padding: 0 !important;
  }
  .gr-item__photo img {
    width: 100%; height: 62vw; max-height: 440px; min-height: 260px;
    object-fit: cover; display: block; border-radius: 0;
  }
  .gr-item__copy { padding: 0 1.25rem !important; }
  .gr-item__sub { margin-bottom: 0.3rem !important; }
  .gr-item__title { margin: 0 0 0.5rem !important; }

  /* the words that made it 27 screens */
  .gr-item__lead, .gr-item__body,
  .gr-spec, .gr-spec__rows, .gr-spec__name, .gr-embroidery, .gr-spec__swatch { display: none !important; }

  /* the whole card is the door (Jason m0393) */
  .gr-item { cursor: pointer; }

  .gr-spec { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; }
  .gr-spec__priceX {
    margin: 0 !important; font-size: 1.15rem; color: var(--accent, #cab686);
    letter-spacing: 0.02em;
  }
  .gr-item__numeral { font-size: 2.4rem !important; opacity: 0.22; }

  /* One ask, not seven. Each program row is its own door on mobile —
     the repeated "Begin the conversation" button is off, and the whole
     row carries the tap, so the program context survives (Jason m0430). */
  .pflat__cta { display: none !important; }
  .pflat__row { cursor: pointer; }

  /* Dash markers on the seasonal beats read as noise down a narrow
     column — the lines already read as a list (Jason m0442). */
  .rj-season__beats li::before,
  .rj-beats li::before,
  .rj-organic__list li::before { display: none !important; }
  .rj-season__beats li, .rj-beats li, .rj-organic__list li { padding-left: 0 !important; }

  /* --- 8 · THE COMPONENT STACK -------------------------------- */
  .m-stack { display: grid; gap: 0.55rem; margin: 1.6rem 0 0; }
  .m-stack__row {
    display: grid; grid-template-columns: 92px 1fr; align-items: center;
    gap: 1.1rem; padding: 0.9rem 0.2rem;
    border-top: 1px solid var(--divider, rgba(235,227,210,0.08));
  }
  .m-stack__row:last-child { border-bottom: 1px solid var(--divider, rgba(235,227,210,0.08)); }
  .m-stack__piece { display: flex; align-items: center; justify-content: center; }
  .m-stack__piece svg { width: 92px; height: auto; display: block; }
  .m-stack__text > * { margin: 0; }
  .m-stack__num {
    font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--fg-subtle, #9c948a); margin-bottom: 0.28rem !important;
  }
  .m-stack__name {
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.85rem; line-height: 1; color: var(--accent, #cab686);
  }
  .m-stack__line { font-size: 0.94rem; color: var(--fg-muted, #b0a89b); margin-top: 0.22rem !important; }

  .pz-caption { display: none; }
  section:has(#work-title) .section__lead { display: none; }

  /* --- 5 · TAP TARGETS ---------------------------------------- */
  nav a, footer a, .m-cue, .m-dock__btn { min-height: 44px; }
  footer nav a, .footer-links a { display: block; padding: 0.55rem 0; }

  /* --- 6 · FOOTER ACCORDION ----------------------------------- */
  .site-foot__cols { gap: 0 !important; }
  .m-foot-toggle {
    -webkit-appearance: none; appearance: none; background: none;
    border: 0; border-bottom: 1px solid var(--divider, rgba(235,227,210,.08));
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 52px; padding: 0.9rem 0;
    font: inherit; font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--fg-subtle, #9c948a); cursor: pointer; text-align: left;
  }
  .m-foot-toggle .m-cue__arrow { transition: transform 320ms ease; }
  .m-foot-toggle[aria-expanded="true"] { color: var(--accent, #cab686); }
  .m-foot-toggle[aria-expanded="true"] .m-cue__arrow { transform: rotate(-135deg) translate(-2px, -2px); }
  .m-foot-list {
    display: block !important; max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 340ms cubic-bezier(.22,.61,.36,1), opacity 260ms ease;
  }
  .m-foot-list.is-open { max-height: 60vh; opacity: 1; overflow-y: auto; padding-bottom: 0.8rem; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .m-more, .m-cue__arrow, .m-dock { transition: none; }
}


/* ============================================================
   REVEAL OFF ON PHONES (2026-08-08)
   Lighthouse: LCP element render delay was 2,950 ms — the .reveal
   fade-up held content invisible until deferred JS ran, then waited
   out a transition-delay. Nothing was downloading; the page was
   waiting on itself. Desktop keeps the animation.
   ============================================================ */
@media (max-width: 760px) {
  .reveal, .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}


/* ==================== hoisted from index.html <style> blocks (2026-08-08) ====================
   These were inline in the homepage and were bloating the HTML the browser must read
   before it can finish discovering CSS. Appended LAST to preserve the original cascade. */

@media (max-width:760px){.hp-hero__plate-img{background-image:url('/.netlify/images?url=/assets/scapes-home-hero-0602.jpg&w=800&q=70')!important}}


    .consult-open, .consult-open:hover { text-decoration: none; border: 0; }
    /* melt the CTA into the footer — no divider line, tighter gap (Jason m0080) */
    .site-foot { border-top: none; padding-top: clamp(36px, 4vw, 60px); }
    .hp-cta { padding-bottom: clamp(28px, 3vw, 48px); }

    /* ---- Centered, obvious “Begin a conversation” door (Jason m0098) ----
       FULL-WIDTH HIT AREA (Jason m0433): if they scrolled this far they are
       already interested — the whole band is the door, not just the icon. */
    .consult-door {
      display: flex; flex-direction: column; align-items: center; gap: 0;
      width: 100%; max-width: 100%; margin: 2px auto 0; text-align: center;
    }
    /* one long descender that reaches DOWN to the button — arrowhead anchored just
       above it, tail stretched up toward the paragraph (Jason m0121) */
    .consult-door__arrow {
      width: clamp(60px, 6vw, 86px); height: auto;
      opacity: .4;
      margin: 0 0 -18px; pointer-events: none;
      transition: opacity .5s ease;
    }
    .consult-door:hover .consult-door__arrow,
    .consult-door:focus-within .consult-door__arrow { opacity: .42; }

    .consult-open--big {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      width: 100vw; max-width: 100vw;
      margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
      padding: 46px 52px; border-radius: 0;
      position: relative; isolation: isolate;
      background: none !important;
      background: radial-gradient(ellipse at center, rgba(0,0,0,.6) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,0) 78%);
      transition: background .4s ease, box-shadow .4s ease, transform .4s ease;
    }
    .consult-open--big .consult-open__icon {
      width: clamp(126px, 13vw, 164px); height: auto;
      filter: drop-shadow(0 3px 12px rgba(0,0,0,.45));
      transition: filter .4s ease, transform .5s ease;
    }
    .consult-open--big span {
      font-family: 'Architects Daughter', cursive;
      font-size: clamp(28px, 3vw, 36px); line-height: 1.1; color: #ebe3d2; text-align: left;
      transition: color .4s ease, text-shadow .4s ease;
    }
    .consult-open--big:hover, .consult-open--big:focus-visible { transform: none; }
    .consult-open--big:hover::after, .consult-open--big:focus-visible::after {
      background: radial-gradient(ellipse 58% 150% at 50% 50%, rgba(224,162,104,.28) 0%, rgba(224,162,104,.12) 45%, rgba(224,162,104,0) 78%);
    }
    .consult-open--big:hover .consult-open__icon,
    .consult-open--big:focus-visible .consult-open__icon {
      filter: brightness(1.55) drop-shadow(0 0 16px rgba(198,123,74,.6));
    }
    .consult-open--big:hover span,
    .consult-open--big:focus-visible span { color: #fff; text-shadow: 0 0 18px rgba(255,240,220,.45); }

    /* scroll-into-view: light it up so a scrolling visitor can't miss it (Jason m0178) */
    /* A resting glow across the whole band — this is what tells a scroller the
       strip is alive. It brightens on hover, it never disappears. */
    .consult-open--big::after {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background: radial-gradient(ellipse 46% 130% at 50% 50%, rgba(224,162,104,.13) 0%, rgba(224,162,104,.055) 45%, rgba(224,162,104,0) 78%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
      transition: background .45s ease;
    }
    .consult-open--big.is-visible::after {
      background: radial-gradient(ellipse 52% 140% at 50% 50%, rgba(224,162,104,.19) 0%, rgba(224,162,104,.08) 45%, rgba(224,162,104,0) 78%);
    }
    .consult-open--big.is-visible .consult-open__icon {
      filter: brightness(1.45) drop-shadow(0 0 14px rgba(198,123,74,.5));
    }
    .consult-open--big.is-visible span { color: #fff; text-shadow: 0 0 16px rgba(255,240,220,.4); }

    /* phones — the door was wider than the screen, clipping "conversation" off the right */
    @media (max-width: 620px) {
      .consult-open--big { flex-direction: column; align-items: center; justify-content: center; width: 100vw; max-width: 100vw; min-height: 132px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 26px 16px; gap: 6px; }
      .consult-open--big .consult-open__icon { width: clamp(84px, 22vw, 104px); }
      .consult-open--big span { font-size: clamp(24px, 7.2vw, 30px); text-align: center; }
      .consult-door { width: auto; max-width: 100%; padding: 0; }
    }

    @media (prefers-reduced-motion: no-preference) {
      .consult-open--big .consult-open__icon { animation: consultFloat 4.2s ease-in-out infinite; }
      /* attention pulse when it scrolls into view — a few wiggles, then settles */
      .consult-open--big.is-visible .consult-open__icon { animation: consultAttn 0.9s ease-in-out 3; }
      @keyframes consultAttn { 0%,100% { transform: rotate(0) scale(1.06); } 25% { transform: rotate(-5deg) scale(1.1); } 75% { transform: rotate(5deg) scale(1.1); } }
      .consult-open--big:hover .consult-open__icon,
      .consult-open--big:focus-visible .consult-open__icon { animation: consultWiggle 1s ease-in-out infinite; }
      @keyframes consultBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
      @keyframes consultFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-2deg); } }
      @keyframes consultWiggle { 0%,100% { transform: rotate(-4deg) scale(1.07); } 50% { transform: rotate(4deg) scale(1.11); } }
    }
    /* ============================================================
       THE THREE COMPONENTS — interactive puzzle (Root · Compose · Elevate).
       Ported from programs.html (Jason m0011 — replaced the napkin "Plan").
       ============================================================ */
    #puzzle-mount { position: relative; width: 100%; max-width: 1000px; margin: clamp(28px,4vw,48px) auto 0;
      display: grid; grid-template-columns: minmax(0,392px) 1fr; gap: clamp(20px,3vw,56px); align-items: stretch; }
    .pz-svg { width: 100%; height: auto; overflow: visible; display: block; }
    #puzzle-mount[data-static] .pz-piece { cursor: default; }
    .pz-piece { cursor: pointer; transform-box: fill-box; transform-origin: center;
      transition: transform .5s var(--ease-out), opacity .5s var(--ease-out), filter .5s var(--ease-out); }
    .pz-emblem { opacity: 1; filter: brightness(0) invert(1) drop-shadow(0.7px 0 0 #fff) drop-shadow(-0.7px 0 0 #fff) drop-shadow(0 0.7px 0 #fff) drop-shadow(0 -0.7px 0 #fff) drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
    .pz-elevate { transform: rotate(-3deg); }
    .pz-compose { transform: rotate(2deg); }
    .pz-root { transform: rotate(-2deg); }
    #puzzle-mount[data-active] .pz-piece { opacity: .34; filter: grayscale(.55) brightness(.72); }
    #puzzle-mount[data-active="elevate"] .pz-elevate { opacity: 1; filter: none; transform: rotate(-3deg) scale(1.04); }
    #puzzle-mount[data-active="compose"] .pz-compose { opacity: 1; filter: none; transform: rotate(2deg) scale(1.04); }
    #puzzle-mount[data-active="root"] .pz-root { opacity: 1; filter: none; transform: rotate(-2deg) scale(1.04); }
    
  /* Click/hold + keyboard focus: no browser box — the piece takes the candle (Jason m0048) */
  .pz-piece { outline: none; -webkit-tap-highlight-color: transparent; }
  .pz-piece:focus, .pz-piece:active { outline: none; }
  @keyframes pz-candle {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(224,158,74,0.50)) drop-shadow(0 0 22px rgba(194,65,12,0.30)) brightness(1.08); }
    38%      { filter: drop-shadow(0 0 14px rgba(240,182,98,0.64)) drop-shadow(0 0 36px rgba(205,80,20,0.40)) brightness(1.15); }
    61%      { filter: drop-shadow(0 0 9px rgba(224,158,74,0.52))  drop-shadow(0 0 24px rgba(194,65,12,0.31)) brightness(1.09); }
    80%      { filter: drop-shadow(0 0 12px rgba(236,174,92,0.60)) drop-shadow(0 0 31px rgba(200,72,16,0.36)) brightness(1.13); }
  }
  #puzzle-mount:not([data-static]) .pz-piece:active, #puzzle-mount:not([data-static])[data-active] .pz-piece:active,
  #puzzle-mount:not([data-static]) .pz-piece:focus-visible, #puzzle-mount:not([data-static])[data-active] .pz-piece:focus-visible {
    opacity: 1; animation: pz-candle 1.6s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) {
    #puzzle-mount:not([data-static]) .pz-piece:active, #puzzle-mount:not([data-static]) .pz-piece:focus-visible {
      animation: none; filter: drop-shadow(0 0 12px rgba(224,158,74,0.55)) brightness(1.1); } }
  .pz-labels { position: relative; }
    .pz-row { position: absolute; left: 0; right: 0; transform: translateY(-50%); display: flex; align-items: center;
      gap: 18px; text-decoration: none; color: var(--linen); }
    .pz-lead { flex: 0 0 auto; width: clamp(22px,4vw,64px); height: 2px;
      background: linear-gradient(90deg,transparent,var(--c)); opacity: .5;
      transition: opacity .5s var(--ease-out), width .5s var(--ease-out); }
    .pz-txt { display: flex; flex-direction: column; align-items: flex-start; }
    .pz-ey { font-family: var(--font-body); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--bronze); line-height: 1.3; }
    .pz-ey-sub { display: inline-block; margin-left: 5px; font-style: italic; text-transform: none; letter-spacing: 0; color: var(--scapes-sandstone); opacity: .85; }
    .pz-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px,3.2vw,44px); line-height: 1; margin: 5px 0 0; letter-spacing: .01em; }
    .pz-line { font-family: var(--font-body); font-size: clamp(13px,1.35vw,15.5px); color: var(--mist); line-height: 1.5; margin: 8px 0 0; max-width: 72ch; text-wrap: pretty; }
    #puzzle-mount[data-active] .pz-row { opacity: .4; transition: opacity .5s var(--ease-out); }
    #puzzle-mount[data-active="elevate"] .pz-row--elevate,
    #puzzle-mount[data-active="compose"] .pz-row--compose,
    #puzzle-mount[data-active="root"] .pz-row--root { opacity: 1; }
    #puzzle-mount[data-active="elevate"] .pz-row--elevate .pz-lead,
    #puzzle-mount[data-active="compose"] .pz-row--compose .pz-lead,
    #puzzle-mount[data-active="root"] .pz-row--root .pz-lead { opacity: 1; width: clamp(40px,6vw,92px); }
    .pz-caption { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(17px,1.9vw,22px);
      color: var(--mist); line-height: 1.5; text-align: center; margin: clamp(20px,2.6vw,32px) auto 0; max-width: 640px; }
    .pz-caption b { color: var(--scapes-sandstone); font-style: normal; font-weight: 500; }
    @media (max-width: 1024px) {
      #puzzle-mount { grid-template-columns: 1fr; gap: 8px; }
      .pz-svg { max-width: 280px; margin: 0 auto; }
      .pz-labels { display: flex; flex-direction: column; gap: 24px; margin-top: 18px; }
      .pz-row { position: relative; transform: none; top: auto !important; }
      .pz-lead { display: none; }
    }

    /* ============================================================
       09 — THE DIRT CHURCH STUDIOS strip.
       A "hidden track" moment on the homepage. Dark void with the
       album cover floating, three ghost phrases sitting at 4%
       behind it, and an inline preview of Track I.
       ============================================================ */
    .hp-studio {
      position: relative;
      /* Fade both seams into the charcoal body instead of a hard ink band
         (Jason m0044) — charcoal → ink core → charcoal. */
      background: linear-gradient(to bottom,
        var(--charcoal) 0,
        var(--ink) clamp(70px, 9vw, 130px),
        var(--ink) calc(100% - clamp(70px, 9vw, 130px)),
        var(--charcoal) 100%);
      padding: clamp(40px, 5vw, 76px) clamp(24px, 4vw, 80px) clamp(84px, 11vw, 150px);
      overflow: hidden;
      isolation: isolate;
    }

    /* Ghost phrases backdrop. */
    .hp-studio__bg {
      position: absolute; inset: 0; z-index: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: space-between;
      padding: clamp(60px, 10vw, 140px) 0;
      pointer-events: none; user-select: none;
    }
    .hp-studio__ghost {
      font-family: var(--font-body); font-style: normal; font-weight: 300;
      font-size: clamp(56px, 12vw, 200px); line-height: 0.96;
      letter-spacing: -0.028em; color: var(--scapes-sandstone);
      opacity: 0.045;
      white-space: nowrap;
      text-align: center;
    }

    .hp-studio__inner {
      position: relative; z-index: 2;
      max-width: 920px; margin: 0 auto;
      display: flex; flex-direction: column; align-items: center;
      text-align: center;
    }
    .hp-studio__eyebrow {
      font-family: var(--font-body); font-size: 11px;
      letter-spacing: 0.36em; text-transform: uppercase;
      color: var(--scapes-sandstone); font-weight: 500;
      margin: 0;
      display: inline-flex; align-items: center; gap: 14px;
    }
    .hp-studio__eyebrow::before,
    .hp-studio__eyebrow::after {
      content: ""; display: inline-block;
      width: 28px; height: 1px; background: currentColor;
    }

    .hp-studio__cover {
      display: block; padding: 0;
      margin: clamp(36px, 4.4vw, 56px) auto 0;
      width: clamp(240px, 32vw, 420px);
      border: 1px solid rgba(235,227,210,0.10);
      box-shadow:
        0 30px 100px -20px rgba(0,0,0,0.9),
        0 0 100px -30px rgba(196,119,60,0.25);
      background: #0a0807;
      transition: transform 1400ms var(--ease-out), box-shadow 1400ms var(--ease-out);
    }
    .hp-studio__cover img {
      display: block; width: 100%; height: auto;
      aspect-ratio: 1 / 1;
    }
    .hp-studio__cover.is-playing {
      animation: hp-studio-pulse 4s var(--ease-out) infinite alternate;
    }
    @keyframes hp-studio-pulse {
      from { box-shadow: 0 30px 100px -20px rgba(0,0,0,0.9), 0 0 100px -30px rgba(196,119,60,0.25); transform: translateY(0); }
      to   { box-shadow: 0 30px 100px -20px rgba(0,0,0,0.9), 0 0 180px -20px rgba(196,119,60,0.60); transform: translateY(-2px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hp-studio__cover.is-playing { animation: none; }
    }

    .hp-studio__player {
      margin: clamp(32px, 4vw, 44px) 0 0;
      display: flex; align-items: center; gap: clamp(16px, 2vw, 22px);
    }
    .hp-studio__play {
      appearance: none; background: transparent;
      width: 56px; height: 56px;
      border-radius: 50%;
      border: 1px solid var(--scapes-sandstone);
      color: var(--scapes-sandstone);
      cursor: pointer; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: background 520ms var(--ease-out), color 520ms var(--ease-out);
    }
    .hp-studio__play:hover, .hp-studio__play:focus-visible {
      background: rgba(202,182,134,0.10);
      outline: none;
    }
    .hp-studio__play svg { width: 40%; height: 40%; }
    .hp-studio__pause-icon { display: none; }
    .hp-studio__play[aria-pressed="true"] {
      background: var(--scapes-sandstone); color: var(--ink);
    }
    .hp-studio__play[aria-pressed="true"] .hp-studio__play-icon  { display: none; }
    .hp-studio__play[aria-pressed="true"] .hp-studio__pause-icon { display: block; }
    .hp-studio__player-text { text-align: left; }
    .hp-studio__player-now {
      font-family: var(--font-body); font-size: 10px;
      letter-spacing: 0.36em; text-transform: uppercase;
      color: var(--mist); font-weight: 500;
      margin: 0;
    }
    .hp-studio__player-title {
      font-family: var(--font-body); font-style: normal; font-weight: 400;
      font-size: clamp(17px, 1.5vw, 21px); line-height: 1.3;
      color: var(--linen);
      margin: 6px 0 0; text-wrap: balance;
    }
    .hp-studio__player-title em { font-style: normal;  color: var(--scapes-sandstone); }

    .hp-studio__stream {
      margin: clamp(38px, 4.6vw, 54px) auto 0;
      padding-top: clamp(34px, 4vw, 46px);
      border-top: 1px solid var(--divider);
      max-width: 640px;
    }

    .hp-studio__caption {
      margin: clamp(40px, 5vw, 56px) 0 0;
      font-family: var(--font-body); font-size: 11px;
      letter-spacing: 0.32em; text-transform: uppercase;
      color: var(--mist); font-weight: 500;
    }
    .hp-studio__caption .key { color: var(--scapes-sandstone); }

    .hp-studio__cta {
      margin: clamp(20px, 2.4vw, 28px) 0 0;
      display: inline-flex; align-items: center; gap: 14px;
      font-family: var(--font-body); font-size: 12px;
      letter-spacing: 0.32em; text-transform: uppercase;
      color: var(--linen); font-weight: 500; text-decoration: none;
      transition: color 320ms var(--ease-out), gap 320ms var(--ease-out);
    }
    .hp-studio__cta:hover { color: var(--scapes-sandstone); gap: 22px; }
    .hp-studio__cta .arrow { transition: transform 520ms var(--ease-out); }

    /* Dirt Church block — the write-up + two real doors (Jason m0487).
       The old "Listen" disclosure was a dead-feeling double-ask; now one
       press plays the song, one press opens the Studios. */
    .stream__note { margin: 16px 0 0; max-width: 54ch; font-family: var(--font-body); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.74; color: var(--mist); text-wrap: pretty; }
    .stream__note em { color: var(--scapes-sandstone); font-style: italic; }
    .stream__doors { display: flex; flex-wrap: wrap; gap: 14px; margin: clamp(22px, 2.4vw, 30px) 0 0; }
    .stream__door { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; min-height: 52px; border-radius: 2px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; transition: background 320ms var(--ease-out), color 320ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
    .stream__door svg { width: 17px; height: 17px; flex: 0 0 auto; }
    .stream__door--play { background: var(--scapes-sandstone); color: var(--ink); box-shadow: 0 0 26px -8px rgba(202,182,134,0.55); }
    .stream__door--play:hover { background: var(--ember); color: var(--ink); box-shadow: 0 0 34px -4px rgba(196,119,60,0.7); }
    .stream__door--room { color: var(--linen); border-color: rgba(202,182,134,0.34); }
    .stream__door--room:hover { color: var(--scapes-sandstone); border-color: var(--scapes-sandstone); background: rgba(202,182,134,0.07); }
    .stream__also { margin: 16px 0 0; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); }
    .stream__also a { color: var(--stone); text-decoration: none; border-bottom: 1px solid rgba(156,148,138,0.35); }
    .stream__also a:hover { color: var(--scapes-sandstone); border-bottom-color: var(--scapes-sandstone); }

    .hp-studio__progress {
      position: absolute; left: 0; right: 0; bottom: 0;
      height: 1px;
      background: var(--divider);
      z-index: 3;
      overflow: hidden;
    }
    .hp-studio__progress::after {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0;
      width: var(--p, 0%);
      background: linear-gradient(90deg, rgba(196,119,60,0) 0%, var(--scapes-sandstone) 80%, var(--linen) 100%);
      transition: width 220ms linear;
      box-shadow: 0 0 12px rgba(202,182,134,0.65);
    }

    /* Visually-hidden helper — keeps an h2 in the DOM for screen
       readers without rendering it (the cover image carries the wordmark). */
    .vh {
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
      border: 0;
    }



    /* ============================================================
       THE WELCOME — a press-to-play invitation, centered in the
       hero. The visitor starts it; while it plays the ambient bed
       steps aside so the two never overlap.
       ============================================================ */
    .welcome-cta {
      position: relative; z-index: 2;
      margin-top: clamp(30px, 3.6vw, 44px);
      display: inline-flex; align-items: center; gap: 15px;
      padding: 9px 24px 9px 9px;
      background: rgba(10, 8, 7, 0.46);
      backdrop-filter: blur(12px) saturate(135%);
      -webkit-backdrop-filter: blur(12px) saturate(135%);
      border: 1px solid rgba(228, 221, 206, 0.30);
      border-radius: 999px;
      box-shadow: 0 18px 50px -22px rgba(0,0,0,0.7);
      transition: border-color 360ms var(--ease-out), box-shadow 520ms var(--ease-out), transform 360ms var(--ease-out);
    }
    .welcome-cta:hover, .welcome-cta:focus-within {
      border-color: var(--scapes-sandstone);
      transform: translateY(-1px);
      box-shadow: 0 18px 50px -22px rgba(0,0,0,0.7), 0 0 38px -10px rgba(196,119,60,0.45);
    }
    .welcome-cta__btn {
      pointer-events: auto;
      position: relative; flex: 0 0 auto;
      width: 52px; height: 52px;
      border-radius: 50%;
      border: 1px solid rgba(228, 221, 206, 0.55);
      background: rgba(10, 8, 7, 0.30);
      color: var(--linen);
      display: grid; place-items: center;
      cursor: pointer; appearance: none;
      transition: border-color 360ms var(--ease-out), color 360ms var(--ease-out);
    }
    .welcome-cta:hover .welcome-cta__btn { border-color: var(--scapes-sandstone); color: var(--scapes-sandstone); }
    .welcome-cta__btn:focus-visible { outline: 2px solid var(--scapes-sandstone); outline-offset: 3px; }
    .welcome-cta__btn svg { width: 16px; height: 16px; display: block; margin-left: 2px; grid-area: 1 / 1; }
    .welcome-cta__btn .welcome-cta__pause { display: none; margin-left: 0 !important; }
    .welcome-cta[data-state="playing"] .welcome-cta__btn .welcome-cta__play { display: none; }
    .welcome-cta[data-state="playing"] .welcome-cta__btn .welcome-cta__pause { display: block; }
    .welcome-cta[data-state="playing"] .welcome-cta__btn { border-color: var(--scapes-sandstone); color: var(--scapes-sandstone); }
    .welcome-cta__btn::before {
      content: ""; position: absolute; inset: -5px; border-radius: 50%;
      background: conic-gradient(var(--scapes-sandstone) calc(var(--p, 0) * 1%), transparent 0);
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
              mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
      opacity: 0; transition: opacity 360ms var(--ease-out);
    }
    .welcome-cta[data-state="playing"] .welcome-cta__btn::before { opacity: 1; }
    .welcome-cta__text { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; text-align: left; }
    .welcome-cta__label {
      font-family: var(--font-body); font-weight: 600;
      font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--linen);
    }
    .welcome-cta__sub {
      font-family: var(--font-body); font-size: 12px; font-weight: 300;
      letter-spacing: 0.01em; color: var(--mist);
    }
    .welcome-cta__sub b { color: var(--scapes-sandstone); font-weight: 500; font-variant-numeric: tabular-nums; }
    @media (prefers-reduced-motion: reduce) {
      .welcome-cta, .welcome-cta__btn, .welcome-cta__btn::before { transition: none; }
    }
    /* WORK TODAY — a deliberately obvious pill in the nav. Olive-green so it
       reads instantly as a DIFFERENT action from the sandstone "Begin" (clients):
       this one is the field/jobs door. Straight to work-today.html. */
    .site-nav__work {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--scapes-olive); color: var(--paper);      padding: 10px 18px; border-radius: var(--radius-md);
      font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
      border: 1px solid var(--scapes-olive-soft);
      transition: background 320ms var(--ease-out), transform 320ms var(--ease-out);
    }
    .site-nav__work:hover, .site-nav__work:focus-visible {
      background: var(--scapes-olive-soft); color: var(--paper); transform: translateY(-1px);
    }
    .site-nav__work .arrow { transition: transform 320ms var(--ease-out); }
    .site-nav__work:hover .arrow { transform: translateX(3px); }
    @media (max-width: 1100px) {
      .site-nav__work { margin: 16px 0 0; padding: 12px 22px; width: auto; }
    }

    /* ---- HOMEPAGE-ONLY nav reveal (Jason m0080) ----
       The landing holds with no nav. The nav fades + slides down the instant
       the customer starts to scroll (site.js sets .is-scrolled at >40px).
       Pointer-events off while hidden so it can't intercept the held hero. */
    .site-nav--reveal {
      opacity: 0;
      transform: translateY(-12px);
      pointer-events: none;
      transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
    }
    .site-nav--reveal.is-scrolled {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    /* Keep the menu reachable once open on small screens even before scroll. */
    .site-nav--reveal.is-open { opacity: 1; transform: none; pointer-events: auto; }
    @media (prefers-reduced-motion: reduce) {
      .site-nav--reveal { transition: opacity 200ms linear; transform: none; }
    }
  


    /* The single plays HERE (Jason m0410) — sending someone to Spotify this early
       in the journey hands them off before they have met us. Spotify stays as a
       quiet link below, for people who want to keep it. */
    .stream__door--play { cursor: pointer; font: inherit; }
    .stream__door--play .dc-ico { width: 16px; height: 16px; display: block; grid-area: 1 / 1; }
    .stream__door--play .dc-ico--pause { display: none; }
    .stream__door--play[data-state="playing"] .dc-ico--play { display: none; }
    .stream__door--play[data-state="playing"] .dc-ico--pause { display: block; }
  


    /* The music link — a quiet invitation into The Dirt Church Studios,
       sitting under the Premise headline. A link, not a player: the
       welcome narration and ambient bed are the only audio up here. */
    .premise-music { display: inline-flex; flex-direction: column; gap: 6px;
      margin-top: clamp(34px, 4vw, 54px); text-decoration: none; }
    .premise-music__eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 600;
      letter-spacing: 0.28em; text-transform: uppercase; color: var(--scapes-sandstone); }
    .premise-music__title { display: inline-flex; align-items: baseline; gap: 11px;
      font-family: var(--font-display); font-style: italic; font-weight: 400;
      font-size: clamp(21px, 1.8vw, 26px); color: var(--linen);
      transition: color 360ms var(--ease-out); }
    .premise-music:hover .premise-music__title,
    .premise-music:focus-visible .premise-music__title { color: var(--scapes-sandstone); }
    .premise-music:focus-visible { outline: 2px solid var(--scapes-sandstone); outline-offset: 4px; border-radius: 3px; }
    .premise-music__arrow { font-style: normal; transition: transform 360ms var(--ease-out); }
    .premise-music:hover .premise-music__arrow { transform: translateX(4px); }
    @media (prefers-reduced-motion: reduce) { .premise-music__title, .premise-music__arrow { transition: none; } }
  
@media (max-width: 700px){
  .hp-studio__player-now {
    font-size: 12px /*mbump*/;
    letter-spacing: 0.16em;
  }
}