/* ==========================================================================
   ZOOMIE PAWS — DESIGN SYSTEM
   1. Tokens          6. Buttons & links      11. Sections
   2. Reset & base    7. Header & nav         12. Forms
   3. Typography      8. Media frames         13. Footer
   4. Layout          9. Cards                14. Motion / reveal
   5. Decoration     10. Bespoke modules      15. Responsive & a11y
   ========================================================================== */

/* ------------------------------------------------------------- 1. TOKENS */
:root {
  /* ---- Zoomie Paws brand palette ----------------------------------------
     Teal #009FA3 and orange #F58220 are the brand accents; white and
     charcoal #1C1C1C carry the balance. The *-ink variants are darkened
     just enough to clear WCAG AA as text on white, while the exact brand
     values stay untouched wherever they are used as fill or on charcoal. */
  --teal:         #009FA3;
  --teal-ink:     #007E82;
  --teal-deep:    #00666A;
  --teal-soft:    #4FBDC0;

  --orange:       #F58220;
  --orange-ink:   #B4550A;
  --orange-soft:  #FBB77A;

  --charcoal:     #1C1C1C;
  --charcoal-2:   #262626;

  --white:        #FFFFFF;
  --tint:         #F4F7F7;
  --tint-deep:    #E4EDED;

  /* Aliases so existing rules keep working */
  --cream:        #FFFFFF;
  --cream-soft:   #F4F7F7;
  --cream-deep:   #E4EDED;
  --bone:         #FFFFFF;

  --ink:          #1C1C1C;
  --ink-2:        #262626;
  --ink-70:       #3A3A3A;
  --ink-50:       #555555;
  --ink-30:       #6E7676;

  --ember:        #B4550A;
  --ember-deep:   #8F4308;
  --ember-soft:   #FBB77A;
  --ochre:        #F58220;
  --moss:         #007E82;
  --moss-soft:    #009FA3;
  --sky:          #4FBDC0;

  --line:         rgba(28,28,28,.14);
  --line-soft:    rgba(28,28,28,.08);
  --line-light:   rgba(255,255,255,.18);

  /* Type — friendly, modern, energetic. Not corporate, not childish. */
  --serif: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans:  'Nunito Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2rem, 4.4vw, 3.7rem);
  --fs-h1:      clamp(1.9rem, 3.9vw, 3.1rem);
  --fs-h2:      clamp(1.65rem, 3.1vw, 2.5rem);
  --fs-h3:      clamp(1.2rem, 1.8vw, 1.55rem);
  --fs-h4:      clamp(1.1rem, 1.5vw, 1.3rem);
  --fs-lead:    clamp(1.05rem, 1.35vw, 1.28rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.075rem);
  --fs-small:   .875rem;
  --fs-micro:   .74rem;

  /* Space */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --shell:   1240px;
  --shell-w: 1440px;
  --sec-y:   clamp(4.5rem, 10vw, 9.5rem);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(28,28,28,.05), 0 10px 30px -18px rgba(28,28,28,.22);
  --shadow-md: 0 4px 14px rgba(28,28,28,.06), 0 26px 60px -34px rgba(28,28,28,.36);
  --shadow-lg: 0 10px 30px rgba(28,28,28,.08), 0 50px 90px -50px rgba(28,28,28,.45);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --header-h: 78px;
}

/* -------------------------------------------------------- 2. RESET & BASE */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  /* `clip` contains decorative bleed without creating a scroll container,
     so position:sticky keeps working. `hidden` is the older fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--cream);
  color: var(--ink-70);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--ember); color: var(--bone); }

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

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  background: var(--ink); color: var(--bone);
  padding: .7rem 1.1rem; border-radius: var(--r-pill);
  transform: translateY(-200%); transition: transform .3s var(--ease);
  font-size: var(--fs-small); font-weight: 600;
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------- 3. TYPOGRAPHY */
h1, h2, h3, h4, h5, .serif {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.028em;
  font-variation-settings: 'wdth' 104;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -.014em; }
h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -.01em; }

.display { font-size: var(--fs-display); line-height: 1.0; letter-spacing: -.038em; font-weight: 800; }

p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--ink-70);
}
.muted { color: var(--ink-50); }
.small { font-size: var(--fs-small); }

em, .italic { font-style: italic; }

.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ember);
}
.kicker::before {
  content: ''; width: 26px; height: 1px; background: currentColor; opacity: .55;
}
.kicker--plain::before { display: none; }

.accent { color: var(--ember); }
.accent-serif { font-style: italic; color: var(--ember); }

/* Underline that draws on hover */
.link-u {
  position: relative; display: inline-block;
  color: var(--ink); font-weight: 500;
}
.link-u::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.link-u:hover::after { transform: scaleX(1); transform-origin: left; }

/* ----------------------------------------------------------- 4. LAYOUT */
.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: var(--shell-w); }
.shell--narrow { max-width: 820px; }

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--flush-top { padding-top: 0; }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.6rem; }

.section-head { max-width: 760px; }
.section-head .kicker { margin-bottom: 1.1rem; }
.section-head h2 + p { margin-top: 1.4rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker::before { display: none; }

.head-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.head-split .lead { max-width: 46ch; }

/* Dark section */
.section--ink {
  background: var(--ink);
  color: rgba(255,255,255,.72);
  isolation: isolate;
  overflow: hidden;   /* keeps the glow inside the rounded card */
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--bone); }
.section--ink .kicker { color: var(--ochre); }
.section--ink .muted { color: rgba(255,255,255,.5); }
.section--ink .lead { color: rgba(255,255,255,.72); }

.section--moss { background: var(--moss); color: rgba(255,255,255,.75); overflow: hidden; }
.section--moss h2, .section--moss h3 { color: var(--bone); }
.section--moss .kicker { color: var(--ochre); }

.section--soft { background: var(--cream-soft); }
.section--deep { background: var(--cream-deep); }

/* Rounded section edges for a crafted feel */
.round-top { border-radius: var(--r-xl) var(--r-xl) 0 0; }
.round-bottom { border-radius: 0 0 var(--r-xl) var(--r-xl); }
.round-all { border-radius: var(--r-xl); }

/* ------------------------------------------------------ 5. DECORATION */
/* Film grain — sits above everything, invisible until you look for it */
.grain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  opacity: .038; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(70px); opacity: .5; z-index: -1;
}
.glow--ember { background: radial-gradient(circle, rgba(245,130,32,.35), transparent 68%); }
.glow--ochre { background: radial-gradient(circle, rgba(245,130,32,.34), transparent 68%); }
.glow--moss  { background: radial-gradient(circle, rgba(0,159,163,.26), transparent 68%); }

.hr {
  height: 1px; background: var(--line); border: 0;
  transform-origin: left;
}

/* Paw trail motif — the thread that runs through the site */
.paw-trail { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.paw-trail svg { width: 100%; height: 100%; }
.paw-trail path {
  fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .16;
  stroke-dasharray: 6 12; stroke-linecap: round;
}
.section--ink .paw-trail path { stroke: var(--bone); opacity: .18; }

.paw-glyph { fill: var(--ember); opacity: 0; transition: opacity .5s var(--ease); }
.paw-glyph.is-in { opacity: .5; }

/* -------------------------------------------------- 6. BUTTONS & LINKS */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--bone);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  padding: 1.05rem 1.9rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: .93rem; font-weight: 600; letter-spacing: .01em;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), color .35s var(--ease);
  will-change: transform;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ember);
  transform: translateY(101%);
  transition: transform .55s var(--ease-out);
  border-radius: inherit;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(0); }

.btn .btn-ico {
  width: 16px; height: 16px; flex: none;
  transition: transform .45s var(--ease-out);
}
.btn:hover .btn-ico { transform: translateX(4px); }

/* Primary CTA — brand orange with charcoal type (6.6:1) */
.btn--ember {
  --btn-bg: var(--orange);
  --btn-fg: var(--charcoal);
  font-weight: 800;
}
.btn--ember::before { background: var(--charcoal); }
.btn--ember:hover { --btn-fg: var(--white); }

/* Teal CTA — white type only, kept bold and large enough to clear AA */
.btn--teal {
  --btn-bg: var(--teal);
  --btn-fg: var(--white);
  font-weight: 800;
}
.btn--teal::before { background: var(--charcoal); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { --btn-fg: var(--bone); box-shadow: inset 0 0 0 1px transparent, var(--shadow-md); }

.btn--light { --btn-bg: var(--bone); --btn-fg: var(--ink); }
.btn--light::before { background: var(--ember); }
.btn--light:hover { --btn-fg: var(--bone); }

.btn--outline-light {
  --btn-bg: transparent; --btn-fg: var(--bone);
  box-shadow: inset 0 0 0 1px var(--line-light);
}
.btn--outline-light::before { background: var(--bone); }
.btn--outline-light:hover { --btn-fg: var(--ink); }

.btn--sm { padding: .78rem 1.35rem; font-size: .84rem; }
.btn--lg { padding: 1.2rem 2.3rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* Text link with arrow */
.arrow-link {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; font-size: .92rem; color: var(--ink);
}
.arrow-link svg { width: 15px; height: 15px; transition: transform .45s var(--ease-out); }
.arrow-link:hover svg { transform: translateX(5px); }
.section--ink .arrow-link, .section--moss .arrow-link { color: var(--bone); }

/* ------------------------------------------------------ 7. HEADER & NAV */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  transition: transform .5s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.header::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0; transition: opacity .4s var(--ease);
}
.header.is-stuck::after { opacity: 1; }
.header.is-hidden { transform: translateY(-105%); }

.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}

/* Official logo lockup */
.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand-logo {
  height: 62px; width: auto; flex: none; display: block;
  transition: transform .5s var(--ease-out);
}
.brand:hover .brand-logo { transform: scale(1.04) rotate(-1.5deg); }
.brand-text {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 800;
  color: var(--ink); letter-spacing: -.02em; line-height: 1;
}
.brand-text span {
  display: block; font-family: var(--sans); font-size: .56rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--teal-ink); margin-top: .32rem;
}
@media (max-width: 520px) {
  .brand-logo { height: 48px; }
}

.nav { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.75rem); }
.nav a {
  position: relative;
  font-size: .89rem; font-weight: 500; color: var(--ink-70);
  padding: .4rem 0;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1.5px;
  background: var(--ember); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: .75rem; }

/* Mobile toggle */
.burger {
  display: none; width: 46px; height: 46px;
  border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line);
  place-items: center; flex: none;
  transition: background .3s var(--ease);
}
.burger:hover { background: rgba(28,28,28,.05); }
.burger span {
  display: block; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform .45s var(--ease-out), opacity .3s var(--ease);
}
.burger span + span { margin-top: 5px; }
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 490;
  background: var(--cream);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .75s var(--ease-out);
  overflow-y: auto;
  visibility: hidden;
}
.drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.drawer-nav a {
  display: block; font-family: var(--serif); font-size: clamp(1.9rem, 8vw, 2.9rem);
  color: var(--ink); padding: .35rem 0; letter-spacing: -.025em;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.drawer.is-open .drawer-nav a { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i,0) * .055s); }
