/* ============================================================
   Vetfluence — Design tokens
   ============================================================ */

:root {
  --ink: #161513;
  --ink-soft: #3a3733;
  --paper: #f5f1e8;
  --paper-dim: #ece5d4;
  --accent: #5b7188;
  --accent-deep: #3f5063;
  --accent-light: #93a8b9;
  --line-on-paper: rgba(22, 21, 19, 0.14);
  --line-on-ink: rgba(245, 241, 232, 0.16);

  --font: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --container: 1180px;
  --space-1: 8px;
  --space-2: 14px;
  --space-3: 22px;
  --space-4: 36px;
  --space-5: 56px;
  --space-6: 88px;

  --radius: 12px;
  --radius-pill: 999px;

  --dur: 220ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
  }
}

/* ============================================================
   Reset
   ============================================================ */

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

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::selection { background: var(--accent); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
}

/* ============================================================
   Type
   ============================================================ */

h1, h2, h3 {
  margin: 0;
  text-wrap: balance;
}

/* Major headings carry the hero's display personality everywhere on the
   site, not just the homepage hero — h3 stays plain Archivo bold below,
   which is what visually separates "major heading" from "card title." */
h1, h2 {
  font-family: "Big Shoulders Display", var(--font);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(32px, 8vw, 58px); line-height: 0.98; }
h2 { font-size: clamp(26px, 5vw, 38px); line-height: 1.03; }
h3 { font-weight: 800; letter-spacing: -0.02em; font-size: clamp(19px, 3vw, 23px); line-height: 1.2; }

/* In-article prose subheads stay plain — a shouty, all-caps display face
   mid-paragraph hurts long-form readability where a marketing section
   heading doesn't need to worry about it. */
.article-body h2 {
  font-family: var(--font);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.02em;
}

p { margin: 0; }

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--space-2);
}

.lede {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--ink-soft);
  max-width: 58ch;
  line-height: 1.55;
}

.numeral {
  font-family: var(--font);
  font-weight: 900;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
}
.badge .dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ============================================================
   Layout utilities
   ============================================================ */

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

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

.section-head {
  margin-bottom: var(--space-4);
}

.grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 700px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-5 { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22,21,19,0.14); }
}

.btn-primary {
  background: var(--accent-deep);
  color: var(--paper);
}

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}
.on-ink .btn-outline, .btn-outline.on-ink { color: var(--paper); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
@media (max-width: 480px) {
  .btn-row .btn { width: 100%; }
}

/* ============================================================
   Header / Nav
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  transition: background var(--dur) var(--ease);
}

.site-header .logo { height: 22px; width: auto; display: block; }
.site-header .logo.on-ink { display: none; }

.site-header.is-solid {
  background: var(--ink);
}
.site-header.is-solid .logo.on-paper { display: none; }
.site-header.is-solid .logo.on-ink { display: block; }

.site-header nav.primary-nav {
  display: none;
}

@media (min-width: 900px) {
  .site-header nav.primary-nav {
    display: flex;
    gap: var(--space-3);
    font-weight: 600;
    font-size: 14.5px;
  }
  .site-header.is-solid nav.primary-nav a { color: var(--paper); }
  .header-right { display: flex; align-items: center; gap: var(--space-2); }
  .menu-toggle { display: none; }
}

.header-right { display: flex; align-items: center; }

.header-right .btn-primary {
  padding: 9px 18px;
  font-size: 13px;
}

.menu-toggle {
  background: none;
  border: none;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  padding: 8px 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}
.site-header.is-solid .menu-toggle { color: var(--paper); }

@media (min-width: 900px) {
  .menu-toggle { display: none; }
}

/* Mobile full-screen takeover */

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--accent);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 20px;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav-top .logo { height: 22px; }

.mobile-nav-close {
  background: none;
  border: none;
  font-weight: 700;
  font-size: 15px;
  text-decoration: underline;
  color: var(--ink);
  cursor: pointer;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-5) 0 auto;
  list-style: none;
  padding: 0;
}

.mobile-nav-links a {
  font-size: clamp(28px, 9vw, 40px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.mobile-nav .btn-primary {
  background: var(--ink);
  color: var(--paper);
  align-self: stretch;
  justify-content: center;
  margin-top: var(--space-4);
}

@media (min-width: 900px) {
  .mobile-nav { display: none; }
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-5) 0 var(--space-3);
}

.footer-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}

.footer-grid .logo { height: 20px; margin-bottom: var(--space-2); }

