/* =========================================================================
   TAQUERIA EL COYOTE — "MIDNIGHT COYOTE"
   Static site styles. No frameworks, no build step.
   -------------------------------------------------------------------------
   1.  Custom properties
   2.  Reset & base
   3.  Accessibility helpers
   4.  Typography
   5.  Layout primitives
   6.  Buttons & links
   7.  Glass components
   8.  Atmosphere / decorative layers
   9.  Header & navigation
   10. Status pill
   11. Hero
   12. Section headings
   13. Menu cards
   14. Customization section
   15. Drinks section
   16. Gallery
   17. Hours & location
   18. CTA sections
   19. Contact page
   20. Footer
   21. Mobile action bar
   22. Animations
   23. Reduced-motion rules
   24. Responsive breakpoints
   25. Backdrop-filter fallback
   26. Order-direct landing pages
   27. Review widgets (form + carousel)
   ========================================================================= */

/* 0. SELF-HOSTED HEADLINE FONT -------------------------------------------
   To use the real "College Block" typeface everywhere (all headlines), drop a
   licensed web font file into assets/fonts/ and UNCOMMENT the block below.
   No remote request — the file is served from this site, like the images.
   A woff2 is ideal; keep a woff for older browsers. Free, commercially
   licensed near-matches include "Graduate" (SIL Open Font License). Note: a
   desktop-installed font is not automatically licensed for web embedding.

@font-face {
  font-family: "College Block";
  src: url("../fonts/college-block.woff2") format("woff2"),
       url("../fonts/college-block.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
------------------------------------------------------------------------- */

/* 1. CUSTOM PROPERTIES ---------------------------------------------------- */
:root {
  /* Core approved palette */
  --color-blue: #000282;
  --color-frost: #ebf1ed;
  --color-ink: #060d19;
  --color-white: #ffffff;

  /* Palette tints (blue lifted toward approved white — same hue family) */
  --blue-500: #000282;
  --blue-400: #1e2ba8;
  --blue-300: #3b49c8;
  --blue-200: #6f7ce0;

  /* RGB channels for rgba() composition */
  --rgb-blue: 0, 2, 130;
  --rgb-blue-lift: 59, 73, 200;
  --rgb-frost: 235, 241, 237;
  --rgb-ink: 6, 13, 25;
  --rgb-white: 255, 255, 255;

  /* Surfaces */
  --bg: #04060f;
  --bg-2: #060d19;
  --text: #f4f7fb;
  --text-dim: #b7c2d8;
  --text-faint: #8a97b3;

  /* Glass */
  --glass-bg: rgba(10, 18, 38, 0.55);
  --glass-bg-strong: rgba(9, 16, 34, 0.78);
  --glass-bg-light: rgba(235, 241, 237, 0.08);
  --glass-border: rgba(235, 241, 237, 0.14);
  --glass-border-strong: rgba(235, 241, 237, 0.26);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --blur: 18px;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);
  --glow-blue: 0 0 60px rgba(var(--rgb-blue-lift), 0.45);

  /* Type.
     Headlines target "College Block". Until a self-hosted file is added (see
     the @font-face note below), they fall back to the closest collegiate
     option available: Rockwell (a slab serif, common via MS Office) on
     Windows, Copperplate on macOS/iOS, then a heavy sans everywhere else. */
  --font-display: "College Block", "Rockwell Extra Bold", "Rockwell",
    "Copperplate", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Radii */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* Spacing / rhythm */
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --section-y: clamp(3.5rem, 9vw, 7rem);
  --maxw: 1200px;
  --measure: 62ch;

  --header-h: 68px;

  scroll-behavior: smooth;
}

/* 2. RESET & BASE --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.65;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Layered atmospheric background painted onto <body>.
   Two off-center repeating-radial gradients interfere to read like the
   contour lines of a topographic / route map — organic, not a tech grid.
   Sits over calmer blue glows so the middle of the page stays restful and
   the hero + CTA (which carry their own orbs) do the "popping". */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    repeating-radial-gradient(
      circle at 16% 10%,
      transparent 0 44px,
      rgba(var(--rgb-frost), 0.024) 44px 46px
    ),
    repeating-radial-gradient(
      circle at 88% 74%,
      transparent 0 52px,
      rgba(var(--rgb-frost), 0.02) 52px 54px
    ),
    radial-gradient(120% 80% at 78% -10%, rgba(var(--rgb-blue-lift), 0.24), transparent 55%),
    radial-gradient(90% 70% at 8% 8%, rgba(var(--rgb-blue), 0.34), transparent 50%),
    radial-gradient(140% 120% at 50% 120%, rgba(var(--rgb-blue-lift), 0.16), transparent 60%),
    linear-gradient(180deg, #04060f 0%, #060d19 45%, #04060d 100%);
}