.drawer-nav a span { font-family: var(--sans); font-size: .7rem; color: var(--ink-50); margin-right: .8rem; vertical-align: middle; }
.drawer-foot { display: grid; gap: 1rem; padding-top: 2rem; }
.drawer-foot .small { color: var(--ink-50); }

/* ------------------------------------------------------ 8. MEDIA FRAMES */
.media {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--cream-deep);
  isolation: isolate;
}
.media img, .media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
  will-change: transform;
}
.media--zoom:hover img { transform: scale(1.045); }
.media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(28,28,28,.42));
  opacity: 0; transition: opacity .6s var(--ease); pointer-events: none;
}
.media--shade::after { opacity: 1; }

.media-ratio-1 { aspect-ratio: 1/1; }
.media-ratio-43 { aspect-ratio: 4/3; }
.media-ratio-34 { aspect-ratio: 3/4; }
.media-ratio-169 { aspect-ratio: 16/9; }
.media-ratio-54 { aspect-ratio: 5/4; }
.media-ratio-219 { aspect-ratio: 21/9; }
.media-ratio-tall { aspect-ratio: 4/5; }

/* Curtain reveal for images.
   The frame itself is never hidden — only its contents wipe in — so a missed
   reveal can never leave a blank hole in the layout. */
.media[data-reveal="media"] { background: var(--cream-deep); }
.media[data-reveal="media"] img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.14);
  transition: clip-path 1.15s var(--ease-out), transform 1.5s var(--ease-out);
}
.media[data-reveal="media"].is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* Two overlapping frames — gives a flat column depth and weight */
.stack-media { position: relative; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.stack-media-a { box-shadow: var(--shadow-md); }
.stack-media-b {
  position: absolute; right: clamp(-1rem, -1vw, 0rem); bottom: 0;
  width: clamp(38%, 34%, 42%);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  outline: 6px solid var(--ink);
  outline-offset: -1px;
}
.section--soft .stack-media-b, .section--deep .stack-media-b { outline-color: var(--cream-soft); }

.media-tag {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
}
.media-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }

/* Play affordance for video slots */
.play {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: transparent; width: 100%; height: 100%;
}
.play-dot {
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  transition: transform .5s var(--ease-out), background .4s var(--ease);
}
.play-dot svg { width: 18px; height: 18px; fill: var(--ink); margin-left: 3px; transition: fill .4s var(--ease); }
.play:hover .play-dot { transform: scale(1.09); background: var(--ember); }
.play:hover .play-dot svg { fill: var(--bone); }
.play-dot::after {
  content: ''; position: absolute; width: 74px; height: 74px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.55);
  animation: pulse 2.8s var(--ease) infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: .9; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

/* --------------------------------------------------------- 9. CARDS */
.card {
  position: relative;
  background: var(--bone);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  box-shadow: var(--shadow-sm);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
  overflow: hidden;
  height: 100%;
}
.card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ember); transform: scaleY(0); transform-origin: bottom;
  transition: transform .6s var(--ease-out);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.card:hover::before { transform: scaleY(1); transform-origin: top; }
.card h3, .card h4 { margin-bottom: .7rem; }
.card p { font-size: .97rem; }

.card--ink { background: var(--ink-2); box-shadow: none; }
.card--ink h3, .card--ink h4 { color: var(--bone); }
.card--ink p { color: rgba(255,255,255,.66); }

.card--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.card--outline:hover { background: var(--bone); }

/* Icon chip */
.ico {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 1.35rem;
  background: linear-gradient(150deg, rgba(245,130,32,.14), rgba(245,130,32,.14));
  color: var(--ember);
  transition: transform .55s var(--ease-out), background .5s var(--ease);
}
.ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card:hover .ico { transform: translateY(-2px) rotate(-4deg); background: var(--ember); color: var(--bone); }

/* Numbered list card */
.num {
  font-family: var(--serif); font-size: .95rem; font-weight: 600;
  color: var(--ember); letter-spacing: .02em;
}

/* Tick list */
.ticks { display: grid; gap: .6rem; margin-top: 1.3rem; }
.ticks li {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .92rem; color: var(--ink-70);
}
.ticks li::before {
  content: ''; flex: none; width: 16px; height: 16px; margin-top: .28rem;
  border-radius: 50%;
  background: rgba(245,130,32,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007E82' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.card--ink .ticks li { color: rgba(255,255,255,.7); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .8rem; font-weight: 500; color: var(--ink-70);
  background: rgba(255,255,255,.5);
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.chip:hover { background: var(--ink); color: var(--bone); transform: translateY(-2px); }
.chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--ember); flex: none; }
.section--ink .chip { box-shadow: inset 0 0 0 1px var(--line-light); color: rgba(255,255,255,.7); background: transparent; }
.section--ink .chip:hover { background: var(--bone); color: var(--ink); }

/* Placeholder slot — honest, designed, obviously intentional */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-items: start;
}
.proof-grid .slot:nth-child(even) { margin-top: clamp(1rem, 2.5vw, 2.25rem); }

.slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(28,28,28,.022) 0 10px, transparent 10px 20px),
    var(--cream-soft);
  padding: clamp(1.5rem, 2.2vw, 2rem);
  transition: box-shadow .5s var(--ease), transform .5s var(--ease-out), background .5s var(--ease);
  height: 100%;
}
.slot::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(140deg, rgba(245,130,32,.07), transparent 55%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.slot:hover { box-shadow: inset 0 0 0 1px rgba(245,130,32,.42); transform: translateY(-5px); }
.slot:hover::before { opacity: 1; }

.slot-quote {
  position: absolute; top: -.6rem; right: .6rem;
  font-family: var(--serif); font-size: 5.5rem; line-height: 1;
  color: var(--ember); opacity: .13; user-select: none;
  transition: opacity .5s var(--ease), transform .6s var(--ease-out);
}
.slot:hover .slot-quote { opacity: .22; transform: translateY(3px); }

.slot-label {
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ember);
  margin-bottom: 1.1rem;
}
.slot-label::before {
  content: ''; width: 7px; height: 7px; border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.slot-hint { font-size: .9rem; color: var(--ink-50); font-style: italic; line-height: 1.5; }
.slot-rule { height: 1px; background: var(--line); margin: 1.2rem 0; }

/* Ghost lines quietly shimmer — they read as "waiting for content", not broken */
.slot-ghost { position: relative; display: grid; gap: .55rem; }
.slot-ghost span {
  height: 9px; border-radius: 3px; display: block;
  background: linear-gradient(90deg, rgba(28,28,28,.06) 0%, rgba(28,28,28,.11) 50%, rgba(28,28,28,.06) 100%);
  background-size: 220% 100%;
  animation: shimmer 3.6s var(--ease-soft) infinite;
}
.slot-ghost span:nth-child(2) { width: 88%; animation-delay: .25s; }
.slot-ghost span:nth-child(3) { width: 62%; animation-delay: .5s; }
@keyframes shimmer {
  0% { background-position: 140% 0; }
  60%, 100% { background-position: -40% 0; }
}

.slot-person { position: relative; display: flex; gap: .8rem; align-items: flex-start; }
.slot-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(245,130,32,.09);
  box-shadow: inset 0 0 0 1px rgba(245,130,32,.22);
  transition: background .45s var(--ease), transform .5s var(--ease-out);
}
.slot-avatar svg { width: 16px; height: 16px; fill: var(--ember); opacity: .75; }
.slot:hover .slot-avatar { background: var(--ember); transform: rotate(-8deg); }
.slot:hover .slot-avatar svg { fill: var(--bone); opacity: 1; }

.proof-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.proof-foot .lead { max-width: 46ch; margin: 0; }
.proof-foot .btn-ico { width: 17px; height: 17px; }

/* ------------------------------------------------- 10. BESPOKE MODULES */

/* ---- Hero ---- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 4.5rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .82fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; max-width: 42rem; }
.hero h1 { margin: 1.4rem 0 0; }
.hero .lead { margin-top: 1.6rem; max-width: 34rem; }
.hero .btn-row { margin-top: 2.2rem; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.hero-meta div { max-width: 15rem; }
.hero-meta dt {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ember); margin-bottom: .4rem;
}
.hero-meta dd { font-size: .88rem; color: var(--ink-50); margin: 0; line-height: 1.5; }

.hero-visual { position: relative; }
.hero-media { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.hero-media img, .hero-media video { aspect-ratio: 4/5; }

.hero-badge {
  position: absolute; left: -1.5rem; bottom: 2.4rem; z-index: 4;
  background: var(--bone); border-radius: var(--r-md);
  padding: 1rem 1.2rem; box-shadow: var(--shadow-md);
  max-width: 15rem;
  display: flex; gap: .8rem; align-items: flex-start;
}
.hero-badge .dot {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: rgba(0,159,163,.12); display: grid; place-items: center; color: var(--moss);
}
.hero-badge .dot svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.hero-badge strong { display: block; font-size: .84rem; color: var(--ink); font-weight: 600; }
.hero-badge span { font-size: .78rem; color: var(--ink-50); line-height: 1.45; }

.hero-stamp {
  position: absolute; right: -1.2rem; top: -1.2rem; z-index: 4;
  width: 116px; height: 116px;
}
.hero-stamp svg { width: 100%; height: 100%; }
.hero-stamp .stamp-rot { animation: spin 26s linear infinite; transform-origin: 50% 50%; }
.hero-stamp text { font-family: var(--sans); font-size: 8.4px; font-weight: 600; letter-spacing: .22em; fill: var(--ink); text-transform: uppercase; }
.hero-stamp .stamp-core { fill: var(--ember); }
@keyframes spin { to { transform: rotate(360deg); } }

.scroll-cue {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: 2.6rem;
  font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-50); font-weight: 600;
}
.scroll-cue i {
  width: 1px; height: 34px; background: linear-gradient(var(--ink-30), transparent);
  position: relative; overflow: hidden;
}
.scroll-cue i::after {
  content: ''; position: absolute; inset: 0; background: var(--ember);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ---- Marquee ribbon ---- */
.ribbon {
  background: var(--ink);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative;
}
.ribbon--ember { background: var(--ember); }
.ribbon-track {
  display: flex; width: max-content;
  animation: marquee 42s linear infinite;
}
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-track > div { display: flex; align-items: center; }
.ribbon-item {
  display: inline-flex; align-items: center; gap: 1.6rem;
  padding-right: 1.6rem;
  font-family: var(--serif); font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  color: var(--bone); white-space: nowrap; letter-spacing: -.01em;
}
.ribbon-item svg { width: 16px; height: 16px; fill: var(--ochre); flex: none; }
.ribbon--ember .ribbon-item svg { fill: var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Ecosystem orbit ---- */
.orbit-wrap {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.orbit {
  position: relative; aspect-ratio: 1/1;
  width: 100%; max-width: 430px; margin: 0 auto;
}
.orbit-ring {
  position: absolute; inset: 11%; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
}
.orbit-ring:nth-child(2) { inset: 24%; }
.orbit-ring:nth-child(3) { inset: 37%; }
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.045); opacity: .6; }
}

/* The whole constellation turns slowly; each node counter-turns so its
   label stays upright. */
