@charset "UTF-8";
/* ==========================================================================
   THE BARKYARD CLUB — Design System v2
   Fredoka display · Poppins body · Caveat accent
   Principles: the dogs are the heroes · pastel variety over green monotony ·
   one spacing scale · art-directed crops · motion that never blocks reading
   ========================================================================== */

/* ---------- 1. Fonts ---------- */
@font-face{font-family:"Fredoka";src:url("../fonts/Fredoka.woff2") format("woff2");font-weight:300 700;font-display:swap;font-style:normal}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Regular.woff2") format("woff2");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Medium.woff2") format("woff2");font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Bold.woff2") format("woff2");font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:"Caveat";src:url("../fonts/Caveat.woff2") format("woff2");font-weight:400 700;font-display:swap;font-style:normal}

/* ---------- 2. Tokens ---------- */
:root{
  /* Greens */
  --green:#1E5334;
  --green-600:#256240;
  --pine:#123B24;
  --pine-deep:#0D2A19;

  /* Neutrals */
  --cream:#F7F1E5;
  --cream-2:#FCF8F0;
  --cream-deep:#EFE4D2;
  --surface:#FFFDF8;

  /* Pastel family */
  --sage:#C3CDB9;
  --sage-mist:#E6EBDE;
  --sage-deep:#9DB093;
  --mint:#DDEDE3;
  --mint-deep:#B4D2C1;
  --sky:#DAE7ED;
  --sky-deep:#A9C8D6;
  --butter:#F8EBCE;
  --butter-deep:#E9CE96;
  --peach:#FAE1CC;
  --peach-deep:#EFBE99;
  --blush:#F5DFD4;
  --blush-deep:#E5BCA6;

  /* Accents */
  --terracotta:#C4693F;
  --terracotta-btn:#AC5430;
  --terracotta-ink:#9E4A28;
  --terracotta-soft:#E39B71;
  --tan:#C89B5A;
  --gold:#D9B77E;

  /* Semantic ink */
  --ink:#152B1D;
  --ink-soft:#3D5546;
  --ink-mute:#546A5C;
  --on-dark:#F3EEE2;
  --on-dark-soft:#BFCFC0;
  --line:rgba(30,83,52,.14);
  --line-strong:rgba(30,83,52,.24);
  --danger:#A83A2B;

  --bg:var(--cream);

  /* Spacing scale — 8pt based, used everywhere */
  --s-1:.5rem;    /* 8  */
  --s-2:.75rem;   /* 12 */
  --s-3:1rem;     /* 16 */
  --s-4:1.5rem;   /* 24 */
  --s-5:2rem;     /* 32 */
  --s-6:3rem;     /* 48 */
  --s-7:4rem;     /* 64 */
  --s-8:6rem;     /* 96 */
  --s-9:8rem;     /* 128 */
  --section-y:clamp(4rem,3rem + 6vw,8rem);
  --section-y-tight:clamp(3rem,2.5rem + 3.5vw,6rem);
  --gutter:clamp(1.15rem,.6rem + 2.4vw,3rem);
  --maxw:1280px;
  --maxw-narrow:820px;
  --maxw-wide:1520px;

  /* Type ramp */
  --fs-display:clamp(2.6rem,1.2rem + 6.2vw,6.5rem);
  --fs-h1:clamp(2.25rem,1.35rem + 3.6vw,4.5rem);
  --fs-h2:clamp(1.9rem,1.25rem + 2.6vw,3.4rem);
  --fs-h3:clamp(1.3rem,1.1rem + .95vw,1.9rem);
  --fs-h4:clamp(1.08rem,1rem + .4vw,1.3rem);
  --fs-lead:clamp(1.06rem,.99rem + .5vw,1.375rem);
  --fs-body:clamp(1rem,.97rem + .18vw,1.1rem);
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --fs-eyebrow:.75rem;

  /* Radii + shadow */
  --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:40px; --r-pill:999px;
  --r-media:clamp(20px,2.2vw,32px);
  --r-panel:clamp(26px,3.4vw,48px);
  --sh-1:0 2px 8px rgba(18,59,36,.06);
  --sh-2:0 12px 30px -12px rgba(18,59,36,.18);
  --sh-3:0 30px 70px -28px rgba(18,59,36,.32);
  --sh-4:0 44px 90px -30px rgba(18,59,36,.36);

  /* Motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.4,.44,1);
  --t-fast:.2s; --t-mid:.38s; --t-slow:.62s;

  --nav-h:78px;
}
@media (max-width:640px){ :root{ --nav-h:64px; } }

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
/* A long address or URL must never be cut off by a card edge. break-word only
   splits a word that cannot fit on its own line, so normal copy is untouched. */
body{overflow-wrap:break-word}
a[href^="mailto:"],a[href^="tel:"],a[href^="http"]{overflow-wrap:anywhere}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--fs-body);line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{margin:0;font-family:"Fredoka","Poppins",sans-serif;font-weight:600;line-height:1.06;letter-spacing:-.022em;color:var(--pine)}
h1,h2{text-wrap:balance}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3);line-height:1.15}h4{font-size:var(--fs-h4);line-height:1.25}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--green);text-decoration-color:rgba(30,83,52,.3);text-underline-offset:.22em;transition:color var(--t-fast)}
a:hover{color:var(--terracotta-ink)}
img,svg,video{max-width:100%;display:block}
img{height:auto}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px;border-radius:6px}
::selection{background:var(--terracotta);color:#fff}

/* ---------- 4. Art-directed images ----------
   Every cropped photo carries --fx (desktop focal point) and optionally
   --fxm (mobile focal point), set per photo in content.json. */
.art{object-fit:cover;object-position:var(--fx,50% 42%);width:100%;height:100%;display:block}
@media (max-width:760px){ .art{object-position:var(--fxm,var(--fx,50% 42%))} }

/* ---------- 5. Layout ---------- */
.wrap{width:100%;min-width:0;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:1}
.wrap--narrow{max-width:var(--maxw-narrow)}
.wrap--wide{max-width:var(--maxw-wide)}
.section{padding-block:var(--section-y);position:relative;isolation:isolate}
.section--tight{padding-block:var(--section-y-tight)}
.grid{display:grid;gap:clamp(1rem,.6rem + 1.6vw,2rem)}
.grid>*{min-width:0}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1060px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}
.stack>*+*{margin-top:var(--s-3)}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.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}
.skip-link{position:absolute;top:-100px;left:var(--gutter);z-index:2000;background:var(--pine);color:var(--on-dark);padding:.85rem 1.4rem;border-radius:0 0 var(--r-sm) var(--r-sm);font-weight:600;transition:top var(--t-fast)}
.skip-link:focus{top:0;color:var(--on-dark)}

