/* ============================================================
   Seoul Dak — Homepage (6-section design from references)
   Anton display + DM Serif Display italic + Inter body
   Cream + red brand palette. Scoped under body.sd-home.
   ============================================================

   RESPONSIVE BREAKPOINT SYSTEM (desktop-first, max-width)
   ──────────────────────────────────────────────────────
   ULTRA  @media (min-width: 1600px)   — 24"+ refinement (caps + scale)
   LG     @media (max-width: 1200px)   — Tablet landscape / small laptop
   MD     @media (max-width: 900px)    — Tablet portrait — nav collapses
   SM     @media (max-width: 640px)    — Phone — single column everywhere
   XS     @media (max-width: 420px)    — Small phone polish (iPhone SE)

   EXCEPTION: Locations section uses max-width: 760px for its 2-col card
   grid (the .sd-loc__map 3×3 grid). Math is tuned to 760, kept as-is.
   ============================================================ */
body.sd-home {
  /* Container width tokens — replace the 6 historic magic numbers */
  --container-max:   1560px;   /* default content sections */
  --container-wide:  1720px;   /* visually wide: menu, social, footer top */
  --container-ultra: 1860px;   /* footer hero only */

  --sd-cream:        #f3dfe1;
  --sd-cream-soft:   #f3dfe1;
  --sd-cream-deep:   #e6c8cc;
  --sd-cream-warm:   #efd5d9;
  --sd-white:        #ffffff;
  --sd-red:          #D62929;
  --sd-red-dark:     #b81f1f;
  --sd-red-soft:     #fdf0f1;
  --sd-burgundy:     #2a0a0a;
  --sd-burgundy-2:   #1a0606;
  --sd-text:         #2a1818;
  --sd-text-mute:    #6e5959;
  --sd-line:         rgba(214,41,41,0.18);
  --sd-line-soft:    rgba(74,14,14,0.10);

  --f-disp:   "Oswald", "Bebas Neue", "Inter", sans-serif;
  --f-script: "Caveat", "Brush Script MT", cursive;
  --f-body:   "Inter", system-ui, sans-serif;

  --r-pill: 999px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  background: var(--sd-cream);
  color: var(--sd-text);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.sd-home img { display: block; max-width: 100%; height: auto; }
body.sd-home button { font: inherit; cursor: pointer; }

/* ============================================================
   SCROLLING — free, smooth, scroll-driven motion.
   Section scroll-snapping (the old "100vh slides") was removed in
   favour of natural free scrolling + Lenis momentum (js/home.js)
   + scroll-driven parallax & staggered reveals. Reduced-motion and
   no-Lenis (CDN offline) both gracefully fall back to native scroll.
   ============================================================ */
/* Lenis smooth-scroll helper styles — only active once JS adds .lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Reveal-on-scroll utility — refined, premium ease + subtle settle */
.sd-rev {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  transition: opacity 0.85s var(--ease), transform 1s var(--ease);
}
.sd-rev.is-revealed { opacity: 1; transform: none; }
.sd-rev[style*="--rev-delay"] { transition-delay: var(--rev-delay); }

/* ============================================================
   HEADER
   ============================================================ */
.sd-home-header {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - 32px);
  max-width: var(--container-max);
  padding: 0;
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: 999px;
  border: 1px solid rgba(74,14,14,0.06);
  box-shadow: 0 14px 40px -18px rgba(74,14,14,0.20), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: top 0.4s var(--ease), padding 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s ease;
}
.sd-home-header.is-scrolled {
  top: 8px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 18px 50px -20px rgba(74,14,14,0.30), inset 0 1px 0 rgba(255,255,255,0.7);
  border-color: rgba(74,14,14,0.10);
}
.sd-home-header__inner {
  padding: 10px 14px 10px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.sd-home-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--sd-red);
  transition: transform 0.3s var(--ease);
}
.sd-home-header__brand:hover { transform: scale(1.04); }
.sd-home-header__brand img {
  height: 36px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(214,41,41,0.20));
}
.sd-home-header__brand span {
  font-family: var(--f-disp);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sd-home-header__nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sd-home-header__nav a {
  position: relative;
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-text);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 999px;
  transition: color 0.2s var(--ease), background 0.25s var(--ease);
}
.sd-home-header__nav a span { position: relative; z-index: 2; }
.sd-home-header__nav a::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 2px;
  background: var(--sd-red);
  border-radius: 99px;
  transform: translateX(-50%);
  transition: width 0.3s var(--ease);
}
.sd-home-header__nav a:hover {
  color: var(--sd-red);
  background: rgba(214,41,41,0.07);
}
.sd-home-header__nav a:hover::before { width: 14px; }

/* Right cluster: live pill + CTA + hamburger */
.sd-home-header__right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sd-home-header__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-body);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sd-text);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(44,138,74,0.10);
  border: 1px solid rgba(44,138,74,0.18);
}
.sd-home-header__live-dot {
  width: 7px; height: 7px;
  background: #2c8a4a;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(44,138,74,0.20);
  animation: sd-hdr-pulse 1.6s ease-in-out infinite;
}
@keyframes sd-hdr-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(44,138,74,0.22); }
  50%      { box-shadow: 0 0 0 7px rgba(44,138,74,0.06); }
}

.sd-home-header__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  background: linear-gradient(135deg, #e21b22 0%, #b8141a 100%);
  color: #fff;
  font-family: var(--f-body);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 8px 22px -8px rgba(214,41,41,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
  overflow: hidden;
  isolation: isolate;
}
.sd-home-header__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.7s cubic-bezier(.2,.9,.25,1.1);
  z-index: 1;
}
.sd-home-header__cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(214,41,41,0.65); }
.sd-home-header__cta:hover::before { transform: translateX(110%); }
.sd-home-header__cta-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  display: grid;
  place-items: center;
  z-index: 2;
}
.sd-home-header__cta-icon svg { width: 14px; height: 14px; }
.sd-home-header__cta > span { z-index: 2; }
.sd-home-header__cta-arr {
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform 0.25s var(--ease);
}
.sd-home-header__cta-arr svg { width: 13px; height: 13px; }
.sd-home-header__cta:hover .sd-home-header__cta-arr { transform: translateX(4px); }
.sd-home-header__hamburger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--sd-text);
}
.sd-home-header__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* Mobile nav drawer */
.sd-home-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--sd-cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  gap: 24px;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  visibility: hidden;
}
.sd-home-mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}
.sd-home-mobile-nav__close {
  position: absolute;
  top: 20px; right: 24px;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  font-size: 2rem;
  color: var(--sd-text);
  cursor: pointer;
}
.sd-home-mobile-nav ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.sd-home-mobile-nav ul a {
  font-family: var(--f-disp);
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sd-text);
  text-decoration: none;
}
.sd-home-mobile-nav__cta {
  margin-top: 24px;
  padding: 16px 36px;
  background: var(--sd-red);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.85rem;
  border-radius: var(--r-pill);
  text-decoration: none;
}

/* ============================================================
   COMMON — buttons, eyebrows, pills
   ============================================================ */
.sd-eyebrow {
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sd-red);
  margin: 0;
}
.sd-eyebrow--dark { color: var(--sd-burgundy); }

/* Hero eyebrow gets a short underline accent (matches the reference) */
.sd-h-hero .sd-eyebrow {
  position: relative;
  padding-bottom: 14px;
}
.sd-h-hero .sd-eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 2px;
  background: var(--sd-red);
}
.sd-h1, .sd-h2 {
  font-family: var(--f-disp);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
  color: var(--sd-text);
}
.sd-h1 { font-size: clamp(3rem, 7.5vw, 7rem); }
.sd-h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.sd-script {
  font-family: var(--f-script);
  font-style: normal;
  font-weight: 700;
  color: var(--sd-text);
  letter-spacing: 0;
  line-height: 1.05;
}
.sd-h-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  min-height: 48px;
}
.sd-h-btn--red {
  background: var(--sd-red);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(214,41,41,0.45);
}
.sd-h-btn--red:hover {
  background: var(--sd-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(214,41,41,0.55);
}
.sd-h-btn--cream {
  background: var(--sd-cream-soft);
  color: var(--sd-text);
  border-color: var(--sd-line-soft);
}
.sd-h-btn--cream:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(74,14,14,0.18);
}
.sd-h-btn--dark {
  background: var(--sd-burgundy);
  color: #fff;
}
.sd-h-btn--dark:hover {
  background: #000;
  transform: translateY(-2px);
}
.sd-h-btn .sd-arr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  font-size: 0.9rem;
  transition: transform 0.25s var(--ease);
}
.sd-h-btn--cream .sd-arr { background: rgba(214,41,41,0.10); color: var(--sd-red); }
.sd-h-btn:hover .sd-arr { transform: translateX(3px); }

/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
.sd-h-hero {
  position: relative;
  padding: 108px 48px 32px;
  background: var(--sd-cream);
  overflow: hidden;
  isolation: isolate;
}
.sd-h-hero::before {
  /* Giant faint kor watermark */
  content: '닭';
  position: absolute;
  top: 8%; right: -8%;
  font-family: var(--f-disp);
  font-size: clamp(14rem, 45vw, 60rem);
  line-height: 0.85;
  color: var(--sd-red);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.sd-h-hero__grid {
  position: relative;
  z-index: 3;
  max-width: var(--container-max);
  margin: 0;                      /* flush-left so text column aligns with the features strip below */
  display: block;                 /* single-column — image is now full-bleed bg */
  min-height: 540px;
}
.sd-h-hero__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 640px;     /* keep text on the left half — image fills the right half */
}
.sd-h-hero__h1 {
  color: var(--sd-red);
  font-size: clamp(2.8rem, 5.6vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
}
.sd-h-hero__script {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  color: var(--sd-text);
  margin: 0;
  line-height: 1.1;
}
.sd-h-hero__body {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sd-text-mute);
  max-width: 460px;
  margin: 0;
}
.sd-h-hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Food collage right column */
/* ── Hero image as full-bleed background ────────────
   The image fills the entire hero. A cream-to-transparent
   veil on the left keeps the headline + body text readable
   against any photo content underneath.                  */
.sd-h-hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--sd-cream);
  will-change: transform;   /* JS magnet loop animates this every frame */
}
.sd-h-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  pointer-events: none;
  filter: contrast(1.04) saturate(1.06);
  opacity: 0;
  transform: scale(1.04);
  transform-origin: 65% 50%;
  will-change: opacity, transform;
  /* LINEAR opacity feels perceptually smoothest for photo cross-fades
     (no S-curve bunching that reads as a "flash") */
  transition: opacity 2.5s linear;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sd-h-hero__image.is-active {
  opacity: 1;
  transform: none;     /* single static hero image — no Ken Burns zoom */
  animation: none;
}
.sd-h-hero__image.is-exit {
  opacity: 0;
  /* The exit slide keeps its current scale (no jump) — animation continues
     until classes are cleaned up by JS */
}
@keyframes sd-hero-burns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}
/* Cream-to-transparent veil — solid on the left for text legibility,
   fading away to the right so the food spread reads cleanly. */
.sd-h-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      var(--sd-cream) 0%,
      var(--sd-cream) 22%,
      rgba(243,223,225,0.88) 38%,
      rgba(243,223,225,0.40) 55%,
      rgba(243,223,225,0.0) 75%);
}

/* Bottom features strip — promo "ticket" cards, left-aligned */
.sd-h-hero__features {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 48px 0 0;             /* flush-left at the section's padding edge */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px;
}
.sd-feature {
  /* per-variant accent tokens — each modifier below overrides these */
  --fx-accent:      var(--sd-red);
  --fx-accent-deep: var(--sd-red-dark);
  --fx-glow:        rgba(214,41,41,0.32);

  position: relative;
  flex: 0 1 332px;
  max-width: 346px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  row-gap: 7px;
  align-items: center;
  padding: 16px 18px 15px;
  background: var(--sd-cream-soft);
  border-radius: 20px;
  border: 1px solid var(--sd-line-soft);
  box-shadow: 0 14px 30px -22px rgba(74,14,14,0.25),
              inset 0 1px 0 rgba(255,255,255,0.55);
  text-decoration: none;
  color: var(--sd-text);
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease, border-color 0.3s ease;
  overflow: hidden;
  isolation: isolate;
}
.sd-feature:focus-visible {
  outline: 2px solid var(--fx-accent);
  outline-offset: 3px;
}
/* Decorative silhouette (each variant overrides) — large, bottom-right, clipped */
.sd-feature::before {
  content: '';
  position: absolute;
  bottom: -14px;
  right: -10px;
  width: 108px;
  height: 108px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  opacity: 0.15;
  transform: rotate(8deg);
  pointer-events: none;
  z-index: 0;
  transition: transform 0.6s var(--ease), opacity 0.4s ease;
}
/* Subtle dotted grain overlay */
.sd-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(74,14,14,0.4) 0.6px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
/* Light sweep — parked off-card; glides across once per hover (no
   reverse transition, so it snaps home invisibly on mouse-out) */
.sd-feature__shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.45) 50%, transparent 62%);
  transform: translateX(-130%);
}
.sd-feature:hover .sd-feature__shine {
  transform: translateX(130%);
  transition: transform 0.85s ease;
}
/* Accent line along the bottom — reveals on hover (same language as menu cards) */
.sd-feature__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fx-accent), var(--fx-accent-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
  z-index: 2;
}
.sd-feature:hover .sd-feature__bar { transform: scaleX(1); }

/* Summer Menu — sunny cream + iced drink / bubble tea cup */
.sd-feature--summer {
  --fx-accent:      #b75c1f;
  --fx-accent-deep: #8f4314;
  --fx-glow:        rgba(183,92,31,0.35);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,0.5), transparent 55%),
    linear-gradient(135deg, #fdeac0 0%, #f8d8a9 62%, #f5cd92 100%);
  border-color: rgba(190,130,55,0.28);
}
.sd-feature--summer::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23a05c1c' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><path d='M55 50 L145 50 L135 175 Q100 185 65 175 Z'/><line x1='50' y1='65' x2='150' y2='65'/><line x1='115' y1='20' x2='115' y2='65'/><circle cx='80' cy='115' r='6' fill='%23a05c1c'/><circle cx='105' cy='130' r='6' fill='%23a05c1c'/><circle cx='90' cy='150' r='6' fill='%23a05c1c'/><circle cx='115' cy='160' r='5' fill='%23a05c1c'/></g><g fill='%23a05c1c' opacity='0.7'><path d='M30 30 L35 25 L40 30 L35 35 Z'/><path d='M170 40 L175 35 L180 40 L175 45 Z'/></g></svg>");
}
/* Lunch Meals — bold red + clock/utensil */
.sd-feature--lunch {
  --fx-accent:      #c8161e;
  --fx-accent-deep: #8e0d13;
  --fx-glow:        rgba(168,19,26,0.32);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,0.5), transparent 55%),
    linear-gradient(135deg, #fff1f2 0%, #fcd6d9 62%, #f9c4c9 100%);
  border-color: rgba(215,25,32,0.26);
}
.sd-feature--lunch::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23a8131a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><circle cx='100' cy='100' r='62'/><polyline points='100 60 100 100 130 118'/><path d='M30 30 L50 50 M170 30 L150 50 M30 170 L50 150 M170 170 L150 150'/></g></svg>");
}
/* Ramondays — warm noodle bowl */
.sd-feature--ramondays {
  --fx-accent:      #8a3c20;
  --fx-accent-deep: #6b2c15;
  --fx-glow:        rgba(138,60,32,0.35);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,0.5), transparent 55%),
    linear-gradient(135deg, #ffe9d4 0%, #f9ccb4 62%, #f5bd9f 100%);
  border-color: rgba(180,80,30,0.28);
}
.sd-feature--ramondays::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%237a3520' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M30 110 Q100 175 170 110 L160 110 Q100 155 40 110 Z' fill='%237a3520' fill-opacity='0.7'/><path d='M55 100 Q100 115 145 100'/><path d='M65 90 Q100 100 135 90'/><path d='M85 35 Q88 50 80 60 Q88 70 85 80'/><path d='M105 25 Q115 45 105 60 Q115 75 105 90'/><path d='M125 35 Q130 55 122 65'/></g></svg>");
}
.sd-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -22px var(--fx-glow),
              0 18px 34px -24px rgba(74,14,14,0.35),
              inset 0 1px 0 rgba(255,255,255,0.55);
  border-color: var(--fx-accent);
}
.sd-feature:hover::before {
  transform: rotate(-5deg) scale(1.12);
  opacity: 0.28;
}

/* ─── Campaign banner photos as tile backgrounds ───
   Same tile size/ratio; a left→right scrim keeps the text side
   readable while the dish shows through on the right. */
