/* Hallmark · editorial-warm HYBRID · goldenpetbrands.com mockup
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 * direction: photography-forward (Freshpet / The Farmer's Dog register) + serif headlines kept
 * macrostructure: Photographic (alternating image+text) · nav: N6 masthead · footer: Ft1 mast + entity columns
 * tokens locked in tokens.css · contrast: pass (46–50)
 */

/* ============================================================ RESET */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  /* PREMIUM TYPOGRAPHY (2026-05-29 polish pass)
   * - font-optical-sizing: auto — turns on Fraunces's `opsz` axis so display
   *   type gets the flare the typeface was designed for and body stays
   *   legible at small sizes. One line, huge impact.
   * - hanging-punctuation: opening quotes + trailing punctuation hang outside
   *   the text block so the left/right edges align optically rather than
   *   mechanically. Apple / NYT / Aesop signature. Progressive enhancement —
   *   falls back gracefully where unsupported. */
  font-optical-sizing: auto;
  hanging-punctuation: first last;
}
body {
  margin: 0; overflow-x: clip;
  background: var(--color-paper); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* Common-ligature + contextual-alternate features for refined body text */
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1;
}
/* Brand signature — a thin orange→gold gradient hairline pinned to the very top
 * edge of every page, echoing the top bar on the official S-1 art. (2026-06-25) */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-amber));
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
}
img, picture, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 380; line-height: var(--leading-tight); color: var(--color-ink); overflow-wrap: anywhere; min-width: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
/* Refined inline link underlines — thin, offset below baseline, skips ink at descenders
 * so the line reads as a tasteful editorial mark rather than a hard rule. Body context only. */
.prose a, .lede a, p a {
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.2em;
}
/* Drop-caps on long-form prose — italic Fraunces, 3 lines tall, accent-ink color.
 * Applies to first paragraph of any .prose.stack-md or .long-form block. Magazine
 * feature signal. */
.prose.stack-md > p:first-child::first-letter,
.long-form > p:first-child::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: 3.4em;
  line-height: 0.85;
  float: left;
  margin: 0.08em 0.08em -0.1em 0;
  color: var(--color-accent-ink);
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;   /* stylistic-set if Fraunces variant supports */
}
@media (max-width: 600px) {
  .prose.stack-md > p:first-child::first-letter,
  .long-form > p:first-child::first-letter { font-size: 2.8em; }
}
a { color: inherit; }
ul, ol { margin: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================ LAYOUT */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.shell-wide { width: 100%; max-width: var(--shell-wide); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
section { padding-block: clamp(var(--space-xl), 5.5vw, var(--space-2xl)); }
.section-tight { padding-block: var(--space-xl); }
.rule { border: 0; border-top: 1px solid var(--color-rule); margin: 0; }

/* ============================================================ TYPE HELPERS */
.kicker { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-ink); margin: 0 0 var(--space-md); }
.lede { font-size: var(--text-xl); line-height: 1.45; color: var(--color-text); font-weight: 400; max-width: 46ch; text-wrap: pretty; }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--space-md); }
.muted { color: var(--color-text-3); }
.serif-em { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.nums { font-variant-numeric: tabular-nums; }

/* ============================================================ BUTTONS / LINKS (hybrid: softer, rounded)
 * Hover vocabulary:
 *   - All .btn variants get a subtle -1px lift on hover with --ease-spring (220ms)
 *     for tactile feel — combined with the existing color swap, it reads as "press-ready"
 *   - Active state pushes the lift back down to give satisfying click feedback
 *   - Arrow nudge stays at +3px translateX with --dur-short for snappy directional cue
 */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
  padding: 0.95em 1.75em; border-radius: var(--radius-pill); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  min-height: 44px;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out), transform 220ms var(--ease-spring),
              box-shadow 220ms var(--ease-spring);
}
/* Button glow vocabulary — the primary pill's idle state.
 * Two-layer shadow:
 *   1. inset 1px top-highlight — reads as "lit from above," gives the pill volume
 *   2. colored drop-shadow halo — color-mixed brand-tone, creates the soft glow
 * Hover boosts both layers (stronger inset + bigger/brighter halo).
 * .btn-ghost stays transparent at rest (no idle glow — would look strange without
 * a fill surface for the inset to read against). */
.btn-primary {
  background: var(--color-accent); color: var(--color-ink);
  box-shadow: 0 1px 0 var(--color-on-dark-soft-12) inset,
              0 6px 18px -10px color-mix(in oklch, var(--color-accent) 60%, transparent);
}
.btn-primary:hover, .btn-primary.is-hover, .btn-primary:focus-visible {
  background: var(--color-amber); transform: translateY(-1px);
  box-shadow: 0 1px 0 var(--color-on-dark-soft-15) inset,
              0 10px 28px -12px color-mix(in oklch, var(--color-accent) 75%, transparent);
}
.btn-primary:active, .btn-primary.is-active { transform: translateY(0); box-shadow: 0 1px 0 var(--color-on-dark-soft-12) inset, 0 3px 10px -8px color-mix(in oklch, var(--color-accent) 50%, transparent); }
/* .btn-ghost — secondary CTA. Gets a faint idle glow so it doesn't read as
 * flat next to .btn-primary. The two-layer shadow uses ink-tone (not accent)
 * to preserve hierarchy: primary still "wins" with the warm orange halo, but
 * ghost no longer looks unfinished at rest. Borrowed from the IR-page pairing
 * (.btn-on-dark + .btn-ghost) which Brittany flagged as the gold standard. */
.btn-ghost {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-rule-strong);
  box-shadow: 0 1px 0 var(--color-on-dark-soft-06) inset,
              0 4px 14px -10px color-mix(in oklch, var(--color-ink) 18%, transparent);
}
.btn-ghost:hover, .btn-ghost.is-hover, .btn-ghost:focus-visible {
  border-color: var(--color-ink); background: var(--color-paper-2); transform: translateY(-1px);
  box-shadow: 0 1px 0 var(--color-on-dark-soft-08) inset,
              0 8px 22px -12px color-mix(in oklch, var(--color-ink) 32%, transparent);
}
.btn-ghost:active { transform: translateY(0); box-shadow: 0 1px 0 var(--color-on-dark-soft-06) inset, 0 3px 10px -8px color-mix(in oklch, var(--color-ink) 20%, transparent); }
.btn-on-dark {
  background: var(--color-paper); color: var(--color-ink);
  box-shadow: 0 1px 0 var(--color-on-dark-soft-20) inset,
              0 6px 18px -10px color-mix(in oklch, var(--color-amber) 50%, transparent);
}
.btn-on-dark:hover, .btn-on-dark:focus-visible {
  background: var(--color-amber); transform: translateY(-1px);
  box-shadow: 0 1px 0 var(--color-on-dark-soft-25) inset,
              0 10px 28px -12px color-mix(in oklch, var(--color-amber) 70%, transparent);
}
.btn-on-dark:active { transform: translateY(0); box-shadow: 0 1px 0 var(--color-on-dark-soft-15) inset, 0 3px 10px -8px color-mix(in oklch, var(--color-amber) 40%, transparent); }
.btn .arrow, .link-line .arrow { transition: transform var(--dur-short) var(--ease-out); }
.btn:hover .arrow, .btn.is-hover .arrow, .link-line:hover .arrow, .btn:focus-visible .arrow, .link-line:focus-visible .arrow { transform: translateX(3px); }

.link-line {
  position: relative; display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap;
  font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.01em; text-decoration: none; color: var(--color-accent-ink);
  padding-bottom: 3px; border-bottom: 2px solid var(--color-rule);
  min-height: 44px;
}
.link-line::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-med) var(--ease-out); }
.link-line:hover::after, .link-line.is-hover::after, .link-line:focus-visible::after { transform: scaleX(1); }

/* Global focus-visible — soft accent ring + halo. Outline follows the element's
 * border-radius in modern browsers; the box-shadow glow adds depth. Transition
 * on outline-offset gives the ring a tiny "snap out" feel when it appears so
 * keyboard users get the same tactile cue as a hover lift. */
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 5px var(--color-accent-glow);
  transition: outline-offset 240ms var(--ease-spring), box-shadow 240ms var(--ease-soft);
}
@media (prefers-reduced-motion: reduce) {
  :where(a, button, summary, input, [tabindex]):focus-visible { transition: none; }
}

/* ============================================================ NAV — polished masthead (N6) */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  /* Frosted glass lives on .nav::before, NOT on .nav itself. A backdrop-filter
   * (like transform/filter) on .nav would make it the CONTAINING BLOCK for the
   * position:fixed mobile-menu overlay (a descendant), clipping the overlay to
   * the ~80px nav bar instead of the viewport — the "page shows through the
   * open menu" bug. Putting the filter on a non-ancestor pseudo-element keeps
   * the frosted look while leaving .nav trap-free on every browser, iOS Safari
   * included (where toggling the filter off mid-interaction is unreliable).
   * (2026-06-03) */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    border-color 420ms var(--ease-soft),
    box-shadow 420ms var(--ease-soft);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in oklch, var(--color-paper) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  transition: background-color 420ms var(--ease-soft);
}
.nav.is-scrolled {
  border-bottom-color: color-mix(in oklch, var(--color-rule) 80%, transparent);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--color-ink) 4%, transparent),
              0 8px 24px -16px color-mix(in oklch, var(--color-ink) 18%, transparent);
}
.nav.is-scrolled::before {
  background: color-mix(in oklch, var(--color-paper) 92%, transparent);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
  transition: padding-block 360ms var(--ease-soft);
}
.nav.is-scrolled .nav-inner { padding-block: calc(var(--space-md) * 0.72); }

/* Logo — quiet, with a tiny hover lift */
.nav-logo {
  display: inline-flex; align-items: center; flex-shrink: 0;
  transition: opacity 220ms var(--ease-soft), transform 320ms var(--ease-soft);
}
.nav-logo img {
  height: 54px; width: auto;
  transition: height 360ms var(--ease-soft);
}
.nav.is-scrolled .nav-logo img { height: 44px; }
.nav-logo:hover { opacity: 0.88; }
.nav-logo:active { transform: translateY(0.5px); }

/* Links list */
.nav-links {
  display: flex; align-items: center;
  gap: clamp(0.25rem, 1vw, 0.6rem);
  list-style: none; padding: 0; margin: 0;
}

/* Link — refined hover-pill with underline */
.nav-links a {
  position: relative;
  display: inline-flex; align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-text);
  padding: 0.55em 0.85em;
  border-radius: var(--radius-md);
  transition:
    color 220ms var(--ease-soft),
    background-color 220ms var(--ease-soft);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--color-ink); background: color-mix(in oklch, var(--color-paper-2) 60%, transparent); }
.nav-links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Slim underline (sits below the pill so it reads as a publication mark) */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0.85em; right: 0.85em;
  bottom: 0.18em;
  height: 1.5px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-soft);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }

/* Active page — solid ink color + filled underline mark + tiny amber dot prefix */
.nav-links a[aria-current="page"] { color: var(--color-ink); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); background: var(--color-ink); height: 1.5px; }
.nav-links a[aria-current="page"]::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 0.4em;
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Hamburger toggle hidden on desktop */
.nav-toggle, .nav-toggle-label { display: none; }

@media (max-width: 940px) {
  .nav-toggle-label {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    cursor: pointer;
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius-md);
    background: var(--color-paper);
    transition: background-color 220ms var(--ease-soft), border-color 220ms var(--ease-soft);
  }
  .nav-toggle-label:hover { background: var(--color-paper-2); border-color: var(--color-ink); }
  /* Keyboard focus ring on the hamburger (Apple-pattern: visible focus for
     keyboard users, suppressed for mouse via :focus-visible). 2026-06-03. */
  .nav-toggle-label:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

  /* Keep the logo + close-X above the full-screen overlay (z 90) so the X
   * stays visible and tappable once the overlay fills the viewport. The overlay
   * fills the viewport correctly because .nav no longer carries a
   * backdrop-filter (moved to .nav::before — see the .nav rule above). */
  .nav-logo,
  .nav-toggle-label { position: relative; z-index: 95; }
  .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
    content: ""; display: block;
    width: 20px; height: 1.5px;
    background: var(--color-ink);
    position: relative;
    transition: transform 320ms var(--ease-soft), opacity 220ms var(--ease-soft), top 320ms var(--ease-soft);
  }
  .nav-toggle-label span::before { position: absolute; top: -6px; }
  .nav-toggle-label span::after { position: absolute; top: 6px; }
  /* FULL-SCREEN MOBILE MENU TAKEOVER (ported from Concrete template DNA).
   * Replaces the previous dropdown (max-height: 32rem). Now covers entire
   * viewport with massive italic Fraunces stacked menu items. z-index: 90
   * sits BELOW the sticky nav (.nav z-index 100) so the logo + close-X
   * stay visible at top. Body scroll lock via body:has(:checked). */
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 90;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--color-paper);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-bottom: 0;
    padding: clamp(7rem, 18vw, 10rem) clamp(2rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.015);
    transition: opacity 360ms var(--ease-soft),
                transform 360ms var(--ease-soft),
                visibility 360ms;
  }
  .nav-links li {
    width: 100%;
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 480ms var(--ease-soft), transform 520ms var(--ease-soft);
    border-bottom: 1px solid color-mix(in oklch, var(--color-accent) 22%, var(--color-rule));
    padding: 0;
  }
  .nav-links li:first-child { border-top: 1px solid color-mix(in oklch, var(--color-accent) 22%, var(--color-rule)); }
  .nav-links a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    padding: clamp(0.9rem, 3vw, 1.4rem) 0;
    border-radius: 0;
    border-bottom: 0;
    /* Sofia Sans — brand/logo font (2026-06-03: was italic Newsreader display
       serif, a leftover from the Concrete template. Mobile menu now matches the
       brand wordmark + desktop nav). */
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 600;
    font-size: clamp(1.75rem, 6.5vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    background: transparent;
    transition: color var(--dur-short) var(--ease-out), padding-left 320ms var(--ease-spring);
  }
  .nav-links a::after {
    /* Chevron — accent-orange, slides on hover/focus. Sofia Sans to match the
       menu items (2026-06-03). */
    content: "›";
    position: static;
    transform: translateX(0);
    background: transparent;
    width: auto;
    height: auto;
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 500;
    font-size: 0.8em;
    color: var(--color-accent);
    opacity: 0.4;
    transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
  }
  .nav-links a::before { display: none; }
  .nav-links a:hover, .nav-links a:focus-visible {
    background: transparent;
    color: var(--color-accent-ink);
    padding-left: clamp(0.5rem, 2vw, 1rem);
  }
  .nav-links a:hover::after, .nav-links a:focus-visible::after {
    opacity: 1;
    transform: translateX(4px);
  }
  .nav-links a[aria-current="page"] {
    color: var(--color-accent-ink);
    padding-left: clamp(0.5rem, 2vw, 1rem);
  }
  .nav-links a[aria-current="page"]::after { opacity: 1; }

  /* Open state — cascade reveal of items */
  .nav-toggle:checked ~ .nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
  }
  .nav-toggle:checked ~ .nav-links li { opacity: 1; transform: translateX(0); }
  .nav-toggle:checked ~ .nav-links li:nth-child(1) { transition-delay: 120ms; }
  .nav-toggle:checked ~ .nav-links li:nth-child(2) { transition-delay: 180ms; }
  .nav-toggle:checked ~ .nav-links li:nth-child(3) { transition-delay: 240ms; }
  .nav-toggle:checked ~ .nav-links li:nth-child(4) { transition-delay: 300ms; }
  .nav-toggle:checked ~ .nav-links li:nth-child(5) { transition-delay: 360ms; }
  .nav-toggle:checked ~ .nav-links li:nth-child(6) { transition-delay: 420ms; }

  /* Body scroll lock when menu is open — modern :has() selector. Falls back
   * gracefully (no lock) in browsers without :has() support (Firefox <121).
   * The nav-toggle change listener in site.js also enforces this via class. */
  body:has(.nav-toggle:checked) { overflow: hidden; }
  body.nav-open .nav { position: fixed; top: 0; left: 0; right: 0; }

  .nav-toggle:checked ~ .nav-toggle-label span { transform: rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-label span::before { transform: rotate(90deg); top: 0; }
  .nav-toggle:checked ~ .nav-toggle-label span::after { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav-inner, .nav-logo, .nav-logo img,
  .nav-links a, .nav-links a::after, .nav-links a::before,
  .nav-toggle-label, .nav-toggle-label span,
  .nav-links li { transition: none !important; }
}

/* ============================================================ HERO (photography-forward split) */
.hero { padding-block: clamp(var(--space-xl), 6vw, var(--space-2xl)) var(--space-xl); }
.hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hero h1 { font-size: var(--text-display); font-weight: 340; letter-spacing: -0.02em; }
.hero h1.long { font-size: var(--text-display-s); font-weight: 360; line-height: 1.08; }
.hero .lede { margin-top: var(--space-lg); }
/* About hero (2026-06-25 polish): the copy column (h1 + verbatim P1 + identity P2) runs
 * much taller than the fixed-height photo, leaving a void below the photo. On desktop,
 * stretch the photo into a full-height panel aligned top-to-bottom with the copy. */
@media (min-width: 861px) {
  .page-about .hero-grid { align-items: stretch; }
  .page-about .hero-figure img { height: 100%; min-height: clamp(18rem, 30vw, 24rem); }
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }
.hero-figure { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.hero-figure img { width: 100%; height: clamp(15rem, 32vw, 23rem); object-fit: cover; }
.hero-figure figcaption { position: absolute; left: var(--space-md); bottom: var(--space-md); background: color-mix(in oklch, var(--color-ink) 82%, transparent); color: var(--color-on-dark); font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase; padding: 0.55em 0.95em; border-radius: var(--radius-pill); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .hero-figure { order: -1; }
  .hero-figure img { height: clamp(14rem, 52vw, 22rem); }
}

/* ============================================================ TRUST STRIP */
.trust { background: var(--color-paper-2); border-block: 1px solid var(--color-rule); }
.trust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-sm) clamp(1rem, 3vw, 2.4rem); padding-block: var(--space-md); text-align: center; }
.trust .label { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-3); width: 100%; }
.trust .item { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); font-weight: 400; }
.trust .dot { color: var(--color-rule-strong); }

/* ============================================================ PROOF-POINTS CHECKLIST (TFD-inspired credibility) */
.proof-points { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-lg); }
.proof-points li { display: grid; grid-template-columns: 0.85em 1fr; gap: 0.7em; align-items: baseline; font-size: var(--text-sm); color: var(--color-text-2); line-height: 1.5; }
.proof-points li::before { content: "—"; font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--color-accent); justify-self: start; font-size: 1em; }
.proof-points b { color: var(--color-ink); font-weight: 600; }
@media (max-width: 560px) { .proof-points { grid-template-columns: 1fr; } }

/* ============================================================ COPY LIST (prose → bullets, v12.56 design) */
/* Descriptive bullet list: bold label + sentence. Marker reuses the proof-points italic accent dash. */
.copy-list { list-style: none; padding: 0; margin: var(--space-md) 0 0; max-width: 72ch; }
.copy-list li { position: relative; padding-left: 1.5em; line-height: 1.55; color: var(--color-text-2); }
.copy-list li + li { margin-top: var(--space-sm); }
.copy-list li::before { content: "—"; position: absolute; left: 0; top: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--color-accent); }
.copy-list strong { color: var(--color-ink); font-weight: 600; }

/* ============================================================ STAT ROW */
.statrow { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-lg); }
.statrow .stat { display: flex; flex-direction: column; gap: 2px; }
.statrow .stat .num { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 360; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.statrow .stat .lab { font-size: var(--text-sm); color: var(--color-text-2); }
@media (max-width: 720px) { .statrow { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-lg) var(--space-md); } }

/* ============================================================ SECTION HEAD */
.shead { max-width: 54ch; margin-bottom: var(--space-xl); }
.shead h2 { font-size: var(--text-3xl); font-weight: 340; letter-spacing: -0.018em; line-height: 1.08; }
.shead .lede { margin-top: var(--space-md); }
.shead-wide { max-width: 66ch; }
.shead.center { margin-inline: auto; text-align: center; }
.shead.center .lede { margin-inline: auto; }

/* ============================================================ BANDS */
.band-paper-2 { background: var(--color-paper-2); }
.band-paper-3 { background: var(--color-paper-3); }
.band-ink {
  /* Subtle paper-texture overlay on dark bands — feels like printed magazine ink
   * rather than flat digital fill. Inline SVG turbulence noise at very low opacity,
   * blended via overlay so it reads through the ink without shifting hue.
   * 2026-05-29 polish pass — adds tactile depth. */
  background-color: var(--color-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
  color: var(--color-on-dark-2);
}
.band-ink h1, .band-ink h2, .band-ink h3 { color: var(--color-on-dark); }
.band-ink .kicker { color: var(--color-amber); }
.band-ink .lede, .band-ink .muted { color: var(--color-on-dark-2); }
.band-ink .rule { border-top-color: var(--color-rule-dark); }

/* Footnote (v12.77) — legal/eligibility fine print (e.g. Careers ESOP asterisk).
   Small, muted, hanging asterisk so the "*" lines up under the body text.
   Surface-aware: dark-band variant uses the on-dark muted token for contrast. */
.footnote {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-3);
  max-width: 60ch;
  margin: var(--space-md) 0 0;
  padding-left: 0.9em;
  text-indent: -0.9em;
}
.band-ink .footnote { color: var(--color-on-dark-2); }

