/* ==========================================================================
   CKJFoods — Cardiff Korean and Japanese Foods
   Shared stylesheet. Mobile-first, no build step, no framework.
   Palette derived from the shop logo (navy + red) on a warm cream ground.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Karla:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Noto+Sans+KR:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');

/* ---------- Design tokens ---------- */
:root {
  /* Brand colours, sampled from the CKJFoods logo */
  --color-navy: #0B1F3D;
  --color-navy-dark: #071429;
  --color-navy-tint: #E7EAF1;
  --color-red: #C81E1E;
  --color-red-dark: #9E1717;
  --color-red-tint: #FBE6E6;

  /* Warm neutral ground — avoids a cold/corporate white */
  --color-bg: #FBF6EC;
  --color-bg-alt: #F3E9D6;
  --color-surface: #FFFFFF;
  --color-border: #E6D9BF;

  /* Text */
  --color-text: #201C14;
  --color-text-muted: #5B5548;
  --color-text-on-navy: #F7F3E9;
  --color-text-on-red: #FFFFFF;

  /* Semantic aliases */
  --color-primary: var(--color-navy);
  --color-primary-dark: var(--color-navy-dark);
  --color-accent: var(--color-red);
  --color-accent-dark: var(--color-red-dark);

  /* Typography */
  --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Karla', 'Segoe UI', system-ui, sans-serif;

  /* Spacing scale (roomy — marketing/informational site, not a dashboard) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(11, 31, 61, 0.08);
  --shadow-md: 0 6px 20px rgba(11, 31, 61, 0.12);
  --shadow-lg: 0 12px 32px rgba(11, 31, 61, 0.16);

  --container-width: 1160px;
  --transition: 200ms ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

img { max-width: 100%; display: block; }

/* Non-Latin pages: Poppins/Karla have no Hangul/Kana/Han glyphs, so swap in
   the matching Noto Sans variant explicitly rather than relying on a silent
   fallback to whatever CJK font the OS happens to pick. */
html[lang="ko"] body { font-family: 'Noto Sans KR', 'Malgun Gothic', var(--font-body); }
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3, html[lang="ko"] h4,
html[lang="ko"] .btn, html[lang="ko"] .eyebrow, html[lang="ko"] .hero-eyebrow,
html[lang="ko"] .status-badge, html[lang="ko"] .form-field label, html[lang="ko"] .quick-item h3 {
  font-family: 'Noto Sans KR', 'Malgun Gothic', var(--font-heading);
}
html[lang="ja"] body { font-family: 'Noto Sans JP', 'Hiragino Sans', var(--font-body); }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] h4,
html[lang="ja"] .btn, html[lang="ja"] .eyebrow, html[lang="ja"] .hero-eyebrow,
html[lang="ja"] .status-badge, html[lang="ja"] .form-field label, html[lang="ja"] .quick-item h3 {
  font-family: 'Noto Sans JP', 'Hiragino Sans', var(--font-heading);
}
html[lang="zh-Hans"] body { font-family: 'Noto Sans SC', 'PingFang SC', var(--font-body); }
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3, html[lang="zh-Hans"] h4,
html[lang="zh-Hans"] .btn, html[lang="zh-Hans"] .eyebrow, html[lang="zh-Hans"] .hero-eyebrow,
html[lang="zh-Hans"] .status-badge, html[lang="zh-Hans"] .form-field label, html[lang="zh-Hans"] .quick-item h3 {
  font-family: 'Noto Sans SC', 'PingFang SC', var(--font-heading);
}
html[lang="zh-Hant"] body { font-family: 'Noto Sans TC', 'PingFang TC', var(--font-body); }
html[lang="zh-Hant"] h1, html[lang="zh-Hant"] h2, html[lang="zh-Hant"] h3, html[lang="zh-Hant"] h4,
html[lang="zh-Hant"] .btn, html[lang="zh-Hant"] .eyebrow, html[lang="zh-Hant"] .hero-eyebrow,
html[lang="zh-Hant"] .status-badge, html[lang="zh-Hant"] .form-field label, html[lang="zh-Hant"] .quick-item h3 {
  font-family: 'Noto Sans TC', 'PingFang TC', var(--font-heading);
}

