@font-face {
      font-family: 'Almalik Fallback';
      src: url('https://db.onlinewebfonts.com/t/3228829a7af663995d841de4e38dad16.woff2') format('woff2'),
           url('https://db.onlinewebfonts.com/t/3228829a7af663995d841de4e38dad16.woff')  format('woff'),
           url('https://db.onlinewebfonts.com/t/3228829a7af663995d841de4e38dad16.ttf')   format('truetype');
      font-weight: 400; font-style: normal; font-display: swap;
    }

    :root {
      --teal-primary: #196f8c; --teal-deep: #0f4a5f; --teal-darkest: #092c3a;
      --stats-blue-a: #1a5f7a; --stats-blue-b: #0d3f55;
      --bg-light: #ffffff; --bg-offwhite: #f8f9fa;
      --text-dark: #1a202c; --text-gray: #4a5568;
      --peacock-gold: #d4af37; --border-soft: rgba(0,0,0,0.08);
      --whatsapp: #25d366;
      --font-brand: 'Almalik', 'Almalik Fallback', 'MedievalSharp', 'Playfair Display', serif;
      --transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
      --ease-soft: cubic-bezier(0.23,1,0.32,1);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg-light);
      color: var(--text-dark); line-height: 1.7; overflow-x: hidden; width: 100%;
    }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; height: auto; display: block; }
    :focus-visible { outline: 2px solid var(--peacock-gold); outline-offset: 3px; }
    .container { width: 95%; max-width: 1500px; margin: 0 auto; }
    .container-mid { width: 94%; max-width: 1280px; margin: 0 auto; }
    .font-almalik { font-family: var(--font-brand); font-weight: 400; }

    .scroll-progress {
      position: fixed; top: 0; left: 0; height: 3px; width: 0%;
      background: linear-gradient(90deg, var(--peacock-gold), #f0d174);
      z-index: 2000; transition: width 0.1s linear;
    }

    /* buttons */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 14px 32px; font-size: 0.9rem; font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; cursor: pointer; border-radius: 4px; transition: var(--transition);
      border: 1.5px solid transparent; position: relative; overflow: hidden; font-family: inherit;
    }
    .btn::before {
      content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
      transform: skewX(-22deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
      transition: left 0.7s var(--ease-soft);
    }
    .btn:hover::before { left: 140%; }
    .btn-solid-gold { background: var(--teal-darkest); color: #fff; box-shadow: 0 4px 15px rgba(9,44,58,0.2); }
    .btn-solid-gold:hover { transform: translateY(-4px); background: var(--teal-primary); }
    .btn-glass-gold { background: transparent; color: var(--teal-darkest); border-color: var(--teal-darkest); }
    .btn-glass-gold:hover { background: var(--teal-darkest); color: #fff; transform: translateY(-4px); }

    /* header */
    header.site {
      background: rgba(255,255,255,0.97); backdrop-filter: blur(14px); position: sticky;
      top: 0; z-index: 1000; border-bottom: 1px solid var(--border-soft);
      box-shadow: 0 4px 20px rgba(0,0,0,0.04); transition: box-shadow 0.4s ease;
    }
    header.site.is-scrolled { box-shadow: 0 6px 30px rgba(9,44,58,0.12); }
    .nav-wrapper {
      display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
      gap: 20px; padding: 12px 2%; transition: padding 0.4s ease;
    }
    header.site.is-scrolled .nav-wrapper { padding-top: 6px; padding-bottom: 6px; }
    .brand-logo-area { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 12px; cursor: pointer; }
    .brand-logo-img { width: 50px; transition: width 0.4s ease, transform 0.6s var(--ease-soft); }
    header.site.is-scrolled .brand-logo-img { width: 42px; }
    .brand-logo-area:hover .brand-logo-img { transform: rotate(-6deg) scale(1.06); }
    .brand-titles { display: flex; flex-direction: column; }
    .brand-name-en { font-family: var(--font-brand); font-size: 1.5rem; font-weight: 400; color: var(--teal-darkest); line-height: 1.15; letter-spacing: 1px; }
    .brand-subtitle-riyadh { font-size: 0.72rem; letter-spacing: 4px; font-weight: 700; color: var(--peacock-gold); text-transform: uppercase; margin-top: 3px; }
    .nav-links { grid-column: 2; justify-self: center; display: flex; list-style: none; gap: 34px; align-items: center; }
    .nav-links a { font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: var(--text-dark); cursor: pointer; position: relative; padding: 6px 0; transition: color 0.3s ease; }
    .nav-links a::after {
      content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 50%;
      background: var(--peacock-gold); transform: translateX(-50%); transition: width 0.35s var(--ease-soft);
    }
    .nav-links a:hover { color: var(--peacock-gold); }
    .nav-links a:hover::after, .nav-links a.is-active::after { width: 100%; }
    .nav-links a.is-active { color: var(--peacock-gold); }
    .nav-cta { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 16px; }
    .nav-phone { font-size: 0.88rem; font-weight: 700; color: var(--teal-darkest); white-space: nowrap; }
    .nav-phone:hover { color: var(--peacock-gold); }
    .nav-reserve {
      padding: 10px 24px; border: 1.5px solid var(--peacock-gold); border-radius: 4px;
      font-size: 0.78rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--teal-darkest); transition: var(--transition); white-space: nowrap;
    }
    .nav-reserve:hover { background: var(--peacock-gold); color: #fff; transform: translateY(-2px); }
    .header-actions { display: none; align-items: center; gap: 12px; }
    .hamburger-btn { display: flex; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; z-index: 1001; padding: 4px; }
    .hamburger-btn span { width: 30px; height: 3px; background: var(--teal-darkest); transition: 0.3s; border-radius: 2px; }
    .hamburger-btn.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .hamburger-btn.active span:nth-child(2) { opacity: 0; }
    .hamburger-btn.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
    .mobile-drawer {
      position: fixed; top: 0; right: -320px; width: 290px; height: 100vh; background: #fff;
      box-shadow: -5px 0 30px rgba(0,0,0,0.1); display: flex; flex-direction: column;
      padding: 100px 30px 40px; transition: right 0.45s var(--ease-soft); z-index: 999;
      border-left: 3px solid var(--peacock-gold); overflow-y: auto;
    }
    .mobile-drawer.open { right: 0; }
    .mobile-drawer a { font-size: 1.15rem; font-weight: 700; color: var(--teal-darkest); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 22px; border-bottom: 1px solid var(--border-soft); padding-bottom: 10px; transition: 0.3s; }
    .mobile-drawer a:hover { color: var(--peacock-gold); padding-left: 10px; }
    .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: 0.3s; z-index: 998; backdrop-filter: blur(3px); }
    .overlay.open { opacity: 1; pointer-events: all; }

    /* hero */
    .page-hero { position: relative; padding: 130px 0 110px; text-align: center; color: #fff; overflow: hidden; background: var(--teal-darkest); }
    .page-hero .hero-bg {
      position: absolute; inset: -4%;
      background-image: url('https://images.unsplash.com/photo-1563379091339-03b21ab4a4f8?auto=format&fit=crop&w=1920&q=80');
      background-size: cover; background-position: center;
      animation: kenburns 30s ease-in-out infinite alternate; will-change: transform;
    }
    @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate3d(-1.5%,-2%,0); } }
    .page-hero::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(circle at center, rgba(9,44,58,0.42) 0%, rgba(9,44,58,0.9) 100%);
    }
    .page-hero .container { position: relative; z-index: 2; }
    .page-hero .kicker { display: inline-block; color: var(--peacock-gold); font-size: 0.9rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 18px; }
    .page-hero h1 { font-family: var(--font-brand); font-size: clamp(2.3rem,5vw,4.2rem); font-weight: 400; line-height: 1.2; margin-bottom: 14px; letter-spacing: 1.5px; text-shadow: 0 6px 30px rgba(0,0,0,0.6); }
    .page-hero .lede { font-family: 'Playfair Display', serif; font-size: clamp(1rem,1.9vw,1.45rem); color: rgba(255,255,255,0.93); max-width: 760px; margin: 0 auto; }
    .hero-rule { width: 0; height: 1px; background: var(--peacock-gold); margin: 22px auto 24px; opacity: 0.85; animation: ruleGrow 1.4s var(--ease-soft) 0.8s forwards; }
    @keyframes ruleGrow { to { width: 180px; } }
    .crumb { position: relative; z-index: 2; font-size: 0.82rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 26px; }
    .crumb a:hover { color: var(--peacock-gold); }

    [data-load] { opacity: 0; transform: translateY(30px); animation: riseIn 1s var(--ease-soft) forwards; }
    [data-load="1"] { animation-delay: .15s; } [data-load="2"] { animation-delay: .35s; }
    [data-load="3"] { animation-delay: .55s; } [data-load="4"] { animation-delay: .75s; }
    @keyframes riseIn { to { opacity: 1; transform: none; } }

    /* ============ MENU TABS (sticky under the header) ============ */
    .menu-tabs {
      position: sticky; top: 74px; z-index: 900;
      background: rgba(255,255,255,0.97); backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-soft);
      transition: top 0.4s ease;
    }
    .menu-tabs .inner { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 14px 16px; }
    .mtab {
      padding: 10px 26px; border-radius: 100px; font-size: 0.86rem; font-weight: 700;
      letter-spacing: 1.2px; text-transform: uppercase; color: var(--teal-darkest);
      border: 1.5px solid var(--border-soft); transition: var(--transition); white-space: nowrap;
    }
    .mtab:hover { border-color: var(--peacock-gold); color: var(--peacock-gold); }
    .mtab.is-current { background: var(--teal-darkest); color: #fff; border-color: var(--teal-darkest); }

    /* search */
    .menu-search-wrap { display: flex; justify-content: center; padding: 0 16px 16px; }
    .menu-search {
      width: 100%; max-width: 460px; font-family: inherit; font-size: 0.98rem;
      padding: 12px 18px; border: 1.5px solid var(--border-soft); border-radius: 100px;
      background: #fff; transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .menu-search:focus { outline: none; border-color: var(--peacock-gold); box-shadow: 0 0 0 4px rgba(212,175,55,0.14); }

    /* ============ MENU BODY ============ */
    .menu-body { padding: 80px 0 40px; }
    .menu-section { padding: 0 0 30px; scroll-margin-top: 190px; }
    .menu-section-head { text-align: center; max-width: 820px; margin: 0 auto 50px; padding-top: 40px; }
    .menu-section-head h2 {
      font-family: 'Playfair Display', serif; font-size: clamp(2rem,3.6vw,3.1rem);
      color: var(--teal-darkest); line-height: 1.2; margin-bottom: 14px;
    }
    .sec-ar { font-family: 'Cairo', sans-serif; font-size: 0.6em; color: var(--peacock-gold); font-weight: 700; margin-left: 10px; }
    .menu-section-head p { color: var(--text-gray); font-size: 1.08rem; line-height: 1.8; }

    /* two-column masonry so long categories don't leave big gaps */
    .cat-columns { columns: 2; column-gap: 30px; }
    .menu-cat {
      break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
      display: inline-block; width: 100%;
      background: #fff; border: 1px solid var(--border-soft); border-radius: 12px;
      padding: 38px 36px; margin-bottom: 30px; box-shadow: 0 6px 26px rgba(0,0,0,0.05);
      transition: box-shadow 0.5s ease, border-color 0.5s ease;
    }
    .menu-cat:hover { box-shadow: 0 20px 46px rgba(9,44,58,0.11); border-color: rgba(212,175,55,0.4); }

    .cat-name {
      font-family: 'Playfair Display', serif; font-size: 1.75rem; color: var(--teal-darkest);
      text-align: center; padding-bottom: 18px; margin-bottom: 8px;
      border-bottom: 2px solid var(--peacock-gold);
    }
    .cat-ar { display: block; font-family: 'Cairo', sans-serif; font-size: 0.62em; color: var(--peacock-gold); font-weight: 700; margin-top: 4px; }

    .dish { padding: 20px 0; border-bottom: 1px solid var(--border-soft); }
    .dish:last-child { border-bottom: none; padding-bottom: 4px; }
    .dish-head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
    .dish-name { font-size: 1.08rem; font-weight: 600; color: var(--teal-darkest); line-height: 1.4; }
    .dish-ar { font-family: 'Cairo', sans-serif; font-size: 0.9em; font-weight: 600; color: var(--text-gray); }
    .dish-price { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; color: var(--teal-primary); white-space: nowrap; }
    .dish-price abbr { font-size: 0.62em; font-weight: 600; letter-spacing: 1px; text-decoration: none; color: var(--text-gray); }
    .dish-desc { font-size: 0.96rem; color: var(--text-gray); line-height: 1.7; margin-top: 6px; }

    .dish-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .dish-meta li {
      font-size: 0.76rem; font-weight: 600; letter-spacing: 0.4px;
      padding: 4px 12px; border-radius: 100px; background: var(--bg-offwhite);
      color: var(--text-gray); border: 1px solid var(--border-soft);
    }
    .dish-meta .m-kcal { color: var(--teal-primary); border-color: rgba(25,111,140,0.25); background: rgba(25,111,140,0.06); }
    .dish-meta .m-allergen { color: #9a6a00; border-color: rgba(212,175,55,0.4); background: rgba(212,175,55,0.1); }

    .dish.is-hidden { display: none; }
    .menu-cat.is-hidden, .menu-section.is-hidden { display: none; }

    .no-results { display: none; text-align: center; padding: 60px 20px; color: var(--text-gray); font-size: 1.1rem; }
    .no-results.show { display: block; }

    /* allergen notice */
    .allergen-note {
      background: var(--bg-offwhite); border-left: 3px solid var(--peacock-gold);
      border-radius: 0 8px 8px 0; padding: 24px 28px; margin: 20px auto 0; max-width: 900px;
    }
    .allergen-note p { font-size: 0.97rem; color: var(--text-gray); line-height: 1.75; }
    .allergen-note strong { color: var(--teal-darkest); }

    /* CTA band */
    .menu-cta { background: var(--bg-light); padding: 40px 0 90px; }
    .cta-band {
      background: linear-gradient(135deg, var(--stats-blue-a) 0%, var(--stats-blue-b) 100%);
      border-radius: 22px; padding: 76px 50px; color: #fff; text-align: center;
      box-shadow: 0 34px 80px rgba(9,44,58,0.28); position: relative; overflow: hidden;
    }
    .cta-band::after {
      content: ''; position: absolute; width: 620px; height: 620px; right: -200px; top: -260px;
      background: radial-gradient(circle, rgba(255,255,255,0.07), transparent 70%); pointer-events: none;
    }
    .cta-band > * { position: relative; z-index: 2; }
    .cta-band h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.7rem,3vw,2.6rem); margin-bottom: 14px; }
    .cta-band p { color: rgba(255,255,255,0.78); max-width: 640px; margin: 0 auto 34px; font-size: 1.05rem; }
    .cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
    .btn-on-dark { background: #fff; color: var(--teal-darkest); }
    .btn-on-dark:hover { background: var(--peacock-gold); color: #fff; transform: translateY(-4px); }
    .btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
    .btn-outline-white:hover { background: #fff; color: var(--teal-darkest); transform: translateY(-4px); }

    /* footer */
    footer { background: var(--teal-darkest); padding: 90px 0 40px; color: rgba(255,255,255,0.7); }
    .footer-columns-wrap { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 60px; }
    .footer-col-item h4 { font-size: 1.05rem; color: #fff; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; }
    .footer-col-item .brand-name-en { margin-bottom: 15px; display: block; font-size: 1.8rem; color: #fff; }
    .footer-col-item ul { list-style: none; display: flex; flex-direction: column; gap: 15px; }
    .footer-col-item a { color: rgba(255,255,255,0.7); font-size: 0.95rem; transition: var(--transition); display: inline-block; }
    .footer-col-item a:hover { color: var(--peacock-gold); transform: translateX(8px); }
    .bottom-copyright-strip { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; display: flex; justify-content: space-between; font-size: 0.9rem; }

    .wa-float {
      position: fixed; right: 26px; bottom: 84px; width: 54px; height: 54px; z-index: 890;
      border-radius: 50%; background: var(--whatsapp); color: #fff; display: grid; place-items: center;
      box-shadow: 0 10px 28px rgba(37,211,102,0.4); transition: transform 0.4s var(--ease-soft);
    }
    .wa-float:hover { transform: scale(1.08) translateY(-2px); }
    .wa-float svg { width: 28px; height: 28px; fill: currentColor; }

    .to-top {
      position: fixed; right: 26px; bottom: 26px; width: 46px; height: 46px; z-index: 890;
      border-radius: 50%; border: 1.5px solid var(--peacock-gold); background: var(--teal-darkest);
      color: var(--peacock-gold); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center;
      opacity: 0; pointer-events: none; transform: translateY(14px);
      transition: opacity 0.4s ease, transform 0.4s var(--ease-soft), background 0.3s ease, color 0.3s ease;
    }
    .to-top.show { opacity: 1; pointer-events: all; transform: none; }
    .to-top:hover { background: var(--peacock-gold); color: var(--teal-darkest); }

    .sc-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft); }
    .sc-reveal.visible { opacity: 1; transform: translateY(0); }
    .sc-fade { opacity: 0; transition: opacity 1.2s ease-out; }
    .sc-fade.visible { opacity: 1; }
    .d-1 { transition-delay: .1s; } .d-2 { transition-delay: .2s; } .d-3 { transition-delay: .3s; } .d-4 { transition-delay: .4s; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .page-hero .hero-bg, .hero-rule { animation: none !important; }
      .hero-rule { width: 180px; }
      [data-load], .sc-reveal, .sc-fade { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
    }

    @media (max-width: 1240px) {
      .nav-links { gap: 24px; } .nav-links a { font-size: 0.82rem; } .nav-phone { display: none; }
    }
    @media (max-width: 990px) {
      .nav-wrapper { grid-template-columns: 1fr auto; }
      .nav-links, .nav-cta { display: none; }
      .header-actions { grid-column: 2; justify-self: end; display: flex; }
      .menu-tabs { top: 63px; }
      .menu-section { scroll-margin-top: 170px; }
      .page-hero { padding: 96px 0 80px; }
      .menu-body { padding: 50px 0 30px; }
      .cat-columns { columns: 1; }
      .menu-cat { padding: 30px 24px; }
      .cta-band { padding: 54px 26px; border-radius: 16px; }
      .footer-columns-wrap { grid-template-columns: 1fr; gap: 40px; }
      .bottom-copyright-strip { flex-direction: column; gap: 15px; text-align: center; }
    }
    @media (max-width: 560px) {
      .mtab { padding: 8px 18px; font-size: 0.78rem; }
      .dish-head { flex-direction: column; gap: 2px; }
      .dish-price { align-self: flex-start; }
      .brand-name-en { font-size: 1.2rem; }
    }

    /* print — guests and staff do print menus */
    @media print {
      header.site, .menu-tabs, .page-hero, .menu-cta, footer, .wa-float, .to-top, .overlay, .mobile-drawer { display: none !important; }
      body { color: #000; }
      .cat-columns { columns: 2; }
      .menu-cat { border: none; box-shadow: none; padding: 0 0 18px; break-inside: avoid; }
      .sc-reveal, .sc-fade { opacity: 1 !important; transform: none !important; }
      a[href]:after { content: ''; }
    }

/* ============================================================
   DISH THUMBNAILS (added when the CMS gained an image field)
   Only applies to dishes that actually have a photo, so text-only
   dishes keep their original layout untouched.
   ============================================================ */
.dish.has-img {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 18px;
  align-items: start;
}
.dish-thumb {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-offwhite);
  border: 1px solid var(--border-soft);
  transition: transform 0.5s var(--ease-soft);
}
.dish.has-img:hover .dish-thumb { transform: scale(1.04); }
.dish-text { min-width: 0; }

@media (max-width: 560px) {
  .dish.has-img { grid-template-columns: 64px 1fr; gap: 14px; }
  .dish-thumb { width: 64px; height: 64px; }
}

@media print {
  .dish-thumb { display: none; }
  .dish.has-img { display: block; }
}

/* ============================================================
   LANGUAGE SWITCH
   Replaces the phone number + Reserve pair in the header.
   ============================================================ */
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 76px; padding: 9px 22px;
  border: 1.5px solid var(--border-soft); border-radius: 6px;
  font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem; font-weight: 600;
  color: var(--teal-darkest); background: #fff;
  transition: var(--transition); white-space: nowrap;
}
.lang-switch:hover {
  border-color: var(--peacock-gold); color: var(--peacock-gold);
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(212,175,55,0.2);
}

/* Pinned to the bottom of the mobile drawer.
   The drawer is already flex-column, so margin-top:auto does it. */
.drawer-footer {
  margin-top: auto; padding-top: 24px;
  border-top: 1px solid var(--border-soft);
}
.drawer-footer .lang-switch { width: 100%; }

@media (max-width: 990px) {
  .nav-cta { display: none; }
}

/* ============================================================
   HOME PAGE
   ============================================================ */
.hero-open { position: relative; padding: 190px 0 170px; text-align: center; color: #fff; overflow: hidden; background: var(--teal-darkest); }
.hero-open .hero-bg { position: absolute; inset: -4%; background-size: cover; background-position: center; animation: kenburns 28s ease-in-out infinite alternate; will-change: transform; }
.hero-open::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, rgba(9,44,58,0.38) 0%, rgba(9,44,58,0.88) 100%); }
.hero-open .container { position: relative; z-index: 2; }
.hero-kicker-tag { display: inline-block; color: var(--peacock-gold); font-size: 0.95rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 20px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hero-open h1 { font-family: var(--font-brand); font-size: 5.5rem; font-weight: 400; text-shadow: 0 6px 30px rgba(0,0,0,0.6); line-height: 1.15; margin-bottom: 8px; letter-spacing: 2px; }
.hero-riyadh-subtitle { font-size: 1.25rem; font-weight: 800; letter-spacing: 8px; color: var(--peacock-gold); text-transform: uppercase; margin-bottom: 22px; }
.hero-open h2 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: rgba(255,255,255,0.95); margin-bottom: 45px; font-weight: 400; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hero-actions-row { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.scroll-cue { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,0.6); font-size: 0.7rem; letter-spacing: 3px; text-transform: uppercase; }
.scroll-cue i { display: block; width: 1px; height: 46px; background: linear-gradient(to bottom, var(--peacock-gold), transparent); animation: cueDrop 2.2s ease-in-out infinite; }
@keyframes cueDrop { 0%,100% { opacity: .25; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } }

.about-home-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: center; }
.about-home-content p { font-size: 1.1rem; margin-bottom: 24px; line-height: 1.9; color: var(--text-gray); }
.about-home-img { border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.15); position: relative; }
.about-home-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-soft); }
.about-home-img:hover img { transform: scale(1.08); }
.about-home-img::after { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(212,175,55,0); transition: border-color .6s ease; pointer-events: none; border-radius: 4px; }
.about-home-img:hover::after { border-color: rgba(212,175,55,0.75); }