.orbit-tilt {
  position: absolute; inset: 0;
  transition: transform .5s var(--ease-out);
  transform-style: preserve-3d;
}
.orbit-field { position: absolute; inset: 0; animation: orbit-spin 90s linear infinite; }
.orbit:hover .orbit-field,
.orbit:hover .orbit-node { animation-play-state: paused; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-counter {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Spokes from the hub to each partner — signal flows outward along them */
.orbit-spokes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-spokes line {
  stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 7;
  opacity: 0;
  transition: opacity .9s var(--ease-out) var(--d, 0s);
  animation: flow 4s linear infinite;
  animation-play-state: paused;
}
.is-in .orbit-spokes line { opacity: .26; animation-play-state: running; }
@keyframes flow { to { stroke-dashoffset: -20; } }

.orbit-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 39%; aspect-ratio: 1/1; border-radius: 50%;
  background: var(--ink); color: var(--bone);
  display: grid; place-items: center; text-align: center;
  box-shadow: var(--shadow-lg);
  z-index: 3; padding: .75rem;
}
.orbit-core span {
  font-family: var(--serif); font-size: clamp(.9rem, 1.7vw, 1.15rem); line-height: 1.1;
  letter-spacing: -.02em;
}
.orbit-core small {
  display: block; font-family: var(--sans); font-size: .54rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ochre); margin-top: .35rem;
}
/* Radar pulses out of the hub — the reach of the network */
.orbit-core::before, .orbit-core::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--ochre);
  opacity: 0; pointer-events: none;
  animation: radar 8s var(--ease-out) infinite;
}
.orbit-core::after { display: none; }
@keyframes radar {
  0%   { transform: scale(1); opacity: .38; }
  100% { transform: scale(2.35); opacity: 0; }
}

/* Each partner sits on the ring. Position comes from left/top (which resolve
   against the container) — never percentage translate, which resolves against
   the node itself. */
.orbit-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  width: 104px; text-align: center;
  z-index: 2; cursor: default;
  opacity: 0;
  transition: opacity .7s var(--ease-out) var(--d, 0s);
  animation: orbit-counter 90s linear infinite;
  animation-play-state: paused;
}
.is-in .orbit-node { opacity: 1; animation-play-state: running; }

.orbit-dot {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bone); box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
  transition: transform .45s var(--ease-out), background .35s var(--ease), box-shadow .45s var(--ease-out);
}
.orbit-dot svg { width: 18px; height: 18px; fill: var(--ember); transition: fill .35s var(--ease); }
.orbit-label {
  font-size: .72rem; font-weight: 600; color: var(--ink); line-height: 1.25;
  transition: color .35s var(--ease);
}
.orbit-note {
  position: absolute; top: calc(100% + .5rem); left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 168px; padding: .55rem .7rem;
  background: var(--ink); color: rgba(255,255,255,.85);
  border-radius: var(--r-sm);
  font-size: .7rem; line-height: 1.4;
  opacity: 0; pointer-events: none; z-index: 5;
  transition: opacity .35s var(--ease), transform .35s var(--ease-out);
}
.orbit-node:hover .orbit-dot { transform: scale(1.14); background: var(--ember); box-shadow: var(--shadow-md); }
.orbit-node:hover .orbit-dot svg { fill: var(--bone); }
.orbit-node:hover .orbit-label { color: var(--ember); }
.orbit-node:hover .orbit-note { opacity: 1; transform: translateX(-50%) translateY(0); }

.eco-list { display: grid; gap: 0; }
.eco-item {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  align-items: baseline;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line-soft);
  cursor: default;
  transition: padding-left .45s var(--ease-out);
}
.eco-item:hover { padding-left: .6rem; }
.eco-item strong { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); font-weight: 700; }
.eco-item span { font-size: .9rem; color: var(--ink-50); }

/* ---- Sticky process journey ---- */
.journey {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.journey-sticky {
  position: sticky; top: calc(var(--header-h) + 4vh);
}
.journey-visual {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4/5; background: var(--ink);
}
.journey-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .9s var(--ease), transform 1.3s var(--ease-out); }
.journey-visual img.is-active { opacity: 1; transform: scale(1); }
.journey-index {
  position: absolute; left: 1.4rem; bottom: 1.4rem; z-index: 3;
  font-family: var(--serif); font-size: clamp(3rem, 7vw, 5.4rem); line-height: 1;
  color: var(--bone); opacity: .92; letter-spacing: -.04em;
  text-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.journey-bar {
  position: absolute; right: 1.4rem; top: 1.4rem; bottom: 1.4rem; width: 2px;
  background: rgba(255,255,255,.22); border-radius: 2px; z-index: 3;
}
.journey-bar i { position: absolute; left: 0; top: 0; width: 100%; background: var(--ochre); border-radius: 2px; transition: height .5s var(--ease), top .5s var(--ease); }

.journey-steps { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.step {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  border-radius: var(--r-md);
  background: var(--bone);
  box-shadow: var(--shadow-sm);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), background .5s var(--ease);
}
.step.is-active { box-shadow: var(--shadow-md); transform: translateX(clamp(0px, .8vw, 12px)); }
.step-top { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.step-n {
  font-family: var(--serif); font-size: .95rem; font-weight: 600; color: var(--bone);
  width: 34px; height: 34px; border-radius: 50%; background: var(--ink);
  display: grid; place-items: center; flex: none;
  transition: background .5s var(--ease);
}
.step.is-active .step-n { background: var(--ember); }
.step h3 { margin: 0; }
.step p { font-size: .98rem; }
.step-aside {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line);
  font-size: .84rem; color: var(--ink-50); font-style: italic;
}

/* ---- Story cards ---- */
.stories-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 340px);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.stories-rail::-webkit-scrollbar { height: 4px; }
.stories-rail::-webkit-scrollbar-track { background: var(--line-soft); border-radius: 4px; }
.stories-rail::-webkit-scrollbar-thumb { background: var(--ink-30); border-radius: 4px; }
.stories-rail > * { scroll-snap-align: start; }

.story {
  position: relative;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--bone); box-shadow: var(--shadow-sm);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
  display: flex; flex-direction: column; height: 100%;
}
.story:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.story-media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--cream-deep); }
.story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease-out); }
.story:hover .story-media img { transform: scale(1.06); }
.story-role {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  padding: .42rem .8rem; border-radius: var(--r-pill);
  background: rgba(28,28,28,.78); backdrop-filter: blur(6px);
  color: var(--bone); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.story-body { padding: 1.35rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.story-name {
  font-family: var(--serif); font-size: 1.5rem; color: var(--ink-30);
  letter-spacing: -.02em; display: flex; align-items: center; gap: .6rem;
}
.story-name i { width: 42px; height: 2px; background: var(--line); display: block; }
.story-foot { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line-soft); }

/* ---- Chain (content → visibility → connection → adoption) ---- */
.chain {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0;
  counter-reset: chain;
}
.chain-node {
  position: relative;
  padding: clamp(1.6rem, 2.5vw, 2.2rem) clamp(1.2rem, 2vw, 1.8rem);
  border-left: 1px solid var(--line-light);
  transition: background .5s var(--ease);
}
.chain-node:last-child { border-right: 1px solid var(--line-light); }
.chain-node:hover { background: rgba(255,255,255,.045); }
.chain-node::after {
  content: ''; position: absolute; left: -5px; top: clamp(1.6rem, 2.5vw, 2.2rem);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ochre);
  transform: scale(0); transition: transform .6s var(--ease-out) var(--d, 0s);
}
.chain-node.is-in::after { transform: scale(1); }
.chain-n { font-family: var(--serif); font-size: .9rem; color: var(--ochre); display: block; margin-bottom: 1.4rem; }
.chain-node h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.chain-node p { font-size: .92rem; color: rgba(255,255,255,.62); }

/* ---- Roadmap: alternating vertical timeline ---- */
.tl { position: relative; }

.tl-rail {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  transform: translateX(-50%);
  background: var(--line);
  border-radius: 2px;
}
.tl-rail i {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(var(--ochre), var(--ember));
  border-radius: 2px;
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 76px 1fr;
  align-items: center;
  min-height: 128px;
}
.tl-item + .tl-item { margin-top: clamp(1.25rem, 3vw, 2.5rem); }
.tl-item--left  .tl-card { grid-column: 1; text-align: right; }
.tl-item--left  .tl-year { grid-column: 3; justify-self: start; }
.tl-item--right .tl-card { grid-column: 3; }
.tl-item--right .tl-year { grid-column: 1; justify-self: end; }

.tl-card {
  position: relative;
  background: var(--bone);
  border-radius: var(--r-md);
  padding: clamp(1.35rem, 2.2vw, 1.85rem);
  box-shadow: var(--shadow-sm);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.tl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tl-card h3 { font-size: 1.25rem; margin-bottom: .55rem; }
.tl-card p { font-size: .93rem; }
.tl-stage {
  display: block; margin-bottom: .8rem;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ember);
}
/* little arrow pointing at the rail */
.tl-card::after {
  content: ''; position: absolute; top: 50%; width: 12px; height: 12px;
  background: var(--bone); transform: translateY(-50%) rotate(45deg);
}
.tl-item--left  .tl-card::after { right: -6px; }
.tl-item--right .tl-card::after { left: -6px; }

.tl-node {
  grid-column: 2; justify-self: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cream);
  box-shadow: inset 0 0 0 1.5px var(--ink-30);
  display: grid; place-items: center;
  transition: box-shadow .5s var(--ease), transform .5s var(--ease-out);
  z-index: 2;
}
.tl-node i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ember);
  transform: scale(0); transition: transform .5s var(--ease-out);
}
.tl-node.is-lit { box-shadow: inset 0 0 0 1.5px var(--ember), 0 0 0 6px rgba(245,130,32,.13); transform: scale(1.08); }
.tl-node.is-lit i { transform: scale(1); }

.tl-year {
  align-self: center;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1; letter-spacing: -.04em;
  color: var(--ink);
  opacity: .09;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  user-select: none;
}
.section--deep .tl-card { background: var(--bone); }
.section--deep .tl-node { background: var(--cream-deep); }
.section--deep .tl-card::after { background: var(--bone); }

.tl-item--future .tl-stage { color: var(--moss); }
.tl-item--future .tl-card h3::after {
  content: 'Goal'; display: inline-block; vertical-align: middle;
  margin-left: .6rem; padding: .2rem .55rem; border-radius: var(--r-pill);
  background: rgba(0,159,163,.1); color: var(--moss);
  font-family: var(--sans); font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ---- Big statement ---- */
.statement {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.14; letter-spacing: -.028em;
  color: var(--ink); max-width: 20ch;
}
.statement--wide { max-width: 26ch; }
.section--ink .statement { color: var(--bone); }

/* ---- Area / map band ---- */
.area-band { position: relative; overflow: hidden; border-radius: var(--r-xl); }
.area-band img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.area-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; text-align: center;
  padding: var(--gutter);
  background: linear-gradient(180deg, rgba(28,28,28,.35), rgba(28,28,28,.72));
}
.area-overlay .display { color: var(--bone); font-size: clamp(2rem, 5vw, 4rem); }
.area-overlay p { color: rgba(255,255,255,.78); max-width: 46ch; margin: 1.2rem auto 0; }