/* ============================================================ PREMIUM ATMOSPHERIC DEPTH (2026-05-29)
 * Tier B premium polish — subtle marks of craft that earn the "premium" read.
 *
 * 5. PHOTO VIGNETTES — soft inset shadow on feature image containers. Adds
 *    cinematic depth without dimming the image. Composed with existing
 *    box-shadows so the surface lift stays intact.
 * 6. BRANDED SCROLLBAR — slim accent-toned scrollbar replaces the OS default.
 *    Subtle premium signal: even the scroll-track is brand-coordinated.
 * 7. EDITORIAL EYEBROW IDLE BREATHE — once the rule has drawn in, it slow-
 *    breathes (scaleX 1 ↔ 1.06) on a 6s loop. Barely perceptible — the kind
 *    of motion that makes a page feel "alive" without distracting.
 */

/* 5. PHOTO VIGNETTES — feature image containers get a soft inset accent shadow */
.hero-figure {
  box-shadow: var(--shadow-card),
              inset 0 0 80px -30px color-mix(in oklch, var(--color-ink) 55%, transparent);
}
.hero-poster .poster-media {
  box-shadow: inset 0 0 100px -36px color-mix(in oklch, var(--color-ink) 50%, transparent);
}
.split-media, .facility-media:not(.facility-media-ph) {
  box-shadow: var(--shadow-soft),
              inset 0 0 60px -24px color-mix(in oklch, var(--color-ink) 50%, transparent);
}

/* 6. BRANDED SCROLLBAR — minimal accent-toned scrollbar (WebKit + Firefox) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-paper-2); }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--color-accent-ink) 55%, transparent);
  border-radius: 6px;
  border: 2px solid var(--color-paper-2);
  background-clip: padding-box;
  transition: background var(--dur-short) var(--ease-out);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-accent-ink); }
html { scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--color-accent-ink) 60%, transparent) var(--color-paper-2); }

/* 7. EDITORIAL EYEBROW IDLE BREATHE — barely-perceptible 6s loop once the rule
 *    has drawn in. Starts after the draw-in transition + delay complete (~1s).
 *    The animation overrides the transition's static end-state because animations
 *    win on the same property after transitions resolve. */
@keyframes eyebrow-breathe {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(1.06); }
}
html.js .reveal.in .editorial-eyebrow::before {
  animation: eyebrow-breathe 6s var(--ease-in-out) infinite;
  animation-delay: 1.2s;
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal.in .editorial-eyebrow::before { animation: none; }
}

/* ============================================================ PREMIUM EDITORIAL DETAIL (2026-05-29)
 * Tier C — magazine-feature touches.
 *
 * 8. PULL-QUOTE TREATMENT — .brand-tagline elements (existing on our-brands.html)
 *    upgraded to read as proper magazine pull-quotes: hairlines top + bottom,
 *    decorative ❝ mark, display-scale italic Fraunces. Visual upgrade only,
 *    no copy added.
 * 9. FOCUS-RING BREATHE — the :focus-visible accent halo gently pulses on a
 *    2.2s loop so keyboard users get a soft "you're here" cue.
 */

/* 8. PULL-QUOTE — upgrade existing .brand-tagline to magazine-feature treatment */
.brand-tagline {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--color-ink);
  max-width: 28ch;
  margin: clamp(2rem, 4vw, 3rem) auto;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  text-wrap: balance;
  /* 2026-05-30: borders changed from accent-tinted to neutral rule. Earlier
   * iteration used color-mix(accent 30%, rule) which rendered pink on the
   * near-white paper background — Brittany flagged twice. Neutral hairline
   * is the Apple-esque move anyway. */
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.brand-tagline::before {
  content: "\201C";   /* curly opening quote */
  display: block;
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6em;
  color: var(--color-accent-ink);
  line-height: 0.4;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}
.brand-tagline em.accent-em { font-style: italic; color: inherit; }

/* 9. FOCUS-RING BREATHE — subtle pulse on the existing focus halo */
@keyframes focus-breathe {
  0%, 100% { box-shadow: 0 0 0 5px var(--color-accent-glow); }
  50%      { box-shadow: 0 0 0 7px color-mix(in oklch, var(--color-accent) 22%, transparent); }
}
:where(a, button, summary, input, [tabindex]):focus-visible {
  animation: focus-breathe 2.2s var(--ease-in-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  :where(a, button, summary, input, [tabindex]):focus-visible { animation: none; }
}

/* ============================================================ INTERACTIVE POLISH (2026-05-29)
 * Three coordinated micro-interactions wired up in site.js:
 *   - Magnetic CTAs (pull toward cursor) — uses the `translate` property which
 *     composes WITH `transform` so existing :hover transform: translateY(-1px)
 *     still works on top of the magnet pull
 *   - Cursor-following spotlight on the hero poster image
 *   - Back-to-top floating button (appears after hero, hides on scroll-up)
 */

/* Magnetic pull — site.js sets --magnet-x / --magnet-y on the element
 * when the cursor is within ~80px. The `translate` property is independent
 * from `transform` so it composes cleanly with hover-state lifts. */
.btn-primary, .concrete-pill {
  translate: var(--magnet-x, 0) var(--magnet-y, 0);
  transition: translate 320ms var(--ease-spring),
              background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform 220ms var(--ease-spring),
              box-shadow 220ms var(--ease-spring);
}

/* (REMOVED 2026-06-01 anti-AI: cursor-following hero spotlight — Vercel template tell.
 * Was a radial accent halo following the cursor over the hero photo. The forensic
 * design scan flagged it as one of the 4 loudest AI-design-tool signals on the site. */

/* Sticky contact pill — replaced the floating back-to-top utility circle 2026-05-29.
 * Ported from /concrete-experimental-home.html. Italic Fraunces mailto pill, fixed
 * bottom-right, fades in after the user scrolls past 80% of the hero. Conversion
 * move (one-click to press@goldenpetbrands.com) instead of wayfinding utility. */
.sticky-contact {
  position: fixed;
  bottom: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-overlay);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: var(--text-base);
  padding: 0.85em 1.5em;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-on-dark);
  text-decoration: none;
  box-shadow: 0 1px 0 var(--color-on-dark-soft-12) inset,
              0 14px 36px -14px color-mix(in oklch, var(--color-ink) 60%, transparent);
  opacity: 0;
  transform: translateY(20px) scale(0.92);
  pointer-events: none;
  transition: opacity 320ms var(--ease-soft),
              transform 360ms var(--ease-spring),
              background var(--dur-short) var(--ease-out),
              box-shadow 220ms var(--ease-soft);
}
.sticky-contact.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.sticky-contact:hover, .sticky-contact:focus-visible {
  background: var(--color-accent-ink);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 1px 0 var(--color-on-dark-soft-15) inset,
              0 20px 44px -14px color-mix(in oklch, var(--color-accent) 50%, transparent);
}
.sticky-contact .arrow {
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  transition: transform var(--dur-short) var(--ease-out);
}
.sticky-contact:hover .arrow, .sticky-contact:focus-visible .arrow {
  transform: translateX(4px);
}
.sticky-contact .lead { color: var(--color-amber); }
.sticky-contact .trail { font-weight: 380; }
@media (max-width: 540px) {
  .sticky-contact { font-size: var(--text-sm); padding: 0.75em 1.2em; gap: 0.4em; }
  .sticky-contact .lead { display: none; }   /* on small phones, just "→ Get in touch" */
}
@media (prefers-reduced-motion: reduce) {
  .sticky-contact { transition: opacity 200ms linear; transform: none; }
  .sticky-contact.is-visible { transform: none; }
}

/* ============================================================ ANCHOR-LINK ARRIVAL PULSE
 * When the user deep-links to a section (e.g., /about.html#manufacturing-and-food-safety),
 * site.js adds .is-arriving to the target — the section briefly pulses with an accent
 * halo so the reader sees "I arrived here." Self-removing after 1.4s. */
@keyframes arrive-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 35%, transparent); }
  40%  { box-shadow: 0 0 0 18px color-mix(in oklch, var(--color-accent) 12%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
section.is-arriving, .person.is-arriving, .facility.is-arriving {
  animation: arrive-pulse 1400ms var(--ease-soft);
  border-radius: var(--radius-md);
}
@media (prefers-reduced-motion: reduce) {
  section.is-arriving, .person.is-arriving, .facility.is-arriving { animation: none; }
}

/* ============================================================ SPLIT (alternating image + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* Split-media — premium polish (2026-05-30): cinematic layered shadow,
 * slow inner image zoom on hover, frame lift with easeOutQuint deceleration.
 * Same vocabulary as .photo-strip — consistent treatment for Careers imagery. */
.split.reverse .split-media { order: 2; }
.split-media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* Layered cinematic shadow stack matching .photo-strip vocabulary */
  box-shadow:
    0 18px 44px -20px color-mix(in oklch, var(--color-ink) 22%, transparent),
    0 4px 12px -4px color-mix(in oklch, var(--color-ink) 10%, transparent),
    0 1px 0 color-mix(in oklch, var(--color-ink) 6%, transparent) inset;
  transition:
    transform 540ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 540ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.split-media img {
  width: 100%;
  height: clamp(18rem, 40vw, 32rem);
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1), filter 540ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  filter: saturate(0.96);
}
/* Hover: frame lifts -3px, image slowly zooms (1.04) inside the clipped frame.
 * Saturation bumps to full. Reads as cinematic "rising into focus" motion. */
.split-media:hover {
  transform: translateY(-3px);
  box-shadow:
    0 32px 64px -22px color-mix(in oklch, var(--color-ink) 30%, transparent),
    0 8px 22px -4px color-mix(in oklch, var(--color-ink) 15%, transparent),
    0 1px 0 color-mix(in oklch, var(--color-ink) 8%, transparent) inset;
}
.split-media:hover img {
  transform: scale(1.04);
  filter: saturate(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .split-media, .split-media img { transition: none; }
  .split-media:hover { transform: none; }
  .split-media:hover img { transform: none; }
}
.split-body { max-width: 52ch; }
.split-body .lede { margin-top: var(--space-md); }
@media (max-width: 820px) { .split, .split.reverse { grid-template-columns: 1fr; gap: var(--space-lg); } .split.reverse .split-media { order: 0; } }

/* ============================================================ "WHAT WE DO" numbered editorial blocks */
.numbered { display: grid; gap: 0; }
.numbered .row { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.numbered .row:last-child { border-bottom: 1px solid var(--color-rule); }
.numbered .row .n { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent-ink); font-variant-numeric: tabular-nums; line-height: 1; padding-top: 0.15em; }
.numbered .row h3 { font-size: var(--text-xl); font-weight: 400; margin-bottom: var(--space-sm); }
.numbered .row p { color: var(--color-text-2); max-width: 60ch; }
@media (max-width: 600px) { .numbered .row { grid-template-columns: 1fr; gap: var(--space-xs); } }

/* ============================================================ BRAND PORTFOLIO CARDS (photo-topped, home) */
/* align-items: stretch (default, omitted) so all three cards equalize to the tallest
 * regardless of body-copy length. .brand-card .body uses flex: 1 + the CTA gets
 * margin-top: auto further down so footers line up cleanly. */
.brand-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.brand-card { display: flex; flex-direction: column; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 320ms var(--ease-spring), box-shadow 320ms var(--ease-soft), border-color var(--dur-med) var(--ease-out); }
.brand-card:hover, .brand-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--color-rule-strong); }
.brand-card .ph { aspect-ratio: 4/3; width: 100%; overflow: hidden; background: var(--color-paper-3); }
.brand-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.brand-card .body { padding: var(--space-md) var(--space-md) var(--space-lg); display: flex; flex-direction: column; flex: 1; border-top: 1px solid var(--color-rule); }
/* Backpack-style category band — sits atop each brand card */
.brand-card .cat-band { background: var(--color-paper-2); color: var(--color-accent-ink); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.65em 1em; text-align: center; border-bottom: 1px solid var(--color-rule); }
.brand-card .cat { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-ink); margin-bottom: var(--space-xs); }
.brand-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.brand-card p { color: var(--color-text-2); font-size: var(--text-base); flex: 1; }
.brand-card .tagline { font-family: var(--font-display); font-style: italic; color: var(--color-ink); margin-block: var(--space-sm); }
.brand-card .link-line { margin-top: var(--space-sm); align-self: flex-start; }
@media (max-width: 800px) { .brand-cards { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }
/* honest placeholder for a missing brand photo — clearly intentional, not invented stock */
.ph-brandmark { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: var(--space-sm); background: linear-gradient(155deg, var(--color-paper-2), var(--color-paper-3)); padding: var(--space-lg); text-align: center; }
.ph-brandmark img { width: auto; max-height: 58px; }
.ph-brandmark .ph-word { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent-ink); }

/* ============================================================ RECOGNITION STRIP — Apple-esque v2 (2026-05-30)
 *
 * Editorial card grid. 9 awards. Premium typography, generous whitespace,
 * subtle hover lift. Design vocabulary inspired by Apple/Linear product
 * retrospective sections — content-forward, minimal decoration, one accent.
 *
 * Structure:
 *   .recognition-band — section wrapper (just adds extra vertical padding)
 *   .recog-grid       — 3-col responsive card grid (2-col tablet, 1-col mobile)
 *   .award-card       — individual award card
 *     .award-year     — oversized Fraunces italic accent (the visual hook)
 *     .award-org      — small all-caps tracked label (Hermes/Stevie/Pet Innov.)
 *     .award-title    — body-weight title in ink
 *     .award-subject  — italic brand attribution
 *   .recog-foot       — closing line below the grid
 */
.recognition-band { padding-block: clamp(var(--space-2xl), 9vw, calc(var(--space-2xl) * 1.5)); }

.recog-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-rule);
  border-left: 1px solid var(--color-rule);
}
.award-card {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2rem);
  border-right: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-paper);
  position: relative;
  transition: background var(--dur-short) var(--ease-out), transform 320ms var(--ease-spring), box-shadow 320ms var(--ease-spring);
  min-height: 14rem;
}
.award-card:hover, .award-card:focus-within {
  background: var(--color-paper-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px color-mix(in oklch, var(--color-ink) 22%, transparent);
  z-index: 1;
}
.award-card .award-year {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(2.75rem, 5vw, 4.2rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--color-accent-ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-md);
}
.award-card .award-org {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-3);
  font-weight: 500;
  margin-bottom: 0.4em;
}
.award-card .award-title {
  font-family: var(--font-display);
  font-weight: 420;
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.01em;
}
.award-card .award-title b {
  font-weight: 600;
  color: var(--color-accent-ink);
}
.award-card .award-subject {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-2);
  margin-top: auto;
  padding-top: var(--space-sm);
}
.award-card .award-subject em {
  font-style: normal;
  font-weight: 600;
  color: var(--color-ink);
}
.award-card .award-subject i {
  font-style: italic;
  color: var(--color-text-2);
}

.recog-foot {
  margin-top: var(--space-xl);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.4;
  color: var(--color-text-2);
  max-width: 56ch;
}

/* Responsive — collapse to 2-col on tablet, 1-col on mobile */
@media (max-width: 900px) {
  .recog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .recog-grid { grid-template-columns: 1fr; }
  .award-card .award-year { font-size: 2.5rem; }
  .award-card { min-height: 12rem; }
}

/* ============================================================ VALUES (editorial 2-col, no icon tiles) */
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4rem); }
.values .v { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); }
.values .v .n { font-variant-numeric: tabular-nums; color: var(--color-accent-ink); font-family: var(--font-display); font-size: var(--text-lg); }
.values .v h3 { font-size: var(--text-lg); font-weight: 400; margin-bottom: 2px; }
.values .v p { color: var(--color-text-2); font-size: var(--text-sm); }
@media (max-width: 720px) { .values { grid-template-columns: 1fr; } }

/* ============================================================ BRAND CHAMPIONS (About — founders w/ photos) */
.champions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 2.8rem); margin-top: var(--space-xl); }
.champions .champ { text-align: center; }
/* Explicit equal square (not width:100%+aspect-ratio) so intrinsic width/height
   img attributes — added in the CLS pass — can't distort it into a tall ellipse.
   Mirrors the leadership .person img.portrait hotfix. (2026-06-03) */
.champions .portrait { width: clamp(8rem, 22vw, 10rem); height: clamp(8rem, 22vw, 10rem); object-fit: cover; object-position: center 25%; border-radius: 50%; margin-inline: auto; box-shadow: var(--shadow-soft); background: var(--color-paper-3); }
.champions .portrait-ph { display: grid; place-items: center; border: 1px dashed var(--color-rule-strong); box-shadow: none; }
.champions .portrait-ph .ph-mono { font-family: var(--font-display); font-size: 2.6rem; color: var(--color-accent); opacity: 0.5; }
.champions h3 { font-size: var(--text-lg); font-weight: 500; margin-top: var(--space-md); }
.champions .role { font-size: var(--text-sm); color: var(--color-accent-ink); font-weight: 600; margin-top: 2px; }
.champions .role::after { content: ""; display: block; width: 2rem; height: 2px; background: var(--color-accent); margin: var(--space-sm) auto 0; }
.champions .bio { font-size: var(--text-sm); color: var(--color-text-2); margin-top: var(--space-md); text-align: left; }
@media (max-width: 820px) { .champions { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; } .champions .bio { text-align: center; } }

/* ============================================================ VISION + MISSION (2026-05-30)
 *
 * Restored as a distinct labeled section on about.html. Vision and Mission
 * sit side-by-side as two editorial moments — paper backplate per block,
 * small accent label, Fraunces italic statement with accent emphasis on
 * the closing phrase. Mirrors the brand-section vocabulary (presented
 * surfaces, Apple-esque editorial rhythm).
 */
.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--space-xl);
}
.vm-block {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 var(--color-on-dark-soft-06) inset,
              0 1px 2px color-mix(in oklch, var(--color-ink) 5%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.vm-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 var(--color-on-dark-soft-08) inset,
              0 8px 24px -8px color-mix(in oklch, var(--color-ink) 14%, transparent);
}
.vm-label {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  font-weight: 600;
  margin: 0;
}
.vm-statement {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--color-ink);
  margin: 0;
  text-wrap: pretty;
  max-width: 38ch;
}
.vm-statement em.accent-em {
  font-style: italic;
  color: inherit;
}
@media (max-width: 760px) {
  .vm-grid { grid-template-columns: 1fr; }
  .vm-statement { max-width: none; }
}

/* ============================================================ SIGNATURE GRAPHICS (2026-05-30)
 *
 * Authentic ink signatures from brand principals (Rob Lowe, Dr. Gary Richter).
 * Transparent PNGs — ink black, paper transparent — so they sit cleanly on
 * any paper-tone surface. Treat as a "signed credential" moment under names.
 *
 * Sizes capped at ~110px wide so they read as elegant accents, not as
 * decoration. CSS filter applies a subtle ink-tone tint that matches the
 * brand --color-ink (warm charcoal) rather than pure black.
 */
.signature {
  display: block;
  margin-top: var(--space-sm);
  max-width: 110px;
  height: auto;
  opacity: 0.85;
  /* Subtle ink tint — warm charcoal instead of pure black, matches body color */
  filter: brightness(0) saturate(100%) invert(13%) sepia(15%) saturate(420%) hue-rotate(2deg) brightness(0.95);
}
.signature.is-large { max-width: 150px; }
.signature.is-small { max-width: 80px; }
/* Endorsement row — used in UPN brand block to pair both signatures inline */
.endorsement-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
}
.endorsement {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}
.endorsement-role {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-3);
  font-weight: 500;
}
.endorsement-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: var(--text-base);
  color: var(--color-ink);
  letter-spacing: -0.005em;
}
.endorsement .signature {
  margin-top: var(--space-xs);
  max-width: 130px;
}

/* ============================================================ OUR BRANDS — V1 APPLE STYLE (2026-06-01)
 *
 * Brittany picked Variant 1 (Apple Product Pages) from the 3 design variants
 * built 2026-05-30. Each brand gets a full-viewport editorial moment with
 * massive product photo, minimal supporting text, and a single confident CTA.
 *
 * Vocabulary:
 *  - Sticky secondary nav at top (.brandpage-nav) — brand-jump tabs sit below
 *    the site nav. Frosted-glass backdrop matching .nav treatment.
 *  - Intro section (.brandpage-intro) — eyebrow + huge Fraunces headline + italic sub.
 *  - Brand sections (.brandpage-brand) alternating layout left/right, with a
 *    big numbered indicator, brand name (logo lockup), italic tagline,
 *    two-column photo+content body, spec list, and single accent CTA.
 *  - Footer CTA band (.brandpage-foot) closes the page with the same italic
 *    Fraunces motif.
 *
 * Class prefix .brandpage-* chosen to avoid collision with existing
 * .brand-section / .brand-layout / .brand-tagline classes still used elsewhere.
 */

