/* Habib Beirut — Landing Pages | Lenawa Solutions */
/* Design tokens from Stro'berry brand guidelines */
:root {
  --beige: #F4EFE7;
  --beige-deep: #EAE2D4;
  --indigo: #51687C;
  --indigo-deep: #435769;
  --cedar: #91A8C3;
  --cedar-soft: #C9D4DE;
  --olive: #859A7C;
  --olive-deep: color-mix(in srgb, #859A7C 82%, black);
  --terracotta: #BE6F5F;
  --terracotta-deep: #A85B4C;
  --stone: #C4C4C4;
  --ink: #3D4448;
  --ink-soft: #6A6F72;
  --amber: #E8A13C;
  --measure: 68ch;
  --pad-section: clamp(4rem, 9vw, 7.5rem);
  --pad-x: clamp(1.25rem, 5vw, 3rem);
  --radius: 2px;
}

/* Fonts */
@font-face { font-family: "Alexandria"; src: url("/assets/fonts/alexandria-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F; }
@font-face { font-family: "Alexandria"; src: url("/assets/fonts/alexandria-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F; }
@font-face { font-family: "Alexandria"; src: url("/assets/fonts/alexandria-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F; }
@font-face { font-family: "Alexandria"; src: url("/assets/fonts/alexandria-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Alexandria"; src: url("/assets/fonts/alexandria-arabic-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Alexandria"; src: url("/assets/fonts/alexandria-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-cyrillic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-cyrillic-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* Per-locale font stacks */
body { --font-body: "Alexandria", "Segoe UI", sans-serif; --font-display: "Alexandria", sans-serif; --display-tracking: 0.08em; }
body.lang-ar { --font-body: "Alexandria", "Segoe UI", sans-serif; --font-display: "Alexandria", sans-serif; --display-tracking: 0; }
body.lang-bg { --font-body: "Montserrat", "Segoe UI", sans-serif; --font-display: "Montserrat", sans-serif; --display-tracking: 0.06em; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--beige); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.75; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--display-tracking); line-height: 1.2; margin: 0 0 0.6em; color: var(--indigo); }
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.05rem; letter-spacing: 0.02em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: -100vw; background: var(--indigo); color: var(--beige); padding: 0.6rem 1rem; z-index: 100; }
.skip-link:focus { inset-inline-start: 0; top: 0; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

.section-inner { max-width: 1120px; margin-inline: auto; padding-inline: var(--pad-x); }
.eyebrow { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--olive); font-weight: 500; margin: 0 0 1.4rem; }
body.lang-ar .eyebrow { letter-spacing: 0.08em; }
.eyebrow-light { color: var(--cedar); }
.section-lead { max-width: var(--measure); font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 2rem; }
.center { text-align: center; }
.center-flex { justify-content: center; }

/* Buttons */
.btn { display: inline-block; font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.03em; padding: 0.85rem 1.6rem; border-radius: var(--radius); text-decoration: none; border: none; appearance: none; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn-primary { background: var(--terracotta); color: #FBF3EF; }
.btn-primary:hover { background: var(--terracotta-deep); }
.btn-ghost { border: 1px solid var(--indigo); color: var(--indigo); }
.btn-ghost:hover { background: var(--indigo); color: var(--beige); }
.btn-ghost-light { border: 1px solid var(--cedar); color: var(--beige); }
.btn-ghost-light:hover { background: var(--cedar); color: var(--indigo-deep); }

/* Header */
.site-header { display: flex; align-items: center; gap: 1.5rem; padding: 0.9rem var(--pad-x); background: var(--beige); }
.brand { margin-inline-end: auto; padding-inline-start: clamp(0.5rem, 3vw, 2.5rem); }
.brand img { width: 168px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 1.7rem; font-size: 0.98rem; letter-spacing: 0.03em; font-weight: 500; }
.site-nav a { text-decoration: none; color: var(--ink-soft); }
.site-nav a:hover { color: var(--indigo); }
.site-nav .nav-cta { color: var(--beige); background: var(--indigo); padding: 0.5rem 1.2rem; border-radius: var(--radius); }
.site-nav .nav-cta:hover { background: var(--indigo-deep); color: var(--beige); }
.lang-switch { display: flex; gap: 0.6rem; font-size: 0.8rem; letter-spacing: 0.08em; margin-inline-start: 1.6rem; }
.lang-switch a { text-decoration: none; color: var(--stone); }
.lang-switch a[aria-current] { color: var(--indigo); border-bottom: 2px solid var(--terracotta); }
@media (min-width: 901px) and (max-width: 1100px) {
  .site-header { gap: 0.75rem; }
  .brand { padding-inline-start: 0; }
  .brand img { width: 140px; }
  .site-nav { gap: 0.85rem; font-size: 0.84rem; letter-spacing: 0.01em; }
  .site-nav a, .site-nav button { white-space: nowrap; }
  .site-nav .nav-cta, .nav-drop-btn.nav-cta { padding: 0.45rem 0.7rem; }
  .lang-switch { gap: 0.35rem; margin-inline-start: 0.5rem; }
}
/* Back to top */
.back-to-top {
  position: fixed; inset-block-end: 1.5rem; inset-inline-end: 1.5rem; z-index: 50;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--indigo); color: var(--beige); display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
  cursor: pointer; box-shadow: 0 4px 14px rgba(61,68,72,0.22);
}
.back-to-top.is-visible { opacity: 0.92; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--indigo-deep); opacity: 1; }

/* Mobile nav */
.nav-toggle { display: none; width: 44px; height: 44px; background: none; border: none; padding: 0.625rem; cursor: pointer; }
.nav-toggle svg { display: block; }
@media (max-width: 900px) {
  .nav-toggle { display: block; margin-inline-start: auto; }
  .site-nav {
    display: none; position: absolute; top: 100%; inset-inline: 0; z-index: 60; background: var(--beige);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 0.5rem var(--pad-x) 1rem;
    border-bottom: 1px solid var(--beige-deep); box-shadow: 0 8px 16px rgba(61,68,72,0.08);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 0.7rem 0; width: 100%; border-bottom: 1px solid var(--beige-deep); }
  .site-nav .nav-cta { width: 100%; text-align: center; margin-top: 0.6rem; border-bottom: none; }
  .lang-switch { margin-inline-start: auto; }
  .site-header { position: relative; flex-wrap: wrap; }
}

/* Hero */
.hero { position: relative; display: grid; }
.hero-media, .hero-panel { grid-area: 1 / 1; }
.hero-media { position: relative; z-index: 1; }
.hero-media img, .hero-fallback-img { width: 100%; height: min(78vh, 640px); object-fit: cover; display: block; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s ease; }
.hero-video.is-playing { opacity: 1; }
.hero-media iframe { width: 100%; height: min(78vh, 640px); object-fit: cover; border: 0; }
.visit-hero .hero-media iframe { filter: saturate(0.8) brightness(0.92); }
.visit-hero .hero-media { overflow: hidden; }
.visit-hero { background: var(--indigo); }
.visit-heading { color: var(--beige); font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
.visit-directions-link { display: inline-block; margin-top: 1rem; color: var(--cedar-soft); font-size: 0.88rem; text-decoration: underline; text-underline-offset: 3px; }
.visit-directions-link:hover { color: var(--beige); }
.visit-hero .visit-list dt { color: var(--cedar); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 1.1rem; }
.visit-hero .visit-list dt:first-child { margin-top: 0; }
.visit-hero .visit-list dd { color: var(--beige); font-size: 1.02rem; margin: 0.25rem 0 0; }
.visit-hero .visit-list dd a { color: var(--beige); }
@media (max-width: 720px) { .visit-hero .hero-media iframe { height: 52vh; } }
.hero-panel { position: relative; z-index: 2; align-self: end; justify-self: start; background: rgba(67, 87, 105, 0.92); color: var(--beige); max-width: 560px; margin: var(--pad-x); padding: clamp(1.6rem, 4vw, 2.8rem); }
.hero-panel h1 { color: var(--beige); }
.hero-tagline { color: var(--cedar-soft); font-size: 1.02rem; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
@media (max-width: 720px) {
  .hero { display: block; }
  .hero-media img { height: 52vh; }
  .hero-panel { margin: 0; max-width: none; text-align: center; }
  .hero-tagline { max-width: none; margin-inline: auto; }
  .hero-badges { justify-content: center; }
  .hero-actions { justify-content: center; }
}

/* Rating badge */
.rating-badge { display: inline-flex; align-items: baseline; gap: 0.55rem; text-decoration: none; margin-top: 1.2rem; }
.rating-stars { color: var(--amber); letter-spacing: 0.12em; font-size: 0.95rem; }
.rating-value { font-weight: 700; font-size: 1.05rem; color: currentColor; }
.rating-count { font-size: 0.82rem; color: var(--cedar-soft); text-decoration: underline; text-underline-offset: 3px; }
.hero-panel .rating-badge, .reviews .rating-badge { color: var(--beige); }
.reviews .rating-badge { margin-top: 2rem; }

/* Location-specific highlights */
.location-usps { background: var(--beige-deep); padding-block: clamp(2rem, 4vw, 3rem); }
.location-usp-grid {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem;
}
.location-usp {
  display: flex; align-items: center; gap: 0.8rem; min-height: 4.25rem;
  padding: 1rem 1.15rem; background: var(--beige); color: var(--indigo);
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.045em; text-transform: uppercase;
}
.location-usp-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2rem;
  width: 2rem; height: 2rem; border: 1px solid var(--terracotta); border-radius: 50%;
  color: var(--terracotta); font-family: var(--font-body); font-weight: 700;
}
@media (max-width: 480px) {
  .location-usp-grid { grid-template-columns: 1fr; }
}

/* Frieze */
.frieze-belt {
  height: 44px;
  background-image: url("/assets/img/patterns/footer-belt.webp");
  background-repeat: repeat-x;
  background-position: center left;
  background-size: auto 100%;
}

/* Fading napkin-icon divider — real brand artwork, tiled horizontally, dissolves at the edges */
.frieze-fade {
  position: relative;
  height: clamp(64px, 9vw, 100px);
  margin-top: -1px;
  background: var(--beige);
  background-image: url("/assets/img/patterns/napkin-olive.webp");
  background-repeat: repeat-x;
  background-position: center left;
  background-size: auto 52%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* Story */
.story { padding-block: clamp(1.75rem, 4vw, 3rem) var(--pad-section); }
.story-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.story-media { margin: 0; }
.story-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--radius); }
.story-text p { max-width: var(--measure); font-size: 1.05rem; }
.story-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1.5rem; margin: 3.2rem 0 0; padding-top: 2rem; border-top: 1px solid var(--beige-deep); }
.story-facts dt { font-family: var(--font-display); font-size: 2rem; color: var(--indigo); letter-spacing: var(--display-tracking); }
.story-facts dd { margin: 0.2rem 0 0; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
body.lang-ar .story-facts dd { letter-spacing: 0.04em; }
@media (max-width: 820px) { .story-grid { grid-template-columns: 1fr; } }

/* Menu preview */
.menu-preview { padding-block: 0 var(--pad-section); }
.dish-grid { list-style: none; margin: 0 0 2.4rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.dish img { aspect-ratio: 1 / 1; object-fit: contain; width: 100%; background: #FFFFFF; border: 1.5px solid var(--cedar); border-radius: var(--radius); padding: 0.5rem; box-sizing: border-box; }
.dish h3 { margin: 0.9rem 0 0.25rem; color: var(--ink); }
.dish p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }

/* Reviews */
.reviews { background: var(--indigo); color: var(--beige); padding-block: var(--pad-section); }
.review-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; }
.review-card { border: 1px solid var(--indigo-deep); outline: 1px solid rgba(145, 168, 195, 0.35); padding: 1.6rem 1.7rem; display: flex; flex-direction: column; height: 100%; }
.review-card blockquote { flex: 1 0 auto; }
.review-card-footer { margin-top: auto; padding-top: 0.6rem; }
.review-stars { color: var(--amber); letter-spacing: 0.15em; margin: 0 0 0.8rem; font-size: 0.9rem; }
.review-card blockquote { margin: 0 0 1rem; font-style: italic; color: #E8EDF2; font-size: 0.98rem; }
.review-card cite { font-style: normal; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cedar); }
.review-card cite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.review-meta { font-size: 0.76rem; color: var(--cedar); margin: 0.4rem 0 0; letter-spacing: 0.02em; }
.reviews-badges { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; align-items: baseline; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: baseline; margin-top: 1.2rem; }
.hero-badges .rating-badge { margin-top: 0; }
.rating-badge-secondary { opacity: 0.9; }

/* Visit */
.visit { padding-block: var(--pad-section); }
.visit-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.visit-list { margin: 0 0 1.8rem; }
.visit-list dt { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive); margin-top: 1.2rem; }
body.lang-ar .visit-list dt { letter-spacing: 0.06em; }
.visit-list dd { margin: 0.25rem 0 0; font-size: 1.05rem; }
.visit-map { aspect-ratio: 4 / 3; }
.visit-map iframe { width: 100%; height: 100%; border: 0; filter: saturate(0.85); }
@media (max-width: 820px) { .visit-grid { grid-template-columns: 1fr; } }

/* Reserve */
.reserve { background: var(--indigo); color: var(--beige); padding-block: calc(var(--pad-section) * 0.85); text-align: center; }
.reserve .section-lead { margin-inline: auto; color: var(--cedar-soft); }
.reserve-form { max-width: 640px; margin: 2rem auto 0; text-align: start; }
.reserve-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.1rem; margin-bottom: 1.4rem; }
.reserve-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cedar-soft); }
.reserve-form input, .reserve-form select {
  font-family: var(--font-body); font-size: 0.95rem; padding: 0.7rem 0.8rem;
  background: rgba(244,239,231,0.08); border: 1px solid var(--indigo-deep); color: var(--beige); border-radius: var(--radius);
}
.reserve-form input::placeholder { color: var(--cedar-soft); }
.reserve-form input:focus, .reserve-form select:focus { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.reserve-submit { width: 100%; }
.reserve-form-note { font-size: 0.8rem; color: var(--cedar-soft); text-align: center; margin: 0.8rem 0 0; }
.reserve-alt { margin-top: 1.4rem; }

/* FAQ */
.faq { padding-block: var(--pad-section); }
.faq-item { max-width: 780px; border-bottom: 1px solid var(--beige-deep); }
.faq-item summary { cursor: pointer; font-weight: 500; font-size: 1.02rem; padding: 1.1rem 0; color: var(--indigo); list-style: none; position: relative; padding-inline-end: 2rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; inset-inline-end: 0.2rem; color: var(--terracotta); font-size: 1.3rem; line-height: 1; top: 1.05rem; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 0 1.3rem; max-width: var(--measure); color: var(--ink-soft); }

/* Menu page */
.menu-hero { background: var(--indigo); color: var(--beige); padding-block: calc(var(--pad-section) * 0.6); }
.menu-hero h1 { color: var(--beige); }
.menu-hero .section-lead { color: var(--cedar-soft); margin-bottom: 0; }

.menu-hero-split { display: grid; grid-template-columns: 1.15fr 1fr; min-height: min(56vh, 520px); }
.menu-hero-media { overflow: hidden; }
.menu-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-hero-panel { background: var(--indigo); color: var(--beige); display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 4rem); }
.menu-hero-panel .eyebrow { color: var(--cedar-soft); }
.menu-hero-panel h1 { color: var(--beige); margin-bottom: 0.6rem; }
.menu-hero-panel .section-lead { color: var(--cedar-soft); max-width: 42ch; margin-bottom: 0; }

@media (max-width: 900px) {
  .menu-hero-split { grid-template-columns: 1fr; min-height: auto; }
  .menu-hero-media img { aspect-ratio: 16 / 10; }
  .menu-hero-panel { padding: 2rem var(--pad-x); text-align: center; align-items: center; }
}
.menu-full { padding-block: var(--pad-section); }
.menu-section { margin-bottom: 3.4rem; }
.menu-section h2 { border-bottom: 1px solid var(--beige-deep); padding-bottom: 0.7rem; }
.menu-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.2rem 3rem; }
.menu-items li.has-image { display: flex; gap: 1rem; align-items: flex-start; }
.menu-items li.has-image img { width: 88px; height: 66px; object-fit: cover; flex-shrink: 0; border-radius: var(--radius); }
.menu-items h3 { margin: 0.9rem 0 0.2rem; color: var(--ink); }
.menu-items li.has-image h3 { margin-top: 0; }
.menu-items p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); max-width: 42ch; }
.menu-cta { margin-top: 2rem; }

.footer-bar-note { font-size: 0.82rem; color: var(--cedar-soft); font-style: italic; margin-top: 0.4rem; }

.nav-disabled { opacity: 0.45; cursor: default; pointer-events: none; }

/* ===== Filterable full menu (Sofia reference build) ===== */
.menu-layout { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; max-width: 1180px; margin: 0 auto; padding: var(--pad-section) var(--pad-x); align-items: start; }

.menu-filter-toggle { display: none; }

.menu-filter { position: sticky; top: 1.5rem; align-self: start; background: var(--beige-deep); border-radius: var(--radius); padding: 1.4rem 1.3rem; }
.menu-filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.menu-filter-head p, .menu-filter-title { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--indigo-deep); }
.menu-filter-head h2 { margin: 0; font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--indigo-deep); }
.menu-filter-close { display: none; }
.menu-filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.menu-filter-list li:first-child { padding-bottom: 0.55rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--stone); }
.menu-filter-option { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; color: var(--ink); cursor: pointer; padding-block: 0.5rem; min-height: 44px; }
.menu-filter-option input { width: 19px; height: 19px; accent-color: var(--indigo); cursor: pointer; flex-shrink: 0; }
.menu-filter-apply { display: none; }

.menu-content { min-width: 0; }
.menu-cat { margin-bottom: 3.2rem; scroll-margin-top: 1.5rem; }
.menu-cat-head { border-bottom: 1px solid var(--beige-deep); padding-bottom: 0.7rem; margin-bottom: 1.6rem; }
.menu-cat-head h2 { margin: 0; }
.menu-cat-note { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--terracotta-deep); font-weight: 500; }

.menu-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.6rem; }
.menu-card { background: #FFFFFF; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 4px rgba(61, 68, 72, 0.08); }
.menu-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; object-position: center; display: block; background: #FFFFFF; padding: 0.6rem; box-sizing: border-box; }
.menu-card-placeholder { width: 100%; aspect-ratio: 1 / 1; background: var(--beige-deep); display: flex; align-items: center; justify-content: center; }
.menu-card-placeholder img { width: 80px; height: 80px; padding: 0; opacity: 0.35; background: transparent; }
.menu-card-body { padding: 0.85rem 0.2rem 0.2rem; }
.menu-card h3 { margin: 0 0 0.3rem; font-size: 1rem; color: var(--ink); }
.menu-card-desc { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.45; }
.menu-card-weight { margin: 0 0 0.5rem; font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.02em; }

.menu-allergens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.allergen-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 500; padding: 0.18rem 0.5rem 0.18rem 0.4rem; border-radius: 999px; background: var(--beige-deep); color: var(--ink); }
.allergen-chip svg { flex-shrink: 0; }
.allergen-chip.allergen-amber svg { fill: var(--amber); }
.allergen-chip.allergen-cedar svg { fill: var(--cedar); }
.allergen-chip.allergen-olive svg { fill: var(--olive); }
.allergen-chip.allergen-terracotta svg { fill: var(--terracotta); }
.allergen-chip.allergen-indigo svg { fill: var(--indigo); }
.allergen-chip.allergen-terracotta-deep svg { fill: var(--terracotta-deep); }
.allergen-chip.allergen-indigo-deep svg { fill: var(--indigo-deep); }

.menu-bar-note { text-align: center; font-size: 0.82rem; color: var(--ink-soft); font-style: italic; margin: 0 0 0.4rem; }
.menu-price-note { text-align: center; font-size: 0.82rem; color: var(--ink-soft); font-style: italic; margin: 0 0 2rem; }

@media (max-width: 900px) {
  .menu-layout { grid-template-columns: 1fr; gap: 0; padding-top: 1.2rem; }

  .menu-filter-toggle {
    display: flex; align-items: center; gap: 0.5rem; justify-content: center;
    width: calc(100% - 2 * var(--pad-x)); margin: 0 var(--pad-x) 2rem;
    background: var(--indigo); color: var(--beige); border: none; border-radius: var(--radius);
    padding: 0.75rem 1rem; font-size: 0.92rem; font-weight: 500; cursor: pointer;
  }

  .menu-filter-backdrop { position: fixed; inset: 0; background: rgba(61, 68, 72, 0.5); z-index: 40; }
  .menu-filter-backdrop[hidden] { display: none; }

  .menu-filter {
    position: fixed; top: 0; right: 0; height: 100%; width: min(320px, 84vw);
    z-index: 50; border-radius: 0; overflow-y: auto;
    transform: translateX(100%); transition: transform 0.3s ease;
    padding: 1.5rem;
  }
  [dir="rtl"] .menu-filter { right: auto; left: 0; transform: translateX(-100%); }
  .menu-filter.is-open { transform: translateX(0); }
  .menu-filter-close { display: block; background: none; border: none; padding: 0.3rem; cursor: pointer; color: var(--ink); }
  .menu-filter-apply { display: block; width: 100%; margin-top: 1.3rem; }
}

/* Legal / privacy page */
.legal-page { padding-block: var(--pad-section); }
.legal-inner { max-width: 780px; }
.legal-updated { color: var(--ink-soft); font-size: 0.9rem; margin-top: -0.5rem; }
.legal-page h2 { margin-top: 2.4rem; font-size: 1.25rem; }
.legal-page h3 { margin-top: 1.6rem; color: var(--ink); }
.legal-page p, .legal-page li { color: var(--ink-soft); line-height: 1.75; }
.legal-page ul { padding-inline-start: 1.4rem; }
/* ============================================================
   Franchise page
   ============================================================ */
.franchise-hero-split { display: grid; grid-template-columns: 1.02fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; background: var(--indigo); color: var(--beige); padding: clamp(2.5rem, 6vw, 5rem) var(--pad-x); }
.fr-hero-content { max-width: 560px; margin-inline-start: auto; }
.fr-hero-content h1 { color: var(--beige); font-size: clamp(2rem, 4.5vw, 3.3rem); line-height: 1.08; margin: 0 0 1.2rem; }
.fr-hero-lead { color: var(--cedar-soft); font-size: 1.08rem; line-height: 1.7; max-width: 52ch; margin: 0 0 1.8rem; }
.fr-hero-facts { display: flex; gap: 2.4rem; margin: 2.4rem 0 0; padding-top: 1.8rem; border-top: 1px solid rgba(145,168,195,0.3); justify-content: center; text-align: center; }
.fr-hero-facts dt { font-family: var(--font-display); font-size: 1.9rem; color: var(--beige); letter-spacing: var(--display-tracking); line-height: 1; }
.fr-hero-facts dd { margin: 0.35rem 0 0; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cedar-soft); }

.fr-hero-collage { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 0.6rem; aspect-ratio: 1 / 1; max-height: 580px; background: var(--olive); padding: 0.2rem; border-radius: var(--radius); box-shadow: 0 14px 40px rgba(43,54,66,0.4); }
.fr-collage-item { margin: 0; overflow: hidden; border-radius: calc(var(--radius) * 0.85); box-shadow: 0 8px 24px rgba(43,54,66,0.28); }
.fr-collage-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.fr-collage-item:hover img { transform: scale(1.08); }
/* Masonry-style spans: two feature tiles (2x2), rest smaller — tiles cleanly to 4x4, no gaps */
.fr-c-a { grid-column: span 2; grid-row: span 2; }
.fr-c-b { grid-column: span 1; grid-row: span 1; }
.fr-c-c { grid-column: span 1; grid-row: span 1; }
.fr-c-d { grid-column: span 2; grid-row: span 1; }
.fr-c-e { grid-column: span 1; grid-row: span 1; }
.fr-c-f { grid-column: span 1; grid-row: span 1; }
.fr-c-g { grid-column: span 2; grid-row: span 2; }
.fr-c-h { grid-column: span 1; grid-row: span 1; }
.fr-c-i { grid-column: span 1; grid-row: span 1; }
@media (max-width: 900px) {
  .franchise-hero-split { grid-template-columns: 1fr; }
  .fr-hero-content { margin-inline-start: 0; max-width: none; }
  .fr-hero-collage { max-height: 460px; }
}
@media (max-width: 520px) {
  .fr-hero-facts { gap: 1.6rem; }
  .fr-hero-facts dt { font-size: 1.6rem; }
  .fr-hero-collage { gap: 0.5rem; }
}

.fr-section { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.fr-section-alt { background: var(--beige-deep); }
.fr-section-dark { background: var(--indigo); color: var(--beige); }
.fr-section-dark h2 { color: var(--beige); }
.fr-section-dark .section-lead, .fr-section-dark p { color: var(--cedar-soft); }
.fr-section-dark .eyebrow { color: var(--cedar); }
.fr-section h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }

.fr-body p { max-width: var(--measure); font-size: 1.02rem; margin: 0 0 1.2rem; }
.fr-body p:last-child { margin-bottom: 0; }
.fr-source-note { font-size: 0.8rem; color: var(--ink-soft); font-style: italic; max-width: var(--measure); margin: 1.4rem 0 0; }
.fr-section-dark .fr-source-note { color: var(--cedar-soft); opacity: 0.85; }

/* ---- Story / Vision toggle ---- */
.fr-story-section { padding-block: clamp(2.5rem, 5vw, 3.8rem); }
.fr-story { display: block; max-width: 760px; margin: 1.6rem auto 0; text-align: center; }
.fr-story-tabs { display: inline-flex; gap: 0.4rem; background: var(--beige-deep); padding: 0.35rem; border-radius: 999px; margin-bottom: 1.8rem; }
.fr-story-tab { border: none; background: transparent; font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.03em; color: var(--ink-soft); padding: 0.55rem 1.4rem; border-radius: 999px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.fr-story-tab.is-active { background: var(--indigo); color: var(--beige); }
.fr-story-panels { display: grid; justify-items: center; }
.fr-story-panel { grid-area: 1 / 1; animation: frFade 0.4s ease; text-align: center; }
.fr-story-panel:not(.is-active) { visibility: hidden; pointer-events: none; }
.fr-story-panel h2 { margin: 0 0 1rem; text-align: center; }
.fr-story-panel p { max-width: 62ch; font-size: 1.02rem; margin: 0 auto 1.1rem; }
@keyframes frFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fr-story-nav { display: flex; gap: 0.6rem; margin-top: 1.4rem; justify-content: center; }
.fr-story-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--stone); background: transparent; color: var(--indigo); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.fr-story-arrow:hover { background: var(--indigo); color: var(--beige); border-color: var(--indigo); }

.fr-stat-row.fr-reveal { transition-delay: 0s; }
.fr-stat-pairs .fr-reveal:nth-child(1).is-visible { transition-delay: 0.05s; }
.fr-stat-pairs .fr-reveal:nth-child(2).is-visible { transition-delay: 0.10s; }
.fr-stat-pairs .fr-reveal:nth-child(3).is-visible { transition-delay: 0.15s; }
.fr-stat-pairs .fr-reveal:nth-child(4).is-visible { transition-delay: 0.20s; }
.fr-stat-pairs .fr-reveal:nth-child(5).is-visible { transition-delay: 0.25s; }
.fr-stat-pairs .fr-reveal:nth-child(6).is-visible { transition-delay: 0.30s; }

/* ---- Market opportunity split (text left, cards right) ---- */
.fr-cat-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; margin-top: 2.2rem; }
.fr-cat-text p { font-size: 1.02rem; line-height: 1.7; color: var(--cedar-soft); margin: 0 0 1.2rem; max-width: 52ch; }
.fr-cat-text .fr-source-note { font-size: 0.8rem; margin-top: 1.6rem; }
.fr-stat-pairs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.fr-stat-pair { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; align-items: baseline; background: rgba(255,255,255,0.05); border: 1px solid rgba(145,168,195,0.28); border-radius: var(--radius); padding: 1.2rem 1.2rem; }
.fr-stat-index { grid-row: 1 / 3; align-self: center; font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 0.14em; color: var(--cedar); border: 1px solid rgba(145,168,195,0.4); border-radius: 999px; width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fr-stat-big { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1; color: #FFFFFF; letter-spacing: var(--display-tracking); }
.fr-stat-desc { grid-column: 2; font-size: 0.78rem; line-height: 1.4; color: var(--cedar-soft); margin-top: 0.4rem; }
@media (max-width: 860px) {
  .fr-cat-split { grid-template-columns: 1fr; }
  .fr-cat-text p { max-width: none; }
}
@media (max-width: 560px) {
  .fr-stat-pairs { grid-template-columns: 1fr; }
}
.fr-partner-row { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.fr-partner-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(145,168,195,0.3); border-radius: var(--radius); padding: 1.6rem 1.4rem; text-align: left; }
.fr-partner-card .fr-why-num { color: var(--terracotta); }
.fr-partner-card p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--beige); }
@media (max-width: 980px) { .fr-partner-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fr-partner-row { grid-template-columns: 1fr; } }
/* ---- Quote carousel (Proven Track Record) ---- */
.fr-quote-carousel { display: flex; align-items: center; gap: 1.2rem; max-width: 780px; margin: 2.2rem auto 0; }
.fr-quote-arrow { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--stone); background: transparent; color: var(--indigo); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.fr-quote-arrow:hover { background: var(--indigo); color: var(--beige); border-color: var(--indigo); }
.fr-quote-viewport { flex: 1; min-width: 0; display: grid; }
.fr-quote-list { list-style: none; margin: 0; padding: 0; display: grid; }
.fr-quote-item { grid-area: 1 / 1; font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.5; color: var(--indigo); text-align: center; letter-spacing: 0.01em; animation: frFade 0.4s ease; }
.fr-quote-item:not(.is-active) { visibility: hidden; pointer-events: none; }
.fr-quote-dots { display: flex; justify-content: center; gap: 0.5rem; margin: 1.6rem 0 0; }
.fr-quote-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stone); transition: background 0.2s ease, transform 0.2s ease; }
.fr-quote-dot.is-active { background: var(--terracotta); transform: scale(1.2); }
@media (max-width: 640px) { .fr-quote-carousel { gap: 0.7rem; } }

/* ---- Why franchise cards ---- */
.fr-why-grid { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 860px) { .fr-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fr-why-grid { grid-template-columns: 1fr; } }
.fr-why-card { background: #FFFFFF; border: 1px solid var(--beige-deep); border-radius: var(--radius); padding: 1.7rem 1.6rem; box-shadow: 0 1px 4px rgba(61,68,72,0.06); }
.fr-why-num { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--terracotta); letter-spacing: var(--display-tracking); margin-bottom: 0.7rem; }
.fr-why-card p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--ink); }
/* ---- CTA ---- */
.fr-cta { background: var(--indigo); color: var(--beige); text-align: center; }
.fr-cta .section-lead { margin-inline: auto; color: var(--cedar-soft); }
.fr-cta-form { max-width: 640px; margin: 2rem auto 0; text-align: start; }
.fr-method-toggle { display: flex; gap: 0.6rem; margin-bottom: 1.6rem; }
.fr-method-btn { flex: 1; text-align: center; padding: 0.8rem 1rem; border-radius: var(--radius); font-size: 0.88rem; font-weight: 500; border: 1px solid var(--cedar); background: transparent; color: var(--beige); cursor: pointer; letter-spacing: 0.02em; font-family: var(--font-body); transition: background 0.2s ease, color 0.2s ease; }
.fr-method-btn.is-active { background: var(--cedar); color: var(--indigo-deep); }
.fr-cta-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin-bottom: 1.4rem; }
.fr-cta-form-grid .fr-field-full { grid-column: 1 / -1; }
.fr-cta-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cedar-soft); }
.fr-cta-form input, .fr-cta-form textarea { background: transparent; border: none; border-bottom: 1px solid var(--cedar); color: var(--beige); font-family: var(--font-body); font-size: 1rem; padding: 0.5rem 0.1rem; border-radius: 0; }
.fr-cta-form textarea { resize: vertical; min-height: 4.5rem; }
.fr-cta-form input::placeholder, .fr-cta-form textarea::placeholder { color: var(--cedar-soft); opacity: 0.7; }
.fr-cta-form input:focus, .fr-cta-form textarea:focus { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.fr-cta-submit { width: 100%; }
.fr-cta-form-note { font-size: 0.8rem; color: var(--cedar-soft); text-align: center; margin: 0.9rem 0 0; }
@media (max-width: 640px) { .fr-method-toggle { flex-direction: column; } }

/* ---- Scroll reveal ---- */
.fr-section .section-inner > * { }
.fr-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fr-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .fr-reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   Locations Hub
   ============================================================ */
.loc-hub-section { padding-block: var(--pad-section); }

.loc-hub-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8rem; }
.loc-hub-card { flex: 0 1 calc(33.333% - 1.2rem); min-width: 260px; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 18px rgba(43,54,66,0.14); }
.loc-hub-media { position: relative; overflow: hidden; }
.loc-hub-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.5s ease; }
.loc-hub-card.is-live:hover .loc-hub-media img { transform: scale(1.05); }

.loc-hub-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  background: rgba(43, 54, 66, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; padding: 0.75rem;
}
.loc-hub-card.is-live:hover .loc-hub-overlay,
.loc-hub-card.is-live:focus-within .loc-hub-overlay { opacity: 1; visibility: visible; }

.loc-hub-pill {
  width: 100%; max-width: 220px; text-align: center; font-family: var(--font-body); font-size: 0.92rem; font-weight: 600;
  padding: 0.6rem 1.1rem; border-radius: 999px; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.loc-hub-pill-solid { background: var(--terracotta); color: #FBF3EF; border: 1px solid var(--terracotta); }
.loc-hub-pill-solid:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); }
.loc-hub-pill-outline { background: transparent; color: var(--beige); border: 1px solid var(--cedar); }
.loc-hub-pill-outline:hover { background: var(--cedar); color: var(--indigo-deep); }

/* Panel uses the site's dominant brand block color (indigo — same as hero panels, footer, dark sections);
   terracotta stays reserved for accent/CTA elements, consistent with the rest of the site. */
.loc-hub-info { background: var(--indigo); color: var(--beige); padding: 1.6rem 1.6rem 1.8rem; flex: 1; text-align: left; }

/* Franchise CTA card — deliberately distinct from location cards: no photo, full-bleed brand treatment */
.loc-hub-cta-card { aspect-ratio: 4 / 5; }
.loc-hub-cta-link {
  display: flex; flex-direction: column; justify-content: center; height: 100%; width: 100%;
  background: linear-gradient(155deg, var(--indigo) 0%, var(--indigo-deep) 100%);
  text-decoration: none; color: var(--beige); position: relative; overflow: hidden;
}
.loc-hub-cta-link::before {
  content: ""; position: absolute; inset: -20% -20% auto auto; width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(190,111,95,0.25) 0%, transparent 70%);
}
.loc-hub-cta-body { position: relative; padding: 2rem 1.8rem; text-align: center; }
.loc-hub-cta-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: rgba(190,111,95,0.18); color: var(--terracotta); margin-bottom: 1.1rem; }
.loc-hub-cta-body h2 { font-size: 1.3rem; margin: 0 0 0.8rem; color: var(--beige); }
.loc-hub-cta-body p { font-size: 0.92rem; line-height: 1.55; color: var(--cedar-soft); margin: 0 0 1.5rem; }
.loc-hub-cta-btn { display: inline-block; font-weight: 600; font-size: 0.9rem; color: #FBF3EF; background: var(--terracotta); padding: 0.75rem 1.4rem; border-radius: 999px; transition: background 0.2s ease, transform 0.2s ease; }
.loc-hub-cta-link:hover .loc-hub-cta-btn { background: var(--terracotta-deep); transform: translateY(-2px); }
.loc-hub-info h2 { font-size: 1.08rem; margin: 0 0 0.9rem; color: var(--beige); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-hub-divider { display: block; height: 1px; background: rgba(145,168,195,0.4); margin: 0 0 0.9rem; }
.loc-hub-address { font-size: 0.9rem; color: var(--cedar-soft); margin: 0 0 0.75rem; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-hub-hours { font-size: 0.94rem; color: var(--beige); font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-hub-hours-soon { font-weight: 500; }
.loc-hub-hours-soon a { color: var(--cedar); text-decoration: none; font-weight: 600; }
.loc-hub-hours-soon a:hover { color: var(--beige); text-decoration: underline; }

.loc-hub-media-placeholder {
  aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: var(--beige);
}
.loc-hub-placeholder-mark {
  position: relative; display: block; width: clamp(88px, 30%, 112px); aspect-ratio: 1; overflow: hidden;
}
.loc-hub-media .loc-hub-placeholder-mark img {
  position: absolute; top: 0; left: 50%; width: 232%; max-width: none; height: auto; aspect-ratio: auto;
  object-fit: contain; transform: translateX(-50%); transition: none;
}
.loc-hub-coming-soon {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--indigo); line-height: 1;
}
.loc-hub-card-pending .loc-hub-hours-soon { color: var(--cedar-soft); }

@media (max-width: 900px) { .loc-hub-card { flex-basis: calc(50% - 0.9rem); } }
@media (max-width: 560px) { .loc-hub-card { flex-basis: 100%; } }

/* Touch devices have no hover state — keep all actions visible within the image */
@media (hover: none) {
  .loc-hub-overlay {
    position: absolute; inset: 0; opacity: 1; visibility: visible; background: rgba(43, 54, 66, 0.6);
    flex-direction: column; flex-wrap: nowrap; padding: 0.75rem; justify-content: center;
  }
  .loc-hub-pill { width: 100%; max-width: 220px; flex: 0 0 auto; }
}

/* ---- Footer ---- */
.site-footer { background: #FFFFFF; color: var(--ink); }
.site-footer .frieze-belt { background-color: #FFFFFF; background-image: url("/assets/img/patterns/footer-belt.webp"); }
.footer-inner {
  max-width: 1120px; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4rem) var(--pad-x) 2rem;
  display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start;
}
.footer-inner-location { grid-template-columns: auto 1fr 1fr 1fr 1fr; }
.footer-inner-general { grid-template-columns: auto 1fr 1fr 1fr 1fr; }
.footer-brand-col { min-width: 0; }
.footer-logo { width: 96px; height: auto; opacity: 1; }
.footer-tagline { font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft); margin: 0.9rem 0 0; max-width: 170px; }
.footer-col { min-width: 0; }
.footer-h { font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--indigo); font-weight: 500; margin: 0 0 1rem; }
body.lang-ar .footer-h { letter-spacing: 0.06em; }
.footer-col p { margin: 0 0 0.6rem; font-size: 0.95rem; line-height: 1.6; color: var(--ink); }
.footer-col p:last-child { margin-bottom: 0; }
.footer-col a { color: var(--indigo); text-decoration: none; }
.footer-col a:hover { color: var(--indigo-deep); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal {
  max-width: 1120px; margin: 0 auto; padding: 1.4rem var(--pad-x) 2rem; text-align: center;
  border-top: 1px solid var(--beige-deep); font-size: 0.78rem; color: var(--ink-soft);
}
.footer-legal a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--indigo-deep); }

@media (max-width: 900px) {
  .footer-inner-location, .footer-inner-general { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .footer-inner-location, .footer-inner-general { grid-template-columns: 1fr; text-align: center; }
  .footer-logo { margin-inline: auto; }
  .footer-tagline { max-width: none; margin-inline: auto; }
}
/* ============================================================
   Franchise page 2 (comparison concept)
   ============================================================ */
.fr2-hero-split { display: grid; grid-template-columns: 0.85fr 1.25fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; background: var(--indigo); color: var(--beige); padding: clamp(2.5rem, 6vw, 5rem) var(--pad-x); }
.fr2-hero-content { max-width: 560px; margin-inline-start: auto; }
.fr2-hero-content h1 { color: var(--beige); font-size: clamp(2rem, 4.5vw, 3.3rem); line-height: 1.08; margin: 0 0 1.2rem; }
.fr2-hero-lead { color: var(--cedar-soft); font-size: 1.08rem; line-height: 1.7; max-width: 52ch; margin: 0 0 1.8rem; }
.fr2-hero-facts { display: flex; gap: 2.4rem; margin: 2.4rem 0 0; padding-top: 1.8rem; border-top: 1px solid rgba(145,168,195,0.3); justify-content: center; text-align: center; }
.fr2-hero-facts dt { font-family: var(--font-display); font-size: 1.9rem; color: var(--beige); letter-spacing: var(--display-tracking); line-height: 1; }
.fr2-hero-facts dd { margin: 0.35rem 0 0; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cedar-soft); }

.fr2-hero-collage { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 0.6rem; aspect-ratio: 1 / 1; max-height: 580px; background: var(--indigo); padding: 0.2rem; border-radius: var(--radius); box-shadow: 0 14px 40px rgba(43,54,66,0.4); }
.fr2-collage-item { margin: 0; overflow: hidden; border-radius: calc(var(--radius) * 0.85); box-shadow: 0 8px 24px rgba(43,54,66,0.28); }
.fr2-collage-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.fr2-collage-item:hover img { transform: scale(1.08); }
/* Masonry-style spans: two feature tiles (2x2), rest smaller — tiles cleanly to 4x4, no gaps */
.fr2-c-a { grid-column: span 2; grid-row: span 2; }
.fr2-c-b { grid-column: span 1; grid-row: span 1; }
.fr2-c-c { grid-column: span 1; grid-row: span 1; }
.fr2-c-d { grid-column: span 2; grid-row: span 1; }
.fr2-c-e { grid-column: span 1; grid-row: span 1; }
.fr2-c-f { grid-column: span 1; grid-row: span 1; }
.fr2-c-g { grid-column: span 2; grid-row: span 2; }
.fr2-c-h { grid-column: span 1; grid-row: span 1; }
.fr2-c-i { grid-column: span 1; grid-row: span 1; }
@media (max-width: 900px) {
  .fr2-hero-split { grid-template-columns: 1fr; }
  .fr2-hero-content { margin-inline-start: 0; max-width: none; }
  .fr2-hero-collage { max-height: 460px; }
}
@media (max-width: 520px) {
  .fr2-hero-facts { gap: 1.6rem; }
  .fr2-hero-facts dt { font-size: 1.6rem; }
  .fr2-hero-collage { gap: 0.5rem; }
}

.fr2-section { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.fr2-section-alt { background: var(--beige-deep); }
.fr2-section-dark { background: var(--indigo); color: var(--beige); }
.fr2-section-dark h2 { color: var(--beige); }
.fr2-section-dark .section-lead, .fr2-section-dark p { color: var(--cedar-soft); }
.fr2-section-dark .eyebrow { color: var(--cedar); }
.fr2-section h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }

.fr2-body p { max-width: var(--measure); font-size: 1.02rem; margin: 0 0 1.2rem; }
.fr2-body p:last-child { margin-bottom: 0; }
.fr2-source-note { font-size: 0.8rem; color: var(--ink-soft); font-style: italic; max-width: var(--measure); margin: 1.4rem 0 0; }
.fr2-section-dark .fr2-source-note { color: var(--cedar-soft); opacity: 0.85; }

/* ---- Story / Vision toggle ---- */
.fr2-story-section { padding-block: clamp(2.5rem, 5vw, 3.8rem); }
.fr2-story { display: block; max-width: 760px; margin: 1.6rem auto 0; text-align: center; }
.fr2-story-tabs { display: inline-flex; gap: 0.4rem; background: var(--beige-deep); padding: 0.35rem; border-radius: 999px; margin-bottom: 1.8rem; }
.fr2-story-tab { border: none; background: transparent; font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.03em; color: var(--ink-soft); padding: 0.55rem 1.4rem; border-radius: 999px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.fr2-story-tab.is-active { background: var(--indigo); color: var(--beige); }
.fr2-story-panels { display: grid; justify-items: center; }
.fr2-story-panel { grid-area: 1 / 1; animation: frFade 0.4s ease; text-align: center; }
.fr2-story-panel:not(.is-active) { visibility: hidden; pointer-events: none; }
.fr2-story-panel h2 { margin: 0 0 1rem; text-align: center; }
.fr2-story-panel p { max-width: 62ch; font-size: 1.02rem; margin: 0 auto 1.1rem; }
@keyframes frFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fr2-story-nav { display: flex; gap: 0.6rem; margin-top: 1.4rem; justify-content: center; }
.fr2-story-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--stone); background: transparent; color: var(--indigo); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.fr2-story-arrow:hover { background: var(--indigo); color: var(--beige); border-color: var(--indigo); }

.fr2-stat-row.fr2-reveal { transition-delay: 0s; }
.fr2-stat-pairs .fr2-reveal:nth-child(1).is-visible { transition-delay: 0.05s; }
.fr2-stat-pairs .fr2-reveal:nth-child(2).is-visible { transition-delay: 0.10s; }
.fr2-stat-pairs .fr2-reveal:nth-child(3).is-visible { transition-delay: 0.15s; }
.fr2-stat-pairs .fr2-reveal:nth-child(4).is-visible { transition-delay: 0.20s; }
.fr2-stat-pairs .fr2-reveal:nth-child(5).is-visible { transition-delay: 0.25s; }
.fr2-stat-pairs .fr2-reveal:nth-child(6).is-visible { transition-delay: 0.30s; }

/* ---- Market opportunity split (text left, cards right) ---- */
.fr2-cat-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; margin-top: 2.2rem; }
.fr2-cat-text p { font-size: 1.02rem; line-height: 1.7; color: var(--cedar-soft); margin: 0 0 1.2rem; max-width: 52ch; }
.fr2-cat-text .fr2-source-note { font-size: 0.8rem; margin-top: 1.6rem; }
.fr2-stat-pairs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.fr2-stat-pair { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; align-items: baseline; background: rgba(255,255,255,0.05); border: 1px solid rgba(145,168,195,0.28); border-radius: var(--radius); padding: 1.2rem 1.2rem; }
.fr2-stat-index { grid-row: 1 / 3; align-self: center; font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 0.14em; color: var(--cedar); border: 1px solid rgba(145,168,195,0.4); border-radius: 999px; width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fr2-stat-big { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1; color: #FFFFFF; letter-spacing: var(--display-tracking); }
.fr2-stat-desc { grid-column: 2; font-size: 0.78rem; line-height: 1.4; color: var(--cedar-soft); margin-top: 0.4rem; }
@media (max-width: 860px) {
  .fr2-cat-split { grid-template-columns: 1fr; }
  .fr2-cat-text p { max-width: none; }
}
@media (max-width: 560px) {
  .fr2-stat-pairs { grid-template-columns: 1fr; }
}
.fr2-partner-row { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.fr2-partner-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(145,168,195,0.3); border-radius: var(--radius); padding: 1.6rem 1.4rem; text-align: left; }
.fr2-partner-card .fr2-why-num { color: var(--terracotta); }
.fr2-partner-card p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--beige); }
@media (max-width: 980px) { .fr2-partner-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fr2-partner-row { grid-template-columns: 1fr; } }
/* ---- Quote carousel (Proven Track Record) ---- */
.fr2-quote-carousel { display: flex; align-items: center; gap: 1.2rem; max-width: 780px; margin: 2.2rem auto 0; }
.fr2-quote-arrow { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--stone); background: transparent; color: var(--indigo); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.fr2-quote-arrow:hover { background: var(--indigo); color: var(--beige); border-color: var(--indigo); }
.fr2-quote-viewport { flex: 1; min-width: 0; display: grid; }
.fr2-quote-list { list-style: none; margin: 0; padding: 0; display: grid; }
.fr2-quote-item { grid-area: 1 / 1; font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.5; color: var(--indigo); text-align: center; letter-spacing: 0.01em; animation: frFade 0.4s ease; }
.fr2-quote-item:not(.is-active) { visibility: hidden; pointer-events: none; }
.fr2-quote-dots { display: flex; justify-content: center; gap: 0.5rem; margin: 1.6rem 0 0; }
.fr2-quote-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stone); transition: background 0.2s ease, transform 0.2s ease; }
.fr2-quote-dot.is-active { background: var(--terracotta); transform: scale(1.2); }
@media (max-width: 640px) { .fr2-quote-carousel { gap: 0.7rem; } }