/* ---------- 6. Section themes ---------- */
.t-cream{background:var(--cream)}
.t-cream2{background:var(--cream-2)}
.t-sage{background:var(--sage-mist);--ink-mute:#4A6053}
.t-mint{background:linear-gradient(172deg,#EFF7F2 0%,var(--mint) 100%);--ink-mute:#41564A}
.t-blush{background:linear-gradient(172deg,#FCF2EC 0%,var(--blush) 100%);--ink-mute:#41564A}
.t-peach{background:linear-gradient(172deg,#FDF2E8 0%,var(--peach) 100%);--ink-mute:#41564A}
.t-sky{background:linear-gradient(172deg,#EEF5F8 0%,var(--sky) 100%);--ink-mute:#41564A}
.t-butter{background:linear-gradient(172deg,#FDF8EC 0%,var(--butter) 100%);--ink-mute:#41564A}
.t-pine{background:var(--pine);color:var(--on-dark)}
.t-pine h1,.t-pine h2,.t-pine h3,.t-pine h4{color:var(--cream)}
.t-pine .lead,.t-pine p{color:var(--on-dark-soft)}
.t-pine a{color:var(--butter-deep)}
.t-pine a:hover{color:#fff}
.t-green{background:var(--green);color:var(--on-dark)}
.t-green h1,.t-green h2,.t-green h3,.t-green h4{color:var(--cream)}
.t-green p{color:var(--on-dark-soft)}

.curve-top{border-radius:var(--r-panel) var(--r-panel) 0 0}
.curve-bot{border-radius:0 0 var(--r-panel) var(--r-panel)}
.curve-all{border-radius:var(--r-panel)}

/* Organic wave divider between sections */
.wave{display:block;width:100%;height:clamp(34px,4.5vw,78px);position:relative;z-index:2;line-height:0;pointer-events:none}
.wave svg{display:block;width:100%;height:100%}
.wave--up{margin-bottom:-1px}
.wave--down{margin-top:-1px;transform:scaleY(-1)}

/* ---------- 7. Typography helpers ---------- */
.eyebrow{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terracotta-ink);margin:0 0 var(--s-3);display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;flex:none;border-radius:2px}
.center .eyebrow,.eyebrow--center{justify-content:center}
.t-pine .eyebrow,.t-green .eyebrow{color:var(--gold)}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-soft);font-weight:400}
.t-pine .lead{color:var(--on-dark-soft)}
.script{font-family:"Caveat",cursive;font-size:clamp(1.4rem,1.1rem + 1.1vw,2.15rem);color:var(--terracotta-ink);line-height:1.2;font-weight:600}
.t-pine .script,.t-green .script{color:var(--butter-deep)}
.tiny{font-size:var(--fs-xs);color:var(--ink-mute);line-height:1.55}
.t-pine .tiny{color:rgba(191,207,192,.85)}
.hl{color:var(--terracotta)}
.t-pine .hl,.t-green .hl{color:var(--terracotta-soft)}
.measure{max-width:60ch}

/* ---------- 8. Buttons ---------- */
.btn{
  --btn-bg:var(--terracotta-btn);--btn-fg:#fff;--btn-bd:transparent;
  max-width:100%;overflow-wrap:break-word;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.85rem;min-height:56px;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);border:2px solid var(--btn-bd);
  font-weight:600;font-size:1rem;line-height:1.25;text-align:center;text-decoration:none;
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out),background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  box-shadow:0 10px 22px -12px rgba(172,84,48,.75);
  will-change:transform;isolation:isolate;overflow:hidden;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(120% 140% at 50% 120%,rgba(255,255,255,.28),transparent 60%);
  opacity:0;transition:opacity var(--t-mid) var(--e-out);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 34px -14px rgba(172,84,48,.8);color:var(--btn-fg)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(-1px) scale(.985)}
.btn .btn-ico{width:18px;height:18px;flex:none;transition:transform var(--t-mid) var(--e-out)}
.btn:hover .btn-ico{transform:translateX(4px)}
.btn .btn-paw{width:16px;height:16px;flex:none;opacity:.45;transform:rotate(-14deg);transition:opacity var(--t-mid),transform var(--t-mid) var(--e-spring)}
.btn:hover .btn-paw{opacity:1;transform:rotate(6deg) scale(1.1)}
.btn--lg{padding:1.15rem 2.3rem;min-height:64px;font-size:1.06rem}
.btn--sm{padding:.7rem 1.3rem;min-height:44px;font-size:.9375rem}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--pine);--btn-bd:var(--line-strong);box-shadow:none}
.btn--ghost:hover{--btn-bg:var(--pine);--btn-fg:var(--cream);--btn-bd:var(--pine);box-shadow:var(--sh-2)}
.btn--green{--btn-bg:var(--green);box-shadow:0 10px 22px -12px rgba(30,83,52,.7)}
.btn--green:hover{--btn-bg:var(--pine);box-shadow:0 18px 34px -14px rgba(18,59,36,.8)}
.btn--cream{--btn-bg:var(--cream);--btn-fg:var(--pine);box-shadow:0 10px 22px -14px rgba(0,0,0,.5)}
.btn--cream:hover{--btn-bg:#fff;--btn-fg:var(--pine)}
.btn--onDark{--btn-bg:transparent;--btn-fg:var(--cream);--btn-bd:rgba(243,238,226,.42);box-shadow:none}
.btn--onDark:hover{--btn-bg:var(--cream);--btn-fg:var(--pine);--btn-bd:var(--cream)}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.t-pine a.btn,.t-green a.btn,.t-pine a.btn:hover,.t-green a.btn:hover,.footer a.btn,.cta-band a.btn,.drawer a.btn{color:var(--btn-fg)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem}
.center .btn-row,.btn-row--center{justify-content:center}

.link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;text-decoration:none;color:var(--green);padding-block:.55rem;min-height:44px}
.link-arrow svg{width:17px;height:17px;flex:none;transition:transform var(--t-mid) var(--e-out)}
.link-arrow:hover svg{transform:translateX(5px)}
.t-pine .link-arrow{color:var(--butter-deep)}

/* ---------- 9. Header ---------- */
.announce{
  background:var(--pine);color:var(--on-dark);font-size:var(--fs-xs);
  padding:.3rem var(--gutter);display:flex;justify-content:center;align-items:center;gap:.7rem;
  flex-wrap:wrap;text-align:center;line-height:1.35;position:relative;z-index:60;
}
.announce a{color:var(--butter-deep);font-weight:600;text-decoration:underline;text-underline-offset:.2em;display:inline-flex;align-items:center;padding:.35rem .6rem;min-height:44px}
.announce a:hover{color:#fff}
.announce[hidden]{display:none}
@media (max-width:560px){.announce{font-size:.79rem;padding:.45rem .8rem;gap:.45rem}}

.site-header{position:sticky;top:0;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:transform .45s var(--e-out),background var(--t-mid),border-color var(--t-mid),box-shadow var(--t-mid)}
.site-header.is-hidden{transform:translateY(-104%)}
.nav{
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:var(--maxw-wide);margin-inline:auto;
  padding-inline:var(--gutter);
}
.site-header.is-stuck{
  background:rgba(247,241,229,.92);backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);
  border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(18,59,36,.5);
}
.nav__brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none;min-width:0}
.nav__brand img{width:auto;height:clamp(42px,3.6vw,56px);transition:height var(--t-mid) var(--e-out),transform var(--t-mid) var(--e-spring)}
.nav__logo--rev{display:none;border-radius:50%}
body.no-scroll .nav__logo{display:none}
body.no-scroll .nav__logo--rev{display:block;height:clamp(44px,4vw,54px)}
.site-header.is-stuck .nav__brand img{height:clamp(38px,3.1vw,48px)}
.nav__brand:hover img{transform:scale(1.05) rotate(-1.5deg)}
.nav__menu{display:flex;align-items:center;gap:clamp(.1rem,.5vw,.5rem);list-style:none}
.nav__menu a{
  display:block;padding:.6rem .7rem;border-radius:var(--r-pill);text-decoration:none;
  font-size:.9375rem;font-weight:500;color:var(--ink-soft);position:relative;white-space:nowrap;
  transition:color var(--t-fast);
}
.nav__menu a::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.34rem;height:2px;border-radius:2px;
  background:var(--terracotta);transform:scaleX(0);transform-origin:left;transition:transform var(--t-mid) var(--e-out);
}
.nav__menu a:hover{color:var(--pine)}
.nav__menu a:hover::after,.nav__menu a[aria-current="page"]::after{transform:scaleX(1)}
.nav__menu a[aria-current="page"]{color:var(--pine);font-weight:600}
.nav__actions{display:flex;align-items:center;gap:.5rem;flex:none}
.nav__phone{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.9375rem;text-decoration:none;color:var(--pine);padding:.55rem .65rem;border-radius:var(--r-pill);min-height:44px}
.nav__phone svg{width:17px;height:17px}
.nav__phone:hover{background:rgba(30,83,52,.08);color:var(--green)}
@media (max-width:1400px){.nav__phone{display:none}}
@media (max-width:1340px){.nav__menu a{padding:.6rem .48rem;font-size:.875rem}}
@media (max-width:1120px){.nav__menu{display:none}}

.nav__toggle{display:none;width:48px;height:48px;border-radius:var(--r-pill);align-items:center;justify-content:center;border:1.5px solid var(--line-strong);background:rgba(255,253,248,.7)}
.nav__toggle span{display:block;width:20px;height:2px;background:var(--pine);border-radius:2px;position:relative;transition:background .2s}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--pine);border-radius:2px;transition:transform var(--t-mid) var(--e-out),top var(--t-fast)}
.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{top:0;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media (max-width:1120px){.nav__toggle{display:inline-flex}.nav__actions .btn{display:none}}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--pine);color:var(--on-dark);
  display:flex;flex-direction:column;padding:calc(var(--nav-h) + 1rem) var(--gutter) 1.25rem;
  clip-path:circle(0% at calc(100% - 46px) 44px);
  transition:clip-path .6s var(--e-inout);visibility:hidden;overflow-y:auto;overscroll-behavior:contain;
}
.drawer.is-open{clip-path:circle(150% at calc(100% - 46px) 44px);visibility:visible}
.drawer__paws{position:absolute;inset:0;pointer-events:none;opacity:.1;z-index:0;color:var(--cream);overflow:hidden}
.drawer__paws svg{position:absolute;width:clamp(50px,11vw,104px);height:auto}
.drawer__inner{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-height:0}
.drawer__list{list-style:none;display:flex;flex-direction:column;gap:0;margin:auto 0}
.drawer__list a{
  display:flex;align-items:baseline;gap:.85rem;text-decoration:none;color:var(--cream);
  font-family:"Fredoka",sans-serif;font-size:clamp(1.45rem,.95rem + 3vw,2.4rem);font-weight:500;line-height:1.25;
  padding:.42rem 0;min-height:46px;opacity:0;transform:translateY(18px);
}
.drawer.is-open .drawer__list a{animation:drawerIn .45s var(--e-out) forwards}
.drawer__list li:nth-child(1) a{animation-delay:.06s}
.drawer__list li:nth-child(2) a{animation-delay:.10s}
.drawer__list li:nth-child(3) a{animation-delay:.14s}
.drawer__list li:nth-child(4) a{animation-delay:.18s}
.drawer__list li:nth-child(5) a{animation-delay:.22s}
.drawer__list li:nth-child(6) a{animation-delay:.26s}
.drawer__list li:nth-child(7) a{animation-delay:.30s}
.drawer__list li:nth-child(8) a{animation-delay:.34s}
.drawer__list li:nth-child(9) a{animation-delay:.38s}
.drawer__list li:nth-child(10) a{animation-delay:.42s}
@keyframes drawerIn{to{opacity:1;transform:none}}
.drawer__list a span{font-family:"Poppins",sans-serif;font-size:.68rem;letter-spacing:.16em;color:var(--gold);font-weight:600}
.drawer__list a:hover,.drawer__list a[aria-current="page"]{color:var(--terracotta-soft)}
.drawer__foot{display:flex;flex-direction:column;gap:.7rem;padding-top:1.1rem;border-top:1px solid rgba(243,238,226,.16);opacity:0;transform:translateY(14px)}
.drawer.is-open .drawer__foot{animation:drawerIn .45s .44s var(--e-out) forwards}
.drawer__foot .btn{width:100%}
.drawer__meta{display:flex;align-items:center;justify-content:space-between;gap:.25rem 1rem;font-size:.75rem;color:var(--on-dark-soft);flex-wrap:wrap}
.drawer__meta a{display:inline-flex;align-items:center;min-height:44px}
body.no-scroll{overflow:hidden}

/* Mobile sticky action bar */
.mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  grid-template-columns:1fr 1fr 1.4fr;background:rgba(18,59,36,.97);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:.35rem .35rem calc(.35rem + env(safe-area-inset-bottom));gap:.3rem;
  box-shadow:0 -8px 30px -18px rgba(0,0,0,.8);
  transform:translateY(110%);transition:transform .45s var(--e-out);
}
.mobilebar.is-in{transform:none}
.mobilebar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;
  padding:.45rem .25rem;border-radius:14px;text-decoration:none;color:var(--on-dark-soft);
  font-size:.68rem;font-weight:600;min-height:48px;line-height:1.1;text-align:center;
}
.mobilebar a svg{width:18px;height:18px}
.mobilebar a.is-primary{background:var(--terracotta-btn);color:#fff;font-size:.8125rem}
.mobilebar a:active{transform:scale(.97)}
@media (max-width:900px){.mobilebar{display:grid}}

/* ---------- 10. Hero ---------- */
.hero{position:relative;overflow:clip;background:var(--cream);padding-block:clamp(1rem,.3rem + 2.4vw,2.4rem) clamp(2.5rem,1.6rem + 5vw,5.5rem)}
.hero__inner{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
@media (max-width:960px){.hero__inner{grid-template-columns:1fr;gap:2.5rem}}
.hero__badge{
  display:inline-flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.72);border:1px solid var(--line);
  padding:.4rem .95rem .4rem .45rem;border-radius:var(--r-pill);font-size:.8125rem;font-weight:600;color:var(--pine);
  box-shadow:var(--sh-1);margin-bottom:var(--s-2)
}
.hero__badge img{width:28px;height:28px;border-radius:50%}
.hero__badge .dot{width:8px;height:8px;border-radius:50%;background:var(--terracotta);flex:none;margin-left:.3rem;position:relative}
.hero__badge .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--terracotta);opacity:.45;animation:pulseRing 2.6s ease-out infinite}
@keyframes pulseRing{0%{transform:scale(.7);opacity:.6}100%{transform:scale(1.5);opacity:0}}
.hero__title{font-size:var(--fs-display);line-height:.95;letter-spacing:-.032em;margin-bottom:var(--s-2)}
/* The reveal mask has to clip the line as it slides up, but line-height:.95
   makes the box shorter than the glyphs, so descenders (y, g, p) were being
   cut off. The padding gives the ink room inside the mask and the matching
   negative margin puts the line rhythm back exactly as it was. */
.hero__title .l{display:block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.24em}
.hero__title .l>span{display:block;transform:translateY(105%);animation:lineUp .8s var(--e-out) forwards}
.hero__title .l:nth-child(1)>span{animation-delay:.04s}
.hero__title .l:nth-child(2)>span{animation-delay:.11s}
.hero__title .l:nth-child(3)>span{animation-delay:.18s}
@keyframes lineUp{to{transform:none}}
.hero__sub{max-width:42ch;margin-bottom:var(--s-3);opacity:0;animation:fadeUp .65s .3s var(--e-out) forwards}
.hero__cta{opacity:0;animation:fadeUp .65s .38s var(--e-out) forwards}
/* On a phone the two hero buttons stack, so they match width instead of
   ending at two different points. */
@media (max-width:560px){
  .hero__cta{display:flex;flex-direction:column;align-items:stretch;gap:.65rem}
  .hero__cta .btn{width:100%}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.hero__offer{
  display:inline-flex;align-items:center;gap:1rem;margin-top:var(--s-3);padding:.75rem 1.4rem .75rem .85rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--sh-2);
  opacity:0;animation:fadeUp .65s .46s var(--e-out) forwards
}
.hero__offer .price{
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--terracotta-btn);color:#fff;
  font-family:"Fredoka",sans-serif;font-size:1.35rem;font-weight:600;flex:none;box-shadow:0 8px 18px -10px rgba(172,84,48,.9)
}
.hero__offer .txt strong{display:block;font-family:"Fredoka",sans-serif;font-size:1.05rem;color:var(--pine);line-height:1.2;font-weight:600}
.hero__offer .txt span{font-size:.8125rem;color:var(--ink-mute)}

