/* =========================================================
   SOILCEA — CarriCea T1 grower site
   Paper-grove palette, subtle tan/white alternation
   ========================================================= */

:root {
  color-scheme: light;
  --grove:       #0b2b1d;
  --grove-deep:  #062017;
  --grove-soft:  #1b3f2c;

  /* paper tones — subtle alternation */
  --paper-0:     #fbf5e6;  /* lightest, hero */
  --paper-1:     #f5ecd6;  /* slightly darker tan */
  --paper-2:     #efe5d2;  /* medium tan */
  --paper-3:     #e8dcc0;  /* deeper accent */

  --ink:         #142319;
  --ink-soft:    #3a3220;
  --ink-mute:    #6e5f43;
  --orange:      #df7622;
  --orange-2:    #e58a36;
  --orange-deep: #c25e15;
  --note:        #f5e4a1;
  --note-line:   #c5a83e;
  --rule:        rgba(20, 35, 25, 0.14);
  --shadow-sm:   0 4px 14px rgba(20, 25, 15, 0.07);
  --shadow-md:   0 14px 36px rgba(20, 25, 15, 0.13);
  --shadow-lg:   0 30px 70px rgba(10, 25, 15, 0.22);

  /* Inter is the main typeface (headers + body). Caveat (handwritten) and
     Fraunces-italic survive only on a few intentional decorative accents. */
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--sans);
  --script: "Caveat", "Bradley Hand", cursive;
  --serif-display: "Fraunces", "Cormorant Garamond", Georgia, serif;

  --container: 1240px;
  /* The header + hero carry their gutters *inside* this width, so the ceiling is
     --container + both gutters. That lands their content on exactly the same
     column as every other section; without a ceiling they stretch edge to edge
     on ultrawide monitors while the rest of the page stays at --container. */
  --container-wide: calc(1240px + 112px);
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper-0);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* paper grain applied directly to body background, not as overlay */
body {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.10 0 0 0 0 0.05 0 0 0 .04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

img { display: block; max-width: 100%; height: auto; }
button, input, select, a { font: inherit; }
button, a { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  transform: translateY(-180%);
  background: #fff8e8; color: var(--ink);
  padding: 10px 14px; border-radius: 8px; font-weight: 800;
  transition: transform 200ms;
}
.skip-link:focus { transform: translateY(0); }

/* ----- typography helpers ----- */
.serif { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; }
.serif em { font-style: normal; font-weight: 700; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 12px;
}
.eyebrow--accent { color: var(--orange-deep); }

/* ----- buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff8e8;
  font-weight: 600;
  font-size: 15px;
  border: 0;
  transition: background 180ms, transform 120ms, box-shadow 180ms;
  box-shadow: 0 4px 14px rgba(190, 85, 15, 0.28);
  text-align: left;
}
.btn:hover { background: var(--orange-deep); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--orange { background: var(--orange); }
.btn--orange:hover { background: var(--orange-deep); }
.btn--green {
  background: var(--grove);
  color: #fff8e8;
  box-shadow: 0 4px 14px rgba(11, 43, 29, 0.32);
}
.btn--green:hover { background: var(--grove-deep); }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--block { display: flex; justify-content: center; width: 100%; padding: 13px 16px; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(20, 35, 25, 0.55);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(20, 35, 25, 0.06); }

.link-script {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.link-script svg { width: 18px; height: 18px; }
.link-script:hover { color: var(--orange-deep); }

/* ===========================================================
   HEADER — paper/light, like the Pro mockup
   =========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* continue the hero's orange spotlight up through the header so it reads as
     one wash. Solid (no backdrop blur) — the sticky blur was re-computing every
     scroll frame and causing global jank. */
  background:
    radial-gradient(150% 460% at 92% 165%, rgba(223, 118, 34, 0.20), rgba(223, 118, 34, 0.06) 32%, transparent 62%),
    var(--paper-0);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  max-width: none;
  margin: 0;
  padding: 16px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 0;
}
.brand img {
  height: 46px;
  width: auto;
}

.site-nav {
  display: flex;
  gap: clamp(18px, 2.4vw, 38px);
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.site-nav a {
  padding: 6px 2px;
  position: relative;
  transition: color 160ms;
}
.site-nav a:hover { color: var(--orange-deep); }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms;
}
.site-nav a:hover::after { transform: scaleX(1); }

.site-header__cta {
  padding: 12px 34px;
  font-size: 15px;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(190, 85, 15, 0.28);
}

/* ===========================================================
   HERO — paper background, compact, fits viewport
   =========================================================== */
.hero {
  position: relative;
  background: var(--paper-0);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  /* ===== EXPERIMENTAL: orange spotlight glow (easy to roll back) =====
     To revert, restore the two rgba(216,195,145) tan radials below. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* orange spotlight beaming in from the upper-right */
    radial-gradient(82% 98% at 97% 4%, rgba(223, 118, 34, 0.24), rgba(223, 118, 34, 0.09) 33%, transparent 60%),
    /* warm orange ambience low-right — grounds it and blends into the next section */
    radial-gradient(62% 72% at 92% 100%, rgba(223, 118, 34, 0.13), transparent 60%),
    /* soft tan fill top-left so the warmth isn't entirely one-sided */
    radial-gradient(ellipse at 10% 16%, rgba(216, 195, 145, 0.16), transparent 48%);
  pointer-events: none;
  z-index: -1;
}

.hero__inner {
  max-width: none;
  margin: 0;
  /* compact enough to fit a 14" MacBook screen, but with breathing room below the header */
  padding: clamp(44px, 4.6vw, 76px) var(--gutter) clamp(28px, 3vw, 46px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(400px, 520px) minmax(0, 1.6fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
  min-height: auto;
}

/* Ultrawide only. The header and hero are the page's two full-bleed containers;
   every other section is capped at --container. Out this wide that gap turns
   absurd — the hero's copy column stops at 520px while its photo column is an
   unbounded 1.6fr, so all the extra width pours into the photo. Only here do we
   give them a ceiling that lands their content on the same column as the rest
   of the page.

   2000px sits above every normal laptop/desktop width (14" MBP 1512, 16" 1728,
   1080p 1920) so those are untouched, but still catches an ultrawide — including
   a 5K2K panel running HiDPI, which reports ~2560. */
@media (min-width: 2000px) {
  .site-header__inner,
  .hero__inner {
    max-width: var(--container-wide);
    margin-inline: auto;
  }
}

.hero__copy {
  max-width: 620px;
  justify-self: start;
  align-self: center;
}
.hero__copy .eyebrow { color: var(--ink); font-size: 13px; letter-spacing: 0.22em; margin: 0 0 12px; }
/* ---- discrete floating preview dock (variant toggles) ---- */
.preview-dock {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 120;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 10px;
}
.preview-dock__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: rgba(251, 245, 230, 0.95);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color 160ms, box-shadow 160ms;
}
.preview-dock__btn:hover { color: var(--ink); box-shadow: var(--shadow-md); }
.preview-dock__btn svg { width: 16px; height: 16px; }
.preview-dock__panel {
  background: #fff8e8;
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 14px 16px;
  display: grid;
  gap: 12px;
}
.preview-dock__panel[hidden] { display: none; }
.preview-dock__title {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* generic pill switch (preview dock + solution share it) */
.ui-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  user-select: none;
}
.ui-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ui-switch__track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgba(20, 35, 25, 0.22);
  transition: background 200ms;
  flex-shrink: 0;
}
.ui-switch__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff8e8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 200ms;
}
.ui-switch input:checked + .ui-switch__track { background: var(--grove); }
.ui-switch input:checked + .ui-switch__track .ui-switch__thumb { transform: translateX(16px); }
.ui-switch input:focus-visible + .ui-switch__track { outline: 2px solid var(--orange); outline-offset: 2px; }

.hero__title {
  font-family: var(--serif);
  font-weight: 800;
  /* three big stacked lines */
  font-size: clamp(48px, 6vw, 90px);
  /* line-height >1 so the "g" descender never touches the line below */
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 30px;
  color: var(--ink);
}
.hero__title em {
  font-style: normal;
  font-weight: 800;
  color: var(--grove-soft);
}

.hero__tagline {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.3;
  color: var(--ink);
  font-weight: 500;
}

/* subtitle paragraph — hidden until the "Intro paragraph" variant is on */
.hero__sub {
  display: none;
  margin: 0 0 30px;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 560px;
}
.hero__sub sup { font-size: 0.6em; vertical-align: super; opacity: 0.7; }
/* intro-paragraph variant: show the subtitle and shrink the headline a touch
   so the hero still fits one MacBook screen */
body.hero-sub .hero__sub { display: block; }
body.hero-sub .hero__title {
  font-size: clamp(40px, 5vw, 74px);
  margin: 0 0 22px;
}
body.hero-sub .cert-row { margin-bottom: 26px; }

/* cert row — logos normalized to a uniform HEIGHT, natural width
   (equal cells + object-fit made the wide UF lockup render tiny).
   nowrap + flex-shrink keeps them on one line and shrinks gracefully. */
.cert-row {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* tighter gap than before so UF can take a wider cell without shrinking
     the other three (the row is full-width, so its extra width has to come
     from the spacing) */
  gap: clamp(8px, 0.9vw, 14px);
}
.cert {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
}
.cert img {
  height: clamp(58px, 6.2vw, 88px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}
/* UF is a wide lockup — give it a double-width cell and let it fill, so it
   reads as large as the others instead of being squeezed to a sliver */
.cert--wide { flex: 2 1 0; }
.cert--wide img { height: auto; width: 100%; max-width: 100%; }

.hero__actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.hero__actions .btn--lg { font-size: 18px; padding: 18px 34px; }
.hero__actions .link-script { font-size: 21px; }

/* hero visual */
.hero__visual {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(16px, 1.6vw, 24px);
}
.hero__photo {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  margin: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  min-height: clamp(360px, 35vw, 500px);
  display: block;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
  /* true oval — corners fully transparent, clean elliptical shape */
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 0% 48%, rgba(0,0,0,0.7) 70%, transparent 92%);
          mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 0% 48%, rgba(0,0,0,0.7) 70%, transparent 92%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

/* shared packet card structure */
.packet-card {
  position: relative;
  display: block;
}

/* ===========================================================
   HERO ONE-PAGER BAR — wide horizontal CTA below the photo
   =========================================================== */
.hero-onepager-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(16px, 1.6vw, 26px);
  align-items: center;
  background: #fff8e8;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 22px 14px 14px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  transition: transform 220ms, box-shadow 220ms, border-color 220ms;
}
.hero-onepager-bar:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(20, 35, 25, 0.32);
}
.hero-onepager-bar:hover .hero-onepager-bar__arrow {
  background: var(--grove);
  color: #fff8e8;
  transform: translate(2px, -2px);
}