.footer-grid h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-light);
  margin: 0 0 var(--space-2);
}

.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-grid p { color: rgba(245,241,232,0.75); font-size: 14.5px; line-height: 1.6; }

.footer-bottom {
  border-top: 1px solid var(--line-on-ink);
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  font-size: 13px;
  color: rgba(245,241,232,0.6);
}

/* ============================================================
   Hero — primary (Home) + secondary (interior pages)
   ============================================================ */

.hero {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--line-on-paper) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-paper) 1px, transparent 1px);
  background-size: 42px 42px;
  padding: var(--space-6) 0 var(--space-5);
}

.hero-secondary {
  padding: var(--space-5) 0 var(--space-4);
}

.hero .container { max-width: 760px; }

.hero h1 { margin-bottom: var(--space-2); }

.hero .btn-row { margin-top: var(--space-4); }

/* Primary (Home) hero: asymmetric two-column, mockup column dominant and
   bleeding past the container edge — deliberately off the site's usual
   centered-container rhythm, because the signature moment lives here. */
@media (min-width: 900px) {
  .hero-primary .container {
    max-width: var(--container);
    display: grid;
    grid-template-columns: 0.95fr 1.2fr;
    align-items: center;
    gap: var(--space-4);
  }
}
@media (min-width: 1300px) {
  .hero-mock { margin-right: -48px; }
}

.hero-primary h1 {
  font-family: "Big Shoulders Display", var(--font);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(38px, 7.4vw, 70px);
  line-height: 0.94;
}

.hero-mock {
  display: block;
  margin-top: var(--space-4);
  max-width: 400px;
}
@media (min-width: 900px) {
  .hero-mock { margin-top: 0; max-width: none; }
}

.mock-stage {
  position: relative;
  width: 100%;
  max-width: 620px;
  height: 640px;
}
@media (min-width: 900px) {
  .mock-stage { margin: 0 0 0 auto; }
}

.mock-browser {
  background: var(--paper);
  border: 1px solid var(--line-on-paper);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(22, 21, 19, 0.25);
  overflow: hidden;
}

/* Each page/combined frame shares the same centered footprint; the exploded
   "scatter" is purely a transform offset applied on top (--dx/--dy/--rot/--s),
   same technique as the old --rest-rotate tilt this replaces. */
.mock-page, .mock-combined {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 340px;
  margin: -170px 0 0 -150px;
}

.mock-page {
  transform-origin: 50% 50%;
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--s));
  transition: transform 640ms var(--ease) var(--delay), opacity 500ms var(--ease) 3000ms;
  z-index: var(--z);
}
.mock-stage.is-playing .mock-page { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0; pointer-events: none; }
.mock-stage.no-transition .mock-page,
.mock-stage.no-transition .mock-row { transition: none !important; }

.mock-page--home { --dx: -180px; --dy: -150px; --rot: -8deg; --s: 0.65; }
.mock-page--services { --dx: 180px; --dy: -150px; --rot: 6deg; --s: 0.65; }
.mock-page--about { --dx: -180px; --dy: 150px; --rot: 6deg; --s: 0.65; }
.mock-page--contact { --dx: 180px; --dy: 150px; --rot: -8deg; --s: 0.65; }

.mock-combined {
  z-index: 1;
  transition: box-shadow 500ms var(--ease) 3000ms, border-color 500ms var(--ease) 3000ms;
}
.mock-stage.is-playing .mock-combined {
  border-color: var(--accent-deep);
  box-shadow: 0 34px 68px -18px rgba(63, 80, 99, 0.34);
}

.mock-page-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--accent);
  color: var(--paper);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  z-index: 2;
}

/* Services page */
.mock-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mock-tile { height: 52px; border-radius: 6px; background: var(--paper-dim); position: relative; }
.mock-tile::before {
  content: "";
  position: absolute; top: 8px; left: 8px;
  width: 10px; height: 10px; border-radius: 4px; background: var(--accent);
}

/* About page */
.mock-about-cols { display: flex; gap: 10px; align-items: flex-start; }
.mock-about-text { flex: 1.1; display: flex; flex-direction: column; gap: 7px; }
.mock-about-text .mock-line { height: 8px; }
.mock-about-text .mock-line:nth-child(3) { width: 70%; }
.mock-photo { flex: 1; height: 80px; border-radius: 7px; background: var(--paper-dim); border: 1px solid var(--line-on-paper); }
.mock-stats { display: flex; gap: 8px; margin-top: 14px; }
.mock-stat { flex: 1; height: 28px; border-radius: 6px; background: var(--paper-dim); }

