/* ==========================================================
   Live Oak Talent Partners - shared stylesheet
   Mobile-first. Brand variables below are the only source
   of color and type decisions across the site.
   ========================================================== */

:root {
  --color-dark-green: #305234;
  --color-medium-green: #66973B;
  --color-amber: #BD6E18;
  --color-cream: #FEFAEA;
  --color-white: #FFFFFF;
  --color-black: #111111;

  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Lato', sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --space-5: 7rem;

  --measure: 38rem;       /* max width for body text */
  --measure-read: 44rem;  /* max width for long-form reading (privacy) */
  --container: 72rem;     /* max width for page content */
}

/* ---------- Reset & base ---------- */

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

html {
  scroll-behavior: smooth;
  /* Offsets in-page anchor jumps so a target heading lands below the
     fixed, condensed site-header (~46px) with a comfortable buffer of
     whitespace above it. Stays within each heading's 2.75rem top
     margin, so no prior section text peeks in. */
  scroll-padding-top: 4.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-black);
  background: var(--color-cream);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-amber);
  outline-offset: 3px;
}

/* ---------- Type ---------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.5rem, 8vw, 4.75rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 700;
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-medium-green);
  margin-bottom: var(--space-2);
}

.lede {
  font-size: 1.1875rem;
  max-width: var(--measure);
}

/* ---------- Layout helpers ---------- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.section {
  padding: var(--space-4) 0;
}

@media (min-width: 48rem) {
  .section {
    padding: var(--space-5) 0;
  }
}

/* Home: cream sections match the journey beat's tighter rhythm */
.positioning,
.pathways {
  padding-top: 4.25rem;
  padding-bottom: 4.25rem;
}

/* How We Work process section matches the same tighter rhythm */
.process {
  padding-top: 4.25rem;
  padding-bottom: 4.25rem;
}

/* ---------- Buttons ---------- */

.button {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.875rem 1.75rem;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease,
    transform 0.15s ease, box-shadow 0.15s ease;
}

.button-solid {
  background: var(--color-amber);
  color: var(--color-white);
}

.button-outline {
  border-color: currentColor;
  color: inherit;
}

/* ---------- Header & nav ---------- */

.site-header {
  background: var(--color-dark-green);
  color: var(--color-cream);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(17, 17, 17, 0.12);
  transition: box-shadow 0.25s ease;
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  transition: padding 0.2s ease;
}

.site-header.scrolled {
  box-shadow: 0 2px 12px rgba(17, 17, 17, 0.25);
}

.site-header.scrolled .container {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.wordmark img {
  display: block;
  height: 44px;
  width: auto;
  transition: height 0.2s ease;
}

.site-header.scrolled .wordmark img {
  height: 34px;
}

/* Logo: white SVG, sized via .wordmark img above */
.wordmark {
  display: block;
  position: relative;
}

/* Hover affordance: an amber tick wipes in beneath the logo
   (echoing the eyebrow tick used site-wide) while the mark
   lifts a touch. Pointer devices only; reduced-motion users
   get neither. */
@media (hover: hover) {
  .wordmark::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 3px;
    width: 100%;
    background: var(--color-amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .wordmark img {
    transition: height 0.2s ease, transform 0.25s ease;
  }

  .wordmark:hover::after {
    transform: scaleX(1);
  }

  .wordmark:hover img {
    transform: translateY(-1px);
  }
}

.site-nav > ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.site-nav a {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--color-amber);
}

/* Menu LinkedIn link: injected into the mobile panel, shown only there. */
.nav-connect { display: none; }

/* ---------- Who We Are dropdown ---------- */

.has-dropdown { position: relative; }

.dropdown-head { display: inline-flex; align-items: center; gap: 0.3rem; }

.dropdown-toggle {
  background: none;
  border: 0;
  margin: 0;
  padding: 0.35rem 0.2rem;
  cursor: pointer;
  color: var(--color-cream);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.dropdown-toggle .caret {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.has-dropdown.is-open .dropdown-toggle .caret {
  transform: translateY(1px) rotate(-135deg);
}

.dropdown {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  min-width: 12rem;
  background: var(--color-dark-green);
  border: 1px solid rgba(254, 250, 234, 0.16);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.35);
  display: none;
  z-index: 11;
}

.dropdown li { margin: 0; }

.dropdown a {
  display: block;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-cream);
  text-decoration: none;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 6px;
}

.dropdown a[aria-current="page"] {
  border-bottom-color: transparent;
  border-left-color: var(--color-amber);
}

.has-dropdown.is-open > .dropdown { display: block; }

@media (hover: hover) {
  .has-dropdown:hover > .dropdown,
  .has-dropdown:focus-within > .dropdown { display: block; }

  .dropdown a:hover {
    border-left-color: var(--color-amber);
    border-bottom-color: transparent;
    background: rgba(254, 250, 234, 0.05);
  }
}

/* Invisible bridge across the gap so the panel stays open while the
   cursor travels from the trigger down into it. Desktop width only
   so it never intercepts taps in the mobile (static) layout. */
@media (min-width: 48rem) {
  .dropdown::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -0.65rem;
    height: 0.65rem;
  }
}

/* ---------- Mobile menu: hamburger + full-page panel ---------- */

.nav-toggle {
  display: none;
}

@media (max-width: 47.9375rem) {
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 12;
  }

  .nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-cream);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  /* Bars become an X when open */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 11;
    background:
      url('assets/grain.svg'),
      radial-gradient(60rem 50rem at 100% -5%, rgba(66, 104, 70, 0.5), transparent 60%),
      radial-gradient(80rem 70rem at 0% 115%, rgba(20, 38, 24, 0.85), transparent 65%),
      var(--color-dark-green);
    padding: 7rem var(--space-3) var(--space-3);
    clip-path: circle(0 at calc(100% - 2.75rem) 2.25rem);
    visibility: hidden;
    transition: clip-path 0.4s ease-in, visibility 0.4s ease-in;
  }

  .site-nav.open {
    clip-path: circle(150% at calc(100% - 2.75rem) 2.25rem);
    visibility: visible;
    transition: clip-path 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0.7s;
  }

  .site-nav > ul {
    flex-direction: column;
    gap: var(--space-3);
  }

  .site-nav > ul > li {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .site-nav.open > ul > li {
    opacity: 1;
    transform: none;
  }

  .site-nav.open > ul > li:nth-child(1) { transition-delay: 0.3s; }
  .site-nav.open > ul > li:nth-child(2) { transition-delay: 0.37s; }
  .site-nav.open > ul > li:nth-child(3) { transition-delay: 0.44s; }
  .site-nav.open > ul > li:nth-child(4) { transition-delay: 0.51s; }
  .site-nav.open > ul > li:nth-child(5) { transition-delay: 0.58s; }

  .site-nav a {
    font-size: 1.75rem;
    font-weight: 700;
  }

  /* Primary action stands apart */
  .site-nav > ul > li:last-child > a {
    color: var(--color-amber);
  }

  /* Who We Are submenu: indented under its parent, on the amber seam */
  .has-dropdown { position: static; }
  .dropdown-head { display: flex; align-items: center; gap: 0.6rem; }
  .dropdown {
    position: static;
    display: none;
    margin: 1rem 0 0;
    padding: 0 0 0 1rem;
    border: none;
    border-left: 2px solid rgba(189, 110, 24, 0.6);
    border-radius: 0;
    box-shadow: none;
    background: none;
    min-width: 0;
    flex-direction: column;
    gap: 1rem;
  }
  .has-dropdown.is-open > .dropdown { display: flex; }
  .dropdown a {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(254, 250, 234, 0.92);
    padding: 0;
    border: none;
  }
  .dropdown-toggle .caret {
    width: 0.62rem;
    height: 0.62rem;
    border-color: var(--color-amber);
    border-width: 3px;
  }

  /* LinkedIn link anchoring the bottom of the menu, below the list.
     Cream glyph + word at a matched secondary size. Reveals just after the
     last list item in the bloom stagger. Selector outranks .site-nav a so
     the word takes this size, not the big nav size. */
  .site-nav .nav-connect {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
    padding: 0;
    color: var(--color-cream);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    text-decoration: none;
    border-bottom: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .site-nav.open .nav-connect {
    opacity: 1;
    transform: none;
    transition-delay: 0.65s;
  }
  .site-nav .nav-connect svg { width: 1.3rem; height: 1.3rem; flex: none; }

  body.nav-open {
    overflow: hidden;
  }

  /* Logo stays visible above the open panel */
  .wordmark {
    position: relative;
    z-index: 12;
  }
}

/* ---------- Hero ---------- */

.hero {
  background:
    url('assets/grain.svg'),
    radial-gradient(90rem 55rem at 22% 25%, rgba(66, 104, 70, 0.9), transparent 62%),
    radial-gradient(110rem 90rem at 100% 115%, rgba(20, 38, 24, 0.85), transparent 65%),
    var(--color-dark-green);
  color: var(--color-cream);
  padding: 9rem 0 var(--space-5);
}

@media (min-width: 48rem) {
  .hero {
    padding: 11rem 0 9rem;
  }
}

.hero .eyebrow {
  color: var(--color-cream);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero .eyebrow::before {
  content: '';
  width: 2.1rem;
  height: 3px;
  background: var(--color-amber);
  flex: none;
}

.hero h1 {
  max-width: 16ch;
  margin-bottom: var(--space-3);
}

.hero h1 .accent {
  color: var(--color-amber);
}

.hero .lede {
  color: var(--color-cream);
  opacity: 0.9;
  margin-bottom: var(--space-3);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* Hero entrance: each element rises in sequence on load */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero .eyebrow,
.hero h1,
.hero .lede,
.hero-actions {
  animation: rise-in 0.7s ease-out both;
}

.hero h1 { animation-delay: 0.12s; }
.hero .lede { animation-delay: 0.28s; }
.hero-actions { animation-delay: 0.44s; }

/* Hero action buttons: rounded to match the CTA, with a gentle
   lift on hover (a calmer version of the CTA's rise, so the
   closing CTA stays the boldest beat on the page). Same stationary
   frame as the CTA: the <a> holds still as the hit target while a
   backing panel (::before) carries the fill/border and the rise, so
   the move-only hover cannot re-trigger at the edge. Amber is held on
   the primary panel; the outline lifts with a faint cream wash and a
   cream border, keeping its cream text. No arrow here, that gesture is
   reserved for the closing CTA. */
.hero-actions .button {
  position: relative;
  isolation: isolate;
  border-radius: 6px;
}

.hero-actions .button::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  z-index: -1;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}

.hero-actions .button-solid {
  background: transparent;
}

.hero-actions .button-solid::before {
  background: var(--color-amber);
}

.hero-actions .button-outline {
  border-color: transparent;
}

.hero-actions .button-outline::before {
  border: 2px solid currentColor;
  background: transparent;
}

.hero-actions .button .button-label {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) {
  .hero-actions .button-solid:hover::before {
    background: var(--color-amber);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 18px 30px -12px rgba(17, 17, 17, 0.6);
  }

  .hero-actions .button-outline:hover::before {
    transform: translateY(-4px) scale(1.02);
    background: rgba(254, 250, 234, 0.16);
    border-color: var(--color-cream);
    box-shadow: 0 16px 28px -14px rgba(17, 17, 17, 0.5);
  }

  .hero-actions .button:hover .button-label {
    transform: translateY(-4px) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-actions .button::before,
  .hero-actions .button .button-label {
    transition: none;
  }
}


/* ---------- Positioning / signature ---------- */

.positioning h2 {
  max-width: 18ch;
  margin-bottom: var(--space-3);
}

.not-list {
  list-style: none;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--color-dark-green);
}

.not-list li {
  position: relative;
  width: fit-content;
  margin-bottom: var(--space-1);
}

/* The strike is a drawn dark-green bar, animated by the reveal.
   Kept quiet (not amber) so amber lands only on the resolve line. */
.not-list .struck {
  opacity: 0.55;
}

.not-list .struck::after {
  content: '';
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 52%;
  height: 0.14em;
  background: var(--color-dark-green);
  transform: scaleX(1);
  transform-origin: left center;
}

.not-list .resolve {
  color: var(--color-amber);
  font-size: 1.12em;
  margin-top: calc(var(--space-2) + 0.35rem);
  letter-spacing: 0.005em;
}

.positioning .closer {
  max-width: var(--measure);
  margin-top: 2.25rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.55;
  color: #2a2a2a;
}

.positioning .closer .trip {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-dark-green);
}

.text-link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-dark-green);
  text-decoration: none;
  border-bottom: 2px solid var(--color-amber);
  margin-top: var(--space-3);
}

.text-link:hover {
  color: var(--color-amber);
}

/* ---------- Home: Where We Work photo gateways ---------- */

.pathways h2 .accent { color: var(--color-amber); }

.ww-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: var(--space-3);
}

@media (min-width: 48rem) {
  .ww-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.ww-door {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 22rem;
  padding: 1.8rem;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-cream);
  box-shadow: 0 12px 30px rgba(20, 38, 24, 0.18);
  transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}

.ww-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.ww-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 38, 24, 0.2), rgba(20, 38, 24, 0.85) 80%);
}

.ww-door--roles .ww-media { background-image: url('assets/roles-sales.jpg'); }
.ww-door--industries .ww-media { background-image: url('assets/liveoak.jpg'); }