/* mini one-pager cover thumbnail */
.hero-onepager-bar__thumb {
  position: relative;
  width: clamp(82px, 7vw, 104px);
  aspect-ratio: 1 / 1.32;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(20, 25, 15, 0.18);
  background: var(--orange);
  flex-shrink: 0;
}
.hero-onepager-bar__cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 8px 9px;
  background: linear-gradient(160deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: #fff8e8;
  text-align: left;
  line-height: 1.05;
}
.hero-onepager-bar__brand {
  font-family: var(--sans);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  opacity: 0.88;
}
.hero-onepager-bar__cover-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-top: 4px;
}
.hero-onepager-bar__cover-title sup { font-size: 0.5em; vertical-align: super; opacity: 0.7; }
.hero-onepager-bar__cover-sub {
  font-family: var(--serif);
  font-style: normal;
  font-size: 9.5px;
  line-height: 1.15;
  opacity: 0.92;
  margin-top: 4px;
}
.hero-onepager-bar__cover-foot {
  font-family: var(--sans);
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0.7;
}
.hero-onepager-bar__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* text body */
.hero-onepager-bar__body {
  min-width: 0;
}
.hero-onepager-bar__eyebrow {
  margin: 0 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--orange-deep);
  text-transform: uppercase;
}
.hero-onepager-bar__eyebrow sup { font-size: 0.7em; vertical-align: super; opacity: 0.7; }
.hero-onepager-bar__title {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hero-onepager-bar__sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* arrow */
.hero-onepager-bar__arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(20, 35, 25, 0.06);
  color: var(--grove);
  transition: background 200ms, color 200ms, transform 200ms;
}
.hero-onepager-bar__arrow svg { width: 18px; height: 18px; }
.packet-card__stack {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.packet-card__sheet {
  position: absolute;
  inset: 0;
  background: #f7eed8;
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.packet-card__sheet--back { transform: rotate(-4deg) translate(8px, 14px); background: #ecdfbe; }
.packet-card__sheet--mid  { transform: rotate(2deg)  translate(-4px, 7px); background: #f3e6c4; }

.packet-card__front {
  position: relative;
  background: #fff8e8;
  border-radius: 4px;
  padding: 16px 16px 14px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
  color: var(--ink);
  overflow: hidden;
}

/* row block: faded fruit image on LEFT, sub-text on right (header above is full width) */
.packet-card__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.packet-card__row .packet-card__sub {
  margin: 0;
  min-width: 0;
}

.packet-card__fruit {
  width: 56px;
  height: 56px;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  /* radial fade — image edges bleed into card paper */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 28%, rgba(0,0,0,0.55) 60%, transparent 92%);
          mask-image: radial-gradient(circle at 50% 50%, #000 28%, rgba(0,0,0,0.55) 60%, transparent 92%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  filter: saturate(1.1);
}

.packet-card__eyebrow {
  margin: 0 0 4px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.packet-card__title {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.packet-card__title sup { font-size: 0.45em; vertical-align: super; opacity: 0.7; }
.packet-card__sub {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-style: normal;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.3;
}
.packet-card__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  gap: 6px;
}
.packet-card__bullets li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 6px;
  align-items: start;
  font-size: 10.5px;
  line-height: 1.3;
}
.packet-card__bullets svg {
  width: 18px;
  height: 18px;
  color: var(--grove);
  margin-top: 1px;
}
.packet-card__bullets strong {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
}
.packet-card__bullets em {
  font-style: normal;
  color: var(--ink-mute);
  font-size: 9.5px;
  display: block;
}
.packet-card__front .btn { font-size: 11px; padding: 9px 12px; gap: 6px; }
.packet-card__front .btn svg { width: 13px; height: 13px; }

/* ===========================================================
   CHALLENGE BANNER — heading + continuous-scrolling marquee
   =========================================================== */
.challenge {
  /* continue the hero's bottom-right (orange) warmth into the top of this
     section so the boundary blends with no seam — EXPERIMENTAL, matches hero */
  background:
    radial-gradient(62% 100% at 92% 0%, rgba(223, 118, 34, 0.13), transparent 60%),
    var(--paper-0);
  color: var(--ink);
  padding: clamp(36px, 4vw, 56px) 0 0;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.challenge__head {
  max-width: var(--container);
  margin: 0 auto clamp(24px, 3vw, 40px);
  padding: 0 var(--gutter);
  text-align: center;
}
.challenge__head .eyebrow {
  font-size: 14px;
  letter-spacing: 0.22em;
  margin: 0 0 16px;
}
.challenge__head h2 {
  margin: 0;
  font-size: clamp(34px, 4.5vw, 62px);
  line-height: 1.04;
}
.challenge__head em { color: var(--orange-deep); font-style: normal; }
.challenge__arrow {
  display: block;
  margin: clamp(14px, 1.8vw, 24px) auto 0;
  color: var(--orange-deep);
}
.challenge__arrow svg {
  width: 30px;
  height: 48px;
  display: block;
  margin: 0 auto;
  animation: cue-bounce 1.8s ease-in-out infinite;
}
@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
/* featured "0 effective cures before April 28, 2026" — the turning point */
.marquee__cure .marquee__num { color: var(--grove); }
.marquee__cure .marquee__lbl strong {
  color: var(--orange-deep);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: clamp(26px, 3vw, 42px) 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(20, 35, 25, 0.025) 50%, transparent 100%),
    var(--paper-3);
  border-top: 1px solid var(--rule);
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 56s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: clamp(26px, 3vw, 46px);
  padding-right: clamp(26px, 3vw, 46px);
}
.marquee__list li {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}
.marquee__num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(38px, 4.2vw, 62px);
  line-height: 1;
  color: var(--orange-deep);
  letter-spacing: -0.02em;
}
.marquee__lbl {
  font-family: var(--sans);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.marquee__dot {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 44px);
  color: var(--ink-mute);
  opacity: 0.55;
  line-height: 1;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* "Big banner" toggle OFF -> revert the rolling banner to its original size */
body.small-banner .marquee { padding: clamp(18px, 2vw, 28px) 0; }
body.small-banner .marquee__list { gap: clamp(20px, 2.5vw, 36px); padding-right: clamp(20px, 2.5vw, 36px); }
body.small-banner .marquee__list li { gap: 10px; }
body.small-banner .marquee__num { font-size: clamp(28px, 3vw, 40px); }
body.small-banner .marquee__lbl { font-size: 14px; }
body.small-banner .marquee__dot { font-size: clamp(20px, 2.2vw, 30px); }

/* ===========================================================
   SOLUTION — experiential scroll: full-height panels, sides alternate
   =========================================================== */
.solution {
  background: var(--paper-0);
  padding: clamp(20px, 3vw, 48px) var(--gutter);
}
.exp-panel {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  /* media gets the larger column; text the smaller — media reads wide */
  grid-template-columns: 1.16fr 0.84fr;
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
  /* each asset gets (almost) its own screen */
  min-height: min(86vh, 820px);
  padding: clamp(36px, 5vw, 64px) 0;
}
/* swap sides every other panel — keep the media in the WIDE column either way */
.exp-panel:nth-child(even) { grid-template-columns: 0.84fr 1.16fr; }
.exp-panel:nth-child(even) .exp-panel__media { order: 2; }

/* shared media frame (image carousel + video tiles) — wide / cinematic */
.exp-panel__media {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-lg);
  border: 0;
}
.exp-panel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* video variant */
.exp-panel__video { cursor: pointer; color: #fff8e8; }
.exp-panel__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,32,23,0) 42%, rgba(6,32,23,0.5) 100%);
  transition: background 220ms;
}
.exp-panel__video:hover::after { background: linear-gradient(180deg, rgba(6,32,23,0.1) 30%, rgba(6,32,23,0.56) 100%); }
.exp-panel__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(56px, 5vw, 78px);
  height: clamp(56px, 5vw, 78px);
  border-radius: 50%;
  background: rgba(223, 118, 34, 0.94);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 26px rgba(0,0,0,0.36);
  transition: transform 220ms, background 220ms;
}
.exp-panel__video:hover .exp-panel__play { transform: translate(-50%, -50%) scale(1.08); background: var(--orange); }
.exp-panel__play svg { width: 44%; height: 44%; color: #fff8e8; margin-left: 3px; }
.exp-panel__vlabel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 16px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  color: #fff8e8;
}

/* text side */
.exp-panel__text { max-width: 560px; }
.exp-panel__kicker {
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
/* bold headline (product name on its own line) */
.exp-panel__headline {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(26px, 3.25vw, 45px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.exp-panel__headline em { font-style: normal; color: var(--grove); }
/* four benefits, each its own separated row — marker in its own column so
   wrapped lines hang-indent cleanly instead of landing in odd places */
.exp-panel__benefits {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}
.exp-panel__benefits li {
  /* normal block so the text + highlighted word stay one inline flow
     (grid/flex would split the <em> into its own cell and break wrapping) */
  position: relative;
  padding: 15px 0 15px 34px;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(17px, 1.75vw, 23px);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.exp-panel__benefits li:last-child { border-bottom: 1px solid var(--rule); }
.exp-panel__benefits li::before {
  content: "→";
  position: absolute;
  left: 2px;
  top: 15px;
  color: var(--orange);
  font-weight: 800;
  font-family: var(--sans);
}
.exp-panel__benefits em { font-style: normal; color: var(--grove); }

/* statement panel: image large, text column smaller (a notch back from max) */
.exp-panel.exp-panel--statement { grid-template-columns: 0.88fr 1.12fr; }
.exp-panel__benefits em.o { color: var(--orange-deep); }

.exp-panel__index {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--orange);
  opacity: 0.22;
}
.exp-panel__claim {
  margin: 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* ---- primer: the cure stat lifted out of the banner, blown up ---- */
.exp-panel--primer {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  position: relative;
}
.primer { max-width: 920px; }
.primer__eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.primer__zero {
  margin: 0;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(160px, 30vw, 380px);
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.primer__line {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(26px, 4.2vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.primer__date { color: var(--orange-deep); }
/* primer wording swaps when the banner (which explains HLB) is hidden */
.primer__line-expanded { display: none; }
body.no-banner .primer__line-default { display: none; }
body.no-banner .primer__line-expanded { display: inline; }
.primer__lead {
  margin: clamp(20px, 3vw, 36px) 0 0;
  font-family: var(--script);
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--ink-soft);
}

/* ---- hide the "reality in Florida" banner on toggle ---- */
body.no-banner .challenge { display: none; }

/* ===========================================================
   SOLUTION — view toggle (Gallery / Alternate)
   =========================================================== */
.solution__toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 22px);
  padding: clamp(10px, 2vw, 24px) 0 0;
}
/* primer on/off switch — only relevant in Alternate / Spotlight */
.solution__switch {
  display: none;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  user-select: none;
}
body.view-alt .solution__switch,
body.view-spotlight .solution__switch { display: inline-flex; }
.solution__switch input { position: absolute; opacity: 0; pointer-events: none; }
.solution__switch-track {
  position: relative;
  width: 40px;
  height: 23px;
  border-radius: 999px;
  background: rgba(20, 35, 25, 0.22);
  transition: background 200ms;
  flex-shrink: 0;
}
.solution__switch-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #fff8e8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 200ms;
}
.solution__switch input:checked + .solution__switch-track { background: var(--grove); }
.solution__switch input:checked + .solution__switch-track .solution__switch-thumb { transform: translateX(17px); }
.solution__switch input:focus-visible + .solution__switch-track { outline: 2px solid var(--orange); outline-offset: 2px; }
.solution__toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: #fff8e8;
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.solution__toggle-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 9px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  transition: background 200ms, color 200ms;
}
.solution__toggle-btn:hover { color: var(--ink); }
.solution__toggle-btn.is-active { background: var(--grove); color: #fff8e8; }

/* show one view at a time. Default = gallery.
   .solution__exp (primer + statement) is shared by Alternate + Spotlight. */
.solution__exp { display: none; }
.solution__exp-videos { display: none; }
.solution__exp-selector { display: none; }

body.view-alt .solution__view--gallery,
body.view-spotlight .solution__view--gallery { display: none; }
body.view-alt .solution__exp,
body.view-spotlight .solution__exp { display: block; }
body.view-alt .solution__exp-videos { display: block; }
body.view-spotlight .solution__exp-selector { display: block; }

/* primer can be toggled off; when off the cure stat returns to the banner */
body.no-primer .exp-panel--primer { display: none; }

/* in Alternate/Spotlight the cure stat becomes the primer, so drop it from the
   banner — but only while the primer is actually shown */
body.view-alt:not(.no-primer) .marquee__cure,
body.view-alt:not(.no-primer) .marquee__cure + .marquee__dot,
body.view-spotlight:not(.no-primer) .marquee__cure,
body.view-spotlight:not(.no-primer) .marquee__cure + .marquee__dot { display: none; }

/* ===========================================================
   SOLUTION — GALLERY VIEW (copy + 2×2 photo/video grid)
   =========================================================== */
.solution__view--gallery { padding: clamp(34px, 5vw, 68px) 0; }
.solution__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.solution__copy h2 {
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.solution__copy h2 em { color: var(--grove); }
.solution__lede {
  margin: 0 0 30px;
  font-size: clamp(16.5px, 1.7vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 470px;
}
/* four claims — a clean 2×2 grid of small pills */
.solution__tags {
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 520px;
}
.solution__tags li {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff8e8;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 15px 18px;
  font-size: clamp(12px, 1.1vw, 13.5px);
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.solution__tag-icon { display: inline-grid; place-items: center; color: var(--grove); flex-shrink: 0; }
.solution__tag-icon svg { width: 24px; height: 24px; }

.solution__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 20px);
  aspect-ratio: 1 / 1;
}
.solution__tile {
  position: relative;
  margin: 0;
  padding: 0;
  border: 5px solid #fff8e8;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--paper-2);
  cursor: pointer;
}
.solution__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.solution__tile--photo { cursor: default; }
.solution__tile--video { color: #fff8e8; }
.solution__tile--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,32,23,0) 40%, rgba(6,32,23,0.55) 100%);
  transition: background 220ms;
}
.solution__tile--video:hover::after { background: linear-gradient(180deg, rgba(6,32,23,0.1) 30%, rgba(6,32,23,0.6) 100%); }
.solution__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(44px, 4vw, 58px);
  height: clamp(44px, 4vw, 58px);
  border-radius: 50%;
  background: rgba(223, 118, 34, 0.92);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  transition: transform 220ms, background 220ms;
}
.solution__tile--video:hover .solution__play { transform: translate(-50%, -50%) scale(1.08); background: var(--orange); }
.solution__play svg { width: 46%; height: 46%; color: #fff8e8; margin-left: 2px; }
.solution__vlabel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  color: #fff8e8;
}

/* ===========================================================
   INTRO-PARAGRAPH VARIANT (body.hero-sub)
   The copy moves into the hero subtitle, so the gallery + statement
   panels show only the four claims, as big stacked bubbles.
   =========================================================== */
.exp-panel__tags { display: none; }  /* statement claims hidden by default */

body.hero-sub .solution__copy .eyebrow,
body.hero-sub .solution__copy h2.serif,
body.hero-sub .solution__lede,
body.hero-sub .solution__copy > .btn { display: none; }

body.hero-sub .exp-panel__statement-default { display: none; }
body.hero-sub .exp-panel__tags { display: flex; }

/* small product header above the four bubbles — only in this variant */
.solution__tags-head { display: none; }
body.hero-sub .solution__tags-head {
  display: block;
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(23px, 2.6vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 14ch;
}

/* four big bubbles, stacked one after another */
body.hero-sub .solution__tags {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 18px);
  max-width: none;
  margin: 0;
}
body.hero-sub .solution__tags li {
  align-self: start;
  gap: 14px;
  padding: clamp(15px, 1.7vw, 21px) clamp(22px, 2.3vw, 32px);
  font-size: clamp(16px, 1.9vw, 24px);
  border-radius: 999px;
}
body.hero-sub .solution__tags .solution__tag-icon svg { width: clamp(24px, 2.4vw, 30px); height: auto; }

/* ===========================================================
   SPOTLIGHT — pick a voice from a list, watch it wide
   =========================================================== */
.vsel {
  max-width: var(--container);
  margin: 0 auto;
  min-height: min(80vh, 760px);
  display: grid;
  /* video on the LEFT (wide), owner list on the RIGHT — alternates from the panel above */
  grid-template-columns: 1.22fr 0.78fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(40px, 5vw, 64px) 0;
}
.vsel__stage { order: 1; }
.vsel__panel { order: 2; }
.vsel__eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.vsel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vsel__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 18px 20px;
  border-radius: 16px;
  transition: background 200ms, box-shadow 200ms;
}
.vsel__item:hover { background: rgba(20, 35, 25, 0.045); }
.vsel__item.is-active { background: #fff8e8; box-shadow: var(--shadow-sm); }
.vsel__avatar {
  width: 66px; height: 66px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #fff8e8;
  box-shadow: var(--shadow-sm);
  filter: grayscale(0.5);
  transition: filter 200ms;
}
.vsel__item.is-active .vsel__avatar { filter: none; }
.vsel__avatar img { width: 100%; height: 100%; object-fit: cover; }
.vsel__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vsel__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 2.7vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.vsel__role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.vsel__chev {
  margin-left: auto;
  color: var(--orange);
  font-weight: 800;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 200ms, transform 200ms;
}
.vsel__item.is-active .vsel__chev { opacity: 1; transform: none; }

.vsel__stage { min-width: 0; }
.vsel__video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  color: #fff8e8;
}
.vsel__video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vsel__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,32,23,0) 50%, rgba(6,32,23,0.45) 100%);
  transition: background 220ms;
}
.vsel__video:hover::after { background: linear-gradient(180deg, rgba(6,32,23,0.1) 36%, rgba(6,32,23,0.52) 100%); }
.vsel__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(58px, 5vw, 82px);
  height: clamp(58px, 5vw, 82px);
  border-radius: 50%;
  background: rgba(223, 118, 34, 0.94);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 26px rgba(0,0,0,0.36);
  transition: transform 220ms, background 220ms;
}
.vsel__video:hover .vsel__play { transform: translate(-50%, -50%) scale(1.08); background: var(--orange); }
.vsel__play svg { width: 42%; height: 42%; color: #fff8e8; margin-left: 3px; }
.vsel__vlabel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 16px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff8e8;
}
.vsel__claim {
  margin: 20px 2px 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ===========================================================
   CALCULATOR SECTION — wide, compact
   =========================================================== */
.calc-section {
  background: var(--paper-1);
  padding: clamp(60px, 7vw, 92px) var(--gutter) clamp(40px, 5vw, 60px);
  border-top: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}

.calc-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 2.3fr);
  gap: clamp(28px, 4.4vw, 64px);
  align-items: start;
}

.calc-section__lead {
  align-self: start;
  position: relative;
  padding-top: 10px;
}
.calc-section__lead .eyebrow {
  font-size: 14px;
  letter-spacing: 0.22em;
  margin: 0 0 22px;
}
.calc-section__lead h2 {
  font-size: clamp(34px, 4.3vw, 54px);
  line-height: 1.02;
  margin: 0 0 26px;
}
.calc-section__sub {
  margin: 0 0 46px;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.65vw, 22px);
  line-height: 1.45;
  max-width: 340px;
}
.calc-section__handwritten {
  margin: 0;
  font-family: var(--script);
  font-size: 35px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1;
  transform: rotate(-3deg);
}
.calc-section__handwritten svg {
  width: 106px;
  height: 35px;
  margin-top: 9px;
}

/* the main calculator card — two-column inside */
.calc-card {
  background: #fff8e8;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 0.82fr 1.5fr;
  overflow: hidden;
}

