/* ============================================================
   South Town Animal Hospital — "Big type, big heart"
   ============================================================ */

@font-face{font-family:'Jakarta';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/jakarta-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/jakarta-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --blush:#F9F0EA;
  --blush-2:#F3E2D8;
  --blush-3:#EED6C9;
  /* text ink is the logo navy, darkened until it clears AA on every ground
     incl. the pink fills: 14.34:1 on blush, 4.98:1 on --pink */
  --ink:#0A2044;
  --ink-2:#06326E;
  --muted:#42536C;

  /* the mark's four inks, sampled from the masters */
  --pink:#FF4B6E;      /* logo pink — fills only (2.88:1 on blush) */
  --navy:#06326E;      /* logo navy — 11.06:1 on blush */
  --blue:#06ABFE;      /* logo blue — fills only (2.26:1 on blush) */
  /* AA-safe derivations, same hue as their parent ink */
  --pink-type:#EF2E62; /* display type, 3.57:1 */
  --pink-ink:#CC1042;  /* body text,   5.02:1 */
  --blue-type:#0387C9; /* display type, 3.52:1 */
  --pink-soft:#FFE4E9;
  --pink-lt:#FF708C;   /* on dark photography */
  --line:rgba(10,32,68,.14);
  --line-soft:rgba(10,32,68,.08);

  --shell:min(1280px,100% - 2.75rem);
  /* the mark's corner radius is 0.223 x its width (measured off the master).
     Applied literally on small brand elements; eased back on big surfaces,
     where 0.223 of the width reads as a blob rather than a squircle. */
  --r-ratio:.223;
  --r:30px;
  --r-sm:20px;
  --r-xs:8px;
  --r-lg:clamp(26px,4.2vw,52px);

  --fs-body:clamp(1rem,.5vw + .9rem,1.1rem);
  --fs-h2:clamp(2.4rem,5.6vw,4.6rem);
  --fs-h3:clamp(1.45rem,2vw,1.85rem);
  --fs-lede:clamp(1.1rem,1.4vw,1.4rem);
  --sp-section:clamp(4.5rem,8.6vw,8rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;background:var(--blush);color:var(--ink);
  font-family:'Jakarta',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--fs-body);line-height:1.62;font-weight:450;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:.95;text-wrap:balance}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
::selection{background:var(--pink);color:#fff}

.shell{width:var(--shell);margin-inline:auto}
.kick{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pink-ink);margin:0 0 1.2rem;
}
.kick--onPink{color:var(--ink)}
.lede{font-size:var(--fs-lede);line-height:1.5;color:var(--muted);font-weight:450;letter-spacing:-.012em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-size:1rem;font-weight:700;letter-spacing:-.012em;
  padding:1.02rem 1.75rem;border-radius:100px;border:2px solid transparent;
  transition:transform .3s cubic-bezier(.2,.85,.3,1),background .25s,color .25s,border-color .25s,box-shadow .3s;
}
.btn:hover{transform:translateY(-3px)}
.btn--pink{background:var(--pink);color:var(--ink);box-shadow:0 12px 26px -14px rgba(255,75,110,.95)}
.btn--pink:hover{box-shadow:0 20px 36px -16px rgba(255,75,110,1)}
.btn--ink{background:var(--navy);color:var(--blush)}
.btn--ink:hover{background:#0A4A9E}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--navy);color:var(--blush)}
.btn--outlinePink{background:transparent;color:var(--ink);border-color:rgba(10,32,68,.45)}
.btn--outlinePink:hover{background:var(--navy);color:var(--pink);border-color:var(--navy)}
.btn--sm{padding:.72rem 1.25rem;font-size:.92rem;border-width:2px}
.arrow{transition:transform .3s cubic-bezier(.2,.85,.3,1)}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;background:rgba(249,240,234,.82);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  transition:box-shadow .3s;
}
.hdr[data-stuck]{box-shadow:0 1px 0 var(--line-soft),0 14px 30px -28px rgba(10,32,68,.7)}
.hdr__in{display:flex;align-items:center;gap:1.75rem;padding:.85rem 0;min-height:72px}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
.mark__ico{height:34px;width:auto;flex:0 0 auto}
.mark__name{font-size:1.16rem;font-weight:800;letter-spacing:-.045em;line-height:1}
.mark__name span{color:var(--pink-ink)}
.nav{display:flex;gap:1.9rem;margin-left:auto}
.nav a{
  text-decoration:none;font-size:.94rem;font-weight:600;color:var(--muted);
  letter-spacing:-.012em;transition:color .22s;position:relative;padding:.3rem 0;
}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--pink);transition:right .3s cubic-bezier(.2,.85,.3,1)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.hdr__cta{display:flex;align-items:center;gap:.9rem;flex:0 0 auto}
.hdr__tel{text-decoration:none;font-weight:700;font-size:.94rem;white-space:nowrap;letter-spacing:-.02em}
.hdr__tel:hover{color:var(--pink-ink)}
@media(max-width:1080px){.nav{gap:1.35rem}.hdr__tel{display:none}}
@media(max-width:880px){.nav{display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding-top:clamp(2.5rem,5vw,4.25rem);padding-bottom:clamp(3rem,5vw,4.5rem);
  min-height:clamp(560px,calc(100svh - 72px),1000px);
  display:flex;align-items:center;
}
.hero::before{
  content:'';position:absolute;right:-14%;top:-24%;width:min(76vw,880px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,75,110,.13),transparent 66%);pointer-events:none;
}
.hero__in{position:relative}
.bigtype{margin:0 0 clamp(1.5rem,2.4vw,2.1rem);position:relative;z-index:1}
.bigtype span{
  display:block;overflow:hidden;
}
.bigtype b{
  display:block;font-weight:800;letter-spacing:-.055em;line-height:.86;
  font-size:clamp(3.3rem,14.6vw,12.4rem);
  animation:rise 1s cubic-bezier(.16,.9,.28,1) both;
}
.bigtype span:nth-child(1) b{color:var(--pink-type)}
.bigtype span:nth-child(2) b{color:var(--blue-type);animation-delay:.11s}
.bigtype span:nth-child(3) b{color:var(--navy);animation-delay:.22s}
@keyframes rise{from{transform:translateY(105%)}to{transform:translateY(0)}}
.hero__row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,4vw,4rem);align-items:end}
.hero__sub{font-size:clamp(1.12rem,1.55vw,1.5rem);line-height:1.45;color:var(--muted);max-width:30ch;font-weight:450;letter-spacing:-.018em;
  opacity:0;animation:fade .9s ease .5s both}