/* ---- Accordion ---- */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; text-align: left;
  padding: clamp(1.15rem, 2vw, 1.6rem) 0;
  font-family: var(--serif); font-size: clamp(1.08rem, 1.8vw, 1.32rem);
  color: var(--ink); letter-spacing: -.014em; line-height: 1.3;
  transition: color .35s var(--ease);
}
.acc-q:hover { color: var(--ember); }
.acc-icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
  display: grid; place-items: center; position: relative;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease-out);
  margin-top: .1rem;
}
.acc-icon::before, .acc-icon::after {
  content: ''; position: absolute; background: var(--ink);
  transition: transform .45s var(--ease-out), background .4s var(--ease);
}
.acc-icon::before { width: 11px; height: 1.5px; }
.acc-icon::after { width: 1.5px; height: 11px; }
.acc-item.is-open .acc-icon { background: var(--ember); box-shadow: inset 0 0 0 1px var(--ember); transform: rotate(90deg); }
.acc-item.is-open .acc-icon::before, .acc-item.is-open .acc-icon::after { background: var(--bone); }
.acc-item.is-open .acc-icon::after { transform: scaleY(0); }
.acc-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.acc-item.is-open .acc-a { grid-template-rows: 1fr; }
/* Answers can contain links. A collapsed row is zero-height but was still
   visible to the tab order, so a keyboard user could land on an invisible
   link. `visibility: hidden` takes it out of the tab order; the delay lets
   the open animation finish before it is hidden again on close. */
.acc-a > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear .6s; }
.acc-item.is-open .acc-a > div { visibility: visible; transition-delay: 0s; }
.acc-a p { padding-bottom: 1.5rem; max-width: 62ch; font-size: .99rem; }

/* ---- Split feature rows ---- */
.feature-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.feature-row + .feature-row { margin-top: clamp(3.5rem, 8vw, 7rem); }
.feature-row--flip .feature-media { order: -1; }
@media (min-width: 861px) { .feature-row--flip .feature-media { order: 2; } }

.belief-pair {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(.75rem, 1.5vw, 1.15rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.belief-pair .media { border-radius: var(--r-md); }

/* ---- Quote ---- */
.quote {
  position: relative;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 2px solid var(--ember);
}
.quote p {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  line-height: 1.36; color: var(--ink); letter-spacing: -.018em;
  font-style: italic;
}
.quote cite {
  display: block; margin-top: 1.2rem; font-style: normal;
  font-size: .82rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-50);
}
.section--ink .quote p { color: var(--bone); }

/* ---- Page hero (interior pages) ---- */
.page-hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.page-hero .lead { max-width: 52ch; margin-top: 1.6rem; }
.crumbs {
  display: flex; gap: .5rem; align-items: center;
  font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-50); margin-bottom: 1.6rem; font-weight: 600;
}
.crumbs a:hover { color: var(--ember); }
.crumbs span { opacity: .5; }

/* ---- CTA band ---- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--ink); color: rgba(255,255,255,.7);
  border-radius: var(--r-xl);
  padding: clamp(2.75rem, 6vw, 5.5rem);
  text-align: center;
}
.cta-band h2 { color: var(--bone); max-width: 18ch; margin-inline: auto; }
.cta-band p { max-width: 52ch; margin: 1.4rem auto 0; }
.cta-band .btn-row { justify-content: center; margin-top: 2.4rem; }
.cta-band .paw-trail path { stroke: var(--bone); opacity: .12; }

/* ---- Impact grid ---- */
.impact-item {
  padding: clamp(1.4rem, 2.2vw, 1.9rem) 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem;
  align-items: start;
  transition: border-color .4s var(--ease);
}
.impact-item i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ember);
  margin-top: .55rem; flex: none;
  transform: scale(0); transition: transform .6s var(--ease-out);
}
.impact-item.is-in i { transform: scale(1); }
.impact-item h3 { font-size: 1.22rem; margin-bottom: .45rem; }
.impact-item p { font-size: .94rem; }

/* --------------------------------------------------------- 12. FORMS */
.form-wrap {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.form-card {
  background: var(--bone);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3.2vw, 2.75rem);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-50);
}
.field label .req { color: var(--ember); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .95rem 1.05rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--cream-soft);
  font-size: .96rem; color: var(--ink);
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 15px;
  padding-right: 2.6rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ember); background: var(--bone);
  box-shadow: 0 0 0 3px rgba(245,130,32,.12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-50); }
.field .err { font-size: .78rem; color: var(--ember-deep); display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--ember-deep); }
.field.has-error .err { display: block; }

/* Segmented radio group */
.seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg label {
  padding: .62rem 1.05rem; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .84rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink-70); cursor: pointer;
  transition: all .35s var(--ease);
}
.seg label:hover { box-shadow: inset 0 0 0 1px var(--ink-30); }
.seg input:checked + label { background: var(--ink); color: var(--bone); box-shadow: inset 0 0 0 1px var(--ink); }
.seg input:focus-visible + label { outline: 2px solid var(--ember); outline-offset: 2px; }

.check { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.check input { margin-top: .25rem; accent-color: var(--ember); width: 16px; height: 16px; flex: none; }
.check span { font-size: .85rem; color: var(--ink-50); line-height: 1.5; }

.form-aside .ticks li { font-size: .95rem; }
.form-note { font-size: .82rem; color: var(--ink-50); margin-top: 1rem; }

.form-success {
  position: absolute; inset: 0; z-index: 5;
  background: var(--bone);
  display: grid; place-items: center; text-align: center;
  padding: 2rem;
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s;
}
.form-success.is-on { opacity: 1; visibility: visible; }
.form-success .tick-circle {
  width: 62px; height: 62px; border-radius: 50%; background: rgba(0,159,163,.1);
  display: grid; place-items: center; margin: 0 auto 1.4rem;
}
.form-success svg { width: 26px; height: 26px; stroke: var(--moss); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.contact-methods { display: grid; gap: .9rem; margin-top: 1.8rem; }
.contact-method {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.15rem; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .35s var(--ease), transform .45s var(--ease-out), box-shadow .35s var(--ease);
}
.contact-method:hover { background: var(--bone); transform: translateX(4px); box-shadow: var(--shadow-sm); }
.contact-method .ico { width: 38px; height: 38px; margin: 0; border-radius: 11px; }
.contact-method .ico svg { width: 17px; height: 17px; }
.contact-method strong { display: block; font-size: .9rem; color: var(--ink); }
.contact-method span { font-size: .82rem; color: var(--ink-50); }

/* --------------------------------------------------------- 13. FOOTER */
.footer {
  background: var(--ink);
  color: rgba(255,255,255,.6);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  position: relative; overflow: hidden;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, .75fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer .brand-text { color: var(--bone); }
.footer .brand-text span { color: rgba(255,255,255,.58); }
.footer .brand-logo { height: 92px; }
.footer .brand-text span { color: var(--teal); }
.footer-blurb { margin-top: 1.4rem; max-width: 34ch; font-size: .93rem; }
.footer h3, .footer h4 {
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.58);
  margin-bottom: 1.3rem;
}
.footer-links { display: grid; gap: .75rem; }
.footer-links a {
  font-size: .93rem; color: rgba(255,255,255,.72);
  transition: color .3s var(--ease), transform .4s var(--ease-out);
  display: inline-flex; align-items: center; gap: .4rem;
}
.footer-links a:hover { color: var(--bone); transform: translateX(3px); }
.footer-links a svg { width: 11px; height: 11px; opacity: .5; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  padding: 1.6rem 0 2rem;
  border-top: 1px solid var(--line-light);
  font-size: .8rem;
}
.footer-bottom nav { display: flex; gap: 1.5rem; }
.footer-bottom a:hover { color: var(--bone); }
.footer-credit { color: rgba(255,255,255,.62); }


/* Sticky mobile CTA */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 480;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
  display: none;
  transform: translateY(120%);
  transition: transform .55s var(--ease-out);
}
.mobile-cta.is-on { transform: translateY(0); }

/* ------------------------------------------------- 14. MOTION / REVEAL */
[data-reveal] { will-change: opacity, transform; }

[data-reveal="up"] {
  opacity: 0; transform: translateY(34px);
  transition: opacity .95s var(--ease-out) var(--d, 0s), transform .95s var(--ease-out) var(--d, 0s);
}
[data-reveal="fade"] {
  opacity: 0;
  transition: opacity 1.1s var(--ease-out) var(--d, 0s);
}
[data-reveal="left"] {
  opacity: 0; transform: translateX(-32px);
  transition: opacity .95s var(--ease-out) var(--d, 0s), transform .95s var(--ease-out) var(--d, 0s);
}
[data-reveal="right"] {
  opacity: 0; transform: translateX(32px);
  transition: opacity .95s var(--ease-out) var(--d, 0s), transform .95s var(--ease-out) var(--d, 0s);
}
[data-reveal="scale"] {
  opacity: 0; transform: scale(.94);
  transition: opacity 1s var(--ease-out) var(--d, 0s), transform 1.2s var(--ease-out) var(--d, 0s);
}
[data-reveal="up"].is-in,
[data-reveal="fade"].is-in,
[data-reveal="left"].is-in,
[data-reveal="right"].is-in,
[data-reveal="scale"].is-in { opacity: 1; transform: none; }

/* Line-by-line heading reveal */
.split-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.split-line > span {
  display: block;
  transform: translateY(105%) rotate(1.4deg);
  transition: transform 1.05s var(--ease-out) var(--d, 0s);
  transform-origin: left bottom;
}
.is-in .split-line > span, .split-line.is-in > span { transform: none; }

/* Word reveal.
   The mask needs room below the baseline or it crops descenders (g, y, p).
   Padding opens the box downward, the negative margin keeps the line rhythm,
   and the slide starts far enough down to stay hidden behind it. */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .22em;
  margin-bottom: -.22em;
}
.split-word > span {
  display: inline-block; transform: translateY(125%);
  transition: transform .85s var(--ease-out) var(--d, 0s);
}
.is-in .split-word > span { transform: none; }

/* Drawn rule */
.rule-draw { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out) var(--d,0s); }
.rule-draw.is-in { transform: scaleX(1); }

/* Parallax targets get transform from JS */
[data-parallax] { will-change: transform; }

/* Cursor-follow highlight on cards (set via JS custom props) */
.spotlight { position: relative; }
.spotlight::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(245,130,32,.09), transparent 65%);
  opacity: 0; transition: opacity .45s var(--ease); pointer-events: none;
}
.spotlight:hover::after { opacity: 1; }

/* Scroll progress bar */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 510;
  background: var(--ember); width: 0%;
  transition: width .1s linear;
}