/* Contact page */
.mock-field { height: 22px; border-radius: 5px; border: 1px solid var(--line-on-paper); margin-bottom: 8px; }
.mock-submit { width: 88px; height: 24px; border-radius: var(--radius-pill); background: var(--ink); margin-top: 2px; }

/* Combined frame — the four exploded pages compress into one assembled
   homepage; its own rows then build themselves in as a closing act. */
.mock-well { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 100%; padding: 12px; }
.mock-row {
  border: 1px solid var(--line-on-paper);
  border-radius: 8px;
  padding: 9px 12px;
  opacity: 0;
  transform: translateY(14px) rotate(var(--crot, -3deg));
  transition: opacity 480ms var(--ease) var(--cdelay), transform 480ms var(--ease) var(--cdelay);
}
.mock-stage.is-playing .mock-row { opacity: 1; transform: translateY(0) rotate(0deg); }
.mock-well .mock-row:nth-child(1) { --cdelay: 3300ms; --crot: -3deg; }
.mock-well .mock-row:nth-child(2) { --cdelay: 3480ms; --crot: 3deg; }
.mock-well .mock-row:nth-child(3) { --cdelay: 3660ms; --crot: -3deg; }
.mock-well .mock-row:nth-child(4) { --cdelay: 3840ms; --crot: 3deg; }
.mock-row-home .mock-nav { margin-bottom: 10px; }
.mock-row-services { display: flex; gap: 7px; }
.mock-chip { flex: 1; height: 32px; border-radius: 5px; background: var(--paper-dim); position: relative; }
.mock-chip::before {
  content: "";
  position: absolute; top: 7px; left: 7px;
  width: 8px; height: 8px; border-radius: 3px; background: var(--accent);
}
.mock-row-about { display: flex; gap: 10px; align-items: center; }
.mock-row-about-text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mock-row-about-text .mock-line { height: 6px; }
.mock-row-about-text .mock-line:nth-child(2) { width: 65%; }
.mock-photo-sm { width: 48px; height: 36px; border-radius: 5px; background: var(--paper-dim); border: 1px solid var(--line-on-paper); flex: none; }
.mock-row-contact { text-align: center; }
.mock-book-btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
}
.mock-book-btn:hover { background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(22, 21, 19, 0.22); }
.mock-book-btn:active { transform: translateY(0); box-shadow: none; }

.mock-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--paper-dim);
  border-bottom: 1px solid var(--line-on-paper);
}
.mock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); opacity: 0.35; }
.mock-url {
  margin-left: 8px;
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line-on-paper);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

.mock-screen { padding: 18px; }

.mock-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.mock-logo { font-weight: 900; font-size: 13px; letter-spacing: -0.02em; }
.mock-logo span { font-weight: 400; }
.mock-nav-btn { width: 46px; height: 16px; border-radius: var(--radius-pill); background: var(--accent); }

.mock-line { border-radius: 3px; background: var(--line-on-paper); }
.mock-line-lg { width: 82%; height: 14px; margin-bottom: 8px; }
.mock-line-md { width: 60%; height: 14px; margin-bottom: 14px; }
.mock-line-sm { width: 92%; height: 8px; margin-bottom: 6px; }
.mock-line-sm + .mock-line-sm { width: 70%; }

.mock-cta { width: 84px; height: 22px; border-radius: var(--radius-pill); background: var(--accent); margin-top: 16px; }

.mock-cards { display: flex; gap: 8px; margin-top: 22px; }
.mock-card {
  flex: 1;
  height: 54px;
  border-radius: 6px;
  background: var(--paper-dim);
  border: 1px solid var(--line-on-paper);
}
.mock-card::before {
  content: "";
  display: block;
  width: 40%;
  height: 4px;
  margin: 10px 0 0 8px;
  border-radius: 2px;
  background: var(--accent);
}

