/* ==========================================================
   Eddy's Market — Stylesheet (v22, sign-red restyle)
   Palette: sign red #E4002B · cream #F7F2E8 · warm ink #2A1712
   Type: Playfair Display (serif) + Inter (sans)
   ========================================================== */

:root {
  /* Brand tokens — do not substitute */
  --red:    #E4002B;
  --cream:  #F7F2E8;
  --cream2: #FBF8F1;
  --ink:    #2A1712;
  --gold:   #E7B24E;

  /* Derived neutrals */
  --white: #FFFFFF;
  --muted: #6B5A52;
  --line: rgba(42, 23, 18, 0.12);
  --line-soft: rgba(42, 23, 18, 0.07);

  /* Shadows — warm, red-tinted on hover */
  --shadow-xs: 0 1px 2px rgba(42, 23, 18, 0.06);
  --shadow-sm: 0 2px 10px rgba(42, 23, 18, 0.07);
  --shadow-md: 0 14px 34px -18px rgba(42, 23, 18, 0.28);
  --shadow-lg: 0 28px 56px -24px rgba(42, 23, 18, 0.36);
  --shadow-red: 0 16px 34px -16px rgba(228, 0, 43, 0.30);

  /* Type */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --radius: 14px;
  --radius-lg: 20px;

  --maxw: 1180px;
  --pad: clamp(1rem, 3vw, 2rem);
  --header-h: 96px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}
img, svg, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

::selection { background: var(--red); color: var(--cream); }

/* In-page anchor targets land below the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---- Shared section formula: eyebrow → H2 → lede → grid ---- */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.9rem;
}
.eyebrow.light { color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  letter-spacing: -0.015em;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.75rem;
  font-feature-settings: "kern", "liga", "lnum";
  font-variant-numeric: lining-nums;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1rem; color: var(--ink); }
em { font-style: italic; }

.section-head {
  max-width: 640px;
  margin: 0 auto 2.75rem;
  text-align: center;
}
.section-head.center { text-align: center; }
.section-head h2 { margin: 0 0 0.6rem; }
.section-lede, .section-head > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1.02rem;
  margin: 0;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--red);
  font-weight: 600;
  border-bottom: 1.5px solid var(--red);
  padding-bottom: 2px;
  transition: transform .2s var(--ease-out), opacity .2s;
}
.link-arrow:hover { transform: translateX(2px); opacity: 0.82; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.45rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.98rem;
  border-radius: 999px;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .2s, color .2s, border-color .2s;
  line-height: 1;
  white-space: nowrap;
}
.btn-primary {
  background: var(--red);
  color: var(--white);
  box-shadow: var(--shadow-red);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -18px rgba(228, 0, 43, 0.5); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream);
  border: 1.5px solid rgba(247, 242, 232, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn-light { background: var(--cream); color: var(--red); }
.btn-light:hover { background: var(--white); transform: translateY(-2px); }

/* ============ 1 · HEADER — sign-red banner, brand left, nav + controls right ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--red);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s var(--ease-out), border-color .25s;
}
.site-header.scrolled {
  box-shadow: 0 8px 28px -12px rgba(42, 23, 18, 0.45);
  border-bottom-color: rgba(42, 23, 18, 0.18);
}
.header-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  /* -1px: the header's bottom hairline counts toward the total height */
  min-height: calc(var(--header-h) - 1px);
}

/* Brand: the bridge-badge logo, far left — inverted to white on the red bar.
   Uses logo-mark.svg (the tight crop of logo-full.svg: viewBox trimmed to the
   artwork, no built-in transparent padding), so the rendered box IS the visible
   badge. 84px sits inside the 96px bar with 6px breathing top and bottom.
   Explicit width AND height so Safari never guesses the size. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.brand-logo {
  display: block;
  height: 84px;
  width: 86px;
  filter: brightness(0) invert(1);
}

.site-nav { margin-left: auto; }
.header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.header-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Same footprint as the phone button beside it (pill ≈43px tall on desktop) */
.header-ig svg { display: block; width: 42px; height: 42px; }
.site-nav ul {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  font-weight: 500;
  font-size: 0.93rem;
  color: var(--cream);
  position: relative;
  padding: 0.4rem 0;
  white-space: nowrap;
  transition: color .2s;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.site-nav a:hover { color: var(--white); }
.site-nav a:hover::after { transform: scaleX(1); }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--red);
  background: var(--cream);
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--cream);
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
  font-variant-numeric: tabular-nums;
}
.header-phone:hover { background: var(--white); border-color: var(--white); color: var(--red); }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 8px;
  flex-direction: column;
  justify-content: space-between;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ============ 2 · HERO — sharp, full colour, top-anchored crop ============ */
