/* ============================================================
   BOSTON BY NABIL — SHARED STYLESHEET
   Editorial ivory / Atlantic-navy / cognac system. A restrained
   palette built for a premium private-tour brand: one dominant
   dark, one warm neutral family, one warm secondary (cognac),
   and a single muted slate accent reserved for the walking-tour
   card. Single source of truth for the design system; page
   <style> blocks should only hold true one-offs (e.g. a hero
   image URL).

   Legacy variable names (--gold/--brick/--harbor) are kept so
   nothing downstream breaks; their VALUES now point into the
   new palette rather than the old brass-gold/red-brick/teal set.
   ============================================================ */

:root {
  --ivory: #F5F1E8;      /* page background — warm stone, not sterile white */
  --paper: #FBF8F2;      /* warm off-white surface, one notch up from ivory */
  --white: #FFFFFF;      /* crisp card / surface background */
  --stone: #EAE2D3;      /* secondary neutral for alternating sections */

  --ink: #26221D;        /* primary text — warm near-black, not cool black */
  --ink-dim: #5C554C;    /* secondary / muted text on light backgrounds */

  --navy: #1B303C;       /* deep Atlantic navy — dark sections, nav, footer */
  --navy-mid: #263F4B;   /* raised surface within a navy section */

  --cream: #F7F1E4;      /* primary text on navy */
  --cream-dim: #C9BEA9;  /* secondary text on navy */

  /* Warm secondary (cognac/walnut) — primary CTA, links, small accent
     text. Aliased through the legacy --gold name. */
  --gold: #A06A4C;       /* cognac — primary buttons, borders, icons */
  --gold-dark: #6B4530;  /* accessible cognac for small text/links on light backgrounds */
  --gold-light: #CE9A6E; /* bright cognac — small TEXT on navy (eyebrow, cite, footer) */
  --gold-hover: #9C6448; /* button/form-submit hover FILL, deepens slightly (white text stays AA on this) */
  --gold-soft: #EDE0D2;  /* pale cognac surface tint */

  /* Food & drink card accent — same cognac family (kept as its own
     token via the legacy --brick name for a touch of independence). */
  --brick: #A06A4C;
  --brick-dark: #6B4530;
  --brick-soft: #EDE0D2;

  /* Driving card accent — refined into the navy family (kept via the
     legacy --harbor name; also drives the interior page-hero band). */
  --harbor: #263F4B;
  --harbor-dark: #1B303C;
  --harbor-soft: #E7EBEA;

  /* Walking card accent — the one restrained extra hue: a muted,
     desaturated slate blue. Used sparingly and only here. */
  --slate: #4C6672;
  --slate-dark: #37505A;
  --slate-soft: #E7E2D9;

  --rule: #DBD0BE;       /* hairline border on light backgrounds */
  --rule-navy: rgba(247, 241, 228, 0.16); /* hairline border on navy backgrounds */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 19px;
  line-height: 1.7;
  overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; }
strong { font-weight: 600; }

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

/* Universal keyboard focus rings. Gold-dark reads clearly on the light
   surfaces (ivory/paper/white/harbor-soft/brick-soft/gold-soft); gold-light
   is used instead wherever the surrounding surface is navy or photographic. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.category-card:focus-within,
.exp-card-media-link:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
}
.section-navy a:focus-visible,
.section-navy button:focus-visible,
.section-navy .btn:focus-visible,
.nav-overlay a:focus-visible,
.brand-moment a:focus-visible,
footer a:focus-visible,
.hero a:focus-visible {
  outline-color: var(--gold-light);
}

/* ── NAV ── */
.site-nav {
  padding: 22px 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 20;
  background: var(--white);
}

.site-nav.nav-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: none;
}