h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; margin: 0 0 var(--space-4); color: var(--color-navy); }
h1 { font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 1.4rem + 1vw, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem); font-weight: 700; }
.heading-compact { font-size: 1.25rem; margin-bottom: var(--space-3); }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25em; }
a { color: var(--color-red); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--color-red-dark); }

/* Visible focus ring everywhere — keyboard nav must stay legible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-red);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--color-navy);
  color: var(--color-text-on-navy);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--color-red);
  color: var(--color-text-on-red);
}
.btn-primary:hover { background: var(--color-red-dark); color: #fff; }

.btn-secondary {
  background: var(--color-navy);
  color: var(--color-text-on-navy);
}
.btn-secondary:hover { background: var(--color-navy-dark); color: var(--color-text-on-navy); }

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

.btn-outline-light {
  background: transparent;
  border-color: rgba(247, 243, 233, 0.7);
  color: var(--color-text-on-navy);
}
.btn-outline-light:hover { background: rgba(247, 243, 233, 0.12); border-color: #fff; }

/* ---------- Site header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  min-height: 44px;
  /* Never let the flex row squeeze the logo — img { max-width: 100% } combined
     with a fixed height would otherwise distort its aspect ratio under space
     pressure, and that pressure differs by language (e.g. "한국어" vs "EN" in
     .lang-switch take different widths), making the logo look a different
     size/shape depending on which language is active. */
  flex-shrink: 0;
}
.brand img {
  height: 56px;
  width: auto;
}
.brand:hover { opacity: 0.9; }

@media (min-width: 800px) {
  .brand img { height: 80px; }
}

/* Language switcher: a <details>/<summary> disclosure so it works with no
   JS (tap/click the summary to reveal the other languages) — main.js adds
   a small enhancement to also close it on outside click / Escape. */
.lang-switch {
  position: relative;
}
.lang-switch > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 40px;
  padding: 0.4em 0.6em;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition);
}
.lang-switch > summary::-webkit-details-marker,
.lang-switch > summary::marker { display: none; content: ""; }
.lang-switch > summary:hover,
.lang-switch > summary:focus-visible { color: var(--color-red); }
.lang-switch .lang-chevron {
  width: 11px;
  height: 11px;
  transition: transform var(--transition);
}
.lang-switch[open] .lang-chevron { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 110;
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  min-width: 168px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.lang-menu li + li { margin-top: 2px; }
.lang-menu a {
  display: block;
  padding: 0.6em 0.8em;
  border-radius: var(--radius-sm);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}
.lang-menu a:hover,
.lang-menu a:focus-visible {
  background: var(--color-navy-tint);
  color: var(--color-navy-dark);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.main-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 85vw);
  background: var(--color-navy);
  transform: translateX(100%);
  transition: transform var(--transition);
  padding: var(--space-8) var(--space-5) var(--space-5);
  overflow-y: auto;
  z-index: 95;
}
.main-nav.is-open { transform: translateX(0); }

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.nav-list a {
  display: block;
  color: var(--color-text-on-navy);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  border-bottom: 1px solid rgba(247, 243, 233, 0.12);
}
.nav-list a:hover,
.nav-list a[aria-current="page"] {
  background: rgba(200, 30, 30, 0.25);
  color: #fff;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 31, 61, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  z-index: 90;
}
.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

.nav-close {
  display: none;
}

@media (min-width: 800px) {
  .nav-toggle { display: none; }
  .main-nav {
    position: static;
    width: auto;
    flex: 1 1 auto;
    transform: none;
    background: transparent;
    padding: 0;
    overflow: visible;
  }
  /* .main-nav's flex: 1 1 auto (above) already reserves the same overall
     width next to the logo regardless of language. Centering the links
     within that fixed width — rather than justify-content: space-between —
     keeps their natural, tight word-to-word spacing on both languages;
     space-between stretched Korean's shorter labels into unnaturally wide
     gaps since it forced them to span the full reserved width. */
  .nav-list { flex-direction: row; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: nowrap; }
  .nav-list a {
    color: var(--color-navy);
    border-bottom: none;
    padding: 0.55em 0.65em;
    font-size: 0.92rem;
    white-space: nowrap;
    transition: color var(--transition), transform var(--transition), background var(--transition);
  }
  .nav-list a[aria-current="page"] {
    background: var(--color-navy-tint);
    color: var(--color-navy-dark);
  }
  .nav-backdrop { display: none; }
}