.sd-feature--summer {
  background:
    linear-gradient(92deg, rgba(253,238,205,0.97) 0%, rgba(253,238,205,0.85) 38%, rgba(253,238,205,0.1) 76%, rgba(253,238,205,0) 100%),
    url("../assets/home/Banner Summer Menu.webp") right 35% / cover no-repeat;
}
.sd-feature--lunch {
  background:
    linear-gradient(92deg, rgba(252,224,227,0.97) 0%, rgba(252,224,227,0.85) 38%, rgba(252,224,227,0.1) 76%, rgba(252,224,227,0) 100%),
    url("../assets/home/Banner Lunch.webp") right 35% / cover no-repeat;
}
.sd-feature--ramondays {
  background:
    linear-gradient(92deg, rgba(250,228,205,0.97) 0%, rgba(250,228,205,0.85) 38%, rgba(250,228,205,0.1) 76%, rgba(250,228,205,0) 100%),
    url("../assets/home/Banner Ramonday.webp") right 35% / cover no-repeat;
}
/* The photos replace the old line-art silhouettes */
.sd-feature--summer::before,
.sd-feature--lunch::before,
.sd-feature--ramondays::before { display: none; }
.sd-feature__icon {
  grid-row: 1;
  grid-column: 1;
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 6px 14px -8px var(--fx-glow);
  color: var(--fx-accent);
  flex-shrink: 0;
  z-index: 1;
  transition: transform 0.35s var(--ease-spring), background-color 0.3s ease, color 0.3s ease;
}
.sd-feature__icon svg { width: 20px; height: 20px; stroke-width: 2; }
.sd-feature:hover .sd-feature__icon {
  background: var(--fx-accent);
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
}
.sd-feature__title {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  font-family: var(--f-disp);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fx-accent-deep);
  z-index: 1;
}
/* Coupon-style schedule tag, top-right */
.sd-feature__tag {
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
  align-self: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px dashed var(--fx-accent);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fx-accent-deep);
  background: rgba(255,255,255,0.85);   /* solid-ish: sits over the banner photo */
  white-space: nowrap;
  z-index: 1;
}
.sd-feature__desc {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: rgba(42,24,24,0.78);
  margin: 0;
  line-height: 1.45;
  z-index: 1;
}
.sd-feature__cta {
  grid-row: 3;
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fx-accent-deep);
  z-index: 1;
}
.sd-feature__arr {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--fx-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  box-shadow: 0 8px 16px -8px var(--fx-glow);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.sd-feature__cta-label { transition: transform 0.3s var(--ease); }
.sd-feature:hover .sd-feature__arr { transform: translateX(5px); }
.sd-feature:hover .sd-feature__cta-label { transform: translateX(3px); }

/* ============================================================
   SECTION 2 — MENU HIGHLIGHTS (compact cream carousel)
   Local palette layered on top of home tokens.
   ============================================================ */
.sd-menu {
  --sd-mn-bg:     #f3dfe1;
  --sd-mn-card:   rgba(255,255,255,0.72);
  --sd-mn-dark:   #241c1c;
  --sd-mn-muted:  #5d4b47;
  --sd-mn-soft:   #6b5b57;
  --sd-mn-red:    #d71920;
  --sd-mn-border: rgba(120,70,40,0.08);

  background: var(--sd-mn-bg);
  color: var(--sd-mn-dark);
  padding: 42px 48px 40px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sd-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 10%, rgba(215,25,32,0.045), transparent 22%),
    radial-gradient(circle at 20% 92%, rgba(215,25,32,0.035), transparent 20%);
  pointer-events: none;
  z-index: 0;
}

/* ─── Head row: title left, tabs+arrows on the right ─── */
.sd-menu__head {
  max-width: var(--container-max);
  margin: 0 auto 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: end;
  position: relative;
  z-index: 1;
}
.sd-menu__head-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

/* Eyebrow pill with flame icon */
.sd-menu__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: rgba(255,255,255,0.6);
  color: var(--sd-mn-red);
  border: 1px solid rgba(215,25,32,0.22);
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sd-menu__chip svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Headline — compact 2-line, tighter than before */
.sd-menu__h2 {
  position: relative;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1.0;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  color: var(--sd-mn-dark);
}
.sd-menu__h2 .sd-italic { color: var(--sd-mn-red); font-style: normal; }
.sd-menu__h2-mark {
  position: absolute;
  top: -10px;
  left: 100%;
  transform: translateX(8px);
  width: 36px;
  height: 30px;
  color: var(--sd-mn-red);
}

.sd-menu__sub {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--sd-mn-muted);
  max-width: 320px;
  margin: 4px 0 0;
}

/* ─── Centered category tabs ─── */
.sd-menu__filter {
  justify-self: center;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 6px;
}
.sd-menu__pill {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--sd-mn-dark);
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.sd-menu__pill:hover { color: var(--sd-mn-red); }
.sd-menu__pill.is-active {
  background: var(--sd-mn-red);
  color: #fff;
  padding: 12px 26px;
}
.sd-menu__pill.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: var(--sd-mn-red);
  border-radius: 999px;
}

/* ─── Carousel arrows (right) ─── */
.sd-menu__nav {
  justify-self: end;
  align-self: end;
  display: inline-flex;
  gap: 12px;
  padding-bottom: 4px;
}
.sd-menu__nav-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.78);
  color: var(--sd-mn-dark);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px -6px rgba(35,24,20,0.18);
  transition: all 0.2s var(--ease);
}
.sd-menu__nav-btn:hover { background: #fff; color: var(--sd-mn-red); }
.sd-menu__nav-btn--primary {
  background: var(--sd-mn-red);
  color: #fff;
  box-shadow: 0 10px 24px -6px rgba(215,25,32,0.42);
}
.sd-menu__nav-btn--primary:hover { background: #b81620; color: #fff; }

/* ─── Carousel row ─ explicit grid: the wide track (--sd-mexp) sits on
   whichever card is expanded; [data-expanded] moves it on hover. ─ */
.sd-menu__row {
  --sd-mexp: 1.95fr;                /* width of the expanded track */
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr var(--sd-mexp) 1fr 1fr;
  gap: 20px;
  align-items: stretch;
  justify-content: center;
  margin: 8px auto 0;
  max-width: var(--container-max);
}
/* Category switch: old set fades down-out, new set staggers up-in */
.sd-menu__row.is-swapping .sd-mcard {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.sd-menu__row.is-swapping-in .sd-mcard {
  animation: sd-mcard-in 0.45s var(--ease) backwards;
}
.sd-menu__row.is-swapping-in .sd-mcard:nth-child(2) { animation-delay: 0.06s; }
.sd-menu__row.is-swapping-in .sd-mcard:nth-child(3) { animation-delay: 0.12s; }
.sd-menu__row.is-swapping-in .sd-mcard:nth-child(4) { animation-delay: 0.18s; }
.sd-menu__row.is-swapping-in .sd-mcard:nth-child(5) { animation-delay: 0.24s; }
@keyframes sd-mcard-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Cards: compact small + horizontal featured ─── */
.sd-mcard {
  position: relative;
  height: 336px;
  background: var(--sd-mn-card);
  border: 1px solid var(--sd-mn-border);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 208px 1fr;
  text-decoration: none;
  color: var(--sd-mn-dark);
  box-shadow: 0 12px 30px -10px rgba(35,24,20,0.10);
  transition:
    grid-template-columns 0.55s cubic-bezier(.4,.0,.2,1),
    grid-template-rows 0.55s cubic-bezier(.4,.0,.2,1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.25s var(--ease);
  min-width: 0;
}
.sd-mcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -18px rgba(35,24,20,0.28);
  border-color: rgba(215,25,32,0.25);
}

.sd-mcard__badge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: var(--sd-mn-red);
  color: #fff;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sd-mcard__badge svg { width: 11px; height: 11px; }
.sd-mcard__badge--best {
  background: #fff;
  color: var(--sd-mn-red);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.18);
  font-size: 0.62rem;
}

.sd-mcard__media {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  background: #fff;
  overflow: hidden;
}
/* body.sd-home prefix: must outrank the global `body.sd-home img { height:auto }`
   rule, otherwise wide photos (Solo Seoul Meal, Matcha Latte…) leave a gap */
body.sd-home .sd-mcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.sd-mcard__body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
}
.sd-mcard__name {
  font-family: var(--f-body);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sd-mn-dark);
  margin: 0;
}
.sd-mcard__accent { display: none; }
.sd-mcard__desc {
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--sd-mn-soft);
  margin: 0;
  min-height: 0;
  flex: 1;
}
/* Regular card CTA — circular arrow, bottom-right (no price) */
.sd-mcard__arrow {
  margin-top: auto;
  align-self: flex-end;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: transparent;
  color: var(--sd-mn-red);
  border: 1px solid rgba(215,25,32,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.25s var(--ease);
}
.sd-mcard__arrow svg { width: 15px; height: 15px; }
.sd-mcard:hover .sd-mcard__arrow {
  background: var(--sd-mn-red);
  color: #fff;
  transform: translateX(3px);
}
/* Featured card CTA — text link (no price) */
.sd-mcard__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sd-mn-red);
  font-family: var(--f-body);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sd-mcard__cta svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
.sd-mcard:hover .sd-mcard__cta svg { transform: translateX(5px); }

/* ─── Featured (Best Seller) card — horizontal: body LEFT, media RIGHT ─── */
.sd-mcard.is-default-active {
  height: 336px;
  flex-direction: row;
  display: grid;
  grid-template-columns: 0.88fr 1.32fr;   /* bigger media column */
  grid-template-rows: 1fr;                 /* single full-height row (override base) */
  background: rgba(255,255,255,0.85);
  box-shadow: 0 22px 44px -14px rgba(35,24,20,0.18);
}
.sd-mcard.is-default-active .sd-mcard__media {
  height: 100%;
  order: 2;
}
.sd-mcard.is-default-active .sd-mcard__body {
  order: 1;
  padding: 38px 22px 22px;
  justify-content: space-between;
  gap: 8px;
}
.sd-mcard.is-default-active .sd-mcard__name {
  font-family: var(--f-disp);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05;
}
.sd-mcard.is-default-active .sd-mcard__accent {
  display: block;
  width: 40px;
  height: 3px;
  background: var(--sd-mn-red);
  border-radius: 999px;
  margin: 8px 0 6px;
}
.sd-mcard.is-default-active .sd-mcard__desc {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--sd-mn-muted);
  flex: 0 0 auto;
}
.sd-mcard.is-default-active .sd-mcard__cta {
  font-size: 0.78rem;
}

/* ─── Compact / expanded content layers ───
   __min = compact content (name, desc, arrow)
   __max = expanded content (display name, accent, desc, CTA).
   Below the desktop breakpoint only ONE layer renders per state —
   display:contents makes its children direct flex items of __body,
   so the tablet/mobile rules keep working on the same effective DOM. */
.sd-mcard__min { display: contents; }
.sd-mcard__max { display: none; }
.sd-mcard.is-default-active .sd-mcard__min { display: none; }
.sd-mcard.is-default-active .sd-mcard__max { display: contents; }

/* ─── Desktop hover-expand morph ───
   The card becomes a free canvas: the photo morphs between a top strip
   and a right column, while the two text layers crossfade in place.
   The row's wide grid track follows [data-expanded] (set by home.js). */
@media (min-width: 1025px) {
  .sd-menu__row {
    transition: grid-template-columns 0.62s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .sd-menu__row[data-expanded="0"] { grid-template-columns: var(--sd-mexp) 1fr 1fr 1fr 1fr; }
  .sd-menu__row[data-expanded="1"] { grid-template-columns: 1fr var(--sd-mexp) 1fr 1fr 1fr; }
  .sd-menu__row[data-expanded="3"] { grid-template-columns: 1fr 1fr 1fr var(--sd-mexp) 1fr; }
  .sd-menu__row[data-expanded="4"] { grid-template-columns: 1fr 1fr 1fr 1fr var(--sd-mexp); }

  .sd-mcard,
  .sd-mcard.is-default-active { display: block; }
  .sd-mcard { --sd-mcard-media-h: 208px; }
  .sd-mcard__body,
  .sd-mcard.is-default-active .sd-mcard__body { display: contents; }

  /* Photo: top strip (compact) ⇄ right column (expanded) */
  .sd-mcard__media,
  .sd-mcard.is-default-active .sd-mcard__media {
    position: absolute;
    top: 0; right: 0;
    width: auto; height: auto;
    transition:
      left   0.62s cubic-bezier(0.32, 0.72, 0, 1),
      bottom 0.62s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .sd-mcard .sd-mcard__media { left: 0; bottom: calc(100% - var(--sd-mcard-media-h)); }
  .sd-mcard.is-default-active .sd-mcard__media { left: 40%; bottom: 0; }
  .sd-mcard__media img { transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .sd-mcard.is-default-active .sd-mcard__media img { transform: scale(1.05); }

  /* Both text layers always render; geometry is fixed per layer so text
     never re-styles mid-fade — they purely crossfade + slide. */
  .sd-mcard__min, .sd-mcard__max,
  .sd-mcard.is-default-active .sd-mcard__min,
  .sd-mcard.is-default-active .sd-mcard__max {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 2;
  }
  .sd-mcard__min {
    left: 0; right: 0; bottom: 0;
    top: var(--sd-mcard-media-h);
    gap: 4px;
    padding: 14px 14px 16px;
  }
  .sd-mcard__max {
    left: 0; top: 0; bottom: 0;
    width: 40%;
    gap: 8px;
    padding: 36px 18px 20px 22px;
    justify-content: space-between;
  }
  .sd-mcard .sd-mcard__min {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition:
      opacity 0.26s ease 0.22s,
      transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s,
      visibility 0s linear 0.22s;
  }
  .sd-mcard.is-default-active .sd-mcard__min {
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
  }
  .sd-mcard .sd-mcard__max {
    opacity: 0;
    transform: translateX(-14px);
    visibility: hidden;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
  }
  .sd-mcard.is-default-active .sd-mcard__max {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition:
      opacity 0.3s ease 0.2s,
      transform 0.46s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s,
      visibility 0s linear 0.2s;
  }

  /* Pin each layer's typography to its own state so a layer fading OUT
     keeps its look (the is-default-active rules above would otherwise
     restyle it mid-flight). */
  .sd-mcard .sd-mcard__min .sd-mcard__name,
  .sd-mcard.is-default-active .sd-mcard__min .sd-mcard__name {
    font-family: var(--f-body);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.3;
  }
  .sd-mcard .sd-mcard__min .sd-mcard__desc,
  .sd-mcard.is-default-active .sd-mcard__min .sd-mcard__desc {
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--sd-mn-soft);
  }
  .sd-mcard .sd-mcard__max .sd-mcard__name,
  .sd-mcard.is-default-active .sd-mcard__max .sd-mcard__name {
    font-family: var(--f-disp);
    font-size: clamp(1.2rem, 1.3vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.05;
  }
  .sd-mcard .sd-mcard__max .sd-mcard__accent,
  .sd-mcard.is-default-active .sd-mcard__max .sd-mcard__accent {
    display: block;
    width: 40px; height: 3px;
    background: var(--sd-mn-red);
    border-radius: 999px;
    margin: 8px 0 6px;
  }
  .sd-mcard .sd-mcard__max .sd-mcard__desc,
  .sd-mcard.is-default-active .sd-mcard__max .sd-mcard__desc {
    font-size: clamp(0.76rem, 0.8vw, 0.86rem);
    line-height: 1.5;
    color: var(--sd-mn-muted);
    flex: 0 0 auto;
  }
  .sd-mcard .sd-mcard__max .sd-mcard__cta,
  .sd-mcard.is-default-active .sd-mcard__max .sd-mcard__cta {
    font-size: 0.74rem;
  }
}

/* Filter dim state */
.sd-mcard.is-dim { opacity: 0.32; pointer-events: none; }

/* ─── Carousel dots ─── */
.sd-menu__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 22px auto 0;
}
.sd-menu__dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(35,24,20,0.18);
}
.sd-menu__dots span.is-active { background: var(--sd-mn-red); width: 22px; border-radius: 999px; }

/* ─── "Why Seoul Dak" perks — compact hover-expand strip ───
   One slim row of 4 tiles (lives at the bottom of the About
   section). Each tile shows icon + title; hovering a tile makes it
   grow along the row (same expand language as the menu cards) and
   unfolds its description. Tablet: 2×2 with descriptions open.
   Hidden ≤900 (approved mobile design has no perks strip). */
.sd-perks {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 56px auto 0;
  display: flex;
  gap: 12px;
}
.sd-benefit {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 112px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  border-radius: 18px;
  background: linear-gradient(165deg, #ffffff 0%, #fff6f1 100%);
  border: 1px solid var(--b-accent-soft);
  box-shadow: 0 14px 32px -18px rgba(35,24,20,0.2);
  overflow: hidden;
  cursor: default;
  isolation: isolate;
  transition:
    flex-grow 0.55s var(--ease),
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.35s ease;
}
/* Accent halo that slowly drifts in the corner — alive at rest */
.sd-benefit::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--b-accent-soft), transparent 65%);
  z-index: 0;
  animation: sd-perk-drift 11s ease-in-out infinite alternate;
}
@keyframes sd-perk-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-30px, 22px) scale(1.2); }
}
/* Light sweep glides across on hover */
.sd-benefit::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -40%;
  width: 200%;
  height: 80px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%);
  transform: rotate(8deg) translateX(-110%);
  z-index: 1;
  pointer-events: none;
}
.sd-benefit:hover {
  flex-grow: 1.9;
  transform: translateY(-4px);
  box-shadow: 0 26px 48px -20px rgba(35,24,20,0.3);
  border-color: var(--b-accent);
}
.sd-benefit:hover::after {
  transform: rotate(8deg) translateX(110%);
  transition: transform 0.85s ease 0.15s;
}

.sd-benefit__num {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1.7rem;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--b-accent);
  opacity: 0.35;
  letter-spacing: 0.02em;
  transition: opacity 0.3s ease, color 0.3s ease, transform 0.4s var(--ease);
  z-index: 2;
}
.sd-benefit:hover .sd-benefit__num {
  color: var(--b-accent);
  opacity: 0.85;
  transform: scale(1.08);
}

/* Icon — tilted gradient sticker; wiggles awake on hover */
.sd-benefit__icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--b-accent), var(--b-accent-deep, #701010));
  color: #fff;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  transform: rotate(-5deg);
  box-shadow: 0 10px 20px -9px var(--b-accent), inset 0 1px 0 rgba(255,255,255,0.35);
}
.sd-benefit:hover .sd-benefit__icon {
  animation: sd-perk-wiggle 0.55s var(--ease) forwards;
}
@keyframes sd-perk-wiggle {
  0%   { transform: rotate(-5deg) scale(1); }
  35%  { transform: rotate(7deg) scale(1.12); }
  70%  { transform: rotate(-2deg) scale(1.05); }
  100% { transform: rotate(-5deg) scale(1.08); }
}
.sd-benefit__icon svg { width: 22px; height: 22px; }