.nav-logo {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.nav-overlay .nav-logo {
  color: var(--cream);
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
}

/* Mobile menu toggle — hidden on desktop, shown only at the mobile breakpoint
   below. Real <button>, native keyboard support, accurate aria-expanded is
   maintained by nav.js. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
}

.nav-links a {
  font-family: 'EB Garamond', serif;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.25s;
}

.nav-overlay .nav-links a {
  color: var(--cream);
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}

.nav-links a:hover { color: var(--gold-dark); }
.nav-overlay .nav-links a:hover { color: var(--gold-light); }

.nav-item-dropdown { position: relative; }
.nav-item-dropdown > a::after { content: "⌄"; font-size: 13px; margin-left: 3px; opacity: 0.7; display: inline-block; }

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 20px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  box-shadow: 0 12px 28px rgba(27,48,60,0.12);
  min-width: 230px;
  padding: 8px 0;
  z-index: 30;
}

/* Transparent bridge spanning the 20px gap between "Experiences" and the menu,
   so the dropdown stays open while the cursor travels down to the options
   instead of closing the instant it leaves the link. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
}

.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
  display: block;
}

.nav-dropdown a {
  display: block;
  padding: 11px 22px;
  font-size: 16.5px;
  color: var(--ink-dim);
  text-shadow: none !important;
}

.nav-dropdown a:hover { color: var(--gold-dark); background: rgba(160,106,76,0.08); }

/* Keep dropdown links dark on the overlay (homepage) nav, where the top-level
   links are light — otherwise they'd inherit near-white and vanish on white. */
.nav-overlay .nav-links .nav-dropdown a { color: var(--ink-dim); }
.nav-overlay .nav-links .nav-dropdown a:hover { color: var(--gold-dark); }

@media (max-width: 860px) {
  .nav-links { gap: 22px; }
}

@media (max-width: 640px) {
  .site-nav { padding: 16px 20px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .nav-logo { font-size: 17px; }

  /* Real button, shown only at this breakpoint; nav.js maintains aria-expanded
     and toggles .is-open. Touch/click driven, not hover. */
  .nav-toggle { display: flex; }

  /* Closed by default; nav.js adds .is-open to reveal it as a full-width
     panel below the logo/toggle row (a 100%-width flex child always wraps
     onto its own line in a wrapping flex row). */
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 2px;
    margin-top: 14px;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { font-size: 16px; padding: 9px 0; }

  /* The three private-tour category links are always visible in the open
     panel (no separate hover/tap step) — this is the actual mobile fix:
     previously `display: none !important` hid them completely. */
  .nav-item-dropdown { position: static; width: 100%; }
  .nav-dropdown {
    display: block;
    position: static;
    margin: 2px 0 6px 14px;
    padding: 0;
    border: none;
    box-shadow: none;
    min-width: 0;
    background: transparent;
  }
  .nav-dropdown::before { display: none; }
  .nav-dropdown a { padding: 8px 0; font-size: 15px; }

  .site-nav.nav-overlay {
    position: static;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
  }
  .nav-overlay .nav-logo,
  .nav-overlay .nav-links a { color: var(--ink-dim); text-shadow: none; }
  .nav-overlay .nav-logo { color: var(--ink); }
  .nav-overlay .nav-toggle-bar { background: var(--ink); }
}

/* ── HERO (single semantic block, responsive by CSS only) ── */
.hero {
  position: relative;
  height: clamp(560px, 82svh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: var(--hero-x, 68%) var(--hero-y, 22%);
  animation: heroZoom 22s ease-out forwards;
}

@keyframes heroZoom {
  from { transform: scale(1.045); }
  to { transform: scale(1.0); }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--navy) 0%, rgba(27,48,60,0.86) 12%, rgba(27,48,60,0.4) 32%, rgba(27,48,60,0.02) 58%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 64px 52px;
}

.hero-content h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4.4vw, 54px);
  font-weight: 400;
  color: var(--cream);
  max-width: 700px;
  line-height: 1.15;
  margin-bottom: 16px;
}

.hero-content p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 1.65vw, 22px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  max-width: 590px;
  line-height: 1.5;
  margin-bottom: 26px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.82);
}

.scroll-cue {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0.6;
  text-decoration: none;
}

@media (max-width: 860px) {
  .hero { height: clamp(480px, 72svh, 620px); }
  .hero-content { padding: 0 28px 40px; }
}

@media (max-width: 640px) {
  .hero-content { padding: 0 22px 32px; }
}

/* ── BUTTONS ── */
.btn {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 34px;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
  border: 1px solid transparent;
  cursor: pointer;
}

/* Universal primary CTA: cognac fill, cream text (verified AA against both
   the resting and hover fill), brighter cognac on hover. */
.btn-primary {
  color: #FFFFFF;
  background: var(--gold);
  border-color: var(--gold);
}
.btn-primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }

.btn-outline-navy {
  color: var(--ink);
  background: transparent;
  border-color: var(--ink);
}
.btn-outline-navy:hover { background: var(--ink); color: var(--white); }