/* ------------------------------------------- 15. RESPONSIVE & A11Y */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .chain { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .chain-node:nth-child(3), .chain-node:nth-child(4) { border-top: 1px solid var(--line-light); }
  .chain-node:nth-child(2) { border-right: 1px solid var(--line-light); }
  .proof-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tl-year { display: none; }
  .tl-item { grid-template-columns: 1fr 56px 1fr; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 3.5rem); }
  .hero-copy { max-width: none; }
  .hero-visual { max-width: 560px; margin-inline: auto; width: 100%; }
  .orbit-wrap { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; }
  .journey-sticky { position: static; }
  .journey-visual { aspect-ratio: 16/10; }
  .form-wrap { grid-template-columns: 1fr; }
  .head-split { grid-template-columns: 1fr; align-items: start; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 860px) {
  :root { --header-h: 68px; }
  .nav, .header-actions .btn { display: none; }
  .burger { display: grid; }
  .feature-row { grid-template-columns: 1fr; }
  .feature-row--flip .feature-media { order: -1; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mobile-cta { display: block; }
  body { padding-bottom: 0; }
  .hero-stamp { width: 88px; height: 88px; right: -.5rem; top: -.5rem; }
  .hero-badge { left: 0; bottom: -1.2rem; }
}

@media (max-width: 760px) {
  /* Timeline collapses to a single left-anchored column */
  .tl-rail { left: 9px; transform: none; }
  .tl-item { grid-template-columns: 18px 1fr; gap: 1.15rem; min-height: 0; align-items: start; }
  .tl-item--left .tl-card,
  .tl-item--right .tl-card { grid-column: 2; text-align: left; }
  .tl-item--left .tl-card::after,
  .tl-item--right .tl-card::after { left: -6px; right: auto; top: 22px; }
  .tl-node { grid-column: 1; justify-self: start; margin-top: 16px; }
  .tl-item + .tl-item { margin-top: 1.1rem; }
}

@media (max-width: 640px) {
  /* Tighter orbit so neighbouring partners do not crowd each other */
  .orbit { max-width: 300px; }
  .orbit-node { width: 76px; }
  .orbit-dot { width: 34px; height: 34px; }
  .orbit-dot svg { width: 15px; height: 15px; }
  .orbit-label { font-size: .63rem; }
  .orbit-core span { font-size: .8rem; }
  .orbit-core small { font-size: .48rem; letter-spacing: .14em; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-grid .slot:nth-child(even) { margin-top: 0; }
  .chain { grid-template-columns: 1fr; }
  .chain-node { border-left: 1px solid var(--line-light); border-right: 1px solid var(--line-light); }
  .chain-node + .chain-node { border-top: 1px solid var(--line-light); }
  .proof-foot { flex-direction: column; align-items: flex-start; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-meta { gap: 1.2rem; }
  .hero-meta div { max-width: none; flex: 1 1 100%; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .area-band img { aspect-ratio: 4/5; }
  .cta-band { padding-inline: 1.5rem; }
}

@media (hover: none) {
  .card:hover, .story:hover, .slot:hover { transform: none; }
}

/* If scripting is off, the reveal states must never hide content. */
@media (scripting: none) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .media[data-reveal="media"] img { clip-path: none !important; transform: none !important; }
  .split-line > span, .split-word > span { transform: none !important; }
  .rule-draw { transform: none !important; }
  .chain-node::after, .impact-item i { transform: scale(1) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .orbit-field, .orbit-node, .orbit-spokes line, .orbit-core::before, .orbit-core::after { animation: none !important; }
  .orbit-node { transform: translate(-50%,-50%) !important; opacity: 1 !important; }
  .orbit-spokes line { opacity: .26 !important; }
  .split-line > span, .split-word > span { transform: none !important; }
  .media[data-reveal="media"] img { clip-path: none !important; transform: none !important; }
  .rule-draw { transform: none !important; }
}

@media print {
  .header, .footer, .mobile-cta, .grain, .progress { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   16. BRAND COMPONENTS (added with the Zoomie Paws rebrand)
   ========================================================================== */

/* ---- Dog-story categories ---- */
.story-tabs {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}
.story-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .68rem 1.15rem; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-family: var(--serif); font-weight: 700; font-size: .88rem;
  color: var(--ink-70); background: var(--white);
  transition: all .35s var(--ease);
}
.story-tab span {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  padding: .12rem .42rem; border-radius: var(--r-pill);
  background: rgba(28,28,28,.07); color: var(--ink-50);
}
.story-tab:hover { box-shadow: inset 0 0 0 1.5px var(--teal); color: var(--teal-ink); }
.story-tab.is-on {
  background: var(--teal); color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--teal);
}
.story-tab.is-on span { background: rgba(255,255,255,.24); color: var(--white); }

.story-group + .story-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.story-group[hidden] { display: none; }
.story-group-head { margin-bottom: 1.5rem; }
.story-group-head h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  display: flex; align-items: center; gap: .7rem;
}
.story-group-head h3::before {
  content: ''; width: 26px; height: 4px; border-radius: 4px;
  background: var(--orange); flex: none;
}
.story-group-head p { color: var(--ink-50); margin-top: .45rem; font-size: .95rem; }

.story-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.story-meta {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal-ink); margin-top: -.3rem;
}
.story--empty .story-body { justify-content: center; }

/* Featured story */
.story-feature {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r-lg);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
@media (max-width: 860px) { .story-feature { grid-template-columns: 1fr; } }

/* ---- Service-area counties ---- */
.counties {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.15rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.county {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1.1rem 1.2rem; border-radius: var(--r-md);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.county:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.county-pin {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(0,159,163,.12); color: var(--teal-ink);
}
.county-pin svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.county strong { display: block; font-family: var(--serif); font-weight: 800; font-size: 1rem; color: var(--ink); }
.county span { font-size: .82rem; color: var(--ink-50); line-height: 1.4; }
.county--next { background: var(--tint); box-shadow: none; border: 1.5px dashed var(--line); }
.county--next .county-pin { background: rgba(245,130,32,.14); color: var(--orange-ink); }
@media (max-width: 900px) { .counties { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .counties { grid-template-columns: 1fr; } }

/* ---- Vet collaboration note ---- */
.vet-note {
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem;
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--r-md);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  border-left: 4px solid var(--teal);
}
.vet-note .ico { margin-bottom: 0; }
.vet-note h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.vet-note p { font-size: .95rem; max-width: 68ch; }
@media (max-width: 560px) { .vet-note { grid-template-columns: 1fr; } }

/* ---- Footer social row ---- */
.footer-social {
  display: flex; gap: .6rem; flex-wrap: wrap;
  padding-bottom: 1.6rem;
}
.footer-social a {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line-light);
  color: rgba(255,255,255,.78);
  transition: all .35s var(--ease);
}
.footer-social a:hover {
  background: var(--teal); color: var(--white);
  box-shadow: inset 0 0 0 1px var(--teal); transform: translateY(-3px);
}
.footer-social svg { width: 19px; height: 19px; }

/* ---- Brand accents ---- */
.kicker { color: var(--teal-ink); }
.section--ink .kicker, .section--moss .kicker { color: var(--orange); }
.ico { background: linear-gradient(150deg, rgba(0,159,163,.14), rgba(245,130,32,.14)); color: var(--teal-ink); }
.card:hover .ico { background: var(--teal); color: var(--white); }
.media-tag i { background: var(--orange); }
.chip i { background: var(--teal); }
.impact-item i { background: var(--orange); }
.quote { border-left-color: var(--orange); }
.tl-stage { color: var(--teal-ink); }
.tl-node i { background: var(--orange); }
.step-n { background: var(--teal); }
.step.is-active .step-n { background: var(--orange); color: var(--charcoal); }
.card::before { background: var(--teal); }
.slot-quote { color: var(--teal); }
.slot-label { color: var(--orange-ink); }
.hero-badge .dot { background: rgba(0,159,163,.14); color: var(--teal-ink); }

/* ---- Framing: keep the subject in view when a photo is cropped ----------
   All of Brittnae's photos are portrait phone shots. Where one has to sit in
   a wider frame, bias the crop upward so dogs and lettering stay in view
   rather than being sliced off centre. */
.media img { object-position: center 42%; }
.media-ratio-219 img, .media-ratio-169 img { object-position: center 50%; }
.hero-media img { object-position: center 38%; }
.journey-visual img { object-position: center 40%; }
.story-media img { object-position: center 38%; }
.area-band img { object-position: center 46%; }

/* ---- Service area: a clean panel instead of text over a busy photo ------
   The bus wrap has its own large lettering, so a headline sitting on top of
   it was unreadable. Type now gets its own ground. */
.area-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--charcoal);
  color: rgba(255,255,255,.74);
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
}
.area-panel .kicker { color: var(--orange); }
.area-panel h2 { color: var(--white); margin-top: 1rem; max-width: 20ch; margin-inline: auto; }
.area-panel .lead { color: rgba(255,255,255,.74); max-width: 52ch; margin: 1.2rem auto 0; }
.area-panel .paw-trail path { stroke: var(--white); opacity: .12; }
.area-panel .counties { margin-top: clamp(2rem, 4vw, 2.75rem); }
.area-panel .county {
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px var(--line-light);
  text-align: left;
}
.area-panel .county:hover { background: rgba(255,255,255,.1); }
.area-panel .county strong { color: var(--white); }
.area-panel .county span { color: rgba(255,255,255,.62); }
.area-panel .county-pin { background: rgba(0,159,163,.22); color: var(--teal-soft); }
.area-panel .county--next { background: transparent; border-color: var(--line-light); }
.area-panel .county--next .county-pin { background: rgba(245,130,32,.2); color: var(--orange); }

/* ==========================================================================
   17. PHOTO SIZING — these are phone photos, so keep them modest
   ========================================================================== */

/* No frame should ever tower over its section. */
.media { max-height: 78vh; }
.media img { max-height: 78vh; }

/* The booking aside sat next to a form and rendered ~1150px tall. */
.form-aside .media { max-width: 340px; }

/* Portrait photos in a single-column layout get a sane ceiling. */
.feature-media .media { max-width: 560px; margin-inline: auto; }
.stack-media, .belief-pair .media { max-width: 620px; }

/* Story cards: fixed card shape, but the photo keeps its own ratio inside. */
.story-media { aspect-ratio: 3 / 4; }
.story-media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   18. LAYOUT VARIETY — only Dog Stories stays a card grid
   Boxed cards everywhere made the page monotonous, so each section now has
   its own shape: hairline lists, a numbered flow, icon rows, a directory.
   ========================================================================== */

/* ---- Why Zoomie Paws: editorial two-column list ---- */
.feature-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4.5rem);
}
.feature-item {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  align-items: start;
  padding: clamp(1.35rem, 2.4vw, 1.9rem) 0;
  border-top: 1px solid var(--line);
}
.feature-item h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.feature-item p { font-size: .95rem; }
.feature-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: rgba(0,159,163,.1); color: var(--teal-ink);
  transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease-out);
}
.feature-ico svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feature-item:hover .feature-ico { background: var(--teal); color: var(--white); transform: rotate(-6deg); }
@media (max-width: 760px) { .feature-list { grid-template-columns: 1fr; } }