/* Body — title always visible; description unfolds (0fr → 1fr) */
.sd-benefit__body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 0fr;
  row-gap: 0px;
  min-width: 0;
  padding-right: 26px;
  transition: grid-template-rows 0.5s var(--ease), row-gap 0.5s var(--ease);
}
.sd-benefit:hover .sd-benefit__body {
  grid-template-rows: auto 1fr;
  row-gap: 5px;
}
.sd-benefit__title {
  font-family: var(--f-body);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--sd-mn-dark);
  margin: 0;
  transition: color 0.25s ease;
}
.sd-benefit:hover .sd-benefit__title { color: var(--b-accent); }
.sd-benefit__desc {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--sd-mn-soft);
  margin: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.35s var(--ease);
}
.sd-benefit:hover .sd-benefit__desc {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease 0.12s, transform 0.4s var(--ease) 0.12s;
}
/* Accent bar along the bottom */
.sd-benefit__bar {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 10px;
  height: 2px;
  background: var(--b-accent);
  border-radius: 99px;
  transform: scaleX(0.12);
  transform-origin: left;
  opacity: 0.35;
  transition: transform 0.5s var(--ease), opacity 0.3s ease;
  z-index: 2;
}
.sd-benefit:hover .sd-benefit__bar { transform: scaleX(1); opacity: 1; }

/* Tablet: 2×2 grid, descriptions always open */
@media (max-width: 1024px) {
  .sd-perks { flex-wrap: wrap; }
  .sd-benefit { flex: 1 1 calc(50% - 12px); height: auto; padding: 18px 20px; }
  .sd-benefit:hover { flex-grow: 1; }
  .sd-benefit__body,
  .sd-benefit:hover .sd-benefit__body { grid-template-rows: auto auto; row-gap: 5px; }
  .sd-benefit__desc { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .sd-perks { display: none; }
}

/* ─── Responsive ─────────────────────────────── */
@media (max-width: 1240px) {
  .sd-menu { padding: 36px 36px 32px; }
  .sd-menu__head { grid-template-columns: 1fr auto; gap: 22px; }
  .sd-menu__filter { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-start; overflow-x: auto; }
  .sd-menu__nav { justify-self: end; }
  .sd-menu__row {
    --sd-mexp: 2.3fr;
    gap: 14px;
  }
  .sd-mcard, .sd-mcard.is-default-active { height: 314px; }
  .sd-mcard { grid-template-rows: 188px 1fr; --sd-mcard-media-h: 188px; }
}

@media (max-width: 1024px) {
  .sd-menu__head { grid-template-columns: 1fr; }
  .sd-menu__nav { justify-self: end; }
  .sd-menu__row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 4px 4px 18px;
    margin: 0 -36px;
    padding-left: 36px; padding-right: 36px;
  }
  .sd-mcard {
    flex: 0 0 212px;
    width: 212px;
    scroll-snap-align: start;
  }
  .sd-mcard.is-default-active {
    flex: 0 0 400px;
    width: 400px;
    grid-template-columns: 1fr 1.12fr;
  }
}

@media (max-width: 640px) {
  .sd-menu { padding: 28px 20px; }
  .sd-menu__h2 { font-size: clamp(2rem, 9vw, 3rem); }
  .sd-mcard.is-default-active {
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 200px auto;
  }
  .sd-mcard.is-default-active .sd-mcard__media { height: 100%; order: 1; }
  .sd-mcard.is-default-active .sd-mcard__body { order: 2; padding: 16px; }
}

/* ============================================================
   SECTION 3 — LOCATIONS (cream-on-cream, map-card, branded pins)
   Palette: sd-loc-* local tokens layered on top of the home palette
   ============================================================ */
.sd-loc {
  --sd-loc-bg:      #f3dfe1;          /* page pink — on theme */
  --sd-loc-card:    #ffffff;          /* card surface */
  --sd-loc-border:  rgba(120,70,40,0.10);
  --sd-loc-soft:    rgba(215,25,32,0.08);
  --sd-loc-dark:    #241c1c;
  --sd-loc-muted:   #6f6260;
  --sd-loc-red:     #d71920;

  background: var(--sd-loc-bg);
  color: var(--sd-loc-dark);
  padding: 64px 48px 56px;
  position: relative;
  overflow: hidden;
}

.sd-loc__grid {
  position: relative;
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 56px;
  max-width: var(--container-max);
  margin: 0 auto;
  align-items: start;
}
.sd-loc__text { display: flex; flex-direction: column; gap: 0; }

/* Eyebrow with pin icon */
.sd-loc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sd-loc-red);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 22px;
}

/* Headline */
.sd-loc__title {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.sd-loc__title .red  { color: var(--sd-loc-red); }
.sd-loc__title .dark { color: var(--sd-loc-dark); }

.sd-loc__title-line {
  display: block;
  width: 110px;
  height: 4px;
  background: var(--sd-loc-red);
  border-radius: 99px;
  margin: 4px 0 24px;
}

.sd-loc__desc {
  max-width: 520px;
  color: #3d3230;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 24px;
}

/* CTA buttons — sharper, restaurant-brand style */
.sd-loc__actions {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  margin-bottom: 28px;
}
.sd-loc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 18px;
  border-radius: 10px;
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.sd-loc__btn svg { width: 16px; height: 16px; }
.sd-loc__btn--primary {
  background: var(--sd-loc-red);
  color: #fff;
  box-shadow: 0 14px 28px -10px rgba(215,25,32,0.45);
}
.sd-loc__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -10px rgba(215,25,32,0.55);
}
.sd-loc__btn--secondary {
  background: rgba(255,248,236,0.7);
  color: var(--sd-loc-red);
  border: 1px solid rgba(215,25,32,0.55);
}
.sd-loc__btn--secondary:hover {
  background: #fff;
  transform: translateY(-2px);
}

/* Stat cards — premium tile design */
.sd-loc__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 640px;
  margin-bottom: 18px;
}
.sd-loc__stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 16px;
  background: linear-gradient(160deg, #ffffff 0%, #fff5f6 100%);
  border: 1px solid var(--sd-loc-border);
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 26px -16px rgba(74,14,14,0.18);
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease, border-color 0.35s ease, background 0.4s ease;
  cursor: default;
  min-width: 0;
}
.sd-loc__stat-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,25,32,0.16), transparent 65%);
  pointer-events: none;
  transition: transform 0.5s var(--ease), opacity 0.4s ease;
  z-index: 0;
}
.sd-loc__stat-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sd-loc-red), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
  z-index: 1;
}
.sd-loc__stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(215,25,32,0.35);
  box-shadow: 0 24px 50px -22px rgba(74,14,14,0.35);
  background: #fff;
}
.sd-loc__stat-card:hover::before { transform: scale(1.4); }
.sd-loc__stat-card:hover::after { transform: scaleX(1); }

.sd-loc__stat-accent {
  position: absolute;
  left: 0; top: 14%;
  width: 3px;
  height: 72%;
  background: linear-gradient(180deg, var(--sd-loc-red), transparent);
  border-radius: 0 99px 99px 0;
  transform: scaleY(0.3);
  transform-origin: top;
  transition: transform 0.4s var(--ease);
  z-index: 1;
}
.sd-loc__stat-card:hover .sd-loc__stat-accent { transform: scaleY(1); }

.sd-loc__stat-icon {
  position: relative;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #fce3e4 0%, #f8c8ca 100%);
  color: var(--sd-loc-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 6px 14px -6px rgba(215,25,32,0.30);
  transition: background 0.3s ease, color 0.3s ease, transform 0.45s var(--ease), border-radius 0.45s var(--ease);
}
.sd-loc__stat-icon::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1.5px dashed rgba(215,25,32,0.30);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease, inset 0.35s ease, transform 0.6s linear;
}
.sd-loc__stat-card:hover .sd-loc__stat-icon {
  background: linear-gradient(135deg, var(--sd-loc-red) 0%, #b8141a 100%);
  color: #fff;
  transform: rotate(-8deg) scale(1.06);
  border-radius: 50%;
}
.sd-loc__stat-card:hover .sd-loc__stat-icon::before {
  opacity: 1;
  inset: -6px;
  animation: sd-stat-spin 6s linear infinite;
}
@keyframes sd-stat-spin { to { transform: rotate(360deg); } }
.sd-loc__stat-icon svg { width: 22px; height: 22px; transition: transform 0.4s var(--ease); }
.sd-loc__stat-card:hover .sd-loc__stat-icon svg { transform: scale(1.08); }

.sd-loc__stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.sd-loc__stat-number {
  font-family: var(--f-disp);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--sd-loc-red);
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--sd-loc-red) 0%, #8a0e13 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sd-loc__stat-number small {
  font-family: var(--f-body);
  font-size: 0.55em;
  font-weight: 800;
  letter-spacing: 0.18em;
  margin-left: 4px;
  text-transform: uppercase;
  -webkit-text-fill-color: var(--sd-loc-muted);
  color: var(--sd-loc-muted);
}
.sd-loc__stat-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-loc-dark);
  line-height: 1.1;
  margin-top: 4px;
}
.sd-loc__stat-sub {
  font-size: 0.66rem;
  color: var(--sd-loc-muted);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

/* ── Cuisines feature card — fills the left bottom gap ── */
.sd-loc__feature {
  margin-top: 22px;
  background: linear-gradient(160deg, #fffefb 0%, #fff8ec 100%);
  border: 1px solid var(--sd-loc-border);
  border-radius: 18px;
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 36px -22px rgba(74,14,14,0.20);
}
.sd-loc__feature::before {
  content: '';
  position: absolute;
  top: -50px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,25,32,0.10), transparent 65%);
  pointer-events: none;
}
.sd-loc__feature-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.sd-loc__feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: rgba(44,138,74,0.10);
  border: 1px solid rgba(44,138,74,0.18);
  color: var(--sd-loc-dark);
  font: 800 0.66rem/1 var(--f-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
}
.sd-loc__feature-dot {
  width: 7px; height: 7px;
  background: #2c8a4a;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(44,138,74,0.20);
  animation: sd-foot-pulse 1.6s ease-in-out infinite;
}
.sd-loc__feature-title {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--sd-loc-dark);
  line-height: 1.05;
  margin: 0;
}
.sd-loc__feature-title span { color: var(--sd-loc-red); }

.sd-loc__feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.sd-loc__cuisine {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--sd-loc-border);
  border-radius: 12px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.sd-loc__cuisine:hover {
  background: #fff;
  border-color: rgba(215,25,32,0.30);
  transform: translateX(2px);
}
.sd-loc__cuisine-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: rgba(215,25,32,0.10);
  color: var(--sd-loc-red);
  display: grid;
  place-items: center;
  transition: background 0.25s ease, color 0.25s ease;
}
.sd-loc__cuisine-icon svg { width: 16px; height: 16px; }
.sd-loc__cuisine:hover .sd-loc__cuisine-icon {
  background: var(--sd-loc-red);
  color: #fff;
}
.sd-loc__cuisine-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sd-loc__cuisine-text strong {
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--sd-loc-dark);
}
.sd-loc__cuisine-text em {
  font-style: normal;
  font-size: 0.66rem;
  color: var(--sd-loc-muted);
}
.sd-loc__feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--sd-loc-red);
  font: 800 0.74rem/1 var(--f-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1.5px solid var(--sd-loc-red);
  padding-bottom: 3px;
  position: relative;
  z-index: 1;
  transition: gap 0.25s ease;
}
.sd-loc__feature-cta:hover { gap: 14px; }


/* Brand note card */
.sd-loc__note {
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255,248,236,0.62);
  border: 1px solid var(--sd-loc-border);
  border-radius: 14px;
  margin-top: 4px;
}
.sd-loc__note-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sd-loc-soft);
  color: var(--sd-loc-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sd-loc__note-icon svg { width: 18px; height: 18px; }
.sd-loc__note > div { display: flex; flex-direction: column; gap: 2px; }
.sd-loc__note strong {
  font-family: var(--f-body);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--sd-loc-dark);
}
.sd-loc__note span {
  font-size: 0.78rem;
  color: var(--sd-loc-muted);
  line-height: 1.4;
}

/* ── RIGHT column ─ map card + cuisine pill ───────── */
.sd-loc__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  padding: 0;
}