.btn-outline-cream {
  color: var(--cream);
  background: transparent;
  border-color: rgba(247,241,228,0.5);
}
.btn-outline-cream:hover { border-color: var(--gold-light); color: var(--gold-light); }

/* Contextual category buttons — reserved for the driving (harbor/navy),
   food and drink (brick/cognac), and walking (slate) homepage category
   cards. Never used for body text. */
.btn-harbor { color: #FFFFFF; background: var(--harbor); border-color: var(--harbor); }
.btn-harbor:hover { background: var(--harbor-dark); border-color: var(--harbor-dark); }

.btn-brick { color: #FFFFFF; background: var(--brick); border-color: var(--brick); }
.btn-brick:hover { background: var(--brick-dark); border-color: var(--brick-dark); }

.btn-slate { color: #FFFFFF; background: var(--slate); border-color: var(--slate); }
.btn-slate:hover { background: var(--slate-dark); border-color: var(--slate-dark); }

.btn-sm { padding: 10px 20px; font-size: 13px; }

/* ── SECTION BASE ── */
.section { padding: 64px 64px; max-width: 1120px; margin: 0 auto; }
.section-tight { padding: 44px 64px; max-width: 1120px; margin: 0 auto; }

/* Reusable full-bleed section-background utilities. Apply to the outer
   (full-width) wrapper; nest a `.section`/`.section-tight` inside it for the
   centered content column, exactly like `.section-white`/`.section-navy`
   below. Pale tints (harbor/brick/gold) rely on the color shift alone for
   separation and skip a hairline border to stay airy; white/paper are close
   enough to ivory that they keep the border for a clear seam. */
.section-ivory { background: var(--ivory); }
.section-white { background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section-paper { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section-harbor-pale { background: var(--harbor-soft); }
.section-brick-pale { background: var(--brick-soft); }
.section-gold-pale { background: var(--gold-soft); }
.section-navy { background: var(--navy); color: var(--cream); }
.section-navy .section-eyebrow { color: var(--gold-light); }
.section-navy .body-copy { color: var(--cream-dim); }
.section-navy .body-copy strong { color: var(--cream); }

.section-eyebrow {
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 10px;
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(27px, 3.1vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 18px;
}
.section-navy .section-title { color: var(--cream); }
.section-title em { color: var(--gold); font-style: italic; }

.body-copy {
  font-family: 'EB Garamond', serif;
  font-size: 19px;
  color: var(--ink-dim);
  line-height: 1.8;
  margin-bottom: 14px;
  max-width: 640px;
}
.body-copy strong { color: var(--ink); font-weight: 600; }

.lede {
  font-family: 'EB Garamond', serif;
  font-size: 21px;
  color: var(--ink-dim);
  line-height: 1.7;
  max-width: 700px;
  margin-bottom: 10px;
}

@media (max-width: 860px) {
  .section { padding: 44px 28px; }
  .section-tight { padding: 34px 28px; }
}
@media (max-width: 640px) {
  .section { padding: 36px 20px; }
  .section-tight { padding: 28px 20px; }
}

/* ── PAGE HERO BAND (interior pages, no photo) ──
   A subtle full-bleed harbor-blue tint behind the constrained content column,
   achieved with a negative-z-index pseudo-element so no extra markup/wrapper
   is needed on any interior page. A brass rule marks the bottom edge. */
.page-hero {
  position: relative;
  z-index: 0;
  padding: 40px 64px 34px;
  max-width: 1120px;
  margin: 0 auto;
  border-bottom: 2px solid var(--gold);
}
.page-hero::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--harbor-soft);
  z-index: -1;
}
.page-hero .section-title { color: var(--navy); }
.breadcrumb { font-family: 'EB Garamond', serif; font-size: 14.5px; color: var(--ink-dim); margin-bottom: 16px; }
.breadcrumb a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid var(--rule); }
.breadcrumb a:hover { color: var(--gold-dark); border-color: var(--gold-dark); }

@media (max-width: 860px) { .page-hero { padding: 28px 28px 24px; } }
@media (max-width: 640px) { .page-hero { padding: 22px 20px 18px; } }

/* ── SUMMARY BAR (above-the-fold commercial facts) ── */
.summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 22px 0 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.summary-item { font-family: 'EB Garamond', serif; font-size: 16.5px; color: var(--ink-dim); }
.summary-item strong { color: var(--gold-dark); font-weight: 600; }

/* ── EXPERIENCE CARDS (individual tour cards) ──
   Paper-white surface framing the photo/content so cards read as distinct
   objects rather than copy floating on the page. */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 28px;
  margin-bottom: 8px;
}

.exp-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 6px 18px rgba(27,48,60,0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.exp-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(27,48,60,0.15); }

.exp-card-media-link { display: block; text-decoration: none; }

.exp-card-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy-mid);
}
.exp-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.exp-card-media-link:hover .exp-card-photo img { transform: scale(1.035); }