/* Sticky secondary nav — brand-jump tabs */
.brandpage-nav {
  position: sticky;
  top: var(--nav-h, 64px); /* sits just below the main site nav */
  z-index: 40;
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--color-rule);
}
.brandpage-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding-block: clamp(0.75rem, 1.5vw, 1rem);
}
.brandpage-nav-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: var(--color-ink);
}
.brandpage-nav-links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.brandpage-nav-links li { padding: 0; }
.brandpage-nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;            /* iOS minimum touch target */
  color: var(--color-text-2);
  text-decoration: none;
  font-size: clamp(0.82rem, 1.1vw, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.85em 0;
  border-bottom: 2px solid transparent;
  transition: color 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.brandpage-nav-links a:hover,
.brandpage-nav-links a:focus-visible {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent-ink);
}
/* Mobile: hide the secondary nav title to free up horizontal room
 * for the 3 brand-jump tabs at narrow viewports. Brand tabs already
 * wrap via .brandpage-nav-links flex-wrap when needed. */
@media (max-width: 640px) {
  .brandpage-nav-title { display: none; }
  .brandpage-nav-inner { justify-content: center; }
}

/* Page intro */
.brandpage-intro {
  padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 7vw, 6rem);
  text-align: center;
}
.brandpage-intro .brandpage-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  font-weight: 600;
  margin: 0 0 1rem;
}
.brandpage-intro h1 {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 18ch;
  margin: 0 auto;
  color: var(--color-ink);
}
.brandpage-intro h1 em { font-style: italic; color: var(--color-accent-ink); }
.brandpage-intro .brandpage-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.4;
  margin: 1.5rem auto 0;
  max-width: 56ch;
  color: var(--color-text-2);
}

/* Brand section — alternating two-column layout */
.brandpage-brand {
  padding-block: clamp(4rem, 9vw, 8rem);
  border-top: 1px solid var(--color-rule);
  scroll-margin-top: 8rem;
}
.brandpage-brand:nth-child(odd-of-brand) { background: color-mix(in oklch, var(--color-paper-2) 50%, var(--color-paper)); }
/* Use a separate class to alternate since :nth-child won't catch on
 * non-sequential siblings. We'll add .is-tinted class in markup as needed. */
.brandpage-brand.is-tinted {
  background: color-mix(in oklch, var(--color-paper-2) 60%, var(--color-paper));
}

.brandpage-brand-header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.brandpage-brand-logo {
  display: inline-block;
  margin: 0 0 1.25rem;
}
.brandpage-brand-logo img {
  display: block;
  max-width: 100%;
  height: auto;
  /* When both the max-width and max-height caps bind, object-fit defaults to
   * "fill" and stretches the logo (Badlands looked squished). "contain" keeps
   * the artwork's true aspect ratio; left-align so any slack sits on the right. */
  object-fit: contain;
  object-position: left center;
}
/* Per-brand logo size caps — match the existing .brand-logo-h2 caps */
.brandpage-brand[id="dr-marty-pets"] .brandpage-brand-logo img { max-height: clamp(2.5rem, 4.5vw, 3.5rem); max-width: 22rem; }
.brandpage-brand[id="badlands-ranch"] .brandpage-brand-logo img { max-height: clamp(4rem, 7vw, 6rem); max-width: 15rem; }
.brandpage-brand[id="ultimate-pet-nutrition"] .brandpage-brand-logo img { max-height: clamp(2.75rem, 5vw, 4rem); max-width: 18rem; }
/* UPN main photo is a landscape, two-person shot (Rob Lowe + Dr. Richter). The default
 * 4/5 portrait frame cropped Dr. Richter off the right; give it a landscape frame so both show. */
.brandpage-brand[id="ultimate-pet-nutrition"] .brandpage-brand-photo { aspect-ratio: 3 / 2; }
/* The Nutra Complete inset is a tall portrait bag; on the short landscape frame the default
 * inset size covered Dr. Richter. Shrink + tuck it into the corner so it sits below his lap. */
.brandpage-brand[id="ultimate-pet-nutrition"] .brandpage-brand-photo .product-inset {
  width: clamp(22%, 9vw, 7rem);
  right: -3%;
  bottom: -11%;
}

.brandpage-brand-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  line-height: 1.3;
  margin: 0 auto;
  color: var(--color-text-2);
  max-width: 38ch;
}

/* Two-column body — photo on one side, content on other */
.brandpage-brand-body {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.brandpage-brand.reverse .brandpage-brand-body { grid-template-columns: 1.2fr 1fr; }
.brandpage-brand.reverse .brandpage-brand-photo { order: 2; }

/* 2026-06-01: removed overflow:hidden from .brandpage-brand-photo so the
 * .product-inset can bleed off the bottom-right corner as designed.
 * border-radius moved onto the IMG directly so the image still clips
 * to rounded corners even without the parent overflow clip. */
.brandpage-brand-photo {
  position: relative;
  border-radius: 1.25rem;
  box-shadow:
    0 32px 80px -28px color-mix(in oklch, var(--color-ink) 28%, transparent),
    0 8px 24px -8px color-mix(in oklch, var(--color-ink) 14%, transparent);
  aspect-ratio: 4/5;
  background: var(--color-paper-3);
  position: sticky;
  top: 8rem;
}
.brandpage-brand-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 1.25rem;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.brandpage-brand-photo:hover img { transform: scale(1.03); }
/* Product inset — Apple-style polish 2026-06-01.
 *
 * Was: small paper card with 0.5rem inner padding around the product
 * image — read more "Squarespace product tile" than "Apple feature shot."
 *
 * Now: bigger, more confident size. No inner padding (image edges sit
 * flush against the frame). Layered cinematic shadow stack — ambient
 * (large, dim) + key (tight, defined) + a soft inset top-highlight that
 * reads as "lit from above." Subtle scale + lift on hover matching the
 * main photo's interaction so they feel like a designed pair.
 *
 * Border-radius on BOTH wrapper and img so the product clips cleanly
 * inside the rounded frame even though the wrapper no longer uses
 * overflow:hidden (we removed that earlier so the inset can bleed off
 * the main photo's corner).
 */
.brandpage-brand-photo .product-inset {
  position: absolute;
  right: -6%;
  bottom: -7%;
  width: clamp(40%, 16vw, 13.5rem);
  max-width: 13.5rem;
  margin: 0;
  padding: 0;
  border-radius: 1rem;
  background: var(--color-paper);
  z-index: 2;
  box-shadow:
    0 24px 56px -20px color-mix(in oklch, var(--color-ink) 30%, transparent),
    0 8px 18px -6px color-mix(in oklch, var(--color-ink) 18%, transparent),
    0 1px 0 var(--color-on-dark-soft-12) inset;
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.brandpage-brand-photo .product-inset img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  display: block;
  border-radius: 1rem;
  box-shadow: none;
  transition: none;
}
.brandpage-brand-photo:hover .product-inset,
.brandpage-brand-photo:focus-within .product-inset {
  transform: translateY(-6px) scale(1.025);
  box-shadow:
    0 36px 72px -20px color-mix(in oklch, var(--color-ink) 38%, transparent),
    0 12px 24px -6px color-mix(in oklch, var(--color-ink) 22%, transparent),
    0 1px 0 var(--color-on-dark-soft-15) inset;
}
@media (prefers-reduced-motion: reduce) {
  .brandpage-brand-photo .product-inset { transition: none; }
  .brandpage-brand-photo:hover .product-inset,
  .brandpage-brand-photo:focus-within .product-inset { transform: none; }
}
.brandpage-brand-photo:hover .product-inset img { transform: none; }

.brandpage-brand-content { padding-top: clamp(0rem, 1vw, 1rem); }
.brandpage-brand-product {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  font-weight: 600;
  margin: 0 0 1rem;
}
.brandpage-brand-content p {
  font-size: clamp(1rem, 1.4vw, 1.05rem);
  line-height: 1.65;
  color: var(--color-text);
  margin-block: 0 1.25rem;
  max-width: 48ch;
}
.brandpage-brand-content p:last-of-type { margin-bottom: 0; }

/* Spec list inside content column */
.brandpage-specs {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}
.brandpage-specs li {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.5rem;
  padding-block: 0.75rem;
  border-top: 1px solid var(--color-rule);
  font-size: 0.92rem;
  line-height: 1.5;
}
.brandpage-specs li:last-child { border-bottom: 1px solid var(--color-rule); }
.brandpage-specs .k {
  color: var(--color-text-3);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  padding-top: 0.2em;
}
.brandpage-specs .v { color: var(--color-ink); }

/* Single confident CTA — Apple's "Buy" / "Learn more" pill.
 * Padding bumped from 0.95em → 1.05em on 2026-06-01 to comfortably
 * clear iOS 44px touch-target minimum (was rendering ~43px). */
.brandpage-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.5em;
  padding: 1.05em 1.85em;
  background: var(--color-accent);
  color: var(--color-paper);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  margin-top: 1.5rem;
  box-shadow:
    0 1px 0 var(--color-on-dark-soft-12) inset,
    0 8px 22px -10px color-mix(in oklch, var(--color-accent) 60%, transparent);
  transition: transform 280ms var(--ease-spring), box-shadow 280ms var(--ease-spring);
}
.brandpage-cta:hover,
.brandpage-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 var(--color-on-dark-soft-15) inset,
    0 14px 32px -10px color-mix(in oklch, var(--color-accent) 75%, transparent);
}
.brandpage-cta .arrow { transition: transform 280ms var(--ease-out); }
.brandpage-cta:hover .arrow,
.brandpage-cta:focus-visible .arrow { transform: translateX(3px); }

/* Bottom CTA band */
.brandpage-foot {
  padding-block: clamp(5rem, 10vw, 9rem);
  text-align: center;
  border-top: 1px solid var(--color-rule);
}
.brandpage-foot h2 {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin: 0 auto 1.5rem;
  color: var(--color-ink);
}
.brandpage-foot h2 em { font-style: italic; color: var(--color-accent-ink); }
.brandpage-foot .brandpage-foot-sub {
  font-size: 1rem;
  color: var(--color-text-2);
  margin: 0 0 2.5rem;
}

/* Responsive — stack on tablet/mobile */
@media (max-width: 880px) {
  .brandpage-brand-body,
  .brandpage-brand.reverse .brandpage-brand-body {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .brandpage-brand.reverse .brandpage-brand-photo { order: -1; }
  .brandpage-brand-photo { position: relative; top: auto; aspect-ratio: 4/3; }
  .brandpage-brand-photo .product-inset { width: 32%; right: -2%; bottom: -4%; }
}
@media (max-width: 560px) {
  .brandpage-specs li { grid-template-columns: 1fr; gap: 0.25rem; }
  .brandpage-specs .k { padding-top: 0; }
}

/* ============================================================ OUR BRANDS — full sections (photo + product + copy) */
/* Brand sections — 2026-05-30 v3 polish: Apple-esque, mirrors homepage rhythm.
 * Removed accent-tinted hairline + ::before orange bar — they were reading
 * pink on paper. Sections now separated by generous padding alone (like
 * homepage section rhythm), with a thin neutral rule for structure. */
.brand-section { padding-block: clamp(var(--space-2xl), 8vw, calc(var(--space-2xl) * 1.4)); border-top: 1px solid var(--color-rule); scroll-margin-top: 6rem; }
.brand-section:first-of-type { border-top: 0; }
.brand-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5.5vw, 4.5rem); align-items: center; }
.brand-layout.reverse .brand-visual { order: 2; }
.brand-visual { position: relative; }
.brand-visual img { width: 100%; height: clamp(18rem, 40vw, 30rem); object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.brand-visual .product-inset { position: absolute; right: -6%; bottom: -8%; width: 38%; max-width: 12rem; border-radius: var(--radius-md); background: var(--color-paper); padding: 0.5rem; box-shadow: var(--shadow-card); }
.brand-visual .product-inset img { height: auto; border-radius: var(--radius-sm); box-shadow: none; }
.brand-eyebrow { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-ink); margin-bottom: var(--space-xs); }
.brand-section h2 { font-size: var(--text-3xl); }
.brand-section .wordmark { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 360; }

/* Brand wordmark / logo lockup as h2 — preserves semantic heading + a11y (alt text reads
 * the brand name to screen readers) while visually showing the brand's own typography.
 * Each brand's logo sizes against the same visual weight as a regular h2 here.
 *
 * 2026-05-30 polish: logos now sit in a paper backplate with subtle inner shadow.
 * Mirrors the homepage's product card / kitchen card "presented surface" treatment.
 * The backplate gives the wordmark a sense of intentional framing, like a label
 * on a product. Apple-esque "every element has its own surface" principle. */
.brand-section h2.brand-logo-h2 {
  margin: 0 0 var(--space-md);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  padding: clamp(0.85rem, 1.6vw, 1.25rem) clamp(1rem, 2vw, 1.5rem);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 var(--color-on-dark-soft-06) inset,
              0 1px 2px color-mix(in oklch, var(--color-ink) 5%, transparent);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.brand-section h2.brand-logo-h2:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 var(--color-on-dark-soft-08) inset,
              0 4px 12px -4px color-mix(in oklch, var(--color-ink) 10%, transparent);
}
.brand-section h2.brand-logo-h2 img {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
  /* size cap per brand — each lockup has different proportions */
}
/* Dr. Marty Pets wordmark lockup — wide horizontal, sits at h2-equivalent height */
.brand-section[id="dr-marty-pets"] h2.brand-logo-h2 img { max-height: clamp(2.25rem, 4vw, 3.25rem); max-width: 22rem; }
/* Badlands Ranch — script + ranch illustration, taller proportionally */
.brand-section[id="badlands-ranch"] h2.brand-logo-h2 img { max-height: clamp(4rem, 7vw, 6rem); max-width: 15rem; }
/* Ultimate Pet Nutrition — wordmark + UPN mark */
.brand-section[id="ultimate-pet-nutrition"] h2.brand-logo-h2 img { max-height: clamp(2.75rem, 5vw, 4rem); max-width: 18rem; }
/* Brand facts — editorial key/value list with lighter k typography (2026-05-30 polish).
 * Keys: small all-caps tracked label in muted ink. Values: regular body weight.
 * Now uses 9.5rem keys + cleaner row rhythm. */
.brand-facts { list-style: none; padding: 0; margin: var(--space-lg) 0; }
.brand-facts li { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--space-md); padding-block: calc(var(--space-xs) * 1.4); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 1.55; }
.brand-facts li:first-child { border-top: 1px solid var(--color-rule-strong); }
.brand-facts li:last-child { border-bottom: 1px solid var(--color-rule); }
.brand-facts li .k { color: var(--color-text-3); font-size: calc(var(--text-xs) * 1.02); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; padding-top: 0.15em; }
.brand-facts li > span:not(.k) { color: var(--color-text); }
/* (Conflicting .brand-tagline override removed 2026-05-30 — was wiping the
 * pull-quote magazine treatment defined at line 585. Original treatment now
 * wins the cascade: italic Fraunces 1.5-2.2rem with quote-mark prefix and
 * accent-tone top/bottom rules.) */
.brand-body p + p { margin-top: var(--space-md); }
.brand-body .tagline { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--color-ink); margin-block: var(--space-md); }
/* Retailer chip row — replaces the old `.available` sentence. Cleaner visual
 * scan of retail presence. (2026-05-30 polish.) */
.retailer-chips { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); display: flex; flex-wrap: wrap; gap: var(--space-xs) 0.6rem; align-items: center; }
.retailer-chips-label { width: 100%; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-3); font-weight: 500; margin-bottom: calc(var(--space-xs) * 0.6); }
.retailer-chip { display: inline-flex; align-items: center; padding: 0.42em 0.95em; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); font-size: calc(var(--text-xs) * 1.05); color: var(--color-ink); font-weight: 500; line-height: 1; letter-spacing: 0.01em; background: var(--color-paper); transition: border-color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out); }
.retailer-chip:hover, .retailer-chip:focus-visible { border-color: var(--color-accent-ink); background: color-mix(in oklch, var(--color-accent) 8%, var(--color-paper)); }
.retailer-chip-context { font-size: var(--text-xs); color: var(--color-text-3); width: 100%; margin-top: var(--space-xs); font-style: italic; }
@media (max-width: 820px) { .brand-layout, .brand-layout.reverse { grid-template-columns: 1fr; gap: var(--space-xl); } .brand-layout.reverse .brand-visual { order: 0; } .brand-visual .product-inset { right: var(--space-md); bottom: -10%; width: 30%; } }

/* ============================================================ PEOPLE / LEADERSHIP */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
/* Executive team — centered flex so 7 cards balance as 4 + 3 (no lone orphan) */
.people.execs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xl) clamp(2rem, 4vw, 3.5rem); max-width: none; }
.people.execs .person { flex: 0 1 240px; min-width: 0; display: flex; flex-direction: column; }
/* cards in a row stretch to equal height; push the bio toggle to the bottom so a
   2-line role (e.g. Hannah Jennewein) doesn't stagger 'Read bio' below row-mates. */
.people.execs .person details { margin-top: auto; }

/* Leadership group hero */
.team-hero { margin: var(--space-lg) auto 0; max-width: 62rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
/* 2026-06-25: was a fixed clamp height + object-fit:cover, which cropped the full 3:2
 * team photo into a short wide strip and cut off the seated front row. Show the whole
 * photo (height:auto) so all of the team is visible; max-width keeps it from oversizing. */
.team-hero img { width: 100%; height: auto; display: block; }
.person { scroll-margin-top: 6rem; text-align: center; }
.person .portrait { width: 100%; max-width: 12.5rem; aspect-ratio: 1/1; object-fit: cover; object-position: center 25%; border-radius: 50%; margin-inline: auto; background: var(--color-paper-3); box-shadow: var(--shadow-soft); }
.person .portrait-ph { display: grid; place-items: center; max-width: 12.5rem; aspect-ratio: 1/1; border-radius: 50%; margin-inline: auto; border: 1px dashed var(--color-rule-strong); box-shadow: none; }
.person .portrait-ph .ph-mono { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 3.4rem); color: var(--color-accent); opacity: 0.5; }
.person h3 { font-size: var(--text-lg); font-weight: 500; margin-top: var(--space-md); }
.person .role { font-size: var(--text-sm); color: var(--color-text-2); font-weight: 600; margin-top: 2px; }
.person .role::after { content: ""; display: block; width: 2.2rem; height: 2px; background: var(--color-accent); margin: var(--space-sm) auto 0; }
.person details { margin-top: var(--space-sm); }
.person summary { font-size: var(--text-sm); color: var(--color-accent-ink); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.35em; font-weight: 600; justify-content: center; }
.person summary::-webkit-details-marker { display: none; }
.person summary .chev { transition: transform var(--dur-short) var(--ease-out); }
.person details[open] summary .chev { transform: rotate(90deg); }
.person details p { font-size: var(--text-sm); color: var(--color-text-2); margin-top: var(--space-sm); }
.person.ph-wrap { position: relative; }
@media (max-width: 820px) { .people { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .people, .people.execs { grid-template-columns: 1fr; max-width: 24rem; margin-inline: auto; } }
/* Home "Who Runs Golden Pet Brands" — 4-card variant only on wide desktops.
 * Replaces an inline style="grid-template-columns: repeat(4, ...)" that was
 * forcing 4 columns at every viewport, causing catastrophic mobile cramping
 * (cards squished to ~80px wide, bios wrapping 1-3 words per line). The
 * class-scoped override now composes cleanly with the .people responsive
 * cascade (≤820px → 2 cols, ≤520px → 1 col). */
@media (min-width: 1000px) {
  .people.who-runs-people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================ NEWSROOM */
.posts { display: grid; gap: 0; }
.post { display: grid; grid-template-columns: 9rem 1fr; gap: clamp(1rem,3vw,2.5rem); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.post:last-child { border-bottom: 1px solid var(--color-rule); }
.post time { font-size: var(--text-sm); color: var(--color-text-3); font-variant-numeric: tabular-nums; padding-top: 0.3em; }
.post h3 { font-size: var(--text-xl); font-weight: 400; margin-bottom: var(--space-sm); }
.post p { color: var(--color-text-2); max-width: 64ch; margin-bottom: var(--space-md); }
/* Exec thumbnails on press-release cards — humanizes the wire per v12.11 banker audit.
 * Overlapping circular portraits sit above the headline so the reader associates
 * the announcement with faces before reading. Pure decorative — aria-hidden because
 * the names already appear in the body copy. */
.post-execs { display: flex; gap: 0; margin-bottom: var(--space-md); }
.post-execs img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover; object-position: center 25%;
  border: 2px solid var(--color-paper);
  box-shadow: var(--shadow-soft);
  background: var(--color-paper-2);
}
.post-execs img:not(:first-child) { margin-left: -12px; }
@media (max-width: 600px) { .post { grid-template-columns: 1fr; gap: var(--space-xs); } }

/* ============================================================ CAREERS BENEFITS */
.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); }
.benefits .b { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.benefits .b h3 { font-size: var(--text-base); font-weight: 600; font-family: var(--font-body); color: var(--color-ink); margin-bottom: 2px; }
.benefits .b p { font-size: var(--text-sm); color: var(--color-text-2); }

/* ============================================================ IR FACTSHEET */
.factsheet { list-style: none; padding: 0; margin: 0; max-width: 46rem; }
.factsheet li { display: grid; grid-template-columns: 12rem 1fr; gap: var(--space-md); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.factsheet li:last-child { border-bottom: 1px solid var(--color-rule); }
.factsheet .k { color: var(--color-text-3); font-size: var(--text-sm); }
@media (max-width: 560px) { .factsheet li, .brand-facts li { grid-template-columns: 1fr; gap: 2px; } }

/* ============================================================ PENDING / GATED CONTENT MARKERS */
.pending { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-body); font-size: 0.72em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-ink); border: 1px dashed var(--color-accent); border-radius: var(--radius-pill); padding: 0.2em 0.7em; vertical-align: middle; white-space: nowrap; background: color-mix(in oklch, var(--color-amber) 12%, transparent); }
.pending::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; }
.pending-block { border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg); background: color-mix(in oklch, var(--color-amber) 8%, var(--color-paper)); color: var(--color-text-2); font-size: var(--text-sm); max-width: 48rem; }
.pending-block .ptitle { display: flex; align-items: center; gap: 0.5em; font-weight: 600; color: var(--color-accent-ink); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-xs); margin-bottom: var(--space-xs); }
.pending-block ul { margin: var(--space-xs) 0 0; padding-left: 1.1em; }
.band-ink .pending { color: var(--color-amber); border-color: var(--color-amber); }
.band-ink .pending::before { background: var(--color-amber); }