.hero {
  position: relative;
  min-height: 88vh;
  height: 540px;
  max-height: 640px;
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--ink);
  background-image: url('../images/storefront.jpg?v=3');
  background-size: cover;
  /* Signage runs along the TOP of the photo — anchor to top so it is never clipped. */
  background-position: center top;
  background-repeat: no-repeat;
}
/* Left-anchored readability scrim — right ~35% of the photo stays clear */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(20, 10, 10, 0.82) 0%,
    rgba(20, 10, 10, 0.55) 40%,
    rgba(20, 10, 10, 0) 65%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
/* Keep the text column inside the scrimmed zone */
.hero-inner > * { max-width: 560px; }
.hero-title {
  color: var(--cream);
  margin: 0 0 1.15rem;
  font-weight: 700;
  font-size: clamp(2.5rem, 4.6vw, 3.875rem);
  line-height: 1.04;
  max-width: 15ch;
  text-shadow: 0 2px 18px rgba(26, 14, 12, 0.45);
}
.hero-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}
.hero-sub {
  font-size: clamp(1rem, 1.3vw, 1.13rem);
  color: rgba(247, 242, 232, 0.94);
  max-width: 40ch;
  margin: 0 0 1.9rem;
  line-height: 1.6;
  text-shadow: 0 1px 12px rgba(26, 14, 12, 0.5);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.6rem;
  justify-content: flex-start;
}
.hero-meta {
  color: rgba(247, 242, 232, 0.9);
  font-size: 0.93rem;
  margin: 0 0 1.5rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 10px rgba(26, 14, 12, 0.55);
}
.hero-meta-accent { color: var(--gold); font-weight: 600; }

.hero-badges {
  list-style: none;
  margin: 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(247, 242, 232, 0.28);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  justify-content: flex-start;
  align-items: center;
  max-width: 46ch;
}
.hero-badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(247, 242, 232, 0.92);
  font-size: 0.88rem;
  line-height: 1.25;
  text-shadow: 0 1px 10px rgba(26, 14, 12, 0.55);
}
.hero-badges strong { color: var(--cream); font-weight: 600; }
.hero-badges .badge-star { color: var(--gold); font-size: 1.05rem; line-height: 1; }
.hero-badges .badge-glyph { font-size: 1rem; line-height: 1; }

/* ============ 3 · INSTAGRAM STRIP ============ */
.ig-strip {
  padding: clamp(3.5rem, 6vw, 5rem) 0;
  background: var(--cream2);
  border-bottom: 1px solid var(--line-soft);
}
.ig-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.25rem;
}
.ig-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 0.6rem; }
.ig-head h2 a {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.ig-head h2 a:hover { opacity: 0.82; }
.ig-sub { color: var(--muted); font-size: 1rem; margin: 0; }

.ig-track {
  list-style: none;
  margin: 0;
  /* Vertical room for the active card's scale-up */
  padding: 1.5rem clamp(1rem, 3vw, 2rem);
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(1rem, 3vw, 2rem);
  scrollbar-width: thin;
  scrollbar-color: var(--red) transparent;
  -webkit-overflow-scrolling: touch;
}
.ig-track::-webkit-scrollbar { height: 8px; }
.ig-track::-webkit-scrollbar-thumb { background: var(--red); border-radius: 4px; }

/* Card treatment (shared formula) */
.ig-card {
  flex: 0 0 clamp(220px, 24vw, 280px);
  scroll-snap-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ig-card:hover,
.ig-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-red);
  border-color: rgba(228, 0, 43, 0.28);
}
/* ---- Looping "center stage" carousel (JS adds .is-carousel when active) ---- */
.ig-viewport {
  overflow: hidden;
  touch-action: pan-y;
}
.ig-track.is-carousel {
  overflow: visible;
  width: max-content;
  scroll-snap-type: none;
  position: relative;
  cursor: grab;
  will-change: transform;
}
.ig-track.is-carousel:active { cursor: grabbing; }
/* Everything off-centre is greyed out and at rest */
.ig-track.is-carousel .ig-card {
  filter: grayscale(1);
  opacity: 0.55;
  transform: none;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease,
              filter .35s ease, opacity .35s ease;
}
/* The card in the centre gets full colour, scale, and the brand-red ring */
.ig-track.is-carousel .ig-card.is-active {
  filter: none;
  opacity: 1;
  transform: scale(1.08);
  box-shadow: 0 22px 44px -16px rgba(228, 0, 43, 0.45);
  outline: 2px solid var(--red);
  outline-offset: 0;
  border-color: rgba(228, 0, 43, 0.28);
}
.ig-card a { display: flex; flex-direction: column; height: 100%; color: var(--ink); }
.ig-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.ig-card .ig-caption {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  padding: 0.85rem 0.95rem 1rem;
}

