/* =========================================================================
   Dr. Gibson — In-Home Pet Euthanasia
   Design system: calm, warm, dignified. Soft sage + warm neutrals.
   Hand-authored, no build step. Edit values in :root to re-theme the site.
   ========================================================================= */

:root {
  /* Brand palette — cream + champagne-gold forward, sage as supporting green.
     See BRAND_GUIDE.md §3. Gold is decorative (jewelry); sage carries buttons/
     footer; cream/sand is the room. All text pairs meet WCAG AA. */

  /* Sage — supporting green (buttons, links, footer, nature accents) */
  --sage-900: #33443a;      /* headings on light, footer base */
  --sage-700: #4e6555;      /* primary buttons, links */
  --sage-500: #7c917f;
  --sage-300: #a7b8ab;
  --sage-100: #e5ece4;
  --sage-50:  #eef3ec;

  /* Warm neutrals — the "room" */
  --sand-100: #f6f1e7;      /* soft warm section fill */
  --sand-200: #e7dbc6;      /* hairline borders */
  --sand-300: #d8c7ac;

  --ink:      #2b2925;      /* primary body text (warm near-black, logo script) */
  --ink-soft: #5e5a50;      /* secondary text */
  --cream:    #fbf8f1;      /* page background — the room */
  --white:    #ffffff;

  /* Gold — the brand's "jewelry" (accents only; never body text) */
  --accent:      #c0954b;   /* champagne gold — stars, small motifs */
  --accent-dark: #7e5f27;   /* gold-deep — eyebrow text, AA-safe on cream */

  /* Bluebonnet + lilac — cool, quiet counterweights to the warm neutrals.
     Used to give long informational pages (booking) some rhythm so the panels
     don't read as one undifferentiated block. Desaturated on purpose: these
     sit beside cream, so anything brighter reads cheerful, which is wrong
     for this practice. Both fills are AA-safe for --ink body text. */
  --blue-700: #3f5a7a;      /* headings/eyebrows on a blue fill or on cream */
  --blue-500: #5f7796;      /* bluebonnet — small motifs, rules */
  --blue-200: #cfdbe8;      /* hairline borders */
  --blue-100: #e8eef5;      /* soft blue panel fill */

  --lilac-700: #5d4f73;     /* headings/eyebrows on a lilac fill or on cream */
  --lilac-500: #8b7aa0;     /* muted purple details */
  --lilac-200: #ded6e8;     /* hairline borders */
  --lilac-100: #eeeaf4;     /* soft lilac panel fill */

  /* Clay — warm, non-alarming emergency/urgent path */
  --alert-bg:   #fbeee4;
  --alert-line: #d9a273;
  --alert-ink:  #8a4b22;

  /* Typography */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --maxw: 1120px;
  --maxw-narrow: 760px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 3px rgba(47, 66, 55, 0.08), 0 1px 2px rgba(47, 66, 55, 0.06);
  --shadow-md: 0 6px 24px rgba(47, 66, 55, 0.10);
  --shadow-lg: 0 18px 48px rgba(47, 66, 55, 0.14);
  --transition: 180ms ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sage-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sage-900); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--sage-900);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.35rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1.1em; }

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin: 0 0 0.75rem;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.4rem; }
.narrow { max-width: var(--maxw-narrow); }
section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-alt { background: var(--sage-50); }
.section-sand { background: var(--sand-100); }
.center { text-align: center; }
.lead { font-size: 1.2rem; color: var(--ink-soft); }

.grid { display: grid; gap: 1.5rem; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans); font-weight: 600; font-size: 1rem;
  padding: 0.85rem 1.6rem; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
  line-height: 1.2;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } }
.btn-primary { background: var(--sage-700); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--sage-900); color: var(--white); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--sage-900); border-color: var(--sage-300); }
.btn-outline:hover { background: var(--sage-100); color: var(--sage-900); }
.btn-lg { padding: 1rem 2rem; font-size: 1.08rem; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 246, 0.9);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--sand-200);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; }
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--sage-500), var(--sage-700));
  display: grid; place-items: center; color: var(--white); flex: none;
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-serif); font-size: 1.15rem; color: var(--sage-900); font-weight: 500; }
.brand-sub { font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.02em; }