.hero__sub b{color:var(--ink);font-weight:700}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.35rem;justify-content:flex-end;
  opacity:0;animation:fade .9s ease .64s both}
.hero__tel{text-decoration:none;display:flex;flex-direction:column;line-height:1.15}
.hero__tel span{font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);font-weight:700}
.hero__tel strong{font-size:1.42rem;font-weight:800;letter-spacing:-.038em;margin-top:.22rem}
.hero__tel:hover strong{color:var(--pink-ink)}
.hero__chips{
  display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(2rem,2.8vw,2.5rem);align-items:center;
  opacity:0;animation:fade .9s ease .78s both;
}
.chip{
  width:clamp(66px,7vw,92px);aspect-ratio:1;border-radius:50%;overflow:hidden;flex:0 0 auto;
  border:3px solid var(--blush);box-shadow:0 8px 20px -12px rgba(10,32,68,.5);
  transition:transform .4s cubic-bezier(.2,.85,.3,1);
}
.chip:nth-child(n+2){margin-left:-1.9rem}
.chip img{width:100%;height:100%;object-fit:cover}
.hero__chips:hover .chip{transform:translateY(-4px)}
.hero__chipTxt{margin-left:.7rem;font-size:.92rem;color:var(--muted);max-width:24ch;line-height:1.4}
.hero__chipTxt b{color:var(--ink);font-weight:700}
@media(max-width:880px){
  .hero__row{grid-template-columns:1fr;gap:1.9rem;align-items:start}
  .hero__acts{justify-content:flex-start}
  .hero__sub{max-width:38ch}
}

.hero__pop{
  position:absolute;right:0;top:2%;z-index:0;
  width:clamp(170px,20.5vw,310px);rotate:4.5deg;
  /* the mark's corner ratio, eased back so the caption band clears the curve */
  border-radius:clamp(28px,3.6vw,54px);overflow:hidden;border:6px solid var(--blush);
  box-shadow:0 30px 60px -30px rgba(10,32,68,.55);
  opacity:0;animation:pop 1s cubic-bezier(.16,.9,.28,1) .42s both;
}
.hero__pop img{width:100%;aspect-ratio:4/5;object-fit:cover}
.hero__pop figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.5rem .9rem .8rem;
  background:linear-gradient(transparent,rgba(10,32,68,.85));
  color:#fff;font-size:.8rem;font-weight:650;line-height:1.3;letter-spacing:-.012em;
}
.hero__pop figcaption{
  position:static;background:var(--pink);color:var(--ink);
  padding:.62rem 1.5rem .68rem;font-weight:700;text-align:center;
}
@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:880px){.hero__pop{width:clamp(120px,26vw,190px);top:auto;bottom:-2%;right:-1%}}
@media(max-width:560px){.hero__pop{display:none}}

/* ---------- sections ---------- */
.sec{padding-block:var(--sp-section)}
.sec__head{max-width:46rem}
.sec__head h2{font-size:var(--fs-h2);margin-bottom:1.15rem}
.sec__head .lede{max-width:40rem}

/* ---------- services ---------- */
.svc__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,4vw,3.5rem)}
.svc__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.35rem}
.pcard{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(400px,42vw,520px);
  text-decoration:none;isolation:isolate;
  transition:transform .45s cubic-bezier(.2,.85,.3,1),box-shadow .45s;
}
.pcard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(10,32,68,.65)}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .9s cubic-bezier(.2,.85,.3,1)}
.pcard:hover img{transform:scale(1.06)}
.pcard::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(10,32,68,.06) 26%,rgba(10,32,68,.62) 62%,rgba(10,32,68,.93));}
.pcard__body{padding:1.75rem 1.6rem 1.7rem;color:#fff}
.pcard__n{
  position:absolute;top:1.1rem;left:1.35rem;font-size:.76rem;font-weight:800;letter-spacing:.14em;
  color:var(--ink);background:var(--blue);border-radius:var(--r-xs);padding:.32rem .8rem;
}
.pcard h3{font-size:var(--fs-h3);color:#fff;margin-bottom:.6rem;letter-spacing:-.038em}
.pcard p{font-size:1rem;color:rgba(255,255,255,.86);line-height:1.5;letter-spacing:-.01em}
.pcard__punch{
  margin-top:1.1rem;display:inline-flex;align-items:flex-start;gap:.5rem;
  font-size:.88rem;font-weight:700;color:var(--pink-lt);letter-spacing:-.01em;
}
@media(max-width:900px){.svc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.svc__grid{grid-template-columns:1fr}.pcard{min-height:360px}}

.tags{margin-top:clamp(2.25rem,3.6vw,3rem);display:flex;flex-wrap:wrap;gap:.55rem}
.tags span{
  font-size:.9rem;font-weight:550;border:1.5px solid var(--line);border-radius:100px;
  padding:.44rem 1rem;color:var(--ink-2);transition:border-color .22s,background .22s,color .22s;
}
.tags span:hover{border-color:var(--pink);background:var(--pink-soft);color:var(--pink-ink)}

/* ---------- promise bar ---------- */
.promise{background:var(--pink);color:var(--ink);padding-block:clamp(4rem,7.6vw,6.75rem) clamp(3.25rem,6vw,5.25rem);overflow:hidden}
.promise p{
  font-size:clamp(1.9rem,5.1vw,4.15rem);font-weight:800;letter-spacing:-.045em;line-height:1.02;
  max-width:20ch;
}
.promise p em{font-style:normal;color:#fff}
.promise__meta{
  margin-top:clamp(2rem,3.4vw,2.75rem);display:flex;flex-wrap:wrap;gap:.8rem 2.5rem;
  font-size:.95rem;font-weight:600;
}
.promise__meta span{display:flex;align-items:center;gap:.55rem}
.promise__meta svg{width:18px;height:18px;flex:0 0 auto}

.promise{position:relative}
.promise .shell{position:relative;z-index:1}
.promise__mark{
  position:absolute;right:-1.5%;bottom:7%;width:clamp(120px,16.5vw,238px);height:auto;
  opacity:.9;pointer-events:none;z-index:0;
}
@media(max-width:880px){.promise__mark{right:-9%;bottom:auto;top:3%;width:clamp(84px,23vw,132px);opacity:.9}}

/* ---------- team ---------- */
.team__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,4vw,3.5rem)}
/* 11-person roster (owner edit 2026-07-28). Flex, not grid: 11 never fills a 4-, 3- or
   2-across row evenly, and centring the short last row reads deliberate where a grid
   would leave a hole on the right. flex-basis matches the old column maths exactly, so
   card size is unchanged — only the position of the final row moves. */
.team__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:2.1rem 1.5rem}
.mem{flex:0 1 calc((100% - 3 * 1.5rem) / 4);min-width:0}
.mem figure{margin:0;position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--blush-2)}
.mem img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .65s cubic-bezier(.2,.85,.3,1),filter .4s;
  filter:saturate(1.02) contrast(1.02)}
