/* =========================================================
   Animal Care Hospital — base.css
   Palette: Clinical-Trust · Teal + Slate + White
   Fonts: Archivo (display) + Inter Tight (body)
   ========================================================= */

/* ── Brand world tokens ── */
:root {
  --coat:       #F4FAFB;   /* exam-coat white */
  --coat-2:     #E2F1F4;   /* light teal panel */
  --coat-soft:  #FAFEFE;
  --scrub:      #18404D;   /* deep scrub-slate */
  --scrub-2:    #0E2C39;
  --teal:       #1A96A8;   /* clinical teal */
  --teal-2:     #28B4CC;
  --teal-soft:  #A4DAE5;
  --coral:      #D9572A;   /* warm CTA spot */
  --muted:      #3A5C6A;
  --muted-2:    #567483;

  /* structural aliases */
  --paper:       var(--coat);
  --paper-2:     var(--coat-2);
  --paper-soft:  var(--coat-soft);
  --ink:         var(--scrub);
  --ink-2:       var(--scrub-2);
  --accent:      var(--teal);
  --accent-2:    var(--teal-2);
  --accent-soft: var(--teal-soft);
  --spot:        var(--coral);
  --line:        rgba(24,64,77,.12);
  --line-2:      rgba(24,64,77,.05);

  --f-display: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-body:    "Inter Tight", "Inter", -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  --container:        1300px;
  --container-narrow: 1020px;
  --gutter:  clamp(20px,4vw,56px);
  --ease:    cubic-bezier(.22,1,.36,1);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.12);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.06),0 24px 48px -20px rgba(0,0,0,.18);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; min-width:0; }
*::selection { background:var(--ink); color:var(--paper); }
html { scroll-behavior:smooth; overflow-x:hidden; width:100%; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--f-body); font-size:16px; line-height:1.65; font-weight:400;
  color:var(--ink); background:var(--paper);
  overflow-x:hidden; width:100%; max-width:100vw;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
section,header,footer { max-width:100vw; overflow-x:clip; position:relative; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; transition:opacity .3s var(--ease); }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--coat-2); }
::-webkit-scrollbar-thumb { background:var(--teal); }

/* ── Film grain ── */
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:200;
  opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
@media (prefers-reduced-motion:reduce) { body::after { display:none; } }

/* ── Typography ── */
h1,h2,h3,h4,h5 {
  font-family:var(--f-display); font-weight:700; letter-spacing:-.018em;
  line-height:1.08; color:var(--ink);
}
h1 { font-size:clamp(2.4rem,5.8vw,5rem); }
h2 { font-size:clamp(1.9rem,3.8vw,3.2rem); }
h3 { font-size:clamp(1.2rem,2.2vw,1.8rem); }
p  { color:var(--muted); }
em,.italic { font-style:italic; }

.eyebrow {
  font-family:var(--f-body); text-transform:uppercase;
  letter-spacing:.4em; font-size:11px; font-weight:600; color:var(--ink);
  display:inline-block;
}
.eyebrow::before {
  content:""; display:inline-block; width:26px; height:2px;
  background:var(--accent); margin-right:14px; vertical-align:middle;
}
.label-mono {
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2);
}

