/* ==========================================================================
   Sit and Stay Academy
   Design system. Palette sampled from the approved badge logo.
   No webfonts, no framework, no build step.
   ========================================================================== */

/* --- Custom properties ------------------------------------------------- */
:root {
  /* Brand, sampled from assets/logos/Sit_and_Stay_Logo_V1_2x.png */
  --navy:          #001C43;
  --navy-deep:     #071C38;
  --blue-ribbon:   #0F438C;
  --blue-mountain: #1196ED;
  --sky-pale:      #92D3FC;
  --sky-wash:      #EAF7FC;
  --forest:        #114A28;
  --grass:         #255C0F;
  --meadow:        #7EA80E;
  --white:         #FAFAFA;

  /* Functional */
  --ink:           #14213A;
  --ink-soft:      #46536B;
  --rule:          #D8E3EC;
  --page:          #FFFFFF;
  --panel:         var(--sky-wash);

  /* Type: system stack, no network request */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Scale */
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --step-4:  clamp(2rem, 1.6rem + 2vw, 3.25rem);

  /* Space */
  --s-1: 0.5rem;
  --s-2: 0.875rem;
  --s-3: 1.25rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 6.5rem;

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(0,28,67,.06), 0 8px 24px rgba(0,28,67,.08);
  --shadow-lift: 0 2px 4px rgba(0,28,67,.08), 0 14px 34px rgba(0,28,67,.14);
  --header-h: 76px;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* --- Image captions ------------------------------------------------------ */
.split-media figure { margin: 0; }
.img-caption { font-size: var(--step--1); color: var(--ink-soft); margin-top: .5rem; }

/* --- Footer service-area list -------------------------------------------- */
.footer-areas { font-size: var(--step--1); margin-top: var(--s-2); }

/* --- Grand Opening banner ------------------------------------------------ */
.promo-banner {
  display: block; background: #C1121F; color: #fff; text-align: center;
  padding: .65rem 1rem; font-weight: 700; text-decoration: none;
  font-size: var(--step-0);
}
.promo-banner:hover { background: #A00F1A; color: #fff; }
.promo-banner .promo-cta { text-decoration: underline; white-space: nowrap; }

/* --- Price card: discounted price, struck full price beside it ----------- */
.price-discount {
  color: var(--grass);
  font-size: clamp(2.6rem, 2rem + 3vw, 4rem);
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
}
.price-discount .price-old {
  font-size: .55em; font-weight: 700; color: var(--ink-soft);
  text-decoration: line-through; text-decoration-thickness: 3px;
}
.price-unit-line {
  font-size: var(--step-0); font-weight: 600; color: var(--ink-soft);
  margin: .35rem 0 1.25rem;
}

/* --- Scrollbar, wide and easy to grab ----------------------------------- */
html { scrollbar-width: auto; scrollbar-color: var(--blue-ribbon) var(--sky-wash); }
::-webkit-scrollbar { width: 18px; height: 18px; }
::-webkit-scrollbar-track { background: var(--sky-wash); }
::-webkit-scrollbar-thumb {
  background: var(--blue-ribbon);
  border-radius: 9px;
  border: 3px solid var(--sky-wash);
  min-height: 48px;
}
::-webkit-scrollbar-thumb:hover { background: var(--navy); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0 0 var(--s-3); line-height: 1.15; color: var(--navy); font-weight: 800; letter-spacing: -0.015em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p, ul, ol { margin: 0 0 var(--s-3); }
p { max-width: 68ch; }
a { color: var(--blue-ribbon); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .4em; }
strong { font-weight: 700; color: var(--navy); }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-5) 0; }

/* Focus, visible on every interactive element */
:focus-visible {
  outline: 3px solid var(--blue-mountain);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* --- Layout ------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
/* Aligned to the same left gutter as every other section, with the reading
   measure limited on the children instead. The client explicitly disliked
   centred text blocks sitting in the middle of a page. */
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow > * { max-width: 68ch; }
.section { padding-block: var(--s-6); }
.section-tight { padding-block: var(--s-5); }
.section-panel { background: var(--panel); }
.section-navy { background: var(--navy); color: #E8EFF7; }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy a { color: var(--sky-pale); }
.lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 60ch; }
.section-navy .lede { color: #C7D6E6; }
.eyebrow {
  display: inline-block; font-size: var(--step--1); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ribbon);
  margin-bottom: var(--s-1);
}
.section-navy .eyebrow { color: var(--sky-pale); }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand img { width: 52px; height: 52px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-weight: 800; font-size: 1.15rem; color: var(--navy); letter-spacing: -0.02em; }
.brand-sub {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue-ribbon);
}

.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 .7rem; border-radius: var(--radius);
  color: var(--navy); font-weight: 600; text-decoration: none; font-size: .97rem;
}
.nav a:hover { background: var(--sky-wash); }
.nav a[aria-current="page"] { background: var(--sky-wash); color: var(--blue-ribbon); }