.mem:hover img{transform:scale(1.05)}
.mem figure::after{
  content:'';position:absolute;inset:0;background:var(--pink);mix-blend-mode:color;
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.mem:hover figure::after{opacity:.16}
.mem h3{font-size:1.1rem;margin-top:1rem;letter-spacing:-.032em;line-height:1.2}
.mem__role{font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--pink-ink);margin-top:.45rem;line-height:1.35}
.mem__note{font-size:.94rem;color:var(--muted);margin-top:.6rem;line-height:1.5;letter-spacing:-.008em}
@media(max-width:980px){.mem{flex-basis:calc((100% - 2 * 1.5rem) / 3)}}
@media(max-width:660px){.team__grid{gap:1.7rem 1.1rem}.mem{flex-basis:calc((100% - 1.1rem) / 2)}}

/* ---------- photo moment ---------- */
.moment{padding-block:0}
.moment__fig{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink);margin:0}
.moment__fig img{width:100%;aspect-ratio:24/13;object-fit:cover}
.moment__cap{
  position:absolute;left:clamp(1.25rem,3vw,3rem);bottom:clamp(1.25rem,3vw,3rem);
  max-width:min(30rem,72%);color:#fff;z-index:2;
}
/* must out-specify `.moment__fig img`, which sizes the photograph itself */
.moment__cap .moment__mark{width:46px;height:auto;aspect-ratio:auto;object-fit:contain;margin-bottom:.85rem}
.moment__cap h2{font-size:clamp(1.8rem,3.7vw,3.2rem);color:#fff;letter-spacing:-.042em}
.moment__cap p{margin-top:.85rem;font-size:1.05rem;color:rgba(255,255,255,.9);line-height:1.5}
.moment__fig::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(8deg,rgba(10,32,68,.88),rgba(10,32,68,.24) 48%,transparent 68%);
}
@media(max-width:640px){.moment__fig img{aspect-ratio:4/5}.moment__cap{max-width:none;right:clamp(1.25rem,3vw,3rem)}}

/* ---------- closing ---------- */
.close{padding-block:var(--sp-section) 0}
.close__box{
  background:var(--pink);border-radius:var(--r-lg);color:var(--ink);
  padding:clamp(2.75rem,5.4vw,5rem) clamp(1.75rem,4vw,4rem);
}
.close__sister{
  font-size:.86rem;font-weight:600;letter-spacing:.02em;color:rgba(10,32,68,.94);margin-bottom:1.4rem;
}
.close__box h2{font-size:clamp(2.2rem,5.3vw,4.35rem);letter-spacing:-.048em;max-width:17ch}
.close__acts{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.25rem}
.close__grid{
  margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:clamp(2rem,3vw,2.5rem);
  border-top:2px solid rgba(10,32,68,.22);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;
}
.close__grid a{overflow-wrap:anywhere;display:inline-block;padding-block:.18rem}
.close__grid h4{font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.9rem;color:rgba(10,32,68,.94)}
.close__grid p,.close__grid a{font-size:1rem;line-height:1.6;font-weight:550;text-decoration:none}
.close__grid a:hover{text-decoration:underline;text-underline-offset:3px}
.close__hours{display:flex;justify-content:space-between;gap:1rem;font-size:.95rem;font-weight:550;padding:.28rem 0;border-bottom:1px solid rgba(10,32,68,.14)}
.close__hours span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:450}
@media(max-width:760px){.close__grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.chip:nth-child(n+4){display:none}.hero__chipTxt{margin-left:0;max-width:none}}

/* ---------- footer ---------- */
.ftr{padding-block:clamp(2.75rem,5vw,4rem) 2.5rem}
.ftr__in{display:flex;flex-wrap:wrap;gap:2rem 3rem;justify-content:space-between;align-items:flex-start}
.ftr p,.ftr li{font-size:.86rem;color:var(--muted);line-height:1.65}
.ftr a{text-decoration:none;display:inline-block;padding-block:.2rem;overflow-wrap:anywhere}
/* .ftr a above out-specifies .mark{display:flex}; the mark is an image lockup, not a text link */
.ftr .mark{display:inline-flex;align-items:center}
.ftr a:hover{color:var(--pink-ink)}
.ftr__serves{max-width:44rem;margin-top:.9rem}
.emerg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1.75rem}
.emerg b{color:var(--ink);font-weight:650;display:block;font-size:.84rem}
.emerg a{color:var(--pink-ink);font-weight:700;font-variant-numeric:tabular-nums}
.ftr h4{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:.9rem}
.ftr__base{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:.8rem;color:var(--muted)}
@media(max-width:560px){.emerg{grid-template-columns:1fr}}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.85,.3,1),transform .9s cubic-bezier(.2,.85,.3,1)}
[data-reveal="in"]{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}
[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}
[data-reveal][data-d="4"]{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .hero__sub,.hero__acts,.hero__chips{opacity:1}
  html{scroll-behavior:auto}
}