.hero__media{position:relative}
.hero__frame{
  position:relative;border-radius:var(--r-panel) var(--r-panel) 0 0;overflow:hidden;
  aspect-ratio:4/5;background:var(--sage-mist)
}
.hero__frame img{transform:scale(1.06);will-change:transform}
.hero__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(198deg,transparent 84%,rgba(13,42,25,.12));pointer-events:none}
/* Hero composition.
   The photograph and its proof strip are one card with one shadow, so the
   value propositions read as a caption rather than as badges dropped on top of
   the picture. Nothing overlaps a dog: the only element on the image is the
   club badge, and it sits in the sky at the top corner. Because the strip is a
   grid, the items cannot collide, their padding and type are shared, and the
   layout reflows by changing the column count rather than by moving anything. */
.hero__card{
  position:relative;border-radius:var(--r-panel);background:var(--surface);
  box-shadow:var(--sh-4);
  transform:translateY(22px) scale(.985);opacity:0;animation:fadeUp .9s .14s var(--e-out) forwards
}
.hero__proof{
  list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);border-radius:0 0 var(--r-panel) var(--r-panel);
  overflow:hidden
}
.hero__proof li{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.45rem;
  text-align:center;text-wrap:balance;
  padding:clamp(.75rem,.55rem + .6vw,1.05rem) clamp(.4rem,.25rem + .45vw,.8rem);
  font-size:clamp(.8125rem,.75rem + .18vw,.875rem);font-weight:600;color:var(--pine);
  line-height:1.3;min-width:0
}
.hero__proof li + li{border-left:1px solid var(--line)}
.hero__proof span{min-width:0}
/* shared pastel icon chip, also used by the proof strip */
.pi{display:grid;place-items:center;flex:none;border-radius:11px;
  width:clamp(26px,1.3rem + .9vw,32px);height:clamp(26px,1.3rem + .9vw,32px);
  background:var(--sage-mist);color:var(--pine)}
.pi svg{width:clamp(14px,.75rem + .35vw,17px);height:auto;display:block}
.pi--butter{background:var(--butter);color:var(--terracotta-ink)}
.pi--sage{background:var(--sage-mist);color:var(--pine)}
.pi--sky{background:var(--sky);color:var(--pine)}

/* On the narrowest phones three columns leave about 90px per label, which
   would mean shrinking the type. The strip becomes a short list instead, so
   the text stays a comfortable size. */
@media (max-width:440px){
  .hero__proof{grid-template-columns:1fr}
  .hero__proof li{
    flex-direction:row;justify-content:flex-start;text-align:left;gap:.65rem;
    padding:.6rem .95rem;font-size:.8125rem
  }
  .hero__proof li + li{border-left:0;border-top:1px solid var(--line)}
}

/* The club badge is the one element allowed on the photograph. It is tucked
   into the top corner, where this picture is sky, and overhangs the card just
   enough to read as a seal rather than a sticker. */
.hero__medallion{
  position:absolute;z-index:4;height:auto;
  width:clamp(72px,7.4vw,108px);
  right:clamp(-10px,-0.4vw,-6px);top:clamp(-14px,-1vw,-10px);
  filter:drop-shadow(0 14px 26px rgba(18,59,36,.3));
  animation:floaty 7s ease-in-out infinite
}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-11px) rotate(2deg)}}
.hero__blob{position:absolute;border-radius:50%;z-index:0;pointer-events:none}
.hero__blob--1{width:clamp(280px,34vw,540px);aspect-ratio:1;background:var(--mint);left:-14%;top:-16%;opacity:.75}
.hero__blob--2{width:clamp(200px,22vw,360px);aspect-ratio:1;background:var(--peach);right:-8%;bottom:-14%;opacity:.7}
.hero__blob--3{width:clamp(120px,12vw,200px);aspect-ratio:1;background:var(--butter);left:44%;bottom:-9%;opacity:.6}

.scroll-cue{display:flex;align-items:center;gap:.7rem;margin-top:var(--s-4);color:var(--ink-mute);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:600;opacity:0;animation:fadeUp .65s .6s var(--e-out) forwards}
.scroll-cue .rail{width:34px;height:2px;background:var(--line-strong);border-radius:2px;overflow:hidden;position:relative}
.scroll-cue .rail::after{content:"";position:absolute;inset:0;background:var(--terracotta);transform:translateX(-100%);animation:railRun 2.2s var(--e-inout) infinite}
@keyframes railRun{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* Interior page hero */
.phero{position:relative;overflow:clip;padding-block:clamp(1.25rem,.5rem + 2.5vw,2.5rem) clamp(2.5rem,1.5rem + 4.5vw,5rem)}
.phero h1{font-size:clamp(2.1rem,1.3rem + 2.9vw,3.6rem)}
.phero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.75rem,1rem + 3.5vw,4rem);align-items:center}
@media (max-width:920px){.phero__inner{grid-template-columns:1fr}}
.phero .hero__blob{opacity:.5}
.phero .hero__blob--1{top:-28%;left:-24%}
.phero .hero__blob--2{bottom:-22%;right:-14%}
@media (max-width:760px){.phero .hero__blob{opacity:.36}}
.phero__media{border-radius:var(--r-panel);overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:1/1;background:var(--sage-mist)}
@media (max-width:920px){.phero__media{aspect-ratio:4/3}}
@media (max-width:560px){.phero__media{aspect-ratio:4/5}}
.phero__price{display:inline-flex;align-items:baseline;gap:.55rem;margin-top:var(--s-3);font-family:"Fredoka",sans-serif;color:var(--pine);flex-wrap:wrap}
.phero__price b{font-size:clamp(2.4rem,1.6rem + 2.6vw,3.4rem);line-height:1;color:var(--terracotta);font-weight:600}
.phero__price span{font-size:1rem;font-family:"Poppins",sans-serif;color:var(--ink-mute)}

.crumbs{font-size:var(--fs-xs);color:var(--ink-mute);padding-top:.5rem;padding-bottom:.75rem;position:relative;z-index:3}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.crumbs a{text-decoration:none;color:var(--ink-mute);display:inline-block;padding:.55rem .1rem;min-height:34px}
.crumbs a:hover{color:var(--terracotta-ink)}
.crumbs li+li::before{content:"›";margin-right:.4rem;opacity:.55}
.crumbs [aria-current]{color:var(--pine);font-weight:600;padding-block:.55rem;display:inline-block}

/* ---------- 11. Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.4rem,1rem + 1.2vw,2.2rem);
  position:relative;overflow:hidden;transition:transform var(--t-mid) var(--e-out),box-shadow var(--t-mid) var(--e-out),border-color var(--t-mid);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:transparent}
.card__ico{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;margin-bottom:var(--s-3);background:var(--sage-mist);color:var(--green);font-family:"Fredoka",sans-serif;font-size:1.1rem;font-weight:600}
.card__ico svg{width:25px;height:25px}
.card h3{margin-bottom:.55rem}
.card p{color:var(--ink-soft)}
.t-pine .card{background:rgba(255,255,255,.05);border-color:rgba(243,238,226,.14)}
.t-pine .card p{color:var(--on-dark-soft)}
.t-pine .card__ico{background:rgba(243,238,226,.1);color:var(--butter-deep)}

/* Service card */
.svc{
  --accent:var(--sage-mist);--accent-deep:var(--sage);
  position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);transition:transform var(--t-mid) var(--e-out),box-shadow var(--t-mid) var(--e-out),border-color var(--t-mid);
}
.svc--butter{--accent:var(--butter);--accent-deep:var(--butter-deep)}
.svc--sky{--accent:var(--sky);--accent-deep:var(--sky-deep)}
.svc--sage{--accent:var(--sage-mist);--accent-deep:var(--sage)}
.svc--peach{--accent:var(--peach);--accent-deep:var(--peach-deep)}
.svc--blush{--accent:var(--blush);--accent-deep:var(--blush-deep)}
.svc--mint{--accent:var(--mint);--accent-deep:var(--mint-deep)}
.svc--pine{--accent:var(--sky);--accent-deep:var(--sky-deep)}
.svc:hover,.svc:focus-within{transform:translateY(-7px);box-shadow:var(--sh-3);border-color:var(--accent-deep)}
.svc__media{aspect-ratio:4/5;overflow:hidden;position:relative;background:var(--accent)}
.svc__media img{transition:transform .8s var(--e-out)}
.svc:hover .svc__media img{transform:scale(1.055)}
.svc__tag{position:absolute;top:.9rem;left:.9rem;background:var(--accent);color:var(--pine);font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.42rem .8rem;border-radius:var(--r-pill);z-index:2}
.svc__pop{position:absolute;top:.9rem;left:.9rem;transform:translateY(calc(100% + .4rem));background:var(--terracotta-btn);color:#fff;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.42rem .8rem;border-radius:var(--r-pill);z-index:2}
.svc__body{position:relative;padding:clamp(1.25rem,1rem + .9vw,1.75rem);display:flex;flex-direction:column;gap:.65rem;flex:1}
.svc__body::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent-deep);transform:scaleX(0);transform-origin:left;transition:transform var(--t-mid) var(--e-out)}
.svc:hover .svc__body::before{transform:scaleX(1)}
.svc__price{display:flex;align-items:baseline;gap:.35rem;font-family:"Fredoka",sans-serif;margin-top:auto;padding-top:.3rem}
.svc__price b{font-size:clamp(1.7rem,1.4rem + .8vw,2.05rem);color:var(--terracotta);line-height:1;font-weight:600}
.svc__price span{font-size:.875rem;color:var(--ink-mute);font-family:"Poppins",sans-serif}
.svc__note{font-size:var(--fs-xs);color:var(--ink-mute)}
.svc__link{position:relative;min-height:calc(3.3em + 18px);align-items:flex-start}
@media (max-width:900px){.svc__link{min-height:0}}
.svc__link::after{content:"";position:absolute;inset:0;z-index:5}

/* Pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,.4rem + .9vw,1.15rem)}
@media (max-width:940px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pillars{grid-template-columns:1fr}}
.pillar{
  position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:clamp(320px,38vw,450px);
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.1rem,.8rem + .9vw,1.7rem);
  color:#fff;isolation:isolate;text-decoration:none;
  transition:transform var(--t-mid) var(--e-out),box-shadow var(--t-mid) var(--e-out);
}
.pillar:hover,.pillar:focus-visible{transform:translateY(-7px);box-shadow:var(--sh-3);color:#fff}
.pillar img{position:absolute;inset:0;z-index:-2;transition:transform .9s var(--e-out)}
.pillar:hover img{transform:scale(1.07)}
.pillar::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,42,25,.34) 0%,rgba(13,42,25,.04) 24%,rgba(13,42,25,.5) 68%,rgba(13,42,25,.9) 100%);transition:background var(--t-mid)}
.pillar:hover::after{background:linear-gradient(180deg,rgba(13,42,25,.18) 16%,rgba(13,42,25,.62) 56%,rgba(13,42,25,.94) 100%)}
.pillar__n{position:absolute;top:1rem;left:1.2rem;font-family:"Fredoka",sans-serif;font-size:.8125rem;letter-spacing:.16em;color:rgba(255,255,255,.94);font-weight:600;text-shadow:0 1px 10px rgba(13,42,25,.75)}
.pillar h3{color:#fff;font-size:clamp(1.55rem,1.2rem + 1.4vw,2.15rem);margin-bottom:.15rem;text-shadow:0 2px 14px rgba(13,42,25,.45)}
.pillar .line{color:var(--butter-deep);font-size:.8125rem;font-weight:600;letter-spacing:.05em;margin-bottom:.45rem;display:block;line-height:1.35;min-height:2.7em}
@media (max-width:560px){.pillar .line{min-height:0}}
.pillar p{
  color:rgba(255,255,255,.93);font-size:.9375rem;line-height:1.55;margin:0;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--e-out),opacity .3s var(--e-out),margin .3s
}
.pillar:hover p,.pillar:focus-visible p{max-height:14rem;opacity:1;margin-top:.3rem}
.pillar .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;font-size:.8125rem;font-weight:600;color:#fff}
.pillar .more svg{width:15px;height:15px;transition:transform var(--t-mid)}
.pillar:hover .more svg{transform:translateX(4px)}
@media (hover:none){.pillar p{max-height:14rem;opacity:1;margin-top:.3rem}}

/* ---------- 12. Chooser ---------- */
.chooser{list-style:none;display:flex;flex-direction:column;gap:.55rem;counter-reset:step}
.chooser__step{
  --accent:var(--sage-mist);
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:border-color var(--t-mid) var(--e-out),box-shadow var(--t-mid) var(--e-out),background var(--t-mid)
}
.chooser__step[data-accent="butter"]{--accent:var(--butter)}
.chooser__step[data-accent="sky"]{--accent:var(--sky)}
.chooser__step[data-accent="sage"]{--accent:var(--sage-mist)}
.chooser__step[data-accent="peach"]{--accent:var(--peach)}
.chooser__step[data-accent="terracotta"]{--accent:var(--blush)}
.chooser__step.is-open{border-color:var(--green);box-shadow:var(--sh-2);background:var(--accent)}

.chooser__head{
  width:100%;display:flex;align-items:center;gap:.9rem;text-align:left;cursor:pointer;
  background:none;border:0;padding:clamp(.85rem,.7rem + .5vw,1.15rem) clamp(.9rem,.7rem + .6vw,1.3rem);
  font:inherit;color:var(--ink);min-height:64px
}
.chooser__head i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;background:var(--accent);color:var(--pine);transition:background var(--t-mid),color var(--t-mid),transform var(--t-mid) var(--e-spring)}
.chooser__head i svg{width:17px;height:17px}
.chooser__step.is-open .chooser__head i{background:var(--terracotta-btn);color:#fff;transform:scale(1.06)}
.chooser__q{flex:1;min-width:0;font-weight:600;color:var(--pine);line-height:1.35}
.chooser__tag{
  flex:none;font-family:"Fredoka",sans-serif;font-weight:600;font-size:.8125rem;color:var(--terracotta-ink);
  opacity:0;transform:translateX(-6px);transition:opacity var(--t-mid),transform var(--t-mid) var(--e-out);white-space:nowrap
}
.chooser__step.is-open .chooser__tag{opacity:1;transform:none}
.chooser__mark{
  flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-strong);position:relative;
  transition:background var(--t-mid),border-color var(--t-mid)
}
.chooser__mark::before,.chooser__mark::after{content:"";position:absolute;inset:50% 6px auto 6px;height:1.5px;background:var(--ink-mute);border-radius:2px;transform:translateY(-50%);transition:transform var(--t-mid) var(--e-out),background var(--t-mid)}
.chooser__mark::after{transform:translateY(-50%) rotate(90deg)}
.chooser__step.is-open .chooser__mark{background:var(--pine);border-color:var(--pine)}
.chooser__step.is-open .chooser__mark::before,.chooser__step.is-open .chooser__mark::after{background:var(--cream)}
.chooser__step.is-open .chooser__mark::after{transform:translateY(-50%) rotate(0deg)}
.chooser__head:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:var(--r-lg)}

/* grid-template-rows 0fr -> 1fr gives a real height transition with nothing
   to measure in JS and no jump when the content reflows */
.chooser__wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--e-out)}
.chooser__step.is-open .chooser__wrap{grid-template-rows:1fr}
.chooser__wrap>.chooser__body{overflow:hidden;min-height:0}
.chooser__body{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1rem,.7rem + 1.4vw,1.9rem);
  padding:0 clamp(.9rem,.7rem + .6vw,1.3rem) clamp(1rem,.8rem + .7vw,1.4rem);
  opacity:0;transition:opacity .3s var(--e-out) .06s
}
.chooser__step.is-open .chooser__body{opacity:1}
.chooser__media{border-radius:var(--r-md);overflow:hidden;background:var(--sage-mist);aspect-ratio:4/3}
.chooser__copy{align-self:center}
.chooser__copy h3{font-size:clamp(1.35rem,1.15rem + .9vw,1.85rem);margin-bottom:.4rem}
.chooser__copy p{color:var(--ink-soft)}
.chooser__meta{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:.8rem 0 1rem}
.chooser__meta b{font-family:"Fredoka",sans-serif;font-size:1.3rem;color:var(--terracotta-ink);font-weight:600}
.chooser__meta span{font-size:.8125rem;color:var(--ink-soft)}

/* One fixed body height on larger screens: the step that closes and the step
   that opens change by the same amount, so the page height never moves. */
/* One fixed body height on larger screens: the step that closes and the step
   that opens change by exactly the same amount, so the page height never
   moves and nothing is truncated. The min-height lives on the picture and the
   copy column, never on .chooser__body, so a collapsed row stays tight. */
@media (min-width:761px){
  .chooser{--cbody:clamp(292px,21vw,312px)}
  .chooser__media{aspect-ratio:auto;height:var(--cbody)}
  .chooser__copy{min-height:var(--cbody);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .chooser__body{align-items:center}
}
/* On a phone every card ends up open, so each one is kept compact: a shorter
   crop, tighter copy, and the decorative eyebrow dropped. */
@media (max-width:760px){
  .chooser__body{grid-template-columns:1fr;gap:.75rem}
  .chooser__media{aspect-ratio:16/9}
  .chooser__tag{display:none}
  .chooser__copy .eyebrow{display:none}
  .chooser__copy h3{margin-bottom:.3rem}
  .chooser__meta{margin:.7rem 0 .85rem}
}
@media (max-width:420px){
  .chooser__head{gap:.65rem;padding-inline:.85rem}
  .chooser__head i{width:32px;height:32px}
  .chooser__q{font-size:.9375rem}
}

/* ---------- 13. Trust band ---------- */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,.5rem + 1.2vw,1.5rem)}
@media (max-width:980px){.trust{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.trust{grid-template-columns:1fr}}
.trust__item{display:flex;gap:1rem;align-items:flex-start;padding:clamp(1.1rem,.9rem + .8vw,1.6rem);border-radius:var(--r-lg);background:rgba(255,255,255,.06);border:1px solid rgba(243,238,226,.15);transition:background var(--t-mid),transform var(--t-mid) var(--e-out)}
.trust__item:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.trust__item i{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;flex:none;background:rgba(233,206,150,.18);color:var(--butter-deep)}
.trust__item i svg{width:22px;height:22px}
.trust__item h3{font-size:1.1rem;margin-bottom:.3rem;color:var(--cream)}
.trust__item p{font-size:.9375rem;margin:0;color:var(--on-dark-soft);line-height:1.55}
/* Trust band on a light ground */
.t-cream .trust__item,.t-cream2 .trust__item,.t-sage .trust__item,.t-mint .trust__item,
.t-butter .trust__item,.t-peach .trust__item,.t-blush .trust__item,.t-sky .trust__item{
  background:var(--surface);border-color:var(--line)
}
.t-cream .trust__item:hover,.t-cream2 .trust__item:hover,.t-sage .trust__item:hover,.t-mint .trust__item:hover,
.t-butter .trust__item:hover,.t-peach .trust__item:hover,.t-blush .trust__item:hover,.t-sky .trust__item:hover{background:#fff;box-shadow:var(--sh-2)}
.t-cream .trust__item i,.t-cream2 .trust__item i,.t-sage .trust__item i,.t-mint .trust__item i,
.t-butter .trust__item i,.t-peach .trust__item i,.t-blush .trust__item i,.t-sky .trust__item i{background:var(--sage-mist);color:var(--green)}
.t-cream .trust__item h3,.t-cream2 .trust__item h3,.t-sage .trust__item h3,.t-mint .trust__item h3,
.t-butter .trust__item h3,.t-peach .trust__item h3,.t-blush .trust__item h3,.t-sky .trust__item h3{color:var(--pine)}
.t-cream .trust__item p,.t-cream2 .trust__item p,.t-sage .trust__item p,.t-mint .trust__item p,
.t-butter .trust__item p,.t-peach .trust__item p,.t-blush .trust__item p,.t-sky .trust__item p{color:var(--ink-soft)}

/* ---------- 14. Timeline ---------- */
.timeline{position:relative;max-width:980px;margin-inline:auto}
.timeline::before{
  content:"";position:absolute;left:calc(clamp(44px,5vw,62px) / 2);top:8px;bottom:8px;width:2px;
  background:var(--line-strong);border-radius:2px;
}
.timeline__fill{
  position:absolute;left:calc(clamp(44px,5vw,62px) / 2);top:8px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--terracotta),var(--tan));height:0;will-change:height;
}
@media (min-width:880px){.timeline::before,.timeline__fill{left:50%;transform:translateX(-50%)}}
.tl-item{position:relative;padding-left:clamp(64px,7vw,88px);padding-block:clamp(.5rem,.4rem + .5vw,.9rem)}
.tl-item__dot{
  position:absolute;left:0;top:calc(clamp(.5rem,.4rem + .5vw,.9rem) + 4px);width:clamp(44px,5vw,62px);height:clamp(44px,5vw,62px);
  border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line-strong);
  font-family:"Fredoka",sans-serif;font-size:.9rem;color:var(--pine);z-index:2;
  transition:background var(--t-mid),border-color var(--t-mid),color var(--t-mid),transform var(--t-mid) var(--e-spring)
}
.tl-item.is-active .tl-item__dot{background:var(--terracotta-btn);border-color:var(--terracotta-btn);color:#fff;transform:scale(1.08)}
.tl-item__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:box-shadow var(--t-mid)}
.tl-item.is-active .tl-item__card{box-shadow:var(--sh-2)}
.tl-item__txt{padding:clamp(1.1rem,.8rem + .9vw,1.6rem)}
.tl-item__time{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--terracotta-ink);margin-bottom:.3rem}
.tl-item__card figure{margin:0;aspect-ratio:4/3;background:var(--sage-mist)}
@media (min-width:880px){
  .tl-item{width:50%;padding-left:0;padding-right:clamp(50px,4vw,68px)}
  .tl-item__dot{left:auto;right:calc(clamp(44px,5vw,62px) / -2)}
  .tl-item:nth-child(even){margin-left:50%;padding-right:0;padding-left:clamp(50px,4vw,68px)}
  .tl-item:nth-child(even) .tl-item__dot{right:auto;left:calc(clamp(44px,5vw,62px) / -2)}
}

