/* =============================================================================
   MASTER: food-rustico-static — concept preview by PXLNorth
   Parameterized from the operator-approved rusticokitchen.ca build (June 2026
   full-custom, runs/rusticokitchen.ca/redesign). Structure, spacing and type
   scale are the approved design; the colour and font slots below are filled per
   prospect by the tailor pass.

   COLOUR SLOTS — a dark ground, one hot accent.
   ---------------------------------------------------------------------------
   Every slot reads the fill-static palette (paletteMode `dark`, the Rustico-mood
   scale this build is named after). theme.json SHOULD pin the full `dark` object
   (see template.json and oracle/theme.rusticokitchen.ca.json); unpinned, the
   surfaces re-derive from the prospect's own brand hue, which is what makes the
   page re-hue rather than repaint.
     accent slots  : ONE hot colour from the prospect's real site scheme. It
                     carries the CTAs, eyebrows, rules and hover states. Never a
                     second accent, and never a logo colour used as a canvas.
     bg slots      : the dark ground and its two lifts (band, card).
     --color-surface: the ELEVATED surface (inputs, tab strip, row hover, rating
                     badges, footer social buttons, .btn-dark). It is a
                     master-specific slot, not a deriveDarkPalette key: pinned
                     via theme.json `dark.surface`, and falling back to the card
                     ground when a theme does not pin it.
     --hero-photo  : the hero photograph, set as an inline custom property on
                     .hero-bg in the MARKUP (imagerySlots.hero -> hero.photo.src).
                     `none` here is the honest fallback: no photograph, gradient
                     only, never a broken url().

   INK, BORDERS AND THE TWO STATUS HUES ARE NOT SLOTS, on purpose. The cream/text
   scale is this design's ink on a dark ground, not a prospect fact, so it is
   literal. NAMED LIMIT: --color-border / --color-border-hover are a 10% / 25%
   TERRACOTTA tint frozen at the approved value, so they do not follow a re-hued
   accent. PORT: color-mix(in srgb, var(--color-accent) 10%, transparent), which
   moves the approved page by <= 4/255 in one channel at 10% alpha — small, but a
   change to an approved render, so it waits for an operator look rather than
   riding along with masterization.

   TYPE — Cormorant Garamond display + DM Sans text, content-driven via
   template.json `fonts`. Every weight this file paints must be REQUESTED in
   fonts.googleHref in the same edit or blueprint-gate's faux-bold check fails.
   Never Fraunces (operator taste rule).
   ========================================================================== */

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* The [hidden] attribute must beat any component's own display rule. In the UA
   stylesheet it is only display:none at UA specificity, so a container styled
   display:flex/grid stays ON SCREEN underneath its own confirmation panel.
   See templates/blueprints/_toolkit/snippets/honest-submit.md. */
[hidden] { display: none !important; }

:root {
  /* Dark ground + one hot accent, filled from the prospect's palette */
  --color-bg: #0c0f12;
  --color-bg-warm: #111518;
  --color-bg-card: #161b20;
  --color-surface: #1e2429;
  --color-accent: #5EC981;
  --color-accent-light: #6ECE8D;
  --color-accent-dim: #40BE69;
  /* The ink that goes ON an accent fill, chosen from the accent's own luminance by the fill
     (palette.onAccent). The June accent is a mid-dark terracotta and white sits on it happily,
     which is why every accent surface here hard-coded #fff; a prospect whose mark is light —
     aupotaufeu.ca's green, 2026-09-13 — then printed white on green at 1.9:1 and the gate failed
     the build on the active menu tab and every add button. */
  --color-on-accent: #10151A;
  --color-cream: #f0ebe1;
  --color-cream-dim: #b8b0a2;
  --color-text: #dbd5c9;
  --color-text-dim: #8a857b;
  --color-olive: #6b7c4e;
  --color-olive-light: #8a9e66;
  --color-red: #a83232;
  --color-red-light: #c44040;
  --color-green: #4a7c3f;
  --color-overlay: rgba(12, 15, 18, 0.85);
  --color-border: rgba(192, 92, 60, 0.1);
  --color-border-hover: rgba(192, 92, 60, 0.25);

  /* Typography, a display face and a text face, per prospect (template.json fonts) */
  --font-display: 'Cormorant Garamond', 'Garamond', serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  /* Layout */
  --max-width: 1200px;
  --radius: 4px;
  --radius-lg: 8px;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-accent-light); }
