/* ============================================================
   Northfield Veterinary Clinic — design system
   Palette keyed to the real brand mark (orange #F28800)
   ============================================================ */
:root{
  --brand:      #F28800;  /* exact logo orange */
  --brand-deep: #D26F00;  /* hover / pressed */
  --brand-dark: #B85E00;
  --brand-soft: #FCEFDD;  /* tinted band */
  --brand-softer:#FDF6EC;
  --brand-tint: #FBE7CC;

  --bg:       #FBF8F3;     /* warm cream page */
  --bg-2:     #F5EFE6;     /* alt section */
  --surface:  #FFFFFF;
  --ink:      #221C14;     /* deep warm espresso — headings/body */
  --ink-2:    #5C5347;     /* muted warm */
  --ink-3:    #8A8073;     /* captions */
  --border:   #ECE4D7;     /* warm hairline */
  --border-2: #E0D6C6;
  --espresso: #1C1812;     /* footer / dark surfaces */
  --espresso-2:#2A241B;

  --ring: rgba(242,136,0,.45);
  --shadow-sm: 0 1px 2px rgba(34,28,20,.05), 0 1px 3px rgba(34,28,20,.05);
  --shadow:    0 6px 20px -6px rgba(34,28,20,.12), 0 2px 6px rgba(34,28,20,.05);
  --shadow-lg: 0 30px 60px -22px rgba(34,28,20,.22), 0 8px 24px -12px rgba(34,28,20,.12);
  --shadow-brand: 0 16px 34px -12px rgba(242,136,0,.45);

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 56px);
  --sect: clamp(60px, 9vw, 116px);

  --ff-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --ff-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ff-body);
  font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:6px; }
::selection{ background:var(--brand); color:#fff; }

h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:700; color:var(--ink);
  line-height:1.06; letter-spacing:-.02em; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }

.h-display{ font-size:clamp(2.5rem, 6.2vw, 4.6rem); }
.h1{ font-size:clamp(2.1rem, 4.6vw, 3.4rem); }
.h2{ font-size:clamp(1.7rem, 3.4vw, 2.6rem); }
.h3{ font-size:clamp(1.25rem, 2vw, 1.55rem); }
.lead{ font-size:clamp(1.06rem,1.5vw,1.28rem); line-height:1.55; color:var(--ink-2); }
.eyebrow{ font:600 .78rem/1 var(--ff-body); letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-dark); display:inline-flex; align-items:center; gap:.55em; }
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--brand); border-radius:2px; }
.muted{ color:var(--ink-2); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sect); }
.center{ text-align:center; }
.stack-sm > * + *{ margin-top:.6rem; }
.grid{ display:grid; gap:24px; }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr;} }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font:600 1rem/1 var(--ff-body); padding:.92em 1.5em; border-radius:999px;
  border:1.5px solid transparent; transition:transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s; white-space:nowrap; min-height:48px; }
.btn:active{ transform:translateY(1px); }
.btn svg{ width:1.15em; height:1.15em; }
.btn-brand{ background:var(--brand); color:#3a2400; box-shadow:var(--shadow-brand); font-weight:700; }
.btn-brand:hover{ background:var(--brand-deep); color:#fff; transform:translateY(-2px); }
.btn-dark{ background:var(--espresso); color:#fff; }
.btn-dark:hover{ background:var(--espresso-2); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--border-2); }
.btn-ghost:hover{ border-color:var(--ink); background:rgba(34,28,20,.03); }
.btn-wa{ background:#1FAA53; color:#fff; }
.btn-wa:hover{ background:#178a43; transform:translateY(-2px); }
.btn-lg{ padding:1.08em 1.9em; font-size:1.06rem; }
.btn-sm{ padding:.7em 1.15em; min-height:42px; font-size:.92rem; }
.btn-block{ width:100%; }

/* ---------- cards ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .3s ease, border-color .25s; }
.card-hover:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--border-2); }
.tag{ display:inline-flex; align-items:center; gap:.45em; font:600 .78rem/1 var(--ff-body);
  padding:.5em .85em; border-radius:999px; background:var(--brand-soft); color:var(--brand-dark); }
.pill-outline{ border:1px solid var(--border-2); background:var(--surface); color:var(--ink-2);
  border-radius:999px; padding:.5em .9em; font:600 .82rem/1 var(--ff-body); }

/* ---------- icon chip ---------- */
.ichip{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-dark); flex:none; }
.ichip svg{ width:26px; height:26px; }
.ichip-dark{ background:var(--espresso); color:var(--brand); }

/* ---------- divider doodle ---------- */
.paw-rule{ display:flex; align-items:center; gap:.8rem; color:var(--brand); }
.paw-rule::before,.paw-rule::after{ content:""; height:1px; flex:1; background:var(--border-2); }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font:600 .85rem/1 var(--ff-body); color:var(--ink); }
.field .req{ color:var(--brand-dark); }
.input,.select,.textarea{ font-family:var(--ff-body); font-size:1rem; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--border-2); border-radius:var(--r-sm);
  padding:.8em .95em; width:100%; transition:border-color .2s, box-shadow .2s; }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--ring); }
