/* ==========================================================================
   PawPaw Veterinary Services — landing page
   Palette, type scale and usage rules follow BRAND_BRIEF.md.

   One deliberate deviation from the brief: eyebrow text uses sage-700
   (#5C6651, 6.04:1) rather than sage-500 (#8B9A7A, 3.00:1). Eyebrows are
   13px, and sage-500 fails WCAG AA at that size. Sage-500 is still used for
   rules, icon fills and other decorative work, as the brief intends.
   ========================================================================== */

:root {
  /* brand core */
  --pp-slate: #3F5E7A;
  --pp-sage:  #8B9A7A;
  --pp-grey:  #7D8288;

  /* slate scale */
  --pp-slate-50:#F0F2F4; --pp-slate-100:#E0E5EA; --pp-slate-200:#BEC8D2;
  --pp-slate-300:#93A5B5; --pp-slate-400:#698197; --pp-slate-500:#3F5E7A;
  --pp-slate-600:#344D64; --pp-slate-700:#2A3E51; --pp-slate-800:#1E2D3B;
  --pp-slate-900:#141E27;

  /* sage scale */
  --pp-sage-50:#F6F7F4; --pp-sage-100:#ECEFEA; --pp-sage-200:#D8DDD2;
  --pp-sage-300:#BEC6B5; --pp-sage-400:#A5B097; --pp-sage-500:#8B9A7A;
  --pp-sage-600:#727E64; --pp-sage-700:#5C6651; --pp-sage-800:#434A3B;
  --pp-sage-900:#2C3127;

  /* grey scale */
  --pp-grey-50:#F5F5F5; --pp-grey-100:#EAEBEC; --pp-grey-200:#D3D4D7;
  --pp-grey-300:#B6B9BC; --pp-grey-400:#9A9EA2; --pp-grey-500:#7D8288;
  --pp-grey-600:#666B70; --pp-grey-700:#52565A; --pp-grey-800:#3C3E41;
  --pp-grey-900:#282A2C;

  /* semantic */
  --pp-bg: #FFFFFF;
  --pp-bg-alt: var(--pp-slate-50);
  --pp-text: var(--pp-grey-700);
  --pp-text-soft: var(--pp-grey-600);
  --pp-heading: var(--pp-slate-700);
  --pp-accent: var(--pp-sage-500);
  --pp-border: var(--pp-grey-200);

  /* type */
  --pp-font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pp-font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* layout */
  --pp-container: 1140px;
  --pp-gutter: clamp(1.25rem, 4vw, 2rem);
  --pp-section-y: clamp(4rem, 9vw, 7rem);
  --pp-radius: 14px;
  --pp-radius-lg: 22px;

  --pp-shadow-sm: 0 1px 2px rgba(20,30,39,.05), 0 6px 18px rgba(20,30,39,.05);
  --pp-shadow-md: 0 2px 6px rgba(20,30,39,.06), 0 18px 40px rgba(20,30,39,.09);
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--pp-bg);
  color: var(--pp-text);
  font-family: var(--pp-font-body);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { color: var(--pp-heading); margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--pp-slate-500); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pp-slate-600); }

:focus-visible {
  outline: 3px solid var(--pp-slate-400);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 999;
  background: var(--pp-slate-700); color: #fff;
  padding: .7rem 1.1rem; border-radius: 0 0 8px 8px;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ typography -- */

h1, .h1 {
  font-family: var(--pp-font-display);
  font-weight: 200;
  font-size: clamp(2.625rem, 6vw, 3.875rem);
  line-height: 1.06;
  letter-spacing: -.032em;
}

h2, .h2 {
  font-family: var(--pp-font-display);
  font-weight: 200;
  font-size: clamp(1.9375rem, 4vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -.028em;
}

h3, .h3 {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.35;
  letter-spacing: -.012em;
}

.eyebrow {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pp-sage-700);
  margin: 0 0 1rem;
}

.lede {
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--pp-text);
  max-width: 60ch;
}