.finetext { font-size: var(--text-sm); color: var(--color-text-3); max-width: 70ch; line-height: 1.55; }
.finetext b { color: var(--color-text-2); }

/* ============================================================ CTA BAND */
.cta-band h2 { font-size: var(--text-3xl); max-width: 22ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

/* ============================================================ FOOTER — Concrete-mimic G4 (brand-forward, orange-filled pills, full-bleed lifestyle photo, massive italic wordmark) */
.foot {
  position: relative;
  isolation: isolate;
  background: var(--color-ink);
  color: var(--color-on-dark);
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
  min-height: clamp(26rem, 48vw, 38rem);
  display: flex;
  flex-direction: column;
}
/* Mobile footer override — the desktop 34rem floor (544px) eats more
 * than half a 375x667 phone viewport before any footer content shows.
 * Drop the floor on small screens so the footer sizes to its content. */
@media (max-width: 760px) {
  .foot {
    min-height: clamp(16rem, 65vw, 32rem);
  }
}
.foot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../assets/footer-bg.jpg');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.42;
  z-index: -2;
  filter: brightness(0.7) saturate(0.92);
  /* Idle state: scaled up 1.08. As the user scrolls toward the footer, site.js
   * writes --foot-bg-parallax (a translateY value) to .foot — the bg image
   * drifts up at a slower rate than the foreground, building cinematic depth.
   * On reveal, the scale settles back to 1 over a long, gentle 2200ms. */
  transform: scale(1.08) translate3d(0, var(--foot-bg-parallax, 0), 0);
  transition: transform 2200ms var(--ease-soft);
  will-change: transform;
}
.foot.is-revealed::before {
  transform: scale(1) translate3d(0, var(--foot-bg-parallax, 0), 0);
}
.foot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-scrim-strong) 0%, var(--color-scrim-soft) 35%, var(--color-scrim-med) 100%);
  z-index: -1;
}

/* Top: compact link columns left + address right */
.concrete-top {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.concrete-top ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.concrete-top a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-on-dark-soft-35);
  text-decoration-thickness: 1px;
  white-space: nowrap;
  display: inline-block;
  transition: text-decoration-color var(--dur-med) var(--ease-out), color var(--dur-short) var(--ease-out), transform 220ms var(--ease-spring);
}
.concrete-top a:hover, .concrete-top a:focus-visible { text-decoration-color: var(--color-accent); color: var(--color-amber); transform: translateX(2px); }
.concrete-top .address {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-on-dark);
  line-height: 1.55;
  text-align: right;
}

/* Editorial section break */
.concrete-section {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  letter-spacing: -0.01em;
  color: var(--color-on-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.concrete-section .arr { color: var(--color-accent); font-style: normal; }
.concrete-rule {
  border: 0;
  height: 1px;
  background: var(--color-on-dark-soft-25);
  margin: var(--space-lg) 0 clamp(2rem, 4vw, 3rem);
}

/* G4 signature: solid orange pill CTAs */
.concrete-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
  max-width: 1100px;
  width: 100%;
}
/* One contact pill only (post-IR-removal, v12.53): the 2-col grid would otherwise
   stretch a lone pill to half-width and strand it. Shrink it to its content and
   pin it left so it reads as intentional against the left-aligned footer.
   Reverts automatically if a second pill (e.g. ir@) returns post-IPO. */
.concrete-pills:has(.concrete-pill:only-child) { justify-items: start; }
.concrete-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1.5rem, 3vw, 2.5rem);
  border: 1.5px solid var(--color-accent);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  color: var(--color-on-dark);
  background: var(--color-accent);
  text-decoration: none;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 0 var(--color-on-dark-soft-12) inset,
              0 8px 22px -8px color-mix(in oklch, var(--color-accent) 55%, transparent);
  transition: background var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform 220ms var(--ease-spring), box-shadow 220ms var(--ease-soft);
}
.concrete-pill:hover, .concrete-pill:focus-visible {
  background: var(--color-accent-ink);
  border-color: var(--color-accent-ink);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 var(--color-on-dark-soft-15) inset,
              0 14px 36px -10px color-mix(in oklch, var(--color-accent) 75%, transparent);
}
.concrete-pill:active { transform: translateY(0); box-shadow: 0 1px 0 var(--color-on-dark-soft-12) inset, 0 4px 14px -8px color-mix(in oklch, var(--color-accent) 50%, transparent); }

/* G4 signature: amber tagline + massive italic outlined wordmark */
.concrete-wordmark {
  margin-top: auto;
  text-align: center;
  line-height: 0.85;
  padding-top: clamp(2rem, 4vw, 3rem);
}
.concrete-tagline {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
}
.concrete-wordmark .mark {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  /* 2026-06-02 cutoff fix: capped vw to 11.5 so the wordmark doesn't truncate
     at viewport widths between ~1100px–1400px. Also lowered the absolute max
     from 11rem → 8.5rem so 'Golden Pet Brands' fits cleanly within the
     footer's inline padding on common desktop viewports. */
  font-size: clamp(2rem, 11vw, 8.5rem);
  letter-spacing: -0.025em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-on-dark);
  line-height: 1.04;
  /* 2026-06-25: was white-space:nowrap (clipped 'Brands' at 375-390px phones).
     Allow wrap on the narrowest phones instead of hard-clipping; stays one line
     on tablet/desktop where there's room. */
  white-space: normal;
  max-width: 100%;
  /* Idle state: scaled down slightly. Reveal uses --ease-spring for a subtle
   * overshoot — the wordmark "settles" into place with a touch of weight, like
   * a large object coming to rest. Longer duration (1400ms) reinforces scale. */
  transform: scale(0.92);
  transition: transform 1400ms var(--ease-spring);
}

.concrete-credit {
  margin-top: var(--space-md);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-on-dark-soft-60);
  letter-spacing: 0.04em;
}
.concrete-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.concrete-credit a:hover { color: var(--color-on-dark); }
.concrete-credit .sep { margin: 0 0.5em; opacity: 0.5; }

/* Reveal cascade — JS adds .is-revealed when the footer enters viewport.
 * Smoother eases (--ease-soft) replace the previous --ease-out (dramatic
 * decelerate) so the reveal feels like a gentle drift up rather than a snap.
 * translateY bumped 26px → 36px for more visible motion. */
.foot .concrete-top,
.foot .concrete-section,
.foot .concrete-rule,
.foot .concrete-pills,
.foot .concrete-wordmark,
.foot .concrete-credit {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1000ms var(--ease-soft), transform 1000ms var(--ease-soft);
  will-change: opacity, transform;
}
/* Individual pill stagger — each pill enters one by one rather than all at once */
.foot .concrete-pills .concrete-pill {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease-spring);
}
.foot.is-revealed .concrete-pills .concrete-pill { opacity: 1; transform: none; }
.foot.is-revealed .concrete-pills .concrete-pill:nth-child(1) { transition-delay: 540ms; }
.foot.is-revealed .concrete-pills .concrete-pill:nth-child(2) { transition-delay: 640ms; }
.foot.is-revealed .concrete-pills .concrete-pill:nth-child(3) { transition-delay: 740ms; }
.foot.is-revealed .concrete-top { opacity: 1; transform: none; transition-delay: 80ms; }
.foot.is-revealed .concrete-section { opacity: 1; transform: none; transition-delay: 280ms; }
.foot.is-revealed .concrete-rule { opacity: 1; transform: none; transition-delay: 380ms; }
.foot.is-revealed .concrete-pills { opacity: 1; transform: none; transition-delay: 480ms; }
.foot.is-revealed .concrete-wordmark { opacity: 1; transform: none; transition-delay: 680ms; }
.foot.is-revealed .concrete-wordmark .mark { transform: scale(1); transition-delay: 680ms; }
.foot.is-revealed .concrete-credit { opacity: 1; transform: none; transition-delay: 920ms; }

/* ============================================================ SITE-WIDE ANIMATION POLISH
 * Coordinated reveal vocabulary that matches the footer's cinematic treatment.
 * Three patterns:
 *   1. .shead inner cascade — eyebrow → h2 → lede stagger when section enters view
 *   2. .statement banner cascade — eyebrow → line → src stagger + bg parallax
 *   3. Big-feature parallax — site.js extends scroll-parallax to statement, facility-media, hero-poster
 *
 * All use --ease-soft (gentle decelerate) for the fade-rise pattern, --ease-spring
 * for the wordmark/tactile elements. prefers-reduced-motion disables all transitions. */

/* 1. SECTION HEAD CASCADE — eyebrow → h2 → lede when the section's .reveal fires */
html.js .reveal .editorial-eyebrow,
html.js .reveal .shead h2,
html.js .reveal .shead .lede,
html.js .reveal .shead .kicker {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 800ms var(--ease-soft), transform 800ms var(--ease-soft);
  will-change: opacity, transform;
}
html.js .reveal.in .editorial-eyebrow,
html.js .reveal.in .shead .kicker { opacity: 1; transform: none; transition-delay: 60ms; }
html.js .reveal.in .shead h2 { opacity: 1; transform: none; transition-delay: 180ms; }
html.js .reveal.in .shead .lede { opacity: 1; transform: none; transition-delay: 320ms; }

/* 2. STATEMENT BANNER CASCADE — coordinated reveal for the conviction banner.
 *    .line cascade is word-by-word — each <span class="reveal-word"> fades up with
 *    120ms stagger (ported from apple-style-home.html experimental). The parent
 *    .line itself stays at opacity:1 (the words are the animating elements). */
html.js .statement.reveal .eyebrow,
html.js .statement.reveal .src {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1000ms var(--ease-soft), transform 1000ms var(--ease-soft);
  will-change: opacity, transform;
}
html.js .statement.reveal .line .reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft);
  will-change: opacity, transform;
}
html.js .statement.reveal.in .eyebrow { opacity: 1; transform: none; transition-delay: 80ms; }
html.js .statement.reveal.in .src { opacity: 1; transform: none; transition-delay: 1280ms; }
html.js .statement.reveal.in .line .reveal-word { opacity: 1; transform: none; }
html.js .statement.reveal.in .line .reveal-word:nth-child(1) { transition-delay: 240ms; }
html.js .statement.reveal.in .line .reveal-word:nth-child(2) { transition-delay: 360ms; }
html.js .statement.reveal.in .line .reveal-word:nth-child(3) { transition-delay: 480ms; }
html.js .statement.reveal.in .line .reveal-word:nth-child(4) { transition-delay: 600ms; }
html.js .statement.reveal.in .line .reveal-word:nth-child(5) { transition-delay: 720ms; }
html.js .statement.reveal.in .line .reveal-word:nth-child(6) { transition-delay: 840ms; }
html.js .statement.reveal.in .line .reveal-word:nth-child(7) { transition-delay: 960ms; }
html.js .statement.reveal.in .line .reveal-word:nth-child(8) { transition-delay: 1080ms; }
html.js .statement.reveal.in .line .reveal-word:nth-child(9) { transition-delay: 1200ms; }
@media (prefers-reduced-motion: reduce) {
  html.js .statement.reveal .line .reveal-word { opacity: 1; transform: none; transition: none; }
}

/* Statement bg image — picks up scroll-parallax custom property like the footer
 * does. Idle state is scale(1) translateY 0; site.js writes --statement-bg-parallax
 * which translates the image opposite the scroll direction for a subtle camera-push. */
.statement .bg {
  transform: translate3d(0, var(--statement-bg-parallax, 0), 0);
  transition: transform 200ms linear;   /* short transition so the JS-driven value updates smoothly without snap */
  will-change: transform;
}

/* 3. .reveal entrance for sections that don't have a shead (Statement, photos, etc.)
 * stays handled by the existing .reveal rule. The shead cascade above only fires
 * if a shead exists inside the .reveal wrapper. */

@media (prefers-reduced-motion: reduce) {
  html.js .reveal .editorial-eyebrow,
  html.js .reveal .shead h2,
  html.js .reveal .shead .lede,
  html.js .reveal .shead .kicker,
  html.js .statement.reveal .eyebrow,
  html.js .statement.reveal .line,
  html.js .statement.reveal .src {
    opacity: 1; transform: none; transition: none;
  }
  .statement .bg { transform: none; transition: none; }
}

@media (max-width: 760px) {
  .concrete-top { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .concrete-top .address { grid-column: 1 / -1; text-align: left; padding-top: var(--space-md); border-top: 1px solid var(--color-on-dark-soft-20); }
  .concrete-pills { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .foot::before,
  .foot .concrete-top,
  .foot .concrete-section,
  .foot .concrete-rule,
  .foot .concrete-pills,
  .foot .concrete-wordmark,
  .foot .concrete-credit,
  .foot .concrete-wordmark .mark {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================ MOCKUP RIBBON */
.mock-ribbon { background: var(--color-ink-2); color: var(--color-on-dark-2); font-size: var(--text-xs); letter-spacing: 0.03em; text-align: center; padding: 0.5em 1em; }
.mock-ribbon b { color: var(--color-amber); }

/* ============================================================ PAGE HERO (interior pages) */
.page-hero { padding-block: var(--space-2xl) var(--space-xl); }
.page-hero .eyebrow-page { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-ink); }
.page-hero h1 { font-size: var(--text-display-s); font-weight: 340; margin-top: var(--space-sm); max-width: 18ch; }
.page-hero .lede { margin-top: var(--space-lg); }
.eyebrow-page { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-ink); }

/* ============================================================ REVEAL (one orchestrated entrance) */
.reveal { transition: opacity var(--dur-long) var(--ease-soft), transform var(--dur-long) var(--ease-soft); }
html.js .reveal { opacity: 0; transform: translateY(14px); will-change: opacity, transform; }   /* will-change hints compositor — site.js removes it after .in fires so layers don't pile up */
.reveal.in, html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; will-change: auto; } }

/* ============================================================ CUSTOM CRAFT — brand motif, editorial type, photo grade, timeline */

/* Subtle, unified warm grade so mixed-shoot photography reads as one art-directed library */
.hero-figure img, .split-media img, .brand-visual img, .brand-card .ph img,
.person .portrait, .champions .portrait { filter: saturate(1.05) contrast(1.01); }

/* Editorial drop cap */
.lead-drop::first-letter { font-family: var(--font-display); font-weight: 400; color: var(--color-accent-ink); float: left; font-size: 3.3em; line-height: 0.74; padding: 0.06em 0.12em 0 0; }

/* Pull-quote */
.pullquote { max-width: 34ch; margin: var(--space-xl) 0; padding-left: var(--space-lg); border-left: 3px solid var(--color-accent); }
.pullquote p { font-family: var(--font-display); font-style: italic; font-weight: 380; font-size: var(--text-2xl); line-height: 1.3; color: var(--color-ink); }
.pullquote cite { display: block; margin-top: var(--space-sm); font-family: var(--font-body); font-style: normal; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-2); }

/* Signature mark — faint watermark behind a feature band */
.has-watermark { position: relative; overflow: hidden; }
.has-watermark > .shell, .has-watermark > .shell-wide { position: relative; z-index: 1; }
.mark-watermark { position: absolute; right: -3%; top: 50%; transform: translateY(-50%); width: min(40rem, 58%); opacity: 0.06; pointer-events: none; z-index: 0; }
.band-ink .mark-watermark { opacity: 0.10; }
@media (max-width: 700px) { .mark-watermark { right: -22%; width: 82%; opacity: 0.05; } }

/* Milestone timeline — bespoke set-piece */
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: var(--space-xl); border-top: 2px solid var(--color-rule); }
.timeline .ms { position: relative; padding: var(--space-lg) var(--space-md) 0 0; }
.timeline .ms::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); }
.timeline .ms .yr { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 360; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.timeline .ms p { font-size: var(--text-sm); color: var(--color-text-2); margin-top: var(--space-xs); max-width: 22ch; }
@media (max-width: 760px) { .timeline { grid-template-columns: 1fr 1fr; gap: var(--space-md) 0; } }
@media (max-width: 440px) { .timeline { grid-template-columns: 1fr; } }

/* ---- Orange-italic headline emphasis (editorial accent) ---- */
/* Anti-AI pass 2026-06-01: .accent-em was rendering italic + brand-orange
 * on every section headline — the #1 AI design tool default pattern.
 * Stripped the color shift globally; kept the italic. Result: italic
 * Fraunces emphasis stays as the editorial moment, but no longer
 * paints every nested word brand-orange. Site now reads less Lovable/V0
 * template, more NYT Mag / Aēsop editorial. */
.accent-em { font-family: var(--font-display); font-style: italic; font-weight: 380; color: inherit; }

/* ---- Photographic statement banner (full-bleed photo + scrim + oversized italic line) ---- */
.statement { position: relative; overflow: hidden; isolation: isolate; }
.statement .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.statement::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(95deg, oklch(22% 0.02 60 / 0.82) 0%, oklch(22% 0.02 60 / 0.5) 48%, oklch(22% 0.02 60 / 0.12) 100%); }
.statement .shell { position: relative; z-index: 2; padding-block: clamp(var(--space-xl), 8vw, var(--space-2xl)); }
.statement .eyebrow { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-amber); margin-bottom: var(--space-md); }
.statement .line { font-family: var(--font-display); font-style: italic; font-weight: 340; font-size: var(--text-3xl); line-height: 1.18; color: var(--color-on-dark); max-width: 24ch; letter-spacing: -0.01em; }
.statement .src { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-on-dark-2); }

/* ---- Brand-mark splash on first load — flicker-free continuous timeline
 *
 *   2026-05-30 fix pass — diagnosed flicker at end of exit:
 *
 *   ROOT CAUSE: Previous design used SEPARATE animations for entrance,
 *   breathing, and exit, then swapped via `.splash.done` class. When the
 *   browser swapped the animation list shorthand, it wiped the entrance's
 *   `forwards`-retained transform values for one paint frame before the
 *   exit animation took over. Result: a sub-pixel snap-back to base
 *   transform = visible flicker.
 *
 *   FIX: Collapse the entire lifecycle (in → hold → out) into ONE continuous
 *   @keyframes per element. No animation swap, no handoff, no flicker.
 *   The `.done` class still exists for JS coordination but doesn't trigger
 *   an animation replacement.
 *
 *   Other changes for safety:
 *   • Removed `filter: blur()` from exit — sub-pixel blur causes Safari to
 *     recomposite GPU layers, a known flicker trigger.
 *   • Removed misleading `animation-play-state: paused, paused` rule.
 *   • Removed the breathing animation — it was the snap source (it ran at
 *     mid-cycle transform when exit fired). Static hold is cleaner.
 *
 *   Easing: cubic-bezier(0.22, 1, 0.36, 1) (easeOutQuint) for the
 *   "expensive settled landing" — same vocabulary as Apple/Linear/Stripe.
 *   ---- */