.textarea{ min-height:120px; resize:vertical; }
.input::placeholder,.textarea::placeholder{ color:var(--ink-3); }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   Navbar
   ============================================================ */
.nav{ position:sticky; top:0; z-index:50; background:rgba(251,248,243,.82);
  backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, background .3s; }
.nav.scrolled{ border-color:var(--border); box-shadow:0 4px 20px -12px rgba(34,28,20,.25); }
.nav-inner{ display:flex; align-items:center; gap:1.4rem; height:78px; }
.brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.brand-mark{ height:46px; width:auto; }
.brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font:700 1.18rem/1 var(--ff-display); letter-spacing:-.01em; color:var(--ink); }
.brand-sub{ font:600 .62rem/1 var(--ff-body); letter-spacing:.22em; text-transform:uppercase; color:var(--brand-dark); margin-top:.3em; }
.nav-links{ display:flex; align-items:center; gap:.2rem; margin-left:auto; }
.nav-links a{ font:600 .95rem/1 var(--ff-body); color:var(--ink-2); padding:.6em .8em; border-radius:10px; transition:color .2s, background .2s; }
.nav-links a:hover{ color:var(--ink); background:rgba(34,28,20,.04); }
.nav-links a.active{ color:var(--brand-dark); }
.nav-cta{ display:flex; align-items:center; gap:.6rem; flex:none; }
.nav-call{ display:inline-flex; align-items:center; gap:.45rem; font:600 .95rem/1 var(--ff-body); color:var(--ink); padding:.5em; }
.nav-call:hover{ color:var(--brand-dark); }
.burger{ display:none; width:46px; height:46px; border:1px solid var(--border-2); background:var(--surface); border-radius:12px; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.burger span{ width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }
.burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:1040px){
  .nav-links{ display:none; }
  .nav-call{ display:none; }
  .burger{ display:flex; }
}

/* mobile drawer */
.drawer{ position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:var(--surface);
  z-index:70; transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; padding:1.5rem; box-shadow:var(--shadow-lg); overflow-y:auto; }
.drawer.open{ transform:none; }
.drawer-scrim{ position:fixed; inset:0; background:rgba(28,24,18,.5); z-index:65; opacity:0; pointer-events:none; transition:opacity .3s; }
.drawer-scrim.open{ opacity:1; pointer-events:auto; }
.drawer-links{ display:flex; flex-direction:column; gap:.2rem; margin-top:1.4rem; }
.drawer-links a{ font:600 1.12rem/1 var(--ff-display); color:var(--ink); padding:.85rem .6rem; border-radius:12px; border-bottom:1px solid var(--border); }
.drawer-links a.active{ color:var(--brand-dark); }
.drawer-links a:last-child{ border-bottom:none; }

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; padding-top:clamp(36px,6vw,72px); padding-bottom:var(--sect); overflow:hidden; }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(10px); z-index:0; pointer-events:none; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,60px); align-items:center; position:relative; z-index:1; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-media{ position:relative; }
.hero-photo{ width:100%; height:clamp(360px,52vw,560px); object-fit:cover; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); }
.hero-badge{ position:absolute; background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-lg); border:1px solid var(--border); }

/* trust strip */
.trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.trust-item{ background:var(--surface); padding:1.4rem 1.3rem; display:flex; gap:.85rem; align-items:flex-start; }
@media (max-width:860px){ .trust{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .trust{ grid-template-columns:1fr;} }

/* clinic grid card */
.clinic-card{ padding:1.4rem; display:flex; flex-direction:column; gap:.7rem; height:100%; }
.clinic-card .num{ font:600 .8rem/1 var(--ff-body); color:var(--ink-3); }
.clinic-arrow{ margin-top:auto; display:inline-flex; align-items:center; gap:.4rem; font:600 .9rem/1 var(--ff-body); color:var(--brand-dark); }
.clinic-card:hover .clinic-arrow svg{ transform:translateX(3px); }
.clinic-arrow svg{ transition:transform .2s; }

/* service card with image */
.svc-card{ overflow:hidden; display:flex; flex-direction:column; height:100%; }
.svc-card .ph{ aspect-ratio:16/10; width:100%; object-fit:cover; }
.svc-body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }

/* vet card */
.vet-card{ overflow:hidden; display:flex; flex-direction:column; }
.vet-photo{ aspect-ratio:5/6; object-fit:cover; object-position:top center; background:var(--bg-2); width:100%; }
.vet-body{ padding:1.3rem 1.4rem 1.5rem; }

/* package card */
.pkg-card{ padding:1.7rem; display:flex; flex-direction:column; gap:1rem; height:100%; position:relative; overflow:hidden; }
.pkg-card .price-note{ font:600 .82rem/1 var(--ff-body); color:var(--brand-dark); background:var(--brand-soft); padding:.5em .8em; border-radius:999px; align-self:flex-start; }

/* FAQ */
.faq-item{ border:1px solid var(--border); border-radius:var(--r); background:var(--surface); overflow:hidden; transition:box-shadow .25s, border-color .25s; }
.faq-item.open{ box-shadow:var(--shadow); border-color:var(--border-2); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%;
  text-align:left; background:none; border:none; padding:1.2rem 1.35rem; font:600 1.06rem/1.3 var(--ff-display); color:var(--ink); }
.faq-ic{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--brand-soft); color:var(--brand-dark); display:grid; place-items:center; transition:transform .3s, background .3s, color .3s; }
.faq-item.open .faq-ic{ transform:rotate(45deg); background:var(--brand); color:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a-inner{ padding:0 1.35rem 1.3rem; color:var(--ink-2); }

/* care model / cta band */
.band{ background:var(--espresso); color:#fff; border-radius:var(--r-xl); padding:clamp(2rem,5vw,3.6rem); position:relative; overflow:hidden; }
.band h2,.band h3{ color:#fff; }
.band-soft{ background:var(--brand-soft); }

/* breadcrumb */
.crumbs{ display:flex; align-items:center; gap:.5rem; font:600 .85rem/1 var(--ff-body); color:var(--ink-3); flex-wrap:wrap; }
.crumbs a:hover{ color:var(--brand-dark); }

/* page hero (interior) */
.phero{ background:var(--bg-2); border-bottom:1px solid var(--border); padding-block:clamp(40px,6vw,72px); }

/* ============================================================
   WhatsApp FAB + mobile action bar
   ============================================================ */
.fab{ position:fixed; right:18px; bottom:18px; z-index:55; width:58px; height:58px; border-radius:50%;
  background:#1FAA53; color:#fff; display:grid; place-items:center; box-shadow:0 12px 28px -8px rgba(31,170,83,.6);
  border:none; transition:transform .2s; }
.fab:hover{ transform:scale(1.06); }
.fab svg{ width:30px; height:30px; }
@media (max-width:680px){ .fab{ bottom:84px; } }

.mbar{ position:fixed; left:0; right:0; bottom:0; z-index:54; display:none;
  background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-top:1px solid var(--border);
  padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom)); gap:.5rem; }
.mbar a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.5rem .2rem;
  border-radius:14px; font:600 .72rem/1 var(--ff-body); color:var(--ink-2); }
.mbar a svg{ width:22px; height:22px; }
.mbar a.primary{ background:var(--brand); color:#3a2400; }
.mbar a.wa{ color:#1FAA53; }
@media (max-width:680px){ .mbar{ display:flex; } body{ padding-bottom:74px; } }

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:var(--espresso); color:#cfc6b8; padding-top:clamp(48px,7vw,80px); }
.footer a{ color:#cfc6b8; transition:color .2s; }
.footer a:hover{ color:var(--brand); }
.footer h4{ color:#fff; font-size:1.02rem; margin-bottom:1rem; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:2.4rem; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-links{ display:flex; flex-direction:column; gap:.6rem; font-size:.95rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:clamp(36px,5vw,56px); padding-block:1.6rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:#9a907f; }
.soc{ width:42px; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; color:#cfc6b8; transition:.2s; }
.soc:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* map placeholder */
.mapbox{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); background:
  repeating-linear-gradient(45deg, #efe8dc, #efe8dc 14px, #f4efe6 14px, #f4efe6 28px); min-height:340px; display:grid; place-items:center; }
.mapbox .mlabel{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1rem 1.3rem; box-shadow:var(--shadow); text-align:center; max-width:280px; }

/* misc helpers */
.flow > * + *{ margin-top:1.1rem; }
.maxw-prose{ max-width:62ch; }
.relative{ position:relative; } .z1{ position:relative; z-index:1; }
.hide-mob{ } @media (max-width:680px){ .hide-mob{ display:none !important; } }
.only-mob{ display:none; } @media (max-width:680px){ .only-mob{ display:block; } }