/* ==========================================================================
   Lea Mestrovic / Dog Trainer Lea
   Design system + site styles
   ========================================================================== */

/* ---------- Design tokens: Forest & Brass ---------- */
:root {
  /* Surfaces */
  --bg:         #F6F1E7;   /* page background, warm cream */
  --bg-alt:     #F1EADC;   /* alternating section band */
  --ink:        #16241D;   /* primary text, near-black green */
  --ink-soft:   #3B4A42;   /* body copy */
  --muted:      #5A675F;   /* captions, meta. Darkened from #64726A,
                              which measured 4.19:1 on the soft band. */
  --hairline:   #E7DECF;   /* card and divider borders */
  --hairline-2: #E0D6C4;   /* FAQ dividers */

  /* Dark panels: hero, process, CTA, footer */
  --panel:       #10231B;
  --panel-2:     #0B1912;
  --panel-ink:   #F6F1E7;
  --panel-muted: #9AA99F;

  /* Accent: brass and gold */
  --accent:       #8A5F14;  /* accent text on light. Darkened from the
                               #A9791F in the brief, which measured 3.2:1
                               on the cream bands and failed AA for the
                               11.8px eyebrow. This clears 4.68:1 on all
                               three light surfaces. */
  --accent-btn:   #D69A3C;  /* primary button, highlights */
  --accent-btn-2: #E4AC52;  /* button hover */
  --accent-ink:   #16241D;  /* text ON the gold button */
  --accent-soft:  #F3E9D6;  /* tag chips, soft fills */

  --white: #FFFFFF;

  /* Legacy aliases. Older rules still reference these, so they resolve to
     the new palette and nothing renders unstyled mid-migration. */
  --cream:        var(--bg);
  --cream-deep:   var(--bg-alt);
  --sand:         var(--hairline-2);
  --line:         var(--hairline);
  --forest:       var(--panel);
  --forest-deep:  var(--panel-2);
  --forest-tint:  var(--accent-soft);
  --amber:        var(--accent);
  --amber-bright: var(--accent-btn);
  --amber-tint:   var(--accent-soft);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Space + shape */
  --radius:    16px;
  --radius-lg: 24px;
  --radius-pill: 100px;
  --arch: 220px 220px 24px 24px;   /* signature arched portrait */

  --shadow-sm: 0 1px 2px rgba(22,36,29,.04), 0 2px 10px rgba(22,36,29,.04);
  --shadow:    0 4px 22px rgba(22,36,29,.05);
  --shadow-lg: 0 18px 44px rgba(22,36,29,.10);

  --wrap: 1240px;
  --wrap-narrow: 760px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;              /* light Fraunces carries the premium feel */
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
/* Light weight only reads well at display sizes; smaller headings stay heavier. */
h3, h4 { font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }

/* Accent word inside a heading */
.h-accent { font-style: italic; color: var(--accent); font-weight: 300; }
/* Gold only where it sits on a dark panel; on cream it drops under 3:1. */
.hero .h-accent,
.cta-band .h-accent,
.section--ink .h-accent,
.section--panel .h-accent { color: var(--accent-btn); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1.15em; text-wrap: pretty; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

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

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 28px; }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: 28px; }
.section { padding-block: clamp(72px, 9vw, 128px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--cream { background: var(--bg-alt); }
.section--light { background: var(--bg); }
.section--sand  { background: var(--sand); }
.section--ink   { background: var(--panel); color: var(--panel-ink); }
.section--panel { background: var(--panel); color: var(--panel-ink); }

.section--panel .eyebrow, .section--ink .eyebrow { color: var(--accent-btn); }
.section--ink h2, .section--ink h3,
.section--panel h2, .section--panel h3 { color: var(--panel-ink); }

.center { text-align: center; }
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--white);
  padding: 12px 20px; z-index: 999; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Eyebrow / section heads ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: ""; width: 32px; height: 1.5px; background: currentColor; flex-shrink: 0;
}
.eyebrow--center { justify-content: center; }
.section-head { max-width: 680px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-soft); font-size: 1.1rem; margin-bottom: 0; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); line-height: 1.6; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 600; line-height: 1;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent-btn); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-btn-2); box-shadow: var(--shadow); }

.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--cream); }

.btn--light { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--light:hover { box-shadow: var(--shadow); }

.btn--ghost-light { border-color: rgba(255,255,255,.4); color: var(--white); }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); border-color: var(--white); }

.btn--sm { padding: 11px 22px; font-size: .92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--accent); text-decoration: none;
  border-bottom: 1.5px solid transparent; transition: border-color .2s, gap .2s;
}
.arrow-link:hover { border-bottom-color: currentColor; gap: .7rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,243,234,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 2px 20px rgba(20,32,26,.05); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 76px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand img { width: 52px; height: 40px; object-fit: contain; object-position: center; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.12rem;
  letter-spacing: .01em; color: var(--ink);
}
.brand-tag { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 14px; font-size: .95rem; font-weight: 500;
  text-decoration: none; color: var(--ink-soft); border-radius: var(--radius-pill);
  transition: color .2s, background-color .2s;
}
.nav a:hover { color: var(--ink); background: var(--cream-deep); }
.nav a[aria-current="page"] { color: var(--forest); font-weight: 600; }
.header-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.nav-toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 19px; height: 1.5px; background: var(--ink); position: relative;
  transition: background-color .2s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 1.5px; background: var(--ink);
  transition: transform .3s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 12px 24px 28px;
    box-shadow: var(--shadow);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .28s var(--ease), opacity .28s var(--ease);
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav a { padding: 14px 8px; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a:hover { background: transparent; }
  .nav-toggle { display: flex; }
  .header-cta .btn { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 100px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: 0;
  width: 720px; height: 720px; right: -220px; top: -320px;
  background: radial-gradient(circle, rgba(31,61,43,.09) 0%, rgba(31,61,43,0) 68%);
  border-radius: 50%; pointer-events: none;
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 5vw, 72px); align-items: center;
}
.hero h1 { margin-bottom: .35em; }
.hero h1 em {
  font-style: italic; color: var(--forest);
}
.hero-lede { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--ink-soft); max-width: 52ch; margin-bottom: 2rem; }

.hero-media { position: relative; }
.hero-media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.hero-badge {
  position: absolute; left: -28px; bottom: 40px;
  background: var(--white); border-radius: var(--radius);
  padding: 14px 18px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 12px; max-width: 260px;
}
.hero-badge img { width: 52px; height: 52px; object-fit: contain; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
.hero-badge-text { font-size: .8rem; line-height: 1.35; color: var(--ink-soft); }
.hero-badge-text strong { display: block; color: var(--ink); font-size: .88rem; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 420px; margin-inline: auto; }
  /* Keep the portrait ratio on mobile. Forcing this 4:5 source into a
     landscape box cropped straight through Lea's head. */
  .hero-media img { aspect-ratio: 4/5; }
  .hero-badge { left: 12px; bottom: -16px; }
}

/* ---------- Trust strip ---------- */
.trust-strip { border-block: 1px solid var(--line); background: var(--cream-deep); }
.trust-inner {
  display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 64px);
  flex-wrap: wrap; padding-block: 26px;
}
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item img { height: 46px; width: auto; object-fit: contain; opacity: .85; }
.trust-item span { font-size: .82rem; color: var(--muted); max-width: 150px; line-height: 1.35; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat {
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px 24px; text-align: center;
}
.stat-num {
  font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 2.9rem);
  font-weight: 600; color: var(--forest); line-height: 1; margin-bottom: .3rem;
}
.stat-label { font-size: .88rem; color: var(--muted); letter-spacing: .02em; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Feature grid (reasons) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature {
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 30px 28px; box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.feature-icon {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 18px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.16rem; margin-bottom: .4em; }
.feature p { font-size: .96rem; color: var(--ink-soft); margin-bottom: 0; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---------- Service cards ---------- */
.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.service-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-card-media { aspect-ratio: 16/10; overflow: hidden; background: var(--sand); }
.service-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.service-card:hover .service-card-media img { transform: scale(1.05); }
.service-card-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
/* Card titles are h2 or h3 depending on what precedes them in the page,
   so the size is pinned here rather than inherited from the global rule. */
.service-card :is(h2, h3) { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: .45em; }
.service-card p { font-size: .97rem; color: var(--ink-soft); flex: 1; }
.service-card .arrow-link { margin-top: 8px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.tag {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--amber-tint); color: var(--amber);
}
@media (max-width: 780px) { .service-grid { grid-template-columns: 1fr; } }

/* ---------- Split (about) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
.split--media-right .split-media { order: 2; }
.split-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split--media-right .split-media { order: -1; }
  .split-media img { aspect-ratio: 4/5; }
}

/* Credential list */
.cred-list { list-style: none; padding: 0; margin: 0; }
.cred-list li {
  position: relative; padding-left: 30px; margin-bottom: 12px;
  font-size: .98rem; color: var(--ink-soft);
}
.cred-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
}
.cred-list li strong { color: var(--ink); font-weight: 600; }

/* ---------- Testimonials ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.quote {
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px 28px; break-inside: avoid;
}
.quote-mark {
  font-family: var(--font-display); font-size: 3.2rem; line-height: .7;
  color: var(--sand); margin-bottom: 10px; user-select: none;
}
.quote p { font-size: .98rem; color: var(--ink-soft); font-style: italic; }
.quote footer {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .9rem; font-weight: 600; color: var(--ink); font-style: normal;
}
.quote-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--forest-tint); color: var(--forest);
  display: grid; place-items: center; font-family: var(--font-display); font-size: .95rem; flex-shrink: 0;
}
@media (max-width: 940px) { .quote-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .quote-grid { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.price-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 26px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card--featured { border-color: var(--forest); box-shadow: var(--shadow); }
.price-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--forest); color: var(--white);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 16px; border-radius: var(--radius-pill); white-space: nowrap;
}
.price-name { font-family: var(--font-display); font-size: 1.22rem; margin-bottom: .15em; }
.price-sub { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.price-amount {
  font-family: var(--font-display); font-size: 3rem; font-weight: 600;
  color: var(--ink); line-height: 1; margin-bottom: .3rem;
}
.price-amount span { font-size: 1.1rem; color: var(--muted); font-family: var(--font-body); }
.price-unit { font-size: .88rem; color: var(--muted); margin-bottom: 22px; min-height: 2.6em; }
.price-features { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.price-features li {
  position: relative; padding-left: 26px; margin-bottom: 10px; font-size: .93rem; color: var(--ink-soft);
}
.price-features li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 14px; height: 8px; border-left: 2px solid var(--amber); border-bottom: 2px solid var(--amber);
  transform: rotate(-45deg);
}
.price-card .btn { width: 100%; }
@media (max-width: 1000px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .price-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.22rem); font-weight: 600;
  color: var(--ink); transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--forest); }
.faq-icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--line); position: relative; margin-top: 3px; transition: border-color .25s, background-color .25s;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--forest);
  transform: translate(-50%,-50%); transition: transform .28s var(--ease), background-color .25s;
}
.faq-icon::before { width: 11px; height: 1.5px; }
.faq-icon::after  { width: 1.5px; height: 11px; }
.faq-item[open] .faq-icon { background: var(--forest); border-color: var(--forest); }
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after { background: var(--white); }
.faq-item[open] .faq-icon::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-answer { padding-bottom: 26px; color: var(--ink-soft); font-size: 1rem; max-width: 68ch; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ---------- Blog cards ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.post-card-media { aspect-ratio: 3/2; overflow: hidden; background: var(--sand); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover .post-card-media img { transform: scale(1.05); }
.post-card-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.post-meta { font-size: .8rem; color: var(--muted); letter-spacing: .04em; margin-bottom: 10px; }
.post-card :is(h2, h3) { font-size: 1.24rem; margin-bottom: .4em; }
.post-card p { font-size: .95rem; color: var(--ink-soft); flex: 1; margin-bottom: 14px; }
@media (max-width: 940px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }

/* ---------- Article ---------- */
.article-header { padding-block: clamp(48px, 6vw, 80px) 0; }
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--forest); }
.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: .88rem; color: var(--muted); margin-top: 20px;
}
.byline strong { color: var(--ink); font-weight: 600; }
.article-hero img {
  width: 100%; aspect-ratio: 21/9; object-fit: cover;
  border-radius: var(--radius-lg); margin-block: clamp(32px, 4vw, 48px);
}
.prose { font-size: 1.09rem; line-height: 1.8; color: var(--ink-soft); }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--ink); margin-top: 2em; }
.prose h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); color: var(--ink); margin-top: 1.8em; }
.prose ul { padding-left: 1.3em; }
.prose li { margin-bottom: .6em; }
.prose strong { color: var(--ink); }
.prose a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }

.takeaways {
  background: var(--forest-tint); border-left: 4px solid var(--forest);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 28px 30px; margin-bottom: 40px;
}
.takeaways h2 {
  font-size: .82rem !important; letter-spacing: .14em; text-transform: uppercase;
  color: var(--forest-deep); font-family: var(--font-body); font-weight: 700;
  margin: 0 0 12px !important;
}
.takeaways p { margin-bottom: 0; color: var(--ink-soft); font-size: 1rem; }

.callout {
  background: var(--amber-tint); border-radius: var(--radius);
  padding: 26px 28px; margin-block: 36px;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--ink); color: var(--cream); }
.cta-band::before {
  content: ""; position: absolute; width: 620px; height: 620px; left: -180px; bottom: -340px;
  background: radial-gradient(circle, rgba(31,61,43,.42) 0%, rgba(31,61,43,0) 70%); border-radius: 50%;
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); margin-bottom: .4em; }
.cta-band p { color: rgba(247,243,234,.78); font-size: 1.12rem; max-width: 56ch; margin-inline: auto; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); }
.contact-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px;
}
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.contact-list a { color: var(--forest); text-decoration: none; font-weight: 600; }
.contact-list a:hover { text-decoration: underline; }
.contact-icon {
  width: 40px; height: 40px; border-radius: 11px; background: var(--forest-tint); color: var(--forest);
  display: grid; place-items: center; flex-shrink: 0;
}
.contact-icon svg { width: 19px; height: 19px; }
.contact-label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 2px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* Form */
.field { margin-bottom: 20px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 7px; color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 16px;
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--line); border-radius: 11px;
  transition: border-color .2s, background-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--forest); background: var(--white);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: .84rem; color: var(--muted); margin-top: 14px; }

/* ---------- Area list ---------- */
.area-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.area-chip {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 9px 18px; font-size: .92rem; color: var(--ink-soft);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(247,243,234,.72); padding-block: clamp(56px, 7vw, 80px) 32px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
/* Knock the mark back to a flat cream silhouette on the dark footer.
   invert() would mangle the green and amber; brightness(0) flattens first. */
/* No filter here. The mark is a negative-space design: the dog and
   mountains ARE the cream areas, so brightness(0) invert(1) turns every
   opaque pixel white and erases the artwork into a solid blob. */
.footer-brand img { width: 66px; height: auto; object-fit: contain; margin-bottom: 16px; border-radius: 8px; }
.footer-brand p { font-size: .93rem; max-width: 34ch; }
.site-footer .footer-heading {
  font-family: var(--font-body); font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--white); margin-bottom: 16px;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: rgba(247,243,234,.72); text-decoration: none; font-size: .94rem; transition: color .2s; }
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 28px; border-top: 1px solid rgba(247,243,234,.14);
  font-size: .86rem; color: rgba(247,243,234,.55);
}
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(247,243,234,.22); color: rgba(247,243,234,.8);
  display: grid; place-items: center; transition: background-color .2s, color .2s, border-color .2s;
}
.social-row a:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.social-row svg { width: 17px; height: 17px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-block: clamp(52px, 6vw, 88px) clamp(40px, 5vw, 64px); background: var(--cream-deep); border-bottom: 1px solid var(--line); }
.page-hero h1 { margin-bottom: .3em; }
.page-hero p { color: var(--ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 60ch; margin-bottom: 0; }

/* ---------- Booking embed ---------- */
.booking-embed {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; min-height: 680px;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .service-card:hover, .post-card:hover, .feature:hover, .price-card:hover { transform: none; }
}

/* ---------- Image focal points ----------
   Every cover-cropped image honours a per-image focal point set inline as
   style="--focal:50% 20%". The default sits above centre because faces and
   dog heads live in the upper part of almost all of these photos, and a
   dead-centre crop is what decapitated the hero on mobile. */
.hero-media img,
.split-media img,
.service-card-media img,
.post-card-media img,
.article-hero img,
.ig-tile img {
  object-position: var(--focal, 50% 32%);
}

/* ---------- Stats: 3-up variant ---------- */
.stats--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .stats--3 { grid-template-columns: 1fr; }
}

/* ---------- Reasons to work with me ----------
   Lea's original site listed these as six titles with no body copy, so this
   is built as a compact badge row rather than padded out with invented text. */
.reason-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.reason {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.reason:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.reason h3 {
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  line-height: 1.35; margin: 0; letter-spacing: 0;
}
.reason-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: var(--forest-tint); color: var(--forest);
  display: grid; place-items: center;
}
.reason-icon svg { width: 21px; height: 21px; }
@media (max-width: 900px) { .reason-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .reason-grid { grid-template-columns: 1fr; } }

/* ---------- Instagram grid ---------- */
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ig-tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); background: var(--sand);
  aspect-ratio: 1 / 1;
}
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ig-tile::after {
  content: ""; position: absolute; inset: 0;
  background: var(--forest); opacity: 0; transition: opacity .3s var(--ease);
}
.ig-tile:hover img { transform: scale(1.06); }
.ig-tile:hover::after { opacity: .18; }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Google reviews ---------- */
.rating-summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px; margin-bottom: 40px;
  font-size: 1.02rem; color: var(--ink-soft);
}
.rating-score {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 600;
  color: var(--ink); line-height: 1;
}
.rating-stars { color: var(--amber-bright); letter-spacing: .1em; font-size: 1.15rem; }

/* ---------- Video embeds ---------- */
.video-grid { display: grid; gap: 18px; margin-block: 2.5rem; }
.video-embed {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden;
  background: var(--ink); box-shadow: var(--shadow-sm);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 720px) { .video-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle { display: none; }
  body { background: #fff; }
}

/* ---------- Carousel (Google reviews, testimonials) ----------
   Works with no JavaScript: the track is a plain horizontally
   scrollable, snap-aligned list. JS only adds the arrows and dots. */
.carousel { position: relative; }

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Smoothness is driven from JS (see site.js) rather than set here.
     CSS scroll-behavior also animates direct scrollLeft assignments,
     which breaks scroll restoration and in-page anchor jumps. */
  padding: 4px 4px 10px;
  margin: -4px -4px -10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; height: 100%; }

@media (max-width: 1000px) { .carousel-track { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 700px)  { .carousel-track { grid-auto-columns: 86%; } }

.carousel-controls {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 32px;
}
.carousel-btn {
  width: 46px; height: 46px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--white); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.carousel-btn:hover:not(:disabled) {
  background: var(--forest); color: var(--white); border-color: var(--forest);
  transform: translateY(-2px);
}
.carousel-btn:disabled { opacity: .32; cursor: default; }
.carousel-btn svg { width: 18px; height: 18px; }

.carousel-dots { display: flex; align-items: center; gap: 9px; }
.carousel-dot {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer;
  transition: background-color .25s var(--ease), width .25s var(--ease);
}
.carousel-dot[aria-current="true"] { background: var(--forest); width: 26px; border-radius: 4px; }

/* Equal-height quote cards inside a carousel */
.carousel .quote { height: 100%; display: flex; flex-direction: column; margin: 0; }
.carousel .quote p { flex: 1; }

/* ---------- Google rating summary ---------- */
.rating-summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px; margin-bottom: 40px;
  font-size: .98rem; color: var(--ink-soft);
}
.rating-score {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 600;
  color: var(--ink); line-height: 1;
}
.rating-stars { color: var(--amber-bright); letter-spacing: .1em; font-size: 1.05rem; }
.rating-google {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; color: var(--ink);
}
.rating-google svg { width: 17px; height: 17px; }

/* ==========================================================================
   Forest & Brass: dark chrome, arched imagery, and the new sections.
   Appended after the base rules so these win on specificity where they
   deliberately override earlier component styles.
   ========================================================================== */

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--panel-2); color: var(--panel-ink);
  font-size: .84rem; position: relative; z-index: 101;
}
.announce-inner {
  display: flex; align-items: center; justify-content: center; gap: 10px 26px;
  flex-wrap: wrap; padding: 10px 48px 10px 28px;
  max-width: var(--wrap); margin-inline: auto;
}
.announce-item { display: inline-flex; align-items: center; gap: 8px; color: var(--panel-muted); }
.announce-item a { color: var(--panel-ink); text-decoration: none; font-weight: 500; }
.announce-item a:hover { color: var(--accent-btn); }
.announce-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-btn);
  box-shadow: 0 0 0 3px rgba(214,154,60,.22); flex-shrink: 0;
}
.announce-close {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--panel-muted);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 6px 8px;
}
.announce-close:hover { color: var(--panel-ink); }
.announce[hidden] { display: none; }
@media (max-width: 620px) { .announce-inner { font-size: .78rem; padding-right: 44px; } }

/* ---------- Header: dark and translucent ---------- */
.site-header {
  background: rgba(16,35,27,.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(246,241,231,.10);
}
.site-header.is-stuck { box-shadow: 0 6px 26px rgba(11,25,18,.30); border-bottom-color: rgba(246,241,231,.14); }
.site-header .brand-name { color: var(--panel-ink); }
.site-header .brand-tag  { color: var(--panel-muted); }
.site-header .brand img  { border-radius: 7px; }
.nav a { color: rgba(246,241,231,.80); }
.nav a:hover { color: var(--panel-ink); background: rgba(246,241,231,.08); }
.nav a[aria-current="page"] { color: var(--accent-btn); }
.nav-toggle { border-color: rgba(246,241,231,.28); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: var(--panel-ink); }
@media (max-width: 940px) {
  .nav { background: var(--panel); border-bottom-color: rgba(246,241,231,.12); }
  .nav a { border-bottom-color: rgba(246,241,231,.10); }
}

/* ---------- Arched portrait: the signature detail ---------- */
.arch img, img.arch {
  border-radius: var(--arch);
  aspect-ratio: 4/5;
  object-fit: cover;
}
@media (max-width: 720px) { .arch img, img.arch { border-radius: 160px 160px 20px 20px; } }

/* ---------- Hero on a dark panel ---------- */
.hero {
  background: var(--panel); color: var(--panel-ink);
  padding-block: clamp(56px, 8vw, 104px) clamp(64px, 8vw, 112px);
}
.hero::before {
  background: radial-gradient(circle, rgba(214,154,60,.14) 0%, rgba(214,154,60,0) 68%);
}
.hero h1 { color: var(--panel-ink); }
.hero h1 em, .hero .h-accent { color: var(--accent-btn); font-style: italic; }
.hero-lede { color: var(--panel-muted); }
.hero .eyebrow { color: var(--accent-btn); }
.hero-media img { border-radius: var(--arch); box-shadow: 0 30px 70px rgba(11,25,18,.45); }
.hero-badge { background: var(--bg); box-shadow: 0 18px 44px rgba(11,25,18,.36); }

.hero-rating {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 1.8rem; font-size: .92rem; color: var(--panel-muted);
}
.hero-rating .stars { color: var(--accent-btn); letter-spacing: .1em; }
.hero-rating strong { color: var(--panel-ink); font-weight: 600; }

@media (max-width: 900px) {
  .hero-media img { aspect-ratio: 4/5; }
  .hero-badge { left: 12px; bottom: -18px; }
}

/* ---------- Certification strip ---------- */
.certs { background: var(--bg); border-bottom: 1px solid var(--hairline); }
.certs-inner {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(28px, 5vw, 68px); flex-wrap: wrap; padding-block: 30px;
}
.cert { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.cert img { height: 50px; width: auto; object-fit: contain; }
.cert span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); max-width: 170px; }

/* ---------- Numbered value cards ---------- */
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.value {
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 26px 24px; box-shadow: var(--shadow);
}
.value-num {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 300;
  color: var(--accent); line-height: 1; margin-bottom: 12px; display: block;
}
.value h3 { font-size: 1.05rem; margin-bottom: .35em; }
.value p { font-size: .93rem; color: var(--ink-soft); margin-bottom: 0; }
@media (max-width: 560px) { .value-grid { grid-template-columns: 1fr; } }

/* ---------- Comparison: force-free vs quick fix ---------- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.compare {
  border-radius: var(--radius-lg); padding: 34px 32px;
  border: 1px solid var(--hairline); background: var(--white);
}
.compare--good { border: 1.5px solid var(--accent-btn); box-shadow: var(--shadow); }
.compare--bad  { background: transparent; border-style: dashed; }
.compare h3 { font-size: 1.25rem; margin-bottom: 1.1em; }
.compare--bad h3, .compare--bad li { color: var(--muted); }
.compare ul { list-style: none; padding: 0; margin: 0; }
.compare li {
  position: relative; padding-left: 30px; margin-bottom: 13px;
  font-size: .97rem; color: var(--ink-soft);
}
.compare--good li::before {
  content: ""; position: absolute; left: 2px; top: .42em;
  width: 13px; height: 7px; border-left: 2px solid var(--accent-btn);
  border-bottom: 2px solid var(--accent-btn); transform: rotate(-45deg);
}
.compare--bad li::before {
  content: ""; position: absolute; left: 2px; top: .72em;
  width: 12px; height: 1.5px; background: var(--muted);
}
@media (max-width: 780px) { .compare-grid { grid-template-columns: 1fr; } }

/* ---------- Credential chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 1.6rem; }
.chip {
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--radius-pill); padding: 7px 15px;
  font-size: .8rem; font-weight: 600;
}

/* ---------- Transformation story ---------- */
.story-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 1.8rem; }
.story-tile {
  border-radius: var(--radius); padding: 20px 22px;
  border: 1px solid var(--hairline); background: var(--white);
}
.story-tile--after { border-color: var(--accent-btn); background: var(--accent-soft); }
.story-tile .label {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 8px;
}
.story-tile--after .label { color: var(--accent); }
.story-tile p { font-size: .95rem; margin-bottom: 0; color: var(--ink-soft); }
@media (max-width: 560px) { .story-tiles { grid-template-columns: 1fr; } }

/* ---------- Rating pill ---------- */
.rating-pill {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill); padding: 12px 24px;
  box-shadow: var(--shadow); margin-bottom: 2.4rem;
}
.rating-pill .score {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 300; color: var(--ink); line-height: 1;
}
.rating-pill .stars { color: var(--accent-btn); letter-spacing: .08em; }
.rating-pill .meta { font-size: .88rem; color: var(--muted); }
.quote-source {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 600; color: var(--muted);
  margin-left: auto;
}
.quote-source svg { width: 14px; height: 14px; }

/* ---------- Video tiles ---------- */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.video-tile {
  position: relative; display: block; aspect-ratio: 16/9; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--hairline);
  background: var(--bg-alt); text-decoration: none;
}
.video-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.video-tile:hover img { transform: scale(1.04); }
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(214,154,60,.94); color: var(--accent-ink);
  display: grid; place-items: center; transition: transform .3s var(--ease);
}
.video-tile:hover .video-play { transform: scale(1.08); }
.video-play svg { width: 22px; height: 22px; margin-left: 3px; }
.video-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 20px 16px;
  background: linear-gradient(to top, rgba(11,25,18,.82), transparent);
  color: var(--panel-ink); font-size: .92rem; font-weight: 500;
}

/* ---------- Lead magnet ---------- */
.lead-band { background: var(--accent-soft); }
.lead-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.lead-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.6rem; }
.lead-form input {
  flex: 1 1 240px; padding: 15px 18px; font-family: inherit; font-size: 1rem;
  border: 1.5px solid var(--hairline-2); border-radius: var(--radius-pill);
  background: var(--white); color: var(--ink);
}
.lead-form input:focus { outline: none; border-color: var(--accent-btn); }
@media (max-width: 820px) { .lead-inner { grid-template-columns: 1fr; } }

/* ---------- Booking block ---------- */
.booking-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 4vw, 56px); align-items: start; }
.next-steps { list-style: none; padding: 0; margin: 0 0 2rem; counter-reset: step; }
.next-steps li {
  counter-increment: step; position: relative; padding-left: 52px; margin-bottom: 24px;
}
.next-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-display); font-size: 1rem; font-weight: 500;
  display: grid; place-items: center;
}
.next-steps h3 { font-size: 1.02rem; margin-bottom: .25em; }
.next-steps p { font-size: .94rem; color: var(--ink-soft); margin-bottom: 0; }
@media (max-width: 880px) { .booking-grid { grid-template-columns: 1fr; } }

/* ---------- Featured pricing card goes dark ---------- */
.price-card--featured {
  background: var(--panel); border-color: var(--panel);
  color: var(--panel-ink); box-shadow: var(--shadow-lg);
}
.price-card--featured .price-name,
.price-card--featured .price-amount { color: var(--panel-ink); }
.price-card--featured .price-sub,
.price-card--featured .price-unit,
.price-card--featured .price-amount span { color: var(--panel-muted); }
.price-card--featured .price-features li { color: rgba(246,241,231,.86); }
.price-card--featured .price-features li::before {
  border-left-color: var(--accent-btn); border-bottom-color: var(--accent-btn);
}
.price-flag { background: var(--accent-btn); color: var(--accent-ink); }

/* ---------- FAQ in brass ---------- */
.faq-item { border-bottom-color: var(--hairline-2); }
.faq-item summary { font-weight: 400; }
.faq-item summary:hover { color: var(--accent); }
.faq-icon { border-color: var(--hairline-2); }
.faq-icon::before, .faq-icon::after { background: var(--accent); }
.faq-item[open] .faq-icon { background: var(--accent); border-color: var(--accent); }

/* ---------- CTA + footer ---------- */
.cta-band { background: var(--panel); }
.cta-band::before { background: radial-gradient(circle, rgba(214,154,60,.30) 0%, rgba(214,154,60,0) 70%); }
.cta-band h2 { color: var(--panel-ink); }
.cta-band h2 .h-accent { color: var(--accent-btn); }
.cta-band p { color: var(--panel-muted); }

.site-footer { background: var(--panel-2); color: var(--panel-muted); }
.site-footer .footer-heading { color: var(--panel-ink); }
.footer-links a { color: var(--panel-muted); }
.footer-links a:hover { color: var(--accent-btn); }
.footer-bottom { border-top-color: rgba(246,241,231,.12); color: rgba(246,241,231,.45); }
.social-row a { border-color: rgba(246,241,231,.22); color: rgba(246,241,231,.80); }
.social-row a:hover { background: var(--accent-btn); color: var(--accent-ink); border-color: var(--accent-btn); }
.footer-rating {
  display: flex; align-items: center; gap: 9px; margin-top: 16px;
  font-size: .86rem; color: var(--panel-muted);
}
.footer-rating .stars { color: var(--accent-btn); letter-spacing: .08em; }

/* ---------- Placeholder marker ----------
   Sections that are styled but not yet wired to real data. Visible in the
   page so an unwired section can never be mistaken for a live one. */
.placeholder-note {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px dashed var(--accent-btn); border-radius: var(--radius-pill);
  padding: 7px 16px; font-size: .78rem; font-weight: 600;
  margin-bottom: 1.4rem;
}
.section--panel .placeholder-note {
  background: rgba(214,154,60,.14); color: var(--accent-btn);
}

/* ---------- Reveal stagger ---------- */
.reveal { transform: translateY(10px); transition-duration: .8s; }

/* ---------- Dark panel text, stated last so it wins over .section-head p,
   which has equal specificity and would otherwise paint --ink-soft onto a
   dark background. ---------- */
.section--panel p,
.section--ink p,
.section--panel .section-head p,
.section--ink .section-head p,
.section--panel .lede,
.section--ink .lede { color: var(--panel-muted); }
.section--panel .arrow-link,
.section--ink .arrow-link { color: var(--accent-btn); }

/* ---------- Outline buttons sitting on dark panels ---------- */
.hero .btn--outline,
.cta-band .btn--outline,
.section--ink .btn--outline,
.section--panel .btn--outline {
  border-color: rgba(246,241,231,.34);
  color: var(--panel-ink);
  background: transparent;
}
.hero .btn--outline:hover,
.cta-band .btn--outline:hover,
.section--ink .btn--outline:hover,
.section--panel .btn--outline:hover {
  background: var(--panel-ink);
  color: var(--panel);
  border-color: var(--panel-ink);
}

/* The quick-fix column is deliberately de-emphasised, but its heading still
   has to be readable, so it uses ink-soft rather than muted. */
.compare--bad h3 { color: var(--ink-soft); }

/* The hero's own border-radius rule appears later in this file than the
   arch media query, and a media query adds no specificity, so the mobile
   override has to be restated here to win. A 220px arch on a 375px screen
   swallows most of the photo. */
@media (max-width: 720px) {
  .arch img,
  img.arch,
  .hero-media img { border-radius: 96px 96px 20px 20px; }
}

/* On a 319px-wide phone the 150px arch was a near-full dome (the two top
   radii summing to 300px), which pushed the subject down and read as dead
   space above her. 96px still reads as an arch at this width. */
@media (max-width: 720px) {
  .arch img,
  img.arch,
  .hero-media img { border-radius: 96px 96px 20px 20px; }
}

/* The award badge floats over the photo on desktop, where it lands on empty
   background. At phone width it covered the bottom 65px, which is exactly
   where the dog is, so it sits below the photo instead. */
@media (max-width: 900px) {
  .hero-media { margin-bottom: 0; }
  .hero-badge {
    position: static;
    margin: 16px auto 0;
    max-width: 300px;
  }
}

/* Split images are portrait photography. Forcing 3/2 on phones discarded
   44-56% of their height, which pushed the subject to the bottom edge and
   clipped it. 4/5 matches the sources: the magnolia and beach shots are
   exactly 4/5 so they crop not at all, and nothing else loses a subject.
   Restated last because a media query adds no specificity and the base
   .split-media img rule appears later in this file. */
@media (max-width: 880px) {
  .split-media img { aspect-ratio: 4/5; }
}

/* ---------- Contact form: honeypot and status ----------
   The honeypot is hidden from people but still reachable by a bot filling
   every input. It must not use display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: .93rem;
}
.form-status.is-ok    { background: var(--accent-soft); color: var(--accent); }
.form-status.is-error { background: #F6E4E0; color: #8C3A28; }
.form-status[hidden]  { display: none; }

/* The featured pricing card went dark when "Most popular" moved to the
   three-session package, and its outline button kept dark ink on the dark
   panel: about 1:1, effectively invisible. Gold is the right answer rather
   than merely a legible outline, since the most-popular card should carry
   the strongest call to action on the page. */
.price-card--featured .btn--outline {
  background: var(--accent-btn);
  color: var(--accent-ink);
  border-color: var(--accent-btn);
}
.price-card--featured .btn--outline:hover {
  background: var(--accent-btn-2);
  border-color: var(--accent-btn-2);
}

/* ---------- Note under the pricing grid ---------- */
.price-note {
  max-width: 62ch;
  margin: clamp(32px, 4vw, 48px) auto 0;
  text-align: center;
}
.price-note p { color: var(--ink-soft); font-size: .98rem; margin-bottom: .7em; }
.price-note p:last-child { margin-bottom: 0; }
.price-note a {
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.section--cream .price-note p { color: var(--ink-soft); }