.small { font-size: .875rem; color: var(--pp-text-soft); }

.measure { max-width: 62ch; }

/* --------------------------------------------------------------- layout -- */

.container {
  width: 100%;
  max-width: var(--pp-container);
  margin-inline: auto;
  padding-inline: var(--pp-gutter);
}

.section { padding-block: var(--pp-section-y); }
.section--alt { background: var(--pp-bg-alt); }
.section--sage { background: var(--pp-sage-50); }

.section--dark {
  background: var(--pp-slate-700);
  color: var(--pp-slate-100);
  position: relative;
  overflow: hidden;
}
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .eyebrow { color: var(--pp-sage-300); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head p { color: var(--pp-text-soft); }
.section--dark .section-head p { color: var(--pp-slate-200); }

.rule {
  width: 64px; height: 1px; border: 0;
  background: var(--pp-sage-500);
  margin: 0 0 1.5rem;
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--pp-slate-500); color: #fff; }
.btn--primary:hover { background: var(--pp-slate-600); color: #fff; box-shadow: var(--pp-shadow-sm); }

.btn--ghost { border-color: var(--pp-slate-500); color: var(--pp-slate-500); background: transparent; }
.btn--ghost:hover { background: var(--pp-slate-500); color: #fff; }

.btn--light { background: #fff; color: var(--pp-slate-700); }
.btn--light:hover { background: var(--pp-slate-50); color: var(--pp-slate-700); box-shadow: var(--pp-shadow-sm); }

.btn--outline-light { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn--sm { padding: .7rem 1.25rem; font-size: .9375rem; }

.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; }

.btn .icon { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------- announcement bar -- */

.announce {
  background: var(--pp-sage-100);
  border-bottom: 1px solid var(--pp-sage-200);
  color: var(--pp-sage-900);
  font-size: .875rem;
  line-height: 1.45;
}
.announce-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .3rem .7rem;
  padding-block: .75rem;
  text-align: center;
}
.announce b { font-weight: 700; }
.announce a {
  color: var(--pp-slate-600);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
.announce a:hover { color: var(--pp-slate-700); }
.announce .icon {
  width: 16px; height: 16px; flex: none;
  color: var(--pp-sage-700);
}

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--pp-border);
  box-shadow: 0 1px 12px rgba(20,30,39,.05);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 190px; height: auto; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }

.nav a:not(.btn) {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--pp-grey-700);
  text-decoration: none;
  padding: .35rem 0;
  position: relative;
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--pp-sage-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.nav a:not(.btn):hover { color: var(--pp-slate-600); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }

.header-cta { display: flex; align-items: center; gap: .75rem; }

/* the booking button inside .nav is for the mobile panel only */
.nav > .btn { display: none; }

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--pp-border);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block; width: 18px; height: 1.5px;
  background: var(--pp-slate-700);
  position: relative;
  transition: background-color .15s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 1.5px; background: var(--pp-slate-700);
  transition: transform .2s ease, top .2s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .brand img { width: 158px; }
  .nav-toggle { display: inline-flex; }
  .header-cta .btn { display: none; }

  .nav {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow-md);
    padding: .5rem var(--pp-gutter) 1.5rem;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: .9rem 0; border-bottom: 1px solid var(--pp-grey-100); font-size: 1.0625rem; }
  .nav a:not(.btn)::after { display: none; }
  .nav > .btn { display: inline-flex; margin-top: 1.15rem; width: 100%; }
}

/* ----------------------------------------------------------------- hero -- */

/* The hero is a full-bleed photo with the copy set over it. A dark scrim sits
   between the two so the light text keeps its contrast against the sky and sand. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  /* mirrored so the dog lands in the open right-hand side, clear of the copy */
  transform: scaleX(-1);
}