.dishes-wrapper { width: 100%; overflow: hidden; position: relative; padding-bottom: 30px; }
.dishes-wrapper::before, .dishes-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 3; pointer-events: none; }
.dishes-wrapper::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.dishes-wrapper::after { right: 0; background: linear-gradient(to left, #fff, transparent); }
.dishes-carousel { display: flex; gap: 25px; width: max-content; animation: marquee 40s linear infinite; }
.dishes-carousel:hover { animation-play-state: paused; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 12.5px)); } }
.dish-card { width: clamp(320px, 25vw, 420px); height: 480px; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 12px 35px rgba(0,0,0,0.1); flex-shrink: 0; transition: transform .5s var(--ease-soft), box-shadow .5s ease; }
.dish-card:hover { transform: translateY(-10px); box-shadow: 0 26px 55px rgba(9,44,58,0.22); }
.dish-img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-soft); }
.dish-card:hover .dish-img { transform: scale(1.1); }
.dish-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 35px 30px; }
.dish-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: #fff; margin-bottom: 8px; }
.dish-card .dish-desc { color: rgba(255,255,255,0.85); font-size: 1rem; line-height: 1.6; transform: translateY(6px); opacity: .85; transition: transform .5s var(--ease-soft), opacity .5s ease; }
.dish-card:hover .dish-desc { transform: none; opacity: 1; }

