/* Maple Hollow Veterinary — demo vet clinic. Warm cream + sage + terracotta. CSP-clean (no inline). */

@font-face { font-family:"Fraunces"; font-weight:100 900; font-style:normal; font-display:swap; src:url("/fonts/fraunces-latin-var.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:100 900; font-style:normal; font-display:swap; src:url("/fonts/inter-latin-var.woff2") format("woff2"); }

:root {
  --cream:#faf6ee; --cream-2:#f3ecdd; --card:#fffdf7;
  --ink:#33372e; --muted:#666d5e;
  --sage:#5c8462; --sage-d:#42624a; --sage-soft:#e3ecdd;
  --terra:#b5502a; --terra-d:#9c4522; --terra-soft:#f7e3d7;
  --line:#e6ddc9;
  --radius-sm:14px; --radius:20px; --radius-lg:30px; --maxw:1150px;
  --shadow-sm:0 4px 14px rgba(66,98,74,.08);
  --shadow:0 10px 30px rgba(92,132,98,.12);
  --shadow-lg:0 24px 60px rgba(66,98,74,.18);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:clip}
body{font-family:"Inter",system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.7;font-size:clamp(1rem, 0.96rem + 0.2vw, 1.06rem);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.15;color:var(--ink);text-wrap:balance}
h1,h2{font-variation-settings:"SOFT" 40,"WONK" 1}
::selection{background:var(--sage);color:#fff}
:focus-visible{outline:3px solid var(--terra-d);outline-offset:3px}
.btn--terra:focus-visible,.cta .btn:focus-visible{outline-color:var(--ink)}
.band :focus-visible,.site-foot :focus-visible,.lightbox :focus-visible{outline-color:#fff}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.15rem, 0.6rem + 2.5vw, 2.4rem)}
.section{padding-block:clamp(3.8rem, 2.8rem + 4vw, 6.5rem)}
.eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--terra);margin-bottom:.8rem}
.center{text-align:center}
.section-head{max-width:46rem;margin:0 auto clamp(2.4rem, 1.8rem + 2vw, 3.4rem)}
.section-head p{margin-top:.85rem}
.section-head.center h2,.section-head.center p{margin-inline:auto}
h2{font-size:clamp(1.9rem, 1.45rem + 1.9vw, 2.85rem)}
.lead{font-size:clamp(1.05rem, 1rem + 0.4vw, 1.2rem);color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;padding:.85em 1.6em;border-radius:999px;cursor:pointer;border:2px solid var(--sage);background:var(--sage);color:#fff;transition:background .2s,border-color .2s,translate .25s var(--spring),box-shadow .25s}
.btn:hover{background:var(--sage-d);border-color:var(--sage-d);box-shadow:0 10px 24px rgba(66,98,74,.32)}
.btn--terra{background:var(--terra);border-color:var(--terra)}
.btn--terra:hover{background:var(--terra-d);border-color:var(--terra-d);box-shadow:0 10px 24px rgba(185,92,49,.32)}
.btn--ghost{background:transparent;color:var(--sage-d)}
.btn--ghost:hover{background:var(--sage-soft);color:var(--sage-d);box-shadow:none}
@media (prefers-reduced-motion:no-preference){
  .btn:hover{translate:0 -2px}
  .btn:active{translate:0 1px}
}

/* Demo exit pill */
.demo-bar{position:fixed;z-index:200;left:50%;bottom:1rem;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.75rem;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.45rem .5rem .45rem 1.05rem;font-size:.82rem;box-shadow:var(--shadow-lg);max-width:calc(100vw - 1.6rem)}
@media (min-width:760px){.demo-bar{left:auto;right:1.4rem;bottom:1.4rem;transform:none;font-size:.9rem}}
.demo-bar b{color:var(--sage-d);font-weight:600}
.demo-bar .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.demo-exit{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;background:#BE4E15;color:#fff;border-radius:999px;padding:.55rem 1.1rem;font-weight:600;transition:background .2s}
.demo-exit:hover{background:#a94012;color:#fff}

/* Header */
.site-head{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem clamp(1.15rem, 0.6rem + 2.5vw, 2.4rem);background:rgba(250,246,238,.92);backdrop-filter:blur(8px);transition:box-shadow .3s,padding .25s ease,border-color .3s;border-bottom:1px solid transparent}
.site-head.scrolled{box-shadow:0 4px 24px rgba(66,98,74,.12);border-bottom-color:var(--line);padding-block:.55rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.22rem}
.site-head .brand{white-space:nowrap}
@media (max-width:480px){
  .site-head .brand{font-size:1.02rem;gap:.45rem}
  .site-head .brand .paw{width:1.75rem;height:1.75rem;font-size:.85rem}
}
.brand .paw{width:2.1rem;height:2.1rem;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font-size:1.05rem;transition:rotate .35s var(--spring)}
@media (prefers-reduced-motion:no-preference){.brand:hover .paw{rotate:-14deg}}
.brand b{color:var(--sage-d);font-weight:700}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a.link{font-weight:600;font-size:.92rem;color:var(--ink);text-underline-offset:.45em;text-decoration-thickness:.09em}
.nav a.link:hover{color:var(--terra);text-decoration:underline;text-decoration-style:wavy}
.nav a.link[aria-current]{color:var(--terra);text-decoration:underline;text-decoration-style:wavy}
.nav .btn{padding:.55em 1.2em;font-size:.88rem}
.nav-toggle{display:none;background:var(--card);border:1.5px solid var(--line);color:var(--ink);border-radius:12px;padding:.5rem .85rem;cursor:pointer;font:inherit;font-size:.85rem;font-weight:600}

/* Hero */
.hero{position:relative;padding:clamp(7.5rem, 6.5rem + 4vw, 10rem) 0 clamp(3.2rem, 2.6rem + 2.5vw, 5rem);background:linear-gradient(180deg,var(--cream-2),var(--cream));overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;z-index:0;filter:blur(4px);opacity:.55;border-radius:58% 42% 55% 45%/48% 58% 42% 52%}
.hero::before{width:26rem;height:26rem;background:var(--sage-soft);top:-8rem;left:-9rem}
.hero::after{width:20rem;height:20rem;background:var(--terra-soft);bottom:-7rem;right:38%}
@media (prefers-reduced-motion:no-preference){
  .hero::before{animation:morph 16s ease-in-out infinite alternate,drift 22s ease-in-out infinite alternate}
  .hero::after{animation:morph 13s ease-in-out infinite alternate-reverse,drift 18s ease-in-out infinite alternate-reverse}
}
.hero .wrap{position:relative;z-index:1}
.hero .grid{display:grid;gap:clamp(2.6rem, 1.6rem + 3vw, 4.5rem);align-items:center}
@media (min-width:880px){.hero .grid{grid-template-columns:1.05fr .95fr}}
.hero h1{font-size:clamp(2.4rem, 1.6rem + 3.4vw, 4rem);font-weight:640;line-height:1.08;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--terra);text-decoration:underline;text-decoration-style:wavy;text-decoration-thickness:.07em;text-underline-offset:.14em;text-decoration-color:rgba(217,120,74,.55)}
.hero p.lead{margin:1.3rem 0 2rem;max-width:46ch}
.hero .cta-row{display:flex;gap:1rem;flex-wrap:wrap}
.hero .badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.7rem}
.badge{display:inline-flex;align-items:center;gap:.35rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.36rem .72rem;font-size:.76rem;font-weight:600;color:var(--muted);white-space:nowrap;transition:rotate .3s var(--spring),translate .3s var(--spring),border-color .25s,color .25s}
.badge::before{content:"\2764";color:var(--terra);font-size:.78rem}
.badge:hover{rotate:-2deg;translate:0 -2px;border-color:#ecd3bf;color:var(--ink)}
.badge:nth-child(even):hover{rotate:2deg}
.paw-hint{margin-top:1.6rem;color:var(--muted);font-size:.85rem;font-style:italic}
@media (hover:none){.paw-hint{display:none}}
.hero .photo{position:relative;width:100%;max-width:34rem;margin-inline:auto}
.hero .photo[data-tilt]{transition:transform .2s ease;will-change:transform}
.hero .photo img{width:100%;object-fit:cover;aspect-ratio:5/4;border-radius:58% 42% 55% 45%/48% 58% 42% 52%;box-shadow:var(--shadow-lg)}
.hero .photo::before{content:"";position:absolute;inset:-1.15rem;border:2px dashed rgba(92,132,98,.5);border-radius:56% 44% 52% 48%/50% 56% 44% 54%;pointer-events:none}
.hero .photo::after{content:"\1F43E";position:absolute;left:3%;bottom:1%;width:3.4rem;height:3.4rem;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1.45rem;box-shadow:var(--shadow);rotate:-12deg}
@media (prefers-reduced-motion:no-preference){
  .hero .photo img{animation:morph 14s ease-in-out infinite alternate}
  .hero .photo::before{animation:morph 18s ease-in-out infinite alternate-reverse,spin 60s linear infinite}
  .hero .photo::after{animation:bob 3.6s ease-in-out infinite alternate}
  .hero .photo,.hero .cta-row,.hero .badges,.hero .paw-hint{animation:fadeup .7s .05s backwards}
  .hero .badges .badge{animation:fadeup .55s backwards}
  .hero .badges .badge:nth-child(1){animation-delay:.25s}
  .hero .badges .badge:nth-child(2){animation-delay:.37s}
  .hero .badges .badge:nth-child(3){animation-delay:.49s}
}
@keyframes morph{
  0%{border-radius:58% 42% 55% 45%/48% 58% 42% 52%}
  50%{border-radius:44% 56% 40% 60%/56% 44% 60% 40%}
  100%{border-radius:52% 48% 60% 40%/44% 52% 48% 58%}
}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(3rem,2rem)}}
@keyframes spin{to{rotate:360deg}}
@keyframes bob{from{translate:0 0}to{translate:0 -8px}}
@keyframes fadeup{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}

/* Wave divider */
.wave{display:block;width:100%;height:clamp(30px, 4vw, 60px);color:var(--cream)}
.wave.flip{transform:scaleY(-1)}
.wave-sage{color:var(--sage)}
.wave-cream2{color:var(--cream-2)}

/* Care cards */
.cards{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){
  .cards{grid-template-columns:repeat(4,1fr)}
  .cards--3{grid-template-columns:repeat(3,1fr)}
}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.6rem, 1.3rem + 1vw, 2.1rem);box-shadow:var(--shadow-sm);transition:translate .3s var(--spring),rotate .3s var(--spring),box-shadow .3s,border-color .3s}
.card:hover{box-shadow:var(--shadow-lg);border-color:#dcd2b9}
@media (prefers-reduced-motion:no-preference){.card:hover{translate:0 -6px;rotate:-.4deg}.card:nth-child(even):hover{rotate:.4deg}}
.card .ic{width:3.1rem;height:3.1rem;border-radius:50%;display:grid;place-items:center;margin-bottom:1.1rem;font-size:1.35rem;background:linear-gradient(145deg,#edf3e8,var(--sage-soft));box-shadow:inset 0 0 0 1px rgba(66,98,74,.08)}
@media (prefers-reduced-motion:no-preference){.card:hover .ic{animation:boing .55s ease}}
@keyframes boing{0%{transform:scale(1)}30%{transform:scale(1.28) rotate(-9deg)}62%{transform:scale(.94) rotate(6deg)}100%{transform:scale(1)}}
.card:nth-child(even) .ic{background:linear-gradient(145deg,#fbeee4,var(--terra-soft));box-shadow:inset 0 0 0 1px rgba(185,92,49,.09)}
.card h3{font-size:1.28rem;margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.95rem}

/* Green band */
.band{position:relative;background:var(--sage-d);color:#fff}
.band h2{color:#fff}
.band .lead{color:#dcead9}
.band .eyebrow{color:#f4cdb5}
.band .section{padding-block:clamp(2.8rem, 2.3rem + 2.5vw, 4.4rem)}
.band .stat b{color:#fff}
.band .stat span{color:#e2ecdd}
.stats-grid{display:grid;gap:2rem 1.5rem;grid-template-columns:repeat(2,1fr);text-align:center}
@media (min-width:760px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat b{display:block;font-family:"Fraunces",Georgia,serif;font-size:clamp(2.1rem, 1.6rem + 2vw, 3.2rem);font-variation-settings:"SOFT" 40,"WONK" 1;line-height:1.1}
.stat span{display:block;margin-top:.35rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}

/* Splits */
.split{display:grid;gap:clamp(2.5rem, 1.8rem + 2.5vw, 4rem);align-items:center}
@media (min-width:840px){.split{grid-template-columns:1fr 1fr}.split.rev>*:first-child{order:2}}
.split .photo{position:relative;rotate:-1.2deg;transition:rotate .45s var(--spring)}
.split .photo:hover{rotate:0deg}
.split .photo::before{content:"";position:absolute;inset:1.1rem -1.1rem -1.1rem 1.1rem;background:var(--sage-soft);border-radius:var(--radius-lg);rotate:1.6deg;z-index:-1}
.split:nth-child(even) .photo::before,.split.rev .photo::before{background:var(--terra-soft)}
.split .photo img{width:100%;object-fit:cover;aspect-ratio:4/3;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.split h2{margin-bottom:.85rem}
.split .lead{max-width:52ch}
.ticks{list-style:none;padding:0;margin-top:1.4rem;display:grid;gap:.75rem}
.ticks li{display:flex;gap:.65rem;align-items:flex-start;color:var(--muted)}
.ticks li::before{content:"\2764";flex:0 0 auto;color:var(--terra);margin-top:.1rem}

/* Gallery — patients of the month */
.gallery-grid{display:grid;gap:clamp(1rem, 0.7rem + 1.4vw, 1.8rem);grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;margin:0;z-index:0;rotate:var(--tilt,0deg);transition:rotate .35s var(--spring),scale .35s var(--spring)}
.tile:nth-child(1){--tilt:-1.7deg}
.tile:nth-child(2){--tilt:1.3deg}
.tile:nth-child(3){--tilt:-1deg}
.tile:nth-child(4){--tilt:1.6deg}
.tile:nth-child(5){--tilt:-1.4deg}
.tile:nth-child(6){--tilt:1.1deg}
.tile img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);cursor:zoom-in;box-shadow:var(--shadow);transition:box-shadow .3s}
@media (prefers-reduced-motion:no-preference){
  .tile:hover{rotate:0deg;scale:1.045;z-index:2}
  .tile:hover img{box-shadow:var(--shadow-lg)}
}
.tag{position:absolute;left:.8rem;bottom:.8rem;background:rgba(255,253,247,.94);border:1px solid var(--line);border-radius:999px;padding:.26rem .85rem;font-size:.8rem;font-weight:600;color:var(--sage-d);pointer-events:none;box-shadow:var(--shadow-sm);backdrop-filter:blur(3px)}

/* Lightbox */
.lb-lock{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:300;display:none;place-items:center;background:rgba(33,40,30,.94);padding:2rem;opacity:0;transition:opacity .25s ease}
.lightbox.open{display:grid;opacity:1}
.lb-stage{display:grid;gap:.9rem;justify-items:center;max-width:100%}
.lb-img{max-width:90vw;max-height:82vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-cap{color:#cfd8c9;font-size:.85rem;letter-spacing:.03em}
.lightbox .close{position:absolute;top:1.1rem;right:1.4rem;background:none;border:none;color:#fff;font-size:2.1rem;cursor:pointer;line-height:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(92,132,98,.35);border:1px solid rgba(255,255,255,.35);color:#fff;width:2.8rem;height:2.8rem;border-radius:50%;font-size:1.3rem;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.lb-nav:hover{background:var(--sage)}
.lb-prev{left:clamp(.5rem, 2vw, 2rem)}
.lb-next{right:clamp(.5rem, 2vw, 2rem)}

/* Team */
.team{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media (min-width:640px){.team{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.team{grid-template-columns:repeat(3,1fr)}}
.member{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:translate .3s var(--spring),box-shadow .3s,border-color .3s}
.member:hover{box-shadow:var(--shadow-lg);border-color:#dcd2b9}
@media (prefers-reduced-motion:no-preference){
  .member:hover{translate:0 -6px}
  .member img{transition:scale .6s ease}
  .member:hover img{scale:1.05}
}
.member img{width:100%;aspect-ratio:1/1;object-fit:cover}
.member .b{padding:1.4rem 1.5rem 1.7rem}
.member h3{font-size:1.24rem}
.member .role{color:var(--terra);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin:.25rem 0 .75rem}
.member p{color:var(--muted);font-size:.93rem}

/* Reviews */
.reviews{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%, 18rem),1fr))}
.review{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.9rem 1.8rem 1.7rem;box-shadow:var(--shadow-sm);transition:translate .3s var(--spring),box-shadow .3s}
.review::before{content:"\201C";position:absolute;top:.2rem;right:1.3rem;font-family:"Fraunces",Georgia,serif;font-size:5.5rem;line-height:1;color:var(--terra);opacity:.14;pointer-events:none}
.review:hover{box-shadow:var(--shadow-lg)}
@media (prefers-reduced-motion:no-preference){.review:hover{translate:0 -4px}}
.stars{color:var(--terra);letter-spacing:2px;margin-bottom:.7rem}
.review p{font-size:.98rem}
.review .who{margin-top:1.1rem;font-weight:700;color:var(--ink)}
.review .who span{display:block;color:var(--muted);font-weight:400;font-size:.82rem}

/* Page banner */
.page-banner{position:relative;overflow:hidden;padding:clamp(8rem, 7rem + 4vw, 10.5rem) 0 clamp(3.2rem, 2.6rem + 2.5vw, 4.6rem);background:linear-gradient(180deg,var(--cream-2),var(--cream));text-align:center}
.page-banner::before,.page-banner::after{content:"";position:absolute;z-index:0;filter:blur(4px);opacity:.5;border-radius:58% 42% 55% 45%/48% 58% 42% 52%}
.page-banner::before{width:22rem;height:22rem;background:var(--sage-soft);top:-9rem;left:-8rem}
.page-banner::after{width:16rem;height:16rem;background:var(--terra-soft);top:-6rem;right:-6rem}
@media (prefers-reduced-motion:no-preference){
  .page-banner::before{animation:morph 16s ease-in-out infinite alternate}
  .page-banner::after{animation:morph 13s ease-in-out infinite alternate-reverse}
}
.page-banner .wrap{position:relative;z-index:1}
.page-banner h1{font-size:clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem)}
.page-banner p{color:var(--muted);max-width:58ch;margin:1.1rem auto 0}

/* CTA */
.cta{position:relative;overflow:hidden;background:var(--terra);color:#fff;text-align:center;border-radius:var(--radius-lg);padding:clamp(2.6rem, 2rem + 2.5vw, 4.2rem)}
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.cta::before{width:17rem;height:17rem;background:rgba(255,255,255,.09);top:-7rem;left:-6rem}
.cta::after{width:13rem;height:13rem;background:rgba(66,30,12,.08);bottom:-5.5rem;right:-4.5rem}
.cta>*{position:relative;z-index:1}
.cta h2{color:#fff}
.cta p{color:#fbe3d6;max-width:44ch;margin:1rem auto 2rem}
.cta .eyebrow{color:#ffd9c2}
.cta .btn{background:#fff;border-color:#fff;color:var(--terra-d)}
.cta .btn:hover{background:var(--cream);border-color:var(--cream)}

/* Form */
.info-grid{display:grid;gap:2.5rem;align-items:start}
@media (min-width:880px){.info-grid{grid-template-columns:1.1fr .9fr}}
.form-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem, 1.1rem + 2vw, 2.5rem);box-shadow:var(--shadow-lg)}
.form-card::after{content:"\1F43E";position:absolute;right:-.7rem;bottom:-1rem;font-size:5.4rem;line-height:1;opacity:.06;rotate:-18deg;pointer-events:none}
.form-card>*{position:relative;z-index:1}
.form-card h2{font-size:clamp(1.5rem, 1.3rem + 0.9vw, 1.9rem);margin-bottom:1.3rem}
.field{margin-bottom:1.3rem}
.field label{display:block;font-weight:700;font-size:.86rem;margin-bottom:.45rem;transition:color .2s}
.field:focus-within label{color:var(--sage-d)}
.field input,.field select,.field textarea{width:100%;font:inherit;color:var(--ink);background:#fdfbf5;border:1.5px solid var(--line);border-radius:14px;padding:.8rem 1rem;transition:border-color .2s,box-shadow .2s,background-color .2s}
.field input::placeholder,.field textarea::placeholder{color:#a8ad9d}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#d6cbae}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sage);background:#fff;box-shadow:0 0 0 4px var(--sage-soft)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c8462' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center;padding-right:2.6rem;cursor:pointer}
.field textarea{min-height:7rem;resize:vertical}
.field .hint{font-size:.79rem;color:var(--muted);margin-top:.35rem}
.two{display:grid;gap:0 1.2rem}
@media (min-width:520px){.two{grid-template-columns:1fr 1fr}}
form .btn{margin-top:.5rem}
.demo-msg{display:none;margin-top:1.2rem;padding:1rem 1.2rem;border-radius:14px;background:var(--sage-soft);border:1px solid #c6d8c0;color:var(--sage-d);font-size:.92rem;line-height:1.55}
.demo-msg.show{display:flex;gap:.75rem;align-items:flex-start}
.demo-msg.show::before{content:"\2714";flex:0 0 auto;width:1.5rem;height:1.5rem;margin-top:.1rem;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font-size:.72rem}
@media (prefers-reduced-motion:no-preference){.demo-msg.show{animation:fadeup .45s var(--spring)}}
.side-card{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.8rem;margin-bottom:1.2rem}
.side-card h3{font-size:1.12rem;margin-bottom:.55rem}
.side-card p{color:var(--muted);font-size:.95rem}
.side-card a{color:var(--sage-d);font-weight:700;text-underline-offset:.3em}
.side-card a:hover{text-decoration:underline}
.side-card .open-badge{margin:.1rem 0 .8rem}
.hours-row{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px dashed var(--line);color:var(--muted);font-size:.92rem}
.hours-row:last-child{border-bottom:none}
.note{font-size:.82rem;color:var(--muted);margin-top:.95rem}

/* Numbered steps — first-visit walkthroughs */
.steps{display:grid;gap:1.4rem;grid-template-columns:1fr;counter-reset:step}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.6rem, 1.3rem + 1vw, 2rem);box-shadow:var(--shadow-sm);transition:translate .3s var(--spring),box-shadow .3s,border-color .3s}
.step:hover{box-shadow:var(--shadow-lg);border-color:#dcd2b9}
@media (prefers-reduced-motion:no-preference){.step:hover{translate:0 -6px}}
.step .num{counter-increment:step;display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:58% 42% 55% 45%/48% 58% 42% 52%;background:var(--sage);color:#fff;font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.15rem;margin-bottom:1.05rem}
.step .num::before{content:counter(step)}
.step:nth-child(2) .num{background:var(--terra);border-radius:44% 56% 40% 60%/56% 44% 60% 40%}
.step:nth-child(3) .num{border-radius:52% 48% 60% 40%/44% 52% 48% 58%}
.step h3{font-size:1.2rem;margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.95rem}

/* FAQ — plain <details>, styled */
.faq{max-width:46rem;margin-inline:auto;display:grid;gap:.9rem}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .25s,box-shadow .25s}
.faq details:hover{border-color:#dcd2b9}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.4rem;font-weight:700;font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;font-family:"Fraunces",Georgia,serif;font-size:1.5rem;line-height:1;color:var(--terra);transition:rotate .35s var(--spring)}
.faq details[open] summary{color:var(--sage-d)}
.faq details[open] summary::after{rotate:135deg}
.faq details p{padding:0 1.4rem 1.3rem;color:var(--muted);font-size:.95rem;max-width:60ch}

/* Footer */
.site-foot{position:relative;background:#31402f;color:#b9c6b1;margin-top:clamp(1rem, 2vw, 2rem);padding-block:clamp(3rem, 2.5rem + 2vw, 4rem) 2rem;font-size:.92rem}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:-11px;height:12px;background-image:radial-gradient(circle at 12px 13px,#31402f 11px,rgba(49,64,47,0) 12px);background-size:24px 12px;background-position:center top;pointer-events:none}
.foot-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%, 13rem),1fr));padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}
.site-foot .brand{color:#fff;margin-bottom:.7rem}
.site-foot .brand .paw{background:#fff;color:var(--sage-d)}
.site-foot h4{font-family:"Fraunces",Georgia,serif;color:#fff;font-size:1rem;margin-bottom:.7rem}
.site-foot a{transition:color .2s}
.site-foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:.3em}
.site-foot ul{list-style:none;padding:0;display:grid;gap:.4rem}
.foot-bottom{padding-top:1.5rem;text-align:center;color:#8a9a83;font-size:.85rem}

/* Reveal — scroll-driven, with graceful fallback */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{animation:rise both;animation-timeline:view();animation-range:entry 0% cover 22%}
    /* Per-item scroll-driven pops: cards and patient tiles arrive one by one.
       backwards fill so the finished animation releases the element and
       hover lifts (translate) keep working afterwards. */
    .cards .card.reveal,.gallery-grid .tile.reveal{animation-fill-mode:backwards;animation-range:entry 0% entry 38%}
    .cards .card.reveal:nth-child(3n+2),.gallery-grid .tile.reveal:nth-child(3n+2){animation-range:entry 8% entry 46%}
    .cards .card.reveal:nth-child(3n),.gallery-grid .tile.reveal:nth-child(3n){animation-range:entry 16% entry 54%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* Smooth cross-page fades (browsers that support it) */
@view-transition{navigation:auto}

/* Paw prints trailing the cursor (spawned by demo.js) */
.pawprint{position:fixed;z-index:260;pointer-events:none;font-size:1.05rem;translate:-50% -50%;rotate:var(--rot,0deg);opacity:.85}
@media (prefers-reduced-motion:no-preference){.pawprint{animation:pawfade .95s ease-out forwards}}
@keyframes pawfade{to{opacity:0;scale:1.8}}

/* Pocket pup — cursor companion (spawned by enhance.js) */
.pup{position:fixed;left:0;top:0;z-index:150;font-size:1.7rem;line-height:1;pointer-events:none;user-select:none;opacity:0;transition:opacity .5s;filter:drop-shadow(0 4px 8px rgba(51,55,46,.25));will-change:transform}
.pup.on{opacity:1}

/* Mobile nav */
@media (max-width:880px){
  .nav-toggle{display:inline-block}
  .nav{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);flex-direction:column;align-items:flex-start;justify-content:center;gap:1.4rem;background:var(--cream);padding:2.4rem;transform:translateX(105%);transition:transform .35s cubic-bezier(.22,.9,.3,1);box-shadow:-18px 0 50px rgba(51,55,46,.18);border-left:1px solid var(--line)}
  .site-head[data-open="true"] .nav{transform:none}
  .nav a.link{font-size:1.2rem}
  .nav .btn{margin-top:.5rem;font-size:1rem}
  .nav::after{content:"\1F43E";position:absolute;bottom:1.5rem;right:1.8rem;font-size:2.4rem;opacity:.14;rotate:-18deg}
}
@media (prefers-reduced-motion:reduce){.nav{transition:none}}
.center-cta{text-align:center;margin-top:clamp(2rem, 1.6rem + 1.5vw, 3rem)}

/* --- Find us: real map embed + live hours + mini tool --- */
#visit{scroll-margin-top:5rem}
.map-grid{display:grid;gap:2rem;align-items:start}
@media (min-width:900px){.map-grid{grid-template-columns:1.12fr .88fr}}
.map-card{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow-lg)}
.map-embed{display:block;width:100%;aspect-ratio:4/3;border:0;background:var(--cream-2)}
@media (max-width:600px){.map-embed{aspect-ratio:1/1}}
.map-card figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:.85rem 1.2rem;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line)}
.map-card figcaption a{color:var(--terra);font-weight:600;white-space:nowrap}
.map-card figcaption a:hover{text-decoration:underline;text-underline-offset:.3em}
.open-badge{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:.9rem;border-radius:999px;padding:.5rem 1.1rem;margin-bottom:1rem;background:rgba(128,128,128,.12);color:var(--muted)}
.open-badge::before{content:"";flex:0 0 auto;width:.6em;height:.6em;border-radius:50%;background:currentColor}
.open-badge.is-open{background:rgba(38,145,84,.14);color:#1d7a4b}
.open-badge.is-closed{background:rgba(196,86,49,.14);color:#96471b}
@media (prefers-reduced-motion:no-preference){.open-badge.is-open::before{animation:dotpulse 1.8s ease-in-out infinite}}
@keyframes dotpulse{50%{opacity:.4}}
#age-calc h3{font-size:1.3rem;margin-bottom:1rem}
.calc-out{margin-top:.4rem;padding:1rem 1.2rem;border-radius:var(--radius-sm);background:var(--sage-soft);border:1px solid #cfdfca;font-size:.98rem}
.calc-out b{color:var(--sage-d)}
@media (prefers-reduced-motion:no-preference){.calc-out.pop{animation:calcpop .45s var(--spring)}}
@keyframes calcpop{0%{scale:.96}55%{scale:1.03}100%{scale:1}}