.mock-replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  background: none;
  border: none;
  padding: 4px 0;
  font-weight: 700;
  font-size: 13px;
  color: var(--accent-deep);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 640px) {
  /* Whole animation scaled down ~75% uniformly (box sizes, margins, and
     scatter distance together) so the mini-browser pages keep their
     proportions and nothing overflows or gets clipped — just a smaller,
     more compact version of the same assemble sequence. */
  .mock-stage { max-width: 285px; height: 424px; margin-left: auto; margin-right: auto; }
  .mock-page, .mock-combined { width: 196px; margin-left: -98px; }
  .mock-page { height: 226px; margin-top: -113px; }
  .mock-combined { height: 256px; margin-top: -128px; }
  .mock-page--home { --dx: -64px; --dy: -98px; --s: 0.58; }
  .mock-page--services { --dx: 64px; --dy: -98px; --s: 0.58; }
  .mock-page--about { --dx: -64px; --dy: 98px; --s: 0.58; }
  .mock-page--contact { --dx: 64px; --dy: 98px; --s: 0.58; }

  /* The stage box is tall enough to fit the scatter animation, but the
     settled combined card only fills the middle of it, leaving 84px of
     reserved-but-empty space below the card before the next element even
     starts. Pull that dead space back with a negative bottom margin on the
     stage itself so the replay button's own normal 14px margin-top is the
     only visible gap — a regular, intentional-looking spacing, not a big
     empty gap and not flush against the card either. */
  .mock-stage { margin-bottom: -84px; }

  /* Hero top padding is sized for desktop; cut it down for mobile so the
     top badge isn't sitting under a large empty gap, while still leaving a
     normal amount of breathing room above it. */
  .hero { padding-top: var(--space-4); }
}

/* Reduced motion / no-js: skip the animation entirely and show the finished
   assembled homepage mockup directly — a static, still-legible end state
   rather than a half-finished transition. */
@media (prefers-reduced-motion: reduce) {
  .mock-page { display: none; }
  .mock-combined { border-color: var(--accent-deep); }
  .mock-row { transition: none; opacity: 1; transform: none; }
  .mock-replay { display: none; }
}
html.no-js .mock-page { display: none; }
html.no-js .mock-combined { border-color: var(--accent-deep); }
html.no-js .mock-row { opacity: 1; transform: none; }
html.no-js .mock-replay { display: none; }

/* About teaser bullseye — looping paw-stamp + impact ring-spin ----------- */
.about-target .target-stamp {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.about-target.is-playing .target-stamp {
  animation: target-stamp-press 900ms cubic-bezier(0.22, 0.68, 0.24, 1) forwards;
}
.about-target .target-ring-highlight {
  transform-box: fill-box;
  transform-origin: center;
}
.about-target.is-playing .target-ring-highlight {
  animation: target-ring-spin 500ms ease-out 630ms forwards;
}

/* Paw lifts, hovers, presses into the target once, and stays — a lasting
   mark, not a repeating loop. */
@keyframes target-stamp-press {
  0%   { opacity: 0; transform: translateY(-50px) scale(0.8); }
  15%  { opacity: 1; transform: translateY(-50px) scale(0.8); }
  70%  { transform: translateY(0) scale(1.08); }
  85%  { transform: translateY(0) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(0.95); }
}

@keyframes target-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Reduced motion / no-js: skip the loop, show the resting bullseye. */
@media (prefers-reduced-motion: reduce) {
  .about-target .target-stamp { display: none; }
}
html.no-js .about-target .target-stamp { display: none; }

/* Services page mockup — homepage sections fly in from the side and land,
   the same "pages assemble into one site" idea as the hero, played once
   when the graphic scrolls into view. See initServicesMock() in main.js. */
.svc-part {
  opacity: 0;
  transform: translateX(var(--dx, -70px));
  transition: opacity 480ms var(--ease) var(--sdelay, 0ms), transform 480ms var(--ease) var(--sdelay, 0ms);
}
.svc-mock.is-playing .svc-part {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .svc-part { opacity: 1; transform: none; transition: none; }
}
html.no-js .svc-part { opacity: 1; transform: none; }

/* Both full-panel decorative graphics (about-target's bullseye, svc-mock's
   browser mockup) default to stretching across their entire grid column at
   an 800:600 ratio — capped down here so they read as a supporting visual
   rather than a near-full-width panel next to their paired text column. */
@media (min-width: 700px) {
  .svc-mock, .about-target {
    max-width: 420px;
    justify-self: center;
  }
}

/* About page "How We Work" cards — rise + scale in, staggered, once the
   grid scrolls into view. The grid itself only carries the .reveal class
   as an observed trigger (its own fade/transform is neutralized below);
   each card animates independently so the stagger reads clearly. */
.how-we-work.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.how-we-work .card {
  opacity: 0;
  transform: translateY(56px) scale(0.92);
  transition: opacity 680ms var(--ease), transform 680ms var(--ease);
}
.how-we-work .card:nth-child(2) { transition-delay: 110ms; }
.how-we-work .card:nth-child(3) { transition-delay: 220ms; }
.how-we-work.is-visible .card {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .how-we-work .card { opacity: 1; transform: none; transition: none; }
}
html.no-js .how-we-work .card { opacity: 1; transform: none; }

/* ============================================================
   Comparison table — "Why Vets Only"
   ============================================================ */

.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 760px) {
  .compare { grid-template-columns: 1fr 1fr; gap: 0; }
}

.compare-col {
  padding: var(--space-4);
}

.compare-col.generalist {
  background: var(--paper-dim);
  color: var(--ink-soft);
}

.compare-col.vetfluence {
  background: var(--ink);
  color: var(--paper);
}

.compare-col h3 { margin-bottom: var(--space-2); }
.compare-col.vetfluence h3 { color: var(--accent-light); }

.compare-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.compare-col li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; }
.compare-col .mark { flex: none; font-weight: 800; }
.compare-col.generalist .mark { color: #b3453a; }
.compare-col.vetfluence .mark { color: var(--accent-light); }

.compare-note {
  margin-top: var(--space-3);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ============================================================
   Cards — services teaser / portfolio empty / blog card
   ============================================================ */

.card {
  display: block;
  background: var(--paper-dim);
  border: 1px solid var(--line-on-paper);
  border-radius: var(--radius);
  padding: var(--space-3);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.card .numeral { font-size: 34px; margin-bottom: var(--space-1); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }

/* Homepage "What We Build", "Process", and "Portfolio" — Services, Process,
   and Portfolio are the three sections that actually sell the site, so they
   get a clearly larger type scale than the generic .card/.blog-card default
   instead of reading at the same weight as every other grid on the site. */
.home-services .section-head h2,
.home-process .section-head h2,
.home-portfolio .section-head h2 {
  font-size: clamp(30px, 5.5vw, 44px);
}

.home-services .card .numeral { font-size: 52px; }
.home-services .card h3 { font-size: clamp(24px, 3.2vw, 32px); }
.home-services .card p { font-size: 18px; line-height: 1.6; }

.home-process .process-step .numeral { font-size: 44px; }
.home-process .process-step h3 { font-size: clamp(21px, 2.6vw, 26px); }
.home-process .process-step p { font-size: 17px; line-height: 1.55; }

.home-portfolio .blog-card img { height: 210px; }
.home-portfolio .blog-card-body { padding: var(--space-4); }
.home-portfolio .blog-card-meta { font-size: 12.5px; }
.home-portfolio .blog-card h3 { font-size: clamp(23px, 2.8vw, 28px); }
.home-portfolio .blog-card .read-more { font-size: 16px; }

@media (hover: hover) and (pointer: fine) {
  a.card:hover { border-color: var(--accent-deep); transform: translateY(-2px); }
}

.empty-state {
  border: 1px dashed var(--line-on-paper);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-3);
  text-align: center;
}
.empty-state img { max-width: 240px; margin: 0 auto var(--space-3); border-radius: var(--radius); }
.empty-state p { color: var(--ink-soft); max-width: 48ch; margin: 0 auto var(--space-3); }

/* ============================================================
   Blog cards + article template
   ============================================================ */

.blog-card {
  display: block;
  background: var(--paper-dim);
  border: 1px solid var(--line-on-paper);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.blog-card img { width: 100%; height: 170px; object-fit: cover; }
.blog-card-body { padding: var(--space-3); }
.blog-card-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--space-2);
}
.blog-card-meta .sep { opacity: 0.4; margin: 0 8px; }
.blog-card h3 { margin-bottom: 8px; }
.blog-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin-bottom: var(--space-2); }
.blog-card .read-more { font-weight: 700; font-size: 14px; color: var(--accent-deep); }

@media (hover: hover) and (pointer: fine) {
  a.blog-card:hover { border-color: var(--accent-deep); transform: translateY(-2px); }
}

/* Portfolio cards with an expandable "Why it works" section: the toggle
   button can't legally nest inside the card's <a> (invalid HTML, and real
   browsers handle that inconsistently), so the outer card chrome moves to
   this wrapper and .blog-card inside it goes bare. */