.ww-body {
  position: relative;
  z-index: 2;
}

.pathways .ww-door h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  color: var(--color-cream);
  margin: 0 0 0.6rem;
}

.ww-sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(254, 250, 234, 0.82);
  margin: 0 0 1.1rem;
  max-width: 40ch;
}

.ww-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-cream);
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}

.ww-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--color-amber);
  transform-origin: left center;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ww-media { transition: transform 0.5s ease; }
  .ww-link::after { transform: scaleX(0); transition: transform 0.3s ease; }
  .ww-grid:hover .ww-door:not(:hover) { opacity: 0.5; }
  .ww-door:hover { box-shadow: 0 18px 40px rgba(20, 38, 24, 0.28); }
  .ww-door:hover .ww-media { transform: scale(1.05); }
  .ww-door:hover .ww-link::after { transform: scaleX(1); }
}

/* ---------- Home body-section eyebrow ticks ---------- */

.positioning .eyebrow,
.pathways .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.positioning .eyebrow::before,
.pathways .eyebrow::before {
  content: '';
  width: 2.1rem;
  height: 3px;
  background: var(--color-amber);
  flex: none;
}

/* ---------- Home: stages / lifecycle journey (dark beat) ---------- */

.stages {
  position: relative;
  z-index: 1;
  background:
    url('assets/grain.svg'),
    radial-gradient(80rem 50rem at 50% -20%, rgba(66, 104, 70, 0.7), transparent 60%),
    radial-gradient(100rem 80rem at 100% 130%, rgba(20, 38, 24, 0.8), transparent 65%),
    var(--color-dark-green);
  color: var(--color-cream);
}

@media (min-width: 48rem) {
  .section.stages {
    padding-top: 4.25rem;
    padding-bottom: 0;
  }
}

.stages .eyebrow {
  color: var(--color-cream);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stages .eyebrow::before {
  content: '';
  width: 2.1rem;
  height: 3px;
  background: var(--color-amber);
  flex: none;
}

.stages h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
  color: var(--color-cream);
  margin-bottom: var(--space-2);
}

.stages h2 .accent {
  color: var(--color-amber);
}

.stages h2 .hl {
  display: block;
}

.stages-sub {
  font-size: 1.18rem;
  line-height: 1.55;
  color: rgba(254, 250, 234, 0.8);
  max-width: 40rem;
  margin-bottom: var(--space-3);
}

.stages-close {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  line-height: 1.32;
  color: var(--color-cream);
  max-width: 42rem;
  margin: var(--space-3) auto 0;
  text-align: center;
}

.stages-close::before {
  content: '';
  display: block;
  width: 2.6rem;
  height: 3px;
  background: var(--color-amber);
  margin: 0 auto 1.6rem;
}

.journey {
  position: relative;
}

.j-rail {
  display: none;
}

.j-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.j-card {
  position: relative;
  overflow: hidden;
  border-radius: 13px;
  padding: 1.6rem 1.4rem;
  background: linear-gradient(165deg, rgba(36, 60, 40, 0.6), rgba(13, 26, 17, 0.72));
  border: 1px solid rgba(254, 250, 234, 0.14);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(254, 250, 234, 0.05);
}

.j-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-amber);
  transform: scaleX(0);
  transform-origin: left;
}

.j-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  color: rgba(254, 250, 234, 0.2);
  margin-bottom: 0.7rem;
}

.j-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.18;
  color: var(--color-cream);
  margin-bottom: 0.55rem;
}

.j-card p {
  font-size: 0.98rem;
  line-height: 1.5;
  color: rgba(254, 250, 234, 0.84);
}

/* Phones: scroll-driven focus. The card nearest the viewport center
   reads active (amber top bar + amber numeral); the rest sit back.
   Driven by the mobile journey controller in script.js, which only
   runs on portrait phones with motion enabled, so reduced-motion and
   no-JS users keep every card at full strength. */
@media (max-width: 33.9375rem) and (prefers-reduced-motion: no-preference) {
  .j-card {
    transition: opacity 0.4s ease, border-color 0.4s ease;
  }

  .j-card::before {
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .j-num {
    transition: color 0.3s ease;
  }

  .journey.lit .j-card:not(.is-active) {
    opacity: 0.46;
  }

  .j-card.is-active {
    border-color: rgba(189, 110, 24, 0.5);
  }

  .j-card.is-active::before {
    transform: scaleX(1);
  }

  .j-card.is-active .j-num {
    color: var(--color-amber);
  }
}

@media (min-width: 34rem) {
  .j-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 52rem) {
  .journey {
    margin-top: var(--space-1);
  }

  .j-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    height: 2.6rem;
    margin-bottom: 0.2rem;
  }

  .j-line,
  .j-fill {
    position: absolute;
    top: 6px;
    height: 2px;
    border-radius: 2px;
    pointer-events: none;
  }

  .j-line {
    left: 12.5%;
    right: 12.5%;
    background: rgba(254, 250, 234, 0.18);
  }

  .j-fill {
    left: 12.5%;
    width: 0;
    background: var(--color-amber);
  }

  .j-fill::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-amber);
    transform: translateY(-50%);
    box-shadow: 0 0 0 4px rgba(189, 110, 24, 0.25), 0 0 14px 2px rgba(189, 110, 24, 0.5);
    opacity: 0;
  }

  .journey.lit .j-fill::after {
    opacity: 1;
  }

  .j-mark {
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .j-node {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-dark-green);
    border: 2px solid rgba(254, 250, 234, 0.5);
    box-shadow: 0 0 0 4px var(--color-dark-green);
    position: relative;
    z-index: 2;
  }

  .j-conn {
    width: 2px;
    flex: 1;
    background: rgba(254, 250, 234, 0.14);
    margin-top: 2px;
  }

  .j-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
  }

  .j-card {
    padding: 2rem 1.6rem 1.6rem;
    min-height: 12rem;
    display: flex;
    flex-direction: column;
  }

  .j-num {
    font-size: 2rem;
    margin-bottom: 0.7rem;
  }
}

@media (min-width: 52rem) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .j-fill {
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .j-card {
    transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease, opacity 0.32s ease;
  }

  .j-card::before {
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .j-num {
    transition: color 0.25s ease;
  }

  .j-node {
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }

  .j-conn {
    transition: background 0.25s ease;
  }

  .j-cards:hover .j-card:not(.is-active) {
    opacity: 0.45;
  }

  .j-card.is-active {
    transform: translateY(-7px);
    border-color: rgba(189, 110, 24, 0.55);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(189, 110, 24, 0.25), inset 0 1px 0 rgba(254, 250, 234, 0.08);
  }

  .j-card.is-active::before {
    transform: scaleX(1);
  }

  .j-card.is-active .j-num {
    color: var(--color-amber);
  }

  .j-mark.is-active .j-node {
    background: var(--color-amber);
    transform: scale(1.3);
    box-shadow: 0 0 0 4px var(--color-dark-green), 0 0 14px 2px rgba(189, 110, 24, 0.55);
  }

  .j-mark.is-active .j-conn {
    background: rgba(189, 110, 24, 0.5);
  }
}

/* ---------- Journey resolution: the founders ---------- */
/* Full-bleed settle band closing the dark journey beat. The two
   founders are the constant the headline promised ("Same standard").
   Color cutouts on the dark material, soft-faded into it, small.
   No amber here: the resolution holds the amber budget at zero. */

.section.stages {
  padding-bottom: 0;
}

.j-resolve {
  position: relative;
  margin-top: 2.8rem;
  padding: 2.9rem var(--space-3) 4.25rem;
  text-align: center;
  box-shadow: inset 0 24px 30px -26px rgba(0, 0, 0, 0.65);
}

.j-resolve::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(80rem 40rem at 50% 130%, rgba(8, 16, 10, 0.66), transparent 70%);
}

.jf-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
}

.jf-lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.9vw, 1.32rem);
  line-height: 1.3;
  color: var(--color-cream);
  margin-bottom: var(--space-3);
}

/* Lens framing on the home founders beat: signature headline, and the
   becoming line as a subline above the founders. */
.jf-head {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1;
  font-size: clamp(1.8rem, 4vw, 2.85rem); color: var(--color-cream);
  margin: 0 auto 0.95rem; max-width: 20ch;
}
.jf-head .accent { display: inline-block; position: relative; color: var(--color-amber); }
.jf-head .accent::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--color-amber);
}
/* Home lens headline: the amber underline under "industry" draws in on
   scroll to match the Who We Are resolve. Added by JS via .is-revealing, so
   reduced-motion and no-JS keep the underline already drawn (the base rule
   above is the static fallback). Underline only; the headline itself does
   not fade, it leads this beat. */
@media (prefers-reduced-motion: no-preference) {
  .jf-head.is-revealing .accent::after {
    transform: scaleX(0); transform-origin: left; transition: transform 0.55s ease;
  }
  .jf-head.is-revealing.in .accent::after { transform: scaleX(1); transition-delay: 0.15s; }
}
.j-resolve .jf-lead {
  color: rgba(254, 250, 234, 0.82);
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  font-weight: 700;
  margin-bottom: 2.4rem;
}

.jf-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: var(--space-3);
}

.jf-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.jf-photo {
  display: block;
}

.jf-noah .jf-photo {
  position: relative;
  top: 2px;
}

/* Phones (stacked pair): nudge Noah's cutout right so his face shares
   the centerline with Andrew's. His head sits ~10px left of center in
   the source PNG; Andrew's is centered. Desktop row layout untouched. */
@media (max-width: 47.9375rem) {
  .jf-noah .jf-photo {
    left: 10px;
  }
}

.jf-photo img {
  display: block;
  height: 210px;
  width: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
}

.jf-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--color-cream);
  margin-top: 0.9rem;
}

.jf-role {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(254, 250, 234, 0.6);
  margin-top: 0.3rem;
}

.jf-foot {
  margin-top: var(--space-1);
}

.jf-link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.875rem 1.75rem;
  border-radius: 6px;
  border: 1px solid rgba(254, 250, 234, 0.55);
  background: rgba(254, 250, 234, 0.05);
  color: var(--color-cream);
}

@media (min-width: 48rem) {
  .jf-pair {
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(2rem, 7vw, 5rem);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .jf-photo img {
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.3s ease;
  }

  .jf-person:hover .jf-photo img {
    transform: translateY(-8px);
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.45));
  }

  .jf-link {
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.22s ease, border-color 0.22s ease;
  }

  .jf-link:hover {
    transform: translateY(-4px);
    background: rgba(254, 250, 234, 0.13);
    border-color: var(--color-cream);
  }
}

/* ---------- CTA band ---------- */

.cta-band {
  position: relative;
  z-index: 1;
  background:
    url('assets/grain.svg'),
    radial-gradient(80rem 50rem at 50% -20%, rgba(66, 104, 70, 0.7), transparent 60%),
    radial-gradient(100rem 80rem at 100% 130%, rgba(20, 38, 24, 0.8), transparent 65%),
    var(--color-dark-green);
  color: var(--color-cream);
  text-align: center;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.cta-band h2 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.0;
  max-width: 18ch;
  margin: 0 auto var(--space-3);
}

.cta-band h2 .accent {
  color: var(--color-amber);
}

.cta-band p {
  max-width: var(--measure);
  margin: 0 auto var(--space-4);
  font-size: 1.125rem;
  font-weight: 700;
  text-wrap: balance;
}

/* The closing button runs larger here and reacts with a
   confident rise: on hover it lifts, grows slightly, deepens
   its shadow, and the arrow steps forward. No fill or color
   change, so it stays amber on both the dark and light bands.
   The amber is held explicitly on hover to override the base
   .button-solid:hover, which otherwise flips it to dark green. */
/* The closing button keeps the cursor's hit target perfectly still:
   the <a> frame does not move, while a backing panel (::before) carries
   the amber fill and the rise, and the label and arrow rise with it.
   Because the frame never shifts out from under the pointer, the move-only
   hover cannot re-trigger at the button's edge. The amber is held on the
   panel so it stays amber on both the dark and light bands. */
.cta-band .button-solid {
  position: relative;
  isolation: isolate;
  background: transparent;
  font-size: 1.0625rem;
  padding: 1.125rem 2.25rem;
  border-radius: 6px;
}

.cta-band .button-solid::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  z-index: -1;
  background: var(--color-amber);
  box-shadow: 0 6px 16px -8px rgba(17, 17, 17, 0.5);
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.25s ease;
}

.cta-band .button-solid .button-label,
.cta-band .button-solid::after {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cta-band .button-solid::after {
  content: '\2192';
  margin-left: 0.6rem;
}

@media (hover: hover) {
  .cta-band .button-solid:hover::before {
    transform: translateY(-6px) scale(1.035);
    box-shadow: 0 28px 46px -12px rgba(17, 17, 17, 0.65);
  }

  .cta-band .button-solid:hover .button-label {
    transform: translateY(-6px) scale(1.035);
  }

  .cta-band .button-solid:hover::after {
    transform: translateY(-6px) scale(1.035) translateX(0.78rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-band .button-solid::before,
  .cta-band .button-solid .button-label,
  .cta-band .button-solid::after {
    transition: none;
  }
}

/* Light CTA variant: for pages that end on a light section
   (How We Work ends on the cream strategy map), so the close
   flows from cream rather than thudding into a dark slab. Same
   bones, opposite skin: cream ground, dark-green type, amber
   accent and button unchanged. */
.cta-band-light {
  background:
    url('assets/grain.svg'),
    radial-gradient(80rem 50rem at 50% -20%, rgba(102, 151, 59, 0.12), transparent 60%),
    var(--color-cream);
  color: var(--color-dark-green);
}

.cta-band-light h2 {
  color: var(--color-dark-green);
}

.cta-band-light p {
  color: var(--color-dark-green);
}

/* ---------- Footer ---------- */
/* ---------- Footer (structured, dark-surface material) ----------
   A real footer: brand block + three labeled link columns + a legal
   bar. Near-black green-tinted surface with grain so it reads as its
   own surface and never merges with the dark-green CTA band above it.
   Reuses the amber-tick label and amber-hover devices. */

.site-footer {
  position: relative;
  color: var(--color-cream);
  background:
    url('assets/grain.svg'),
    radial-gradient(70rem 40rem at 12% -30%, rgba(48, 82, 52, 0.55), transparent 60%),
    radial-gradient(90rem 70rem at 100% 130%, rgba(20, 38, 24, 0.6), transparent 65%),
    var(--color-black);
  border-top: 1px solid rgba(254, 250, 234, 0.12);
  font-size: 0.875rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  row-gap: 2.25rem;
  padding: 3rem 0 2rem;
}

/* Phones: brand spans the full width above the link groups, which then
   sit two-up. With the Connect cell present the four groups read as a
   tidy 2x2 (The Firm / What We Do, then Get Started / Connect). */
.footer-brand {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {
  .footer-top {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    column-gap: 2rem;
    row-gap: 2.5rem;
    padding: 4.5rem 0 2.5rem;
  }

  .footer-brand {
    grid-column: auto;
  }

  /* Desktop keeps the brand + three columns row; the Connect cell is a
     phone-only stand-in for the legal-bar LinkedIn link. */
  .footer-connect {
    display: none;
  }
}

.footer-brand img {
  display: block;
  height: 48px;
  width: auto;
  margin-bottom: 1.2rem;
}

.footer-tag {
  max-width: 24ch;
  color: rgba(254, 250, 234, 0.82);
  line-height: 1.5;
  margin: 0;
}

.footer-li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-li svg {
  flex: none;
}

.footer-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(254, 250, 234, 0.6);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.footer-h::before {
  content: '';
  width: 1.5rem;
  height: 3px;
  background: var(--color-amber);
  flex: none;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin: 0 0 0.7rem;
  font-size: 0.98rem;
}

.site-footer a {
  color: var(--color-cream);
  text-decoration: none;
}

@media (hover: hover) {
  .site-footer a:hover {
    color: var(--color-amber);
  }
}

.footer-bar {
  border-top: 1px solid rgba(254, 250, 234, 0.12);
  padding: 1.4rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  color: rgba(254, 250, 234, 0.6);
}

.footer-bar a {
  color: rgba(254, 250, 234, 0.6);
}

.footer-bar-links {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.footer-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(254, 250, 234, 0.3);
  flex: none;
}

/* Phones: Client Portal and LinkedIn both live in the Connect cell above,
   so drop the legal-bar cluster to avoid showing them twice. Desktop keeps it. */
@media (max-width: 47.9375rem) {
  .footer-bar-links {
    display: none;
  }
}

/* ---------- Scroll reveals (classes applied by script.js) ---------- */

.reveal-init {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-init.is-visible {
  opacity: 1;
  transform: none;
}

/* Strike-through list: lines appear one by one, then each
   amber bar draws across, then the resolve line lands */
.not-list.reveal-init li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.not-list.reveal-init .struck::after {
  transform: scaleX(0);
  transition: transform 0.45s ease-out;
}

.not-list.reveal-init.is-visible li {
  transform: none;
}

.not-list.reveal-init.is-visible .struck {
  opacity: 0.55;
}

.not-list.reveal-init.is-visible .resolve {
  opacity: 1;
}

.not-list.reveal-init.is-visible .struck::after {
  transform: scaleX(1);
}

.not-list.reveal-init.is-visible li:nth-child(1) { transition-delay: 0.15s; }
.not-list.reveal-init.is-visible li:nth-child(1)::after { transition-delay: 0.55s; }
.not-list.reveal-init.is-visible li:nth-child(2) { transition-delay: 0.7s; }
.not-list.reveal-init.is-visible li:nth-child(2)::after { transition-delay: 1.1s; }
.not-list.reveal-init.is-visible li:nth-child(3) { transition-delay: 1.25s; }
.not-list.reveal-init.is-visible li:nth-child(3)::after { transition-delay: 1.65s; }
.not-list.reveal-init.is-visible li:nth-child(4) { transition-delay: 2.2s; }

/* The closing line is the final beat of the strike sequence: it fades up
   after the resolve lands. The hidden state only applies when .seq is set
   by script.js (motion + JS), so reduced-motion and no-JS users see it. */
.positioning.seq .closer {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.positioning.seq .not-list.is-visible ~ .closer {
  opacity: 1;
  transform: none;
  transition-delay: 2.8s;
}

/* ---------- Custom cursor (activated by script.js on fine pointers) ---------- */

body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button {
  cursor: none;
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-amber);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease,
    background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.cursor-dot.is-hovering {
  width: 42px;
  height: 42px;
  background: transparent;
  border: 2px solid var(--color-amber);
}

.cursor-dot.is-hidden {
  opacity: 0;
}

/* ---------- Industry index (Industries We Serve) ----------
   One full-bleed composition: photo behind everything, page
   intro and industry list on top. The photo layer is sticky,
   always filling the screen in view. Hovering a row crossfades
   to that industry's photo. Photos live in /assets/; until a
   photo exists the panel stays solid dark green. */

.industry-index {
  position: relative;
  background: var(--color-dark-green);
  color: var(--color-cream);
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 0 var(--space-4);
  overflow: clip;
}

.industry-bgs {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
}

/* Intro owns the first screen; the first industry row peeks
   at the bottom edge as the scroll cue */
.industry-intro {
  position: relative;
  min-height: calc(100vh - 7rem);
  min-height: calc(100svh - 7rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 0 var(--space-3);
}

/* Scroll cue: a down chevron centered at the bottom of the
   hero, gently bobbing to signal "scroll." Fades once the
   reader moves (script.js). Pinned to the section, which is
   the full-height hero on first load. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -0.75rem;
  border-right: 2px solid var(--color-cream);
  border-bottom: 2px solid var(--color-cream);
  transform: rotate(45deg);
  opacity: 0.85;
  animation: scroll-cue-bob 1.8s ease-in-out infinite;
  transition: opacity 0.4s ease;
  z-index: 2;
}

@keyframes scroll-cue-bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(0.35rem, 0.35rem); }
}

.industry-index.scrolled-in .scroll-cue {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue {
    animation: none;
  }
}

.industry-intro h1 {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  margin-bottom: var(--space-3);
}

/* Intro entrance: same orchestration as the home hero */
.industry-intro h1,
.industry-intro .lede {
  animation: rise-in 0.7s ease-out both;
}

.industry-intro .lede { animation-delay: 0.16s; }

.industry-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.industry-bg[data-bg="liveoak"]       { background-image: url('assets/liveoak.jpg'); }
.industry-bg[data-bg="landscaping"]   { background-image: url('assets/landscaping.jpg'); }
.industry-bg[data-bg="horticulture"]  { background-image: url('assets/horticulture.jpg'); }
.industry-bg[data-bg="arboriculture"] { background-image: url('assets/arboriculture.jpg'); }
.industry-bg[data-bg="exterior"]      { background-image: url('assets/exterior.jpg'); }
.industry-bg[data-bg="residential"]   { background-image: url('assets/residential.jpg'); }
.industry-bg[data-bg="golf"]          { background-image: url('assets/golf.jpg'); }

.industry-bg.is-active {
  opacity: 1;
}

/* Directional scrim: deep where the text lives, lighter where
   the photo gets to be seen */
.industry-bgs::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(48, 82, 52, 0.94) 0%,
    rgba(48, 82, 52, 0.74) 55%,
    rgba(48, 82, 52, 0.4) 100%
  );
}

.industry-index .container {
  position: relative;
}

.industry-list {
  list-style: none;
  padding: 0;
}

.industry-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(254, 250, 234, 0.2);
}

.industry-row:last-child {
  border-bottom: none;
}

.industry-row h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  transition: transform 0.25s ease, color 0.25s ease;
}

.industry-row p {
  max-width: var(--measure);
  color: var(--color-cream);
  opacity: 0.75;
  margin-top: var(--space-1);
}

@media (hover: hover) {
  .industry-row:hover h2 {
    transform: translateX(0.5rem);
    color: var(--color-amber);
  }
}

/* Touch screens get no hover, so each row carries its own
   photo with the same overlay. Missing photos degrade to
   the dark green panel. */
@media (hover: none) {
  .industry-index {
    padding-top: 4.5rem;
  }

  .industry-bgs {
    display: none;
  }

  /* The intro becomes a photographic hero card on touch (desktop has
     a photo behind the hero; this restores it), bottom-anchored type
     over liveoak.jpg with a scrim, aligned to the row cards below. */
  .industry-intro {
    position: relative;
    min-height: 56svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-3) var(--space-2);
    margin-bottom: var(--space-2);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 16px 44px -20px rgba(17, 17, 17, 0.55);
    background-color: var(--color-dark-green);
    background-image:
      linear-gradient(160deg, rgba(48, 82, 52, 0.78) 0%, rgba(48, 82, 52, 0.5) 48%, rgba(20, 38, 24, 0.94) 100%),
      url('assets/liveoak.jpg');
    background-size: cover;
    background-position: center;
  }

  .scroll-cue {
    display: none;
  }

  .industry-row {
    position: relative;
    min-height: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-3) var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: none;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 14px 40px -20px rgba(17, 17, 17, 0.5);
    background-color: var(--color-dark-green);
    background-size: cover;
    background-position: center;
    transition: transform 0.45s ease, box-shadow 0.45s ease;
  }

  /* Keep the title and copy above the wash and scrim. */
  .industry-row h2,
  .industry-row p {
    position: relative;
    z-index: 1;
  }

  .industry-row h2 {
    text-shadow: 0 1px 12px rgba(16, 30, 19, 0.55);
  }

  /* Permanent bottom scrim behind the text so titles (especially the
     amber active one) read on any photo, even once the focus wash lifts. */
  .industry-row::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to top, rgba(16, 30, 19, 0.82) 0%, rgba(16, 30, 19, 0.32) 32%, transparent 62%);
    pointer-events: none;
  }

  /* The sitewide reveal fades these in late as you scroll, leaving a
     blank gap below the active card. On touch the focus device is the
     motion, so keep the cards present and skip the fade-in. */
  .industry-row.reveal-init {
    opacity: 1;
  }

  /* Scroll-focus device (armed by script.js via .focus-on): every card
     scales down, dims under a dark wash, and recedes; the active card
     sits forward at full scale, the wash lifts so its photo reveals, it
     gains a stronger shadow, and its title goes amber. Touch + motion. */
  .industry-list.focus-on .industry-row {
    transform: scale(0.945);
  }

  .industry-list.focus-on .industry-row.is-active {
    transform: none;
    box-shadow: 0 30px 70px -20px rgba(17, 17, 17, 0.66);
  }

  .industry-list.focus-on .industry-row::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(20, 38, 24, 0.6);
    opacity: 1;
    transition: opacity 0.45s ease;
    pointer-events: none;
  }

  .industry-list.focus-on .industry-row.is-active::after {
    opacity: 0;
  }

  .industry-list.focus-on .industry-row.is-active h2 {
    color: var(--color-amber);
  }

  .industry-row[data-industry="landscaping"]   { background-image: linear-gradient(100deg, rgba(48, 82, 52, 0.9) 0%, rgba(48, 82, 52, 0.42) 100%), url('assets/landscaping.jpg'); }
  .industry-row[data-industry="horticulture"]  { background-image: linear-gradient(100deg, rgba(48, 82, 52, 0.9) 0%, rgba(48, 82, 52, 0.42) 100%), url('assets/horticulture.jpg'); }
  .industry-row[data-industry="arboriculture"] { background-image: linear-gradient(100deg, rgba(48, 82, 52, 0.9) 0%, rgba(48, 82, 52, 0.42) 100%), url('assets/arboriculture.jpg'); }
  .industry-row[data-industry="exterior"]      { background-image: linear-gradient(100deg, rgba(48, 82, 52, 0.9) 0%, rgba(48, 82, 52, 0.42) 100%), url('assets/exterior.jpg'); }
  .industry-row[data-industry="residential"]   { background-image: linear-gradient(100deg, rgba(48, 82, 52, 0.9) 0%, rgba(48, 82, 52, 0.42) 100%), url('assets/residential.jpg'); }
  .industry-row[data-industry="golf"]          { background-image: linear-gradient(100deg, rgba(48, 82, 52, 0.9) 0%, rgba(48, 82, 52, 0.42) 100%), url('assets/golf.jpg'); }
}