/* ---- How it works: connected numbered flow ---- */
.flow {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  position: relative;
}
.flow::before {
  content: ''; position: absolute; left: 0; right: 0; top: 26px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
}
.flow-step { position: relative; padding-top: 68px; }
.flow-n {
  position: absolute; top: 0; left: 0;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); color: var(--teal-ink);
  box-shadow: inset 0 0 0 2px var(--teal);
  font-family: var(--serif); font-weight: 800; font-size: 1.05rem;
  transition: background .45s var(--ease), color .45s var(--ease), transform .5s var(--ease-out);
}
.flow-step:hover .flow-n { background: var(--orange); color: var(--charcoal); box-shadow: inset 0 0 0 2px var(--orange); transform: translateY(-3px); }
.flow-step h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.flow-step p { font-size: .93rem; }
.section--soft .flow-n { background: var(--tint); }
@media (max-width: 860px) {
  .flow { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 2rem; }
  .flow::before { display: none; }
}
@media (max-width: 520px) { .flow { grid-template-columns: 1fr; } }

/* ---- Special needs: photo beside icon rows ---- */
.split-media {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.split-media-col .media { border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.rows-icon { margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.row-icon {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  align-items: start; padding: 1.05rem 0;
  border-top: 1px solid var(--line);
}
.row-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: rgba(245,130,32,.12); color: var(--orange-ink);
}
.row-ico svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.row-icon strong { display: block; font-family: var(--serif); font-weight: 800; font-size: 1.02rem; color: var(--ink); margin-bottom: .2rem; }
.row-icon span { font-size: .93rem; color: var(--ink-70); }
@media (max-width: 860px) { .split-media { grid-template-columns: 1fr; } }

/* ---- Partnerships: numbered directory ---- */
.partner-list { border-top: 1px solid var(--line); }
.partner-row {
  display: grid;
  grid-template-columns: 46px 44px minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.25rem; align-items: center;
  padding: clamp(1.1rem, 2vw, 1.5rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .45s var(--ease-out), background .4s var(--ease);
}
.partner-row:hover { padding-left: .75rem; background: linear-gradient(90deg, rgba(0,159,163,.05), transparent 60%); }
.partner-n {
  font-family: var(--serif); font-weight: 800; font-size: .9rem;
  color: var(--ink-30); letter-spacing: .04em;
}
.partner-ico {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,159,163,.1); color: var(--teal-ink);
  transition: background .4s var(--ease), color .4s var(--ease);
}
.partner-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.partner-row:hover .partner-ico { background: var(--orange); color: var(--charcoal); }
.partner-row h3 { font-size: 1.15rem; margin: 0; }
.partner-row p { font-size: .94rem; margin: 0; }
@media (max-width: 860px) {
  .partner-row { grid-template-columns: 40px 1fr; row-gap: .5rem; align-items: start; }
  .partner-ico { display: none; }
  .partner-row h3 { grid-column: 2; }
  .partner-row p { grid-column: 2; }
}

/* ---- Social proof: quote blocks, not cards ---- */
.proof-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 clamp(2rem,5vw,4rem); }
.proof-grid .slot:nth-child(even) { margin-top: 0; }
.slot {
  background: none;
  box-shadow: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: clamp(1.5rem, 2.6vw, 2rem) 0;
}
.slot::before { display: none; }
.slot:hover { transform: none; box-shadow: none; }
.slot-quote { position: static; display: block; font-size: 3rem; line-height: .6; margin-bottom: .9rem; opacity: .3; }
.slot:hover .slot-quote { transform: none; opacity: .45; }

/* ---- Counties: a plain row, not four boxes ---- */
.counties { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; }
.county {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-left: 1px solid var(--line-light) !important;
  border-radius: 0;
  padding: 1rem clamp(.85rem, 1.6vw, 1.4rem);
}
.county:hover { transform: none; }
.county:first-child { border-left: 0 !important; }
@media (max-width: 900px) {
  .counties { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 1rem; }
  .county:nth-child(odd) { border-left: 0 !important; }
}
@media (max-width: 560px) {
  .counties { grid-template-columns: 1fr; }
  .county { border-left: 0 !important; border-top: 1px solid var(--line-light) !important; }
  .county:first-child { border-top: 0 !important; }
}

/* ---- Roadmap: plain text on the rail, no card fill ---- */
.tl-card {
  background: none;
  box-shadow: none;
  padding: clamp(.9rem, 1.6vw, 1.35rem) clamp(1rem, 2vw, 1.6rem);
}
.tl-card::after { display: none; }
.tl-card:hover { transform: none; box-shadow: none; }
.tl-item--left .tl-card { border-right: 2px solid var(--line); }
.tl-item--right .tl-card { border-left: 2px solid var(--line); }
.tl-item--left:hover .tl-card { border-right-color: var(--orange); }
.tl-item--right:hover .tl-card { border-left-color: var(--orange); }
@media (max-width: 760px) {
  .tl-item--left .tl-card { border-right: 0; }
  .tl-item--left .tl-card, .tl-item--right .tl-card { border-left: 2px solid var(--line); }
}
.section--deep .tl-card, .section--soft .tl-card { background: none; }
.section--deep .tl-card::after, .section--soft .tl-card::after { display: none; }

/* ==========================================================================
   19. "EVERY DOG" SECTION — scroll-driven emphasis
   Rows light up as they cross the reading line, with a rail filling beside
   them. Enough motion to feel alive, not enough to distract from the copy.
   ========================================================================== */
.rows-icon { position: relative; padding-left: 0; }
.rows-rail {
  position: absolute; left: 17px; top: 12px; bottom: 12px; width: 2px;
  background: var(--line); border-radius: 2px; z-index: 0;
}
.rows-rail i {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(var(--teal), var(--orange));
  border-radius: 2px;
  transition: height .5s var(--ease-out);
}

.row-icon {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line);
  transition: transform .5s var(--ease-out), border-color .4s var(--ease);
}
.row-icon::before {
  content: ''; position: absolute; inset: -1px -1rem -1px -1rem;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, rgba(0,159,163,.07), transparent 70%);
  opacity: 0; transition: opacity .45s var(--ease);
  z-index: -1;
}
.row-icon:hover::before, .row-icon.is-lit::before { opacity: 1; }
.row-icon:hover { transform: translateX(5px); }

.row-ico {
  position: relative;
  transition: background .45s var(--ease), color .45s var(--ease),
              transform .55s var(--ease-out), box-shadow .45s var(--ease);
}
.row-icon.is-lit .row-ico {
  background: var(--teal); color: var(--white);
  transform: scale(1.08) rotate(-6deg);
  box-shadow: 0 0 0 5px rgba(0,159,163,.14);
}
.row-icon.is-lit strong { color: var(--teal-ink); }
.row-icon strong { transition: color .4s var(--ease); }
.row-icon:hover .row-ico { transform: scale(1.12) rotate(-8deg); }

/* Floating badge over the photo */
.split-media-col { position: relative; }
.float-badge {
  position: absolute; right: -1.25rem; bottom: 2rem; z-index: 3;
  display: flex; gap: .75rem; align-items: flex-start;
  max-width: 15.5rem; padding: .95rem 1.1rem;
  background: var(--white); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: badge-float 6s var(--ease-soft) infinite;
}
.float-badge-ico {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(245,130,32,.15); color: var(--orange-ink);
}
.float-badge-ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.float-badge strong { display: block; font-family: var(--serif); font-weight: 800; font-size: .88rem; color: var(--ink); }
.float-badge span span, .float-badge > span > span { font-size: .78rem; color: var(--ink-50); line-height: 1.45; }
@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@media (max-width: 860px) {
  .float-badge { right: 0; bottom: -1rem; max-width: 13rem; }
}
@media (max-width: 520px) {
  .float-badge { position: static; max-width: none; margin-top: 1rem; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .float-badge { animation: none; }
  .row-icon.is-lit .row-ico { transform: none; }
}


/* ==========================================================================
   21. FOOTER — motto, real contact details, and some warmth
   ========================================================================== */
.footer { position: relative; isolation: isolate; overflow: hidden; }
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--orange), var(--teal));
  background-size: 200% 100%;
  animation: footer-sheen 14s linear infinite;
}
@keyframes footer-sheen { to { background-position: 200% 0; } }
.footer-glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 620px; height: 620px; border-radius: 50%;
  left: 50%; top: -320px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0,159,163,.22), transparent 68%);
  filter: blur(50px);
}
.footer .paw-trail path { stroke: var(--white); opacity: .07; }

/* motto row */
.footer-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-light);
}
.footer-hero .kicker { color: var(--orange); }
.footer-motto {
  color: var(--white);
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.05; margin-top: .75rem; max-width: 16ch;
}

/* contact strip */
.footer-reach-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 2vw, 1.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line-light);
}
.footer-reach {
  display: flex; gap: .85rem; align-items: center;
  padding: .85rem 1rem; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line-light);
  transition: background .35s var(--ease), transform .45s var(--ease-out), box-shadow .35s var(--ease);
}
.footer-reach:not(.footer-reach--static):hover {
  background: rgba(255,255,255,.06);
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(0,159,163,.5);
}
.footer-reach-ico {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(0,159,163,.18); color: var(--teal-soft);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.footer-reach-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.footer-reach:not(.footer-reach--static):hover .footer-reach-ico { background: var(--orange); color: var(--charcoal); }
.footer-reach small {
  display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: .15rem;
}
.footer-reach strong {
  display: block; font-family: var(--serif); font-weight: 800; font-size: .96rem;
  color: var(--white); line-height: 1.25;
}

.footer-top { padding-top: clamp(2rem, 4vw, 3rem); }

/* bottom bar */
.footer-bottom { position: relative; }
.to-top {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line-light);
  color: rgba(255,255,255,.75);
  transition: all .4s var(--ease);
}
.to-top:hover { background: var(--orange); color: var(--charcoal); transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--orange); }
.to-top svg { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .footer-reach-row { grid-template-columns: 1fr; }
  .footer-hero { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .footer::before { animation: none; } }

/* ==========================================================================
   22. COMMUNITY IMPACT — three-up grid with a rule that draws itself
   Distinct from the numbered flow: no circles, no connecting rail. Each cell
   is a plain block, so nothing can overlap or wrap oddly.
   ========================================================================== */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3rem) clamp(1.75rem, 3.5vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  align-items: start;
}

.impact-cell {
  position: relative;
  display: block;              /* never a grid — title and copy always stack */
  padding-top: 1.5rem;
  transition: transform .5s var(--ease-out);
}

/* hairline across the top that fills left-to-right when reached */
.impact-rule {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.impact-rule::after {
  content: ''; position: absolute; inset: 0;
  width: 0; background: var(--teal); border-radius: 2px;
  transition: width .8s var(--ease-out);
}
.impact-cell.is-lit .impact-rule::after { width: 100%; }

.impact-index {
  display: block;
  font-family: var(--serif); font-weight: 800;
  font-size: .78rem; letter-spacing: .12em;
  color: var(--ink-30);
  margin-bottom: .55rem;
  transition: color .45s var(--ease);
}
.impact-cell.is-lit .impact-index { color: var(--orange-ink); }

.impact-cell h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  margin-bottom: .5rem;
  max-width: 18ch;              /* keeps headings to two tidy lines */
}
.impact-cell p {
  font-size: .95rem;
  max-width: 34ch;              /* stops the ragged narrow wrapping */
  color: var(--ink-70);
}