.splash {
  position: fixed; inset: 0; z-index: var(--z-splash);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  background: var(--color-paper);
  background-image: radial-gradient(ellipse at center,
    color-mix(in oklch, var(--color-paper) 100%, transparent) 0%,
    color-mix(in oklch, var(--color-paper-2) 100%, transparent) 90%);
  will-change: opacity;
  animation: splash-surface 3900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Order: mark (1) → GOLDEN PET (2) → BRANDS™ (3) */
.splash img {
  order: 1;
  width: clamp(240px, 34vw, 380px);
  height: auto;
  margin-bottom: clamp(0.5rem, 1.2vw, 1rem);
  opacity: 0;
  transform: scale(0.96);
  will-change: opacity, transform;
  backface-visibility: hidden;
  animation: splash-mark-full 3900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Top wordmark line — "GOLDEN PET" in ink */
.splash::before {
  order: 2;
  content: "GOLDEN PET";
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  color: var(--color-ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0;
  transform: translateY(6px);
  will-change: opacity, transform;
  animation: splash-wm-full 3900ms cubic-bezier(0.22, 1, 0.36, 1) 80ms forwards;
}

/* Bottom wordmark line — "BRANDS" in brand orange + "™" in logo ink.
   Real element (was a ::after pseudo) so the ™ can carry its own color —
   a single pseudo-element's text can't be two-toned. (2026-06-03) */
.splash-brands {
  order: 3;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  color: var(--color-accent-ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0;
  transform: translateY(6px);
  will-change: opacity, transform;
  animation: splash-wm-full 3900ms cubic-bezier(0.22, 1, 0.36, 1) 140ms forwards;
}
/* ™ in the logo's true ink black (#1C1B1A), not the brand orange. */
.splash-brands .tm { color: #1C1B1A; font-weight: 600; }

/* The .done class is now JS-coordination only — it tells the rest of the
 * page (specifically `html.loaded` styles) that splash has begun exiting.
 * It no longer triggers an animation swap. */

/* CONTINUOUS keyframe timelines — no handoff, no snap.
 *
 * Each animation runs for 3900ms total covering: in (8%) → hold (8-67%)
 * → out (67-100%). Percentages map to:
 *   0-300ms     mark fade-in completes
 *   300-2600ms  static hold (just sits there — no breathing, no movement)
 *   2600-3900ms exit lift (scale + opacity)
 *
 * Because it's ONE animation per element, the browser interpolates the
 * exit FROM whatever transform/opacity is currently rendered. No snap-back
 * is possible — there's nothing to snap back from. */

/* Mark: 0.96 → 1.0 → hold → 1.08 (lift toward viewer on exit) */
@keyframes splash-mark-full {
  0%   { opacity: 0; transform: scale(0.96); }
  8%   { opacity: 1; transform: scale(1); }
  67%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

/* Wordmarks: translateY 6px → 0 → hold → -12px (lift up and away on exit) */
@keyframes splash-wm-full {
  0%   { opacity: 0; transform: translateY(6px); }
  20%  { opacity: 0; transform: translateY(6px); }   /* hold invisible while mark fades in */
  35%  { opacity: 1; transform: translateY(0); }
  67%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}

/* Surface: stays solid until 73%, then dissolves last (creates "page comes
 * through" depth — brand marks leave first, surface follows). */
@keyframes splash-surface {
  0%   { opacity: 1; visibility: visible; }
  73%  { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
/* Wordmark exit: lift up 12px (was 4px — felt timid).
 * The longer rise + easeOutQuint deceleration gives "settled departure." */
@keyframes splash-wm-out {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}
@keyframes splash-out {
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
  .splash img, .splash::before, .splash-brands { animation: none; }
}

/* ---- Polish: selection, staggered reveals, hover zoom, post-splash hero entrance ---- */
::selection { background: color-mix(in oklch, var(--color-amber) 42%, transparent); color: var(--color-ink); }

/* staggered grid reveals — one-time, gated on .js so no-JS shows everything.
 * Eased with --ease-soft (gentler than --ease-out's dramatic decelerate) for reveal motion;
 * stagger increments at 80ms give each card breathing room without dragging the cascade. */
html.js .stagger > * { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-long) var(--ease-soft), transform var(--dur-long) var(--ease-soft); will-change: opacity, transform; }
html.js .stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(2) { transition-delay: 80ms; }
.stagger.in > *:nth-child(3) { transition-delay: 160ms; }
.stagger.in > *:nth-child(4) { transition-delay: 240ms; }
.stagger.in > *:nth-child(5) { transition-delay: 320ms; }
.stagger.in > *:nth-child(6) { transition-delay: 400ms; }
.stagger.in > *:nth-child(7) { transition-delay: 480ms; }
.stagger.in > *:nth-child(n+8) { transition-delay: 540ms; }
@media (prefers-reduced-motion: reduce) { html.js .stagger > * { opacity: 1; transform: none; transition: none; will-change: auto; } }

/* brand-card image zoom on hover (frame already clips overflow) */
.brand-card .ph img { transition: transform var(--dur-med) var(--ease-out); }
.brand-card:hover .ph img { transform: scale(1.04); }

/* hero entrance after the splash clears */
html.js .hero-copy, html.js .hero-figure { opacity: 0; transform: translateY(18px); transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out); }
html.loaded .hero-copy { opacity: 1; transform: none; }
html.loaded .hero-figure { opacity: 1; transform: none; transition-delay: 120ms; }
@media (prefers-reduced-motion: reduce) { html.js .hero-copy, html.js .hero-figure { opacity: 1; transform: none; transition: none; } }

/* utilities */
.stack-sm > * + * { margin-top: var(--space-sm); }
.stack-md > * + * { margin-top: var(--space-md); }

/* ============================================================ RETAIL HIGHLIGHT BLOCK */
.retail-band { border-block: 1px solid var(--color-rule); background: var(--color-paper); }
.retail-head { max-width: 62ch; }
.retail-head h2 { font-size: var(--text-3xl); font-weight: 360; }
.retail-head .lede { margin-top: var(--space-md); }
.retailers { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; justify-content: flex-start; }
.retailers li {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 380; color: var(--color-ink); line-height: 1;
  padding: 0.5em 1.05em; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill);
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform 220ms var(--ease-spring), box-shadow 220ms var(--ease-soft);
}
.retailers li:hover { border-color: var(--color-accent); color: var(--color-accent-ink); transform: translateY(-2px); box-shadow: 0 8px 22px -12px color-mix(in oklch, var(--color-accent) 55%, transparent); }
@media (max-width: 600px) { .retailers li { font-size: var(--text-lg); padding: 0.45em 0.9em; } }

/* Lean-hub routing strip (v12.78) — compact 2-up tiles routing to the banner pages.
   No dividers (per the all-white restraint); separation comes from the column gap. */
.explore-band .explore-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.explore-band .explore-item .editorial-eyebrow { margin-bottom: var(--space-sm); }
.explore-band .explore-item h3 {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: var(--text-2xl);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0 0 var(--space-md);
  max-width: 24ch;
}
.explore-band .explore-item h3 em.accent-em { font-style: italic; color: var(--color-accent-em); }
@media (max-width: 700px) {
  .explore-band .explore-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ============================================================ HERO KEN BURNS (subtle continuous zoom) */
@keyframes hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.hero-figure img {
  transform-origin: center 40%;
  animation: hero-kenburns 22s var(--ease-in-out) infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-figure img { animation: none; }
}

/* ============================================================ HERO HEADLINE LINE-REVEAL (editorial Fraunces cascade) */
.hero h1 .hl { display: block; }
html.js .hero h1 .hl { opacity: 0; transform: translateY(10px); transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out); }
html.loaded .hero h1 .hl { opacity: 1; transform: none; }
html.loaded .hero h1 .hl:nth-child(1) { transition-delay: 80ms; }
html.loaded .hero h1 .hl:nth-child(2) { transition-delay: 220ms; }
html.loaded .hero h1 .hl:nth-child(3) { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
  html.js .hero h1 .hl { opacity: 1; transform: none; transition: none; }
}

/* ============================================================ STATEMENT BANNER — scroll-driven parallax
 * Replaced the previous 30s infinite ken-burns animation with scroll-driven
 * parallax (set via --statement-bg-parallax custom property from site.js).
 * Static base scale(1.06) gives the parallax translateY room to move without
 * revealing image edges. The transform composition lives in the .statement .bg
 * rule near the site-wide animation polish block (around line 740). */
.statement .bg {
  /* Base scale provides headroom for the translateY parallax — kept at scale(1.06)
   * so even at the extremes of the ±24px drift, the image still covers the frame. */
  scale: 1.06;
}
@media (prefers-reduced-motion: reduce) {
  .statement .bg { scale: 1; }
}

/* ============================================================ MANUFACTURING — two-facility footprint */
.facilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 3.5rem); margin-top: var(--space-xl); }
.facility { display: flex; flex-direction: column; gap: var(--space-md); }
/* 2026-06-25: was aspect-ratio:16/10, which grew the facility photos large on wide
 * screens and over-emphasized them. Fixed, capped height keeps them moderate + identical
 * (both cards align), and the shorter frame trims Seward's excess sky so the pair matches. */
.facility-media { width: 100%; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); height: clamp(13rem, 20vw, 17rem); background: var(--color-paper-3); }
.facility-media img { width: 100%; height: 100%; object-fit: cover; }
.facility-media.facility-media-ph { display: grid; place-content: center; justify-items: center; gap: var(--space-sm); background: linear-gradient(155deg, var(--color-paper-2), var(--color-paper-3)); padding: var(--space-lg); text-align: center; box-shadow: none; border: 1px dashed var(--color-rule-strong); }
.facility-media .ph-mark { width: auto; height: 56px; max-width: none; }
.facility-media .ph-word { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent-ink); }
.facility-body { display: flex; flex-direction: column; gap: var(--space-xs); }
.facility-loc { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-ink); margin: 0; }
.facility-loc .n-prefix { font-variant-numeric: tabular-nums; color: var(--color-accent-ink); margin-right: 0.4em; opacity: 0.9; }

/* ============================================================ TITLE PILL — Concrete-derived outlined page-title capsule */
.title-pill { display: inline-flex; align-items: center; padding: 0.55em 1.4em; border: 1.5px solid var(--color-ink); border-radius: var(--radius-pill); font-family: var(--font-display); font-style: normal; font-weight: 400; font-size: var(--text-lg); line-height: 1; color: var(--color-ink); margin: 0 0 var(--space-lg); letter-spacing: -0.005em; text-transform: none; }

/* ============================================================ EDITORIAL IMAGE CAPTION (book-style italic, Concrete-derived) */
figcaption.caption,
.hero-figure figcaption.caption,
.team-hero figcaption.caption,
.split-media figcaption.caption,
.brand-section figcaption.caption {
  position: static;
  background: transparent;
  color: var(--color-text-3);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  margin-top: var(--space-sm);
  text-align: left;
  max-width: 64ch;
}

/* .foot-signoff / .signoff-mark / .signoff-tag — REMOVED 2026-05-28: rolled into new Concrete-style .foot above */

/* ============================================================ STAT BOARD — quantified-metric dashboard (Freshpet-derived, IR-grade) */
.stat-board { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-lg) clamp(2rem, 4vw, 3rem); margin-top: var(--space-xl); }
.stat-board .sb { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md) 0; border-top: 1px solid var(--color-rule); }
.stat-board .sb .num { font-family: var(--font-display); font-weight: 380; font-size: var(--text-3xl); color: var(--color-ink); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat-board .sb .unit { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-ink); margin-top: 2px; }
.stat-board .sb .mech { font-size: var(--text-sm); color: var(--color-text-2); max-width: 32ch; margin-top: var(--space-xs); }
@media (max-width: 800px) { .stat-board { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .stat-board { grid-template-columns: 1fr; } }

/* .marquee-cta — REMOVED 2026-05-28 per Brittany; the scrolling pre-footer
   band is retired site-wide. Pagenav now transitions directly into the foot. */

/* ============================================================ CATEGORY COMPARISON — three-column truth table (Freshpet-derived) */
.category-compare { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border-block: 1px solid var(--color-rule-strong); margin-top: var(--space-xl); }
.cat-col { padding: var(--space-lg) var(--space-md); border-right: 1px solid var(--color-rule); display: flex; flex-direction: column; gap: var(--space-sm); }
.cat-col:last-child { border-right: none; }
.cat-col.is-us { background: color-mix(in oklch, var(--color-amber) 10%, var(--color-paper)); }
.cat-col .cat-eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-3); margin: 0; }
.cat-col.is-us .cat-eyebrow { color: var(--color-accent-ink); }
.cat-col h3 { font-size: var(--text-xl); font-weight: 380; margin: 0; }
.cat-col .cat-meta { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-md); }
.cat-col .cat-meta div { font-size: var(--text-sm); color: var(--color-text-2); display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-sm); padding-block: var(--space-xs); border-top: 1px dashed var(--color-rule); }
.cat-col .cat-meta div:first-child { border-top: none; }
.cat-col .cat-meta .k { color: var(--color-text-3); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 800px) { .category-compare { grid-template-columns: 1fr; } .cat-col { border-right: none; border-top: 1px solid var(--color-rule); } .cat-col:first-child { border-top: none; } }

/* ============================================================ ASTERISK-TRIPLET DIVIDER (Concrete-derived editorial break) */
/* .asterisks — REMOVED 2026-05-28 per Brittany; motif retired site-wide */

/* ============================================================ LONG-FORM BODY — justified + auto-hyphens */
.long-form { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.long-form a { overflow-wrap: anywhere; word-break: break-word; }
/* Headings are never justified (only body prose) and need a clear top break so
   numbered sections read as sections (base rule zeroes all heading margins). */
.long-form h2, .long-form h3, .long-form h4 { text-align: left; hyphens: manual; }
.long-form h2 { margin-top: var(--space-xl); }
.long-form h3, .long-form h4 { margin-top: var(--space-lg); }
.long-form h2:first-child, .long-form h3:first-child, .long-form h4:first-child { margin-top: 0; }

/* ============================================================ PAGENAV — prev/next inter-page navigation (Concrete-derived) */
/* PAGENAV — quieter editorial pagination, softened typography */
.pagenav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); padding: var(--space-2xl) 0 var(--space-xl); border-top: 1px solid var(--color-rule); max-width: var(--shell); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.pagenav a { display: flex; flex-direction: column; gap: var(--space-xs); min-height: 44px; color: var(--color-text-2); text-decoration: none; transition: color var(--dur-short) var(--ease-out), transform 260ms var(--ease-spring); }
.pagenav .prev:hover, .pagenav .prev:focus-visible { transform: translateX(-3px); }
.pagenav .next:hover, .pagenav .next:focus-visible { transform: translateX(3px); }
.pagenav a:hover, .pagenav a:focus-visible { color: var(--color-accent-ink); }
.pagenav a:hover .title, .pagenav a:focus-visible .title { color: var(--color-accent-ink); }
.pagenav .next { text-align: right; align-items: flex-end; }
.pagenav .label { font-family: var(--font-display); font-style: italic; font-size: var(--text-sm); font-weight: 380; letter-spacing: 0; text-transform: none; color: var(--color-text-3); }
.pagenav .title { font-family: var(--font-display); font-weight: 340; font-size: var(--text-2xl); color: var(--color-ink); letter-spacing: -0.005em; transition: color var(--dur-short) var(--ease-out); }
.pagenav .arr { color: var(--color-accent); font-style: normal; }
@media (max-width: 600px) { .pagenav { grid-template-columns: 1fr; } .pagenav .next { text-align: left; align-items: flex-start; } }
.facility h3 { font-size: var(--text-2xl); font-weight: 360; margin: 0; }
.facility-facts { list-style: none; padding: 0; margin: var(--space-xs) 0 0; }
.facility-facts li { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-md); padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); }
.facility-facts .k { color: var(--color-text-3); }
@media (max-width: 800px) { .facilities { grid-template-columns: 1fr; } .facility-facts li { grid-template-columns: 7rem 1fr; } }
@media (max-width: 480px) {
  .facility-facts li { grid-template-columns: 1fr; gap: 2px; padding-block: var(--space-xs); }
  .facility-facts .k { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
}

/* ============================================================ VARIANT C — TYPE-LED MANIFESTO HERO (no photo above the fold)
   The hero becomes a full-width typographic statement. The photo lives in its own
   section below, as a full-bleed editorial figure (the second beat). */

/* Hero section padding + override the grid (single column, content-width) */
.hero.hero-manifesto { padding-block: clamp(var(--space-2xl), 9vw, var(--space-3xl)) var(--space-xl); }
.hero.hero-manifesto .hero-copy-wide { max-width: none; }

/* Italic Fraunces eyebrow above the manifesto headline — editorial kicker */
.hero.hero-manifesto .hero-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: var(--text-base);
  color: var(--color-text-3);
  letter-spacing: 0;
  margin: 0 0 var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.hero.hero-manifesto .hero-eyebrow em {
  font-style: italic;
  color: var(--color-accent-ink);
  font-weight: 380;
}
.hero.hero-manifesto .hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.75rem;
  height: 1px;
  background: var(--color-rule-strong);
}

/* Oversized manifesto headline — editorial weight + tighter rhythm */
.hero.hero-manifesto h1.long {
  font-size: clamp(2.6rem, 8.2vw, 6.4rem);
  font-weight: 320;
  line-height: 1.04;
  letter-spacing: -0.024em;
  max-width: 22ch;
  margin: 0;
}

/* Lede + CTAs + proof-points: align to the manifesto column */
.hero.hero-manifesto .lede { max-width: 60ch; margin-top: var(--space-xl); }
.hero.hero-manifesto .hero-cta { margin-top: var(--space-xl); }
.hero.hero-manifesto .proof-points { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 96rem; margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
@media (max-width: 1000px) { .hero.hero-manifesto .proof-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hero.hero-manifesto .proof-points { grid-template-columns: 1fr; } }

/* Editorial scroll cue — softer, italic-warm, less shouty */
.hero-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-3);
}
.hero-scroll-cue .cue-arrow {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--color-accent);
  animation: hero-scroll-bob 2.2s var(--ease-in-out) infinite;
  display: inline-block;
  line-height: 1;
}
@keyframes hero-scroll-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue .cue-arrow { animation: none; }
}

/* ---- HERO PHOTO — second beat (full-bleed editorial figure, edge-to-edge) ---- */
.hero-photo { padding-block: 0 var(--space-2xl); }
/* .photo-band — full-bleed image used as a mid-page breather (About cat band, 2026-06-25).
 * Flush top+bottom, shorter than the hero-photo so it reads as a band, not a hero. */
.hero-photo.photo-band { padding-block: 0; }
.hero-photo.photo-band .hero-photo-figure img { height: clamp(15rem, 38vw, 30rem); object-position: center 38%; }
.hero-photo-figure {
  margin: 0;
  padding-inline: 0;
  max-width: none;
}
.hero-photo-figure img {
  width: 100%;
  height: clamp(22rem, 60vw, 46rem);
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  display: block;
}
.hero-photo-figure figcaption.caption {
  text-align: center;
  margin-inline: auto;
  margin-top: var(--space-md);
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  max-width: 64ch;
  font-size: var(--text-base);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  color: var(--color-text-2);
}
.hero-photo-figure figcaption.caption em {
  color: var(--color-ink);
  font-style: italic;
}

/* Reveal-on-load for the photo figure mirrors the existing hero-copy timing
   so the second beat enters smoothly after the manifesto. */
html.js .hero-photo-figure { opacity: 0; transform: translateY(18px); transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out); transition-delay: 220ms; }
html.loaded .hero-photo-figure { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .hero-photo-figure { opacity: 1; transform: none; transition: none; }
}

/* Small-screen rhythm: tighten the manifesto padding and headline so the
   single-column type block doesn't feel airless on mobile. */
@media (max-width: 720px) {
  .hero.hero-manifesto { padding-block: var(--space-xl) var(--space-lg); }
  .hero.hero-manifesto h1.long { font-size: clamp(2.2rem, 11vw, 3.4rem); letter-spacing: -0.018em; }
  .hero.hero-manifesto .hero-eyebrow::before { width: 2rem; }
  .hero-photo-figure img { height: clamp(14rem, 60vw, 20rem); border-radius: var(--radius-md); }
}

/* ============================================================ EDITORIAL EYEBROW (generalized from C's hero-eyebrow) — Fraunces italic with leading rule mark */
.editorial-eyebrow {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--color-text-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  letter-spacing: 0;
  text-transform: none;
  flex-wrap: wrap;
}
.editorial-eyebrow::before {
  content: "";
  display: inline-block;
  width: 3.5rem;
  height: 1px;
  background: var(--color-accent);   /* upgraded from --color-rule-strong: brand accent ties the eyebrow to the cascade */
  flex-shrink: 0;
  /* Rule draws in left-to-right when section's .reveal fires — synced with the
   * section-head cascade (eyebrow → h2 → lede). transform-origin: left makes
   * the line "extend" rather than "scale from center." */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--ease-soft);
  will-change: transform;
}
html.js .reveal.in .editorial-eyebrow::before { transform: scaleX(1); transition-delay: 80ms; }
@media (prefers-reduced-motion: reduce) {
  .editorial-eyebrow::before { transform: scaleX(1); transition: none; }
}
.editorial-eyebrow em { font-style: italic; color: var(--color-accent-ink); font-weight: 400; }
.band-ink .editorial-eyebrow { color: var(--color-on-dark-2); }
.band-ink .editorial-eyebrow em { color: var(--color-amber); }
.band-ink .editorial-eyebrow::before { background: var(--color-amber); }

/* Callout band — one-line manifesto moments (ESOP, etc.) on band-ink.
 * Headline uses the brand-standard h2 (Fraunces 380 inherited) with em.accent-em
 * for the amber italic accent. Layout-specific max-widths kept out of inline
 * styles. */
/* Callout band typography — matches the brand .shead h2 treatment so the
 * ESOP heading reads at the same scale + weight as every other section
 * heading site-wide. The callout-band markup doesn't use a .shead wrapper
 * (it's a one-line manifesto, not a section-head with a long lede), so we
 * inline those styles directly here. */
.callout-band h2 {
  font-size: var(--text-3xl);
  font-weight: 340;
  letter-spacing: -0.018em;
  line-height: 1.08;
  max-width: 28ch;
  margin-top: var(--space-md);
}
.callout-band .editorial-eyebrow { margin-bottom: 0; }
.callout-band .lede {
  max-width: 60ch;
  margin-top: var(--space-md);
}
.band-ink .callout-band em.accent-em,
.callout-band.band-ink h2 em.accent-em { color: var(--color-amber); }

/* ============================================================ FAQ ACCORDION
 * <details>/<summary> based collapse. Converts long-scroll Q&A into a scannable
 * accordion (per v12.11 banker audit on Featured Brands FAQ). Each summary
 * stays h3-wrapped so AI extraction + semantic outline survive.
 *   - Native disclosure marker hidden (replaced by custom chevron)
 *   - Chevron rotates 90deg when [open]
 *   - Thin orange hairlines between rows (whisper-soft)
 *   - Smooth hover state (matches site hover vocabulary) */