/* ---------- Inner-page hero (How We Work, Who We Are, etc.) ----------
   Shares the same dark-surface material as the home hero but shorter.
   Paths are relative to styles.css (site root). */

.page-hero {
  background:
    url('assets/grain.svg'),
    radial-gradient(90rem 55rem at 22% 25%, rgba(66, 104, 70, 0.9), transparent 62%),
    radial-gradient(110rem 90rem at 100% 115%, rgba(20, 38, 24, 0.85), transparent 65%),
    var(--color-dark-green);
  color: var(--color-cream);
  padding: 9rem 0 var(--space-4);
}

@media (min-width: 48rem) {
  .page-hero {
    padding: 11rem 0 6rem;
  }
}

.page-hero .eyebrow {
  color: var(--color-cream);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.page-hero .eyebrow::before {
  content: '';
  width: 2.1rem;
  height: 3px;
  background: var(--color-amber);
  flex: none;
}

.page-hero h1 {
  max-width: 20ch;
  margin: var(--space-2) 0 var(--space-3);
}

.page-hero h1 .accent {
  color: var(--color-amber);
}

.page-hero .lede {
  color: var(--color-cream);
  opacity: 0.9;
  max-width: var(--measure);
}

.page-hero .eyebrow,
.page-hero h1,
.page-hero .lede {
  animation: rise-in 0.7s ease-out both;
}

.page-hero h1   { animation-delay: 0.12s; }
.page-hero .lede { animation-delay: 0.28s; }

/* ---------- How We Work: phase list ----------
   Scroll-driven sequence. A thin amber line draws down the
   left rail; rail nodes light amber as the reader passes
   them; the phase in view sits full strength, the rest recede.
   script.js drives .is-active / .is-passed and --progress.
   Skipped under reduced motion (CSS shows all phases full). */

.phase-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-4);
  position: relative;
}

/* Rail: faint track + amber progress fill, inset top/bottom */
.phase-list::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 1px;
  background: rgba(48, 82, 52, 0.16);
}

.phase-list::after {
  content: '';
  position: absolute;
  left: 0;
  top: 1.4rem;
  width: 1px;
  height: var(--progress, 0%);
  max-height: calc(100% - 2.8rem);
  background: var(--color-amber);
  transition: height 0.2s ease-out;
}

.phase {
  position: relative;
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0 var(--space-3);
  padding: var(--space-3) 0 var(--space-3) var(--space-3);
  opacity: 0.24;
  transition: opacity 0.5s ease;
  border-top: 1px solid rgba(48, 82, 52, 0.10);
}

.phase:first-child {
  border-top: none;
}

@media (min-width: 48rem) {
  .phase {
    grid-template-columns: 6.5rem 1fr;
    padding: var(--space-4) 0 var(--space-4) var(--space-3);
  }
}

.phase.is-active {
  opacity: 1;
}

/* Rail node: lights amber once the phase is active or passed */
.phase-node {
  position: absolute;
  left: 0;
  top: calc(var(--space-3) + 1.6rem);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-cream);
  border: 1.5px solid rgba(48, 82, 52, 0.30);
  transform: translate(-50%, -50%);
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

@media (min-width: 48rem) {
  .phase-node {
    top: calc(var(--space-4) + 1.7rem);
  }
}

.phase.is-passed .phase-node,
.phase.is-active .phase-node {
  background: var(--color-amber);
  border-color: var(--color-amber);
}

.phase.is-active .phase-node {
  box-shadow: 0 0 0 4px rgba(189, 110, 24, 0.16);
}

/* Tonal numeral as the architectural anchor; inks amber when active */
.phase-number {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(48, 82, 52, 0.13);
  transition: color 0.4s ease;
}

.phase.is-active .phase-number {
  color: var(--color-amber);
}

.phase-body h3 {
  font-size: clamp(1.375rem, 3.5vw, 1.875rem);
  color: var(--color-dark-green);
  margin-bottom: var(--space-1);
}

.phase-body p {
  max-width: var(--measure);
}

/* Reduced motion: everything full strength, no dimming */
@media (prefers-reduced-motion: reduce) {
  .phase {
    opacity: 1;
  }
  .phase-number {
    color: var(--color-dark-green);
  }
  .phase-node {
    background: var(--color-amber);
    border-color: var(--color-amber);
  }
  .phase-list::after {
    display: none;
  }
}

/* Phones: single column. The numeral sits inline above the
   heading and the body runs full width, so headings stop
   wrapping and the dead number gutter closes. No dimming:
   every phase stays fully legible; the active phase inks its
   numeral amber and lights its node as a quiet scroll marker. */
@media (max-width: 47.9375rem) {
  .phase {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    opacity: 1;
  }
  .phase-number {
    font-size: 2rem;
    color: rgba(48, 82, 52, 0.30);
  }
}

/* ---------- Inner-page hero, compact variant ----------
   For pages whose main content is the design moment: same
   material and devices, less height, so the first section
   arrives sooner. */

.page-hero.compact {
  padding: 8rem 0 var(--space-3);
}

@media (min-width: 48rem) {
  .page-hero.compact {
    padding: 9rem 0 var(--space-4);
  }
}

/* ---------- Roles We Place: the horizontal sweep ----------
   A pinned section: the tall .sweep holds a sticky 100vh
   viewport (.sweep-pin), and vertical scroll through that
   height drives the .sweep-track sideways, one card snapping
   center at a time (script.js maps scroll progress to an X
   transform). Inside each card the photo drifts at a slower
   rate than the type for depth (parallax).

   This pinned mechanic is desktop only. On touch and narrow
   screens the same markup becomes a native swipe carousel
   with scroll-snap, no pinning. Reduced motion and no-JS fall
   back to a plain vertical stack with complete content. */

.sweep {
  position: relative;
}

.sweep-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.sweep-track {
  list-style: none;
  margin: 0;
  padding: 0 max(var(--space-3), calc((100vw - var(--container)) / 2));
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  will-change: transform;
}

.sweep-card {
  position: relative;
  flex: 0 0 auto;
  width: min(78vw, 56rem);
  height: 74vh;
  height: 74svh;
  border-radius: 2rem;
  overflow: hidden;
  background: var(--color-dark-green);
  box-shadow: 0 30px 80px -20px rgba(17, 17, 17, 0.45);
}

/* No opacity dimming on the sweep: cards are meant to be read
   in motion, and position plus the peeking edges already do
   the focusing. Dimming non-centered cards washed the whole
   row, since only one card is ever centered. */

/* The photo layer. Taller than the card so it has room to
   drift; positioned behind the scrim and content. A photo
   drops into each card with one rule (see exec below). */
.sweep-photo {
  position: absolute;
  left: -8%;
  right: -8%;
  top: -8%;
  height: 116%;
  background:
    radial-gradient(60rem 40rem at 70% 20%, rgba(66, 104, 70, 0.85), transparent 60%),
    radial-gradient(80rem 60rem at 0% 120%, rgba(20, 38, 24, 0.9), transparent 60%),
    var(--color-dark-green);
  background-size: cover;
  background-position: center 30%;
  will-change: transform;
}

/* Directional scrim: deep at the lower left where the type
   sits, opening to the upper right where the photo shows. */
.sweep-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url('assets/grain.svg'),
    linear-gradient(20deg,
      rgba(48, 82, 52, 0.94) 0%,
      rgba(48, 82, 52, 0.6) 50%,
      rgba(48, 82, 52, 0.15) 100%);
}

.sweep-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  color: var(--color-cream);
}

.sweep-index {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.7;
  margin-bottom: var(--space-2);
}

.sweep-index span {
  color: var(--color-amber);
}

.sweep-card h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin-bottom: var(--space-3);
  max-width: 18ch;
}

.sweep-card-exec h2 {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
}

/* Executive Leadership test photo */
.sweep-card-exec .sweep-photo {
  background-image: url('assets/roles-exec.jpg');
}

/* The exec photo sits a touch high on desktop, where the card is wider
   than the image and leaves a little vertical slack; nudge the framing
   up. Mobile is very portrait, so it keeps the base center 30% crop. */
@media (min-width: 48rem) {
  .sweep-card-exec .sweep-photo {
    background-position: center 45%;
  }
}

/* Operations */
.sweep-card-ops .sweep-photo {
  background-image: url('assets/roles-operations.jpg');
}

/* Growing & Agronomy */
.sweep-card-growing .sweep-photo {
  background-image: url('assets/roles-growing.jpg');
}

/* Sales & Client Management */
.sweep-card-sales .sweep-photo {
  background-image: url('assets/roles-sales.jpg');
}

/* Design & Technical */
.sweep-card-design .sweep-photo {
  background-image: url('assets/roles-design.jpg');
}

/* Roles as a roster: one row each, hairline divided, uniform
   width so every title carries equal weight regardless of
   length. Two columns on the wide cards to use the space. */
.role-roster {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 44rem;
  border-top: 1px solid rgba(254, 250, 234, 0.22);
}

@media (min-width: 48rem) {
  .role-roster {
    columns: 2;
    column-gap: var(--space-4);
  }
}