.exp-card-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }

.exp-card-title-link { text-decoration: none; color: inherit; display: block; }

.exp-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 25px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 5px;
  line-height: 1.2;
}
.exp-card-title-link:hover .exp-card-title { color: var(--gold-dark); }

.exp-card-value {
  font-family: 'EB Garamond', serif;
  font-size: 16.5px;
  font-style: italic;
  color: var(--ink-dim);
  margin-bottom: 14px;
  line-height: 1.5;
}

.exp-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  color: var(--gold-dark);
  margin-bottom: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  margin-top: auto;
}

.exp-card-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.exp-card-actions .link-view {
  font-family: 'EB Garamond', serif;
  font-size: 15.5px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.exp-card-actions .link-view:hover { color: var(--gold-dark); border-color: var(--gold-dark); }

.exp-custom-block { text-align: center; padding-top: 44px; margin-top: 44px; border-top: 1px solid var(--rule); }
.exp-custom-block p {
  font-family: 'EB Garamond', serif;
  font-size: 19px;
  font-style: italic;
  color: var(--ink-dim);
  line-height: 1.8;
  margin-bottom: 18px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.exp-custom-block a {
  font-family: 'EB Garamond', serif;
  font-size: 15.5px;
  color: var(--gold-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.exp-custom-block a:hover { border-color: var(--gold-dark); }

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

/* ── CATEGORY CARDS ──
   Base treatment shared by every category-style card (paper surface, refined
   border, soft shadow, gentle hover lift). The three homepage "Choose How
   You Want to Explore Boston" cards add a color modifier on top so each tour
   family reads as distinct while still looking like one coordinated set. */
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
.category-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 1160px;
  margin: 12px auto 0;
}
.section-tour-choices { max-width: 1320px; }
.section-tour-choices > .section-title { text-align: center; margin-bottom: 26px; }
.category-grid--two .category-card-photo { aspect-ratio: 16 / 9; }
.category-grid--two .check-list { gap: 8px; margin: 14px 0 22px; }
.category-grid--two .check-list li { line-height: 1.45; }
.category-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 30px 30px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--rule);
  box-shadow: 0 6px 16px rgba(27,48,60,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.category-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(27,48,60,0.12); }

/* Optional photo for a category card: bled flush to the card's own edges
   via negative margins matching its padding, so cards without a photo
   (e.g. the sub-option cards on /walking-tours) are entirely unaffected. */
.category-card-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy-mid);
  margin: -34px -30px 22px;
}
.category-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.category-card .exp-card-value { margin-top: 8px; }
.category-card .check-list { margin: 18px 0 26px; }
.category-card .btn { margin-top: auto; }
.category-note {
  color: var(--gold-dark);
  font-size: 16px;
  line-height: 1.5;
  margin: -10px 0 22px;
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.note-marker {
  font-family: Georgia, serif;
  font-size: 19px;
  line-height: 1.15;
  flex: 0 0 auto;
}

.category-card--harbor { background: var(--harbor-soft); border-top-color: var(--harbor); }
.category-card--brick { background: var(--brick-soft); border-top-color: var(--brick); }
.category-card--gold { background: var(--slate-soft); border-top-color: var(--slate); }
.category-card--walking { background: var(--slate-soft); border-top-color: var(--slate); }

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

/* ── SITUATIONS GRID (corporate) ── */
.situations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 30px; }
.situation-item { padding-top: 16px; border-top: 1px solid var(--rule-navy); }
.section:not(.section-navy) .situation-item { border-top-color: var(--rule); }
.situation-item h3 { font-family: 'EB Garamond', serif; font-size: 17.5px; font-weight: 600; color: inherit; margin-bottom: 6px; }
.situation-item p { font-family: 'EB Garamond', serif; font-size: 16px; color: var(--ink-dim); line-height: 1.6; }
.section-navy .situation-item p { color: var(--cream-dim); }