.nav-links { display: flex; align-items: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none; color: var(--ink); font-weight: 500; font-size: 0.95rem;
  padding: 0.5rem 0.75rem; border-radius: 8px; transition: background var(--transition), color var(--transition);
}
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { background: var(--sage-100); color: var(--sage-900); } }
.nav-cta { margin-left: 0.4rem; }
.nav-phone { font-weight: 600; color: var(--sage-900); white-space: nowrap; }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 0.4rem; border-radius: 8px; color: var(--sage-900);
}
.nav-toggle svg { width: 28px; height: 28px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0.15rem;
    background: var(--cream); border-bottom: 1px solid var(--sand-200);
    padding: 0.8rem 1.4rem 1.2rem; box-shadow: var(--shadow-md);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.7rem 0.5rem; }
  .nav-cta { margin: 0.5rem 0 0; }
  .btn.nav-cta { justify-content: center; }
}

/* ---------- Emergency banner ---------- */
.emergency-bar {
  background: var(--alert-bg); border-bottom: 1px solid var(--alert-line);
  color: var(--alert-ink); font-size: 0.95rem; text-align: center;
}
.emergency-bar .wrap { padding-block: 0.55rem; display: flex; gap: 0.5rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.emergency-bar strong { font-weight: 700; }
.emergency-bar a { color: var(--alert-ink); font-weight: 700; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sage-50) 0%, var(--cream) 100%); }
/* Booking page opens cool rather than green, to match the tinted panels below. */
.hero--cool { background: linear-gradient(180deg, var(--blue-100) 0%, var(--lilac-100) 45%, var(--cream) 100%); }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 860px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero h1 { margin-bottom: 0.65rem; }
.hero .lead { margin-bottom: 1.8rem; max-width: 34ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.4rem; }
.hero-note { font-size: 0.92rem; color: var(--ink-soft); }
.hero-media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--sage-100);
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  /* width must be definite, or aspect-ratio derives width from min-height and
     the box grows wider than a phone viewport. */
  width: 100%;
}
/* Only floor the height once there's room for it. */
@media (min-width: 860px) { .hero-media { min-height: 340px; } }
.img-placeholder {
  display: grid; place-items: center; text-align: center; color: var(--sage-700);
  background: repeating-linear-gradient(135deg, var(--sage-100), var(--sage-100) 18px, var(--sage-50) 18px, var(--sage-50) 36px);
  width: 100%; height: 100%; padding: 1.5rem; font-size: 0.9rem;
}
.img-placeholder span { max-width: 26ch; }

/* ---------- Cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--sand-200);
  border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.card h3 { margin-top: 0.3rem; }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--sage-100);
  display: grid; place-items: center; color: var(--sage-700); margin-bottom: 0.9rem;
}
.card-icon svg { width: 26px; height: 26px; }

/* ---------- Price highlight ---------- */
.price-band { background: var(--sage-900); color: var(--sage-50); border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 2.8rem); text-align: center; }
.price-band h2 { color: var(--white); }
.price-band .price-num { font-family: var(--font-serif); font-size: clamp(2.4rem, 6vw, 3.4rem); color: var(--white); display: block; margin: 0.2rem 0; }
.price-band .price-sub { color: var(--sage-300); font-size: 1.05rem; }
.price-band a { color: var(--white); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 1.2rem; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step { position: relative; background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.5rem 4.2rem; box-shadow: var(--shadow-sm); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 1.3rem; top: 1.4rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--sage-700); color: var(--white);
  font-family: var(--font-serif); font-size: 1.1rem;
  display: grid; place-items: center;
}
.step h3 { margin: 0 0 0.35rem; }
.step p { margin: 0; color: var(--ink-soft); }

/* ---------- Testimonials ---------- */
.quote-card { background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius); padding: 1.7rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.stars { color: var(--accent); letter-spacing: 2px; margin-bottom: 0.7rem; font-size: 1.05rem; }
.quote-card blockquote { margin: 0 0 1rem; font-size: 1.05rem; color: var(--ink); font-style: normal; }
.quote-card .cite { margin-top: auto; font-weight: 600; color: var(--sage-900); font-size: 0.95rem; }

/* ---------- About ---------- */
.about-grid { display: grid; gap: 2.2rem; align-items: center; }
@media (min-width: 820px) { .about-grid { grid-template-columns: 0.8fr 1.2fr; } }
.about-portrait { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 3 / 4; background: var(--sage-100); }
.credential-list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 0.6rem; }
.credential-list li { display: flex; gap: 0.6rem; align-items: flex-start; }
.credential-list svg { width: 20px; height: 20px; color: var(--sage-500); flex: none; margin-top: 3px; }