/* ---------- 15. Statistics ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,.4rem + 1.1vw,1.25rem)}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:400px){.stats{grid-template-columns:1fr}}
.stat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;
  padding:clamp(1.4rem,1.1rem + 1vw,2rem) clamp(.8rem,.65rem + .6vw,1.3rem);
  border-radius:var(--r-lg);background:rgba(255,255,255,.055);border:1px solid rgba(243,238,226,.15);
  transition:background var(--t-mid),transform var(--t-mid) var(--e-out);
}
.stat:hover{background:rgba(255,255,255,.09);transform:translateY(-4px)}
.stat__v{
  display:flex;align-items:baseline;justify-content:center;margin:0;
  font-family:"Fredoka",sans-serif;font-weight:600;line-height:.95;letter-spacing:-.03em;
  font-size:clamp(2.8rem,1.9rem + 3vw,4.2rem);color:var(--butter-deep);
  font-variant-numeric:tabular-nums;
}
.stat__u{font-size:.52em;font-weight:600;letter-spacing:-.015em;line-height:1}
.stat__l{margin:0;font-size:.9375rem;line-height:1.45;color:var(--on-dark-soft);max-width:22ch}
.t-pine .stat__v,.t-green .stat__v{color:var(--butter-deep)}
.t-pine .stat__l,.t-green .stat__l{color:var(--on-dark-soft)}
.t-cream .stat,.t-cream2 .stat,.t-sage .stat{background:var(--surface);border-color:var(--line)}
.t-cream .stat__v,.t-cream2 .stat__v,.t-sage .stat__v{color:var(--terracotta)}
.t-cream .stat__l,.t-cream2 .stat__l,.t-sage .stat__l{color:var(--ink-soft)}

/* ---------- 16. Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,.5rem + 1.2vw,1.4rem)}
@media (max-width:1080px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.price-grid{grid-template-columns:1fr}}
.pcard{
  --accent:var(--sage-mist);--accent-deep:var(--sage);
  position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,1rem + 1.1vw,2rem);display:flex;flex-direction:column;gap:.75rem;
  transition:transform var(--t-mid) var(--e-out),box-shadow var(--t-mid) var(--e-out),border-color var(--t-mid)
}
.pcard--butter{--accent:var(--butter);--accent-deep:var(--butter-deep)}
.pcard--sky{--accent:var(--sky);--accent-deep:var(--sky-deep)}
.pcard--sage{--accent:var(--sage-mist);--accent-deep:var(--sage)}
.pcard--peach{--accent:var(--peach);--accent-deep:var(--peach-deep)}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--accent-deep)}
.pcard--feature{border-color:var(--terracotta);box-shadow:var(--sh-2)}
.pcard__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--terracotta-btn);color:#fff;font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.38rem .9rem;border-radius:var(--r-pill);white-space:nowrap}
.pcard__ico{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:var(--accent);color:var(--pine)}
.pcard__ico svg{width:23px;height:23px}
.pcard h3{font-size:1.3rem}
.pcard .amt{display:flex;align-items:baseline;gap:.35rem;font-family:"Fredoka",sans-serif;margin-top:auto;padding-top:.4rem}
.pcard .amt i{font-style:normal;font-size:.8125rem;color:var(--ink-mute);font-family:"Poppins",sans-serif;font-weight:500}
.pcard .amt b{font-size:clamp(2.1rem,1.7rem + 1.1vw,2.5rem);line-height:1;color:var(--terracotta);font-weight:600}
.pcard .amt span{font-size:.875rem;color:var(--ink-mute);font-family:"Poppins",sans-serif}
.pcard ul{list-style:none;display:flex;flex-direction:column;gap:.45rem;font-size:.9375rem;color:var(--ink-soft)}
.pcard li{display:flex;gap:.55rem;align-items:flex-start;line-height:1.5}
.pcard li svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--green)}

/* auto-fit rather than a fixed three, so removing an add-on never leaves
   a hole in the row */
.extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1rem}
@media (max-width:800px){.extras{grid-template-columns:1fr}}
.extra{display:flex;align-items:center;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem 1.3rem;transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-fast)}
.extra:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.extra i{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--butter);color:var(--pine);flex:none}
.extra i svg{width:20px;height:20px}
.extra b{display:block;font-family:"Fredoka",sans-serif;font-size:1.05rem;color:var(--pine);font-weight:600}
.extra span{font-size:.8125rem;color:var(--ink-mute);display:block;line-height:1.4}
.extra em{font-style:normal;color:var(--terracotta-ink);font-weight:600;font-size:.9375rem}

/* ---------- 17. Feature rows ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,1rem + 3.5vw,4.5rem);align-items:center}
.feature>*{min-width:0}
@media (max-width:900px){.feature{grid-template-columns:1fr}}
.feature--flip .feature__media{order:2}
@media (max-width:900px){.feature--flip .feature__media{order:0}}
.feature__media{position:relative;border-radius:var(--r-panel);overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:4/5;background:var(--sage-mist)}
.feature__media--wide{aspect-ratio:1/1}
@media (max-width:900px){.feature__media,.feature__media--wide{aspect-ratio:4/3}}
@media (max-width:560px){.feature__media,.feature__media--wide{aspect-ratio:4/5}}
.checklist{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-top:var(--s-4)}
.checklist li{display:flex;gap:.8rem;align-items:flex-start;line-height:1.55}
.checklist li i{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:var(--sage-mist);color:var(--green);flex:none;margin-top:2px}
.checklist li i svg{width:14px;height:14px}
.t-pine .checklist li i{background:rgba(243,238,226,.13);color:var(--butter-deep)}
.checklist li.no i{background:rgba(168,58,43,.16);color:#E39B8B;font-size:1.05rem;font-weight:700;line-height:1}
.checklist li.no span{opacity:.75}

/* ---------- 18. Reviews ---------- */
.quotes{position:relative}
.quotes__track{display:flex;justify-content:safe center;gap:clamp(.9rem,.5rem + 1.2vw,1.5rem);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.1rem;scrollbar-width:thin;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.quotes__track::-webkit-scrollbar{height:6px}
.quotes__track::-webkit-scrollbar-thumb{background:var(--sage);border-radius:99px}
.quote{
  flex:0 0 min(410px,84vw);scroll-snap-align:center;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.4rem,1rem + 1.1vw,2rem);display:flex;flex-direction:column;gap:.9rem
}
.quote__stars{display:flex;gap:.15rem;color:var(--tan)}
.quote__stars svg{width:18px;height:18px}
.quote blockquote{margin:0;font-family:"Fredoka",sans-serif;font-size:clamp(1.15rem,1rem + .7vw,1.45rem);line-height:1.35;color:var(--pine);font-weight:500}
.quote__who{display:flex;align-items:center;gap:.8rem;margin-top:auto}
.quote__who img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.quote__who b{display:block;font-size:.9375rem;color:var(--pine)}
.quote__who span{font-size:.8125rem;color:var(--ink-mute)}
.quotes__nav{display:flex;gap:.6rem;justify-content:center;margin-top:1rem}
.qbtn{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;background:var(--surface);transition:background var(--t-fast),transform var(--t-fast),border-color var(--t-fast)}
.qbtn:hover{background:var(--pine);border-color:var(--pine);color:var(--cream);transform:translateY(-2px)}
.qbtn svg{width:18px;height:18px}

/* ---------- 19. Gallery ---------- */
.gal-filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:var(--s-5)}
.gal-filters button{
  padding:.6rem 1.15rem;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);background:transparent;
  font-size:.875rem;font-weight:600;color:var(--ink-soft);transition:all var(--t-fast);min-height:44px
}
.gal-filters button:hover{border-color:var(--pine);color:var(--pine)}
.gal-filters button[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:var(--cream)}
.masonry{columns:4;column-gap:clamp(.65rem,.4rem + .7vw,1rem)}
@media (max-width:1180px){.masonry{columns:3}}
@media (max-width:800px){.masonry{columns:2}}
@media (max-width:430px){.masonry{columns:1}}
.gitem{
  break-inside:avoid;margin:0 0 clamp(.65rem,.4rem + .7vw,1rem);border-radius:var(--r-media);overflow:hidden;
  position:relative;display:block;width:100%;background:var(--sage-mist);cursor:zoom-in;padding:0;border:0;
  transition:transform var(--t-mid) var(--e-out),box-shadow var(--t-mid) var(--e-out)
}
.gitem:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.gitem__frame{position:relative;overflow:hidden;width:100%;display:block}
.gitem--portrait .gitem__frame{aspect-ratio:3/4}
.gitem--square .gitem__frame{aspect-ratio:1/1}
.gitem--landscape .gitem__frame{aspect-ratio:4/3}
.gitem img{transition:transform .8s var(--e-out)}
.gitem:hover img{transform:scale(1.06)}
.gitem figcaption{
  position:absolute;inset:auto 0 0 0;padding:2.4rem .9rem .8rem;
  background:linear-gradient(transparent,rgba(13,42,25,.9));color:#fff;text-align:left;
  opacity:0;transform:translateY(8px);transition:opacity var(--t-mid),transform var(--t-mid) var(--e-out)
}
.gitem:hover figcaption,.gitem:focus-visible figcaption{opacity:1;transform:none}
.gitem figcaption b{display:block;font-family:"Fredoka",sans-serif;font-size:1rem;font-weight:500}
.gitem figcaption span{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--butter-deep);font-weight:600}
.gitem__paw{position:absolute;top:.7rem;right:.7rem;width:30px;height:30px;border-radius:50%;background:rgba(255,253,248,.92);display:grid;place-items:center;color:var(--terracotta-ink);opacity:0;transform:scale(.6) rotate(-20deg);transition:opacity var(--t-mid),transform var(--t-mid) var(--e-spring);z-index:2}
.gitem__paw svg{width:16px;height:16px}
.gitem:hover .gitem__paw{opacity:1;transform:none}
.gitem.is-hidden{display:none}
@media (hover:none){.gitem figcaption{opacity:1;transform:none}.gitem__paw{display:none}}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(13,42,25,.95);display:grid;place-items:center;padding:clamp(1rem,3vw,3rem);opacity:0;visibility:hidden;transition:opacity .3s var(--e-out),visibility .3s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:min(1100px,92vw);max-height:78vh;object-fit:contain;border-radius:var(--r-md);box-shadow:var(--sh-4);transform:scale(.97);transition:transform .35s var(--e-out)}
.lightbox.is-open img{transform:none}
.lightbox__cap{color:var(--on-dark);text-align:center;margin-top:1rem;font-size:.9375rem}
.lightbox__cap b{font-family:"Fredoka",sans-serif;display:block;font-size:1.15rem;color:var(--cream)}
.lb-btn{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(247,241,229,.14);color:var(--cream);display:grid;place-items:center;transition:background var(--t-fast),transform var(--t-fast);backdrop-filter:blur(6px)}
.lb-btn:hover{background:rgba(247,241,229,.28);transform:scale(1.06)}
.lb-btn svg{width:22px;height:22px}
.lb-close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb-prev{left:clamp(.5rem,2vw,2rem);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(.5rem,2vw,2rem);top:50%;transform:translateY(-50%)}
.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.06)}
@media (max-width:600px){.lb-prev,.lb-next{top:auto;bottom:clamp(1rem,4vw,2rem);transform:none}.lb-prev:hover,.lb-next:hover{transform:scale(1.06)}}

/* Marquee */
.marquee{overflow:hidden;padding-block:1rem;background:var(--green);color:var(--cream);position:relative}
.marquee__inner{display:flex;gap:2.5rem;width:max-content;animation:marq 38s linear infinite;will-change:transform}
.marquee:hover .marquee__inner{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:2.5rem;font-family:"Fredoka",sans-serif;font-size:clamp(.95rem,.88rem + .45vw,1.3rem);white-space:nowrap;font-weight:500}
.marquee span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--terracotta-soft);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- 20. FAQ ---------- */
.faq{max-width:900px;margin-inline:auto}
.faq__group+.faq__group{margin-top:var(--s-6)}
.faq__cat{font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--terracotta-ink);margin-bottom:1rem}
.acc{border-top:1px solid var(--line)}
.acc:last-of-type{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;text-align:left;
  padding:1.3rem .25rem;font-family:"Fredoka",sans-serif;font-size:clamp(1.05rem,.98rem + .45vw,1.28rem);
  font-weight:500;color:var(--pine);line-height:1.35;transition:color var(--t-fast)
}
.acc__btn:hover{color:var(--terracotta-ink)}
.acc__ico{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;margin-top:2px;transition:transform var(--t-mid) var(--e-out),background var(--t-fast),border-color var(--t-fast)}
.acc__ico::before,.acc__ico::after{content:"";position:absolute;background:var(--pine);border-radius:2px;transition:transform var(--t-mid) var(--e-out),background var(--t-fast)}
.acc__ico::before{width:13px;height:2px}
.acc__ico::after{width:2px;height:13px}
.acc__btn[aria-expanded="true"] .acc__ico{background:var(--terracotta-btn);border-color:var(--terracotta-btn);transform:rotate(180deg)}
.acc__btn[aria-expanded="true"] .acc__ico::before,.acc__btn[aria-expanded="true"] .acc__ico::after{background:#fff}
.acc__btn[aria-expanded="true"] .acc__ico::after{transform:scaleY(0)}
.acc__panel{overflow:hidden;height:0;transition:height var(--t-mid) var(--e-out)}
.acc__panel-in{padding:0 3rem 1.4rem .25rem;color:var(--ink-soft);line-height:1.7}
@media (max-width:600px){.acc__panel-in{padding-right:.25rem}}

/* ---------- 21. Forms ---------- */
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:clamp(1.35rem,1rem + 1.5vw,2.5rem);box-shadow:var(--sh-2)}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field>label,.fieldset__legend{font-size:.875rem;font-weight:600;color:var(--pine)}
.field .hint{font-size:var(--fs-xs);color:var(--ink-mute)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=date],.field input[type=number],.field select,.field textarea{
  width:100%;padding:.9rem 1.05rem;border-radius:14px;border:1.5px solid var(--line-strong);background:var(--cream-2);
  font-size:1rem;color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
  min-height:52px;appearance:none;-webkit-appearance:none
}
.field textarea{min-height:118px;resize:vertical;line-height:1.6}
.field select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123B24' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:18px;padding-right:2.8rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(30,83,52,.12)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(168,58,43,.1)}
.field .err{font-size:var(--fs-xs);color:var(--danger);font-weight:600;display:none}
.field .err.is-on{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:620px){.field-row{grid-template-columns:1fr}}
.req{color:var(--terracotta-ink)}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.chip span{
  display:flex;align-items:center;padding:.68rem 1.1rem;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);
  font-size:.9375rem;font-weight:500;color:var(--ink-soft);transition:all var(--t-fast);user-select:none;min-height:46px
}
.chip input:checked+span{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.chip input:focus-visible+span{outline:3px solid var(--terracotta);outline-offset:2px}
.chip:hover span{border-color:var(--green)}

.filedrop{border:2px dashed var(--line-strong);border-radius:var(--r-md);padding:1.5rem 1.2rem;text-align:center;background:var(--cream-2);transition:border-color var(--t-fast),background var(--t-fast);cursor:pointer;display:block;position:relative}
.filedrop:hover,.filedrop.is-over{border-color:var(--green);background:#fff}
.filedrop svg{width:30px;height:30px;color:var(--sage-deep);margin-inline:auto}
.filedrop b{display:block;margin-top:.5rem;font-family:"Fredoka",sans-serif;color:var(--pine);font-weight:500}
.filedrop input{position:absolute;width:1px;height:1px;opacity:0}
.filedrop__list{margin-top:.6rem;font-size:var(--fs-xs);color:var(--ink-mute);display:block}

.steps-bar{display:flex;align-items:center;gap:.35rem;margin-bottom:var(--s-4)}
.steps-bar__item{flex:1;display:flex;flex-direction:column;gap:.45rem}
.steps-bar__rail{height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.steps-bar__rail i{display:block;height:100%;width:0;background:var(--terracotta-btn);border-radius:99px;transition:width .45s var(--e-out)}
.steps-bar__item.is-done .steps-bar__rail i,.steps-bar__item.is-current .steps-bar__rail i{width:100%}
.steps-bar__item.is-done .steps-bar__rail i{background:var(--green)}
.steps-bar__lbl{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-mute)}
.steps-bar__item.is-current .steps-bar__lbl{color:var(--terracotta-ink)}
.steps-bar__item.is-done .steps-bar__lbl{color:var(--green)}
@media (max-width:600px){.steps-bar__lbl{display:none}}
.step{display:none;animation:stepIn .34s var(--e-out)}
.step.is-active{display:block}
@keyframes stepIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.step__head{margin-bottom:var(--s-4)}
.step__head h3{margin-bottom:.3rem}
.form-nav{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line)}
.form-nav .btn{flex:1 1 auto;min-width:150px}
.form-nav>span{flex:1 1 0;min-width:0}
@media (max-width:560px){.form-nav{flex-direction:column-reverse;align-items:stretch}.form-nav>span{display:none}.form-nav .btn{width:100%}}
.opt{font-weight:500;font-size:.8125rem;color:var(--ink-mute);margin-left:.35rem}
.form-status{margin-top:1rem;font-size:.9375rem;font-weight:600;line-height:1.55}
.form-status:empty{display:none}
.form-status.is-err{color:var(--danger);background:rgba(178,58,44,.07);border:1px solid rgba(178,58,44,.28);border-radius:var(--r-md);padding:.85rem 1rem}
.form-status.is-ok{color:var(--green)}
.form-status:focus{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--r-md)}
.review-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.25rem;font-size:.9375rem}
@media (max-width:620px){.review-list{grid-template-columns:1fr}}
.review-list li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--line)}
.review-list span{color:var(--ink-mute)}
.review-list b{color:var(--pine);text-align:right;font-weight:600}
@media (max-width:560px){.review-list li{flex-direction:column;align-items:flex-start;gap:.1rem}
.review-list b{text-align:left}}

/* ---------- 22. Referral / share ---------- */
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
@media (max-width:720px){.share-grid{grid-template-columns:repeat(2,1fr)}}
.share-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.2rem .7rem;
  border-radius:var(--r-md);background:var(--surface);border:1.5px solid var(--line);text-decoration:none;color:var(--pine);
  font-size:.875rem;font-weight:600;transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-fast),border-color var(--t-fast);min-height:104px;text-align:center
}
.share-btn:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--blush-deep);color:var(--pine)}
.share-btn svg{width:26px;height:26px;color:var(--green)}

/* ---------- 23. QR / Instagram ---------- */
.qr-card{display:flex;align-items:center;gap:clamp(1rem,.6rem + 1.5vw,1.9rem);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.1rem,.8rem + 1.3vw,1.8rem);box-shadow:var(--sh-2);flex-wrap:wrap}
.qr-card__img{width:clamp(104px,12vw,140px);height:auto;border-radius:14px;background:#fff;padding:9px;flex:none;box-shadow:var(--sh-1)}
.qr-card>div{flex:1 1 170px;min-width:0}
.qr-card b{display:block;font-family:"Fredoka",sans-serif;font-size:1.15rem;color:var(--pine);font-weight:600}
.t-pine .qr-card,.t-green .qr-card{color:var(--ink)}
.t-pine .qr-card .tiny,.t-green .qr-card .tiny{color:var(--ink-soft)}

.ig-col{align-self:center}
.ig-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.5rem,.3rem + .5vw,.8rem)}
@media (max-width:900px){.ig-strip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:420px){.ig-strip{grid-template-columns:repeat(2,1fr)}}
.ig-strip a{position:relative;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1;background:var(--sage-mist);display:block}
.ig-strip a::after{content:"";position:absolute;inset:0;background:rgba(18,59,36,.45);opacity:0;transition:opacity var(--t-fast)}
.ig-strip a:hover::after{opacity:1}
.ig-strip a i{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:0;transition:opacity var(--t-fast);z-index:2}
.ig-strip a:hover i{opacity:1}
.ig-strip a i svg{width:26px;height:26px}
.ig-strip img{transition:transform .7s var(--e-out)}
.ig-strip a:hover img{transform:scale(1.08)}

/* ---------- 24. CTA band — the photo stays visible ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r-panel);background:var(--pine);color:var(--on-dark);
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);box-shadow:var(--sh-3)
}
@media (max-width:880px){.cta-band{grid-template-columns:1fr}}
.cta-band__media{position:relative;background:var(--sage-mist);min-height:100%}
@media (max-width:880px){.cta-band__media{aspect-ratio:16/10}}
.cta-band__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 62%,rgba(18,59,36,.85) 98%);
}
@media (max-width:880px){.cta-band__media::after{background:linear-gradient(180deg,transparent 66%,rgba(18,59,36,.9) 100%)}}
.cta-band__body{padding:clamp(1.75rem,1.2rem + 3vw,3.5rem);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
.cta-band h2,.cta-band h3{color:var(--cream)}
.cta-band h2{max-width:17ch}
.cta-band .lead{color:var(--on-dark-soft);max-width:44ch}
.cta-band .eyebrow{color:var(--gold)}
.cta-band p,.cta-band .tiny{color:var(--on-dark-soft)}
.cta-band a:not(.btn){color:var(--butter-deep)}
.cta-band__paw{position:absolute;right:-52px;bottom:-52px;width:216px;height:216px;color:var(--cream);opacity:.06;pointer-events:none;z-index:0;transform:rotate(-16deg)}

/* ---------- 25. Footer ---------- */
.footer{background:var(--pine-deep);color:var(--on-dark-soft);padding-block:var(--s-8) var(--s-4);position:relative;overflow:hidden}
.footer__cta{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  background:rgba(255,255,255,.05);border:1px solid rgba(243,238,226,.14);border-radius:var(--r-panel);
  padding:clamp(1.4rem,1.1rem + 1.5vw,2.4rem);margin-bottom:var(--s-7)
}
.footer__cta h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);color:var(--cream);max-width:20ch}
.footer__cta p{margin:.4rem 0 0;font-size:.9375rem}
.footer__cta .btn-row{flex:0 1 auto;min-width:0}
.footer__cta .btn{white-space:nowrap}
@media (max-width:620px){
  .footer__cta{flex-direction:column;align-items:stretch}
  .footer__cta .btn-row{width:100%}
  .footer__cta .btn{flex:1 1 auto;white-space:normal}
}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:clamp(1.75rem,1rem + 2.5vw,3rem)}
.footer__top>*{min-width:0}
.footer__top a:not(.btn),.footer__bottom a:not(.btn){overflow-wrap:anywhere}
@media (max-width:1000px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.footer__top{grid-template-columns:1fr}}
.footer__h{color:var(--cream);font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1rem;font-family:"Poppins",sans-serif;font-weight:700;line-height:1.4}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.3rem}
/* Scoped to the link lists and the legal row. A blanket ".footer a" rule
   outranks the component rules below it and was overriding the social
   circles (display:grid;place-items:center) with inline-block + padding,
   which pushed every icon about 6px above centre. */
.footer__top ul a:not(.btn),.footer__top p a:not(.btn),.footer__bottom a:not(.btn){
  color:var(--on-dark-soft);text-decoration:none;font-size:.9375rem;display:inline-block;padding-block:.35rem;min-height:32px
}
.footer__top ul a:not(.btn):hover,.footer__top p a:not(.btn):hover,.footer__bottom a:not(.btn):hover{color:var(--butter-deep)}
.footer a:not(.btn){color:var(--on-dark-soft)}
.footer .tiny{color:#B6C7B8}
.footer__lockup{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem;text-decoration:none;min-height:auto;padding:0}
.footer__lockup img{width:clamp(76px,7.5vw,98px);height:auto;flex:none}
.footer__lockup b{font-family:"Fredoka",sans-serif;color:var(--cream);font-size:clamp(1.3rem,1.1rem + .6vw,1.65rem);line-height:1.05;font-weight:600;letter-spacing:-.01em;display:block}
.footer__lockup b span{display:block;font-family:"Poppins",sans-serif;font-size:.79rem;letter-spacing:.17em;color:var(--gold);font-weight:600;margin-top:.35rem}
.footer__brand p{font-size:.9375rem;max-width:34ch;color:var(--on-dark-soft)}
.footer__social{display:flex;gap:.55rem;margin-top:1.1rem}
/* One circle definition. The SVG is a grid item centred on both axes, and
   because the icons are drawn on a 24x24 viewBox with even margins the
   optical centre matches the geometric one. */
.footer__social{display:flex;gap:.6rem;margin-top:1.1rem;align-items:center}
.footer__social a{
  width:44px;height:44px;min-height:44px;flex:0 0 44px;padding:0;margin:0;
  border-radius:50%;border:1px solid rgba(243,238,226,.2);
  display:grid;place-items:center;place-content:center;line-height:0;
  color:var(--on-dark-soft);
  transition:background var(--t-fast),transform var(--t-fast),border-color var(--t-fast),color var(--t-fast)
}
.footer__social a>*{grid-area:1/1;justify-self:center;align-self:center}
.footer__social a:hover{background:var(--cream);color:var(--pine);transform:translateY(-3px);border-color:var(--cream)}
.footer__social svg{width:19px;height:19px;display:block}
/* Optical sizing: the handset glyph fills ~20 of its 24 units where the
   others fill ~18, so it is drawn a little smaller to carry the same
   visual weight as its neighbours. */
.footer__social a.is-phone svg{width:17px;height:17px}
.footer__qr{display:flex;align-items:center;gap:.85rem;margin-top:1.1rem;background:rgba(255,255,255,.05);border:1px solid rgba(243,238,226,.13);border-radius:var(--r-md);padding:.8rem}
.footer__qr img{width:74px;height:74px;border-radius:9px;background:#fff;padding:5px;flex:none}
.footer__qr p{margin:0;font-size:.8125rem;line-height:1.5;color:var(--on-dark-soft)}
.footer__bottom{margin-top:var(--s-6);padding-top:1.4rem;border-top:1px solid rgba(243,238,226,.14);display:flex;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;font-size:var(--fs-xs)}
.footer__bottom p{margin:0;max-width:62ch}
.footer__legal{display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center}
.footer__legal a{font-size:var(--fs-xs);min-height:auto;padding-block:.2rem}
@media (max-width:760px){
  .footer ul{gap:.1rem}
  .footer .footer__top ul a:not(.btn){min-height:44px;display:flex;align-items:center;padding-block:.5rem}
  .footer__legal{gap:.4rem 1.25rem}
  .footer .footer__legal a:not(.btn){min-height:44px;display:flex;align-items:center;padding-block:.6rem}
}
@media (max-width:900px){.footer{padding-bottom:calc(var(--s-4) + 74px)}}

/* ---------- 26. Motion: reveals, paws, cursor ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-26px)}
[data-reveal="right"]{transform:translateX(26px)}
@media (max-width:900px){[data-reveal="left"],[data-reveal="right"]{transform:translateY(22px)}}
[data-reveal="scale"]{transform:scale(.96)}
[data-reveal="fade"]{transform:none}
[data-stagger]>*{opacity:0;transform:translateY(20px);transition:opacity .55s var(--e-out),transform .55s var(--e-out)}
[data-stagger].is-in>*{opacity:1;transform:none}
[data-stagger].is-in>*:nth-child(1){transition-delay:.02s}
[data-stagger].is-in>*:nth-child(2){transition-delay:.07s}
[data-stagger].is-in>*:nth-child(3){transition-delay:.12s}
[data-stagger].is-in>*:nth-child(4){transition-delay:.17s}
[data-stagger].is-in>*:nth-child(5){transition-delay:.22s}
[data-stagger].is-in>*:nth-child(6){transition-delay:.27s}
[data-stagger].is-in>*:nth-child(n+7){transition-delay:.3s}
.parallax{will-change:transform}

/* Scroll-linked paw field, always behind content */
.pawfield{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;color:var(--green)}
.pawfield svg{position:absolute;width:var(--pw,56px);height:auto;will-change:transform;opacity:0}
.t-pine .pawfield,.t-green .pawfield,.footer .pawfield{color:var(--cream)}

/* Desktop cursor label */
/* Paw trail: a fixed, contained layer under the header (z 100) so paws pass
   beneath the nav instead of over it. Never interactive. Sized and coloured to
   read clearly on both the cream and the pine sections without shouting. */
.pawtrail{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;contain:layout paint;--paw:clamp(21px,1.7vw,27px)}
.pawtrail b{
  position:absolute;top:0;left:0;transform:translate3d(-9999px,-9999px,0);
  width:var(--paw);height:var(--paw);
  margin:calc(var(--paw) / -2) 0 0 calc(var(--paw) / -2);
  color:var(--terracotta-btn);will-change:transform
}
.pawtrail b i{display:block;width:100%;height:100%;opacity:0;filter:drop-shadow(0 2px 5px rgba(18,59,36,.26))}
/* A paw dropped over a dark section is drawn in cream so it never sinks into
   the background; the class is set by one hit test per footfall. */
.pawtrail b.on-dark{color:var(--gold)}
.pawtrail b.on-dark i{filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.pawtrail b svg{width:100%;height:100%;display:block}
.pawtrail b.is-a i{animation:pawStepA 1.25s var(--e-out) forwards}
.pawtrail b.is-b i{animation:pawStepB 1.25s var(--e-out) forwards}
@keyframes pawStepA{
  0%{opacity:0;transform:scale(.45) rotate(-8deg)}
  14%{opacity:.62;transform:scale(1.06) rotate(0deg)}
  30%{opacity:.58;transform:scale(1)}
  70%{opacity:.4;transform:scale(1)}
  100%{opacity:0;transform:scale(.88)}
}
@keyframes pawStepB{
  0%{opacity:0;transform:scale(.45) rotate(8deg)}
  14%{opacity:.62;transform:scale(1.06) rotate(0deg)}
  30%{opacity:.58;transform:scale(1)}
  70%{opacity:.4;transform:scale(1)}
  100%{opacity:0;transform:scale(.88)}
}
@media (any-hover:none),(any-pointer:coarse) and (any-pointer:none){.pawtrail{display:none}}

.cursor{position:fixed;top:0;left:0;z-index:180;pointer-events:none;will-change:transform}
.cursor__in{
  display:grid;place-items:center;width:76px;height:76px;border-radius:50%;
  background:var(--terracotta-btn);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center;line-height:1.1;
  transform:translate(-50%,-50%) scale(0);transition:transform .26s var(--e-spring);
}
.cursor.is-on .cursor__in{transform:translate(-50%,-50%) scale(1)}
.cursor__in svg{width:26px;height:26px}

.veil{position:fixed;inset:0;z-index:300;background:var(--pine);transform:translateY(100%);pointer-events:none}
.veil.is-out{animation:veilOut .5s var(--e-inout) forwards}
.veil.is-in{animation:veilIn .42s var(--e-inout) forwards}
@keyframes veilOut{0%{transform:translateY(100%)}100%{transform:translateY(0)}}
@keyframes veilIn{0%{transform:translateY(0)}100%{transform:translateY(-100%)}}

.progress{position:fixed;top:0;left:0;height:3px;background:var(--terracotta);width:0;z-index:150;transition:width .1s linear;border-radius:0 3px 3px 0}
img[loading="lazy"]{opacity:0;transition:opacity .5s var(--e-out)}
img[loading="lazy"].is-loaded{opacity:1}

/* ---------- 27. Utility ---------- */
.divider-paws{display:flex;align-items:center;justify-content:center;gap:.9rem;color:var(--sage-deep);margin-block:var(--s-4)}
.divider-paws svg{width:20px;height:20px}
.divider-paws::before,.divider-paws::after{content:"";height:1px;flex:1;max-width:130px;background:var(--line-strong)}
.pill-note{display:inline-flex;align-items:flex-start;gap:.6rem;background:var(--butter);color:var(--pine);border-radius:var(--r-md);padding:.75rem 1.15rem;font-size:.875rem;font-weight:500;line-height:1.5}
.pill-note svg{width:17px;height:17px;flex:none;margin-top:3px}
.t-pine .pill-note{background:rgba(243,238,226,.12);color:var(--cream)}
.note-strip{background:var(--sage-mist);border-radius:var(--r-md);padding:1.1rem 1.35rem;font-size:.9375rem;color:var(--ink-soft);display:flex;gap:.85rem;align-items:flex-start}
.note-strip svg{width:20px;height:20px;color:var(--green);flex:none;margin-top:2px}
.t-pine .note-strip{background:rgba(255,255,255,.06);color:var(--on-dark-soft)}
.t-pine .note-strip svg{color:var(--butter-deep)}
.t-sky .note-strip,.t-butter .note-strip,.t-peach .note-strip,.t-blush .note-strip,.t-mint .note-strip{background:rgba(255,255,255,.55)}
/* ---------- Meet the team ----------
   A person beside their story, not a photo dropped into a generic card.
   The photo column is capped in px rather than % so a small source file is
   never asked to fill a big frame. */
.team{display:grid;gap:clamp(1.4rem,1rem + 2vw,2.6rem)}
.member{
  --photocol:clamp(240px,26vw,340px);
  display:grid;gap:clamp(1.1rem,.8rem + 1.4vw,2rem);
  grid-template-columns:minmax(0,var(--photocol)) minmax(0,1fr);
  align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-panel);box-shadow:var(--sh-2);
  padding:clamp(1.1rem,.85rem + 1vw,1.6rem)}
.member__photo{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:4/3;background:var(--sage-mist)}
.member__photo img{width:100%;height:100%;object-fit:cover;display:block}
.member__body{min-width:0}
.member__body h3{font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem);line-height:1.2}
.member__role{font-family:var(--f-script);color:var(--terracotta-btn);
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);margin:.15rem 0 .8rem}
.member__body p + p{margin-top:.7rem}
.member__body p:not(.member__role){color:var(--ink-soft);line-height:1.65}

/* the Chief Welcoming Officer gets the lighter treatment */
/* the portrait is taller than it is wide, so the column narrows to keep the
   card from towering over two lines of copy */
.member--playful{--photocol:clamp(200px,19vw,248px);background:var(--butter);border-color:transparent}
.member--playful .member__photo{aspect-ratio:3/4;border-radius:999px 999px var(--r-md) var(--r-md)}
.member--playful .member__role{color:var(--green)}
.member__pin{position:absolute;right:.7rem;bottom:.7rem;z-index:2;
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--terracotta-btn);color:#fff;box-shadow:var(--sh-2)}
.member__pin svg{width:22px;height:22px}
.t-pine .member,.t-green .member{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.t-pine .member__body h3,.t-green .member__body h3{color:var(--on-dark)}
.t-pine .member__body p:not(.member__role),.t-green .member__body p:not(.member__role){color:var(--on-dark-soft)}
.t-pine .member--playful,.t-green .member--playful{background:rgba(246,230,196,.12)}
.t-pine .member--playful .member__role,.t-green .member--playful .member__role{color:var(--gold)}
@media (min-width:781px){
  .member:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,var(--photocol))}
  .member:nth-child(even) .member__photo{order:2}
}

/* Homepage duo: the same two people, stacked rather than side by side, so the
   home page teaser does not read as a copy of the About page section. */
.team--duo{grid-template-columns:1fr 1fr;gap:clamp(1rem,.7rem + 1.4vw,1.6rem);align-items:stretch}
/* rows hug their content so a short photo does not open a gap above the name;
   the cards still share a height, the slack just falls to the bottom */
.team--duo .member,
.team--duo .member:nth-child(even){grid-template-columns:1fr;grid-template-rows:auto auto;
  align-content:start;text-align:left;gap:1rem;height:100%}
.team--duo .member__photo,
.team--duo .member:nth-child(even) .member__photo{order:0;margin-inline:auto;width:100%;
  max-width:min(100%,var(--photocol))}
.team--duo .member__body h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem)}
@media (max-width:700px){
  .team--duo{grid-template-columns:1fr}
}
@media (max-width:780px){
  .member{grid-template-columns:1fr;text-align:left}
  .member__photo{max-width:min(340px,var(--photocol));margin-inline:auto;width:100%}
  .member--playful .member__photo{max-width:260px}
}

/* ---------- Photo band ----------
   A row of real photographs used to break up a long text page. Portrait
   crops so the dogs are the subject, and the row scrolls rather than
   squashing on a phone. */
.photoband{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,.4rem + .7vw,1rem)}
.photoband figure{margin:0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/4;
  background:var(--sage-mist);box-shadow:var(--sh-1)}
.photoband img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--e-out)}
.photoband figure:hover img{transform:scale(1.05)}
@media (max-width:900px){.photoband{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.photoband{grid-template-columns:repeat(2,1fr);gap:.55rem}}


/* ---------- Portrait pair ----------
   Two people-photos standing in for a single feature image. Each frame owns
   its own aspect so neither subject is cropped, and the shorter one centres
   against the taller instead of being stretched to match. */
.duoshot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,.4rem + .8vw,1.1rem);
  align-items:center}
.duoshot figure{margin:0;min-width:0}
.duoshot__frame{position:relative;border-radius:var(--r-md);overflow:hidden;
  background:var(--sage-mist);box-shadow:var(--sh-2)}
.duoshot__frame img{width:100%;height:100%;object-fit:cover;display:block}
.duoshot__a .duoshot__frame{aspect-ratio:3/4}
.duoshot__b .duoshot__frame{aspect-ratio:4/3;max-width:260px;margin-inline:auto}
.duoshot figcaption{margin-top:.7rem;text-align:center}
.duoshot figcaption b{display:block;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1rem,.92rem + .3vw,1.15rem);line-height:1.25;color:var(--cream)}
.duoshot figcaption span{display:block;font-family:var(--f-script);
  font-size:clamp(.9rem,.84rem + .26vw,1.05rem);color:var(--gold);line-height:1.3;margin-top:.1rem}
.duoshot__pin{position:absolute;right:.6rem;bottom:.6rem;z-index:2;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;background:var(--terracotta-btn);color:#fff;
  box-shadow:var(--sh-2)}
.duoshot__pin svg{width:20px;height:20px}
/* light sections, should the pair ever be used on one */
.t-cream .duoshot figcaption b,.t-cream2 .duoshot figcaption b,
.t-butter .duoshot figcaption b,.t-sage .duoshot figcaption b{color:var(--pine)}
.t-cream .duoshot figcaption span,.t-cream2 .duoshot figcaption span,
.t-butter .duoshot figcaption span,.t-sage .duoshot figcaption span{color:var(--terracotta-btn)}
@media (max-width:420px){
  .duoshot{gap:.55rem}
  .duoshot figcaption{margin-top:.5rem}
  .duoshot__pin{width:32px;height:32px}
  .duoshot__pin svg{width:17px;height:17px}
}


/* ---------- Sarah's story ----------
   A long personal bio, broken into chapters that alternate side to side.
   Each chapter is a card with its own accent so the eye has somewhere to
   rest between paragraphs, and the whole thing reads as a sequence rather
   than a wall. */
.sarah-intro{display:grid;grid-template-columns:minmax(0,257px) minmax(0,1fr);
  gap:clamp(1.4rem,1rem + 2.4vw,3rem);align-items:center}
.sarah-intro__photo{margin:0;border-radius:var(--r-panel);overflow:hidden;aspect-ratio:4/3;
  background:var(--sage-mist);box-shadow:var(--sh-3);max-width:257px;width:100%}
.sarah-intro__photo img{width:100%;height:100%;object-fit:cover;display:block}
.sarah-intro h2{font-size:clamp(2rem,1.5rem + 2.4vw,3.2rem);line-height:1.08}
.sarah-intro .lead{margin-top:.9rem}
@media (max-width:760px){
  .sarah-intro{grid-template-columns:1fr;text-align:left}
  .sarah-intro__photo{margin-inline:auto}
}

.chapters{display:grid;gap:clamp(1.1rem,.8rem + 1.6vw,2rem);margin-top:clamp(2rem,1.4rem + 2vw,3.4rem)}
.chapter{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);
  gap:clamp(1.1rem,.8rem + 1.6vw,2.2rem);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
  box-shadow:var(--sh-2);padding:clamp(1rem,.8rem + 1vw,1.5rem)}
.chapter:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,40%)}
.chapter:nth-child(even) .chapter__media{order:2}
.chapter__media{margin:0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;
  background:var(--sage-mist)}
.chapter__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--e-out)}
.chapter:hover .chapter__media img{transform:scale(1.04)}
.chapter__body{min-width:0}
.chapter__body h3{font-size:clamp(1.25rem,1.1rem + .7vw,1.65rem);line-height:1.2;margin-bottom:.6rem}
.chapter__body p{color:var(--ink-soft);line-height:1.68}
.chapter__body p + p{margin-top:.7rem}
.chapter__tag{display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--green);margin-bottom:.55rem}
.chapter__tag i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;
  background:var(--sage-mist);color:var(--green)}
.chapter__tag i svg{width:16px;height:16px}
.chapter--butter .chapter__tag i{background:var(--butter);color:var(--pine)}
.chapter--peach  .chapter__tag i{background:#F7E0D2;color:var(--terracotta-btn)}
.chapter--sage   .chapter__tag i{background:var(--sage-mist);color:var(--green)}
.chapter--sky    .chapter__tag i{background:#DCE8EE;color:#2C5566}
@media (max-width:780px){
  .chapter,.chapter:nth-child(even){grid-template-columns:1fr}
  .chapter:nth-child(even) .chapter__media{order:0}
  .chapter__media{aspect-ratio:16/10}
}

/* the line of her bio worth stopping on */
.sarah-quote{max-width:820px;margin-inline:auto;text-align:center}
.sarah-quote blockquote{margin:0;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.5rem,1.15rem + 1.9vw,2.6rem);line-height:1.2;color:var(--cream)}
.sarah-quote p{margin-top:1rem;color:var(--on-dark-soft);font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.65}
.sarah-quote__mark{display:block;margin:0 auto .6rem;width:44px;height:44px;color:var(--gold)}

.phils{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,.5rem + 1vw,1.3rem)}
.phil{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.1rem,.9rem + .8vw,1.5rem);text-align:left;
  transition:transform var(--t-mid) var(--e-out),box-shadow var(--t-mid)}
.phil:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.phil__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--butter);color:var(--pine);margin-bottom:.8rem}
.phil__ico svg{width:22px;height:22px}
.phil h3{font-size:1.08rem;margin-bottom:.3rem}
.phil p{font-size:.9375rem;color:var(--ink-soft);line-height:1.6;margin:0}
@media (max-width:900px){.phils{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.phils{grid-template-columns:1fr}}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,.5rem + .8vw,1.1rem);
  max-width:760px;margin-inline:auto}
.fact{text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(243,238,226,.15);
  border-radius:var(--r-lg);padding:clamp(.9rem,.75rem + .7vw,1.3rem)}
.fact b{display:block;font-family:var(--f-display);font-weight:600;color:var(--gold);
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);line-height:1.1}
.fact span{display:block;margin-top:.3rem;font-size:.875rem;color:var(--on-dark-soft);line-height:1.4}
@media (max-width:560px){.facts{grid-template-columns:1fr}}

.signoff{max-width:700px;margin-inline:auto;text-align:center;
  font-size:clamp(1.05rem,.98rem + .4vw,1.25rem);line-height:1.65;color:var(--ink-soft)}
.signoff__sig{display:block;margin-top:1rem;font-family:var(--f-script);
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);color:var(--terracotta-btn)}

/* ---------- Rule callout ----------
   For a condition the reader must not miss. Deliberately louder than
   .note-strip: this is the one the customer would otherwise find out
   about at the counter. Never used for decoration. */
.rulebox{
  display:flex;gap:.9rem;align-items:flex-start;text-align:left;
  background:var(--butter);border:2px solid var(--terracotta-btn);
  border-radius:var(--r-md);
  padding:clamp(1rem,.8rem + .6vw,1.25rem) clamp(1.1rem,.85rem + .8vw,1.5rem);
  color:var(--pine);max-width:640px;margin-inline:auto}
.rulebox svg{width:22px;height:22px;flex:none;margin-top:1px;color:var(--terracotta-btn)}
.rulebox b{display:block;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1rem,.94rem + .28vw,1.125rem);line-height:1.3;margin-bottom:.25rem}
.rulebox span{display:block;font-size:.9375rem;line-height:1.55;color:var(--ink-soft)}
.t-pine .rulebox,.t-green .rulebox{background:rgba(246,230,196,.14);border-color:var(--gold);color:var(--on-dark)}
.t-pine .rulebox svg,.t-green .rulebox svg{color:var(--gold)}
.t-pine .rulebox span,.t-green .rulebox span{color:var(--on-dark-soft)}
@media (max-width:560px){.rulebox{flex-direction:column;gap:.6rem}.rulebox svg{margin-top:0}}

.mt-0{margin-top:0}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}.mt-7{margin-top:var(--s-7)}
.mb-4{margin-bottom:var(--s-4)}.mb-5{margin-bottom:var(--s-5)}.mb-6{margin-bottom:var(--s-6)}.mb-7{margin-bottom:var(--s-7)}

/* ---------- 28. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal],[data-stagger]>*{opacity:1 !important;transform:none !important}
  .hero__title .l>span{transform:none}
  .hero__sub,.hero__cta,.hero__offer,.hero__card,.scroll-cue{opacity:1 !important;transform:none !important}
  .drawer__list a,.drawer__foot{opacity:1 !important;transform:none !important}
  .marquee__inner{animation:none}
  .pawfield,.pawtrail,.cursor,.veil{display:none !important}
  .pillar p{max-height:14rem;opacity:1;margin-top:.3rem}
  img[loading="lazy"]{opacity:1}
}

/* ---------- 29. Print ---------- */
@media print{
  .site-header,.mobilebar,.announce,.drawer,.footer__social,.veil,.progress,.scroll-cue,.pawfield,.pawtrail,.cursor{display:none !important}
  body{background:#fff;color:#000}
  .section{padding-block:1.5rem}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}