.role-roster li {
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(254, 250, 234, 0.22);
  break-inside: avoid;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

@media (hover: hover) {
  .role-roster li:hover {
    color: var(--color-amber);
    padding-left: 0.4rem;
  }
}


/* Scroll hint: fades in while the section is pinned, fades
   out once the user has moved. Desktop pointer only. */
.sweep-hint {
  display: none;
}

@media (min-width: 48rem) and (hover: hover) {
  .sweep-hint {
    display: block;
    position: absolute;
    bottom: var(--space-3);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-dark-green);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .sweep-hint::after {
    content: '';
    display: block;
    width: 1px;
    height: 1.4rem;
    margin: 0.5rem auto 0;
    background: var(--color-amber);
  }

  .sweep-hint.is-shown {
    opacity: 0.7;
  }
}

/* ---- Touch / narrow: vertical sticky card-stack (peel deck) ----
   The pinned desktop sweep becomes a vertical stack on phones, but
   instead of plain cards the cards are sticky and rest at a small
   per-card step so the cards behind fan their top edges like a deck.
   Each card rises into place on scroll; script.js scales and dims
   the one behind as the next covers it (the recede). No-JS keeps the
   fanned stack (sticky is layout); reduced motion drops to a flat
   static stack below. */
@media (max-width: 47.99rem), (hover: none) {
  .sweep {
    position: static;
  }

  .sweep-pin {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
  }

  .sweep-track {
    display: block;
    transform: none !important;
    padding: var(--space-3);
    overflow: visible;
  }

  .sweep-card {
    width: 100%;
    height: auto;
    min-height: 70svh;
    margin: 0 0 1.1rem;
    position: sticky;
    top: 4.75rem;
    transform-origin: center top;
    will-change: transform, filter;
    box-shadow: 0 18px 50px -18px rgba(17, 17, 17, 0.55);
  }

  /* Per-card step: later cards rest slightly lower so the top edge
     of each card behind peeks above the one in front. */
  .sweep-card:nth-child(2) { top: 5.4rem; }
  .sweep-card:nth-child(3) { top: 6.05rem; }
  .sweep-card:nth-child(4) { top: 6.7rem; }
  .sweep-card:nth-child(5) { top: 7.35rem; }
  .sweep-card:nth-child(6) { top: 8rem; }

  .sweep-photo {
    transform: none !important;
  }

  .sweep-hint {
    display: none;
  }
}

/* ---- Reduced motion: plain vertical stack ---- */
@media (prefers-reduced-motion: reduce) {
  .sweep-pin {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
  }

  .sweep-track {
    display: block;
    flex-direction: column;
    transform: none !important;
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .sweep-card {
    width: 100%;
    height: auto;
    min-height: 60vh;
    position: relative;
    top: auto;
    margin: 0 0 1rem;
    scroll-snap-align: none;
  }

  /* Match the mobile deck's per-card offset specificity so the
     flat reduced-motion stack sits flush (relative + top would
     otherwise shift cards down by the deck steps). */
  .sweep-card:nth-child(n) {
    top: auto;
  }

  .sweep-photo {
    transform: none !important;
  }
}

/* ---------- Roles We Place: closing panel ----------
   The sixth sweep card: no photo, pure type on the dark
   material. The through-line statement at display scale plus
   the exit link, composed to carry the same weight as the
   photographed cards so it reads as the deliberate close, not
   an empty card. Text rises in when the card lands. */
.sweep-card-close .sweep-content {
  justify-content: center;
}

.sweep-close-line {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--color-cream);
  max-width: 24ch;
  margin-bottom: var(--space-3);
}

.sweep-close-line strong,
.sweep-close-line .accent {
  color: var(--color-amber);
}

/* The exit link sits on the dark card, so it must be cream, not the
   default dark-green text-link color. In the column flex it would also
   stretch full width and run the amber underline edge to edge, so pin
   it to its own content width. */
.sweep-card-close .text-link {
  color: var(--color-cream);
  align-self: flex-start;
}

.sweep-card-close .text-link:hover {
  color: var(--color-amber);
}

/* Text rises in as the closing card lands. The JS adds
   .is-landed when this card reaches center. */
@media (min-width: 48rem) and (hover: hover) {
  .sweep-close-line,
  .sweep-card-close .text-link {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .sweep-card-close.is-landed .sweep-close-line {
    opacity: 1;
    transform: none;
    transition-delay: 0.05s;
  }

  .sweep-card-close.is-landed .text-link {
    opacity: 1;
    transform: none;
    transition-delay: 0.2s;
  }
}

/* ---------- CTA band entry ----------
   The shared CTA band rides in via reveal-init/is-visible: the
   heading and subline stagger up, and the button rises and fades
   in on its own delay. The heading and subline settle to
   transform: none, but the BUTTON must not, or that rule would
   outrank the hover lift and pin the button in place. So the
   button's entrance is a keyframe animation with fill-mode
   backwards: it holds hidden during the delay, rises in once, and
   leaves no transform behind, freeing the hover lift to take over.
   The whole reveal system is reduced-motion gated in script.js. */

.cta-band.reveal-init {
  opacity: 1;
  transform: none;
}

.cta-band.reveal-init h2,
.cta-band.reveal-init p {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.cta-band.reveal-init.is-visible h2 {
  opacity: 1;
  transform: none;
  transition-delay: 0.05s;
}

.cta-band.reveal-init.is-visible p {
  opacity: 1;
  transform: none;
  transition-delay: 0.18s;
}

.cta-band.reveal-init .button {
  opacity: 0;
}

.cta-band.reveal-init.is-visible .button {
  opacity: 1;
  animation: cta-button-in 0.6s ease 0.32s backwards;
}

@keyframes cta-button-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   Who We Are
   Mixed dark/cream rhythm: dark hero, a cream founders "stage"
   where the two founders glide together on scroll and lock at
   an amber seam (the page's signature moment), a cream bios
   block, then back to dark for the manifesto and a dark close.
   The converging animation is a desktop/pointer enhancement
   added via .is-anim by JS. Without it (mobile, reduced-motion,
   no-JS) the diptych renders in its final locked state, fully
   readable.
   ========================================================== */

/* dark material for the manifesto (matches the hero surface) */
.why-built {
  position: relative;
  overflow: hidden;
  padding-top: 4.25rem;
  padding-bottom: 4.25rem;
  background:
    radial-gradient(58rem 46rem at 14% 6%, rgba(102, 151, 59, 0.20), transparent 55%),
    radial-gradient(66rem 54rem at 92% 90%, rgba(102, 151, 59, 0.12), transparent 60%),
    radial-gradient(46rem 38rem at 78% 30%, rgba(189, 110, 24, 0.07), transparent 60%),
    linear-gradient(158deg, #356037, #2c4c30 46%, #233d26);
  color: var(--color-cream);
}
.why-built::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url('assets/grain.svg');
}
.why-built > .container { position: relative; z-index: 1; }
.why-built .eyebrow {
  color: var(--color-cream);
  display: flex; align-items: center; gap: 0.75rem;
}
.why-built .eyebrow::before {
  content: ''; width: 2.1rem; height: 3px; background: var(--color-amber); flex: none;
}
.why-built h2 .accent { color: var(--color-amber); }

/* ---- Founders stage (cream) ---- */
.founders-track { background: var(--color-cream); }
.founders-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 5rem 1.5rem;
}
.founders-stage .eyebrow {
  color: var(--color-dark-green);
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  margin-bottom: var(--space-2);
}
.founders-stage .eyebrow::before {
  content: ''; width: 2.1rem; height: 3px; background: var(--color-amber); flex: none;
}
.frhead {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.01em;
  color: var(--color-dark-green); margin-bottom: var(--space-4);
}
.frb { color: var(--color-amber); }

.frig { position: relative; display: flex; align-items: stretch; justify-content: center; }
.fpanel {
  width: min(33vw, 310px); aspect-ratio: 5 / 6; border-radius: 8px; overflow: hidden;
  position: relative; box-shadow: 0 26px 60px -24px rgba(17, 17, 17, 0.5);
}
.fpanel img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.94); }
.fpanel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,32,22,0.4), transparent 30%, transparent 60%, rgba(16,28,20,0.8));
}
.frole {
  position: absolute; top: 0.9rem; left: 1rem; z-index: 2; margin: 0;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.6rem; color: var(--color-cream);
}
.frole b { color: var(--color-amber); margin-right: 0.5rem; }
.fname {
  position: absolute; left: 1rem; bottom: 0.9rem; z-index: 2; margin: 0;
  font-family: var(--font-display); font-weight: 800; color: var(--color-cream); font-size: 1.1rem;
}
.fseam {
  position: absolute; left: 50%; top: 6%; height: 88%; width: 2px;
  background: var(--color-amber); transform: translateX(-50%) scaleY(1);
  transform-origin: center; z-index: 3;
}
.fplus {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1);
  z-index: 4; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--color-amber); color: var(--color-dark-green);
  font-family: var(--font-display); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.fpayoff {
  margin-top: var(--space-4); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.1rem, 2.1vw, 1.55rem); color: var(--color-dark-green);
  text-wrap: balance; max-width: 34ch;
}
.fboth { display: inline-block; position: relative; color: var(--color-amber); }
.fboth::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  background: var(--color-amber); transform: scaleX(1); transform-origin: left;
}
.founders-scrollcue {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  font-style: italic; font-weight: 700; color: rgba(48, 82, 52, 0.7); font-size: 0.82rem; opacity: 0;
}

/* animated layer (added by JS as .is-anim) */
.founders-track.is-anim { height: 140vh; }
.founders-track.is-anim .founders-stage {
  position: sticky; top: 2.5rem; height: calc(100vh - 2.5rem); min-height: 40rem; overflow: hidden;
}
.founders-track.is-anim .fpanel { will-change: transform; }
.founders-track.is-anim .frb { opacity: 0.22; transition: opacity 0.45s ease; }
.founders-track.is-anim .fseam {
  transform: translateX(-50%) scaleY(0); transition: transform 0.42s ease 0.04s;
}
.founders-track.is-anim .fplus {
  opacity: 0; transform: translate(-50%, -50%) scale(0.3);
  transition: opacity 0.3s ease 0.14s, transform 0.42s cubic-bezier(0.34,1.56,0.64,1) 0.14s;
}
.founders-track.is-anim .fpayoff {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.4s ease 0.12s, transform 0.4s ease 0.12s;
}
.founders-track.is-anim .fboth { color: var(--color-dark-green); }
.founders-track.is-anim .fboth::after { transform: scaleX(0); }
.founders-track.is-anim .founders-scrollcue { opacity: 1; }
/* locked = the click */
.founders-track.is-anim.is-locked .frb { opacity: 1; }
.founders-track.is-anim.is-locked .fpanel { transition: transform 0.52s cubic-bezier(0.34,1.56,0.64,1); }
.founders-track.is-anim.is-locked .fseam { transform: translateX(-50%) scaleY(1); }
.founders-track.is-anim.is-locked .fplus { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.founders-track.is-anim.is-locked .fpayoff { opacity: 1; transform: none; }
.founders-track.is-anim.is-locked .fboth {
  color: var(--color-amber); animation: bothpop 0.58s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}
.founders-track.is-anim.is-locked .fboth::after { animation: tickin 0.42s ease 0.46s both; }
@keyframes bothpop { 0% { transform: scale(0.82); } 55% { transform: scale(1.24); } 100% { transform: scale(1); } }
@keyframes tickin { to { transform: scaleX(1); } }

/* ---- Bios block (cream) ---- */
.founders-bios { background: var(--color-cream); padding-top: 2rem; padding-bottom: 3.25rem; }
.bios {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid rgba(48, 82, 52, 0.18);
}
.bio { padding: 2.5rem 0; }
.bio:first-child { padding-right: 3rem; border-right: 1px solid rgba(48, 82, 52, 0.18); }
.bio:last-child { padding-left: 3rem; }
.bn { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; color: var(--color-dark-green); margin: 0; }
.bn span {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-amber); margin-top: 0.45rem;
}
.bt { margin-top: var(--space-2); font-size: 1.02rem; line-height: 1.65; color: #36482f; max-width: 46ch; }
.bio-more { margin-top: 1.1rem; }
.bio-more a {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.72rem; color: var(--color-amber);
  text-decoration: none; position: relative; display: inline-block; padding-bottom: 7px;
}
.bio-more a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px;
  width: 1.5rem; background: var(--color-amber); transition: width 0.3s ease;
}
@media (hover: hover) { .bio-more a:hover::after { width: 100%; } }

/* ---- The Lens (cross-industry differentiator beat) ---- */
.lens-beat { background: var(--color-cream); padding-top: 2.5rem; padding-bottom: 5rem; }
.lens-beat .eyebrow {
  color: var(--color-dark-green);
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: var(--space-2);
}
.lens-beat .eyebrow::before {
  content: ''; width: 2.1rem; height: 3px; background: var(--color-amber); flex: none;
}
.lens-head {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.08;
  font-size: clamp(1.9rem, 4.2vw, 3.05rem); color: var(--color-dark-green);
  margin: 0 0 2rem; max-width: 20ch;
}
.lens-head .accent { color: var(--color-amber); }
.lens-body { position: relative; padding-left: 2.6rem; max-width: 46rem; }
.lens-body::before {
  content: ''; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(189, 110, 24, 0.9) 6%, rgba(189, 110, 24, 0.9) 94%, transparent);
}
.lens-body p { font-size: 1.1rem; line-height: 1.68; color: #36482f; margin: 0; }
.lb-beat { margin: 0 0 1.15rem; }
.lb-beat:last-child { margin-bottom: 0; }
.lens-resolve {
  margin: 2.6rem 0 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.12; color: var(--color-dark-green); max-width: 24ch;
}
.lens-resolve .accent { display: inline-block; position: relative; color: var(--color-amber); }
.lens-resolve .accent::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--color-amber);
}
/* Scroll reveal: beats stagger up as the section enters; the resolve fades
   up and its amber underline draws in as it settles. Added by JS via
   .is-revealing, so reduced-motion and no-JS keep the full static beat
   with the underline already drawn. */
@media (prefers-reduced-motion: no-preference) {
  .lens-body.is-revealing .lb-beat {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .lens-body.is-revealing.in .lb-beat { opacity: 1; transform: none; }
  .lens-body.is-revealing.in .lb-beat:nth-child(1) { transition-delay: 0.05s; }
  .lens-body.is-revealing.in .lb-beat:nth-child(2) { transition-delay: 0.38s; }
  .lens-body.is-revealing.in .lb-beat:nth-child(3) { transition-delay: 0.71s; }

  .lens-resolve.is-revealing {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .lens-resolve.is-revealing.in { opacity: 1; transform: none; }
  .lens-resolve.is-revealing .accent::after { transform: scaleX(0); transform-origin: left; transition: transform 0.55s ease; }
  .lens-resolve.is-revealing.in .accent::after { transform: scaleX(1); transition-delay: 0.6s; }
}
@media (max-width: 48rem) {
  .lens-body { padding-left: 2rem; }
}

/* ---- Belief statement (creed) ---- */
.creed {
  position: relative; padding-left: 2.6rem; max-width: 44rem; margin-top: var(--space-3);
}
.creed::before {
  content: ''; position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(189, 110, 24, 0.9) 6%, rgba(189, 110, 24, 0.9) 94%, transparent);
  transform-origin: top; transform: scaleY(var(--creed-g, 1)); transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.creed p {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.16;
  font-size: clamp(1.45rem, 3vw, 2.2rem); margin: 0 0 1.25rem; color: var(--color-cream);
}
.creed p:last-child { margin-bottom: 0; margin-top: 1.7rem; }
.creed .accent { color: var(--color-amber); }
/* scroll reveal + amber ignite (added by JS; full static statement without it) */
.creed.is-revealing p {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.creed.is-revealing p.in { opacity: 1; transform: none; }
.creed.is-revealing .accent { color: var(--color-cream); }
.creed.is-revealing p.in .accent { color: var(--color-amber); transition: color 0.55s ease 0.35s; }

/* ---- Mobile ---- */
@media (max-width: 48rem) {
  .fpanel { width: 40vw; }
  .founders-stage { padding: 4rem 1.25rem; }
  .bios { grid-template-columns: 1fr; }
  .bio:first-child { padding-right: 0; border-right: none; border-bottom: 1px solid rgba(48, 82, 52, 0.18); }
  .bio:last-child { padding-left: 0; }

  .creed { padding-left: 2rem; }

  /* Phones run the converge without pinning: the stage stays in normal
     flow and the diptych slides together as it scrolls up. The .is-anim
     hide/lock states (seam, plus, payoff) still apply; only the pin and
     the tall track are switched off here. overflow:hidden stays so the
     panels can bleed past the edges as they spread without scrolling. */
  .founders-track.is-anim { height: auto; }
  .founders-track.is-anim .founders-stage {
    position: static;
    height: auto;
    min-height: 0;
  }

  /* The "scroll" cue is a desktop pinned-stage hint; it has no role in
     the in-flow phone version and lands clipped, so drop it here. */
  .founders-scrollcue { display: none; }

  /* Bios highlight: an amber rule marks the bio you're scrolled to,
     Noah then Andrew, and the other sits back. Driven by the bios
     controller in script.js; reduced-motion / no-JS keep both bios full
     with no rule. The small left inset seats the rule. */
  .founders-bios .bio {
    position: relative;
    padding-left: 1.15rem;
    transition: opacity 0.4s ease;
  }
  .founders-bios .bio::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--color-amber);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .founders-bios .bios.lit .bio:not(.is-active) { opacity: 0.5; }
  .founders-bios .bio.is-active::before { transform: scaleY(1); }
}

/* ============================================================
   Founder profile pages
   ============================================================ */
.pf-dark {
  position: relative; overflow: hidden; color: var(--color-cream);
  background:
    radial-gradient(58rem 46rem at 14% 6%, rgba(102, 151, 59, 0.20), transparent 55%),
    radial-gradient(66rem 54rem at 92% 90%, rgba(102, 151, 59, 0.12), transparent 60%),
    radial-gradient(46rem 38rem at 78% 30%, rgba(189, 110, 24, 0.07), transparent 60%),
    linear-gradient(158deg, #356037, #2c4c30 46%, #233d26);
}
.pf-dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.5; mix-blend-mode: overlay; background-image: url('assets/grain.svg');
}
.pf-dark > .container { position: relative; z-index: 1; }

/* shared profile eyebrow */
.pf-eyebrow {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.72rem; color: var(--color-dark-green);
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.8rem;
}
.pf-eyebrow::before { content: ''; width: 2.1rem; height: 3px; background: var(--color-amber); flex: none; }
.pf-eyebrow-light { color: var(--color-cream); }

/* hero */
.pf-hero { padding: 7rem 0 5.5rem; }
.pf-hero .container { display: grid; grid-template-columns: 340px 1fr; gap: 3.2rem; align-items: center; }
.pf-portrait {
  width: 100%; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.pf-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.94); }
.pf-kicker {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.7rem; color: var(--color-cream); margin: 0 0 1.1rem;
}
.pf-kicker b { color: var(--color-amber); margin-right: 0.55rem; }
.pf-name {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; font-size: clamp(2.6rem, 6vw, 4.4rem); margin: 0.2rem 0 0.6rem;
}
.pf-role {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.8rem; color: var(--color-amber); margin: 0 0 0.9rem;
}
.pf-connect { margin: 0 0 1.5rem; }
.pf-connect a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.72rem; color: var(--color-cream);
  text-decoration: none; position: relative;
}
.pf-connect a svg { width: 16px; height: 16px; flex: none; }
.pf-connect a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--color-amber); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
@media (hover: hover) { .pf-connect a:hover::after { transform: scaleX(1); } }
.pf-lede { font-size: 1.2rem; line-height: 1.6; color: rgba(254, 250, 234, 0.85); max-width: 38ch; margin: 0; }

