/* ============================================================
   SEOUL DAK — CAMPAIGN LANDING PAGES v2 (landing-v2.css)
   Homepage design language (Oswald / Caveat / Inter, cream + red,
   white lifted cards) for all summer-* / lunch-club-* pages.

   CONTRACT with js/landing.js — these class names and hooks are
   read by the script and MUST keep existing:
     .ld-reveal + .is-visible (+ --ld-delay), [data-counter]/[data-suffix],
     [data-magnetic], .sd-ld-card (+ __img img/__num/__cat/__name/__desc/
     __tags span/__cta a/__link, data-item-name, data-zomato-url),
     #item-modal .sd-ld-modal* + .is-open + body.sd-modal-open,
     .sd-ld-spotlight__inner data-* + [data-spotlight-action],
     .sd-ld-floatbar + .is-visible + [data-floatbar-action],
     .sd-ld-hero__photos img + .is-active (summer crossfade hero).

   Layout: tokens → utilities → hero → section shell → grid/cards →
   incl strip → stats band → spotlight → branches picker (hubs) →
   modal → floatbar → reduced-motion → ONE mobile block at the end.
   ============================================================ */

/* ============================================================
   TOKENS + BASE (scoped to body.sd-landing)
   ============================================================ */
body.sd-landing {
  /* homepage tokens, copied verbatim from home.css */
  --container-max:   1560px;

  --sd-cream:        #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);

  /* legacy aliases still referenced by inline styles in the pages */
  --ld-s-1: 4px;  --ld-s-2: 8px;   --ld-s-3: 12px; --ld-s-4: 16px;
  --ld-s-5: 24px; --ld-s-6: 32px;  --ld-s-7: 48px; --ld-s-8: 64px;
  --ld-s-9: 96px; --ld-s-10: 128px;
  --ld-ease: var(--ease);
  --ld-red: var(--sd-red);

  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-landing img { display: block; max-width: 100%; height: auto; }
body.sd-landing button { font: inherit; cursor: pointer; }

/* ============================================================
   UTILITIES — reveal, eyebrow, headings, buttons
   ============================================================ */
.ld-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--ld-delay, 0s);
}
.ld-reveal.is-visible { opacity: 1; transform: none; }

.sd-ld-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sd-red);
}
.sd-ld-eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--sd-red);
  border-radius: 2px;
}

.sd-ld-h2 {
  font-family: var(--f-disp);
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  color: var(--sd-text);
  margin: 12px 0 6px;
}
.ld-accent { color: var(--sd-red); font-style: normal; }
/* repurposed: Caveat script subline under the H2 (own line) */
.sd-ld-h2__kor {
  display: block;
  font-family: var(--f-script);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--sd-red);
  transform: rotate(-2deg);
  margin-top: 6px;
}
.sd-ld-section__sub {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sd-text-mute);
  max-width: 56ch;
  margin: 10px auto 0;
}

/* pill buttons — homepage .sd-h-btn recipe */
.ld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
              transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.ld-btn--zomato {
  background: var(--sd-red);
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(214, 41, 41, 0.55);
}
.ld-btn--zomato:hover {
  background: var(--sd-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -14px rgba(214, 41, 41, 0.6);
}
.ld-btn--ghost {
  background: #fff;
  color: var(--sd-text);
  border: 1px solid var(--sd-line-soft);
}
.ld-btn--ghost:hover {
  border-color: var(--sd-red);
  color: var(--sd-red);
  background: var(--sd-red-soft);
  transform: translateY(-2px);
}
/* glass variant — summer photo hero (sits on a dark photo) */
.ld-btn--glass {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ld-btn--glass:hover { background: rgba(255, 255, 255, 0.26); transform: translateY(-2px); }
.ld-btn--lg { padding: 17px 34px; font-size: 0.82rem; }
.ld-btn--sm { padding: 11px 20px; font-size: 0.72rem; }
.ld-arr { display: inline-block; transition: transform 0.3s var(--ease); }
.ld-btn:hover .ld-arr { transform: translateX(4px); }

/* ============================================================
   HERO
   ============================================================ */
.sd-ld-hero {
  position: relative;
  padding: 150px 48px 64px;
  background:
    radial-gradient(900px 480px at 10% -12%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(820px 560px at 90% 115%, rgba(214, 41, 41, 0.09), transparent 62%),
    linear-gradient(180deg, #f7e5e8 0%, var(--sd-cream) 58%);
  overflow: hidden;
}
/* faint in-store tile grid — echoes the red tiled wall in the food
   photography; masked so it lives behind the photo side and fades out */
.sd-ld-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(214, 41, 41, 0.07) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(214, 41, 41, 0.07) 1.5px, transparent 1.5px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(860px 640px at 80% 40%, #000 0%, transparent 72%);
  mask-image: radial-gradient(860px 640px at 80% 40%, #000 0%, transparent 72%);
  pointer-events: none;
}
/* warm bloom behind the title side */
.sd-ld-hero::after {
  content: '';
  position: absolute;
  left: -10%;
  bottom: -38%;
  width: 48%;
  height: 90%;
  background: radial-gradient(circle, rgba(230, 200, 204, 0.55), transparent 65%);
  pointer-events: none;
}
.sd-ld-hero__grid, .sd-ld-hero__content { position: relative; z-index: 1; }
.sd-ld-hero__content {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sd-ld-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--sd-line-soft);
  border-radius: var(--r-pill);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sd-red);
}
.sd-ld-hero__chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2c8a4a;
  animation: sd-ldv2-dot 1.8s ease-in-out infinite;
}
@keyframes sd-ldv2-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44, 138, 74, 0.4); }
  60% { box-shadow: 0 0 0 5px rgba(44, 138, 74, 0); }
}
.sd-ld-hero__title {
  font-family: var(--f-disp);
  font-size: clamp(2.7rem, 5vw, 4.6rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  text-wrap: balance;
  color: var(--sd-text);
  margin: 18px 0 8px;
}
.sd-ld-hero__script {
  font-family: var(--f-script);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  color: var(--sd-red);
  transform: rotate(-2deg);
  display: inline-block;
  margin: 0 0 14px;
}
.sd-ld-hero__sub {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--sd-text-mute);
  max-width: 52ch;
  margin: 0 0 28px;
}
.sd-ld-hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.sd-ld-hero__proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 10px 16px;
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow: 0 14px 32px -14px rgba(74, 14, 14, 0.25);
  font-size: 0.78rem;
  color: var(--sd-text);
  white-space: nowrap;
}
.sd-ld-hero__proof svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sd-ld-hero__proof strong { font-weight: 800; }

/* --- split variant: text left over the photo's built-in empty
   space, full-bleed lifestyle photo as the hero background -------- */
.sd-ld-hero--split {
  min-height: 100vh;          /* full first view, like the summer hero */
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(247, 229, 232, 0.92) 0%, rgba(247, 229, 232, 0.55) 26%, rgba(247, 229, 232, 0) 48%),
    url("../assets/Landing page Images/Lunch Image1.webp") right center / cover no-repeat,
    linear-gradient(180deg, #f7e5e8 0%, var(--sd-cream) 58%);
}
/* the tile-grid + bloom decorations are for the flat cream hero —
   they would sit on top of the photo here */
.sd-ld-hero--split::before,
.sd-ld-hero--split::after { display: none; }
.sd-ld-hero--split .sd-ld-hero__grid {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr;
  gap: 40px;
  align-items: center;
}
.sd-ld-hero--split .sd-ld-hero__content {
  margin: 0;
  align-items: flex-start;
  text-align: left;
}
.sd-ld-hero--split .sd-ld-hero__cta { justify-content: flex-start; }
.sd-ld-hero__photo { display: none; }

/* --- photo-slideshow variant (summer family) ------------------ */
.sd-ld-hero--has-photo { padding: 0; background: var(--sd-burgundy); }
.sd-ld-hero--has-photo .sd-ld-hero__photos {
  position: absolute;
  inset: 0;
}
/* picture wrappers position only — opacity lives on the img, because
   landing.js toggles .is-active on the IMG (an opaque wrapper would
   keep the active slide hidden) */
body.sd-landing .sd-ld-hero--has-photo .sd-ld-hero__photos picture {
  position: absolute;
  inset: 0;
}
body.sd-landing .sd-ld-hero--has-photo .sd-ld-hero__photos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
body.sd-landing .sd-ld-hero--has-photo .sd-ld-hero__photos img.is-active { opacity: 1; }
.sd-ld-hero--has-photo .sd-ld-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(35, 8, 8, 0.62) 0%, rgba(35, 8, 8, 0.32) 30%, rgba(35, 8, 8, 0) 56%),
    linear-gradient(180deg, rgba(20, 5, 5, 0.12) 0%, transparent 34%, rgba(20, 5, 5, 0.22) 100%);
  pointer-events: none;
}
/* the hero matches the photo's own 16:9 frame so the full composition
   shows (mobile swaps to the 9:16 portrait source) */
.sd-ld-hero--has-photo .sd-ld-hero__content {
  aspect-ratio: 16 / 9;
  min-height: 480px;
  max-height: 100vh;         /* full first view */
  max-width: none;
  width: 100%;
  align-items: flex-start;   /* hero copy on the LEFT, over the clear space */
  text-align: left;
  justify-content: center;   /* vertically centred in the left zone */
  padding: 48px clamp(28px, 6vw, 96px);
  position: relative;
  z-index: 1;
}
/* desktop: keep the copy in the left zone, clear of the drinks on the right */
@media (min-width: 769px) {
  .sd-ld-hero--has-photo .sd-ld-hero__chip,
  .sd-ld-hero--has-photo .sd-ld-hero__title,
  .sd-ld-hero--has-photo .sd-ld-hero__sub,
  .sd-ld-hero--has-photo .sd-ld-hero__cta { max-width: 540px; }
}
.sd-ld-hero--has-photo .sd-ld-hero__chip {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sd-ld-hero--has-photo .sd-ld-hero__title { color: #fff; text-shadow: 0 2px 16px rgba(20, 4, 4, 0.5); }
.sd-ld-hero--has-photo .sd-ld-hero__script { color: #ffd9d9; }
.sd-ld-hero--has-photo .sd-ld-hero__sub { color: #fff; text-shadow: 0 1px 12px rgba(20, 4, 4, 0.6); }

/* ============================================================
   NEON ACCENTS — in-store neon artwork (desktop only)
   ============================================================ */
.sd-ldv2-neon {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  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));
  animation: sd-ldv2-neon-float 7s ease-in-out infinite alternate;
}
@keyframes sd-ldv2-neon-float {
  from { transform: translateY(0) rotate(var(--neon-rot, 0deg)); }
  to   { transform: translateY(-9px) rotate(var(--neon-rot, 0deg)); }
}
/* 안녕 + chopsticks on the dark stats band */
.sd-ldv2-neon--stats {
  right: 44px;
  top: 50%;
  width: 140px;
  margin-top: -62px;
  --neon-rot: 4deg;
}
/* falling fried chicken beside the spotlight heading */
.sd-ldv2-neon--spot {
  left: 7%;
  top: 30px;
  width: 130px;
  --neon-rot: -7deg;
}
/* noodle cup in the open pink area above the title, left of the food */
.sd-ldv2-neon--hero {
  top: -130px;
  left: 25%;
  width: 148px;
  z-index: 3;
  --neon-rot: -8deg;
}
/* body.sd-landing prefix REQUIRED: the global `body.sd-landing img`
   normalizer (0-1-1) would otherwise beat a single-class display:none */
@media (max-width: 1280px) {
  body.sd-landing .sd-ldv2-neon { display: none; }
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.sd-ld-section {
  position: relative;
  padding: 72px 48px 64px;
  background: var(--sd-cream);
}
.sd-ld-section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}
.sd-ld-section__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--container-max);
  margin: 0 auto 18px;
}
.sd-ld-section__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid var(--sd-line-soft);
  border-radius: var(--r-pill);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-text-mute);
  white-space: nowrap;
}
.sd-ld-section__count strong { color: var(--sd-red); font-weight: 800; }

/* ============================================================
   GRID + ITEM CARDS
   ============================================================ */
.sd-ld-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  gap: 24px;
}
/* 5 items in ONE row on desktop (compact minimal cards) */
.sd-ld-grid--3-2-centered { grid-template-columns: repeat(5, 1fr); gap: 18px; }
/* 4 items: clean 4-up (old "asym" tilt retired) */
.sd-ld-grid--asym { grid-template-columns: repeat(4, 1fr); }

.sd-ld-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--sd-line-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(35, 24, 20, 0.3);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s ease;
  cursor: pointer;
}
.sd-ld-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -24px rgba(74, 14, 14, 0.35);
  border-color: var(--sd-line);
}
.sd-ld-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sd-red), #ff7a4d);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.sd-ld-card:hover::after { transform: scaleX(1); }

.sd-ld-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sd-ld-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sd-cream-warm);
}
body.sd-landing .sd-ld-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.sd-ld-card:hover .sd-ld-card__img img { transform: scale(1.05); }
/* MINIMAL CARDS: photo + name + order link. The num / cat / desc /
   tags / stamp elements stay in the markup (the item popup is
   populated from them by landing.js) but are hidden on the card. */
.sd-ld-card__stamp,
.sd-ld-card__num,
.sd-ld-card__cat,
.sd-ld-card__desc,
.sd-ld-card__tags { display: none; }

.sd-ld-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 14px 16px 16px;
}
.sd-ld-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sd-ld-card__title-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-ld-card__name {
  font-family: var(--f-disp);
  font-size: 1.12rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--sd-text);
  margin: 0;
}
.sd-ld-card__cta { margin-top: auto; padding-top: 8px; }
.sd-ld-card__cta a {
  position: relative;
  z-index: 2;   /* clickable above the modal overlay link */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sd-red);
}
.sd-ld-card__cta a:hover .ld-arr { transform: translateX(5px); }

/* ============================================================
   INCL STRIP — what's in the box (white chip cards)
   ============================================================ */
.sd-ld-incl {
  background: var(--sd-cream);
  padding: 8px 48px 56px;
}
.sd-ld-incl__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.sd-ld-incl__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--sd-line-soft);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 32px -20px rgba(35, 24, 20, 0.25);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.sd-ld-incl__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -20px rgba(35, 24, 20, 0.32);
}
.sd-ld-incl__item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--sd-red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s var(--ease);
}
.sd-ld-incl__item:hover::after { transform: scaleY(1); }
.sd-ld-incl__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--sd-red-soft);
  color: var(--sd-red);
  display: grid;
  place-items: center;
}
.sd-ld-incl__icon svg { width: 21px; height: 21px; }
.sd-ld-incl__label {
  font-size: 0.7rem;
  color: var(--sd-text-mute);
  line-height: 1.4;
}
.sd-ld-incl__label strong {
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sd-text);
  margin-bottom: 2px;
}

/* ============================================================
   STATS — dark burgundy band
   ============================================================ */
.sd-ld-stats {
  background: var(--sd-cream);
  padding: 8px 48px 72px;
}
.sd-ld-stats__grid {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 48px 60px;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, #3a0f0f 0%, var(--sd-burgundy) 70%);
  overflow: hidden;
}
.sd-ld-stats__grid::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 55%;
  height: 130%;
  background: radial-gradient(circle, rgba(214, 41, 41, 0.22), transparent 65%);
  pointer-events: none;
}
.sd-ld-stat {
  position: relative;
  text-align: center;
}
.sd-ld-stat + .sd-ld-stat::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.sd-ld-stat__num {
  font-family: var(--f-disp);
  font-size: clamp(2.1rem, 3vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.sd-ld-stat__label {
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   SPOTLIGHT — single-branch showcase
   ============================================================ */
.sd-ld-spotlight {
  position: relative;
  background: var(--sd-cream);
  padding: 8px 48px 88px;
  overflow: hidden;
}
.sd-ld-spotlight::before {
  content: '닭';
  position: absolute;
  right: -40px;
  bottom: -90px;
  font-family: var(--f-disp);
  font-size: 22rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(214, 41, 41, 0.05);
  pointer-events: none;
}
.sd-ld-spotlight__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}
.sd-ld-spotlight__inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border: 1px solid var(--sd-line-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(74, 14, 14, 0.4);
}
.sd-ld-spotlight__img {
  position: relative;
  min-height: 420px;
  background: var(--sd-cream-warm);
}
body.sd-landing .sd-ld-spotlight__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-ld-spotlight__city {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--r-pill);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-text);
}
.sd-ld-spotlight__city::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sd-red);
}
.sd-ld-spotlight__body {
  padding: 42px 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.sd-ld-spotlight__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: rgba(44, 138, 74, 0.09);
  border-radius: var(--r-pill);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1e6e3c;
}
.sd-ld-spotlight__chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2c8a4a;
  animation: sd-ldv2-dot 1.8s ease-in-out infinite;
}
.sd-ld-spotlight__name {
  font-family: var(--f-disp);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  color: var(--sd-text);
  margin: 0;
}
.sd-ld-spotlight__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sd-ld-spotlight__meta-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--sd-text-mute);
}
.sd-ld-spotlight__meta-item svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--sd-red);
}
.sd-ld-spotlight__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  width: 100%;
}
/* width (not flex-basis) — % basis explodes in column direction on mobile */
.sd-ld-spotlight__actions .ld-btn--zomato { width: 100%; }
.sd-ld-spotlight__act {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--sd-line-soft);
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--sd-text);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.sd-ld-spotlight__act:hover {
  border-color: var(--sd-red);
  color: var(--sd-red);
  background: var(--sd-red-soft);
}
.sd-ld-spotlight__act svg { width: 14px; height: 14px; }
.sd-ld-spotlight__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--sd-line-soft);
}
.sd-ld-spotlight__more-text { font-size: 0.78rem; color: var(--sd-text-mute); }
.sd-ld-spotlight__more-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sd-red);
}
.sd-ld-spotlight__more-link:hover .ld-arr { transform: translateX(4px); }

/* ============================================================
   BRANCHES PICKER — hub pages (summer.html / lunch-club.html)
   ============================================================ */
.sd-ld-branches {
  position: relative;
  background: var(--sd-cream);
  padding: 8px 48px 88px;
}
.sd-ld-branches__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}
.sd-ld-branches__cities {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sd-ld-city { display: flex; flex-direction: column; gap: 16px; }
.sd-ld-city__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sd-ld-city__head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sd-line-soft);
  order: 2;
}
.sd-ld-city__name {
  font-family: var(--f-disp);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sd-text);
  margin: 0;
}
.sd-ld-city__count {
  order: 3;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-text-mute);
  white-space: nowrap;
}
.sd-ld-branch-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--sd-line-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(35, 24, 20, 0.3);
  text-decoration: none;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.sd-ld-branch-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 56px -24px rgba(74, 14, 14, 0.35);
}
.sd-ld-branch-tile::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sd-red), #ff7a4d);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.sd-ld-branch-tile:hover::after { transform: scaleX(1); }
.sd-ld-branch-tile__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sd-cream-warm);
}
body.sd-landing .sd-ld-branch-tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.sd-ld-branch-tile:hover .sd-ld-branch-tile__img img { transform: scale(1.05); }
.sd-ld-branch-tile__body {
  position: relative;
  padding: 16px 56px 18px 20px;
}
.sd-ld-branch-tile__city {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sd-red);
  margin-bottom: 4px;
}
.sd-ld-branch-tile__name {
  font-family: var(--f-disp);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  color: var(--sd-text);
  margin: 0;
}
.sd-ld-branch-tile__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--sd-text-mute);
}
.sd-ld-branch-tile__rating::before { content: '★'; color: #FBBC04; }
.sd-ld-branch-tile__arr {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sd-cream-warm);
  color: var(--sd-text);
  font-size: 0.9rem;
  transition: background 0.3s ease, color 0.3s ease, transform 0.35s var(--ease);
}
.sd-ld-branch-tile:hover .sd-ld-branch-tile__arr {
  background: var(--sd-red);
  color: #fff;
  transform: translateY(-50%) translateX(3px);
}

/* ============================================================
   ITEM MODAL
   ============================================================ */
.sd-ld-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.sd-ld-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sd-ld-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 5, 5, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sd-ld-modal__panel {
  position: relative;
  width: min(880px, 94vw);
  max-height: 88vh;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  background: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(20, 5, 5, 0.6);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.35s var(--ease);
}
.sd-ld-modal.is-open .sd-ld-modal__panel { transform: none; }
.sd-ld-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--sd-text);
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: 0 10px 24px -10px rgba(20, 5, 5, 0.4);
  transition: background 0.25s ease, color 0.25s ease, transform 0.3s var(--ease);
}
.sd-ld-modal__close:hover {
  background: var(--sd-red);
  color: #fff;
  transform: rotate(90deg);
}
.sd-ld-modal__img {
  position: relative;
  min-height: 320px;
  background: var(--sd-cream-warm);
}
body.sd-landing .sd-ld-modal__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-ld-modal__stamp {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(214, 41, 41, 0.92);
  color: #fff;
  font-family: var(--f-disp);
  font-size: 1rem;
  font-weight: 700;
}
.sd-ld-modal__body {
  padding: 34px 36px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sd-ld-modal__head { display: flex; align-items: center; gap: 12px; }
.sd-ld-modal__num {
  font-family: var(--f-disp);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sd-red);
  border: 1px solid var(--sd-line);
  border-radius: 10px;
  padding: 4px 8px;
  line-height: 1;
}
.sd-ld-modal__title-block { display: flex; flex-direction: column; gap: 2px; }
.sd-ld-modal__cat {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sd-red);
}
.sd-ld-modal__name {
  font-family: var(--f-disp);
  font-size: 1.7rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--sd-text);
  margin: 0;
}
.sd-ld-modal__desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--sd-text-mute);
  margin: 0;
}
.sd-ld-modal__detail {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--sd-text-mute);
  background: var(--sd-red-soft);
  border-left: 3px solid var(--sd-red);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 12px 14px;
}
.sd-ld-modal__detail:empty { display: none; }
.sd-ld-modal__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-ld-modal__tags span {
  display: inline-flex;
  padding: 5px 11px;
  background: var(--sd-red-soft);
  border: 1px solid var(--sd-line-soft);
  border-radius: var(--r-pill);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-red);
}
.sd-ld-modal__cta { margin-top: auto; padding-top: 10px; }
.sd-ld-modal__cta .ld-btn { width: 100%; }