.portfolio-card {
  background: var(--paper-dim);
  border: 1px solid var(--line-on-paper);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.portfolio-card .blog-card {
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.portfolio-card .case-rationale {
  padding: var(--space-2) var(--space-3) var(--space-3);
}
@media (hover: hover) and (pointer: fine) {
  .portfolio-card:hover { border-color: var(--accent-deep); transform: translateY(-2px); }
}

.article-hero { position: relative; }
.article-hero img { width: 100%; height: clamp(220px, 40vw, 420px); object-fit: cover; display: block; }
.article-hero-meta {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.article-hero-meta .sep { color: var(--accent-light); }

.article-body { max-width: 720px; margin: 0 auto; }
.article-body h2 { font-size: clamp(21px, 3.2vw, 27px); margin: var(--space-4) 0 var(--space-2); }
.article-body p { color: var(--ink-soft); font-size: 16px; line-height: 1.7; margin-bottom: var(--space-3); }
.article-body ul { margin: 0 0 var(--space-3); padding-left: 1.2em; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--ink); }

.callout {
  background: var(--paper-dim);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-3);
  margin: var(--space-4) 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout p:first-child { font-weight: 700; color: var(--ink); margin-bottom: 6px; }

.related-posts {
  max-width: 720px;
  margin: var(--space-5) auto 0;
  border-top: 1px solid var(--line-on-paper);
  padding-top: var(--space-4);
}
.related-posts h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}
.related-posts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.related-posts a { font-weight: 700; font-size: 17px; text-decoration: underline; }

/* ============================================================
   Process steps
   ============================================================ */

.process {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  position: relative;
}

@media (max-width: 699px) {
  .process { padding-left: 22px; border-left: 2px dashed var(--line-on-paper); }
}

/* Matches .grid-5's breakpoints exactly, so a 5-step process renders with
   the same column rhythm everywhere it appears on the site — a hardcoded
   repeat(3, 1fr) here used to strand step 5 alone in a dangling row. */
@media (min-width: 700px) {
  .process { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .process { grid-template-columns: repeat(5, 1fr); }
}

.process-step .numeral { font-size: 40px; display: block; margin-bottom: 10px; }
.process-step h3 { margin-bottom: 8px; }
.process-step p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }


/* ============================================================
   Services breakdown — numbered row list
   ============================================================ */

.row-list { border-top: 1px solid var(--line-on-paper); }

.row-list-item {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line-on-paper);
  cursor: pointer;
}

@media (min-width: 700px) {
  .row-list-item { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: var(--space-3); }
}

.row-list-item .numeral { font-size: 22px; color: var(--ink-soft); font-weight: 800; }
.row-list-item h3 { margin-bottom: 6px; }
.row-list-item p { color: var(--ink-soft); font-size: 15px; max-width: 58ch; }
.row-list-item .row-cta {
  font-weight: 700;
  color: var(--accent-deep);
  white-space: nowrap;
  margin-top: 10px;
  display: inline-block;
}
@media (min-width: 700px) { .row-list-item .row-cta { margin-top: 0; } }

@media (hover: hover) and (pointer: fine) {
  .row-list-item:hover .row-cta { text-decoration: underline; }
}

/* ============================================================
   CTA banners — two-tier
   ============================================================ */

.cta-banner {
  padding: var(--space-5) 0;
}

.cta-banner-bold {
  background: var(--accent);
  color: var(--ink);
  text-align: center;
}
.cta-banner-bold .lede { color: var(--ink); margin: var(--space-2) auto var(--space-3); }
.cta-banner-bold .btn-row { justify-content: center; }

.cta-banner-quiet {
  background: var(--paper);
}
.cta-banner-quiet .container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--paper-dim);
  border: 1px solid var(--line-on-paper);
  border-radius: var(--radius);
  padding: var(--space-4);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cta-banner-quiet .container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 520ms var(--ease);
}
.cta-banner-quiet.is-visible .container::before { transform: scaleY(1); }
@media (min-width: 700px) {
  .cta-banner-quiet .container { flex-direction: row; align-items: baseline; justify-content: space-between; }
}
.cta-banner-quiet .quiet-lead { font-size: 15px; color: var(--ink-soft); }
.cta-banner-quiet .quiet-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--line-on-paper);
  text-underline-offset: 6px;
  transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cta-banner-quiet .quiet-link::after {
  content: "\2192";
  display: inline-block;
  font-weight: 700;
  transition: transform var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .cta-banner-quiet .container:hover {
    border-color: var(--accent-deep);
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -24px rgba(22, 21, 19, 0.28);
  }
  .cta-banner-quiet .container:hover .quiet-link {
    color: var(--accent-deep);
    text-decoration-color: var(--accent-deep);
  }
  .cta-banner-quiet .container:hover .quiet-link::after { transform: translateX(5px); }
}