/* ---- Why franchise cards ---- */
.fr2-why-grid { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 860px) { .fr2-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fr2-why-grid { grid-template-columns: 1fr; } }
.fr2-why-card { background: #FFFFFF; border: 1px solid var(--beige-deep); border-radius: var(--radius); padding: 1.7rem 1.6rem; box-shadow: 0 1px 4px rgba(61,68,72,0.06); }
.fr2-why-num { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--terracotta); letter-spacing: var(--display-tracking); margin-bottom: 0.7rem; }
.fr2-why-card p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--ink); }
/* ---- CTA ---- */
.fr2-cta { background: var(--indigo); color: var(--beige); text-align: center; }
.fr2-cta .section-lead { margin-inline: auto; color: var(--cedar-soft); }
.fr2-cta-form { max-width: 640px; margin: 2rem auto 0; text-align: start; }
.fr2-method-toggle { display: flex; gap: 0.6rem; margin-bottom: 1.6rem; }
.fr2-method-btn { flex: 1; text-align: center; padding: 0.8rem 1rem; border-radius: var(--radius); font-size: 0.88rem; font-weight: 500; border: 1px solid var(--cedar); background: transparent; color: var(--beige); cursor: pointer; letter-spacing: 0.02em; font-family: var(--font-body); transition: background 0.2s ease, color 0.2s ease; }
.fr2-method-btn.is-active { background: var(--cedar); color: var(--indigo-deep); }
.fr2-cta-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin-bottom: 1.4rem; }
.fr2-cta-form-grid .fr2-field-full { grid-column: 1 / -1; }
.fr2-cta-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cedar-soft); }
.fr2-cta-form input, .fr2-cta-form textarea { background: transparent; border: none; border-bottom: 1px solid var(--cedar); color: var(--beige); font-family: var(--font-body); font-size: 1rem; padding: 0.5rem 0.1rem; border-radius: 0; }
.fr2-cta-form textarea { resize: vertical; min-height: 4.5rem; }
.fr2-cta-form input::placeholder, .fr2-cta-form textarea::placeholder { color: var(--cedar-soft); opacity: 0.7; }
.fr2-cta-form input:focus, .fr2-cta-form textarea:focus { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.fr2-cta-submit { width: 100%; }
.fr2-cta-form-note { font-size: 0.8rem; color: var(--cedar-soft); text-align: center; margin: 0.9rem 0 0; }
@media (max-width: 640px) { .fr2-method-toggle { flex-direction: column; } }

/* ---- Scroll reveal ---- */
.fr2-section .section-inner > * { }
.fr2-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fr2-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .fr2-reveal { opacity: 1; transform: none; transition: none; } }



/* ============================================================
   Franchise page 2 — icons, typography, pinned scroll moments
   ============================================================ */

/* Icon boxes (replace plain numbered cards) */
.fr2-why-icon, .fr2-hero-collage ~ * .fr2-why-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--beige-deep); color: var(--terracotta); margin-bottom: 1rem; }
.fr2-section-dark .fr2-why-icon { background: rgba(255,255,255,0.08); color: var(--terracotta); }
.fr2-partner-card .fr2-why-icon { background: rgba(255,255,255,0.1); }

/* Typography variation: bold the lead-in of each card/quote automatically */
.fr2-why-card p::first-line,
.fr2-partner-card p::first-line,
.fr2-quote-item::first-line { font-weight: 700; }

/* Pull-quote treatment for the first paragraph of each Story/Vision panel */
.fr2-story-panel p:first-of-type {
  font-style: italic; font-size: 1.12rem; color: var(--indigo); line-height: 1.6;
  border-inline-start: 3px solid var(--terracotta); padding-inline-start: 1.1rem; margin-bottom: 1.3rem;
}

/* Bold the source-note label for scannability */
.fr2-source-note { font-weight: 500; }
.fr2-source-note::before { content: "Sources: "; font-weight: 700; color: var(--indigo); }
.fr2-section-dark .fr2-source-note::before { color: var(--beige); }

.fr2-cat-text-center { max-width: 720px; margin: 2.4rem auto 0; text-align: center; }
.fr2-cat-text-center p { max-width: none; }

/* ---- Hero interactive map (replaces photo collage) ---- */
.fr2-hero-split { position: relative; }
.fr2-hero-map { position: relative; aspect-ratio: 2352 / 1375; max-height: 760px; width: 100%; }
.fr2-hero-map img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Decorative-only markers — purely ambient "global reach" texture, always visible, no label, no real-location claim */
.fr2-hero-pin-decorative {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--cedar); opacity: 0.55; border: 1.5px solid var(--beige);
}

.fr2-hero-pin {
  position: absolute; width: 16px; height: 16px; margin: -32px 0 0 -8px;
  opacity: 0; transform: translateY(-70px); pointer-events: none;
}
.fr2-hero-pin::before {
  content: ""; position: absolute; inset: 0;
  background: var(--terracotta); border: 2px solid var(--beige); border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(0,0,0,0.35);
}
.fr2-hero-pin[data-status="soon"]::before { background: var(--cedar); }
.fr2-hero-pin.is-active {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Reach markers — same visible pin treatment as real locations, but cedar-colored to stay clearly
   distinct: these represent diaspora/market reach, not actual Habib Beirut locations */
.fr2-hero-pin-reach::before { background: var(--cedar); }
.fr2-hero-pin-reach .fr2-hero-pin-label { background: var(--indigo-deep); }
/* Only the pin currently being revealed shows its label — solves overlap for pins that are genuinely close
   together geographically (real coordinates preserved), without needing to distort their position */
.fr2-hero-pin-label {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  background: var(--indigo-deep); color: var(--beige); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.03em;
  white-space: nowrap; padding: 0.2rem 0.5rem; border-radius: 3px; opacity: 0; transition: opacity 0.3s ease;
  z-index: 2;
}
.fr2-hero-pin.is-active .fr2-hero-pin-label { opacity: 1; }
.fr2-hero-pin.is-current::before { box-shadow: 0 0 0 4px rgba(244,239,231,0.3), 0 3px 8px rgba(0,0,0,0.35); }
@media (prefers-reduced-motion: reduce) {
  .fr2-hero-pin { opacity: 1; transform: translateY(0); }
  .fr2-hero-pin-label { opacity: 1; }
}
@media (max-width: 900px) { .fr2-hero-map { max-height: 420px; } }

.fr2-hero-scroll-hint {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  font-size: 0.78rem; color: var(--cedar-soft); letter-spacing: 0.04em; margin: 0;
  opacity: 1; transition: opacity 0.4s ease; pointer-events: none;
}
.fr2-hero-scroll-hint.is-hidden { opacity: 0; }
@media (max-width: 900px) { .fr2-hero-scroll-hint { display: none; } }

/* ---- Story / Vision split (collage left, tabs+text right) ---- */
.fr2-story-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: 2rem; }
.fr2-story-media .fr2-hero-collage { max-height: 480px; }
.fr2-story-content { text-align: left; }
.fr2-story-content .fr2-story-tabs { display: inline-flex; }
.fr2-story-content .fr2-story-panel { text-align: left; }
.fr2-story-content .fr2-story-panel h2 { text-align: left; }
.fr2-story-content .fr2-story-panel p:first-of-type { margin-inline: 0; }
.fr2-story-content .fr2-story-nav { justify-content: flex-start; }
@media (max-width: 860px) {
  .fr2-story-split { grid-template-columns: 1fr; }
  .fr2-story-media { order: -1; }
  .fr2-story-content { text-align: center; }
  .fr2-story-content .fr2-story-panel, .fr2-story-content .fr2-story-panel h2 { text-align: center; }
  .fr2-story-content .fr2-story-nav { justify-content: center; }
}