.faq-accordion { display: grid; gap: 0; }
.faq-collapse {
  /* 2026-05-30: borders changed from accent-tinted to neutral — were reading pink */
  border-top: 1px solid var(--color-rule);
  padding-block: 0;
}
.faq-collapse:last-of-type { border-bottom: 1px solid var(--color-rule); }
.faq-collapse summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: center;
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  transition: color var(--dur-short) var(--ease-out);
}
.faq-collapse summary::-webkit-details-marker { display: none; }
.faq-collapse summary::marker { display: none; }
.faq-collapse summary h3 {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: -0.01em;
  line-height: 1.28;
  color: var(--color-ink);
  margin: 0;
  text-wrap: balance;
  transition: color var(--dur-short) var(--ease-out);
}
.faq-collapse summary .chev {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  color: var(--color-accent-ink);
  line-height: 1;
  display: inline-block;
  transform: rotate(90deg);
  transition: transform 280ms var(--ease-spring), color var(--dur-short) var(--ease-out);
}
.faq-collapse[open] summary .chev { transform: rotate(270deg); }
.faq-collapse summary:hover h3,
.faq-collapse summary:focus-visible h3 { color: var(--color-accent-ink); }
.faq-collapse summary:hover .chev,
.faq-collapse summary:focus-visible .chev { color: var(--color-accent); }
.faq-collapse > p {
  margin: 0;
  padding-block: 0 clamp(1.25rem, 2.5vw, 1.75rem);
  padding-inline-end: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.62;
  color: var(--color-text-2);
  max-width: 70ch;
  text-wrap: pretty;
}
/* Accent ladder bar on hover — mirrors the .faq-item treatment */
.faq-collapse { position: relative; }
.faq-collapse::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--color-accent);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: height 320ms var(--ease-spring);
  pointer-events: none;
}
.faq-collapse:hover::before, .faq-collapse[open]::before { height: 40%; }
@media (prefers-reduced-motion: reduce) {
  .faq-collapse summary .chev, .faq-collapse::before, .faq-collapse summary, .faq-collapse summary h3 { transition: none; }
}
@media (max-width: 600px) { .editorial-eyebrow::before { width: 2rem; } }

/* ============================================================ DESIGN PASS 2026-05-28 (PM) — brand theming · padding rhythm · recognition · stat-board · watermark */

/* ---- 1. BRAND-COLOR THEMING per Our Brands section
   Subtle tints stay within the locked palette via color-mix on existing tokens.
   Each brand gets a top hairline + soft background gradient that hints at its
   identity without violating the editorial-warm system. */
.brand-section { position: relative; }
/* (Removed 2026-05-30: 2px accent-orange bar at top of each brand section.
 * Brittany flagged the section as reading "pink almost" — the orange at
 * 55% opacity on near-white paper rendered as a pink/peach tint. Removed
 * for Apple-esque clean rhythm that mirrors the homepage's neutral section
 * separation.) */
.brand-section[id="dr-marty-pets"] {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--color-paper) 96%, var(--color-accent) 4%) 0%,
    var(--color-paper) 60%);
}
.brand-section[id="dr-marty-pets"]::before { background: var(--color-accent); opacity: 0.55; }
.brand-section[id="badlands-ranch"] {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--color-paper-2) 92%, var(--color-amber) 8%) 0%,
    var(--color-paper-2) 60%);
}
.brand-section[id="badlands-ranch"]::before { background: var(--color-amber); opacity: 0.7; }
.brand-section[id="ultimate-pet-nutrition"] {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--color-paper) 94%, var(--color-accent-ink) 6%) 0%,
    var(--color-paper) 60%);
}
.brand-section[id="ultimate-pet-nutrition"]::before { background: var(--color-accent-ink); opacity: 0.55; }
/* Brand eyebrow takes the section's accent color */
.brand-section[id="dr-marty-pets"] .brand-eyebrow { color: var(--color-accent-ink); }
.brand-section[id="badlands-ranch"] .brand-eyebrow { color: var(--color-accent-ink); }
.brand-section[id="ultimate-pet-nutrition"] .brand-eyebrow { color: var(--color-accent-ink); }

/* ---- 2. SECTION PADDING RHYTHM — consistent vertical breathing across the site
   Section-to-section pacing was uneven; this normalizes the rhythm without
   stomping component-specific padding. */
main > section { padding-block: clamp(3rem, 6vw, 5rem); }
main > section.hero, main > section.hero-photo, main > section.page-hero,
main > section.statement, main > section.band-ink, main > section.band-paper-2 {
  /* These bands have their own padding contracts — opt out */
}
main > section.cta-band { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
main > section + section { /* let CSS handle natural rhythm */ }
.shead, .shead-wide { margin-bottom: clamp(var(--space-lg), 3vw, var(--space-xl)); }

/* (Removed 2026-05-30: stray "subtle hairline" decorative rule that drew a
 * faint gradient line between adjacent .reveal sections. Brittany flagged it
 * twice as reading like a "small faint random line across the homepage."
 * Section padding alone provides enough rhythm; the line was decorative noise.) */

/* ---- 4. IR STAT-BOARD — pump the typography */
.stat-board { gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); margin-top: var(--space-2xl); }
.stat-board .sb { padding: var(--space-lg) 0 var(--space-md); border-top: 1px solid var(--color-rule-strong); gap: var(--space-sm); }
.stat-board .sb .num {
  font-size: clamp(3rem, 5.5vw, 4.6rem);
  font-weight: 320;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.stat-board .sb .unit {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-accent-ink);
  margin-top: var(--space-xs);
}
.stat-board .sb .mech {
  font-size: var(--text-sm);
  color: var(--color-text-2);
  max-width: 34ch;
  margin-top: var(--space-sm);
  line-height: 1.5;
}

/* ---- 5. WATERMARK + HAIRLINE accents
   Make the existing .has-watermark pattern visible site-wide where it adds depth. */
.band-paper-2.has-watermark .mark-watermark,
.band-ink.has-watermark .mark-watermark { opacity: 0.05; }
.band-ink.has-watermark .mark-watermark {
  /* Use the brand-mark in amber on dark surfaces */
  filter: brightness(2.5) sepia(1) saturate(4) hue-rotate(15deg);
  opacity: 0.08;
}

/* Editorial accent rule — slim amber line for use as a section punctuator */
.accent-rule {
  display: block;
  width: clamp(3rem, 6vw, 5rem);
  height: 2px;
  background: var(--color-accent);
  border: 0;
  margin: clamp(2rem, 4vw, 3rem) auto;
  opacity: 0.85;
}
.accent-rule.left { margin-inline: 0; }

/* ---- 6. PER-BRAND ACCENT colors on existing .brand-card on home */
.brand-card[data-brand="dr-marty-pets"] .cat-band { color: var(--color-accent-ink); }
.brand-card[data-brand="badlands-ranch"] .cat-band { color: var(--color-accent-ink); }
.brand-card[data-brand="ultimate-pet-nutrition"] .cat-band { color: var(--color-accent-ink); }

/* About "what sets us apart" — numbered prefix demoted to rule-mark (avoids
   numbered-eyebrow repetition on a page that already has 01–08 values above) */
.values.sets-us-apart .v {
  display: grid;
  grid-template-columns: 0.85rem 1fr;
  gap: var(--space-md);
  align-items: start;
}
.values.sets-us-apart .v > div { display: block; }
.values.sets-us-apart .v::before {
  content: "";
  display: block;
  width: 0.85rem;
  height: 2px;
  background: var(--color-accent);
  margin-top: 0.75em;
  border-radius: 1px;
}

/* ============================================================ CREDENTIAL BADGES — small floating badge attached to a portrait/bio
   D · 50-year vet badge on Dr. Marty Goldstein */
.person.has-badge { position: relative; }
.person.has-badge .portrait { position: relative; }
.credential-badge {
  position: absolute;
  top: clamp(-0.5rem, -1vw, -0.75rem);
  right: clamp(-0.5rem, -1vw, -0.75rem);
  width: clamp(56px, 8vw, 88px);
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 4px 10px var(--color-scrim-soft));
  transition: transform var(--dur-short) var(--ease-out);
}
.person.has-badge:hover .credential-badge { transform: rotate(6deg) scale(1.04); }
/* About brand-champion variant — badge in a different position relative to .champ */
.champ { position: relative; }
.champ .credential-badge {
  position: absolute;
  top: clamp(0.5rem, 1vw, 1rem);
  right: clamp(0.5rem, 1vw, 1rem);
  width: clamp(64px, 9vw, 96px);
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 4px 10px var(--color-scrim-soft));
}

/* ============================================================ AWARD BADGE on recognition row
   E · Pet Innovation Awards 2024 — floating badge next to the 2024 row */
/* LIGHT GLASS-CARD KITCHENS (Apple iOS Settings vibe — 2026-05-29 second pass).
 * First pass was band-ink with brown muddy photo bg — Brittany rejected.
 * Pivoted to: paper base + subtle dual-accent radial gradients (no photo bg) +
 * frosted glass cards with strong saturation. Photos restored INSIDE each
 * glass card, extending edge-to-edge at the top. No brown anywhere. */
.kitchens-glass {
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 85% 20%, color-mix(in oklch, var(--color-amber) 14%, transparent), transparent 65%),
    radial-gradient(ellipse 55% 45% at 10% 85%, color-mix(in oklch, var(--color-accent) 10%, transparent), transparent 65%),
    var(--color-paper);
  color: var(--color-text);
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 8rem);
  isolation: isolate;
}
.kitchens-glass .shell { position: relative; z-index: 2; }
.kitchens-glass .editorial-eyebrow { color: var(--color-accent-ink); }
.kitchens-glass .editorial-eyebrow::before { background: var(--color-accent); }
.kitchens-glass h2 { color: var(--color-ink); }
.kitchens-glass h2 em.accent-em { color: inherit; }
.kitchens-glass .lede { color: var(--color-text-2); }
.kitchens-glass .lede .serif-em { color: var(--color-ink); font-style: italic; }

/* Glass-card facilities — light frosted */
/* Anti-AI pass 2026-06-01: de-glassed the Kitchens section.
 * Was: backdrop-filter: blur(30px) saturate(180%) on semi-transparent
 * paper background — peak 2023 AI-template glassmorphism aesthetic.
 * Now: solid paper card with hairline border + soft shadow. Same
 * informational role; cleaner editorial feel. */
.kitchens-glass .facility {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: 24px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--color-ink);
  gap: var(--space-md);
  overflow: hidden;     /* clip the inset photo to the card's rounded corners */
  box-shadow:
    0 1px 0 var(--color-on-dark-soft-06) inset,
    0 14px 36px -18px color-mix(in oklch, var(--color-ink) 18%, transparent),
    0 2px 6px -2px color-mix(in oklch, var(--color-ink) 8%, transparent);
  transition: transform 320ms var(--ease-spring), box-shadow 320ms var(--ease-soft), border-color var(--dur-med) var(--ease-out);
}
.kitchens-glass .facility:hover, .kitchens-glass .facility:focus-within {
  border-color: var(--color-rule-strong);
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 var(--color-on-dark-soft-08) inset,
    0 20px 48px -16px color-mix(in oklch, var(--color-ink) 24%, transparent),
    0 2px 6px -2px color-mix(in oklch, var(--color-ink) 10%, transparent);
}

/* Photos restored — sit at top of each card, edge-to-edge, rounded only on top corners */
.kitchens-glass .facility-media {
  display: block;
  margin: calc(-1 * clamp(1.75rem, 3vw, 2.5rem)) calc(-1 * clamp(1.75rem, 3vw, 2.5rem)) clamp(1rem, 2vw, 1.5rem);
  border-radius: 23px 23px 0 0;   /* one less than card radius to nest cleanly inside the 1px border */
  overflow: hidden;
  aspect-ratio: 16/10;
  width: auto;
  box-shadow: none;   /* override the global facility-media shadow + inset vignette */
}
.kitchens-glass .facility-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.kitchens-glass .facility-body { gap: var(--space-sm); }
.kitchens-glass .facility h3 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 360;
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.kitchens-glass .facility-context { color: var(--color-accent-ink); font-style: italic; }
.kitchens-glass .facility-context em { color: var(--color-ink); }
.kitchens-glass .facility-facts li {
  border-top-color: color-mix(in oklch, var(--color-accent) 18%, var(--color-rule));
  color: var(--color-text-2);
}
.kitchens-glass .facility-facts .k { color: var(--color-text-3); }
.kitchens-glass .facility-facts li span:last-child {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 400;
}

.recog li.has-badge { position: relative; padding-right: clamp(4rem, 8vw, 6rem); }
.award-badge {
  position: absolute;
  top: var(--space-md);
  right: 0;
  width: clamp(52px, 7vw, 80px);
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
  transition: transform var(--dur-short) var(--ease-out);
}
.recog li.has-badge:hover .award-badge { transform: rotate(-4deg) scale(1.05); }

/* ============================================================ OUR CAUSES — partner strip
   G · JHF + IVO + GDA + Freedom Service Dogs */
.causes-strip {
  list-style: none;
  padding: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.causes-strip li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}
.causes-strip img {
  height: clamp(48px, 7vw, 72px);
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.78) contrast(1.1);
  transition: filter var(--dur-med) var(--ease-out);
}
.causes-strip li:hover img { filter: grayscale(0) opacity(1) contrast(1); }
.cause-placeholder {
  height: clamp(48px, 7vw, 72px);
  width: clamp(48px, 7vw, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--color-rule-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: var(--text-base);
  color: var(--color-text-3);
  letter-spacing: 0.04em;
}
.cause-meta {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-ink);
  margin: 0;
  line-height: 1.4;
  max-width: 22ch;
}
.cause-meta em {
  font-style: italic;
  color: var(--color-text-3);
  font-size: var(--text-xs);
  letter-spacing: 0;
}
@media (max-width: 820px) { .causes-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .causes-strip { grid-template-columns: 1fr; } }

/* ============================================================ HERO POSTER — variant C shipped as the home hero
   Photo dominates the top; eyebrow + headline + lede + CTAs sit beneath as a centered caption-style intro. */
.hero-poster {
  display: flex; flex-direction: column;
  /* 2026-06-25: was inheriting the default main>section top padding (~3-5rem),
   * leaving a large void between the nav and the hero image. Tighten to a small,
   * deliberate gap so the hero sits up near the header. */
  padding-top: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  /* Subtle radial warmth — dual brand-gradient on paper (ported from
   * apple-style-home.html experimental). Adds atmospheric depth without
   * competing with the photo. */
  background:
    radial-gradient(ellipse 80% 60% at 85% 105%, color-mix(in oklch, var(--color-amber) 10%, transparent), transparent 60%),
    radial-gradient(ellipse 70% 50% at 8% 100%, color-mix(in oklch, var(--color-accent) 6%, transparent), transparent 60%),
    var(--color-paper);
}
.hero-poster .poster-media {
  position: relative;
  overflow: hidden;
  /* Sized so the eyebrow + first line of the headline tease above the fold
   * on a typical desktop viewport. Drop from 44rem max to 34rem so the
   * reader sees the photo AND a hint of editorial type without scrolling. */
  height: clamp(16rem, 34vw, 26rem);
  background: var(--color-paper-2);
}
/* Mobile floor reduced from 20rem to 14rem so the headline lands above
 * the fold on iPhone-class screens (375px wide). At a 20rem floor the
 * poster eats 320px before the sticky nav, leaving almost no viewport
 * for the editorial type. */
@media (max-width: 540px) {
  /* Hero poster mobile-tighten pass (2026-05-29) — pull the photo shorter AND
   * compress the vertical rhythm inside the body so the "Explore our brands"
   * CTA lands above the fold on iPhone-class screens. Previous floor of 14rem
   * + default poster-body padding was pushing buttons ~80px below the visible
   * viewport on 375x667. */
  .hero-poster .poster-media {
    height: clamp(8rem, 32vw, 16rem);
  }
  .hero-poster .poster-body {
    padding-top: clamp(1.25rem, 3vw, 2rem);
  }
  .hero-poster .poster-eyebrow {
    margin-bottom: var(--space-sm);
  }
  .hero-poster .poster-mission {
    font-size: var(--text-base);
    margin-bottom: var(--space-md);
  }
  .hero-poster .poster-lede {
    margin-top: var(--space-md);
  }
  .hero-poster .poster-cta {
    margin-top: var(--space-lg);
  }
  .hero-poster .poster-proof {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
  }
}
.hero-poster .poster-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  /* Premium breathing motion — 2026-05-30.
   *
   * Continuous, very slow Ken Burns drift. 32-second cycle alternating
   * between two compositions (scale 1.0 + center crop → scale 1.045 + slight
   * vertical drift). Long duration means the motion is BARELY perceptible
   * frame-to-frame, but the image always feels "alive" — never static.
   * That's the premium-feel signature: motion you feel without seeing.
   *
   * Easing: cubic-bezier(0.45, 0, 0.55, 1) — symmetric ease-in-out. No
   * directional bias, smooth handoffs at both ends so the alternate-reverse
   * never snaps. */
  transform-origin: center 35%;
  animation: hero-breathe 32s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  will-change: transform;
}
@keyframes hero-breathe {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.045) translateY(-0.6%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-poster .poster-media img { animation: none; }
}
.hero-poster .poster-tag {
  position: absolute;
  bottom: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: var(--text-sm);
  color: var(--color-on-dark);
  background: var(--color-scrim-strong);
  padding: 0.55em 1em;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  letter-spacing: 0.02em;
}
.hero-poster .poster-body {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) 0;
  max-width: 1100px;
  margin-inline: auto;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-poster .poster-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: var(--text-base);
  letter-spacing: 0;
  color: var(--color-text-3);
  margin: 0 0 var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.hero-poster .poster-eyebrow em { color: var(--color-accent-ink); font-style: italic; font-weight: 400; }
/* Prominent company-identity variant (CFO note: was 'small print') — factual, no promo language */
.hero-poster .poster-eyebrow.poster-eyebrow-lg {
  font-style: normal;
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-ink);
  letter-spacing: 0.005em;
  flex-wrap: wrap;
}
/* Mission line (v12.77) — the brand's purpose statement, bridging the factual
   identity eyebrow and the belief headline. Single-family type, so hierarchy is
   carried by weight + color: medium weight (between the lede's 400 and the
   eyebrow's 600) in the mid-muted ink, no italic and no orange, so the hero's
   one accent stays "wellbeing" in the H1. Tucked under the eyebrow as an
   identity+purpose cluster, with a clear break before the headline. */
/* "Our Mission" kicker — small label above the mission H1 (2026-06-25 hero re-order) */
.hero-poster .poster-mission-kicker {
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--color-accent-ink);
  margin: 0 0 var(--space-sm);
}
.hero-poster .poster-mission {
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--color-text-2);
  max-width: 50ch;
  /* sits BELOW the H1: top gap from the headline; bottom 0 so the gap before the
     lede is the lede's own space-lg top margin only (flex items don't collapse, so
     a bottom margin here would double it). */
  margin: var(--space-md) auto 0;
  text-align: center;
}
.hero-poster h1 {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: var(--color-ink);
  margin: 0;
  text-align: center;
  max-width: 28ch;
}
.hero-poster h1 em.accent-em { font-style: italic; color: var(--color-accent-em); }
.hero-poster .poster-lede {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text);
  margin: 1.5rem auto 0;
  max-width: 58ch;
  text-align: center;
}
.hero-poster .poster-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.hero-poster .poster-proof {
  list-style: none;
  padding: 0;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md) clamp(1.5rem, 3vw, 2.5rem);
  width: 100%;
  max-width: 1100px;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  text-align: left;
}
.hero-poster .poster-proof li {
  display: grid;
  grid-template-columns: 0.85em 1fr;
  gap: 0.7em;
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: 1.5;
}
.hero-poster .poster-proof li::before {
  content: "—";
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
}
.hero-poster .poster-proof b { color: var(--color-ink); font-weight: 600; }
@media (max-width: 980px) { .hero-poster .poster-proof { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .hero-poster .poster-proof { grid-template-columns: 1fr; } }

/* ============================================================ GALLERY MOMENT — variant D shipped as a mid-page beat
   Two-photo asymmetric grid + type card. Bridges narrative sections with a visual breath. */
.gallery-moment {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 3rem);
  max-width: 1400px;
  margin-inline: auto;
}
.gallery-moment .photo-main {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-paper-3);
  min-height: clamp(18rem, 34vw, 28rem);
}
.gallery-moment .photo-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-moment .col-right {
  display: grid;
  grid-template-rows: 1fr 1.05fr;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}
.gallery-moment .photo-sub {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-paper-3);
}
.gallery-moment .photo-sub img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-moment .gallery-body {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
}
.gallery-moment .gallery-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--color-text-3);
  margin: 0;
}
.gallery-moment .gallery-eyebrow em { color: var(--color-accent-ink); font-style: italic; font-weight: 400; }
.gallery-moment h2 {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0;
  max-width: 18ch;
}
.gallery-moment h2 em.accent-em { font-style: italic; color: var(--color-accent-em); }
.gallery-moment .gallery-lede {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-2);
  line-height: 1.55;
  margin: 0;
}
.gallery-moment .gallery-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: var(--text-base);
  color: var(--color-accent-ink);
  text-decoration: none;
  margin-top: var(--space-xs);
  transition: color var(--dur-short) var(--ease-out), gap var(--dur-short) var(--ease-out);
  gap: 0.4em;
}
.gallery-moment .gallery-cta:hover { color: var(--color-accent-ink); gap: 0.65em; }
@media (max-width: 820px) {
  .gallery-moment { grid-template-columns: minmax(0, 1fr); }
  .gallery-moment .col-right { grid-template-rows: auto auto; }
  /* Same defensive width anchor as .facility-media (fixed 2026-05-29):
   * aspect-ratio without an explicit width can trigger Safari iOS layout
   * runaway loops when combined with loading="lazy" + percentage-sized children. */
  .gallery-moment .photo-main { width: 100%; min-width: 0; min-height: 0; aspect-ratio: 4/3; }
  .gallery-moment .photo-sub { width: 100%; min-width: 0; aspect-ratio: 4/3; }
}