/* ============================================================
   South Town — Big Heart, extended to a page system.

   approved.css above is the Jacquie-approved homepage stylesheet, byte-for-byte.
   Everything below is ADDITIVE: new selectors only. The one exception is the
   mobile navigation, which the approved homepage never had — below 880px the
   approved sheet sets `.nav{display:none}` and offered no replacement, which is
   survivable for a one-page anchor site and fatal for a routed one.

   Design rules carried forward, not re-invented:
     · ground is --blush; ink is --ink; accents are --pink / --blue / --navy
     · display type is oversized, weight 800, letter-spacing about -.045em,
       line-height under 1
     · photography is rounded at --r / --r-sm and often tilted or bled
     · composition is asymmetric — content rarely fills the full measure
     · a section earns its own shape; nothing is a stack of identical cards
   ============================================================ */

/* ---------- shared page furniture ---------- */

/* Every routed page needs the sticky header to sit on a solid ground when the
   hero is short; the homepage hero is tall enough that it never showed. */
.hdr{border-bottom:1px solid transparent}
.hdr[data-stuck]{border-bottom-color:var(--line-soft)}

.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{right:0}

/* ---------- mobile navigation (new — the approved sheet had none) ---------- */
.navBtn{
  display:none;align-items:center;justify-content:center;gap:.5rem;
  width:44px;height:44px;margin-left:auto;flex:0 0 auto;
  background:transparent;border:2px solid var(--line);border-radius:14px;
  color:var(--ink);cursor:pointer;padding:0;
  transition:background .22s,border-color .22s;
}
.navBtn:hover{border-color:var(--ink)}
.navBtn__bars{display:block;width:18px;height:12px;position:relative}
.navBtn__bars::before,.navBtn__bars::after,.navBtn__bars span{
  content:'';position:absolute;left:0;right:0;height:2.2px;border-radius:2px;
  background:currentColor;transition:transform .32s cubic-bezier(.2,.85,.3,1),opacity .2s;
}
.navBtn__bars::before{top:0}
.navBtn__bars span{top:50%;margin-top:-1.1px}
.navBtn__bars::after{bottom:0}
.navBtn[aria-expanded="true"] .navBtn__bars::before{transform:translateY(5px) rotate(45deg)}
.navBtn[aria-expanded="true"] .navBtn__bars span{opacity:0}
.navBtn[aria-expanded="true"] .navBtn__bars::after{transform:translateY(-5px) rotate(-45deg)}

.mobnav{
  position:fixed;inset:0;z-index:55;background:var(--blush);
  padding:calc(72px + 1.5rem) 0 2rem;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.85,.3,1),visibility .28s;
}
.mobnav[data-open]{opacity:1;visibility:visible;transform:none}
.mobnav__list{display:flex;flex-direction:column;gap:.1rem;list-style:none;margin:0;padding:0}
.mobnav__list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  text-decoration:none;font-size:clamp(2rem,9vw,3rem);font-weight:800;
  letter-spacing:-.05em;line-height:1;padding:.62rem 0;
  border-bottom:1px solid var(--line-soft);
}
.mobnav__list a:hover,.mobnav__list a[aria-current="page"]{color:var(--pink-ink)}
.mobnav__list em{font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
.mobnav__acts{margin-top:2rem;display:flex;flex-direction:column;gap:.8rem}
.mobnav__acts .btn{justify-content:center}
.mobnav__meta{margin-top:2rem;font-size:.9rem;color:var(--muted);line-height:1.6}
.mobnav__meta a{font-weight:700;color:var(--ink);text-decoration:none}
@media(max-width:880px){
  .navBtn{display:flex}
  .hdr__cta .btn{display:none}
  .hdr__cta{margin-left:auto;gap:.6rem}
  .hdr__tel{display:inline-block;font-size:.9rem}
}
@media(max-width:420px){.hdr__tel{display:none}}
body[data-navopen]{overflow:hidden}

/* ---------- page hero ---------------------------------------------------
   The routed counterpart to the homepage's .hero: same oversized voice, but
   asymmetric in a different way — type hangs left, an optional figure is
   tucked bottom-right and tilted the opposite direction to the homepage's. */
.phero{position:relative;overflow:hidden;padding-block:clamp(2.75rem,5.4vw,4.5rem) clamp(2.5rem,5vw,4rem)}
.phero::before{
  content:'';position:absolute;left:-16%;top:-38%;width:min(70vw,760px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(6,171,254,.13),transparent 66%);pointer-events:none;
}
.phero--pink::before{background:radial-gradient(circle,rgba(255,75,110,.14),transparent 66%)}
.phero__in{position:relative;z-index:1}
.phero__grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:end}
.phero h1{
  font-size:clamp(2.7rem,8.4vw,6.6rem);font-weight:800;letter-spacing:-.052em;line-height:.9;
  max-width:15ch;
}
.phero h1 .br{display:block}
.phero h1 em{font-style:normal;color:var(--pink-type)}
.phero h1 i{font-style:normal;color:var(--blue-type)}
.phero__lede{font-size:var(--fs-lede);line-height:1.5;color:var(--muted);max-width:38ch;letter-spacing:-.014em}
.phero__acts{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.75rem}
.phero__side{padding-bottom:.4rem}
@media(max-width:880px){
  .phero__grid{grid-template-columns:1fr;gap:1.5rem;align-items:start}
  .phero__side{padding-bottom:0}
}

/* breadcrumb — quiet, never competing with the headline */
.crumb{display:flex;flex-wrap:wrap;gap:.42rem;align-items:center;font-size:.78rem;font-weight:650;letter-spacing:.01em;color:var(--muted);margin-bottom:clamp(1.1rem,2vw,1.6rem)}
.crumb a{text-decoration:none;color:var(--muted)}
.crumb a:hover{color:var(--pink-ink)}
.crumb svg{width:12px;height:12px;opacity:.5;flex:0 0 auto}
.crumb b{font-weight:650;color:var(--ink)}

/* ---------- services index ----------------------------------------------
   Deliberately NOT the homepage's 3-up card grid. Big numbered rows that
   alternate side, each with its own photograph — a visual table of contents. */
.idx{display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4.5rem)}
.idxRow{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
}
.idxRow:nth-child(even) .idxRow__fig{order:-1}
.idxRow__fig{position:relative;border-radius:var(--r);overflow:hidden;background:var(--blush-2);margin:0}
.idxRow__fig img{width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform .8s cubic-bezier(.2,.85,.3,1)}
.idxRow:hover .idxRow__fig img{transform:scale(1.045)}
.idxRow__n{
  position:absolute;top:1rem;left:1.15rem;z-index:2;
  font-size:.76rem;font-weight:800;letter-spacing:.14em;color:var(--ink);
  background:var(--blue);border-radius:var(--r-xs);padding:.32rem .8rem;
}
.idxRow:nth-child(even) .idxRow__n{background:var(--pink)}
.idxRow__body h2{font-size:clamp(2rem,4.6vw,3.5rem);letter-spacing:-.048em;line-height:.94}
.idxRow__body h2 a{text-decoration:none}
.idxRow__body h2 a:hover{color:var(--pink-ink)}
.idxRow__body .lede{margin-top:1rem;max-width:34ch}
.idxRow__pts{margin:1.4rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.idxRow__pts li{
  font-size:.85rem;font-weight:600;border:1.5px solid var(--line);border-radius:100px;
  padding:.38rem .9rem;color:var(--ink-2);
}
.idxRow__go{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:1.6rem;
  text-decoration:none;font-weight:800;font-size:1rem;letter-spacing:-.02em;color:var(--ink);
  border-bottom:2.5px solid var(--pink);padding-bottom:.22rem;
  transition:gap .3s cubic-bezier(.2,.85,.3,1),color .22s;
}
.idxRow__go:hover{gap:.95rem;color:var(--pink-ink)}
@media(max-width:820px){
  .idxRow{grid-template-columns:1fr;gap:1.35rem}
  .idxRow:nth-child(even) .idxRow__fig{order:0}
  .idxRow__fig img{aspect-ratio:16/10}
}

/* ---------- long-form reading column ---------- */
.prose{max-width:38rem}
.prose > * + *{margin-top:1.15rem}
.prose p{font-size:1.06rem;line-height:1.72;color:var(--ink-2);letter-spacing:-.008em}
.prose h2{font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.042em;margin-top:2.75rem;line-height:1}
.prose h3{font-size:var(--fs-h3);letter-spacing:-.034em;margin-top:2.25rem}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:1.15rem 0 0;padding-left:1.15rem}
.prose li{font-size:1.04rem;line-height:1.62;color:var(--ink-2);margin-top:.5rem}
.prose li::marker{color:var(--pink)}
.prose a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.6px}
.prose a:hover{color:var(--ink)}
.prose strong,.prose b{font-weight:700;color:var(--ink)}
.prose blockquote{
  margin:2rem 0;padding:0 0 0 1.4rem;border-left:4px solid var(--pink);
  font-size:1.2rem;line-height:1.5;font-weight:600;letter-spacing:-.02em;color:var(--ink);
}
.prose figure{margin:2rem 0}
.prose figure img{border-radius:var(--r-sm);width:100%}
.prose figcaption{margin-top:.7rem;font-size:.86rem;color:var(--muted);line-height:1.5}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

/* the two-column editorial spread used on service detail pages */
.spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17.5rem);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.spread__aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:1.5rem}
@media(max-width:940px){
  .spread{grid-template-columns:1fr;gap:2.5rem}
  .spread__aside{position:static}
}

/* ---------- callout / factbox ---------- */
.callout{
  background:var(--pink-soft);border-radius:var(--r-sm);padding:1.6rem 1.7rem;margin-top:1.75rem;
}
.callout h4{font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pink-ink);margin-bottom:1rem}
.callout ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.62rem}
.callout li{font-size:.98rem;font-weight:600;color:var(--ink);line-height:1.45;display:flex;gap:.65rem;align-items:flex-start}
.callout li::before{
  content:'';flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--pink);margin-top:.52rem;
}

.factbox{border:2px solid var(--line);border-radius:var(--r-sm);padding:1.5rem 1.55rem}
.factbox h4{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:1.1rem}
.factbox dl{margin:0;display:flex;flex-direction:column;gap:.95rem}
.factbox dt{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--pink-ink)}
.factbox dd{margin:.28rem 0 0;font-size:.96rem;line-height:1.45;font-weight:550;color:var(--ink)}

