/* ═══════════════════════════════════════════
   Permission to Ugly Cry — site design system
   Editorial quiet: warm-white base, deep contrast moments,
   oversized Cormorant headlines. Cream is an accent, not a wallpaper.
   ═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

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

:root {
  /* Bright & rustic retro pass — vintage 90s primaries on sunny paper.
     Poise-magazine energy: fun, safe, inviting. Ink is true black-neutral
     (warm charcoal reads brown). Var names kept so every page retunes. */
  --ivory: #FFFAEF;
  --white: #FFFFFF;
  --cream: #FCEFD3;
  --line: #EBDFC6;
  --line-soft: #F5ECD8;
  --charcoal: #1B1B1B;
  --charcoal-soft: #4D4A45;
  --charcoal-mute: #807C75;
  --terracotta: #E84B2C;         /* Tomato Cherry — warm action */
  --terracotta-deep: #C13518;
  --terracotta-tint: #E84B2C15;
  --sage: #2F7D46;               /* Kelly Forest — grounded, life */
  --sage-deep: #225F34;
  --sage-tint: #2F7D4618;
  --sage-bg: #D8F0D8;
  --mustard: #FFC72C;            /* Sunshine — sun, joy */
  --mustard-deep: #8F6B00;
  --mustard-bg: #FFE8A0;
  --teal: #15A5C4;               /* Pool Teal — water, calm */
  --teal-deep: #0D7A92;
  --teal-bg: #C5ECF6;
  --navy: #2D4FC8;               /* Cobalt — primary blue pop */
  --navy-deep: #1F3AA0;
  --navy-bg: #DCE4FB;
  --pink: #F1568C;               /* Bubblegum — the 13-going-on-30 moment */
  --pink-bg: #FFD9E8;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --container: 1180px;
  --measure: 720px;
  --measure-narrow: 580px;
}

html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--charcoal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
  font-variation-settings: 'SOFT' 50;
  font-variant-ligatures: no-common-ligatures;
}
main.page {
  display: block;
  opacity: 0;
  animation: pageFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
body.page-leaving main.page {
  animation: pageFadeOut 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pageFadeOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  main.page { opacity: 1; animation: none; }
  body.page-leaving main.page { animation: none; }
}

/* View Transitions: persistent nav across document navigation (Chromium) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pageFadeOut 0.28s cubic-bezier(0.4, 0, 0.2, 1) both; }
::view-transition-new(root) { animation: pageFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; }
.top-band { view-transition-name: site-top-band; }
.gradient-line { view-transition-name: site-gradient-line; }
.site-nav { view-transition-name: site-nav; }
.site-foot { view-transition-name: site-foot; }

/* Keep persistent chrome STATIC during the transition — no cross-fade flicker.
   Both snapshots stay fully visible so the nav, gradient line, top band and
   footer appear untouched as the body content swaps underneath. */
::view-transition-old(site-nav),
::view-transition-new(site-nav),
::view-transition-old(site-top-band),
::view-transition-new(site-top-band),
::view-transition-old(site-gradient-line),
::view-transition-new(site-gradient-line),
::view-transition-old(site-foot),
::view-transition-new(site-foot) {
  animation: none;
  opacity: 1;
  mix-blend-mode: normal;
}

/* When view transitions are supported, the root fade IS the page fade.
   Disable our manual main.page animation so the body content doesn't double-fade. */
@supports (view-transition-name: a) {
  main.page { opacity: 1; animation: none; }
  body.page-leaving main.page { animation: none; }
}

/* Grain pulled way down. Tactile, not textural. */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999; opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.0; letter-spacing: -0.015em; color: var(--charcoal); }
h1, h2, h3, h4, .section-head p, .reassure p, .pull p, .prose .lead, .prose blockquote, .faq summary, .hero p.lede, .cta-band p, .cta-band h2 {
  text-wrap: balance;
}
em { font-style: normal; }
a { color: var(--navy-deep); }

::selection { background: var(--terracotta); color: var(--ivory); }

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
  display: inline-block; direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 24;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
/* Eyebrows styled as an old-school embossed label-maker tape (Dymo): mono
   typewriter face, punched uppercase letters, raised tape with inner highlight
   + shadow. Icons dropped — a punch label is just text. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--navy-deep); color: #F3ECDD;
  border: 0;
  padding: 6px 13px 5px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 4px rgba(0, 0, 0, 0.30), 0 2px 5px rgba(31, 27, 23, 0.20);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.eyebrow .material-symbols-outlined { display: none; }
/* Modifier classes become tape colors instead of text colors */
.eyebrow.navy { background: var(--navy-deep); color: #F3ECDD; }
.eyebrow.terracotta { background: var(--terracotta); color: #FFF4EC; }
.eyebrow.teal { background: var(--teal); color: #EEFAF7; }
.eyebrow.forest { background: var(--sage); color: #F3F7EE; }

/* ─── Top band + Nav ─── */
.top-band { height: 30px; background: var(--charcoal); width: 100%; }
.gradient-line {
  height: 2px; width: 100%; display: block;
  background: linear-gradient(90deg,
    #FFD23F 0%,
    #FFC72C 8%,
    #FF8A3D 16%,
    #E84B2C 24%,
    #F1568C 32%,
    #FF9FC2 40%,
    #B45CC4 48%,
    #2D4FC8 56%,
    #15A5C4 64%,
    #38C172 72%,
    #2F7D46 82%,
    #FFC72C 92%,
    #FFD23F 100%);
  background-size: 200% 100%;
  background-position: 0% 0;
  animation: gradientFlow 14s linear infinite;
}
@keyframes gradientFlow {
  from { background-position: 0% 0; }
  to   { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-line { animation: none; }
}
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252, 251, 248, 0.92);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: none;
}
.site-nav::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M 0,3 Q 50,0 100,3 T 200,3 T 300,3 T 400,3' stroke='%23DDD6CA' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 400px 6px;
  pointer-events: none;
}
.site-nav .container { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 32px; }
.brand {
  display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 1; min-width: 0;
}
.brand { position: relative; isolation: isolate; }
.brand .logo {
  display: block;
  background: linear-gradient(90deg, var(--sage) 0%, var(--teal) 55%, var(--mustard) 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* Animated teardrop overlays on the logo — three drops landing on paper, drifting */
.brand-drops {
  position: absolute; inset: 0; pointer-events: none; z-index: -1;
}
.foot-brand { position: relative; isolation: isolate; }
.foot-brand .brand-drops { width: 240px; height: 60px; }
.drop {
  position: absolute;
  background-image: url(teardrop.png);
  background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  transform: scale(0);
  transform-origin: center;
  opacity: 0;
}
.drop-1 { width: 38px; height: 38px; left: 6%;  top: -2%;  animation: dropLife 12s ease-in-out infinite;       }
.drop-2 { width: 22px; height: 22px; left: 24%; top: 45%;  animation: dropLife 13.5s ease-in-out infinite 3s;   }
.drop-3 { width: 30px; height: 30px; left: 40%; top: 0%;   animation: dropLife 15s ease-in-out infinite 6.5s;   }

.foot-brand .drop-1 { width: 48px; height: 48px; left: 6%;  top: 0;   }
.foot-brand .drop-2 { width: 26px; height: 26px; left: 32%; top: 35%; }
.foot-brand .drop-3 { width: 36px; height: 36px; left: 56%; top: -4%; }

@keyframes dropLife {
  0%   { transform: scale(0);    opacity: 0; }
  6%   { transform: scale(1.12); opacity: 0.06; }
  12%  { transform: scale(1);    opacity: 0.05; }
  30%  { transform: scale(1);    opacity: 0.05; }
  75%  { transform: scale(1.05); opacity: 0; }
  100% { transform: scale(1.05); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .drop { animation: none; transform: scale(1); opacity: 0.04; }
}
.brand .logo-full {
  -webkit-mask-image: url(logo-full.svg);
  mask-image: url(logo-full.svg);
  width: 340px; height: 42px;
}
.brand .logo-script {
  -webkit-mask-image: url(logo-script.svg);
  mask-image: url(logo-script.svg);
  width: 168px; height: 40px;
  display: none;
}
.nav-links { display: flex; align-items: center; gap: 32px; flex-shrink: 0; }

/* Hamburger toggle (mobile only) */
.nav-toggle {
  display: none;
  background: transparent; border: none; padding: 6px;
  cursor: pointer; color: var(--charcoal);
  z-index: 110;
}
.nav-toggle .material-symbols-outlined { font-size: 30px; display: block; transition: color 0.2s; }
.nav-toggle:hover .material-symbols-outlined { color: var(--navy-deep); }
body.nav-open { overflow: hidden; }
.nav-links a:not(.btn) {
  position: relative;
  font-size: 0.92rem;
  color: var(--charcoal);
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 999px;
  opacity: 0.85;
  isolation: isolate;
  transition: color 0.32s ease, opacity 0.32s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
  white-space: nowrap;
}
.nav-links a:not(.btn) .nav-highlight {
  position: absolute; inset: -10px -14px;
  background-color: var(--sage);
  -webkit-mask-image: url(nav/highlights/1.svg);
  mask-image: url(nav/highlights/1.svg);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  opacity: 0.72;
  clip-path: polygon(0% 0%, 0% 0%, 0% 33%, 0% 33%, 0% 33%, 0% 33%);
  z-index: -1;
  pointer-events: none;
}
.nav-links a:not(.btn):hover { transform: translateY(-1px); }
.nav-links a:not(.btn).active .nav-highlight {
  clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 100% 66%, 100% 100%, 0% 100%);
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a:not(.btn):hover .nav-highlight {
    clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 100% 66%, 100% 100%, 0% 100%);
    transition: none;
  }
}

/* Inline word marker — reusable highlight motif for key words in copy */
.mark {
  position: relative; display: inline-block;
  isolation: isolate; white-space: nowrap;
}
.mark .mark-bg {
  position: absolute;
  top: -0.06em; bottom: -0.06em; left: -0.24em; right: -0.24em;
  background-color: var(--mustard);
  -webkit-mask-image: url(nav/highlights/3.svg);
  mask-image: url(nav/highlights/3.svg);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  opacity: 0.62;
  z-index: -1;
  pointer-events: none;
  clip-path: polygon(0% 0%, 0% 0%, 0% 33%, 0% 33%, 0% 33%, 0% 33%);
}
.mark.mark--sage .mark-bg { background-color: #8FA887; -webkit-mask-image: url(nav/highlights/1.svg); mask-image: url(nav/highlights/1.svg); }
.mark.mark--teal .mark-bg { background-color: var(--teal); -webkit-mask-image: url(nav/highlights/2.svg); mask-image: url(nav/highlights/2.svg); }
.mark.mark--mustard .mark-bg { background-color: var(--mustard); -webkit-mask-image: url(nav/highlights/3.svg); mask-image: url(nav/highlights/3.svg); }
.mark.mark--terracotta .mark-bg { background-color: var(--terracotta); -webkit-mask-image: url(nav/highlights/4.svg); mask-image: url(nav/highlights/4.svg); opacity: 0.7; }
/* The textured scribble mask distorts on big hero phrases (stray flecks,
   blobby shape, a detached bit on multi-word/long marks). For hero headings
   use a clean hand-swiped highlighter bar instead — kept organic with a slight
   tilt and an uneven radius, but with none of the mask artifacts. */
.hero h1 .mark .mark-bg {
  -webkit-mask-image: none; mask-image: none;
  left: -0.12em; right: -0.14em; top: 0.04em; bottom: 0.06em;
  border-radius: 0.5em 0.62em 0.46em 0.56em;
  transform: rotate(-0.5deg);
}

/* ─── Resources hub: Substack post cards + Listen/Watch placeholders ─── */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px; }
.hub-loading { color: var(--charcoal-soft); opacity: 0.7; }

.post-card { border: 1px solid rgba(31, 27, 23, 0.10); border-radius: 6px; background: var(--ivory); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.post-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(31, 27, 23, 0.08); }
.post-card-link { display: flex; flex-direction: column; height: 100%; padding: 26px 26px 22px; text-decoration: none; color: var(--charcoal); }
.post-date { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terracotta); font-weight: 600; margin-bottom: 10px; }
.post-title { font-size: 1.32rem; line-height: 1.18; margin: 0 0 10px; }
.post-excerpt { font-size: 0.98rem; line-height: 1.55; color: var(--charcoal-soft); margin: 0 0 18px; }
.post-more { margin-top: auto; font-weight: 600; font-size: 0.92rem; color: var(--navy-deep); display: inline-flex; align-items: center; gap: 4px; }
.post-more .material-symbols-outlined { font-size: 18px; }

.media-card { border-radius: 6px; overflow: hidden; background: var(--ivory); border: 1px solid rgba(31, 27, 23, 0.10); }
.media-ph { aspect-ratio: 16 / 9; background: var(--sage); color: rgba(252, 251, 248, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.media-ph--audio { background: var(--teal); }
.media-ph .material-symbols-outlined { font-size: 40px; opacity: 0.95; }
.media-ph .cap { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }
.media-card-body { padding: 20px 22px 22px; }
.media-card-body .resource-byline { margin: 0 0 8px; }
.media-card-body .resource-note { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .mark .mark-bg { clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 100% 66%, 100% 100%, 0% 100%); }
}

/* Article share row */
.article-share {
  max-width: var(--measure); margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.share-eyebrow {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--charcoal-soft); margin-bottom: 18px;
}
.share-row { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 20px; border-radius: 999px;
  border: 1.5px solid var(--line); background: transparent;
  color: var(--charcoal); cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
  transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1), border-color 0.25s ease, color 0.25s ease;
}
.share-btn:hover { transform: translateY(-3px); border-color: var(--teal); color: var(--teal-deep); }
.share-btn .material-symbols-outlined { font-size: 18px; }

/* Accessibility-only label */
.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;
}

/* Handwritten SVG nav labels */
.nav-label {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
  opacity: 0;
  animation: navLabelIn 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.nav-label--about    { height: 34px; aspect-ratio: 906 / 351;  -webkit-mask-image: url(nav/about.svg);            mask-image: url(nav/about.svg); }
.nav-label--services { height: 34px; aspect-ratio: 1750 / 373; -webkit-mask-image: url(nav/how-it-works.svg);     mask-image: url(nav/how-it-works.svg); }
.nav-label--writing  { height: 34px; aspect-ratio: 1195 / 399; -webkit-mask-image: url(nav/writings.svg);         mask-image: url(nav/writings.svg); }
.nav-label--book     { height: 44px; aspect-ratio: 1176 / 581; -webkit-mask-image: url(nav/book-a-free-call.svg); mask-image: url(nav/book-a-free-call.svg); }

/* Skip the staggered intro animation on return navigation within the site */
body.returning .nav-label { opacity: 1; animation: none; }

.nav-links a:nth-child(1) .nav-label { animation-delay: 0.15s; }
.nav-links a:nth-child(2) .nav-label { animation-delay: 0.25s; }
.nav-links a:nth-child(3) .nav-label { animation-delay: 0.35s; }
.nav-links a:nth-child(4) .nav-label { animation-delay: 0.45s; }
.nav-links a:hover .nav-label { transform: scale(1.04); }
.nav-links a:active .nav-label { transform: scale(1.06); }
.nav-links a.nav-clicked .nav-label { transform: scale(1.06); transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1); }
.nav-links a:not(.btn).active .nav-label { transform: scale(1.02); }

@keyframes navLabelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-label { opacity: 1; animation: none; transition: none; }
  .nav-links a:hover .nav-label { transform: none; }
}

/* Per-link highlight color + brush shape.
   Selectors cover both `.html` (local dev) and Netlify pretty-URL forms. */
.nav-links a[href$="about.html"] .nav-highlight,
.nav-links a[href$="/about"] .nav-highlight {
  background-color: #8FA887;
  -webkit-mask-image: url(nav/highlights/1.svg);
  mask-image: url(nav/highlights/1.svg);
}
.nav-links a[href$="services.html"] .nav-highlight,
.nav-links a[href$="/services"] .nav-highlight {
  background-color: var(--teal);
  -webkit-mask-image: url(nav/highlights/2.svg);
  mask-image: url(nav/highlights/2.svg);
}
.nav-links a[href*="blog"] .nav-highlight,
.nav-links a[href$="what-is-neuroplastic-pain.html"] .nav-highlight,
.nav-links a[href$="what-is-neuroplastic-pain"] .nav-highlight {
  background-color: var(--mustard);
  -webkit-mask-image: url(nav/highlights/3.svg);
  mask-image: url(nav/highlights/3.svg);
}

/* Book button in nav — highlight instead of solid pill */
.site-nav .nav-links a.btn-primary {
  background: transparent;
  color: var(--charcoal);
  position: relative;
  padding: 8px 18px;
  border-radius: 999px;
  isolation: isolate;
  box-shadow: none;
}
.site-nav .nav-links a.btn-primary::before {
  content: '';
  position: absolute; inset: -10px -14px;
  background-color: var(--terracotta);
  -webkit-mask-image: url(nav/highlights/4.svg);
  mask-image: url(nav/highlights/4.svg);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  opacity: 0.85;
  transform: scale(1) rotate(0deg);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.45, 0.64, 1);
  z-index: -1;
  pointer-events: none;
}
.site-nav .nav-links a.btn-primary:hover::before { opacity: 1; transform: scale(1.04) rotate(0.8deg); }
.site-nav .nav-links a.btn-primary:hover { box-shadow: none; transform: translateY(-1px); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-size: 0.93rem; font-weight: 500;
  padding: 14px 26px; border-radius: 999px; text-decoration: none;
  cursor: pointer; border: 1px solid transparent; transition: all 0.18s;
  white-space: nowrap;
}
.btn .material-symbols-outlined { font-size: 18px; }
.btn-primary { background: var(--terracotta); color: var(--ivory); }
.btn-primary:hover { background: var(--terracotta-deep); transform: translateY(-1px); }
.btn-accent { background: var(--terracotta); color: var(--white); }
.btn-accent:hover { background: var(--terracotta-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn-ghost:hover { background: var(--charcoal); color: var(--ivory); }
.btn-sm { padding: 10px 18px; font-size: 0.84rem; }
.section.dark .btn-ghost { color: var(--ivory); border-color: var(--ivory); }
.section.dark .btn-ghost:hover { background: var(--ivory); color: var(--charcoal); }

/* ─── Sections ─── */
.section { padding: 128px 0; }
.section.tight { padding: 80px 0; }
.section.cream { background: var(--cream); }
.section.sage { background: var(--sage-bg); }
.section.mustard { background: var(--mustard-bg); }
.section.paper {
  position: relative;
  background-color: var(--ivory);
  isolation: isolate;
}
.section.paper::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url(paper-texture.jpg);
  background-size: 900px auto;
  background-repeat: repeat;
  opacity: 0.09;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}
.section.dark { background: var(--charcoal); color: var(--ivory); }
.section.navy { background: var(--navy); color: var(--ivory); }
.section.marigold { background: var(--mustard); color: var(--charcoal); padding: 88px 0; position: relative; }
.section.sky { background: var(--teal-bg); color: var(--charcoal); }
.section.pine { background: var(--sage); color: var(--ivory); }
.section.pine h1, .section.pine h2, .section.pine h3, .section.pine h4 { color: var(--ivory); }
.section.pine .section-head p { color: rgba(252, 251, 248, 0.82); }
.section.pine .step-card { border-top-color: rgba(252, 251, 248, 0.45); }
.section.pine .step-card p { color: rgba(252, 251, 248, 0.82); }
.section.pine .step-num { color: var(--mustard); }
.section.pine .btn-ghost { color: var(--ivory); border-color: var(--ivory); }
.section.pine .btn-ghost:hover { background: var(--ivory); color: var(--sage); }
.section.pine .btn-primary { background: var(--mustard); color: var(--charcoal); }
.section.pine .btn-primary:hover { background: #FFC54A; }
.section.river { background: var(--teal); color: var(--ivory); }
.section.river h1, .section.river h2, .section.river h3, .section.river h4 { color: var(--ivory); }
.section.river .section-head p { color: rgba(252, 251, 248, 0.88); }
.section.river .pull p { color: var(--ivory); }
.section.river .pull cite { color: rgba(252, 251, 248, 0.7); }
.section.river .btn-primary { background: var(--mustard); color: var(--charcoal); }

/* Hero illustrated scene replaces the dark atmos block */
.hero-scene {
  min-height: 480px;
  background: url(illust-hero-scene.svg) center / cover no-repeat;
  border-radius: 4px;
  position: relative; overflow: hidden;
}
.section.marigold h1, .section.marigold h2, .section.marigold h3, .section.marigold h4 { color: var(--charcoal); }
.section.marigold .section-head p { color: var(--charcoal); opacity: 0.78; }
.section.marigold .eyebrow { background: var(--navy); color: var(--ivory); }
/* pill icons inherit currentColor — no override needed */
.section.marigold .step-card { border-top-color: var(--charcoal); }
.section.marigold .step-card p { color: var(--charcoal); opacity: 0.78; }
.section.marigold .step-num { color: var(--navy-deep); }
.section.marigold p { color: var(--charcoal); }
.section.marigold .price-card { background: var(--ivory); border-color: rgba(31, 27, 23, 0.12); }
.section.marigold .fineprint { color: var(--charcoal); opacity: 0.7; }
.section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4,
.section.navy h1, .section.navy h2, .section.navy h3, .section.navy h4 { color: var(--ivory); }
/* On dark sections, flip the tape to a light cream label so it still reads */
.section.dark .eyebrow, .section.navy .eyebrow,
.section.pine .eyebrow, .section.river .eyebrow {
  background: #F3ECDD; color: var(--navy-deep);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.section.marigold .eyebrow { background: var(--navy-deep); color: #F3ECDD; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); }
.section.sky .eyebrow { color: var(--terracotta); background: transparent; }

/* Body paragraphs inside dark-tinted sections need light text */
.section.dark .split .body p, .section.navy .split .body p,
.section.pine .split .body p, .section.river .split .body p { color: rgba(252, 251, 248, 0.85); }
.section.dark .split .body h2, .section.navy .split .body h2,
.section.pine .split .body h2, .section.river .split .body h2 { color: var(--ivory); }
.section.navy .section-head p { color: rgba(252, 251, 248, 0.72); }
.section.navy .pull p { color: var(--ivory); }
.section.navy .pull cite { color: rgba(252, 251, 248, 0.6); }

/* .eyebrow.navy + .eyebrow.terracotta defined above as pill variants */

.section-head { max-width: var(--measure); margin-bottom: 56px; }
.section-head h2 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 500; margin: 16px 0 18px; }
.section-head p { font-size: 1.1rem; color: var(--charcoal-soft); max-width: 56ch; line-height: 1.6; }
.section.dark .section-head p { color: rgba(252, 251, 248, 0.72); }

/* ─── Hero ─── */
.hero { padding: 120px 0 116px; position: relative; overflow: hidden; }
.hero .container { position: relative; z-index: 1; }
body.book .hero { padding: 100px 0 40px; }
body.book .section.tight { padding-top: 32px; }

/* Per-page hero watermark — carries the nav handwriting down into the page */
body.about .hero::before,
body.services .hero::before,
body.writing .hero::before,
body.book .hero::before {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  opacity: 0.07;
}
body.about .hero::before {
  background-color: var(--sage);
  -webkit-mask-image: url(nav/about.svg); mask-image: url(nav/about.svg);
  bottom: -8%; right: -8%;
  width: 80%; aspect-ratio: 906 / 351;
  -webkit-mask-position: right center; mask-position: right center;
}
body.services .hero::before {
  background-color: var(--teal);
  -webkit-mask-image: url(nav/how-it-works.svg); mask-image: url(nav/how-it-works.svg);
  bottom: -10%; left: -5%;
  width: 110%; aspect-ratio: 1750 / 373;
  -webkit-mask-position: left center; mask-position: left center;
}
body.writing .hero::before {
  background-color: var(--mustard);
  -webkit-mask-image: url(nav/writings.svg); mask-image: url(nav/writings.svg);
  bottom: -6%; right: -10%;
  width: 90%; aspect-ratio: 1195 / 399;
  -webkit-mask-position: right center; mask-position: right center;
}
body.book .hero::before {
  background-color: var(--terracotta);
  -webkit-mask-image: url(nav/book-a-free-call.svg); mask-image: url(nav/book-a-free-call.svg);
  bottom: -5%; right: -5%;
  width: 55%; aspect-ratio: 1176 / 581;
  -webkit-mask-position: right center; mask-position: right center;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: start; }
.hero h1 { font-size: clamp(3rem, 8.2vw, 6.4rem); font-weight: 600; line-height: 1.0; margin: 22px 0 0; letter-spacing: -0.025em; }
.hero .sub { font-family: var(--font-display); font-style: normal; font-size: clamp(1.5rem, 3.2vw, 2.2rem); color: var(--teal-deep); margin: 16px 0 36px; font-weight: 400; line-height: 1.25; }
.hero p.lede { font-size: 1.12rem; color: var(--charcoal-soft); max-width: 50ch; margin-bottom: 36px; line-height: 1.65; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ─── Photo placeholders (Carson-quality, charcoal-toned) ─── */
.photo-ph {
  background: var(--charcoal);
  color: rgba(252, 251, 248, 0.45);
  border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 36px; min-height: 480px;
  position: relative; overflow: hidden;
}
.photo-ph::after {
  content: ''; position: absolute; inset: 14px;
  border: 1px solid rgba(252, 251, 248, 0.08);
  border-radius: 2px; pointer-events: none;
}
.photo-ph .material-symbols-outlined { font-size: 36px; opacity: 0.5; }
.photo-ph span.cap { display: block; margin-top: 14px; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(252, 251, 248, 0.55); max-width: 24ch; }
.photo-ph.wide { min-height: 360px; }
.photo-ph.round { border-radius: 50%; aspect-ratio: 1; min-height: 0; padding: 28px; }
.photo-ph.round::after { border-radius: 50%; }

/* Atmospheric placeholders (gradients + painterly noise, no people) */
.photo-ph.atmos { color: transparent; padding: 0; position: relative; }
.photo-ph.atmos::after { display: none; }
.photo-ph.atmos > * { display: none; }
.photo-ph.atmos::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.22;
  mix-blend-mode: overlay;
  border-radius: inherit;
}
.photo-ph.atmos.round::before { border-radius: 50%; }

.photo-ph.atmos.dawn {
  background:
    radial-gradient(ellipse at 70% 88%, rgba(184, 92, 56, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 22%, rgba(252, 232, 205, 0.32) 0%, transparent 60%),
    linear-gradient(165deg, #3F2820 0%, #1A1108 100%);
}
.photo-ph.atmos.mist {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(168, 181, 160, 0.42) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 72%, rgba(218, 218, 210, 0.20) 0%, transparent 55%),
    linear-gradient(180deg, #3D4A40 0%, #1F2722 100%);
}
.photo-ph.atmos.shadow {
  background:
    radial-gradient(circle at 85% 25%, rgba(184, 92, 56, 0.34) 0%, transparent 45%),
    radial-gradient(circle at 18% 80%, rgba(0, 0, 0, 0.55) 0%, transparent 55%),
    linear-gradient(180deg, #1F1B17 0%, #0B0907 100%);
}
.photo-ph.atmos.sage {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(168, 181, 160, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(124, 139, 115, 0.35) 0%, transparent 55%),
    linear-gradient(170deg, #2F3A30 0%, #18201A 100%);
}

/* ─── Reassure (now a dark editorial moment) ─── */
.reassure { text-align: center; }
.reassure p { font-family: var(--font-display); font-size: clamp(2.2rem, 5.5vw, 3.8rem); font-weight: 400; line-height: 1.08; max-width: 22ch; margin: 0 auto; font-style: normal; letter-spacing: -0.02em; }
.reassure p em { color: var(--mustard); font-style: normal; }

/* ─── Steps ─── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step-card { background: transparent; border-top: 1px solid var(--charcoal); padding: 28px 0 0; }
.step-num { font-family: var(--font-body); font-size: 0.72rem; color: var(--navy-deep); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.step-card h3 { font-size: 1.85rem; font-weight: 500; margin: 14px 0 14px; line-height: 1.05; }
.step-card p { font-size: 1rem; color: var(--charcoal-soft); line-height: 1.6; }
.section.dark .step-card { border-top-color: var(--ivory); }
.section.dark .step-card p { color: rgba(252, 251, 248, 0.7); }

/* ─── Conditions ─── */
.conditions { display: flex; flex-wrap: wrap; gap: 8px 6px; max-width: 880px; }
.conditions span {
  font-family: var(--font-display); font-size: 1.5rem; font-style: normal; font-weight: 400;
  color: var(--charcoal); padding: 0 14px 0 0;
  position: relative;
}
.conditions span:not(:last-child)::after { content: '·'; position: absolute; right: 0; color: var(--teal); opacity: 0.85; }

/* ─── Split (image + text) ─── */
.split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: center; }
.split.rev { grid-template-columns: 1.2fr 0.8fr; }
.split .body p { color: var(--charcoal-soft); margin-bottom: 18px; max-width: 56ch; font-size: 1.05rem; line-height: 1.65; }
.split .body h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin: 14px 0 22px; font-weight: 500; }
.split .body .eyebrow { margin-bottom: 12px; }

/* ─── Pull quote ─── */
.pull { max-width: var(--measure); margin: 0 auto; padding-left: 0; }
.pull p { font-family: var(--font-display); font-style: normal; font-size: clamp(2rem, 4.8vw, 3.4rem); line-height: 1.12; color: var(--charcoal); letter-spacing: -0.015em; font-weight: 400; }
.pull cite { display: block; margin-top: 26px; font-family: var(--font-body); font-style: normal; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--charcoal-mute); }
.section.dark .pull p { color: var(--ivory); }
.section.dark .pull cite { color: rgba(252, 251, 248, 0.6); }

/* ─── Pricing ─── */
.price-card { max-width: 580px; background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 56px 48px; }
.price-card .amt { font-family: var(--font-display); font-size: 5rem; font-weight: 500; color: var(--charcoal); line-height: 1; letter-spacing: -0.03em; }
.price-card .amt small { font-family: var(--font-body); font-size: 0.95rem; font-weight: 400; color: var(--charcoal-mute); letter-spacing: 0; display: block; margin-top: 12px; }
.price-list { list-style: none; margin: 36px 0 28px; display: grid; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.price-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; color: var(--charcoal); line-height: 1.4; }
.price-list .material-symbols-outlined { color: var(--terracotta); font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.fineprint { font-size: 0.88rem; color: var(--charcoal-mute); margin-top: 10px; line-height: 1.55; }

/* ─── FAQ ─── */
.faq { max-width: var(--measure); }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 0; font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; color: var(--charcoal); display: flex; justify-content: space-between; align-items: center; gap: 16px; line-height: 1.12; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .material-symbols-outlined { color: var(--teal); transition: transform 0.25s; flex-shrink: 0; font-size: 22px; }
.faq details[open] summary .material-symbols-outlined { transform: rotate(45deg); }
.faq details p { padding: 0 0 26px; color: var(--charcoal-soft); max-width: 60ch; font-size: 1.02rem; line-height: 1.65; }

/* ─── Booking embed placeholder ─── */
.embed-ph { background: var(--charcoal); color: var(--ivory); border-radius: 4px; padding: 72px 40px; text-align: center; max-width: 760px; margin: 0 auto; }
.embed-ph .material-symbols-outlined { font-size: 44px; opacity: 0.6; }
.embed-ph h3 { font-size: 2rem; margin: 18px 0 8px; color: var(--ivory); }
.embed-ph p { color: rgba(252, 251, 248, 0.65); font-size: 0.95rem; max-width: 46ch; margin: 0 auto 22px; line-height: 1.55; }
.embed-ph code { font-family: ui-monospace, 'SF Mono', monospace; font-size: 0.78rem; background: rgba(252, 251, 248, 0.08); padding: 3px 8px; border-radius: 4px; color: rgba(252, 251, 248, 0.85); }
.embed-ph .btn-accent { margin: 4px 0 14px; }

/* ─── CTA band ─── */
.cta-band { background: var(--sage); color: var(--ivory); border-radius: 4px; padding: 80px 48px; text-align: center; }
.cta-band h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 500; max-width: 20ch; margin: 0 auto 18px; color: var(--ivory); letter-spacing: -0.02em; }
.cta-band p { color: rgba(252, 251, 248, 0.82); max-width: 46ch; margin: 0 auto 36px; font-size: 1.05rem; }
.cta-band .btn-primary, .section.dark .btn-primary, .section.navy .btn-primary { background: var(--terracotta); color: var(--white); border-color: transparent; }
.cta-band .btn-primary:hover, .section.dark .btn-primary:hover, .section.navy .btn-primary:hover { background: var(--terracotta-deep); }

/* ─── Disclaimer note ─── */
.note-box { max-width: 720px; margin: 0 auto; background: transparent; border: none; padding: 0; text-align: center; }
.note-box h4 { margin-left: auto; margin-right: auto; }
.section.paper { padding: 96px 0; }
.note-box h4 {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: transparent; color: var(--teal);
  border: 1.5px solid currentColor;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.note-box.navy h4 { color: var(--navy); }
.note-box p { font-size: 1rem; color: var(--charcoal-soft); line-height: 1.65; }

/* ─── Footer ─── */
.site-foot { background: var(--sage); color: var(--ivory); padding: 80px 0 44px; margin-top: 0; }
.foot-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
.foot-brand { max-width: 360px; }
.foot-brand .foot-logo {
  display: block; width: 240px; height: 60px;
  background: linear-gradient(90deg, #FFD968 0%, var(--teal-bg) 55%, var(--mustard) 100%);
  -webkit-mask: url(logo-script.svg) no-repeat left center / contain;
  mask: url(logo-script.svg) no-repeat left center / contain;
}
.foot-brand p { font-family: var(--font-body); font-size: 0.92rem; color: rgba(252, 251, 248, 0.75); margin-top: 18px; max-width: 32ch; font-weight: 400; line-height: 1.55; }
.foot-links { display: flex; gap: 56px; }
.foot-col h5 { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mustard); margin-bottom: 16px; font-weight: 600; }
.foot-col a { display: block; font-size: 0.93rem; color: var(--ivory); text-decoration: none; margin-bottom: 10px; opacity: 0.78; transition: opacity 0.15s, color 0.15s; }
.foot-col a:hover { color: var(--mustard); opacity: 1; }
.foot-legal { margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(252, 251, 248, 0.15); font-size: 0.78rem; color: rgba(252, 251, 248, 0.6); max-width: 86ch; line-height: 1.65; }

/* ─── Article (blog) ─── */
.article { max-width: var(--measure); margin: 0 auto; padding: 88px 32px 28px; }
.article .kicker { margin-bottom: 22px; }
.article h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.025em; }
.article .meta { display: flex; gap: 16px; align-items: center; margin: 28px 0 8px; font-size: 0.84rem; color: var(--charcoal-mute); }
.prose { max-width: var(--measure); margin: 0 auto; padding: 24px 32px 56px; }
.prose p { font-size: 1.14rem; line-height: 1.78; color: var(--charcoal); margin-bottom: 24px; }
.prose h2 { font-size: clamp(1.85rem, 3.8vw, 2.6rem); font-weight: 500; margin: 56px 0 18px; letter-spacing: -0.015em; }
.prose h3 { font-size: 1.5rem; font-weight: 500; margin: 36px 0 12px; }
.prose ul { margin: 0 0 24px 22px; }
.prose li { font-size: 1.1rem; line-height: 1.72; color: var(--charcoal); margin-bottom: 10px; }
.prose .lead { font-size: 1.4rem; line-height: 1.5; color: var(--charcoal); font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.prose blockquote { border-left: 2px solid var(--terracotta); padding-left: 28px; margin: 36px 0; font-family: var(--font-display); font-style: normal; font-size: 1.7rem; line-height: 1.36; color: var(--charcoal); letter-spacing: -0.015em; }
.author-box { max-width: var(--measure); margin: 24px auto 0; padding: 36px; border: 1px solid var(--line); border-radius: 4px; display: flex; gap: 24px; align-items: center; background: var(--mustard-bg); }

/* Blog article card */
.blog-frame { padding: 80px 0 32px; }
.blog-article {
  max-width: 880px; margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 80px 80px 64px;
  box-shadow: 0 2px 32px rgba(31, 27, 23, 0.04);
}
.blog-article .section-head {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
  max-width: none;
}
.blog-article h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  margin-top: 16px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 500;
}
.blog-article .meta {
  display: flex; gap: 14px; align-items: center;
  margin-top: 22px;
  font-size: 0.9rem;
  color: var(--charcoal-soft);
}
.blog-article .prose { max-width: none; padding: 0; margin: 0; }
.blog-article .prose p { font-size: 1.06rem; line-height: 1.75; }
.blog-article .prose h2 { margin-top: 48px; }
.blog-article .author-box {
  margin: 56px 0 0;
  max-width: none;
  border-radius: 6px;
}
@media (max-width: 720px) {
  .blog-frame { padding: 48px 0 24px; }
  .blog-article { padding: 44px 24px 36px; border-radius: 4px; box-shadow: none; }
  .blog-article .section-head { margin-bottom: 36px; padding-bottom: 22px; }
  .blog-article .author-box { padding: 24px; flex-direction: column; align-items: flex-start; text-align: left; }
}
.author-box .photo-ph.round { width: 92px; min-height: 92px; flex-shrink: 0; padding: 0; }
.author-box .photo-ph.round .material-symbols-outlined { font-size: 26px; }
.author-box h4 { font-size: 1.4rem; font-weight: 500; }
.author-box p { font-size: 0.96rem; color: var(--charcoal-soft); margin-top: 8px; line-height: 1.55; }

/* ─── Squircle radius + interactive micro-motion ─── */
.cta-band, .embed-ph, .price-card, .blog-article, .hero-scene { border-radius: 24px; }
.photo-ph, .author-box { border-radius: 20px; }
.note-box { border-radius: 18px; }
/* step-card uses a flat top hairline, no radius (radius creates a floating curved cap) */

.btn { transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.28s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(31, 27, 23, 0.12); }

.step-card { transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1), border-top-color 0.3s; padding-top: 28px; border-top-width: 1px; }
.step-card:hover { transform: translateY(-4px); }
.section.pine .step-card:hover { border-top-color: var(--mustard); }

.price-card { transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.45s ease; }
.price-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(31, 27, 23, 0.10); }

.faq summary { transition: color 0.22s ease; }
.faq summary:hover { color: var(--teal); }

.eyebrow { transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1), background 0.22s ease; }
a:hover .eyebrow { transform: scale(1.04); }