/* ============================================================ FAQ — editorial polish for "Common Questions" sections site-wide
 * Editorial-warm two-column rows:
 *   - Italic Fraunces numeral in deep brand orange (accent-ink for AA contrast)
 *   - Sans-serif eyebrow micro-label ("Q.") below the numeral as a quiet ladder mark
 *   - Display-serif question, body-serif answer
 *   - On hover (or focus-within from the section heading link): numeral lifts
 *     and scales, a vertical accent bar grows alongside it, the question
 *     brightens. Smooth spring easing. Non-interactive (rows aren't links);
 *     hover is for editorial delight + scan-affordance only.
 *   - Last row uses a slightly stronger bottom rule to "close" the list
 *   - Reduced-motion users get the same final state, no transitions
 */
.faq {
  list-style: none;
  padding: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.faq-item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(3.5rem, 7vw, 5.5rem) 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem) clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-inline-start: clamp(0.75rem, 1.5vw, 1.25rem);
  border-top: 1px solid var(--color-rule);
  align-items: baseline;
  transition: border-top-color var(--dur-med) var(--ease-soft);
}
/* 2026-05-30: first/last borders changed from accent-tinted to neutral — were reading pink */
.faq-item:first-child { border-top: 1px solid var(--color-rule); }
.faq-item:last-child  { border-bottom: 1px solid var(--color-rule); }

/* Vertical accent bar — sits at the left edge of each row, height 0 by default,
 * grows on row hover to draw the eye to the active question. Pure decorative
 * motif — no semantic meaning. */
.faq-item::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 2px;
  height: 0;
  background: var(--color-accent);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: height 360ms var(--ease-spring);
  pointer-events: none;
}
.faq-item:hover::before { height: 56%; }

.faq-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--color-accent-ink);
  font-variant-numeric: tabular-nums;
  grid-row: span 2;
  padding-top: 0.08em;
  transition: color var(--dur-short) var(--ease-out), transform 260ms var(--ease-spring);
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
}
/* Tiny "Q." marker that sits inline after the numeral — sans-serif micro-eyebrow
 * for editorial rhythm. Uses ::after so we don't touch HTML. */
.faq-num::after {
  content: "Q.";
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 0.46em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-3);
  transform: translateY(-0.3em);
  transition: color var(--dur-short) var(--ease-out);
}
.faq-item:hover .faq-num {
  color: var(--color-accent-ink);
  transform: translateX(2px);
}
.faq-item:hover .faq-num::after { color: var(--color-accent); }

.faq-q {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: -0.012em;
  line-height: 1.22;
  color: var(--color-ink);
  margin: 0;
  grid-column: 2;
  max-width: 52ch;
  text-wrap: balance;
  transition: color var(--dur-short) var(--ease-out);
}
.faq-item:hover .faq-q { color: var(--color-accent-ink); }

.faq-a {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.62;
  color: var(--color-text-2);
  margin: 0;
  grid-column: 2;
  max-width: 64ch;
  text-wrap: pretty;
}

@media (max-width: 600px) {
  .faq-item {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding-inline-start: 0;
  }
  .faq-num { grid-row: auto; grid-column: 1; padding-top: 0; font-size: clamp(1.5rem, 5vw, 1.9rem); }
  .faq-q, .faq-a { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item::before, .faq-num, .faq-num::after, .faq-q {
    transition: none;
  }
}

/* ============================================================ HOME POLISH (2026-05-28 PM) — pumped numerals, cinematic retail, refined statement */

/* Stat band — pump the typography to match IR treatment */
.statrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(2rem, 4vw, 3rem);
  margin-block: var(--space-xl);
  padding-block: var(--space-md);
}
.statrow .stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule-strong);
}
.statrow .stat .num {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.statrow .stat .lab {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-accent-ink);
  margin-top: var(--space-xs);
}
@media (max-width: 820px) { .statrow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .statrow { grid-template-columns: 1fr; } }

/* Retail block — cinematic editorial typography with separators */
.retailers {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-ink);
  text-align: center;
}
.retailers li {
  display: inline-flex;
  align-items: baseline;
  padding-inline: clamp(0.6rem, 1.5vw, 1.25rem);
  position: relative;
}
.retailers li:not(:last-child)::after {
  content: "·";
  margin-left: clamp(0.6rem, 1.5vw, 1.25rem);
  color: var(--color-accent);
  font-style: normal;
  font-weight: 400;
  font-size: 0.8em;
  position: absolute;
  right: calc(-0.4 * clamp(0.6rem, 1.5vw, 1.25rem));
  top: 0;
}

/* Numbered rows on "what we do" — bigger italic Fraunces numerals */
.numbered { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); margin-top: var(--space-2xl); }
.numbered .row {
  display: grid;
  grid-template-columns: clamp(4rem, 10vw, 7rem) 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}
.numbered .row .n {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--color-accent-ink);
  font-variant-numeric: tabular-nums;
}
.numbered .row > div { display: flex; flex-direction: column; gap: var(--space-sm); }
.numbered .row h3 {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: var(--text-xl);
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--color-ink);
}
.numbered .row p { color: var(--color-text-2); max-width: 64ch; }
@media (max-width: 600px) {
  .numbered .row { grid-template-columns: 1fr; gap: var(--space-sm); }
}

/* Statement banner — refined copy weight */
.statement .line {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--color-on-dark);
}
.statement .line em, .statement .line .accent-em { font-style: italic; color: var(--color-amber); }
.statement .eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: var(--text-base);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-amber);
  margin-bottom: var(--space-md);
}
.statement .src {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: var(--text-base);
  color: var(--color-on-dark-2);
  margin-top: var(--space-md);
}

/* CTA band — slightly more cinematic typography */
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: -0.022em;
  line-height: 1.1;
  max-width: 36ch;
  /* 2026-06-25: was margin-inline:auto, which centered the headline while the
   * sub-copy and buttons stayed left (read as misaligned). Editorial-left now. */
}

/* ============================================================ PHOTO STRIP — cinematic 4-up moments grid (used on Careers) */
/* Careers photo strip — 2026-05-30 premium polish.
 *
 * Treatment: each photo sits in an overflow-hidden frame so the image can
 * slowly zoom-in on hover without bleeding outside the rounded corners.
 * Cinematic shadow stack (ambient + key) at rest; both layers boost on
 * hover. Frame lifts -3px with easeOutQuint deceleration for the "Apple
 * product card" feel. Caption em-text shifts to accent on hover so the
 * whole figure feels active. */
.photo-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  margin-top: var(--space-xl);
}
.photo-strip figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  cursor: pointer;
}
.photo-strip figure .ph-frame,
.photo-strip figure {
  /* a single hover target — apply ph-frame OR not, both work */
}
.photo-strip figure > img {
  /* Wrap image styling into a frame-like treatment using clip + transform-origin */
  width: 100%;
  height: clamp(14rem, 24vw, 22rem);
  object-fit: cover;
  border-radius: var(--radius-md);
  /* Layered cinematic shadow: ambient (large, soft, dim) + key (tight, defined) */
  box-shadow:
    0 14px 38px -18px color-mix(in oklch, var(--color-ink) 22%, transparent),
    0 3px 10px -4px color-mix(in oklch, var(--color-ink) 10%, transparent),
    0 1px 0 color-mix(in oklch, var(--color-ink) 6%, transparent) inset;
  transition:
    transform 540ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 540ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 540ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  filter: saturate(0.96);
}
/* Hover state: image lifts AND zooms slightly inside its bounds.
 * The combined translate + scale gives a "rising forward in space" feel.
 * Shadow doubles in depth. Saturation bumps to full color (subtle but felt). */
.photo-strip figure:hover > img,
.photo-strip figure:focus-within > img {
  transform: translateY(-4px) scale(1.025);
  box-shadow:
    0 28px 56px -20px color-mix(in oklch, var(--color-ink) 32%, transparent),
    0 6px 18px -4px color-mix(in oklch, var(--color-ink) 16%, transparent),
    0 1px 0 color-mix(in oklch, var(--color-ink) 8%, transparent) inset;
  filter: saturate(1.04);
}
.photo-strip figcaption.caption {
  margin-top: 0;
  padding-inline: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-2);
  transition: color 320ms var(--ease-out);
}
.photo-strip figcaption em {
  color: var(--color-ink);
  font-style: italic;
  font-weight: 380;
  transition: color 320ms var(--ease-out);
}
.photo-strip figure:hover figcaption em { color: var(--color-accent-ink); }
@media (max-width: 980px) { .photo-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .photo-strip { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .photo-strip figure > img,
  .photo-strip figcaption,
  .photo-strip figcaption em { transition: none; }
  .photo-strip figure:hover > img { transform: none; }
}

/* ============================================================ FACILITY CONTEXT — italic Fraunces context line under each facility h3 */
.facility-context { font-family: var(--font-display); font-style: normal; font-weight: 400; font-size: var(--text-base); color: var(--color-text-2); margin-top: var(--space-xs); max-width: 42ch; line-height: 1.45; }
.facility-context em { font-style: italic; color: var(--color-ink); font-weight: 400; }

/* ============================================================ SKIP-TO-CONTENT — a11y keyboard navigation */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99999;
  padding: 0.75em 1.25em;
  background: var(--color-ink);
  color: var(--color-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus, .skip-link:focus-visible {
  left: 0;
  outline: 2px solid var(--color-amber);
  outline-offset: 0;
}

/* Improve focus on the visually-hidden span pattern used in summaries */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================ DEPLOY-READINESS — mobile / iOS / Android edge cases (2026-05-28) */

/* Disable the gray tap-flash on iOS Safari */
* { -webkit-tap-highlight-color: transparent; }

/* Disable double-tap-zoom delay on interactive elements (iOS Safari) */
a, button, summary, .concrete-pill, .btn, .nav-toggle-label,
.mock-ribbon-dismiss, .replay-btn { touch-action: manipulation; }

/* Hover-as-touch guard: only run hover transforms where real hover exists. */
@media (hover: none) {
  .brand-card:hover, .person:hover, .facility:hover, .post:hover,
  .concrete-pill:hover, .btn:hover {
    transform: none;
    box-shadow: var(--shadow-soft);
  }
}

/* Use dynamic viewport units where 100vh would jump under Mobile Safari */
.splash { min-height: 100dvh; }
@supports not (height: 100dvh) { .splash { min-height: 100vh; } }

/* Respect iOS safe-area insets (notch, home indicator) */
.nav { padding-top: max(0px, env(safe-area-inset-top)); }
.foot {
  padding-left: max(clamp(1.5rem, 4vw, 3rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.5rem, 4vw, 3rem), env(safe-area-inset-right));
  padding-bottom: max(clamp(1rem, 2vw, 1.5rem), env(safe-area-inset-bottom));
}
.mock-ribbon { padding-top: max(0.5em, env(safe-area-inset-top)); }
/* (REMOVED 2026-06-01 anti-AI part 2: .reading-progress safe-area override) */

/* Minimum touch target sizes per iOS HIG (44×44pt) — scoped to PRIMARY actions
   only. Dense-colophon footer link lists (.concrete-top, .concrete-credit) use
   padding-based touch area instead, to preserve editorial rhythm. */
.nav-links a, .nav-toggle-label, .btn, .concrete-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.foot-col a, .concrete-top a, .foot-bottom a, .concrete-credit a {
  padding-block: 0.55em;
}
.mock-ribbon-dismiss { min-width: 32px; min-height: 32px; }

/* Smooth momentum scrolling on scrollable inner regions */
.marquee-track, [data-scroll] { -webkit-overflow-scrolling: touch; }

/* Prevent horizontal overflow on narrow viewports (iPhone SE 320px) */
body { overflow-x: clip; }
.shell, .shell-wide { max-width: 100%; }

/* Words that wrap awkwardly on narrow screens — allow break inside long brand strings */
@media (max-width: 540px) {
  .concrete-top a { white-space: normal; }
}
@media (max-width: 380px) {
  .nav-logo img { max-width: 140px; }
}

/* ============================================================ POLISH PASS — quick wins A–J (2026-05-28) */

/* A — expanded scroll-margin coverage so deep-links don't tuck under sticky nav */
section[id], h2[id], h3[id], .person[id], .brand-section[id], .facility[id] { scroll-margin-top: 6rem; }

/* C — card hover lifts (consistent across all card components)
 * Spring easing on transform gives the lift a subtle tactile bounce;
 * shadow uses --ease-soft so depth grows smoothly without overshoot.
 * :focus-within mirrors the hover lift so keyboard users see the card respond
 * when their Tab focus enters any link inside it. */
.person, .facility, .post {
  transition: transform 320ms var(--ease-spring), box-shadow 320ms var(--ease-soft);
}
.person:hover, .facility:hover, .post:hover,
.person:focus-within, .facility:focus-within, .post:focus-within { transform: translateY(-3px); }
.facility:hover .facility-media, .facility:focus-within .facility-media { box-shadow: var(--shadow-card); }
.facility-media { transition: box-shadow 320ms var(--ease-soft); }
@media (prefers-reduced-motion: reduce) {
  .person, .facility, .post, .brand-card { transition: none; }
  .person:hover, .facility:hover, .post:hover, .brand-card:hover { transform: none; }
}

/* E — external link arrow glyph (↗) alignment + size */
a [class*="arr"], a .arrow,
.nav-links a > .arr, .foot a > .arr,
li a:has(> :only-child) {
  /* Inline arrows in links */
}
a:where([href^="http"], [href^="mailto:"], [target="_blank"]) .arrow,
.concrete-top a, .foot-col a {
  /* (no-op — kept for selector locality) */
}
/* Normalize the inline ↗ glyph used in nav/footer/link text */
.nav a > .arr, .pagenav .arr, .post .arr,
.link-line .arrow, .concrete-section .arr {
  display: inline-block;
  vertical-align: -0.025em;
  font-style: normal;
  line-height: 1;
}

/* F — coordinated splash → nav handoff (nav fades in as splash exits) */
html.js .nav { opacity: 0; transition: opacity 480ms var(--ease-out); }
html.loaded .nav { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.js .nav { opacity: 1; transition: none; } }

/* G — hero proof-points stagger (editorial 80ms cascade) */
html.js .hero.hero-manifesto .proof-points li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
html.loaded .hero.hero-manifesto .proof-points li { opacity: 1; transform: none; }
html.loaded .hero.hero-manifesto .proof-points li:nth-child(1) { transition-delay: 720ms; }
html.loaded .hero.hero-manifesto .proof-points li:nth-child(2) { transition-delay: 800ms; }
html.loaded .hero.hero-manifesto .proof-points li:nth-child(3) { transition-delay: 880ms; }
html.loaded .hero.hero-manifesto .proof-points li:nth-child(4) { transition-delay: 960ms; }
@media (prefers-reduced-motion: reduce) {
  html.js .hero.hero-manifesto .proof-points li { opacity: 1; transform: none; transition: none; }
}

/* H — mock-ribbon dismiss button (× on the right) */
.mock-ribbon { position: relative; }
.mock-ribbon-dismiss {
  position: absolute;
  top: 50%;
  right: var(--space-md);
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid var(--color-on-dark-soft-25);
  color: var(--color-on-dark-2);
  font-size: 0.9em;
  line-height: 1;
  padding: 0.2em 0.5em;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.mock-ribbon-dismiss:hover { background: var(--color-on-dark-soft-10); color: var(--color-on-dark); }
.mock-ribbon.is-dismissed { display: none; }

/* (REMOVED 2026-06-01 anti-AI part 2: .reading-progress bar — second
   scroll-progress implementation missed when .scroll-progress was killed
   in 223bffa. Same AI-template tell. Both bars now gone.) */

/* J — print stylesheet: strip dark surfaces, photos, splash, fancy footer; readable B&W */
@media print {
  .splash, .mock-ribbon, .nav, .pagenav, .marquee-cta, .foot,
  .hero-scroll-cue, .hero-photo, .footer-frame, .variant-page, .replay-btn { display: none !important; }
  body { background: white !important; color: black !important; }
  main, section, .shell, .shell-wide { background: white !important; padding-block: 0.5cm !important; }
  .band-ink, .band-paper, .band-paper-2 { background: white !important; color: black !important; }
  .band-ink * { color: black !important; }
  h1, h2, h3, h4, p, li, blockquote, cite { color: black !important; break-inside: avoid; }
  h1 { font-size: 22pt; margin: 0 0 12pt; }
  h2 { font-size: 16pt; margin: 18pt 0 8pt; page-break-after: avoid; }
  h3 { font-size: 13pt; margin: 12pt 0 6pt; page-break-after: avoid; }
  p, li { font-size: 10.5pt; line-height: 1.45; }
  .accent-em, em.accent-em, .editorial-eyebrow em, em { color: black !important; font-style: italic; }
  .editorial-eyebrow::before { background: black !important; }
  img:not(.foot-mark):not(.gpb-mark) { max-width: 4cm; max-height: 4cm; }
  .portrait { max-width: 2.5cm; max-height: 2.5cm; }
  a { color: black !important; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .pending { border: 1px solid black; background: white; }
  details > summary { display: none; }
  details[open] > summary { display: block; }
  details { break-inside: avoid; }
  .reveal, .stagger > *, .hero-copy, .hero-figure, .hero-photo-figure, .hero h1 .hl { opacity: 1 !important; transform: none !important; }
}
.facility h3 { font-size: var(--text-3xl); font-weight: 360; letter-spacing: -0.015em; }

/* ============================================================ STAT-BAND (v12.11)
   Compact stat strip that sits IMMEDIATELY UNDER THE HERO on every page that needs one.
   Distinct from IR's .stat-board (3-col, mech copy) — this is a horizontal band of 4–6
   numeric proof points with no mech line. Designed to give visual hierarchy to numbers
   that previously lived buried in body copy. Lives on a .band-paper-2 surface for
   visual separation from the hero above. */
.stat-band-section {
  /* Tighter vertical rhythm than a normal section — this is a strip, not a band */
  padding-block: clamp(2rem, 4vw, 3rem) !important;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.stat-band {
  display: grid;
  grid-template-columns: repeat(var(--stat-band-cols, 6), minmax(0, 1fr));
  gap: var(--space-lg) clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.stat-band .sb {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.stat-band .sb .num {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.stat-band .sb .unit {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-2);
  margin-top: var(--space-xs);
  line-height: 1.3;
}
/* Variants: 4-col, 5-col layouts (default 6) */
.stat-band[data-cols="4"] { --stat-band-cols: 4; }
.stat-band[data-cols="5"] { --stat-band-cols: 5; }
.stat-band[data-cols="6"] { --stat-band-cols: 6; }
/* Responsive collapse */
@media (max-width: 960px) {
  /* flex-wrap + center so an odd count (e.g. the 5-stat band) centers its
     trailing row instead of leaving an empty grid cell. */
  .stat-band { display: flex; flex-wrap: wrap; justify-content: center; }
  .stat-band .sb { flex: 0 1 28%; }
}
@media (max-width: 640px) {
  .stat-band .sb { flex: 0 1 42%; }
  .stat-band .sb .num { font-size: clamp(1.75rem, 6vw, 2.3rem); }
}

/* ============================================================ QUICK WINS — 2026-06-01 polish batch
 *
 * 6 small wins shipped together for visible refinement across the site.
 * Smooth-scroll (A) and slide-up reveals (H) were already in place at the
 * top of the file (lines 13 and 1857–1864). These are the additions.
 * ============================================================ */

/* ---- C — text-wrap: balance on ALL major headlines (Apple uses this everywhere) ---- */
/* Browser support: Chrome 114+, Safari 17.4+, Firefox 121+. Gracefully degrades
 * (no balance) on older browsers — no broken layout. */
h1, h2, h3,
.brandpage-intro h1,
.brandpage-brand-name,
.spec-h1, .spec-h2,
.brand-tagline,
.vm-statement,
.pq-text {
  text-wrap: balance;
}

/* ---- F — Button :active scale-down for tactile click feedback ---- */
/* Adds a subtle 0.97 scale to every brand button on press. Combines with
 * existing :active translateY rules — buttons feel like they "press in"
 * when clicked. Every Apple/Linear/Stripe button does this. */
.btn:active,
.btn-primary:active,
.btn-ghost:active,
.btn-on-dark:active,
.brandpage-cta:active,
.concrete-pill:active,
.v1-cta:active,
.brand-card:active {
  transform: scale(0.97) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn-primary:active, .btn-ghost:active, .btn-on-dark:active,
  .brandpage-cta:active, .concrete-pill:active,
  .v1-cta:active, .brand-card:active {
    transform: none;
  }
}

/* ---- D — Image fade-in on lazy load ---- */
/* Lazy-loaded images smoothly fade in instead of pop-appearing. Pairs with
 * a small JS hook in site.js that marks images with .is-loaded once they
 * fire the load event. Images already in the viewport at first paint will
 * have img.complete = true and get marked is-loaded immediately. */
img[loading="lazy"]:not(.is-loaded) {
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
img[loading="lazy"].is-loaded {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  img[loading="lazy"]:not(.is-loaded) { opacity: 1; transition: none; }
}

/* (REMOVED 2026-06-01 anti-AI: scroll progress bar — biggest V0/Lovable template tell.) */

/* ============================================================ GPB SEAL — custom brand mark (2026-06-01)
 *
 * The site's signature glyph. A circular publisher's colophon:
 *   - Outer thin ring + main ring (concentric)
 *   - Sofia Sans "GOLDEN PET BRANDS" wrapping the top (logo DNA)
 *   - Italic Newsreader "GPB" monogram at center (editorial voice)
 *   - Sofia Sans "EST 2017 · LOS ANGELES" at the bottom
 *   - Tiny compass-style accent dots at cardinal points
 *
 * Used recurringly across the site as the closing mark on key sections
 * and in the footer. Replaces the four AI-template motion signals that
 * were stripped (scroll progress bar, magnetic CTAs, cursor spotlight,
 * counter animation). One custom mark > eight off-the-shelf motion
 * features that don't serve a brand thesis.
 *
 * SVG uses currentColor so it picks up the surrounding ink tone via
 * the .gpb-seal-wrap color property.
 * ============================================================ */
.gpb-seal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-md);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--color-text-2);
  text-align: center;
}
.gpb-seal-wrap .gpb-seal {
  width: clamp(96px, 11vw, 130px);
  height: auto;
  opacity: 0.78;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.gpb-seal-wrap:hover .gpb-seal {
  opacity: 1;
  transform: rotate(-3deg);
}
.gpb-seal-wrap .gpb-seal-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: var(--color-text-3);
  letter-spacing: 0.01em;
  max-width: 38ch;
}

/* Footer placement — small in the dark footer band. SVG defaults to ink (#2d241f);
 * filter inverts it to paper white so it reads correctly on the dark surface. */
.foot .gpb-seal {
  width: clamp(64px, 6vw, 80px);
  height: auto;
  opacity: 0.55;
  filter: invert(1) brightness(1.3);
  transition: opacity var(--dur-med) var(--ease-out);
}
.foot .gpb-seal:hover { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .gpb-seal-wrap:hover .gpb-seal { transform: none; }
}

/* ============================================================
   CUSTOM DESIGN MOVES (2/3/4/5/6/7) — shipped 2026-06-01
   Forensic AI-design pass: 6 moves to push the site from
   "well-executed AI" to "magazine-grade corporate".
   Move 1 (GPB seal) shipped previously in commit 223bffa.
   ============================================================ */

/* MOVE 2 — Asymmetric editorial grid + marginalia
   Replaces the symmetric 01/02/03 stack with a Harper's/NYT Magazine
   editorial layout. Each row alternates orientation; real source
   citations hang in the opposite margin as italic Newsreader marginalia.
   Hook: <div class="editorial-grid"> on homepage "what we do" section. */
.editorial-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  margin-top: var(--space-2xl);
}
.editorial-grid .row {
  display: grid;
  grid-template-columns: clamp(4rem, 10vw, 7rem) minmax(0, 1fr) clamp(10rem, 22vw, 17rem);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: baseline;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}
.editorial-grid .row:nth-child(even) {
  grid-template-columns: clamp(10rem, 22vw, 17rem) minmax(0, 1fr) clamp(4rem, 10vw, 7rem);
}
.editorial-grid .row:nth-child(even) .n {
  grid-column: 3;
  text-align: right;
}
.editorial-grid .row:nth-child(even) .body {
  grid-column: 2;
}
.editorial-grid .row:nth-child(even) .marginalia {
  grid-column: 1;
  text-align: right;
  padding-right: var(--space-md);
  border-right: 1px solid var(--color-rule);
  padding-left: 0;
  border-left: none;
}
.editorial-grid .row .n {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--color-accent-ink);
  font-variant-numeric: tabular-nums;
}
.editorial-grid .row .body { display: flex; flex-direction: column; gap: var(--space-sm); }
.editorial-grid .row h3 {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: var(--text-xl);
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--color-ink);
}
.editorial-grid .row p { color: var(--color-text-2); max-width: 60ch; }

/* Marginalia — small italic Newsreader hanging notes with source citations */
.editorial-grid .marginalia {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text-2);
  padding-left: var(--space-md);
  border-left: 1px solid var(--color-rule);
  align-self: start;
}
.editorial-grid .marginalia .src-label {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.62rem;
  color: var(--color-accent-ink);
  margin-bottom: 0.35em;
}
@media (max-width: 820px) {
  .editorial-grid .row,
  .editorial-grid .row:nth-child(even) {
    grid-template-columns: clamp(3rem, 8vw, 5rem) 1fr;
  }
  .editorial-grid .row .n,
  .editorial-grid .row:nth-child(even) .n {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
  }
  .editorial-grid .row .body,
  .editorial-grid .row:nth-child(even) .body {
    grid-column: 2;
    grid-row: 1;
  }
  .editorial-grid .row .marginalia,
  .editorial-grid .row:nth-child(even) .marginalia {
    grid-column: 1 / -1;
    grid-row: 2;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--color-rule);
    padding-left: 0;
    padding-right: 0;
    padding-top: var(--space-sm);
    text-align: left;
    margin-top: var(--space-sm);
  }
}