/* Enlarge + recolour nav links on hover — desktop pointers only, so touch
   taps on mobile/tablet don't trigger a hover state that never clears. */
@media (min-width: 800px) and (hover: hover) and (pointer: fine) {
  .nav-list a:hover {
    color: var(--color-red);
    background: transparent;
    transform: scale(1.12);
  }
}

/* ---------- Hero ---------- */
/* One landscape photo at every breakpoint, shown uncropped at its own
   aspect ratio (in normal flow, so nothing forces it into a box that
   would need cropping to fill). On narrow phones that ratio makes the
   photo itself quite short, so .hero carries a min-height as a floor —
   any extra height beyond the photo is filled by .hero's own navy
   background, and the scrim + text overlay spans that full height, not
   just the photo. That keeps the headline legible and consistently
   placed regardless of how tall the photo happens to render. */
/* All three children share one grid cell (grid-area: 1 / 1), so the row
   auto-sizes to whichever is taller: the photo's own aspect-ratio height,
   or the text block's actual content height (however much it needs to
   wrap to, at any viewport width, font-size or language). That guarantees
   the headline/lede/buttons are never clipped — a fixed min-height had to
   be guessed and broke as soon as real content wrapped more than assumed. */
.hero {
  display: grid;
  background: var(--color-navy);
  border-bottom: 1px solid var(--color-border);
}
.hero-photo {
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 914;
}
.hero-scrim {
  /* Sized to match .hero-photo exactly (not stretched to the full,
     text-driven row) so the gradient's percentage stops always land at
     consistent points on the photo itself — visible fade on every screen,
     not just when the row happens to be about as tall as the photo. */
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  aspect-ratio: 1600 / 914;
  background: linear-gradient(
    to top,
    rgba(7, 20, 41, 0.92) 0%,
    rgba(7, 20, 41, 0.68) 40%,
    rgba(7, 20, 41, 0.15) 75%
  );
}
.hero-inner {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 1;
  display: flex;
  width: 100%;
  padding-block: var(--space-6) var(--space-7);
}
@media (min-width: 900px) {
  .hero-inner { padding-block: var(--space-7) var(--space-8); }
}
.hero-copy { max-width: 640px; }
.hero h1 { color: #fff; }
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red-dark);
  background: var(--color-red-tint);
  padding: 0.4em 0.9em;
  border-radius: 999px;
  margin-bottom: var(--space-4);
}
.hero p.lede {
  font-size: 1.15rem;
  color: rgba(247, 243, 233, 0.92);
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ---------- Placeholder media block ---------- */
.placeholder-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(11,31,61,0.05) 0 12px, rgba(11,31,61,0.02) 12px 24px),
    var(--color-navy-tint);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  min-height: 220px;
  padding: var(--space-5);
}
.placeholder-media svg { width: 40px; height: 40px; color: var(--color-navy); opacity: 0.55; }
.placeholder-media .placeholder-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-red-dark);
}
.placeholder-media .placeholder-caption {
  font-size: 0.9rem;
  max-width: 32ch;
}