.conditions span { transition: color 0.22s ease; }
.conditions span:hover { color: var(--teal-deep); }

.author-box { transition: transform 0.4s ease, box-shadow 0.4s ease; }
.author-box:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(31, 27, 23, 0.08); }

@media (prefers-reduced-motion: reduce) {
  .btn, .step-card, .price-card, .eyebrow, .author-box { transition: none; }
  .btn:hover, .step-card:hover, .price-card:hover, .author-box:hover, a:hover .eyebrow { transform: none; box-shadow: none; }
}

/* ─── Reveal on scroll ─── */
.reveal { opacity: 0; transition: opacity 0.7s ease; will-change: opacity; }
.reveal.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── Responsive ─── */
@media (max-width: 960px) {
  .hero-grid, .split, .split.rev { grid-template-columns: 1fr; gap: 44px; }
  .hero-grid .photo-ph { order: -1; min-height: 320px; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .section { padding: 88px 0; }
  .hero { padding: 72px 0 80px; }
}

@media (max-width: 720px) {
  .site-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ivory); }
  .site-nav .container { height: 72px; gap: 16px; }
  .brand .logo-full { display: none; }
  .brand .logo-script { display: block; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--ivory);
    flex-direction: column; justify-content: center; align-items: center;
    gap: 36px; padding: 96px 32px 60px;
    z-index: 105;
    opacity: 0; visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; }
  .nav-links a:not(.btn) {
    font-family: var(--font-display);
    font-size: 2.2rem; font-weight: 500;
    color: var(--charcoal); opacity: 1;
    letter-spacing: -0.015em;
    line-height: 1.1;
    padding: 4px 0;
    background: none;
  }
  .nav-links a:not(.btn)::before { display: none; }
  .nav-links a:not(.btn):hover, .nav-links a:not(.btn).active {
    color: var(--teal-deep);
    transform: none;
  }
  .nav-label--about    { height: 56px; }
  .nav-label--services { height: 56px; }
  .nav-label--writing  { height: 56px; }
  .nav-label--book     { height: 60px; }
  .nav-links a.btn {
    margin-top: 12px; font-size: 0.95rem; padding: 16px 28px;
  }
}
@media (max-width: 540px) {
  .container { padding: 0 22px; }
  .foot-links { gap: 32px; }
  .cta-band { padding: 60px 28px; }
  .price-card { padding: 38px 28px; }
  .embed-ph { padding: 48px 24px; }
  .conditions span { font-size: 1.25rem; }
}

/* ──────────────────────────────────────────────
   Edit mode (only active when ?edit=1)
   Lets Rob click any text block and edit in place,
   then "Send to Josh" delivers edits via Netlify form.
   ────────────────────────────────────────────── */
body.edit-mode {
  padding-bottom: 110px;
}
body.edit-mode .editable {
  outline: 2px dashed transparent;
  outline-offset: 4px;
  border-radius: 2px;
  transition: outline-color 0.12s ease, background 0.12s ease;
  cursor: text;
}
body.edit-mode .editable:hover {
  outline-color: rgba(31, 149, 176, 0.45);
}
body.edit-mode .editable:focus {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}
body.edit-mode .editable.edited {
  background: linear-gradient(transparent 70%, rgba(143, 168, 135, 0.5) 70%, rgba(143, 168, 135, 0.5) 94%, transparent 94%);
}
/* Don't let the scroll-reveal animations hide elements Rob is trying to edit */
body.edit-mode .reveal, body.edit-mode .reveal.show { opacity: 1 !important; transform: none !important; }

#edit-toolbar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--charcoal);
  color: var(--ivory);
  border-radius: 14px;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(0, 0, 0, 0.18);
  font-family: 'DM Sans', system-ui, sans-serif;
  max-width: calc(100vw - 32px);
  min-width: 380px;
}
.edit-toolbar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 14px;
  flex-wrap: wrap;
}
.edit-mode-tag {
  background: var(--mustard);
  color: var(--charcoal);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.12em;
}
.edit-count {
  color: rgba(252, 251, 248, 0.75);
  font-size: 0.85rem;
  flex: 1;
}
.edit-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
#edit-toolbar button {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  border-radius: 100px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
#edit-toolbar button.primary {
  background: var(--terracotta);
  color: var(--ivory);
}
#edit-toolbar button.primary:hover { background: var(--terracotta-deep); }
#edit-toolbar button.primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--terracotta);
}
#edit-toolbar button.ghost {
  background: transparent;
  color: rgba(252, 251, 248, 0.7);
  padding: 9px 12px;
}
#edit-toolbar button.ghost:hover {
  background: rgba(252, 251, 248, 0.08);
  color: var(--ivory);
}
.edit-toolbar-msg {
  font-size: 0.85rem;
  padding: 0 14px 10px;
  color: rgba(252, 251, 248, 0.85);
}
.edit-toolbar-msg:empty { display: none; }
.edit-toolbar-msg.ok      { color: #A8D89F; }
.edit-toolbar-msg.err     { color: #FFB088; }
.edit-toolbar-msg.sending { color: var(--mustard); }

@media (max-width: 540px) {
  #edit-toolbar { min-width: 0; left: 12px; right: 12px; bottom: 12px; transform: none; }
  .edit-toolbar-inner { gap: 8px; padding: 10px; }
  .edit-count { flex-basis: 100%; order: 3; }
}

/* ──────────────────────────────────────────────
   Intake form (/intake)
   Native HTML form posting to Netlify Forms.
   ────────────────────────────────────────────── */
.intake-narrow { max-width: 760px; margin: 0 auto; }
.hero-tight { padding-bottom: 24px; }

/* Top-of-hero "offline alt" row */
.intake-alt-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 26px; flex-wrap: wrap;
  font-family: var(--font-body); font-size: 0.92rem;
  color: var(--charcoal-soft);
}
.intake-alt-label { opacity: 0.8; }
.intake-alt-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 100px;
  background: rgba(255,255,255,0.5); border: 1px solid rgba(42,39,35,0.12);
  color: var(--charcoal); text-decoration: none; transition: background 0.15s, transform 0.15s;
}
.intake-alt-link:hover { background: rgba(255,255,255,0.85); transform: translateY(-1px); }
.intake-alt-link .material-symbols-outlined { font-size: 18px; color: var(--terracotta-deep); }

/* Coaching Agreement block */
.agreement h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.2rem; color: var(--charcoal);
  margin: 26px 0 6px;
}
.agreement p { margin: 0 0 12px; color: var(--charcoal-soft); font-size: 1rem; line-height: 1.65; max-width: 64ch; }
.agreement ul { margin: 6px 0 16px; padding-left: 22px; }
.agreement li { color: var(--charcoal-soft); font-size: 0.97rem; line-height: 1.55; margin-bottom: 8px; max-width: 64ch; }
.agreement li::marker { color: var(--terracotta); }

/* The form itself */
.intake-form { margin-top: 8px; }
.intake-form fieldset {
  border: none; padding: 0; margin: 0 0 44px;
}
.intake-form legend {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.55rem; color: var(--charcoal);
  letter-spacing: -0.01em; padding: 0; margin-bottom: 22px; width: 100%;
  padding-bottom: 10px; border-bottom: 1px solid rgba(42,39,35,0.14);
}
.intake-form .legend-sub {
  margin: -16px 0 18px; color: var(--charcoal-soft);
  font-family: var(--font-display); font-style: italic; font-size: 1rem;
}
.intake-form label {
  display: block; margin-bottom: 22px;
}
.intake-form .field-label {
  display: block;
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--charcoal-soft); opacity: 0.9; margin-bottom: 8px;
}
.intake-form .field-label em {
  color: var(--terracotta); font-style: normal; margin-left: 2px;
}
.intake-form .field-label small {
  font-size: 0.85em; font-weight: 500; text-transform: none; letter-spacing: 0.04em;
  color: var(--charcoal-soft); opacity: 0.65; margin-left: 4px;
}
.intake-form input[type="text"],
.intake-form input[type="email"],
.intake-form input[type="tel"],
.intake-form input[type="date"] {
  width: 100%; box-sizing: border-box;
  border: none; border-bottom: 1px solid rgba(42,39,35,0.32);
  background: transparent; padding: 10px 0;
  font-family: var(--font-body); font-size: 1.05rem; color: var(--charcoal);
  border-radius: 0; appearance: none; -webkit-appearance: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.intake-form input:focus {
  outline: none; border-bottom-color: var(--teal);
  background: linear-gradient(transparent 88%, rgba(31,149,176,0.08) 88%);
}
.intake-form input::placeholder {
  color: var(--charcoal-soft); opacity: 0.45; font-style: italic;
}
.intake-form textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid rgba(42,39,35,0.16); border-radius: 10px;
  background: rgba(255,255,255,0.4); padding: 16px;
  font-family: var(--font-body); font-size: 1.02rem; color: var(--charcoal);
  line-height: 1.55; min-height: 160px; resize: vertical;
  transition: border-color 0.15s, background-color 0.15s;
}
.intake-form textarea:focus {
  outline: none; border-color: var(--teal); background: rgba(255,255,255,0.7);
}

.intake-form .field-row {
  display: grid; gap: 28px; margin-bottom: 0;
  align-items: end;  /* keep input baselines aligned even if a label wraps */
}
.intake-form .field-row.two-col { grid-template-columns: 1fr 1fr; }
.intake-form .field-row.three-col { grid-template-columns: 2.6fr 1fr 1.3fr; }
.intake-form .field-row > label {
  margin-bottom: 22px;
  display: flex; flex-direction: column;
}
.intake-form .field-row > label .field-label { flex: 0 0 auto; }
.intake-form .field-row > label > input,
.intake-form .field-row > label > textarea { margin-top: auto; }

/* Consent checkbox — soft mustard card with balanced padding, centered content.
   Selector intentionally repeats both classes to beat the earlier
   .intake-form fieldset { padding: 0 } rule on specificity. */
.intake-form fieldset.intake-consent {
  background: rgba(240, 176, 39, 0.10);
  border: 1px solid rgba(218, 114, 64, 0.20);
  border-radius: 12px;
  padding: 26px 30px;
  margin: 0 0 36px;
  min-inline-size: 0;
}
.consent-check {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; cursor: pointer; margin: 0;
  font-size: 1rem; line-height: 1.55; color: var(--charcoal);
  text-align: left;
}
.consent-check > span { flex: 0 1 auto; }

/* Lock-gate for the rest of the form */
.intake-lock-hint {
  display: flex; align-items: center; gap: 10px;
  background: rgba(42, 39, 35, 0.05);
  border: 1px dashed rgba(42, 39, 35, 0.22);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 0 36px;
  font-family: var(--font-display); font-style: italic;
  font-size: 0.97rem; color: var(--charcoal-soft);
}
.intake-lock-hint .material-symbols-outlined {
  font-size: 18px; color: var(--terracotta-deep); font-style: normal;
}
.intake-lock-hint.is-hidden { display: none; }

.intake-locked-region {
  transition: opacity 0.35s ease, filter 0.35s ease;
  position: relative;
}
.intake-locked-region.is-locked {
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
  filter: saturate(0.6);
}
.consent-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1.5px solid rgba(42,39,35,0.45); border-radius: 5px;
  background: #fff; cursor: pointer; position: relative;
  margin-top: 1px; transition: border-color 0.15s, background 0.15s;
}
.consent-check input[type="checkbox"]:hover { border-color: var(--terracotta); }
.consent-check input[type="checkbox"]:checked {
  background: var(--terracotta); border-color: var(--terracotta-deep);
}
.consent-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute;
  left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.consent-check input[type="checkbox"]:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.consent-check.soft {
  background: transparent; border: none; padding: 0;
  margin-bottom: 22px;
}
.consent-check.soft span { font-size: 0.97rem; color: var(--charcoal-soft); }

/* Honeypot field (visually hidden, accessible to bots) */
.intake-form .hp-field {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* Submit */
.intake-submit { margin-top: 8px; text-align: center; }
.intake-submit-note {
  margin-top: 18px; font-size: 0.9rem; color: var(--charcoal-soft);
  font-family: var(--font-display); font-style: italic;
}

@media (max-width: 720px) {
  .intake-form .field-row.two-col,
  .intake-form .field-row.three-col {
    grid-template-columns: 1fr; gap: 0;
  }
  .intake-form legend { font-size: 1.35rem; }
  .intake-consent { padding: 18px; }
}

/* ── Signature pad on /intake ── */
.signature-wrap { margin-bottom: 24px; }
.signature-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px; gap: 12px;
}
.signature-pad-frame {
  position: relative;
  border: 1px dashed rgba(42,39,35,0.32);
  border-radius: 10px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 38px,
      rgba(42,39,35,0.06) 38px,
      rgba(42,39,35,0.06) 39px
    ),
    rgba(255,255,255,0.55);
  height: 160px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.signature-pad-frame:focus-within { border-color: var(--teal); border-style: solid; }
.signature-pad {
  display: block;
  width: 100%; height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.signature-clear {
  font-family: var(--font-body);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--terracotta-deep);
  background: transparent;
  border: 1px solid rgba(218,114,64,0.4);
  padding: 5px 12px;
  border-radius: 100px; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.signature-clear:hover {
  background: var(--terracotta); color: var(--ivory); border-color: var(--terracotta);
}
.signature-hint {
  margin-top: 12px;
  font-family: var(--font-display); font-style: italic;
  font-size: 0.92rem; color: var(--charcoal-soft);
}
.signature-type-toggle {
  background: none; border: none;
  font: inherit; color: var(--teal-deep);
  text-decoration: underline; cursor: pointer; padding: 0;
}
.signature-typed-row { margin-bottom: 20px; }

/* Date row beside signature — narrow date input rather than wide */
.signature-date-row { grid-template-columns: 240px 1fr; max-width: 100%; }
.signature-date-row input[type="date"] { font-size: 1.05rem; }

@media (max-width: 540px) {
  .signature-pad-frame { height: 140px; }
}

/* ──────────────────────────────────────────────
   Video hero (home page only)
   Two stacked time-lapse videos crossfade across each other
   (see hero-video-crossfade.js for the offset playback logic) so
   the loop seam dissolves rather than cuts. A dark charcoal gradient
   sits on top to keep ivory typography legible.
   ────────────────────────────────────────────── */
.hero--video { position: relative; isolation: isolate; background: #000; }
.hero--video .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.hero--video .hero-video.hero-video-b { opacity: 0; }

/* Whisper-thin black overlay (~10%) — just enough to keep typography
   anchored without tinting the footage. Text-shadow does the real
   legibility lifting against bright frames. */
.hero--video::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  background: rgba(0, 0, 0, 0.10);
}
/* No bottom feather — the video hits the next section's edge cleanly. */
.hero--video .container { position: relative; z-index: 2; }

/* All hero text reads ivory against the unfiltered video.
   Heavy multi-layer text-shadow handles legibility on any frame. */
.hero--video .eyebrow {
  color: var(--ivory);
  border-color: rgba(252, 251, 248, 0.75);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(2px);
}
.hero--video .eyebrow .material-symbols-outlined { color: var(--ivory); }
.hero--video h1 {
  color: var(--ivory); text-wrap: balance;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
}
.hero--video h1 .mark--sage {
  background: linear-gradient(transparent 55%, rgba(143, 168, 135, 0.7) 55%, rgba(143, 168, 135, 0.7) 92%, transparent 92%);
}
.hero--video .sub {
  color: var(--ivory);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* p.lede target — .hero p.lede (specificity 0,2,1) was beating .hero--video .lede (0,2,0)
   and forcing charcoal-soft on the dark hero. Match its specificity and add !important to
   defeat any future stylesheet from re-introducing the bug. */
.hero.hero--video p.lede,
.hero--video p.lede {
  color: var(--ivory) !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}
.hero--video .btn-ghost {
  color: var(--ivory);
  border-color: rgba(252, 251, 248, 0.55);
}
.hero--video .btn-ghost:hover {
  background: rgba(252, 251, 248, 0.12);
  border-color: var(--ivory);
}

@media (prefers-reduced-motion: reduce) {
  .hero--video .hero-video { display: none; }
  .hero--video {
    background: url(hero-mountain.jpg) center / cover no-repeat #000;
  }
}

/* Home page tender-work section: pine green, lighter than pure black and
   brand-aligned (no warm-brown tint). */
body.home .section.dark.reassure {
  background: var(--sage);
}

@media (max-width: 860px) {
  .hero--video::before {
    background: rgba(0, 0, 0, 0.18);
  }
}


/* ──────────────────────────────────────────────
   Resources page
   Typographic book-cover cards in brand colors —
   no fetched cover art, just clean Fraunces titles
   on tall colored panels that read as paperback covers.
   ────────────────────────────────────────────── */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 36px;
}
.resource-card {
  background: var(--ivory);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 0 rgba(42, 39, 35, 0.04), 0 14px 36px -22px rgba(42, 39, 35, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 0 rgba(42, 39, 35, 0.05), 0 22px 50px -22px rgba(42, 39, 35, 0.3);
}
.resource-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 28px 28px 26px;
  color: var(--ivory);
  text-decoration: none;
  overflow: hidden;
  transition: filter 0.18s;
}
.resource-cover:hover { filter: brightness(1.06); }
/* Spine band on the left */
.resource-cover::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 12px;
  background: rgba(0, 0, 0, 0.14);
}
.resource-cover::after {
  content: '';
  position: absolute; left: 12px; top: 0; bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.resource-cover-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.85;
  padding-left: 18px;
}
.resource-cover-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  padding-left: 18px;
  align-self: flex-start;
  text-wrap: balance;
}
.resource-cover-author {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  opacity: 0.88;
  padding-left: 18px;
}

/* Brand-color covers */
.resource-cover--teal       { background: var(--teal); }
.resource-cover--terracotta { background: var(--terracotta); }
.resource-cover--mustard    { background: var(--mustard); color: var(--charcoal); }
.resource-cover--mustard::before { background: rgba(0, 0, 0, 0.12); }
.resource-cover--mustard::after  { background: rgba(255, 255, 255, 0.35); }
.resource-cover--sage       { background: var(--sage); }
.resource-cover--navy       { background: var(--navy); }

.resource-card-body {
  padding: 22px 24px 26px;
  flex: 1;
  display: flex; flex-direction: column;
}
.resource-byline {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--charcoal-soft);
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}
.resource-byline strong { font-weight: 600; color: var(--charcoal); }
.resource-note {
  color: var(--charcoal-soft);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0 0 20px;
  flex: 1;
}
.resource-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body);
  font-size: 0.9rem; font-weight: 600;
  color: var(--terracotta-deep);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  align-self: flex-start;
  padding-bottom: 3px;
  transition: color 0.15s, border-color 0.15s;
}
.resource-link:hover { color: var(--terracotta); }
.resource-link .material-symbols-outlined { font-size: 16px; }

.resource-aside {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
  margin: 48px auto 0;
  max-width: 60ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.97rem;
  color: var(--charcoal-soft);
  text-align: center;
}
.resource-aside .material-symbols-outlined { color: var(--terracotta-deep); font-size: 18px; line-height: 1; align-self: center; }

@media (max-width: 540px) {
  .resource-cover { padding: 22px 20px 20px; }
  .resource-cover-title { padding-left: 12px; }
  .resource-cover-eyebrow, .resource-cover-author { padding-left: 12px; }
}

/* Home hero: single full-width column + capped H1 font so the headline
   lays out cleanly in two lines. text-wrap: balance picks the split. */
body.home .hero--video .hero-grid {
  grid-template-columns: 1fr;
  gap: 0;
}
body.home .hero.hero--video h1 {
  font-size: clamp(2.6rem, 5.2vw, 4.6rem) !important;
  max-width: 18ch !important;
  line-height: 1.02 !important;
}
body.home .hero.hero--video p.lede {
  max-width: 58ch !important;
}

/* ═══ Label-maker nav tabs (Dymo tape) — replaces the hand-lettered SVG nav ═══ */
.nav-links a.nav-tab {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #F3ECDD; background: var(--navy-deep);
  padding: 7px 14px 6px; border-radius: 4px; opacity: 1;
  text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 4px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(31, 27, 23, 0.18);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), filter 0.2s ease;
}
.nav-links a.nav-tab:hover { transform: translateY(-2px); filter: brightness(1.12); }
.nav-links a.nav-tab.is-current { background: var(--teal); }            /* current page */
.nav-links a.nav-tab--cta { background: var(--terracotta); color: #FFF4EC; }
.nav-links a.nav-tab--cta:hover { filter: brightness(1.08); }

@media (max-width: 720px) {
  /* Full-screen mobile menu: larger tape tabs, stacked */
  .nav-links a.nav-tab { font-size: 1.05rem; letter-spacing: 0.16em; padding: 13px 24px; }
}

/* ══════════════════════════════════════════════════════════
   BRIGHT & RUSTIC RETRO PASS — June 2026
   Poise-magazine energy: sticker cards with hard offset
   shadows, sunshine highlighter, bubblegum moment, halftone
   dots, scalloped footer, starburst sticker. Sits at the end
   of the cascade so it wins ties with the editorial base.
   ══════════════════════════════════════════════════════════ */

/* — Reassure band: the bubblegum moment — */
body.home .section.dark.reassure { background: var(--pink-bg); }
body.home .section.dark.reassure p { color: var(--charcoal); }
body.home .section.dark.reassure .mark--mustard .mark-bg { background-color: var(--mustard); }

/* — Buttons: chunky zine print — ink outline, hard offset shadow — */
.btn-primary, .btn-accent {
  border: 2px solid var(--charcoal);
  box-shadow: 3px 3px 0 var(--charcoal);
}
.btn-primary:hover, .btn-accent:hover {
  transform: translate(-1px, -2px);
  box-shadow: 5px 6px 0 var(--charcoal);
}
.btn-ghost { border-width: 2px; }
.section.dark .btn-ghost, .section.pine .btn-ghost { border-width: 2px; }
.cta-band .btn-primary, .section.dark .btn-primary, .section.navy .btn-primary {
  border: 2px solid var(--charcoal);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
}
.section.pine .btn-primary { border: 2px solid var(--charcoal); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45); }

/* — Step cards: tilted sticker / index cards — */
.step-card {
  background: var(--white);
  border: 2px solid var(--charcoal);
  border-top: 2px solid var(--charcoal);
  border-radius: 16px;
  padding: 26px 24px 24px;
  box-shadow: 4px 4px 0 rgba(27, 27, 27, 0.85);
}
.steps .step-card:nth-child(odd)  { transform: rotate(-0.7deg); }
.steps .step-card:nth-child(even) { transform: rotate(0.55deg); }
.step-card:hover { transform: translateY(-4px) rotate(0deg); }
.section.pine .step-card,
.section.marigold .step-card,
.section.dark .step-card {
  background: var(--ivory);
  border-color: var(--charcoal);
}
.section.pine .step-card h3, .section.dark .step-card h3 { color: var(--charcoal); }
.section.pine .step-card p, .section.dark .step-card p { color: var(--charcoal-soft); }
.section.pine .step-num { color: var(--terracotta-deep); }
.section.marigold .step-card { box-shadow: 4px 4px 0 rgba(27, 27, 27, 0.9); }
@media (prefers-reduced-motion: reduce) {
  .steps .step-card:nth-child(odd), .steps .step-card:nth-child(even) { transform: none; }
}

/* — Cards across the site pick up the sticker treatment — */
.post-card, .media-card, .resource-card, .price-card, .author-box {
  border: 2px solid var(--charcoal);
  box-shadow: 5px 5px 0 rgba(27, 27, 27, 0.16);
}
.post-card:hover, .resource-card:hover, .price-card:hover {
  box-shadow: 7px 8px 0 rgba(27, 27, 27, 0.2);
}

/* — Conditions: rotating primary-color dot separators — */
.conditions span:nth-child(4n+1)::after { color: var(--terracotta); }
.conditions span:nth-child(4n+2)::after { color: var(--navy); }
.conditions span:nth-child(4n+3)::after { color: var(--mustard-deep); }
.conditions span:nth-child(4n)::after   { color: var(--sage); }

/* — Marigold section: halftone dot wash, comic-print corner — */
.section.marigold::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(27, 27, 27, 0.11) 1.5px, transparent 1.6px);
  background-size: 17px 17px;
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 42%);
  mask-image: linear-gradient(115deg, #000 0%, transparent 42%);
}
.section.marigold .container { position: relative; z-index: 1; }

/* — CTA band: cobalt with a starburst sticker — */
.cta-band { background: var(--navy); position: relative; overflow: visible; }
.sticker-burst {
  position: absolute;
  top: -34px; right: 36px;
  width: 132px; height: 132px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 26px;
  background: var(--mustard);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.2;
  transform: rotate(-11deg);
  clip-path: polygon(50.0% 0.0%, 58.7% 12.0%, 71.7% 5.0%, 74.3% 19.5%, 89.1% 18.8%, 85.1% 33.1%, 98.7% 38.9%, 89.0% 50.0%, 98.7% 61.1%, 85.1% 66.9%, 89.1% 81.2%, 74.3% 80.5%, 71.7% 95.0%, 58.7% 88.0%, 50.0% 100.0%, 41.3% 88.0%, 28.3% 95.0%, 25.7% 80.5%, 10.9% 81.2%, 14.9% 66.9%, 1.3% 61.1%, 11.0% 50.0%, 1.3% 38.9%, 14.9% 33.1%, 10.9% 18.8%, 25.7% 19.5%, 28.3% 5.0%, 41.3% 12.0%);
  animation: burstWobble 5s ease-in-out infinite;
}
@keyframes burstWobble {
  0%, 100% { transform: rotate(-11deg) scale(1); }
  50%      { transform: rotate(-7deg) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .sticker-burst { animation: none; } }
@media (max-width: 720px) {
  .sticker-burst { width: 104px; height: 104px; top: -30px; right: 14px; font-size: 0.74rem; padding: 20px; }
}

/* — Footer: scalloped paper edge along the top — */
.site-foot { position: relative; }
.site-foot::before {
  content: '';
  position: absolute; top: -11px; left: 0; right: 0;
  height: 12px;
  background-image: radial-gradient(circle at 14px 14px, var(--sage) 13px, transparent 13.6px);
  background-size: 28px 14px;
  background-repeat: repeat-x;
  pointer-events: none;
}

/* — Pull-quote cite + step numbers warm up — */
.step-num { color: var(--navy-deep); }
.section.river .btn-primary { border: 2px solid var(--charcoal); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4); }

/* — Photo placeholder portrait: warmer, brighter atmosphere — */
.photo-ph.atmos.shadow {
  background:
    radial-gradient(circle at 80% 22%, rgba(255, 199, 44, 0.5) 0%, transparent 48%),
    radial-gradient(circle at 18% 82%, rgba(232, 75, 44, 0.42) 0%, transparent 55%),
    linear-gradient(180deg, #2D4FC8 0%, #1F3AA0 100%);
}

/* ══════════════════════════════════════════════════════════
   FRIENDLY OVERHAUL — June 2026, round 2
   Keeps: bright sections, sticker cards, starburst, scallops.
   Replaces: bulky Dymo tape (eyebrows + nav) with soft sticker
   pills; text-over-video hero with a cutout video frame on
   sunny paper; scribble-mask highlights with clean translucent
   marker swipes.
   ══════════════════════════════════════════════════════════ */

/* — Eyebrows: friendly sticker pills with a colored dot — */
.eyebrow,
.eyebrow.navy, .eyebrow.terracotta, .eyebrow.teal, .eyebrow.forest,
.section.dark .eyebrow, .section.navy .eyebrow, .section.pine .eyebrow,
.section.river .eyebrow, .section.marigold .eyebrow, .section.sky .eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  background: var(--white); color: var(--charcoal);
  border: 1.5px solid var(--charcoal);
  padding: 7px 16px 6px;
  border-radius: 999px;
  gap: 8px;
  box-shadow: 2px 2px 0 rgba(27, 27, 27, 0.22);
  text-shadow: none;
  transform: rotate(-1.2deg);
}
.eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
}
.eyebrow.navy::before       { background: var(--navy); }
.eyebrow.teal::before       { background: var(--teal); }
.eyebrow.forest::before     { background: var(--sage); }
.eyebrow.terracotta::before { background: var(--terracotta); }
.section.marigold .eyebrow::before { background: var(--navy); }
.section.pine .eyebrow::before     { background: var(--mustard); }
.section.river .eyebrow::before    { background: var(--pink); }

/* — Nav: friendly pills instead of tape — */
.nav-links a.nav-tab {
  font-family: var(--font-body);
  font-size: 0.92rem; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--charcoal); background: transparent;
  padding: 9px 18px; border-radius: 999px;
  box-shadow: none; text-shadow: none;
}
.nav-links a.nav-tab:hover { background: var(--mustard-bg); transform: translateY(-1px); filter: none; }
.nav-links a.nav-tab.is-current { background: var(--navy-bg); color: var(--navy-deep); }
.nav-links a.nav-tab--cta {
  background: var(--terracotta); color: var(--white);
  border: 2px solid var(--charcoal);
  box-shadow: 2.5px 2.5px 0 var(--charcoal);
  padding: 9px 20px;
}
.nav-links a.nav-tab--cta:hover {
  background: var(--terracotta);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4.5px 0 var(--charcoal);
  filter: none;
}

/* — Slimmer top band: lighter, friendlier entry — */
.top-band { height: 14px; }

/* — Highlights: clean translucent marker swipe, no scribble mask — */
.mark .mark-bg,
.hero h1 .mark .mark-bg {
  -webkit-mask-image: none; mask-image: none;
  top: 0.10em; bottom: -0.05em; left: -0.2em; right: -0.2em;
  border-radius: 0.65em 0.5em 0.6em 0.45em;
  transform: rotate(-1deg);
  opacity: 0.55;
}
.mark.mark--sage .mark-bg       { background-color: #9FD89B; opacity: 0.6; }
.mark.mark--mustard .mark-bg    { background-color: var(--mustard); opacity: 0.65; }
.mark.mark--teal .mark-bg       { background-color: #7FD6E8; opacity: 0.6; }
.mark.mark--terracotta .mark-bg { background-color: #FFA98F; opacity: 0.6; }

/* — Home hero: headline on sunny paper, video as a cutout frame — */
.hero--home { padding: 76px 0 100px; overflow: visible; }
.hero--home .hero-grid {
  grid-template-columns: 1.08fr 0.92fr;
  gap: 64px;
  align-items: center;
}
.hero--home h1 { font-size: clamp(2.5rem, 4.6vw, 4rem); max-width: 16ch; }
.hero--home .sub { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.hero--home p.lede { max-width: 46ch; }
.hero-media {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: 28px;
  border: 2.5px solid var(--charcoal);
  box-shadow: 10px 11px 0 -2px var(--mustard), 10px 11px 0 0 var(--charcoal);
  transform: rotate(1.5deg);
  overflow: hidden;
  background: var(--navy-bg);
}
.hero-media .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.hero-media .hero-video-b { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero-media .hero-video { display: none; }
  .hero-media { background: url(hero-mountain.jpg) center 35% / cover no-repeat; }
}
@media (max-width: 960px) {
  .hero--home { padding: 48px 0 80px; }
  .hero--home .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero--home h1 { max-width: none; }
  .hero-media { aspect-ratio: 16 / 10; transform: rotate(1deg); max-width: 560px; }
}

/* — Mobile menu: pills, not tape — */
@media (max-width: 720px) {
  .nav-links a.nav-tab { font-size: 1.25rem; letter-spacing: 0; padding: 12px 26px; }
  .nav-links a.nav-tab--cta { font-size: 1.05rem; }
  .eyebrow { transform: rotate(-0.8deg); }
}

/* ══════════════════════════════════════════════════════════
   TEXTURE & DEPTH PASS — June 2026, round 3
   Direction approved; this layer adds tactile patterns
   (graph grid, dot grids, polka, waves, halftone corners)
   and ambient shadows so the sticker pieces float.
   ══════════════════════════════════════════════════════════ */

/* — Page-top heroes: faint graph-paper grid — */
.hero {
  background-image:
    linear-gradient(rgba(27, 27, 27, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 27, 27, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* — Sky section: fine ink dot grid — */
.section.sky {
  background-image: radial-gradient(rgba(27, 27, 27, 0.07) 1.1px, transparent 1.25px);
  background-size: 20px 20px;
}

/* — Pine section: big soft polka dots, wrapping-paper feel — */
.section.pine {
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 7px, transparent 7.6px);
  background-size: 64px 64px;
}

/* — Cream (Rob) section: notebook grid — */
.section.cream {
  background-image:
    linear-gradient(rgba(27, 27, 27, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 27, 27, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* — Bubblegum reassure band: deeper-pink polka — */
body.home .section.dark.reassure {
  background-image: radial-gradient(rgba(241, 86, 140, 0.13) 6px, transparent 6.7px);
  background-size: 58px 58px;
}

/* — River section: hand-drawn water lines — */
.section.river {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 36'%3E%3Cpath d='M0 18 Q15 8 30 18 T60 18 T90 18 T120 18' fill='none' stroke='%23FFFFFF' stroke-opacity='0.09' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 120px 36px;
}

/* — Footer: tiny dot grid over the kelly green — */
.site-foot {
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1.2px, transparent 1.4px);
  background-size: 22px 22px;
}

/* — Cobalt CTA band: halftone dots fading from the lower-left — */
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.6px, transparent 1.8px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(300deg, #000 0%, transparent 52%);
  mask-image: linear-gradient(300deg, #000 0%, transparent 52%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }

/* — Marigold section: scalloped paper edge along its top, like the footer — */
.section.marigold::before {
  content: '';
  position: absolute; top: -11px; left: 0; right: 0;
  height: 12px;
  background-image: radial-gradient(circle at 14px 14px, var(--mustard) 13px, transparent 13.6px);
  background-size: 28px 14px;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 2;
}

/* — Depth: ambient shadows under the hard offsets, so pieces float — */
.step-card {
  box-shadow: 4px 4px 0 rgba(27, 27, 27, 0.85), 0 18px 34px -18px rgba(27, 27, 27, 0.4);
}
.post-card, .media-card, .resource-card, .price-card, .author-box {
  box-shadow: 5px 5px 0 rgba(27, 27, 27, 0.16), 0 20px 40px -20px rgba(27, 27, 27, 0.28);
}
.post-card:hover, .resource-card:hover, .price-card:hover {
  box-shadow: 7px 8px 0 rgba(27, 27, 27, 0.2), 0 28px 50px -22px rgba(27, 27, 27, 0.34);
}
.hero-media {
  box-shadow:
    10px 11px 0 -2px var(--mustard),
    10px 11px 0 0 var(--charcoal),
    0 32px 60px -26px rgba(27, 27, 27, 0.45);
}
.cta-band { box-shadow: 0 30px 60px -30px rgba(31, 58, 160, 0.55); }
.btn-primary, .btn-accent {
  box-shadow: 3px 3px 0 var(--charcoal), 0 12px 24px -12px rgba(232, 75, 44, 0.55);
}
.btn-primary:hover, .btn-accent:hover {
  box-shadow: 5px 6px 0 var(--charcoal), 0 16px 30px -12px rgba(232, 75, 44, 0.6);
}

/* ══════════════════════════════════════════════════════════
   SCRAPBOOK PASS — June 2026, round 4
   Real photos of Rob as taped-in snapshots (memory lane),
   plus die-cut stickers from the retro sheet scattered
   across sections. Decorative stickers are aria-hidden.
   ══════════════════════════════════════════════════════════ */

/* — Snapshot prints — */
.snap {
  display: block; margin: 0;
  background: var(--white);
  border: 2px solid var(--charcoal);
  border-radius: 14px;
  padding: 10px 10px 12px;
  box-shadow: 4px 5px 0 rgba(27, 27, 27, 0.75), 0 20px 38px -20px rgba(27, 27, 27, 0.45);
  transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.snap img { width: 100%; border-radius: 8px; display: block; }
.snap figcaption {
  font-family: var(--font-display); font-style: italic;
  text-align: center; padding-top: 9px;
  font-size: 0.95rem; color: var(--charcoal-soft);
}

/* Stacked pair: one big print, one small overlapping */
.snap-stack { position: relative; max-width: 440px; margin: 0 auto; }
.snap-stack .snap-main { transform: rotate(-2deg); }
.snap-stack .snap-mini {
  position: absolute; width: 46%;
  right: -7%; bottom: -9%;
  transform: rotate(4deg);
  z-index: 2;
}
.snap-stack .snap-mini figcaption { font-size: 0.8rem; padding-top: 6px; }
.snap-stack:hover .snap-main { transform: rotate(-1deg); }
.snap-stack:hover .snap-mini { transform: rotate(2.5deg) translateY(-3px); }

/* — Memory wall (About) — */
.memory-wall {
  display: flex; flex-wrap: wrap;
  gap: 38px 30px;
  justify-content: center; align-items: flex-start;
  margin-top: 16px;
}
.memory-wall .snap { width: min(248px, 42vw); }
.memory-wall .snap:nth-child(4n+1) { transform: rotate(-2.4deg); }
.memory-wall .snap:nth-child(4n+2) { transform: rotate(1.8deg);  margin-top: 28px; }
.memory-wall .snap:nth-child(4n+3) { transform: rotate(-1.1deg); margin-top: 10px; }
.memory-wall .snap:nth-child(4n)   { transform: rotate(2.6deg);  margin-top: 36px; }
.memory-wall .snap:hover { transform: rotate(0deg) scale(1.03); z-index: 3; }

/* Wedding print floating beside the river CTA (About, wide screens) */
.river-snap {
  position: absolute;
  right: 4%; top: 50%;
  width: 240px;
  transform: translateY(-50%) rotate(2.4deg);
  z-index: 2;
}
.river-snap:hover { transform: translateY(-52%) rotate(1deg); }
@media (max-width: 1180px) { .river-snap { display: none; } }

/* — Stickers — */
.section { position: relative; }
img.sticker {
  position: absolute;
  pointer-events: none; user-select: none;
  z-index: 6;
  filter: drop-shadow(0 10px 16px rgba(27, 27, 27, 0.25));
}
.sway { animation: stickerSway 7s ease-in-out infinite alternate; }
@keyframes stickerSway {
  from { transform: rotate(var(--r, -8deg)); }
  to   { transform: rotate(calc(var(--r, -8deg) + 10deg)); }
}
@media (prefers-reduced-motion: reduce) { .sway { animation: none; transform: rotate(var(--r, -8deg)); } }

/* On small screens most stickers get out of the text's way */
@media (max-width: 900px) {
  img.sticker { display: none; }
  img.sticker.keep-m { display: block; width: 60px !important; }
  .snap-stack { max-width: 360px; }
  .snap-stack .snap-mini { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .snap, .snap-stack .snap-main, .snap-stack .snap-mini { transition: none; }
}
.site-foot { position: relative; }
.hero { position: relative; }

/* ── Logo visibility fixes ──
   Footer wordmark: Safari does not reliably support the `mask:` shorthand
   with slash-size, so the footer logo vanished there while the nav logo
   (longhand mask properties) rendered fine. Longhands only, both prefixes. */
.foot-brand .foot-logo {
  background: linear-gradient(90deg, #FFD968 0%, #FFE8A0 55%, #FFC72C 100%);
  -webkit-mask: none; mask: none;
  -webkit-mask-image: url(logo-script.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  -webkit-mask-size: contain;
  mask-image: url(logo-script.svg);
  mask-repeat: no-repeat;
  mask-position: left center;
  mask-size: contain;
}
/* The multiply-blend teardrops read as smudges on kelly green — nav only */
.foot-brand .brand-drops { display: none; }
/* Nav wordmark: solid ink, same as the site's borders and headlines.
   (Footer wordmark stays sunshine yellow — ink would vanish on green.) */
.brand .logo {
  background: var(--charcoal);
}

/* ── Peel-and-place stickers ──
   Stickers are draggable: lift on grab (bigger shadow, slight grow),
   settle with a springy snap on drop. Position persists per visitor. */
img.sticker {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
img.sticker.peeling {
  cursor: grabbing;
  scale: 1.12;
  filter: drop-shadow(0 26px 30px rgba(27, 27, 27, 0.38));
  transition: scale 0.16s ease, filter 0.16s ease;
  z-index: 60;
  animation: none;
}
img.sticker.settling {
  scale: 1;
  transition: scale 0.45s cubic-bezier(0.34, 1.65, 0.64, 1), filter 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  img.sticker.peeling { scale: 1.04; }
}

/* ══════════════════════════════════════════════════════════
   THE CRYING GAMES — shuffle deck of permission questions
   (Resources page). Digital preview of an eventual printed
   deck: tarot-proportioned cards, washi-tape accent, sticker
   per card, dealt off a stack.
   ══════════════════════════════════════════════════════════ */
.section.crying-games {
  background: var(--pink-bg);
  background-image: radial-gradient(rgba(241, 86, 140, 0.13) 6px, transparent 6.7px);
  background-size: 58px 58px;
}
.deck-area {
  display: flex; flex-direction: column; align-items: center;
  gap: 34px; padding-top: 16px;
}
.deck { position: relative; }
.card-back, .qcard {
  width: min(380px, 86vw);
  aspect-ratio: 5 / 7;
  border: 2.5px solid var(--charcoal);
  border-radius: 22px;
}
.card-back {
  position: absolute; inset: 0;
  background: var(--navy);
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.6px, transparent 1.8px);
  background-size: 16px 16px;
}
.card-back-1 { transform: rotate(3.2deg) translate(7px, 4px); }
.card-back-2 { transform: rotate(-2.6deg) translate(-6px, 9px); }
.qcard {
  position: relative;
  background: var(--white);
  padding: 30px 28px 24px;
  display: flex; flex-direction: column;
  transform: rotate(-1.2deg);
  box-shadow: 5px 6px 0 rgba(27, 27, 27, 0.8), 0 28px 52px -22px rgba(27, 27, 27, 0.45);
  cursor: pointer;
}
.qcard-tape {
  position: absolute; top: -13px; left: 50%;
  width: 96px; height: 26px;
  background: var(--pink-bg);
  border: 1.5px solid rgba(27, 27, 27, 0.35);
  border-radius: 3px;
  transform: translateX(-50%) rotate(-2.5deg);
  opacity: 0.92;
}
.qcard-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-body);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--charcoal-mute);
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--line);
}
.qcard-num { color: var(--terracotta); }
.qcard-q {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  line-height: 1.28;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  flex: 1;
  display: flex; align-items: center;
  margin: 0;
  text-wrap: balance;
}
.qcard-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-top: 14px;
  border-top: 1.5px solid var(--line);
}
.qcard-sticker {
  width: 58px; height: 58px; object-fit: contain;
  transform: rotate(-8deg);
  filter: drop-shadow(0 4px 6px rgba(27, 27, 27, 0.18));
}
.qcard-brand {
  display: block; width: 132px; height: 34px;
  background: var(--charcoal);
  -webkit-mask-image: url(logo-script.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: right bottom;
  -webkit-mask-size: contain;
  mask-image: url(logo-script.svg);
  mask-repeat: no-repeat;
  mask-position: right bottom;
  mask-size: contain;
  opacity: 0.85;
}
.deck-controls { text-align: center; }
.deck-count {
  margin-top: 14px;
  font-family: var(--font-display); font-style: italic;
  font-size: 0.95rem; color: var(--charcoal-soft);
}
.qcard.dealing-out { animation: dealOut 0.26s cubic-bezier(0.5, 0, 0.8, 0.4) forwards; }
.qcard.dealing-in  { animation: dealIn 0.42s cubic-bezier(0.34, 1.45, 0.64, 1); }
@keyframes dealOut {
  to { transform: translate(125%, -10%) rotate(16deg); opacity: 0; }
}
@keyframes dealIn {
  from { transform: translateY(16px) scale(0.95) rotate(-4deg); opacity: 0; }
  to   { transform: rotate(-1.2deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .qcard.dealing-out, .qcard.dealing-in { animation: none; }
}
@media (max-width: 540px) {
  .qcard { padding: 24px 20px 18px; }
  .qcard-brand { width: 104px; height: 28px; }
}

/* ══════════════════════════════════════════════════════════
   WHIMSY NAV — June 2026
   Pills pop in with a stagger on first visit, jelly-squish on
   hover, the current page wears a twinkling star, the CTA pill
   nudges for attention, the logo tips its hat, and the wavy
   underline drifts like a stream. All skipped under
   prefers-reduced-motion; entrance skipped for returning visitors.
   ══════════════════════════════════════════════════════════ */

/* — Entrance: staggered sticker-slap pop-in (first visit per session) — */
@keyframes navPopIn {
  0%   { opacity: 0; transform: translateY(-16px) rotate(-5deg) scale(0.7); }
  60%  { opacity: 1; transform: translateY(2px) rotate(2deg) scale(1.06); }
  100% { opacity: 1; transform: none; }
}
.nav-links a.nav-tab { animation: navPopIn 0.55s cubic-bezier(0.34, 1.45, 0.64, 1) backwards; }
.nav-links a.nav-tab:nth-child(1) { animation-delay: 0.10s; }
.nav-links a.nav-tab:nth-child(2) { animation-delay: 0.20s; }
.nav-links a.nav-tab:nth-child(3) { animation-delay: 0.30s; }
.nav-links a.nav-tab:nth-child(4) { animation-delay: 0.44s; }
body.returning .nav-links a.nav-tab { animation: none; }

/* — Hover: jelly squish, then settle into the lifted state — */
@keyframes pillJelly {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.10, 0.88) translateY(-1px); }
  55%  { transform: scale(0.94, 1.06) translateY(-2px); }
  78%  { transform: scale(1.04, 0.97) translateY(-1px); }
  100% { transform: scale(1) translateY(-1px); }
}
.nav-links a.nav-tab:hover { animation: pillJelly 0.5s ease; }

/* — Current page: twinkling star over the pill's shoulder — */
.nav-links a.nav-tab.is-current { position: relative; }
.nav-links a.nav-tab.is-current::after {
  content: '';
  position: absolute; top: -9px; right: -8px;
  width: 17px; height: 17px;
  background: var(--mustard);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 1px 0 rgba(27, 27, 27, 0.4));
  animation: starTwinkle 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes starTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.3) rotate(22deg); }
}

/* — CTA pill: a polite little nudge every ~9s (independent `rotate`
     property so it never fights the hover transform) — */
@keyframes ctaNudge {
  0%, 90%, 100% { rotate: 0deg; }
  92% { rotate: -2.6deg; }
  95% { rotate: 2.2deg; }
  98% { rotate: -1deg; }
}
.nav-links a.nav-tab--cta { animation: navPopIn 0.55s cubic-bezier(0.34, 1.45, 0.64, 1) 0.44s backwards, ctaNudge 9s ease-in-out 5s infinite; }
body.returning .nav-links a.nav-tab--cta { animation: ctaNudge 9s ease-in-out 5s infinite; }

/* — Logo: writes itself in on first visit. The wordmark is an SVG mask,
     so a left-to-right wipe with writing-rhythm pacing (script first,
     a breath, then the small tagline) reads as hand-lettering. — */
@keyframes logoWrite {
  0%   { clip-path: inset(-5% 103% -5% -3%); }
  46%  { clip-path: inset(-5% 58% -5% -3%); }   /* the script gets inked */
  56%  { clip-path: inset(-5% 54% -5% -3%); }   /* pen lifts for a beat */
  100% { clip-path: inset(-5% -3% -5% -3%); }   /* tagline follows */
}
.brand .logo { animation: logoWrite 1.6s cubic-bezier(0.45, 0.05, 0.4, 0.95) 0.1s backwards; }
body.returning .brand .logo { animation: none; }

/* — Wavy underline drifts like a stream — */
.site-nav::after {
  background-position: 0 center;
  animation: squiggleDrift 26s linear infinite;
}
@keyframes squiggleDrift {
  from { background-position: 0 center; }
  to   { background-position: -400px center; }
}

/* — Hamburger rotates into action; mobile menu pills pop in staggered — */
.nav-toggle .material-symbols-outlined { transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1); }
.nav-toggle[aria-expanded="true"] .material-symbols-outlined { transform: rotate(90deg) scale(1.1); }
@media (max-width: 720px) {
  .nav-links a.nav-tab, body.returning .nav-links a.nav-tab { animation: none; }
  .nav-links.open a.nav-tab { animation: navPopIn 0.45s cubic-bezier(0.34, 1.45, 0.64, 1) backwards; }
  .nav-links.open a.nav-tab:nth-child(1) { animation-delay: 0.04s; }
  .nav-links.open a.nav-tab:nth-child(2) { animation-delay: 0.12s; }
  .nav-links.open a.nav-tab:nth-child(3) { animation-delay: 0.20s; }
  .nav-links.open a.nav-tab:nth-child(4) { animation-delay: 0.30s; }
  .nav-links.open a.nav-tab--cta { animation: navPopIn 0.45s cubic-bezier(0.34, 1.45, 0.64, 1) 0.30s backwards, ctaNudge 9s ease-in-out 5s infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links a.nav-tab, .nav-links a.nav-tab--cta,
  body.returning .nav-links a.nav-tab--cta,
  .nav-links.open a.nav-tab, .nav-links.open a.nav-tab--cta,
  .nav-links a.nav-tab:hover,
  .nav-links a.nav-tab.is-current::after,
  .site-nav::after, .brand .logo { animation: none; }
  .nav-toggle .material-symbols-outlined { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   IN-PLACE NAVIGATION — June 2026
   Internal links swap <main> over fetch (see scripts.js), so the
   nav, rainbow line, logo drops, and footer never reload. These
   are the out/in animations for the content swap.
   ══════════════════════════════════════════════════════════ */
body.page-leaving main.page {
  animation: pageSwapOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes pageSwapOut {
  to { opacity: 0; transform: translateY(10px); }
}
main.page-arriving {
  animation: pageSwapIn 0.55s cubic-bezier(0.34, 1.3, 0.64, 1);
}
@keyframes pageSwapIn {
  from { opacity: 0; transform: translateY(18px) scale(0.996); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-leaving main.page, main.page-arriving { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   BLOB NAV HIGHLIGHTS — June 2026
   The organic brush-blob highlight returns to the nav pills:
   each tab has a marker blob (masked SVG) that scribbles in on
   hover (see scripts.js) and stays fully inked on the current
   page. Replaces the flat hover/current fills.
   ══════════════════════════════════════════════════════════ */
.nav-links a.nav-tab { position: relative; isolation: isolate; }
.nav-links a.nav-tab .nav-highlight {
  position: absolute; inset: -8px -13px;
  background-color: #8FD08A;
  -webkit-mask-image: url(nav/highlights/1.svg);
  mask-image: url(nav/highlights/1.svg);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  opacity: 0.6;
  z-index: -1;
  pointer-events: none;
  clip-path: polygon(0% 0%, 0% 0%, 0% 33%, 0% 33%, 0% 33%, 0% 33%);
}
.nav-links a.nav-tab[href$="services.html"] .nav-highlight,
.nav-links a.nav-tab[href$="/services"] .nav-highlight {
  background-color: #7FD6E8;
  -webkit-mask-image: url(nav/highlights/2.svg);
  mask-image: url(nav/highlights/2.svg);
}
.nav-links a.nav-tab[href$="resources.html"] .nav-highlight,
.nav-links a.nav-tab[href$="/resources"] .nav-highlight {
  background-color: var(--mustard);
  -webkit-mask-image: url(nav/highlights/3.svg);
  mask-image: url(nav/highlights/3.svg);
  opacity: 0.55;
}
/* Blobs replace the flat pill fills */
.nav-links a.nav-tab:hover { background: transparent; }
.nav-links a.nav-tab.is-current { background: transparent; color: var(--charcoal); }
/* Current page: blob fully inked. !important so it also beats any
   lingering WAAPI hover state when the star hops pills mid-session. */
.nav-links a.nav-tab.is-current .nav-highlight {
  clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 100% 66%, 100% 100%, 0% 100%) !important;
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a.nav-tab:hover .nav-highlight {
    clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 100% 66%, 100% 100%, 0% 100%);
  }
}