/* ==========================================================================
   Mountain Hospital for Animals — REVISION v2 stylesheet
   Scoped to index-v2.html only. Nothing here affects the live build.
   Palette per "Vibe Change" brief (2026-09-10).
   ========================================================================== */

:root {
  /* Brief palette */
  --navy:        #0B2545;  /* Deep Ocean Navy — headers & text */
  --navy-deep:   #071A33;  /* darker step for footer / overlays */
  --blue:        #134074;  /* brief's second blue */
  --blue-soft:   #8DA9C4;  /* muted blue-grey */
  --canvas:      #EEF4F8;  /* Ice Blue / off-white */
  --white:       #FFFFFF;

  /* Added accent — see note in the handoff. The brief's hexes are all blue,
     with nothing bright enough to carry a button. This is the "river teal"
     the brief describes in words. Swap freely. */
  --teal:        #157F8F;
  --teal-bright: #1B9AAD;

  --ink:         #0B2545;
  --ink-soft:    #40566F;
  --rule:        #D3E0EA;

  --serif: "Fraunces", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
           "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --radius: 4px;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--blue); }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: var(--navy);
  text-wrap: balance;
}
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 1rem;
}
.lede { font-size: clamp(1.075rem, 1rem + 0.45vw, 1.3rem); line-height: 1.55; color: var(--ink-soft); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 0.75rem 1.25rem;
}
.skip:focus { left: 0; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-bright); border-color: var(--teal-bright); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--blue-soft); }
.btn-outline:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-block: 16px;
}
.logo { display: block; flex: 0 0 auto; }
/* Size the logo by HEIGHT, not width. It is a stacked 1.98:1 wordmark, so
   width-sizing let it drive the header height and left no vertical padding. */
.logo img { height: clamp(48px, 5.2vw, 70px); width: auto; }

.nav-toggle {
  display: none;
  background: transparent; border: 1px solid rgba(255,255,255,.35);
  color: #fff; border-radius: var(--radius);
  padding: 0.5rem 0.8rem; font: inherit; font-size: 0.85rem; font-weight: 700;
  cursor: pointer; letter-spacing: .05em; text-transform: uppercase;
}

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.site-nav a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: #fff; border-bottom-color: var(--teal-bright); }
.site-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--teal-bright); }
.nav-phone {
  color: #fff !important; font-family: var(--serif); font-size: 1.05rem !important;
  border-bottom: 0 !important;
}
.nav-phone:hover { color: var(--blue-soft) !important; }

/* ----------------------------------------------------------------- hero -- */
.hero {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hero::after {
  /* faint water-line texture, drawn in CSS so there is no extra asset */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 78% 12%, rgba(27,154,173,.20), transparent 58%),
              radial-gradient(90% 70% at 8% 92%, rgba(141,169,196,.14), transparent 60%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.05rem, 1.35rem + 3.05vw, 3.7rem);
  line-height: 1.1;
  margin-bottom: 0.4em;
}
.hero .tagline {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
  color: var(--blue-soft);
  margin-bottom: 1.1em;
  padding-bottom: 1.1em;
  border-bottom: 1px solid rgba(255,255,255,.18);
  max-width: 32em;
  text-wrap: balance;
}
.hero-sub { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: rgba(255,255,255,.85); line-height: 1.55; max-width: 34em; }
.hero-sub strong { color: #fff; font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

.hero-figure { margin: 0; }
.hero-figure img {
  /* Cap the height so very tall portraits (e.g. 510x1020) don't stretch the
     hero. Narrow images just sit narrower rather than being cropped. */
  width: auto;
  max-width: 100%;
  max-height: 520px;
  margin-inline: auto;
  border-radius: var(--radius);
  border: 6px solid rgba(255,255,255,.9);
  box-shadow: 0 26px 60px rgba(0,0,0,.38);
}

/* ------------------------------------------------------------- factbar -- */
.factbar { background: var(--blue); color: #fff; }
.factbar ul {
  list-style: none; margin: 0; padding-block: 1.75rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center;
}
.factbar li { border-left: 1px solid rgba(255,255,255,.22); padding-inline: 1rem; }
.factbar li:first-child { border-left: 0; }
.factbar b {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.05; color: #fff;
}
.factbar span { display: block; font-size: 0.8rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.78); margin-top: .35rem; }

/* ---------------------------------------------------------- intro/quote -- */
.intro { background: var(--white); }
.intro-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.intro h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem); }

.intro-figure { margin: 0; }
.intro-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 32%;
  border-radius: var(--radius);
}

.pullquote {
  margin: 1.75rem 0 0;
  background: var(--canvas);
  border-left: 4px solid var(--teal);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.pullquote p {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.4; color: var(--navy);
}
.pullquote footer { margin-top: 1rem; font-size: 0.88rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }


/* --------------------------------------------------------- aquarium band -- */
.aquarium { background: var(--navy-deep); color: #fff; }
.aquarium h2 { color: #fff; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem); }
.aquarium .lede { color: rgba(255,255,255,.82); max-width: 46em; }
.photo-row {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.photo-row figure { margin: 0; }
.photo-row img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius);
}

/* ------------------------------------------------------------- services -- */
.services { background: var(--canvas); }
.services > .wrap > .eyebrow,
.services > .wrap > h2 { text-align: center; }
.services .lede { max-width: 48em; margin-inline: auto; text-align: center; }

.capability-list {
  list-style: none; margin: clamp(1.75rem, 3vw, 2.25rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center;
}
/* The pill IS the link, so the chrome lives on the <a> and the <li> is just a
   flex cell. Anything that styles the pill must be written against the anchor. */
.capability-list li { display: flex; }
.capability-list a {
  display: block; text-decoration: none;
  background: #fff; border: 1px solid var(--rule); border-radius: 100px;
  padding: .6rem 1.2rem; font-size: .93rem; font-weight: 600; color: var(--navy);
  transition: transform .18s ease, box-shadow .18s ease,
              border-color .18s ease, background .18s ease, color .18s ease;
}
.capability-list a:hover,
.capability-list a:focus-visible {
  border-color: var(--teal); color: var(--teal);
  transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11, 37, 69, .14);
}
.capability-list li.more a { background: var(--navy); color: #fff; border-color: var(--navy); }
.capability-list li.more a:hover,
.capability-list li.more a:focus-visible {
  background: var(--teal); border-color: var(--teal); color: #fff;
}

.service-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem); margin-top: clamp(2rem, 4vw, 3rem);
}
.service-card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11,37,69,.12); }
.service-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* Cards mirror the LIVE home page: image, title, one sentence, Explore Service. */
.service-card .body {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; flex: 1;
  text-align: center;
}
.service-card h3 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); margin-bottom: 0.6rem; }
.service-card p { color: var(--ink-soft); margin-bottom: 1.5rem; }
.explore-link {
  margin-top: auto; align-self: center;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); text-decoration: none;
  transition: gap .18s ease, color .18s ease;
}
.explore-link:hover { color: var(--teal-bright); gap: .7rem; }
.explore-link span { font-size: 1.15em; line-height: 1; }

.species-note {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 54em; text-align: center;
}
.species-note h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin-bottom: .75rem; }
.species-note p { color: var(--ink-soft); }

/* ------------------------------------------- inner pages: service groups -- */
.group-heading {
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--blue-soft);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  text-align: left;
}
.svc-grid {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.svc-item {
  background: #fff; border-radius: var(--radius);
  border-top: 4px solid var(--teal);
  box-shadow: 0 4px 16px rgba(11, 37, 69, .09);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  transition: transform .18s ease, box-shadow .18s ease;
}
.svc-item:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(11, 37, 69, .14); }

/* Deep-link targets for the home page capability pills. The offset clears the
   sticky header so the card is not hidden under it on arrival, and the ring
   makes it obvious which card was linked to. */
.services[id], .svc-item[id] { scroll-margin-top: 132px; }
.svc-item:target {
  box-shadow: 0 0 0 3px rgba(21, 127, 143, .35), 0 8px 22px rgba(11, 37, 69, .14);
}