.calc-card__form {
  padding: 24px 24px;
  display: grid;
  gap: 14px;
  border-right: 1px solid var(--rule);
}

.calc-row {
  display: grid;
  gap: 4px;
}
.calc-row__label {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
}
.calc-row__label em { font-style: normal; color: var(--ink-mute); font-size: 12px; }

.calc-row__control {
  display: grid;
  grid-template-columns: 1fr 84px;
  gap: 12px;
  align-items: center;
}
.calc-row__control input[type="number"],
.calc-row__control select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(20, 35, 25, 0.18);
  border-radius: 4px;
  background: var(--paper-0);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.calc-row__control select {
  text-align: left;
  grid-column: 1 / -1;
}
.calc-row__control input[type="range"] {
  width: 100%;
  accent-color: var(--grove);
  background: transparent;
  padding: 0;
}

/* result panel (right side, dark green like screenshot) */
.calc-card__result {
  background: var(--grove);
  color: #fff8e8;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
}
.calc-card__result-eyebrow {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 248, 232, 0.65);
}
.calc-card__result-figure {
  margin: 0 0 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.calc-card__result-figure strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 50px);
  line-height: 1;
}
.calc-card__result-figure span {
  font-size: 13px;
  color: rgba(255, 248, 232, 0.7);
}
.calc-card__breakdown {
  margin: 0;
  border-top: 1px solid rgba(255, 248, 232, 0.14);
  padding-top: 12px;
  display: grid;
  gap: 8px;
  flex: 1;
}
.calc-card__breakdown div {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
}
.calc-card__breakdown dt { color: rgba(255, 248, 232, 0.78); margin: 0; }
.calc-card__breakdown dd { margin: 0; font-weight: 700; font-family: var(--serif); font-size: 15px; }
.calc-card__disclaimer {
  margin: 14px 0 0;
  font-size: 11px;
  color: rgba(255, 248, 232, 0.5);
  line-height: 1.3;
}

/* sticky-note */
.calc-section__note {
  background: var(--note);
  color: var(--ink);
  padding: 18px 18px 20px;
  font-family: var(--script);
  transform: rotate(3.5deg);
  box-shadow: 0 14px 30px rgba(60, 50, 20, 0.22);
  border: 1px solid rgba(180, 145, 50, 0.32);
  align-self: center;
  margin-top: 30px;
}
.calc-section__note-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
}
.calc-section__note-title em { color: var(--orange-deep); font-style: normal; font-weight: 700; }
.calc-section__note ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 5px;
  font-size: 18px;
  line-height: 1.2;
}
.calc-section__note li::before { content: "✓ "; color: var(--grove); font-family: var(--sans); font-weight: 700; }

/* rootstock photo, clean image at natural proportions */
.calc-section__photo {
  max-width: var(--container);
  margin: clamp(40px, 5vw, 64px) auto 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 6px solid #fff8e8;
}
.calc-section__photo img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 560px;
  object-fit: cover;
}

/* ===========================================================
   PUBLICATIONS
   =========================================================== */
.publications {
  background: var(--paper-0);
  padding: clamp(64px, 8vw, 110px) var(--gutter);
  border-top: 1px solid var(--rule);
}
.publications__heading {
  max-width: 780px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}
.publications__heading h2 {
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.05;
  margin: 0 0 14px;
}
.publications__heading em { color: var(--grove); }
.publications__sub { color: var(--ink-soft); font-size: 16px; margin: 0; }

.publications__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 28px);
}
/* "Publications" jumps to the first regular card so the first row of releases
   sits at the top of the screen — the big featured banner scrolls out of view */
#pubs-cards { scroll-margin-top: 88px; }

.pub-card {
  background: #fff8e8;
  border-radius: 6px;
  padding: 22px 22px 22px;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 200ms, box-shadow 200ms;
}
.pub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.pub-card__type {
  display: inline-block;
  align-self: flex-start;
  background: var(--grove);
  color: #fff8e8;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.pub-card__date {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.pub-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.pub-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.pub-card__link {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--grove);
}
.pub-card__link:hover { color: var(--orange-deep); }

/* extra cards hidden until "view more" */
.pub-card.is-extra { display: none; }
.publications__grid.show-all .pub-card.is-extra { display: flex; }

.publications__more {
  max-width: var(--container);
  margin: clamp(26px, 3vw, 40px) auto 0;
  text-align: center;
}
.pub-more {
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 8px 6px;
  transition: color 180ms;
}
.pub-more:hover { color: var(--orange-deep); }
.pub-more svg { width: 16px; height: 16px; transition: transform 260ms cubic-bezier(.2,.7,.2,1); }
.pub-more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* feature card — defined AFTER base */
.pub-card--feature {
  grid-column: span 3;
  background: var(--grove);
  color: #fff8e8;
  border-color: var(--grove);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  overflow: hidden;
}
.pub-card__feature-body {
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.pub-card__feature-photo {
  margin: 0;
  position: relative;
  background: var(--grove-deep);
}
.pub-card__feature-photo img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
}
.pub-card__feature-photo figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px;
  background: linear-gradient(transparent, rgba(6,32,23,0.85));
  color: #fff8e8;
  font-family: var(--serif);
  font-style: normal;
  font-size: 12px;
}

.pub-card--feature h3 {
  color: #fff8e8;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;      /* keep the last word from dangling on its own line */
}
.pub-card--feature p { color: rgba(255,248,232,0.86); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.5; }
.pub-card--feature .pub-card__type { font-size: 12.5px; }
.pub-card--feature .pub-card__date { font-size: 12.5px; }
.pub-card--feature .pub-card__type { background: var(--orange); color: #fff8e8; }
.pub-card--feature .pub-card__date { color: rgba(255,248,232,0.6); }
.pub-card--feature .pub-card__link { color: var(--orange-2); font-size: 14px; }
.pub-card--feature .pub-card__link:hover { color: #fff8e8; }

/* ===========================================================
   JOURNEY TIMELINE
   =========================================================== */
.journey {
  background: var(--paper-1);
  padding: clamp(60px, 7vw, 100px) var(--gutter);
  border-top: 1px solid var(--rule);
}
.journey__heading {
  max-width: 800px;
  margin: 0 auto clamp(36px, 5vw, 60px);
  text-align: center;
}
.journey__heading h2 {
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.05;
  margin: 0 0 14px;
}
.journey__sub { color: var(--ink-soft); font-size: 16px; margin: 0; }

.timeline {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--container);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 2vw, 28px);
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: calc(clamp(150px, 16vw, 210px) + 16px);
  border-top: 1.4px dashed rgba(20, 35, 25, 0.28);
  z-index: 0;
}
.timeline__step { text-align: center; position: relative; z-index: 1; }
.timeline__photo {
  width: 100%;
  aspect-ratio: 1;
  max-width: clamp(150px, 16vw, 210px);
  margin: 0 auto 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--paper-2);
  position: relative;
  border: 6px solid #fff8e8;
}
/* 2026 — the now step, highlighted */
.timeline__step--now .timeline__photo {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(223,118,34,0.18), var(--shadow-lg);
}
.timeline__step--now .timeline__year {
  font-size: 19px;
  font-weight: 600;
  color: #fff8e8;
  background: var(--orange);
  display: inline-block;
  padding: 3px 14px;
  border-radius: 999px;
  font-style: normal;
  box-shadow: 0 4px 14px rgba(190,85,15,0.3);
}
.timeline__step--now h4 { color: var(--orange-deep); }
.timeline__photo img { width: 100%; height: 100%; object-fit: cover; }
.timeline__tag {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--note);
  color: var(--ink);
  font-family: var(--serif);
  font-style: normal;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid rgba(180, 145, 50, 0.4);
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(60,50,20,0.18);
}
.timeline__year {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  color: var(--orange-deep);
  letter-spacing: 0.05em;
  margin: 0 0 4px;
}
.timeline__step h4 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.timeline__step p:not(.timeline__year) {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.journey__cta {
  max-width: var(--container);
  margin: clamp(36px, 4vw, 56px) auto 0;
  text-align: center;
}
.journey__cta .btn { margin-bottom: 12px; }
.journey__note {
  margin: 0;
  font-family: var(--serif);
  font-style: normal;
  font-size: 14px;
  color: var(--ink-mute);
}

/* ===========================================================
   TEAM — larger photos, captivating layout
   =========================================================== */
.team {
  background: var(--paper-0);
  padding: clamp(70px, 9vw, 130px) var(--gutter);
  border-top: 1px solid var(--rule);
}
.team__heading {
  max-width: 880px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  text-align: center;
}
.team__heading h2 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  margin: 0 0 16px;
}
.team__sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.team__sub em { font-style: normal; }