/* ---------- "what to expect" rail ---------- */
.rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:clamp(2rem,3.4vw,2.75rem);counter-reset:rail}
.railStep{position:relative;border-top:3px solid var(--ink);padding-top:1.15rem}
.railStep:nth-child(2){border-top-color:var(--pink)}
.railStep:nth-child(3){border-top-color:var(--blue)}
.railStep h4{font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.railStep p{font-size:1rem;line-height:1.55;color:var(--ink-2);letter-spacing:-.01em}
@media(max-width:760px){.rail{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- related services ---------- */
.rel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;margin-top:1.5rem}
.relCard{
  display:block;text-decoration:none;border:2px solid var(--line);border-radius:var(--r-sm);
  padding:1.4rem 1.5rem;transition:border-color .25s,background .25s,transform .3s cubic-bezier(.2,.85,.3,1);
}
.relCard:hover{border-color:var(--pink);background:var(--pink-soft);transform:translateY(-3px)}
.relCard span{font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-ink)}
.relCard h3{font-size:1.28rem;margin-top:.6rem;letter-spacing:-.035em}
.relCard p{font-size:.94rem;color:var(--muted);margin-top:.5rem;line-height:1.5}
@media(max-width:640px){.rel{grid-template-columns:1fr}}

/* ---------- conversion block ----------------------------------------------
   The homepage's .close__box is the loudest version. This is its quieter
   sibling for interior pages: same pink, less height, one clear action. */
.cta{padding-block:clamp(3rem,5.5vw,4.5rem)}
.cta__box{
  background:var(--pink);border-radius:var(--r-lg);color:var(--ink);
  padding:clamp(2.1rem,4.2vw,3.4rem) clamp(1.6rem,3.6vw,3.2rem);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.75rem 2.5rem;align-items:center;
}
.cta__box h2{font-size:clamp(1.75rem,3.8vw,2.9rem);letter-spacing:-.045em;max-width:18ch}
.cta__box p{margin-top:.85rem;font-size:1.02rem;font-weight:550;max-width:44ch;line-height:1.55}
.cta__acts{display:flex;flex-wrap:wrap;gap:.85rem}
.cta--navy .cta__box{background:var(--navy);color:var(--blush)}
.cta--navy .cta__box .btn--ink{background:var(--pink);color:var(--ink)}
.cta--navy .cta__box .btn--outlinePink{color:var(--blush);border-color:rgba(249,240,234,.5)}
.cta--navy .cta__box .btn--outlinePink:hover{background:var(--blush);color:var(--navy);border-color:var(--blush)}
@media(max-width:840px){.cta__box{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- testimonial moment (reusable) ---------- */
.quote{padding-block:clamp(2.5rem,4.5vw,4rem)}
.quote__in{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start;
  border-top:2px solid var(--line);padding-top:clamp(1.75rem,3vw,2.5rem);
}
.quote__mark{width:clamp(44px,6vw,62px);height:auto;flex:0 0 auto}
.quote blockquote{margin:0;font-size:clamp(1.4rem,3.1vw,2.3rem);font-weight:700;letter-spacing:-.038em;line-height:1.15;max-width:26ch}
.quote cite{display:block;margin-top:1.1rem;font-style:normal;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-ink)}
@media(max-width:640px){.quote__in{grid-template-columns:1fr}}

/* ---------- roster (about page) ---------- */
.roster{display:flex;flex-wrap:wrap;justify-content:center;gap:2.1rem 1.5rem;margin-top:clamp(2rem,3.5vw,3rem)}
.roster .mem{flex:0 1 calc((100% - 3 * 1.5rem) / 4)}
.roster .mem a{text-decoration:none;display:block}
.roster .mem a:hover h3{color:var(--pink-ink)}
@media(max-width:980px){.roster .mem{flex-basis:calc((100% - 2 * 1.5rem) / 3)}}
@media(max-width:660px){.roster{gap:1.7rem 1.1rem}.roster .mem{flex-basis:calc((100% - 1.1rem) / 2)}}

/* the story band on About — full-bleed navy, the only dark section in the system */
.band{background:var(--navy);color:var(--blush);padding-block:clamp(3.5rem,6.5vw,6rem);position:relative;overflow:hidden}
.band h2{font-size:clamp(2rem,5vw,3.9rem);letter-spacing:-.048em;max-width:18ch;color:var(--blush)}
.band .kick{color:var(--pink-lt)}
.band__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:clamp(1.75rem,3vw,2.5rem)}
.band__grid p{font-size:1.06rem;line-height:1.68;color:rgba(249,240,234,.82)}
.band__grid p + p{margin-top:1.1rem}
.band__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1.5rem}
.band__stat b{display:block;font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--pink-lt)}
.band__stat span{display:block;margin-top:.55rem;font-size:.9rem;line-height:1.45;color:rgba(249,240,234,.76)}
@media(max-width:840px){.band__grid{grid-template-columns:1fr;gap:2rem}}

/* ---------- bio page ---------- */
.bio__top{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
.bio__fig{margin:0;border-radius:var(--r);overflow:hidden;background:var(--blush-2)}
.bio__fig img{width:100%;aspect-ratio:1;object-fit:cover}
.bio__role{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-ink);margin-bottom:1rem}
.bio__top h1{font-size:clamp(2.2rem,5.4vw,4rem);letter-spacing:-.05em;line-height:.94}
@media(max-width:760px){.bio__top{grid-template-columns:1fr;gap:1.5rem}.bio__fig{max-width:260px}}

/* ---------- resources: scannable, not ornamental ---------- */
.resGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));gap:1.1rem;margin-top:clamp(1.75rem,3vw,2.5rem)}
.resCard{
  display:flex;flex-direction:column;text-decoration:none;
  border:2px solid var(--line);border-radius:var(--r-sm);padding:1.5rem 1.55rem;
  transition:border-color .25s,background .25s,transform .3s cubic-bezier(.2,.85,.3,1);
}
.resCard:hover{border-color:var(--pink);background:var(--pink-soft);transform:translateY(-3px)}
.resCard__tag{font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-ink)}
.resCard h3{font-size:1.22rem;margin-top:.65rem;letter-spacing:-.034em;line-height:1.15}
.resCard p{font-size:.95rem;color:var(--muted);margin-top:.6rem;line-height:1.55;flex:1 1 auto}
.resCard__go{margin-top:1.1rem;font-size:.86rem;font-weight:800;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:.45rem;color:var(--ink)}
.resCard__go svg{width:14px;height:14px}
.resCard[data-ext] .resCard__go::after{content:'↗';font-weight:700}

/* the answer strip — dense, high-signal, no decoration */
.answers{margin-top:clamp(2rem,3.4vw,2.75rem);border-top:2px solid var(--ink)}
.answers__row{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:.5rem 2rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.answers__row dt{font-size:1.02rem;font-weight:750;letter-spacing:-.022em;color:var(--ink)}
.answers__row dd{margin:0;font-size:1rem;line-height:1.6;color:var(--ink-2)}
.answers__row dd a{color:var(--pink-ink);font-weight:650;text-decoration:none;border-bottom:1.5px solid rgba(204,16,66,.3)}
.answers__row dd a:hover{border-bottom-color:var(--pink-ink)}
@media(max-width:720px){.answers__row{grid-template-columns:1fr;gap:.35rem}}

/* ---------- contact ---------- */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
@media(max-width:880px){.visit{grid-template-columns:1fr}}
.hoursTable{border-top:2px solid var(--ink);margin-top:1.1rem}
.hoursTable__row{display:flex;justify-content:space-between;gap:1rem;padding:.62rem 0;border-bottom:1px solid var(--line);font-size:1rem}
.hoursTable__row span:first-child{font-weight:650}
.hoursTable__row span:last-child{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.hoursTable__row[data-today]{background:var(--pink-soft);margin-inline:-.7rem;padding-inline:.7rem;border-radius:6px}
.hoursTable__row[data-today] span:first-child::after{content:' · today';font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-ink)}
.hoursTable__row[data-closed] span:last-child{color:var(--muted)}

.mapFrame{border-radius:var(--r);overflow:hidden;border:2px solid var(--line);background:var(--blush-2);aspect-ratio:4/3}
.mapFrame iframe{width:100%;height:100%;border:0;display:block}

/* after-hours: must read as urgent without shouting */
.urgent{border:2.5px solid var(--pink);border-radius:var(--r-sm);padding:1.6rem 1.7rem;background:var(--pink-soft)}
.urgent h3{font-size:1.2rem;letter-spacing:-.032em}
.urgent p{font-size:.96rem;color:var(--ink-2);margin-top:.6rem;line-height:1.55}
.urgent ul{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.85rem}
.urgent li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;flex-wrap:wrap}
.urgent li b{font-weight:650;font-size:.95rem}
.urgent li a{font-weight:800;color:var(--pink-ink);text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.urgent li a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- careers ---------- */
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;margin-top:clamp(2rem,3.4vw,2.75rem)}
.value{border-top:3px solid var(--pink);padding-top:1.1rem}
.value:nth-child(2){border-top-color:var(--blue)}
.value:nth-child(3){border-top-color:var(--navy)}
.value:nth-child(4){border-top-color:var(--ink)}
.value h3{font-size:1.15rem;letter-spacing:-.032em}
.value p{font-size:.95rem;color:var(--muted);margin-top:.55rem;line-height:1.55}
@media(max-width:860px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.values{grid-template-columns:1fr}}

/* ---------- blog ---------- */
.feature{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-bottom:clamp(2.5rem,4.5vw,3.75rem);
}
.feature__fig{margin:0;border-radius:var(--r);overflow:hidden;background:var(--blush-2)}
.feature__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s cubic-bezier(.2,.85,.3,1)}
.feature:hover .feature__fig img{transform:scale(1.04)}
.feature h2{font-size:clamp(1.9rem,4.4vw,3.2rem);letter-spacing:-.048em;line-height:.98;margin-top:.9rem}
.feature h2 a{text-decoration:none}
.feature h2 a:hover{color:var(--pink-ink)}
.feature p{margin-top:1rem;font-size:1.05rem;color:var(--muted);line-height:1.6;max-width:44ch}
@media(max-width:820px){.feature{grid-template-columns:1fr}}

.postGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.25rem 1.5rem}
.post{display:flex;flex-direction:column}
.post__fig{margin:0 0 1rem;border-radius:var(--r-sm);overflow:hidden;background:var(--blush-2)}
.post__fig img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .7s cubic-bezier(.2,.85,.3,1)}
.post:hover .post__fig img{transform:scale(1.05)}
.post h3{font-size:1.25rem;letter-spacing:-.034em;line-height:1.2}
.post h3 a{text-decoration:none}
.post:hover h3 a{color:var(--pink-ink)}
.post p{font-size:.95rem;color:var(--muted);margin-top:.6rem;line-height:1.55;flex:1 1 auto}
@media(max-width:860px){.postGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.postGrid{grid-template-columns:1fr}}

.meta{display:flex;flex-wrap:wrap;gap:.45rem .8rem;align-items:center;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.meta .cat{color:var(--pink-ink)}
.meta time{font-variant-numeric:tabular-nums}

/* category filter rail — reuses the homepage .tags pill, as a link */
.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:clamp(1.5rem,2.6vw,2rem)}
.filters a{
  font-size:.9rem;font-weight:600;border:1.5px solid var(--line);border-radius:100px;
  padding:.44rem 1rem;color:var(--ink-2);text-decoration:none;
  transition:border-color .22s,background .22s,color .22s;
}
.filters a:hover{border-color:var(--pink);background:var(--pink-soft);color:var(--pink-ink)}
.filters a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:var(--blush)}

.pager{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;margin-top:clamp(2.5rem,4vw,3.5rem)}
.pager a,.pager span{
  min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:100px;font-size:.95rem;font-weight:700;text-decoration:none;padding-inline:.9rem;
  border:2px solid var(--line);color:var(--ink);transition:border-color .22s,background .22s,color .22s;
}
.pager a:hover{border-color:var(--ink)}
.pager [aria-current="page"]{background:var(--navy);border-color:var(--navy);color:var(--blush)}
.pager .gap{border:0;min-width:auto;padding-inline:.2rem;color:var(--muted)}

/* ---------- article ---------- */
.article__head{max-width:46rem}
.article__head h1{font-size:clamp(2.2rem,5.6vw,4.2rem);letter-spacing:-.05em;line-height:.94;margin-top:1rem}
.article__hero{margin:clamp(2rem,3.5vw,3rem) 0 0;border-radius:var(--r);overflow:hidden;background:var(--blush-2)}
.article__hero img{width:100%;max-height:min(62vh,620px);object-fit:cover}
.article__body{margin-top:clamp(2.25rem,4vw,3.25rem)}
/* first paragraph carries the editorial voice into the reading column */
.article__body .prose > p:first-of-type{font-size:1.2rem;line-height:1.6;color:var(--ink);font-weight:500;letter-spacing:-.016em}
.article__foot{margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:1.75rem;border-top:2px solid var(--line);max-width:38rem}
.article__foot p{font-size:.95rem;color:var(--muted);line-height:1.6}

