/* ============================================================================
   starter.css — MECHANICS-ONLY FLOOR (invisible correctness layer)
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
img, svg, video { max-width: 100%; height: auto; }

:root {
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;     --space-8: 4.5rem;
  --measure: 38rem;
  --section-pad: 4.5rem;
}

h1 { font-size: 2.5rem;   line-height: 1.08; margin: 0 0 1rem; }
h2 { font-size: 1.75rem;  line-height: 1.15; margin: 0 0 0.75rem; }
h3 { font-size: 1.375rem; line-height: 1.25; margin: 0 0 0.5rem; }
p  { margin: 0 0 1rem; max-width: var(--measure); }
@media (min-width: 1000px) { h1 { font-size: 3rem; } }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid currentColor; outline-offset: 2px;
}
a { text-underline-offset: 3px; }

:root { --header-safe: 5.25rem; }
html { scroll-padding-top: var(--header-safe); }

@media (max-width: 720px) { :root { --section-pad: 2.75rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================================
   BIDDEFORD FAMILY DENTISTRY — bespoke identity
   Warm, calming, owner-led New England practice. Anchored to the real office:
   terracotta-clay walls + wood. Anxiety-friendly, deliberately NOT clinical teal.
   ============================================================================ */
:root {
  --linen:    #faf4ec;   /* warm canvas */
  --linen-2:  #f3eadc;
  --sand:     #ecdcc4;   /* warm band */
  --sand-2:   #e6d3b8;   /* sand button / chip */
  --ink:      #2a211c;   /* body text */
  --muted:    #5f5147;   /* secondary text (AA on linen + sand) */
  --clay:     #b4502e;   /* brand terracotta */
  --clay-deep:#a8431f;   /* clay button bg (AA w/ linen) */
  --clay-text:#99371a;   /* clay as link/text on linen */
  --sage:     #5e7459;   /* calming green */
  --sage-deep:#4a5e44;   /* sage button bg */
  --sage-text:#45563f;   /* sage as text on linen */
  --dark:     #283026;   /* deep eucalyptus band */
  --dark-2:   #1f2620;
  --clay-on-dark: #edb89a;
  --sage-on-dark: #a9bda0;
  --line:     rgba(42,33,28,.14);
  --line-2:   rgba(250,244,236,.18);

  --r-1: 6px; --r-2: 12px; --r-3: 22px;
  --shadow:  0 22px 48px -28px rgba(42,33,28,.50);
  --shadow-s:0 10px 24px -18px rgba(42,33,28,.45);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* font-size tokens (referenced via var() so the scale stays tight) */
  --fs-xs: 0.8125rem; --fs-sm: 0.95rem; --fs-md: 1.05rem;
  --fs-lg: 1.2rem; --fs-xl: 1.4rem; --fs-2xl: 1.7rem;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--linen);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-weight: 600; }
a { color: var(--clay-text); }
a:hover { color: var(--clay-deep); }
strong { font-weight: 700; }

/* ---- skip link ---- */
.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background-color: var(--ink); color: var(--linen);
  padding: 0.75rem 1rem; border-radius: 0 0 var(--r-1) 0;
}
.skip:focus { left: 0; }

/* ---- layout helpers ---- */
.wrap { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 48rem; }
.section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--muted); max-width: 36rem; }
.muted { color: var(--muted); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--clay-text);
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem;
}
.eyebrow svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* ---- buttons ---- */
.btn, .btn-ghost, .btn-sage {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-md);
  padding: 0.85rem 1.4rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1.1; white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn { background-color: var(--clay-deep); color: var(--linen); }