button { cursor: pointer; font-family: var(--font-body); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* --- Typography --- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; }
h1 { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 600; }
/* h2 keeps the 600 declared on the line above: Cormorant Garamond at 400 across display size
   is the "font is weak and cheap" / "headings THICKER" failure (TASTE_LEDGER #44/#53/#66),
   which blueprint-gate's heading-ink check reads as a number (floor 500). The face is
   unchanged; only the ink is. */
h2 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.85rem); font-weight: 500; }

.section-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-label::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-accent);
}

/* Centered section labels */
.menu-header .section-label,
.order-header .section-label,
.testimonials .section-label,
#promotions .section-label,
#contact .section-label,
[style*="text-align:center"] .section-label,
[style*="text-align: center"] .section-label {
  justify-content: center;
}

/* Left-aligned labels */
.events-section .section-label,
.about-text .section-label {
  justify-content: flex-start;
}

.section-title {
  color: var(--color-cream);
  margin-bottom: var(--space-md);
}

.section-desc {
  color: var(--color-text-dim);
  font-size: 1.05rem;
  max-width: 600px;
  line-height: 1.7;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  transition: all 0.25s ease;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn-primary:hover {
  background: var(--color-accent-light);
  color: var(--color-on-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(196, 92, 60, 0.25);
}

.btn-outline {
  background: rgba(12, 15, 18, 0.4);
  backdrop-filter: blur(4px);
  color: var(--color-cream);
  border: 1.5px solid var(--color-cream-dim);
}
.btn-outline:hover {
  border-color: var(--color-cream);
  background: rgba(240, 235, 225, 0.12);
  color: var(--color-cream);
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--color-surface);
  color: var(--color-cream);
  border: 1px solid var(--color-border);
}
.btn-dark:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-light);
  transform: translateY(-2px);
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem 0;
  transition: all 0.3s ease;
  /* top scrim so the links/logo separate from the busy hero photo */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.22) 60%, transparent);
}

.nav.scrolled {
  background: rgba(12, 15, 18, 0.96);
  backdrop-filter: blur(16px);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.nav-logo img {
  height: 60px;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55));
  width: auto;
  transition: height 0.3s;
}
/* The mark is inverted only when the fill says so (assets.logoInvert: a dark, unsaturated mark —
   the June wordmark). A blanket invert turned royalseafood.ca's red seal cyan (2026-09-12); a
   coloured mark is painted as itself or as its knockout. See fillStatic decideLogoOnDark. */
.nav-logo img.logo-invert { filter: invert(1); }
/* SIZED BY THE MARK'S OWN PROPORTIONS (assets.logoClass, fillStatic logoSizeClass). 60px suits the
   long wordmark this master was built around; a badge spends its height on a drawing and a seal
   on a caption, so both get more. Measured against the two headless proofs, 2026-09-12. */
.nav-logo img.logo-compact { height: 74px; }
.nav-logo img.logo-square { height: 84px; }
.nav.scrolled .nav-logo img.logo-compact { height: 52px; }
.nav.scrolled .nav-logo img.logo-square { height: 56px; }
.nav.scrolled .nav-logo img { height: 44px; }

/* gap 1.5rem, not 2.25rem: at 1440 the authored row + the reservation CTA + the Order Now
   dropdown need 967px of the 951px the bar has, so three labels wrapped to two and three
   lines (blueprint-gate nav-wrap, TASTE_LEDGER #27/#28). Spacing is the only thing that
   moves — every item still shows, at its own size, weight and tracking. Overridden back to
   1.5rem by the <=968px drawer below, so this is a desktop-only change. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}

.nav-links a {
  color: rgba(240, 235, 225, 0.98);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  padding: 0.25rem 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width 0.3s;
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a:hover { color: var(--color-cream); }

.nav-cta {
  /* 1rem of side padding rather than 1.25rem — the second half of the nav-wrap fix above. */
  padding: 0.55rem 1rem !important;
  background: var(--color-accent);
  color: var(--color-on-accent) !important;
  border-radius: var(--radius);
  font-weight: 700;
}
.nav-cta-outline {
  background: rgba(196, 92, 60, 0.12) !important;
  border: 1.5px solid var(--color-accent) !important;
  color: #fff !important;
  backdrop-filter: blur(4px);
}
.nav-cta-outline:hover {
  background: var(--color-accent) !important;
  color: var(--color-on-accent) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  background: var(--color-accent-light);
  color: var(--color-on-accent) !important;
}

/* Order Now dropdown (pickup or a delivery service) */
.nav-order { position: relative; }
.nav-order-toggle {
  cursor: pointer;
  border: 0;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* Match the "Reserve" nav link's text: same size + weight (a <button> otherwise
     resets these via font:inherit). */
  font-size: 0.75rem;
  font-weight: 600;
}
.nav-order-toggle .caret { font-size: 0.7em; line-height: 1; transition: transform 0.2s; }
.nav-order.open .nav-order-toggle .caret { transform: rotate(180deg); }
.nav-order-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  min-width: 190px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 0.4rem;
  background: #1c1410;
  border: 1px solid rgba(240, 235, 225, 0.12);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  z-index: 60;
}
.nav-order.open .nav-order-menu { display: flex; }
.nav-order-menu a {
  padding: 0.6rem 0.85rem !important;
  border-radius: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(240, 235, 225, 0.9);
  white-space: nowrap;
}
.nav-order-menu a::after { display: none !important; }
.nav-order-menu a:hover { background: var(--color-accent); color: var(--color-on-accent); }

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-cream);
  transition: all 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- Hero --- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  /* The masthead is fixed over the hero; on a short viewport (the operator's 1000x625 window,
     royalseafood.ca 2026-09-12) centring within 100vh slid the badge under the logo. Reserve the
     masthead's height at the top so the centred block can never start beneath it. */
  padding-top: 6.5rem;
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* The photograph is a real image (see components/hero.html); the scrim is the June
   page's gradient, unchanged, painted over it. */
.hero-bg .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  /* Heavier under the text column (0-45%) than the June page's 0.88→0.55: a bright plate (the
     seafood platter on royalseafood.ca, 2026-09-12) left the sub-copy and nav reading faint to
     the vision QA even though the pixel contrast gate passed. The right half stays open. */
  background:
    linear-gradient(120deg, rgba(12,15,18,0.92) 0%, rgba(12,15,18,0.78) 38%, rgba(12,15,18,0.5) 62%, rgba(12,15,18,0.72) 100%),
    /* A second wash bound to the TEXT COLUMN only (the left ~46%), so a bright busy frame cannot
       reach the copy while the right half of the photograph stays open. */
    linear-gradient(to right, rgba(12,15,18,0.55) 0%, rgba(12,15,18,0.4) 30%, rgba(12,15,18,0) 46%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 0 var(--space-md) 0 clamp(var(--space-md), 8vw, 6rem);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.hero-badge::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--color-accent);
}

.hero h1 {
  color: var(--color-cream);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}

.hero h1 em {
  font-style: italic;
  color: var(--color-accent-light);
  font-weight: 600;
}

.hero-sub {
  font-size: 1.1rem;
  /* Full cream over a photograph, not the dim body tone: the dim tone is for copy on a flat dark
     panel, and over a bright busy frame (subsplus.ca's red fabric, royalseafood.ca's lit platter)
     the vision QA read it as hard to read at both widths even with the scrim (2026-09-12). The
     dim tone stays everywhere else on the page. */
  color: var(--color-cream);
  margin-bottom: var(--space-lg);
  max-width: 480px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: nowrap;
}
.hero-actions .btn {
  padding: 0.85rem 1.75rem;
  white-space: nowrap;
}

/* --- Info Bar --- */
.info-bar {
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-sm) 0;
}

/* COLLAPSE-HIDDEN-TRACKS. The bar's three facts are three independent
   conditionals, so a prospect with no address line, no phone and no hours
   summary would otherwise get an empty 2rem stripe in the lighter band colour
   with a border above and below it. A band with nothing to say paints nothing.
   Measured on a minimal fill: with all three dropped the bar rendered, and this
   is the rule that collapses it. No effect on any page that has one of them. */
.info-bar:not(:has(.info-item)) { display: none; }

.info-bar-inner {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-cream-dim);
  font-size: 0.85rem;
}

.info-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* --- Sections --- */
section {
  padding: 3.75rem 0;
  position: relative;
}

/* --- Reservations --- */
.reservations-section {
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border);
}

.reservations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}
/* Lead the reserve section with the form (top on mobile, left on desktop). */
.reservations-grid .reservation-form { order: -1; }

.reservations-info .section-label { justify-content: flex-start; }

.reservations-info .section-desc {
  margin-bottom: var(--space-lg);
  font-size: 1.1rem;
}

.res-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.res-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-bg-card);
  border-radius: var(--radius);
  border-left: 2px solid var(--color-accent-dim);
}
/* The glyph sits one level deeper than its row, the way .event-type > .event-type-icon > svg
   already does on this same page. Layout-neutral (the span is a shrink-proof flex box the
   same size as the glyph it holds); it exists so the three detail rows are not three SIBLING
   svgs under one container, which is blueprint-gate's icon-grid slop signature. */
.res-detail-icon {
  display: flex;
  flex-shrink: 0;
}
.res-detail svg {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.res-detail strong {
  display: block;
  color: var(--color-cream);
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}
.res-detail span {
  color: var(--color-text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}

.reservation-form {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  scroll-margin-top: 6rem;
}

.reservation-form h3 {
  color: var(--color-cream);
  margin-bottom: var(--space-md);
  text-align: center;
  font-weight: 400;
}

/* Preview-honest confirmation panel: takes the form's place in the layout. */
.form-done { display: block; }
.form-done h3 { text-align: left; }
.form-done p {
  color: var(--color-text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}
.form-done a { color: var(--color-accent-light); }
.form-done .form-submit { display: inline-flex; margin-top: var(--space-sm); text-decoration: none; }

@media (max-width: 968px) {
  .reservations-grid { grid-template-columns: 1fr; }
}

/* --- About --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: stretch;
  margin-top: var(--space-lg);
}

.about-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.about-img::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-text .section-label {
  justify-content: flex-start;
}

.about-text p {
  color: var(--color-text-dim);
  margin-bottom: var(--space-sm);
  font-size: 1rem;
  line-height: 1.75;
}

.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.about-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-cream);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.85rem var(--space-sm);
  background: var(--color-bg-card);
  border-radius: var(--radius);
  border-left: 2px solid var(--color-accent-dim);
}

/* Same one-level-deeper nesting as .res-detail-icon above, for the same reason. */
.about-feature-icon {
  display: flex;
  flex-shrink: 0;
}
.about-feature svg {
  width: 22px;
  height: 22px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* --- Menu Preview --- */
.menu-section {
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.menu-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}
.menu-header .section-desc {
  margin: 0 auto;
}

.menu-tabs {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 0.25rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.menu-tab {
  padding: 0.55rem 1.5rem;
  background: transparent;
  color: var(--color-text-dim);
  border: none;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: all 0.25s;
}
.menu-tab:hover {
  color: var(--color-cream);
}
.menu-tab.active {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.menu-category { display: none; }
.menu-category.active { display: grid; }

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem var(--space-md);
  background: var(--color-bg-card);
  border-radius: var(--radius);
  border-left: 2px solid transparent;
  transition: all 0.25s;
}
.menu-item:hover {
  border-left-color: var(--color-accent);
  background: var(--color-surface);
}

.menu-item-info { min-width: 0; }

.menu-item-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-cream);
  margin-bottom: 0.2rem;
}

.menu-item-desc {
  font-size: 0.82rem;
  color: var(--color-text-dim);
  line-height: 1.5;
}

.menu-item-tags {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.menu-tag {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  background: rgba(107, 124, 78, 0.15);
  color: var(--color-olive-light);
}
.menu-tag.spicy {
  background: rgba(196, 92, 60, 0.12);
  color: var(--color-accent-light);
}

.menu-item-price {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-accent);
  font-weight: 700;
  white-space: nowrap;
}

.menu-cta {
  text-align: center;
  margin-top: var(--space-lg);
}
.menu-note {
  color: var(--color-text-dim);
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
}

/* --- Full Menu Page --- */
.page-hero {
  padding: calc(3.25rem + var(--space-md)) 0 var(--space-md);
  text-align: center;
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border);
}
.page-hero .section-label { justify-content: center; }

.full-menu-section {
  padding: var(--space-lg) 0;
}

.full-menu-category {
  margin-bottom: var(--space-xl);
}

.category-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
}

.category-header h3 {
  color: var(--color-accent);
  font-size: 1.6rem;
  font-weight: 600;
  white-space: nowrap;
}

.category-header .line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* --- Order Section --- */
.order-section {
  background: var(--color-bg);
  text-align: center;
}

.order-header { margin-bottom: var(--space-lg); }
.order-header .section-desc { margin: 0 auto; }

.order-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  max-width: var(--max-width);
  margin: 0 auto;
}
/* A FOUR-COLUMN GRID HOLDING ONE CARD IS THREE COLUMNS OF NOTHING (2026-09-13, aupotaufeu.ca: a
   pizzeria that takes orders by telephone only). The band keeps its shape for a business with a
   real spread of channels and fits itself to one, two or three when that is all there honestly is. */
.order-options:has(> :nth-child(1):last-child) { grid-template-columns: minmax(280px, 420px); justify-content: center; }
.order-options:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.order-options:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }

.order-card {
  padding: var(--space-md) var(--space-sm);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.order-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.3);
}

.order-card-icon {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-card-icon .brand-logo { height: 30px; width: auto; max-width: 170px; display: block; }
.order-card-icon svg { width: 30px; height: 30px; color: var(--color-accent); }

.order-card h3 {
  color: var(--color-cream);
  font-size: 1.1rem;
  font-weight: 500;
}
.order-card p {
  color: var(--color-text-dim);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* --- Private Events --- */
.events-section {
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border);
}

.events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin-top: var(--space-lg);
}

.events-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.events-photos img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius);
}

.events-info h3 {
  color: var(--color-cream);
  margin-bottom: var(--space-sm);
}
.events-info p {
  color: var(--color-text-dim);
  margin-bottom: var(--space-md);
  font-size: 1rem;
  line-height: 1.75;
}