/* ---------- Real content photos (replacing placeholder-media) ---------- */
.content-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.photo-caption {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}
.then-now {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.then-now figure { margin: 0; }
/* Source photos mix portrait and landscape orientations — crop every tile to
   the same shape so a gallery reads as one consistent grid, not a jagged mix
   of tall and short frames. */
.then-now .content-photo { aspect-ratio: 4 / 3; object-fit: cover; }
/* This tall portrait crops in hard on a 4:3 tile with the default centred
   crop — bias it upward so the shopfront signage above the pair stays in
   frame instead of being cut off. */
.then-now .content-photo.crop-top { object-position: top; }
/* Photos stack in a single column here rather than sitting side by side, so
   nothing needs to match tile heights — let this one keep more of its
   portrait frame instead of forcing the shared 4:3 crop. */
.then-now .content-photo.tall-crop { aspect-ratio: 3 / 4; }
/* Stack this pair vertically instead of side by side, so each photo gets the
   full column width rather than sharing it — larger without needing a
   separate size override. */
.then-now.then-now-stack { grid-template-columns: 1fr; gap: var(--space-5); }
/* Trio runs as a vertical timeline instead of a 3-across row — bigger photos,
   each one offset left/right of the next so it doesn't read as a plain stack. */
.then-now.then-now-trio { grid-template-columns: 1fr; gap: var(--space-7); }
.then-now-trio figure { width: 70%; }
.then-now-trio figure:nth-child(odd) { margin-inline: 5% auto; }
.then-now-trio figure:nth-child(even) { margin-inline: auto 5%; }

/* ---------- Quick-glance strip ---------- */
.quick-glance {
  background: var(--color-navy);
  color: var(--color-text-on-navy);
}
.quick-glance-inner {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6);
}
@media (min-width: 700px) {
  .quick-glance-inner { grid-template-columns: repeat(3, 1fr); }
}
.quick-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.quick-item svg {
  width: 26px; height: 26px; flex-shrink: 0;
  color: var(--color-red);
  margin-top: 2px;
}
.quick-item h3 {
  color: var(--color-text-on-navy);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-1);
}
.quick-item p { margin: 0; color: rgba(247, 243, 233, 0.88); }
.quick-item a { color: #fff; }

/* ---------- Sections ---------- */
.section { padding-block: var(--space-8); }
.section-alt { background: var(--color-bg-alt); }
.section-navy { background: var(--color-navy); color: var(--color-text-on-navy); }
.section-navy h2, .section-navy h3 { color: var(--color-text-on-navy); }
.section-header {
  max-width: 60ch;
  margin-bottom: var(--space-6);
}
.section-header p { color: var(--color-text-muted); font-size: 1.05rem; }
.section-navy .section-header p { color: rgba(247, 243, 233, 0.85); }
.eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-2);
}

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--space-2); }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-red-tint);
  color: var(--color-red-dark);
  margin-bottom: var(--space-4);
}
.card-icon svg { width: 26px; height: 26px; }

/* ---------- Card photo slideshows ---------- */
.card-slideshow {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  background: var(--color-border);
}
.card-slideshow-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}
.card-slideshow-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .card-slideshow-track img:hover { transform: scale(1.08); }
}
.card-slideshow-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(11, 31, 61, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition);
}
.card-slideshow-nav:hover,
.card-slideshow-nav:focus-visible { background: rgba(11, 31, 61, 0.85); }
.card-slideshow-nav svg { width: 16px; height: 16px; }
.card-slideshow-prev { left: var(--space-2); }
.card-slideshow-next { right: var(--space-2); }
.card-slideshow-dots {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.card-slideshow-dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}
.card-slideshow-dots button.is-active { background: #fff; }
.card-slideshow-track img { cursor: zoom-in; }

/* ---------- Lightbox (click a card photo to view it larger) ---------- */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(7, 20, 41, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-6);
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: min(90vw, 1100px);
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
@media (hover: hover) and (pointer: fine) {
  .lightbox-img { cursor: zoom-in; transition: transform 0.2s ease; }
  .lightbox-img.is-zoomed { transform: scale(2.2); cursor: zoom-out; }
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition);
}
.lightbox-close:hover, .lightbox-close:focus-visible,
.lightbox-nav:hover, .lightbox-nav:focus-visible { background: rgba(255, 255, 255, 0.25); }
.lightbox-close { top: var(--space-4); right: var(--space-4); width: 44px; height: 44px; }
.lightbox-close svg { width: 22px; height: 22px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lightbox-nav svg { width: 24px; height: 24px; }
.lightbox-prev { left: var(--space-4); }
.lightbox-next { right: var(--space-4); }
.lightbox-counter {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.12);
  padding: 0.35em 0.9em;
  border-radius: var(--radius-sm);
}
@media (max-width: 640px) {
  .lightbox-close { top: var(--space-3); right: var(--space-3); width: 38px; height: 38px; }
  .lightbox-nav { width: 38px; height: 38px; }
}