/* the road in (cream prose) */
.pf-road { background: var(--color-cream); color: var(--color-dark-green); padding-top: 2.5rem; padding-bottom: 2.75rem; }
.pf-prose p {
  font-family: var(--font-body); font-size: 1.12rem; line-height: 1.75;
  color: #36482f; max-width: 62ch; margin: 0 0 1.4rem;
}
.pf-prose p:last-child { margin-bottom: 0; }

/* voice quote: a dark-surface card placed on the cream */
.pf-voice { background: var(--color-cream); padding-top: 2.5rem; padding-bottom: 2.75rem; }
.pf-quote-card {
  position: relative; overflow: hidden; color: var(--color-cream);
  max-width: 52rem; margin: 0 auto; padding: 3rem 3.2rem 3.4rem;
  border-radius: 10px; box-shadow: 0 30px 70px rgba(20, 38, 24, 0.28);
  background:
    radial-gradient(40rem 30rem at 12% 4%, rgba(102, 151, 59, 0.22), transparent 55%),
    radial-gradient(44rem 34rem at 94% 96%, rgba(102, 151, 59, 0.13), transparent 60%),
    radial-gradient(30rem 24rem at 80% 26%, rgba(189, 110, 24, 0.08), transparent 60%),
    linear-gradient(158deg, #356037, #2c4c30 46%, #233d26);
}
.pf-quote-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.5; mix-blend-mode: overlay; background-image: url('assets/grain.svg');
}
.pf-quote-mark {
  position: relative; display: block;
  font-family: var(--font-display); font-weight: 800; line-height: 0.6;
  font-size: 5.5rem; height: 2.4rem; color: rgba(254, 250, 234, 0.16);
}
.pf-quote-card blockquote {
  position: relative;
  font-family: var(--font-display); font-weight: 800; line-height: 1.22; letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: var(--color-cream); max-width: 24ch; margin: 0;
}
.pf-voice .accent, .pf-closing .accent { color: var(--color-amber); }

/* field notes */
.pf-notes { background: var(--color-cream); color: var(--color-dark-green); padding-top: 2.75rem; }
.pf-ngrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 4rem; max-width: 62rem; }
.pf-note { border-top: 1px solid rgba(48, 82, 52, 0.18); padding-top: 1.1rem; }
.pf-note .lab {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.68rem; color: var(--color-amber); margin: 0 0 0.55rem;
}
.pf-note .val { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.55; color: #36482f; margin: 0; }

/* gallery (placeholder slots until photos land) */
/* Photo wall. Base state (mobile, touch, reduced-motion, no-JS) is a
   static even grid: every cell the same size, every gap identical.
   On capable desktops the JS adds .is-anim, which pins the stage and
   lets the three full columns drift past each other (see script.js). */
.pf-gallery { padding: 5.5rem 0 6.5rem; overflow: visible; }
.pf-gallery .container { margin-bottom: 2.5rem; }
.pf-track { position: relative; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; max-width: 84rem; margin: 0 auto; padding: 0 1rem; }
.pf-col { display: grid; grid-auto-rows: 18rem; gap: 0.6rem; }
.pf-fig { margin: 0; border-radius: 8px; overflow: hidden; background: rgba(254, 250, 234, 0.04); }
.pf-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-fig.pos-top img { object-position: 50% 12%; }
.pf-fig.pos-upper img { object-position: 50% 30%; }
.pf-fig.pos-bottom img { object-position: 50% 86%; }
.pf-fig.pos-mid img { object-position: 50% 40%; }
.pf-fig.pos-low img { object-position: 50% 62%; }
/* JS-built phone masonry columns: hidden everywhere unless the script
   activates the masonry on phones. Keeps desktop and no-JS untouched. */
.pf-mcol { display: none; }

/* Pinned-parallax enhancement (desktop/pointer, motion ok). The stage
   clips; the columns are taller than it, so a photo always covers every
   spot and the slide can never expose a gap. Track height set by JS. */
.pf-track.is-anim .pf-stage { position: sticky; top: 4rem; height: calc(100svh - 4rem); overflow: hidden; }
.pf-track.is-anim .pf-col { will-change: transform; }

/* closing voice (dark) */
.pf-closing-wrap { margin: 4.5rem 0 0; }
.pf-closing {
  font-family: var(--font-display); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); color: var(--color-cream); max-width: 32ch; margin: 0;
}

@media (max-width: 48rem) {
  .pf-hero { padding: 8rem 0 4rem; }
  .pf-hero .container { grid-template-columns: 1fr; gap: 2rem; }
  .pf-portrait { max-width: 280px; }
  .pf-ngrid { grid-template-columns: 1fr; gap: 1.6rem; }

  /* Gallery on phones: a 2-column masonry instead of one tall single-file
     stack. The three parallax columns flow their photos into the masonry
     via display:contents, and photos keep their natural aspect ratio so
     the varied heights give the wall rhythm. */
  .pf-grid {
    display: block;
    column-count: 2;
    column-gap: 0.6rem;
    padding: 0;
  }
  .pf-col { display: contents; }
  .pf-fig {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 0.6rem;
  }
  .pf-fig img { height: auto; }

  /* When the script runs, the multicol above is replaced by a measured
     2-column flex pack so photos balance by real height and a pinned pair
     (orchid under the dog) can sit exactly where multicol cannot place it.
     No-JS keeps the multicol fallback. */
  .pf-grid.js-masonry { display: flex; column-count: auto; gap: 0.6rem; padding: 0; }
  .pf-grid.js-masonry .pf-col { display: none; }
  .pf-grid.js-masonry .pf-mcol { display: flex; flex-direction: column; gap: 0.6rem; flex: 1 1 0; min-width: 0; }
  .pf-grid.js-masonry .pf-fig { margin: 0; }

  .pf-closing-wrap { margin-top: 3rem; }
}

/* Gallery photos fade and rise in as they enter, on phones only (desktop
   has the parallax). The hidden start state only applies once JS sets
   .reveal-on and motion is allowed, so no-JS and reduced-motion keep
   every photo visible. */
@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .pf-grid.reveal-on .pf-fig {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .pf-grid.reveal-on .pf-fig.in { opacity: 1; transform: none; }
}

/* ============================================================
   Start a Search: form + live "search file" card
   (Ported from the approved proof. The page-hero, header, nav,
   and footer reuse the shared site styles above.)
   ============================================================ */

.ss-form { padding: 4rem 0 6rem; }

.ss-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

/* ----- segmented toggle ----- */
.ss-seg {
  display: inline-flex;
  border: 1px solid rgba(48, 82, 52, 0.3);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 1.6rem;
}

.ss-seg button {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.75rem 1.4rem;
  background: transparent;
  color: #3a4a34;
  transition: 0.15s;
}

.ss-seg button.on { background: var(--color-amber); color: #fff; }

/* ----- forms ----- */
.ss-formwrap form { display: none; }
.ss-formwrap form.on { display: block; }

.hp { position: absolute; left: -9999px; }

.ss-row { margin: 0 0 1.05rem; }
.ss-row.two { display: grid; grid-template-columns: 1fr; gap: 1.05rem; }

.ss-field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.74rem;
  color: var(--color-dark-green);
  margin: 0 0 0.55rem;
}

.ss-field label .opt {
  color: #8a9a82;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.04em;
}

.ss-field input,
.ss-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: #1c241b;
  background: #fff;
  border: 1.5px solid rgba(48, 82, 52, 0.3);
  border-radius: 8px;
  padding: 1.05rem 1.15rem;
  transition: 0.15s;
}

.ss-field textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }

.ss-field input:focus,
.ss-field textarea:focus {
  outline: none;
  border-color: var(--color-amber);
  box-shadow: 0 0 0 3px rgba(189, 110, 24, 0.16);
}

.ss-submit { margin-top: 1.5rem; }

.ss-submit button {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  background: transparent;
  border-radius: 8px;
  padding: 1.2rem 2.4rem;
}

/* Stationary frame, lifting panel: same fix as the CTA so the move-only
   hover cannot re-trigger at the button's edge. Border is 0 here, so the
   panel sits flush at inset 0. */
.ss-submit button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: var(--color-amber);
  box-shadow: 0 8px 20px -8px rgba(17, 17, 17, 0.55);
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s;
}

.ss-submit button .button-label,
.ss-submit button::after {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ss-submit button::after {
  content: "\2192";
  margin-left: 0.6rem;
}

@media (hover: hover) {
  .ss-submit button:hover::before {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -14px rgba(17, 17, 17, 0.6);
  }
  .ss-submit button:hover .button-label { transform: translateY(-4px); }
  .ss-submit button:hover::after { transform: translateY(-4px) translateX(0.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ss-submit button::before,
  .ss-submit button .button-label,
  .ss-submit button::after {
    transition: none;
  }
}

/* ----- inline success state ----- */
.ss-success { max-width: 30rem; }

.ss-success .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-dark-green);
  margin: 0 0 1rem;
}

.ss-success .eyebrow::before {
  content: "";
  width: 2.1rem;
  height: 3px;
  background: var(--color-amber);
  flex: none;
}

.ss-success-h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.1;
  color: var(--color-dark-green);
  margin: 0 0 1rem;
}

.ss-success-h .accent { color: var(--color-amber); }

.ss-success-p {
  font-size: 1.1875rem;
  color: #46583f;
  margin: 0 0 2rem;
}

.ss-back {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-dark-green);
  text-decoration: none;
  background: transparent;
  border: 1.5px solid rgba(48, 82, 52, 0.4);
  border-radius: 8px;
  padding: 0.95rem 1.9rem;
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s, border-color 0.2s;
}

@media (hover: hover) {
  .ss-back:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -16px rgba(17, 17, 17, 0.4);
    border-color: var(--color-amber);
  }
}

/* ============================================================
   The "search file" card
   ============================================================ */
.aside-brief { display: flex; justify-content: center; }

.file-col { width: 100%; max-width: 412px; }

.file-wrap { position: relative; }

/* stacked page edges = warm page stock inside the file */
.page-edge {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 0;
  height: 62px;
  background: #fbf6ea;
  border: 1px solid rgba(48, 82, 52, 0.13);
  border-radius: 12px;
  box-shadow: 0 12px 26px -18px rgba(17, 17, 17, 0.45);
  transition: transform 0.5s ease, opacity 0.45s ease;
}

.page-edge.e1 { transform: translateY(9px) scale(0.984); z-index: 0; }
.page-edge.e2 { transform: translateY(18px) scale(0.968); opacity: 0.65; z-index: 0; }

.file-wrap.open .page-edge { opacity: 0; transform: translateY(0) scale(1); }

/* folder tab */
.file-tab {
  position: absolute;
  top: -13px;
  left: 30px;
  width: 92px;
  height: 16px;
  background: linear-gradient(#ffffff, #fbf6ea);
  border: 1px solid rgba(48, 82, 52, 0.16);
  border-bottom: none;
  border-radius: 9px 9px 0 0;
  z-index: 2;
  box-shadow: 0 -2px 6px -4px rgba(17, 17, 17, 0.2);
}

.file-tab::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 6px;
  height: 2px;
  background: var(--color-amber);
  border-radius: 2px;
  opacity: 0.7;
}

.brief {
  position: relative;
  z-index: 1;
  width: 100%;
  border: 1px solid rgba(48, 82, 52, 0.18);
  border-radius: 13px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.945), rgba(255, 255, 255, 0.945)),
    url('assets/grain.svg');
  background-size: auto, 200px;
  box-shadow:
    0 20px 44px -26px rgba(17, 17, 17, 0.34),
    0 2px 8px -4px rgba(17, 17, 17, 0.12);
  overflow: hidden;
  transition: box-shadow 0.5s ease;
}

/* amber spine */
.brief::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-amber);
  z-index: 4;
}

/* fine inset frame (letterpress / dossier craft) */
.brief::after {
  content: "";
  position: absolute;
  top: 11px;
  right: 11px;
  bottom: 11px;
  left: 11px;
  border: 1px solid rgba(48, 82, 52, 0.12);
  border-radius: 7px;
  pointer-events: none;
  z-index: 0;
}

.brief.closed { cursor: pointer; }

.brief.open {
  box-shadow:
    0 32px 64px -28px rgba(17, 17, 17, 0.42),
    0 3px 10px -4px rgba(17, 17, 17, 0.14);
}

/* The lift only animates when JS runs the closed->open theatre. */
.brief.is-opening { animation: fileLift 0.6s ease; }

@keyframes fileLift {
  0% { transform: translateY(0); }
  35% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.brief-inner { position: relative; z-index: 1; padding: 1.95rem 2.05rem 1.85rem; }

.file-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.2rem;
}

.file-mark { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.file-mark .tree { height: 34px; width: auto; display: block; }
.file-mark .wm { display: flex; flex-direction: column; gap: 0.2rem; }

.file-mark .lh-1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--color-dark-green);
  line-height: 1;
  white-space: nowrap;
}

.file-mark .lh-2 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.52rem;
  letter-spacing: 0.15em;
  color: var(--color-medium-green);
  white-space: nowrap;
}

.file-mark .lh-2::before { content: ''; width: 0.9rem; height: 1.5px; background: var(--color-amber); }

.file-meta { text-align: right; }

.file-meta .fm-1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.62rem;
  color: var(--color-amber);
  margin: 0 0 0.25rem;
}

.file-meta .fm-2 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: #6a7a62;
  margin: 0;
  white-space: nowrap;
}

.file-meta .fm-3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  color: #aeb9a4;
  margin: 0.25rem 0 0;
  white-space: nowrap;
}

.file-rule { border: 0; border-top: 1px solid rgba(48, 82, 52, 0.14); margin: 0 0 1.25rem; }

/* closed cover body */
.file-closed {
  max-height: 160px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.45s ease, opacity 0.3s ease, transform 0.4s ease;
}

.file-closed .fc-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.28;
  color: var(--color-dark-green);
  margin: 0.3rem 0 1.5rem;
  max-width: 18ch;
}

.file-closed .fc-line em { font-style: normal; color: var(--color-amber); }

.file-closed .fc-seal { display: flex; align-items: center; gap: 0.7rem; color: #b3bfa9; }

.file-closed .fc-seal .seam { flex: 1; height: 1px; background: rgba(48, 82, 52, 0.14); }

.file-closed .fc-seal .dot {
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--color-amber);
  transform: rotate(45deg);
  opacity: 0.8;
}

.file-closed .fc-seal .lbl {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.58rem;
  color: #9aa896;
}

.brief.open .file-closed { max-height: 0; opacity: 0; transform: translateY(-10px); margin: 0; }

/* open document body */
.file-doc {
  max-height: 0;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.brief.open .file-doc { max-height: 600px; }

.file-doc > * { opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.45s ease; }

.brief.open .file-doc > * { opacity: 1; transform: none; }

.brief.open .file-doc > *:nth-child(1) { transition-delay: 0.18s; }
.brief.open .file-doc > *:nth-child(2) { transition-delay: 0.25s; }
.brief.open .file-doc > *:nth-child(3) { transition-delay: 0.31s; }
.brief.open .file-doc > *:nth-child(4) { transition-delay: 0.37s; }
.brief.open .file-doc > *:nth-child(5) { transition-delay: 0.43s; }
.brief.open .file-doc > *:nth-child(6) { transition-delay: 0.49s; }
.brief.open .file-doc > *:nth-child(7) { transition-delay: 0.55s; }

.b-role {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.85rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-dark-green);
  margin: 0;
  min-height: 1.4em;
}

.b-at { font-family: var(--font-body); font-size: 1.12rem; color: #3a4a34; margin: 0.35rem 0 0; }
.b-at b { font-family: var(--font-display); font-weight: 700; color: var(--color-dark-green); }

.b-market {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-amber);
  margin: 0.55rem 0 0;
}

.b-sep { border: 0; border-top: 1px solid rgba(48, 82, 52, 0.12); margin: 1.15rem 0; }

.b-meta { font-family: var(--font-body); font-size: 0.96rem; color: #46583f; line-height: 1.7; margin: 0; }
.b-meta .b-name { font-weight: 700; color: var(--color-dark-green); }

.b-note {
  margin: 0.65rem 0 0;
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: #46583f;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.4em;
}

.b-next { margin: 1.3rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(48, 82, 52, 0.12); }

.b-next b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-amber);
  display: block;
  margin-bottom: 0.45rem;
}

.b-next span { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.5; color: #8a9a82; }

/* value slots + the blank ruled lines of a form mid-fill */
.v { position: relative; }

.v.blank {
  display: inline-block;
  vertical-align: middle;
  border-bottom: 1.5px solid rgba(48, 82, 52, 0.2);
  border-radius: 1px;
}

.b-role .v.blank { width: 12.5rem; max-width: 80%; height: 1.55rem; border-bottom-width: 2px; }
.b-at .v.blank { width: 7rem; height: 1.05rem; }
.b-name .v.blank { width: 5.5rem; height: 1rem; }
#b-email.v.blank { width: 9rem; height: 1rem; }

.b-note .v.blank {
  display: block;
  width: 100%;
  height: 2.9rem;
  border-bottom: none;
  border-radius: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 1.4rem,
    rgba(48, 82, 52, 0.16) 1.4rem,
    rgba(48, 82, 52, 0.16) calc(1.4rem + 1.5px)
  );
}

/* the amber underline sweep when a value fills */
.v.filled::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-amber);
  transform: scaleX(0);
  transform-origin: left;
  animation: sweep 0.6s ease forwards;
}

@keyframes sweep {
  0% { transform: scaleX(0); opacity: 1; }
  55% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

.brief-cap {
  text-align: center;
  margin: 1.7rem auto 0;
  max-width: 30ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--color-dark-green);
  transition: color 0.3s;
}

.brief-cap.done { color: var(--color-amber); }

@media (prefers-reduced-motion: reduce) {
  .brief.is-opening { animation: none; }
  .file-doc,
  .file-doc > *,
  .file-closed,
  .page-edge { transition: none; }
  .v.filled::after { animation: none; opacity: 0; }
}

@media (min-width: 48rem) {
  .ss-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .ss-row.two { grid-template-columns: 1fr 1fr; }
}

/* Phones: drop the search-file dossier. It sits below the form there,
   unseen while filling, and its live-fill payoff only reads in the
   two-column desktop layout. The form ends cleanly on the submit. */
@media (max-width: 47.9375rem) {
  .aside-brief { display: none; }
}

/* Desktop/pointer only: the form section becomes a full-height stage so
   the center-once-on-first-focus (script.js) lands the form calmly in the
   middle of the viewport. Touch and reduced-motion keep normal flow and
   just get the trimmed form, which already fits shorter laptops. */
@media (min-width: 48rem) and (hover: hover) {
  .ss-form {
    min-height: 100svh;
    display: grid;
    align-content: center;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

/* ---------- Privacy / long-form legal page ----------
   A single cream reading column left-aligned to the hero, an
   "On this page" jump list (sticky right rail on desktop, top card
   on mobile), Montserrat 01-13 section numbers echoing the founders
   stage, STOP/HELP command tags in the SMS block, and a print
   stylesheet that drops the page to clean black-on-white. */

.legal {
  padding: 4.5rem 0 6rem;
}

.legal-grid {
  display: block;
}

.legal-inner {
  max-width: var(--measure-read);
}

.legal .meta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dark-green);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 2.25rem;
}

.legal .meta::before {
  content: '';
  width: 2.1rem;
  height: 3px;
  background: var(--color-amber);
  flex: none;
}

.legal .lead {
  font-size: 1.25rem;
  line-height: 1.5;
  color: #1c2b1f;
  margin: 0 0 2.5rem;
}

.legal h2 {
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--color-dark-green);
  margin: 2.75rem 0 0.8rem;
}

.legal h2 .secnum {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-amber);
  letter-spacing: 0.08em;
  margin-right: 0.6rem;
  vertical-align: 0.12em;
}

.legal p {
  margin: 0 0 1rem;
  line-height: 1.65;
}

.legal-inner ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.legal-inner li {
  position: relative;
  padding-left: 1.4rem;
  margin: 0 0 0.55rem;
  line-height: 1.5;
}

.legal-inner li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.8rem;
  height: 2px;
  background: var(--color-amber);
}

.legal .req {
  background: #fbf5e4;
  border: 1px solid rgba(189, 110, 24, 0.28);
  border-left: 4px solid var(--color-amber);
  border-radius: 5px;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0;
}

.legal .req h2 {
  margin-top: 0;
}

.legal .req p:last-child,
.legal .req ul:last-child {
  margin-bottom: 0;
}

.key {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82em;
  letter-spacing: 0.06em;
  background: rgba(48, 82, 52, 0.08);
  border: 1px solid rgba(48, 82, 52, 0.22);
  border-radius: 4px;
  padding: 0.06em 0.42em;
  color: var(--color-dark-green);
}

.legal .contact {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(48, 82, 52, 0.18);
}

.legal .contact a {
  color: var(--color-amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(189, 110, 24, 0.4);
}

.legal .addr {
  font-style: normal;
  line-height: 1.75;
}

/* On this page: top card on mobile, sticky right rail on desktop */
.legal-toc {
  border: 1px solid rgba(48, 82, 52, 0.18);
  border-radius: 6px;
  padding: 1.25rem 1.4rem;
  margin: 0 0 2.5rem;
}

.legal-toc .toc-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-dark-green);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
}

.legal-toc .toc-h::before {
  content: '';
  width: 1.6rem;
  height: 3px;
  background: var(--color-amber);
  flex: none;
}

.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.legal-toc li {
  margin: 0 0 0.5rem;
}

.legal-toc a {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  text-decoration: none;
  color: #26331f;
  font-size: 0.95rem;
  line-height: 1.35;
}

.legal-toc a .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-amber);
  min-width: 1.4rem;
}

@media (hover: hover) {
  .legal-toc a:hover {
    color: var(--color-amber);
  }
}

@media (min-width: 64rem) {
  .legal-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--measure-read)) minmax(12rem, 1fr);
    column-gap: 3rem;
    align-items: start;
  }
  .legal-inner {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
  }
  .legal-toc {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 5rem;
    border: 0;
    border-left: 1px solid rgba(48, 82, 52, 0.18);
    border-radius: 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    margin: 0.4rem 0 0;
  }
}

@media print {
  .site-header,
  .legal-toc,
  .site-footer {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .page-hero {
    background: #fff !important;
    color: #000 !important;
    padding: 0 0 1rem !important;
    border-bottom: 2px solid #000;
  }
  .page-hero::after {
    display: none !important;
  }
  .page-hero .eyebrow,
  .page-hero .lede {
    color: #000 !important;
    opacity: 1 !important;
  }
  .page-hero h1 .accent,
  .legal h2,
  .legal h2 .secnum,
  .legal .meta {
    color: #000 !important;
  }
  .legal {
    padding: 1.25rem 0 0 !important;
  }
  .legal-grid {
    display: block !important;
  }
  .legal-inner {
    max-width: none !important;
  }
  .legal .req {
    background: #fff !important;
    border: 1px solid #000 !important;
    border-left: 3px solid #000 !important;
  }
  .key {
    background: #fff !important;
    border-color: #000 !important;
    color: #000 !important;
  }
  .legal .contact a {
    color: #000 !important;
  }
}

/* ---------- Open Positions ---------- */
.positions { padding: 4.25rem 0; }
.positions-intro {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: var(--space-3);
}
.positions-intro .eyebrow {
  color: var(--color-dark-green);
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0;
}
.positions-intro .eyebrow::before {
  content: ''; width: 2.1rem; height: 3px; background: var(--color-amber); flex: none;
}
.positions-small { font-size: 0.85rem; color: rgba(48, 82, 52, 0.6); margin: 0; }
#recruiterflow-jobs-iframe { width: 1px; min-width: 100%; border: 0; }

/* ============================================================
   How We Work: Phase 02 Market Map reveal (opt-in expander)
   ============================================================ */
.mm-trigger-row { margin-top: var(--space-2); }
.mm-trigger {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  color: var(--color-dark-green); background: transparent;
  border: 1.5px solid rgba(48, 82, 52, 0.28); border-radius: 6px;
  padding: 0.6rem 1.05rem; cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.mm-ic { position: relative; width: 0.8rem; height: 0.8rem; flex: none; }
.mm-ic::before, .mm-ic::after { content: ""; position: absolute; background: var(--color-amber); transition: transform 0.3s ease, opacity 0.3s ease; }
.mm-ic::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); }
.mm-ic::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
@media (hover: hover) { .mm-trigger:hover { border-color: var(--color-amber); color: var(--color-amber); transform: translateY(-2px); } }
.mm-trigger[aria-expanded="true"] .mm-ic::after { transform: translateX(-50%) scaleY(0); opacity: 0; }

.mm-panel { grid-column: 1 / -1; margin-top: var(--space-3); }
.mm-js .mm-panel:not(.open) { margin-top: 0; }
.mm-inner { display: grid; grid-template-rows: 1fr; }
.mm-js .mm-inner { grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mm-js .mm-panel.open .mm-inner { grid-template-rows: 1fr; }
.mm-clip { overflow: hidden; min-height: 0; }

.mm-wrap {
  border-radius: 1rem; color: var(--color-cream); padding: 3rem 2.4rem;
  background:
    url('assets/grain.svg'),
    radial-gradient(70rem 40rem at 50% -20%, rgba(66, 104, 70, 0.6), transparent 60%),
    radial-gradient(80rem 60rem at 100% 130%, rgba(16, 32, 20, 0.85), transparent 62%),
    var(--color-dark-green);
}
.mm-head { max-width: 44rem; margin-bottom: 1.6rem; }
.mm-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.04; color: var(--color-cream); margin-bottom: 0.7rem; }
.mm-lede { color: rgba(254, 250, 234, 0.8); }

.mm-system { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
.mm-field { grid-column: 1 / -1; margin-bottom: 1.4rem; }
.mm-field svg { display: block; width: 100%; height: auto; overflow: visible; }
.mm-field .cand { fill: var(--color-cream); }
/* Dots scatter in during the hold (drawing the eye down to the field) before
   the streams/targets resolve. Per-dot dimness lives on fill-opacity, so the
   animated element opacity (0 -> 1) just controls the fade. No-JS shows them. */
.mm-js .mm-field .cand { opacity: 0; transition: opacity 0.45s ease; }
.mm-js .mm-panel.open .mm-field .cand { opacity: 1; }
.mm-js .mm-panel.open .mm-field .cand:nth-of-type(6n+1) { transition-delay: 0s; }
.mm-js .mm-panel.open .mm-field .cand:nth-of-type(6n+2) { transition-delay: 0.55s; }
.mm-js .mm-panel.open .mm-field .cand:nth-of-type(6n+3) { transition-delay: 1s; }
.mm-js .mm-panel.open .mm-field .cand:nth-of-type(6n+4) { transition-delay: 0.25s; }
.mm-js .mm-panel.open .mm-field .cand:nth-of-type(6n+5) { transition-delay: 1.2s; }
.mm-js .mm-panel.open .mm-field .cand:nth-of-type(6n) { transition-delay: 0.78s; }
.mm-field .glow { fill: var(--color-amber); opacity: 0.16; transform-box: fill-box; transform-origin: center; }
.mm-field .ring { fill: none; stroke: var(--color-amber); stroke-width: 2.4; }
.mm-field .core { fill: var(--color-cream); }
.mm-field .mm-stream { fill: none; stroke-linecap: round; stroke-dasharray: 1; }
.mm-field .mm-stream--out { stroke: url(#mm-fade); }
.mm-field .mm-stream--keep { stroke: url(#mm-keep); stroke-width: 1.5; }

.mm-step { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-amber); }
.mm-step::before { content: ""; width: 1.4rem; height: 2px; background: var(--color-amber); }
.mm-label { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1; color: var(--color-cream); margin-top: 0.6rem; }
.mm-sub { color: rgba(254, 250, 234, 0.55); font-size: 0.92rem; margin: 0.5rem 0 1.3rem; }
.mm-item { padding: 1rem 0; border-top: 1px solid rgba(254, 250, 234, 0.08); }
.mm-item:first-of-type { border-top: none; }
.mm-item h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.15; color: var(--color-cream); position: relative; padding-left: 1.4rem; }
.mm-item h4::before { content: ""; position: absolute; left: 0; }
.mm-layer--territory .mm-item h4::before { top: 0.45em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: rgba(254, 250, 234, 0.5); }
.mm-layer--shortlist .mm-item h4::before { top: 0.4em; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: transparent; border: 2px solid var(--color-amber); }
.mm-item p { color: rgba(254, 250, 234, 0.5); font-size: 0.9rem; margin: 0.3rem 0 0 1.4rem; line-height: 1.4; }

.mm-close { margin-top: 2.2rem; display: inline-flex; align-items: center; gap: 0.55rem; background: none; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(254, 250, 234, 0.7); }
.mm-close::before { content: "\2191"; color: var(--color-amber); }
@media (hover: hover) { .mm-close:hover { color: var(--color-cream); } }

/* rail fades while the map is open so it never strands beside the panel */
.phase-list::before { transition: opacity 0.4s ease; }
.phase-list::after { transition: height 0.2s ease-out, opacity 0.4s ease; }
.phase-list.map-open::before, .phase-list.map-open::after { opacity: 0; }
.phase.mm-active { opacity: 1; }

/* field resolve: streams draw in from the market on irregular timing, the few light up (gated to .mm-js; no-JS shows resolved) */
.mm-js .mm-field .mm-stream { stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s ease; }
.mm-js .mm-panel.open .mm-field.mm-go .mm-stream { stroke-dashoffset: 0; }
.mm-js .mm-panel.open .mm-field.mm-go .mm-stream--out:nth-of-type(1) { transition-delay: 0s; }
.mm-js .mm-panel.open .mm-field.mm-go .mm-stream--out:nth-of-type(2) { transition-delay: 0.7s; }
.mm-js .mm-panel.open .mm-field.mm-go .mm-stream--out:nth-of-type(3) { transition-delay: 0.3s; }
.mm-js .mm-panel.open .mm-field.mm-go .mm-stream--out:nth-of-type(4) { transition-delay: 1.25s; }
.mm-js .mm-panel.open .mm-field.mm-go .mm-stream--out:nth-of-type(5) { transition-delay: 0.5s; }
.mm-js .mm-panel.open .mm-field.mm-go .mm-stream--out:nth-of-type(6) { transition-delay: 1s; }
.mm-js .mm-panel.open .mm-field.mm-go .mm-stream--out:nth-of-type(7) { transition-delay: 0.25s; }
.mm-js .mm-panel.open .mm-field.mm-go .mm-stream--out:nth-of-type(8) { transition-delay: 0.85s; }
.mm-js .mm-panel.open .mm-field.mm-go .mm-stream--out:nth-of-type(9) { transition-delay: 0.65s; }
.mm-js .mm-panel.open .mm-field.mm-go .mm-stream--keep:nth-of-type(1) { transition-delay: 0.35s; }
.mm-js .mm-panel.open .mm-field.mm-go .mm-stream--keep:nth-of-type(2) { transition-delay: 1.1s; }
.mm-js .mm-panel.open .mm-field.mm-go .mm-stream--keep:nth-of-type(3) { transition-delay: 0.75s; }
.mm-js .mm-panel.open .mm-field.mm-go .mm-stream--keep:nth-of-type(4) { transition-delay: 1.45s; }
.mm-js .mm-field .tgt { opacity: 0; transition: opacity 0.7s ease; }
.mm-js .mm-field .tgt .ring { transform-box: fill-box; transform-origin: center; transform: scale(0.3); transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mm-js .mm-panel.open .mm-field.mm-go .tgt { opacity: 1; }
.mm-js .mm-panel.open .mm-field.mm-go .tgt .ring { transform: scale(1); }
.mm-js .mm-panel.open .mm-field.mm-go .tgt .glow { animation: mm-pulse 2.9s ease-in-out infinite; }
.mm-js .mm-panel.open .mm-field.mm-go .tgt:nth-of-type(1), .mm-js .mm-panel.open .mm-field.mm-go .tgt:nth-of-type(1) .ring { transition-delay: 1.85s; }
.mm-js .mm-panel.open .mm-field.mm-go .tgt:nth-of-type(1) .glow { animation-delay: 1.85s; }
.mm-js .mm-panel.open .mm-field.mm-go .tgt:nth-of-type(2), .mm-js .mm-panel.open .mm-field.mm-go .tgt:nth-of-type(2) .ring { transition-delay: 2.6s; }
.mm-js .mm-panel.open .mm-field.mm-go .tgt:nth-of-type(2) .glow { animation-delay: 2.6s; }
.mm-js .mm-panel.open .mm-field.mm-go .tgt:nth-of-type(3), .mm-js .mm-panel.open .mm-field.mm-go .tgt:nth-of-type(3) .ring { transition-delay: 2.25s; }
.mm-js .mm-panel.open .mm-field.mm-go .tgt:nth-of-type(3) .glow { animation-delay: 2.25s; }
.mm-js .mm-panel.open .mm-field.mm-go .tgt:nth-of-type(4), .mm-js .mm-panel.open .mm-field.mm-go .tgt:nth-of-type(4) .ring { transition-delay: 2.95s; }
.mm-js .mm-panel.open .mm-field.mm-go .tgt:nth-of-type(4) .glow { animation-delay: 2.95s; }
@keyframes mm-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }

@media (max-width: 48rem) {
  .mm-panel { margin-right: var(--space-3); }
  .mm-system { grid-template-columns: 1fr; column-gap: 0; row-gap: 2rem; }
  .mm-wrap { padding: 2rem 1.4rem; }
  .mm-field { display: none; }
  /* On open, the inner content eases in as one staggered cascade instead of
     the whole block landing at once: header, then each layer's intro (kicker
     + name + subline) and its three bullets in turn. Driven by .open, not
     scroll, so it plays the same on any phone height. .mm-js gated and forced
     visible under reduce-motion below, so no-JS / reduced-motion show it all. */
  .mm-js .mm-head,
  .mm-js .mm-step, .mm-js .mm-label, .mm-js .mm-sub,
  .mm-js .mm-item {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .mm-js .mm-panel.open .mm-head,
  .mm-js .mm-panel.open .mm-step, .mm-js .mm-panel.open .mm-label, .mm-js .mm-panel.open .mm-sub,
  .mm-js .mm-panel.open .mm-item { opacity: 1; transform: none; }
  /* cascade order (each layer intro is step + label + sub; its three bullets
     are children 4, 5, 6 after that three-element intro) */
  .mm-js .mm-panel.open .mm-head { transition-delay: 0.05s; }
  .mm-js .mm-panel.open .mm-layer--territory .mm-step,
  .mm-js .mm-panel.open .mm-layer--territory .mm-label,
  .mm-js .mm-panel.open .mm-layer--territory .mm-sub { transition-delay: 0.2s; }
  .mm-js .mm-panel.open .mm-layer--territory .mm-item:nth-child(4) { transition-delay: 0.34s; }
  .mm-js .mm-panel.open .mm-layer--territory .mm-item:nth-child(5) { transition-delay: 0.46s; }
  .mm-js .mm-panel.open .mm-layer--territory .mm-item:nth-child(6) { transition-delay: 0.58s; }
  .mm-js .mm-panel.open .mm-layer--shortlist .mm-step,
  .mm-js .mm-panel.open .mm-layer--shortlist .mm-label,
  .mm-js .mm-panel.open .mm-layer--shortlist .mm-sub { transition-delay: 0.74s; }
  .mm-js .mm-panel.open .mm-layer--shortlist .mm-item:nth-child(4) { transition-delay: 0.88s; }
  .mm-js .mm-panel.open .mm-layer--shortlist .mm-item:nth-child(5) { transition-delay: 1s; }
  .mm-js .mm-panel.open .mm-layer--shortlist .mm-item:nth-child(6) { transition-delay: 1.12s; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-inner, .mm-field * { transition: none !important; animation: none !important; }
  .mm-head, .mm-step, .mm-label, .mm-sub, .mm-item { opacity: 1 !important; transform: none !important; }
}

/* Market Map field: the market / the few labels */
.mm-field .flabel { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; }
.mm-field .flabel-market { fill: rgba(254, 250, 234, 0.42); }
.mm-field .flabel-few { fill: var(--color-amber); }

/* Market Map input rows: hover lifts the row, brightens title + detail, activates the marker */
@media (hover: hover) {
  .mm-item { transition: transform 0.25s ease; }
  .mm-item:hover { transform: translateX(5px); }
  .mm-item h4, .mm-item p { transition: color 0.25s ease; }
  .mm-item h4::before { transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
  .mm-item:hover h4 { color: #ffffff; }
  .mm-item:hover p { color: rgba(254, 250, 234, 0.72); }
  .mm-layer--territory .mm-item:hover h4::before { background: var(--color-cream); transform: scale(1.2); }
  .mm-layer--shortlist .mm-item:hover h4::before { background: var(--color-amber); box-shadow: 0 0 0 3px rgba(189, 110, 24, 0.22); }
}