/* The phone button. `.nav a` (0,1,1) outweighs `.btn-primary` (0,1,0), which
   painted navy text onto the ribbon-blue button, unreadable. Explicit win: */
.nav a.btn-primary { color: #fff; }
.nav a.btn-primary:hover { background: var(--navy); color: #fff; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 1px solid var(--rule);
  background: #fff; border-radius: var(--radius); color: var(--navy); cursor: pointer;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .7rem 1.4rem;
  font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2;
  border-radius: var(--radius); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--blue-ribbon); color: #fff; }
.btn-primary:hover { background: var(--navy); color: #fff; }
.btn-secondary { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.btn-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-lg { min-height: 56px; padding: .9rem 1.8rem; font-size: 1.08rem; }
.btn .icon { width: 20px; height: 20px; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; background: var(--navy); overflow: hidden; }
/* On wide screens the text-driven height makes cover-cropping eat the photo.
   Follow the hero image's own aspect (1672x940) up to 88% of the viewport
   height so 2K/4K framing matches the 1080p look. */
@media (min-width: 1500px) {
  .hero { min-height: min(56.25vw, 88vh); display: flex; align-items: center; }
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,28,67,.86) 0%, rgba(0,28,67,.66) 34%, rgba(0,28,67,.12) 60%, rgba(0,28,67,0) 78%);
}
.hero-inner { position: relative; padding-block: clamp(3.5rem, 9vw, 7rem); }
.hero-copy { max-width: 34rem; color: #fff; }
.hero-copy h1 { color: #fff; margin-bottom: var(--s-3); text-wrap: balance; }
.hero-copy p { color: #DCE8F5; font-size: var(--step-1); }
.hero-note { font-size: var(--step--1); color: #B9CCE2; margin-top: var(--s-3); }

.page-head {
  background: var(--navy); color: #fff; position: relative; overflow: hidden;
  /* Static height on every page. The art crop is identical site-wide instead of
     growing and shrinking with the text and cutting off the subject. */
  min-height: clamp(375px, 32.5vw, 525px);
  display: flex; align-items: center;
}
.page-head-media { position: absolute; inset: 0; }
.page-head-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.page-head-media--top img { object-position: 50% 32%; }
.page-head-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(0,28,67,.9) 0%, rgba(0,28,67,.7) 45%, rgba(0,28,67,.25) 100%);
}
.page-head-inner { position: relative; padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.page-head h1 { color: #fff; margin-bottom: var(--s-2); }
.page-head p { color: #DCE8F5; font-size: var(--step-1); }

/* --- Breadcrumbs -------------------------------------------------------- */
.crumbs { font-size: var(--step--1); padding-block: var(--s-2); border-bottom: 1px solid var(--rule); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs li { margin: 0; color: var(--ink-soft); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--rule); }

/* --- Cards -------------------------------------------------------------- */
.grid { display: grid; gap: var(--s-3); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
/* A lone card in a two-column grid keeps its two-column width instead of stretching full-width. */
.grid-2 > .card:only-child { max-width: 35rem; }
/* 320px minimum keeps this at three columns on a 1180px wrap, so a six-card
   set lays out 3 x 2 instead of 4 + an orphan row of 2. */
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Whole card is one link. No flip, no hover reveal */
.card {
  display: flex; flex-direction: column; gap: var(--s-2);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--s-3); text-decoration: none; color: inherit;
  box-shadow: var(--shadow);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
a.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: var(--sky-pale); }
.card h3 { margin: 0; font-size: var(--step-1); }
.card p { margin: 0; color: var(--ink-soft); font-size: .97rem; max-width: none; }
.card-mark { width: 96px; height: 96px; flex: none; }
.card-cue { margin-top: auto; font-weight: 700; color: var(--blue-ribbon); font-size: .95rem; }
a.card:hover .card-cue { color: var(--navy); }

.card-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }

/* Skill list, smaller marks, denser */
.skill { display: flex; gap: var(--s-2); align-items: flex-start;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s-2) var(--s-3); }
.skill img { width: 56px; height: 56px; flex: none; }
.skill h3 { font-size: var(--step-0); margin: 0 0 .2rem; }
.skill p { margin: 0; font-size: .93rem; color: var(--ink-soft); max-width: none; }

/* Pillars */
.pillar { text-align: left; }
.pillar img { width: 104px; height: 104px; margin-bottom: var(--s-2); }
.pillar h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.pillar p { color: var(--ink-soft); margin: 0; }

/* --- Split (image + copy) ---------------------------------------------- */
.split { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .split-media-right .split-media { order: 2; }
}
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.split-media video { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; display: block; background: var(--navy); }
/* Badge artwork in a split: transparent PNG, so no card styling, just centred and capped */
.split-badge { display: flex; justify-content: center; }
.split-badge img { max-width: 380px; border-radius: 0; box-shadow: none; }

/* --- Steps -------------------------------------------------------------- */
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.steps li {
  counter-increment: step; position: relative;
  padding: var(--s-3) var(--s-3) var(--s-3) 4.25rem;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  margin: 0;
}
.steps li::before {
  content: counter(step); position: absolute; left: var(--s-3); top: var(--s-3);
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  background: var(--blue-ribbon); color: #fff; font-weight: 800; border-radius: 50%;
}
.steps h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.steps p { margin: 0; color: var(--ink-soft); }

/* --- Price -------------------------------------------------------------- */
.price-card {
  background: #fff; border: 2px solid var(--navy); border-radius: var(--radius-lg);
  padding: var(--s-4); box-shadow: var(--shadow);
}
.price-figure { font-size: var(--step-4); font-weight: 800; color: var(--navy); line-height: 1; }
.price-unit { font-size: var(--step-0); font-weight: 600; color: var(--ink-soft); }
.price-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.price-list li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .55rem; }
.price-list .icon { width: 22px; height: 22px; flex: none; color: var(--meadow); margin-top: .18rem; }

/* --- FAQ / accordion ---------------------------------------------------- */
.faq details {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: #fff; margin-bottom: var(--s-2);
  /* Anchor targets land below the sticky header instead of underneath it */
  scroll-margin-top: calc(var(--header-h) + 14px);
}
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-3);
  font-weight: 700; color: var(--navy); min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 12px; height: 12px; flex: none;
  border-right: 2px solid var(--blue-ribbon); border-bottom: 2px solid var(--blue-ribbon);
  transform: rotate(45deg); transition: transform .18s ease; margin-right: 4px;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq-body { padding: 0 var(--s-3) var(--s-3); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* FAQ page: accordions beside a live sidebar instead of a wall of flat text */
.faq-layout { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 900px) { .faq-layout { grid-template-columns: 1.6fr 0.9fr; gap: var(--s-5); } }
.aside-card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--s-3); box-shadow: var(--shadow); margin-bottom: var(--s-3);
}
.aside-card img.aside-photo { border-radius: var(--radius); margin-bottom: var(--s-2); }
.aside-card h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.aside-card p { color: var(--ink-soft); font-size: .95rem; }
.aside-facts { list-style: none; padding: 0; margin: 0; }
.aside-facts li { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.aside-facts img { width: 44px; height: 44px; flex: none; }
.aside-facts span { font-size: .95rem; color: var(--ink); font-weight: 600; }

/* --- Areas -------------------------------------------------------------- */
.area-list { list-style: none; padding: 0; display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.area-list li { margin: 0; }
.area-list a,
.area-list span {
  display: flex; align-items: center; min-height: 48px; gap: .5rem;
  padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: #fff; text-decoration: none; color: var(--navy); font-weight: 600;
}
.area-list a:hover { border-color: var(--blue-mountain); background: var(--sky-wash); }
.area-list .icon { width: 18px; height: 18px; color: var(--blue-ribbon); flex: none; }

/* --- CTA band ----------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; background: var(--navy); }
.cta-band-media { position: absolute; inset: 0; }
.cta-band-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band-media::after { content: ""; position: absolute; inset: 0; background: rgba(0,28,67,.78); }
.cta-band-inner { position: relative; padding-block: var(--s-6); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #D5E3F2; font-size: var(--step-1); }

/* --- Callouts ----------------------------------------------------------- */
.note {
  border-left: 4px solid var(--blue-mountain); background: var(--sky-wash);
  padding: var(--s-3); border-radius: 0 var(--radius) var(--radius) 0;
}
.note p:last-child { margin-bottom: 0; }

/* --- Contact ------------------------------------------------------------ */
.contact-grid { display: grid; gap: var(--s-3); }
@media (min-width: 800px) { .contact-grid { grid-template-columns: 1.1fr .9fr; gap: var(--s-5); } }
.contact-line { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: var(--s-3); }
.contact-line .icon { width: 26px; height: 26px; flex: none; color: var(--blue-ribbon); margin-top: .15rem; }
.contact-line a { font-weight: 700; font-size: var(--step-1); text-decoration: none; }
.contact-line span { display: block; font-size: var(--step--1); color: var(--ink-soft); }

.form-field { margin-bottom: var(--s-3); }
.form-field label { display: block; font-weight: 700; color: var(--navy); margin-bottom: .35rem; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: .7rem .85rem; min-height: 48px;
  border: 1px solid #B9C7D6; border-radius: var(--radius); background: #fff;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field .hint { font-size: var(--step--1); color: var(--ink-soft); margin-top: .3rem; }

/* --- Footer ------------------------------------------------------------- */
/* No margin above the footer. Every page ends with a navy CTA band, and a
   margin here leaves a white slot between two navy blocks. */
.site-footer { background: var(--navy); color: #C3D3E6; padding-block: var(--s-5) var(--s-4); }
.footer-grid { display: grid; gap: var(--s-4); }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-5); } }
.site-footer h2 { font-size: var(--step-1); color: #fff; margin-bottom: var(--s-2); }
.site-footer a { color: #C3D3E6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 32px; }
.footer-brand { display: flex; gap: .75rem; align-items: center; margin-bottom: var(--s-2); }
.footer-brand img { width: 58px; height: 58px; }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: var(--sky-pale); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.16); margin-top: var(--s-4); padding-top: var(--s-3);
  font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  justify-content: space-between;
}

/* --- Sticky mobile call bar -------------------------------------------- */
.callbar { display: none; }

/* --- Utilities ---------------------------------------------------------- */
.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;
}
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.text-center-hero { text-align: left; } /* client dislikes centred body text, hero copy stays left */
.stack > * + * { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mb-0 { margin-bottom: 0; }

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--rule);
    padding: var(--s-2); box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { min-height: 52px; padding: 0 var(--s-2); border-radius: var(--radius); }
  .nav .btn { margin-top: var(--s-1); }
  .header-inner { position: relative; }

  .callbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--navy); border-top: 1px solid rgba(255,255,255,.14);
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
    gap: .5rem;
  }
  .callbar a {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 50px; border-radius: var(--radius);
    font-weight: 800; text-decoration: none; font-size: 1rem;
  }
  .callbar .call { background: var(--meadow); color: #16240A; }
  .callbar .email { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55); }
  body { padding-bottom: 74px; }
}

@media (min-width: 901px) {
  .nav { display: flex !important; }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .site-header, .callbar, .cta-band, .site-footer { display: none; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; }
}