.impact-cell:hover { transform: translateY(-4px); }
.impact-cell:hover .impact-rule::after { width: 100%; }

@media (max-width: 900px) { .impact-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) {
  .impact-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .impact-cell p, .impact-cell h3 { max-width: none; }
}

/* Orange ribbon uses the true brand orange with charcoal type (6.6:1),
   not the darkened text-only variant. */
.ribbon--ember { background: var(--orange); }
.ribbon--ember .ribbon-item { color: var(--charcoal); }
.ribbon--ember .ribbon-item svg { fill: var(--charcoal); }

/* The journey panel cross-fades portrait phone photos (3:4), so the frame
   matches them exactly — no slicing. */
.journey-visual { aspect-ratio: 3 / 4; }
@media (max-width: 980px) { .journey-visual { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   23. SERVICE-AREA PANEL — light treatment
   It used to sit directly above the dark closing CTA, so two charcoal cards
   stacked back to back. The closing CTA keeps the dark moment; this panel
   goes light with a teal frame instead.
   ========================================================================== */
.area-panel {
  background: var(--tint);
  color: var(--ink-70);
  box-shadow: inset 0 0 0 1px var(--line);
  border-top: 3px solid var(--teal);
}
.area-panel .kicker { color: var(--teal-ink); }
.area-panel h2 { color: var(--ink); }
.area-panel .lead { color: var(--ink-70); }
.area-panel .paw-trail path { stroke: var(--ink); opacity: .12; }
.area-panel .glow { opacity: .35; }

.area-panel .county {
  background: transparent !important;
  box-shadow: none !important;
  border-left: 1px solid var(--line) !important;
}
.area-panel .county:first-child { border-left: 0 !important; }
.area-panel .county strong { color: var(--ink); }
.area-panel .county span { color: var(--ink-50); }
.area-panel .county-pin { background: rgba(0,159,163,.12); color: var(--teal-ink); }
.area-panel .county--next { border-color: var(--line) !important; }
.area-panel .county--next .county-pin { background: rgba(245,130,32,.14); color: var(--orange-ink); }

@media (max-width: 900px) {
  .area-panel .county:nth-child(odd) { border-left: 0 !important; }
}
@media (max-width: 560px) {
  .area-panel .county { border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  .area-panel .county:first-child { border-top: 0 !important; }
}

/* ==========================================================================
   24. CALLOUT PANEL
   Replaces the one solid-teal band, which appeared nowhere else on the site
   and put grey body text on teal (poor contrast). Same light language as the
   service-area panel, so the page reads consistently.
   ========================================================================== */
.callout {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--line);
  border-top: 3px solid var(--teal);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
.callout::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 460px; height: 460px; border-radius: 50%;
  right: -120px; top: -220px;
  background: radial-gradient(circle, rgba(0,159,163,.16), transparent 68%);
  filter: blur(40px);
}
.callout .kicker { color: var(--teal-ink); }
.callout h2 { color: var(--ink); }
.callout .lead { color: var(--ink-70); max-width: 56ch; margin-inline: auto; }

/* ==========================================================================
   25. DOG STORIES — one grid, filtered by the tabs
   Previously each category rendered its own section, so four categories with
   one story each produced four tall rows holding a single card. Now every
   story sits in one grid and the tabs hide cards inside it.
   ========================================================================== */
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: start;
}
.story-grid .story[hidden] { display: none; }

/* a card should never stretch to full width if it ends up alone */
.story { max-width: 420px; width: 100%; }
.story-media { max-height: 60vh; }

@media (max-width: 980px) { .story-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) {
  .story-grid { grid-template-columns: 1fr; justify-items: center; }
}

/* ==========================================================================
   CLIENT REVISION MODULES
   --------------------------------------------------------------------------
   Everything below was added for the revision round. It reuses the existing
   tokens, radii, shadows and easing — no new colours, no new fonts.
     A. Notices                E. Featured success story (case study)
     B. Extra form controls    F. Follow / social band
     C. Places we trust        G. Real testimonials & stats
     D. Drawer social
   ========================================================================== */

/* ---------------------------------------------------------- A. NOTICES */
.notice {
  display: flex; gap: .85rem; align-items: flex-start;
  margin-top: 1.6rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  font-size: var(--fs-small);
  color: var(--ink-70);
  line-height: 1.6;
}
.notice svg {
  width: 20px; height: 20px; flex: none; margin-top: .15rem;
  color: var(--teal-ink);
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.notice strong { color: var(--ink); }
.notice--sm { margin-top: 1.4rem; font-size: .82rem; padding: .85rem 1rem; }

/* The mission band and other charcoal sections need the light variant. */
.section--ink .notice { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--line-light); color: rgba(255,255,255,.78); }
.section--ink .notice strong { color: var(--white); }
.section--ink .notice svg { color: var(--sky); }

/* -------------------------------------------- B. EXTRA FORM CONTROLS */
.fieldset-reset { border: 0; padding: 0; margin: 0; min-width: 0; }
.field-legend {
  font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-50);
  padding: 0; margin-bottom: .5rem;
}
/* Multi-select chips — same language as the energy control, but square
   checkboxes underneath so several can be picked. */
.seg--multi label { font-weight: 500; }
.seg--multi input:checked + label {
  background: var(--teal); color: var(--white);
  box-shadow: inset 0 0 0 1px var(--teal);
}

/* ------------------------------------------------- C. PLACES WE TRUST */
.places-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
.places-cat {
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line);
  background: var(--white);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.places-cat:hover { box-shadow: inset 0 0 0 1px var(--ink-30), var(--shadow-sm); transform: translateY(-3px); }
.places-ico {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tint); color: var(--teal-ink);
  margin-bottom: 1rem;
}
.places-ico svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.places-cat h3 { font-size: var(--fs-h4); }
.places-blurb { font-size: var(--fs-small); color: var(--ink-50); margin-top: .5rem; line-height: 1.6; }

.places-list { margin-top: 1.2rem; display: grid; gap: 1.1rem; }
.place { padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }
.place:first-child { padding-top: 0; border-top: 0; }
.place h4 { font-size: 1.02rem; }
.place p { font-size: var(--fs-small); color: var(--ink-70); margin-top: .35rem; line-height: 1.6; }
.place-service {
  display: inline-block; margin-top: .4rem;
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-ink);
}
.place-meta { margin-top: .7rem; display: grid; gap: .4rem; }
.place-row {
  display: flex; gap: .5rem; align-items: center;
  font-size: var(--fs-small); color: var(--ink-50);
  transition: color .3s var(--ease);
}
a.place-row:hover { color: var(--ember); }
.place-row svg {
  width: 16px; height: 16px; flex: none; color: var(--ink-30);
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Brand marks are solid shapes, not outlines — keep their own fill. */
.place-row svg[fill="currentColor"] { fill: currentColor; stroke: none; }
a.place-row:hover svg { color: var(--ember); }

@media (max-width: 980px) { .places-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .places-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------- D. DRAWER SOCIAL */
.drawer-social { display: flex; gap: .6rem; flex-wrap: wrap; }
.drawer-social a {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-50);
  transition: all .35s var(--ease);
}
.drawer-social a:hover { background: var(--teal); color: var(--white); box-shadow: inset 0 0 0 1px var(--teal); }
.drawer-social svg { width: 20px; height: 20px; }

/* ------------------------------------- E. FEATURED SUCCESS STORY (case) */
.case-head { max-width: 62ch; }
.case-head .lead { margin-top: 1.2rem; }
.case-chapters {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.case-chapter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.case-chapter:first-child { padding-top: 0; border-top: 0; }
.case-step {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--tint-deep);
  font-variant-numeric: tabular-nums;
}
.case-chapter-body h3 { font-size: var(--fs-h3); }
.case-chapter-body > p { margin-top: .7rem; max-width: 68ch; }

.case-clips {
  margin-top: 1.2rem;
  display: grid;
  /* Sized for portrait phone footage. Clips sit in a fixed-width column
     rather than stretching, so a low-resolution source is never blown up
     past what it can carry — and a higher-resolution one simply renders
     sharper in the same slot. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 300px));
  gap: 1rem;
  align-items: start;
}
.case-clip { margin: 0; }
/* No forced aspect ratio — the clips are a mix of portrait and landscape,
   and cropping to a fixed frame cuts the dog out of half of them. */
.case-clip video {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md);
  background: var(--charcoal);
}
.case-clip figcaption { font-size: var(--fs-small); color: var(--ink-50); margin-top: .5rem; }

/* Empty state — a labelled slot, never a fake video */
.case-clips--empty {
  display: block;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  border-radius: var(--r-md);
  border: 1px dashed var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(28,28,28,.022) 0 10px, transparent 10px 20px);
}
.case-clips--empty .slot-hint { margin-top: .4rem; }
.case-disclaimer {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  font-size: var(--fs-small);
  color: var(--ink-50);
  max-width: 74ch;
  line-height: 1.65;
}

@media (max-width: 620px) {
  .case-chapter { grid-template-columns: 1fr; gap: .6rem; }
  .case-step { font-size: 1.4rem; }
}

/* ------------------------------------------------- F. FOLLOW / SOCIAL */
.follow-band {
  background: var(--charcoal);
  color: var(--white);
  padding: clamp(1.8rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.follow-band h2 { color: var(--white); }
.follow-band .kicker { color: var(--ochre); }
.follow-band .lead { color: rgba(255,255,255,.76); max-width: 46ch; }
.follow-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.follow-link {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.1rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line-light);
  color: rgba(255,255,255,.86);
  font-size: var(--fs-small); font-weight: 600;
  transition: all .35s var(--ease);
}
.follow-link:hover { background: var(--teal); color: var(--white); box-shadow: inset 0 0 0 1px var(--teal); transform: translateY(-2px); }
.follow-ico { display: grid; place-items: center; }
.follow-ico svg { width: 18px; height: 18px; }
.follow-ext { width: 13px; height: 13px; opacity: .55; }

@media (max-width: 860px) {
  .follow-band { grid-template-columns: 1fr; }
}

/* --------------------------------- G. REAL TESTIMONIALS & STAT ROW */
.slot--real blockquote { margin: 1rem 0 0; }
.slot--real blockquote p {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.slot--real .slot-hint strong { color: var(--ink); font-weight: 700; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.stat strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--teal-ink);
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block; margin-top: .5rem;
  font-size: var(--fs-small); color: var(--ink-50);
  letter-spacing: .04em;
}

/* Keeps a semantic h3 looking like the h4 it replaced, so the "before your
   first session" cards sit correctly in the heading order without changing
   how they look. */
.as-h4 { font-size: var(--fs-h4); }

/* ==========================================================================
   H. STORY VIEWER
   --------------------------------------------------------------------------
   Category -> stories -> the individual story. A story card with video opens
   this dialog, which holds the dog's name, the blurb and every clip that
   story carries. One dialog is reused by every card.
   ========================================================================== */

/* The play overlay is a real button now, so it can open the viewer. */
button.play {
  border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
button.play:focus-visible { outline: 3px solid var(--ember); outline-offset: -3px; border-radius: inherit; }

/* Badge showing how many clips a story has. */
.play-count {
  position: absolute; top: .75rem; right: .75rem;
  min-width: 26px; height: 26px; padding: 0 .45rem;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--charcoal); color: var(--white);
  font-size: .74rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.viewer {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.viewer.is-open { opacity: 1; visibility: visible; }
.viewer-backdrop {
  position: absolute; inset: 0;
  background: rgba(28, 28, 28, .72);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.viewer-panel {
  position: relative;
  width: min(100%, 720px);
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-md);
  transform: translateY(14px) scale(.985);
  transition: transform .45s var(--ease-out);
}
.viewer.is-open .viewer-panel { transform: none; }
.viewer-close {
  position: absolute; top: .9rem; right: .9rem;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: var(--tint); color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.viewer-close:hover { background: var(--ink); color: var(--white); }
.viewer-close svg { width: 18px; height: 18px; }
.viewer-body h2 { font-size: var(--fs-h2); margin-top: .4rem; }
.viewer-body .story-meta { margin-top: .35rem; }
.viewer-body .lead { margin-top: 1rem; }

.viewer-clips {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 300px));
  gap: 1rem;
  align-items: start;
}
.viewer-clip { margin: 0; }
.viewer-clip video {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md);
  background: var(--charcoal);
}

.viewer-clip figcaption { font-size: var(--fs-small); color: var(--ink-50); margin-top: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .viewer, .viewer-panel { transition: none; }
}

/* ==========================================================================
   I. PRICING
   --------------------------------------------------------------------------
   The three session lengths, the multi-dog packages, and what every session
   includes. Same cards, radii and accents as the rest of the site — the
   price sheet's own layout, translated into the site's language.
   ========================================================================== */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: stretch;
}
.price-card {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.price-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--ink-30), var(--shadow-sm); }
.price-card h3 {
  font-size: var(--fs-h4);
  letter-spacing: .01em;
}
.price-amount {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 800; line-height: 1;
  color: var(--teal-ink);
  margin-top: .5rem;
  font-variant-numeric: tabular-nums;
}
.price-points { margin-top: 1.2rem; }
.price-points li { font-size: .95rem; }
.price-tag {
  margin-top: auto; padding-top: 1.4rem;
  font-family: var(--serif);
  font-size: .88rem; font-weight: 700;
  font-style: italic;
  letter-spacing: .01em;
  color: var(--ember);
}
/* The middle tier is the one most dogs take. */
.price-card--featured {
  background: var(--charcoal);
  box-shadow: inset 0 0 0 1px var(--charcoal);
}
.price-card--featured h3 { color: var(--white); }
.price-card--featured .price-amount { color: var(--ochre); }
.price-card--featured .ticks li { color: rgba(255,255,255,.82); }
/* Redefine the whole background, not just the colour — the tick itself
   lives in this background image, and a flat colour would erase it. */
.price-card--featured .ticks li::before {
  background: rgba(245,130,32,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F58220' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.price-card--featured .price-tag { color: var(--sky); }

/* ---- multi-dog packages ---- */
.pack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: center;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border-radius: var(--r-lg);
  background: var(--tint);
}
.pack-lead h3 { font-size: var(--fs-h4); }
.pack-lead p { font-size: var(--fs-small); color: var(--ink-50); margin-top: .4rem; }
.pack-card {
  background: var(--white);
  border-radius: var(--r-md);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pack-card h4 { font-size: 1rem; }
.pack-price {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.4vw, 2.3rem);
  font-weight: 800; line-height: 1;
  color: var(--ember);
  margin-top: .45rem;
  font-variant-numeric: tabular-nums;
}
.pack-price span {
  display: inline-block; margin-left: .5rem;
  font-family: var(--sans);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-50);
  vertical-align: middle;
}
.pack-note { font-size: var(--fs-small); color: var(--ink-50); margin-top: .55rem; line-height: 1.55; }

/* ---- what every session includes ---- */
.price-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.price-feature { display: grid; gap: .35rem; justify-items: start; }
.price-feature-ico {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,159,163,.1); color: var(--teal-ink);
  margin-bottom: .35rem;
}
.price-feature-ico svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.price-feature strong { font-size: .96rem; }
.price-feature > span { font-size: var(--fs-small); color: var(--ink-50); line-height: 1.55; }

@media (max-width: 980px) {
  .price-grid { grid-template-columns: 1fr; }
  .pack { grid-template-columns: 1fr; }
  .price-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .price-features { grid-template-columns: 1fr; }
}

/* ==========================================================================
   J. CLIPS FROM THE BUS
   --------------------------------------------------------------------------
   A reel of real footage. Columns are sized for portrait phone video and
   fixed rather than fluid, so a low-resolution source is never stretched
   past what it can carry — a sharper file simply renders sharper.
   ========================================================================== */
.reel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 300px));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: start;
  justify-content: center;
}
.reel-item {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.reel-item:hover { box-shadow: inset 0 0 0 1px var(--ink-30), var(--shadow-sm); transform: translateY(-3px); }
.reel-item video {
  width: 100%; height: auto; display: block;
  background: var(--charcoal);
}
.reel-body { padding: .95rem 1.1rem 1.15rem; }
.reel-dog { font-size: 1.05rem; margin: 0; }
.reel-cap {
  font-family: var(--serif);
  font-size: .92rem; font-weight: 600; font-style: italic;
  color: var(--ember);
  line-height: 1.45;
}
.reel-dog + .reel-cap { margin-top: .35rem; }

@media (max-width: 620px) {
  /* One column, but still capped — a full-bleed column on a phone would
     stretch portrait footage far past its real resolution. */
  .reel { grid-template-columns: minmax(0, 320px); }
}

/* ==========================================================================
   VIDEO FRAMES  —  the reusable film component
   --------------------------------------------------------------------------
   One shape for every video on the site, whether the real file is in yet or
   not. The waiting state is the same box, the same ratio and the same
   rounded corners as the finished one, so dropping the client's .mp4 in
   later changes what is inside the frame and nothing about the layout
   around it. No stock footage, no fake file, no layout shift.
   ========================================================================== */
.vframe { margin: 0; }
.vframe-box {
  position: relative;
  aspect-ratio: var(--vratio, 16 / 9);
  width: 100%;
  max-width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--charcoal);
  box-shadow: inset 0 0 0 1px var(--line);
}
.vframe-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  /* contain, never cover: cropping somebody's footage to fit a box is not a
     decision to make on their behalf. Every clip Brittnae has sent so far is
     portrait 360x640, so a 16:9 frame set to `cover` would slice the top and
     bottom off it. With `contain` a mismatched frame costs a letterbox bar
     and nothing else — and the frame can be matched exactly by setting
     `ratio` on the video in content.js. */
  object-fit: contain;
  background: var(--charcoal);
}

/* Phone-shot footage. Without a cap, a 9:16 film on a 1040px lead frame
   would be over 1800px tall. */
.vframe--portrait { max-width: min(100%, 400px); margin-inline: auto; }
.vframe--lead.vframe--portrait { max-width: min(100%, 440px); }
.vframe--chapter.vframe--portrait { max-width: min(100%, 320px); }
/* Side-by-side films: auto margins would otherwise shrink each one to the
   width of an unloaded video (near zero). */
.grid > .vframe { width: 100%; }
.vframe-cap {
  margin-top: .75rem;
  font-size: var(--fs-small);
  color: var(--ink-50);
  line-height: 1.55;
}

/* The lead film on a page gets a little more presence — but capped, so a
   16:9 frame on a 1440px screen does not end up taller than the fold. */
.vframe--lead { max-width: 1040px; margin-inline: auto; }
.vframe--lead .vframe-box { border-radius: var(--r-xl); }

/* Inside a story chapter the film sits at card scale, not hero scale. */
.vframe--chapter { margin-top: 1.1rem; max-width: 520px; }
.vframe--chapter .vframe-box { border-radius: var(--r-md); }

/* ---- Waiting on the client ---------------------------------------------- */
.vframe--waiting .vframe-box {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0,159,163,.12), transparent 62%),
    var(--tint);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.vframe-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .55rem;
  text-align: center;
  padding: clamp(1.25rem, 4vw, 2.5rem);
}
.vframe-ph::before {
  /* A dashed inset rule reads as "reserved", not as "broken". */
  content: '';
  position: absolute; inset: clamp(.7rem, 1.6vw, 1.1rem);
  border: 1.5px dashed var(--line);
  border-radius: calc(var(--r-lg) - 8px);
  pointer-events: none;
}
.vframe-ph-ico {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
  margin-bottom: .2rem;
}
.vframe-ph-ico svg { width: 20px; height: 20px; fill: var(--teal-ink); }
.vframe-ph-title {
  font-family: var(--serif);
  font-size: var(--fs-h4);
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
  max-width: 24ch;
}
.vframe-ph-note {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--orange-ink);
  margin: 0;
}
.vframe-ph-hint {
  max-width: 52ch;
  margin: .15rem 0 0;
}
.vframe-ph-file {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-micro);
  color: var(--ink-30);
  background: var(--white);
  border-radius: 999px;
  padding: .3rem .7rem;
  box-shadow: inset 0 0 0 1px var(--line-soft);
  margin-top: .3rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Small screens: the hint and the filename are handover detail, not reading
   material — the label and the promise are what matter at this size. */
@media (max-width: 560px) {
  .vframe-ph { gap: .4rem; }
  .vframe-ph-ico { width: 42px; height: 42px; }
  .vframe-ph-ico svg { width: 16px; height: 16px; }
  .vframe-ph-hint { display: none; }
  .vframe-ph-file { font-size: .66rem; padding: .25rem .55rem; }
}

/* Very short frames cannot hold the full stack without crowding. */
@media (max-height: 420px) {
  .vframe-ph-hint { display: none; }
}

/* ---- Tina's case study: the full film sits above the chapters ----------- */
.case-film { margin: clamp(1.8rem, 4vw, 2.8rem) 0 clamp(2rem, 4vw, 3rem); }
.case-film-note { margin-top: 1.4rem; max-width: 70ch; }
.case-film { margin-top: 0; }

/* Text beside a portrait film: words left, film right; stacked below 861px */
.film-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.film-row-media .vframe--portrait { margin-inline: auto; }
@media (max-width: 860px) {
  .film-row { grid-template-columns: 1fr; }
}

/* ---- The shelter ask ---------------------------------------------------- */
.shelter-ask {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.shelter-ask .statement { max-width: 32ch; }

/* ---- Pricing: a label above each block so the page scans in one pass ---- */
.price-band {
  font-family: var(--serif);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-30);
  margin: clamp(2.2rem, 4.5vw, 3.2rem) 0 1.1rem;
}
.price-band:first-child { margin-top: clamp(2rem, 4vw, 2.8rem); }

/* ---- A quieter arrow link, for use inside FAQ answers ------------------- */
.arrow-link--sm { font-size: var(--fs-small); }
.arrow-link--sm svg { width: 13px; height: 13px; }