#peacock-group { background-color: var(--bg-offwhite); }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 50px; }
.portfolio-card { background: #fff; border: 1px solid var(--border-soft); padding: 40px 30px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.04); position: relative; overflow: hidden; transition: transform .5s var(--ease-soft), box-shadow .5s ease, border-color .5s ease; }
.portfolio-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--peacock-gold); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-soft); }
.portfolio-card:hover::before { transform: scaleY(1); transform-origin: top; }
.portfolio-card:hover { transform: translateY(-10px); box-shadow: 0 24px 46px rgba(9,44,58,0.13); border-color: rgba(212,175,55,0.5); }
.portfolio-card h4 { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--teal-darkest); margin-bottom: 10px; }
.portfolio-card span { font-size: 0.85rem; color: var(--text-gray); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }

.stats-section { background: var(--bg-light); padding: 40px 0 90px; }
.stats-band { background: linear-gradient(135deg, var(--stats-blue-a) 0%, var(--stats-blue-b) 100%); border-radius: 22px; padding: 110px 50px; color: #fff; box-shadow: 0 34px 80px rgba(9,44,58,0.28); position: relative; overflow: hidden; }
.stats-band::after { content: ''; position: absolute; width: 620px; height: 620px; right: -200px; top: -260px; background: radial-gradient(circle, rgba(255,255,255,0.07), transparent 70%); pointer-events: none; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; position: relative; z-index: 2; }
.stat-box h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(3.4rem, 6vw, 6rem); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.02em; margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.stat-box .stat-label { display: block; font-size: clamp(1.1rem, 1.6vw, 1.6rem); font-weight: 600; color: #fff; margin-bottom: 10px; line-height: 1.3; }
.stat-box .stat-caption { display: block; font-size: 0.95rem; color: rgba(255,255,255,0.62); line-height: 1.5; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.container-narrow { width: 92%; max-width: 1000px; margin: 0 auto; }
.story-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; align-items: center; }
.story-content h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 3vw, 2.8rem); color: var(--teal-darkest); line-height: 1.25; margin-bottom: 24px; }
.story-content p { font-size: 1.08rem; color: var(--text-gray); line-height: 1.9; margin-bottom: 22px; }
.story-img { border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.15); position: relative; }
.story-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-soft); }
.story-img:hover img { transform: scale(1.07); }
.story-img::after { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(212,175,55,0); transition: border-color .6s ease; pointer-events: none; border-radius: 4px; }
.story-img:hover::after { border-color: rgba(212,175,55,0.75); }
.pull-quote { margin-top: 34px; padding: 26px 30px; border-left: 3px solid var(--peacock-gold); background: var(--bg-offwhite); border-radius: 0 8px 8px 0; font-family: 'Playfair Display', serif; font-size: 1.3rem; line-height: 1.6; color: var(--teal-darkest); }

#journey { background: var(--bg-offwhite); }
.timeline { position: relative; margin-top: 70px; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent, rgba(212,175,55,0.55) 8%, rgba(212,175,55,0.55) 92%, transparent); transform: translateX(-50%); }
.tl-item { position: relative; width: 50%; padding: 0 55px 60px 0; }
.tl-item:nth-child(even) { margin-left: 50%; padding: 0 0 60px 55px; }
.tl-item .tl-dot { position: absolute; top: 12px; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--peacock-gold); border: 4px solid var(--bg-offwhite); box-shadow: 0 0 0 3px rgba(212,175,55,0.25); }
.tl-item:nth-child(even) .tl-dot { right: auto; left: -9px; }
.tl-item:nth-child(odd) { text-align: right; }
.tl-year { font-family: 'Playfair Display', serif; font-size: 2.6rem; color: var(--peacock-gold); line-height: 1; margin-bottom: 8px; }
.tl-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 10px; padding: 28px 30px; box-shadow: 0 6px 24px rgba(0,0,0,0.05); transition: transform .5s var(--ease-soft), box-shadow .5s ease; }
.tl-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(9,44,58,0.12); }
.tl-card h4 { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--teal-darkest); margin-bottom: 6px; }
.tl-card .tl-place { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--peacock-gold); margin-bottom: 12px; }
.tl-card p { font-size: 0.98rem; color: var(--text-gray); line-height: 1.75; }

.property { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; padding: 70px 0; border-bottom: 1px solid var(--border-soft); }
.property:last-of-type { border-bottom: none; }
.property.flip .prop-media { order: 2; }
.prop-media { border-radius: 12px; overflow: hidden; box-shadow: 0 26px 55px rgba(9,44,58,0.16); position: relative; }
.prop-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 1.2s var(--ease-soft); }
.prop-media:hover img { transform: scale(1.07); }
.prop-body h3 { font-family: 'Playfair Display', serif; font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: var(--teal-darkest); margin-bottom: 8px; }
.prop-meta { display: block; font-size: 0.82rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--peacock-gold); margin-bottom: 20px; }
.prop-body p { font-size: 1.03rem; color: var(--text-gray); line-height: 1.85; margin-bottom: 18px; }
.facility-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0 8px; }
.facility { border: 1px solid var(--border-soft); border-radius: 8px; padding: 14px 20px; background: #fff; transition: border-color .4s ease, transform .4s var(--ease-soft); }
.facility:hover { border-color: rgba(212,175,55,0.6); transform: translateY(-3px); }
.facility strong { display: block; font-family: 'Playfair Display', serif; font-size: 1.7rem; color: var(--teal-primary); line-height: 1; }
.facility span { font-size: 0.78rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-gray); }
.occasion-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 24px; margin-top: 18px; }
.occasion-list li { font-size: 0.95rem; color: var(--text-gray); padding-left: 18px; position: relative; }
.occasion-list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--peacock-gold); }

#cuisine { background: var(--bg-offwhite); }
.cuisine-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1000px; margin: 0 auto; }
.cuisine-pill { background: #fff; border: 1px solid var(--border-soft); border-radius: 100px; padding: 12px 26px; font-size: 0.98rem; font-weight: 600; color: var(--teal-darkest); transition: transform .4s var(--ease-soft), border-color .4s ease, background .4s ease, color .4s ease; }
.cuisine-pill:hover { transform: translateY(-4px); background: var(--teal-darkest); color: #fff; border-color: var(--teal-darkest); }
.cuisine-strap { text-align: center; margin-top: 55px; font-family: 'Playfair Display', serif; font-size: clamp(1.3rem, 2.4vw, 2rem); color: var(--teal-darkest); }

.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; margin-top: 55px; }
.value-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 10px; padding: 40px 32px; box-shadow: 0 5px 20px rgba(0,0,0,0.04); position: relative; overflow: hidden; transition: transform .5s var(--ease-soft), box-shadow .5s ease, border-color .5s ease; }
.value-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--peacock-gold); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-soft); }
.value-card:hover::before { transform: scaleY(1); transform-origin: top; }
.value-card:hover { transform: translateY(-10px); box-shadow: 0 24px 46px rgba(9,44,58,0.13); border-color: rgba(212,175,55,0.5); }
.value-card h4 { font-family: 'Playfair Display', serif; font-size: 1.45rem; color: var(--teal-darkest); margin-bottom: 12px; }
.value-card p { font-size: 0.98rem; color: var(--text-gray); line-height: 1.75; }

.closing { background: var(--bg-offwhite); text-align: center; }
.closing h2 { font-family: var(--font-brand); font-size: clamp(2rem, 4vw, 3.4rem); color: var(--teal-darkest); font-weight: 400; margin-bottom: 12px; line-height: 1.25; }
.closing .est { font-size: 0.85rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--peacock-gold); margin-bottom: 26px; }
.closing .strap { font-family: 'Playfair Display', serif; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--text-gray); max-width: 760px; margin: 0 auto 40px; }
.closing-actions { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }

.sc-left { opacity: 0; transform: translateX(-45px); transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft); }
.sc-left.visible { opacity: 1; transform: none; }
.sc-right { opacity: 0; transform: translateX(45px); transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft); }
.sc-right.visible { opacity: 1; transform: none; }
.sc-scale { opacity: 0; transform: scale(0.92); transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft); }
.sc-scale.visible { opacity: 1; transform: scale(1); }

/* ============================================================
   RESERVATION FORM
   ============================================================ */
:root { --whatsapp: #25d366; --whatsapp-dark: #128c7e; }
.btn-whatsapp { background: var(--whatsapp); color: #fff; font-size: 1rem; padding: 18px 40px; box-shadow: 0 8px 24px rgba(37,211,102,0.32); }
.btn-whatsapp:hover { background: var(--whatsapp-dark); transform: translateY(-4px); box-shadow: 0 14px 34px rgba(18,140,126,0.38); }
.btn-whatsapp svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }

#booking { background: var(--bg-offwhite); }
.booking-shell { display: grid; grid-template-columns: 1.15fr 0.85fr; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(9,44,58,0.16); background: #fff; }
.booking-form-side { padding: 56px 52px; }
.booking-info-side { padding: 56px 46px; color: #fff; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--stats-blue-a) 0%, var(--stats-blue-b) 100%); }
.booking-info-side::after { content: ''; position: absolute; width: 520px; height: 520px; right: -220px; top: -240px; background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%); pointer-events: none; }
.booking-info-side > * { position: relative; z-index: 2; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.form-row.single { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; }
.field label { font-size: 0.78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal-darkest); margin-bottom: 9px; }
.field label .req { color: var(--peacock-gold); margin-left: 3px; }
.field input, .field select, .field textarea { font-family: inherit; font-size: 1rem; color: var(--text-dark); padding: 14px 16px; border: 1.5px solid var(--border-soft); border-radius: 6px; background: #fff; width: 100%; transition: border-color .3s ease, box-shadow .3s ease; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--peacock-gold); box-shadow: 0 0 0 4px rgba(212,175,55,0.14); }
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.field .hint { font-size: 0.82rem; color: var(--text-gray); margin-top: 7px; }
.field.has-error input, .field.has-error select { border-color: #d64545; box-shadow: 0 0 0 4px rgba(214,69,69,0.1); }
.field .error-msg { display: none; font-size: 0.82rem; color: #d64545; margin-top: 7px; font-weight: 600; }
.field.has-error .error-msg { display: block; }
/* honeypot — hidden from people, visible to bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.submit-row { margin-top: 34px; }
.submit-row .btn { width: 100%; }
.submit-note { font-size: 0.88rem; color: var(--text-gray); text-align: center; margin-top: 16px; line-height: 1.6; }
.booking-info-side h3 { font-family: 'Playfair Display', serif; font-size: 1.8rem; margin-bottom: 10px; }
.booking-info-side .info-sub { color: rgba(255,255,255,0.7); font-size: 0.98rem; margin-bottom: 36px; line-height: 1.7; }
.info-block { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.info-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.info-block h4 { font-size: 0.78rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--peacock-gold); margin-bottom: 12px; }
.info-block p { font-size: 1rem; color: rgba(255,255,255,0.9); line-height: 1.75; }
.info-block a { color: #fff; border-bottom: 1px solid rgba(212,175,55,0.6); transition: color .3s ease; }
.info-block a:hover { color: var(--peacock-gold); }

.confirm-panel { display: none; text-align: center; padding: 40px 10px; }
.confirm-panel.show { display: block; animation: riseIn .7s var(--ease-soft) both; }
.confirm-check { width: 76px; height: 76px; margin: 0 auto 24px; border-radius: 50%; background: rgba(37,211,102,0.12); color: var(--whatsapp); display: grid; place-items: center; font-size: 2.2rem; }
.confirm-panel h3 { font-family: 'Playfair Display', serif; font-size: 1.9rem; color: var(--teal-darkest); margin-bottom: 12px; }
.confirm-panel > p { color: var(--text-gray); font-size: 1.05rem; line-height: 1.8; margin-bottom: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }
.summary-card { text-align: left; background: var(--bg-offwhite); border: 1px solid var(--border-soft); border-radius: 10px; padding: 26px 28px; max-width: 520px; margin: 0 auto 30px; }
.summary-card dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; }
.summary-card dt { font-size: 0.76rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-gray); padding-top: 3px; }
.summary-card dd { font-size: 1rem; color: var(--teal-darkest); font-weight: 600; }
.confirm-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.link-restart { background: none; border: none; font-family: inherit; font-size: 0.92rem; font-weight: 700; color: var(--text-gray); cursor: pointer; text-decoration: underline; padding: 12px; }
.link-restart:hover { color: var(--teal-darkest); }

.alt-contact { text-align: center; }
.alt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; margin-top: 50px; }
.alt-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 10px; padding: 40px 32px; box-shadow: 0 5px 20px rgba(0,0,0,0.04); position: relative; overflow: hidden; text-align: left; transition: transform .5s var(--ease-soft), box-shadow .5s ease, border-color .5s ease; }
.alt-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--peacock-gold); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-soft); }
.alt-card:hover::before { transform: scaleY(1); transform-origin: top; }
.alt-card:hover { transform: translateY(-10px); box-shadow: 0 24px 46px rgba(9,44,58,0.13); border-color: rgba(212,175,55,0.5); }
.alt-card h4 { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--teal-darkest); margin-bottom: 10px; }
.alt-card p { font-size: 0.98rem; color: var(--text-gray); line-height: 1.75; }
.alt-card a.strong { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--teal-primary); }
.alt-card a.strong:hover { color: var(--peacock-gold); }

.wa-float { position: fixed; right: 26px; bottom: 84px; width: 54px; height: 54px; z-index: 890; border-radius: 50%; background: var(--whatsapp); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(37,211,102,0.4); transition: transform .4s var(--ease-soft); }
.wa-float:hover { transform: scale(1.08) translateY(-2px); }
.wa-float svg { width: 28px; height: 28px; fill: currentColor; }

/* ============================================================
   HOURS PAGE
   ============================================================ */
.hours-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 30px; margin-top: 50px; }
.hours-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.05); transition: transform .5s var(--ease-soft), box-shadow .5s ease; }
.hours-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(9,44,58,0.13); }
.hours-card.is-today { border-color: var(--peacock-gold); box-shadow: 0 12px 40px rgba(212,175,55,0.22); }
.hours-head { background: linear-gradient(135deg, var(--stats-blue-a) 0%, var(--stats-blue-b) 100%); color: #fff; padding: 26px 30px; }
.hours-head h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 4px; }
.hours-head .hours-span { font-size: 0.82rem; letter-spacing: 2px; text-transform: uppercase; color: var(--peacock-gold); font-weight: 700; }
.hours-list { list-style: none; padding: 10px 30px 26px; }
.hours-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.hours-list li:last-child { border-bottom: none; }
.service-name { font-weight: 700; color: var(--teal-darkest); font-size: 1.02rem; }
.service-time { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--teal-primary); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.today-pill { display: inline-block; margin-top: 8px; padding: 3px 12px; border-radius: 100px; background: var(--peacock-gold); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; }
.contact-detail { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-soft); }
.contact-detail:last-child { border-bottom: none; }
.contact-detail h3 { font-size: 0.8rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--peacock-gold); margin-bottom: 12px; }
.contact-detail p, .contact-detail a { font-size: 1.05rem; color: var(--text-gray); line-height: 1.8; }
.contact-detail a { color: var(--teal-primary); font-weight: 600; }
.contact-detail a:hover { color: var(--peacock-gold); }
.map-frame { border-radius: 14px; overflow: hidden; box-shadow: 0 26px 55px rgba(9,44,58,0.16); border: 1px solid var(--border-soft); }
.map-frame iframe { display: block; width: 100%; height: 460px; border: 0; }

/* ============================================================
   SOCIAL ICONS
   ============================================================ */
.social-row { display: flex; gap: 12px; flex-wrap: wrap; }
.social-link { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.85); transition: transform .4s var(--ease-soft), background .3s ease, color .3s ease, border-color .3s ease; }
.social-link svg { width: 19px; height: 19px; fill: currentColor; }
.social-link:hover { background: var(--peacock-gold); border-color: var(--peacock-gold); color: #fff; transform: translateY(-4px); }
.footer-col-item .social-row a:hover { transform: translateY(-4px); }

/* ============================================================
   RESPONSIVE — additions for the new sections
   ============================================================ */
@media (max-width: 990px) {
  .hero-open { padding: 130px 0 120px; }
  .hero-open h1 { font-size: 3.5rem; }
  .hero-open h2 { font-size: 1.35rem; }
  .about-home-grid, .story-grid { grid-template-columns: 1fr; gap: 48px; }
  .property, .property.flip { grid-template-columns: 1fr; gap: 34px; padding: 46px 0; }
  .property.flip .prop-media { order: 0; }
  .occasion-list { grid-template-columns: 1fr; }
  .timeline::before { left: 9px; transform: none; }
  .tl-item, .tl-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 44px 42px; text-align: left; }
  .tl-item .tl-dot, .tl-item:nth-child(even) .tl-dot { left: 1px; right: auto; }
  .stats-section { padding: 20px 0 60px; }
  .stats-band { padding: 64px 28px; border-radius: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 52px 24px; }
  .dish-card { width: clamp(280px, 70vw, 350px); height: 400px; }
  .booking-shell { grid-template-columns: 1fr; border-radius: 14px; }
  .booking-form-side, .booking-info-side { padding: 40px 28px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .map-frame iframe { height: 340px; }
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr; gap: 46px; }
  .hero-open h1 { font-size: 2.6rem; }
  .hero-riyadh-subtitle { letter-spacing: 5px; font-size: 1rem; }
  .form-row { grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
  .summary-card dl { grid-template-columns: 1fr; gap: 4px 0; }
  .summary-card dd { margin-bottom: 12px; }
  .facility-row { gap: 10px; }
  .facility { padding: 12px 16px; }
  .hours-list { padding: 6px 20px 20px; }
}

/* ============================================================
   FIXES — Sept review
   ============================================================ */

/* 1. Section headings.
   This base rule was lost when the page stylesheets were merged,
   so every .section-title-wrap fell back to left-aligned. */
.section-title-wrap { text-align: center; margin-bottom: 60px; }
.section-title-wrap h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); color: var(--teal-darkest); font-weight: 700; line-height: 1.2; margin-bottom: 20px; }
.section-title-wrap p { color: var(--text-gray); font-size: 1.15rem; max-width: 820px; margin: 0 auto; line-height: 1.8; }
.section-eyebrow { font-size: 0.9rem; letter-spacing: 4px; text-transform: uppercase; color: var(--peacock-gold); font-weight: 800; margin-bottom: 15px; display: block; }

/* 2. Social icons.
   `.footer-col-item a` is specificity 0,1,1 and was beating
   `.social-link` at 0,1,0 — so display:inline-block won and the
   grid centring never applied, letting the icon sit off-centre.
   Matching on two classes puts it back at 0,2,1. */
.social-row a.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  padding: 0;
  flex: 0 0 42px;
  border-radius: 50%;
  overflow: hidden;
}
.social-row a.social-link svg { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.footer-col-item .social-row a:hover { transform: translateY(-4px); }

/* ============================================================
   3. HOMEPAGE HERO — full-bleed, header sits over the photo
   The header is taken out of flow so the hero starts at the very
   top of the viewport, then fades to solid white on scroll.
   Only .page-home gets this; every other page keeps the normal
   solid sticky header.
   ============================================================ */
.page-home header.site {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  box-shadow: none;
}
.page-home header.site .nav-links a,
.page-home header.site .brand-name-en { color: #fff; }
.page-home header.site .brand-subtitle-riyadh { color: var(--peacock-gold); }
.page-home header.site .lang-switch {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  backdrop-filter: blur(6px);
}
.page-home header.site .lang-switch:hover { background: #fff; color: var(--teal-darkest); border-color: #fff; }
.page-home header.site .hamburger-btn span { background-color: #fff; }

/* Once scrolled past the hero, revert to the solid header */
.page-home header.site.is-scrolled {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 6px 30px rgba(9,44,58,0.12);
}
.page-home header.site.is-scrolled .nav-links a,
.page-home header.site.is-scrolled .brand-name-en { color: var(--teal-darkest); }
.page-home header.site.is-scrolled .nav-links a:hover,
.page-home header.site.is-scrolled .nav-links a.is-active { color: var(--peacock-gold); }
.page-home header.site.is-scrolled .lang-switch { background: #fff; border-color: var(--border-soft); color: var(--teal-darkest); }
.page-home header.site.is-scrolled .hamburger-btn span { background-color: var(--teal-darkest); }

/* Full-height hero, with the nav's height added back as padding so
   the headline never sits underneath the transparent bar. */
.page-home .hero-open {
  min-height: 100vh;
  min-height: 100svh;      /* svh avoids the mobile URL-bar jump */
  display: flex;
  align-items: center;
  padding: 150px 0 120px;
}

/* ============================================================
   4. DISH CAROUSEL — arrows instead of an endless marquee
   Native horizontal scrolling, so trackpad and touch swipe work
   for free; the arrows drive the same scroll container.
   ============================================================ */
.dishes-viewport { position: relative; }
.dishes-track {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 0 30px;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;
}
.dishes-track::-webkit-scrollbar { display: none; }
.dishes-track .dish-card { scroll-snap-align: start; }

.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 54px; height: 54px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255,255,255,0.94);
  color: var(--teal-darkest);
  display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(9,44,58,0.18);
  transition: background .3s ease, color .3s ease, opacity .3s ease, transform .3s var(--ease-soft);
}
.car-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.car-btn:hover { background: var(--teal-darkest); color: #fff; }
.car-btn.prev { left: 18px; }
.car-btn.next { right: 18px; }
/* Dimmed rather than hidden at the ends — a button that vanishes
   makes people think the control broke. */
.car-btn[disabled] { opacity: 0.25; cursor: default; pointer-events: none; }

@media (max-width: 990px) {
  .car-btn { width: 44px; height: 44px; }
  .car-btn.prev { left: 8px; }
  .car-btn.next { right: 8px; }
  .page-home .hero-open { padding: 120px 0 90px; min-height: 88vh; min-height: 88svh; }
}
@media (max-width: 560px) {
  /* On a phone the arrows crowd the cards — swiping is the natural
     gesture there anyway. */
  .car-btn { display: none; }
  .dishes-track { padding-inline: 5%; }
}

/* ============================================================
   FIXES — round 2

   `section { padding }` and `.serif-font` were both dropped when
   the four page stylesheets were merged, same as
   .section-title-wrap was. With no section padding every block on
   the site butted straight into the next one.

   These are element/single-class selectors, so anything with its
   own padding (.page-hero, .stats-section, .menu-body,
   .page-home .hero-open) still wins on specificity and keeps its
   own spacing.
   ============================================================ */
section { padding: 110px 0; overflow: hidden; }
.serif-font { font-family: 'Playfair Display', serif; }

/* Extra breathing room where two light sections meet, so the
   Signature Selection eyebrow isn't sitting on the Heritage text. */
#about-home { padding-bottom: 80px; }
#signature-dishes { padding-top: 90px; }

/* The heading column is centred against a tall image, which left
   the eyebrow floating oddly high. Aligning to the top lines the
   text up with the top of the photo instead. */
.about-home-grid { align-items: start; }
.about-home-content { padding-top: 6px; }

/* ---------- Carousel arrows on mobile ----------
   Previously hidden below 560px. They're back, smaller and inset,
   because a swipe hint isn't obvious to everyone and the arrows
   are the only visible cue that there's more to see. */
@media (max-width: 560px) {
  .car-btn { display: grid; width: 38px; height: 38px; background: rgba(255,255,255,0.92); }
  .car-btn svg { width: 16px; height: 16px; }
  .car-btn.prev { left: 6px; }
  .car-btn.next { right: 6px; }
  .dishes-track { padding-inline: 0; }
  .dish-card { width: min(78vw, 320px); }
}

@media (max-width: 990px) {
  section { padding: 72px 0; }
  #about-home { padding-bottom: 50px; }
  #signature-dishes { padding-top: 60px; }
  .about-home-grid { align-items: start; }
}

/* ============================================================
   ALLERGENS — icon plus word

   Icon-only proved unreadable at this size: there is no standard
   symbol set for the fourteen, so a glyph on its own asks the
   guest to guess. The word carries the meaning, the icon carries
   the visual language the client wanted, and the title attribute
   holds the full legal name for hover and screen readers.
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The row sits on its own line — with words attached, the chips
   are too wide to share a line with calories and burn time. */
.dish-meta .m-allergen-icons {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 0; margin-top: 2px;
  background: none; border: none; border-radius: 0;
  flex-basis: 100%;
}

.allergen-label {
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-gray);
  margin-inline-end: 2px;
}

.allergen-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px 4px 8px;
  border-radius: 100px;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.45);
  cursor: help;
  transition: background .25s ease, border-color .25s ease;
}
.allergen-chip:hover { background: rgba(212,175,55,0.22); border-color: var(--peacock-gold); }

.allergen-chip svg {
  width: 15px; height: 15px; flex: 0 0 15px;
  fill: none; stroke: #8a5e00; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.allergen-word {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.2px; line-height: 1;
  color: #8a5e00; white-space: nowrap;
}

/* ---------- Legend ---------- */
.allergen-legend {
  margin: 60px auto 0;
  padding: 40px 42px;
  background: var(--bg-offwhite);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
}
.allergen-legend h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; color: var(--teal-darkest);
  margin-bottom: 26px; text-align: center;
}
.allergen-legend ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 20px 30px;
}
.allergen-legend li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 0.86rem; color: var(--text-gray); line-height: 1.45;
}
.allergen-legend li strong { color: var(--teal-darkest); font-size: 0.98rem; }
.legend-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 50%;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.45);
}
.legend-icon svg {
  width: 21px; height: 21px;
  fill: none; stroke: var(--peacock-gold); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 560px) {
  .allergen-legend { padding: 28px 20px; }
  .allergen-legend ul { grid-template-columns: 1fr; gap: 16px; }
  .allergen-chip { padding: 3px 9px 3px 7px; }
  .allergen-word { font-size: 0.7rem; }
}

/* Seven nav items now that Banquets is in. Tightened at the wider
   breakpoint so the row never wraps into two lines. */
@media (max-width: 1400px) {
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 0.84rem; letter-spacing: 0.6px; }
}
@media (max-width: 1180px) {
  .nav-links { gap: 15px; }
  .nav-links a { font-size: 0.76rem; letter-spacing: 0.3px; }
  .lang-switch { min-width: 62px; padding: 8px 16px; font-size: 0.88rem; }
}


/* Continuous drift replaces the stepped autoplay, so scroll-snap and
   smooth-scroll have to go — both fight a per-frame scrollLeft change,
   producing a visible stutter. */
.dishes-track { scroll-snap-type: none; scroll-behavior: auto; }
.dishes-track .dish-card { scroll-snap-align: none; }
@media (prefers-reduced-motion: reduce) {
  .dishes-track { scroll-snap-type: x proximity; }
}

/* ============================================================
   WEIGHT PRICING — sweets are sold per kilo, not per plate
   ============================================================ */
.weight-prices { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.weight-prices li {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 12px; border-radius: 6px;
  background: var(--bg-offwhite); border: 1px solid var(--border-soft);
}
.wp-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-gray); }
.wp-value { font-family: 'Playfair Display', serif; font-size: 0.98rem; font-weight: 700; color: var(--teal-primary); white-space: nowrap; }

/* ============================================================
   BANQUET PACKAGE COURSES
   A two-column list rather than a paragraph — a guest comparing
   packages is scanning for one course at a time, not reading.
   ============================================================ */
.pkg-courses {
  display: grid; grid-template-columns: minmax(120px, 150px) 1fr;
  gap: 8px 18px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.pkg-courses dt {
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--peacock-gold); padding-top: 2px;
}
.pkg-courses dd { font-size: 0.93rem; color: var(--text-gray); line-height: 1.55; }

@media (max-width: 560px) {
  .pkg-courses { grid-template-columns: 1fr; gap: 2px 0; }
  .pkg-courses dt { margin-top: 10px; }
  .weight-prices li { padding: 3px 9px; }
}

/* ============================================================
   OFFERS
   Posters only. Height is left to the image so a tall portrait
   poster and a wide landscape one both show in full — cropping
   an offer graphic is how the small print gets cut off.
   ============================================================ */
#offers { padding-top: 80px; }
.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  align-items: start;
}
.offer-card {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-offwhite);
  border: 1px solid var(--border-soft);
  box-shadow: 0 8px 30px rgba(9,44,58,0.08);
  transition: transform .45s var(--ease-soft), box-shadow .45s ease, border-color .45s ease;
}
.offer-card img { width: 100%; height: auto; display: block; }
.offer-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(9,44,58,0.16);
  border-color: rgba(212,175,55,0.5);
}

.offers-empty {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--text-gray);
  padding: 60px 20px;
}

@media (max-width: 560px) {
  #offers { padding-top: 50px; }
  .offers-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Dish cards are links now — the cue only appears on hover so it
   doesn't compete with the dish name while the carousel drifts. */
.dish-cta {
  display: block;
  margin-top: 10px;
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--peacock-gold);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s var(--ease-soft);
}
.dish-card:hover .dish-cta,
.dish-card:focus-visible .dish-cta { opacity: 1; transform: none; }
[dir="rtl"] .dish-cta { letter-spacing: 0; }

/* On touch there is no hover, so show it always */
@media (hover: none) {
  .dish-cta { opacity: 1; transform: none; }
}

/* Reviews call-to-action beneath the stats figures */
.stats-cta {
  position: relative; z-index: 2;
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 44px;
  border-top: 1px solid rgba(255,255,255,0.14);
}

/* Nine nav items. Short labels plus tighter tracking keep them on one
   row down to laptop width; below that the drawer takes over anyway. */
@media (max-width: 1500px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 0.8rem; letter-spacing: 0.5px; }
}
@media (max-width: 1280px) {
  .nav-links { gap: 13px; }
  .nav-links a { font-size: 0.72rem; letter-spacing: 0.2px; }
  .brand-name-en { font-size: 1.25rem; }
  .lang-switch { min-width: 56px; padding: 7px 14px; font-size: 0.84rem; }
}
@media (max-width: 560px) {
  .stats-cta { margin-top: 40px; padding-top: 32px; gap: 12px; }
  .stats-cta .btn { width: 100%; }
}

/* Link under the Google rating in the stats band */
.stat-link {
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 2px;
  font-size: 0.86rem; font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--peacock-gold);
  border-bottom: 1px solid rgba(212,175,55,0.45);
  transition: color .3s ease, border-color .3s ease;
}
.stat-link:hover { color: #fff; border-color: #fff; }

/* ============================================================
   HEADER REFLOW ON SCROLL

   The brand name sat exactly at its wrapping point, so it broke
   onto two lines at rest and snapped back to one when the logo
   shrank by 8px on scroll — which read as the text jumping.

   Two changes: the name never wraps, and the logo no longer
   changes size. Nothing in the header reflows now, so the only
   thing that happens on scroll is the background fading in.
   ============================================================ */
.brand-name-en { white-space: nowrap; }
.brand-titles { min-width: 0; }

header.site .brand-logo-img,
header.site.is-scrolled .brand-logo-img,
.page-home header.site .brand-logo-img,
.page-home header.site.is-scrolled .brand-logo-img { width: 46px; }

/* Narrow viewports get a smaller name rather than a wrapped one */
@media (max-width: 1320px) { .brand-name-en { font-size: 1.32rem; } }
@media (max-width: 1120px) { .brand-name-en { font-size: 1.18rem; } }

/* ============================================================
   HERO REVEAL

   The hero pins while the page scrolls over it, and the first
   content section rides up with a rounded top edge — the same
   layered reveal HASCO uses. Cheaper than a parallax script and
   it never desyncs, because the browser is doing the work.
   ============================================================ */
.page-home .hero-open {
  position: sticky;
  top: 0;
  z-index: 0;
}

/* Everything after the hero sits above it and carries its own
   background, otherwise the pinned photo shows through. */
body.page-home > section:not(.hero-open),
body.page-home > footer {
  position: relative;
  z-index: 1;
  background: var(--bg-light);
}

body.page-home > #about-home {
  border-radius: 30px 30px 0 0;
  margin-top: -34px;          /* laps over the hero as it rises */
  padding-top: 100px;
  box-shadow: 0 -20px 50px rgba(9, 44, 58, 0.18);
}

body.page-home > footer { background: var(--teal-darkest); }

@media (max-width: 990px) {
  body.page-home > #about-home {
    border-radius: 22px 22px 0 0;
    margin-top: -24px;
    padding-top: 64px;
  }
}

/* The pinned hero relies on the browser's own scrolling, so there
   is nothing to disable for reduced motion — but the drifting
   background photo should still stop. */
@media (prefers-reduced-motion: reduce) {
  .page-home .hero-open .hero-bg { animation: none; }
}

/* ============================================================
   HEADER BREATHING ROOM

   The nav is already at true viewport centre — the crowding came
   from the brand name being long enough to reach almost to it.
   Widening the grid gap pushes the outer columns back without
   moving the nav off centre, so HOME no longer sits on the logo.
   ============================================================ */
.nav-wrapper { gap: 56px; }
.nav-links { padding-inline: 10px; }

@media (max-width: 1400px) { .nav-wrapper { gap: 40px; } }
@media (max-width: 1240px) { .nav-wrapper { gap: 28px; } }
@media (max-width: 1120px) { .nav-wrapper { gap: 20px; } .nav-links { padding-inline: 0; } }
@media (max-width: 990px)  { .nav-wrapper { gap: 16px; } }

/* ============================================================
   HEADER FIT — final pass

   Why the earlier gap increase did nothing: `1fr` is
   minmax(auto, 1fr), so a column never shrinks below its content.
   The brand block was already claiming its full width and eating
   the gap, leaving HOME sitting right against the logo.

   The row has to carry a ~300px brand, seven full-length labels
   and the language button. Below roughly 1150px that genuinely
   does not fit, so the drawer takes over there rather than the
   labels being squeezed into illegibility.
   ============================================================ */
@media (min-width: 1151px) {
  .nav-wrapper { gap: 32px; }

  /* A guaranteed channel either side of the nav, so the labels can
     never touch the brand no matter how the columns resolve. */
  .nav-links { padding-inline: 26px; }

  .brand-name-en { font-size: 1.18rem; letter-spacing: 0.6px; }
  .brand-subtitle-riyadh { font-size: 0.64rem; letter-spacing: 3px; }
  header.site .brand-logo-img,
  header.site.is-scrolled .brand-logo-img,
  .page-home header.site .brand-logo-img,
  .page-home header.site.is-scrolled .brand-logo-img { width: 42px; }

  .nav-links { gap: 22px; }
  .nav-links a { font-size: 0.78rem; letter-spacing: 0.4px; }

  .lang-switch { min-width: 58px; padding: 8px 16px; font-size: 0.86rem; }
}

@media (min-width: 1500px) {
  .nav-wrapper { gap: 48px; }
  .brand-name-en { font-size: 1.4rem; }
  .nav-links { gap: 30px; padding-inline: 34px; }
  .nav-links a { font-size: 0.85rem; }
  header.site .brand-logo-img,
  header.site.is-scrolled .brand-logo-img,
  .page-home header.site .brand-logo-img,
  .page-home header.site.is-scrolled .brand-logo-img { width: 48px; }
}

/* Hamburger takes over earlier than before — squeezing seven labels
   under 1150px makes them unreadable long before it makes them fit. */
@media (max-width: 1150px) {
  .nav-wrapper { grid-template-columns: 1fr auto; gap: 16px; }
  .nav-links, .nav-cta { display: none; }
  .header-actions { grid-column: 2; justify-self: end; display: flex; }
  .brand-name-en { font-size: 1.3rem; }
}

/* ============================================================
   HERO BUTTONS ON MOBILE

   Four buttons of different widths wrapping freely produced a
   ragged 2-1-1 stack with the scroll cue landing on top of it.
   Below 640px they become one full-width column of equal blocks,
   and the cue is dropped — on a phone the buttons already sit at
   the fold and nobody needs telling to scroll.
   ============================================================ */
@media (max-width: 640px) {
  .hero-actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    width: 100%;
    max-width: 330px;
    margin-inline: auto;
  }
  .hero-actions-row .btn {
    width: 100%;
    padding: 15px 18px;
    font-size: 0.8rem;
    letter-spacing: 0.9px;
    border-radius: 6px;
    /* A hairline edge stops the dark blocks dissolving into the
       photo behind them. */
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  }
  .hero-actions-row .btn:active { transform: scale(0.98); }

  .page-home .scroll-cue { display: none; }

  /* With the cue gone the stack can breathe instead of being
     pushed up against the bottom of the screen. */
  .page-home .hero-open { padding: 110px 0 70px; }
  .hero-open h2 { margin-bottom: 32px; }
}

/* Very narrow phones */
@media (max-width: 360px) {
  .hero-actions-row .btn { font-size: 0.74rem; padding: 14px 12px; letter-spacing: 0.5px; }
}