.event-types {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.event-type {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 0.85rem var(--space-sm);
  background: var(--color-bg-card);
  border-radius: var(--radius);
  border-left: 2px solid var(--color-accent-dim);
  transition: border-color 0.25s;
}
.event-type:hover {
  border-left-color: var(--color-accent);
}

.event-type-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: rgba(196, 92, 60, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.event-type-icon svg { width: 18px; height: 18px; color: var(--color-accent); }

.event-type h4 {
  color: var(--color-cream);
  font-size: 0.95rem;
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: 0.1rem;
}
.event-type p {
  color: var(--color-text-dim);
  font-size: 0.82rem;
  margin: 0;
}

/* --- Booking Form --- */
.booking-form {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
}

.booking-form h3 {
  color: var(--color-cream);
  margin-bottom: var(--space-md);
  text-align: center;
  font-weight: 400;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.form-group {
  margin-bottom: var(--space-sm);
}

.form-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cream-dim);
  margin-bottom: 0.35rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid rgba(196, 92, 60, 0.08);
  border-radius: var(--radius);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color 0.25s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-group textarea { resize: vertical; min-height: 90px; }

.form-group select { cursor: pointer; }
.form-group select option { background: var(--color-bg-card); }

.form-submit {
  width: 100%;
  margin-top: var(--space-xs);
}

/* --- Promotions --- */
.promos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.promo-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: all 0.25s;
}
.promo-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-hover);
}

.promo-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Gallery (see components/gallery.html): the promotions cards without text, taller photographs. */
.gallery-section { padding: var(--space-xl) 0; background: var(--color-bg-warm); }
.gallery-card { margin: 0; }
.gallery-img { height: 240px; display: block; }
/* A GRID FITS WHAT IT HOLDS. Four photographs (the density floor, and the common own-pool count)
   sit in ONE row rather than 3 + a stranded fourth (royalseafood.ca, 2026-09-12); two sit as a
   centred pair rather than two thirds of a row with a hole in it (kwredginger.com, 2026-09-13 —
   a restaurant whose triage passed exactly two of its own photographs). Five and six keep three
   columns. The PROMOTIONS grid takes the same care but reads better 2x2, because its cards carry
   copy and four across at this container width sets them 16 words wide. */
.gallery-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
.gallery-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; }
.gallery-grid:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 560px); justify-content: center; }
.promos-grid:not(.gallery-grid):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promos-grid:not(.gallery-grid):has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; }
.gallery-caption { padding: 0.6rem 0.9rem; font-size: 0.8rem; color: var(--color-text-dim); }

.promo-day {
  padding: 0.5rem var(--space-md);
  background: rgba(196, 92, 60, 0.06);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.promo-day .promo-discount {
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}

.promo-body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
}
.promo-body h3 {
  color: var(--color-cream);
  font-size: 1.15rem;
  font-weight: 600;
  font-family: var(--font-body);
  margin-bottom: 0.35rem;
}
.promo-body p {
  color: var(--color-text-dim);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* --- Testimonials --- */
.testimonials {
  text-align: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
/* Same rule as the galleries and the order band: the number of real reviews decides the shape.
   Four quotes in a three-column grid strand the fourth (kwredginger.com, 2026-09-13); two sit as
   a centred pair. Three, five and six keep three columns. */
.testimonial-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.testimonial-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; }
.testimonial-grid:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 560px); justify-content: center; }

.rating-badges {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}
.rating-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.8rem;
  color: var(--color-cream-dim);
}
.rating-score {
  font-weight: 700;
  color: var(--color-cream);
  font-size: 0.95rem;
}
.rating-stars {
  color: var(--color-accent);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.testimonial-card {
  padding: var(--space-md);
  padding-top: calc(var(--space-md) + 3px);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent-dim);
  text-align: left;
  position: relative;
}

.testimonial-card::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 4rem;
  color: rgba(196, 92, 60, 0.15);
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  line-height: 1;
}

.testimonial-stars {
  color: var(--color-accent);
  font-size: 0.85rem;
  margin-bottom: var(--space-xs);
  letter-spacing: 0.1em;
}

.testimonial-card blockquote {
  color: var(--color-cream-dim);
  font-size: 0.9rem;
  line-height: 1.7;
  font-style: normal;
  font-family: var(--font-body);
  margin-bottom: var(--space-sm);
}

.testimonial-author {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-cream);
}

.testimonial-source {
  font-size: 0.72rem;
  color: var(--color-text-dim);
}

/* --- Footer --- */
.footer {
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) 0 var(--space-md);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.footer-brand img {
  height: 45px;
  margin-bottom: var(--space-sm);
}
.footer-brand img.logo-invert { filter: invert(1); }
.footer-brand img.logo-compact { height: 56px; }
.footer-brand img.logo-square { height: 64px; }
.footer-brand p {
  color: var(--color-text-dim);
  font-size: 0.85rem;
  max-width: 280px;
  line-height: 1.65;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--space-sm);
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}
.footer-social a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.footer-social a svg {
  width: 16px;
  height: 16px;
  color: var(--color-cream);
}
.footer-social a:hover svg { color: #fff; }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* cream-dim, not the accent: the accent is also the primary button's background under
     white text, so it must stay dark, and on the near-black footer it read 2.0:1 on the
     first proof and 2.8:1 as accent-light (text-contrast, floor 4.5). The June page's own
     accent computes ~3.9:1 here, so the design choice itself failed the gate. cream-dim is
     the master's own muted text colour (~9:1 on --color-bg) and keeps the small-caps label. */
  color: var(--color-cream-dim);
  margin-bottom: var(--space-sm);
}

.footer-credits { font-size: 0.75rem; color: var(--color-text-dim); margin: var(--space-md) 0 0; }
.footer-credits a { color: var(--color-text-dim); text-decoration: underline; }

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.45rem; font-size: 0.85rem; color: var(--color-text-dim); }
.footer-col a {
  color: var(--color-text-dim);
  font-size: 0.85rem;
}
.footer-col a:hover { color: var(--color-cream); }
.footer-contact li { display: flex; align-items: flex-start; gap: 0.5rem; }
.footer-contact li svg { width: 15px; height: 15px; flex: none; margin-top: 0.18rem; color: var(--color-accent); }

.footer-hours {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer-hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--color-text-dim);
}
.footer-hours-row span:first-child { color: var(--color-cream); font-weight: 500; }

.footer-bottom {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-text-dim);
}

/* --- Cart Drawer --- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: transparent; /* no page dim, drawer slides in over the page */
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: var(--color-bg-card);
  border-left: 1px solid var(--color-border);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
}
.cart-drawer.open { right: 0; }

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.cart-header h3 {
  color: var(--color-cream);
  font-size: 1.2rem;
  font-weight: 400;
}

.cart-close {
  background: none;
  border: none;
  color: var(--color-text-dim);
  font-size: 1.4rem;
  padding: 0.25rem;
}
.cart-close:hover { color: var(--color-cream); }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm) var(--space-md);
}

.cart-empty {
  text-align: center;
  color: var(--color-text-dim);
  padding: var(--space-lg) 0;
  font-size: 0.9rem;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-item-info h4 {
  color: var(--color-cream);
  font-size: 0.9rem;
  font-family: var(--font-body);
  font-weight: 500;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-cream);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

.cart-item-price {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.95rem;
}

.cart-footer {
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}
.cart-total span:first-child {
  color: var(--color-cream);
  font-weight: 600;
  font-size: 0.9rem;
}
.cart-total span:last-child {
  color: var(--color-accent);
  font-family: var(--font-body);          /* sans = decimals like .50 read cleanly */
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cart-checkout { width: 100%; justify-content: center; }

/* Nav cart badge */
.nav-cart {
  position: relative;
  background: none;
  border: none;
  color: var(--color-cream);
  padding: 0.25rem;
}
.nav-cart svg { width: 20px; height: 20px; }
.nav-cart:hover { color: var(--color-accent); }

.cart-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  width: 16px;
  height: 16px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-badge:empty { display: none; }

/* Add to cart button on menu items — obvious "+ Add" pill */
.menu-item-add {
  height: 34px;
  padding: 0 0.9rem;
  gap: 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  transition: all 0.2s;
}
.menu-item-add::after { content: 'Add'; }
.menu-item-add:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Order hint pill in the menu header */
.order-hint {
  margin-top: 0.85rem;
  display: inline-block;
  background: rgba(196, 92, 60, 0.12);
  border: 1px solid var(--color-border-hover);
  color: var(--color-cream);
  font-size: 0.92rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
}
.order-hint strong { color: var(--color-accent); }

/* Toast notification */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.85rem;
  z-index: 300;
  opacity: 0;
  transition: all 0.3s ease;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* --- Map --- */
#contact .section-label { justify-content: center; }

.map-container {
  width: 100%;
  height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Success Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.modal {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 420px;
  width: 90%;
  text-align: center;
  border: 1px solid var(--color-border);
  transform: scale(0.95);
  transition: transform 0.3s;
}
.modal-overlay.open .modal { transform: scale(1); }

.modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(74, 124, 63, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
}
.modal-icon svg { width: 28px; height: 28px; color: var(--color-green); }

.modal h3 {
  color: var(--color-cream);
  margin-bottom: var(--space-xs);
  font-weight: 400;
}
.modal p {
  color: var(--color-text-dim);
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --- Responsive --- */
@media (max-width: 968px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--color-bg-card);
    flex-direction: column;
    padding: 5rem var(--space-lg) var(--space-lg);
    gap: 1.5rem;
    transition: right 0.3s ease;
    border-left: 1px solid var(--color-border);
  }
  .nav-links.open { right: 0; }

  .hero-scrim {
    background: linear-gradient(180deg, rgba(12,15,18,0.85) 0%, rgba(12,15,18,0.6) 40%, rgba(12,15,18,0.85) 100%);
  }

  .hero-content {
    padding: 0 var(--space-md);
    text-align: center;
  }
  .hero-badge { justify-content: center; }
  .hero-actions { justify-content: center; flex-wrap: wrap; }
  .hero-sub { margin-left: auto; margin-right: auto; }

  .about-grid,
  .events-grid { grid-template-columns: 1fr; }

  .menu-grid { grid-template-columns: 1fr; }

  .order-options { grid-template-columns: repeat(2, 1fr); }

  .promos-grid,
  .testimonial-grid { grid-template-columns: 1fr; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .info-bar-inner { flex-direction: column; align-items: center; gap: var(--space-xs); }
  .hero-actions { flex-direction: column; align-items: center; }
  .order-options { grid-template-columns: 1fr; }
}

/* --- Back to Top --- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(196, 92, 60, 0.3);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--color-accent-light);
  transform: translateY(-2px);
}
.back-to-top svg { width: 20px; height: 20px; }

/* --- Animations --- */
/* Progressive enhancement: visible by default; hidden initial state only
   once JS tags <html class="js-anim"> (JS also carries a failsafe reveal),
   so screenshots/bots/no-JS never see blank sections. */
html.js-anim .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
html.js-anim .fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Non-impersonation disclosure (required on every preview) + conversion CTA */
.preview-badge {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 2000;
  display: inline-flex;
  align-items: stretch;
  background: rgba(12, 16, 24, 0.85);
  font-size: 0.72rem;
  line-height: 1;
  border-radius: 999px;
  overflow: hidden;
  opacity: 0.92;
}
.preview-badge:hover, .preview-badge:focus-within { opacity: 1; }
.preview-badge a {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  text-decoration: none;
  white-space: nowrap;
}
.preview-badge a:focus-visible {
  outline: 2px solid var(--color-accent-light);
  outline-offset: -2px;
}
.preview-badge-info, .preview-badge-info:hover { color: #fff; }
.preview-badge-cta {
  background: var(--color-accent);
  color: var(--color-cream);
  font-weight: 600;
}
.preview-badge-cta:hover { background: var(--color-accent-light); color: var(--color-cream); }