/* ---------- FAQ ---------- */
.faq { max-width: var(--maxw-narrow); margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--sand-200); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--font-serif); font-size: 1.15rem; color: var(--sage-900);
  padding: 1.2rem 2.5rem 1.2rem 0; position: relative;
}
.faq-q::after {
  content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; color: var(--sage-500); transition: transform var(--transition);
}
.faq-item.open .faq-q::after { content: "\2013"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 240ms ease; }
.faq-a-inner { padding-bottom: 1.3rem; color: var(--ink-soft); }
.faq-a p:last-child { margin-bottom: 0; }

/* ---------- Service area ---------- */
.area-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.area-list li { background: var(--sage-100); color: var(--sage-900); padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.92rem; font-weight: 500; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-card { text-align: center; }
.contact-card .card-icon { margin-inline: auto; }
.contact-card a { font-weight: 600; color: var(--sage-900); text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, var(--sage-700), var(--sage-900)); color: var(--white); border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.2rem); text-align: center; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: var(--sage-100); max-width: 48ch; margin-inline: auto; }
.cta-band .btn-primary { background: var(--white); color: var(--sage-900); }
.cta-band .btn-primary:hover { background: var(--sage-50); color: var(--sage-900); }

/* ---------- Footer ---------- */
.site-footer { background: var(--sage-900); color: var(--sage-100); padding-block: 3rem 2rem; }
.site-footer a { color: var(--sage-100); }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand .brand-name { color: var(--white); }
.footer-brand p { color: var(--sage-300); font-size: 0.95rem; max-width: 34ch; }
.footer-col h4 { color: var(--white); font-family: var(--font-sans); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.9rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.footer-col a { text-decoration: none; font-size: 0.95rem; }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 2.2rem; padding-top: 1.4rem; font-size: 0.85rem; color: var(--sage-300); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }

/* ---------- Booking page ---------- */
.booking-embed {
  background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; min-height: 800px;
}
.booking-embed iframe { width: 100%; border: 0; display: block; min-height: 800px; }

/* Mobile: the scheduler is a third-party iframe, and iOS Safari does not give an
   iframe its own scroll — it expands it to content height and scrolls the page.
   If Acuity's auto-resize script is blocked (content blockers are common on
   phones) the iframe is stuck at its 800px height, `overflow: hidden` above clips
   the rest, and the intake form's city list cannot be reached or scrolled at all.
   Making the iframe tall enough to hold the form and letting the page scroll
   removes the trap, whether or not the resize script runs. */
@media (max-width: 780px) {
  .booking-embed { overflow: visible; min-height: 0; }
  .booking-embed iframe { min-height: 120vh; -webkit-overflow-scrolling: touch; }
}

/* Phone-only direct link to Acuity's own scheduling page. The embedded scheduler
   stays below it for anyone who prefers it, but the intake's city list sits in a
   cross-origin iframe we cannot reach — on Acuity's own page there is no nested
   scroll container and the list behaves natively. Desktop is unaffected. */
.booking-direct { display: none; }
@media (max-width: 780px) {
  .booking-direct { display: block; text-align: center; margin: 0 0 1.4rem; }
  .booking-direct .btn { width: 100%; justify-content: center; }
  .booking-direct span {
    display: block; margin-top: 0.7rem; font-size: 0.95rem; color: var(--ink-soft);
  }
}
.embed-fallback { padding: 2.5rem; text-align: center; color: var(--ink-soft); }

.info-panel { background: var(--sage-50); border: 1px solid var(--sage-100); border-radius: var(--radius); padding: 1.6rem; }
.info-panel h3 { margin-top: 0; }
.info-panel ul { margin: 0; padding-left: 1.2rem; }
.info-panel li { margin-bottom: 0.5rem; }

/* Cool-tinted panel variants. Same shape and spacing as .info-panel — only the
   fill, border and heading colour change, so a page can alternate tints without
   introducing a second card style. */
.info-panel--blue  { background: var(--blue-100);  border-color: var(--blue-200); }
.info-panel--blue h3  { color: var(--blue-700); }
.info-panel--lilac { background: var(--lilac-100); border-color: var(--lilac-200); }
.info-panel--lilac h3 { color: var(--lilac-700); }

/* Quiet cool wash for a full section band. */
.band-cool { background: linear-gradient(180deg, var(--blue-100) 0%, var(--lilac-100) 100%); }

/* Contained photo between blocks of text. Matches .hero-banner-img's shape so
   the page keeps one image language rather than two. */
.booking-figure { margin: 2.5rem auto 3rem; max-width: 880px; }
.booking-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}

/* ---------- Legal pages ---------- */
.legal-body { max-width: var(--maxw-narrow); margin-inline: auto; }
.legal-body h2 { margin-top: 2rem; }
.legal-body h3 { margin-top: 1.4rem; }
.legal-body ul { padding-left: 1.3rem; }