/* Icon chip: circular tint of the canvas colour with a teal glyph inside. */
.svc-icon {
  display: block; width: 44px; height: 44px; padding: 11px;
  border-radius: 50%; background: var(--canvas); color: var(--teal);
  margin-bottom: .9rem;
  /* <use> pulls from the sprite's shadow tree, which inherits these from here,
     not from the sprite's own root element. */
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.svc-item h4 { font-size: 1.15rem; margin-bottom: .5rem; }
.svc-item p { font-size: .93rem; color: var(--ink-soft); margin: 0; }
.svc-item a { color: var(--teal); font-weight: 600; }

/* The sprite itself is markup, never painted. */
.icon-sprite { display: none; }

/* ------------------------------------------------ inner pages: prose/FAQ -- */
.prose-narrow { max-width: 46em; }
.prose-narrow a { color: var(--teal-bright); font-weight: 600; }

.faq { background: #fff; }
.faq-list { margin-top: clamp(1.75rem, 3vw, 2.5rem); max-width: 52em; }
.faq-item { border-top: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }

/* The question row doubles as the accordion toggle. */
.faq-item > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer;
  list-style: none; /* hide the default disclosure triangle */
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary h3 {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); margin: 0;
  transition: color .15s ease;
}
.faq-item > summary:hover h3,
.faq-item[open] > summary h3 { color: var(--teal); }
.faq-item > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

/* Chevron: points down when closed, up when open. */
.faq-item > summary::after {
  content: ""; flex: none; width: .55rem; height: .55rem; margin-top: .5rem;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: .75rem; }

.faq-answer { padding: 0 2.5rem 1.5rem 0; }
.faq-item p { color: var(--ink-soft); margin: 0; }
.faq-item a { color: var(--teal); font-weight: 600; }

/* --------------------------------------------- inner pages: photo strip -- */
.photo-strip { background: var(--canvas); padding-block: clamp(2rem, 4vw, 3rem); }
.photo-strip--white { background: #fff; }
.photo-strip .photo-row { grid-template-columns: repeat(3, 1fr); }
.photo-strip .photo-row--4 { grid-template-columns: repeat(4, 1fr); }
.photo-strip .photo-row img { aspect-ratio: 3 / 2; }

/* Services block on a white background (used to alternate on inner pages). */
.services--alt { background: #fff; }

/* Service cards sitting on a dark section. */
.svc-grid--dark .svc-item {
  background: rgba(255,255,255,.06);
  border-top-color: var(--teal-bright);
  box-shadow: none;
}
.svc-grid--dark .svc-item:hover { box-shadow: none; }
.svc-grid--dark .svc-item h4 { color: #fff; }
.svc-grid--dark .svc-item p { color: rgba(255,255,255,.8); }
.svc-grid--dark .svc-icon { background: rgba(255,255,255,.1); color: var(--teal-bright); }

/* --------------------------------------------------- staff page: bio -- */
.bio-grid {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.75rem, 4vw, 3rem); align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.bio-figure { margin: 0; }
.bio-figure img {
  width: 100%; border-radius: var(--radius);
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;
}
.bio-body h3 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); margin-bottom: .25rem; }
.bio-role {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 1.25rem;
}
.bio-body .pullquote { margin: 1.5rem 0; }

/* --------------------------------------------------- staff page: team -- */
.team-grid {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.team-card {
  background: #fff; border-radius: var(--radius);
  border-top: 4px solid var(--teal);
  box-shadow: 0 4px 16px rgba(11, 37, 69, .09);
  padding: clamp(1rem, 2vw, 1.35rem);
  transition: transform .18s ease, box-shadow .18s ease;
}
.team-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(11, 37, 69, .14); }
/* Fixed 4:5 frame so wildly different source crops still line up in a row.
   Each photo sets its own object-position inline. */
.team-photo {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: calc(var(--radius) - 4px);
  margin-bottom: 1rem; background: var(--canvas);
}
.team-photo--pending {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue-soft);
  border: 2px dashed var(--blue-soft);
}
.team-card h4 { font-size: 1.15rem; margin-bottom: .3rem; }
.team-card .bio-role { font-size: .72rem; margin-bottom: .75rem; }
.team-meta {
  list-style: none; margin: 0; padding: 0;
  font-size: .88rem; color: var(--ink-soft);
}
.team-meta li + li { margin-top: .2rem; }

/* ------------------------------------------------- new patient form (npf) -- */
/* Class names come from the live page's form markup, which is reused verbatim
   so every field name and the Basin endpoint stay identical. */
.hero--simple .hero-grid { grid-template-columns: 1fr; }
.hero--simple .hero-sub { max-width: 48em; }

.form-section { background: var(--canvas); }

.npf-form { max-width: 900px; margin-inline: auto; }

.npf-section {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.npf-section > h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  margin-bottom: .35rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--blue-soft);
}
.npf-section-note {
  font-size: .92rem; color: var(--ink-soft);
  margin: .75rem 0 1.5rem;
}

.npf-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.npf-field, .npf-fieldset { display: flex; flex-direction: column; min-width: 0; }
.npf-field.full, .npf-fieldset.full, .npf-grid > .full { grid-column: 1 / -1; }

.npf-field label, .npf-fieldset legend {
  font-size: .85rem; font-weight: 700; letter-spacing: .02em;
  color: var(--navy); margin-bottom: .4rem; padding: 0;
}
.req { color: var(--teal); font-weight: 700; }

.npf-field input,
.npf-field select,
.npf-field textarea,
.npf-form textarea {
  font: inherit; font-size: .97rem; color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .65rem .8rem;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.npf-form textarea { min-height: 96px; resize: vertical; }
.npf-field input:focus,
.npf-field select:focus,
.npf-form textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(21,127,143,.15);
}

.npf-options { display: flex; flex-wrap: wrap; gap: .5rem .9rem; padding-top: .15rem; }
.npf-options label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .93rem; font-weight: 400; color: var(--ink);
  margin: 0; cursor: pointer;
}
.npf-options input[type="radio"],
.npf-options input[type="checkbox"] { accent-color: var(--teal); width: auto; margin: 0; }

.npf-consent {
  background: var(--canvas);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.25rem;
  font-size: .93rem; color: var(--ink-soft);
  margin-bottom: 1.25rem;
}
.npf-consent strong { color: var(--navy); }

.npf-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: .5rem;
}
.npf-submit {
  font-family: var(--sans); font-size: .95rem; font-weight: 700; letter-spacing: .02em;
  background: var(--teal); color: #fff;
  border: 2px solid var(--teal); border-radius: var(--radius);
  padding: .9rem 1.8rem; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.npf-submit:hover { background: var(--teal-bright); border-color: var(--teal-bright); transform: translateY(-1px); }
/* The live markup carries a Font Awesome icon; v2 does not load that font. */
.npf-submit i { display: none; }
.npf-fineprint { font-size: .85rem; color: var(--ink-soft); }

@media (max-width: 620px) {
  .npf-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- gallery -- */
.gallery { background: #fff; }
.gallery-grid {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .85rem;
}
.gallery-grid img {
  width: 100%; object-fit: cover; border-radius: var(--radius);
  aspect-ratio: 1 / 1;
}

/* ------------------------------------------------------------ clientele -- */
.clientele { background: var(--canvas); }
.clientele h2 {
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem);
  text-align: center;
}
.clientele-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem); align-items: stretch;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.clientele-figure { margin: 0; }
.clientele-figure img {
  width: 100%; height: 100%; border-radius: var(--radius);
  aspect-ratio: 4 / 3; object-fit: cover;
}

/* Placeholder for the Google review feed. Intentionally looks unfinished. */
.reviews-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background: #fff;
  border: 2px dashed var(--blue-soft);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  min-height: 260px;
}
.placeholder-label {
  font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .75rem;
}
.placeholder-body {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  color: var(--navy); margin-bottom: .75rem;
}
.placeholder-note { font-size: .85rem; color: var(--ink-soft); max-width: 26em; margin: 0; }

/* ----------------------------------------------------------------- CTA --- */
.cta { background: var(--teal); color: #fff; text-align: center; }
.cta h2 { color: #fff; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); }
.cta p { color: rgba(255,255,255,.9); max-width: 40em; margin-inline: auto; }
.cta .hero-actions { justify-content: center; }
.cta .btn-primary { background: #fff; color: var(--navy); border-color: #fff; }
.cta .btn-primary:hover { background: var(--canvas); border-color: var(--canvas); }

/* ---------------------------------------------------------------- visit -- */
.visit { background: #fff; }
.visit-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.visit-card h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.visit-card p, .visit-card dl { font-size: .97rem; }
.visit-card a { color: var(--teal); font-weight: 600; }
.visit-card dl { margin: 0; }
.visit-card dl div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--rule);
}
.visit-card dt { color: var(--ink-soft); }
.visit-card dd { margin: 0; font-weight: 600; color: var(--navy); text-align: right; }

/* --------------------------------------------------------------- footer -- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.72); padding-block: clamp(2.5rem, 5vw, 3.5rem); font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3rem); }
.footer-grid--4 { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
.site-footer img { width: 210px; margin-bottom: 1.1rem; }
.site-footer h4 { color: #fff; font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem; }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: .28rem 0; }
.footer-bottom {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .84rem; color: rgba(255,255,255,.55);
}

/* ------------------------------------------------------------ draft flag -- */
.draft-flag {
  background: #7A2E12; color: #fff; text-align: center;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; padding: .5rem 1rem;
}

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { max-width: 380px; }
  .intro-grid, .clientele-grid, .service-grid { grid-template-columns: 1fr; }
  .factbar ul { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .factbar li:nth-child(3) { border-left: 0; }
  .photo-row { grid-template-columns: repeat(2, 1fr); }
  .photo-strip .photo-row--4 { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bio-grid { grid-template-columns: 1fr; }
  .bio-figure { max-width: 340px; }
  .visit-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 860px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-toggle { display: block; }
  .header-inner { flex-wrap: wrap; padding-block: 12px; }
  .site-nav {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; padding-bottom: .75rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: .85rem .25rem; border-bottom: 1px solid rgba(255,255,255,.12);
    border-bottom-color: rgba(255,255,255,.12);
  }
  .site-nav a:hover { border-bottom-color: rgba(255,255,255,.12); }
}

@media (max-width: 620px) {
  .factbar ul { grid-template-columns: 1fr; gap: 1.4rem; }
  .factbar li { border-left: 0; }
  .photo-row { grid-template-columns: 1fr 1fr; }
  .photo-strip .photo-row { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .faq-item > summary { gap: 1rem; }
  .faq-answer { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .service-card:hover, .btn:hover { transform: none; }
}