/* ============================================================
   FAQ accordion
   ============================================================ */

.faq-item {
  border-bottom: 1px solid var(--line-on-paper);
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-3) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
}

.faq-question .plus {
  flex: none;
  font-weight: 400;
  font-size: 22px;
  transition: transform var(--dur) var(--ease);
}
.faq-question[aria-expanded="true"] .plus { transform: rotate(45deg); }

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur) var(--ease);
}
.faq-answer p { padding-bottom: var(--space-3); color: var(--ink-soft); line-height: 1.6; max-width: 62ch; }

.faq-item.is-open .faq-answer { max-height: 400px; }

/* ============================================================
   Contact form
   ============================================================ */

.contact-layout {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .contact-layout { grid-template-columns: 1fr 1fr; }
}

form.contact-form { display: flex; flex-direction: column; gap: var(--space-2); }

/* Honeypot: positioned off-screen rather than display:none so simple bots that
   skip display:none fields still fill it in and get caught server-side. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.field input, .field textarea {
  font-family: var(--font);
  font-size: 16px;
  padding: 13px 14px;
  border-radius: 8px;
  border: 1px solid var(--line-on-paper);
  background: var(--paper-dim);
  color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent-deep); outline-offset: 1px; }

.form-status {
  border-radius: var(--radius);
  padding: var(--space-3);
  font-weight: 600;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.success { background: var(--paper-dim); border: 1px solid var(--accent); }
.form-status.error { background: #f5e6e2; border: 1px solid #c0503f; color: #7a2f22; }

.booking-box {
  background: var(--ink);
  color: var(--paper);
  border-radius: 20px;
  padding: var(--space-4) var(--space-3);
}
@media (min-width: 480px) {
  .booking-box { padding: var(--space-4); }
}
.booking-box h3 { color: var(--paper); margin-bottom: 10px; }
.booking-box p { color: rgba(245,241,232,0.8); margin-bottom: var(--space-3); }

/* Mini calendar — static mock of an embedded scheduler, rendered by
   initBookingCalendar() in main.js. */
.mini-calendar {
  background: rgba(245, 241, 232, 0.04);
  border: 1px solid var(--line-on-ink);
  border-radius: var(--radius);
  padding: 10px;
  margin-top: var(--space-1);
}
.mini-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.mini-cal-month {
  font-weight: 800;
  font-size: 14px;
  color: var(--paper);
}
.mini-cal-prev, .mini-cal-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-on-ink);
  background: transparent;
  color: var(--paper);
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mini-cal-prev:active, .mini-cal-next:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .mini-cal-prev:hover, .mini-cal-next:hover { background: rgba(245, 241, 232, 0.1); border-color: var(--accent-light); }
}
.mini-cal-prev:disabled, .mini-cal-next:disabled { opacity: 0.3; cursor: default; }
.mini-cal-prev:disabled:hover, .mini-cal-next:disabled:hover { background: transparent; border-color: var(--line-on-ink); }

.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.mini-cal-dow {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.45);
  padding-bottom: 4px;
}
.mini-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid transparent;
  background: none;
  color: var(--paper);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mini-cal-day:hover { background: rgba(245, 241, 232, 0.12); }
.mini-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--accent-light); }
.mini-cal-day.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
  font-weight: 800;
}
.mini-cal-day.is-selected:hover { background: var(--accent); }
.mini-cal-day.is-muted {
  color: rgba(245, 241, 232, 0.25);
  cursor: default;
}
.mini-cal-day.is-muted:hover { background: none; }
.mini-cal-day.is-past {
  color: rgba(245, 241, 232, 0.25);
  cursor: default;
  text-decoration: line-through;
}
.mini-cal-day.is-past:hover { background: none; }

/* Time-slot picker — populated by initBookingCalendar() in main.js once a date
   is chosen on the mini calendar above it. */
#bookingSlots { margin-top: var(--space-2); }
.slot-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(245, 241, 232, 0.6);
  margin-bottom: var(--space-1);
}
.slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}
@media (min-width: 480px) {
  .slot-grid { grid-template-columns: repeat(4, 1fr); }
}
.slot-btn {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 6px;
  border-radius: 8px;
  border: 1px solid var(--line-on-ink);
  background: rgba(245, 241, 232, 0.04);
  color: var(--paper);
  cursor: pointer;
}
.slot-btn:hover { background: rgba(245, 241, 232, 0.12); }
.slot-btn.is-selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.slot-btn:disabled {
  opacity: 0.3;
  cursor: default;
  text-decoration: line-through;
}
.slot-btn:disabled:hover { background: rgba(245, 241, 232, 0.04); }
.slot-empty { color: rgba(245, 241, 232, 0.6); font-size: 14px; }