.sd-loc__map {
  position: relative;        /* positioning context for the on-map tiles */
  width: 100%;
  max-width: 620px;          /* ~30%+ bigger; the map is now the dominant element */
  margin: 0 auto;
  align-self: center;
  background: transparent;
}
/* Stylized city-map texture (CSS-only — replaced by .sd-loc__map-bg image if one exists) */
.sd-loc__map-tex {
  position: absolute;
  inset: 0;
  background:
    /* faux river */
    radial-gradient(ellipse 38% 22% at 78% 38%, #d8e7e0 0%, transparent 60%),
    /* faux greenery */
    radial-gradient(ellipse 25% 18% at 18% 76%, #e3e0c2 0%, transparent 60%),
    radial-gradient(ellipse 18% 14% at 62% 80%, #e3e0c2 0%, transparent 60%),
    /* faux road grid */
    repeating-linear-gradient( 30deg, transparent 0 22px, rgba(255,255,255,0.22) 22px 24px, transparent 24px 46px ),
    repeating-linear-gradient(-30deg, transparent 0 28px, rgba(255,255,255,0.18) 28px 30px, transparent 30px 56px ),
    /* base cream */
    linear-gradient(135deg, #f0e3cf 0%, #e7d8c1 100%);
}
.sd-loc__map-bg {
  position: relative;        /* in-flow: defines the map's size; tiles overlay it */
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  border-radius: 20px;
  border: 1px solid rgba(120,70,40,0.12);
  background: #efe5d5;
  box-shadow: 0 22px 48px -20px rgba(42,28,20,0.20);
}
.sd-loc__routes {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
}
.sd-loc__routes path {
  stroke: var(--sd-loc-red);
  stroke-width: 1.4;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  fill: none;
}

/* Branded pins (red drop with white heart inside) */
.sd-loc__pin {
  position: absolute;
  width: 36px;
  height: 46px;
  margin-left: -18px;
  margin-top: -42px;
  z-index: 4;
  background: var(--sd-loc-red);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 8px 18px -4px rgba(215,25,32,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-loc__pin-mark {
  transform: rotate(45deg);
  width: 18px; height: 18px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sd-loc__pin-mark svg { width: 100%; height: 100%; }

/* Branch tiles — compact, semi-transparent, floating ON the map */
.sd-loc__card {
  position: absolute;
  width: 188px;
  min-width: 0;
  background: rgba(255,255,255,0.58);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border-radius: 12px;
  padding: 7px 10px 7px 7px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 9px;
  align-items: center;
  box-shadow: 0 12px 26px -12px rgba(35,24,20,0.30);
  border: 1px solid rgba(255,255,255,0.55);
  z-index: 6;
  text-decoration: none;
  color: var(--sd-loc-dark);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), background 0.28s var(--ease), border-color 0.28s var(--ease);
}
.sd-loc__card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.9);
  border-color: rgba(215,25,32,0.2);
  box-shadow: 0 22px 40px -12px rgba(35,24,20,0.4);
}
.sd-loc__card-img {
  width: 46px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sd-loc-soft);
  flex-shrink: 0;
}
.sd-loc__card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.sd-loc__card:hover .sd-loc__card-img img { transform: scale(1.06); }
.sd-loc__card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sd-loc__card-head {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-bottom: 3px;
}
.sd-loc__card-name {
  font-family: var(--f-disp);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--sd-loc-dark);
  line-height: 1.05;
}
.sd-loc__card-status {
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: #36a853;
  background: #eaf8ed;
  border-radius: 99px;
  padding: 3px 8px;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: flex-start;
  transition: transform 0.25s var(--ease);
}
.sd-loc__card:hover .sd-loc__card-status { transform: scale(1.06); }
.sd-loc__card-status--popular {
  color: #b86b00;
  background: #fff0d6;
}
.sd-loc__card-addr {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  color: var(--sd-loc-muted);
  font-size: 0.7rem;
  line-height: 1.3;
}
.sd-loc__card-addr svg { width: 11px; height: 11px; flex-shrink: 0; margin-top: 2px; color: var(--sd-loc-red); }
/* Clamp to 2 lines: shows the full/near-full address on narrow cards without
   uneven runaway height (cards float content-height, centered in their row band). */
.sd-loc__card-addr span {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.sd-loc__card-meta {
  color: var(--sd-loc-muted);
  font-size: 0.66rem;
}
.sd-loc__card-body {
  justify-content: space-between;
}
.sd-loc__card-link {
  color: var(--sd-loc-red);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.25s var(--ease);
}
.sd-loc__card:hover .sd-loc__card-link { gap: 10px; }
/* Branch tile positions — absolutely placed ON the map at 6 edge spots.
   Positioned via top/left/right (NOT transform) so `transform` stays free for
   the scroll-reveal + hover lift and survives reduced-motion `transform:none`. */
/* Positions traced from the user's annotated map boxes (square map, % coords). */
.sd-loc__card--a { top: 5%;  left: 44%; }    /* Oshiwara    — top, right of its pin */
.sd-loc__card--b { top: 35%; left: 3%; }     /* Bandra      — left, Mumbai coast */
.sd-loc__card--c { top: 35%; right: 3.5%; }  /* Viman Nagar — upper-right */
.sd-loc__card--d { top: 53%; left: 17%; }    /* Wakad       — center, below its pin */
.sd-loc__card--e { top: 79%; left: 16%; }    /* Jayanagar   — bottom-left */
.sd-loc__card--f { top: 70%; right: 1%; }    /* Koramangala — lower-right, Karnataka */

/* Scroll-reveal: scoped override adds a slight scale to the fade-up.
   Only touches `transform`; the top/left/right placement is unaffected. */
.sd-loc__card.sd-rev { transform: translateY(20px) scale(0.97); }
.sd-loc__card.sd-rev.is-revealed { transform: translateY(0) scale(1); }
/* Map image: one-shot scale-in on reveal (no infinite loop) */
.sd-loc__map-bg.sd-rev { transform: translateY(24px) scale(0.98); }
.sd-loc__map-bg.sd-rev.is-revealed { transform: translateY(0) scale(1); }

/* Cuisine pill below the map */
.sd-loc__pill {
  margin: 0 auto;
  min-height: 50px;
  max-width: 940px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255,248,236,0.82);
  border: 1px solid var(--sd-loc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.78rem;
  color: var(--sd-loc-muted);
}
.sd-loc__pill-icon {
  width: 22px; height: 22px;
  color: var(--sd-loc-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sd-loc__pill-icon svg { width: 100%; height: 100%; }
.sd-loc__pill strong {
  color: var(--sd-loc-dark);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.sd-loc__pill-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(120,70,40,0.18);
}

/* ── Tablet (≤ 760px): map becomes a banner, tiles flow below in 2 columns ── */
@media (max-width: 760px) {
  .sd-loc__map {
    aspect-ratio: auto;
    max-width: 560px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .sd-loc__map-bg {
    position: static;
    inset: auto;
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: 280px;
  }
  /* Tiles leave the map: reset absolute placement, go solid + opaque, flow 2-up. */
  .sd-loc__card {
    position: static;
    inset: auto;
    top: auto; left: auto; right: auto; bottom: auto;
    width: auto;
    flex: 1 1 calc(50% - 6px);
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--sd-loc-border);
  }
}

/* ── Small phones (≤ 600px) ─────────────────────── */
@media (max-width: 600px) {
  .sd-loc__stats { grid-template-columns: 1fr; }
  .sd-loc__actions { flex-wrap: wrap; }
  .sd-loc__btn { flex: 1 1 100%; }
}

/* ── Phones (≤ 480px): single-column stack of tiles ───── */
@media (max-width: 480px) {
  .sd-loc__card { flex: 1 1 100%; }
}


/* ============================================================
   SECTION 4 — ABOUT US
   ============================================================ */
.sd-about {
  background: var(--sd-cream-soft);
  padding: 96px 48px;
  position: relative;
  overflow: hidden;
}
.sd-about::before, .sd-about::after {
  z-index: 0;
}
.sd-about::before, .sd-about::after {
  content: '';
  position: absolute;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(214,41,41,0.10), transparent 70%);
  pointer-events: none;
}
.sd-about::before { top: 5%; right: 8%; }
.sd-about::after  { bottom: 5%; left: 6%; }

.sd-about__grid {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.9fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.sd-about__card {
  position: relative;
  background: #fffefb;
  border-radius: var(--r-xl);
  padding: 44px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 24px 50px -24px rgba(74,14,14,0.22);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(74,14,14,0.06);
  transition: transform 0.45s var(--ease), box-shadow 0.45s ease;
}
.sd-about__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 70px -28px rgba(74,14,14,0.32);
}
.sd-about__card::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,25,32,0.10), transparent 65%);
  z-index: 0;
  pointer-events: none;
  transition: transform 0.6s var(--ease);
}
.sd-about__card:hover::before { transform: scale(1.3) rotate(20deg); }
.sd-about__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(74,14,14,0.5) 0.6px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
.sd-about__card > * { position: relative; z-index: 1; }

/* Left "Our Locations" card — clean white with subtle warm accent */
.sd-about__card--left {
  background: linear-gradient(160deg, #ffffff 0%, #fff5f6 100%);
}
.sd-about__card--left::before {
  background: radial-gradient(circle, rgba(215,25,32,0.12), transparent 65%);
}

/* Right "About Us" card — brand RED gradient (on-theme) */
.sd-about__card--cream {
  background: linear-gradient(160deg, #e21b22 0%, #b8141a 70%, #8a0e13 100%);
  color: #fff;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 30px 60px -22px rgba(184,20,26,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}
.sd-about__card--cream::before {
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 60%);
  opacity: 0.9;
}
.sd-about__card--cream::after {
  background-image: radial-gradient(rgba(255,255,255,0.6) 0.6px, transparent 1px);
  opacity: 0.08;
}
.sd-about__card--cream .sd-about__eyebrow { color: #fff; opacity: 0.95; }
.sd-about__card--cream .sd-about__eyebrow::after { background: #fff; opacity: 0.8; }
.sd-about__card--cream .sd-about__h2 { color: #fff; }
.sd-about__card--cream .sd-about__h2 .ld-red { color: #ffe1e2; }
.sd-about__card--cream .sd-about__card-body { color: rgba(255,255,255,0.88); }
.sd-about__card--cream .sd-about__divider { background: rgba(255,255,255,0.8); }
.sd-about__card--cream .sd-about__divider::after { color: rgba(255,255,255,0.7); }
/* Make the dark CTA pop on the red bg */
.sd-about__card--cream .sd-h-btn--dark {
  background: #fff;
  color: var(--sd-red);
}
.sd-about__card--cream .sd-h-btn--dark:hover {
  background: var(--sd-burgundy);
  color: #fff;
}

/* Eyebrow with small red dash trailing it (matches reference) */
.sd-about__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sd-red);
}
.sd-about__eyebrow::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--sd-red);
}

/* H2 — base color burgundy, red accent via .ld-red span */
.sd-about__h2 {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  line-height: 1.0;
  letter-spacing: -0.005em;
  color: var(--sd-burgundy);
  text-transform: uppercase;
  margin: 0;
}
.sd-about__h2 .ld-red { color: var(--sd-red); }

/* Decorative divider between headline and body */
.sd-about__divider {
  display: block;
  width: 56px;
  height: 1.5px;
  background: var(--sd-red);
  margin: 6px 0 4px;
  position: relative;
}
.sd-about__divider::after {
  content: '✦';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(8px, -50%);
  color: var(--sd-red);
  font-size: 0.7rem;
  opacity: 0.7;
}

.sd-about__card-body {
  color: var(--sd-text-mute);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
.sd-about__card-body + .sd-about__card-body { margin-top: -4px; }
.sd-about__card .sd-h-btn { align-self: flex-start; margin-top: 6px; }

/* ── Center column ─ stamp badge + arched dark photo ── */
.sd-about__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
/* Curved-text stamp sitting on top, overlapping the photo */
.sd-about__stamp {
  position: relative;
  z-index: 3;
  width: 130px;
  height: 130px;
  margin-bottom: -55px;
  color: var(--sd-burgundy);
  filter: drop-shadow(0 6px 14px rgba(74,14,14,0.2));
}
.sd-about__stamp svg { width: 100%; height: 100%; display: block; }
/* Text ring spins continuously around the brand mark */
.sd-about__stamp-ring {
  animation: sd-stamp-spin 18s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes sd-stamp-spin {
  to { transform: rotate(360deg); }
}
/* Seoul Dak logo — static center with a soft double-thump heartbeat */
.sd-about__stamp-logo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  object-fit: contain;
  animation: sd-stamp-beat 3.4s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(214,41,41,0.35));
}
@keyframes sd-stamp-beat {
  0%, 30%, 100% { transform: scale(1); }
  8%  { transform: scale(1.14); }
  16% { transform: scale(1); }
  22% { transform: scale(1.09); }
}

/* Photo container — arched (rounded top, gentler bottom) */
.sd-about__photo {
  position: relative;
  width: 100%;
  flex: 1;
  border-radius: 50% 50% 24px 24px / 32% 32% 24px 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #4a1717 0%, #2a0a0a 100%);
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-about__photo-video,
.sd-about__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-about__photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent 0%, rgba(20,6,6,0.7) 100%);
  pointer-events: none;
}
.sd-about__photo-label { z-index: 2; }
.sd-about__photo-label {
  position: absolute;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-script);
  color: #fff;
  font-size: 1.9rem;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}
.sd-about__photo-label small {
  display: block;
  font-family: var(--f-body);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.6);
  margin-top: 6px;
  text-transform: uppercase;
}

/* ============================================================
   SECTION 5 — SOCIAL HIGHLIGHTS (cream, Instagram carousel)
   Local palette layered on the home tokens.
   ============================================================ */
.sd-social {
  --sd-soc-bg:     #f3dfe1;
  --sd-soc-card:   #fff8ec;
  --sd-soc-dark:   #211817;
  --sd-soc-muted:  #4b3b38;
  --sd-soc-red:    #d71920;
  --sd-soc-border: rgba(215,25,32,0.18);

  position: relative;
  background: var(--sd-soc-bg);
  color: var(--sd-soc-dark);
  padding: 48px 48px 28px;   /* hugs content — no dead band before the footer */
  overflow: hidden;
  isolation: isolate;
}
.sd-social::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 95%, rgba(215,25,32,0.05), transparent 22%),
    radial-gradient(circle at 88% 10%, rgba(215,25,32,0.06), transparent 18%);
  pointer-events: none;
  z-index: 0;
}
.sd-social__faint-logo {
  position: absolute;
  right: 4%;
  top: 4%;
  width: 260px;
  height: 260px;
  color: var(--sd-soc-red);
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}
.sd-social__faint-logo svg { width: 100%; height: 100%; }

.sd-social__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 40px;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ─── LEFT column ─────────────────────────────── */
.sd-social__text { display: flex; flex-direction: column; align-items: flex-start; }

.sd-social__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--sd-soc-red);
  text-decoration: none;
}
.sd-social__brand img { height: 32px; width: auto; }
.sd-social__brand span {
  font-family: var(--f-disp);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sd-social__title {
  font-family: var(--f-disp);
  color: var(--sd-soc-red);
  font-size: clamp(3.4rem, 5.4vw, 6.4rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 16px;
}
.sd-social__title-line {
  display: block;
  width: 96px;
  height: 4px;
  background: var(--sd-soc-red);
  border-radius: 999px;
  margin: 0 0 22px;
}
.sd-social__script {
  font-family: var(--f-script);
  font-size: clamp(1.4rem, 1.9vw, 1.9rem);
  color: var(--sd-soc-dark);
  margin: 0 0 18px;
  line-height: 1.05;
}
.sd-social__script span { color: var(--sd-soc-red); }
.sd-social__description {
  max-width: 520px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--sd-soc-muted);
  margin: 0 0 24px;
}

/* CTA + arrows */
.sd-social__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 38px;
}
.sd-social__follow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 54px;
  padding: 0 28px;
  border-radius: 10px;
  background: var(--sd-soc-red);
  color: #fff;
  font-family: var(--f-body);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 14px 30px -10px rgba(215,25,32,0.45);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.sd-social__follow svg { width: 16px; height: 16px; }
.sd-social__follow:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -10px rgba(215,25,32,0.55);
}
.sd-social__follow-arr { font-size: 1.1em; }
.sd-social__arrow {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--sd-soc-border);
  background: rgba(255,248,236,0.6);
  color: var(--sd-soc-red);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.sd-social__arrow svg { width: 14px; height: 14px; }
.sd-social__arrow:hover { background: var(--sd-soc-red); color: #fff; border-color: var(--sd-soc-red); }

/* Stats — compact horizontal with vertical separators */
.sd-social__stats {
  display: flex;
  align-items: stretch;
  border-top: 1px dashed var(--sd-soc-border);
  padding-top: 22px;
  max-width: 560px;
  width: 100%;
}
.sd-social__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 22px;
  border-right: 1px solid rgba(35,24,20,0.12);
}
.sd-social__stat:first-child { padding-left: 0; }
.sd-social__stat:last-child  { padding-right: 0; border-right: 0; }
.sd-social__stat-icon {
  width: 28px; height: 28px;
  color: var(--sd-soc-red);
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sd-social__stat-icon svg { width: 22px; height: 22px; }
.sd-social__stat-number {
  font-family: var(--f-disp);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--sd-soc-red);
  line-height: 1;
}
.sd-social__stat-label {
  margin-top: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-soc-dark);
}

/* ─── RIGHT column ─ curved Instagram carousel ─
   Cards lay out as a flex row with negative side-margins so they
   overlap. Each card sits in its own natural flow position — no
   absolute math needed, so they can't drift into the text column. */
.sd-social__carousel {
  position: relative;
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  min-width: 0;
}

/* Decorative dashed curves */
.sd-social__doodles {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.55;
  z-index: 1;
}
.sd-social__doodles path {
  stroke: var(--sd-soc-red);
  stroke-width: 1.5;
  stroke-dasharray: 6 8;
  stroke-linecap: round;
  fill: none;
}

/* Floating heart icons */
.sd-social__heart {
  position: absolute;
  z-index: 2;
  color: var(--sd-soc-red);
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 4px 8px rgba(215,25,32,0.4));
}
.sd-social__heart svg { width: 100%; height: 100%; }
.sd-social__heart--a { top: 6%;  left: 12%; }
.sd-social__heart--b { bottom: 12%; left: 10%; width: 28px; height: 28px; }
.sd-social__heart--c { top: 10%; right: 18%; width: 22px; height: 22px; }

/* "MADE FRESH MADE REAL" stamp */
.sd-social__stamp {
  position: absolute;
  top: 18px;
  right: 110px;
  z-index: 3;
  width: 90px;
  height: 90px;
  color: var(--sd-soc-red);
  transform: rotate(8deg);
  filter: drop-shadow(0 4px 10px rgba(215,25,32,0.25));
}
.sd-social__stamp svg { width: 100%; height: 100%; }

/* ─── Story cards ─ flex children with negative side margins ─ */
.sd-story {
  position: relative;
  flex: 0 0 auto;            /* fixed width, no shrinking */
  width: 158px;
  height: 290px;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 24px 50px -16px rgba(35,24,20,0.32);
  border: 1px solid rgba(255,255,255,0.35);
  text-decoration: none;
  color: #fff;
  z-index: 2;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), margin 0.4s var(--ease);
}
.sd-story__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.sd-story__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.48) 0%,
      rgba(0,0,0,0.05) 30%,
      rgba(0,0,0,0.05) 55%,
      rgba(0,0,0,0.78) 100%);
  pointer-events: none;
}

/* Curved layout via tilt/scale + negative margins to overlap neighbors */
.sd-story--1 { transform: translateY(28px) rotate(-5deg) scale(0.84); z-index: 2; margin-right: -28px; }
.sd-story--2 { transform: translateY(-6px) rotate(-3deg) scale(0.93); z-index: 4; margin-right: -28px; }
.sd-story--3.sd-story--center {
  transform: translateY(-12px) scale(1);
  z-index: 10;
  width: 208px;
  height: 378px;
  border: 2px solid #fff;
  box-shadow: 0 32px 60px -18px rgba(35,24,20,0.45);
  margin: 0 -10px;            /* overlap a touch with neighbors */
}
.sd-story--4 { transform: translateY(-6px) rotate(3deg) scale(0.93); z-index: 4; margin-left: -28px; }
.sd-story--5 { transform: translateY(28px) rotate(5deg) scale(0.84); z-index: 2; margin-left: -28px; }

/* Hover — keep position+rotation; just lift + grow + shadow. */
.sd-story:hover {
  z-index: 11;
  box-shadow: 0 30px 56px -16px rgba(35,24,20,0.5);
}
.sd-story--1:hover { transform: translateY(20px) rotate(-5deg) scale(0.88); }
.sd-story--2:hover { transform: translateY(-14px) rotate(-3deg) scale(0.97); }
.sd-story--3:hover { transform: translateY(-20px) scale(1.03); }
.sd-story--4:hover { transform: translateY(-14px) rotate(3deg) scale(0.97); }
.sd-story--5:hover { transform: translateY(20px) rotate(5deg) scale(0.88); }

@media (prefers-reduced-motion: reduce) {
  .sd-story { transition: none; }
  .sd-story:hover { transform: none; }
}

/* Story chrome (Instagram-like) */
.sd-story__header {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
}
.sd-story__avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #fff;
  flex-shrink: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.28);
}
.sd-story__avatar img { width: 100%; height: 100%; object-fit: contain; padding: 1.5px; box-sizing: border-box; }
.sd-story__user { font-weight: 700; }
.sd-story__time { opacity: 0.72; font-weight: 400; }
.sd-story__menu { margin-left: auto; opacity: 0.85; }
.sd-story__menu svg { width: 14px; height: 14px; }

.sd-story__pill {
  position: absolute;
  top: 42px; left: 12px;
  z-index: 3;
  padding: 5px 10px;
  background: var(--sd-soc-red);
  color: #fff;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sd-story--center .sd-story__pill {
  top: 56px;
  font-size: 0.62rem;
  padding: 6px 12px;
}

.sd-story__title {
  position: absolute;
  left: 14px; right: 14px;
  bottom: 56px;
  z-index: 3;
}
.sd-story__title small {
  display: block;
  font-family: var(--f-body);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 4px;
}
.sd-story__title span {
  display: block;
  font-family: var(--f-body);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
}
.sd-story--center .sd-story__title span { font-size: 1.4rem; line-height: 1; }
.sd-story--center .sd-story__title small { font-size: 0.62rem; }

.sd-story__send {
  position: absolute;
  left: 12px; right: 12px;
  bottom: 14px;
  z-index: 3;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,0.8);
  font-size: 0.62rem;
}
.sd-story__send-icon { display: inline-flex; }
.sd-story__send-icon svg { width: 13px; height: 13px; }

/* Featured play button */
.sd-story__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.82);
  color: var(--sd-soc-dark);
  display: grid;
  place-items: center;
  z-index: 4;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.sd-story__play svg { width: 14px; height: 14px; margin-left: 3px; }

/* Carousel progress dots + pause icon */
.sd-social__progress {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 4;
}
.sd-social__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(35,24,20,0.24);
  cursor: pointer;
  transition: width 0.25s var(--ease), background 0.25s var(--ease), transform 0.2s ease;
}
.sd-social__dot:hover { background: rgba(35,24,20,0.45); transform: scale(1.2); }
.sd-social__dot.is-active {
  width: 24px;
  border-radius: 999px;
  background: var(--sd-soc-red);
  transform: none;
}
.sd-social__pausebtn {
  margin-left: 6px;
  padding: 4px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 50%;
}
.sd-social__pausebtn:hover .sd-social__pause { opacity: 1; transform: scale(1.15); }
.sd-social__pause {
  width: 16px; height: 16px;
  color: var(--sd-soc-dark);
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Bottom-right script "See more on Instagram" */
.sd-social__more {
  position: absolute;
  bottom: 36px;
  right: 60px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--f-script);
  font-size: 1.15rem;
  color: var(--sd-soc-dark);
  text-decoration: none;
  z-index: 5;
}
.sd-social__more-squiggle {
  width: 96px;
  height: 22px;
  color: var(--sd-soc-red);
}

/* ─── Responsive ──────────────────────────────── */
@media (max-width: 1240px) {
  .sd-social__grid { grid-template-columns: 36% 1fr; gap: 28px; }
  .sd-story { width: 134px; height: 248px; }
  .sd-story--3.sd-story--center { width: 180px; height: 326px; }
  .sd-story--1, .sd-story--2 { margin-right: -22px; }
  .sd-story--4, .sd-story--5 { margin-left: -22px; }
}

@media (max-width: 1024px) {
  .sd-social { padding: 36px 24px; }
  .sd-social__grid { grid-template-columns: 1fr; gap: 36px; }
  .sd-social__title { font-size: clamp(2.8rem, 11vw, 4.6rem); }
  .sd-social__carousel { height: 500px; transform: scale(0.9); transform-origin: center top; }
  .sd-social__stats { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 18px; }
  .sd-social__stat { width: 100%; border-right: 0; padding: 0; }
}

@media (max-width: 640px) {
  .sd-social__carousel {
    height: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 14px;
    padding: 24px 4px;
  }
  .sd-story {
    transform: none !important;
    margin: 0 !important;             /* no overlap on mobile horizontal scroll */
    flex: 0 0 190px;
    width: 190px;
    height: 340px;
  }
  .sd-story--center { width: 220px; height: 400px; }
  .sd-social__doodles, .sd-social__heart, .sd-social__stamp { display: none; }
  .sd-social__progress, .sd-social__more { position: static; transform: none; margin-top: 14px; }
}

/* ============================================================
   SECTION 6 — FOOTER (cream pre-footer + red action bar + light footer)
   Local palette layered on top of the home tokens.
   ============================================================ */
.sd-foot {
  --sd-ft-bg:        #f3dfe1;
  --sd-ft-dark:      #241c1c;
  --sd-ft-muted:     #4b3b38;
  --sd-ft-soft:      #5d4b47;
  --sd-ft-red:       #d71920;
  --sd-ft-border:    rgba(120,70,40,0.12);

  position: relative;
  background: linear-gradient(180deg, #f9edee 0%, var(--sd-ft-bg) 60%);
  border-top: 1px solid rgba(120,70,40,0.10);
  color: var(--sd-ft-dark);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.sd-foot__watermark {
  position: absolute;
  right: -60px;
  top: 20px;
  width: 220px;
  height: 220px;
  color: var(--sd-ft-red);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.sd-foot__watermark svg { width: 100%; height: 100%; }

/* ─── Pre-footer hero ─ compact, 2-line headline ─ */
.sd-foot__hero {
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 22px 72px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 38%);
  align-items: center;
  max-width: var(--container-ultra);
  margin: 0 auto;
  gap: 32px;
  overflow: hidden;
}
.sd-foot__hero-text { padding-top: 0; position: relative; z-index: 2; }

.sd-foot__eyebrow {
  font-family: var(--f-body);
  color: var(--sd-ft-red);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.sd-foot__eyebrow-line {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--sd-ft-red);
  border-radius: 999px;
  margin: 0 0 12px;
}
.sd-foot__title {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.8rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.sd-foot__title .red,
.sd-foot__title .dark { display: inline-block; }
.sd-foot__title .red  { color: var(--sd-ft-red); }
.sd-foot__title .dark { color: var(--sd-ft-dark); }
.sd-foot__hero-desc {
  max-width: 560px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--sd-ft-muted);
  margin: 0;
}

/* Right-side food collage — compact horizontal row */
.sd-foot__hero-food {
  position: relative;
  height: 180px;
  z-index: 2;
}
.sd-foot__food {
  position: absolute;
  filter: drop-shadow(0 14px 22px rgba(74,14,14,0.22));
  transition: transform 0.5s cubic-bezier(.2,.9,.25,1.1);
}
.sd-foot__food--bowl    { width: 38%; height: auto; top:  10%; left: 24%;  z-index: 3; }
.sd-foot__food--bao     { width: 42%; height: auto; top:  -4%; right: 8%;  z-index: 4; transform: rotate(2deg); }
.sd-foot__food--noodles { width: 36%; height: auto; bottom: -10%; right: 0%; z-index: 2; }
.sd-foot__hero-food:hover .sd-foot__food--bowl    { transform: translateY(-6px) scale(1.04); }
.sd-foot__hero-food:hover .sd-foot__food--bao     { transform: translateY(-4px) rotate(6deg) scale(1.04); }
.sd-foot__hero-food:hover .sd-foot__food--noodles { transform: translateY(-5px) scale(1.04); }

/* ─── Red action bar ─────────────────────── */
.sd-foot__action-bar {
  position: relative;
  z-index: 5;
  max-width: var(--container-wide);
  margin: 4px 72px 28px;
  background: linear-gradient(135deg, #e21b22 0%, #b8141a 100%);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  box-shadow: 0 18px 40px -16px rgba(215,25,32,0.40), 0 4px 12px -4px rgba(0,0,0,0.12);
}
.sd-foot__action-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,0.10), transparent 50%),
    radial-gradient(circle at 82% 50%, rgba(255,255,255,0.08), transparent 50%);
  pointer-events: none;
}
.sd-foot__action {
  position: relative;
  min-height: 86px;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 48px 1fr 32px;
  align-items: center;
  gap: 16px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid rgba(255,255,255,0.16);
  transition: background 0.25s ease;
  overflow: hidden;
}
.sd-foot__action::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s cubic-bezier(.2,.9,.25,1.1);
  pointer-events: none;
}
.sd-foot__action:last-child { border-right: 0; }
.sd-foot__action:hover { background: rgba(0,0,0,0.12); }
.sd-foot__action:hover::after { transform: translateX(100%); }
.sd-foot__action-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1.5px solid rgba(255,255,255,0.12);
  display: grid;
  place-items: center;
  transition: transform 0.35s cubic-bezier(.2,.9,.25,1.1), background 0.25s ease, border-color 0.25s ease;
}
.sd-foot__action:hover .sd-foot__action-icon {
  background: #fff;
  color: var(--sd-ft-red);
  border-color: #fff;
  transform: scale(1.08) rotate(-6deg);
}
.sd-foot__action-icon svg { width: 24px; height: 24px; transition: stroke 0.2s ease; }
.sd-foot__action:hover .sd-foot__action-icon svg { stroke: var(--sd-ft-red); }
.sd-foot__action-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sd-foot__action-body strong {
  font-family: var(--f-body);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sd-foot__action-body em {
  font-style: normal;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-foot__action-arr {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  display: grid;
  place-items: center;
  transition: transform 0.3s cubic-bezier(.2,.9,.25,1.1), background 0.25s ease;
}
.sd-foot__action-arr svg { width: 15px; height: 15px; }
.sd-foot__action:hover .sd-foot__action-arr {
  background: #fff;
  color: var(--sd-ft-red);
  transform: translateX(6px) scale(1.08);
}

@media (max-width: 900px) {
  .sd-foot__hero-stats { flex-wrap: wrap; }
  .sd-foot__hero-stamp { width: 80px; height: 80px; }
}

/* ─── 5-column main footer ───────────────── */
.sd-foot__main {
  position: relative;
  z-index: 4;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 48px 72px 34px;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr 1fr 1.6fr;
  gap: 28px;
}
.sd-foot__col {
  border-left: 1px solid var(--sd-ft-border);
  padding-left: 28px;
}
.sd-foot__brand {
  border-left: 0;
  padding-left: 0;
}

/* Brand block */
.sd-foot__logo {
  display: inline-block;
  margin-bottom: 12px;
}
.sd-foot__logo img { height: 42px; width: auto; }
.sd-foot__brand-tag {
  color: var(--sd-ft-red);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.sd-foot__brand-text {
  max-width: 320px;
  color: var(--sd-ft-muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0;
}
.sd-foot__socials {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.sd-foot__social {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(35,24,20,0.06);
  color: var(--sd-ft-dark);
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.sd-foot__social svg { width: 16px; height: 16px; }
.sd-foot__social:hover { background: var(--sd-ft-red); color: #fff; }

/* Heading + links */
.sd-foot__heading {
  color: var(--sd-ft-red);
  font-family: var(--f-body);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.sd-foot__heading::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  margin-top: 7px;
  border-radius: 2px;
  background: var(--sd-ft-red);
  opacity: 0.45;
}
.sd-foot__link {
  display: block;
  width: fit-content;
  color: var(--sd-ft-muted);
  font-size: 0.84rem;
  margin-bottom: 9px;
  text-decoration: none;
  transition: color 0.2s var(--ease), transform 0.25s var(--ease);
}
.sd-foot__link:hover {
  color: var(--sd-ft-red);
  transform: translateX(4px);
}

/* Locations 3-col compact card grid */
.sd-foot__loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
/* Balanced cards: uniform height, text gets the full width (the arrow
   is pinned to the bottom-right corner so nothing wraps around it). */
.sd-foot__loc-card {
  position: relative;
  background: linear-gradient(155deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.56) 100%);
  border: 1px solid rgba(74,14,14,0.10);
  border-radius: 13px;
  padding: 12px 40px 12px 14px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  min-height: 96px;
  overflow: hidden;
  box-shadow: 0 6px 16px -12px rgba(74,14,14,0.30);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.sd-foot__loc-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sd-ft-red), #ff5a3c);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s var(--ease);
}
.sd-foot__loc-card:hover {
  background: #fff;
  border-color: rgba(215,25,32,0.32);
  transform: translateY(-3px);
  box-shadow: 0 16px 28px -16px rgba(74,14,14,0.42);
}
.sd-foot__loc-card:hover::before { transform: scaleY(1); }

.sd-foot__loc-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-ft-muted);
}
.sd-foot__loc-status {
  position: relative;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2c8a4a;
  flex-shrink: 0;
}
.sd-foot__loc-status::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(44,138,74,0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .sd-foot__loc-status::after { animation: sd-ft-ping 2.4s ease-out infinite; }
}
@keyframes sd-ft-ping {
  0%   { box-shadow: 0 0 0 0 rgba(44,138,74,0.45); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(44,138,74,0); }
}
.sd-foot__loc-city {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--sd-ft-muted);
  text-transform: uppercase;
}
.sd-foot__loc-branch {
  font-family: var(--f-body);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--sd-ft-dark);
  line-height: 1.15;
  white-space: normal;
  transition: color 0.2s ease;
}
.sd-foot__loc-card:hover .sd-foot__loc-branch { color: var(--sd-ft-red); }
/* Street line — now shown for richer info */
.sd-foot__loc-addr {
  display: block;
  font-size: 0.66rem;
  color: var(--sd-ft-muted);
  line-height: 1.35;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-foot__loc-arr {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(215,25,32,0.09);
  color: var(--sd-ft-red);
  display: grid;
  place-items: center;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.sd-foot__loc-arr svg { width: 13px; height: 13px; }
.sd-foot__loc-card:hover .sd-foot__loc-arr {
  background: var(--sd-ft-red);
  color: #fff;
  transform: translateX(3px) scale(1.05);
}

.sd-foot__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--sd-ft-red);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1.5px solid var(--sd-ft-red);
  padding-bottom: 3px;
  transition: gap 0.25s ease;
}
.sd-foot__view-all:hover { gap: 14px; }

/* Contact block nested inside About column */
.sd-foot__contact-block {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(74,14,14,0.10);
}
.sd-foot__contact-block { margin-top: 18px; }
.sd-foot__contact-block .sd-foot__heading { margin-bottom: 10px; }

/* Contact items */
.sd-foot__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sd-ft-dark);
  font-size: 0.78rem;
  margin-bottom: 8px;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.sd-foot__contact svg { width: 16px; height: 16px; color: var(--sd-ft-red); flex-shrink: 0; }
.sd-foot__contact:hover { color: var(--sd-ft-red); }

/* Newsletter */
.sd-foot__newsletter {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--sd-ft-border);
}
.sd-foot__newsletter .sd-foot__heading { margin-bottom: 6px; }
.sd-foot__newsletter-desc {
  font-size: 0.78rem;
  color: var(--sd-ft-muted);
  margin: 0 0 14px;
  line-height: 1.4;
}
.sd-foot__newsletter-form {
  display: grid;
  grid-template-columns: 1fr 48px;
  height: 44px;
}
.sd-foot__newsletter-form input {
  border: 1px solid var(--sd-ft-border);
  border-right: 0;
  background: rgba(255,255,255,0.55);
  border-radius: 10px 0 0 10px;
  padding: 0 14px;
  color: var(--sd-ft-dark);
  font-family: inherit;
  font-size: 0.84rem;
}
.sd-foot__newsletter-form input::placeholder { color: var(--sd-ft-soft); }
.sd-foot__newsletter-form input:focus { outline: 0; border-color: var(--sd-ft-red); }
.sd-foot__newsletter-form button {
  border: 0;
  background: var(--sd-ft-red);
  color: #fff;
  border-radius: 0 10px 10px 0;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.sd-foot__newsletter-form button:hover { background: #b81620; }

/* ─── Order CTA card under brand ────────── */
.sd-foot__order-card {
  display: grid;
  grid-template-columns: 38px 1fr 16px;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 9px 12px;
  background: linear-gradient(135deg, #ffffff 0%, #fde9eb 100%);
  border: 1px solid rgba(215,25,32,0.20);
  border-radius: 14px;
  text-decoration: none;
  color: var(--sd-ft-dark);
  box-shadow: 0 10px 22px -14px rgba(215,25,32,0.30);
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease, border-color 0.25s ease;
}
.sd-foot__order-card:hover {
  transform: translateY(-2px);
  border-color: var(--sd-ft-red);
  box-shadow: 0 18px 32px -14px rgba(215,25,32,0.50);
}
.sd-foot__order-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--sd-ft-red);
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform 0.3s var(--ease);
}
.sd-foot__order-card:hover .sd-foot__order-icon { transform: rotate(-6deg) scale(1.05); }
.sd-foot__order-icon svg { width: 18px; height: 18px; }
.sd-foot__order-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-foot__order-body strong {
  font-family: var(--f-body);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--sd-ft-dark);
}
.sd-foot__order-body em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--sd-ft-muted);
}
.sd-foot__order-arr {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--sd-ft-red);
  transition: transform 0.25s var(--ease);
}
.sd-foot__order-card:hover .sd-foot__order-arr { transform: translateX(4px); }

/* ─── Trust strip ────────────────────────── */
.sd-foot__trust {
  border-top: 1px solid var(--sd-ft-border);
  border-bottom: 1px solid var(--sd-ft-border);
  padding: 22px 72px;
  position: relative;
  z-index: 3;
}
.sd-foot__trust-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.sd-foot__trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  position: relative;
  transition: transform 0.25s ease;
}
.sd-foot__trust-item + .sd-foot__trust-item::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: var(--sd-ft-border);
}
.sd-foot__trust-item:hover { transform: translateY(-2px); }
.sd-foot__trust-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(215,25,32,0.10);
  color: var(--sd-ft-red);
  display: grid;
  place-items: center;
  transition: background 0.25s ease, color 0.25s ease, transform 0.35s var(--ease);
}
.sd-foot__trust-item:hover .sd-foot__trust-icon {
  background: var(--sd-ft-red);
  color: #fff;
  transform: rotate(-6deg);
}
.sd-foot__trust-icon svg { width: 18px; height: 18px; }
.sd-foot__trust-item > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-foot__trust-item strong {
  font-family: var(--f-body);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--sd-ft-dark);
}
.sd-foot__trust-item em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--sd-ft-muted);
}

@media (max-width: 1024px) {
  .sd-foot__trust { padding: 22px 32px; }
  .sd-foot__trust-inner { grid-template-columns: 1fr 1fr; gap: 22px 28px; }
  .sd-foot__trust-item + .sd-foot__trust-item:nth-child(3)::before { display: none; }
}
@media (max-width: 640px) {
  .sd-foot__trust { padding: 18px 24px; }
  .sd-foot__trust-inner { grid-template-columns: 1fr; gap: 14px; }
  .sd-foot__trust-item + .sd-foot__trust-item::before { display: none; }
}

/* ─── Bottom bar ─────────────────────────── */
.sd-foot__bot {
  border-top: 1px solid var(--sd-ft-border);
  background: rgba(255,255,255,0.4);
  padding: 18px 72px;
}
.sd-foot__bot-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--sd-ft-soft);
  font-size: 0.78rem;
}
.sd-foot__bot-r { display: flex; gap: 24px; }
.sd-foot__bot-r a {
  color: var(--sd-ft-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.sd-foot__bot-r a:hover { color: var(--sd-ft-red); }

/* ─── Responsive ─────────────────────────── */
@media (max-width: 1240px) {
  .sd-foot__hero  { padding: 48px 32px 16px; gap: 24px; }
  .sd-foot__main  { padding: 0 32px 32px; grid-template-columns: 1fr 1fr 1fr; }
  .sd-foot__brand { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
  .sd-foot__col--locs { grid-column: 1 / -1; }
  .sd-foot__bot   { padding: 22px 32px; }
}

@media (max-width: 1024px) {
  .sd-foot__hero { grid-template-columns: 1fr; padding: 40px 28px 16px; }
  .sd-foot__hero-food { min-height: 280px; max-width: 520px; margin: 0 auto; }
  .sd-foot__action-bar { grid-template-columns: 1fr; margin: 24px 28px; }
  .sd-foot__action { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
  .sd-foot__action:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
  .sd-foot__title { font-size: clamp(2rem, 9vw, 3rem); }
  .sd-foot__main { grid-template-columns: 1fr; padding: 0 24px 32px; gap: 32px; }
  .sd-foot__col { border-left: 0; padding-left: 0; }
  .sd-foot__loc-grid { grid-template-columns: 1fr; }
  .sd-foot__bot-inner { flex-direction: column; align-items: flex-start; }
  .sd-foot__bot { padding: 22px 24px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .sd-h-hero { padding: 120px 24px 32px; }
  .sd-h-hero__grid { gap: 32px; }
  .sd-menu, .sd-loc, .sd-about, .sd-social, .sd-foot { padding-left: 24px; padding-right: 24px; }
  .sd-menu__row { --sd-mexp: 2.4fr; gap: 14px; }
  .sd-social__row { gap: 10px; }
  .sd-foot__mid-inner { grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
  .sd-foot__brand { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .sd-foot__locs { grid-column: 1 / -1; }
  .sd-foot__contact { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .sd-home-header__nav { display: none; }
  .sd-home-header__cta { display: none; }
  .sd-home-header__hamburger { display: flex; }

  .sd-h-hero { padding: 110px 20px 24px; }
  .sd-h-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .sd-h-hero__collage { aspect-ratio: 1.2 / 1; min-height: 360px; max-width: 480px; margin: 0 auto; }
  .sd-h-hero__features { grid-template-columns: 1fr; gap: 12px; margin-top: 48px; }

  .sd-menu { padding-top: 72px; padding-bottom: 72px; }
  /* Stack the head: text on top, filter+nav below */
  .sd-menu__head { flex-direction: column; gap: 24px; }
  .sd-menu__head-right { padding-top: 0; width: 100%; justify-content: space-between; }
  .sd-menu__filter { flex-wrap: wrap; }
  /* Card row stacks */
  .sd-menu__row {
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
    margin-left: auto; margin-right: auto;
  }
  /* All menu cards become full-width vertical cards (image on top, auto height). */
  .sd-mcard,
  .sd-mcard.is-default-active {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 210px auto;
  }
  .sd-mcard.is-default-active .sd-mcard__media { order: 1; height: 100%; }
  .sd-mcard.is-default-active .sd-mcard__body { order: 2; padding: 16px 18px 18px; }

  /* Section stacks (text above map); the map stays a square with tiles ON it. */
  .sd-loc__grid { grid-template-columns: 1fr; gap: 32px; }
  .sd-loc__map { max-width: 560px; margin: 0 auto; }
  .sd-loc__stats { flex-wrap: wrap; gap: 18px; }

  .sd-about__grid { grid-template-columns: 1fr; gap: 18px; }
  .sd-about__center { order: -1; }
  .sd-about__photo { min-height: 280px; }

  .sd-social__grid { grid-template-columns: 1fr; gap: 36px; }
  .sd-social__row {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    overflow-x: auto;
    grid-auto-flow: column;
    grid-auto-columns: 60%;
    grid-template-columns: none;
    padding-bottom: 10px;
    margin: 0 -20px;
    padding-left: 20px; padding-right: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .sd-story { scroll-snap-align: center; min-width: 200px; transform: none !important; }
  .sd-social__more { position: static; margin-top: 18px; display: inline-block; }

  .sd-foot__top { grid-template-columns: 1fr; gap: 32px; }
  .sd-foot__top-img { max-width: 360px; margin: 0 auto; }
  .sd-foot__cta-row { grid-template-columns: 1fr; }
  .sd-foot__mid-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .sd-foot__brand { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; }
  .sd-foot__locs ul { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .sd-h-hero { padding-top: 100px; }
  .sd-h-hero__h1 { font-size: clamp(2.6rem, 13vw, 4rem); }
  .sd-menu, .sd-loc, .sd-about, .sd-social { padding-top: 56px; padding-bottom: 56px; }
  .sd-foot__mid-inner { grid-template-columns: 1fr; }
  .sd-foot__locs ul { grid-template-columns: 1fr; }
  .sd-loc__bottom { flex-direction: column; align-items: flex-start; }
  .sd-loc__stats { gap: 12px; }
  .sd-foot__bot-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .sd-h-hero { padding: 96px 16px 24px; }
  .sd-menu, .sd-loc, .sd-about, .sd-social { padding-left: 16px; padding-right: 16px; }
  .sd-foot { padding-left: 16px; padding-right: 16px; }
  .sd-foot__mid, .sd-foot__bot { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .sd-h-hero__features { margin-top: 36px; }
  .sd-feature { padding: 14px 16px; gap: 12px; }
  .sd-mcard--feature .sd-mcard__name { font-size: 1.25rem; }
  .sd-loc__h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .sd-about__card { padding: 28px 22px; }
  .sd-social__stats { gap: 16px; }
  .sd-social__stat-num { font-size: 1.8rem; }
  .sd-foot__cta { padding: 18px 20px; font-size: 1rem; }
}

/* ============================================================
   SINGLE-LOCATION DETAIL POPUP
   ============================================================ */
.sd-locpop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s .35s;
}
.sd-locpop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .35s ease;
}
.sd-locpop__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28,10,12,0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.sd-locpop__panel {
  position: relative;
  width: min(820px, 100%);
  max-height: calc(100vh - 48px);
  background: #fffefb;
  border-radius: 24px;
  box-shadow: 0 40px 120px -30px rgba(74,14,14,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(24px) scale(0.96);
  transition: transform .45s cubic-bezier(.2,.9,.25,1.1);
}
#loc-popup-body { overflow-y: auto; }
#loc-popup-body::-webkit-scrollbar { width: 8px; }
#loc-popup-body::-webkit-scrollbar-thumb { background: rgba(74,14,14,0.22); border-radius: 99px; }
.sd-locpop.is-open .sd-locpop__panel { transform: translateY(0) scale(1); }

.sd-locpop__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(74,14,14,0.12);
  background: #fff;
  color: var(--sd-burgundy);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 6px 16px -8px rgba(74,14,14,0.4);
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.sd-locpop__close svg { width: 18px; height: 18px; }
.sd-locpop__close:hover {
  background: var(--sd-red);
  color: #fff;
  border-color: var(--sd-red);
  transform: rotate(90deg);
}

/* ── Single-location detail layout ── */
.sd-lpdetail { display: flex; flex-direction: column; }
.sd-lpdetail__hero {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: #2a0a0a;
}
/* Stacked slideshow frames — initLocPopup cycles .is-active every 3s */
.sd-lpdetail__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.sd-lpdetail__img.is-active { opacity: 1; }
.sd-lpdetail__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,6,6,0.05) 0%, rgba(20,6,6,0.20) 40%, rgba(20,6,6,0.85) 100%);
}
.sd-lpdetail__status {
  position: absolute;
  top: 18px; left: 18px;
  background: #fff;
  color: #2c8a4a;
  font: 800 0.66rem/1 var(--f-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,0.25);
  z-index: 3;
}
.sd-lpdetail__status::before {
  content: '';
  width: 7px; height: 7px;
  background: #2c8a4a;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(44,138,74,0.18);
}
.sd-lpdetail__status--popular { color: #b86600; }
.sd-lpdetail__status--popular::before { background: #f0a23a; box-shadow: 0 0 0 3px rgba(240,162,58,0.18); }
.sd-lpdetail__city {
  position: absolute;
  top: 18px; right: 18px;
  background: rgba(28,10,12,0.78);
  color: #fff;
  font: 700 0.68rem/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(6px);
  z-index: 3;
}
.sd-lpdetail__city svg { width: 12px; height: 12px; color: #fff; }
.sd-lpdetail__hero-text {
  position: absolute;
  left: 28px; right: 28px; bottom: 22px;
  color: #fff;
  z-index: 3;
}
.sd-lpdetail__eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0 0 4px;
}
.sd-lpdetail__name {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  color: #fff;
}
.sd-lpdetail__short {
  margin: 8px 0 0;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.82);
}
.sd-lpdetail__rating {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.92);
}
.sd-lpdetail__rating svg { width: 16px; height: 16px; color: #ffc24b; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.sd-lpdetail__rating strong { font-weight: 800; }
.sd-lpdetail__rating span { color: rgba(255,255,255,0.62); font-size: 0.74rem; }

/* Amenity chips — quick, useful "what you can do here" row */
.sd-lpdetail__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sd-lpdetail__amenity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(44,138,74,0.09);
  border: 1px solid rgba(44,138,74,0.20);
  color: #1f7a43;
  font-size: 0.76rem;
  font-weight: 700;
}
.sd-lpdetail__amenity svg { width: 13px; height: 13px; }

.sd-lpdetail__body {
  padding: 26px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sd-lpdetail__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
}
.sd-lpdetail__info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sd-lpdetail__info-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(215,25,32,0.10);
  color: var(--sd-red);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sd-lpdetail__info-icon svg { width: 18px; height: 18px; }
.sd-lpdetail__info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.86rem;
  color: var(--sd-text);
  line-height: 1.4;
  min-width: 0;
}
.sd-lpdetail__info-text strong {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sd-text-mute);
}
.sd-lpdetail__info-text a {
  color: var(--sd-burgundy);
  text-decoration: none;
  transition: color 0.2s ease;
}
.sd-lpdetail__info-text a:hover { color: var(--sd-red); }

.sd-lpdetail__tags {
  display: flex;
  flex-wrap: nowrap;           /* one row — overflow scrolls, never wraps */
  gap: 7px;
  padding: 14px 0;
  border-top: 1px dashed rgba(74,14,14,0.14);
  border-bottom: 1px dashed rgba(74,14,14,0.14);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sd-lpdetail__tags::-webkit-scrollbar { display: none; }
.sd-lpdetail__tag {
  background: rgba(214,41,41,0.08);
  color: var(--sd-burgundy);
  font: 700 0.66rem/1 var(--f-body);
  letter-spacing: 0.05em;
  padding: 7px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.sd-lpdetail__actions {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
  align-items: center;
}
.sd-lpdetail__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  font: 800 0.78rem/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  border: 1.5px solid transparent;
}
.sd-lpdetail__btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.sd-lpdetail__btn--red { background: var(--sd-red); color: #fff; }
.sd-lpdetail__btn--red:hover { background: var(--sd-burgundy); transform: translateY(-1px); }
.sd-lpdetail__btn--ghost {
  background: transparent;
  color: var(--sd-burgundy);
  border-color: rgba(74,14,14,0.18);
}
.sd-lpdetail__btn--ghost:hover { border-color: var(--sd-red); color: var(--sd-red); transform: translateY(-1px); }
.sd-lpdetail__btn--text {
  grid-column: 1 / -1;
  background: transparent;
  color: var(--sd-burgundy);
  text-decoration: none;
  padding: 8px 0;
  justify-content: flex-start;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(74,14,14,0.10);
  border-radius: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.sd-lpdetail__btn--text:hover { color: var(--sd-red); }

.sd-lpdetail__view-all {
  align-self: flex-start;
  color: var(--sd-red);
  font: 700 0.78rem/1 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  border-bottom: 1.5px solid var(--sd-red);
  padding-bottom: 4px;
  transition: gap 0.25s ease;
}
.sd-lpdetail__view-all:hover { gap: 14px; }

/* (legacy head — kept empty for safety, suppressed) */
.sd-locpop__head, .sd-locpop__filters, .sd-locpop__grid, .sd-lpcard, .sd-locpop__empty, .sd-locpop__foot { display: none; }

.sd-locpop__legacy-head {
  padding: 38px 44px 22px;
}
.sd-locpop__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sd-red);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.sd-locpop__eyebrow svg { width: 14px; height: 14px; }
.sd-locpop__title {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  color: var(--sd-burgundy);
}
.sd-locpop__title span { color: var(--sd-red); }
.sd-locpop__sub {
  margin: 8px 0 0;
  color: var(--sd-text-mute);
  font-size: 0.92rem;
}

.sd-locpop__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.sd-locpop__pill {
  border: 1.5px solid rgba(74,14,14,0.14);
  background: rgba(255,255,255,0.7);
  color: var(--sd-burgundy);
  font: 600 0.82rem/1 var(--f-body);
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}
.sd-locpop__pill em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(74,14,14,0.08);
  padding: 2px 7px;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.sd-locpop__pill:hover { border-color: var(--sd-red); transform: translateY(-1px); }
.sd-locpop__pill.is-active {
  background: var(--sd-red);
  color: #fff;
  border-color: var(--sd-red);
}
.sd-locpop__pill.is-active em { background: rgba(255,255,255,0.22); color: #fff; }

.sd-locpop__grid {
  overflow-y: auto;
  padding: 26px 44px 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(74,14,14,0.25) transparent;
}
.sd-locpop__grid::-webkit-scrollbar { width: 8px; }
.sd-locpop__grid::-webkit-scrollbar-thumb { background: rgba(74,14,14,0.22); border-radius: 99px; }

.sd-lpcard {
  position: relative;
  background: #fffefb;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px -18px rgba(74,14,14,0.32);
  border: 1px solid rgba(74,14,14,0.06);
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.9,.25,1.1), box-shadow .35s ease, border-color .35s ease;
  opacity: 0;
  transform: translateY(14px);
  animation: sd-lpcard-in .5s cubic-bezier(.2,.9,.25,1.1) forwards;
  animation-delay: var(--lp-delay, 0s);
}
@keyframes sd-lpcard-in {
  to { opacity: 1; transform: translateY(0); }
}
.sd-lpcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -22px rgba(74,14,14,0.45);
  border-color: rgba(214,41,41,0.25);
}
.sd-lpcard.is-hidden { display: none; }

.sd-lpcard__img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f3dfe1;
  overflow: hidden;
}
.sd-lpcard__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.sd-lpcard:hover .sd-lpcard__img img { transform: scale(1.05); }
.sd-lpcard__status {
  position: absolute;
  top: 12px; left: 12px;
  background: #fff;
  color: #2c8a4a;
  font: 800 0.62rem/1 var(--f-body);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.2);
}
.sd-lpcard__status::before {
  content: '';
  width: 6px; height: 6px;
  background: #2c8a4a;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(44,138,74,0.18);
}
.sd-lpcard__status--popular { color: #b86600; }
.sd-lpcard__status--popular::before { background: #f0a23a; box-shadow: 0 0 0 3px rgba(240,162,58,0.18); }
.sd-lpcard__city {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(28,10,12,0.78);
  color: #fff;
  font: 700 0.66rem/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.sd-lpcard__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.sd-lpcard__name {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--sd-burgundy);
  margin: 0;
  line-height: 1.05;
}
.sd-lpcard__addr {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--sd-text-mute);
  margin: 0;
}
.sd-lpcard__addr svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--sd-red); margin-top: 3px; }
.sd-lpcard__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--sd-text-mute);
  padding: 8px 0;
  border-top: 1px dashed rgba(74,14,14,0.12);
  border-bottom: 1px dashed rgba(74,14,14,0.12);
  margin: 4px 0 6px;
}
.sd-lpcard__meta span { display: inline-flex; align-items: center; gap: 5px; }
.sd-lpcard__meta svg { width: 11px; height: 11px; color: var(--sd-red); }
.sd-lpcard__meta strong { color: var(--sd-burgundy); font-weight: 700; }
.sd-lpcard__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}
.sd-lpcard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 700 0.75rem/1 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 8px;
  border-radius: 12px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.sd-lpcard__btn svg { width: 13px; height: 13px; }
.sd-lpcard__btn--red {
  background: var(--sd-red);
  color: #fff;
}
.sd-lpcard__btn--red:hover { background: var(--sd-burgundy); transform: translateY(-1px); }
.sd-lpcard__btn--ghost {
  background: transparent;
  color: var(--sd-burgundy);
  border-color: rgba(74,14,14,0.18);
}
.sd-lpcard__btn--ghost:hover { border-color: var(--sd-red); color: var(--sd-red); transform: translateY(-1px); }

.sd-locpop__empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: var(--sd-text-mute);
  font-size: 0.95rem;
}

.sd-locpop__foot {
  padding: 18px 44px 24px;
  border-top: 1px solid rgba(74,14,14,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.4);
}
.sd-locpop__foot-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sd-text-mute);
  font-size: 0.85rem;
}
.sd-locpop__foot-note svg { width: 14px; height: 14px; color: var(--sd-red); }
.sd-locpop__view-all {
  color: var(--sd-burgundy);
  font: 700 0.85rem/1 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1.5px solid var(--sd-red);
  padding-bottom: 4px;
  transition: gap .25s ease, color .25s ease;
}
.sd-locpop__view-all:hover { color: var(--sd-red); gap: 14px; }

@media (max-width: 1024px) {
  .sd-locpop__grid { grid-template-columns: repeat(2, 1fr); }
  .sd-locpop__head, .sd-locpop__foot { padding-left: 28px; padding-right: 28px; }
  .sd-locpop__grid { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 640px) {
  .sd-locpop { padding: 0; align-items: stretch; }
  .sd-locpop__panel { max-height: 100vh; border-radius: 0; }
  .sd-locpop__grid { grid-template-columns: 1fr; padding: 18px 18px; gap: 14px; }
  .sd-locpop__head { padding: 30px 22px 18px; }
  .sd-locpop__foot { padding: 16px 22px 22px; }
  .sd-locpop__title { font-size: 1.6rem; }
}

/* Make existing location cards on the map feel clickable */
.sd-loc__card { cursor: pointer; }

/* ============================================================
   NEON SIGNS — the brand's in-store neon artwork as section
   accents. White tubes get a red halo so they read on the light
   walls exactly like a lit sign does in daylight.
   Desktop only (≤1024 hidden to keep the approved mobile design).
   ============================================================ */
.sd-neon {
  position: absolute;
  pointer-events: auto;       /* hoverable — the tube "surges" under the cursor */
  user-select: none;
  z-index: 1;
  --neon-rot: 0deg;
  transform: rotate(var(--neon-rot));
  filter:
    drop-shadow(0 0 1px rgba(255, 250, 248, 0.65))
    drop-shadow(0 0 8px rgba(255, 70, 80, 0.50))
    drop-shadow(0 0 26px rgba(215, 25, 32, 0.32));
  animation:
    sd-neon-float 9s ease-in-out infinite alternate,
    sd-neon-flicker 13s linear infinite;
  transition: filter 0.4s ease;
}
/* Cursor proximity: the sign burns brighter, like grabbing the tube */
.sd-neon:hover {
  filter:
    drop-shadow(0 0 1.5px rgba(255, 253, 250, 0.95))
    drop-shadow(0 0 10px rgba(255, 85, 95, 0.8))
    drop-shadow(0 0 32px rgba(215, 25, 32, 0.55))
    drop-shadow(0 0 64px rgba(215, 25, 32, 0.28));
}
/* --neon-px/--neon-py: cursor-parallax offsets driven by JS (default 0) */
@keyframes sd-neon-float {
  from { transform: translate(var(--neon-px, 0px), var(--neon-py, 0px)) translateY(0) rotate(var(--neon-rot)); }
  to   { transform: translate(var(--neon-px, 0px), var(--neon-py, 0px)) translateY(-9px) rotate(calc(var(--neon-rot) + 1.2deg)); }
}
/* Two short buzz dips per cycle — reads as a live neon tube */
@keyframes sd-neon-flicker {
  0%, 6.9%, 8%, 8.9%, 54%, 55%, 100% { opacity: 0.97; }
  7.4% { opacity: 0.72; }
  8.4% { opacity: 0.8; }
  54.5% { opacity: 0.75; }
}
/* Hero: 사랑 ("love") on the wall between the headline and the drinks */
.sd-neon--hero {
  top: 230px;
  left: 46%;
  width: 192px;
  --neon-rot: 4deg;
  z-index: 2;
  /* stronger white core so the white-tube mascot reads over the photo */
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 2.5px rgba(255, 245, 245, 0.7))
    drop-shadow(0 0 10px rgba(255, 70, 80, 0.55))
    drop-shadow(0 0 28px rgba(215, 25, 32, 0.38));
}
/* Menu: steaming noodle cup floating above the category pills
   (anchored to .sd-menu__head, which is position:relative) */
.sd-neon--menu {
  top: -12px;
  left: 58%;
  width: 148px;
  --neon-rot: -3deg;
  animation-delay: 1.2s, 3.5s;
}
@media (max-width: 1240px) {
  /* head re-stacks below 1240 — no clear pocket above the pills */
  body.sd-home .sd-neon--menu { display: none; }
}
/* Social: 안녕 + chopsticks beside the "Social Highlights" title */
.sd-neon--social {
  left: 30%;
  top: 10px;
  width: 175px;
  --neon-rot: -5deg;
  animation-delay: 1.8s, 9s;
}
/* Locations: mascot + wordmark beside the section heading
   (anchored to the text column so it tracks the layout) */
.sd-loc__text { position: relative; }
.sd-neon--loc {
  top: -8px;
  right: -20px;
  width: 215px;
  --neon-rot: 3deg;
  animation-delay: 0.9s, 5.5s;
  /* stronger white core so the white-tube mascot reads on the pink wall */
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 2.5px rgba(255, 245, 245, 0.7))
    drop-shadow(0 0 10px rgba(255, 70, 80, 0.55))
    drop-shadow(0 0 28px rgba(215, 25, 32, 0.38));
}
@media (max-width: 1240px) {
  /* the heading fills the column below 1240 — no clear pocket */
  body.sd-home .sd-neon--loc { display: none; }
}
@media (max-width: 1024px) {
  /* body.sd-home prefix: must outrank the global `body.sd-home img` rule */
  body.sd-home .sd-neon { display: none; }
}
/* Mobile exception: a small mascot sign sits beside the Locations
   heading (top-right of the stacked text column) */
@media (max-width: 1024px) {
  body.sd-home .sd-neon--loc {
    display: block;
    top: -8px;
    right: 4px;
    width: 100px;
  }
}

/* ============================================================
   MOBILE ORDER BAR — fixed bottom pill, slides up after the user
   scrolls; the craving (thumb + name) rotates every 5s (home.js).
   ============================================================ */
.sd-orderbar { display: none; }
@media (max-width: 900px) {
  .sd-orderbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 180;             /* under the drawer (200) + its backdrop */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 8px 8px 10px;
    background: rgba(255, 252, 250, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(215, 25, 32, 0.14);
    border-radius: 999px;
    box-shadow: 0 18px 40px -14px rgba(74, 14, 14, 0.45);
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s var(--ease), opacity 0.35s ease;
  }
  .sd-orderbar.is-visible {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .sd-orderbar__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    transition: opacity 0.24s ease, transform 0.28s var(--ease);
  }
  .sd-orderbar__item.is-out {
    opacity: 0;
    transform: translateY(8px);
  }
  .sd-orderbar__thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(215, 25, 32, 0.18);
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 14px -6px rgba(74, 14, 14, 0.35);
  }
  body.sd-home .sd-orderbar__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .sd-orderbar__txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
  }
  .sd-orderbar__txt small {
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sd-red);
  }
  .sd-orderbar__txt strong {
    font-size: 0.8rem;
    font-weight: 800;
    color: #241c1c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sd-orderbar__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 16px;
    background: linear-gradient(135deg, #e02430, #b81620);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 10px 22px -8px rgba(215, 25, 32, 0.6);
  }
  /* lift the floating buttons clear of the bar while it's on screen */
  body.has-orderbar .sd-social-float {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    transition: bottom 0.4s var(--ease);
  }
  body.has-orderbar .sd-back-to-top {
    bottom: calc(76px + 48px + 10px + env(safe-area-inset-bottom, 0px));
    transition: bottom 0.4s var(--ease);
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sd-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sd-loc__pin { animation: none; }
  .sd-story, .sd-h-hero__food, .sd-mcard, .sd-feature, .sd-foot__cta, .sd-h-btn { transition: none !important; }
  .sd-menu__row, .sd-mcard__media, .sd-mcard__media img,
  .sd-mcard__min, .sd-mcard__max { transition: none !important; }
  .sd-neon, .sd-about__stamp-ring, .sd-about__stamp-logo,
  .sd-benefit::before, .sd-benefit__icon, .sd-mcard { animation: none !important; }
  .sd-benefit, .sd-benefit__body, .sd-benefit__desc { transition: none !important; }
  .sd-feature::before, .sd-feature__shine, .sd-feature__bar, .sd-feature__icon,
  .sd-feature__arr, .sd-feature__cta-label { transition: none !important; }
  .sd-feature__shine { display: none; }
  .sd-locpop, .sd-locpop__panel, .sd-lpcard, .sd-lpcard__img img { transition: none !important; animation: none !important; }
}

/* ============================================================
   APPLE-STYLE MOTION — light, performance-first.
   Refined reveals (above) + one cheap, compositor-only hero
   parallax. No global smooth-scroll (wheel stays native-fast;
   anchor smoothness handled in JS). Progressively enhanced,
   reduced-motion safe.
   ============================================================ */
/* Snap/anchor landing offset — clears the fixed header with breathing room
   so a snapped section's top content never sits under the header. */
html { scroll-padding-top: 90px; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* NOTE: the hero photo's old scroll parallax (sd-par-hero) was removed —
       it overrode the JS cursor-magnet transform and cost scroll-linked
       animation work. The magnet loop in home.js owns that transform now. */
    /* About video drifts gently for depth as its section crosses the viewport */
    .sd-about__photo { overflow: hidden; }
    .sd-about__photo-video {
      animation: sd-par-rise linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }
    @keyframes sd-par-rise {
      from { transform: scale(1.14) translateY(-4%); }
      to   { transform: scale(1.14) translateY(4%); }
    }
  }
}


/* ============================================================
   ███  MOBILE REDESIGN  ███
   Consolidated, authoritative mobile layer — appended LAST so it
   wins over the scattered earlier breakpoints. Desktop (>900px)
   stays untouched. Tablet ≤900, phone ≤640, small phone ≤400.
   ============================================================ */

/* ---------- Global mobile foundations ---------- */
@media (max-width: 640px) {
  /* One consistent horizontal margin for every section */
  body.sd-home > .sd-h-hero,
  body.sd-home > .sd-menu,
  body.sd-home > .sd-loc,
  body.sd-home > .sd-about,
  body.sd-home > .sd-social { padding-left: 20px; padding-right: 20px; }

  /* Reusable horizontal scroller: snap, no visible scrollbar, edge fade */
  .sd-mscroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sd-mscroll::-webkit-scrollbar { display: none; }
}
@media (max-width: 400px) {
  body.sd-home > .sd-h-hero,
  body.sd-home > .sd-menu,
  body.sd-home > .sd-loc,
  body.sd-home > .sd-about,
  body.sd-home > .sd-social { padding-left: 16px; padding-right: 16px; }
}

/* ---------- FOOTER — compact mobile redesign ---------- */
@media (max-width: 640px) {
  .sd-foot__hero { display: none; }   /* dead markup already removed; hide leftover CSS defensively */

  /* Action bar → slim 3-up icon tiles */
  .sd-foot__action-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 20px 24px;
    max-width: none;
  }
  .sd-foot__action {
    min-width: 0;          /* let the 1fr tracks shrink so 3 tiles fit */
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 7px;
    padding: 13px 6px;
    border-right: 0 !important;
    border-bottom: 0 !important;
    background: rgba(255,255,255,0.06);
    border-radius: 14px;
  }
  .sd-foot__action { overflow: hidden; }
  .sd-foot__action-icon { width: 36px; height: 36px; }
  .sd-foot__action-body { width: 100%; min-width: 0; align-items: center; }
  .sd-foot__action-body strong { font-size: 0.72rem; line-height: 1.18; white-space: normal; overflow-wrap: anywhere; }
  /* Guard against long unbreakable strings (email, etc.) widening the page */
  .sd-foot__contact, .sd-foot__link, .sd-foot__brand-text { overflow-wrap: anywhere; }
  .sd-foot__action-body em,
  .sd-foot__action-arr { display: none; }

  /* Main → brand on top, links in a tidy 2-col group, locations full-width */
  .sd-foot__main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 26px 18px;
    padding: 0 20px 28px;
  }
  .sd-foot__col       { min-width: 0; }
  .sd-foot__brand     { grid-column: 1 / -1; }
  .sd-foot__col--locs { grid-column: 1 / -1; }
  .sd-foot__heading   { margin-bottom: 10px; }
  .sd-foot__link      { font-size: 0.86rem; }
  .sd-foot__contact   { min-width: 0; }   /* let the email wrap instead of widening the page */

  /* Location chips → compact 2-col, drop the street line to stay short */
  .sd-foot__loc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .sd-foot__loc-card { min-width: 0; }
  .sd-foot__loc-card { padding: 10px 12px; border-radius: 12px; }
  .sd-foot__loc-addr { display: none; }
  .sd-foot__loc-branch { font-size: 0.84rem; }

  /* Bottom bar compact */
  .sd-foot__bot { padding: 20px; }
}

@media (max-width: 400px) {
  .sd-foot__action-bar { margin: 16px 16px 20px; gap: 6px; }
  .sd-foot__action { padding: 12px 6px; }
  .sd-foot__action-icon { width: 34px; height: 34px; }
  .sd-foot__action-body strong { font-size: 0.72rem; }
  .sd-foot__main { padding: 0 16px 24px; }
}

/* ============================================================
   ███  MOBILE REDESIGN — Phase 2 (sections + popup)  ███
   Appended after the footer block above — same authoritative
   source-order layer, so these win over the scattered earlier
   breakpoints without !important (except where matching an
   existing !important). Breakpoints: tablet ≤900, phone ≤640,
   small ≤400. Desktop (>900px) stays untouched.
   ============================================================ */

/* ---------- Fluid type on small screens ---------- */
@media (max-width: 900px) {
  .sd-menu__pill     { font-size: clamp(0.7rem, 2.6vw, 0.78rem); }
  .sd-loc__btn       { font-size: clamp(0.7rem, 2.4vw, 0.74rem); }
  .sd-loc__pill      { font-size: clamp(0.72rem, 2.6vw, 0.78rem); }
  .sd-lpdetail__name { font-size: clamp(1.6rem, 7vw, 2.4rem); }
}

/* ---------- Header (logo + OPEN NOW pill + red circle hamburger) ---------- */
@media (max-width: 900px) {
  .sd-home-header__inner { padding: 8px 12px 8px 16px; gap: 10px; }
  .sd-home-header__brand img { height: 30px; }
  .sd-home-header__brand span { font-size: 1.15rem; }
  .sd-home-header__right { gap: 10px; }
  .sd-home-header__live { padding: 6px 10px; font-size: 0.62rem; }
  .sd-home-header__hamburger {
    width: 42px; height: 42px;
    background: var(--sd-red);
    border-radius: 50%;
    border: 0;
    box-shadow: 0 8px 18px -8px rgba(214,41,41,0.6);
  }
  .sd-home-header__hamburger span { background: #fff; }
}
@media (max-width: 380px) { .sd-home-header__live { display: none; } }

/* ---------- Hero — collage on pink + stacked buttons + 3 promo cards ---------- */
@media (max-width: 900px) {
  .sd-h-hero { padding: 104px 20px 40px; }
  .sd-h-hero__slides, .sd-h-hero__veil { display: none; }
  /* Full-bleed mobile hero artwork — a CSS background inside this media
     query, so phones download ONLY this webp (and desktop never does). */
  .sd-h-hero {
    background:
      linear-gradient(180deg,
        rgba(243,223,225,0.68) 0%,
        rgba(243,223,225,0.4) 15%,
        rgba(243,223,225,0.12) 28%,
        rgba(243,223,225,0) 40%),
      url("../assets/home/hero section mobile.webp") right -16px top / auto 70% no-repeat,
      var(--sd-cream);
  }
  .sd-h-hero__grid { display: block; min-height: 0; position: relative; z-index: 2; }
  .sd-h-hero__text { display: block; max-width: 100%; position: relative; z-index: 2; }
  .sd-h-hero__text > * + * { margin-top: 12px; }
  .sd-h-hero__text > .sd-eyebrow,
  .sd-h-hero__h1,
  .sd-h-hero__script,
  .sd-h-hero__body { max-width: 46%; }
  .sd-h-hero__h1 { font-size: clamp(2rem, 9.5vw, 3rem); line-height: 0.95; }
  .sd-h-hero__script { font-size: clamp(1.05rem, 4.6vw, 1.45rem); }
  .sd-h-hero__body { font-size: 0.82rem; }
  /* Single CTA on phones — "Our Story" lives in the burger menu instead */
  .sd-h-hero__cta { flex-direction: column; align-items: stretch; gap: 10px; max-width: 62%; }
  .sd-h-hero__cta .sd-h-btn { width: 100%; justify-content: space-between; }
  .sd-h-hero__cta .sd-h-btn--cream { display: none; }
  .sd-h-hero__features { flex-direction: column; flex-wrap: nowrap; gap: 12px; margin-top: 30px; position: relative; z-index: 3; }
  /* Balanced tiles: equal heights, clamped copy, arrow always centered */
  .sd-feature {
    flex: 1 1 100%; max-width: none;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px; row-gap: 3px;
    padding: 14px 16px;
    min-height: 92px;
  }
  .sd-feature__icon  { grid-row: 1 / -1; grid-column: 1; align-self: center; width: 40px; height: 40px; }
  .sd-feature__title { grid-row: 1; grid-column: 2; align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sd-feature__desc  {
    grid-row: 2; grid-column: 2; align-self: start; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* compact rows: arrow only, no tag pill / CTA label */
  .sd-feature__tag       { display: none; }
  .sd-feature__cta-label { display: none; }
  .sd-feature__cta   { grid-row: 1 / -1; grid-column: 3; align-self: center; justify-self: end; margin: 0; }
  .sd-feature__arr   { width: 34px; height: 34px; }
  /* stronger scrims: the copy must stay readable over the banner photos */
  .sd-feature--summer {
    background:
      linear-gradient(92deg, rgba(253,238,205,0.97) 0%, rgba(253,238,205,0.93) 52%, rgba(253,238,205,0.4) 84%, rgba(253,238,205,0.15) 100%),
      url("../assets/home/Banner Summer Menu.webp") right 30% / cover no-repeat;
  }
  .sd-feature--lunch {
    background:
      linear-gradient(92deg, rgba(252,224,227,0.97) 0%, rgba(252,224,227,0.93) 52%, rgba(252,224,227,0.4) 84%, rgba(252,224,227,0.15) 100%),
      url("../assets/home/Banner Lunch.webp") right 30% / cover no-repeat;
  }
  .sd-feature--ramondays {
    background:
      linear-gradient(92deg, rgba(250,228,205,0.97) 0%, rgba(250,228,205,0.93) 52%, rgba(250,228,205,0.4) 84%, rgba(250,228,205,0.15) 100%),
      url("../assets/home/Banner Ramonday.webp") right 30% / cover no-repeat;
  }
}

/* ---------- Menu Highlights — dark featured card on top + 2-col grid ----------
   JS renders the 5-window (featured = idx 2); CSS moves the featured card to
   the top full-width and lays the other 4 in a 2-col grid. */
@media (max-width: 900px) {
  .sd-menu { padding: 56px 14px 44px; }
  .sd-menu__head { display: block; }
  /* category pills in a white rounded bar (horizontal scroll if needed) */
  .sd-menu__filter {
    background: #fff;
    border: 1px solid var(--sd-mn-border);
    border-radius: 999px;
    padding: 5px;
    gap: 2px;
    margin-top: 18px;
    box-shadow: 0 10px 26px -16px rgba(35,24,20,0.2);
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    align-items: center;
    clear: both;
  }
  .sd-menu__filter::-webkit-scrollbar { display: none; }
  .sd-menu__pill { padding: 9px 14px; font-size: 0.72rem; white-space: nowrap; flex-shrink: 0; border-radius: 999px; }
  .sd-menu__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: none;
    margin: 18px 0 0;
    padding: 0;        /* reset the 36px side padding from the <=1024 carousel rule */
  }
  /* small cards — horizontal: image LEFT + text RIGHT (matches reference) */
  .sd-mcard {
    height: 124px;
    width: auto !important; min-width: 0; justify-self: stretch;  /* fill the 1fr grid cell */
    flex: initial;
    grid-template-columns: 42% 1fr;
    grid-template-rows: 1fr;
    background: #fff;
    border-color: rgba(120,70,40,0.07);
    box-shadow: 0 12px 26px -16px rgba(35,24,20,0.3);
  }
  .sd-mcard .sd-mcard__media { height: 100%; width: 100%; }
  /* photos sized to fit (beats global body.sd-home img{height:auto});
     compact cards show the WHOLE dish (contain) instead of a tight crop */
  body.sd-home .sd-mcard__media img { width: 100%; height: 100%; object-fit: cover; }
  body.sd-home .sd-mcard:not(.is-default-active) .sd-mcard__media img {
    object-fit: contain;
    padding: 5px 3px;
  }
  /* compact badge so it doesn't swallow the small photo */
  .sd-mcard .sd-mcard__badge { top: 7px; left: 7px; padding: 4px 8px; font-size: 0.5rem; }
  .sd-mcard .sd-mcard__body { padding: 10px 10px 10px 11px; gap: 3px; justify-content: center; }
  /* title-only cards: name gets the room, description is dropped */
  .sd-mcard .sd-mcard__name {
    font-size: 0.8rem; line-height: 1.25;
    padding-right: 4px;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .sd-mcard .sd-mcard__desc { display: none; }
  /* arrow pinned to the corner — text never reflows around it */
  .sd-mcard .sd-mcard__arrow {
    position: absolute; right: 8px; bottom: 8px; margin: 0;
    width: 26px; height: 26px;
    background: var(--sd-mn-red); color: #fff; border-color: transparent;
  }
  .sd-mcard .sd-mcard__arrow svg { width: 13px; height: 13px; }
  /* dark featured card — full width on top, compact fixed height */
  .sd-mcard.is-default-active {
    order: -1;
    grid-column: 1 / -1;
    height: auto; min-height: 154px;
    grid-template-columns: 1fr 0.9fr;
    grid-template-rows: 1fr;
    background: #1d1715;
    border-color: rgba(255,255,255,0.08);
  }
  .sd-mcard.is-default-active .sd-mcard__body { order: 1; padding: 40px 15px 16px; justify-content: center; gap: 6px; }
  .sd-mcard.is-default-active .sd-mcard__media { order: 2; height: 100%; }
  .sd-mcard.is-default-active .sd-mcard__name { color: #fff; font-size: 1.25rem; }
  .sd-mcard.is-default-active .sd-mcard__desc {
    color: rgba(255,255,255,0.82); font-size: 0.78rem; line-height: 1.36;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .sd-menu__nav, .sd-menu__dots { display: none; }

  /* mobile menu footer line + full-width CTA */
  .sd-menu__mfoot { display: block; text-align: center; max-width: 560px; margin: 32px auto 0; }
  .sd-menu__mfoot-line {
    font-family: var(--f-disp);
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    line-height: 1.0; text-transform: uppercase;
    color: var(--sd-mn-dark); margin: 0 0 18px;
  }
  .sd-menu__mfoot-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 16px 22px;
    background: var(--sd-red); color: #fff; border-radius: 999px;
    font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    font-size: 0.82rem; text-decoration: none;
    box-shadow: 0 14px 30px -10px rgba(214,41,41,0.55);
  }
}

/* ---------- Locations — map with pins + floating cards (kept) ----------
   Reverted from the card-list. Order via display:contents flattening:
   heading → desc → Find Nearest → map → stats → Order. Cards stay
   absolutely positioned on the map at their --a..--f %, shrunk to fit. */
@media (max-width: 900px) {
  .sd-loc { padding: 56px 20px 40px; }
  .sd-loc__grid { display: flex; flex-direction: column; gap: 18px; }
  .sd-loc__text, .sd-loc__actions { display: contents; }
  .sd-loc__eyebrow        { order: 1; }
  .sd-loc__title          { order: 2; font-size: clamp(2rem, 9vw, 2.8rem); }
  .sd-loc__title-line     { order: 3; }
  .sd-loc__desc           { order: 4; }
  .sd-loc__btn--primary   { order: 5; }
  .sd-loc__right          { order: 6; display: block; width: 100%; }
  .sd-loc__stats          { order: 7; }
  .sd-loc__btn--secondary { order: 8; }   /* the bottom "Order" bar */
  .sd-loc__btn { width: 100%; justify-content: center; padding: 16px 22px; min-height: 52px; }

  .sd-loc__map {
    display: block; position: relative;
    width: 100%; max-width: 430px; margin: 4px auto 0;
    height: 86vw; max-height: 430px;   /* explicit height so it can't collapse */
    aspect-ratio: auto; overflow: visible;
  }
  .sd-loc__map-bg { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; border-radius: 18px; }
  .sd-loc__card {
    position: absolute;
    width: 35%; max-width: 130px; min-width: 0;
    padding: 6px 7px; gap: 6px; border-radius: 11px;
    grid-template-columns: 28px 1fr;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 6px 16px -9px rgba(35,24,20,0.35);
  }
  .sd-loc__card-img { width: 28px; }
  .sd-loc__card-status { display: none; }   /* drop OPEN NOW / MOST POPULAR tags for a compact tile */
  .sd-loc__card--a { top: 2%;  left: 38%; right: auto; bottom: auto; }   /* Oshiwara */
  .sd-loc__card--b { top: 33%; left: 0;   right: auto; bottom: auto; }   /* Bandra — moved down */
  .sd-loc__card--c { top: 31%; right: 0;  left: auto;  bottom: auto; }   /* Viman Nagar */
  .sd-loc__card--d { top: 55%; left: 4%;  right: auto; bottom: auto; }   /* Wakad — down + left */
  .sd-loc__card--e { top: 70%; left: 0;   right: auto; bottom: auto; }   /* Jayanagar */
  .sd-loc__card--f { top: 70%; right: -2%; left: auto; bottom: auto; }   /* Koramangala — down + right */
  .sd-loc__card-name { font-size: 0.63rem; line-height: 1.12; }
  .sd-loc__card-status { font-size: 0.42rem; padding: 2px 5px; }
  .sd-loc__card-link { font-size: 0.5rem; }

  .sd-loc__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .sd-loc__stat-card { padding: 14px 8px; flex-direction: column; text-align: center; }
}
@media (max-width: 400px) {
  .sd-loc__card { width: 42%; }
  .sd-loc__stat-card { padding: 12px 6px; }
}

/* ---------- About — stacked cards + media ---------- */
@media (max-width: 900px) {
  .sd-about { padding: 56px 20px; }
  .sd-about__grid { display: flex; flex-direction: column; gap: 22px; }
  .sd-about__card--left { order: 1; }
  .sd-about__center { order: 2; }
  .sd-about__card--cream { order: 3; }
  .sd-about__card { padding: 26px 22px; }
  .sd-about__h2 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .sd-about__photo { min-height: 300px; border-radius: 22px; overflow: hidden; }
}

/* ---------- Social — centered story feed + stats + follow ---------- */
@media (max-width: 900px) {
  .sd-social { padding: 56px 20px; }
  .sd-social__grid { display: flex; flex-direction: column; gap: 16px; }
  .sd-social__text { display: contents; }
  .sd-social__title       { order: 1; text-align: center; }
  .sd-social__title-line  { order: 2; align-self: center; }
  .sd-social__script      { order: 3; text-align: center; }
  .sd-social__description { order: 4; text-align: center; }
  .sd-social__carousel    { order: 5; }
  .sd-social__stats       { order: 6; }
  .sd-social__actions     { order: 7; }
  .sd-social__title { font-size: clamp(2.4rem, 11vw, 3.4rem); }

  .sd-social__carousel {
    position: relative;
    min-width: 0;            /* CRITICAL: lets the flex item clip to the viewport so it can scroll */
    max-width: 100vw;
    height: auto; display: flex; flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;   /* horizontal swipes scroll the reel; vertical swipes scroll the page */
    align-items: center; justify-content: flex-start;
    transform: none; gap: 12px;
    margin: 0 -20px; padding: 10px 20px 44px;
    scrollbar-width: none;
  }
  .sd-social__carousel::-webkit-scrollbar { display: none; }
  /* let the swipe gesture reach the scroller instead of being eaten by the video */
  .sd-story__bg, .sd-story__overlay { pointer-events: none; }
  .sd-story {
    transform: none !important; margin: 0 !important;
    flex: 0 0 58vw; width: auto; max-width: 230px; height: auto;
    aspect-ratio: 9 / 16; scroll-snap-align: center;
  }
  .sd-story--3.sd-story--center {
    transform: none !important; margin: 0 !important;
    flex: 0 0 70vw; width: auto; max-width: 280px; height: auto; aspect-ratio: 9 / 16;
    scroll-snap-align: center;
  }
  .sd-social__doodles, .sd-social__heart, .sd-social__stamp, .sd-social__progress { display: none; }
  .sd-social__more {
    position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
    margin: 0; white-space: nowrap;
  }
  .sd-social__stats { display: flex; flex-direction: row; justify-content: center; gap: 18px; padding-top: 6px; }
  .sd-social__stat { width: auto; border-right: 0; padding: 0; align-items: center; text-align: center; }
  .sd-social__actions { display: flex; justify-content: center; }
  .sd-social__follow { width: 100%; justify-content: center; }
  .sd-social__arrow { display: none; }   /* native swipe replaces arrows */
}
@media (max-width: 400px) {
  .sd-social__carousel { margin: 0 -16px; padding: 10px 16px 44px; }
}

/* ---------- Location detail popup — phone ---------- */
@media (max-width: 640px) {
  .sd-locpop__panel { max-height: 100dvh; }   /* iOS dynamic viewport */
  .sd-lpdetail__info { grid-template-columns: 1fr; gap: 12px; }
  .sd-lpdetail__hero { max-height: 40vh; }
  .sd-lpdetail__actions { display: flex; flex-direction: column; align-items: stretch; }
  .sd-lpdetail__btn { width: 100%; }
}

/* ---------- Hamburger drawer — peach panel + dimmed backdrop ---------- */
.sd-home-mobile-nav {
  position: fixed; inset: 0; z-index: 200;
  background: transparent; transform: none;
  visibility: hidden; pointer-events: none;
}
.sd-home-mobile-nav.is-open { visibility: visible; pointer-events: auto; }
.sd-home-mobile-nav__backdrop {
  position: absolute; inset: 0;
  background: rgba(25,12,12,0.45);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.sd-home-mobile-nav.is-open .sd-home-mobile-nav__backdrop { opacity: 1; }
.sd-home-mobile-nav__panel {
  position: absolute; top: 0; right: 0;
  width: min(85vw, 360px); height: 100%; height: 100dvh;
  background: #fbece9;
  padding: 26px 26px 34px;
  display: flex; flex-direction: column;
  box-shadow: -20px 0 50px -18px rgba(35,24,20,0.4);
  transform: translateX(100%);
  transition: transform 0.42s var(--ease);
  overflow-y: auto;
}
.sd-home-mobile-nav.is-open .sd-home-mobile-nav__panel { transform: translateX(0); }
.sd-home-mobile-nav__close {
  align-self: flex-end;
  width: 48px; height: 48px; border: 0; background: transparent;
  color: var(--sd-red); font-size: 2.5rem; line-height: 1; cursor: pointer;
}
.sd-home-mobile-nav__brand { display: flex; align-items: center; gap: 12px; margin: 2px 0 22px; }
.sd-home-mobile-nav__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: 0 0 auto;
}
.sd-home-mobile-nav__mark img { width: 100%; height: 100%; object-fit: contain; }
.sd-home-mobile-nav__brand-text {
  display: flex; flex-direction: column;
  font-family: var(--f-disp); font-size: 1.4rem; color: var(--sd-red);
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1;
}
.sd-home-mobile-nav__brand-text small {
  font-family: var(--f-body); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.14em; color: #8a6b66; margin-top: 7px; text-transform: uppercase;
}
.sd-home-mobile-nav__list { list-style: none; margin: 4px 0 0; padding: 0; }
.sd-home-mobile-nav__list li { border-top: 1px solid rgba(120,70,40,0.12); }
.sd-home-mobile-nav__list li:last-child { border-bottom: 1px solid rgba(120,70,40,0.12); }
.sd-home-mobile-nav__list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 2px;
  font-family: var(--f-disp); font-size: 1.25rem; text-transform: uppercase;
  letter-spacing: 0.02em; color: #2a1414; text-decoration: none;
}
.sd-home-mobile-nav__chev { color: var(--sd-red); font-size: 1.5rem; line-height: 1; }
.sd-home-mobile-nav__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 24px 0 0; padding: 16px 22px;
  background: var(--sd-red); color: #fff; border-radius: 999px;
  font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.82rem;
  text-decoration: none;
}
.sd-home-mobile-nav__social { margin-top: 26px; }
.sd-home-mobile-nav__social-label {
  display: block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sd-red); margin-bottom: 12px;
}
.sd-home-mobile-nav__social-icons { display: flex; gap: 12px; }
.sd-home-mobile-nav__social-icons a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(214,41,41,0.08); color: var(--sd-red);
}
.sd-home-mobile-nav__social-icons svg { width: 18px; height: 18px; }

/* ---------- Footer — mobile restructure (matches reference) ---------- */
@media (max-width: 900px) {
  .sd-foot__action-bar, .sd-foot__main { display: none; }
  .sd-foot__mobile { display: block; padding: 40px 20px 12px; }
  .sd-foot__m-brand { display: flex; align-items: center; justify-content: center; gap: 10px; }
  .sd-foot__m-logo { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; }
  .sd-foot__m-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .sd-foot__m-name { font-family: var(--f-disp); font-size: 1.5rem; color: var(--sd-ft-red); text-transform: uppercase; letter-spacing: 0.04em; }
  .sd-foot__m-eyebrow { text-align: center; color: var(--sd-ft-red); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin: 16px 0 8px; }
  .sd-foot__m-body { text-align: center; color: var(--sd-ft-muted); font-size: 0.92rem; line-height: 1.55; margin: 0 auto 22px; max-width: 420px; }

  .sd-foot__m-actions { display: flex; flex-direction: column; gap: 12px; }
  .sd-foot__m-action {
    display: flex; align-items: center; gap: 14px; padding: 15px 16px;
    background: #fff; border: 1px solid var(--sd-ft-border); border-radius: 16px;
    box-shadow: 0 12px 26px -18px rgba(35,24,20,0.3); text-decoration: none;
  }
  .sd-foot__m-action-ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--sd-ft-red); color: #fff; }
  .sd-foot__m-action-ic svg { width: 20px; height: 20px; }
  .sd-foot__m-action-tx { display: flex; flex-direction: column; flex: 1; gap: 2px; }
  .sd-foot__m-action-tx strong { font-size: 0.98rem; color: var(--sd-ft-dark); }
  .sd-foot__m-action-tx em { font-style: normal; font-size: 0.78rem; color: var(--sd-ft-soft); }
  .sd-foot__m-action-arr { color: var(--sd-ft-red); font-size: 1.2rem; }

  .sd-foot__m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
  .sd-foot__m-tile {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 22px 12px; background: #fff; border: 1px solid var(--sd-ft-border);
    border-radius: 16px; color: var(--sd-ft-dark); text-decoration: none;
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .sd-foot__m-tile-ic { color: var(--sd-ft-red); }
  .sd-foot__m-tile-ic svg { width: 24px; height: 24px; }

  .sd-foot__m-social { display: flex; justify-content: center; gap: 14px; margin: 4px 0 18px; }
  .sd-foot__m-social a { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--sd-ft-border); color: var(--sd-ft-red); }
  .sd-foot__m-social svg { width: 18px; height: 18px; }

  .sd-foot__m-help {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 16px; background: rgba(215,25,32,0.07);
    border: 1px solid rgba(215,25,32,0.2); border-radius: 16px;
    text-decoration: none; color: var(--sd-ft-dark);
  }
  .sd-foot__m-help-tx { display: flex; flex-direction: column; font-size: 0.9rem; }
  .sd-foot__m-help-tx small { color: var(--sd-ft-red); font-size: 0.82rem; margin-top: 2px; }
  .sd-foot__m-help-arr { color: var(--sd-ft-red); font-size: 1.2rem; }

  /* bottom bar: centered copyright + links */
  .sd-foot__bot-inner { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .sd-foot__bot-r { justify-content: center; flex-wrap: wrap; gap: 8px 16px; }
}

/* ---------- Desktop (>900px): hide all mobile-only elements ----------
   The img rules use body.sd-home + !important to beat the global
   `body.sd-home img { display:block }` rule (higher specificity). */
@media (min-width: 901px) {
  .sd-menu__mfoot,
  .sd-foot__mobile { display: none; }
  /* the mobile reel's cloned stories must never appear on the desktop arc */
  .sd-story--clone { display: none !important; }
  /* close the large gap between the hero buttons and the promo cards */
  .sd-h-hero__grid { min-height: auto; }
  .sd-h-hero__features { margin-top: 32px; }
}

/* ---------- Right-edge fade hint on horizontal scrollers ----------
   (mask paints in the element box, so the fade stays put while the
   content scrolls; rows that fit are visually unaffected) */
@media (max-width: 1240px) {
  .sd-menu__filter,
  .sd-menu__row {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
}
@media (max-width: 768px) {
  .sd-lpdetail__tags {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 38px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 38px), transparent);
  }
}

/* ---------- Social proof quote (replaced the posts/followers stats) -- */
.sd-social__quote {
  position: relative;
  margin-top: 28px;
  max-width: 440px;
  background: #fff;
  border: 1px solid rgba(74, 14, 14, 0.08);
  border-left: 4px solid var(--sd-red);
  border-radius: 18px;
  padding: 20px 22px 18px;
  box-shadow: 0 18px 40px -22px rgba(35, 24, 20, 0.3);
}
.sd-social__quote-mark {
  position: absolute;
  top: 2px;
  right: 16px;
  font-family: var(--f-disp);
  font-size: 4rem;
  line-height: 1;
  color: rgba(214, 41, 41, 0.12);
  pointer-events: none;
}
.sd-social__quote-text {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--sd-text);
  transition: opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1), filter .5s ease, height .5s ease;
  will-change: opacity, transform;
}
/* auto-rotating testimonial: blur + slide crossfade (driven by initReviewSlideshow) */
.sd-social__quote-text.is-leaving  { opacity: 0; transform: translateY(-14px); filter: blur(7px); }
.sd-social__quote-text.is-entering { opacity: 0; transform: translateY(16px);  filter: blur(7px); }
.sd-social__quote-text.sd-noanim   { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sd-social__quote-text { transition: none; }
}
.sd-social__quote-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sd-social__quote-stars { color: #FBBC04; font-size: 0.85rem; letter-spacing: 2px; }
.sd-social__quote-src { font-size: 0.76rem; color: var(--sd-text-mute); }
.sd-social__quote-src strong { color: var(--sd-text); font-weight: 800; }
@media (max-width: 900px) {
  /* slots where the stats strip used to sit in the mobile order */
  .sd-social__quote { order: 6; max-width: 100%; margin-top: 20px; }
}