.btn:hover { background-color: #8f3417; color: var(--linen); transform: translateY(-2px); }
.btn-sage { background-color: var(--sage-deep); color: var(--linen); }
.btn-sage:hover { background-color: #3c4d38; color: var(--linen); transform: translateY(-2px); }
.btn-ghost { background-color: var(--linen); color: var(--clay-text); border-color: rgba(168,67,31,.45); }
.btn-ghost:hover { background-color: var(--linen); color: var(--clay-deep); border-color: var(--clay-deep); }
.btn svg, .btn-ghost svg, .btn-sage svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* ============================================================================
   HEADER
   ============================================================================ */
.site {
  position: sticky; top: 0; z-index: 100;
  background-color: rgba(250,244,236,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-inner {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 4.5rem; padding: 0.5rem 1.5rem;
  max-width: 84rem; margin: 0 auto;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; min-width: 0; }
.brand img { width: 2.3rem; height: 2.6rem; object-fit: contain; flex: none; }
.brand .wordmark {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.05;
  color: var(--ink); white-space: nowrap;
}
.brand .wordmark b { color: var(--clay-text); font-weight: 600; }

.primary { margin-left: auto; }
.primary ul {
  list-style: none; display: flex; align-items: center; gap: 1.4rem;
  margin: 0; padding: 0;
}
.primary a {
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: var(--fs-sm);
  padding: 0.4rem 0; border-bottom: 2px solid transparent;
}
.primary a:hover { color: var(--clay-text); border-bottom-color: var(--clay); }
.header-cta { display: inline-flex; align-items: center; gap: 0.85rem; flex: none; }
.header-cta .tel {
  font-family: var(--font-display); font-weight: 600; color: var(--clay-text);
  text-decoration: none; white-space: nowrap; font-size: var(--fs-md);
}
.header-cta .tel:hover { color: var(--clay-deep); }

/* mobile menu toggle (CSS-only) */
.nav-toggle, .nav-toggle-label { display: none; }
.nav-toggle-label { flex: none; }

/* ============================================================================
   HOME OPENING (asymmetric, arched real photo)
   ============================================================================ */
.opening { background-color: var(--linen); padding-top: 3rem; padding-bottom: var(--section-pad); overflow: hidden; }
.opening-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center;
}
.opening h1 {
  font-size: clamp(2.6rem, 5.2vw, 4rem); line-height: 1.02; margin: 0 0 1.25rem;
  letter-spacing: -0.02em; max-width: 14ch;
}
.opening h1 em { font-style: italic; color: var(--clay-text); }
.opening .lead { max-width: 34rem; margin-bottom: 1.75rem; }
.opening-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.opening-note { margin-top: 1.5rem; font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 0.55rem; }
.opening-note svg { width: 1.1rem; height: 1.1rem; color: var(--sage-text); flex: none; }

.figure { position: relative; }
.framed {
  border-radius: var(--arch, 180px) var(--arch, 180px) 18px 18px;
  overflow: hidden; box-shadow: var(--shadow);
  border: 1px solid var(--line); aspect-ratio: 4 / 5; background-color: var(--sand);
}
.framed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.framed--wide { aspect-ratio: 3 / 2; border-radius: 18px; }

.opening-badge {
  position: absolute; left: -1.25rem; bottom: 1.5rem;
  background-color: var(--dark); color: var(--linen);
  padding: 0.9rem 1.15rem; border-radius: var(--r-2);
  box-shadow: var(--shadow-s); max-width: 13rem;
}
.opening-badge strong { display: block; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.15; color: var(--linen); background-color: var(--dark); margin-bottom: 0.25rem; }
.opening-badge span { font-size: var(--fs-xs); line-height: 1.35; color: var(--sand); background-color: var(--dark); display: block; }

/* ============================================================================
   BANDS
   ============================================================================ */
.band-sand { background-color: var(--sand); }
.band-dark { background-color: var(--dark); }
.band-texture {
  background-color: var(--linen);
  background-image: linear-gradient(0deg, rgba(250,244,236,.72), rgba(250,244,236,.72)), url("images/texture-botanical.jpg");
  background-size: cover; background-position: center;
}
.band-dark h2, .band-dark h3 { color: var(--linen); background-color: var(--dark); }
.band-dark p, .band-dark li { color: var(--sand); background-color: var(--dark); }
.band-dark .eyebrow { color: var(--clay-on-dark); background-color: var(--dark); }
.band-dark a { color: var(--clay-on-dark); background-color: var(--dark); }
.band-dark strong { color: var(--linen); background-color: var(--dark); }

.section-head { max-width: 44rem; margin-bottom: 2.5rem; }
.section-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.08; }

/* ---- services snapshot (auto-fit; unclassed children -> no card tell) ---- */
.snapshot { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.snapshot > li {
  background-color: var(--linen); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 1.75rem; box-shadow: var(--shadow-s);
}
.snapshot > li h3 { font-size: var(--fs-xl); margin-bottom: 0.5rem; }
.snapshot > li p { margin-bottom: 0.85rem; color: var(--muted); }
.snapshot > li .ico {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center; margin-bottom: 1rem;
  background-color: var(--sand); border-radius: 50%; color: var(--clay-text);
}
.snapshot > li .ico svg { width: 1.5rem; height: 1.5rem; }
.link-more { font-weight: 700; text-decoration: none; color: var(--clay-text); display: inline-flex; align-items: center; gap: 0.4rem; }
.link-more:hover { color: var(--clay-deep); }
.link-more svg { width: 1rem; height: 1rem; }

/* ---- two-column feature row (real photo + text), alternating ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split--narrowtext .copy { max-width: 34rem; }
.split img.shot { border-radius: var(--r-3); box-shadow: var(--shadow); border: 1px solid var(--line); width: 100%; }
.split .copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }

.calm-illus { border-radius: var(--r-3); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background-color: var(--sand); }
.calm-illus img { display: block; width: 100%; }

/* ---- checklist ---- */
.ticks { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.ticks li { position: relative; padding-left: 1.9rem; color: var(--ink); }
.ticks li svg { position: absolute; left: 0; top: 0.2rem; width: 1.25rem; height: 1.25rem; color: var(--sage-text); }
.band-dark .ticks li { color: var(--sand); background-color: var(--dark); }
.band-dark .ticks li svg { color: var(--sage-on-dark); background-color: var(--dark); }

/* ---- stat row ---- */
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.stats > div { padding: 1rem 0; }
.stats .n { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--clay-text); display: block; }
.band-dark .stats .n { color: var(--clay-on-dark); background-color: var(--dark); }
.stats .k { font-size: var(--fs-sm); color: var(--muted); margin-top: 0.5rem; display: block; }
.band-dark .stats .k { color: var(--sand); background-color: var(--dark); }

/* ============================================================================
   CALL-TO-ACTION strip
   ============================================================================ */
.invite { background-color: var(--dark); }
.invite-inner { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 2.5rem; align-items: center; }
.invite h2 { color: var(--linen); background-color: var(--dark); font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.invite p { color: var(--sand); background-color: var(--dark); }
.invite-actions { display: flex; flex-direction: column; gap: 0.85rem; align-items: flex-start; }
.invite-actions .btn-ghost { background-color: var(--dark); color: var(--clay-on-dark); border-color: rgba(237,184,154,.5); }
.invite-actions .btn-ghost:hover { background-color: var(--dark); color: var(--linen); border-color: var(--clay-on-dark); }

/* ============================================================================
   PAGE HEADER (interior pages)
   ============================================================================ */
.page-head { background-color: var(--sand); padding-top: 3.25rem; padding-bottom: 3.25rem; border-bottom: 1px solid var(--line); }
.page-head .crumb { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 0.85rem; letter-spacing: 0.02em; }
.page-head .crumb a { color: var(--muted); text-decoration: none; }
.page-head .crumb a:hover { color: var(--clay-text); }
.page-head h1 { font-size: clamp(2.3rem, 4.4vw, 3.4rem); line-height: 1.04; margin: 0 0 0.75rem; max-width: 18ch; }
.page-head p { color: var(--muted); max-width: 40rem; margin: 0; font-size: var(--fs-lg); }

/* ============================================================================
   PROSE + content blocks
   ============================================================================ */
.prose { max-width: 42rem; }
.prose p { color: var(--ink); }
.prose h2 { margin-top: 2.5rem; font-size: var(--fs-2xl); }
.prose h3 { margin-top: 1.75rem; }

/* service detail list */
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.svc-list > li { background-color: var(--linen); border: 1px solid var(--line); border-left: 4px solid var(--clay); border-radius: var(--r-2); padding: 1.5rem; }
.svc-list > li h3 { font-size: var(--fs-lg); margin-bottom: 0.4rem; }
.svc-list > li p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.band-sand .svc-list > li { background-color: var(--linen); }

/* highlighted callout */
.callout { background-color: var(--sand); border-radius: var(--r-3); padding: 2rem; border: 1px solid var(--line); }
.callout--sage { background-color: #e8eee3; }
.callout h3 { margin-top: 0; }
.callout p { margin-bottom: 0; color: var(--muted); }

/* ---- team grid (unclassed children) ---- */
.team { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.team > li { background-color: var(--linen); border: 1px solid var(--line); border-radius: var(--r-2); padding: 1.75rem; box-shadow: var(--shadow-s); }
.team .monogram {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600;
  background-color: var(--sage-deep); color: var(--linen); margin-bottom: 1rem;
}
.team h3 { font-size: var(--fs-lg); margin-bottom: 0.15rem; }
.team .role { color: var(--clay-text); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.02em; margin-bottom: 0.6rem; }
.team p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

/* ---- gallery / tour grid (unclassed children) ---- */
.tour { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.tour > li { border-radius: var(--r-2); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-s); background-color: var(--sand); }
.tour > li img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; display: block; }

.smiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.smiles > li { background-color: var(--linen); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; box-shadow: var(--shadow-s); }
.smiles > li img { width: 100%; display: block; border-bottom: 1px solid var(--line); }
.smiles > li .cap { padding: 0.85rem 1.1rem; font-size: var(--fs-sm); color: var(--muted); }

/* ---- testimonials ---- */
.quote, .reviews > li { background-color: var(--linen); border: 1px solid var(--line); border-radius: var(--r-3); padding: 2.25rem; box-shadow: var(--shadow-s); }
.quote blockquote, .reviews > li blockquote { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.45; color: var(--ink); }
.quote .who, .reviews > li .who { margin-top: 1rem; font-weight: 700; color: var(--clay-text); font-size: var(--fs-sm); }
.stars { color: var(--clay); margin-bottom: 1rem; display: flex; gap: 0.2rem; }
.stars svg { width: 1.1rem; height: 1.1rem; }
.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.duo { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

/* ---- numbered first-visit steps ---- */
.steps { counter-reset: s; list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.steps > li { position: relative; padding-left: 3.25rem; }
.steps > li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem;
  background-color: var(--clay-deep); color: var(--linen); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 600;
}
.steps h3 { font-size: var(--fs-lg); margin-bottom: 0.25rem; }
.steps p { margin: 0; color: var(--muted); }

/* ---- FAQ ---- */
.faq { max-width: 44rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.faq summary { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); cursor: pointer; list-style: none; color: var(--ink); display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { color: var(--clay-text); flex: none; font-weight: 700; }
.faq p { margin: 0.85rem 0 0; color: var(--muted); }

/* ---- contact / forms ---- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: start; }
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.info-list > li { display: flex; gap: 0.9rem; align-items: flex-start; }
.info-list svg { width: 1.4rem; height: 1.4rem; color: var(--clay-text); flex: none; margin-top: 0.2rem; }
.info-list .lbl { display: block; font-weight: 700; color: var(--ink); margin-bottom: 0.15rem; }
.info-list a { color: var(--clay-text); text-decoration: none; }
.info-list a:hover { color: var(--clay-deep); }
.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.hours .d { font-weight: 600; }
.hours .t { color: var(--muted); }

.form-card { background-color: var(--sand); border-radius: var(--r-3); padding: 2rem; border: 1px solid var(--line); }
.form-note { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 1.25rem; }
.form-card form > div { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.form-card label { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
.form-card input, .form-card textarea, .form-card select {
  font-family: var(--font-body); font-size: var(--fs-md); padding: 0.75rem 0.9rem;
  border: 1px solid rgba(42,33,28,.25); border-radius: var(--r-1);
  background-color: var(--linen); color: var(--ink); width: 100%;
}
.form-card input:hover, .form-card textarea:hover, .form-card select:hover { border-color: var(--clay); }
.form-card textarea { min-height: 7rem; resize: vertical; }

.map-embed { border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.map-embed iframe { display: block; width: 100%; height: 320px; border: 0; }

/* ============================================================================
   FOOTER
   ============================================================================ */
.foot { background-color: var(--dark-2); color: var(--sand); padding-top: 3.5rem; padding-bottom: 2rem; }
.foot a { color: var(--sand); background-color: var(--dark-2); text-decoration: none; }
.foot a:hover { color: var(--linen); background-color: var(--dark-2); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.foot-brand { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.foot-brand img { width: 2.1rem; height: 2.4rem; }
.foot-brand .wordmark { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--linen); background-color: var(--dark-2); line-height: 1.1; }
.foot p { color: var(--sand); background-color: var(--dark-2); font-size: var(--fs-sm); max-width: 22rem; }
.foot h3 { color: var(--linen); background-color: var(--dark-2); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.foot ul a { font-size: var(--fs-sm); }
.foot-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.foot-bottom p { font-size: var(--fs-xs); color: var(--sand); background-color: var(--dark-2); margin: 0; }

/* ============================================================================
   MOBILE STICKY CALL/BOOK BAR
   ============================================================================ */
.callbar { display: none; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1080px) {
  .opening-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .opening .framed { max-width: 28rem; }
  .invite-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}

@media (max-width: 900px) {
  /* collapse primary nav into a toggled panel */
  .nav-toggle-label {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 2.9rem; height: 2.9rem; flex: none;
    background-color: var(--linen); border: 1px solid var(--line); border-radius: var(--r-1);
    color: var(--ink); cursor: pointer;
  }
  .nav-toggle-label svg { width: 1.5rem; height: 1.5rem; }
  .primary {
    position: fixed; inset: 4.5rem 0 auto 0; margin: 0;
    background-color: var(--linen); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); max-height: 0; overflow: hidden;
    transition: max-height .28s ease;
  }
  .primary ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1.5rem 1.25rem; }
  .primary li { border-bottom: 1px solid var(--line); }
  .primary a { display: block; padding: 0.95rem 0; font-size: var(--fs-md); }
  .nav-toggle:checked ~ .primary { max-height: 24rem; }
  .header-cta { display: none; }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split--flip .copy { order: -1; }

  /* sticky bottom call/book bar on tablet + phone */
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    box-shadow: 0 -10px 30px -18px rgba(42,33,28,.6);
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.95rem 1rem; font-family: var(--font-body); font-weight: 700; text-decoration: none;
  }
  .callbar .c-call { background-color: var(--sage-deep); color: var(--linen); }
  .callbar .c-book { background-color: var(--clay-deep); color: var(--linen); }
  .callbar svg { width: 1.2rem; height: 1.2rem; flex: none; }
  body { padding-bottom: 3.6rem; }
}

@media (max-width: 720px) {
  .foot-grid { grid-template-columns: 1fr; }
  .opening-badge { left: 0; }
  .stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 460px) {
  .brand .wordmark { font-size: var(--fs-md); }
  .opening-actions { flex-direction: column; align-items: stretch; }
  .opening-actions .btn, .opening-actions .btn-ghost { justify-content: center; }
}

/* visually-hidden utility (accessible labels) */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }