/* =========================================================
   Northern Pool Cafe — Signage redesign
   Premium colour-coded, card-based experience
   ========================================================= */

@font-face { font-family:'Fredoka'; font-weight:600; font-display:swap; src:url('../fonts/fredoka-600.woff2') format('woff2'); }
@font-face { font-family:'Fredoka'; font-weight:700; font-display:swap; src:url('../fonts/fredoka-700.woff2') format('woff2'); }
@font-face { font-family:'Karla'; font-weight:400; font-display:swap; src:url('../fonts/karla-400.woff2') format('woff2'); }
@font-face { font-family:'Karla'; font-weight:500; font-display:swap; src:url('../fonts/karla-500.woff2') format('woff2'); }
@font-face { font-family:'Karla'; font-weight:700; font-display:swap; src:url('../fonts/karla-700.woff2') format('woff2'); }

:root {
  /* signage colour tokens — each page/category gets a distinct accent */
  --c-breakfast: #f3068e;
  --c-lunch:     #ffb703;
  --c-roast:     #f3068e;
  --c-fish:      #0f8a97;
  --c-bakes:     #e2a63b;
  --c-visit:     #1f8fc4;

  /* surface tokens */
  --ink:         #0b1b20;
  --ink-soft:    #5a7379;
  --ink-muted:   #8ba0a5;
  --paper:       #f3fafa;
  --paper-2:     #e2f2f2;
  --card:        rgba(255, 255, 255, 0.78);
  --card-solid:  #ffffff;
  --line:        rgba(11, 27, 32, 0.10);
  --shadow:      rgba(11, 27, 32, 0.12);
  --glass-edge:  rgba(255, 255, 255, 0.55);

  /* page accent set in body per-page */
  --accent: var(--c-breakfast);
  --accent-2: var(--c-fish);
  /* Text sitting on --accent. White is fine on the pink and the teal; on the
     bakes amber it is 2.15:1, so pages themed amber override this. */
  --on-accent: #ffffff;
  /* Solid fills carrying white text. Every accent here lands just under AA
     against white (pink 4.02, teal 4.12), so fills are darkened until they
     clear it: a shift small enough to be invisible beside the real colour.
     The two yellows are the other way round and take ink instead, set per
     page alongside --on-accent. */
  --accent-fill: color-mix(in srgb, var(--accent) 88%, #000);

  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);

  --header-h: clamp(76px, 10.6vw, 152px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:         #e8f6f5;
    --ink-soft:    #a8c0c2;
    --ink-muted:   #7a9496;
    --paper:       #081519;
    --paper-2:     #0d1e22;
    --card:        rgba(16, 35, 40, 0.72);
    --card-solid:  #12282d;
    --line:        rgba(232, 246, 245, 0.10);
    --shadow:      rgba(0, 0, 0, 0.35);
    --glass-edge:  rgba(255, 255, 255, 0.10);
  }
}

:root[data-theme="dark"] {
  --ink:         #e8f6f5;
  --ink-soft:    #a8c0c2;
  --ink-muted:   #7a9496;
  --paper:       #081519;
  --paper-2:     #0d1e22;
  --card:        rgba(16, 35, 40, 0.72);
  --card-solid:  #12282d;
  --line:        rgba(232, 246, 245, 0.10);
  --shadow:      rgba(0, 0, 0, 0.35);
  --glass-edge:  rgba(255, 255, 255, 0.10);
}

:root[data-theme="light"] {
  --ink:         #0b1b20;
  --ink-soft:    #5a7379;
  --ink-muted:   #8ba0a5;
  --paper:       #f3fafa;
  --paper-2:     #e2f2f2;
  --card:        rgba(255, 255, 255, 0.78);
  --card-solid:  #ffffff;
  --line:        rgba(11, 27, 32, 0.10);
  --shadow:      rgba(11, 27, 32, 0.12);
  --glass-edge:  rgba(255, 255, 255, 0.55);
}

* { box-sizing: border-box; }

html {
  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;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Karla', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* skip link */
.skip-link {
  position: absolute;
  top: -60px;
  left: 20px;
  z-index: 1000;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  transition: top 0.2s var(--ease-out-expo);
}
.skip-link:focus { top: 20px; outline: 3px solid var(--accent); outline-offset: 3px; }

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: 'Fredoka', ui-rounded, system-ui, sans-serif;
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.02em;
}

.wrap {
  width: min(1120px, 92vw);
  margin-inline: auto;
}

.eyebrow {
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}

/* =========================================================
   Animated ambient background
   ========================================================= */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 38%),
    radial-gradient(circle at 88% 24%, color-mix(in srgb, var(--accent-2) 12%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 50% 92%, color-mix(in srgb, var(--c-lunch) 10%, transparent) 0%, transparent 35%),
    var(--paper);
  background-size: 120% 120%;
  animation: ambientShift 22s var(--ease-in-out-sine) infinite alternate;
}

@keyframes ambientShift {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  100% { background-position: 100% 100%, 0% 100%, 50% 0%, 0 0; }
}

.mesh-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
}


/* =========================================================
   Navigation
   ========================================================= */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.topnav.is-scrolled {
  box-shadow: 0 8px 32px var(--shadow);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}
.topnav .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.7vw, 24px);
  text-decoration: none;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 2.3rem);
  color: var(--ink);
}
.logo-link img {
  /* Sized off the header itself so the card almost fills it, top and bottom,
     at every width. width:auto keeps the logo's own proportions. */
  height: calc(var(--header-h) * 0.86);
  width: auto;
  border-radius: clamp(10px, 1.4vw, 20px);
  padding: calc(var(--header-h) * 0.025) calc(var(--header-h) * 0.055);
  background: #fff;
  box-shadow: 0 4px 14px var(--shadow);
}
.logo-link span { display: none; }

.navlinks {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.1vw, 16px);
}
.navlinks a {
  position: relative;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: clamp(0.92rem, 2.05vw, 1.84rem);
  text-decoration: none;
  padding: clamp(9px, 1.25vw, 18px) clamp(18px, 2.5vw, 36px);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  transition: color 0.25s ease, background 0.25s ease, transform 0.2s var(--ease-out-expo);
  overflow: hidden;
}
.navlinks a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent-fill);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out-expo);
  z-index: -1;
}
.navlinks a:hover,
.navlinks a:focus-visible {
  color: var(--on-accent);
  transform: translateY(-2px);
}
.navlinks a:hover::before,
.navlinks a:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left;
}
.navlinks a.active {
  background: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.navlinks a.active::before { display: none; }
.navlinks a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  color: var(--ink);
}
.menu-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
  margin: 5px 0;
  transition: transform 0.3s var(--ease-out-expo), opacity 0.2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 720px) {
  .menu-toggle { display: block; }
  .navlinks {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    padding: 18px 24px 28px;
    gap: 6px;
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.45s var(--ease-out-expo), opacity 0.3s ease;
  }
  .navlinks.is-open {
    transform: translateY(0);
    opacity: 1;
  }
  .navlinks a { text-align: center; padding: 14px; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s ease, color 0.25s ease;
  will-change: transform;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease-out-expo);
}
.btn:hover::before { transform: translateX(120%); }
.btn:hover { transform: translateY(-3px); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.btn.primary {
  background: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 32%, transparent);
}
.btn.primary:hover {
  box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 42%, transparent);
}
.btn.ghost {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
  backdrop-filter: blur(8px);
}
.btn.ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }

/* =========================================================
   Cards (glass + solid variants)
   ========================================================= */
.card {
  background: var(--card);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 18px 40px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.45);
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 26px 56px var(--shadow); }

.card-solid {
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px var(--shadow);
}

/* =========================================================
   Scroll reveal utilities
   ========================================================= */
.js .reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Hero (home)
   ========================================================= */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + 28px);
  padding-bottom: clamp(22px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}

.hero-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hero-visual {
  position: relative;
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 70px var(--shadow);
  transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
  transition: transform 0.6s var(--ease-out-expo);
}
.hero-visual:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
.hero-media {
  position: relative;
  border-radius: inherit;
  overflow: hidden;
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11,27,32,0.35) 100%);
  pointer-events: none;
}
.hero-media img {
  width: 100%;
  aspect-ratio: 4/3.4;
  object-fit: cover;
  object-position: center 40%;
}