/* MOVE 3 — Type-as-image "thrive" moment
   Massive italic Newsreader "thrive" set at 12-16rem, bleeding off the
   right edge of the conviction banner composing into the photograph.
   The existing word-reveal line still reads; the giant glyph is a
   decorative imprint that gives the banner editorial scale.
   Hook: <span class="thrive-imprint">thrive</span> inside .statement. */
.statement .thrive-imprint {
  position: absolute;
  right: -0.08em;
  top: 38%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(7rem, 18vw, 16rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--color-on-dark);
  opacity: 0.14;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .statement.reveal .thrive-imprint {
    opacity: 0;
    transform: translateY(-50%) translateX(2.5rem);
    transition: opacity 1400ms var(--ease-out) 200ms, transform 1400ms var(--ease-out) 200ms;
  }
  .statement.reveal.in .thrive-imprint {
    opacity: 0.14;
    transform: translateY(-50%) translateX(0);
  }
}
@media (max-width: 720px) {
  .statement .thrive-imprint {
    top: auto;
    bottom: 0.5rem;
    right: -0.05em;
    transform: translateY(0);
    font-size: 6rem;
    opacity: 0.11;
  }
  .statement.reveal.in .thrive-imprint { transform: translateY(0); }
}

/* (REMOVED 2026-06-02: Move 4 — Caveat hand-lettered section eyebrows.
   Killed site-wide. Caveat font dropped from Google Fonts load on all pages.
   Eyebrows standardize on the existing editorial-eyebrow treatment.) */

/* MOVE 5 — Full-bleed photo-as-section
   100vh editorial spread, single italic Newsreader pull-quote burned over.
   No buttons, no chrome — straight magazine spread. Bridges the conviction
   banner and the leadership section. */
.editorial-spread {
  position: relative;
  min-height: clamp(60vh, 86vh, 100vh);
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  background: #1a1410;
}
.editorial-spread .spread-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  z-index: 0;
}
.editorial-spread::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,16,12,0.20) 0%, rgba(20,16,12,0.05) 30%, rgba(20,16,12,0.45) 100%),
    linear-gradient(90deg, rgba(20,16,12,0.32) 0%, rgba(20,16,12,0) 58%);
  pointer-events: none;
}
.editorial-spread .spread-quote-wrap {
  position: relative;
  z-index: 2;
  padding-inline: clamp(1.5rem, 6vw, 6rem);
  padding-block: clamp(3rem, 10vh, 6rem);
  max-width: 28ch;
}
.editorial-spread .spread-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-on-dark);
  margin: 0;
}
.editorial-spread .spread-attr {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-on-dark-2);
  opacity: 0.85;
}
@media (max-width: 720px) {
  .editorial-spread { min-height: 70vh; }
  .editorial-spread .spread-photo { object-position: center 30%; }
}

/* (REMOVED 2026-06-02: Move 6 — brand-card signature underline motion.
   Visually read as an underline for the 'See the brand' link rather than
   a standalone signature. Killed. Brand cards keep the lift + shadow hover.) */

/* MOVE 7 — Editorial photographic color application
   Conviction banner: dark vignette swapped for a warm overlay sampled
   from the dog photo (sun-warmed sand / golden-fur shadow tones). The
   surface reads as part of the photograph, not a template black wash.
   GPB seal: now sits on a warm-sand band sampled from the same photo. */
.statement::after {
  background:
    radial-gradient(ellipse at 28% 38%, rgba(58, 38, 18, 0.18) 0%, rgba(58, 38, 18, 0.62) 70%, rgba(36, 24, 12, 0.82) 100%) !important;
}
.statement .eyebrow { color: #e6c189; }
.statement .src { color: #d9c8a8; opacity: 0.92; }
.gpb-seal-wrap.editorial-band {
  background: linear-gradient(180deg, #d6c3a0 0%, #c5ad84 100%);
  padding-block: clamp(3rem, 7vw, 5rem);
  margin-top: 0;
  margin-bottom: 0;
}
.gpb-seal-wrap.editorial-band .gpb-seal { opacity: 0.88; }

/* ============================================================
   HOTFIX 2026-06-01 — Leadership img.portrait sizing
   ============================================================
   Symptom: Nicole Cortese + Amy Tesinsky's photos rendered as huge
   tall ovals (~400×900px) on leadership.html, while their placeholder
   sibling cards (.portrait-ph divs) rendered as normal 12.5rem circles.

   Root cause: the .person .portrait rule relied on aspect-ratio: 1/1
   to derive the height from width: 100% + max-width: 12.5rem. In the
   .people.execs flex container, the interaction between the flex item's
   computed width, the img's intrinsic 800×800 attrs, and aspect-ratio
   wasn't producing the expected square box on these specific cards.

   Fix: explicit width + height pinned to 12.5rem (no aspect-ratio
   derivation), flex-shrink: 0 so the parent flex can't squeeze the
   img into a different aspect. Higher specificity (3 class selectors
   + 1 element) beats the line 1536 base rule. Works for any img
   that lives in a .person card across the site.
   ============================================================ */
.people .person img.portrait,
.who-runs-people .person img.portrait,
.people.execs .person img.portrait {
  width: 12.5rem;
  height: 12.5rem;
  max-width: 12.5rem;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 50%;
  margin-inline: auto;
  display: block;
}
@media (max-width: 520px) {
  .people .person img.portrait,
  .who-runs-people .person img.portrait,
  .people.execs .person img.portrait {
    width: 10rem;
    height: 10rem;
    max-width: 10rem;
  }
}

/* ============================================================
   DESIGN-POLISH BATCH 2026-06-02 — Brittany's bug list
   ============================================================ */

/* ITEM 2 supplement — Light-treatment ESOP callout
   Replaces the dark .band-ink ESOP band. Now reads on paper with editorial
   weight from typography only. Top + bottom hairline rules separate it from
   neighboring sections. */
.callout-band.callout-band-light {
  background: var(--color-paper);
  border-block: 1px solid var(--color-rule);
  text-align: left;
}
.callout-band.callout-band-light .editorial-eyebrow {
  color: var(--color-accent-ink);
}
.callout-band.callout-band-light .editorial-eyebrow::before {
  background: var(--color-accent);
}
.callout-band.callout-band-light h2 {
  color: var(--color-ink);
  margin-block: var(--space-md) var(--space-sm);
}
.callout-band.callout-band-light .lede {
  color: var(--color-text-2);
  max-width: 56ch;
}

/* ITEM 7 — Dr. Gary signature top-right (matches credential-badge placement)
   Mirrors the .person.has-badge pattern. Signature image floats absolute
   top-right of the portrait. Sized smaller than the inline-below variant so
   it reads as a corner accent, not a decoration in the body flow.
   Hook: <div class="person has-signature">…</div> wrapping the existing
   <img class="portrait"> + <img class="signature">. */
.person.has-signature { position: relative; }
.person.has-signature .portrait { position: relative; }
.person.has-signature .signature {
  position: absolute;
  top: clamp(-0.4rem, -0.8vw, -0.6rem);
  right: clamp(-0.4rem, -0.8vw, -0.6rem);
  width: clamp(72px, 10vw, 110px);
  max-width: none;
  height: auto;
  margin: 0;
  z-index: 2;
  opacity: 0.92;
  filter: brightness(0) saturate(100%) invert(13%) sepia(15%) saturate(420%) hue-rotate(2deg) brightness(0.95)
          drop-shadow(0 2px 6px var(--color-scrim-soft));
  transition: transform var(--dur-short) var(--ease-out);
}
.person.has-signature:hover .signature { transform: rotate(-3deg) scale(1.04); }

/* ITEM 4 — Brand cards: apple-style alignment
   Left-aligned everything, larger headlines, more generous padding,
   subtler category band (no full-width fill bar — small uppercase label
   above the headline). */
.brand-card .body {
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  gap: clamp(0.35rem, 1vw, 0.6rem);
  text-align: left;
}
.brand-card h3 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 380;
  letter-spacing: -0.012em;
  line-height: 1.12;
  margin-bottom: 0.15em;
}
.brand-card p {
  font-size: clamp(0.95rem, 1.1vw, 1rem);
  line-height: 1.55;
  color: var(--color-text-2);
  margin-top: 0.4em;
}
.brand-card .cat-band {
  text-align: left;
  background: transparent;
  border-bottom: none;
  padding: 0.5em 1em 0;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--color-text-2);
  font-weight: 600;
}
.brand-card .link-line {
  margin-top: clamp(0.75rem, 1.5vw, 1.1rem);
  align-self: flex-start;
}

/* ITEM 8 — "The dogs are why" attribution
   Was: Sofia uppercase letterspaced (corporate). Now: italic Newsreader,
   small, slight letterspacing — matches the pull-quote's family/voice.
   Reads as a magazine sub-line, not as a corporate caption. */
.editorial-spread .spread-attr {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-on-dark);
  opacity: 0.78;
}

/* ============================================================
   ABOUT PAGE — styling pass (v12.44 reflow). 2026-06-03.
   Scoped under .page-about. All-white palette (per v12.43): the former
   band-paper-2 "shaded" sections no longer shade (paper-2 == paper), so
   section rhythm here comes from hairline rules + type + spacing, not fills.
   ============================================================ */

/* §2 — headingless identity statement (v12.52: the eyebrow + H2 were removed).
   The large drop-cap lead paragraph opens the page on its own — no heading
   scaffold, no reserved/orphaned title space. Hairline rule + generous padding
   give it feature weight; the orange drop-cap is the opening mark. */
.thesis-feature {
  border-top: 1px solid var(--color-rule);
  padding-block: clamp(var(--space-2xl), 8vw, var(--space-3xl));
}
/* drop-cap lead reads left-aligned (beat the .long-form justify default) */
.thesis-feature .lede.long-form { text-align: left; }

/* §3 VISION · MISSION — elevated editorial moment (the emotional anchor near
   the top). Drops the boxed-card chrome for open, accent-topped columns with
   large statements + a centered heading, so it reads as a designed moment, not
   a mid-page aside. All-white palette — presence comes from type + space + accent. */
.page-about section[aria-labelledby="vision-mission-h"] { padding-block: clamp(var(--space-2xl), 7vw, var(--space-3xl)); }
.page-about section[aria-labelledby="vision-mission-h"] .shead { text-align: left; max-width: 54ch; margin-inline: 0; }
.page-about .vm-grid { margin-top: var(--space-2xl); gap: clamp(2rem, 5vw, 4rem); }
.page-about .vm-block {
  background: transparent;
  border: none;
  border-top: 3px solid var(--color-accent);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}
.page-about .vm-block:hover { transform: none; box-shadow: none; }
.page-about .vm-label { font-size: var(--text-sm); letter-spacing: 0.16em; }
.page-about .vm-statement { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.24; max-width: none; }

/* ===== Brand accent band — one deliberate dark statement section (home "What we do" +
 * About Vision/Mission). Reworked 2026-06-25 to the official S-1 "About" art treatment:
 * near-black background, white headline/body, the key phrase highlighted in brand orange.
 * Matches the registration-statement design AND clears WCAG AA (white ~21:1 / orange ~7:1
 * on near-black) — the prior white-on-orange band missed AA. On-token (--color-on-dark*). ===== */
.band-accent { background: #0d0d0f; }
.band-accent h2 { color: var(--color-on-dark); }
.band-accent h2 em.accent-em { color: var(--color-accent); font-style: italic; }
.page-about .band-accent .shead .kicker { color: var(--color-accent); }
.page-about .band-accent .vm-block { border-top-color: var(--color-on-dark-soft-35); }
.page-about .band-accent .vm-label { color: var(--color-on-dark-2); }
.page-about .band-accent .vm-statement { color: var(--color-on-dark); }
.page-about .band-accent .vm-statement em.accent-em { color: var(--color-accent); }
/* band-accent on the homepage "What we do" section (uses .editorial-eyebrow, not .kicker) */
.band-accent .editorial-eyebrow { color: var(--color-accent); }
.band-accent .editorial-eyebrow::before { background: var(--color-accent); }

/* BAND RHYTHM — the former shaded bands (§4 stat band, §7 champions,
   §8 principles) are all-white now, so define them with hairline rules instead
   of fills. The §8 top rule falls between §7 and §8, fixing the adjacent-band
   read; the §8 bottom rule closes the §7+§8 cluster before §9 FAQ. */
.page-about .band-paper-2 { border-top: 1px solid var(--color-rule); }
.page-about .band-paper-2.has-watermark { border-bottom: 1px solid var(--color-rule); }

/* ============================================================
   APPLE / MOBILE POLISH — small wins, big impact (2026-06-03)
   ============================================================ */

/* (2) Jump-links: clear the sticky nav so the targeted heading isn't hidden
   underneath. */
:target { scroll-margin-top: 5rem; }

/* (4) Remove the grey tap-flash on touch; use a brief :active dim for tactile
   press feedback (Apple pattern). */
html { -webkit-tap-highlight-color: transparent; }
a:active, button:active, .concrete-pill:active, summary:active,
.brand-card:active { opacity: 0.7; }

/* (8) Consistent keyboard focus rings site-wide (a11y / IPO scrutiny). */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* (9) Fixed contact pill clears the notch / home indicator on modern phones. */
.sticky-contact {
  bottom: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-bottom, 0px));
  right: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-right, 0px));
}

/* ============================================================
   APPLE-GRADE LINE-BREAKING (2026-06-03)
   balance = even out short display/heading lines (no lonely last word);
   pretty  = prevent single-word orphans in body. Graceful-degrades on older
   browsers (property simply ignored). balance only acts on short blocks.
   ============================================================ */
h1, h2, h3,
.vm-statement, .spread-quote, .thrive-imprint,
.callout-band h2, .award-card h3 {
  text-wrap: balance;
}
p, li, figcaption,
.lede, .bio, .marginalia, .vm-statement {
  text-wrap: pretty;
}

/* Bio toggle (.bio-more on About champion cards) — hide the native ▶ disclosure
   marker so only the custom › chevron shows; rotate it on open. (2026-06-03:
   .bio-more had no summary styling, so both ▶ and › were rendering.) */
.bio-more summary { font-size: var(--text-sm); color: var(--color-accent-ink); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.35em; font-weight: 600; justify-content: center; }
.bio-more summary::-webkit-details-marker { display: none; }
.bio-more summary .chev { transition: transform var(--dur-short) var(--ease-out); }
.bio-more[open] summary .chev { transform: rotate(90deg); }

/* Dr. Gary Richter signature on his About champion card — top-right, parity with
   Dr. Marty's badge (whose signature is baked into the 50-yr badge PNG). Reuses
   the base .signature ink tint; just repositions it absolute over the portrait. */
.champ .signature {
  position: absolute;
  top: clamp(0.25rem, 1vw, 0.75rem);
  right: clamp(0.25rem, 1vw, 0.75rem);
  width: clamp(92px, 13vw, 124px);
  max-width: none;
  height: auto;
  margin: 0;
  z-index: 2;
  opacity: 0.9;
}

/* ============================================================
   DISCLOSURE CHEVRON — one consistent language (2026-06-03)
   The "Read bio" (.person) + "Read full bio" (.bio-more) expanders now share
   the FAQ accordion's chevron language: deep-orange (accent-ink) at rest,
   brighten to accent on hover/focus, spring rotation, native ▶ marker fully
   suppressed. Matches the site-standard .faq-collapse disclosure on every page.
   ============================================================ */
.person summary, .bio-more summary { color: var(--color-accent-ink); }
.person summary::marker, .bio-more summary::marker { content: ""; }
.person summary .chev, .bio-more summary .chev {
  color: var(--color-accent-ink);
  transition: transform 280ms var(--ease-spring), color var(--dur-short) var(--ease-out);
}
.person summary:hover, .person summary:focus-visible,
.bio-more summary:hover, .bio-more summary:focus-visible,
.person summary:hover .chev, .bio-more summary:hover .chev { color: var(--color-accent); }

/* Brand-people block — champion/vet portraits attached to each brand on Our Brands (Phase 2, CFO IA feedback) */
.brand-people { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.brand-people .kicker { margin: 0 0 var(--space-md); }
.brand-people .people { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); }
.brand-people .person { flex: 1 1 200px; max-width: 280px; }