/* ---- Pinned scroll moments (progressive enhancement) ----
   Default state: everything visible in a normal static layout — fully accessible and
   crawlable with no JS. JS adds .pin-mode once it confirms it can run the choreography;
   only then does the tall sticky-scroll mechanism activate. */
.fr2-pin-outer { margin: 2.5rem 0; }
.fr2-pin-inner { display: flex; flex-direction: column; align-items: center; }
.fr2-pin-stage { position: relative; width: 100%; max-width: 780px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem; }
.fr2-pin-stat { position: static; opacity: 1; transform: none; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.8rem 1.5rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(145,168,195,0.28); border-radius: var(--radius); }
.fr2-pin-icon { color: var(--terracotta); margin-bottom: 1rem; }
.fr2-pin-value { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); color: #FFFFFF; letter-spacing: var(--display-tracking); line-height: 1; margin-bottom: 0.6rem; }
.fr2-pin-label { font-size: 0.92rem; color: var(--cedar-soft); max-width: 34ch; line-height: 1.5; }
.fr2-pin-progress { display: none; }

/* ---- Pin-mode: activated by JS only, and only when motion is allowed ---- */
/* ---- Market Opportunity: text left, zoom-cards right ---- */
.fr2-cat-split2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2rem, 5vw, 3.5rem); }
.fr2-cat-text2 h2 { margin: 0.3rem 0 1rem; }
.fr2-cat-text2 .section-lead { margin-bottom: 1.2rem; }
.fr2-cat-text2 p { color: var(--cedar-soft); line-height: 1.7; }
.fr2-cat-text2 .fr2-source-note { color: var(--cedar-soft); }
@media (max-width: 900px) { .fr2-cat-split2 { grid-template-columns: 1fr; } }

/* Single card visible at a time — scroll-locked swap, driven entirely by JS toggling .is-active */
.fr2-lock-stage { display: flex; flex-direction: column; align-items: center; }
.fr2-lock-cards { position: relative; width: 100%; max-width: 380px; height: 300px; }
.fr2-zoom-card {
  position: absolute; inset: 0; margin: auto; width: 100%; height: fit-content;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2.2rem 2rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(145,168,195,0.3); border-radius: var(--radius);
  opacity: 0; transform: scale(0.55); pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fr2-zoom-card.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }
.fr2-zoom-card .fr2-pin-icon { margin-bottom: 1rem; }
.fr2-zoom-card .fr2-pin-value { font-size: clamp(2.4rem, 5vw, 3.2rem); margin-bottom: 0.7rem; }
.fr2-zoom-card .fr2-pin-label { font-size: 1rem; max-width: 38ch; }
.fr2-lock-stage .fr2-pin-progress { display: flex; gap: 0.5rem; margin-top: 1.8rem; }
@media (prefers-reduced-motion: reduce) {
  .fr2-lock-cards { height: auto; display: grid; gap: 1.2rem; }
  .fr2-zoom-card { position: static; opacity: 1; transform: none; }
}

.fr2-pin-outer.pin-mode { position: relative; height: calc(var(--fr2-steps, 6) * 62vh); }
.fr2-pin-outer.pin-mode .fr2-pin-inner { position: sticky; top: 0; height: 100vh; justify-content: center; overflow: hidden; }
.fr2-pin-outer.pin-mode .fr2-pin-stage { height: 320px; display: block; }

/* Inline variant (used within a 2-column split, not full-viewport) */
.fr2-pin-outer-inline.pin-mode { height: calc(var(--fr2-steps, 6) * 34vh); }
.fr2-pin-outer-inline.pin-mode .fr2-pin-inner { height: 90vh; max-height: 560px; top: 5vh; }
.fr2-pin-outer-inline.pin-mode .fr2-pin-stage { max-width: 340px; height: 280px; }
.fr2-pin-outer-inline.pin-mode .fr2-pin-stat { max-width: 320px; padding: 1.4rem 1.2rem; }
.fr2-pin-outer-inline.pin-mode .fr2-pin-value { font-size: clamp(2.2rem, 5vw, 3rem); }
@media (max-width: 900px) { .fr2-pin-outer-inline.pin-mode { height: calc(var(--fr2-steps, 6) * 48vh); } }
.fr2-pin-outer.pin-mode .fr2-pin-stat {
  position: absolute; inset: 0; margin: auto; width: 100%; max-width: 420px; height: fit-content;
  opacity: 0; transform: scale(0.45); justify-content: center;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none;
}
.fr2-pin-outer.pin-mode .fr2-pin-stat.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }
.fr2-pin-outer.pin-mode .fr2-pin-value { font-size: clamp(3rem, 8vw, 5rem); margin-bottom: 0.8rem; }
.fr2-pin-outer.pin-mode .fr2-pin-label { font-size: 1.05rem; max-width: 46ch; }
.fr2-pin-outer.pin-mode .fr2-pin-progress { display: flex; gap: 0.5rem; margin-top: 2.4rem; }
.fr2-pin-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(244,239,231,0.3); transition: background 0.3s ease, transform 0.3s ease; }
.fr2-pin-dot.is-active { background: var(--terracotta); transform: scale(1.3); }

.fr2-section#presence .fr2-pin-outer.pin-mode { height: calc(var(--fr2-steps, 9) * 38vh); }
.pin-mode .fr2-map-pin { transform: translate(-50%, -50%) scale(0); transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.pin-mode .fr2-map-pin.is-active { transform: translate(-50%, -50%) scale(1); }
.pin-mode .fr2-map-pin-label { transform: translateX(-50%) translateY(4px); }
.pin-mode .fr2-map-pin.is-active .fr2-map-pin-label { opacity: 1; }

@media (max-width: 720px) {
  .fr2-pin-outer.pin-mode { height: calc(var(--fr2-steps, 6) * 52vh); }
  .fr2-pin-outer.pin-mode .fr2-pin-value { font-size: clamp(2.2rem, 12vw, 3rem); }
}

/* ============================================================
   Franchise page 3 (comparison concept — contained cards)
   ============================================================ */
.fr3-hero-wrap { background: var(--indigo); color: var(--beige); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.fr3-hero-badges { display: flex; gap: 0.6rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.fr3-badge {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 500;
  color: var(--beige); background: rgba(244,239,231,0.1); padding: 0.4rem 0.8rem 0.4rem 0.5rem; border-radius: 999px;
}
.fr3-badge-icon { display: inline-flex; color: var(--terracotta); }
.fr3-badge-icon svg { width: 16px; height: 16px; }
.fr3-hero-headline { font-size: clamp(1.8rem, 4.5vw, 2.7rem); line-height: 1.3; color: var(--beige); font-weight: 500; margin: 0 0 1rem; max-width: 38ch; }
.fr3-hero-headline strong { color: var(--terracotta); font-weight: 600; }
.fr3-stat-value { display: block; font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 3.6rem); color: #FFFFFF; letter-spacing: var(--display-tracking); line-height: 1; }
.fr3-stat-label { font-size: 0.92rem; color: var(--cedar-soft); margin: 0.6rem 0 0; max-width: 34ch; }
.fr3-hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.fr3-hero-left { display: flex; flex-direction: column; }
.fr3-hero-stat { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(244,239,231,0.18); }
.fr3-hero-right { position: relative; }
.fr3-float-cards { position: absolute; top: -1.8rem; right: 0.5rem; display: flex; flex-direction: column; gap: 0.7rem; z-index: 2; }
.fr3-float-card { display: flex; align-items: center; gap: 0.7rem; background: #FFFFFF; border-radius: 12px; padding: 0.7rem 1rem; box-shadow: 0 10px 25px rgba(0,0,0,0.18); width: 200px; }
.fr3-float-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--beige-deep); color: var(--terracotta); }
.fr3-float-text { display: flex; flex-direction: column; font-size: 0.72rem; color: var(--ink-soft); line-height: 1.3; }
.fr3-float-text strong { font-size: 0.94rem; font-weight: 600; color: var(--indigo); }
.fr3-circle3 { max-width: 300px; margin: 3rem auto 0; }
.fr3-circle3 svg { width: 100%; display: block; }
.fr3-circle-track { stroke: rgba(244,239,231,0.14); }
.fr3-circle-seg { opacity: 0; transition: opacity 0.4s ease; }
.fr3-circle-seg.is-visible { opacity: 1; }
.fr3-circle-seg-0 { stroke: var(--terracotta); }
.fr3-circle-seg-1 { stroke: var(--cedar); }
.fr3-circle-seg-2 { stroke: var(--olive); }
.fr3-circle-legend { display: flex; justify-content: center; gap: 1.6rem; margin-top: 1.2rem; flex-wrap: wrap; }
.fr3-legend-item { display: flex; flex-direction: column; align-items: center; }
.fr3-legend-dot { width: 10px; height: 10px; border-radius: 50%; margin-bottom: 0.5rem; }
.fr3-legend-dot-0 { background: var(--terracotta); }
.fr3-legend-dot-1 { background: var(--cedar); }
.fr3-legend-dot-2 { background: var(--olive); }
.fr3-legend-value { font-family: var(--font-display); font-size: clamp(1.2rem, 2.6vw, 1.6rem); color: #FFFFFF; letter-spacing: var(--display-tracking); line-height: 1; }
.fr3-legend-label { font-size: 0.72rem; color: var(--cedar-soft); margin-top: 0.35rem; max-width: 14ch; line-height: 1.4; text-align: center; }
@media (max-width: 860px) {
  .fr3-hero-grid { grid-template-columns: 1fr; }
  .fr3-hero-right { margin-top: 1rem; }
  .fr3-float-cards { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; margin-bottom: 1.5rem; }
  .fr3-float-card { width: auto; flex: 1 1 180px; }
  .fr3-swoosh { padding-top: 1rem; }
}

.fr3-section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.fr3-section-headline { font-size: clamp(1.5rem, 3.6vw, 2.1rem); font-weight: 500; color: var(--ink); line-height: 1.3; margin: 0 0 1.5rem; }
.fr3-section-headline strong { color: var(--indigo); font-weight: 600; }
.fr3-section-headline.center { text-align: center; max-width: 30ch; margin-inline: auto; margin-bottom: 1.2rem; }
.fr3-pill-row { display: flex; justify-content: center; gap: 0.6rem; margin-bottom: 2.4rem; flex-wrap: wrap; }
.fr3-pill { font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); background: var(--beige-deep); padding: 0.35rem 0.9rem; border-radius: 999px; }

.fr3-accordion { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; }
.fr3-accordion-row { width: 88%; background: var(--beige-deep); border-radius: 14px; overflow: hidden; transition: background 0.3s ease; }
.fr3-accordion-row:nth-child(odd) { margin-right: auto; }
.fr3-accordion-row:nth-child(even) { margin-left: auto; }
.fr3-accordion-row.is-active { background: var(--indigo); }
.fr3-accordion-trigger {
  width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; background: none; border: none;
  cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.fr3-accordion-icon { flex-shrink: 0; display: inline-flex; color: var(--terracotta); }
.fr3-accordion-row.is-active .fr3-accordion-icon { color: var(--cedar); }
.fr3-accordion-text { flex: 1; min-width: 0; }
.fr3-accordion-title { display: block; font-weight: 500; font-size: 1rem; color: var(--ink); }
.fr3-accordion-row.is-active .fr3-accordion-title { color: #FFFFFF; }
.fr3-accordion-teaser { display: block; font-size: 0.84rem; color: var(--ink-soft); margin-top: 0.15rem; }
.fr3-accordion-row.is-active .fr3-accordion-teaser { color: var(--cedar-soft); }
.fr3-accordion-chevron { flex-shrink: 0; display: inline-flex; color: var(--ink-soft); transition: transform 0.3s ease; }
.fr3-accordion-row.is-active .fr3-accordion-chevron { color: var(--beige); transform: rotate(90deg); }
.fr3-accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; padding: 0 1.3rem; }
.fr3-accordion-panel p { margin: 0; padding-bottom: 1.2rem; font-size: 0.9rem; line-height: 1.6; color: var(--cedar-soft); }
.fr3-accordion-row.is-active .fr3-accordion-panel { max-height: 200px; }
@media (max-width: 640px) { .fr3-accordion-row { width: 100%; margin-left: 0; margin-right: 0; } }

.fr3-section-alt { background: var(--beige-deep); }
.fr3-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; max-width: 980px; margin-inline: auto; }
.fr3-why-card { background: #FFFFFF; border-radius: 16px; padding: 1.8rem 1.6rem; box-shadow: 0 6px 20px rgba(43,54,66,0.06); }
.fr3-why-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--beige-deep); color: var(--terracotta); margin-bottom: 1rem; }
.fr3-why-title { font-size: 1rem; font-weight: 500; color: var(--ink); margin: 0 0 0.5rem; }
.fr3-why-text { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }
@media (max-width: 860px) { .fr3-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fr3-why-grid { grid-template-columns: 1fr; } }

.fr3-cta-section { background: var(--indigo); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.fr3-cta-section .fr3-section-headline { color: var(--beige); text-align: center; max-width: 26ch; margin-inline: auto; }
.fr3-cta-section .fr3-section-headline strong { color: var(--terracotta); }
.fr3-cta-body { font-size: 0.95rem; color: var(--cedar-soft); line-height: 1.65; }
.fr3-cta-body.center { text-align: center; max-width: 46ch; margin: 0 auto 2.6rem; }
.fr3-cta-inner { display: flex; justify-content: center; }
.fr3-cta-map-block { max-width: 780px; margin: 0 auto 3rem; }
.fr3-cta-map { position: relative; width: 100%; }
.fr3-cta-map img { width: 100%; height: auto; display: block; }
.fr3-cta-pin { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; border: 2px solid var(--beige); background: var(--terracotta); box-shadow: 0 0 0 2px rgba(190,111,95,0.35); opacity: 0; transform: scale(0.4); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fr3-cta-pin-soon { background: var(--indigo); border-color: var(--cedar); box-shadow: 0 0 0 2px rgba(180, 194, 170, 0.55); }
.fr3-cta-map.is-visible .fr3-cta-pin { opacity: 1; transform: scale(1); }
.fr3-cta-form-wrap { position: relative; }
.fr3-cta-form { max-width: 480px; text-align: left; margin-inline: auto; }
.fr3-method-toggle { display: flex; gap: 0.6rem; margin-bottom: 1.5rem; }
.fr3-method-btn { flex: 1; text-align: center; padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; border: 1px solid var(--cedar); background: transparent; color: var(--beige); cursor: pointer; font-family: var(--font-body); transition: background 0.2s ease, color 0.2s ease; }
.fr3-method-btn.is-active { background: var(--cedar); color: var(--indigo-deep); }
.fr3-cta-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.3rem; }
.fr3-cta-form-grid .fr3-field-full { grid-column: 1 / -1; }
.fr3-cta-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cedar-soft); }
.fr3-cta-form input, .fr3-cta-form textarea { background: transparent; border: none; border-bottom: 1px solid var(--cedar); color: var(--beige); font-family: var(--font-body); font-size: 0.98rem; padding: 0.45rem 0.1rem; border-radius: 0; }
.fr3-cta-form textarea { resize: vertical; min-height: 4rem; }
.fr3-cta-form input::placeholder, .fr3-cta-form textarea::placeholder { color: var(--cedar-soft); opacity: 0.7; }
.fr3-cta-form input:focus, .fr3-cta-form textarea:focus { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.fr3-contact-error { margin: -0.35rem 0 0; color: #FFD0C7; font-size: 0.82rem; line-height: 1.45; letter-spacing: 0; text-transform: none; }
.fr3-cta-submit { width: 100%; background: var(--terracotta); color: #FBF3EF; font-weight: 600; font-size: 0.92rem; padding: 0.85rem 1.5rem; border-radius: 999px; border: none; cursor: pointer; transition: background 0.2s ease; }
.fr3-cta-submit:hover { background: var(--terracotta-deep); }
.fr3-cta-form-note { font-size: 0.78rem; color: var(--cedar-soft); text-align: center; margin: 0.9rem 0 0; }
@media (max-width: 780px) {
  .fr3-cta-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   Franchise page 4 (precise brief implementation — hero + Section D only)
   ============================================================ */
.fr4-hero { display: block; }
.fr4-hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); }
.fr4-hero-copy { background: var(--indigo); display: flex; align-items: center; padding: clamp(34px, 4.6vw, 72px); }
.fr4-hero-copy-inner { max-width: 640px; }
.fr4-eyebrow { font: 500 11px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: 0.12em; color: var(--olive); margin: 0 0 18px; }
.fr4-h1 { font-family: var(--font-display); font-size: clamp(38px, 4.5vw, 62px); line-height: 1.03; letter-spacing: -0.02em; color: var(--beige); margin: 0 0 20px; font-weight: 500; }
.fr4-h1 .fr4-accent { color: var(--olive); font-style: normal; font-weight: inherit; }
.fr4-lede { font-size: 17px; line-height: 1.62; max-width: 46ch; color: var(--cedar-soft); margin: 0; }
.fr4-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 34px; }
.fr4-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--terracotta); color: #FBF3EF; font-weight: 600; font-size: 15px;
  padding: 13px 26px; border-radius: 999px; text-decoration: none; transition: background-color 0.2s ease;
}
.fr4-cta-btn:hover { background: var(--terracotta-deep); }
.fr4-cta-btn:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; }
.fr4-cta-figure { font: 500 11px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: 0.12em; color: var(--cedar-soft); }
.fr4-proof-card {
  position: relative; z-index: 2; background: var(--beige); border-radius: 6px; border-left: 3px solid var(--olive);
  padding: 16px 20px; margin: 44px -26% 0 0; max-width: none; display: flex; align-items: center; gap: 16px;
}
.fr4-proof-card-logo { flex-shrink: 0; width: 52px; height: auto; }
.fr4-proof-card-text { min-width: 0; }
.fr4-proof-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--olive-deep); margin: 0 0 4px; }
.fr4-proof-body { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.fr4-hero-photo { position: relative; min-height: 560px; overflow: hidden; }
.fr4-hero-photo picture, .fr4-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.fr4-territory-strip { background: var(--olive-deep); padding: 20px clamp(20px, 4vw, 60px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.fr4-proof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1180px; margin: 44px auto 0; }
.fr4-proof-stat { background: #FFFFFF; border: 1px solid var(--beige-deep); border-radius: 12px; padding: 20px 22px; }
.fr4-proof-stat dt { font-family: var(--font-display); font-size: 26px; color: var(--indigo); letter-spacing: -0.015em; line-height: 1.1; }
.fr4-proof-stat dd { font-size: 13px; color: var(--ink-soft); margin: 8px 0 0; max-width: 24ch; line-height: 1.45; }
@media (max-width: 899px) { .fr4-proof-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fr4-proof-stats { grid-template-columns: 1fr; } }
.fr4-territory-item { display: inline-flex; align-items: center; gap: 9px; font: 500 16px/1.4 var(--font-body); letter-spacing: 0.02em; white-space: nowrap; text-transform: none; }
.fr4-territory-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.fr4-territory-open { color: var(--beige); opacity: 1; }
.fr4-territory-open .fr4-territory-dot { background: var(--terracotta); }
.fr4-territory-soon { color: var(--beige); opacity: 0.72; font-weight: 400; }
.fr4-territory-soon .fr4-territory-dot { background: transparent; border: 1px solid var(--cedar); }
.fr4-territory-operating { color: var(--beige); opacity: 0.62; font-weight: 400; }
.fr4-territory-operating .fr4-territory-dot { background: rgba(244, 239, 231, 0.45); }

@media (max-width: 899px) {
  .fr4-hero-grid { grid-template-columns: 1fr; }
  .fr4-hero-photo { order: -1; aspect-ratio: 4 / 5; min-height: 0; }
  .fr4-proof-card { margin-right: 0; }
}

.fr4-section-d { background: var(--beige); padding: clamp(48px, 6vw, 88px) clamp(24px, 5vw, 64px); }
.fr4-section-d-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 64px); align-items: center; max-width: 1180px; margin-inline: auto; }
.fr4-eyebrow-deep { color: var(--olive-deep); }
.fr4-claim { font-family: var(--font-display); font-size: clamp(27px, 3.2vw, 41px); line-height: 1.16; margin: 0; font-weight: 500; }
.fr4-claim-muted { color: var(--ink-soft); }
.fr4-claim-strong { color: var(--ink); display: block; }
.fr4-bignum-pair { margin: 0; display: flex; flex-direction: column; }
.fr4-bignum { font-family: var(--font-display); font-size: clamp(62px, 8vw, 104px); line-height: 0.92; letter-spacing: -0.035em; color: var(--indigo); margin: 46px 0 0; order: 1; }
.fr4-bignum-caption { font-size: 14px; color: var(--ink-soft); max-width: 32ch; line-height: 1.55; margin: 10px 0 0; order: 2; }

.fr4-gauge-wrap { position: relative; }
.fr4-gauge-svg { width: 100%; display: block; }
.fr4-gauge-ticks { display: flex; justify-content: space-between; margin: 8px 10px 0; font: 500 11px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.fr4-gauge-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin: 16px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.fr4-gauge-legend span { display: inline-flex; align-items: center; gap: 7px; }
.fr4-gauge-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.fr4-gauge-legend-dot-green { background: var(--olive-deep); }
.fr4-gauge-legend-dot-blue { background: var(--indigo); }
.fr4-gauge-legend-dot-orange { background: var(--terracotta); }
.fr4-float-cards { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; gap: 12px; width: min(258px, 82%); z-index: 2; }
.fr4-proof-float { display: flex; align-items: center; gap: 12px; background: #FFFFFF; border: 1px solid var(--beige-deep); border-radius: 10px; padding: 13px 15px; }
.fr4-proof-mark {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 8px; background: var(--olive-deep); color: var(--beige); font: 600 10px/1 var(--font-body); letter-spacing: 0.03em;
}
.fr4-proof-float-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; color: var(--ink-soft); }
.fr4-proof-float-iso { padding: 10px 15px; }
.fr4-proof-logo { flex-shrink: 0; width: 60px; height: auto; }
.fr4-proof-float-text strong { font-size: 13px; font-weight: 700; color: var(--ink); }

@media (max-width: 899px) {
  .fr4-section-d-grid { grid-template-columns: 1fr; }
  .fr4-bignum { margin-top: 32px; }
  .fr4-float-cards { position: static; flex-direction: row; width: auto; margin-bottom: 16px; }
  .fr4-proof-float { flex: 1; }
}

.fr4-candle-section { background: var(--beige); padding: clamp(48px, 6vw, 88px) clamp(24px, 5vw, 64px); }
.fr4-candle-headline { font-family: var(--font-display); font-size: clamp(27px, 3.2vw, 41px); line-height: 1.16; margin: 0 0 1.5rem; font-weight: 500; color: var(--ink); }
.fr4-candle-headline strong { color: var(--olive-deep); font-weight: 600; }
.fr4-candle-headline.center { text-align: center; max-width: 30ch; margin-inline: auto; }
.fr4-candle-pill-row { display: flex; justify-content: center; gap: 10px; margin: 0 0 3rem; flex-wrap: wrap; }
.fr4-candle-pill { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); background: var(--beige-deep); padding: 6px 16px; border-radius: 999px; }

.fr4-candle-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1000px; margin-inline: auto; align-items: start; }
.fr4-candle { width: auto; background: var(--beige-deep); border-radius: 14px; overflow: hidden; transition: background 0.3s ease; }
.fr4-candle.is-active { background: var(--olive-deep); }
.fr4-candle-trigger {
  width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.8rem;
  padding: 1.6rem 1rem 1.3rem; background: none; border: none; cursor: pointer; font: inherit; color: inherit;
}
.fr4-candle-icon { display: inline-flex; color: var(--olive-deep); }
.fr4-candle.is-active .fr4-candle-icon { color: var(--beige); }
.fr4-candle-title { font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.fr4-candle.is-active .fr4-candle-title { color: #FFFFFF; }
.fr4-candle-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 1.1rem; }
.fr4-candle-panel p { margin: 0; padding-bottom: 1.3rem; font-size: 12.5px; line-height: 1.55; color: var(--cedar-soft); }
.fr4-candle.is-active .fr4-candle-panel { max-height: 220px; }
@media (max-width: 899px) {
  .fr4-candle-group { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .fr4-candle-group { grid-template-columns: 1fr; }
}

/* CTA: two-column split — map left, heading + copy + form right */
.fr4-wide-cta .section-inner { max-width: 1280px; }
.fr4-cta-split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.fr4-cta-map-col { min-width: 0; }
.fr4-cta-form-col { min-width: 0; }
.fr4-cta-heading { font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); line-height: 1.2; font-weight: 500; color: var(--beige); margin: 0 0 0.8rem; }
.fr4-cta-heading strong { color: var(--terracotta); font-weight: 600; }
.fr4-cta-sub { font-size: 15px; line-height: 1.6; color: var(--cedar-soft); margin: 0 0 1.8rem; max-width: 46ch; }
.fr4-wide-cta .fr3-cta-form { max-width: none; margin-inline: 0; }

/* ---- Mobile pass (≤899px) ---- */
@media (max-width: 899px) {
  .fr4-cta-split { grid-template-columns: 1fr; gap: 28px; }
  .fr4-cta-map-col { order: -1; }
  .fr4-gauge-legend { justify-content: flex-start; }
}

/* Prevent any horizontal overflow from bleeding elements on small screens */
@media (max-width: 899px) {
  .fr4-hero, .fr4-section-d, .fr4-candle-section, .fr4-wide-cta { overflow-x: hidden; }
}

@media (max-width: 620px) {
  /* Two proof cards side-by-side get too cramped with the ISO logo — stack them */
  .fr4-float-cards { flex-direction: column; }
  .fr4-proof-float { flex: none; }
}

/* Touch targets: enforce the 44px minimum on every interactive control */
@media (max-width: 899px) {
  .fr3-method-btn, .fr3-cta-submit { min-height: 44px; }
  .fr4-candle-trigger { min-height: 44px; }
}

/* iOS Safari auto-zooms any input whose font-size is under 16px on focus —
   this bumps them to exactly 16px on small screens to keep the form usable. */
@media (max-width: 899px) {
  .fr3-cta-form input, .fr3-cta-form textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .fr4-cta-btn { transition: none; }
  .fr4-candle, .fr4-candle-panel { transition: none; }
}

/* ============================================================
   Home page
   ============================================================ */
.hm-inner{max-width:1180px;margin-inline:auto;padding-inline:var(--pad-x)}
.hm-eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#C9D4DE;margin:0 0 14px}
.hm-eyebrow-dark{color:var(--olive)}
.hm-h1{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,4.2vw,50px);
 line-height:1.12;letter-spacing:var(--display-tracking);text-transform:uppercase;margin:0 0 16px;color:var(--beige)}
.hm-h2{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,3.2vw,40px);
 line-height:1.18;letter-spacing:var(--display-tracking);margin:0 0 16px;color:var(--ink)}
.hm-h2-light{color:var(--beige)}
.hm-sub{font-size:16px;line-height:1.62;color:var(--cedar-soft);max-width:52ch;margin:0 0 26px}
.hm-lead{font-size:16px;line-height:1.62;color:var(--ink-soft);max-width:56ch;margin:0 auto 34px}
.hm-note{font-size:13.5px;color:var(--ink-soft);margin:26px 0 0}
.center{text-align:center}
.hm-cta{display:inline-flex;align-items:center;gap:10px;min-height:46px;background:var(--terracotta);
 color:#FBF3EF;padding:12px 24px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:600;
 transition:background .2s ease}
.hm-cta:hover{background:var(--terracotta-deep)}
.hm-ghost{display:inline-flex;align-items:center;min-height:52px;padding:15px 34px;border-radius:999px;
 font-size:16px;font-weight:700;letter-spacing:.01em;
 border:1px solid var(--cedar);color:var(--beige);text-decoration:none}
.hm-ghost:hover{background:rgba(145,168,195,.15)}

/* ---- hero ---- */
.hm-hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;
 background:radial-gradient(115% 92% at 50% -5%, #5E7589 0%, var(--indigo) 46%, var(--indigo-deep) 100%)}
.hm-hero-copy{position:relative;z-index:3;text-align:center;max-width:900px;margin:0 auto;padding:10vh var(--pad-x) 4vh}
.hm-hero-copy .hm-sub{margin-inline:auto}
.hm-mapwrap{position:relative;width:100%;font-size:0;z-index:1}
.hm-mapimg{width:100%;height:auto;display:block;opacity:0;transition:opacity 1s ease}
.hm-mapwrap.in .hm-mapimg{opacity:.9}
.hm-overlay{position:absolute;inset:0;width:100%;height:100%}
.hm-overlay text{font-family:var(--font-body)}
.hm-pin{cursor:pointer;opacity:0;transform:translateY(6px);
 transition:opacity .35s ease calc(var(--d) + .45s),transform .35s ease calc(var(--d) + .45s)}
.hm-mapwrap.in .hm-pin{opacity:1;transform:translateY(0)}
.hm-pin:hover rect,.hm-pin:focus rect{filter:brightness(1.08)}
.hm-pin:focus{outline:none}
.hm-ld{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset .8s ease var(--d)}
.hm-mapwrap.in .hm-ld{stroke-dashoffset:0}
@keyframes hmPing{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(3.4);opacity:0}}
@keyframes hmBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
.hm-ping{opacity:0}
.hm-mapwrap.in .hm-ping{transform-box:fill-box;transform-origin:center;
 animation:hmPing 2.8s ease-out infinite;animation-delay:calc(var(--pd) + 1s)}
.hm-mapwrap.in .hm-core{transform-box:fill-box;transform-origin:center;
 animation:hmBeat 2.8s ease-in-out infinite;animation-delay:calc(var(--pd) + 1s)}

/* mobile city chips - hidden on desktop where the labels do the job */
.hm-chips{display:none;list-style:none;margin:0;padding:0 var(--pad-x) 26px;
 flex-wrap:wrap;gap:8px;justify-content:center}
.hm-chips button{display:inline-flex;align-items:center;gap:8px;min-height:40px;
 background:rgba(244,239,231,.10);border:1px solid rgba(201,212,222,.35);color:var(--beige);
 padding:8px 14px;border-radius:999px;font:600 13px/1 var(--font-body);cursor:pointer}
.hm-chip-dot{width:9px;height:9px;border-radius:50%;background:var(--c);flex:0 0 auto}
.hm-chip-n{font-weight:400;color:var(--cedar-soft);font-size:12px}

/* ---- story ---- */
.hm-story{background:var(--beige);padding-block:var(--pad-section)}
.hm-story-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hm-story-media img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.hm-story-text p{color:var(--ink-soft);line-height:1.72;margin:0 0 1rem;max-width:var(--measure)}
.hm-facts{display:flex;flex-wrap:wrap;gap:2.2rem;margin:1.8rem 0 0;padding-top:1.4rem;
 border-top:1px solid var(--beige-deep)}
.hm-facts dt{font-family:var(--font-display);font-size:2rem;color:var(--indigo);letter-spacing:var(--display-tracking)}
.hm-facts dd{margin:.3rem 0 0;font-size:12.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em}

/* ---- locations ---- */
.hm-locs{background:var(--indigo);padding-block:0}
.hm-locs .hm-eyebrow{text-align:center}
.hm-locs-inner{padding-block:clamp(2rem,4vw,3.2rem)}
/* true edge-to-edge: the grid is a sibling of the contained wrapper, not inside it,
   so panels run the full viewport width with zero side margin, matching the reference */
.hm-loc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hm-loc{position:relative;overflow:hidden}
.hm-loc a{display:block;position:relative;height:100%;text-decoration:none}
.hm-loc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
 transition:transform .4s ease}
.hm-loc a:hover .hm-loc-img{transform:scale(1.05)}
/* panels touch with no gap, so height comes from aspect-ratio on the LI itself */
.hm-loc{aspect-ratio:3/4.6}
.hm-loc-scrim{position:absolute;inset:0;
 background:linear-gradient(to top, rgba(20,28,36,.92) 0%, rgba(20,28,36,.55) 30%,
 rgba(20,28,36,.05) 62%, rgba(20,28,36,0) 100%)}
.hm-loc-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px 26px;
 display:block}
.hm-loc-body strong{display:block;font-size:19px;font-weight:600;color:var(--beige);
 padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(244,239,231,.32)}
.hm-loc-body em{display:block;font-style:normal;font-size:13px;color:var(--cedar-soft);margin:0 0 8px}
.hm-loc-go{font-size:13.5px;font-weight:700;color:var(--beige)}
@media (max-width:1000px){ .hm-loc-grid{grid-template-columns:repeat(2,1fr)} .hm-loc{aspect-ratio:4/5} }
@media (max-width:560px){ .hm-loc-grid{grid-template-columns:1fr} .hm-loc{aspect-ratio:16/11} }

/* ---- why ---- */
.hm-why{background:var(--beige);padding-block:clamp(2.5rem,5vw,4rem)}
.hm-why-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.hm-why-grid li{background:#FFFFFF;border:1px solid var(--beige-deep);border-radius:12px;padding:22px}
.hm-why-grid strong{display:block;font-family:var(--font-display);font-size:1.55rem;color:var(--indigo);
 letter-spacing:var(--display-tracking)}
.hm-why-grid span{display:block;margin-top:.6rem;font-size:13px;line-height:1.5;color:var(--ink-soft)}

/* ---- franchise teaser ---- */
.hm-fr{background:var(--indigo-deep);padding-block:var(--pad-section)}
.hm-fr-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hm-fr-img{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius)}
.hm-fr-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- location panel ---- */
.hm-scrim{position:fixed;inset:0;background:rgba(28,38,48,.55);opacity:0;pointer-events:none;
 transition:opacity .25s ease;z-index:60}
.hm-scrim.open{opacity:1;pointer-events:auto}
.hm-panel{position:fixed;z-index:70;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);
 width:min(560px,92vw);max-height:82vh;background:#FFFFFF;color:var(--ink);border-radius:10px;
 overflow:hidden;display:flex;flex-direction:column;opacity:0;pointer-events:none;
 box-shadow:0 30px 70px rgba(10,18,26,.45);transition:opacity .25s ease,transform .25s ease}
.hm-panel.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.hm-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px}
.hm-panel-head h3{margin:0;font-family:var(--font-display);font-size:1.35rem;color:#FFFFFF;
 letter-spacing:var(--display-tracking)}
.hm-panel-close{width:38px;height:38px;min-width:38px;border-radius:50%;border:none;background:#FFFFFF;
 color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.hm-panel-body{overflow-y:auto;padding:4px 20px 20px;-webkit-overflow-scrolling:touch}
.hm-venue{padding:15px 0;border-bottom:1px solid var(--beige-deep)}
.hm-venue:last-child{border-bottom:none}
.hm-v-name{font-size:15.5px;font-weight:600;color:var(--indigo);margin:0 0 5px}
.hm-v-addr{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0 0 10px}
.hm-v-row{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13.5px}
.hm-v-row a{color:var(--terracotta);text-decoration:none;font-weight:600;min-height:32px;
 display:inline-flex;align-items:center;gap:6px}
.hm-v-row a:hover{text-decoration:underline}
.hm-v-none{font-size:12.5px;color:#9AA0A4;font-style:italic}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .hm-loc-grid{grid-template-columns:repeat(2,1fr)}
  .hm-why-grid{grid-template-columns:repeat(2,1fr)}
  }
@media (max-width:860px){
  .hm-story-grid,.hm-fr-grid{grid-template-columns:1fr}
  .hm-story-media{order:-1}
  .hm-fr-img{order:-1}
}
@media (max-width:760px){
  /* the map labels are unreadable below this width, so swap them for chips */
  .hm-hero{min-height:auto;padding-bottom:0}
  .hm-hero-copy{padding:7vh var(--pad-x) 3vh}
  .hm-pill,.hm-ld{display:none}
  .hm-mk{transform-box:fill-box;transform-origin:center;transform:scale(3.2)}
  .hm-pin{cursor:default;pointer-events:none}
  .hm-chips{display:flex}
  .hm-mapimg{opacity:.9}
}
@media (max-width:560px){
      .hm-loc-grid{grid-template-columns:1fr}
  .hm-why-grid{grid-template-columns:1fr}
  .hm-facts{gap:1.4rem}
  .hm-facts dt{font-size:1.6rem}
  .hm-panel{width:100vw;max-width:none;max-height:88vh;border-radius:14px 14px 0 0;
   top:auto;bottom:0;transform:translate(-50%,12px)}
  .hm-panel.open{transform:translate(-50%,0)}
}
@media (prefers-reduced-motion:reduce){
  .hm-mapimg{opacity:.9}
  .hm-ld{stroke-dashoffset:0}
  .hm-pin{opacity:1;transform:none}
  .hm-mapwrap.in .hm-ping,.hm-mapwrap.in .hm-core{animation:none}
  .hm-loc a:hover{transform:none}
  .hm-panel{transition:none}
}

/* nav dropdowns (home only) */
.nav-drop{position:relative;display:inline-block}
.nav-drop-btn{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:0}
.nav-drop-btn.nav-cta{padding:.55rem 1.1rem}
.nav-drop-btn::after{content:" \25BE";font-size:.75em}
.nav-drop-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
 background:#FFFFFF;border-radius:8px;padding:8px;min-width:186px;display:flex;flex-direction:column;
 box-shadow:0 14px 34px rgba(16,24,32,.26);opacity:0;pointer-events:none;
 transition:opacity .2s ease,transform .2s ease;z-index:30}
.nav-drop.open .nav-drop-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-drop-panel a{display:block;padding:10px 14px;border-radius:5px;font-size:14px;
 color:var(--indigo);text-decoration:none;min-height:40px}
.nav-drop-panel a:hover{background:var(--beige-deep)}
@media (max-width:900px){
 .nav-drop{display:block;width:100%}
 .nav-drop-panel{position:static;transform:none;opacity:1;pointer-events:auto;box-shadow:none;
  background:transparent;padding:4px 0 8px;min-width:0;display:none}
 .nav-drop.open .nav-drop-panel{display:flex;transform:none}
 .nav-drop-panel a{color:var(--beige);padding-left:18px}
 .nav-drop-panel a:hover{background:rgba(244,239,231,.12)}
}

/* ---- hero reservation bar ---- */
.hm-book{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr auto;gap:10px;align-items:end;
 background:rgba(244,239,231,.10);border:1px solid rgba(201,212,222,.30);border-radius:14px;
 padding:14px;margin:0 auto;max-width:920px;text-align:left;backdrop-filter:blur(3px)}
.hm-book-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.hm-book-f label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cedar-soft)}
.hm-book-f select,.hm-book-f input{width:100%;min-height:46px;padding:10px 12px;border-radius:8px;
 border:1px solid rgba(201,212,222,.42);background:rgba(255,255,255,.94);color:var(--ink);
 font:500 15px/1.2 var(--font-body);appearance:none}
/* appearance:none removes the native arrow, so put a chevron back or it reads as a plain box */
.hm-book-f select{padding-right:36px;cursor:pointer;
 background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351687C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 11px center;background-size:16px 16px}
.hm-book-f select:disabled{opacity:.45;cursor:not-allowed}
.hm-book-f select:focus,.hm-book-f input:focus{outline:2px solid var(--terracotta);outline-offset:1px}
.hm-book-f input[type=date]{min-height:46px}
.hm-book-go{min-height:46px;padding:12px 24px;border:none;border-radius:999px;cursor:pointer;
 background:var(--terracotta);color:#FBF3EF;font:600 15px/1 var(--font-body);white-space:nowrap;
 transition:background .2s ease}
.hm-book-go:hover{background:var(--terracotta-deep)}
.hm-book-note{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;color:var(--cedar-soft);min-height:1em}
.hm-book-note.err{color:#F3B0A2}
@media (max-width:900px){
  .hm-book{grid-template-columns:1fr 1fr;max-width:520px}
  .hm-book-loc{grid-column:1/-1}
  .hm-book-go{grid-column:1/-1}
}
@media (max-width:420px){
  .hm-book{grid-template-columns:1fr}
}

/* ---- hero slider ---- */
.hm-slider{position:relative;background:var(--indigo-deep)}
.hm-slide{display:none}
.hm-slide.is-active{display:block;animation:hmFade .5s ease}
@keyframes hmFade{from{opacity:0}to{opacity:1}}

.hm-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:100vh;
 background:radial-gradient(120% 100% at 0% 0%, #5E7589 0%, var(--indigo) 52%, var(--indigo-deep) 100%)}
.hm-split-panel{display:flex;flex-direction:column;justify-content:center;
 padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,4vw,3.5rem)}
.hm-h1-sm{font-size:clamp(24px,3.1vw,38px);max-width:16ch}
.hm-split-panel .hm-sub{max-width:44ch}
.hm-split-panel .hm-book{margin:0;max-width:none;grid-template-columns:1fr 1fr}
.hm-split-panel .hm-book-loc,.hm-split-panel .hm-book-go{grid-column:1/-1}

/* four square tiles in a 2x2 block, echoing the logo medallion */
.hm-films{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;align-content:center;
 gap:10px;padding:clamp(1.5rem,3vw,2.5rem);width:100%}
.hm-film{position:relative;margin:0;overflow:hidden;aspect-ratio:1/1;
 width:clamp(190px,23vw,320px);border-radius:4px;
 box-shadow:0 16px 34px rgba(10,18,26,.34)}
.hm-film video{width:100%;height:100%;object-fit:cover;display:block}

/* arrows sit at the left/right edges of the hero, vertically centred */
.hm-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:40;
 width:56px;height:56px;border-radius:50%;border:1px solid rgba(244,239,231,.7);
 background:rgba(28,38,48,.72);color:var(--beige);font-size:28px;line-height:1;cursor:pointer;
 display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);
 box-shadow:0 6px 20px rgba(10,18,26,.35);
 transition:background .2s ease,transform .2s ease}
.hm-arrow:hover{background:var(--terracotta);border-color:var(--terracotta)}
.hm-arrow:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
.hm-arrow[data-prev]{left:clamp(12px,2vw,28px)}
.hm-arrow[data-next]{right:clamp(58px,5vw,84px)}
.hm-arrow:hover[data-prev]{transform:translateY(-50%) translateX(-2px)}
.hm-arrow:hover[data-next]{transform:translateY(-50%) translateX(2px)}
/* dot rail runs vertically down the right edge */
.hm-dots{position:absolute;right:clamp(12px,1.6vw,24px);top:50%;transform:translateY(-50%);z-index:40;
 display:flex;flex-direction:column;gap:12px;align-items:center}
.hm-dot{width:12px;height:12px;padding:0;border:1px solid rgba(244,239,231,.5);border-radius:50%;cursor:pointer;
 background:rgba(244,239,231,.35);transition:background .2s ease,transform .2s ease,height .2s ease}
.hm-dot.is-on{background:var(--terracotta);height:26px;border-radius:6px}

@media (max-width:900px){
  .hm-split{grid-template-columns:1fr;min-height:0}
  .hm-films{padding:0 var(--pad-x) 3.5rem}
  .hm-film{width:clamp(140px,40vw,230px)}
  .hm-split-panel{padding:8vh var(--pad-x) 3rem}
  }
@media (max-width:560px){
  .hm-films{gap:8px}
  .hm-film{width:clamp(125px,41vw,180px)}
  .hm-arrow{width:42px;height:42px;font-size:22px}
  .hm-arrow[data-next]{right:46px}
  .hm-dots{right:10px;gap:9px}
}
@media (prefers-reduced-motion:reduce){
  .hm-slide.is-active{animation:none}
}


@media (prefers-reduced-motion:reduce){
  }

/* ---- slide 2: the table ---- */
.hm-table{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden}
.hm-table picture,.hm-table img{position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;object-position:center;display:block}
/* scrim so the copy stays legible over the food without dulling it */
.hm-table::after{content:"";position:absolute;inset:0;
 background:linear-gradient(to top, rgba(24,32,40,.86) 0%, rgba(24,32,40,.55) 32%,
 rgba(24,32,40,.12) 62%, rgba(24,32,40,0) 100%)}
.hm-table-copy{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;
 padding:0 clamp(4.5rem,7vw,7rem) clamp(3rem,7vh,6rem)}
.hm-table-h{font-family:var(--font-display);font-weight:500;
 font-size:clamp(34px,6vw,76px);line-height:1.02;letter-spacing:var(--display-tracking);
 text-transform:uppercase;color:var(--beige);margin:0 0 18px}
.hm-table-sub{font-size:16px;line-height:1.65;color:var(--cedar-soft);max-width:46ch;margin:0 0 28px}
.hm-table-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hm-table-actions select{min-height:46px;padding:11px 38px 11px 16px;border-radius:999px;cursor:pointer;
 border:1px solid rgba(244,239,231,.55);background-color:rgba(255,255,255,.94);color:var(--ink);
 font:500 15px/1.2 var(--font-body);appearance:none;
  min-width:0;max-width:100%;
 background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351687C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px}
@media (max-width:760px){
  .hm-table{min-height:88vh}
  .hm-table-copy{padding:0 var(--pad-x) 3.5rem;text-align:center}
  .hm-table-sub{margin-inline:auto}
  .hm-table-actions{justify-content:center}
}
@media (prefers-reduced-motion:reduce){.hm-table img{transform:none}}

/* ---- what we stand for ---- */
.hm-values{background:var(--beige-deep);padding-block:clamp(2.8rem,5vw,4.5rem)}
.hm-value-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);
 grid-template-rows:auto auto 1fr;gap:clamp(1rem,2vw,2rem);align-items:start}
.hm-value{text-align:center;display:flex;flex-direction:column;align-items:center;height:100%}
/* subgrid: each card's icon/title/text rows lock to the tallest sibling in that row across
   the whole strip, so descriptions start at the same y regardless of title length. Cards
   without subgrid support keep the flexbox + min-height approximation below as a fallback. */
@supports (grid-template-rows: subgrid) {
  .hm-value{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
}
.hm-value-ico{display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex:0 0 auto}
.hm-value-ico img{width:76px;height:76px;display:block}
.hm-value h3{font-family:var(--font-display);font-weight:500;font-size:15px;letter-spacing:.06em;
 text-transform:uppercase;color:var(--indigo);margin:0 0 8px;min-height:2.6em;
 display:flex;align-items:center;justify-content:center}
.hm-value p{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0}
@media (max-width:1000px){ .hm-value-grid{grid-template-columns:repeat(3,1fr);gap:2rem 1.2rem} }
@media (max-width:620px){ .hm-value-grid{grid-template-columns:repeat(2,1fr)}
  .hm-value-ico{width:54px;height:54px} }
@media (max-width:380px){ .hm-value-grid{grid-template-columns:1fr} }

/* ---- menu teaser ----
   A quieter companion to the values strip: generous cards, framed food photography,
   and the same deliberate typographic rhythm used by the rest of the homepage. */
.hm-menu-teaser{
  background:var(--beige);
  padding-block:clamp(3.2rem,6vw,5.4rem);
}
.hm-mt-grid{
  list-style:none;
  margin:clamp(2rem,4vw,2.8rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,2.5vw,2rem);
}
.hm-mt-card{
  min-width:0;
  background:var(--beige-deep);
  border:1px solid rgba(81,104,124,.16);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 7px 20px rgba(61,68,72,.09);
  transition:transform .25s ease,box-shadow .25s ease;
}
.hm-mt-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 26px rgba(61,68,72,.13);
}
.hm-mt-card img{
  width:100%;
  aspect-ratio:4 / 3;
  height:auto;
  object-fit:cover;
  display:block;
}
.hm-mt-body{
  padding:1.05rem 1.15rem 1.2rem;
  min-height:7.15rem;
}
.hm-mt-body strong{
  display:block;
  color:var(--indigo);
  font-family:var(--font-display);
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.055em;
  line-height:1.35;
  text-transform:uppercase;
}
.hm-mt-body p{
  margin:.45rem 0 0;
  color:var(--ink-soft);
  font-size:.84rem;
  line-height:1.55;
}
@media (max-width:1000px){
  .hm-mt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .hm-mt-grid{grid-template-columns:1fr;gap:1.25rem}
  .hm-mt-card img{aspect-ratio:16 / 10}
  .hm-mt-body{min-height:0;padding:1rem 1.1rem 1.15rem}
}
@media (prefers-reduced-motion:reduce){
  .hm-mt-card{transition:none}
}

/* ---- story / vision tabs ---- */
.hm-tabs{display:flex;gap:8px;margin:0 0 1.6rem;border-bottom:1px solid var(--beige-deep)}
.hm-tab{appearance:none;border:none;background:none;cursor:pointer;padding:10px 4px 12px;
 margin-right:22px;font:600 14px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;
 color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s ease}
.hm-tab:hover{color:var(--indigo)}
.hm-tab.is-on{color:var(--indigo);border-bottom-color:var(--terracotta)}
.hm-tab:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
.hm-panel-tab[hidden]{display:none}
.hm-panel-tab p{color:var(--ink-soft);line-height:1.72;margin:0 0 1rem;max-width:var(--measure)}

/* ---- featured in ---- */
.hm-press{background:var(--beige);padding:0 0 clamp(2.5rem,5vw,4rem)}
/* single-row horizontal scroller: 7 logos at a legible size genuinely can't fit one
   1180px-wide line (measured: needs ~1375px) without shrinking them small enough to
   undo the earlier sizing fix, so they scroll instead of wrapping to a second row. */
.hm-press-wrap{display:flex;align-items:center;gap:14px;margin:1.8rem 0 0}
.hm-press-track{list-style:none;margin:0;padding:4px 2px;display:flex;gap:1.2rem;
 overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;flex:1 1 auto;
 scrollbar-width:none}
.hm-press-track::-webkit-scrollbar{display:none}
.hm-press-item{display:flex;align-items:center;justify-content:center;height:96px;
 width:180px;flex:0 0 auto;scroll-snap-align:start;background:#FFFFFF;
 border:1px solid var(--beige-deep);border-radius:10px;padding:16px}
.hm-press-item.is-dark{background:var(--indigo)}
.hm-press-item img{max-width:100%;max-height:60px;width:auto;height:auto;display:block;
 filter:grayscale(1) opacity(.72);transition:filter .2s ease}
.hm-press-item:hover img{filter:grayscale(0) opacity(1)}
.hm-press-arrow{flex:0 0 auto;width:42px;height:42px;border-radius:50%;
 border:1px solid var(--stone);background:#FFFFFF;color:var(--indigo);font-size:17px;
 line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
 transition:background .2s ease}
.hm-press-arrow:hover{background:var(--beige-deep)}
.hm-press-arrow:disabled{opacity:.35;cursor:default}
@media (max-width:560px){ .hm-press-item{width:150px;height:82px} .hm-press-arrow{display:none} }

/* ---- testimonials ---- */
.hm-reviews{background:var(--beige-deep);padding-block:var(--pad-section)}
.hm-rev-wrap{display:flex;align-items:center;gap:14px;margin:2.2rem 0 0}
.hm-rev-track{list-style:none;margin:0;padding:4px 2px;display:flex;gap:1.2rem;
 overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;flex:1 1 auto;scrollbar-width:none}
.hm-rev-track::-webkit-scrollbar{display:none}
.hm-rev-card{flex:0 0 auto;scroll-snap-align:start;width:min(340px,80vw);background:#FFFFFF;
 border:1px solid var(--stone);border-radius:12px;padding:24px;display:flex;flex-direction:column;
 min-height:230px}
.hm-rev-top{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.hm-rev-stars{color:var(--amber);letter-spacing:.15em;font-size:14px;margin:0}
.hm-rev-g{display:flex;align-items:center;flex:0 0 auto}
.hm-rev-g svg{display:block}
.hm-rev-text{font-size:14.5px;line-height:1.62;color:var(--ink);margin:0 0 20px;flex:1 1 auto}
.hm-rev-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
 padding-top:14px;border-top:1px solid var(--beige-deep)}
.hm-rev-foot strong{display:block;font-size:13.5px;color:var(--indigo);font-weight:600}
.hm-rev-foot span{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px}
.hm-rev-foot a{color:var(--terracotta);font-size:16px;text-decoration:none;flex:0 0 auto}
.hm-rev-arrow{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--stone);
 background:#FFFFFF;color:var(--indigo);font-size:17px;line-height:1;cursor:pointer;
 display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.hm-rev-arrow:hover{background:var(--beige)}
.hm-rev-arrow:disabled{opacity:.35;cursor:default}
@media (max-width:560px){ .hm-rev-arrow{display:none} }

/* ---- franchise form: mailto fallback (shown only if mailto: needed a manual assist) ---- */
.fr3-mailto-fallback{margin-top:16px;padding:16px;background:var(--beige-deep);border-radius:8px;
 font-size:13px;line-height:1.5;color:var(--ink)}
.fr3-mailto-fallback a{color:var(--terracotta);font-weight:600}
.fr3-mailto-fallback-text{white-space:pre-wrap;background:#FFFFFF;border:1px solid var(--stone);
 border-radius:6px;padding:12px;margin:10px 0;font:12px/1.5 ui-monospace,monospace;color:var(--ink)}
.fr3-mailto-copy{min-height:38px;padding:8px 18px;border-radius:999px;border:1px solid var(--indigo);
 background:#FFFFFF;color:var(--indigo);font:600 13px/1 var(--font-body);cursor:pointer}
.fr3-mailto-copy:hover{background:var(--beige)}

/* ---- franchise page: RTL overrides ----
   Most of this page's layout is CSS Grid/Flexbox with default auto-placement, which the
   browser already mirrors correctly under dir="rtl" with no extra CSS. These two rules are
   the only genuinely physical (non-auto-mirroring) positions on the page: an accent border
   anchored to one edge, and a card anchored to one absolute corner. The CTA map pins are
   deliberately NOT mirrored here — they mark real geographic positions on an unmirrored
   image, and flipping them would put Iraq's pin where Bulgaria's should be. */
[dir="rtl"] .fr4-proof-card { border-left: none; border-right: 3px solid var(--olive); margin: 44px 0 0 -26%; }
[dir="rtl"] .fr4-float-cards { right: auto; left: 0; }

.footer-social-region{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
 color:var(--stone);margin:12px 0 4px}
.footer-social-region:first-of-type{margin-top:0}

/* ---- homepage: RTL overrides ----
   Same principle as the franchise page: most layout here is Grid/Flexbox and mirrors
   automatically under dir="rtl". These four are the genuine physical-position cases that
   don't auto-mirror. (.hm-loc-body and .hm-panel were checked and are symmetric centering —
   correctly need no override.) */
[dir="rtl"] .hm-arrow[data-prev] { left: auto; right: clamp(58px, 5vw, 84px); }
[dir="rtl"] .hm-arrow[data-next] { right: auto; left: clamp(12px, 2vw, 28px); }
[dir="rtl"] .hm-dots { right: auto; left: clamp(12px, 1.6vw, 24px); }
[dir="rtl"] .hm-tab { margin-right: 0; margin-left: 22px; }
[dir="rtl"] .hm-book-f select,
[dir="rtl"] .hm-table-actions select {
  background-position: left 13px center;
  padding-right: 16px;
  padding-left: 36px;
}