.hero-badge {
  position: absolute;
  left: 24px;
  bottom: -26px;
  z-index: 2;
  background: var(--card-solid);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  box-shadow: 0 14px 34px var(--shadow);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-badge img {
  height: 44px;
  width: auto;
  /* Same reason as the header: the artwork needs a light plate under it. */
  background: #fff;
  border-radius: 8px;
  padding: 5px 8px;
}
.hero-badge span {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

.hero-copy h1 {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.05;
  margin-bottom: 18px;
}
.hero-copy h1 em {
  font-style: normal;
  color: var(--accent);
}
h2 em, h3 em {
  font-style: normal;
  color: var(--accent);
}
.hero-copy > p {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: 22px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.chip svg { width: 16px; height: 16px; color: var(--accent); }

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; }
  .hero-right { order: -1; max-width: 680px; margin-inline: auto; width: 100%; }
  .hero-visual { transform: none; }
  .hero-copy { text-align: center; }
  .hero-copy > p { margin-inline: auto; }
  .hero-meta { justify-content: center; }
  .btn-row { justify-content: center; }
  .hero-badge { left: 50%; transform: translateX(-50%); }
}

/* =========================================================
   Floating stat orbs
   ========================================================= */
.stat-orbs {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.stat-orb {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 14px 34px var(--shadow);
  backdrop-filter: blur(10px);
  animation: float 6s var(--ease-in-out-sine) infinite;
}
.stat-orb:nth-child(2) { animation-delay: -2s; }
.stat-orb:nth-child(3) { animation-delay: -4s; }
.stat-orb .num {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--accent);
}
.stat-orb .lbl {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: 4px;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 880px) {
  .stat-orbs { justify-content: center; }
}

/* =========================================================
   Section patterns
   ========================================================= */
section.block { padding: clamp(26px, 4vw, 48px) 0; }

.section-head {
  max-width: 58ch;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.section-head h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  margin-bottom: 12px;
}
.section-head p {
  color: var(--ink-soft);
  font-size: 1.08rem;
}

/* =========================================================
   Category tiles
   ========================================================= */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } }

.tile {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card-solid);
  box-shadow: 0 16px 40px var(--shadow);
  transform-style: preserve-3d;
  transition: transform 0.45s var(--ease-out-expo), box-shadow 0.45s ease;
}
.tile:hover {
  transform: translateY(-10px) rotateX(2deg);
  box-shadow: 0 28px 60px var(--shadow);
}
.tile-img {
  position: relative;
  overflow: hidden;
}
.tile-img img {
  width: 100%;
  aspect-ratio: 4/3.1;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-expo);
}
.tile:hover .tile-img img { transform: scale(1.08); }
.tile-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,27,32,0.45) 100%);
}
.tile-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: #fff;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.tile-tag.b { background: var(--c-breakfast); }
.tile-tag.n { background: var(--c-fish); }
.tile-tag.c { background: var(--c-bakes); color: #0b1b20; }
.tile-cap {
  padding: 18px 20px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
}
.tile-cap span {
  display: block;
  font-family: 'Karla', sans-serif;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* =========================================================
   About / intro
   ========================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.about-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px var(--shadow);
}
.about-visual img {
  width: 100%;
  aspect-ratio: 1/1.05;
  object-fit: cover;
}
.about-visual::before {
  content: '';
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--c-lunch), var(--accent));
  opacity: 0.18;
  animation: spin 14s linear infinite;
  filter: blur(60px);
  z-index: -1;
}
@keyframes spin { to { transform: rotate(360deg); } }

.about-copy p {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 56ch;
}
.about-copy p strong { color: var(--ink); }

@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-visual { max-width: 540px; margin-inline: auto; }
}

/* =========================================================
   Reviews
   ========================================================= */
.reviews-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 26px);
}
@media (max-width: 820px) { .reviews-strip { grid-template-columns: 1fr; } }

.review-card {
  padding: clamp(24px, 3vw, 32px);
  position: relative;
}
.review-card::before {
  content: '“';
  position: absolute;
  top: 14px;
  right: 22px;
  font-family: 'Fredoka', sans-serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.12;
}
.stars {
  display: block;
  font-size: 1.1rem;
  color: var(--c-lunch);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.review-quote {
  font-size: 1.08rem;
  line-height: 1.55;
  margin: 0 0 18px;
  color: var(--ink);
}
.review-source {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* =========================================================
   Page header (inner pages)
   ========================================================= */
.page-head {
  padding-top: calc(var(--header-h) + clamp(28px, 5vw, 48px));
  padding-bottom: clamp(22px, 3vw, 32px);
  text-align: center;
}
.page-head h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  max-width: 18ch;
  margin-inline: auto;
}
.page-head p {
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 16px auto 0;
  font-size: 1.08rem;
}

/* =========================================================
   Deal banner
   ========================================================= */
.deal-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background:
    linear-gradient(110deg, var(--c-roast) 0%, color-mix(in srgb, var(--c-roast) 70%, var(--c-breakfast)) 100%);
  color: #fff;
  border-radius: var(--radius-md);
  padding: clamp(20px, 3vw, 26px) clamp(24px, 3.4vw, 32px);
  margin-bottom: clamp(22px, 3vw, 32px);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--c-roast) 28%, transparent);
  position: relative;
  overflow: hidden;
}
.deal-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.6;
}
.deal-banner strong {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  position: relative;
}
.deal-banner .price {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  position: relative;
  background: rgba(255,255,255,0.18);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
}