/* Scrim — heaviest behind the copy, easing off over the water and the dog.
   The left-hand stops are set by contrast, not taste: the sky and wet sand
   under the copy are near-white, and anything lighter than this drops the
   small type below the 4.5:1 AA threshold. */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(18, 26, 32, .68) 0%,
    rgba(18, 26, 32, .60) 45%,
    rgba(18, 26, 32, .42) 100%);
}

.hero-grid { display: grid; }
.hero-body { max-width: 40rem; }

/* sage-300 is the usual eyebrow on dark, but over the bright sand it only
   reaches 2.9:1 — sage-50 keeps the tint and clears AA. */
.hero .eyebrow { color: var(--pp-sage-50); }
.hero h1 { color: #fff; margin-bottom: 1.1rem; }
.hero .lede { color: #fff; margin-bottom: 2rem; }
.hero .btn-row { margin-bottom: 1.5rem; }

.hero-note {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; color: rgba(255,255,255,.92);
}
.hero-note .icon { width: 16px; height: 16px; color: var(--pp-sage-300); flex: none; }

/* photos sit on their own — no frame, no badge, no drop shadow */
.figure-frame { position: relative; }

.photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pp-radius-lg);
  object-fit: cover;
  background: var(--pp-slate-50);
}
.photo--portrait  { aspect-ratio: 4 / 5; }
.photo--square    { aspect-ratio: 1 / 1; }
.photo--landscape { aspect-ratio: 4 / 3; }

@media (max-width: 860px) {
  /* the crop tightens on narrow screens and the copy covers the whole frame,
     so the scrim goes flat and a little heavier */
  .hero-media img { object-position: 62% 50%; }
  .hero::after { background: rgba(18, 26, 32, .62); }
}

/* ---------------------------------------------------- pre-launch panel -- */
/* Sits directly under the hero while comingSoon.enabled is true. Uses the same
   sage as the announce bar so the two read as one pre-launch voice; the hero
   photo between them stops the repetition showing. */

.notice {
  background: var(--pp-sage-100);
  border-block: 1px solid var(--pp-sage-200);
}
.notice-inner {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-block: clamp(1.5rem, 3.5vw, 2.25rem);
}
.notice .icon {
  width: 22px; height: 22px;
  color: var(--pp-sage-700);
  flex: none;
  margin-top: .2rem;
}
.notice-body { min-width: 0; }
.notice h2 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--pp-sage-900);
  margin: 0 0 .5rem;
}
.notice p {
  margin: 0 0 .6rem;
  max-width: 64ch;
  color: var(--pp-sage-900);
  font-size: .9375rem;
  line-height: 1.6;
}
.notice p:last-of-type { margin-bottom: 0; }
.notice .btn { margin-top: 1.1rem; }

/* --------------------------------------------------------- value strip -- */

.strip {
  border-top: 1px solid var(--pp-border);
  border-bottom: 1px solid var(--pp-border);
  background: var(--pp-slate-50);
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.25rem);
}
.strip-item { display: flex; gap: .875rem; align-items: flex-start; }
.strip-item .icon { width: 24px; height: 24px; color: var(--pp-sage-600); flex: none; margin-top: .1rem; }
.strip-item strong { display: block; color: var(--pp-slate-700); font-size: .9375rem; }
.strip-item span { font-size: .875rem; color: var(--pp-text-soft); line-height: 1.5; }

@media (max-width: 760px) {
  .strip-grid { grid-template-columns: 1fr; gap: 1.15rem; }
}