/* ============ 4 · TRUST STRIP ============ */
.trust {
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}
.trust-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2.5rem;
  align-items: center;
  padding: 2rem 0;
}
.trust-rating { display: flex; align-items: center; gap: 0.9rem; }
.trust-rating-text { display: flex; flex-direction: column; line-height: 1.2; }
.trust-rating-text strong {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
.trust-rating-text span { font-size: 0.85rem; color: var(--muted); }

.stars { display: inline-flex; gap: 2px; color: var(--gold); font-size: 1.1rem; letter-spacing: 1px; }
.stars.big { font-size: 1.6rem; gap: 4px; align-items: center; }
.stars.big em {
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--muted);
  margin-left: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.stars .half {
  background: linear-gradient(90deg, var(--gold) 50%, rgba(231, 178, 78, 0.28) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stars .dim { color: rgba(231, 178, 78, 0.28); }

.trust-quote { margin: 0; padding: 0 1.5rem; border-left: 3px solid var(--red); }
.trust-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 0.3rem;
}
.trust-quote cite { font-style: normal; font-size: 0.85rem; color: var(--muted); }

.trust-flag { max-width: 280px; }
.pill {
  display: inline-block;
  padding: 0.32rem 0.75rem;
  background: var(--red);
  color: var(--white);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
.trust-flag p { font-size: 0.9rem; color: var(--muted); margin: 0; }

/* ============ 5 · ABOUT ============ */
.about { padding: clamp(4rem, 8vw, 6.5rem) 0; background: var(--cream2); }
.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.about-copy p:not(.eyebrow) { font-size: 1.05rem; max-width: 54ch; color: var(--muted); }
.about-stats {
  display: grid;
  gap: 1rem;
  background: var(--white);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}
.stat {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--line);
}
.stat:last-child { border-bottom: 0; padding-bottom: 0; }
.stat-num {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--red);
  line-height: 1;
  margin-bottom: 0.35rem;
  font-variant-numeric: lining-nums;
}
.stat-label { font-size: 0.9rem; color: var(--muted); letter-spacing: 0.02em; }

/* ============ 6 · INSIDE — interior photo cards ============ */
.interior {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background: var(--cream);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.interior-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.5rem;
}
.interior-head h2 { margin: 0 0 0.6rem; }
.interior-head p:not(.eyebrow) { color: var(--muted); font-size: 1.02rem; margin: 0; }

.interior-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.1rem;
}
.interior-grid li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s;
}
.interior-grid li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-red);
  border-color: rgba(228, 0, 43, 0.28);
}
.interior-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* ============ 7 · SHOP ============ */
.shop {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background: var(--cream2);
  border-bottom: 1px solid var(--line-soft);
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.15rem;
}
.card {
  padding: 1.9rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-red);
  border-color: rgba(228, 0, 43, 0.28);
}
.card-icon {
  font-size: 1.75rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 1.1rem;
}
.card h3 { margin-bottom: 0.45rem; font-size: 1.12rem; }
.card p { color: var(--muted); font-size: 0.93rem; margin: 0; }

/* ============ 8 · REVIEWS ============ */
.reviews { padding: clamp(4rem, 8vw, 6.5rem) 0; background: var(--cream); }
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.15rem;
}
.review {
  margin: 0;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow-red); }
.review blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}
.review figcaption {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: auto;
  font-weight: 500;
}
.review figcaption span { color: var(--red); font-weight: 600; }

/* ============ 9 · COMMUNITY ============ */
.community {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  position: relative;
  overflow: hidden;
}
.community::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 82% 18%, rgba(228, 0, 43, 0.20), transparent 52%);
  pointer-events: none;
}
.community-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
}
.community-copy h2 { color: var(--cream); }
.community-copy p { color: rgba(247, 242, 232, 0.82); font-size: 1.02rem; max-width: 46ch; }
.community-art { text-align: center; }
/* logo-full.svg renders fine at this size — left as-is */
.community-logo {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto 1.25rem;
  filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0, 0, 0, .35));
}
.art-caption {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: rgba(247, 242, 232, 0.72);
  margin-top: 1rem;
}
.art-caption em { color: var(--gold); font-weight: 500; }

/* ============ 10 · VISIT ============ */
.visit { padding: clamp(4rem, 8vw, 6.5rem) 0; background: var(--cream2); }
.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.info-block { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.info-block:first-of-type { border-top: 0; padding-top: 0.5rem; }
.info-block h3 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.info-block p { margin: 0 0 0.4rem; color: var(--ink); }
.info-block a { color: var(--red); font-weight: 500; }
.info-block a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Instagram icon + handle links (Visit section + footer) */
.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.ig-link svg { flex: none; }
.big-phone {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--red) !important;
  letter-spacing: -0.015em;
  display: inline-block;
  margin-top: 0.25rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.hours { list-style: none; padding: 0; margin: 0; }
.hours li {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.97rem;
  font-variant-numeric: tabular-nums;
}
.hours li:last-child { border-bottom: 0; }
.hours li span { color: var(--muted); }
.hours li strong { color: var(--ink); font-weight: 600; }

.visit-map {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.visit-map iframe { width: 100%; height: 100%; border: 0; }

/* ============ 11 · FOOTER ============ */
.site-footer {
  background: var(--ink);
  color: rgba(247, 242, 232, 0.78);
  padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(247, 242, 232, 0.12);
}
.footer-col h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.75rem;
  font-weight: 600;
}
.footer-col p, .footer-col a {
  font-size: 0.92rem;
  color: rgba(247, 242, 232, 0.78);
  line-height: 1.7;
}
.footer-col a:hover { color: var(--white); }
.footer-bottom { padding-top: 1.5rem; color: rgba(247, 242, 232, 0.52); font-size: 0.82rem; text-align: center; }

/* ============ STICKY CALL BAR (MOBILE) ============ */
.sticky-call {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.2rem;
  background: var(--red);
  color: var(--white);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 14px 30px -12px rgba(228, 0, 43, 0.65);
  z-index: 60;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
  .trust-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .trust-quote { padding-left: 1rem; }
  .about-grid { grid-template-columns: 1fr; }
  .community-inner { grid-template-columns: 1fr; }
  .community-art { order: -1; }
  .visit-grid { grid-template-columns: 1fr; }
  .visit-map { position: static; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}

/* Below ~900px the full nav row can't fit beside the brand —
   collapse to: logo left · Instagram icon · phone icon · hamburger right. */
@media (max-width: 900px) {
  .site-nav { display: none; margin-left: 0; }
  .header-inner { gap: 0.5rem; row-gap: 0; }
  .header-phone span { display: none; }
  .header-phone { padding: 0.55rem; }
  /* Phone collapses to a ~38px circle here — keep the IG icon matched */
  .header-ig svg { width: 38px; height: 38px; }
  .header-controls { margin-left: auto; }
  .nav-toggle { display: flex; }

  /* Nav panel wraps onto its own full-width row below the bar. */
  .site-nav.open {
    display: block;
    order: 2;
    flex: 0 0 100%;
    border-top: 1px solid rgba(247, 242, 232, 0.35);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: 0;
  }
  .site-nav.open ul { flex-direction: column; gap: 0; align-items: stretch; }
  .site-nav.open li { border-bottom: 1px dashed rgba(247, 242, 232, 0.3); }
  .site-nav.open li:last-child { border-bottom: 0; }
  .site-nav.open a { display: block; padding: 0.8rem 0; font-size: 1.02rem; }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }
  /* Mobile: same contained badge, smaller box */
  .brand-logo { height: 44px; width: 45px; }

  /* Sticky call bar clearance: bar height + 16px so content never hides behind it */
  body { padding-bottom: 84px; }

  .hero { height: 440px; min-height: 440px; max-height: none; }
  /* Narrower viewport crops the sides — keep the centre signage in frame */
  .hero-media { background-position: 42% top; }
  /* No room to spare the right side on mobile — strong scrim behind the text block */
  .hero-overlay {
    background: linear-gradient(180deg,
      rgba(20, 10, 10, 0.60) 0%,
      rgba(20, 10, 10, 0.85) 25%,
      rgba(20, 10, 10, 0.85) 100%);
  }
  .hero-title { font-size: 2.35rem; line-height: 1.08; max-width: none; }
  /* Physical gap between the two headline lines so italic descenders never touch */
  .hero-title em { display: inline-block; margin-top: 0.18em; }
  .hero-sub { margin-bottom: 1.5rem; font-size: 1rem; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-badges { display: none; }
  .hero-meta { margin-bottom: 0; }

  .sticky-call { display: inline-flex; }
  .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .hero-title { font-size: 2.15rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus styles */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 999px;
}