/* ── Layout ── */
.container        { max-width:var(--container);        margin:0 auto; padding:0 var(--gutter); }
.container-narrow { max-width:var(--container-narrow); margin:0 auto; padding:0 var(--gutter); }
.section          { padding:clamp(64px,10vw,130px) 0; }
.section--dark    { background:var(--ink); color:var(--paper); }
.section--dark h1,.section--dark h2,.section--dark h3 { color:var(--paper); }
.section--dark p  { color:rgba(244,250,251,.72); }
.section--paper2  { background:var(--paper-2); }
.grid             { display:grid; gap:clamp(24px,4vw,56px); }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  padding:15px 30px; border:2px solid var(--ink);
  background:var(--ink); color:var(--paper);
  transition:all .3s var(--ease);
}
.btn:hover { background:transparent; color:var(--ink); opacity:1; }
.btn--teal  { background:var(--teal); border-color:var(--teal); color:#fff; }
.btn--teal:hover { background:transparent; color:var(--teal); }
.btn--ghost { background:transparent; color:var(--ink); }
.btn--ghost:hover { background:var(--ink); color:var(--paper); }
.btn--coral { background:var(--coral); border-color:var(--coral); color:#fff; }
.btn--coral:hover { background:transparent; color:var(--coral); }
.btn--outline-white { background:transparent; border-color:#fff; color:#fff; }
.btn--outline-white:hover { background:#fff; color:var(--ink); opacity:1; }

/* ── Announce bar ── */
.announce {
  background:var(--ink); text-align:center; padding:10px 20px;
  font-size:10.5px; letter-spacing:.36em; text-transform:uppercase;
  color:rgba(244,250,251,.8); font-family:var(--f-mono);
}
.announce a { color:var(--teal-2); }
.announce a:hover { opacity:.8; }

/* ── Sticky nav ── */
.nav {
  position:sticky; top:0; z-index:100;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:24px; padding:16px var(--gutter);
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line); transition:padding .3s var(--ease);
}
.nav.scrolled { padding-top:10px; padding-bottom:10px; }
.nav-logo { font-family:var(--f-display); font-weight:800; font-size:1.15rem; letter-spacing:-.01em; }
.nav-logo span { color:var(--teal); }
.nav-links {
  display:flex; gap:28px; justify-content:center; list-style:none;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
}
.nav-links a:hover { color:var(--teal); opacity:1; }
.nav-cta { white-space:nowrap; }
.nav-burger { display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-burger span { width:22px; height:1.5px; background:var(--ink); transition:.3s var(--ease); }

/* ── Hero ── */
.hero {
  position:relative; min-height:92vh;
  display:flex; align-items:center;
  background:var(--scrub-2);
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background-image:url("https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=1600&q=80");
  background-size:cover; background-position:center 30%;
  opacity:.28; transition:opacity 1s;
}
.hero-content { position:relative; z-index:2; }
.hero-meta-row {
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--teal-soft);
  margin-bottom:24px;
}
.hero-meta-row .dot { width:3px; height:3px; border-radius:50%; background:var(--teal); }
.hero h1 { color:#fff; margin-bottom:20px; max-width:14ch; }
.hero h1 em { color:var(--teal-2); font-style:italic; }
.hero-tag { font-size:clamp(1rem,1.6vw,1.2rem); max-width:52ch; color:rgba(244,250,251,.75); margin-bottom:36px; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-phone {
  font-family:var(--f-mono); font-size:1.1rem; letter-spacing:.04em;
  color:var(--teal-2); font-weight:500;
}
.hero-phone:hover { opacity:.8; }

/* ── Marquee ── */
.marquee { overflow:hidden; border-block:1px solid var(--line); padding:13px 0; background:var(--paper-2); }
.marquee-track {
  display:flex; gap:28px; white-space:nowrap; width:max-content;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2); animation:marq 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track span:nth-child(even) { color:var(--teal); }
@keyframes marq { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .marquee-track { animation:none; } }

/* ── Trust bar ── */
.trust-bar { background:var(--ink); padding:clamp(36px,5vw,64px) 0; }
.trust-bar .grid { grid-template-columns:repeat(4,1fr); text-align:center; gap:0; }
.trust-item { padding:0 24px; }
.trust-item + .trust-item { border-left:1px solid rgba(244,250,251,.1); }
.trust-num { font-family:var(--f-display); font-size:clamp(2rem,4vw,3rem); font-weight:800; color:#fff; line-height:1; }
.trust-num em { color:var(--teal-2); font-style:normal; }
.trust-label { font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,250,251,.55); margin-top:6px; }

/* ── Service cards ── */
.service-card {
  background:var(--paper); border:1px solid var(--line); padding:32px 28px;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.service-card:hover { box-shadow:var(--shadow-lift); transform:translateY(-3px); }
.service-icon { width:44px; height:44px; background:var(--coat-2); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.service-icon svg { width:22px; height:22px; stroke:var(--teal); fill:none; stroke-width:1.8; stroke-linecap:round; }
.service-card h3 { font-size:1.15rem; margin-bottom:10px; }
.service-card p { font-size:.9rem; line-height:1.6; }

/* ── Story split ── */
.story-grid { grid-template-columns:1fr 1.1fr; align-items:center; gap:clamp(40px,6vw,100px); }
.story-img { position:relative; }
.story-img img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.story-badge {
  position:absolute; bottom:-20px; right:-20px;
  width:100px; height:100px; background:var(--teal); border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; font-family:var(--f-display);
}
.story-badge .badge-year { font-size:1.5rem; font-weight:800; line-height:1; }
.story-badge .badge-text { font-size:9px; letter-spacing:.12em; text-transform:uppercase; opacity:.9; }

/* ── Hours band ── */
.hours-band { background:var(--teal); padding:clamp(36px,5vw,60px) 0; }
.hours-band h2 { color:#fff; }
.hours-band p { color:rgba(255,255,255,.82); }
.hours-grid { grid-template-columns:1fr 1fr 1fr; align-items:start; gap:40px; }
.hours-block { }
.hours-block .label-mono { color:rgba(255,255,255,.7); }
.hours-row { display:flex; justify-content:space-between; padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.15); font-size:.92rem; color:#fff; }

/* ── FAQ ── */
details { border-bottom:1px solid var(--line); }
summary {
  padding:20px 0; cursor:pointer; font-family:var(--f-display);
  font-size:1.1rem; font-weight:600; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
  color:var(--ink);
}
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; font-size:1.4rem; font-weight:300; color:var(--teal); transition:transform .3s var(--ease); }
details[open] summary::after { transform:rotate(45deg); }
details p { padding:0 0 20px; font-size:.95rem; max-width:68ch; }

/* ── Contact form ── */
.form-stack { display:flex; flex-direction:column; gap:14px; }
.form-stack input,.form-stack textarea,.form-stack select {
  width:100%; padding:14px 16px;
  background:var(--paper); border:1.5px solid var(--line);
  font-family:var(--f-body); font-size:.95rem; color:var(--ink);
  transition:border-color .3s var(--ease);
}
.form-stack input:focus,.form-stack textarea:focus {
  outline:none; border-color:var(--teal); background:var(--coat-soft);
}
.form-stack textarea { resize:vertical; min-height:120px; }

/* ── Reveal ── */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.reveal.is-in,.no-js .reveal,.reveal.reveal--shown { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } }

/* ── Image fallback ── */
.img-fallback { display:flex; align-items:center; justify-content:center;
  background:var(--paper-2); border:1px solid var(--line); min-height:280px; }
.img-fallback-cap { font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2); padding:24px; text-align:center; }

/* ── Footer ── */
.footer { background:var(--scrub-2); color:var(--paper); padding:clamp(56px,8vw,96px) 0 36px; }
.footer a { color:rgba(244,250,251,.65); }
.footer a:hover { color:var(--teal-2); opacity:1; }
.footer-name { font-family:var(--f-display); font-size:1.5rem; font-weight:800; color:#fff; }
.footer-name span { color:var(--teal-2); }
.footer-grid { grid-template-columns:2fr 1fr 1fr 1fr; }
.footer .label-mono { color:rgba(244,250,251,.4); margin-bottom:14px; display:block; }
.footer p { color:rgba(244,250,251,.65); font-size:.9rem; }
.footer-credit {
  margin-top:40px; padding-top:22px; border-top:1px solid rgba(244,250,251,.1);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.07em; color:rgba(244,250,251,.4);
}
.footer-credit a { color:rgba(244,250,251,.4); }
.footer-credit a:hover { color:var(--teal-2); opacity:1; }

/* ── Utilities ── */
.center { text-align:center; }
.mt-xs { margin-top:8px; }
.mt-s  { margin-top:16px; }
.mt-m  { margin-top:32px; }
.mt-l  { margin-top:64px; }
.maxw-prose { max-width:60ch; }

/* ── Responsive ── */
@media (max-width:860px) {
  .nav-links { display:none; }
  .nav-burger { display:flex; }
  .nav { grid-template-columns:1fr auto; }
  .nav-links.open {
    display:flex; position:fixed; inset:58px 0 auto 0; flex-direction:column;
    background:var(--paper); padding:28px var(--gutter); gap:20px;
    border-bottom:1px solid var(--line); z-index:99;
  }
  .trust-bar .grid { grid-template-columns:repeat(2,1fr); }
  .trust-item + .trust-item { border-left:none; }
  .trust-item:nth-child(odd) { border-right:1px solid rgba(244,250,251,.1); }
  .story-grid { grid-template-columns:1fr; }
  .story-badge { right:16px; }
  .hours-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px; }
}
@media (max-width:600px) {
  .hero { min-height:100svh; }
  .trust-bar .grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .hero-ctas { flex-direction:column; align-items:flex-start; }
}