/* ============================================================
   BRANCH POPUP — hub branch tiles open this (js/landing.js
   initBranchPopup builds the markup from js/branch-data.js)
   ============================================================ */
.sd-ld-locpop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.sd-ld-locpop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sd-ld-locpop__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 5, 5, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sd-ld-locpop__panel {
  position: relative;
  width: min(520px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: 0 40px 90px -30px rgba(20, 5, 5, 0.6);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.35s var(--ease);
}
.sd-ld-locpop.is-open .sd-ld-locpop__panel { transform: none; }
.sd-ld-locpop__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--sd-text);
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: 0 10px 24px -10px rgba(20, 5, 5, 0.4);
  transition: background 0.25s ease, color 0.25s ease, transform 0.3s var(--ease);
}
.sd-ld-locpop__close:hover {
  background: var(--sd-red);
  color: #fff;
  transform: rotate(90deg);
}
.sd-ld-locpop__img {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--sd-cream-warm);
  overflow: hidden;
}
body.sd-landing .sd-ld-locpop__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-ld-locpop__city {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--r-pill);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-text);
}
.sd-ld-locpop__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.sd-ld-locpop__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(44, 138, 74, 0.09);
  border-radius: var(--r-pill);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1e6e3c;
}
.sd-ld-locpop__chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2c8a4a;
  animation: sd-ldv2-dot 1.8s ease-in-out infinite;
}
.sd-ld-locpop__name {
  font-family: var(--f-disp);
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  color: var(--sd-text);
  margin: 0;
}
.sd-ld-locpop__rating {
  font-size: 0.82rem;
  color: #FBBC04;
}
.sd-ld-locpop__rating strong { color: var(--sd-text); font-weight: 800; }
.sd-ld-locpop__rating span { color: var(--sd-text-mute); font-size: 0.78rem; }
.sd-ld-locpop__row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--sd-text-mute);
}
.sd-ld-locpop__row svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--sd-red);
}
.sd-ld-locpop__actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 8px;
}
.sd-ld-locpop__actions .ld-btn--zomato { width: 100%; }
.sd-ld-locpop__ghosts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.sd-ld-locpop__full {
  align-self: flex-start;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--sd-line-soft);
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sd-red);
}
.sd-ld-locpop__full:hover .ld-arr { transform: translateX(4px); }

/* ============================================================
   FLOATBAR — mobile fixed bar in the homepage orderbar style:
   floating white pill, rotating "Craving this?" item + Order Now
   ============================================================ */
.sd-ld-floatbar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: none;   /* shown ≤900px in the mobile block */
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 8px 10px;
  background: rgba(255, 252, 250, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--sd-line-soft);
  border-radius: var(--r-pill);
  box-shadow: 0 18px 40px -18px rgba(74, 14, 14, 0.45);
  transform: translateY(140%);
  transition: transform 0.4s var(--ease);
}
.sd-ld-floatbar.is-visible { transform: none; }
body.sd-modal-open .sd-ld-floatbar { transform: translateY(140%); }
.sd-ld-floatbar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition: opacity 0.24s ease, transform 0.28s var(--ease);
}
.sd-ld-floatbar__item.is-out {
  opacity: 0;
  transform: translateY(8px);
}
.sd-ld-floatbar__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-landing .sd-ld-floatbar__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sd-ld-floatbar__txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.sd-ld-floatbar__txt small {
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-red);
}
.sd-ld-floatbar__txt strong {
  font-size: 0.8rem;
  font-weight: 800;
  color: #241c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-ld-floatbar__btn--zomato {
  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: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 26px -10px rgba(214, 41, 41, 0.55);
}
.sd-ld-floatbar__btn--zomato svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ld-reveal { opacity: 1; transform: none; transition: none; }
  .sd-ld-hero__chip::before,
  .sd-ld-spotlight__chip::before,
  .sd-ldv2-neon { animation: none; }
  .sd-ld-card,
  .sd-ld-card::after,
  .sd-ld-card__stamp,
  body.sd-landing .sd-ld-card__img img,
  .sd-ld-hero__photo,
  .sd-ld-incl__item,
  .sd-ld-incl__item::after,
  .sd-ld-branch-tile,
  .sd-ld-branch-tile::after,
  body.sd-landing .sd-ld-branch-tile__img img,
  .sd-ld-branch-tile__arr,
  .sd-ld-modal,
  .sd-ld-modal__panel,
  .sd-ld-floatbar,
  .ld-btn,
  .ld-arr { transition: none !important; }
  body.sd-landing .sd-ld-hero--has-photo .sd-ld-hero__photos img { transition: opacity 0.1s linear; }
}

/* ============================================================
   MOBILE / TABLET — single authoritative block (wins by order)
   ============================================================ */
@media (max-width: 1080px) {
  .sd-ld-hero { padding-left: 24px; padding-right: 24px; }
  .sd-ld-section { padding-left: 24px; padding-right: 24px; }
  .sd-ld-incl, .sd-ld-stats, .sd-ld-spotlight, .sd-ld-branches { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 1024px) {
  .sd-ld-hero { padding-top: 130px; }
  .sd-ld-grid--3-2-centered { grid-template-columns: repeat(3, 1fr); }
  .sd-ld-grid--asym { grid-template-columns: 1fr 1fr; }
  .sd-ld-incl__inner { grid-template-columns: 1fr 1fr; }
  .sd-ld-branches__cities { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 900px) {
  .sd-ld-hero { padding: 112px 20px 40px; }
  /* homepage mobile-hero pattern: narrow text column on the left, the
     cutout food running tall down the right side beside it */
  .sd-ld-hero--split {
    min-height: 600px;
    background:
      linear-gradient(90deg, rgba(247, 229, 232, 0.9) 10%, rgba(247, 229, 232, 0.5) 36%, rgba(247, 229, 232, 0) 56%),
      url("../assets/Landing page Images/Hero Section Lunch Mobile.webp") right -26px top 60px / auto 114% no-repeat,
      linear-gradient(180deg, #f7e5e8 0%, var(--sd-cream) 58%);
  }
  .sd-ld-hero--split .sd-ld-hero__grid { grid-template-columns: 1fr; gap: 0; }
  .sd-ld-hero--split .sd-ld-hero__content { align-items: flex-start; text-align: left; }
  .sd-ld-hero--split .sd-ld-hero__title {
    font-size: clamp(2.4rem, 11vw, 3.1rem);
    max-width: 7ch;            /* stacks SEOUL / LUNCH / CLUB. beside the food */
  }
  .sd-ld-hero--split .sd-ld-hero__cta { justify-content: flex-start; }
  .sd-ld-hero--split .sd-ld-hero__sub { max-width: 22ch; }
  .sd-ld-hero--split .sd-ld-hero__proof { margin-top: 18px; }
  .sd-ld-hero__photo { display: none; }   /* the cutout moved into the bg */
  .sd-ld-section { padding-top: 56px; padding-bottom: 48px; }
  .sd-ld-section__head-row { flex-direction: column; align-items: center; gap: 10px; }
  .sd-ld-grid--3-2-centered { grid-template-columns: 1fr 1fr; }
  .sd-ld-spotlight__inner { grid-template-columns: 1fr; }
  .sd-ld-spotlight__img { min-height: 0; aspect-ratio: 16 / 10; }
  .sd-ld-spotlight__body { padding: 28px 22px; }
  .sd-ld-stats__grid { grid-template-columns: 1fr; gap: 20px; padding: 36px 28px; }
  .sd-ld-stat + .sd-ld-stat::before {
    left: 18%;
    right: 18%;
    top: -10px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .sd-ld-floatbar { display: flex; }
  body.sd-landing { padding-bottom: 84px; }
  /* lift the Instagram FAB above the floatbar, back-to-top above the FAB */
  body.sd-landing .sd-social-float { bottom: 92px; }
  body.sd-landing .sd-back-to-top { bottom: calc(92px + 48px + 10px); }
  /* branch tiles 2-up inside each city group (page length) */
  .sd-ld-city { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .sd-ld-city__head { grid-column: 1 / -1; }
  .sd-ld-branch-tile__body { padding: 12px 40px 14px 14px; }
  .sd-ld-branch-tile__name { font-size: 1.05rem; }
  .sd-ld-branch-tile__rating { margin-top: 4px; font-size: 0.68rem; }
  .sd-ld-branch-tile__arr { width: 28px; height: 28px; right: 10px; font-size: 0.78rem; }
  .sd-ld-modal { padding: 0; align-items: flex-end; }
  .sd-ld-modal__panel {
    width: 100%;
    max-height: 92vh;
    grid-template-columns: 1fr;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  .sd-ld-modal__img { min-height: 0; aspect-ratio: 16 / 10; }
  .sd-ld-modal__body { padding: 24px 22px 28px; }
}
@media (max-width: 768px) {
  /* photo hero swaps to the 9:16 portrait source at this width */
  .sd-ld-hero--has-photo .sd-ld-hero__content {
    aspect-ratio: 9 / 16;
    max-height: 88vh;
    min-height: 0;
    align-items: center;          /* re-centre for portrait */
    text-align: center;
    justify-content: flex-start;  /* copy at the TOP */
    padding: 80px 22px 34px;      /* top padding clears the floating header */
  }
  /* push the buttons to the BOTTOM so the drinks in the middle stay clear */
  .sd-ld-hero--has-photo .sd-ld-hero__cta { margin-top: auto; align-items: center; }
  .sd-ld-hero--has-photo .sd-ld-hero__sub { max-width: 13em; }   /* wrap to two balanced lines, no edge clip */
  /* darken only the top (copy) and bottom (buttons); keep the middle clear */
  .sd-ld-hero--has-photo .sd-ld-hero__veil {
    background: linear-gradient(180deg,
      rgba(22, 5, 5, 0.72) 0%, rgba(22, 5, 5, 0.56) 16%,
      rgba(22, 5, 5, 0.34) 30%, rgba(22, 5, 5, 0.12) 41%,
      rgba(22, 5, 5, 0) 50%, rgba(22, 5, 5, 0) 60%,
      rgba(22, 5, 5, 0.16) 74%, rgba(22, 5, 5, 0.62) 100%);
  }
}
@media (max-width: 640px) {
  .sd-ld-hero { padding-bottom: 24px; }
  /* compact stacked CTAs beside the food (ideal-reference layout) */
  .sd-ld-hero__cta { width: 100%; flex-direction: column; align-items: flex-start; gap: 10px; }
  .sd-ld-hero__cta .ld-btn { width: auto; min-width: 244px; justify-content: space-between; }
  /* keep items 2-up on phones — 1-col made the page far too long */
  .sd-ld-grid--3-2-centered,
  .sd-ld-grid--asym { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sd-ld-card__body { padding: 12px 14px 14px; gap: 5px; }
  .sd-ld-card__name { font-size: 0.98rem; }
  .sd-ld-card__cta a { font-size: 0.62rem; letter-spacing: 0.08em; }
  .sd-ld-incl__inner { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sd-ld-incl__item { padding: 13px 12px; gap: 10px; }
  .sd-ld-incl__icon { width: 38px; height: 38px; border-radius: 11px; }
  .sd-ld-incl__icon svg { width: 17px; height: 17px; }
  .sd-ld-section__sub { font-size: 0.88rem; }
  .sd-ld-stats__grid { padding: 32px 22px; }
  .sd-ld-spotlight__actions { flex-direction: column; }
  .sd-ld-spotlight__actions .ld-btn--zomato,
  .sd-ld-spotlight__act { flex: 0 0 auto; width: 100%; }
  .sd-ld-spotlight__more { flex-direction: column; align-items: flex-start; }
  .sd-ld-modal__body { padding: 20px 18px 24px; }
}
@media (max-width: 420px) {
  .sd-ld-hero__title { font-size: 2.35rem; }
  .sd-ld-hero__proof { font-size: 0.72rem; padding: 8px 13px; }
  .sd-ld-hero__chip { font-size: 0.6rem; letter-spacing: 0.14em; }
  .sd-ld-spotlight__name { font-size: 1.7rem; }
  .sd-ld-stat__num { font-size: 1.9rem; }
}