/* ---------------------------------------------------------------- steps -- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  counter-reset: step;
}
.step { position: relative; padding-top: 2.75rem; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--pp-font-display);
  font-size: 2rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--pp-sage-600);
}
.step::after {
  content: "";
  position: absolute; top: 1.15rem; left: 3.25rem; right: -1.5rem;
  height: 1px; background: var(--pp-sage-200);
}
.step:last-child::after { display: none; }
.step h3 { margin-bottom: .4rem; }
.step p { font-size: .9375rem; color: var(--pp-text-soft); margin: 0; }

@media (max-width: 980px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.75rem; }
  .step:nth-child(2)::after { display: none; }
}
@media (max-width: 620px) {
  .steps { grid-template-columns: 1fr; }
  .step::after { display: none; }
}

/* ---------------------------------------------------------------- cards -- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.card {
  background: #fff;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  padding: 1.6rem 1.5rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--pp-sage-300); box-shadow: var(--pp-shadow-sm); transform: translateY(-2px); }
.card .icon { width: 26px; height: 26px; color: var(--pp-sage-600); margin-bottom: 1rem; }
.card h3 { font-size: 1.125rem; margin-bottom: .35rem; }
.card p { font-size: .9375rem; color: var(--pp-text-soft); margin: 0; }

.section--sage .card { background: #fff; }

.note-line {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--pp-border);
  font-size: .9375rem;
  color: var(--pp-text-soft);
  max-width: 68ch;
}

/* ---------------------------------------------------------------- plans -- */

.plans-grid { display: grid; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.plan-list li {
  background: #fff;
  border: 1px solid var(--pp-sage-200);
  border-radius: var(--pp-radius);
  padding: 1.05rem 1.25rem;
  display: flex; align-items: baseline; gap: .875rem;
}
.plan-list strong { color: var(--pp-slate-700); font-size: 1rem; flex: none; }
.plan-list span { font-size: .9375rem; color: var(--pp-text-soft); }

/* ----------------------------------------------------------- service area -- */

.area-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.area-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.area-list li {
  border: 1px solid var(--pp-slate-200);
  border-radius: 999px;
  padding: .5rem 1.05rem;
  font-size: .9375rem;
  color: var(--pp-slate-700);
  background: var(--pp-slate-50);
}

.callout {
  border: 1px solid var(--pp-border);
  border-left: 3px solid var(--pp-sage-500);
  border-radius: 0 var(--pp-radius) var(--pp-radius) 0;
  background: var(--pp-sage-50);
  padding: 1.25rem 1.4rem;
}
.callout h3 { font-size: 1rem; margin-bottom: .35rem; }
.callout p { font-size: .9375rem; color: var(--pp-text-soft); margin: 0; }
.callout + .callout { margin-top: 1rem; }

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

/* ---------------------------------------------------------------- about -- */

.about-grid {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
/* the portrait sits alongside the copy, sized to accompany it rather than lead it */
.about-figure { position: sticky; top: 104px; }

/* Black and white, as the photo in this slot was before it. Keeps the bright
   scrubs from competing with the brand navy and quietly plays down the clinic
   setting. Delete this rule to go back to colour — the file itself is colour. */
.about-figure .photo { filter: grayscale(1); }
.about-body p { color: var(--pp-text); }
.about-body .measure { max-width: 60ch; }

.cred-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.cred-list li { display: flex; gap: .875rem; align-items: flex-start; }
.cred-list .icon { width: 20px; height: 20px; color: var(--pp-sage-600); flex: none; margin-top: .25rem; }
.cred-list strong { display: block; color: var(--pp-slate-700); font-size: .9375rem; }
.cred-list span { font-size: .9375rem; color: var(--pp-text-soft); }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-figure { position: static; max-width: 13rem; }
}

/* ------------------------------------------------------------- CTA band -- */

.cta-band { text-align: center; }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: .75rem; }
.cta-band p { color: var(--pp-slate-200); margin-inline: auto; max-width: 52ch; }
.cta-band .btn-row { justify-content: center; margin-top: 2rem; }

.band-watermark {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(420px, 46%);
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}