/* ---------- forms ---------- */
.formWrap{max-width:44rem}
.fieldset{border:0;margin:0;padding:0}
.fieldset + .fieldset{margin-top:2.75rem;padding-top:2.25rem;border-top:2px solid var(--line)}
.fieldset legend{
  font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pink-ink);padding:0;margin-bottom:1.4rem;
}
.field{margin-top:1.25rem}
.field > label,.field__legend{display:block;font-size:.94rem;font-weight:700;letter-spacing:-.014em;margin-bottom:.5rem;color:var(--ink)}
.field .req{color:var(--pink-ink)}
.field .hint{display:block;font-weight:450;font-size:.86rem;color:var(--muted);margin-top:.25rem;letter-spacing:0}
.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%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:2px solid var(--line);border-radius:14px;padding:.82rem 1rem;
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:8.5rem;resize:vertical;line-height:1.55}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 8 5 5 5-5' stroke='%230A2044' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:18px;padding-right:2.6rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(6,50,110,.16)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--pink-ink);box-shadow:0 0 0 3px rgba(204,16,66,.14)}
.field__err{display:none;margin-top:.45rem;font-size:.88rem;font-weight:650;color:var(--pink-ink)}
.field__err[data-show]{display:block}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
.radios{display:flex;flex-wrap:wrap;gap:.6rem}
.radios label{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  border:2px solid var(--line);border-radius:100px;padding:.5rem 1.05rem;
  font-size:.95rem;font-weight:600;transition:border-color .2s,background .2s;
}
.radios label:hover{border-color:var(--ink)}
.radios input{accent-color:var(--pink-ink);width:16px;height:16px;margin:0}
.radios input:checked + span{font-weight:750}
.radios label:has(input:checked){border-color:var(--pink);background:var(--pink-soft)}
.consent{display:flex;gap:.75rem;align-items:flex-start;margin-top:1.25rem}
.consent input{margin-top:.28rem;width:18px;height:18px;flex:0 0 auto;accent-color:var(--pink-ink)}
.consent label{font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.consent a{color:var(--pink-ink)}
.legalNote{margin-top:1.5rem;font-size:.88rem;color:var(--muted);line-height:1.6;background:var(--blush-2);border-radius:14px;padding:1.1rem 1.2rem}
/* honeypot — must be reachable-invisible, never display:none (bots read that) */
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.formActions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.formStatus{margin-top:1.25rem;border-radius:14px;padding:1.05rem 1.2rem;font-size:.98rem;line-height:1.55;font-weight:600;display:none}
.formStatus[data-state]{display:block}
.formStatus[data-state="working"]{background:var(--blush-2);color:var(--ink-2)}
.formStatus[data-state="ok"]{background:#E4F6EA;color:#0A5B2E;border:2px solid #7CC79B}
.formStatus[data-state="err"]{background:var(--pink-soft);color:var(--pink-ink);border:2px solid var(--pink)}
.formStatus b{display:block;font-weight:800;margin-bottom:.25rem}
button.btn{font-family:inherit;cursor:pointer}
button.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- legal ---------- */
.legal .prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:2.5rem}
.legal .prose p{font-size:1rem;line-height:1.75}

/* ---------- footer additions ---------- */
.ftr__nav{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;margin-top:1rem}
.ftr__nav a{font-size:.86rem;font-weight:650;color:var(--muted);text-decoration:none}
.ftr__nav a:hover{color:var(--pink-ink)}
.ftr__legal{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.ftr__social{display:flex;gap:.7rem;margin-top:1.1rem}
.ftr__social a{
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted);
  transition:border-color .22s,color .22s,background .22s;padding:0;
}
.ftr__social a:hover{border-color:var(--pink);color:var(--pink-ink);background:var(--pink-soft)}
.ftr__social svg{width:17px;height:17px}

/* ---------- utilities ---------- */
.sec--tight{padding-block:clamp(3rem,5.5vw,5rem)}
.sec--top0{padding-top:0}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:var(--blush);
  padding:.85rem 1.35rem;border-radius:0 0 14px 0;font-weight:700;text-decoration:none;
}
.skip:focus{left:0}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.center{text-align:center}
.mw-40{max-width:40rem}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}

/* Reduced motion: the approved sheet already neutralises animation. These are
   the components added since — they must obey the same contract. */
@media(prefers-reduced-motion:reduce){
  .mobnav{transition:none}
  .idxRow__fig img,.post__fig img,.feature__fig img,.pcard img{transition:none}
  .idxRow:hover .idxRow__fig img,.post:hover .post__fig img,.feature:hover .feature__fig img{transform:none}
  .relCard:hover,.resCard:hover{transform:none}
}

/* ------------------------------------------------ article video embed */
.embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--navy,#1b2a4a);margin:1.5rem 0}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============================================================================
   Hero headline: descender clipping on "Purpose."
   Found by an independent design review (pingfusi round 42915fea, 2026-08-14),
   pinned directly on <b>"Purpose."</b> — "the 'p' of pose part is slightly cut".

   Cause: .bigtype b sets line-height:.86, which makes the line box SHORTER than
   the glyph em box, while the parent .bigtype span carries overflow:hidden as
   the mask for the rise animation. Anything falling outside that short line box
   is cropped, so descenders are cut off flat.

   Only "Purpose." ever showed it: "Pets." and "Passion." have no descenders,
   which is why it survived launch review, the fidelity gate and the browser
   harness. It is a rendering defect, not a copy change — the markup is
   untouched, so verify:home is unaffected.

   Fix: push the mask's bottom edge below the baseline and pull the same amount
   back out of the layout with a negative margin. Line spacing and the masked
   slide-up animation both survive; the descenders clear.
   ========================================================================= */
.bigtype span{
  padding-bottom:.2em;
  margin-bottom:-.2em;
}

/* ---------- credentials on a bio page -------------------------------------
   Text marks, not the official programme logos: Cat Friendly Veterinarian,
   Fear Free Certified Professional and Anesthesia Champion are all trademarked
   and no logo art exists in this repo. Swap to real badge images when the
   practice supplies them.

   Deliberately NOT boxed cards — a hairline rule and a pink dot per item, so
   they read as a credential list rather than three little panels.
   -------------------------------------------------------------------------- */
.creds{
  list-style:none;margin:1.6rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;max-width:34rem;
  border-top:1px solid rgba(10,32,68,.14);padding-top:1rem;
}
.creds li{
  position:relative;padding-left:1rem;
  font-size:.82rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  color:var(--ink);line-height:1.35;
}
.creds li::before{
  content:'';position:absolute;left:0;top:.42em;
  width:.42rem;height:.42rem;border-radius:50%;background:var(--pink);
}