.testimonial-card {
  display: flex;
  flex-direction: column;
}
.stars {
  display: flex;
  gap: 2px;
  color: var(--color-red);
  margin-bottom: var(--space-3);
}
.stars svg { width: 18px; height: 18px; }
.testimonial-quote {
  font-style: italic;
  flex-grow: 1;
}
.testimonial-attribution {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.social-embeds-grid {
  align-items: start;
}
.social-embed-card {
  padding: var(--space-3);
  overflow: hidden;
}
.social-embed-card .fb-page {
  width: 100%;
}
.social-embed-card .fb-page iframe {
  display: block;
  margin-inline: auto;
}
.social-embed-card .instagram-media {
  width: 100% !important;
  min-width: 0 !important;
}

.facebook-cta-card {
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
}
.facebook-cta-card p { color: var(--color-text-muted); }
.facebook-cta-card .btn { margin-top: auto; }

.two-col {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.two-col.two-col-contact { gap: var(--space-7); }
@media (min-width: 860px) {
  .two-col { grid-template-columns: 1fr 1fr; }
  .two-col.reverse > :first-child { order: 2; }
  .two-col.two-col-visit { grid-template-columns: 3fr 2fr; align-items: start; gap: var(--space-9); }
  .two-col.two-col-contact { grid-template-columns: 1fr minmax(240px, 300px); align-items: start; }
  /* The photo timeline runs much taller than its text. The text should start
     at the top of the section like normal (no transform pulling it up early,
     which is what bled it into the hero before), then hold in place — top
     edge fixed at the vertical centre of the viewport — once scrolling would
     otherwise carry it past that point, so it reads as "central" while the
     photos keep scrolling past it. */
  .two-col.two-col-timeline { align-items: start; }
  /* At rest, the text should read as vertically centred against the first
     photo of the gallery beside it — not the whole (much taller) stack of
     photos. JS measures that first photo and sets --timeline-photo-height;
     min-height plus flex centring holds the text in the middle of a box the
     same height as that one photo. Once scrolling would carry the box's own
     midline past the screen centre, it sticks there instead — offset up by
     half of its own (JS-measured) height, so the midline itself lands on
     centre rather than its top edge — and releases naturally once this
     container (bounded to this section) ends, so it never carries into the
     next section. */
  .timeline-sticky {
    position: sticky;
    top: calc(50vh - var(--timeline-sticky-half, 0px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--timeline-photo-height, 0px);
  }
}

/* ---------- Visit Us: hours panel, set apart from the address/map column ----------
   Boxed only at the desktop breakpoint where it sits beside the address column;
   on mobile the two stack in one flow, so the box+padding would just squeeze the
   table and read as an odd extra frame — let it sit plain like the rest of the page. */
@media (min-width: 860px) {
  .visit-hours-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
  }
  .visit-hours-card .hours-table { border: none; border-radius: 0; box-shadow: none; }
  .visit-hours-card .hours-table th { width: auto; white-space: nowrap; }
  .visit-hours-card .hours-table td { white-space: nowrap; }
  .visit-hours-card .hours-table th, .visit-hours-card .hours-table td { padding-inline: var(--space-4); }
}

/* ---------- Opening hours table ---------- */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hours-table caption { text-align: left; font-family: var(--font-heading); font-weight: 700; margin-bottom: var(--space-3); }
.hours-table th, .hours-table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 1.05rem;
}
.hours-table tbody tr:last-child th,
.hours-table tbody tr:last-child td { border-bottom: none; }
.hours-table th { font-family: var(--font-heading); font-weight: 600; color: var(--color-navy); width: 55%; }
.hours-table tr.is-today { background: var(--color-red-tint); }
.hours-table tr.is-today th { color: var(--color-red-dark); }
.today-badge {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-red);
  color: #fff;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  vertical-align: middle;
}
@media (max-width: 560px) {
  .hours-table th, .hours-table td { padding: var(--space-3) var(--space-4); font-size: 0.9rem; }
  .hours-table th { width: auto; white-space: nowrap; }
  .hours-table td { white-space: nowrap; }
  .today-badge { font-size: 0.6rem; margin-left: var(--space-2); padding: 0.12em 0.5em; }
}

/* ---------- Status badge (open/closed now) ---------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5em 1em;
  margin-top: var(--space-2);
  border-radius: 999px;
  background: rgba(247, 243, 233, 0.12);
}
.status-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: #6FCF97; flex-shrink: 0; }
.status-badge.is-closed .dot { background: #E0A64C; }

/* ---------- List with check/leaf icons ---------- */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.feature-list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.feature-list svg { width: 22px; height: 22px; color: var(--color-red); flex-shrink: 0; margin-top: 3px; }

/* ---------- Steps (delivery process) ---------- */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  counter-increment: step;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
}
.steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-text-on-navy);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