/* Fine film grain — makes the gradients read as filmic rather than flat
   digital. Seamlessly tiled SVG noise, blended softly, very low opacity. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05;
  mix-blend-mode: soft-light;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:target {
  scroll-margin-top: calc(var(--header-h) + 20px);
}

/* 3. ACCESSIBILITY HELPERS ----------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  z-index: 1000;
  background: var(--color-white);
  color: var(--color-ink);
  padding: 0.7rem 1.2rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 3px solid var(--blue-200);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 4. TYPOGRAPHY ----------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.7rem, 1.6vw, 0.82rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-200);
  margin-bottom: 0.9rem;
}

p {
  color: var(--text-dim);
  max-width: var(--measure);
}

strong {
  color: var(--text);
}

/* 5. LAYOUT PRIMITIVES ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

main {
  display: block;
}

/* 6. BUTTONS & LINKS ------------------------------------------------------ */
.button {
  --btn-bg: var(--glass-bg-light);
  --btn-fg: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border-strong);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: 1rem;
  line-height: 1.1;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease,
    border-color 0.25s ease;
  will-change: transform;
}
.button svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}
.button:hover {
  transform: translateY(-2px);
}
.button:active {
  transform: translateY(0);
}

.button--primary {
  --btn-fg: var(--color-white);
  background: linear-gradient(135deg, var(--blue-400), var(--blue-500) 65%);
  border-color: rgba(var(--rgb-blue-lift), 0.9);
  box-shadow: 0 10px 30px rgba(var(--rgb-blue), 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.button--primary:hover {
  box-shadow: 0 16px 44px rgba(var(--rgb-blue-lift), 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.button--secondary {
  background: var(--glass-bg-light);
  color: var(--text);
}
.button--secondary:hover {
  border-color: var(--glass-border-strong);
  background: rgba(var(--rgb-frost), 0.12);
}

.button--ghost {
  border-color: transparent;
  background: transparent;
  min-height: 44px;
  padding-inline: 0.4rem;
}

.button--lg {
  min-height: 56px;
  padding: 1.05rem 2rem;
  font-size: 1.08rem;
}

.button--block {
  width: 100%;
}

/* animated arrow on primary CTAs */
.button .arrow {
  transition: transform 0.2s ease;
}
.button:hover .arrow {
  transform: translateX(4px);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 800;
  color: var(--blue-200);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, gap 0.2s ease;
}
.text-link:hover {
  color: var(--text);
  gap: 0.55em;
}
/* Match the button icon sizing — without this the inline SVG falls back to its
   intrinsic size and pushes the label onto two lines. */
.text-link svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* 7. GLASS COMPONENTS ----------------------------------------------------- */
.glass-panel {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  overflow: hidden;
}
.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    150deg,
    rgba(var(--rgb-frost), 0.1),
    transparent 40%
  );
  pointer-events: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-pill);
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-weight: 700;
  font-size: 0.92rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-200);
  box-shadow: 0 0 10px var(--blue-200);
}

/* 8. ATMOSPHERE / DECOR --------------------------------------------------- */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}
.orb--blue {
  background: radial-gradient(circle, rgba(var(--rgb-blue-lift), 0.55), transparent 70%);
}
.orb--deep {
  background: radial-gradient(circle, rgba(var(--rgb-blue), 0.6), transparent 70%);
}

.section > .container {
  position: relative;
  z-index: 1;
}

/* diagonal ice band inspired by the logo stripe */
.diagonal-band {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.diagonal-band::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  width: 60%;
  height: 160%;
  background: linear-gradient(
    105deg,
    transparent,
    rgba(var(--rgb-frost), 0.05) 45%,
    rgba(var(--rgb-frost), 0.12) 50%,
    rgba(var(--rgb-frost), 0.05) 55%,
    transparent
  );
  transform: rotate(8deg);
}

/* 9. HEADER & NAV --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 15, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  z-index: -1;
  transition: background 0.3s ease;
}
.site-header.is-scrolled::before {
  background: rgba(4, 6, 15, 0.82);
}
.site-header.is-scrolled {
  border-bottom-color: var(--glass-border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--color-white);
  margin-right: auto;
}
.brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(var(--rgb-blue-lift), 0.5));
}
.brand span {
  display: grid;
  /* Never let the brand wrap: it has flexible neighbours (the status pill),
     and a wrapping brand is what pushes the menu button out of reach. */
  white-space: nowrap;
}
.brand small {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  text-transform: uppercase;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
/* The in-nav Order link is only for the mobile drawer (where the header CTA
   button is hidden). Hide it on desktop so there is a single Order button. */
.primary-nav .nav-order {
  display: none;
}
.primary-nav a {
  display: inline-block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  color: var(--text-dim);
  transition: color 0.2s ease, background 0.2s ease;
}
.primary-nav a:hover {
  color: var(--color-white);
  background: var(--glass-bg-light);
}

.header-cta {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

/* hamburger */
.nav-toggle {
  display: none;
  flex: none; /* the menu button must never be shrunk or shoved off-screen */
  width: 48px;
  height: 48px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  background: var(--glass-bg-light);
  align-items: center;
  justify-content: center;
}
.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;
}

.nav-backdrop {
  display: none;
}

/* 10. STATUS PILL --------------------------------------------------------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}
.status-pill .status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: none;
  position: relative;
}
.status-pill.is-open .status-dot {
  background: #4ade80; /* status uses a neutral green ONLY as a live-state signal, paired with text */
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: pulse-dot 2.4s infinite;
}
.status-pill.is-closed .status-dot {
  background: #f0637a;
}
.status-pill .status-text strong {
  font-weight: 900;
}
.status-pill .status-sep {
  color: var(--text-faint);
  margin-inline: 0.1em;
}

/* 11. HERO ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(2rem, 6vw, 4rem);
  padding-bottom: var(--section-y);
  overflow: hidden;
}
.hero .orb--1 {
  width: 620px;
  height: 620px;
  top: -180px;
  right: -140px;
}
.hero .orb--2 {
  width: 460px;
  height: 460px;
  bottom: -160px;
  left: -160px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.hero-copy {
  max-width: 34rem;
}
.hero h1 {
  font-size: clamp(2.9rem, 8.5vw, 5.4rem);
  color: var(--color-white);
  text-shadow: 0 6px 40px rgba(var(--rgb-blue), 0.55);
  margin-bottom: 1.1rem;
}
.hero h1 .accent {
  color: transparent;
  background: linear-gradient(120deg, var(--color-white), var(--blue-200));
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-lede {
  font-size: clamp(1.05rem, 2.4vw, 1.22rem);
  color: var(--text-dim);
  margin-bottom: 1.7rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.1rem;
  color: var(--text-faint);
  font-weight: 600;
  font-size: 0.95rem;
}
.hero-meta .dot-sep {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-faint);
}

/* Hero logo stage */
.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  min-height: 320px;
}
.hero-stage .halo {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--rgb-blue-lift), 0.5),
    rgba(var(--rgb-blue), 0.25) 45%,
    transparent 70%
  );
  filter: blur(20px);
}
.hero-stage .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(var(--rgb-frost), 0.14);
}
.hero-stage .ring-1 {
  inset: 2%;
}
.hero-stage .ring-2 {
  inset: -6%;
  border-color: rgba(var(--rgb-frost), 0.08);
}
.hero-stage .ring-3 {
  inset: -15%;
  border-style: dashed;
  border-color: rgba(var(--rgb-frost), 0.07);
  animation: spin-slow 60s linear infinite;
}
.hero-logo {
  position: relative;
  z-index: 3;
  width: min(72%, 400px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 40px rgba(var(--rgb-blue-lift), 0.4));
  animation: float 7s ease-in-out infinite;
}

/* Floating food photos framed in glass, orbiting the logo.
   Outer element does the vertical float; inner holds the tilt + frame so the
   two transforms don't fight each other. */
.hero-photo {
  position: absolute;
  z-index: 2;
  animation: float 8s ease-in-out infinite;
}
.hero-photo__inner {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(var(--rgb-ink), 0.35);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.3s ease;
}
.hero-photo__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  pointer-events: none;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo:hover .hero-photo__inner {
  transform: rotate(0deg) scale(1.04);
}
.hero-photo--1 {
  width: 38%;
  top: -1%;
  left: -3%;
  --tilt: -6deg;
  animation-duration: 7.5s;
}
.hero-photo--2 {
  width: 41%;
  bottom: 1%;
  right: -4%;
  --tilt: 5deg;
  animation-duration: 8.6s;
  animation-delay: 0.6s;
}
.hero-photo--3 {
  width: 31%;
  top: 8%;
  right: 3%;
  --tilt: 4deg;
  animation-duration: 9.2s;
  animation-delay: 1.1s;
}

/* 12. SECTION HEADINGS ---------------------------------------------------- */
.section-heading {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.section-heading h2 {
  font-size: clamp(2rem, 5.2vw, 3.2rem);
  color: var(--color-white);
  margin-bottom: 0.8rem;
}
.section-heading p {
  font-size: clamp(1rem, 2.2vw, 1.12rem);
}
.section-heading.center {
  margin-inline: auto;
  text-align: center;
}
.section-heading.center p {
  margin-inline: auto;
}

/* 13. MENU CARDS ---------------------------------------------------------- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1.1rem, 2.5vw, 1.6rem);
}

.menu-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.menu-card:hover {
  transform: translateY(-6px);
  border-color: var(--glass-border-strong);
  box-shadow: var(--shadow-lg), var(--glow-blue);
}
.menu-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.menu-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.menu-card:hover .menu-card__media img {
  transform: scale(1.06);
}
.menu-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(var(--rgb-ink), 0.75)
  );
}
.menu-card__price {
  position: absolute;
  bottom: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-pill);
  background: rgba(var(--rgb-ink), 0.7);
  border: 1px solid var(--glass-border-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-white);
}
.menu-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.15rem 1.25rem 1.35rem;
  flex: 1;
}
.menu-card__body h3 {
  font-size: 1.22rem;
  color: var(--color-white);
  letter-spacing: -0.01em;
}
.menu-card__body p {
  font-size: 0.94rem;
  color: var(--text-dim);
  line-height: 1.55;
}
.menu-card__foot {
  margin-top: auto;
  padding-top: 0.65rem;
}

.section-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}

/* 14. CUSTOMIZATION ------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.customize-panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.chip-cloud .chip {
  font-size: 0.98rem;
  padding: 0.65rem 1.1rem;
}

/* 15. DRINKS -------------------------------------------------------------- */
.drinks {
  position: relative;
}
.drinks-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.drinks-panel__media {
  position: relative;
  min-height: 260px;
}
.drinks-panel__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.drinks-panel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--rgb-ink), 0.65)),
    linear-gradient(0deg, rgba(var(--rgb-ink), 0.4), transparent);
}
.drinks-panel__body {
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.drink-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.2rem;
}

/* 16. GALLERY ------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  gap: 0.75rem;
}
.gallery figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  aspect-ratio: 1 / 1;
}
.gallery figure.tall {
  grid-row: span 2;
  aspect-ratio: auto;
}
.gallery figure.wide {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery figure:hover img {
  transform: scale(1.07);
}
.gallery figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 1.4rem 0.9rem 0.7rem;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--color-white);
  background: linear-gradient(0deg, rgba(var(--rgb-ink), 0.85), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery figure:hover figcaption,
.gallery figure:focus-within figcaption {
  opacity: 1;
  transform: translateY(0);
}

/* 17. HOURS & LOCATION ---------------------------------------------------- */
.hours-location {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2rem);
}
.info-panel {
  padding: clamp(1.5rem, 4vw, 2.4rem);
  display: flex;
  flex-direction: column;
}
.hours-table {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.3rem;
}
.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.05rem;
  border-radius: var(--r-md);
  background: var(--glass-bg-light);
  border: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.hours-row .day {
  font-weight: 800;
  color: var(--text);
}
.hours-row .time {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.hours-row.is-today {
  background: rgba(var(--rgb-blue-lift), 0.18);
  border-color: rgba(var(--rgb-blue-lift), 0.55);
}
.hours-row.is-today .day::after {
  content: "Today";
  margin-left: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--blue-200);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pill);
  vertical-align: middle;
}
.info-panel .status-pill {
  margin-top: 1.3rem;
  align-self: flex-start;
}

.location-panel {
  position: relative;
  overflow: hidden;
}
.location-panel__media {
  position: relative;
  aspect-ratio: 16 / 10;
}
.location-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.location-panel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(var(--rgb-ink), 0.9), transparent 60%);
}
.location-panel__body {
  padding: clamp(1.5rem, 4vw, 2.4rem);
}
.address {
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text);
  font-weight: 600;
  margin: 0.8rem 0 1.3rem;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* 18. CTA SECTIONS -------------------------------------------------------- */
.cta-panel {
  position: relative;
  text-align: center;
  padding: clamp(2.4rem, 7vw, 4.5rem) clamp(1.4rem, 5vw, 3rem);
  overflow: hidden;
}
.cta-panel .orb {
  width: 460px;
  height: 460px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.7;
}
.cta-panel h2 {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  color: var(--color-white);
  margin-bottom: 0.9rem;
}
.cta-panel p {
  margin-inline: auto;
  margin-bottom: 1.8rem;
  font-size: 1.1rem;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

/* 19. CONTACT PAGE -------------------------------------------------------- */
.contact-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.5rem, 6vw, 4rem);
}
.contact-hero .orb--1 {
  width: 520px;
  height: 520px;
  top: -160px;
  right: -120px;
}
.contact-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.contact-hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  color: var(--color-white);
  margin-bottom: 1rem;
}
.contact-hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  min-height: 260px;
}
.contact-hero-stage .halo {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--rgb-blue-lift), 0.45), transparent 70%);
  filter: blur(24px);
}
.contact-hero-stage img {
  position: relative;
  width: min(70%, 320px);
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.6));
  animation: float 7s ease-in-out infinite;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.1rem, 2.5vw, 1.6rem);
}
.contact-card {
  padding: clamp(1.5rem, 3.5vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.contact-card .card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-500));
  border: 1px solid rgba(var(--rgb-frost), 0.2);
  box-shadow: var(--glow-blue);
  margin-bottom: 0.5rem;
}
.contact-card .card-icon svg {
  width: 26px;
  height: 26px;
  color: var(--color-white);
}
.contact-card h3 {
  font-size: 1.3rem;
  color: var(--color-white);
}
.contact-card .card-detail {
  font-weight: 700;
  color: var(--text);
  font-style: normal;
}
.contact-card .button-row {
  margin-top: auto;
  padding-top: 0.8rem;
}

.map-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.6rem;
}
.map-buttons .button {
  min-height: 68px;
  font-size: 1.05rem;
}

/* social */
.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}
.social-tile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-weight: 800;
  color: var(--text);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.social-tile:hover {
  transform: translateY(-3px);
  border-color: var(--glass-border-strong);
  background: rgba(var(--rgb-frost), 0.08);
}
.social-tile svg {
  width: 26px;
  height: 26px;
  color: var(--blue-200);
  flex: none;
}
.social-tile small {
  display: block;
  font-weight: 600;
  color: var(--text-faint);
  font-size: 0.8rem;
}

/* 20. FOOTER -------------------------------------------------------------- */
.site-footer {
  position: relative;
  margin-top: var(--section-y);
  border-top: 1px solid var(--glass-border);
  background: rgba(4, 6, 15, 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.footer-brand {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.footer-brand img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: none;
}
.footer-brand .name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-white);
  line-height: 1.1;
}
.footer-brand address {
  font-style: normal;
  color: var(--text-dim);
  font-size: 0.95rem;
  margin-top: 0.4rem;
  line-height: 1.5;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.9rem;
}
.footer-col ul {
  display: grid;
  gap: 0.6rem;
}
.footer-col a {
  color: var(--text-dim);
  font-weight: 600;
  transition: color 0.2s ease;
}
.footer-col a:hover {
  color: var(--color-white);
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.social-link {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    background 0.2s ease;
}
.social-link:hover {
  transform: translateY(-3px);
  color: var(--color-white);
  border-color: rgba(var(--rgb-blue-lift), 0.7);
  background: rgba(var(--rgb-blue-lift), 0.16);
}
.social-link svg {
  width: 22px;
  height: 22px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(2rem, 4vw, 2.6rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--glass-border);
  color: var(--text-faint);
  font-size: 0.86rem;
}
.footer-bottom a {
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-bottom a:hover {
  color: var(--text-dim);
}

/* 21. MOBILE ACTION BAR --------------------------------------------------- */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  gap: 0.6rem;
  padding: 0.6rem var(--gutter)
    calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(4, 6, 15, 0.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--glass-border);
}
.action-bar .button {
  flex: 1;
  min-height: 50px;
}

/* 21b. MARQUEE ("Follow the Flavor" ticker) ------------------------------ */
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--glass-border);
  background: linear-gradient(
    90deg,
    rgba(var(--rgb-blue), 0.16),
    rgba(var(--rgb-ink), 0.35) 50%,
    rgba(var(--rgb-blue), 0.16)
  );
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding-block: 0.85rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  padding-right: 1.9rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-white);
}
.marquee__group .sep {
  color: var(--blue-200);
  font-style: normal;
  filter: drop-shadow(0 0 8px rgba(var(--rgb-blue-lift), 0.6));
}
.marquee__group .accent {
  color: transparent;
  background: linear-gradient(120deg, var(--blue-200), var(--color-white));
  -webkit-background-clip: text;
  background-clip: text;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* 22. ANIMATIONS ---------------------------------------------------------- */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}
@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse-dot {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
}
@keyframes orb-drift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(18px, -14px);
  }
}

/* reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal.delay-1 {
  transition-delay: 0.08s;
}
.reveal.delay-2 {
  transition-delay: 0.16s;
}
.reveal.delay-3 {
  transition-delay: 0.24s;
}

.hero .orb,
.cta-panel .orb {
  animation: orb-drift 14s ease-in-out infinite;
}

/* 23. REDUCED MOTION ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .hero-logo,
  .hero-photo,
  .contact-hero-stage img,
  .hero-stage .ring-3 {
    animation: none;
  }
  /* Freeze the marquee in place rather than letting it snap to the end */
  .marquee__track {
    animation: none;
    transform: none;
  }
}

/* 24. RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* On desktop the header status pill is dropped (it's still shown in every hero)
   so the seven nav items + Order button never crowd. The drawer breakpoint sits
   at 1180px for the same reason. */
@media (min-width: 1181px) {
  .header-cta .status-pill {
    display: none;
  }
}

/* ...and it is dropped again on phones, at the other end. The pill's text is
   variable-length ("Closed • Opens tomorrow at 11:00 AM") and set to nowrap, so
   at phone widths it claimed ~310px of a ~354px header: the brand collapsed to
   a three-line wrap and the menu button was pushed clean off the screen, which
   left the mobile nav unreachable. Every hero carries the same pill, so no
   information is lost. The whole .header-cta goes rather than just the pill —
   the Order button inside it is already hidden below 1180px, so what remained
   was an empty flex child still contributing a gap.
   It stays visible from 761px to 1180px, where there is room for the full text. */
@media (max-width: 760px) {
  .header-cta {
    display: none;
  }
}

@media (max-width: 1180px) {
  .primary-nav,
  .header-cta .button--primary {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }

  /* Mobile nav drawer */
  .primary-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(84vw, 340px);
    display: block;
    padding: calc(var(--header-h) + 1.5rem) 1.5rem 2rem;
    background: rgba(6, 10, 22, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-left: 1px solid var(--glass-border);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
    z-index: 120;
    overflow-y: auto;
  }
  .primary-nav.is-open {
    transform: translateX(0);
  }
  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }
  .primary-nav a {
    display: block;
    padding: 0.9rem 1rem;
    font-size: 1.1rem;
    border-radius: var(--r-md);
    color: var(--text);
  }
  .primary-nav .nav-order {
    display: block;
    margin-top: 0.8rem;
  }
  .primary-nav .nav-order a {
    background: linear-gradient(135deg, var(--blue-400), var(--blue-500));
    color: var(--color-white);
    text-align: center;
    box-shadow: var(--glow-blue);
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(2, 4, 10, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 110;
  }
  .nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }

  body.nav-open {
    overflow: hidden;
  }

  .action-bar {
    display: flex;
  }
  /* keep fixed bar from covering footer */
  .site-footer {
    padding-bottom: calc(clamp(2.5rem, 5vw, 3.5rem) + 74px +
      env(safe-area-inset-bottom));
  }
}

@media (max-width: 760px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-copy {
    margin-inline: auto;
    order: 2;
  }
  .hero-stage {
    order: 1;
    min-height: 300px;
  }
  /* Keep the floating photos on-screen and uncluttered when stacked */
  .hero-photo--1 {
    left: 0;
  }
  .hero-photo--2 {
    right: 0;
  }
  .hero-photo--3 {
    display: none;
  }
  .hero-actions,
  .hero-meta {
    justify-content: center;
  }
  .hero-lede {
    margin-inline: auto;
  }

  .split,
  .drinks-panel,
  .hours-location,
  .contact-hero-grid {
    grid-template-columns: 1fr;
  }
  .drinks-panel__media {
    min-height: 200px;
    order: -1;
  }
  .contact-hero-stage {
    order: -1;
    min-height: 200px;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery figure.wide {
    grid-column: span 2;
  }
  .gallery figure.tall {
    grid-row: span 1;
    aspect-ratio: 1 / 1;
  }

  .map-buttons {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  :root {
    --blur: 12px; /* lighter blur on small screens for performance */
  }
  /* soften the grain a touch on small screens */
  body::after {
    opacity: 0.035;
  }
  .menu-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .brand small {
    display: none;
  }
  .hero h1 {
    text-shadow: 0 4px 24px rgba(var(--rgb-blue), 0.5);
  }
}

/* 25. BACKDROP-FILTER FALLBACK ------------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-panel,
  .menu-card,
  .status-pill,
  .chip,
  .social-tile,
  .primary-nav {
    background: rgba(9, 16, 34, 0.94);
  }
  .site-header::before {
    background: rgba(4, 6, 15, 0.96);
  }
  .action-bar {
    background: rgba(4, 6, 15, 0.97);
  }
  .drinks-panel,
  .location-panel {
    background: rgba(9, 16, 34, 0.94);
  }
}

/* print (basic) */
@media print {
  .site-header,
  .action-bar,
  .hero-stage,
  .orb {
    display: none !important;
  }
  body::before,
  body::after {
    display: none;
  }
}

/* 26. ORDER-DIRECT LANDING PAGES ----------------------------------------- */
.ld-lede {
  font-size: clamp(1.05rem, 2.4vw, 1.22rem);
  color: var(--text-dim);
}
.ld-thanks {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.ld-thanks p {
  margin-inline: auto;
  font-size: clamp(1.02rem, 2.3vw, 1.15rem);
}

/* Fee comparison */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 1.6rem);
  align-items: stretch;
}
.compare-card {
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.compare-card h3 {
  font-size: 1.3rem;
  color: var(--color-white);
}
.compare-card .tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.compare-card--marketplace .tag {
  background: rgba(var(--rgb-frost), 0.1);
  color: var(--text-faint);
  border: 1px solid var(--glass-border);
}
.compare-card--direct {
  border-color: rgba(var(--rgb-blue-lift), 0.55);
  box-shadow: var(--shadow-md), var(--glow-blue);
}
.compare-card--direct .tag {
  background: linear-gradient(135deg, var(--blue-400), var(--blue-500));
  color: var(--color-white);
  border: 1px solid rgba(var(--rgb-frost), 0.3);
}

.fee-bar {
  display: flex;
  height: 16px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: rgba(var(--rgb-frost), 0.07);
  border: 1px solid var(--glass-border);
}
.fee-bar .seg {
  display: block;
  height: 100%;
}
.fee-bar .seg--1 { background: rgba(var(--rgb-frost), 0.6); }
.fee-bar .seg--2 { background: rgba(var(--rgb-frost), 0.35); }
.fee-bar .seg--3 { background: rgba(var(--rgb-blue-lift), 0.85); }
.fee-bar .seg--good {
  background: linear-gradient(90deg, var(--blue-300), var(--blue-200));
}

.fee-list {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 0;
}
.fee-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: 0.95rem;
  color: var(--text-dim);
}
.fee-list li:last-child { border-bottom: 0; }
.fee-list b {
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
}
.fee-total {
  margin-top: auto;
  font-weight: 700;
  color: var(--text-dim);
}
.fee-total .big {
  font-family: var(--font-display);
  font-size: 1.5em;
  color: var(--color-white);
  letter-spacing: -0.01em;
}
.compare-card--direct .fee-total .big {
  color: var(--blue-200);
}

/* Big savings callout */
.savings-callout {
  text-align: center;
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.savings-callout .number {
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 6rem);
  line-height: 1;
  color: transparent;
  background: linear-gradient(120deg, var(--color-white), var(--blue-200));
  -webkit-background-clip: text;
  background-clip: text;
}
.savings-callout .caption {
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  color: var(--text-dim);
  max-width: 44ch;
  margin: 0.6rem auto 0;
}

/* Benefit grid */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
.benefit {
  padding: clamp(1.3rem, 3vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.benefit .benefit-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-500));
  border: 1px solid rgba(var(--rgb-frost), 0.2);
  margin-bottom: 0.3rem;
}
.benefit .benefit-icon svg { width: 24px; height: 24px; color: var(--color-white); }
.benefit h3 { font-size: 1.12rem; color: var(--color-white); }
.benefit p { font-size: 0.94rem; }

/* Trademark / affiliation disclaimer */
.trademark-note {
  margin-top: 1.2rem;
  font-size: 0.8rem;
  color: var(--text-faint);
  max-width: 70ch;
}

/* Footer "order direct" link row */
.footer-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  align-items: center;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--glass-border);
  font-size: 0.9rem;
  color: var(--text-faint);
}
.footer-alt strong { color: var(--text-dim); font-weight: 800; }
.footer-alt a { color: var(--text-dim); font-weight: 700; }
.footer-alt a:hover { color: var(--color-white); }
.footer-alt .sep { color: var(--text-faint); opacity: 0.6; }

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

/* 27. REVIEW WIDGETS (form + carousel) -----------------------------------
   The review widget is third-party markup in a shadow root, so we can't (and
   shouldn't) restyle its internals. It already ships themed in our palette —
   an ink card with frost text — so it gets a transparent, centered shell
   instead of a competing glass card: the vendor's card IS the card. We only
   reserve height so the page doesn't jump when it finishes loading. */
.review-shell {
  max-width: 720px;
  margin-inline: auto;
}
.review-embed {
  min-height: 320px;
  color: var(--text);
}
/* Custom elements are inline by default — give the form real box behaviour. */
.review-embed emr-collect-review-form {
  display: block;
  width: 100%;
}
.review-embed__fallback {
  padding: clamp(1.2rem, 3.5vw, 2rem);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  max-width: none;
}
.review-embed__fallback a {
  color: var(--blue-200);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.review-note {
  margin: 1.2rem auto 0;
  font-size: 0.84rem;
  color: var(--text-faint);
  text-align: center;
}

/* Reviews carousel on the homepage. Same rules as the form above: the vendor
   themes its own cards, we only give the custom element box behaviour and
   reserve height so the section below it doesn't jump on load. */
.review-carousel {
  min-height: 300px;
  color: var(--text);
}
.review-carousel emr-simple-carousel {
  display: block;
  width: 100%;
}

/* Hero social-proof strip (avatars widget) on the city + marketplace pages.
   Unlike the carousel and the collect form — which the reviews account themes
   in ink/frost — this widget is configured light: its summary line is painted
   #374151 via an inline style inside its shadow root, and there is no ::part
   or custom property to reach it from here. Hence a frost pill instead of the
   dark glass used elsewhere; dark slate on frost reads cleanly and the gold
   stars still pop. If the account's text_color is ever switched to frost
   (#EBF1ED) to match the other two widgets, swap the two values marked below
   for var(--glass-bg) and var(--glass-border).

   The pill is hung on :defined so it only exists once the vendor script has
   registered the element. Before that — or if the script never loads at all —
   the custom element stays an empty inline box: no pill, no reserved margin,
   and the hero reads exactly as it did before. (Styling :defined rather than
   hiding :not(:defined) is deliberate: display:none can starve a lazy widget
   of the layout it needs to decide to load.) */
.hero-proof {
  display: contents;
}
.hero-proof emr-avatars:defined {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 1.3rem;
  padding: 0.55rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(var(--rgb-frost), 0.94);       /* swap 1 of 2 */
  border: 1px solid rgba(var(--rgb-frost), 0.45); /* swap 2 of 2 */
  box-shadow: var(--shadow-sm);
}