/* Booking mini-form — reuses .field from the contact form, but the contact form's
   label color (--ink-soft) is tuned for a light background; this box is dark. */
.booking-form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.booking-form[hidden] { display: none; }
.booking-form .field label { color: rgba(245, 241, 232, 0.6); }
.booking-form .form-status.success { background: rgba(245, 241, 232, 0.08); border-color: var(--accent-light); color: var(--paper); }

/* ============================================================
   Scroll reveal
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Boxes sliding in from the side — same timing/curve as .reveal, different
   starting transform. Direction is picked per-element via the class. */
.reveal-left, .reveal-right {
  opacity: 0;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-left.is-visible, .reveal-right.is-visible {
  opacity: 1;
  transform: none;
}

/* Headline/eyebrow text that cascades in word-by-word. wrapWords() in
   main.js splits the element into .word spans with a --i stagger index
   before the shared reveal observer attaches, so this stays declarative:
   the parent gaining .is-visible is what fires every child's transition. */
.reveal-fall .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  transition-delay: calc(var(--i, 0) * 40ms);
}
.reveal-fall.is-visible .word {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
  .reveal-fall .word { opacity: 1; transform: none; transition: none; }
}

noscript .reveal, .no-js .reveal,
noscript .reveal-left, .no-js .reveal-left,
noscript .reveal-right, .no-js .reveal-right,
noscript .reveal-fall .word, .no-js .reveal-fall .word {
  opacity: 1 !important;
  transform: none !important;
}

/* Touch tap feedback (mobile "cursor" equivalent) — a short radial pulse
   from the tap point, toggled via .is-tapped by initTouchFeedback() in
   main.js. Desktop never gets this class (hover-gated JS), so it's inert
   there regardless. */
.btn, .card {
  position: relative;
  overflow: hidden;
}
.btn.is-tapped::after, .card.is-tapped::after {
  content: "";
  position: absolute;
  left: var(--tap-x, 50%);
  top: var(--tap-y, 50%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  pointer-events: none;
  animation: tap-pulse 420ms var(--ease) forwards;
}
@keyframes tap-pulse {
  from { transform: scale(1); opacity: 0.35; }
  to { transform: scale(14); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.is-tapped::after, .card.is-tapped::after { animation: none; content: none; }
}

/* ============================================================
   Skip link
   ============================================================ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  z-index: 300;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* ============================================================
   Sticky mobile CTA bar
   ============================================================ */

.sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: var(--accent-deep);
  color: var(--paper);
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 20px calc(15px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(22, 21, 19, 0.18);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }

@media (max-width: 899px) {
  .sticky-cta { display: block; }
  /* Keeps the fixed bar from covering the copyright/privacy line at the
     very bottom of the page once it's scrolled into view. */
  .site-footer { padding-bottom: calc(var(--space-3) + 70px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* ============================================================
   Portfolio case-study rationale
   ============================================================ */

.case-rationale {
  margin: var(--space-2) 0 !important;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-on-paper);
}
.case-rationale-toggle {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 6px;
}
.case-rationale-toggle .plus {
  flex: none;
  font-weight: 400;
  font-size: 16px;
  text-transform: none;
  transition: transform var(--dur) var(--ease);
}
.case-rationale-toggle[aria-expanded="true"] .plus { transform: rotate(45deg); }
.case-rationale-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur) var(--ease);
}
.case-rationale.is-open .case-rationale-answer { max-height: 260px; }
.case-rationale ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: 14px !important;
  line-height: 1.5;
  color: var(--ink-soft);
}
.case-rationale li { margin-bottom: 4px; }
.case-rationale li:last-child { margin-bottom: 0; }

@media (min-width: 700px) {
  .case-rationale-toggle { cursor: default; pointer-events: none; }
  .case-rationale-toggle .plus { display: none; }
  .case-rationale-answer { max-height: none !important; overflow: visible; }
}

/* Semantically h2 (correct document outline), styled to match the quieter
   h3 treatment — used where a plain, calm heading fits better than the
   big display h2 style (e.g. Privacy Policy topic headings). */
.h2-quiet {
  font-family: var(--font);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: clamp(19px, 3vw, 23px);
  line-height: 1.2;
}