a.call-now {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
a.call-now:hover { background: rgba(255,255,255,0.3); }
a.call-now:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
a.call-now svg { flex: none; }

/* Desktop call popup (menu page). Phones dial the tel: link instead. */
.call-dialog {
  border: 0;
  padding: 0;
  border-radius: var(--radius-md);
  background: var(--card-solid);
  color: var(--ink);
  width: min(420px, calc(100vw - 32px));
  box-shadow: 0 30px 80px rgba(11,27,32,0.35);
}
.call-dialog::backdrop { background: rgba(11,27,32,0.6); }
.call-dialog-inner { padding: clamp(24px, 4vw, 36px); text-align: center; }
.call-dialog h2 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.6rem; margin: 0 0 8px; }
.call-dialog p { margin: 0; color: var(--ink-soft); }
.call-dialog-number {
  display: block;
  margin: 10px 0 14px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.4rem);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--c-breakfast);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  font-variant-numeric: tabular-nums;
}
.call-dialog-note { font-size: 0.95rem; }
.call-dialog-close {
  margin-top: 20px;
  font: 600 1rem 'Fredoka', sans-serif;
  padding: 10px 26px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-fill);
  color: var(--on-accent);
  cursor: pointer;
}
.call-dialog-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* =========================================================
   Menu grid
   ========================================================= */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 28px);
}
@media (max-width: 820px) { .menu-grid { grid-template-columns: 1fr; } }

.menu-card {
  padding: clamp(22px, 3vw, 30px);
}
.menu-card.full-width { grid-column: 1 / -1; }

.cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.cat-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}
.cat-dot.b { background: var(--c-breakfast); color: var(--c-breakfast); }
.cat-dot.r { background: var(--c-lunch); color: var(--c-lunch); }
.cat-dot.u { background: var(--c-roast); color: var(--c-roast); }
.cat-dot.n { background: var(--c-fish); color: var(--c-fish); }
.cat-dot.c { background: var(--c-bakes); color: var(--c-bakes); }

.menu-card h2, .menu-card h3 {
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.m-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
}
.m-row:last-child { border-bottom: none; }
.m-name {
  font-weight: 700;
  font-size: 1.02rem;
}
.m-desc {
  display: block;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin-top: 3px;
}
.m-price {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.menu-note {
  color: var(--ink-soft);
  line-height: 1.7;
}
.menu-note strong { color: var(--ink); }

/* =========================================================
   Gallery
   ========================================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
}
@media (max-width: 980px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

.gallery figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1/1;
  box-shadow: 0 12px 30px var(--shadow);
  position: relative;
  cursor: pointer;
}
.gallery figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-expo);
}
.gallery figure:hover img { transform: scale(1.1); }
.gallery figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(11,27,32,0.25) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gallery figure:hover::after { opacity: 1; }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 21, 25, 0.94);
  backdrop-filter: blur(14px);
  display: grid;
  place-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-height: 86vh;
  max-width: 90vw;
  border-radius: var(--radius-md);
  box-shadow: 0 40px 90px rgba(0,0,0,0.5);
  transform: scale(0.96);
  transition: transform 0.35s var(--ease-out-expo);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox button {
  position: absolute;
  top: 24px;
  right: 24px;
  background: var(--card);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.6rem;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-content: center;
}
.lightbox button:focus-visible { outline: 3px solid var(--accent); }

/* =========================================================
   Visit page
   ========================================================= */
.visit-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 44px);
  align-items: start;
}
@media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; } }

.visit-card { padding: clamp(24px, 3vw, 34px); }
.visit-card dl { margin: 0; }
.visit-card dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
  margin: 22px 0 5px;
}
.visit-card dt:first-child { margin-top: 0; }
.visit-card dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
}
.visit-card dd a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.visit-card dd a:hover { color: var(--accent); }
.visit-card .hours-note {
  display: block;
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin-top: 8px;
}

.map-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px var(--shadow);
  background: var(--card-solid);
}
/* Static OpenStreetMap image linking to the Google listing: no third-party
   embed, so no Google cookies and no consent banner needed. The pin is drawn
   in the image's horizontal centre so object-fit: cover never crops it. */
.map-link { display: block; position: relative; color: inherit; text-decoration: none; }
.map-link img {
  width: 100%;
  height: clamp(320px, 38vw, 460px);
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
.map-cta {
  position: absolute;
  left: 16px;
  bottom: 16px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: 0 6px 18px rgba(11,27,32,0.25);
}
.map-link:hover .map-cta { filter: brightness(1.08); }
.map-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.map-credit { margin: 0; padding: 8px 14px; font-size: 0.8rem; color: var(--ink-soft); }
.map-credit a { text-decoration: underline; }

.visit-actions { margin-top: 14px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: clamp(32px, 5vw, 56px);
  padding: clamp(28px, 4vw, 48px) 0 clamp(36px, 5vw, 60px);
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, 92vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
}
.foot-row .addr {
  font-size: 0.96rem;
  color: var(--ink-soft);
  max-width: 42ch;
  line-height: 1.7;
}
.foot-row .addr a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); }
.foot-row .addr a:hover { color: var(--accent); }

.foot-links {
  /* Two equal pills, then the third spanning both beneath them. A flex wrap
     left the two rows different widths, which is what stopped it looking
     tidy; on a grid the block squares off. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 0 1 auto;
  width: min(400px, 100%);
}
.foot-links a:last-child { grid-column: 1 / -1; }
.foot-links a {
  font-weight: 700;
  font-size: clamp(0.95rem, 1.15vw, 1.12rem);
  text-decoration: none;
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  padding: clamp(12px, 1.15vw, 17px) clamp(20px, 2vw, 30px);
  text-align: center;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.foot-links a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.foot-links a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.credit {
  color: var(--ink-soft);
  /* This build is free in exchange for the credit, so it is legible rather
     than hidden: the agency name at full contrast and weight, "Site by" left
     quiet so it still reads as a credit and not an advert. */
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  margin-top: 28px;
}
.credit a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}
.credit a:hover { color: var(--accent); }
/* Beside the pills, not under them. */
.foot-row .credit {
  margin-top: 0;
  align-self: center;
}

/* =========================================================
   Decorative dividers
   ========================================================= */
.wave-divider {
  height: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.25' d='M0,64L48,80C96,96,192,128,288,128C384,128,480,96,576,85.3C672,75,768,85,864,101.3C960,117,1056,139,1152,133.3C1248,128,1344,96,1392,80L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  opacity: 0.5;
}

/* =========================================================
   Focus / reduced-motion
   ========================================================= */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ambient-bg { animation: none; }
  .stat-orb { animation: none; }
  .about-visual::before { animation: none; }
}

/* Opening hours, one day per row. Times are right aligned on tabular figures
   so the columns line up and the week can be read at a glance. */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  margin-top: 2px;
}
.hours-table th {
  text-align: left;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  padding: 7px 14px 7px 0;
  border-bottom: 1px solid var(--line);
}
.hours-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.hours-table tr:last-child th,
.hours-table tr:last-child td { border-bottom: 0; }

/* =========================================================
   Open now: the line above the hero photo. No panel, just the words, set
   big enough to fill the strip above the picture rather than leaving it
   empty. The dot carries the colour; the words stay at full contrast,
   because the brand pink does not clear AA on this pale background.
   ========================================================= */
.open-now[hidden] { display: none !important; }
.open-now {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  color: var(--ink);
}
/* The dot rides in the text line rather than in a column of its own, so the
   words centre on the photo instead of sitting a dot's width to the right. */
.open-now .open-dot { display: none; }
.open-now .open-msg {
  font-family: 'Fredoka', ui-rounded, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 5.4vw, 4rem); /* matches .hero-copy h1 */
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  position: relative;
}
.open-now .open-msg::before {
  content: '';
  display: inline-block;
  vertical-align: 0.12em;
  width: 0.42em;
  height: 0.42em;
  margin-right: 0.4em;
  border-radius: 50%;
  background: var(--ink-soft);
}
.open-now .open-msg em {
  font-style: normal;
  color: var(--accent);
}
.open-now .open-detail {
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.open-now.is-open .open-msg::before {
  background: var(--accent);
  animation: open-pulse 2.4s ease-in-out infinite;
}
@keyframes open-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243, 6, 142, 0.55); }
  70%      { box-shadow: 0 0 0 10px rgba(243, 6, 142, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .open-now.is-open .open-msg::before { animation: none; }
}
@media (min-width: 881px) {
  .open-now {
    margin-bottom: 20px;
  }
  /* The dot hangs off the side rather than sitting in the line, so it takes
     no part in the centring: the words themselves centre on the photo. */
  .open-now .open-msg::before {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: -0.3em;
  }
  .open-now .open-detail {
    font-size: 1.2rem;
  }
}


/* A second category heading inside a menu card, so a short group can share a
   card rather than take one of its own. */
.menu-card .cat-head-sub {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}