.team__grid {
  list-style: none;
  padding: 0;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 5vw, 64px);
}
.team-member {
  text-align: center;
  padding: 0 clamp(8px, 1vw, 16px);
}
.team-member figure {
  margin: 0 auto 24px;
  width: clamp(200px, 22vw, 290px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid #fff8e8;
}
.team-member figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.team-member h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 0.005em;
}
.team-member__role {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--orange-deep);
}
.team-member > p:not(.team-member__role):not(.team-member__links) {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.team-member__links {
  margin: 0;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.team-member__links a {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: var(--grove);
  color: #fff8e8;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}
.team-member__links a:hover { background: var(--orange-deep); }

/* ===========================================================
   PACKET REQUEST
   =========================================================== */
.packet {
  background: var(--paper-2);
  padding: clamp(60px, 8vw, 100px) var(--gutter);
  border-top: 1px solid var(--rule);
}
.packet__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(40px, 3.6vw, 72px);
  align-items: center;
}
.packet__visual {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 24px;
  align-self: stretch;
  padding: 0;
}

/* compact square packet card */
.packet-card--square {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  transform: rotate(-2deg);
}
.packet-card--square .packet-card__front {
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
}
.packet-card--square .packet-card__title { font-size: 38px; margin-bottom: 12px; }
.packet-card--square .packet-card__sub { font-size: 15px; margin-bottom: 0; line-height: 1.35; }
.packet-card--square .packet-card__eyebrow { font-size: 10px; margin-bottom: 6px; }
.packet-card--square .packet-card__row { margin-bottom: 20px; gap: 14px; }
.packet-card--square .packet-card__fruit { width: 76px; height: 76px; }
.packet-card--square .packet-card__bullets { margin-bottom: 18px; }
.packet-card--square .packet-card__bullets li { font-size: 12px; grid-template-columns: 26px 1fr; gap: 8px; }
.packet-card--square .packet-card__bullets svg { width: 22px; height: 22px; }
.packet-card--square .packet-card__bullets strong { font-size: 12.5px; }
.packet-card--square .packet-card__bullets em { font-size: 11px; }
.packet-card--square .btn { font-size: 14px; padding: 13px 16px; cursor: default; }

/* juicy orange image */
.packet__orange {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 6px solid #fff8e8;
  transform: rotate(1.2deg);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
}
.packet__orange img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.packet__copy h2 {
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.05;
  margin: 0 0 14px;
}
.packet__lede {
  margin: 0 0 26px;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 480px;
}

.packet-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  background: #fff8e8;
  padding: 28px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
}
.packet-form label {
  display: grid;
  gap: 6px;
}
.packet-form label > span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
}
.packet-form input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-0);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}
.packet-form input::placeholder { color: var(--ink-mute); }
.packet-form__check {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-soft);
}
.packet-form__check input { width: auto; }
.packet-form button[type="submit"] {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #fff8e8;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(190, 85, 15, 0.28);
  transition: background 180ms;
}
.packet-form button[type="submit"]:hover { background: var(--orange-deep); }
.form-status {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--grove);
  text-align: center;
  min-height: 18px;
}
.packet-form__legal {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer {
  background: var(--grove-deep);
  color: rgba(255, 248, 232, 0.78);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  /* subtle radial glow for engagement */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 30%, rgba(40, 90, 55, 0.32), transparent 55%),
    radial-gradient(ellipse at 88% 90%, rgba(223, 118, 34, 0.16), transparent 60%);
  pointer-events: none;
}

/* ribbon CTA — sits above the columns */
.footer-ribbon {
  position: relative;
  padding: clamp(56px, 7vw, 90px) var(--gutter) clamp(40px, 5vw, 60px);
  border-bottom: 1px solid rgba(255,248,232,0.1);
}
.footer-ribbon__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.footer-ribbon__copy h2 {
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.02;
  margin: 0 0 12px;
  color: #fff8e8;
}
.footer-ribbon__madein {
  margin: 0;
  font-family: var(--serif);
  font-style: normal;
  font-size: 17px;
  color: rgba(255, 248, 232, 0.62);
}
.eyebrow--cream { color: var(--orange-2); margin-bottom: 16px; }

/* signup card (now lives in the ribbon right column) */
.footer-ribbon__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.site-footer__signup {
  background: rgba(255, 248, 232, 0.04);
  border: 1px solid rgba(255, 248, 232, 0.08);
  border-radius: 6px;
  padding: 28px 28px 26px;
}
.site-footer__signup-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 26px;
  color: #fff8e8;
  line-height: 1.2;
}
.site-footer__signup-title em { font-style: normal; color: var(--orange-2); }
.site-footer__signup-sub {
  margin: 0 0 18px;
  font-size: 14px;
  color: rgba(255, 248, 232, 0.65);
  line-height: 1.55;
}

/* top — massive logo (left) + paragraph (right) */
.site-footer__top {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  border-bottom: 1px solid rgba(255,248,232,0.1);
}

.brand--footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  color: #fff8e8;
  margin-bottom: 24px;
}
.brand--footer .brand__mark {
  display: inline-block;
}
.brand--footer .brand__mark svg { width: 100%; height: 100%; display: block; }
.brand--footer .brand__wordmark {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff8e8;
  line-height: 0.9;
}

/* MASSIVE footer logo variant */
.brand--footer-huge {
  flex-direction: row;
  align-items: center;
  gap: 22px;
}
.brand--footer-huge .brand__mark {
  width: clamp(96px, 9vw, 130px);
  height: clamp(96px, 9vw, 130px);
}
.brand--footer-huge .brand__wordmark {
  font-size: clamp(64px, 7vw, 96px);
}

.site-footer__contact {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 248, 232, 0.78);
}
.site-footer__contact a {
  color: var(--orange-2);
  border-bottom: 1px dotted rgba(229, 138, 54, 0.45);
}
.site-footer__contact a:hover { color: #fff8e8; }

/* about block: paragraph replaces stats on the right */
.site-footer__about {
  align-self: center;
}
.site-footer__tag {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 3.5vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff8e8;
  font-weight: 600;
  max-width: none;
}
.newsletter {
  display: flex;
  gap: 8px;
}
.newsletter input {
  flex: 1;
  padding: 13px 16px;
  border: 1px solid rgba(255,248,232,0.18);
  background: rgba(255,248,232,0.06);
  color: #fff8e8;
  border-radius: 4px;
  font-size: 14px;
  min-width: 0;
}
.newsletter input::placeholder { color: rgba(255,248,232,0.45); }
.newsletter button {
  background: var(--orange);
  color: #fff8e8;
  border: 0;
  padding: 13px 22px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(190, 85, 15, 0.32);
}
.newsletter button:hover { background: var(--orange-deep); }

.site-footer__columns {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(36px, 4vw, 56px) var(--gutter) clamp(32px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
  border-bottom: 1px solid rgba(255,248,232,0.1);
}
.site-footer__columns h4 {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #fff8e8;
  font-weight: 700;
}
.site-footer__columns ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; }
.site-footer__columns a { color: rgba(255,248,232,0.7); transition: color 160ms; }
.site-footer__columns a:hover { color: var(--orange-2); }

.site-footer__base {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(22px, 2.5vw, 32px) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,248,232,0.5);
}
.site-footer__base a { color: rgba(255,248,232,0.65); }
.site-footer__base a:hover { color: var(--orange-2); }
.site-footer__legal { margin: 0; }
.site-footer__copy { margin: 0; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
/* Tablet: the inline nav gets cramped and wraps against the CTA below the
   desktop breakpoint, so hide it (like the phone header) and keep a clean
   logo + CTA. Desktop (>1080) is untouched. */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-header__inner { grid-template-columns: 1fr auto; }
}
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; min-height: auto; gap: 40px; padding-bottom: 80px; }
  .hero__copy { transform: none; }
  .hero__visual { min-height: 420px; }
  .hero-packet-card { right: 16px; bottom: -28px; }

  .challenge__inner { grid-template-columns: 1fr; }
  .challenge__stats { border-left: 0; padding-left: 0; }

  .calc-section__inner { grid-template-columns: 1fr; }
  .calc-section__note { transform: rotate(-2deg); margin: 0 auto; }
  .calc-card { grid-template-columns: 1fr; }
  .calc-card__form { border-right: 0; border-bottom: 1px solid var(--rule); }

  .publications__grid { grid-template-columns: repeat(2, 1fr); }
  .pub-card--feature { grid-column: span 2; grid-template-columns: 1fr; }
  .pub-card__feature-photo img { min-height: 200px; max-height: 280px; }

  .timeline { grid-template-columns: 1fr 1fr; }
  .timeline::before { display: none; }

  .team__grid { grid-template-columns: 1fr; gap: 48px; }

  .packet__inner { grid-template-columns: 1fr; }

  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__columns { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .site-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    gap: 12px;
  }
  .site-nav { display: none; }
  /* The logo leads; the CTA sits beside it and must never out-size it. Both
     scale with the viewport so they always fit the row, the logo keeps its
     aspect ratio (width:auto + max-width:none — the global max-width:100% was
     capping its width while its height stayed fixed, squishing it), and the
     button stays a touch shorter than the logo at every width. */
  .brand img {
    height: clamp(34px, 9.5vw, 46px);
    width: auto;
    max-width: none;
    max-height: none;
  }
  .site-header__cta {
    font-size: clamp(11px, 2.9vw, 14px);
    padding: clamp(7px, 2.1vw, 11px) clamp(13px, 4vw, 20px);
    justify-self: end;
    box-shadow: 0 3px 10px rgba(190, 85, 15, 0.25);
  }

  /* mobile hero order: eyebrow → title → subtitle → IMAGE → logos → buttons */
  .hero__inner { gap: 0; }
  .hero__copy, .hero__visual { display: contents; }
  .hero__copy .eyebrow { order: 1; }
  .hero__title { order: 2; font-size: 44px; }
  .hero__sub { order: 3; }
  .hero__photo { order: 4; margin: 4px 0 26px; }
  .hero__photo img { height: 300px; min-height: 0; }
  .cert-row { order: 5; }
  .hero__actions { order: 6; }

  .cert-row { flex-wrap: wrap; gap: 16px; }

  .challenge__stats { grid-template-columns: 1fr; }
  .publications__grid { grid-template-columns: 1fr; }
  .pub-card--feature { grid-column: span 1; }

  .timeline { grid-template-columns: 1fr; }
  /* single column on mobile — let each photo fill the space it has */
  .timeline__photo { max-width: min(360px, 78%); margin-bottom: 26px; }

  .packet-form { grid-template-columns: 1fr; padding: 22px; }
}

/* ===========================================================
   SCROLL-REVEAL + MICRO-INTERACTIONS
   =========================================================== */
/* scroll-reveal removed — these are always visible (no fade/slide on scroll).
   Carousels (.rota) and the team marquee keep their animations. */
.reveal,
.reveal-stagger > * {
  opacity: 1;
  transform: none;
}

/* entrance + looping animations removed (felt janky / caused scroll lag).
   Carousels (.rota), the marquees, and the FAQ open transition stay. */

/* team headshot zoom on hover */
.team-member figure { overflow: hidden; }
.team-member figure img {
  transition: transform 600ms cubic-bezier(.2, .7, .2, 1);
}
.team-member:hover figure img { transform: scale(1.07); }

/* timeline photo zoom on hover */
.timeline__photo { transition: transform 400ms cubic-bezier(.2, .7, .2, 1); }
.timeline__photo img { transition: transform 600ms cubic-bezier(.2, .7, .2, 1); }
.timeline__step:hover .timeline__photo { transform: translateY(-4px); }
.timeline__step:hover .timeline__photo img { transform: scale(1.05); }

/* publication / pub card subtle lift already present, intensify */
.pub-card {
  transition: transform 280ms cubic-bezier(.2, .7, .2, 1),
              box-shadow 280ms cubic-bezier(.2, .7, .2, 1);
}

/* button press effect */
.btn { transition: background 200ms, transform 140ms, box-shadow 200ms; }
.btn:active { transform: translateY(1px) scale(0.98); }

/* link-script hover arrow nudge */
.link-script svg { transition: transform 240ms cubic-bezier(.2, .7, .2, 1); }
.link-script:hover svg { transform: translateY(3px); }

/* hero CTA scale-up on hover */
.hero__actions .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 24px rgba(11, 43, 29, 0.4); }


/* calc result number scale pulse on update (triggered via JS class) */
.calc-card__result-figure strong {
  display: inline-block;
  transition: transform 200ms cubic-bezier(.2, .7, .2, 1);
}
.calc-card__result-figure strong.is-pulsing {
  transform: scale(1.06);
}

/* certification logo gentle float on hover */
.cert { transition: transform 240ms cubic-bezier(.2, .7, .2, 1); }
.cert:hover { transform: translateY(-3px); }

/* publications feature card photo subtle zoom on hover */
.pub-card__feature-photo img { transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.pub-card--feature:hover .pub-card__feature-photo img { transform: scale(1.04); }

/* request packet square card gentle hover */
.packet-card--square { transition: transform 380ms cubic-bezier(.2, .7, .2, 1); }
.packet-card--square:hover { transform: rotate(-2deg) translateY(-4px) scale(1.01); }

/* orange image in packet section subtle hover */
.packet__orange { transition: transform 400ms cubic-bezier(.2, .7, .2, 1); }
.packet__orange:hover { transform: rotate(1.2deg) scale(1.02); }

/* ===========================================================
   ROTATING GALLERY — seamless crossfade between section photos
   first image is the base (always visible); the rest fade over it
   =========================================================== */
.rota { position: relative; }
.rota > img { transition: opacity 1100ms ease; }
.rota > img:not(:first-child) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.rota > img.is-shown { opacity: 1; }

/* ===========================================================
   CALCULATOR MEDIA ROW — postcard collage + PBS video
   =========================================================== */
.calc-media {
  max-width: var(--container);
  margin: clamp(44px, 5vw, 68px) auto 0;
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(20px, 2.6vw, 44px);
  align-items: stretch;
}
/* left: tidy postcard collage — one tall + two stacked, even gaps */
.calc-media__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(14px, 1.5vw, 22px);
  aspect-ratio: 5 / 4;
}
.postcard {
  margin: 0;
  min-height: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 5px solid #fff8e8;
  box-shadow: var(--shadow-md);
  background: var(--paper-2);
  transition: transform 380ms cubic-bezier(.2,.7,.2,1), box-shadow 380ms;
}
.postcard img { width: 100%; height: 100%; object-fit: cover; }
.postcard--a { grid-row: 1 / 3; transform: rotate(-1.2deg); }
.postcard--b { transform: rotate(1.4deg); }
.postcard--c { transform: rotate(-1deg); }
.postcard--a:hover { transform: rotate(-1.2deg) translateY(-4px) scale(1.012); box-shadow: var(--shadow-lg); z-index: 2; }
.postcard--b:hover { transform: rotate(1.4deg) translateY(-4px) scale(1.012); box-shadow: var(--shadow-lg); z-index: 2; }
.postcard--c:hover { transform: rotate(-1deg) translateY(-4px) scale(1.012); box-shadow: var(--shadow-lg); z-index: 2; }

/* right: video fills the matched height — no blank above or below */
.calc-media__video {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.video-embed {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid #fff8e8;
  background: #000;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* lightweight click-to-load facade (no YouTube JS until clicked) */
.video-embed--facade { display: block; padding: 0; cursor: pointer; width: 100%; }
.video-embed__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-embed__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 48px; z-index: 2; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
  transition: transform 200ms cubic-bezier(.2,.7,.2,1);
}
.video-embed__play svg { width: 100%; height: 100%; display: block; }
.video-embed--facade::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.28) 100%);
  transition: background 220ms;
}
.video-embed--facade:hover .video-embed__play { transform: translate(-50%, -50%) scale(1.08); }
.video-embed--facade:hover::after { background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.35) 100%); }
.calc-media__caption {
  margin: 14px 2px 0;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.5;
  color: var(--ink-soft);
}
.calc-media__caption-tag {
  display: inline-block;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--orange-deep);
  margin-right: 10px;
  vertical-align: middle;
}

/* ===========================================================
   TEAM RAIL — auto-scrolling carousel of the wider team
   =========================================================== */
/* little affordance so people know the portraits above open a bio */
.team-cue {
  max-width: var(--container);
  margin: clamp(26px, 3vw, 40px) auto 0;
  text-align: center;
}
.team-cue__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 8px 15px;
  border-radius: 999px;
  background: rgba(223, 118, 34, 0.09);
  border: 1px solid rgba(223, 118, 34, 0.28);
  color: var(--orange-deep);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1;
  animation: team-cue-bob 2.6s ease-in-out infinite;
}
.team-cue__icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}
@keyframes team-cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .team-cue__pill { animation: none; }
}

.team-rail {
  max-width: var(--container);
  margin: clamp(52px, 6vw, 84px) auto 0;
}
.team-rail__label {
  text-align: center;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(18px, 1.8vw, 23px);
  color: var(--ink-soft);
  margin: 0 0 30px;
}
.team-marquee {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  /* instant scroll: the JS auto-scroll nudges scrollLeft every frame, and the
     inherited `html { scroll-behavior: smooth }` would animate each nudge,
     stacking animations into a back-and-forth jitter. Keep this auto. */
  scroll-behavior: auto;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* legacy Edge */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.team-marquee::-webkit-scrollbar { display: none; }
.team-marquee.is-grabbing { cursor: grabbing; }
.team-marquee__track {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  display: flex;
  width: max-content;
  gap: clamp(20px, 2.4vw, 40px);
  user-select: none;
  -webkit-user-select: none;
}
.team-mini {
  flex: 0 0 auto;
  width: clamp(150px, 14vw, 192px);
  text-align: center;
}
.team-mini__btn {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
}
.team-mini__btn figure { transition: transform 280ms cubic-bezier(.2,.7,.2,1); }
.team-mini__btn:hover figure { transform: translateY(-4px); }
.team-mini__btn h4 { transition: color 180ms; }
.team-mini__btn:hover h4 { color: var(--orange-deep); }
.team-mini figure {
  margin: 0 auto 14px;
  width: clamp(116px, 10.5vw, 152px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #fff8e8;
  box-shadow: var(--shadow-md);
}
.team-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.team-mini:hover img { transform: scale(1.08); }
.team-mini h4 {
  margin: 0 0 5px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: 0.005em;
}
.team-mini span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
@keyframes team-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===========================================================
   ORDER MODAL — express interest, request a quote
   =========================================================== */
.order-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
}
.order-modal[hidden] { display: none; }
.order-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 32, 23, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: order-fade 200ms ease;
}
.order-modal__dialog {
  position: relative;
  width: min(640px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--paper-0);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--rule);
  padding: clamp(26px, 4vw, 46px);
  animation: order-modal-in 280ms cubic-bezier(.2,.7,.2,1);
}
.order-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(20, 35, 25, 0.07);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background 180ms;
}
.order-modal__close:hover { background: rgba(20, 35, 25, 0.14); }
.order-modal__close svg { width: 20px; height: 20px; }
.order-modal__head { margin-bottom: 24px; }
.order-modal__head h2 {
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1.04;
  margin: 0 0 10px;
}
.order-modal__head h2 em { color: var(--grove); font-style: normal; }
.order-modal__lede {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.5;
  max-width: 460px;
}
.order-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.order-form label { display: grid; gap: 6px; }
.order-form label > span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
}
.order-form label > span em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.order-form input,
.order-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff8e8;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}
.order-form input::placeholder,
.order-form textarea::placeholder { color: var(--ink-mute); }
.order-form textarea { resize: vertical; font-family: var(--sans); line-height: 1.5; }
.order-form__full { grid-column: 1 / -1; }
.order-form button[type="submit"] {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #fff8e8;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(190, 85, 15, 0.28);
  transition: background 180ms, transform 140ms;
}
.order-form button[type="submit"]:hover { background: var(--orange-deep); transform: translateY(-1px); }
.order-form__status {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--grove);
  text-align: center;
  min-height: 18px;
}
.order-form__legal {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
}
body.order-open { overflow: hidden; }
@keyframes order-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes order-fade { from { opacity: 0; } to { opacity: 1; } }

/* ===========================================================
   FAQ — grouped accordion
   =========================================================== */
.faq {
  background: var(--paper-1);
  padding: clamp(64px, 8vw, 110px) var(--gutter);
  border-top: 1px solid var(--rule);
}
.faq__heading {
  max-width: 820px;
  margin: 0 auto clamp(40px, 5vw, 60px);
  text-align: center;
}
.faq__heading h2 {
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.05;
  margin: 0 0 14px;
}
.faq__heading em { color: var(--grove); }
.faq__sub { color: var(--ink-soft); font-size: 16px; margin: 0; line-height: 1.55; }
.faq__sub sup { font-size: 0.6em; vertical-align: super; opacity: 0.7; }

.faq__actions {
  max-width: 920px;
  margin: 0 auto clamp(30px, 4vw, 44px);
  display: flex;
  justify-content: center;
}
.faq__download { gap: 10px; }
.faq__download svg { width: 20px; height: 20px; }
.faq__inner {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 0;
}
.faq-group__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2.2vw, 27px);
  margin: 0 0 8px;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 1.5px solid rgba(20, 35, 25, 0.2);
}
.faq-group__title span {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange-deep);
}
.faq-group__note {
  margin: 12px 0 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  font-style: normal;
  font-family: var(--serif);
}
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 44px 17px 0;
  position: relative;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.4;
  color: var(--ink);
  transition: color 160ms;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--orange-deep); }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 24px;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--grove);
  border-bottom: 2px solid var(--grove);
  transform: rotate(45deg);
  transition: transform 240ms;
}
.faq-item[open] summary::after { transform: rotate(-135deg); top: 28px; }
.faq-item__body { padding: 0 44px 20px 0; }
.faq-item__body p { margin: 0 0 11px; font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); }
.faq-item__body p:last-child { margin-bottom: 0; }
.faq-item__body ul { margin: 0 0 13px; padding-left: 21px; display: grid; gap: 8px; }
.faq-item__body li { font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.faq-item__body strong { color: var(--ink); font-weight: 700; }
.faq-item__body a { color: var(--grove); font-weight: 600; border-bottom: 1px dotted rgba(11,43,29,0.4); }
.faq-item__body a:hover { color: var(--orange-deep); }
.faq-inline-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--grove);
  font-weight: 600;
  font-size: inherit;
  font-family: inherit;
  border-bottom: 1px dotted rgba(11,43,29,0.4);
  cursor: pointer;
}
.faq-inline-link:hover { color: var(--orange-deep); }
.faq-item[open] .faq-item__body { animation: faq-open 280ms ease; }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ===========================================================
   VIDEO LIGHTBOX + TEAM MEMBER MODAL
   =========================================================== */
.media-modal,
.member-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
}
.media-modal[hidden],
.member-modal[hidden] { display: none; }
.media-modal__backdrop,
.member-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 32, 23, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.media-modal__dialog {
  position: relative;
  width: min(900px, 100%);
}
.media-modal__frame {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #000;
  border: 6px solid #fff8e8;
}
.media-modal__frame video { display: block; width: 100%; max-height: 76vh; background: #000; }
.media-modal__caption {
  margin: 12px 2px 0;
  color: #fff8e8;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.media-modal__close,
.member-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #fff8e8;
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  transition: background 180ms;
}
.media-modal__close:hover,
.member-modal__close:hover { background: #fff; }
.media-modal__close svg,
.member-modal__close svg { width: 20px; height: 20px; }
/* the member dialog scrolls (overflow-y:auto), which clipped the corner
   close button — keep it just inside the dialog so it's never cut off */
.member-modal__close { top: 12px; right: 12px; }

.member-modal__dialog {
  position: relative;
  width: min(560px, 100%);
  background: var(--paper-0);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--rule);
  padding: clamp(28px, 4vw, 40px);
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: clamp(20px, 3vw, 30px);
  align-items: center;
  max-height: 92vh;
  overflow-y: auto;
}
.member-modal__photo {
  margin: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #fff8e8;
  box-shadow: var(--shadow-md);
}
.member-modal__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.member-modal__body h3 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
}
.member-modal__role {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.member-modal__bio {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-height: 42vh;
  overflow-y: auto;
  padding-right: 10px;
  overscroll-behavior: contain;
}
.member-modal__bio p { margin: 0 0 12px; }
.member-modal__bio p:last-child { margin-bottom: 0; }
.member-modal__bio::-webkit-scrollbar { width: 6px; }
.member-modal__bio::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; }
.member-modal__links { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.member-modal__links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--grove);
  color: #fff8e8;
  font-size: 13px;
  font-weight: 600;
}
.member-modal__links a span { font-weight: 800; }
/* a member with no LinkedIn / no email shows no button at all (the display rule
   above would otherwise override the [hidden] attribute) */
.member-modal__links a[hidden] { display: none; }
.member-modal__links a[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.member-modal__links a:not([aria-disabled="true"]):hover { background: var(--orange-deep); }

@media (max-width: 1080px) {
  .calc-media { grid-template-columns: 1fr; }
  .calc-media__cards { aspect-ratio: 16 / 9; max-width: 560px; }
  .calc-media__video { order: -1; }

  /* gallery view stacks */
  .solution__inner { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 48px); }
  .solution__gallery { max-width: 600px; margin: 0 auto; }

  /* stack each experiential panel: media on top, text below */
  .exp-panel,
  .exp-panel:nth-child(even),
  .exp-panel.exp-panel--statement {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: clamp(22px, 4vw, 34px);
    padding: clamp(40px, 8vw, 60px) 0;
  }
  .exp-panel:nth-child(even) .exp-panel__media { order: 0; }
  .exp-panel__text { max-width: none; }

  /* spotlight selector stacks: list on top, stage below */
  .vsel { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); min-height: 0; }
  .vsel__panel { order: 0; }
  .vsel__stage { order: 1; }
}
@media (max-width: 720px) {
  .order-form { grid-template-columns: 1fr; }
  .team-mini { width: 150px; }
  .solution__tags { grid-template-columns: 1fr; max-width: 420px; }
  .member-modal__dialog { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .member-modal__links { justify-content: center; }
  .solution__gallery { aspect-ratio: 16 / 10; }
  .primer__zero { font-size: clamp(120px, 42vw, 200px); }
}

/* ===========================================================
   ROUND 3 ADDITIONS
   =========================================================== */

/* orange emphasis word in headings */
.team__heading h2 em.o { color: var(--orange-deep); }
.site-footer__tag em { color: var(--orange-2); font-style: normal; }

/* ---- Solution gallery: spotlight statement in the left column ---- */
.solution__copy .exp-panel__kicker { margin: 0 0 16px; }
.solution__copy .exp-panel__headline {
  font-size: clamp(25px, 2.9vw, 37px);
  line-height: 1.08;
  margin: 0 0 8px;
}
/* the two product names sit side by side, each with "(patent pending)"
   centered directly beneath it — sized to match the headline above them */
.exp-panel__products {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 0.4em;
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(25px, 2.9vw, 37px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--grove);
}
.exp-panel__products .prod { display: inline-flex; flex-direction: column; align-items: center; }
.exp-panel__products .prod em { font-style: normal; white-space: nowrap; }
.prod__patent {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--muted, #6b7466);
  margin-top: 0;       /* tucked right under each name */
  white-space: nowrap;
}
.solution__copy .exp-panel__benefits { margin: 0 0 24px; }
.solution__copy .solution__tags { margin: 0 0 24px; }
.solution__copy .link-script { margin-top: 2px; }

/* ---- Calculator result: brighter green, annual + lifetime side by side ---- */
.calc-card__result {
  background:
    radial-gradient(120% 90% at 14% 0%, rgba(46, 138, 87, 0.5), transparent 60%),
    linear-gradient(150deg, #18643b 0%, #0e3f28 55%, #0b2e1f 100%);
  padding: clamp(20px, 2.2vw, 30px);
}
.calc-result {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.5vw, 22px);
  align-items: stretch;
}
.calc-result__col { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.calc-result__col--life {
  border-left: 1px solid rgba(255, 248, 232, 0.18);
  padding-left: clamp(14px, 1.5vw, 22px);
}
.calc-result__eyebrow {
  margin: 0 0 14px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-2);
}
.calc-result__col--life .calc-result__eyebrow { color: rgba(255, 248, 232, 0.66); }
.calc-result__figure { margin: 0 0 22px; display: block; }
.calc-result__figure strong {
  display: block;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(30px, 3.3vw, 44px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: #fff8e8;
  white-space: nowrap;
}
.calc-result__figure span { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; color: rgba(255, 248, 232, 0.78); }
.calc-result__rows {
  margin: 24px 0 0;
  display: grid;
  gap: 13px;
  border-top: 1px solid rgba(255, 248, 232, 0.2);
  padding-top: 18px;
}
.calc-result__rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 15.5px; }
.calc-result__rows dt { margin: 0; color: rgba(255, 248, 232, 0.74); }
.calc-result__rows dd { margin: 0; font-weight: 700; font-family: var(--serif); font-size: 17px; color: #fff8e8; }
.calc-card__disclaimer { margin-top: 20px; font-size: 12px; }

/* ===========================================================
   ENHANCED (experimental) results panel — toggled on the card.
   Stacks the two benefit blocks vertically, blows up the headline
   figures, and turns the detail rows into stat tiles so the panel
   fills its space instead of leaving it empty.
   =========================================================== */
.calc-card--enhanced .calc-card__result {
  padding: clamp(18px, 1.9vw, 26px);
}
.calc-card--enhanced .calc-result {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(12px, 1.3vw, 18px);
}
.calc-card--enhanced .calc-result__col {
  justify-content: flex-start;
  gap: clamp(7px, 0.9vw, 11px);
}
.calc-card--enhanced .calc-result__col--life {
  border-left: 0;
  padding-left: 0;
  border-top: 1px solid rgba(255, 248, 232, 0.2);
  padding-top: clamp(12px, 1.4vw, 17px);
}
.calc-card--enhanced .calc-result__eyebrow {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.12em;
}
.calc-card--enhanced .calc-result__figure {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.calc-card--enhanced .calc-result__figure strong {
  font-size: clamp(38px, 4.1vw, 54px);
  letter-spacing: -0.035em;
}
.calc-card--enhanced .calc-result__figure span {
  margin-top: 0;
  font-size: 15.5px;
  font-weight: 700;
}
.calc-card--enhanced .calc-result__rows {
  margin: clamp(6px, 0.9vw, 11px) 0 0;
  border-top: 0;
  padding-top: 0;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.calc-card--enhanced .calc-result__rows div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: rgba(255, 248, 232, 0.07);
  border: 1px solid rgba(255, 248, 232, 0.15);
  border-radius: 12px;
  padding: 9px 13px;
}
.calc-card--enhanced .calc-result__rows dt {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 248, 232, 0.6);
}
.calc-card--enhanced .calc-result__rows dd {
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1;
}

/* ---- Postcard carousel: single card on a paper mat ---- */
.postcard-show { position: relative; width: 100%; height: 100%; margin: 0; }
.calc-media__cards .postcard-show > img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 3px;
  filter: drop-shadow(0 14px 26px rgba(20, 25, 15, 0.28));
}

/* ---- Team leaders: clickable card + attribution chips ---- */
.team-member__btn {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
}
.team-member h3 { transition: color 180ms; }
.team-member__btn:hover h3 { color: var(--orange-deep); }
.team-member__creds {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.team-member__creds .cred {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff8e8;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.team-member__creds .cred span { color: var(--ink-mute); font-weight: 600; }
.team-member__creds .cred--logo { padding: 5px 12px; }
.team-member__creds .cred--logo img { height: 22px; width: auto; max-width: 120px; object-fit: contain; display: block; }
/* square emblem marks (Ohio State, Blue Buffalo, etc.) read as tiny favicons
   at wordmark height — give them a much larger box so they're legible */
.team-member__creds .cred--mark { padding: 4px 10px; }
.team-member__creds .cred--mark img { height: 42px; max-width: 48px; }

/* ---- Documents flip module ---- */
.packet__visual { display: block; align-self: center; }
.docflip { display: flex; flex-direction: column; gap: 16px; max-width: 380px; margin: 0 auto; }
.docflip__viewer {
  position: relative;
  align-self: center;
  width: min(340px, 94%);
  aspect-ratio: 695 / 900;
}
.docflip__sheet { position: absolute; inset: 0; border-radius: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); }
.docflip__sheet--back { transform: rotate(-4deg) translate(10px, 10px); background: #ecdfbe; }
.docflip__sheet--mid  { transform: rotate(2.5deg) translate(-6px, 6px); background: #f3e6c4; }
.docflip__cover {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 4px solid #fff8e8;
  background: #fff8e8;
  box-shadow: var(--shadow-lg);
}
.docflip__cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.docflip__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--grove);
  color: #fff8e8;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.docflip__soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(160deg, var(--grove) 0%, var(--grove-deep) 100%);
  color: #fff8e8;
  text-align: center;
  padding: 20px;
}
.docflip__soon[hidden] { display: none; }
.docflip__soon-mark svg { width: 42px; height: 42px; color: rgba(255, 248, 232, 0.85); }
.docflip__soon-title { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.2; }
.docflip__soon-tag { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-2); }
.docflip__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.docflip__meta { min-width: 0; }
.docflip__eyebrow { margin: 0 0 2px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.docflip__title { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; color: var(--ink); }
.docflip__dl { font-size: 13px; padding: 11px 18px; white-space: nowrap; }
.docflip__dl.is-disabled { background: rgba(20, 35, 25, 0.16); color: rgba(20, 35, 25, 0.5); box-shadow: none; pointer-events: none; }
.docflip__tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.docflip__tab {
  border: 1px solid var(--rule);
  background: #fff8e8;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink-soft);
  transition: background 180ms, color 180ms, border-color 180ms;
}
.docflip__tab:hover { border-color: rgba(20, 35, 25, 0.3); color: var(--ink); }
.docflip__tab.is-active { background: var(--grove); color: #fff8e8; border-color: var(--grove); }
.docflip__hint { margin: 0; text-align: center; font-size: 12px; color: var(--ink-mute); font-style: italic; }

/* ---- Footer brand: cleaner lockup + contact list ---- */
.brand--footer {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.brand--footer .brand__mark { width: clamp(78px, 7.5vw, 110px); height: clamp(78px, 7.5vw, 110px); }
.brand--footer .brand__wordmark { font-size: clamp(50px, 5.4vw, 82px); }
.brand--footer .brand__logo { height: clamp(48px, 5.4vw, 68px); width: auto; display: block; }
.site-footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255, 248, 232, 0.78);
}
.site-footer__contact li { position: relative; }
.site-footer__contact li + li::before { content: "·"; position: absolute; left: -11px; color: rgba(255, 248, 232, 0.4); }
.site-footer__contact a { color: var(--orange-2); border-bottom: 0; }
.site-footer__contact a:hover { color: #fff8e8; }

/* small-screen stacking for the two-up calculator result */
@media (max-width: 600px) {
  .calc-result { grid-template-columns: 1fr; gap: 20px; }
  .calc-result__col--life { border-left: 0; border-top: 1px solid rgba(255, 248, 232, 0.18); padding-left: 0; padding-top: 18px; }
}

/* ---- docs card on an angle + swappable postcard/photo carousel ---- */
.docflip__viewer { transform: rotate(-2.4deg); }
.packet-shots { margin: 18px auto 0; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.packet-shots__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.packet-shots__label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.packet-shots__toggle { display: inline-flex; gap: 4px; padding: 4px; background: #fff8e8; border: 1px solid var(--rule); border-radius: 999px; box-shadow: var(--shadow-sm); }
.packet-shots__btn { border: 0; background: transparent; cursor: pointer; padding: 6px 13px; border-radius: 999px; font-family: var(--sans); font-weight: 700; font-size: 11.5px; color: var(--ink-soft); transition: background 180ms, color 180ms; }
.packet-shots__btn:hover { color: var(--ink); }
.packet-shots__btn.is-active { background: var(--grove); color: #fff8e8; }
.packet-shot { position: relative; margin: 0; width: 100%; aspect-ratio: 2 / 3; }
.packet-shot[hidden] { display: none; }
.packet-shot.rota > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.packet-shot[data-shots-set="postcards"].rota > img { object-fit: contain; filter: drop-shadow(0 12px 24px rgba(20, 25, 15, 0.26)); }
.packet-shot[data-shots-set="photos"].rota > img { object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-md); }

/* ---- FAQ placeholder (content pending) ---- */
.faq__placeholder { max-width: 820px; margin: 0 auto; min-height: clamp(80px, 12vw, 160px); display: grid; place-items: center; text-align: center; }
.faq__placeholder p { margin: 0; font-family: var(--serif); font-style: normal; font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-mute); }

/* =========================================================
   SCHEDULE-A-VISIT — flyer doc unit + Photos / Postcards modes
   ========================================================= */
.packet__visual {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(22px, 2.2vw, 38px);
}

/* flyer thumbnail unit: cover + cycle arrow + name/download */
.docunit { display: flex; flex-direction: column; gap: 14px; width: auto; flex: 0 0 auto; }
.docunit__preview { position: relative; }
.docunit__sheet { position: absolute; inset: 0; border-radius: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14); z-index: 0; }
.docunit__sheet--back { transform: rotate(2deg) translate(0, 16px); background: #ecdfbe; }
.docunit__sheet--mid { transform: rotate(-1.5deg) translate(0, 8px); background: #f3e6c4; }
.docunit__cover {
  position: relative; z-index: 1; margin: 0;
  aspect-ratio: 695 / 900;
  height: clamp(400px, 42vw, 520px); width: auto;
  border-radius: 6px; overflow: hidden;
  border: 6px solid #fff8e8; background: #fff8e8;
  box-shadow: var(--shadow-md);
  transform: rotate(-1.6deg);
}
.docunit__cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.docunit__soon {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(160deg, var(--grove) 0%, var(--grove-deep) 100%);
  color: #fff8e8; text-align: center; padding: 18px;
}
.docunit__soon[hidden] { display: none; }
.docunit__soon-mark svg { width: 38px; height: 38px; color: rgba(255, 248, 232, 0.85); }
.docunit__soon-title { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.2; }
.docunit__soon-tag { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-2); }
.docunit__cycle {
  position: absolute; right: -16px; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--rule); background: #fff8e8; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-md); transition: background 180ms, color 180ms, transform 180ms;
}
.docunit__cycle:hover { background: var(--grove); color: #fff8e8; transform: translateY(-50%) scale(1.07); }
.docunit__cycle svg { width: 20px; height: 20px; }
.docunit__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.docunit__name { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--ink); }
.docunit__dl { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); font-size: 13px; padding: 11px 22px; white-space: nowrap; box-shadow: 0 8px 22px rgba(190, 85, 15, 0.5); }
.docunit__dl.is-disabled { background: rgba(20, 35, 25, 0.16); color: rgba(20, 35, 25, 0.5); box-shadow: none; pointer-events: none; }

/* photo carousel — bordered, like the original schedule section */
.packet__photos {
  position: relative; margin: 0; width: 100%; max-width: 520px;
  aspect-ratio: 4 / 3;
  border-radius: 6px; overflow: hidden;
  border: 6px solid #fff8e8; box-shadow: var(--shadow-md);
  background: var(--paper-2); transform: rotate(1.2deg);
}
.packet__photos.rota > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* postcard carousel — just the postcard */
.packet__postcards { position: relative; margin: 0; aspect-ratio: 2 / 3; height: clamp(400px, 42vw, 520px); width: auto; flex: 0 0 auto; }
.packet__postcards.rota > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: none; filter: drop-shadow(0 12px 24px rgba(20, 25, 15, 0.26)); }

/* Photos / Postcards toggle */
.packet-mode { display: inline-flex; gap: 4px; padding: 4px; background: #fff8e8; border: 1px solid var(--rule); border-radius: 999px; box-shadow: var(--shadow-sm); }
.packet-mode__btn { border: 0; background: transparent; cursor: pointer; padding: 7px 16px; border-radius: 999px; font-family: var(--sans); font-weight: 700; font-size: 12px; color: var(--ink-soft); transition: background 180ms, color 180ms; }
.packet-mode__btn:hover { color: var(--ink); }
.packet-mode__btn.is-active { background: var(--grove); color: #fff8e8; }

/* mode visibility */
.packet__visual.mode-photos .packet__postcards { display: none; }
.packet__visual.mode-postcards .packet__photos { display: none; }

/* POSTCARDS mode: postcards (left) + bigger flyer (right), side by side */
.packet__visual.mode-postcards {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "cards doc" "toggle toggle";
  align-items: end;
  justify-content: start;
  gap: 12px clamp(14px, 1.6vw, 24px);
}
.packet__visual.mode-postcards .packet__postcards { grid-area: cards; display: block; height: clamp(400px, 42vw, 520px); width: auto; }
.packet__visual.mode-postcards .docunit { grid-area: doc; width: auto; }
.packet__visual.mode-postcards .docunit__cover { height: clamp(400px, 42vw, 520px); width: auto; }
.packet__visual.mode-postcards .packet-mode { grid-area: toggle; justify-self: start; margin-top: 12px; }

/* schedule section: stack the postcard + flyer on narrow screens */
@media (max-width: 820px) {
  .packet__visual { flex-direction: column; align-items: center; gap: 28px; }
  .packet__postcards { height: auto; width: min(300px, 82%); }
  .packet__visual .docunit { width: min(300px, 82%); }
  .packet__visual .docunit__cover { height: auto; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .marquee__track, .team-marquee__track { animation: none; transform: none; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ---- Cloudflare Turnstile widget (injected by initTurnstile) ----
   Both forms are two-column grids, so span the widget across both and
   reserve its height up front to stop the button jumping when it loads. */
.cf-turnstile {
  grid-column: 1 / -1;
  min-height: 65px;
  margin-top: 2px;
}