/* ============================================================
   home.css — homepage styles (index.html + en/index.html)
   ============================================================
   Extracted 2026-06-10 from the stacked inline <style> blocks that
   used to live in the <head> of both homepages. The zh and en pages
   were byte-identical, so they now share THIS one stylesheet
   (edit once → both languages update). Loaded AFTER main.css, so
   everything here intentionally overrides main.css.

   HOW TO FIND THINGS — search (Ctrl-F) for a section marker below.
   The "PREVIEW 4B vN" labels are kept as the historical paper trail
   of how the design evolved; newest tweaks are at the bottom.

   TABLE OF CONTENTS
   -----------------------------------------------------------------
   TYPOGRAPHY REFINEMENT ....... font system (DM Sans + Noto Sans TC)
   PREVIEW 4B .................. base: cream theme + split hero layout
   PREVIEW 4B v2 ............... nav left-aligned, mega title, location
   PREVIEW 4B v3 ............... bigger logo, scroll-stage about panel
   PREVIEW 4B v4 ............... desktop scroll animation (CSS vars),
                                 mobile hero (video bg + overlay)
   PREVIEW 4B v7 ............... nav scroll-state, inline EN tagline
   PREVIEW 4B v8 ............... mobile hero polish (dvh, vignette,
                                 text-shadow, entrance animation)
   PREVIEW 4B v9 ............... page-wide polish (cards, buttons,
                                 dividers, footer, section motion)
   PREVIEW 4B v10b ............. accessible focus rings
   PREVIEW 4B v10 .............. Cinzel wordmark, mobile hero redesign
   PREVIEW 4B v11 ............. typography unification, FAQ, hero fixes
   HERO FIX ................... laptop/landscape hero overlap guards
   2026-06 POLISH ............. scroll cue + reviews fallback link

   NOTE: there are also small section-scoped <style> blocks left
   inline in the <body> of index.html (next to the hero, etc.).
   Those are intentionally co-located and were not moved here.
   ============================================================ */