@media (max-width: 860px) { .situations-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 640px) { .situations-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ── CHECK LIST ── */
.check-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; max-width: 640px; }
.check-list li { font-family: 'EB Garamond', serif; font-size: 18px; color: var(--ink-dim); line-height: 1.6; padding-left: 22px; position: relative; }
.check-list li::before { content: "•"; position: absolute; left: 0; color: var(--gold-dark); }

/* ── TAG ROW ── */
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tag { font-family: 'EB Garamond', serif; font-size: 15px; color: var(--gold-dark); border: 1px solid var(--rule); padding: 8px 15px; text-decoration: none; }
.tag:hover { border-color: var(--gold-dark); color: var(--gold-dark); background: rgba(160,106,76,0.07); }

/* ── ABOUT ── */
.about-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 72px; align-items: start; }
.about-copy { max-width: 650px; }
.about-copy .body-copy { font-size: 18px; line-height: 1.65; margin-bottom: 19px; }
.about-copy .about-lede { font-size: 20px; line-height: 1.6; color: var(--ink); }
.about-image-wrap { width: 100%; }
.about-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-copy { max-width: none; }
  .about-img { aspect-ratio: 4 / 5; width: 78%; height: auto; margin: 0 auto; }
}

/* ── TESTIMONIALS (editorial redesign) ── */
.featured-review {
  max-width: 900px;
  margin: 0 auto 24px;
  padding: 34px 40px 32px;
  text-align: left;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  box-shadow: 0 8px 22px rgba(27,48,60,0.07);
}
.review-stars {
  color: var(--gold-dark);
  font-family: Georgia, serif;
  font-size: 17px;
  letter-spacing: 0.22em;
  line-height: 1;
  margin-bottom: 18px;
}
.featured-review .quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 18px;
}
.featured-review .source { font-family: 'EB Garamond', serif; font-size: 15.5px; color: var(--gold-dark); }
.featured-review .source .tag-label { color: var(--ink-dim); }

.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: 0 auto; }
.review-item {
  padding: 26px 28px 24px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--rule);
  box-shadow: 0 5px 16px rgba(27,48,60,0.05);
}
.review-item .quote {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--ink-dim);
  margin-bottom: 12px;
}
.review-item .source { font-family: 'EB Garamond', serif; font-size: 14.5px; color: var(--gold-dark); }
.review-item .source .tag-label { color: var(--ink-dim); }

@media (max-width: 860px) {
  .review-grid { grid-template-columns: 1fr; gap: 30px; }
  .featured-review { padding: 28px 26px; }
}

/* compact trust snippet near CTAs */
.trust-note {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  border-left: 2px solid var(--gold);
  padding-left: 16px;
  margin: 20px 0;
  max-width: 480px;
  line-height: 1.5;
}
.section-navy .trust-note { color: var(--cream); }
.trust-note cite { display: block; font-style: normal; font-family: 'EB Garamond', serif; font-size: 14px; color: var(--gold-dark); margin-top: 8px; }
.section-navy .trust-note cite { color: var(--gold-light); }

/* ── FAQ ── */
.faq-list { max-width: 760px; margin-top: 18px; }
.faq-item { border-top: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  cursor: pointer;
  font-family: 'EB Garamond', serif;
  font-size: 19px;
  color: var(--ink);
  padding: 18px 4px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: 'Cinzel', serif; color: var(--gold-dark); font-size: 20px; flex-shrink: 0; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { font-family: 'EB Garamond', serif; font-size: 17px; color: var(--ink-dim); line-height: 1.75; padding: 0 4px 22px; max-width: 660px; }

/* ── MEDIA ── */
.media-block { width: 100%; overflow: hidden; margin-bottom: 6px; }
.media-block img { width: 100%; height: auto; display: block; object-fit: cover; }
.media-caption { font-family: 'EB Garamond', serif; font-style: italic; font-size: 15.5px; color: var(--ink-dim); margin-top: 10px; }

.detail-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ── CONTACT / FORM ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact-sub { font-family: 'EB Garamond', serif; font-size: 19px; color: var(--ink-dim); line-height: 1.75; margin-bottom: 18px; max-width: 460px; }
.pricing-note { font-family: 'EB Garamond', serif; font-size: 15px; color: var(--gold-dark); margin-bottom: 20px; line-height: 1.6; }
.contact-email { font-family: 'EB Garamond', serif; font-size: 15.5px; color: var(--gold-dark); text-decoration: none; border-bottom: 1px solid var(--rule); }
.contact-email:hover { border-color: var(--gold-dark); }

.contact-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-family: 'EB Garamond', serif; font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dark); }
.label-optional { opacity: .7; font-style: italic; text-transform: none; letter-spacing: 0; }
.form-hint { font-family: 'EB Garamond', serif; font-size: 15px; font-style: italic; color: var(--ink-dim); margin-top: -6px; }

.form-field input,
.form-field select,
.form-field textarea {
  background: var(--white);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: 'EB Garamond', serif;
  font-size: 17px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.25s;
  width: 100%;
  -webkit-appearance: none;
  color-scheme: light;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #8F877A; font-style: italic; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--gold); }
.form-field select option { background: var(--white); color: var(--ink); }
.form-field textarea { resize: vertical; min-height: 100px; }

.form-checkbox { display: flex; align-items: center; gap: 8px; }
.form-checkbox input { width: auto; flex-shrink: 0; accent-color: var(--gold); }
.form-checkbox label { font-family: 'EB Garamond', serif; font-size: 16px; color: var(--ink-dim); letter-spacing: 0; text-transform: none; }

.form-submit {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--gold);
  border: none;
  padding: 15px 34px;
  cursor: pointer;
  transition: background 0.25s;
  align-self: flex-start;
  margin-top: 4px;
}
.form-submit:hover { background: var(--gold-hover); }
.form-note { font-family: 'EB Garamond', serif; font-size: 15px; font-style: italic; color: var(--ink-dim); margin-top: 8px; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .form-row { grid-template-columns: 1fr; }
  .form-submit { width: 100%; text-align: center; }
}

/* ── STICKY MOBILE CTA ── */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  background: var(--navy);
  padding: 13px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 -4px 18px rgba(27,48,60,0.2);
  overflow: hidden;
}
.sticky-cta .sticky-price { font-family: 'EB Garamond', serif; font-size: 15px; color: var(--cream); min-width: 0; flex: 1 1 auto; }
.sticky-cta .sticky-price strong { color: var(--gold-light); }
.sticky-cta .btn { padding: 10px 18px; font-size: 13px; white-space: nowrap; flex: 0 0 auto; }

@media (max-width: 400px) {
  .sticky-cta { padding: 12px 14px; gap: 8px; }
  .sticky-cta .sticky-price { font-size: 13.5px; }
  .sticky-cta .btn { padding: 9px 14px; font-size: 12px; }
}

@media (max-width: 640px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 64px; }
}

/* ── COMPACT AVAILABILITY CALENDAR PREVIEW ──
   The hidden card and two-column hero activate only when
   availability-calendar.js confirms ?calendar_preview=1. */
.tour-hero-layout { display: contents; }

.calendar-preview-active .tour-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 400px);
  gap: 44px;
  align-items: start;
}
.calendar-preview-active [data-calendar-fallback-cta] { display: none; }

.availability-card {
  width: 100%;
  padding: 24px;
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: 0 12px 30px rgba(27, 48, 60, 0.12);
  color: var(--ink);
}
.availability-eyebrow {
  margin-bottom: 5px;
  color: var(--gold-dark);
  font-family: 'EB Garamond', serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.availability-card h2 {
  color: var(--navy);
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
}
.availability-intro {
  margin-top: 7px;
  color: var(--ink-dim);
  font-size: 15.5px;
  line-height: 1.45;
}
.availability-month-nav {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--rule);
}
.availability-month-nav p {
  color: var(--ink);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.availability-month-nav button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--gold-dark);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.availability-month-nav button:hover:not(:disabled) {
  border-color: var(--gold);
  background: var(--gold-soft);
}
.availability-month-nav button:disabled {
  cursor: not-allowed;
  color: #A39B90;
  background: var(--ivory);
}
.availability-weekdays,
.availability-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.availability-weekdays { margin: 14px 0 5px; }
.availability-weekdays span {
  color: var(--ink-dim);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.availability-day,
.availability-day-spacer {
  min-width: 0;
  min-height: 42px;
}
.availability-day {
  position: relative;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font-family: 'EB Garamond', serif;
  font-size: 16px;
  cursor: pointer;
}
.availability-day:not(:disabled) {
  border-color: var(--rule);
  background: var(--white);
  font-weight: 600;
}
.availability-day:not(:disabled)::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--gold);
}
.availability-day:not(:disabled):hover { border-color: var(--gold); background: var(--gold-soft); }
.availability-day:disabled { color: #AAA398; cursor: not-allowed; }
.availability-day.is-selected {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--cream);
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.availability-day.is-selected::after { background: var(--cream); }

.availability-status {
  min-height: 21px;
  margin-top: 10px;
  color: var(--ink-dim);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.45;
}
.availability-status.is-loading::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border: 1px solid var(--gold);
  border-top-color: transparent;
  border-radius: 50%;
  animation: availability-spin 0.8s linear infinite;
}
.availability-status.is-error { color: var(--gold-dark); font-style: normal; }
@keyframes availability-spin { to { transform: rotate(360deg); } }

.availability-times-section {
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px solid var(--rule);
}
.availability-times-section h3 {
  color: var(--navy);
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  outline: none;
}
.availability-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}
.availability-time {
  min-height: 40px;
  padding: 7px 5px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink);
  font-family: 'EB Garamond', serif;
  font-size: 14.5px;
  cursor: pointer;
}
.availability-time:hover { border-color: var(--gold); background: var(--gold-soft); }
.availability-time.is-selected {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--cream);
}
.availability-time.is-selected::after { content: ' ✓'; }

.availability-action {
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid var(--rule);
}
.availability-action > strong {
  display: block;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.35;
}
.availability-action > p {
  margin-top: 5px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.45;
}
.availability-action.is-request {
  margin-left: -8px;
  padding-left: 12px;
  border-left: 4px solid var(--gold);
}
.availability-action.is-request > strong { color: var(--gold-dark); }
.availability-action .btn {
  width: 100%;
  margin-top: 13px;
  padding: 12px 16px;
  font-size: 12px;
}
.availability-action .availability-prototype-status {
  min-height: 0;
  margin-top: 9px;
  color: var(--gold-dark);
  font-style: italic;
}

@media (max-width: 860px) {
  .calendar-preview-active .tour-hero-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .calendar-preview-active .availability-card { max-width: 440px; }
}

@media (max-width: 640px) {
  .calendar-preview-active { padding-bottom: 0; }
  .calendar-preview-active .sticky-cta { display: none; }
  .calendar-preview-active .availability-card {
    max-width: none;
    padding: 18px 12px;
  }
  .availability-weekdays,
  .availability-calendar-grid { gap: 2px; }
  .availability-day,
  .availability-day-spacer { min-height: 40px; }
}

@media (max-width: 380px) {
  .availability-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .availability-status.is-loading::before { animation: none; }
}

/* ── BOOKING INTERFACE PREVIEW ──
   Inactive unless booking.js is opened with ?booking_preview=1. The existing
   availability CTA remains the no-JS and production fallback. */
.booking-host--preview {
  padding-top: 0;
  padding-bottom: 0;
  text-align: left !important;
}

.booking-preview { max-width: 1120px; margin: 0 auto; padding: 56px 0 64px; }
.booking-preview-banner {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
  padding: 10px 14px;
  border: 1px solid rgba(247, 241, 228, 0.24);
  background: rgba(247, 241, 228, 0.07);
  color: var(--cream-dim);
  font-size: 15px;
}
.booking-preview-banner strong {
  color: var(--gold-light);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.booking-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.booking-intro .section-title { color: var(--cream); }
.booking-intro .body-copy { color: var(--cream-dim); }
.booking-facts { list-style: none; margin-top: 28px; border-top: 1px solid var(--rule-navy); }
.booking-facts li { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--rule-navy); }
.booking-facts strong { color: var(--cream); font-size: 17px; }
.booking-facts span { color: var(--cream-dim); font-size: 15px; text-align: right; }

.bookeo-widget-shell {
  width: 100%;
  margin-top: 28px;
  padding: clamp(16px, 3vw, 34px);
  border: 1px solid rgba(247, 241, 228, 0.28);
  background: var(--paper);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
  color: var(--ink);
  text-align: left;
}

.booking-card { background: var(--paper); color: var(--ink); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2); }
.booking-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  border-bottom: 1px solid var(--rule);
  background: var(--white);
}
.booking-steps li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 10px;
  color: var(--ink-dim);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.booking-steps li span {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  letter-spacing: 0;
}
.booking-steps li.is-active { color: var(--gold-dark); }
.booking-steps li.is-active span { border-color: var(--gold); background: var(--gold); color: #FFFFFF; }
.booking-steps li.is-complete { color: var(--ink); }
.booking-steps li.is-complete span { border-color: var(--gold-dark); }

.booking-pane { padding: 32px; }
.booking-pane h3 {
  color: var(--ink);
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  outline: none;
}
.booking-help { margin: 7px 0 24px; color: var(--ink-dim); font-size: 15px; font-style: italic; }
.booking-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.booking-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.booking-field label {
  color: var(--gold-dark);
  font-family: 'EB Garamond', serif;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.booking-field input,
.booking-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'EB Garamond', serif;
  font-size: 17px;
  color-scheme: light;
}
.booking-field input:focus,
.booking-field select:focus { border-color: var(--gold); outline: 2px solid rgba(160, 106, 76, 0.2); outline-offset: 1px; }
.booking-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 8px; }
.booking-primary,
.booking-secondary {
  border: 1px solid var(--gold);
  padding: 12px 22px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
}
.booking-primary { margin-left: auto; background: var(--gold); color: #FFFFFF; }
.booking-primary:hover:not(:disabled) { background: var(--gold-hover); border-color: var(--gold-hover); }
.booking-primary:disabled { cursor: not-allowed; opacity: 0.55; }
.booking-secondary { background: transparent; color: var(--gold-dark); }
.booking-secondary:hover { background: var(--gold-soft); }

.booking-review { margin: 20px 0; border-top: 1px solid var(--rule); }
.booking-review div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.booking-review dt { color: var(--ink-dim); font-size: 15px; }
.booking-review dd { color: var(--ink); font-size: 16px; text-align: right; }
.booking-payment-placeholder { padding: 16px; border: 1px dashed var(--rule); background: var(--white); }
.booking-payment-placeholder strong,
.booking-payment-placeholder span { display: block; }
.booking-payment-placeholder strong { color: var(--ink); font-size: 16px; }
.booking-payment-placeholder span { color: var(--ink-dim); font-size: 14px; margin-top: 3px; }
.booking-fallback-link { display: inline-block; margin-top: 20px; color: var(--gold-dark); font-size: 15px; }

@media (max-width: 860px) {
  .booking-layout { grid-template-columns: 1fr; gap: 30px; }
  .booking-preview { padding: 44px 0 52px; }
}

@media (max-width: 640px) {
  .booking-preview-banner { flex-direction: column; gap: 2px; }
  .bookeo-widget-shell { padding: 10px; }
  .booking-field-row { grid-template-columns: 1fr; gap: 0; }
  .booking-pane { padding: 24px 20px; }
  .booking-steps li { flex-direction: column; gap: 4px; padding: 12px 4px; font-size: 9.5px; }
  .booking-actions { align-items: stretch; }
  .booking-primary,
  .booking-secondary { flex: 1; padding-left: 12px; padding-right: 12px; }
}

/* ── BOSTON REVEALED BRAND MOMENT ── */
.brand-moment { padding: 64px 64px; background: var(--navy); color: var(--cream); }
.brand-moment-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1fr; gap: 52px; align-items: center; }
.brand-moment-art { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; align-self: center; display: block; }
.brand-moment-text { text-align: left; }
.brand-moment-text p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
  line-height: 1.55;
  margin-bottom: 22px;
}
@media (max-width: 860px) {
  .brand-moment { padding: 48px 28px; }
  .brand-moment-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .brand-moment-art { max-width: 260px; margin: 0 auto; }
  .brand-moment-text { text-align: center; }
}

/* ── FOOTER ── */
footer { padding: 26px 64px; background: var(--navy); color: var(--cream-dim); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-logo { font-family: 'Cinzel', serif; font-size: 13.5px; letter-spacing: 0.16em; color: var(--gold-light); text-transform: uppercase; }
.footer-copy { font-family: 'EB Garamond', serif; font-size: 15px; color: var(--cream-dim); font-style: italic; }
.footer-links { display: flex; gap: 20px; list-style: none; }
.footer-links a { font-family: 'EB Garamond', serif; font-size: 15px; color: var(--cream-dim); text-decoration: none; }
.footer-links a:hover { color: var(--gold-light); }

@media (max-width: 640px) {
  footer { flex-direction: column; text-align: center; padding: 24px 20px; }
}