/* -------------------------------------------------------------- contact -- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.contact-methods { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.25rem; }
.contact-methods li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-methods .icon { width: 22px; height: 22px; color: var(--pp-sage-600); flex: none; margin-top: .3rem; }
.contact-methods .label {
  display: block; font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pp-sage-700); margin-bottom: .15rem;
}
.contact-methods .value { font-size: 1.0625rem; color: var(--pp-slate-700); font-weight: 600; }
.contact-methods a.value { text-decoration: none; }
.contact-methods a.value:hover { text-decoration: underline; }
.contact-methods .value.is-pending { color: var(--pp-text-soft); font-weight: 400; font-style: italic; }
.contact-methods .hint { display: block; font-size: .8125rem; color: var(--pp-text-soft); margin-top: .1rem; }

/* form */
.form {
  background: #fff;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--pp-shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--pp-grey-700);
  margin-bottom: .4rem;
}
.field .optional { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--pp-grey-500); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid var(--pp-border);
  border-radius: 10px;
  background: #fff;
  font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--pp-grey-300); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--pp-slate-400);
  box-shadow: 0 0 0 3px rgba(63,94,122,.14);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%2352565A' stroke-width='1.6' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form .btn { width: 100%; margin-top: .35rem; }
.form-footnote { font-size: .8125rem; color: var(--pp-text-soft); margin: 1rem 0 0; }

.form-status {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: 10px;
  font-size: .9375rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-ok    { background: var(--pp-sage-100); color: var(--pp-sage-800); border: 1px solid var(--pp-sage-300); }
.form-status.is-error { background: #FBEDED; color: #8A2F2F; border: 1px solid #E7C4C4; }

@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; gap: 0; } }

/* ------------------------------------------------- contact call/text links -- */

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-top: .45rem;
}
.contact-actions a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--pp-slate-600);
  text-decoration: none;
  border: 1px solid var(--pp-border);
  border-radius: 999px;
  padding: .3rem .75rem;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.contact-actions a:hover {
  border-color: var(--pp-sage-400);
  background: var(--pp-sage-50);
  color: var(--pp-slate-700);
}
.contact-actions .icon { width: 14px; height: 14px; color: var(--pp-sage-600); }

.emergency-list {
  list-style: none;
  margin: .9rem 0 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--pp-sage-200);
  display: grid;
  gap: .45rem;
}
.emergency-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .6rem;
  font-size: .9375rem;
}
.emergency-list .who { color: var(--pp-grey-700); }
.emergency-list a {
  font-weight: 700;
  color: var(--pp-slate-600);
  text-decoration: none;
  white-space: nowrap;
}
.emergency-list a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ FAQs -- */

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.faq-col-title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pp-sage-700);
  font-family: var(--pp-font-body);
  margin: 0 0 .35rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--pp-border);
}

.faq {
  border-bottom: 1px solid var(--pp-border);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 0;
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--pp-heading);
  transition: color .18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--pp-slate-500); }

/* chevron */
.faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: .35rem;
  border-right: 1.5px solid var(--pp-sage-600);
  border-bottom: 1.5px solid var(--pp-sage-600);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .22s ease;
}
.faq[open] summary::after { transform: rotate(-135deg); }

.faq-body {
  padding: 0 2.25rem 1.35rem 0;
}
.faq-body p {
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--pp-text-soft);
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .faq[open] .faq-body { animation: faq-open .28s cubic-bezier(.22,.61,.36,1); }
  @keyframes faq-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (max-width: 760px) {
  .faq-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* --------------------------------------------------------------- footer -- */

.site-footer {
  background: var(--pp-slate-700);
  color: var(--pp-slate-200);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .9375rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
}
.footer-brand img { width: 148px; }
.footer-brand p { margin-top: 1.25rem; color: var(--pp-slate-200); max-width: 34ch; font-size: .9375rem; }

.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2rem; }
.footer-cols h4 {
  color: #fff;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-cols a { color: var(--pp-slate-200); text-decoration: none; }
.footer-cols a:hover { color: #fff; text-decoration: underline; }
.footer-cols li { color: var(--pp-slate-200); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  justify-content: space-between;
  font-size: .8125rem;
  color: var(--pp-slate-200);
}

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

/* ------------------------------------------------------------- utilities -- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .nav-toggle, .cta-band, .form { display: none; }
  body { font-size: 11pt; }
}

/* sticky-header offset for in-page anchors */
[id] { scroll-margin-top: 96px; }