/* ============================================================
     TYPOGRAPHY REFINEMENT — fonts only (colours left as-is)
     ============================================================
     Refines the font system into a mature artisan Italian pizzeria
     feel: editorial italic serifs for English/Italian dish names,
     Noto Serif TC for Chinese editorial headings, DM Sans for clean
     UI. The hero wordmark `.hero-title .latin` is intentionally NOT
     touched. No colour values are changed.
     ============================================================ */
  /* Editorial Italian serif (used for English/Italian dish names and italic flourishes) */
  :root { --serif-editorial: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif; }

  /* Small editorial labels — refined letter-spacing */
  .lbl { font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-weight: 500; letter-spacing: 0.28em; }
  .lbl-zh { font-family: 'Noto Serif TC', 'PingFang TC', serif; font-weight: 400; letter-spacing: 0.18em; }

  /* Chinese editorial headings — Noto Serif TC, calmer weight */
  .h-zh, .about-h2, .dishes-h2, .beyond-h2, .location-h2, .process-title {
    font-family: 'Noto Serif TC', 'PingFang TC', Georgia, serif;
    font-weight: 400;
    letter-spacing: 0.005em;
  }
  .process-title .accent { font-family: var(--serif-editorial); font-style: italic; font-weight: 500; }

  /* English secondary headings — italic editorial serif */
  .h-en, .location-en {
    font-family: var(--serif-editorial);
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.005em;
  }

  /* Buttons — refined tracking and weight */
  .btn { font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-weight: 500; letter-spacing: 0.16em; }
  .btn-link { font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-weight: 500; letter-spacing: 0.18em; }

  /* Nav — refined tracking and weight + equal-width buttons */
  .nav-link {
    font-family: 'DM Sans', 'Noto Sans TC', sans-serif;
    font-weight: 500;
    letter-spacing: 0.16em;
    min-width: 152px;
    justify-content: center;
  }
  /* Reset min-width on mobile so the 3 buttons fit on small screens */
  @media (max-width: 860px) {
    .nav-link { min-width: 0 !important; }
  }

  /* Hero tagline now styled fully in main.css (sans, no italic, mobile-readability) */

  /* Process section — editorial numbering & subheads */
  .process-num { font-family: var(--serif-editorial); font-style: italic; font-weight: 500; }
  .process-card-content h3 {
    font-family: 'Noto Serif TC', 'PingFang TC', Georgia, serif;
    font-weight: 500;
    letter-spacing: 0.005em;
  }
  .step-en { font-family: var(--serif-editorial); font-style: italic; font-weight: 500; letter-spacing: 0.04em; }

  /* Dish cards — editorial menu hierarchy */
  .dish-card h3, .dish-card .h-zh {
    font-family: 'Noto Serif TC', 'PingFang TC', Georgia, serif;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .dish-card-en { font-family: var(--serif-editorial); font-style: italic; font-weight: 500; letter-spacing: 0.01em; }
  .dish-card-sub { font-family: var(--sans-zh); font-weight: 400; letter-spacing: 0.02em; }
  .dish-card-badge { font-family: 'DM Sans', sans-serif; font-weight: 600; letter-spacing: 0.18em; }

  /* Reserve bar — italic editorial English */
  .reserve-bar h2 .en { font-family: var(--serif-editorial); font-style: italic; font-weight: 500; }

  /* Location info labels — refined sans tracking */
  .location-info-label { font-family: 'DM Sans', sans-serif; font-weight: 500; letter-spacing: 0.22em; }

  /* Body paragraphs — system sans + Regular for mobile readability */
  .about-body, .process-intro p, .beyond-body, .location-desc {
    font-family: var(--sans-zh);
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.005em;
  }

  /* Process card body — sans + heavier weight for dark-bg legibility */
  .process-card-content .lead { font-family: var(--sans-zh); font-weight: 500; }
  .process-card-content .body { font-family: var(--sans-zh); font-weight: 400; line-height: 1.8; }

/* ── PREVIEW 4B — Modern Minimal (sans-serif 全面、暗色 CTA、低裝飾) ── */
  :root { --off-white: #F5F2EB; --off-white-soft: #F9F6F0; --warm-charcoal: #1A1714; }
  body { background: var(--off-white); }
  .about-section, .process-section, .dishes-section, .beyond-section, .reviews-section, .location-section { background: var(--off-white) !important; }
  .process-section, .process-section h2, .process-section h3, .process-section p, .process-section .lbl, .process-section .step-en, .process-section .lead, .process-section .body { color: var(--warm-charcoal) !important; }
  .process-card { background: rgba(255,255,255,0.5) !important; border: 1px solid rgba(0,0,0,0.06) !important; }
  .arch-divider { display: none !important; }

  /* Sans-serif system-wide */
  body, .about-body, .hero-tagline p, .process-card .body, .process-intro p, .about-h2, .dishes-h2, .beyond-h2, .location-h2, .process-title, .h-zh { font-family: 'DM Sans', 'Noto Sans TC', system-ui, sans-serif !important; }
  .about-h2, .dishes-h2, .beyond-h2, .location-h2, .process-title { font-weight: 400 !important; letter-spacing: -0.01em; }
  .process-title .accent { font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; font-weight: 500 !important; }

  /* ── Split hero ── */
  .hero-section.hero-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: var(--off-white); position: relative; }
  .hero-left { background: var(--off-white); display: flex; align-items: center; justify-content: center; padding: 80px 56px; }
  .hero-left .hero-content { position: static !important; background: none !important; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 32px; text-align: left; align-items: flex-start; }
  /* (.hero-logo / .hero-title rules removed in v10b — those classes are not
     present in the 4B markup; the title now uses .hero-mega instead.) */
  .hero-left .hero-tagline { color: rgba(26,23,20,0.72); max-width: 460px; }
  .hero-left .hero-tagline p { margin: 0 0 8px; font-family: 'Noto Sans TC', sans-serif !important; font-weight: 300 !important; font-size: 15px; line-height: 1.75; color: rgba(26,23,20,0.72) !important; text-shadow: none !important; }
  .hero-left .hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; justify-content: flex-start; }
  /* Dark CTA replaces yellow */
  .hero-left .btn-yellow { background: var(--warm-charcoal) !important; color: #fff !important; border: 1px solid var(--warm-charcoal) !important; }
  .hero-left .btn-yellow:hover { background: #000 !important; color: #fff !important; }
  .hero-left .btn-ghost { border-color: var(--warm-charcoal) !important; color: var(--warm-charcoal) !important; background: transparent !important; }
  .hero-left .btn-ghost:hover { background: var(--warm-charcoal) !important; color: #fff !important; }

  .hero-right { position: relative; overflow: hidden; background: #000; min-height: 100vh; }
  .hero-right .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) contrast(1.05) brightness(1.02); }
  .hero-right-text { position: absolute; bottom: 64px; left: 56px; right: 56px; color: #fff; z-index: 2; }
  .hero-right-text p { margin: 0; font-family: 'DM Sans', sans-serif; font-style: normal; font-weight: 300; font-size: clamp(28px, 3vw, 40px); line-height: 1.3; text-shadow: 0 2px 18px rgba(0,0,0,0.65), 0 1px 4px rgba(0,0,0,0.5); }

  @media (max-width: 768px) {
    .hero-section.hero-split { grid-template-columns: 1fr; grid-template-rows: 50vh auto; min-height: auto; }
    .hero-right { min-height: 50vh; order: 1; }
    .hero-left { order: 2; padding: 48px 24px; }
    .hero-right-text { bottom: 24px; left: 24px; right: 24px; }
    .hero-right-text p { font-size: 22px; }
  }

/* ── PREVIEW 4B v2 — feedback adjustments (nav left + mega title + location + darker) ── */
  /* Make .hero-content children visible immediately */
  .hero-left .hero-content > * { opacity: 1 !important; }

  /* Darker text */
  .hero-left .hero-tagline p { color: #0A0808 !important; }

  /* ── Nav v2 ── */
  .nav-v2 { background: transparent !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; }
  .nav-v2 .nav-inner { display: flex !important; align-items: center; justify-content: space-between; padding: 14px 32px; gap: 24px; max-width: none; }
  .nav-v2 .nav-logo-link { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
  .nav-v2 .nav-logo-img { height: 36px; width: auto; }
  .nav-v2 .nav-links { display: flex; gap: 8px; flex: 1; justify-content: flex-start; padding-left: 24px; }
  .nav-v2 .nav-pill { display: inline-flex; flex-direction: column; align-items: center; padding: 7px 18px; border: 1px solid rgba(0,0,0,0.2); border-radius: 999px; background: rgba(255,255,255,0.55); color: #0A0808; text-decoration: none; font-family: 'DM Sans', sans-serif; font-size: 13px; letter-spacing: 0.06em; line-height: 1.2; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
  .nav-v2 .nav-pill .en { display: block; font-family: 'DM Sans', sans-serif; font-size: 8px; letter-spacing: 0.22em; opacity: 0.55; margin-top: 2px; font-weight: 500; }
  .nav-v2 .nav-pill.active, .nav-v2 .nav-pill:hover { background: #0A0808; color: #fff; border-color: #0A0808; }
  .nav-v2 .nav-pill::before, .nav-v2 .nav-pill::after { display: none !important; }
  .nav-v2 .nav-lang-right { display: flex; align-items: center; flex-shrink: 0; }
  .nav-v2 .nav-lang { font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: 0.22em; color: #0A0808; }
  .nav-v2 .nav-lang a { color: inherit; text-decoration: none; opacity: 0.55; }
  .nav-v2 .nav-lang a.active { opacity: 1; }
  .nav-v2 .nav-lang .sep { margin: 0 4px; opacity: 0.35; }

  /* ── Mega title across panels (4B desktop base styles) ──
     Note: .copy / .copy-base / .copy-overlay and .latin / .zh class rules
     were removed in v10b — they referenced an earlier markup that used
     <span class="copy">/<.latin>/<.zh>. Current markup uses .mega-line /
     .mega-side instead (styled in v4 round 5 + v10). */
  .hero-section.hero-split { overflow: hidden; }
  .hero-mega { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 4; margin: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; }

  /* Push left content to bottom */
  .hero-left { flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important; padding-top: 120px !important; padding-bottom: 88px !important; }
  .hero-left .hero-content { align-self: flex-start !important; align-items: flex-start !important; }

  /* Bottom-left location link */
  .hero-location { position: absolute; bottom: 32px; left: 56px; z-index: 5; color: #0A0808; text-decoration: none; display: block; transition: opacity 0.2s ease; }
  .hero-location:hover { opacity: 0.6; }
  .hero-location .loc-label { display: block; font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.55; font-weight: 500; }
  .hero-location .loc-place { display: block; font-family: 'DM Sans', sans-serif; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-top: 4px; }

  /* Right text — DM Sans, no italic (4B) */
  .hero-right-text p { font-family: 'DM Sans', sans-serif !important; font-style: normal !important; font-weight: 400 !important; }
  /* (Removed old .hero-right-text em/i serif rules — the right-panel tagline
     has no <em>/<i> in the 4B markup.) */

  @media (max-width: 768px) {
    .nav-v2 .nav-inner { flex-direction: column; padding: 12px 16px; gap: 10px; }
    .nav-v2 .nav-links { padding-left: 0; justify-content: center; flex-wrap: wrap; gap: 6px; }
    .nav-v2 .nav-pill { padding: 5px 14px; font-size: 12px; }
    .nav-v2 .nav-pill .en { font-size: 7px; }

    .hero-section.hero-split { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: auto; overflow: visible; }
    .hero-mega { position: static; inset: auto; padding: 28px 20px 8px; }
    /* .copy / .copy-base / .copy-overlay / .latin / .zh mobile overrides removed
       in v10b — classes don't exist in markup. Mobile mega title now styled
       in v8 + v10. */

    .hero-left { grid-row: 2; padding: 24px 24px 24px !important; min-height: auto; justify-content: flex-start !important; order: 2; }
    .hero-right { grid-row: 3; min-height: 50vh; order: 3; }
    .hero-location { position: static; bottom: auto; left: auto; margin-top: 24px; padding: 0; }
  }

/* ── PREVIEW 4B v3 — feedback round 2 (logo bigger, nav borderless, scroll stage, etc) ── */
  /* Hide original about section (its content lives in hero scroll overlay now) */
  .about-section { display: none !important; }
  @media (max-width: 768px) { .about-section { display: block !important; } }

  /* Logo 3-4x bigger */
  .nav-v2 .nav-logo-img { height: 110px !important; }
  @media (max-width: 768px) { .nav-v2 .nav-logo-img { height: 56px !important; } }

  /* Nav: borderless, even-spaced pills, hover/active fills black */
  .nav-v2 .nav-pill {
    border: 1px solid transparent !important;
    background: transparent !important;
    padding: 9px 22px !important;
  }
  .nav-v2 .nav-pill.active,
  .nav-v2 .nav-pill:hover {
    background: #0A0808 !important;
    color: #fff !important;
    border-color: #0A0808 !important;
  }
  .nav-v2 .nav-links {
    gap: 0 !important;
    justify-content: space-around !important;
    padding: 0 32px !important;
  }
  @media (max-width: 768px) {
    .nav-v2 .nav-inner { padding: 8px 12px !important; gap: 4px !important; }
    .nav-v2 .nav-links { padding: 0 8px !important; }
    .nav-v2 .nav-pill { padding: 5px 12px !important; }
    /* Make sure hero content does not slide behind sticky nav on mobile */
    .hero-mega { padding-top: 40px !important; }
  }

  /* Google Maps icon + text layout */
  .hero-location {
    display: flex !important;
    align-items: center;
    gap: 14px;
    flex-direction: row !important;
  }
  .hero-location .loc-icon { flex-shrink: 0; color: #0A0808; }
  .hero-location .loc-text { display: flex; flex-direction: column; }

  /* Switch hero layout to flex (so scroll animation can morph panel widths) */
  .hero-section.hero-split {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
  }
  .hero-left,
  .hero-right {
    flex: 1 1 0 !important;
    min-width: 0;
    width: auto !important;
  }

  /* About panel — initially zero-width, grows during scroll phase 2 */
  .hero-about {
    flex: 0 1 0;
    min-width: 0;
    overflow: hidden;
    background: var(--off-white-soft, #F9F6F0);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 56px;
  }
  .hero-about-inner { max-width: 480px; }
  .hero-about-inner .lbl {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    color: #0A0808;
    opacity: 0.6;
    display: block;
    margin-bottom: 18px;
  }
  .hero-about-inner .about-h2-scroll {
    font-family: 'DM Sans', 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: clamp(24px, 2.2vw, 36px);
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 0 0 24px;
    color: #0A0808;
  }
  .hero-about-inner .about-body-scroll {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 15px;
    line-height: 1.85;
    color: rgba(10,8,8,0.78);
    margin: 0 0 14px;
  }

  /* Mobile: stack hero vertically, hide about overlay (original about-section shows instead) */
  @media (max-width: 768px) {
    .hero-section.hero-split { flex-direction: column !important; overflow: visible; }
    .hero-mega { order: 1; }
    .hero-left { order: 2; flex: 1 1 auto !important; }
    .hero-right { order: 3; flex: 1 1 auto !important; min-height: 50vh; }
    .hero-about { display: none !important; }
  }

/* ── PREVIEW 4B v4 — feedback round 3 (nav clean / mega split / abs scroll layout) ── */
  /* 1. Nav height reduced */
  .nav-v2 .nav-inner { padding: 4px 32px !important; min-height: 0 !important; }

  /* 2 + 7. Nav buttons grouped on LEFT (logo + links left-aligned, lang far right) */
  .nav-v2 .nav-logo-link { margin-right: 28px !important; }
  .nav-v2 .nav-links {
    gap: 4px !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
  .nav-v2 .nav-lang-right { margin-left: auto !important; }

  /* 3. Active state has NO black box (only :hover fills black) */
  .nav-v2 .nav-pill.active {
    background: transparent !important;
    color: #0A0808 !important;
    border-color: transparent !important;
  }
  .nav-v2 .nav-pill:hover {
    background: #0A0808 !important;
    color: #fff !important;
    border-color: #0A0808 !important;
  }

  /* 4 + 6. v5 FIX — CSS variables for scroll animation (avoids !important conflicts with GSAP) */
  .hero-section.hero-split {
    display: block !important;
    position: relative;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    /* Animatable variables (GSAP changes these on scroll) */
    --hl-w: 50%;
    --hl-opacity: 1;
    --hl-pad-h: 56px;
    --hr-l: 50%;
    --hr-w: 50%;
    --ha-l: 100%;
    --ha-w: 0%;
    --hm-opacity: 1;
    --hloc-opacity: 1;
    --hrt-scale: 1;
    --hrt-opacity: 1;
    --hai-opacity: 0;
    --hai-x: 24px;
    --scue-opacity: 1;
  }
  .hero-left, .hero-right, .hero-about {
    position: absolute !important;
    top: 0;
    bottom: 0;
    height: 100%;
    flex: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .hero-left {
    left: 0 !important;
    width: var(--hl-w) !important;
    opacity: var(--hl-opacity);
    padding-left: var(--hl-pad-h) !important;
    padding-right: var(--hl-pad-h) !important;
  }
  .hero-right {
    left: var(--hr-l) !important;
    width: var(--hr-w) !important;
  }
  .hero-about {
    left: var(--ha-l) !important;
    width: var(--ha-w) !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .hero-about-inner {
    padding: 80px 56px;
    width: 50vw;
    box-sizing: border-box;
    opacity: var(--hai-opacity);
    transform: translateX(var(--hai-x));
  }
  /* Mega/location/right-text opacity controlled via variables */
  .hero-mega { opacity: var(--hm-opacity); }
  .hero-location { opacity: var(--hloc-opacity); }
  .hero-right-text p { transform: scale(var(--hrt-scale)); opacity: var(--hrt-opacity); transform-origin: center bottom; }

  /* About text RESTORED to original size (was shrunk too small) */
  .hero-about-inner .about-h2-scroll { font-size: clamp(22px, 2vw, 32px) !important; line-height: 1.4 !important; margin: 0 0 18px !important; }
  .hero-about-inner .about-body-scroll { font-size: 15px !important; line-height: 1.85 !important; margin: 0 0 12px !important; }
  .hero-about-inner { padding: 56px 40px !important; width: 34vw !important; }
  .hero-about-inner .lbl { margin-bottom: 14px !important; font-size: 11px !important; }

  /* ── MOBILE: full-screen video bg, ALL text white + shadow overlay ── */
  @media (max-width: 768px) {
    /* Smaller logo + tighter nav */
    .nav-v2 .nav-logo-img { height: 44px !important; }
    .nav-v2 .nav-inner { padding: 6px 12px !important; gap: 6px !important; }

    /* Hero is full-screen video with overlay content (traditional dramatic hero) */
    .hero-section.hero-split {
      display: flex !important;
      flex-direction: column !important;
      position: relative !important;
      height: 100vh !important;
      min-height: 600px !important;
      overflow: hidden !important;
      padding: 130px 24px 100px !important;
      /* Reset CSS variables in case GSAP set anything */
      --hl-w: 100% !important;
      --hl-opacity: 1 !important;
      --hl-pad-h: 24px !important;
      --hr-l: auto !important;
      --hr-w: 100% !important;
      --ha-l: auto !important;
      --ha-w: 0% !important;
      --hm-opacity: 1 !important;
      --hloc-opacity: 1 !important;
      --hrt-scale: 1 !important;
      --hrt-opacity: 1 !important;
      --hai-opacity: 1 !important;
      --hai-x: 0px !important;
    }

    /* Video covers entire hero (background) */
    .hero-right {
      position: absolute !important;
      inset: 0 !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 0 !important;
      min-height: 0 !important;
      order: 0 !important;
    }

    /* Mega title at top of overlay — white + shadow */
    .hero-mega {
      position: static !important;
      flex: 0 0 auto !important;
      z-index: 2 !important;
      inset: auto !important;
      padding: 0 !important;
      margin: 0 0 28px !important;
      text-align: center !important;
      align-items: center !important;
      order: 1 !important;
    }
    .mega-line { display: block !important; text-align: center !important; width: auto !important; margin: 0 !important; }
    .mega-side { display: inline !important; padding: 0 !important; flex: none !important; }
    .mega-side + .mega-side { margin-left: 0.3em; }
    .mega-side-left, .mega-side-right {
      color: #fff !important;
      text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.4) !important;
    }
    .mega-line-latin .mega-side { font-size: clamp(30px, 8vw, 44px) !important; line-height: 1.1 !important; }
    .mega-line-zh .mega-side { font-size: clamp(16px, 4.2vw, 22px) !important; line-height: 1.3 !important; }

    /* Hero-left fills remaining vertical space, centers tagline + buttons */
    .hero-left {
      position: static !important;
      flex: 1 1 auto !important;
      z-index: 2 !important;
      background: transparent !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      order: 2 !important;
    }
    .hero-left .hero-content {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 22px !important;
      text-align: center !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    .hero-left .hero-tagline {
      text-align: center !important;
      max-width: 100% !important;
    }
    .hero-left .hero-tagline p {
      color: #fff !important;
      text-shadow: 0 2px 8px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.4) !important;
      font-size: 14px !important;
      line-height: 1.7 !important;
      margin: 0 0 8px !important;
    }
    .hero-left .hero-buttons {
      display: flex !important;
      gap: 12px !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
    }
    /* Primary button: white bg + black text */
    .hero-left .btn-yellow {
      background: #fff !important;
      color: #0A0808 !important;
      border: 1px solid #fff !important;
    }
    /* Secondary button: outlined white */
    .hero-left .btn-ghost {
      background: transparent !important;
      color: #fff !important;
      border: 1px solid #fff !important;
    }

    /* English tagline at bottom of overlay */
    .hero-right-text {
      position: absolute !important;
      bottom: 56px !important;
      top: auto !important;
      left: 24px !important;
      right: 24px !important;
      z-index: 2 !important;
      text-align: center !important;
    }
    .hero-right-text p {
      color: #fff !important;
      text-shadow: 0 2px 8px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.4) !important;
      font-size: 15px !important;
      font-style: normal !important;
      font-family: 'DM Sans', sans-serif !important;
      font-weight: 400 !important;
      margin: 0 !important;
    }

    /* Location: absolute bottom-left, white */
    .hero-location {
      position: absolute !important;
      bottom: 16px !important;
      left: 24px !important;
      right: auto !important;
      top: auto !important;
      margin: 0 !important;
      z-index: 3 !important;
      padding: 0 !important;
    }
    .hero-location .loc-label,
    .hero-location .loc-place {
      color: #fff !important;
      text-shadow: 0 2px 8px rgba(0,0,0,0.65) !important;
    }
    .hero-location .loc-icon { color: #fff !important; }

    /* Hide scroll-stage about + original about-section image */
    .hero-about { display: none !important; }
    .about-grid > .fu:first-child { display: none !important; }
  }

  /* Nav INVERSION when video covers nav area (logo & buttons turn white) */
  .nav-v2 .nav-logo-img { transition: filter 0.3s ease; }
  .nav-v2 .nav-pill { transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease; }
  .nav-v2.nav-inverted .nav-logo-img { filter: invert(1) brightness(2); }
  .nav-v2.nav-inverted .nav-pill { color: #fff !important; }
  .nav-v2.nav-inverted .nav-pill.active { color: #fff !important; }
  .nav-v2.nav-inverted .nav-pill:hover { background: #fff !important; color: #0A0808 !important; border-color: #fff !important; }
  /* Lang switch stays dark (it sits over off-white about panel at the end) */

  /* 5. Mega title — proper word-boundary split (Pizza | Persé. and 披薩 | 本質) */
  .hero-mega {
    align-items: stretch !important;
    flex-direction: column !important;
    justify-content: center;
    gap: 14px;
    inset: 0 !important;
    padding: 0 !important;
    display: flex !important;
  }
  .mega-line {
    display: flex;
    width: 100%;
    align-items: baseline;
    margin: 0;
  }
  .mega-side {
    flex: 1 1 50%;
    display: flex;
    align-items: baseline;
    white-space: nowrap;
  }
  .mega-side-left {
    justify-content: flex-end;
    padding-right: 0.18em;
    color: #0A0808;
  }
  .mega-side-right {
    justify-content: flex-start;
    padding-left: 0.18em;
    color: #fff;
    text-shadow: 0 4px 28px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
  }
  .mega-line-latin .mega-side {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(56px, 9vw, 132px);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .mega-line-zh .mega-side {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: clamp(22px, 3.2vw, 40px);
    line-height: 1;
    letter-spacing: 0.06em;
  }

/* ── PREVIEW 4B v7 — round 6 (mega as section title + inline english + nav scroll-state) ── */
  /* Mobile-only inline english tagline — hidden by default (desktop) */
  .hero-tagline-mobile-en { display: none; }

  /* ── NAV scroll-state: turns dark when scrolled past hero ── */
  .nav-v2.nav-scrolled {
    background: rgba(245, 242, 235, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 1px 12px rgba(0,0,0,0.04) !important;
  }
  .nav-v2.nav-scrolled .nav-logo-img { filter: none !important; }
  .nav-v2.nav-scrolled .nav-pill { color: #0A0808 !important; text-shadow: none !important; }
  .nav-v2.nav-scrolled .nav-pill.active { color: #0A0808 !important; }
  .nav-v2.nav-scrolled .nav-pill:hover { background: #0A0808 !important; color: #fff !important; text-shadow: none !important; }
  .nav-v2.nav-scrolled .nav-pill .en { opacity: 0.6 !important; }
  .nav-v2.nav-scrolled .nav-lang { color: #0A0808 !important; text-shadow: none !important; }
  .nav-v2.nav-scrolled .nav-lang a { color: #0A0808 !important; }

  @media (max-width: 768px) {
    /* Hero is flex column; video bg + content centered as a group */
    .hero-section.hero-split {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      position: relative !important;
      height: 100vh !important;
      min-height: 100vh !important;
      overflow: hidden !important;
      padding: 110px 24px 80px !important;
    }
    /* Video as full-bleed background (z=0, behind everything) */
    .hero-section.hero-split .hero-right {
      position: absolute !important;
      inset: 0 !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 0 !important;
    }
    /* Mega ABOVE video (position: relative so z-index works) */
    .hero-section.hero-split .hero-mega {
      position: relative !important;
      z-index: 2 !important;
      flex: 0 0 auto !important;
      gap: 4px !important;
      margin: 0 0 14px !important;
      padding: 0 !important;
      inset: auto !important;
      width: 100% !important;
    }
    .mega-line-latin .mega-side {
      font-size: clamp(28px, 9vw, 56px) !important;
      line-height: 1.1 !important;
      color: #fff !important;
      text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.4) !important;
    }
    .mega-line-zh .mega-side {
      font-size: clamp(16px, 4.5vw, 28px) !important;
      line-height: 1.3 !important;
      color: #fff !important;
      text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.4) !important;
    }

    /* Hero-left ABOVE video (position: relative so z-index works) */
    .hero-section.hero-split .hero-left {
      position: relative !important;
      z-index: 2 !important;
      flex: 0 0 auto !important;
      display: block !important;
      padding: 0 !important;
      background: transparent !important;
      width: 100% !important;
      height: auto !important;
    }
    /* Equal 14px gaps between tagline / english / buttons */
    .hero-section.hero-split .hero-left .hero-content {
      position: static !important;
      inset: auto !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      gap: 14px !important;
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
    }
    .hero-section.hero-split .hero-left .hero-tagline p { margin: 0 0 4px !important; }

    /* Hide bottom-positioned english (replaced by inline mobile version) */
    .hero-right-text { display: none !important; }
    /* INLINE english tagline between tagline and buttons */
    .hero-tagline-mobile-en {
      display: block !important;
      color: #fff !important;
      text-shadow: 0 2px 8px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.4) !important;
      font-size: 15px !important;
      font-family: 'DM Sans', sans-serif !important;
      font-weight: 400 !important;
      text-align: center !important;
      margin: 0 !important;
      font-style: normal !important;
      line-height: 1.5 !important;
    }

    .hero-location { bottom: 16px !important; }

    /* NAV on mobile (over video) — white with shadow */
    .nav-v2 { border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
    .nav-v2 .nav-logo-img { filter: invert(1) brightness(2) !important; }
    .nav-v2 .nav-pill { color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important; }
    .nav-v2 .nav-pill.active { color: #fff !important; }
    .nav-v2 .nav-pill:hover { background: #fff !important; color: #0A0808 !important; text-shadow: none !important; }
    .nav-v2 .nav-pill .en { opacity: 0.8 !important; }
    .nav-v2 .nav-lang { color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important; }
    .nav-v2 .nav-lang a { color: #fff !important; }
  }

/* ── PREVIEW 4B v8 — mobile hero fix: dvh height, symmetric centering, vignette overlay, ironclad text contrast, Jakub-style entrance ── */
  @media (max-width: 768px) {
    /* ── Layout: dynamic viewport height + symmetric vertical breathing ──
       Root cause #1: 100vh on mobile is the LARGE viewport (URL bar collapsed).
       URL bar visible → bottom of section gets cropped. Use dvh (dynamic). */
    .hero-section.hero-split {
      height: 100dvh !important;
      min-height: 100dvh !important;
      /* Symmetric padding so flex-center actually lands content in the visible middle */
      padding: 132px 24px 96px !important;
      /* Make .hero-section the containing block for position: fixed descendants on mobile */
      transform: translateZ(0);
      /* Defensive: belt-and-suspenders containment */
      contain: paint;
    }

    /* ── Vignette overlay: guarantees white text reads on ANY video frame ──
       A vertical gradient that darkens the top + bottom while keeping the
       middle mostly clean — text in the middle reads, but the photographic
       quality of the pizza video stays intact. */
    .hero-section.hero-split::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(180deg,
          rgba(0,0,0,0.55) 0%,
          rgba(0,0,0,0.30) 18%,
          rgba(0,0,0,0.18) 38%,
          rgba(0,0,0,0.22) 58%,
          rgba(0,0,0,0.55) 88%,
          rgba(0,0,0,0.70) 100%);
    }
    /* Lift all content above the vignette */
    .hero-section.hero-split > .hero-mega,
    .hero-section.hero-split > .hero-left,
    .hero-section.hero-split > .hero-location { z-index: 2 !important; }

    /* ── Mega title: ironclad legibility + better mobile sizing ──
       Triple-layer text-shadow (close + mid + atmospheric) makes the
       letterforms readable on bright pizza frames without looking heavy. */
    .mega-line-latin .mega-side {
      font-size: clamp(36px, 11vw, 64px) !important;
      letter-spacing: -0.02em !important;
      text-shadow:
        0 1px 2px rgba(0,0,0,0.6),
        0 4px 16px rgba(0,0,0,0.55),
        0 0 32px rgba(0,0,0,0.35) !important;
    }
    .mega-line-zh .mega-side {
      font-size: clamp(17px, 5vw, 26px) !important;
      letter-spacing: 0.08em !important;
      text-shadow:
        0 1px 2px rgba(0,0,0,0.6),
        0 3px 12px rgba(0,0,0,0.5),
        0 0 24px rgba(0,0,0,0.35) !important;
    }
    /* Tighter rhythm between latin & zh lines (Jakub: subtle, considered) */
    .hero-section.hero-split .hero-mega { gap: 10px !important; margin: 0 0 22px !important; }

    /* ── Tagline + english tagline: same shadow recipe ── */
    .hero-section.hero-split .hero-left .hero-tagline p {
      text-shadow:
        0 1px 2px rgba(0,0,0,0.55),
        0 3px 12px rgba(0,0,0,0.45) !important;
      font-size: 14px !important;
      line-height: 1.7 !important;
      letter-spacing: 0.01em;
    }
    .hero-tagline-mobile-en {
      text-shadow:
        0 1px 2px rgba(0,0,0,0.55),
        0 2px 10px rgba(0,0,0,0.4) !important;
      letter-spacing: 0.06em !important;
      opacity: 0.92;
    }

    /* ── Buttons: clear primary/secondary, generous tap target, subtle press feedback ── */
    .hero-section.hero-split .hero-left .hero-buttons { margin-top: 4px !important; }
    .hero-section.hero-split .hero-left .btn {
      padding: 13px 22px !important;
      font-size: 12px !important;
      letter-spacing: 0.18em !important;
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                  background 0.25s ease,
                  color 0.25s ease,
                  border-color 0.25s ease;
    }
    .hero-section.hero-split .hero-left .btn:active { transform: translateY(1px) scale(0.985); }
    .hero-section.hero-split .hero-left .btn-yellow {
      box-shadow: 0 8px 28px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.18);
    }

    /* ── Location pin: anchor to SECTION bottom.
       Uses position: absolute against .hero-section (which is position: relative).
       Earlier we used position: fixed + transform containing-block trick, but
       older Safari/Android Chrome handle that inconsistently. absolute is bulletproof. */
    .hero-section.hero-split > .hero-location {
      position: absolute !important;
      bottom: max(20px, env(safe-area-inset-bottom)) !important;
      left: 24px !important;
      right: auto !important;
      top: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      z-index: 4 !important;
    }
    .hero-section.hero-split > .hero-location .loc-icon { width: 28px !important; height: 28px !important; }
    .hero-section.hero-split > .hero-location .loc-label {
      font-size: 9px !important;
      letter-spacing: 0.3em !important;
      opacity: 0.78;
    }
    .hero-section.hero-split > .hero-location .loc-place { font-size: 13px !important; letter-spacing: 0.14em !important; }

    /* ── Motion: Jakub-style fade-up with blur — restrained, sequenced ──
       Skipped entirely under prefers-reduced-motion (see below). */
    @keyframes pp-rise {
      from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
      to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
    }
    .hero-section.hero-split > .hero-mega,
    .hero-section.hero-split > .hero-left .hero-tagline,
    .hero-section.hero-split > .hero-left .hero-tagline-mobile-en,
    .hero-section.hero-split > .hero-left .hero-buttons,
    .hero-section.hero-split > .hero-location {
      animation: pp-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
      /* `will-change` is intentionally NOT set — these elements animate once on
         page load. Leaving will-change on permanently keeps a GPU layer
         allocated forever. The browser optimizes one-shot animations fine. */
    }
    .hero-section.hero-split > .hero-mega                                 { animation-delay: 0.10s; }
    .hero-section.hero-split > .hero-left .hero-tagline                  { animation-delay: 0.28s; }
    .hero-section.hero-split > .hero-left .hero-tagline-mobile-en        { animation-delay: 0.40s; }
    .hero-section.hero-split > .hero-left .hero-buttons                  { animation-delay: 0.52s; }
    .hero-section.hero-split > .hero-location                            { animation-delay: 0.70s; }
  }

  /* Accessibility: honor reduced-motion (no fade-up, just instant visibility) */
  @media (prefers-reduced-motion: reduce) {
    .hero-section.hero-split > .hero-mega,
    .hero-section.hero-split > .hero-left .hero-tagline,
    .hero-section.hero-split > .hero-left .hero-tagline-mobile-en,
    .hero-section.hero-split > .hero-left .hero-buttons,
    .hero-section.hero-split > .hero-location {
      animation: none !important;
      opacity: 1 !important;
      filter: none !important;
      transform: none !important;
    }
  }

/* ── PREVIEW 4B v9 — page-wide polish (impeccable + motion principles) ────────
     Brand register: editorial minimal, restrained color, warm neutrals.
     Motion register: Jakub primary (subtle production polish), Emil secondary (restraint).
     All animations honor prefers-reduced-motion at the bottom of this block. ── */
  /* ────────────────────────────────────────────────────────────────────
     1. BEYOND SECTION — text was white-on-dark in main.css; 4B inverted
        the background to cream but never re-tinted the text → invisible.
     ──────────────────────────────────────────────────────────────────── */
  .beyond-section { color: var(--warm-charcoal) !important; }
  .beyond-section .lbl { color: rgba(10, 8, 8, 0.62) !important; }
  .beyond-h2 { color: var(--warm-charcoal) !important; }
  .beyond-body { color: rgba(10, 8, 8, 0.85) !important; }
  .beyond-body.lead { color: rgba(10, 8, 8, 0.95) !important; font-weight: 500 !important; }
  .beyond-body.detail { color: rgba(10, 8, 8, 0.7) !important; }
  /* btn-ghost inside beyond was white-on-dark — flip to dark-on-cream */
  .beyond-section .btn-ghost {
    color: var(--warm-charcoal) !important;
    border-color: var(--warm-charcoal) !important;
    background: transparent !important;
  }
  .beyond-section .btn-ghost:hover {
    background: var(--warm-charcoal) !important;
    color: #fff !important;
    border-color: var(--warm-charcoal) !important;
  }
  /* (Inline-style attribute selector removed in v10b — markup was cleaned up to use plain .lbl) */

  /* ────────────────────────────────────────────────────────────────────
     2. DISH CARD BADGES — yellow badge conflicted with 4B minimal direction.
        Replace with monochrome ink-on-cream chip; editorial, not Instagram.
     ──────────────────────────────────────────────────────────────────── */
  .dish-card-badge {
    background: rgba(10, 8, 8, 0.88) !important;
    color: #F5F2EB !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 9.5px !important;
    letter-spacing: 0.22em !important;
    padding: 6px 10px !important;
    top: 12px !important;
    left: 12px !important;
    border-radius: 1px;
    /* very subtle elevation so the chip reads against any photo */
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  }

  /* ────────────────────────────────────────────────────────────────────
     3. PROCESS CARDS — lighten shadow + remove the yellow accent number.
        Original card was designed for dark bg; on cream it looks heavy.
     ──────────────────────────────────────────────────────────────────── */
  .process-card {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(10, 8, 8, 0.08) !important;
    box-shadow:
      0 1px 2px rgba(10, 8, 8, 0.04),
      0 8px 24px rgba(10, 8, 8, 0.06) !important;
    border-radius: 4px !important;
    transition:
      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.35s ease,
      opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .process-card:hover {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow:
      0 1px 2px rgba(10, 8, 8, 0.05),
      0 14px 36px rgba(10, 8, 8, 0.09) !important;
    transform: translateY(-2px);
  }
  /* Yellow → warm-charcoal italic for editorial weight (no decorative gold) */
  .process-card .process-num {
    color: rgba(10, 8, 8, 0.42) !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: clamp(18px, 1.5vw, 22px) !important;
  }
  .process-card .step-en {
    color: rgba(10, 8, 8, 0.55) !important;
    letter-spacing: 0.22em !important;
  }
  .process-card h3 { color: var(--warm-charcoal) !important; }
  .process-card p.lead { color: rgba(10, 8, 8, 0.92) !important; }
  .process-card p.body { color: rgba(10, 8, 8, 0.72) !important; }
  /* Image: subtle warm tint on hover (Jakub: tiny details that compound) */
  .process-card-image img { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease; }
  .process-card:hover .process-card-image img { transform: scale(1.03); filter: saturate(1.08); }

  /* ────────────────────────────────────────────────────────────────────
     4. DISH CARDS — refined hover lift + image zoom + subtle title shift.
        Replaces the bare 1.04 scale with a coordinated micro-animation.
     ──────────────────────────────────────────────────────────────────── */
  .dish-card { transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
  .dish-card:hover { transform: translateY(-4px); }
  .dish-card-img-wrap {
    background: #E8E0D2 !important; /* warm tint instead of pure black before image loads */
    transition: box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .dish-card:hover .dish-card-img-wrap {
    box-shadow: 0 18px 40px rgba(10, 8, 8, 0.14), 0 4px 10px rgba(10, 8, 8, 0.06);
  }
  .dish-card-img-wrap img { transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important; }
  .dish-card:hover .dish-card-img-wrap img { transform: scale(1.06) !important; }
  .dish-card h3 {
    font-weight: 500 !important;
    transition: color 0.3s ease;
  }
  .dish-card:hover h3 { color: #000 !important; }
  /* Hide the original ::before yellow overlay on dish-card */
  .dish-card::before { display: none !important; }

  /* (5. Dishes-head duplicate label was removed at the markup level in v10b.) */

  /* ────────────────────────────────────────────────────────────────────
     6. SECTION PADDING — vary slightly for rhythm (impeccable: no flat
        spacing). About denser; Process airy; Beyond denser; Reviews airy.
     ──────────────────────────────────────────────────────────────────── */
  .about-section.section-pad { padding-top: clamp(80px, 10vw, 132px); padding-bottom: clamp(72px, 8vw, 100px); }
  .process-section { padding-top: clamp(96px, 11vw, 152px); padding-bottom: clamp(96px, 11vw, 152px); }
  .dishes-section.section-pad { padding-top: clamp(80px, 9vw, 124px); padding-bottom: clamp(96px, 11vw, 152px); }
  .beyond-section.section-pad { padding-top: clamp(72px, 8vw, 108px); padding-bottom: clamp(80px, 10vw, 132px); }
  .reviews-section { padding-top: clamp(96px, 11vw, 148px) !important; padding-bottom: clamp(96px, 11vw, 148px) !important; }
  .location-section.section-pad { padding-top: clamp(96px, 11vw, 152px); padding-bottom: clamp(80px, 9vw, 124px); }

  /* ────────────────────────────────────────────────────────────────────
     7. REVIEWS SECTION — more editorial header (was a vague stack).
     ──────────────────────────────────────────────────────────────────── */
  .reviews-head {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: clamp(48px, 5vw, 72px);
  }
  .reviews-head .lbl {
    color: rgba(10, 8, 8, 0.55) !important;
    font-size: 11px;
    letter-spacing: 0.32em;
  }
  .reviews-head .reviews-sub {
    font-family: 'Noto Sans TC', sans-serif !important;
    font-size: clamp(13px, 1vw, 15px);
    color: rgba(10, 8, 8, 0.62);
    margin: 0;
    letter-spacing: 0.02em;
  }
  .reviews-head .reviews-h2 {
    font-family: 'Noto Serif TC', 'PingFang TC', Georgia, serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: clamp(40px, 5vw, 68px) !important;
    line-height: 1.15 !important;
    color: var(--warm-charcoal) !important;
    margin: 0 !important;
    letter-spacing: 0.01em !important;
  }

  /* ────────────────────────────────────────────────────────────────────
     8. ARCH DIVIDERS — refine: thinner line, subtler bump, less-baked.
        Currently arcs feel craft-shop; brand wants editorial precision.
     ──────────────────────────────────────────────────────────────────── */
  .arch-divider .arch-line { opacity: 0.4; }
  .arch-divider .arch-bump { opacity: 0.55; }
  .arch-divider.arch-on-light { color: rgba(10, 8, 8, 0.35); }
  .arch-divider.arch-on-dark { color: rgba(10, 8, 8, 0.35); /* 4B has no dark sections — use same tint */ }

  /* ────────────────────────────────────────────────────────────────────
     9. BUTTONS — unify dark-on-cream press feedback across page.
     ──────────────────────────────────────────────────────────────────── */
  .btn {
    transition:
      transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.25s ease,
      color 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .btn:active { transform: translateY(1px) scale(0.985); }
  /* Primary dark CTA — refined shadow */
  .location-cta-row .btn-dark { box-shadow: 0 8px 28px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.1); }
  .location-cta-row .btn-dark:hover {
    background: #000 !important;
    color: #fff !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.22), 0 4px 10px rgba(0,0,0,0.14);
  }
  /* Google Maps embed under location info */
  .location-map {
    margin-top: 24px;
    margin-bottom: 32px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  }
  .location-map iframe {
    display: block;
    width: 100%;
    height: 260px;
    border: 0;
  }
  @media (max-width: 768px) {
    .location-map iframe { height: 220px; }
    .location-map { margin-bottom: 24px; }
  }
  /* btn-link refinement — minimal border, refined hover */
  .btn-link { border-bottom-width: 1px !important; padding-bottom: 6px !important; }
  .btn-link:hover { color: var(--warm-charcoal) !important; border-color: var(--warm-charcoal) !important; }

  /* ────────────────────────────────────────────────────────────────────
     10. FOOTER — refine social icons + hours rhythm + brand desc tone.
     ──────────────────────────────────────────────────────────────────── */
  /* Footer is on a DARK background (var(--black)) — must keep light text */
  .footer-brand-desc { color: rgba(255, 255, 255, 0.78) !important; line-height: 1.85 !important; }
  .footer-social a[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
  .footer-social a { transition: opacity 0.25s ease, transform 0.25s ease; }
  .footer-social a:not([aria-disabled="true"]):hover { transform: translateY(-1px); }

  /* ────────────────────────────────────────────────────────────────────
     11. SECTION ENTRANCE MOTION — quiet fade-up-with-blur (Jakub).
         Targets section headlines/imagery; respects reduced-motion.
     ──────────────────────────────────────────────────────────────────── */
  @keyframes pp-section-rise {
    from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
  }
  /* main.js adds .vis to .fu elements via IntersectionObserver.
     We layer an optional ease-out-expo curve on the existing main.css
     transition without overriding it (additive: filter only). */
  .fu { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important; }

  /* ────────────────────────────────────────────────────────────────────
     12. MESSENGER BUBBLE — calmer hover, no jiggle.
     ──────────────────────────────────────────────────────────────────── */
  .msgr-bubble {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .msgr-bubble:hover { transform: translateY(-2px) scale(1.04); }

  /* ────────────────────────────────────────────────────────────────────
     ACCESSIBILITY — universal reduced-motion fallback for v9 polish.
     ──────────────────────────────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .fu, .fu.vis { transition: none !important; opacity: 1 !important; transform: none !important; }
    .process-card, .dish-card, .dish-card-img-wrap img, .process-card-image img,
    .btn, .btn-link, .msgr-bubble, .footer-social a {
      transition: none !important;
    }
    .process-card:hover, .dish-card:hover, .msgr-bubble:hover { transform: none !important; }
  }

/* ── PREVIEW 4B v10b — accessibility + a11y focus overrides ──────────
     Yellow focus outline from main.css is borderline invisible on the
     cream background of the 4B variant. Override with warm-charcoal. ── */
  :focus-visible {
    outline-color: var(--warm-charcoal) !important;
    outline-width: 2px !important;
    outline-style: solid !important;
    outline-offset: 3px !important;
  }
  /* On dark surfaces (video hero, footer) flip focus ring to cream */
  .hero-section :focus-visible,
  .contact-footer :focus-visible {
    outline-color: #F5F2EB !important;
  }

/* ── PREVIEW 4B v10 — Cinzel wordmark + mobile hero redesign + leftover audits ────────
     Round 3 feedback:
       (a) Hero "Pizza Persé." → uppercase Cinzel (only place using Cinzel)
       (b) Mobile hero: tighter title cluster, joined Chinese (披薩本質), refined rhythm
       (c) Process subtitle accent ("從麵糰開始。") was yellow — change to editorial dark
       (d) Footer column labels (Location/Hours) were yellow — soften to neutral cream
     Desktop layout (split dark-left / white-right) is preserved per user request. ── */
  /* ────────────────────────────────────────────────────────────────────
     A. Hero wordmark → Cinzel uppercase. Applies to BOTH desktop and
        mobile so the brand reads the same everywhere. Cinzel is a Roman
        capitals face designed for caps display — uppercase + slight
        tracking gives it the right editorial weight.
     ──────────────────────────────────────────────────────────────────── */
  .hero-mega .mega-line-latin .mega-side {
    font-family: 'Cinzel', 'Noto Serif TC', Georgia, serif !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
  }

  /* ────────────────────────────────────────────────────────────────────
     B. Process title accent ("從麵糰開始。") — was yellow, conflicts
        with 4B minimal direction. Editorial italic dark instead.
     ──────────────────────────────────────────────────────────────────── */
  .process-title .accent {
    color: var(--warm-charcoal) !important;
    font-family: 'Cormorant Garamond', 'Noto Serif TC', serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
  }

  /* ────────────────────────────────────────────────────────────────────
     C. Footer column labels (Location / Hours) — were yellow, soften to
        neutral cream so the only "color accent" on the page is the video.
     ──────────────────────────────────────────────────────────────────── */
  .footer-col-label {
    color: rgba(245, 242, 235, 0.7) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    letter-spacing: 0.3em !important;
  }
  /* Footer social hover was yellow — switch to white pill (cleaner, on-brand) */
  .footer-social a:not([aria-disabled="true"]):hover {
    background: #fff !important;
    color: var(--warm-charcoal) !important;
    border-color: #fff !important;
  }

  /* ────────────────────────────────────────────────────────────────────
     D. MOBILE HERO — full redesign (desktop untouched).
        Cluster = title + tagline + buttons feels like one unit; location
        pin sits independently at bottom (already fixed in v8).
     ──────────────────────────────────────────────────────────────────── */
  @media (max-width: 768px) {
    /* Title cluster: very tight; latin and zh share one visual weight */
    .hero-section.hero-split .hero-mega {
      gap: 8px !important;
      margin: 0 0 30px !important;
      padding: 0 !important;
    }
    /* Both lines render as single inline strings, block-level + centered.
       This nukes the desktop flex-50%-split layout that bled through. */
    .hero-section.hero-split .mega-line {
      display: block !important;
      text-align: center !important;
      margin: 0 !important;
      padding: 0 !important;
      width: auto !important;
      line-height: 1 !important;
    }
    .hero-section.hero-split .mega-side {
      display: inline !important;
      padding: 0 !important;
      margin: 0 !important;
      flex: none !important;
      color: #fff !important;
      text-shadow:
        0 1px 2px rgba(0,0,0,0.65),
        0 4px 18px rgba(0,0,0,0.55),
        0 0 36px rgba(0,0,0,0.35) !important;
      white-space: nowrap !important;
    }
    /* Latin: Cinzel uppercase. HTML whitespace between spans provides
       the natural word-space between PIZZA and PERSÉ — no extra margin. */
    .hero-section.hero-split .mega-line-latin .mega-side {
      font-size: clamp(38px, 12vw, 64px) !important;
      letter-spacing: 0.035em !important;
    }
    .hero-section.hero-split .mega-line-latin .mega-side + .mega-side {
      margin-left: 0 !important;
    }
    /* Chinese: JOINED as 披薩本質 — HTML now has no whitespace between
       the two spans, so 披薩 and 本質 read as one Chinese phrase. */
    .hero-section.hero-split .mega-line-zh .mega-side {
      font-family: 'Noto Sans TC', sans-serif !important;
      font-weight: 400 !important;
      font-size: clamp(15px, 4.6vw, 22px) !important;
      letter-spacing: 0.22em !important;
      /* compensate trailing letter-spacing so the joined string sits
         visually centered (CSS counts the trailing tracking as content) */
      padding-left: 0.22em !important;
    }

    /* Tagline block: tighter inside, clearer break from title */
    .hero-section.hero-split .hero-left .hero-content {
      gap: 16px !important;
    }
    .hero-section.hero-split .hero-left .hero-tagline {
      margin: 0 !important;
    }
    .hero-section.hero-split .hero-left .hero-tagline p {
      margin: 0 !important;
      font-size: 14px !important;
      line-height: 1.78 !important;
      color: #fff !important;
      letter-spacing: 0.01em !important;
      text-shadow:
        0 1px 2px rgba(0,0,0,0.55),
        0 3px 12px rgba(0,0,0,0.45) !important;
    }
    .hero-section.hero-split .hero-left .hero-tagline p + p { margin-top: 5px !important; }

    /* English mini-tagline: tracked uppercase micro-label (NO italic) — feels
       like an editorial caption that supports the brand mark, not a duplicate */
    .hero-tagline-mobile-en {
      font-family: 'DM Sans', sans-serif !important;
      font-style: normal !important;
      font-weight: 500 !important;
      font-size: 11px !important;
      letter-spacing: 0.3em !important;
      text-transform: uppercase !important;
      opacity: 0.78;
      color: #fff !important;
      text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
      margin: 4px 0 0 !important;
    }

    /* Buttons: 14px gap, slight margin above for hierarchy */
    .hero-section.hero-split .hero-left .hero-buttons {
      margin-top: 10px !important;
      gap: 14px !important;
    }
  }

/* ── PREVIEW 4B v11 — TYPOGRAPHY UNIFICATION ─────────────────────────
     Goal: a single coherent font system across the page.
     KEEP   : Cinzel on the hero wordmark only (.hero-mega .mega-line-latin .mega-side)
     REPLACE: every Cormorant Garamond / Noto Serif TC / PingFang-serif call
              → 'DM Sans' + 'Noto Sans TC' (the pair already dominant in 4B)
     ITALIC : kept only where it's a genuine typographic convention
              (single foreign words / English pull-quotes). Dropped on
              Chinese accents, numbers, and uppercase labels where the
              italic was ornamental and tied to the now-removed serif.
     ──────────────────────────────────────────────────────────────────── */
  /* 1. Unify font-family on every element that previously used a different face.
        Selectors include the doubly-qualified forms (.process-card .process-num,
        .hero-section.hero-split .mega-line-zh .mega-side) to beat specificity
        of the earlier !important overrides on those exact paths. */
  .lbl, .lbl-zh,
  .h-zh, .h-en,
  .about-h2, .dishes-h2, .beyond-h2, .location-h2, .location-en,
  .process-title, .process-title .accent,
  .process-num, .process-card .process-num, .step-en,
  .process-card-content h3, .process-card-content .lead, .process-card-content .body,
  .dish-card h3, .dish-card .h-zh, .dish-card-en, .dish-card-sub, .dish-card-badge,
  .reserve-bar h2 .en,
  .reviews-head .reviews-sub, .reviews-head .reviews-h2,
  .hero-left .hero-tagline p, .hero-tagline p, .hero-tagline-mobile-en,
  .hero-right-text p, .hero-right-text em, .hero-right-text i,
  .mega-line-zh .mega-side, .hero-section.hero-split .mega-line-zh .mega-side,
  .hero-about-inner .lbl, .hero-about-inner .about-h2-scroll, .hero-about-inner .about-body-scroll,
  .nav-v2 .nav-pill, .nav-v2 .nav-pill .en, .nav-v2 .nav-lang,
  .hero-location .loc-label, .hero-location .loc-place,
  .footer-col-label, .footer-brand-desc {
    font-family: 'DM Sans', 'Noto Sans TC', system-ui, -apple-system, sans-serif !important;
  }

  /* 2. Drop ornamental italic where it was tied to the old serif and adds
        nothing in the new sans system (Chinese accent, numbers, uppercase
        labels, Chinese editorial heading). */
  .process-title .accent,    /* Chinese — italic doesn't apply to CJK */
  .process-num,              /* Numbers — ornate italic clashes with minimal */
  .process-card .process-num,
  .step-en,                  /* Uppercase labels — italic uppercase is odd */
  .reviews-head .reviews-h2  /* Chinese heading — italic doesn't apply */
  {
    font-style: normal !important;
  }

  /* 3. Re-assert hero wordmark — Cinzel is the ONE intentional exception */
  .hero-mega .mega-line-latin .mega-side {
    font-family: 'Cinzel', Georgia, serif !important;
  }

  /* 4. Unify SECTION HEADING SIZE — match Section 2's VISIBLE heading
        (.about-h2-scroll). Note: on desktop, the regular .about-section
        is display:none and the hero-about scroll-stage shows instead,
        so the user-visible S2 baseline is .about-h2-scroll @ 28.8px,
        NOT the hidden .about-h2 @ 48px.
        Recipe matched exactly to .about-h2-scroll (lines 479-480):
          font-size: clamp(22px, 2vw, 32px)  → 28.8px at 1440px viewport
          line-height: 1.4
          font-weight: 400 (no bold)
        This applies to every section heading S3–S7 so they sit at
        EXACTLY the same visual weight as the S2 heading the user sees. */
  .about-h2,
  .process-title,
  .dishes-h2,
  .beyond-h2,
  .reviews-head .reviews-h2,
  .location-h2 {
    font-size: clamp(22px, 2vw, 32px) !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
    font-weight: 400 !important;
  }

  /* The Process section's accent line ("從麵糰開始。") was w500 (bolder)
     than the rest — drop to w400 to match Section 2's heading weight. */
  .process-title .accent {
    font-weight: 400 !important;
  }

  /* 5. Body text — match Section 2's VISIBLE about-body-scroll recipe.
        S2 visible body: 15px / w400 / lh 1.85. Apply identically. */
  .about-body,
  .process-intro p,
  .beyond-body,
  .beyond-body.lead, .beyond-body.detail,
  .location-desc,
  .process-card-content .lead,
  .process-card-content .body {
    font-size: 15px !important;
    line-height: 1.85 !important;
    font-weight: 400 !important;
  }

  /* Section labels (— ABOUT / — THE PIZZA / etc.) already match S2 at
     11px / w500 / 0.28em tracking. */

  /* 6. Hero video — fix "dark filter feel" ─────────────────────────────
        Original filter: saturate(1.15) contrast(1.05) brightness(1.02).
        The contrast(1.05) was pushing the kitchen scene's shadows
        darker — that's the heavy-veiled look. Replace with a brightness-
        only lift so the footage reads natural and not muddied. */
  .hero-section.hero-split .hero-right .hero-video,
  .hero-video {
    filter: brightness(1.15) saturate(1.05) !important;
  }

  /* 7. Hero fact anchor — one factual line below CTAs.
        Answers "is this place right for me?" in 10 seconds: group size,
        price range, neighborhood. No marketing language, just facts. */
  .hero-fact-anchor {
    font-family: 'DM Sans', 'Noto Sans TC', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: rgba(10, 8, 8, 0.55) !important;
    letter-spacing: 0.04em !important;
    line-height: 1.55 !important;
    margin: 14px 0 0 !important;
    text-align: left;
  }
  @media (max-width: 768px) {
    .hero-fact-anchor {
      text-align: center;
      color: #fff !important;
      text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.45) !important;
      font-size: 12px !important;
      margin: 6px 0 0 !important;
      opacity: 0.92;
    }
  }

  /* 8. FAQ section — long-tail SEO + practical answers.
        Editorial Q&A list, matching the rest of the page's restrained tone. */
  .faq-section { background: var(--off-white) !important; }
  .faq-wrap { max-width: 860px; margin: 0 auto; }
  .faq-head { text-align: center; margin-bottom: clamp(40px, 5vw, 56px); }
  .faq-head .lbl {
    display: block;
    margin-bottom: 12px;
    color: rgba(10, 8, 8, 0.55) !important;
    font-size: 11px;
    letter-spacing: 0.32em;
  }
  .faq-h2 {
    margin: 0 !important;
    font-size: clamp(22px, 2vw, 32px) !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
  }
  .faq-list { display: flex; flex-direction: column; gap: 0; }
  .faq-item {
    padding: 28px 0;
    border-bottom: 1px solid rgba(10, 8, 8, 0.08);
  }
  .faq-item:last-child { border-bottom: 0; }
  .faq-q {
    font-family: 'DM Sans', 'Noto Sans TC', sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    margin: 0 0 12px !important;
    color: var(--warm-charcoal) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.005em !important;
  }
  .faq-a {
    font-family: 'DM Sans', 'Noto Sans TC', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
    margin: 0 !important;
    color: rgba(10, 8, 8, 0.78) !important;
    font-weight: 400 !important;
  }
  .faq-a a {
    color: var(--warm-charcoal) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s ease;
  }
  .faq-a a:hover { color: #000 !important; }
  @media (max-width: 768px) {
    .faq-item { padding: 22px 0; }
    .faq-q { font-size: 16px !important; margin-bottom: 8px !important; }
    .faq-a { font-size: 14.5px !important; line-height: 1.8 !important; }
  }

/* ── HERO FIX — pin left-panel content to the bottom-left at a fixed offset,
     just like .hero-location does. Desktop only; mobile keeps its own
     centered-over-video layout untouched.
     Must override main.css's `.hero-content { inset: 0; justify-content: center; ... }`
     by explicitly setting top/left/right/bottom individually with !important. ── */
  @media (min-width: 769px) {
    .hero-section.hero-split .hero-left .hero-content {
      position: absolute !important;
      top: auto !important;
      right: auto !important;
      bottom: 180px !important;
      left: var(--hl-pad-h, 56px) !important;
      width: auto !important;
      max-width: 520px !important;
      margin: 0 !important;
      padding: 0 !important;
      text-align: left !important;
      align-items: flex-start !important;
      justify-content: flex-end !important;
    }
  }
  /* ── HERO OVERLAP — ROBUST FIX (replaces the old magic-number band-aid) ──
     Root cause: the centred absolute title (.hero-mega) and the bottom-anchored
     text column (.hero-content) shared the same vertical band on short/narrow
     laptop viewports (and displays at 125–150% OS scaling), so the word "Pizza"
     landed on the heading. Centring on full width also makes the horizontal
     position width-dependent, so no single offset could ever hold.

     Fix (≤1000px tall = laptops): give the title its OWN top zone and the text
     its OWN bottom zone, derived from ONE shared vertical budget so they can
     never meet, and scale the title with vh so it always fits its zone. The
     title stays horizontally centred (the wordmark look is preserved). Tall
     desktop monitors (>1000px) are left completely untouched. */
  @media (min-width: 769px) and (max-height: 1000px) {
    /* Title: vertically centred inside a top zone bounded below by the reserved
       text region; top edge clears the sticky nav (~116px). */
    .hero-section.hero-split .hero-mega {
      top: 116px !important;
      bottom: 452px !important;   /* reserve the bottom region for the text column + location pin */
      height: auto !important;
      justify-content: center !important;
      padding: 0 !important;
      gap: 8px !important;
    }
    .hero-section.hero-split .mega-line-latin .mega-side {
      font-size: clamp(40px, min(8.6vw, 11vh), 132px) !important;
    }
    .hero-section.hero-split .mega-line-zh .mega-side {
      font-size: clamp(16px, min(3vw, 4vh), 36px) !important;
    }
    /* Text column: pinned into the reserved bottom zone, clearing the location
       pin below it; slightly compacted so the stack fits short screens. */
    .hero-section.hero-split .hero-left .hero-content {
      bottom: 104px !important;
      top: auto !important;
      gap: 12px !important;
    }
    .hero-section.hero-split .hero-left .hero-tagline { margin: 0 !important; }
    .hero-section.hero-split .hero-left .hero-tagline p:not(.hero-intro-h) {
      font-size: 13px !important;
      line-height: 1.5 !important;
      margin: 0 0 6px !important;
    }
    .hero-section.hero-split .hero-left .hero-tagline .hero-intro-h {
      font-size: clamp(18px, 1.8vw, 22px) !important;
      margin: 0 0 10px !important;
    }
  }

  /* ── LANDSCAPE PHONES / very short wide viewports ──────────────────────────
     A landscape phone is WIDER than the 768px mobile breakpoint, so it falls
     into the desktop split-hero — which assumes a tall screen and can't fit a
     ~380px-tall viewport (text overflows, title collides). Here we drop the
     absolute split layout and use simple, safe document flow (auto height,
     scrollable). Scoped to max-height:500px so it ONLY matches landscape phones
     / tiny short windows — never portrait phones, tablets, laptops or desktops.
     The GSAP pin is disabled for this range in JS (hero ScrollTrigger). */
  @media (min-width: 769px) and (max-height: 500px) {
    /* Compact the (otherwise tall) desktop nav so it doesn't eat the screen */
    .nav-v2 .nav-logo-img { height: 40px !important; }
    .nav-v2 .nav-inner { padding: 6px 20px !important; }

    .hero-section.hero-split {
      display: block !important;
      position: relative !important;
      height: auto !important;
      min-height: 0 !important;
      overflow: visible !important;
      padding: 72px 28px 36px !important;     /* top clears the compact nav */
      background: var(--off-white, #F5F2EB) !important;
    }
    /* All hero panels back into normal document flow */
    .hero-section.hero-split .hero-mega,
    .hero-section.hero-split .hero-left,
    .hero-section.hero-split .hero-right,
    .hero-section.hero-split .hero-location {
      position: static !important; inset: auto !important;
      top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
      width: auto !important; height: auto !important;
      transform: none !important; opacity: 1 !important;
    }
    /* Title — centred wordmark, both halves dark on the cream background */
    .hero-section.hero-split .hero-mega { justify-content: center !important; padding: 0 !important; margin: 0 0 16px !important; gap: 6px !important; }
    .hero-section.hero-split .mega-line-latin .mega-side { font-size: clamp(30px, 5.4vw, 52px) !important; }
    .hero-section.hero-split .mega-line-zh .mega-side { font-size: clamp(14px, 2.3vw, 20px) !important; }
    .hero-section.hero-split .mega-side-left,
    .hero-section.hero-split .mega-side-right { color: #0A0808 !important; text-shadow: none !important; }
    /* Intro text + buttons */
    .hero-section.hero-split .hero-left { padding: 0 !important; margin: 0 0 14px !important; max-width: 760px; }
    .hero-section.hero-split .hero-left .hero-content { position: static !important; inset: auto !important; top: auto !important; bottom: auto !important; left: auto !important; max-width: 100% !important; gap: 12px !important; align-items: flex-start !important; }
    .hero-section.hero-split .hero-left .hero-tagline p:not(.hero-intro-h) { font-size: 13.5px !important; line-height: 1.6 !important; }
    .hero-section.hero-split .hero-left .hero-tagline .hero-intro-h { font-size: 20px !important; margin: 0 0 8px !important; }
    /* Video — a modest strip below the text (text overlay kept) */
    .hero-section.hero-split .hero-right { position: relative !important; height: 40vh !important; min-height: 150px !important; border-radius: 12px !important; overflow: hidden !important; margin: 2px 0 0 !important; }
    .hero-section.hero-split .hero-right .hero-video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
    .hero-section.hero-split .hero-right-text { position: absolute !important; left: 18px !important; right: 18px !important; bottom: 14px !important; }
    .hero-section.hero-split .hero-right-text p { font-size: 18px !important; }
    /* Location pin under the text */
    .hero-section.hero-split .hero-location { margin: 6px 0 0 !important; display: inline-flex !important; }
    /* Desktop scroll-reveal about panel can't work without the pin → hide it */
    .hero-section.hero-split .hero-about { display: none !important; }
  }

  /* Signature Dishes grid — 6 cards arranged in 3 × 2 on desktop instead of
     a single row of 5. The base .dish-grid in main.css uses repeat(5, 1fr);
     this override is gated to the 6-card layout via the .dish-grid-6 modifier. */
  @media (min-width: 769px) {
    .dish-grid.dish-grid-6 { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
  }

/* ── 2026-06 POLISH — scroll cue + reviews fallback link ── */
  /* Scroll cue: desktop only (same scope as the GSAP hero animation).
     Sits over the video panel, fades out via --scue-opacity as you scroll. */
  .hero-scroll-cue { display: none; }
  @media (min-width: 769px) and (min-height: 501px) {
    .hero-scroll-cue {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      position: absolute;
      bottom: 26px;
      right: 56px;
      z-index: 5;
      pointer-events: none;
      opacity: var(--scue-opacity, 1);
      color: #fff;
      text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    }
    .scroll-cue-label {
      font-family: 'DM Sans', sans-serif;
      font-size: 9px;
      font-weight: 500;
      letter-spacing: 0.34em;
      /* optical centering: compensate the trailing tracking space */
      margin-right: -0.34em;
    }
    .scroll-cue-track {
      position: relative;
      width: 1px;
      height: 44px;
      background: rgba(255,255,255,0.28);
      overflow: hidden;
      border-radius: 1px;
    }
    .scroll-cue-dot {
      position: absolute;
      top: 0;
      left: -1.5px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 6px rgba(0,0,0,0.35);
      animation: scueFall 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
    @keyframes scueFall {
      0%   { transform: translateY(-6px); opacity: 0; }
      18%  { opacity: 1; }
      78%  { opacity: 1; }
      100% { transform: translateY(46px); opacity: 0; }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .scroll-cue-dot { animation: none; top: 50%; opacity: 0.9; }
  }

  /* Reviews fallback link — always visible under the Featurable widget */
  .reviews-fallback { margin: 28px 0 0; text-align: center; }
  .reviews-fallback a {
    font-family: 'DM Sans', 'Noto Sans TC', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(26, 23, 20, 0.62);
    text-decoration: none;
    border-bottom: 1px solid rgba(26, 23, 20, 0.25);
    padding-bottom: 3px;
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .reviews-fallback a:hover {
    color: #0A0808;
    border-bottom-color: #0A0808;
  }

/* ====================================================================
   -- 2026 v12 -- VISUAL IDENTITY (tomato accent / display serif / grain)
   ====================================================================
   APPENDED LAST on purpose. Everything here is additive and is the
   newest layer in home.css, so at equal specificity it wins, and where
   it must beat an earlier `!important` rule it (a) reuses the SAME
   selector list (equal specificity, later wins) or (b) adds a class to
   raise specificity. Read the inline notes before editing.

   WHAT THIS LAYER DOES
   1. Re-introduces an Italian-tomato accent (--pp-pomodoro #6E212E,
      darker --pp-pomodoro-deep #5A1A26 for small text on cream, and a
      lightened --pp-pomodoro-light #C4677A that stays legible on the
      dark footer). Optional --pp-olive / --pp-gold are defined but not
      yet applied (brief: "used sparingly").
   2. Brings back a DISPLAY SERIF (Fraunces + Noto Serif TC) on section
      H2s and their accent spans ONLY. Body stays DM Sans / Noto Sans TC.
      Hero wordmark stays Cinzel — its selector is deliberately NOT
      touched here.
   3. Adds a subtle STATIC film-grain overlay (.pp-grain), pointer-events
      none, below the sticky nav and the Messenger bubble, disabled on
      touch devices and softened under prefers-reduced-motion.

   ACCESSIBILITY / CONTRAST (measured, WCAG 2.1)
     white on #6E212E  = 5.14  -> AA pass  (button text)
     #6E212E on cream  = 4.37  -> just-FAILS AA normal, so small text on
                                  cream uses #5A1A26 (6.42, AA pass)
     #5A1A26 on cream  = 6.42  -> AA pass  (labels / links / accents)
     #C4677A on #0A0A0A= 5.37  -> AA pass  (footer accents on dark) AND
                                  the footer is raised ABOVE .pp-grain
                                  (z-index 70) so the grain does NOT
                                  multiply over these labels.

   NOTES ON REVIEW FIXES BAKED IN (do not regress):
     - NO `position:relative` is set on .nav-wrap/.nav-v2/.msgr-bubble.
       main.css makes those `position:fixed` WITHOUT !important; an equal-
       specificity later `position:relative` here would un-pin the sticky
       nav and the Messenger bubble on every page. We touch z-index only.
     - Hero CTA recolours are wrapped in @media (min-width:769px) so the
       deliberate mobile white-on-dark hero buttons (home.css ~538-548)
       survive on phones (a deep-red ghost label over the dark hero video
       would fail contrast badly).
     - All small ACCENT TEXT on cream uses #5A1A26, never #6E212E.
     - Grain uses normal blend (not multiply) so it doesn't crush cream
       legibility or footer labels, and is disabled on touch devices.
   ==================================================================== */

  :root {
    --pp-pomodoro:       #6E212E; /* primary tomato — fills (buttons) only */
    --pp-pomodoro-deep:  #5A1A26; /* darker — ALL small accent text/links on cream, hovers */
    --pp-pomodoro-light: #C4677A; /* lightened — accents on the DARK footer only */
    --pp-olive:          #5B6043; /* optional secondary, not yet applied */
    --pp-gold:           #C99A4E; /* optional secondary, not yet applied */
    --pp-serif: 'DM Serif Display', 'Noto Serif TC', Georgia, 'Times New Roman', serif;
  }

  /* ─────────────────────────────────────────────────────────────────
     1. DISPLAY SERIF on section headings (S2–S7 + FAQ) and accent spans.
        Reuses the EXACT v11 block-1 heading selectors (line ~1398) so
        this sits at equal-or-greater specificity and, being later, wins.
        Added: `.faq-h2` and `.hero-about-inner .about-h2-scroll` — the
        FAQ heading is sized in its own single-class rule (line ~1479) and
        the visible desktop S2 heading is .about-h2-scroll (because
        .about-section is display:none on desktop), neither of which the
        v11 font list named. Only HEADINGS get the serif; body/labels stay
        in DM Sans / Noto Sans TC.
     ───────────────────────────────────────────────────────────────── */
  .about-h2, .dishes-h2, .beyond-h2, .location-h2,
  .process-title, .process-title .accent,
  .reviews-head .reviews-h2,
  .faq-h2,
  .hero-about-inner .about-h2-scroll {
    font-family: var(--pp-serif) !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     2. HEADING SIZE / WEIGHT — re-tuned for a display serif.
        v11 (line ~1398) forced headings to clamp(22px,2vw,32px)/lh1.4/
        w400. We reuse the SAME selector list (equal specificity, later
        wins) and add .faq-h2 + .about-h2-scroll.
        MOBILE-SAFE: clamp MIN stays 22px for S3–S7/FAQ (identical to v11),
        and the scroll-stage S2 heading keeps its OWN 24px floor (it was
        24px, not 22px — see note below). Only the DESKTOP max grows
        32px->38px and weight 400->450. line-height nudged 1.4->1.3 on
        desktop, but a phone guard at the END of this block restores 1.4
        on <=768px so vertical rhythm / wrapping does not shift on phones.
        ⚠ STILL flag every multi-word zh + en heading for a real-phone
        wrap check after deploy (serif metrics differ from the sans even
        at the same px). */
  .about-h2,
  .process-title,
  .dishes-h2,
  .beyond-h2,
  .reviews-head .reviews-h2,
  .location-h2,
  .faq-h2 {
    font-size: clamp(22px, 2.3vw, 38px) !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    font-weight: 450 !important;
  }
  /* Scroll-stage S2 heading: keep its prior 24px floor (its base rule at
     line ~314/427 used clamp(...,24px) min). Split out so we don't drop
     it to 22px. (0,1,1) beats the (0,1,0) v11 list anyway. */
  .hero-about-inner .about-h2-scroll {
    font-size: clamp(24px, 2.3vw, 38px) !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    font-weight: 450 !important;
  }
  /* The Process accent line ("從麵糰開始。") — give it the deep tomato and
     keep it the same weight as the rest of its heading. Two-class selector
     matches v9/v10/v11's `.process-title .accent` (0,2,0); later -> wins.
     #5A1A26 on cream = 6.42 (AA pass). */
  .process-title .accent {
    color: var(--pp-pomodoro-deep) !important;
    font-weight: 450 !important;
    font-style: normal !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     3. SECTION LABELS (.lbl) — tomato accent, scoped to CREAM sections.
        We deliberately do NOT use a bare `.lbl{}` rule: a global tint
        would also hit the hero eyebrow over the dark video and the dark
        footer labels (deep-red on near-black fails contrast). Instead we
        target only the on-cream sections. Each pre-existing rule below is
        matched at its own specificity and appended later to win.
        All use #5A1A26 (6.42, AA pass at small size on cream).
     ───────────────────────────────────────────────────────────────── */
  .reviews-head .lbl,            /* v9 ~1062 (0,2,0) */
  .faq-head .lbl,                /* v11 ~1472 (0,2,0) */
  .beyond-section .lbl {         /* v9 ~935  (0,2,0) */
    color: var(--pp-pomodoro-deep) !important;
  }
  /* Remaining on-cream labels (process / dishes / location / hero-about
     eyebrow). Scoped to their cream sections so dark surfaces are never
     hit by a generic .lbl tint. */
  .about-section .lbl,
  .hero-about-inner .lbl,
  .process-section .lbl,
  .dishes-section .lbl,
  .location-section .lbl {
    color: var(--pp-pomodoro-deep) !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     4. BUTTONS — primary CTA becomes tomato (was charcoal in 4B).
        Hero CTAs are wrapped in a DESKTOP-ONLY guard so the mobile
        white-on-dark hero buttons (home.css ~538-548, same selectors at
        0,2,0) survive on phones. White-on-#6E212E = 5.14 -> AA pass.
        The .beyond / .location buttons are NOT guarded (those sections are
        cream at every width).
     ───────────────────────────────────────────────────────────────── */
  @media (min-width: 769px) {
    /* Hero primary CTA (desktop split hero) */
    .hero-left .btn-yellow {
      background: var(--pp-pomodoro) !important;
      color: #fff !important;
      border: 1px solid var(--pp-pomodoro) !important;
    }
    .hero-left .btn-yellow:hover {
      background: var(--pp-pomodoro-deep) !important;
      color: #fff !important;
      border-color: var(--pp-pomodoro-deep) !important;
    }
    /* Hero ghost outline CTA -> tomato outline, fills tomato on hover.
       Deep-red text on the cream left panel = AA. */
    .hero-left .btn-ghost {
      border-color: var(--pp-pomodoro) !important;
      color: var(--pp-pomodoro-deep) !important;
      background: transparent !important;
    }
    .hero-left .btn-ghost:hover {
      background: var(--pp-pomodoro) !important;
      color: #fff !important;
      border-color: var(--pp-pomodoro) !important;
    }
  }
  /* Location section primary CTA (was charcoal btn-dark) — cream at all
     sizes, so no media guard. */
  .location-cta-row .btn-dark {
    background: var(--pp-pomodoro) !important;
    color: #fff !important;
    box-shadow: 0 8px 28px rgba(110,33,46,0.22), 0 2px 6px rgba(110,33,46,0.14) !important;
  }
  .location-cta-row .btn-dark:hover {
    background: var(--pp-pomodoro-deep) !important;
    color: #fff !important;
    box-shadow: 0 12px 36px rgba(154,46,30,0.30), 0 4px 10px rgba(154,46,30,0.18) !important;
  }
  /* Beyond section ghost outline -> tomato (cream section, matches v9 0,2,0). */
  .beyond-section .btn-ghost {
    border-color: var(--pp-pomodoro) !important;
    color: var(--pp-pomodoro-deep) !important;
    background: transparent !important;
  }
  .beyond-section .btn-ghost:hover {
    background: var(--pp-pomodoro) !important;
    color: #fff !important;
    border-color: var(--pp-pomodoro) !important;
  }
  /* Full-menu / text link underline accent on hover (was charcoal).
     Text colour uses the DEEP shade — bright #6E212E as text on cream is
     only 4.37 (fails AA). */
  .btn-link:hover {
    color: var(--pp-pomodoro-deep) !important;
    border-color: var(--pp-pomodoro) !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     5. SMALL TEXT-LINK & CARD ACCENTS on cream — DEEP red only (AA).
        Every one of these is normal-size text on cream, so #6E212E (4.37)
        would fail; they all use #5A1A26 (6.42).
     ───────────────────────────────────────────────────────────────── */
  .faq-a a {
    color: var(--pp-pomodoro-deep) !important;
    text-decoration-color: rgba(154,46,30,0.55); /* deeper + higher alpha so the link affordance stays visible */
  }
  .faq-a a:hover { color: var(--pp-pomodoro) !important; } /* hover allowed brighter; it is the focused affordance */
  .reviews-fallback a:hover {
    color: var(--pp-pomodoro-deep);
    border-bottom-color: var(--pp-pomodoro-deep);
  }
  /* Process step number — editorial flourish. Deep red (the number maxes
     at 22px regular = NOT WCAG "large text", so use the AA-safe deep
     shade, not bright). v9 ~997 + v11 set it at (0,2,0); match. */
  .process-card .process-num {
    color: var(--pp-pomodoro-deep) !important;
  }
  /* Dish-card title shifts to deep red on hover (was -> #000). v9 ~1034 is
     `.dish-card:hover h3` (0,2,1); match exactly. Deep red so the hover
     title text clears AA on cream. */
  .dish-card:hover h3 {
    color: var(--pp-pomodoro-deep) !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     6. NAV — small tomato underline under the ACTIVE pill once the nav is
        scrolled onto the cream background. We do NOT recolour nav-pill
        hover/active fills (kept charcoal) to avoid fighting the nav-over-
        video inversion logic. #5A1A26 on the light scrolled nav >= 4.5,
        well above the 3:1 needed for a UI indicator (WCAG 1.4.11).
     ───────────────────────────────────────────────────────────────── */
  .nav-v2.nav-scrolled .nav-pill.active {
    position: relative;
  }
  .nav-v2.nav-scrolled .nav-pill.active::after {
    content: "";
    display: block !important;        /* override any v2 `::after{display:none}` reset */
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 16px;
    height: 2px;
    transform: translateX(-50%);
    background: var(--pp-pomodoro-deep);
    border-radius: 2px;
  }
  /* NOTE: the old draft's `.reserve-bar h2 .accent` rule was removed — the
     reserve bar lives on reserve.html (which loads main.css, not home.css),
     so the rule was dead code on every page that loads home.css. If the
     tomato accent is wanted on reserve.html's dark pull-quote, add it to
     main.css using the LIGHT shade (#C4677A) for legibility on dark. */

  /* ─────────────────────────────────────────────────────────────────
     7. FOOTER (DARK bg ~#0A0A0A) — accents must stay legible on near-black.
        Use the LIGHTENED tomato (#C4677A = 5.37 on #0A0A0A, AA pass).
        Scoped as `.contact-footer .footer-col-label` (0,2,0) so it beats
        BOTH main.css and the generic-order hazard — it can never be
        flipped to the dark-on-dark deep shade by a later/earlier rule.
        The footer is also raised ABOVE the grain (z-index 70, in §8) so
        the grain never sits over these labels.
     ───────────────────────────────────────────────────────────────── */
  .contact-footer .footer-col-label {
    color: var(--pp-pomodoro-light) !important;
  }
  /* Footer social hover -> tomato pill with white glyph. v10 set this to a
     white pill at (0,2,0)+:not(); match & override. White-on-#6E212E = 5.14. */
  .footer-social a:not([aria-disabled="true"]):hover {
    background: var(--pp-pomodoro) !important;
    color: #fff !important;
    border-color: var(--pp-pomodoro) !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     8. FILM-GRAIN OVERLAY (.pp-grain) — subtle, STATIC, non-interactive.
        • Inline SVG fractal-noise data-URI -> no extra network request.
        • position: fixed full-bleed; pointer-events: none so it never
          intercepts clicks (nav, buttons, Messenger bubble all stay live).
        • z-index 60: ABOVE page content but BELOW the sticky nav
          (.nav-wrap z-index 100) and the Messenger bubble (.msgr-bubble
          z-index 400), so UI chrome stays crisp.
        • mix-blend-mode: NORMAL (not multiply) + opacity 0.35 — multiply
          crushed the cream sections and the dark footer labels; a plain
          normal overlay is more even and predictable and is gentler on the
          iOS compositor during the pinned GSAP hero scroll.
        • Disabled on TOUCH devices (@media (hover:none)) to avoid any
          scroll jank during the GSAP hero pin on phones/tablets, and
          softened under prefers-reduced-motion.
        The <div class="pp-grain" aria-hidden="true"></div> goes right
        after <body> in BOTH index.html and en/index.html. */
  .pp-grain {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: normal;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    background-repeat: repeat;
  }
  /* Keep the dark footer ABOVE the grain so the overlay never reduces the
     #C4677A label contrast. */
  .contact-footer { position: relative; z-index: 70; }
  /* Touch devices: drop the fixed full-viewport overlay entirely (avoids
     the known iOS Safari / installed-PWA scroll-cost during the hero pin). */
  @media (hover: none) {
    .pp-grain { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pp-grain { opacity: 0.28; }
  }
  /* Belt-and-suspenders LAYERING ONLY — z-index, never position. main.css
     already sets these `position: fixed`; we must NOT override that (an
     equal-specificity `position:relative` here would un-pin the sticky nav
     and the Messenger bubble). z-index re-assertion is harmless and keeps
     them above the grain even if a future stacking context changes. */
  .nav-wrap, .nav-v2 { z-index: 100; }
  .msgr-bubble { z-index: 400; }

  /* ─────────────────────────────────────────────────────────────────
     9. MOBILE HEADING GUARD — restore line-height 1.4 on phones so the
        serif swap + the desktop 1.3 line-height do NOT change the vertical
        rhythm / wrapping on <=768px. Placed LAST so it wins over §2.
        (Still eyeball real-phone heading wraps in both zh + en after
        deploy — serif glyph metrics differ from the sans.)
     ───────────────────────────────────────────────────────────────── */
  @media (max-width: 768px) {
    .about-h2,
    .process-title,
    .dishes-h2,
    .beyond-h2,
    .reviews-head .reviews-h2,
    .location-h2,
    .faq-h2,
    .hero-about-inner .about-h2-scroll {
      line-height: 1.4 !important;
    }
  }

/* ====================================================================
   -- 2026 v13 -- BOLDER PASS
   ====================================================================
   Owner feedback after v12 shipped: "跟之前沒差多少" (barely looks
   different). Diagnosis: v12 was correct but too conservative — the
   hero (the first, dominant thing every visitor sees) was untouched
   except two small desktop-only button recolors, the grain was tuned
   so subtle it read as invisible, and NONE of the "cool animation"
   asks from the original brief (magnetic buttons, a ticker, kinetic
   editorial flourishes) made it from the concept demo into the real
   site. This block fixes all three, additive-only, appended last.

   1. Grain — finer noise + higher opacity so it reads as a felt paper
      texture instead of a wash. Same safety rails as v12 (normal
      blend, pointer-events:none, disabled on touch, footer exempt).
   2. Hero video gets a warm tomato colour-grade wash (::before,
      pointer-events:none, z-index sits between the video (auto) and
      the existing .hero-right-text z-index:2 — confirmed by reading
      the base rules, so the caption stays crisp on top). This does
      NOT touch the GSAP --hr-w/--hl-w variables or hero layout.
   3. Small desktop-only tomato touches on hero chrome that were
      previously all-charcoal: the "— PIZZA PERSÉ" eyebrow label, the
      scroll-cue dot glow, and the location-pin icon + underline.
      Mobile hero text/buttons are UNTOUCHED (kept white-on-video, per
      the v12 review's contrast concern).
   4. NEW: a ticker/marquee strip (.pp-ticker) inserted between the
      About and Process sections — nowhere near the hero/nav, so it
      cannot affect the pinned ScrollTrigger math. Pure CSS animation,
      pauses under prefers-reduced-motion.
   5. NEW: magnetic hover on the 3 primary CTA buttons (.js-magnet),
      vanilla JS, mousemove/mouseleave only, skipped entirely on touch
      devices and prefers-reduced-motion (see the <script> added near
      the bottom of index.html / en/index.html).
   6. Editorial italic Fraunces restored on the process accent line,
      the process step numerals, and the dish Italian subtitles
      (.dish-card-en) — small-scoped, single short lines, no reflow
      risk — for the "editorial menu" feel the sans-only v11 pass had
      flattened out. Headings also nudged bolder (450->500 weight,
      38px->42px desktop max, -0.01em tracking); mobile clamp MIN and
      the §9 mobile line-height guard above are unchanged, so phone
      wrapping risk does not increase beyond what v12 already flagged.
   ==================================================================== */

  /* 1. Stronger, finer grain */
  .pp-grain {
    opacity: 0.55 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/%3E%3C/svg%3E") !important;
    background-size: 90px 90px !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .pp-grain { opacity: 0.4 !important; }
  }

  /* 2. Hero video warm colour-grade — decorative, non-interactive */
  .hero-right::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(120% 100% at 30% 100%, rgba(110,33,46,0.24) 0%, rgba(110,33,46,0.08) 45%, rgba(10,8,8,0) 72%);
    mix-blend-mode: soft-light;
  }

  /* 3. Hero chrome — desktop-only tomato touches (mobile stays untouched) */
  @media (min-width: 769px) {
    .hero-left .hero-tagline .hero-lbl {
      color: var(--pp-pomodoro-deep) !important;
    }
    .hero-location .loc-icon {
      color: var(--pp-pomodoro) !important;
    }
    .hero-location .loc-place {
      border-bottom: 1px solid rgba(110,33,46,0.45);
      padding-bottom: 2px;
    }
  }
  .scroll-cue-dot {
    background: #FFD9CC !important;
    box-shadow: 0 0 10px 2px rgba(110,33,46,0.55) !important;
  }
  .scroll-cue-track { background: rgba(110,33,46,0.28) !important; }

  /* 4. Ticker / marquee strip — sits between About and Process, far from
        the hero/nav, cannot affect the pinned ScrollTrigger math. */
  .pp-ticker {
    background: var(--warm-charcoal, #1A1714);
    color: #F5F2EB;
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid rgba(245,242,235,0.08);
    border-bottom: 1px solid rgba(245,242,235,0.08);
  }
  .pp-ticker-track {
    display: inline-flex;
    padding: 14px 0;
    animation: pp-ticker-scroll 26s linear infinite;
    font-family: 'DM Sans', 'Noto Sans TC', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
  }
  .pp-ticker-track span { padding: 0 22px; flex: none; }
  .pp-ticker-dot { color: var(--pp-pomodoro-light); }
  @keyframes pp-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .pp-ticker-track { animation: none; }
  }
  @media (max-width: 768px) {
    .pp-ticker-track { font-size: 11px; letter-spacing: 0.2em; }
    .pp-ticker-track span { padding: 0 16px; }
  }

  /* 5. Magnetic CTA buttons — JS in index.html/en/index.html toggles
        inline transform on mousemove/mouseleave; this just gives them a
        smooth "settle back" on release. No will-change (matches this
        file's existing convention of not pinning permanent GPU layers). */
  .js-magnet {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* 6. Editorial italic Fraunces + bolder heading presence */
  .process-title .accent {
    font-style: italic !important;
  }
  .process-card .process-num {
    font-family: var(--pp-serif) !important;
    font-style: italic !important;
  }
  .dish-card-en {
    font-family: var(--pp-serif) !important;
    font-style: italic !important;
  }
  .about-h2,
  .process-title,
  .dishes-h2,
  .beyond-h2,
  .reviews-head .reviews-h2,
  .location-h2,
  .faq-h2,
  .hero-about-inner .about-h2-scroll {
    font-size: clamp(22px, 2.5vw, 42px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
  }
  .hero-about-inner .about-h2-scroll {
    font-size: clamp(24px, 2.5vw, 42px) !important;
  }

/* ====================================================================
   -- 2026 v14 -- REFINEMENT PASS (owner feedback on v13)
   ====================================================================
   1. Hero video tint was too strong — cut the alpha roughly in half.
   2. Grain was using mix-blend-mode:normal, which lays the noise on
      TOP of everything uniformly — that's exactly why it read as a
      haze over photos/video/text. Switched to `overlay`: this blend
      mode is naturally near-invisible over high-detail content (photos,
      video, text) because the existing local contrast "absorbs" it,
      while it stays clearly visible over flat, low-detail surfaces
      (the cream section backgrounds, the dark footer/cards) — which is
      exactly the "textured background, crisp foreground" split that
      was asked for. Footer stays fully exempt as before (z-index 70,
      unaffected regardless of blend mode since it paints above the
      grain entirely).
   3. Scroll cue was at bottom:26/right:56 on the hero-section, i.e.
      almost the same corner as the fixed Messenger bubble
      (bottom:24/right:24, confirmed in main.css) — two small elements
      stacked in one corner canceled each other out. Moved it to the
      vertical middle of the video panel's right edge (clear of both
      the bubble AND the hero-right-text caption at the bottom) and
      enlarged the label/track/dot.
   ==================================================================== */

  /* 1. Hero video tint — roughly halved */
  .hero-right::before {
    background: radial-gradient(120% 100% at 30% 100%, rgba(110,33,46,0.10) 0%, rgba(110,33,46,0.03) 45%, rgba(10,8,8,0) 70%);
  }

  /* 2. Grain — overlay blend so it reads on flat surfaces, not on photos/video/text */
  .pp-grain {
    mix-blend-mode: overlay !important;
    opacity: 0.4 !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .pp-grain { opacity: 0.3 !important; }
  }

  /* 3. Scroll cue — relocated + enlarged, clear of the Messenger bubble */
  @media (min-width: 769px) and (min-height: 501px) {
    .hero-scroll-cue {
      top: 50%;
      bottom: auto;
      left: auto;
      right: 32px;
      transform: translateY(-50%);
      gap: 14px;
    }
    .scroll-cue-label { font-size: 11px; }
    .scroll-cue-track { width: 2px; height: 64px; }
    .scroll-cue-dot { width: 6px; height: 6px; left: -2px; }
  }
  @keyframes scueFall {
    0%   { transform: translateY(-6px); opacity: 0; }
    18%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { transform: translateY(66px); opacity: 0; }
  }

/* ====================================================================
   -- 2026 v15 -- NEW INTERACTIONS (owner-selected: mask reveal, dish
      cursor tag, scroll progress rail)
   ====================================================================
   1. Section-heading MASK REVEAL — a clip-path wipe (not just fade)
      with a tomato light-sweep, triggered once via a small dedicated
      IntersectionObserver in index.html/en/index.html (kept separate
      from main.js's existing .fu system so neither can interfere with
      the other). Deliberately NOT applied to
      .hero-about-inner .about-h2-scroll — that element is already
      driven by the GSAP hero pin timeline (--hai-opacity/--hai-x
      custom properties) and must not get a second, competing reveal.
   2. Dish-card CURSOR TAG — a single shared pill that follows the
      mouse while hovering any .dish-card in the Signature Dishes grid,
      pointer-events:none so the card's own link stays fully clickable.
      Disabled entirely on touch devices (no meaningful hover there).
   3. Scroll PROGRESS RAIL — 7 dots (About/Process/Dishes/Beyond/
      Reviews/Location/FAQ), desktop-only (>=1024px, avoids collision
      risk on tablet widths), hidden while the hero OR the footer is in
      view (a read-only IntersectionObserver only WATCHES those two,
      never writes to them, so the GSAP pin timeline is untouched) and
      cross-faded in only while scrolling through the story sections
      (all 7 of which are cream-background, so dark dots stay legible;
      the rail hides again before it would sit over the dark footer).
      Each dot is a real, keyboard/screen-reader accessible
      <a href="#section"> with its own aria-label — NOT aria-hidden, so
      keyboard/AT users get the same jump-to-section shortcut as mouse
      users.
   ==================================================================== */

  /* 1. Heading mask reveal — REWORKED (was: hidden by default, JS-only
        reveal; a real phone showed headings stuck permanently invisible
        because the reveal trigger never fired).
        Root cause, fixed at the source:
          (a) plain `.pp-reveal-mask` now has NO special styling at all —
              a heading is a normal, always-visible heading unless JS
              specifically arms it (adds `.pp-armed`). If JS never runs
              (disabled, blocked, crashes, whatever), nothing is ever
              hidden in the first place — worst case is "no animation",
              never "missing text".
          (b) only headings still below the fold when the script runs get
              armed at all — one already on screen just stays visible.
        See index.html/en/index.html for the JS that adds `.pp-armed` and
        `.pp-revealed`. */
  .pp-reveal-mask.pp-armed {
    position: relative;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s cubic-bezier(0.65,0,0.35,1);
  }
  .pp-reveal-mask.pp-armed.pp-revealed {
    clip-path: inset(0 -10% 0 -10%);
  }
  .pp-reveal-mask.pp-armed::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -20%;
    width: 30%;
    background: linear-gradient(90deg, rgba(110,33,46,0) 0%, rgba(110,33,46,0.85) 50%, rgba(110,33,46,0) 100%);
    pointer-events: none;
    opacity: 0;
  }
  .pp-reveal-mask.pp-armed.pp-revealed::after {
    animation: pp-wipe-glow 1.1s cubic-bezier(0.65,0,0.35,1) forwards;
  }
  @keyframes pp-wipe-glow {
    0%   { left: -20%; opacity: 1; }
    85%  { opacity: 1; }
    100% { left: 110%; opacity: 0; }
  }

  /* 2. Dish-card cursor tag */
  .pp-cursor-tag {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    pointer-events: none;
    background: var(--pp-pomodoro);
    color: #fff;
    font-family: 'DM Sans', 'Noto Sans TC', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(110,33,46,0.28);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
  }
  .pp-cursor-tag.pp-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  @media (hover: none) {
    .pp-cursor-tag { display: none !important; }
  }

  /* 3. Scroll progress rail */
  .pp-progress-rail {
    display: none;
  }
  @media (min-width: 1024px) {
    .pp-progress-rail {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      position: fixed;
      top: 50%;
      right: 22px;
      transform: translateY(-50%);
      z-index: 90;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }
    .pp-progress-rail.pp-rail-visible {
      opacity: 1;
      pointer-events: auto;
    }
    .pp-progress-dot {
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(26,23,20,0.22);
      transition: background 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
    }
    .pp-progress-dot:hover {
      background: var(--pp-pomodoro-deep);
      transform: scale(1.25);
    }
    .pp-progress-dot.pp-active {
      background: var(--pp-pomodoro);
      transform: scale(1.4);
      box-shadow: 0 0 0 4px rgba(110,33,46,0.18);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .pp-progress-rail, .pp-progress-dot { transition: none !important; }
  }