/* ---------- Contact details list ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.contact-list li { display: flex; align-items: center; gap: var(--space-3); }
.contact-list svg { width: 28px; height: 28px; color: var(--color-red); flex-shrink: 0; }
.contact-list a { color: var(--color-navy); font-weight: 600; text-decoration: none; }
.contact-list a:hover { color: var(--color-red); text-decoration: underline; }
.contact-list-label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 2px; }
/* Multi-line address: icon aligns with the label + first address line, not the
   full block, since the block runs several lines past that. */
.contact-list li.contact-address-item { align-items: flex-start; }
.contact-address-item svg { margin-top: 9px; }
/* Lines up the "Contact details" heading with "Send us a message" next to it —
   the form column's own padding pushes its heading down, so this column needs
   the same offset since it has no box padding of its own. */
.contact-details-col { padding-top: var(--space-6); }

/* ---------- Social icons ---------- */
.social-links { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(247, 243, 233, 0.12);
  color: var(--color-text-on-navy);
  transition: background var(--transition);
}
.social-links a:hover { background: var(--color-red); color: #fff; }
.social-links svg { width: 22px; height: 22px; }

.site-header .social-links a { background: var(--color-navy-tint); color: var(--color-navy); }
.site-header .social-links a:hover { background: var(--color-red); color: #fff; }

/* On the cream page-intro background, a solid navy circle reads far more
   cleanly than the pale navy-tint used against the site header's white. */
.page-intro .social-links a { width: 52px; height: 52px; background: var(--color-navy); color: var(--color-text-on-navy); }
.page-intro .social-links a:hover { background: var(--color-red); color: #fff; }
.page-intro .social-links svg { width: 26px; height: 26px; }

/* ---------- Forms ---------- */
.contact-form-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.contact-form-wrap h2 { margin-bottom: var(--space-4); }
.form-field { margin-bottom: var(--space-5); }
.form-field label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-navy);
}
.form-field .hint { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin-top: var(--space-1); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  padding: 0.85em 1em;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 44px;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field select { cursor: pointer; }
.form-field select:invalid { color: var(--color-text-muted); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 31, 61, 0.15);
}
.form-field input:invalid:not(:placeholder-shown),
.form-field textarea:invalid:not(:placeholder-shown) {
  border-color: var(--color-red);
}
.form-status {
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-weight: 600;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success { background: #E4F5E9; color: #1E7A42; }
.form-status.is-error { background: var(--color-red-tint); color: var(--color-red-dark); }

/* ---------- Map ---------- */
.map-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;
}
@media (min-width: 700px) { .map-wrap { aspect-ratio: 16 / 9; } }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Notice / callout ---------- */
.notice {
  background: var(--color-red-tint);
  border: 1px solid rgba(200, 30, 30, 0.25);
  border-left: 4px solid var(--color-red);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-5);
}
.notice p:last-child { margin-bottom: 0; }
.notice.notice-navy {
  background: var(--color-navy-tint);
  border-color: rgba(11, 31, 61, 0.2);
  border-left-color: var(--color-navy);
}

/* ---------- Breadcrumb-ish page intro ---------- */
.page-intro {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-7) var(--space-6);
}
.page-intro .eyebrow { margin-bottom: var(--space-3); }
.page-intro p.lede { color: var(--color-text-muted); font-size: 1.1rem; max-width: 60ch; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy-dark);
  color: rgba(247, 243, 233, 0.85);
}
.footer-inner {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-6);
}
@media (min-width: 700px) {
  .footer-inner { grid-template-columns: 1.3fr 1fr 1fr; }
}
.footer-brand img { height: 128px; width: auto; margin-bottom: var(--space-4); }
.footer-brand p { max-width: 34ch; color: rgba(247, 243, 233, 0.7); }
.footer-col h4 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.footer-col ul.footer-hours { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-1); }
.footer-hours li { display: contents; }
.footer-col ul.footer-explore { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-1); }
.footer-hours-time { text-align: left; }
.footer-col a { color: rgba(247, 243, 233, 0.85); text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-col h4 a { color: inherit; }
.footer-col .contact-list a { color: rgba(247, 243, 233, 0.9); }
.footer-col .contact-list svg { color: var(--color-red); }
.footer-bottom {
  border-top: 1px solid rgba(247, 243, 233, 0.15);
  padding-block: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(247, 243, 233, 0.6);
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }