/* ============================================================
   EPIC HORIZONS — animations.css
   10 signature animations. Mobile-first. Professional.
   Respects prefers-reduced-motion.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ════════════════════════════════════════════════════════════
   KEYFRAMES
   ════════════════════════════════════════════════════════════ */

/* Grass grow — clip rect rises from bottom of the grass SVG */
@keyframes grassClipGrow {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0% 0 0 0); }
}

/* Slot machine individual digit flash */
@keyframes slotSpin {
  0%        { opacity: 0.3; transform: translateY(-6px); }
  50%       { opacity: 1;   transform: translateY(0); }
  100%      { opacity: 0.3; transform: translateY(6px); }
}

/* Stat num lock-in — final number snaps with a quick scale */
@keyframes statLock {
  0%   { transform: scale(0.85); opacity: 0.6; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* Card 3D tilt reset — smooth spring back */
@keyframes tiltReset {
  from { }
  to   { transform: perspective(800px) rotateX(0deg) rotateY(0deg) scale(1); }
}

/* Receipt step slide-down — each step prints from above */
@keyframes receiptPrint {
  from { opacity: 0; transform: translateY(-18px) scaleY(0.85); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: translateY(0)    scaleY(1);    clip-path: inset(0 0 0% 0); }
}

/* Leaf particle arc */
@keyframes leafArc {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--lx), var(--ly)) rotate(var(--lr)) scale(0.4); }
}

/* Star drop-in — single star falls into place */
@keyframes starDrop {
  from { opacity: 0; transform: translateY(-8px) scale(0.5); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* CTA glow breathe */
@keyframes glowBreathe {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%       { opacity: 0.32; transform: scale(1.25); }
}

/* Field note active pulse */
@keyframes notePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(92, 138, 46, 0); }
  50%       { box-shadow: 0 0 0 6px rgba(92, 138, 46, 0.18); }
}

/* Generic fade up — kept for elements that just need to appear */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slide in from left */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Slide in from right */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Scale up */
@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* Card wobble */
@keyframes cardWobble {
  0%, 100% { transform: perspective(800px) rotateZ(0deg); }
  20%       { transform: perspective(800px) rotateZ(-1.8deg); }
  60%       { transform: perspective(800px) rotateZ(1.8deg); }
  80%       { transform: perspective(800px) rotateZ(-0.9deg); }
}


/* ════════════════════════════════════════════════════════════
   1. HERO GRASS GROWS UPWARD
   ════════════════════════════════════════════════════════════ */

.hero__grass svg {
  clip-path: inset(100% 0 0 0);
  animation: grassClipGrow 1.4s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* ════════════════════════════════════════════════════════════
   2. STAT COUNTER SLOT MACHINE
   Handled entirely in JS (replaces main.js count-up for
   .stat-item__num[data-target] elements when present).
   CSS only provides the lock-in snap animation.
   ════════════════════════════════════════════════════════════ */

.stat-item__num.slot-locked {
  animation: statLock 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Stat ticker entrance */
.stat-ticker {
  opacity: 0;
  animation: fadeUp 0.6s 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}


/* ════════════════════════════════════════════════════════════
   3. COMPLAINT MIRROR — 3D TILT + WOBBLE BECKONER
   Tilt driven by JS (mousemove / touchmove).
   ════════════════════════════════════════════════════════════ */

.cm-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  transform-style: preserve-3d;
}
.cm-card.cm-visible {
  opacity: 1;
  transform: translateY(0) perspective(800px) rotateX(0deg) rotateY(0deg);
}
/* JS sets inline transform for tilt; transition smooths it */
.cm-card.cm-tilt-active {
  transition: transform 0.1s linear;
}
.cm-card.cm-tilt-reset {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.cm-card.wobble {
  animation: cardWobble 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}


/* ════════════════════════════════════════════════════════════
   4. REVIEW STARS — ONE STAR AT A TIME
   JS wraps each ★ in a span; CSS animates each span.
   ════════════════════════════════════════════════════════════ */

.star-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(-8px) scale(0.5);
  transition: opacity 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.star-char.star-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* ════════════════════════════════════════════════════════════
   5. SECTION HEADINGS — simple fade-up on scroll
   Clean, professional. No overlay gimmicks.
   ════════════════════════════════════════════════════════════ */

.section-header h2 {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-header h2.h2-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ════════════════════════════════════════════════════════════
   6. SERVICE CARDS 3D HOVER TILT (desktop)
   JS handles mousemove; CSS transitions.
   ════════════════════════════════════════════════════════════ */

.service-card {
  will-change: transform;
  transform-style: preserve-3d;
  transition: transform 0.12s linear, box-shadow 0.2s ease;
}
.service-card:hover {
  /* base hover handled by style.css; tilt added by JS */
}
.service-card.tilt-reset {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Stagger entrance — piggybacked on existing .fade-in system */
.service-card.fade-in {
  transition-delay: calc(var(--stagger-i, 0) * 90ms);
}

/* Project + pillar + guarantee stagger */
.project-card.fade-in  { transition-delay: calc(var(--stagger-i, 0) * 80ms); }
.pillar-card.fade-in   { transition-delay: calc(var(--stagger-i, 0) * 120ms); }
.guarantee-card.fade-in{ transition-delay: calc(var(--stagger-i, 0) * 80ms); }


/* ════════════════════════════════════════════════════════════
   7. CTA BANNER — OLIVE BACKGROUND BREATHES
   ════════════════════════════════════════════════════════════ */

.cta-banner {
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(92,138,46,0.45) 0%, transparent 70%);
  pointer-events: none;
  animation: glowBreathe 4s ease-in-out infinite;
}

/* Banner content fades in */
.cta-banner__text,
.cta-banner__actions {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-banner.cta-visible .cta-banner__text {
  opacity: 1; transform: translateY(0); transition-delay: 0s;
}
.cta-banner.cta-visible .cta-banner__actions {
  opacity: 1; transform: translateY(0); transition-delay: 0.22s;
}


/* ════════════════════════════════════════════════════════════
   8. TIMELINE — RECEIPT PRINTING
   Each .pt-step slides down like a receipt line printing.
   ════════════════════════════════════════════════════════════ */

/* Steps start hidden (JS removes .fade-in so style.css doesn't interfere) */
.pt-step {
  opacity: 0;
}

/* Receipt animation fires when JS adds this class */
.pt-step.receipt-print {
  animation: receiptPrint 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--receipt-delay, 0s);
}

/* Timeline connector line draws down after its step prints */
.pt-step__line {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--line-delay, 0.2s);
}
.pt-step.receipt-print .pt-step__line {
  transform: scaleY(1);
}

/* Dot pings in */
.pt-step__dot {
  transform: scale(0);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--dot-delay, 0.05s);
}
.pt-step.receipt-print .pt-step__dot {
  transform: scale(1);
  opacity: 1;
}


/* ════════════════════════════════════════════════════════════
   9. YARD FINDER RESULT — LEAF CONFETTI
   Leaves injected by JS; each gets --lx --ly --lr CSS vars.
   ════════════════════════════════════════════════════════════ */

.leaf-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 1.1rem;
  line-height: 1;
  animation: leafArc var(--ldur, 1s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: var(--ldelay, 0s);
}

/* Result panel itself fades up */
.yf-result:not([hidden]) {
  animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}


/* ════════════════════════════════════════════════════════════
   10. FIELD NOTES SCROLLYTELLING
   Active note (closest to viewport center) gets glow + pulse.
   JS adds .fn-active; all others get .fn-dim.
   ════════════════════════════════════════════════════════════ */

.fieldnote__card {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.fn-dim .fieldnote__card {
  opacity: 0.45;
  transform: scale(0.98);
}
.fn-active .fieldnote__card {
  opacity: 1;
  transform: scale(1);
  animation: notePulse 2s ease-in-out 2;
  border-left: 3px solid var(--olive);
}
.fn-active .fieldnote__step {
  color: var(--olive);
  transition: color 0.3s ease;
}

/* Stagger entrance for fieldnote + flip-card */
.fieldnote.fade-in   { transition-delay: calc(var(--stagger-i, 0) * 100ms); }
.flip-card.fade-in   { transition-delay: calc(var(--stagger-i, 0) * 90ms); }


/* ════════════════════════════════════════════════════════════
   MISC SHARED ENTRANCE ANIMATIONS
   (for elements not covered by the 10 above)
   ════════════════════════════════════════════════════════════ */

/* Hero trust items */
.hero__trust-item {
  opacity: 0;
  animation: slideInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero__trust-item:nth-child(1) { animation-delay: 0.75s; }
.hero__trust-item:nth-child(2) { animation-delay: 0.9s; }
.hero__trust-item:nth-child(3) { animation-delay: 1.05s; }
.hero__trust-item:nth-child(4) { animation-delay: 1.2s; }

/* Reviews badge */
.reviews-badge {
  opacity: 0;
  animation: slideInRight 0.55s 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Yard finder tiles cascade when step is active */
.yf-step.active .problem-tile {
  opacity: 0;
  animation: scaleUp 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.yf-step.active .problem-tile:nth-child(1) { animation-delay: 0.04s; }
.yf-step.active .problem-tile:nth-child(2) { animation-delay: 0.10s; }
.yf-step.active .problem-tile:nth-child(3) { animation-delay: 0.16s; }
.yf-step.active .problem-tile:nth-child(4) { animation-delay: 0.22s; }
.yf-step.active .problem-tile:nth-child(5) { animation-delay: 0.28s; }
.yf-step.active .problem-tile:nth-child(6) { animation-delay: 0.34s; }

/* Job matcher rows */
.jm-row {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.jm-row.jm-visible { opacity: 1; transform: translateX(0); }

/* Review cards */
.testimonial-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.testimonial-card.rev-visible { opacity: 1; transform: translateY(0); }

/* Quote form groups */
#quote .form-group,
#quoteForm .form-group {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
#quote .form-group.fg-visible,
#quoteForm .form-group.fg-visible {
  opacity: 1; transform: translateY(0);
}

/* Service template — proc-card, area-link, faq-item, svc-stat__num */
.proc-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.proc-card.ps-visible { opacity: 1; transform: translateY(0); }

.area-link {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.area-link.al-visible { opacity: 1; transform: translateY(0); }

.faq-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.faq-visible { opacity: 1; transform: translateY(0); }

.svc-stat__num {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-stat__num.sn-visible { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════════════════════
   CITY TEMPLATE — specific animations
   ════════════════════════════════════════════════════════════ */

/* truth-cards: flip in from left, one by one */
@keyframes truthReveal {
  from { opacity: 0; transform: translateX(-30px) rotateY(-12deg); }
  to   { opacity: 1; transform: translateX(0) rotateY(0deg); }
}
.truth-card {
  opacity: 0;
  perspective: 600px;
}
.truth-card.tc-visible {
  animation: truthReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Severity badge stamps in after card appears */
@keyframes badgeStamp {
  0%   { transform: scale(2) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(0.9) rotate(1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.truth-card.tc-visible .truth-card__severity {
  animation: badgeStamp 0.4s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* city-bar values: pop in with stagger */
.city-bar__value {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.city-bar__value.cbv-visible { opacity: 1; transform: translateY(0); }

/* city-stat-box numbers: slot-machine handled by JS; container fades */
.city-stat-box {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.city-stat-box.csb-visible { opacity: 1; transform: translateY(0); }

/* locator tabs: ink-spread underline on active tab */
@keyframes inkSpread {
  from { transform: scaleX(0); transform-origin: left center; }
  to   { transform: scaleX(1); transform-origin: left center; }
}
.locator-tab {
  position: relative;
}
.locator-tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.locator-tab.active::after {
  transform: scaleX(1);
}

/* locator panel content fades when tab switches */
.locator-panel {
  transition: opacity 0.25s ease;
}
.locator-panel.fading { opacity: 0; }


/* ════════════════════════════════════════════════════════════
   COMBO TEMPLATE — specific animations
   ════════════════════════════════════════════════════════════ */

/* pfile accordion: slides open like pulling a folder from a cabinet */
.pfile__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
}
.pfile.open .pfile__body {
  max-height: 1200px; /* generous cap */
  opacity: 1;
}

/* pfile tab: left border grows on open */
.pfile__tab {
  position: relative;
  border-left: 3px solid transparent;
  transition: border-color 0.3s ease, padding-left 0.3s ease;
}
.pfile.open .pfile__tab {
  border-left-color: var(--olive);
  padding-left: 16px;
}

/* pfile entrance stagger */
.pfile {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.pfile.pf-visible { opacity: 1; transform: translateX(0); }

/* why-city__fact-value big numbers: counted by JS slot machine */
.why-city__fact-value {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.why-city__fact-value.wfv-visible { opacity: 1; transform: scale(1); }

/* more-service-card: cascade with hover lift */
.more-service-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease;
}
.more-service-card.msc-visible { opacity: 1; transform: translateY(0); }
@media (hover: hover) {
  .more-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(28,28,25,0.13);
  }
}
@media (hover: none) {
  .more-service-card:active {
    transform: scale(0.97);
    box-shadow: 0 4px 16px rgba(28,28,25,0.1);
  }
}

/* combo-bar values: count-up handled by JS; items slide up */
.combo-bar__item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.combo-bar__item.cbi-visible { opacity: 1; transform: translateY(0); }


/* ════════════════════════════════════════════════════════════
   FIELD NOTES TEMPLATE — specific animations
   ════════════════════════════════════════════════════════════ */

/* callout blocks: slide in from left margin */
.callout {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  border-left-width: 0;
}
.callout.cl-visible {
  opacity: 1;
  transform: translateX(0);
  border-left-width: 4px;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-left-width 0.4s 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* stat-pull: number counts up via JS slot machine; block scales in */
.stat-pull {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stat-pull.sp-visible { opacity: 1; transform: scale(1); }

/* compare-block rows: alternate left / right reveal */
.compare-block__row {
  opacity: 0;
}
.compare-block__row .compare-block__cell:first-child {
  transform: translateX(-16px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.compare-block__row .compare-block__cell:last-child {
  transform: translateX(16px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.compare-block__row.cbr-visible {
  opacity: 1;
}
.compare-block__row.cbr-visible .compare-block__cell {
  transform: translateX(0);
}

/* step-list items: receipt-print */
.step-list li {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.step-list li.sl-visible { opacity: 1; transform: translateY(0); }

/* pull-quote: scale from 0.95 with fade */
.pull-quote {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.pull-quote.pq-visible { opacity: 1; transform: scale(1); }

/* article-img: reveal with bottom-up clip */
.article-img {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.article-img.ai-visible { opacity: 1; }


/* ============================================================
   DENNIS — OWNER COMPONENTS
   .owner-strip   : full section on homepage
   .owner-bar     : slim band on all other templates
   ============================================================ */

/* ── Shared photo frame ── */
.owner-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--olive);
  display: block;
  flex-shrink: 0;
}

/* ── Homepage: full About Dennis strip ── */
.owner-strip {
  background: var(--warm-mid);
  border-top: 1px solid rgba(28,28,25,0.08);
  border-bottom: 1px solid rgba(28,28,25,0.08);
  padding: 64px 0;
}

.owner-strip__inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 780px;
  margin: 0 auto;
}

.owner-strip__photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.owner-strip .owner-photo {
  width: 120px;
  height: 120px;
}

.owner-strip__sig {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--near-black);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.owner-strip__content {
  flex: 1;
}

.owner-strip__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 10px;
}

.owner-strip__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: 400;
  color: var(--near-black);
  margin: 0 0 14px;
  line-height: 1.2;
}

.owner-strip__story {
  font-size: 1rem;
  line-height: 1.72;
  color: #3a3a37;
  margin: 0 0 18px;
}

.owner-strip__quote {
  font-size: 0.9rem;
  color: var(--stone);
  border-left: 3px solid var(--olive);
  padding-left: 14px;
  margin: 0;
  font-style: italic;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .owner-strip__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
  }
  .owner-strip__quote {
    text-align: left;
  }
}

/* ── All other templates: slim owner bar ── */
.owner-bar {
  background: var(--warm-mid);
  border-top: 1px solid rgba(28,28,25,0.08);
  border-bottom: 1px solid rgba(28,28,25,0.08);
  padding: 28px 0;
}

.owner-bar__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}

.owner-bar__text {
  flex: 1;
}

.owner-bar__name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--near-black);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.owner-bar__name::after {
  content: '· Owner';
  font-weight: 400;
  color: var(--stone);
  font-size: 0.8rem;
}

.owner-bar__note {
  font-size: 0.9rem;
  color: #3a3a37;
  line-height: 1.55;
  margin: 0;
}

.owner-bar__sig {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--near-black);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.7;
}

@media (max-width: 540px) {
  .owner-bar__sig { display: none; }
  .owner-bar__inner { gap: 14px; }
}

/* ── Entrance animation for both ── */
.owner-strip,
.owner-bar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.owner-strip.ob-visible,
.owner-bar.ob-visible {
  opacity: 1;
  transform: translateY(0);
}