/* ---------- Pricing tables ---------- */
.price-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.price-table caption { text-align: left; font-family: var(--font-serif); font-size: 1.2rem; color: var(--sage-900); padding: 0 0 0.6rem; caption-side: top; }
.price-table th, .price-table td { text-align: left; padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--sand-200); }
.price-table thead th { background: var(--sage-50); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sage-700); }
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table td:last-child, .price-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Travel fee by town — a flat published fee per town, laid out in columns. */
.travel-list { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.travel-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--sand-200); font-size: 0.95rem; }
.travel-list li span:last-child { font-weight: 600; color: var(--sage-900); font-variant-numeric: tabular-nums; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 0.7rem; }
.checklist li { display: flex; gap: 0.7rem; align-items: flex-start; }
.checklist svg { width: 22px; height: 22px; color: var(--sage-500); flex: none; margin-top: 3px; }

/* ---------- Fee list ---------- */
.fee-list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 0.8rem; }
.fee-list li { padding-left: 1.4rem; position: relative; color: var(--ink-soft); }
.fee-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--sage-500); }
.fee-list strong { color: var(--ink); }

/* ---------- Resource cards ---------- */
.resource { background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: var(--shadow-sm); }
.resource h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.resource p { margin: 0; color: var(--ink-soft); }

/* ---------- Visit estimator ---------- */
.estimator { padding: 1.6rem; }
.estimator-fields { display: grid; gap: 1rem; }
@media (min-width: 640px) { .estimator-fields { grid-template-columns: 1fr 1fr; } }
.est-field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.3rem; color: var(--sage-900); }
/* Native <select> on purpose: the OS picker scrolls a 35-town list reliably on
   every phone, which no custom dropdown does for free. `font-size: 16px` minimum
   stops iOS zooming the page on focus (a zoom that leaves the list off-screen and
   reads as "frozen"), and 44px is the minimum comfortable touch target. */
.est-field select, .est-field input {
  width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--sand-200);
  border-radius: 10px; font: inherit; font-size: max(1rem, 16px);
  min-height: 44px; background: var(--cream); color: var(--ink);
}
.est-field select:focus-visible, .est-field input:focus-visible {
  outline: 3px solid var(--sage-500); outline-offset: 2px;
}
.est-checks { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1.1rem 0 0; }
.est-checks label { display: flex; gap: 0.5rem; align-items: center; font-weight: 500; }
.est-checks input { width: 19px; height: 19px; }
.est-note {
  background: var(--alert-bg); border: 1px solid var(--alert-line); color: var(--alert-ink);
  border-radius: var(--radius); padding: 0.9rem 1.1rem; margin: 1.1rem 0 0; font-size: 0.97rem;
}
.est-note a { color: var(--alert-ink); font-weight: 700; }
.est-note[hidden] { display: none; }
.est-out { background: var(--sage-900); color: #fff; border-radius: var(--radius); padding: 1.4rem 1.5rem; text-align: center; margin-top: 1.3rem; }
.est-out .big { font-family: var(--font-serif); font-size: clamp(1.9rem, 5vw, 2.4rem); color: #fff; display: block; line-height: 1.1; }
.est-out .items { color: var(--sage-300); font-size: 0.95rem; margin-top: 0.5rem; }
.est-out .disc { color: var(--sage-100); font-size: 0.83rem; margin-top: 0.8rem; }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.badge { display: inline-block; background: var(--sage-100); color: var(--sage-900); font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.7rem; border-radius: 999px; }
.placeholder-note {
  background: var(--alert-bg); border: 1px dashed var(--alert-line); color: var(--alert-ink);
  border-radius: 10px; padding: 0.5rem 0.85rem; font-size: 0.85rem; display: inline-block; margin: 0.3rem 0;
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Brand logo in header */
.brand-logo { height: 50px; width: auto; display: block; }
@media (max-width: 600px) { .brand-logo { height: 40px; } }

/* Hero banner image (self-contained wordmark + tagline art) */
.hero-banner-img { width: 100%; max-width: 1040px; margin: 0 auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: block; }
.hero-actions { text-align: center; margin-top: 1.9rem; }
.hero-actions .hero-cta { justify-content: center; }

/* Photos that fill a framed media box */
.hero-media img, .about-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section-img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; }
figure.section-figure { margin: 0; }
figure.section-figure figcaption { text-align: center; color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.7rem; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--white); padding: 0.6rem 1rem; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 3px solid var(--sage-500); outline-offset: 2px; border-radius: 4px; }