/* ============================================================================
   style.css — Al MayanFoodstuff Company — green identity, mobile-first (v4)
   ----------------------------------------------------------------------------
   Design language:
   - GREEN ONLY. Deep green text surfaces + soft green tints on paper-white.
     Gold appears nowhere in the UI — it may only exist inside brand logo images.
   - Calm and minimal: flat surfaces, light shadows, one purpose per section,
     a single dark-green band (contact/footer) for visual rhythm.
   - MOBILE-FIRST: base styles target small screens; min-width queries scale up.
   - Logical properties (margin-inline/inset-inline) so RTL Arabic and LTR
     English render correctly without hacks.
   ============================================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* brand greens */
  --green-950: #0A2C20;
  --green-900: #0E3A2A;
  --green-800: #144F39;
  --green-700: #1C6A4D;
  --green-600: #26825E;
  --green-500: #34946C;
  --green-300: #97CEB0;
  --green-200: #C6E5D5;
  --green-100: #E2F2EA;
  --green-50:  #F1F8F4;

  /* neutrals (cool, green-tinted) */
  --paper:      #FBFCFB;
  --soft:       #F1F6F3;
  --card:       #FFFFFF;
  --line:       rgba(14, 58, 42, 0.12);
  --line-dark:  rgba(241, 248, 244, 0.14);

  /* warm cream section palette (tops of the page sit on cream, the
     header/footer stay deep green so the page reads light → dark) */
  --cream-50:   #FDFBF4;
  --cream-100:  #F7F2E6;
  --cream-200:  #F0E8D6;
  --cream-300:  #E6DCC2;
  --cream-line: rgba(14, 58, 42, 0.14);

  /* brand gold — MAYAN heritage accent (retuned green+gold identity) */
  --gold-700: #A9761F;
  --gold-600: #C9953B;
  --gold-500: #D9A441;
  --gold-400: #E8B84B;
  --gold-300: #F0CC72;
  --gold-200: #F6DFA0;
  --gold-100: #FBF0D4;

  /* MAYAN signature frame palette — layered living greens, ivory text,
     restrained heritage gold (navbar + header only) */
  --mayan-green-deep:   #0B2F27;
  --mayan-green-dark:   #103D32;
  --mayan-green-main:   #164C3B;
  --mayan-green-mid:    #1D5A45;
  --mayan-green-soft:   #2B6950;
  --mayan-gold:         #C6A34A;
  --mayan-gold-soft:    #D8BE70;
  --mayan-gold-muted:   #9C823B;
  --mayan-ivory:        #F3EBD9;
  --mayan-ivory-dim:    rgba(243, 235, 217, 0.70);
  --mayan-edge-emerald: rgba(108, 178, 140, 0.85);

  /* text */
  --ink:        #17221B;
  --charcoal:   #26322B;
  --text-soft:  #55635B;
  --text-faint: #7C8A82;

  /* surfaces + effects (light, flat) */
  --white:      #FFFFFF;
  --shadow-sm:  0 4px 14px rgba(14, 58, 42, 0.07);
  --shadow-md:  0 16px 36px rgba(14, 58, 42, 0.10);
  --ring: 0 0 0 4px rgba(38, 130, 94, 0.16);

  /* geometry */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* type */
  --font-body: 'Tajawal', 'Manrope', 'Segoe UI', Tahoma, sans-serif;
  --font-head: 'Cairo', 'Manrope', 'Segoe UI', Tahoma, sans-serif;

  /* rhythm */
  --sec-pad: 3.4rem;
  --container: 1200px;
  --header-h: 102px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--charcoal);
  background: var(--cream-50);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}

button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--green-100); color: var(--green-900); }

/* inline accent inside titles (green only) */
.sec-title span, .g-title span, .hero-title span { color: var(--green-700); }

[dir="ltr"] .arrow-fwd { transform: scaleX(-1); }
.arrow-fwd { display: inline-block; transition: transform 0.3s ease; }

[id] { scroll-margin-top: calc(var(--header-h) + 6px); }
/* ---------- 3. Shared primitives ----------
   v10: the page body sits on a WARM CREAM family (light, airy) while the
   header and footer stay deep green — one light → dark rhythm. `.sec-soft`
   and `.sec-dark` are tonal cream variants only, never green. */
.sec { padding: var(--sec-pad) 0; position: relative; }
.sec,
.sec-soft {
  background:
    radial-gradient(900px 320px at 50% -6%, rgba(212, 180, 120, 0.16), transparent 62%),
    var(--cream-100);
  color: var(--charcoal);
}
.sec-soft {
  background:
    radial-gradient(1100px 460px at 50% -8%, rgba(212, 180, 120, 0.20), transparent 68%),
    linear-gradient(180deg, var(--cream-100) 0%, var(--cream-200) 58%);
}

.container { max-width: var(--container); }

.sec-head { text-align: center; max-width: 720px; margin: 0 auto 2rem; }
.sec-head--start { text-align: start; margin-inline: 0; }

.sec-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: var(--green-700);
  background: rgba(28, 106, 77, 0.08);
  border: 1px solid rgba(28, 106, 77, 0.22);
  padding: 0.4rem 1.05rem;
  border-radius: var(--r-pill);
}
.sec-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-600);
}

.sec-title {
  font-weight: 900;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  color: var(--ink);
  margin: 1rem 0 0.6rem;
  letter-spacing: -0.01em;
}
.sec .sec-title span, .sec-dark .g-title span, .g-title span { color: var(--green-700); }

.sec-lead {
  color: var(--text-soft);
  font-size: 1rem;
  max-width: 640px;
  margin: 0 auto;
}
.sec-head--start .sec-lead { margin-inline: 0; }

.sec-line {
  width: 64px; height: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--green-500), var(--green-300) 52%, var(--green-500));
  margin: 1.1rem auto 0;
}
.sec-head--start .sec-line { margin-inline: 0; }

/* deep-cream sections — the darkest the body goes; still warm, never green */
.sec-dark {
  background:
    radial-gradient(900px 320px at 50% -6%, rgba(212, 180, 120, 0.22), transparent 62%),
    linear-gradient(180deg, var(--cream-200) 0%, var(--cream-300) 58%, var(--cream-100) 100%);
  color: var(--charcoal);
}
.sec-dark .sec-title { color: var(--ink); }
.sec-dark .sec-lead { color: var(--text-soft); }
.sec-dark .sec-tag {
  color: var(--green-700);
  background: rgba(28, 106, 77, 0.10);
  border-color: rgba(28, 106, 77, 0.26);
}
.sec-dark .sec-tag::before { background: var(--green-600); }
.sec-dark .sec-line { background: linear-gradient(90deg, var(--green-500), var(--green-300) 52%, var(--green-500)); }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.96rem;
  line-height: 1;
  padding: 0.82rem 1.6rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.btn i { font-size: 1.05em; }

.btn-green {
  background: var(--green-700);
  color: #fff;
  box-shadow: 0 8px 20px rgba(28, 106, 77, 0.22);
}
.btn-green:hover { background: var(--green-600); color: #fff; box-shadow: 0 8px 22px rgba(201, 149, 59, 0.30); }

.btn-outline {
  border-color: var(--green-700);
  color: var(--green-700);
  background: transparent;
}
.btn-outline:hover { background: var(--green-700); color: #fff; }

.btn-light {
  background: #fff;
  color: var(--green-900);
}
.btn-light:hover { background: var(--green-100); color: var(--green-900); }

.btn-outline-light {
  border-color: rgba(241, 248, 244, 0.55);
  color: var(--green-50);
  background: transparent;
}
.btn-outline-light:hover { background: #fff; color: var(--green-900); border-color: #fff; }

.btn-lg { padding: 0.95rem 1.9rem; font-size: 1.02rem; }

/* ---------- 4. Header: Signature MAYAN Frame ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 0;
  background: transparent;
  transition: padding 0.35s ease;
}
.site-header.is-scrolled { padding: 0; }

/* ——— v13: lock the header box height on desktop so the scroll-compact
   state never changes the layout box — prevents the ~20px content jump
   (reflow) while smooth-scrolling back to top with the up arrow. ——— */
@media (min-width: 992px) {
  .site-header, .site-header.is-scrolled { height: var(--header-h); }
}

/* ——— v9 ARCHITECTURAL MAYAN FRAME — full-bleed band as a measured
   --> architectural composition that hands off into the Hero:
   Tier 1 .sig-frame           deep green base (edge to edge, flush).
   Tier 2 .sig-frame::before   bright emerald CORNICE (top light rail) that
                               catches the hero's top light first.
   Tier 3 .sig-frame__surface  lighter NAVIGATION SLAB hosting the nav row
                               only - the utility tier stays on the base.
   Tier 4 .sig-frame::after    1.5px LIVING EDGE ring (emerald?forest?gold
                               hint?brighter emerald toward the Hero).
   Gold  .sig-frame__corner    precision corner registration marks.
         .sig-frame__orb       "cornice beam" - ONE gold point riding the
                               top rail once per long cycle (script.js). ——— */
.sig-frame {
  position: relative;
  border-radius: 0;
  background:
    radial-gradient(120% 110% at 16% -12%, rgba(43, 105, 80, 0.5), transparent 56%),
    linear-gradient(165deg, var(--mayan-green-dark) 0%, var(--mayan-green-deep) 46%, var(--mayan-green-main) 88%);
  overflow: visible;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* Tier 2 — cornice: a 2px emerald rail + a fine ivory hairline beneath.
   The frame's crown is where the Hero light enters the composition. */
.sig-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(108, 178, 140, 0.95) 0%,
    rgba(88, 150, 120, 0.55) 30%,
    rgba(198, 163, 74, 0.45) 50%,
    rgba(88, 150, 120, 0.55) 70%,
    rgba(108, 178, 140, 0.95) 100%);
  box-shadow: 0 1px 0 rgba(243, 235, 217, 0.10);
  pointer-events: none;
}

/* Tier 3 — navigation slab: one measured lighter panel behind the nav row. */
.sig-frame__surface {
  content: "";
  position: absolute;
  inset: 38px 0 0 0;
  z-index: 0;
  border-radius: 0;
  background:
    radial-gradient(120% 220% at 50% -30%, rgba(108, 178, 140, 0.13), transparent 55%),
    linear-gradient(180deg, rgba(22, 76, 59, 0.4), rgba(13, 42, 32, 0.26) 100%);
  box-shadow:
    inset 0 1px 0 rgba(243, 235, 217, 0.055),
    inset 0 -1px 0 rgba(4, 18, 12, 0.32);
  pointer-events: none;
}

/* Tier 4 — living edge ring (mask trick): the outer edge catches light. */
.sig-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0;
  padding: 1.5px;
  background: linear-gradient(140deg,
    var(--mayan-edge-emerald) 0%,
    rgba(23, 74, 55, 0.5) 26%,
    rgba(198, 163, 74, 0.34) 50%,
    rgba(23, 74, 55, 0.55) 74%,
    var(--mayan-edge-emerald) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.site-header.is-scrolled .sig-frame {
  background:
    radial-gradient(120% 110% at 16% -12%, rgba(43, 105, 80, 0.55), transparent 56%),
    linear-gradient(165deg, #0F382C 0%, #091F18 54%, #0B2A1F 100%);
  box-shadow: 0 18px 42px rgba(3, 14, 9, 0.42);
}
.site-header.is-scrolled .sig-frame__surface {
  background:
    radial-gradient(120% 220% at 50% -30%, rgba(108, 178, 140, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(22, 76, 59, 0.5), rgba(10, 34, 25, 0.4) 100%);
}

/* ——— precision corner registration marks (1px, dual-aware) ——— */
.sig-frame__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-style: solid;
  border-color: rgba(198, 163, 74, 0.75);
  pointer-events: none;
  z-index: 5;
  opacity: 0.85;
  filter: drop-shadow(0 0 3px rgba(216, 190, 112, 0.28));
  animation: sigCornerIn 1.2s ease both;
}
@keyframes sigCornerIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
.sig-frame__corner--tl { top: 3px; left: 3px; border-width: 1px 0 0 1px; }
.sig-frame__corner--tr { top: 3px; right: 3px; border-width: 1px 1px 0 0; }
.sig-frame__corner--bl { bottom: 3px; left: 3px; border-width: 0 0 1px 1px; }
.sig-frame__corner--br { bottom: 3px; right: 3px; border-width: 0 1px 1px 0; }

/* ——— cornice beam: ONE gold point riding the top rail, frame-relative,
   positioned by script.js (translate3d, GPU-only). Slow single pass per
   cycle with a long rest — a structural glint, never a loader. ——— */
.sig-frame__orb {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  z-index: 6;
  background: radial-gradient(circle, var(--mayan-ivory) 0%, var(--mayan-gold-soft) 45%, rgba(198, 163, 74, 0) 72%);
  box-shadow: 0 0 8px rgba(216, 190, 112, 0.85);
  opacity: 0;
  will-change: transform;
  pointer-events: none;
}

/* ——— v14 CAST OF GOLD: a deterministic constellation of small gold points
   continuously walking the frame perimeter (JS-driven, GPU translate3d).
   8 primary points (2–4px) + 4 micro-points (1–2px), varied size / opacity /
   speed, staggered so the motion never synchronizes. Every point stays just
   inside the frame edge (inset 7px) so it reads as detail embedded in the
   MAYAN frame — never over the navigation text. The wrapper clips at the
   frame box so the perimeter path is exact and adds no scroll overflow. ——— */
.sig-frame__fleet {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.sig-frame__fleet i {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  will-change: transform;
}

/* full-bleed band: no responsive corner-radius rhythm (radius is always 0) */
@media (prefers-reduced-motion: reduce) {
  .sig-frame__corner { animation: none; }
  .sig-frame__orb { opacity: 0 !important; }
  .sig-frame__fleet { display: none; }
}

/* ——— v10 ambient "flying circles": soft drifting circle-dust over the
   deep-green header navbar band and the footer band. The canvases are
   created by script.js (create-if-missing pattern); pointer-events:none
   so they never block navigation, dropdowns or footer links. ——— */
.sig-frame__orbs,
.footer__orbs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.sig-frame__orbs { z-index: 1; }
.footer__orbs { z-index: 0; }
.footer > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .sig-frame__orbs, .footer__orbs { display: none; }
}

/* ——— divider (thin gold hairline + diamond) ——— */
.site-nav {
  position: relative;
  z-index: 2;
  padding: 0.55rem 0;
  background: transparent;
}
.site-nav::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 2.2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 190, 112, 0.35) 50%, transparent);
  pointer-events: none;
}
.site-nav::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--mayan-gold-soft);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 8px rgba(216, 190, 112, 0.45);
  pointer-events: none;
}

/* ——— Layer 1: utility ——— */
.sig-frame__util { position: relative; z-index: 30; font-size: 0.76rem; }
.sig-frame__util-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 34px;
}
.sig-frame__util-left { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.sig-frame__util-right { display: flex; align-items: center; }
.sig-frame__util-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(243, 235, 217, 0.74);
  transition: color 0.2s ease;
}
.sig-frame__util-link:hover { color: var(--mayan-gold-soft); }
.sig-frame__util-link i { color: rgba(216, 190, 112, 0.85); font-size: 0.76rem; }
.sig-frame__util-link--muted { opacity: 0.68; }

/* ——— language switch (visible options + label, label on the right in RTL) ——— */
.lang-dd { position: relative; z-index: 60; }
.lang-dd__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(11, 47, 39, 0.5);
  border: 1px solid rgba(216, 190, 112, 0.38);
  border-radius: var(--r-pill);
  color: rgba(243, 235, 217, 0.85);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.26rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.lang-dd__toggle:hover,
.lang-dd.is-open .lang-dd__toggle { border-color: rgba(216, 190, 112, 0.78); color: var(--mayan-ivory); }
.lang-dd__toggle-icon { font-size: 0.9rem; color: rgba(216, 190, 112, 0.92); }
.lang-dd__current { white-space: nowrap; }
.lang-dd__caret { font-size: 0.7rem; opacity: 0.8; }
.lang-dd__menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  inset-inline-end: 0;
  min-width: 186px;
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #103D32, #0B2F27);
  border: 1px solid rgba(216, 190, 112, 0.4);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.lang-dd.is-open .lang-dd__menu { display: flex; }
.lang-dd-opt {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(243, 235, 217, 0.85);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  text-align: start;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lang-dd-opt:hover { background: rgba(43, 105, 80, 0.4); border-color: rgba(216, 190, 112, 0.3); color: var(--mayan-ivory); }
.lang-dd-opt.active { border-color: rgba(216, 190, 112, 0.55); background: rgba(232, 184, 75, 0.12); }
.lang-dd-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-600), var(--gold-400));
  color: #0A241B;
  font-size: 0.7rem;
  font-weight: 800;
}
.lang-dd-name { white-space: nowrap; }
.lang-dd__tick { margin-inline-start: auto; color: var(--mayan-gold-soft); opacity: 0; transition: opacity 0.2s ease; }
.lang-dd-opt.active .lang-dd__tick { opacity: 1; }

/* ——— util-row: compact social icons (icons only) + thin divider ——— */
.sig-frame__util-right { gap: 0.6rem; }
.util-social { display: flex; align-items: center; gap: 0.4rem; }
.util-social__sep {
  width: 1px;
  height: 20px;
  background: rgba(216, 190, 112, 0.26);
  margin-inline: 0.15rem 0.4rem;
}
.util-social__link {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(11, 47, 39, 0.5);
  border: 1px solid rgba(216, 190, 112, 0.30);
  color: rgba(243, 235, 217, 0.82);
  font-size: 0.92rem;
  line-height: 1;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.util-social__link i { display: block; line-height: 1; font-size: 1rem; }
.util-social__link:hover {
  color: var(--mayan-gold-soft);
  border-color: rgba(216, 190, 112, 0.72);
  background: rgba(43, 105, 80, 0.45);
  transform: translateY(-1px);
}

/* ——— Layer 2: main nav ——— */
.navbar-brand { display: flex; align-items: center; gap: 0.7rem; padding: 0; }
.brand-logo { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo img { width: auto; height: 44px; max-width: 100%; object-fit: contain; transition: height 0.35s ease; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-head); font-weight: 900; font-size: 1.18rem; color: var(--mayan-ivory); }
.brand-tagline { font-size: 0.72rem; font-weight: 700; color: var(--mayan-gold-soft); letter-spacing: 0.08em; }

.site-nav .nav-link {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: rgba(243, 235, 217, 0.93);
  padding: 0.42rem 1rem;
  border-radius: var(--r-pill);
  position: relative;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.site-nav .nav-link:hover { color: #FFFDF4; background: rgba(243, 235, 217, 0.07); }
.site-nav .nav-link:focus-visible { outline: 2px solid rgba(216, 190, 112, 0.85); outline-offset: 2px; }
.site-nav .nav-link.active { color: var(--mayan-gold-soft); }
.site-nav .nav-link.active::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--mayan-gold-muted), var(--mayan-gold-soft));
}
[dir="ltr"] .site-nav .nav-link { letter-spacing: 0.015em; }

.nav-cta, .nav-cat {
  border: 1px solid rgba(216, 190, 112, 0.45);
  color: var(--mayan-ivory) !important;
  background: linear-gradient(180deg, rgba(43, 105, 80, 0.5), rgba(16, 61, 50, 0.55));
  padding: 0.52rem 1.25rem !important;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 0.9rem;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.nav-cta:hover, .nav-cat:hover, .nav-cat.active {
  background: linear-gradient(180deg, rgba(43, 105, 80, 0.78), rgba(22, 76, 59, 0.7));
  color: #FFFDF4 !important;
  border-color: rgba(216, 190, 112, 0.8);
}

/* mobile toggler */
.custom-toggler { border: 0; padding: 0.35rem; }
.toggler-bar {
  display: block;
  width: 24px;
  height: 2.5px;
  background: rgba(243, 235, 217, 0.95);
  border-radius: var(--r-pill);
  margin: 5px auto;
  transition: all 0.3s ease;
}

/* mobile collapse panel */
.site-nav .navbar-collapse {
  background: linear-gradient(180deg, rgba(16, 61, 50, 0.97), rgba(9, 31, 23, 0.99));
  border: 1px solid rgba(216, 190, 112, 0.22);
  border-radius: 14px;
  margin-top: 0.7rem;
  padding: 0.6rem 0.8rem 0.9rem;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

/* scroll compact */
.site-header.is-scrolled .sig-frame__util-inner { min-height: 20px; }
.site-header.is-scrolled .sig-frame__util { font-size: 0.7rem; }
.site-header.is-scrolled .site-nav { padding: 0.28rem 0; }
.site-header.is-scrolled .brand-logo img { height: 38px; }
.site-header.is-scrolled .brand-name { font-size: 1.08rem; }
.site-header.is-scrolled .sig-frame__util-link--muted { display: none; }

/* small screens: condense the utility layer so it never overflows */
@media (max-width: 575px) {
  .sig-frame__util { font-size: 0.7rem; }
  .sig-frame__util-inner { gap: 0.75rem; }
  .sig-frame__util-left { gap: 0.7rem; }
  .sig-frame__util-link--muted { max-width: 118px; }
  .sig-frame__util-link--muted span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* keep the util row uncluttered at phone widths */
  .util-social, .util-social__sep { display: none; }
}

/* utility */
.text-green { color: var(--green-700) !important; }

.sec-dark .container { position: relative; z-index: 1; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 6. Why section (light cream, compact) ---------- */
.sec-why { color: var(--charcoal); }

.why-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
.why-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem 1.3rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.why-item:hover { box-shadow: var(--shadow-md); border-color: rgba(28, 106, 77, 0.3); }
.why-item__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 1.15rem;
}
.why-item h3 { color: var(--ink); font-size: 1rem; font-weight: 800; margin-bottom: 0.15rem; }
.why-item p { color: var(--text-soft); font-size: 0.86rem; margin: 0; line-height: 1.7; }

/* ---------- 7. About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 2.2rem; align-items: center; }
.about-media { position: relative; max-width: 440px; margin-inline: auto; }
.about-media__img {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.about-media__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.about-media__since {
  position: absolute;
  bottom: 1.2rem; inset-inline-start: 1.2rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--r-pill);
  padding: 0.5rem 1.05rem;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--green-800);
  box-shadow: var(--shadow-sm);
}
.about-media__since i { color: var(--green-700); font-size: 1rem; }

.about-checks { margin: 1.2rem 0 1.4rem; }
.about-checks li {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--charcoal);
}
.about-checks li i { color: var(--green-700); font-size: 1.05rem; }

/* ---------- 8. Category cards ---------- */
/* Compact section so the whole families strip fits on screen after anchor nav */
.sec-cat { padding: 1.4rem 0 1.7rem; }
.sec-cat .sec-head { margin-bottom: 1rem; }
.sec-cat .sec-title { font-size: clamp(1.45rem, 3vw, 2rem); margin: 0.65rem 0 0.35rem; }
.sec-cat .sec-lead { font-size: 0.92rem; max-width: 560px; }
.sec-cat .sec-line { margin-top: 0.65rem; }
.sec-cat .catalog-strip { padding: 1rem 1.2rem; gap: 0.8rem; border-radius: var(--r); }
.sec-cat .catalog-strip__icon { width: 42px; height: 42px; font-size: 1.05rem; border-radius: 12px; }
.sec-cat .catalog-strip__text h3 { font-size: 1rem; }
.sec-cat .catalog-strip__text p { font-size: 0.82rem; }
.sec-cat .catalog-strip .btn { padding: 0.55rem 1.1rem; font-size: 0.88rem; }
.sec-cat .catalog-strip.mt-5 { margin-top: 1.35rem; }

.cat-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.cat-carousel__track {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.25rem 0.15rem;
  flex: 1;
  min-width: 0;
}
.cat-carousel__track::-webkit-scrollbar { display: none; }
.cat-carousel__track .cat-card {
  flex: 0 0 auto;
  width: clamp(172px, 24vw, 208px);
}
/* twin launch paths: view-all-products (direct catalog) + browse-by-family */
.cat-paths {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
}
.cat-paths .btn { white-space: normal; }
.cat-carousel__btn {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(22, 76, 59, 0.18);
  background: rgba(255, 255, 255, 0.88);
  color: var(--mayan-green-main);
  font-size: 0.92rem;
  box-shadow: 0 2px 8px rgba(14, 58, 42, 0.07);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}
.cat-carousel__btn:hover:not(:disabled) {
  background: var(--mayan-green-main);
  color: #fff;
  border-color: var(--mayan-green-main);
  box-shadow: 0 4px 14px rgba(22, 76, 59, 0.22);
  transform: scale(1.08);
}
.cat-carousel__btn:disabled { opacity: 0.28; cursor: default; }
.cat-carousel__btn:focus-visible { outline: 2px solid var(--mayan-green-soft); outline-offset: 2px; }
[dir="ltr"] .cat-carousel__btn i { transform: scaleX(-1); }

/* ── Premium family card ── */
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(22, 76, 59, 0.08);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.cat-card::after {
  content: "";
  position: absolute;
  inset: auto -25% -78% -25%;
  height: 85%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 76, 59, 0.12), transparent 70%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(14, 58, 42, 0.12), 0 2px 8px rgba(14, 58, 42, 0.05);
  border-color: rgba(22, 76, 59, 0.18);
}
.cat-card:hover::after { opacity: 1; }

/* media — the family poster/product shot */
.cat-card__media {
  position: relative;
  aspect-ratio: 4 / 4.2;
  background:
    radial-gradient(120% 110% at 50% 8%, rgba(22, 76, 59, 0.05), transparent 55%),
    var(--cream-50, #fafaf6);
  padding: 0.5rem 0.5rem 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cat-card__media img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
  filter: drop-shadow(0 4px 10px rgba(14, 58, 42, 0.08));
  position: relative;
  z-index: 1;
}
.cat-card:hover .cat-card__media img { transform: scale(1.06); }

/* badge — subtle family index */
.cat-card__badge {
  position: absolute;
  top: 0.5rem; inset-inline-start: 0.5rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--mayan-green-main);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(22, 76, 59, 0.10);
  border-radius: var(--r-pill);
  padding: 0.12rem 0.48rem;
  z-index: 2;
}

/* body */
.cat-card__body {
  padding: 0.65rem 0.8rem 0.8rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}
/* watermark icon — large translucent circle behind the product shot */
.cat-card__wm {
  position: absolute;
  inset-inline-end: -1.4rem;
  bottom: -1.6rem;
  width: 6.5rem; height: 6.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(22, 76, 59, 0.10), rgba(22, 76, 59, 0.04) 70%);
  color: rgba(22, 76, 59, 0.16);
  font-size: 3rem;
  pointer-events: none;
  z-index: 0;
  transition: color 0.3s ease, transform 0.3s ease;
}
.cat-card:hover .cat-card__wm {
  color: rgba(22, 76, 59, 0.26);
  transform: scale(1.08);
}
.cat-card h3 {
  font-size: 0.93rem;
  font-weight: 800;
  color: var(--mayan-green-dark);
  margin: 0.1rem 0 0.12rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cat-card p {
  font-size: 0.72rem;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.5;
}
.cat-card__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-top: 0.45rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-faint);
}
.cat-card__meta b {
  color: var(--mayan-green-main);
  font-weight: 700;
}
.cat-card__go {
  margin-inline-start: auto;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(22, 76, 59, 0.07);
  color: var(--mayan-green-main);
  font-size: 0.6rem;
  transition: background 0.25s ease, color 0.25s ease;
}
.cat-card__go i { transition: transform 0.25s ease; }
.cat-card:hover .cat-card__go {
  background: var(--mayan-green-main);
  color: #fff;
}
[dir="ltr"] .cat-card:hover .cat-card__go i { transform: scaleX(-1); }

/* ---------- 9. Product cards ---------- */
.family-banner {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  margin: -0.35rem 0 1.5rem;
}
.family-banner__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green-700);
  margin-bottom: 0.9rem;
}
.family-banner__back i { font-size: 0.85rem; transition: transform 0.25s ease; }
.family-banner__back:hover i { transform: translateX(-4px); }
[dir="rtl"] .family-banner__back i { transform: scaleX(-1); }
[dir="rtl"] .family-banner__back:hover i { transform: scaleX(-1) translateX(-4px); }
.family-banner__head { display: flex; align-items: center; gap: 0.8rem; }
.family-banner__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: var(--green-700);
  color: #fff;
  font-size: 1.1rem;
}
.family-banner h3 { font-size: 1.25rem; font-weight: 800; margin: 0; }
.family-banner p { margin: 0; font-size: 0.85rem; color: var(--text-soft); }
.p-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
#productGrid.pg-grouped { display: block; }

.product-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(14, 58, 42, 0.10);
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(28, 106, 77, 0.32); }
.product-card:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }
.product-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(165deg, #ffffff 52%, var(--soft));
  border-bottom: 1px solid rgba(14, 58, 42, 0.08);
  display: flex; align-items: center; justify-content: center;
  padding: 0.6rem;
  overflow: hidden;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.product-card:hover .product-card__media img { transform: scale(1.05); }

.product-card__body { padding: 1rem 1.15rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.product-card__cat {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 800;
  font-family: var(--font-head);
  color: var(--green-700);
  background: var(--green-100);
  border: 1px solid rgba(38, 130, 94, 0.18);
  border-radius: var(--r-pill);
  padding: 0.16rem 0.65rem;
}
.product-card__title {
  color: var(--green-900);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__desc {
  font-size: 0.85rem;
  color: var(--charcoal);
  margin: 0;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 800;
  font-family: var(--font-head);
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid rgba(38, 130, 94, 0.22);
  border-radius: var(--r-pill);
  padding: 0.45rem 0.9rem;
  transition: background 0.25s ease, color 0.25s ease;
}
.product-card__more i { font-size: 0.9rem; transition: transform 0.25s ease; }
.product-card:hover .product-card__more { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.product-card:hover .product-card__more i { transform: translateX(-4px); }
[dir="ltr"] .product-card:hover .product-card__more i { transform: translateX(4px); }

/* family groups on products page */
.product-family { margin-bottom: 2.6rem; }
.product-family__head {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 1.2rem;
}
.product-family__icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 1.05rem;
}
.product-family__head h3 { font-size: 1.2rem; font-weight: 900; }
.product-family__count {
  margin-inline-start: auto;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--text-faint);
  background: var(--soft);
  border-radius: var(--r-pill);
  padding: 0.22rem 0.75rem;
}

/* ---------- 10. Brands ---------- */
.brands-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.brand-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.2rem 0.9rem 1rem;
  text-align: center;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.brand-card:hover { box-shadow: var(--shadow-sm); border-color: rgba(28, 106, 77, 0.3); transform: translateY(-3px); }
.brand-card__logo {
  height: 88px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.7rem;
  padding: 0.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.brand-card__logo img { max-height: 62px; max-width: 86%; object-fit: contain; }
.brand-card__text {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--green-700);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.3rem;
}
.brand-card p { font-size: 0.76rem; color: var(--text-soft); margin: 0; }
.brands-cta { margin-top: 2rem; text-align: center; }

/* ---------- 11. Coverage / sectors ---------- */
/* Jordan map + message — balanced editorial composition; stacks on mobile */
.cov-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.9rem;
  align-items: start;
}
.cov-map__visual {
  position: relative;
  background:
    radial-gradient(160px 160px at 15% 8%, rgba(232, 184, 75, 0.10), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFCF7 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.6rem 1.2rem 2.8rem;
  box-shadow: var(--shadow-sm);
}
.cov-map__svg-wrap { position: relative; }
.cov-map__svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(300px, 58vh, 470px);
  margin-inline: auto;
}
.cov-map__water { fill: #A9C8D6; opacity: 0.55; pointer-events: none; }
.gov {
  fill: #EEF3E4;
  stroke: #9DBE9B;
  stroke-width: 1.1;
  stroke-linejoin: round;
  stroke-linecap: round;
  cursor: pointer;
  transition: fill 0.22s ease, filter 0.22s ease;
}
.gov:hover,
.gov:focus-visible,
.gov.is-active { fill: url(#covMapLand); }
.gov.is-active { stroke: var(--mayan-gold); stroke-width: 1.6; }
.gov:focus-visible { outline: 2px solid var(--mayan-gold-soft); outline-offset: -2px; }
.cov-tip {
  position: fixed;
  z-index: 99;
  pointer-events: none;
  background: var(--mayan-green-dark);
  color: var(--mayan-ivory);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.42rem 0.78rem;
  border-radius: 10px;
  border: 1px solid rgba(232, 184, 75, 0.45);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 0);
  transition: opacity 0.16s ease;
}
.cov-tip.is-visible { opacity: 1; }
.cov-map__hint {
  position: absolute;
  inset-inline: 0;
  bottom: 0.7rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.cov-map__hint i { color: var(--green-600); }
.cov-map__content .cov-wrap__title { margin-bottom: 0.85rem; }
.cov-map__content .cov-wrap__title:first-child { margin-top: 0.15rem; }
.sol-wrap { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.sector-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.sector-card {
  display: flex; align-items: center; gap: 0.8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.95rem 1.1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.sector-card:hover { border-color: rgba(28, 106, 77, 0.35); box-shadow: var(--shadow-sm); }
.sector-card__icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 1.05rem;
}
.sector-card h3 { font-size: 0.96rem; font-weight: 800; }

.cov-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
}
.cov-wrap__title {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 0.95rem;
}
.cov-wrap__title i { color: var(--green-600); }
.cov-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cov-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--green-50);
  border: 1px solid rgba(28, 106, 77, 0.16);
  color: var(--green-800);
  border-radius: var(--r-pill);
  padding: 0.38rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
}
.cov-chip i { font-size: 0.76rem; color: var(--green-600); }
.cov-chip:hover,
.cov-chip:focus-visible { border-color: rgba(28, 106, 77, 0.42); outline: none; }
.cov-chip.is-active {
  background: rgba(232, 184, 75, 0.14);
  border-color: var(--mayan-gold);
  color: var(--mayan-green-dark);
  box-shadow: 0 0 0 3px rgba(232, 184, 75, 0.10);
}
.cov-chip.is-active i { color: var(--mayan-gold); }

/* channel cards */
.cov-card {
  flex: 1 1 auto;
  min-width: calc(50% - 0.5rem);
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--green-50);
  border: 1px solid rgba(28, 106, 77, 0.16);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.95rem;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--green-800);
}
.cov-card__icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 0.95rem;
}
.cov-divider { height: 1px; background: var(--line); margin: 1.2rem 0; }
.sol-cta-row { margin-top: 1.2rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---------- 12. Contact (light cream, calm) ---------- */
.sec-contact {
  color: var(--charcoal);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 340px at 50% -4%, rgba(232, 184, 75, 0.13), transparent 62%),
    linear-gradient(178deg, var(--cream-200) 0%, var(--cream-100) 58%, var(--cream-50) 100%);
}
.sec-contact .sec-head { margin-bottom: 1.6rem; }
.sec-contact .sec-head .sec-lead { margin-bottom: 0; }

/* wholesale quote strip folded into contact */
.quote-band {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.6rem;
  box-shadow: var(--shadow-sm);
}
.quote-band__head { display: flex; align-items: center; gap: 0.75rem; }
.quote-band__icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 1.15rem;
}
.quote-band h3 { color: var(--ink); font-weight: 800; font-size: 1.05rem; }
.quote-band p { color: var(--text-soft); font-size: 0.86rem; margin: 0; }
.quote-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; }
.quote-list li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; font-weight: 600; color: var(--charcoal); }
.quote-list li i { color: var(--green-600); }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
.contact-info h3 { color: var(--ink); font-size: 1.15rem; font-weight: 800; margin-bottom: 0.3rem; }
.contact-info > p { color: var(--text-soft); font-size: 0.9rem; margin-bottom: 1.1rem; }
.contact-item { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.contact-item__icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--green-100);
  border: 1px solid rgba(28, 106, 77, 0.2);
  color: var(--green-700);
  font-size: 0.95rem;
}
.contact-item__label { font-size: 0.68rem; color: var(--text-faint); }
.contact-item__value { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.contact-item__value:hover { color: var(--green-600); }
/* phone numbers stay LTR in every language — never reversed by RTL bidi */
.phone-ltr { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .phone-ltr { display: inline-block; writing-mode: horizontal-tb; }
.contact-social { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.contact-social a {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--green-700);
  transition: all 0.25s ease;
}
.contact-social a:hover { background: var(--green-700); color: #fff; border-color: var(--green-700); }

.contact-form {
  background: #fff;
  border-radius: var(--r);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-md);
}
.contact-form h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.95rem; }
.form-field { margin-bottom: 0.75rem; }
.form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-head);
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.form-control {
  width: 100%;
  background: var(--soft);
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  padding: 0.58rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--charcoal);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:focus {
  outline: none;
  background: #fff;
  border-color: var(--green-600);
  box-shadow: var(--ring);
}

/* ---------- 13. Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  padding: clamp(2.8rem, 6vw, 4.4rem) 0 clamp(1.8rem, 4vw, 2.6rem);
  text-align: center;
  background:
    radial-gradient(1000px 340px at 50% -10%, rgba(212, 180, 120, 0.22), transparent 62%),
    linear-gradient(180deg, var(--cream-100) 0%, var(--cream-50) 100%);
  border-bottom: 1px solid var(--cream-line);
}
.page-hero h1 {
  font-weight: 900;
  font-size: clamp(1.8rem, 4.2vw, 2.8rem);
  color: var(--ink);
  margin: 0.55rem 0;
}
.page-hero h1 span { color: var(--green-700); }
.page-hero p { color: var(--text-soft); max-width: 620px; margin: 0 auto; font-size: 0.98rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--green-700);
  background: rgba(28, 106, 77, 0.08);
  border: 1px solid rgba(28, 106, 77, 0.22);
  padding: 0.38rem 1.05rem;
  border-radius: var(--r-pill);
}
.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
  margin-bottom: 1.1rem;
  font-weight: 600;
  color: var(--text-faint);
}
.breadcrumb a { color: var(--text-soft); }
.breadcrumb a:hover { color: var(--green-700); }
.breadcrumb .active { color: var(--green-800); }
.breadcrumb-sep { color: var(--green-600); }

/* ---------- 14. Catalogue strip + flipbook ---------- */
.catalog-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow-sm);
}
.catalog-strip__icon {
  width: 52px; height: 52px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 1.25rem;
}
.catalog-strip__text { flex: 1; min-width: 220px; text-align: center; }
.catalog-strip__text h3 { font-size: 1.15rem; font-weight: 900; margin-bottom: 0.15rem; }
.catalog-strip__text p { margin: 0; color: var(--text-soft); font-size: 0.9rem; }

.catalog-section { padding: var(--sec-pad) 0; }
.catalog-section .flip-page-indicator,
.catalog-section .flip-zoom-indicator { color: var(--text-soft); }
.catalog-section .flipbook-hint { color: var(--text-faint); }
.catalog-section .flipbook-hint i { color: var(--green-600); }
.catalog-section .flipbook-loading { color: var(--text-soft); }
.flipbook-wrap { position: relative; }
.flipbook-stage {
  visibility: hidden;
  margin: 0 auto;
  max-width: 1000px;
}
.flipbook-stage.is-loaded { visibility: visible; }
.flipbook { margin: 0 auto; }
.flipbook-toolbar {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0.85rem;
  margin-top: 1.5rem;
}
.flipbook-nav, .flipbook-actions { display: flex; align-items: center; gap: 0.4rem; }
.flip-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--charcoal);
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.25s ease;
}
.flip-btn:hover { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.flip-btn.flip-download { text-decoration: none; }
.flip-page-indicator, .flip-zoom-indicator {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.84rem;
  color: var(--text-soft);
  min-width: 60px;
  text-align: center;
}
.flipbook-hint {
  width: 100%;
  text-align: center;
  margin-top: 0.95rem;
  font-size: 0.82rem;
  color: var(--text-faint);
}
.flipbook-hint i { color: var(--green-600); }
.flipbook-loading {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.95rem;
  color: var(--text-soft);
}
.flipbook-loading .spinner { animation: spin 1s linear infinite; color: var(--green-700); font-size: 2rem; }
.flipbook-loading p { margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 15. Product modal ---------- */
.product-modal .modal-content {
  background: var(--paper);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 960px;
}
.product-modal .modal-dialog { max-width: 960px; }
.product-modal .modal-body { padding: 1.3rem; }
.product-modal .btn-close { position: absolute; top: 1rem; inset-inline-end: 1rem; z-index: 5; }
.card-tag { display: inline-block; padding: 0.32rem 0.85rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; color: var(--green-800); background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-pill); align-self: flex-start; margin-bottom: 0.3rem; }
.product-order-btn { align-self: flex-start; }

/* ---------- 16. Footer ---------- */
/* v10: footer mirrors the header — same deep-green mayan system so the
   page reads light-cream body framed by two matching dark bands. */
.footer {
  position: relative;
  background:
    radial-gradient(120% 110% at 84% -12%, rgba(43, 105, 80, 0.5), transparent 56%),
    linear-gradient(165deg, var(--mayan-green-dark) 0%, var(--mayan-green-deep) 46%, var(--mayan-green-main) 88%);
  color: var(--mayan-ivory);
  border-top: none;
}
.footer-frame .sig-frame__surface { inset: 0; background: transparent; box-shadow: none; z-index: 0; }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 2.6rem 0 1.8rem;
}
.footer-brand img { height: 42px; margin-bottom: 0.85rem; object-fit: contain; }
.footer-brand p { font-size: 0.88rem; line-height: 1.9; margin: 0 0 1.1rem; max-width: 320px; }
.footer-social { display: flex; gap: 0.5rem; }
.footer-social a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-dark);
  color: var(--green-50);
  transition: all 0.25s ease;
}
.footer-social a:hover { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.footer h6 {
  color: var(--paper);
  font-weight: 800;
  font-size: 0.98rem;
  margin-bottom: 1rem;
}
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a {
  font-size: 0.87rem;
  color: rgba(241, 248, 244, 0.66);
  transition: color 0.2s ease, padding 0.2s ease;
}
.footer-links a:hover { color: var(--green-300); padding-inline-start: 4px; }
.footer-links i { color: var(--green-300); margin-inline-end: 0.35rem; }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding: 1.1rem 0;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(241, 248, 244, 0.45);
}

/* ---------- 17. Scroll to top + floating WhatsApp ---------- */
#scrollTopBtn {
  position: fixed;
  bottom: 1.4rem;
  inset-inline-end: 1.4rem;
  z-index: 1040;
  width: 46px; height: 46px;
  display: none; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--green-700);
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 10px 22px rgba(28, 106, 77, 0.3);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}
#scrollTopBtn:hover { transform: translateY(-4px); background: var(--green-600); }

.wa-float {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.1rem);
  inset-inline-start: 1.1rem;
  z-index: 1040;
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  font-size: 1.45rem;
  box-shadow: 0 12px 26px rgba(37, 211, 102, 0.35);
  /* hidden until the visitor scrolls past the hero so it never covers
     headline/CTAs/sectors — .is-visible is toggled by script.js */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.wa-float.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.wa-float:hover { transform: translateY(-4px) scale(1.05); color: #fff; }
@media (max-width: 575px) {
  .wa-float {
    width: 46px; height: 46px; font-size: 1.3rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
  }
}

/* ---------- 18. Filter toolbar (products page) ---------- */
.filter-bar { margin-bottom: 1.8rem; }
.filter-search { position: relative; max-width: 420px; margin-inline-start: 0; margin-inline-end: auto; }
.filter-search i {
  position: absolute;
  inset-inline-start: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
}
.filter-search .form-control { padding-inline-start: 2.6rem; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.95rem; }
.cat-chip {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--green-700);
  background: #fff;
  border: 1.5px solid rgba(28, 106, 77, 0.28);
  border-radius: var(--r-pill);
  padding: 0.4rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cat-chip:hover { border-color: var(--green-600); color: var(--green-700); }
.cat-chip.is-active { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.filter-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.3rem;
  font-size: 0.9rem;
  color: var(--text-soft);
  font-weight: 600;
}
.empty-state {
  display: none;
  text-align: center;
  padding: 3.4rem 1rem;
  border: 1.5px dashed rgba(28, 106, 77, 0.35);
  border-radius: var(--r-lg);
  background: #fff;
}
.empty-state i { font-size: 2.4rem; color: var(--green-600); display: block; margin-bottom: 0.7rem; }
.empty-state h3 { font-size: 1.15rem; font-weight: 900; margin-bottom: 0.35rem; color: var(--ink); }
.empty-state p { color: var(--text-soft); font-size: 0.92rem; margin-bottom: 1.1rem; }

/* ============================================================================
   19. RESPONSIVE (mobile-first, min-width)
   ============================================================================ */

/* ---- >= 576px (small) ---- */
@media (min-width: 576px) {
  :root { --sec-pad: 4rem; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .p-grid, .p-grid--flat { grid-template-columns: repeat(2, 1fr); }
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- >= 768px (medium) ---- */
@media (min-width: 768px) {
  :root { --sec-pad: 4.8rem; }

  .p-grid, .p-grid--flat { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-grid { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  .hero-glass { padding: 1.8rem; }
  .hero-glass__grid { gap: 1.5rem 2rem; }

  .contact-grid { grid-template-columns: 1fr; }
  .catalog-strip__text { text-align: start; }
}

/* ---- >= 992px (large) ---- */
@media (min-width: 992px) {
  .site-nav .navbar-collapse { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
  .site-nav .nav-link.active::after { display: block; }
  .site-nav .navbar-brand + .navbar-collapse .navbar-nav { margin-inline-start: auto; }

  .sig-frame { border-radius: 0; }
  .brand-logo img { height: 48px; }
  .site-header.is-scrolled .brand-logo img { height: 40px; }
  .sig-frame__util-inner { min-height: 36px; }

  .hero-layout { grid-template-columns: 1.02fr 0.98fr; gap: clamp(2rem, 4vw, 3.6rem); }
  .hero-sub { font-size: 1.06rem; }

  .p-grid, .p-grid--flat { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .brands-grid { grid-template-columns: repeat(6, 1fr); }
  .sector-grid { grid-template-columns: repeat(3, 1fr); }
  .sol-wrap { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 4vw, 4rem); }
  .footer__grid { grid-template-columns: 1.4fr 0.8fr 0.8fr 1.1fr; }

  .contact-grid { grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.8rem, 3.5vw, 3rem); }
  .cov-map { grid-template-columns: 0.92fr 1.08fr; gap: clamp(2rem, 3.5vw, 3.2rem); align-items: center; }
  .cov-map__visual { padding: 1.9rem 1.5rem 3rem; }
  .quote-band { flex-direction: row; align-items: center; justify-content: space-between; }
  .quote-band > div { flex: 1; }
  .quote-band__head { max-width: 420px; }
}

/* ---- >= 1200px (extra large) ---- */
@media (min-width: 1200px) {
  .p-grid, .p-grid--flat { grid-template-columns: repeat(4, 1fr); }
}

/* catalog flipbook readability: keep stage padding on dark? (none needed — light) */

/* =================================================================
   PREMIUM PRODUCTS PAGE — scoped under body.products-page
   ================================================================= */
/* — filter toolbar — */
.products-page .filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}
.products-page .filter-search {
  position: relative;
  flex: 1 1 240px;
  max-width: 420px;
}
.products-page .filter-search > i {
  position: absolute;
  top: 50%;
  inset-inline-start: 1rem;
  transform: translateY(-50%);
  color: var(--green-600);
  font-size: 0.85rem;
  pointer-events: none;
}
.products-page .filter-search > input {
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.products-page .filter-search > input:focus {
  border-color: var(--green-500);
  box-shadow: var(--ring);
  outline: none;
}

/* — category chip pills (shared `.cat-chip` styling) — */
.products-page .cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.76rem;
  font-weight: 700;
  font-family: var(--font-head);
  color: var(--green-700);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  user-select: none;
  white-space: nowrap;
}
.products-page .cat-chip:hover {
  border-color: var(--green-300);
  background: var(--green-50);
}
.products-page .cat-chip.is-active {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
  box-shadow: 0 2px 8px rgba(28,106,77,0.22);
}
.products-page .cat-chip:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

/* — filter meta row — */
.products-page .filter-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  color: var(--text-soft);
}
.products-page .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--green-700);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.products-page .btn-ghost:hover {
  background: var(--green-50);
  border-color: var(--green-300);
}

/* — product grid: 3 cols desktop, 4 cols wide — */
.products-page .p-grid {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 576px) {
  .products-page .p-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .products-page .p-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .products-page .p-grid { grid-template-columns: repeat(4, 1fr); }
}

/* — premium product card — */
.products-page .product-card {
  background: var(--card);
  border: 1px solid rgba(14,58,42,0.08);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.products-page .product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(14,58,42,0.09), 0 0 0 1px rgba(28,106,77,0.12);
  border-color: rgba(28,106,77,0.25);
}
.products-page .product-card__media {
  background: linear-gradient(180deg, #fdfbf4 0%, var(--cream-100) 100%);
  aspect-ratio: 4/3;
}
.products-page .product-card__media img {
  transition: transform 0.4s ease;
}
.products-page .product-card:hover .product-card__media img {
  transform: scale(1.04);
}
.products-page .product-card__body { padding: 0.9rem 1rem 1rem; }
.products-page .product-card__title { color: var(--green-900); font-size: 0.95rem; }
.products-page .product-card__desc { color: var(--text-soft); font-size: 0.82rem; }

/* — family groups — */
.products-page .product-family { margin-bottom: 2.2rem; }
.products-page .product-family__head {
  padding: 0.8rem 1rem;
  background: var(--green-50);
  border: 1px solid rgba(14,58,42,0.08);
  border-radius: 14px;
  margin-bottom: 1rem;
}
.products-page .product-family__icon {
  background: var(--green-100);
  color: var(--green-700);
}

/* — family banner (top of filtered view) — */
.products-page .family-banner {
  margin: 0 0 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--green-50);
  border: 1px solid rgba(14,58,42,0.1);
  border-radius: 16px;
}
.products-page .family-banner__back {
  color: var(--green-600);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
}
.products-page .family-banner__back:hover { color: var(--green-700); }
.products-page .family-banner__icon {
  background: var(--green-700);
  color: #fff;
}
.products-page .family-banner h3 { font-size: 1.2rem; font-weight: 900; }
.products-page .family-banner p { color: var(--text-soft); }

/* — empty state — */
.products-page .empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 3rem 1.5rem;
  text-align: center;
  background: var(--card);
  border: 2px dashed var(--line);
  border-radius: 18px;
}
.products-page .empty-state.is-visible { display: flex; }
.products-page .empty-state i { font-size: 2.2rem; color: var(--green-200); }
.products-page .empty-state h3 { font-size: 1.15rem; font-weight: 800; color: var(--green-800); margin: 0; }
.products-page .empty-state p { color: var(--text-soft); font-size: 0.88rem; margin: 0; }

/* =================================================================
   PREMIUM PRODUCT MODAL VIEWER (.pm-premium — index.html + products.html)
   ================================================================= */
.product-modal.pm-premium .modal-content {
  background: var(--cream-50);
  border: 1px solid rgba(14,58,42,0.08);
  border-radius: 22px;
  box-shadow: 0 16px 48px rgba(14,58,42,0.12), 0 0 0 1px rgba(14,58,42,0.05);
  overflow: hidden;
  max-width: 980px;
}
.product-modal.pm-premium .modal-dialog { max-width: 980px; }
.product-modal.pm-premium .modal-body { padding: 0; }
.product-modal.pm-premium .btn-close {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  z-index: 12;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--green-800);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s;
}
.product-modal.pm-premium .btn-close:hover { background: #fff; }

/* layout: viewer + info */
.product-modal.pm-premium .pm-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 520px;
}
@media (max-width: 768px) {
  .product-modal.pm-premium .pm-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

/* image viewer */
.product-modal.pm-premium .pm-viewer {
  position: relative;
  background: linear-gradient(180deg, var(--cream-100) 0%, var(--cream-50) 100%);
  border-inline-end: 1px solid rgba(14,58,42,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-modal.pm-premium .pm-stage {
  width: 100%;
  height: 100%;
  min-height: 340px;
  max-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  position: relative;
  cursor: grab;
  user-select: none;
}
.product-modal.pm-premium .pm-stage.pm-stage--drag { cursor: grabbing; }
.product-modal.pm-premium .pm-stage .pm-product {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  will-change: transform;
}
.product-modal.pm-premium .pm-stage .pm-product img {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* v13: smooth the step-jumps of wheel / zoom-button transforms (applied
   in script.js just before each non-drag zoom; removed on pointer down so
   drag-to-pan stays 1:1). */
.product-modal.pm-premium .pm-stage .pm-product.pm-product--tween {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* zoom tools bar */
.product-modal.pm-premium .pm-tools {
  position: absolute;
  bottom: 0.8rem;
  inset-inline-end: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  z-index: 4;
}
.product-modal.pm-premium .pm-tool {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--green-800);
  border-radius: 50%;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.product-modal.pm-premium .pm-tool:hover {
  background: var(--green-100);
  color: var(--green-700);
}
.product-modal.pm-premium .pm-tool:disabled {
  opacity: 0.35;
  cursor: default;
}
.product-modal.pm-premium .pm-zoom-pct {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--green-800);
  min-width: 36px;
  text-align: center;
}

/* image hint */
.product-modal.pm-premium .pm-hint {
  position: absolute;
  bottom: 0.8rem;
  inset-inline-start: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-soft);
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.2rem 0.7rem;
  z-index: 4;
  pointer-events: none;
}

/* info panel */
.product-modal.pm-premium .product-modal__info {
  padding: 1.8rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.product-modal.pm-premium .product-modal__info .card-tag {
  align-self: flex-start;
  margin-bottom: 0.5rem;
  background: var(--green-50);
  border-color: rgba(28,106,77,0.18);
  color: var(--green-700);
}
.product-modal.pm-premium .product-modal__info h4 {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--green-900);
  margin: 0.5rem 0 0.8rem;
  line-height: 1.5;
}
.product-modal.pm-premium .product-modal__line {
  width: 38px;
  height: 3px;
  background: linear-gradient(90deg, var(--green-600), var(--gold-400));
  border-radius: var(--r-pill);
  margin-bottom: 0.85rem;
}
.product-modal.pm-premium .product-modal__info .pm-desc {
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--text-soft);
  margin-bottom: 0.9rem;
}
/* product facts — one row per field that actually exists in data.js */
.product-modal.pm-premium .pm-specs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0.85rem 1rem;
  background: var(--green-50);
  border: 1px solid rgba(28,106,77,0.14);
  border-radius: 12px;
}
.product-modal.pm-premium .pm-spec {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.84rem;
  line-height: 1.5;
}
.product-modal.pm-premium .pm-spec dt {
  flex-shrink: 0;
  min-width: 5.5rem;
  color: var(--text-soft);
  font-weight: 600;
}
.product-modal.pm-premium .pm-spec dd {
  margin: 0;
  color: var(--green-800);
  font-weight: 700;
}
.product-modal.pm-premium .product-modal__icons {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.product-modal.pm-premium .product-modal__icon {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-soft);
}
.product-modal.pm-premium .product-modal__icon i {
  color: var(--green-600);
}
.product-modal.pm-premium .product-order-btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 0.7rem 1.6rem;
  font-weight: 800;
  font-size: 0.92rem;
  border-radius: 14px;
}
@media (max-width: 768px) {
  .product-modal.pm-premium .pm-stage { min-height: 280px; max-height: 50vh; }
  .product-modal.pm-premium .product-modal__info { padding: 1.4rem 1.2rem; }
}

/* =================================================================
   REDUCED MOTION — disable modal viewer transitions / card hover
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .product-modal.pm-premium .pm-stage .pm-product { transition: none !important; }
  .product-modal.pm-premium .pm-tool { transition: none; }
  .product-modal.pm-premium .btn-close { transition: none; }
  .products-page .product-card { transition: none; }
  .products-page .product-card__media img { transition: none; }
  .products-page .cat-chip { transition: none; }
}

/* ================================================================
   v14.4 — COMPACT COVERAGE + THEME SWITCHER + MAYAN LIGHT/DARK
   ----------------------------------------------------------------
   Three additions:
   1) `.sec-cov` compacts the #coverage section (padding, heading,
      map height, chips + sector cards) so it reads within one screen
      on desktop while staying premium.
   2) `.theme-dd` — the premium theme dropdown that sits next to the
      language switch. Independent of language; mayan_theme persists.
   3) `:root[data-theme="dark"]` — MAYAN Dark: cinematic charcoal +
      mayan-green + gold, mapped through the same tokens plus targeted
      overrides for the few surfaces with hard-coded light colors.
   ================================================================ */

/* ---------- 1. Coverage: compact section ---------- */
.sec-cov { padding: 1.5rem 0 1.9rem; }
.sec-cov .sec-head { margin-bottom: 1.1rem; }
.sec-cov .sec-tag { padding: 0.32rem 0.9rem; font-size: 0.7rem; letter-spacing: 0.08em; }
.sec-cov .sec-title { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0.55rem 0 0.3rem; }
.sec-cov .sec-lead { font-size: 0.85rem; max-width: 560px; }
.sec-cov .sec-line { margin-top: 0.6rem; }

.sec-cov .cov-map { gap: 1.6rem; }
.sec-cov .cov-map__svg { height: clamp(228px, 42vh, 340px); }
.sec-cov .cov-map__visual { padding: 1.1rem 1rem 2.2rem; }
.sec-cov .cov-map__hint { bottom: 0.5rem; font-size: 0.68rem; }
.sec-cov .cov-map__content .cov-wrap__title { margin-bottom: 0.6rem; }
.sec-cov .cov-wrap__title { font-size: 0.92rem; }
.sec-cov .cov-chips { gap: 0.42rem; }
.sec-cov .cov-chip { padding: 0.3rem 0.72rem; font-size: 0.76rem; gap: 0.28rem; }
.sec-cov .cov-chip i { font-size: 0.72rem; }
.sec-cov .cov-divider { margin: 0.95rem 0; }
.sec-cov .sector-grid { gap: 0.55rem; }
.sec-cov .sector-card { padding: 0.62rem 0.85rem; gap: 0.65rem; }
.sec-cov .sector-card__icon { width: 36px; height: 36px; font-size: 0.95rem; border-radius: 10px; }
.sec-cov .sector-card h3 { font-size: 0.88rem; }
.sec-cov .sol-cta-row { margin-top: 0.95rem; }
.sec-cov .sol-cta-row .btn { padding: 0.5rem 1.15rem; font-size: 0.85rem; }
@media (min-width: 992px) {
  .sec-cov .cov-map { gap: clamp(1.4rem, 2.6vw, 2.4rem); }
  .sec-cov .cov-map__svg { height: clamp(240px, 46vh, 350px); }
  .sec-cov .cov-map__visual { padding: 1.2rem 1.1rem 2.4rem; }
}
@media (max-width: 575px) {
  .sec-cov { padding: 1.2rem 0 1.5rem; }
  .sec-cov .cov-map__svg { height: clamp(200px, 34vh, 260px); }
  .sec-cov .cov-chips { gap: 0.34rem; }
  .sec-cov .cov-chip { padding: 0.24rem 0.56rem; font-size: 0.7rem; gap: 0.22rem; }
  .sec-cov .cov-divider { margin: 0.7rem 0; }
  .sec-cov .sector-grid { grid-template-columns: repeat(2, 1fr); gap: 0.42rem; }
  .sec-cov .sector-card { padding: 0.5rem 0.55rem; gap: 0.45rem; }
  .sec-cov .sector-card__icon { width: 30px; height: 30px; font-size: 0.8rem; border-radius: 8px; }
  .sec-cov .sector-card h3 { font-size: 0.76rem; }
  .sec-cov .sol-cta-row { margin-top: 0.75rem; }
}

/* ---------- 2. Theme switcher dropdown ---------- */
.theme-dd { position: relative; z-index: 62; }
.theme-dd__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(11, 47, 39, 0.5);
  border: 1px solid rgba(216, 190, 112, 0.38);
  border-radius: var(--r-pill);
  color: rgba(243, 235, 217, 0.85);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.26rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.theme-dd__toggle:hover,
.theme-dd.is-open .theme-dd__toggle { border-color: rgba(216, 190, 112, 0.78); color: var(--mayan-ivory); }
.theme-dd__toggle-icon { font-size: 0.9rem; color: rgba(216, 190, 112, 0.92); }
.theme-dd__current { white-space: nowrap; }
.theme-dd__caret { font-size: 0.7rem; opacity: 0.8; }
.theme-dd__menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  inset-inline-end: 0;
  min-width: 196px;
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #103D32, #0B2F27);
  border: 1px solid rgba(216, 190, 112, 0.4);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.theme-dd.is-open .theme-dd__menu { display: flex; }
.theme-dd__opt {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(243, 235, 217, 0.85);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  text-align: start;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.theme-dd__opt:hover { background: rgba(43, 105, 80, 0.4); border-color: rgba(216, 190, 112, 0.3); color: var(--mayan-ivory); }
.theme-dd__opt.active { border-color: rgba(216, 190, 112, 0.55); background: rgba(232, 184, 75, 0.12); }
.theme-dd__swatch {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(243, 235, 217, 0.35);
}
.theme-dd__swatch--dark { background: linear-gradient(135deg, #101613 0%, #1B2A22 100%); box-shadow: inset 0 0 0 3px rgba(216, 190, 112, 0.5); }
.theme-dd__swatch--light { background: linear-gradient(135deg, #FDFBF4 0%, #E6DCC2 100%); }
.theme-dd__tick { margin-inline-start: auto; color: var(--mayan-gold-soft); opacity: 0; transition: opacity 0.2s ease; }
.theme-dd__opt.active .theme-dd__tick { opacity: 1; }

/* compacts the language + theme dropdowns on phones + tablets */
@media (max-width: 767px) {
  .lang-dd__current { display: none; }
}
@media (max-width: 639px) {
  .lang-dd__toggle { padding: 0.22rem 0.55rem; gap: 0.3rem; }
  .lang-dd__toggle-icon { font-size: 0.85rem; }
  .lang-dd__menu { min-width: 172px; }
  .lang-dd-opt { font-size: 0.8rem; }
  .theme-dd__current { display: none; }
  .theme-dd__toggle { padding: 0.22rem 0.55rem; gap: 0.3rem; }
  .theme-dd__toggle-icon { font-size: 0.85rem; }
  .theme-dd__menu { min-width: 172px; }
  .theme-dd__opt { font-size: 0.8rem; }
}

/* ---------- 3. MAYAN Dark theme ---------- */
/* Token remap — nearly every surface reads through these custom props, so a
   few lines re-theme the whole page; the targeted rules below only clean up
   the components that hard-code light colours. */
:root[data-theme="dark"] {
  --ink:  #F0E9D7;
  --charcoal: #E3DCC9;
  --text-soft: #A7B2A4;
  --text-faint: #7C877B;

  --green-950: #0A2C20;
  --green-900: #0E3A2A;
  --green-800: #7BC9A5;
  --green-700: #58A883;
  --green-600: #449C74;
  --green-500: #30855F;
  --green-300: #3E8F6A;
  --green-200: #2C6B51;
  --green-100: #1E4C3B;
  --green-50:  #16382C;

  --cream-50:   #151A16;
  --cream-100:  #1A211B;
  --cream-200:  #212A23;
  --cream-300:  #2B362D;
  --cream-line: rgba(232, 224, 195, 0.14);

  --paper:  #151A16;
  --soft:   #1C241E;
  --card:   #1E2821;
  --line:   rgba(232, 224, 195, 0.14);

  --white:  #1E2821;

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 16px 36px rgba(0, 0, 0, 0.5);
  --ring: 0 0 0 4px rgba(111, 189, 151, 0.22);
}

html[data-theme="dark"] body { background: var(--cream-50); }
html[data-theme="dark"] .sec-tag {
  color: var(--green-300);
  background: rgba(151, 206, 176, 0.10);
  border-color: rgba(151, 206, 176, 0.28);
}
html[data-theme="dark"] .sec-title span,
html[data-theme="dark"] .g-title span,
html[data-theme="dark"] .hero-title span { color: var(--mayan-gold-soft); }
html[data-theme="dark"] .sec-line { background: linear-gradient(90deg, var(--green-600), var(--green-800) 52%, var(--green-600)); }

/* cards & surfaces that hard-coded white */
html[data-theme="dark"] .why-item,
html[data-theme="dark"] .cat-card,
html[data-theme="dark"] .catalog-strip,
html[data-theme="dark"] .brand-card,
html[data-theme="dark"] .sector-card,
html[data-theme="dark"] .cov-wrap,
html[data-theme="dark"] .quote-band,
html[data-theme="dark"] .contact-form,
html[data-theme="dark"] .contact-social a,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .flip-btn { background: var(--card); }
html[data-theme="dark"] .why-item { border-color: var(--line); }
html[data-theme="dark"] .why-item:hover,
html[data-theme="dark"] .sector-card:hover { border-color: rgba(151, 206, 176, 0.35); }
html[data-theme="dark"] .cat-card { border-color: var(--line); }
html[data-theme="dark"] .cat-card:hover { border-color: rgba(151, 206, 176, 0.22); }
html[data-theme="dark"] .catalog-strip,
html[data-theme="dark"] .brand-card,
html[data-theme="dark"] .quote-band,
html[data-theme="dark"] .flip-btn { border-color: var(--line); }
html[data-theme="dark"] .cat-card__badge { background: rgba(16, 30, 24, 0.72); color: var(--green-300); border-color: rgba(151, 206, 176, 0.2); }
html[data-theme="dark"] .cat-carousel__btn { background: rgba(30, 40, 33, 0.88); color: var(--green-300); border-color: rgba(151, 206, 176, 0.28); }

/* product tile stays white so the 661×886 white-background shots blend */
html[data-theme="dark"] .product-card { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .product-card__media { background: linear-gradient(165deg, #ffffff 52%, #F1F6F3); }

/* coverage map — dark land, subtle water, gold interactions stay readable */
html[data-theme="dark"] .cov-map__visual {
  background:
    radial-gradient(160px 160px at 15% 8%, rgba(232, 184, 75, 0.07), transparent 70%),
    linear-gradient(180deg, #1E2821 0%, #19211B 100%);
}
html[data-theme="dark"] .gov { fill: #1D2A22; stroke: #3E8F6A; }
html[data-theme="dark"] .gov:hover,
html[data-theme="dark"] .gov:focus-visible,
html[data-theme="dark"] .gov.is-active { fill: url(#covMapLand); }
html[data-theme="dark"] .cov-map__water { fill: #2C4A57; opacity: 0.5; }
html[data-theme="dark"] .cov-chip { border-color: rgba(151, 206, 176, 0.3); }
html[data-theme="dark"] .cov-chip.is-active {
  background: rgba(232, 184, 75, 0.10);
  border-color: var(--mayan-gold);
  box-shadow: 0 0 0 3px rgba(232, 184, 75, 0.08);
}

/* buttons & inputs */
html[data-theme="dark"] .btn-outline { border-color: var(--green-600); color: var(--green-300); }
html[data-theme="dark"] .btn-outline:hover { background: var(--green-700); color: #fff; }
html[data-theme="dark"] .btn-light { background: var(--card); color: var(--green-300); }
html[data-theme="dark"] .btn-light:hover { background: var(--green-100); color: var(--green-200); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-control:focus { background: var(--card); color: var(--charcoal); border-color: var(--line); }
html[data-theme="dark"] .form-control:focus { border-color: var(--green-600); box-shadow: var(--ring); }

/* inner page heroes, chips, modal glass, text accents */
html[data-theme="dark"] .page-hero h1 span { color: var(--mayan-gold-soft); }
html[data-theme="dark"] .hero-badge { color: var(--green-300); background: rgba(151, 206, 176, 0.10); border-color: rgba(151, 206, 176, 0.28); }
html[data-theme="dark"] .about-media__since { background: var(--card); color: var(--green-300); }
html[data-theme="dark"] .product-modal.pm-premium .modal-content { border-color: var(--line); }
html[data-theme="dark"] .product-modal.pm-premium .btn-close { background: rgba(30, 40, 33, 0.92); color: var(--green-300); }
html[data-theme="dark"] .product-modal.pm-premium .pm-tools { background: rgba(30, 40, 33, 0.92); }
html[data-theme="dark"] .product-modal.pm-premium .pm-viewer { border-inline-end-color: var(--line); }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] * { transition: none !important; }
}

/* ======================================================================
   v14.6 — COMPACT CONTACT · WARM HERO · EDITORIAL TYPE · TWIN SWITCHERS
   All overrides are appended so the v14.5 layer stays intact.
   ====================================================================== */

/* ---------- 1. Contact compaction (all content kept, nothing clipped) ---------- */
.sec-contact { padding: 2rem 0 2.4rem; }
.sec-contact .sec-head { margin-bottom: 1.1rem; }
.sec-contact .sec-tag { padding: 0.34rem 0.95rem; font-size: 0.72rem; letter-spacing: 0.08em; }
.sec-contact .sec-title { font-size: clamp(1.35rem, 2.7vw, 1.85rem); margin: 0.55rem 0 0.3rem; }
.sec-contact .sec-lead { font-size: 0.86rem; max-width: 560px; margin-bottom: 0; }
.sec-contact .sec-line { margin-top: 0.6rem; }

.sec-contact .quote-band { padding: 0.85rem 1.15rem; margin-bottom: 1.1rem; gap: 0.7rem; }
.sec-contact .quote-band__icon { width: 38px; height: 38px; font-size: 1rem; border-radius: 11px; }
.sec-contact .quote-band h3 { font-size: 0.98rem; margin-bottom: 0.15rem; }
.sec-contact .quote-band p { font-size: 0.8rem; margin-bottom: 0.55rem; }
.sec-contact .quote-band__list li { font-size: 0.8rem; }
.sec-contact .quote-band__list { gap: 0.24rem; }
.sec-contact .quote-band__list li i { font-size: 0.8rem; }

.sec-contact .contact-grid { gap: 1.1rem; }
.sec-contact .contact-info h3 { font-size: 1.02rem; margin-bottom: 0.25rem; }
.sec-contact .contact-info .contact-info__lead { font-size: 0.82rem; margin-bottom: 0.75rem; }
.sec-contact .contact-item { margin-bottom: 0.6rem; }
.sec-contact .contact-item__icon { width: 34px; height: 34px; font-size: 0.9rem; border-radius: 10px; }
.sec-contact .contact-item__label { font-size: 0.8rem; }
.sec-contact .contact-item__value, .sec-contact .contact-item__value a { font-size: 0.86rem; }
.sec-contact .contact-social { margin-top: 0.6rem; }
.sec-contact .contact-social__link { width: 36px; height: 36px; font-size: 0.95rem; }

.sec-contact .contact-form { padding: 1rem 1.15rem; }
.sec-contact .contact-form h3 { font-size: 0.98rem; margin-bottom: 0.7rem; }
.sec-contact .contact-form .form-field { margin-bottom: 0.6rem; }
.sec-contact .contact-form .form-label { margin-bottom: 0.18rem; font-size: 0.8rem; }
.sec-contact .contact-form .form-control,
.sec-contact .contact-form select.form-select { padding: 0.5rem 0.85rem; font-size: 0.86rem; }
.sec-contact .contact-form .quote-band__list { font-size: 0.8rem; }
@media (min-width: 992px) {
  .sec-contact .contact-grid { gap: clamp(1.4rem, 2.4vw, 2rem); }
}
@media (max-width: 575px) {
  .sec-contact { padding: 1.6rem 0 2rem; }
  .sec-contact .quote-band { padding: 0.75rem 1rem; }
  .sec-contact .contact-form { padding: 0.9rem 1rem; }
}

/* ---------- 4. Twin minimal-priority language + theme switchers ---------- */
.lang-dd__toggle,
.theme-dd__toggle {
  gap: 0.42rem;
  height: 32px;
  padding: 0.34rem 0.7rem;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #FBF6EA, #EFE4CE);
  border: 1px solid rgba(169, 118, 31, 0.55);
  color: #241B10;
}
.theme-dd__toggle { padding-inline: 0.62rem; }
.lang-dd__toggle:hover,
.lang-dd.is-open .lang-dd__toggle,
.theme-dd__toggle:hover,
.theme-dd.is-open .theme-dd__toggle {
  border-color: #A9761F;
  background: linear-gradient(180deg, #FFFFFF, #F4E9D3);
  color: #20180D;
}
.lang-dd__current {
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: #6B4E18;
}
.lang-dd__toggle-icon,
.theme-dd__toggle-icon {
  font-size: 0.9rem;
  color: #7A5A1C;
}
.lang-dd__caret,
.theme-dd__caret {
  font-size: 0.64rem;
  color: #4A3713;
  transition: transform 0.22s var(--ease-cine);
}
.lang-dd.is-open .lang-dd__caret,
.lang-dd__toggle:hover .lang-dd__caret,
.theme-dd.is-open .theme-dd__caret,
.theme-dd__toggle:hover .theme-dd__caret { transform: rotate(180deg); }

.lang-dd__menu,
.theme-dd__menu {
  top: calc(100% + 0.55rem);
  min-width: 158px;
  padding: 0.42rem;
  gap: 0.2rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #FBF6EA, #F1E6D0);
  border: 1px solid rgba(169, 118, 31, 0.5);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42), 0 0 0 4px rgba(201, 149, 59, 0.08);
}
.lang-dd.is-open .lang-dd__menu { display: flex; animation: mayan-dd-pop 0.18s var(--ease-cine); }
.theme-dd.is-open .theme-dd__menu { display: flex; animation: mayan-dd-pop 0.18s var(--ease-cine); }
@keyframes mayan-dd-pop {
  from { opacity: 0; transform: translateY(-5px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.lang-dd-opt,
.theme-dd__opt {
  gap: 0.5rem;
  padding: 0.44rem 0.55rem;
  border-radius: 9px;
  font-size: 0.78rem;
  color: #2E2416;
}
.lang-dd-opt:hover,
.theme-dd__opt:hover {
  background: rgba(201, 149, 59, 0.14);
  border-color: rgba(169, 118, 31, 0.4);
  color: #20180D;
}
.lang-dd-opt.active,
.theme-dd__opt.active {
  border-color: rgba(169, 118, 31, 0.6);
  background: rgba(201, 149, 59, 0.16);
}
.lang-dd-flag {
  width: 30px;
  height: 22px;
  border-radius: 6px;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--gold-600), var(--gold-400));
  color: #14100A;
}
.theme-dd__swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.lang-dd__tick,
.theme-dd__tick { color: #A9761F; }
/* keep the compact AR/EN code always visible (2 chars never overflow) */
.lang-dd__current { display: inline-block; }

/* —— MAYAN Dark: switch the twin switchers to charcoal / ivory / gold —— */
html[data-theme="dark"] .lang-dd__toggle,
html[data-theme="dark"] .theme-dd__toggle {
  background: rgba(10, 8, 5, 0.55);
  border-color: rgba(216, 190, 112, 0.4);
  color: var(--mayan-ivory);
}
html[data-theme="dark"] .lang-dd__toggle:hover,
html[data-theme="dark"] .lang-dd.is-open .lang-dd__toggle,
html[data-theme="dark"] .theme-dd__toggle:hover,
html[data-theme="dark"] .theme-dd.is-open .theme-dd__toggle {
  border-color: rgba(216, 190, 112, 0.8);
  background: rgba(16, 12, 7, 0.7);
  color: #FFF5E0;
}
html[data-theme="dark"] .lang-dd__current { color: #F0CC72; }
html[data-theme="dark"] .lang-dd__toggle-icon,
html[data-theme="dark"] .theme-dd__toggle-icon { color: #D8BE70; }
html[data-theme="dark"] .lang-dd__caret,
html[data-theme="dark"] .theme-dd__caret { color: #D8BE70; }
html[data-theme="dark"] .lang-dd__menu,
html[data-theme="dark"] .theme-dd__menu {
  background: linear-gradient(180deg, #1B150E, #0F0B06);
  border-color: rgba(216, 190, 112, 0.45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .lang-dd-opt,
html[data-theme="dark"] .theme-dd__opt { color: rgba(243, 235, 217, 0.88); }
html[data-theme="dark"] .lang-dd-opt:hover,
html[data-theme="dark"] .theme-dd__opt:hover {
  background: rgba(232, 184, 75, 0.12);
  border-color: rgba(216, 190, 112, 0.35);
  color: var(--mayan-ivory);
}
html[data-theme="dark"] .lang-dd-opt.active,
html[data-theme="dark"] .theme-dd__opt.active {
  border-color: rgba(216, 190, 112, 0.6);
  background: rgba(232, 184, 75, 0.16);
}
html[data-theme="dark"] .lang-dd__tick,
html[data-theme="dark"] .theme-dd__tick { color: #D8BE70; }

@media (max-width: 639px) {
  .lang-dd__toggle { padding: 0.3rem 0.55rem; }
  .theme-dd__toggle { padding: 0.3rem 0.5rem; }
  .lang-dd__menu,
  .theme-dd__menu { min-width: 150px; }
}

/* ============================================================================
   UNIVERSE HERO — A WORLD OF FOOD (index only, engine: hero/mayan.js)
   ----------------------------------------------------------------------------
   A scroll-directed pinned film: macro rice → the seven food families (rice,
   oils, sauces, canned, vinegar, frozen, syrups) each in their own material →
   convergence into ONE world → the real brand constellation (MAYAN · FRESCO ·
   NISREEN · GOLDEN SPOONS) → the MAYAN final. Back canvas + DOM logo plane +
   front canvas; all typography is DOM (i18n / RTL). Class namespace: .uni-*.
   html.uni-static = static fallback (no canvas / reduced motion).
   ========================================================================== */

/* --- cinematic fixed header (index only: body.site--cinema) ----------------- */
.site-header--cinema { will-change: transform; }
body.site--cinema { background: #070503; }
body.site--cinema .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
}
.site-header--cinema:not(.is-scrolled) .sig-frame {
  background: linear-gradient(180deg,
    rgba(8, 16, 12, 0.00) 0%,
    rgba(8, 16, 12, 0.30) 30%,
    rgba(8, 14, 10, 0.78) 100%);
}
.site-header--cinema:not(.is-scrolled) .sig-frame__surface {
  background: linear-gradient(180deg, rgba(20, 34, 26, 0.16), rgba(12, 22, 17, 0.06));
}
.site-header--cinema.is-scrolled .sig-frame {
  background: linear-gradient(180deg, rgba(7, 20, 14, 0.86), rgba(5, 16, 11, 0.92));
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.site-header--cinema.is-scrolled .sig-frame__surface {
  background: linear-gradient(180deg, rgba(16, 46, 34, 0.22), rgba(9, 32, 22, 0.10));
}
.site-header--cinema.is-scrolled { box-shadow: 0 10px 32px rgba(3, 10, 7, 0.45); }

/* --- the film runway + pinned stage ----------------------------------------- */
#home.uni {
  position: relative;
  height: 1100vh;
  overflow: clip;
  color: #FFF6E6;
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(58, 38, 20, 0.50), transparent 58%),
    linear-gradient(180deg, #100B06 0%, #0C0805 34%, #090604 66%, #060402 100%);
}
#home.uni .uni-stage {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #070503;
  perspective: 1200px;
  isolation: isolate;
}

/* --- motion layers ---------------------------------------------------------- */
.uni-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.uni-canvas--back  { z-index: 1; will-change: transform; }
.uni-canvas--front { z-index: 3; will-change: transform; }

/* --- brand constellation (real logo files — never redrawn/recreated) -------- */
.uni-logos {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.uni-logo {
  position: absolute;
  left: 0; top: 0;
  margin: 0;
  width: 0; height: 0;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity, filter;
}
.uni-logo__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: min(46vw, 540px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0;
  filter: blur(1px);
  pointer-events: none;
}
.uni-logo img {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: none;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.42));
}
.uni-logo[data-brand="mayan"] img   { height: clamp(60px, 8.6vw, 128px); }
.uni-logo[data-brand="fresco"] img  { height: clamp(38px, 4.8vw, 72px); }
.uni-logo[data-brand="nisreen"] img { height: clamp(38px, 4.8vw, 72px); }
.uni-logo[data-brand="spoons"] img  { height: clamp(32px, 4.2vw, 62px); }

/* --- typography ------------------------------------------------------------- */
.uni-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.uni-copy::before {
  /* soft focus pool behind the headline clusters for legibility */
  content: '';
  position: absolute;
  left: 50%; top: 44%;
  width: min(72vw, 840px);
  height: 54%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(7, 5, 3, 0.52), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* opening cluster — eyebrow + the big statement (engine drives --rev) */
.uni-opening {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 1.6vw, 1.3rem);
  padding-inline: 6vw;
  text-align: center;
  opacity: 0;
}
.uni-kicker {
  display: inline-block;
  padding: 0.42rem 0.95rem;
  border: 1px solid rgba(232, 184, 75, 0.34);
  border-radius: 999px;
  background: rgba(232, 184, 75, 0.07);
  color: #F0CC72;
  font: 600 0.72rem/1 'Cairo', 'Tajawal', sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: calc(0.2 + 0.8 * var(--rev, 0));
  transform: translateY(calc((1 - var(--rev, 0)) * 10px));
}
.uni-opening__word {
  display: inline-block;
  max-width: 100%;
  font-family: 'Readex Pro', 'Cairo', 'Manrope', 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 7vw, 5.4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.5);
  color: transparent;
  background-image: linear-gradient(90deg,
    #FFF6E6 0%, #FFF6E6 calc(var(--rev, 0) * 100%),
    rgba(255, 246, 230, 0.06) calc(var(--rev, 0) * 100%),
    rgba(255, 246, 230, 0.06) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
[dir="rtl"] .uni-opening__word {
  background-image: linear-gradient(270deg,
    #FFF6E6 0%, #FFF6E6 calc(var(--rev, 0) * 100%),
    rgba(255, 246, 230, 0.06) calc(var(--rev, 0) * 100%),
    rgba(255, 246, 230, 0.06) 100%);
}

/* chapter label — number · english · arabic (engine drives --lab) */
.uni-chapter {
  position: absolute;
  inset-inline-end: 6vw;
  bottom: 4.6vh;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  direction: ltr;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(0 calc((1 - var(--lab, 0)) * 100%) 0 0);
  will-change: transform, opacity, clip-path;
}
[dir="rtl"] .uni-chapter { clip-path: inset(0 0 0 calc((1 - var(--lab, 0)) * 100%)); }
.uni-chapter__num {
  color: #E8B84B;
  font: 700 0.72rem/1 'Cairo', sans-serif;
  letter-spacing: 0.18em;
}
.uni-chapter__en {
  color: rgba(243, 235, 217, 0.72);
  font: 600 0.68rem/1 'Cairo', 'Tajawal', sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.uni-chapter__ar {
  color: rgba(243, 235, 217, 0.9);
  font: 600 0.74rem/1 'Cairo', 'Tajawal', sans-serif;
  letter-spacing: 0.04em;
}

/* convergence — families collapse into ONE world */
.uni-conv {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.uni-conv__word1,
.uni-conv__word2 {
  display: block;
  font-family: 'Readex Pro', 'Cairo', 'Manrope', sans-serif;
  line-height: 1.06;
  will-change: transform, opacity;
}
.uni-conv__word1 {
  font-weight: 300;
  font-size: clamp(1.8rem, 5.6vw, 4.2rem);
  color: #FFF6E6;
}
.uni-conv__word2 {
  font-weight: 600;
  font-size: clamp(2rem, 6.4vw, 4.8rem);
  color: #E8B84B;
}

/* brand constellation lead-in */
.uni-brandlead {
  position: absolute;
  left: 0; right: 0;
  top: 12%;
  width: fit-content;
  margin-inline: auto;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(232, 184, 75, 0.32);
  border-radius: 999px;
  background: rgba(232, 184, 75, 0.07);
  color: #F0CC72;
  font: 600 0.68rem/1 'Cairo', 'Tajawal', sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* final — MAYAN alone, one statement, one CTA */
.uni-final {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 1.5vw, 1.2rem);
  padding-inline: 6vw;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.uni-final__mark {
  width: auto;
  height: clamp(54px, 8vw, 106px);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
  will-change: transform, opacity;
}
.uni-final__title {
  font-family: 'Readex Pro', 'Cairo', 'Manrope', sans-serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 5.4vw, 4rem);
  letter-spacing: 0.02em;
  color: #FFF6E6;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.uni-final__slogan {
  color: rgba(243, 235, 217, 0.9);
  font: 500 1rem/1.5 'Cairo', 'Tajawal', sans-serif;
  letter-spacing: 0.16em;
}
.uni-final__cta,
.uni-final__cont {
  pointer-events: auto;
  text-decoration: none;
}
.uni-final__cta {
  margin-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.8rem;
  border: 1px solid rgba(232, 184, 75, 0.5);
  border-radius: 14px;
  background: rgba(12, 9, 5, 0.42);
  color: #F0CC72;
  font: 600 0.86rem/1 'Cairo', sans-serif;
  letter-spacing: 0.08em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.uni-final__cta:hover,
.uni-final__cta:focus-visible {
  background: rgba(232, 184, 75, 0.16);
  color: #F7E3A6;
  box-shadow: 0 0 0 1px rgba(232, 184, 75, 0.4), 0 8px 26px rgba(0, 0, 0, 0.4);
}
.uni-final__cont {
  color: rgba(243, 235, 217, 0.62);
  font: 500 0.8rem/1 'Cairo', sans-serif;
  letter-spacing: 0.1em;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(243, 235, 217, 0.28);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.uni-final__cont:hover,
.uni-final__cont:focus-visible {
  color: #FFF6E6;
  border-color: rgba(243, 235, 217, 0.6);
}

/* --- scroll cue ------------------------------------------------------------- */
.uni-cue {
  position: absolute;
  left: 50%;
  bottom: 3.4vh;
  transform: translateX(-50%);
  z-index: 5;
  padding: 0.5rem 1rem;
  color: rgba(243, 235, 217, 0.72);
  font: 500 0.72rem/1 'Cairo', 'Tajawal', sans-serif;
  letter-spacing: 0.16em;
  white-space: nowrap;
  pointer-events: none;
}
.uni-cue::after {
  content: '';
  display: block;
  width: 1px;
  height: 22px;
  margin: 0.5rem auto 0;
  background: linear-gradient(180deg, rgba(232, 184, 75, 0.7), transparent);
  animation: uni-cue-bob 1.8s ease-in-out infinite;
}
@keyframes uni-cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50% { transform: translateY(6px); opacity: 0.4; }
}

/* --- responsive ------------------------------------------------------------- */
@media (max-width: 767px) {
  #home.uni .uni-stage { min-height: 520px; }
  .uni-opening__word { font-size: clamp(1.7rem, 9vw, 3rem); }
  .uni-kicker { font-size: 0.62rem; letter-spacing: 0.18em; }
  .uni-conv__word1 { font-size: clamp(1.5rem, 8vw, 2.6rem); }
  .uni-conv__word2 { font-size: clamp(1.7rem, 9vw, 3rem); }
  .uni-chapter { inset-inline-end: 4.5vw; bottom: 4.4vh; }
  .uni-brandlead { top: 10%; font-size: 0.6rem; letter-spacing: 0.18em; }
  .uni-final__title { font-size: clamp(1.5rem, 8vw, 2.4rem); }
  .uni-cue { font-size: 0.68rem; }
}

/* --- static fallback (engine adds html.uni-static when reduced/no canvas) ---- */
html.uni-static body.site--cinema .site-header { position: relative; }
html.uni-static #home.uni {
  height: auto;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
html.uni-static .uni-stage {
  position: relative;
  height: auto;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(5rem, 16vh, 9rem) 1.25rem clamp(4rem, 12vh, 7rem);
}
html.uni-static .uni-canvas,
html.uni-static .uni-logos,
html.uni-static .uni-brandlead,
html.uni-static .uni-opening,
html.uni-static .uni-conv,
html.uni-static .uni-chapter,
html.uni-static .uni-cue { display: none; }
html.uni-static .uni-copy { position: relative; inset: auto; }
html.uni-static .uni-copy::before { display: none; }
html.uni-static .uni-final { position: relative; inset: auto; opacity: 1; }
html.uni-static .uni-final__mark,
html.uni-static .uni-final__title,
html.uni-static .uni-final__slogan,
html.uni-static .uni-final__cta,
html.uni-static .uni-final__cont {
  opacity: 1 !important;
  transform: none !important;
}

/* no-JS fallback composition */
.uni-fallback { padding: 3rem 1.25rem; text-align: center; }
.uni-fallback__title { font-size: clamp(1.5rem, 4.5vw, 2.4rem); color: #FFF6E6; }
.uni-fallback__sub { margin-bottom: 1.2rem; color: #E8B84B; }

@media (prefers-reduced-motion: reduce) {
  .uni-cue::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   v29 — MAYAN WORLD HERO (index only) — the continuous-transformation film
   built by hero/world.js. Supersedes the .uni block above (left inert).
   One stage in a tall runway; the story is pinned (sticky), autoplays, and
   is scrubbed by scroll. Type layers are centered; the engine drives inline
   opacity/transform blends. All colours hardcoded warm-night + gold.
   ════════════════════════════════════════════════════════════════════ */
#home.world {
  position: relative;
  height: 560vh;
  overflow: clip;
  background: #0B0806;
}
.world-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #0B0806;
}
.world-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  touch-action: none;
}
.world-canvas--back { z-index: 1; }
.world-canvas--front { z-index: 5; }

/* ---------- opening cluster ---------- */
.world-opening {
  position: absolute;
  left: 50%;
  top: 37%;
  z-index: 2;
  transform: translate(-50%, -50%);
  text-align: center;
  will-change: opacity, transform;
}
.world-kicker {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: rgba(232, 184, 75, 0.12);
  border: 1px solid rgba(232, 184, 75, 0.35);
  color: #F0CC72;
  font-family: "Cairo", "Tajawal", sans-serif;
  font-weight: 600;
  font-size: clamp(0.72rem, 1.3vw, 0.9rem);
  letter-spacing: 0.14em;
  margin-bottom: 1.1rem;
}
.world-opening__word {
  font-family: "Readex Pro", "Cairo", sans-serif;
  font-weight: 560;
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1.25;
  color: #FFF6E6;
  margin: 0;
  text-shadow: 0 0 40px rgba(240, 204, 114, 0.25);
}
html[dir="ltr"] .world-opening__word { letter-spacing: 0.02em; }

/* ---------- chapter label ---------- */
.world-chapter {
  position: absolute;
  bottom: 4.6rem;
  inset-inline-end: clamp(1.2rem, 3.5vw, 3rem);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
}
.world-chapter__num {
  font-family: "Readex Pro", sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: #E8B84B;
  letter-spacing: 0.18em;
}
.world-chapter__en {
  font-family: "Readex Pro", sans-serif;
  font-weight: 350;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  color: rgba(255, 246, 230, 0.85);
  text-transform: uppercase;
}
.world-chapter__ar {
  font-family: "Cairo", sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  color: rgba(255, 246, 230, 0.6);
}

/* ---------- convergence words ---------- */
.world-conv {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
}
.world-conv__word1 {
  display: block;
  font-family: "Readex Pro", "Cairo", sans-serif;
  font-size: clamp(1.2rem, 3vw, 2.2rem);
  font-weight: 320;
  letter-spacing: 0.22em;
  color: #F0CC72;
}
.world-conv__word2 {
  display: block;
  margin-top: 0.5rem;
  font-family: "Cairo", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 4rem);
  color: #FFF6E6;
  text-shadow: 0 0 50px rgba(240, 204, 114, 0.3);
}

/* ---------- the word MAYAN ---------- */
.world-wordmark {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 3;
  transform: translate(-50%, -50%);
  opacity: 0;
  text-align: center;
  will-change: opacity, transform;
}
.world-wordmark__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(76vmin, 720px);
  height: min(76vmin, 720px);
  transform: translate(-50%, -50%) scale(calc(0.4 + 1.6 * var(--ws, 1)));
  border: 1px solid rgba(232, 184, 75, 0.4);
  border-radius: 50%;
  opacity: calc(0.55 * var(--ws, 0));
  box-shadow: inset 0 0 60px rgba(232, 184, 75, 0.12), 0 0 90px rgba(232, 184, 75, 0.12);
  pointer-events: none;
  transition: none;
}
.world-wordmark__word {
  font-family: "Readex Pro", "Cairo", sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 13vw, 9.5rem);
  line-height: 1;
  letter-spacing: 0.2em;
  color: transparent;
  background: linear-gradient(105deg, #F6E3A8 0%, #E8B84B 40%, #FFF6E6 52%, #C79A3B 72%, #EFDFA6 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  background-position: right center;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 calc(var(--rev, 0) * 82%), transparent calc(var(--rev, 0) * 82% + 18%));
  mask-image: radial-gradient(circle at 50% 50%, #000 calc(var(--rev, 0) * 82%), transparent calc(var(--rev, 0) * 82% + 18%));
  text-shadow: 0 0 70px rgba(232, 184, 75, 0.35);
  will-change: opacity;
}
html[dir="ltr"] .world-wordmark__word { letter-spacing: 0.24em; }

/* ---------- final statement + doors ---------- */
.world-sloganbox {
  position: absolute;
  left: 50%;
  top: 62%;
  z-index: 3;
  transform: translate(-50%, -50%);
  opacity: 0;
  text-align: center;
  will-change: opacity, transform;
}
.world-sloganbox__line {
  display: block;
  font-family: "Cairo", sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.6vw, 1.8rem);
  color: #F0CC72;
  margin-bottom: 1.4rem;
  letter-spacing: 0.02em;
}
.world-cta {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}
.world-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: "Cairo", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.62rem 1.4rem;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.world-cta__main {
  background: linear-gradient(180deg, #E8B84B, #C79A3B);
  color: #241B10;
  box-shadow: 0 6px 22px rgba(232, 184, 75, 0.35);
}
.world-cta__main:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(232, 184, 75, 0.5); }
.world-cta__ghost {
  border: 1px solid rgba(240, 204, 114, 0.45);
  color: #F0CC72;
  background: rgba(240, 204, 114, 0.06);
}
.world-cta__ghost:hover { border-color: #F0CC72; background: rgba(240, 204, 114, 0.14); }

/* ---------- brand lead-in ---------- */
.world-brandlead {
  position: absolute;
  left: 50%;
  top: 24%;
  z-index: 3;
  transform: translateX(-50%);
  opacity: 0;
  font-family: "Cairo", sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.34em;
  color: rgba(240, 204, 114, 0.85);
  text-align: center;
  white-space: nowrap;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 184, 75, 0.3);
  background: rgba(232, 184, 75, 0.08);
  will-change: opacity, transform;
}
html[dir="ltr"] .world-brandlead { letter-spacing: 0.26em; }

/* ---------- the four seals ---------- */
.world-brands {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.world-brand {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.world-brand img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: var(--sz, 90px);
  max-width: 60vw;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.world-brand__fx {
  position: absolute;
  inset: -35%;
  pointer-events: none;
  overflow: hidden;
}
.world-brand__fx::before,
.world-brand__fx::after { content: ""; position: absolute; inset: 0; display: block; }

/* light bloom — the matter gathers into this emblem */
.world-brand--mayan img { filter: drop-shadow(0 0 calc(var(--rev, 0) * 46px) rgba(232, 184, 75, 0.6)); }
.world-brand--mayan .world-brand__fx::before {
  inset: -60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 230, calc(var(--rev, 0) * 0.5)) 0%, rgba(232, 184, 75, calc(var(--rev, 0) * 0.22)) 45%, transparent 70%);
  transform: scale(calc(0.4 + 0.6 * var(--rev, 0)));
  opacity: var(--rev, 0);
}

/* liquid wipe — the whisky/fresco greens wash in */
.world-brand--fresco .world-brand__fx::before {
  background: linear-gradient(100deg, transparent 20%, rgba(232, 184, 75, 0.9) 50%, transparent 80%);
  clip-path: inset(0 calc((1 - var(--rev, 0)) * 101%) 0 0);
}
.world-brand--fresco .world-brand__fx::after {
  border: 0 rgba(240, 204, 114, 0.5);
  background: none;
}

/* droplet condensation — the ember becomes a whole mark */
.world-brand--nisreen img {
  -webkit-mask-image: radial-gradient(circle, #000 calc(var(--rev, 0) * 86%), transparent calc(var(--rev, 0) * 86% + 16%));
  mask-image: radial-gradient(circle, #000 calc(var(--rev, 0) * 86%), transparent calc(var(--rev, 0) * 86% + 16%));
}
.world-brand--nisreen .world-brand__fx::before {
  border-radius: 50%;
  border: 1px solid rgba(240, 204, 114, calc(var(--rev, 0) * 0.55));
  transform: scale(calc(1.6 - 0.6 * var(--rev, 0)));
  opacity: var(--rev, 0);
}

/* emboss sheen — a light walks across the gold spoons */
.world-brand--spoons .world-brand__fx::before {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 246, 230, 0.75) 50%, transparent 70%);
  transform: translateX(calc(-160% + var(--rev, 0) * 320%));
}
.world-brand--spoons img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 14px rgba(232, 184, 75, 0.35)); }

/* ---------- cue + replay ---------- */
.world-cue {
  position: absolute;
  bottom: 1.2rem;
  inset-inline-start: clamp(1.2rem, 3.5vw, 3rem);
  z-index: 6;
  font-family: "Cairo", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: rgba(240, 204, 114, 0.9);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 184, 75, 0.3);
  background: rgba(232, 184, 75, 0.07);
  pointer-events: none;
}
.world-cue::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #F0CC72;
  margin-inline-start: 0.55rem;
  vertical-align: middle;
  animation: worldCuePip 1.6s ease-in-out infinite;
}
@keyframes worldCuePip {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
.world-replay {
  position: absolute;
  bottom: 1.2rem;
  inset-inline-end: clamp(1.2rem, 3.5vw, 3rem);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Cairo", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  color: rgba(240, 204, 114, 0.85);
  background: rgba(232, 184, 75, 0.07);
  border: 1px solid rgba(232, 184, 75, 0.3);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.world-replay:hover { opacity: 1; background: rgba(232, 184, 75, 0.16); }
.world-replay i { font-size: 0.85rem; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .world-opening { top: 34%; }
  .world-chapter { bottom: 4.4rem; }
}
@media (max-width: 767px) {
  #home.world { height: 480vh; }
  .world-stage { min-height: 520px; }
  .world-opening { top: 30%; width: 88vw; }
  .world-opening__word { font-size: clamp(1.5rem, 6.5vw, 2.2rem); }
  .world-wordmark { top: 38%; }
  .world-wordmark__word { font-size: clamp(2.4rem, 16vw, 4.2rem); letter-spacing: 0.12em; }
  .world-sloganbox { top: 60%; width: 88vw; }
  .world-brandlead { top: 20%; font-size: 0.7rem; letter-spacing: 0.2em; white-space: normal; }
  .world-conv__word2 { font-size: clamp(1.8rem, 10vw, 3rem); }
  .world-chapter { bottom: auto; top: 72%; inset-inline-end: clamp(1rem, 4vw, 2rem); }
  .world-cue { bottom: 1rem; inset-inline-start: 1rem; font-size: 0.7rem; }
  .world-replay { bottom: 1rem; inset-inline-end: 1rem; }
  .world-brand img { max-width: 56vw; }
}

/* ---------- reduced motion / static ---------- */
html.world-static #home.world { height: auto; overflow: visible; }
html.world-static .world-stage {
  position: relative;
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: clamp(5rem, 16vh, 9rem) 1.25rem clamp(4rem, 12vh, 7rem);
  text-align: center;
  overflow: visible;
}
html.world-static .world-canvas,
html.world-static .world-chapter,
html.world-static .world-conv,
html.world-static .world-brandlead,
html.world-static .world-cue,
html.world-static .world-replay { display: none; }
html.world-static .world-opening,
html.world-static .world-wordmark,
html.world-static .world-sloganbox {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  opacity: 1 !important;
}
html.world-static .world-brands {
  position: relative;
  inset: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: center;
  align-items: center;
}
html.world-static .world-brand {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  opacity: 1;
  transform: none !important;
  filter: none !important;
}
html.world-static .world-brand img {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}
html.world-static .world-wordmark__ring { display: none; }
html.world-static .world-wordmark__word {
  -webkit-mask-image: none;
  mask-image: none;
}

@media (prefers-reduced-motion: reduce) {
  .world-cue::after { animation: none; }
  .world-stage { transition: none; }
}

/* ==========================================================================\n   MAYAN FAMILY HERO — product-family flip slider\n   Inspired by playful editorial product sliders; built from scratch for MAYAN.\n   ========================================================================== */
.family-hero{--fh-bg:#d9c49b;--fh-ink:#173d2b;--fh-accent:#b18b3d;position:relative;height:100svh;min-height:650px;overflow:hidden;background:var(--fh-bg);color:var(--fh-ink);isolation:isolate;transition:background .9s cubic-bezier(.2,.75,.2,1),color .6s ease}
.fh-stage{position:absolute;inset:0;overflow:hidden}
.fh-stage:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.13),transparent 35%,rgba(0,0,0,.04));mix-blend-mode:soft-light}
.fh-bgword{position:absolute;z-index:0;left:50%;top:50%;transform:translate(-50%,-52%);font-family:"Readex Pro","Cairo",sans-serif;font-weight:900;font-size:clamp(8rem,23vw,24rem);line-height:.72;letter-spacing:-.07em;white-space:nowrap;color:rgba(255,255,255,.20);text-transform:uppercase;user-select:none;pointer-events:none;transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .45s ease}
.fh-copy{position:absolute;z-index:8;inset-inline-start:clamp(2rem,7vw,7rem);top:50%;width:min(31rem,34vw);transform:translateY(-46%);text-align:start}
.fh-eyebrow{display:flex;align-items:center;gap:.8rem;font-family:"Readex Pro",sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.2rem}.fh-eyebrow i{width:3.2rem;height:2px;background:currentColor;opacity:.65}
.fh-title{margin:0;font-family:"Cairo","Readex Pro",sans-serif;font-size:clamp(3.8rem,7.5vw,8rem);font-weight:900;line-height:.88;letter-spacing:-.06em}.fh-tagline{font-size:clamp(1rem,1.35vw,1.35rem);font-weight:600;margin:1.35rem 0 1.7rem;opacity:.76}
.fh-cta{display:inline-flex;align-items:center;gap:1rem;color:inherit;text-decoration:none;font-weight:800;border-bottom:2px solid currentColor;padding:.45rem 0}.fh-cta b{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--fh-ink);color:var(--fh-bg);font-size:1rem;transition:transform .25s ease}.fh-cta:hover b{transform:rotate(-45deg) scale(1.08)}
.fh-products{position:absolute;z-index:5;left:50%;top:50%;width:min(54vw,760px);height:min(78vh,760px);transform:translate(-43%,-47%);pointer-events:none;perspective:1200px}
.fh-product{position:absolute;left:50%;top:50%;margin:0;transform-origin:50% 85%;will-change:transform,opacity,filter}.fh-product img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2.2rem 1.5rem rgba(37,28,15,.22));user-select:none}
.fh-product--main{width:52%;height:82%;z-index:4;transform:translate(-50%,-50%) rotate(-3deg)}.fh-product--left{width:32%;height:54%;z-index:2;transform:translate(-128%,-33%) rotate(-14deg)}.fh-product--right{width:30%;height:51%;z-index:3;transform:translate(62%,-72%) rotate(12deg)}
.fh-product:after{content:"";position:absolute;left:18%;right:18%;bottom:1%;height:8%;border-radius:50%;background:rgba(35,25,10,.16);filter:blur(13px);z-index:-1}
.fh-shape{position:absolute;z-index:1;border-radius:48% 52% 58% 42%/56% 42% 58% 44%;background:var(--fh-accent);opacity:.9;transition:background .7s ease}.fh-shape--a{width:min(42vw,620px);height:min(42vw,620px);left:48%;top:48%;transform:translate(-40%,-48%) rotate(12deg)}.fh-shape--b{width:18vw;height:18vw;min-width:190px;min-height:190px;right:-6vw;top:12%;opacity:.28;transform:rotate(34deg)}
.fh-spark{position:absolute;z-index:2;width:1.15rem;height:1.15rem;background:var(--fh-ink);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:fhSpin 7s linear infinite}.fh-spark--1{left:45%;top:17%}.fh-spark--2{right:14%;bottom:20%;width:1.8rem;height:1.8rem;animation-duration:11s}@keyframes fhSpin{to{transform:rotate(360deg)}}
.fh-rail{position:absolute;z-index:10;inset-inline-end:clamp(1.2rem,3vw,3rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:.75rem}.fh-arrow{width:3.1rem;height:3.1rem;border:1.5px solid currentColor;border-radius:50%;background:transparent;color:inherit;font-size:1.3rem;cursor:pointer;transition:.25s}.fh-arrow:hover{background:var(--fh-ink);color:var(--fh-bg);transform:scale(1.08)}.fh-count{writing-mode:vertical-rl;display:flex;align-items:center;gap:.35rem;font-family:"Readex Pro",sans-serif;font-size:.65rem;letter-spacing:.1em}.fh-count strong{font-size:1rem}
.fh-family-nav{position:absolute;z-index:10;left:50%;bottom:2rem;transform:translateX(-50%);display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(12px)}.fh-family-dot{appearance:none;border:0;background:currentColor;width:.45rem;height:.45rem;border-radius:999px;padding:0;opacity:.35;cursor:pointer;transition:.35s}.fh-family-dot.is-active{width:2.4rem;opacity:1}.fh-hint{position:absolute;z-index:8;inset-inline-start:clamp(2rem,4vw,4rem);bottom:2.2rem;display:flex;gap:.65rem;align-items:center;font-family:"Readex Pro",sans-serif;font-size:.55rem;letter-spacing:.16em;font-weight:700}.fh-hint i{display:block;width:2.6rem;height:1px;background:currentColor;opacity:.55}
/* choreography */
.family-hero.is-leaving .fh-copy{animation:fhCopyOut .36s both}.family-hero.is-leaving .fh-bgword{opacity:0;transform:translate(-50%,-52%) scale(1.13) skewX(-5deg)}.family-hero.is-leaving .fh-product--main{animation:fhMainOut .48s cubic-bezier(.55,0,1,.45) both}.family-hero.is-leaving .fh-product--left{animation:fhLeftOut .5s .02s cubic-bezier(.55,0,1,.45) both}.family-hero.is-leaving .fh-product--right{animation:fhRightOut .46s .04s cubic-bezier(.55,0,1,.45) both}
.family-hero.is-entering .fh-copy{animation:fhCopyIn .7s .1s cubic-bezier(.16,.85,.25,1) both}.family-hero.is-entering .fh-bgword{animation:fhWordIn .8s cubic-bezier(.16,.85,.25,1) both}.family-hero.is-entering .fh-product--main{animation:fhMainIn .85s cubic-bezier(.16,.85,.25,1) both}.family-hero.is-entering .fh-product--left{animation:fhLeftIn .9s .08s cubic-bezier(.16,.85,.25,1) both}.family-hero.is-entering .fh-product--right{animation:fhRightIn .88s .14s cubic-bezier(.16,.85,.25,1) both}
.family-hero[data-dir="prev"].is-leaving .fh-product--main{animation-name:fhMainOutPrev}.family-hero[data-dir="prev"].is-entering .fh-product--main{animation-name:fhMainInPrev}
@keyframes fhCopyOut{to{opacity:0;transform:translateY(-62%) translateX(-35px)}}@keyframes fhCopyIn{from{opacity:0;transform:translateY(-28%) translateX(45px)}to{opacity:1;transform:translateY(-46%)}}
@keyframes fhWordIn{from{opacity:0;transform:translate(-50%,-35%) scale(.82)}to{opacity:1;transform:translate(-50%,-52%) scale(1)}}
@keyframes fhMainOut{to{opacity:0;transform:translate(-35%,75%) rotate(24deg) scale(.65);filter:blur(9px)}}@keyframes fhMainIn{from{opacity:0;transform:translate(-70%,-135%) rotate(-22deg) scale(.55);filter:blur(10px)}to{opacity:1;transform:translate(-50%,-50%) rotate(-3deg);filter:none}}
@keyframes fhMainOutPrev{to{opacity:0;transform:translate(-70%,-150%) rotate(-22deg) scale(.6);filter:blur(9px)}}@keyframes fhMainInPrev{from{opacity:0;transform:translate(-30%,80%) rotate(22deg) scale(.55);filter:blur(10px)}to{opacity:1;transform:translate(-50%,-50%) rotate(-3deg);filter:none}}
@keyframes fhLeftOut{to{opacity:0;transform:translate(-185%,10%) rotate(-35deg) scale(.65)}}@keyframes fhLeftIn{from{opacity:0;transform:translate(-205%,-70%) rotate(-35deg) scale(.55)}to{opacity:1;transform:translate(-128%,-33%) rotate(-14deg)}}
@keyframes fhRightOut{to{opacity:0;transform:translate(150%,-120%) rotate(35deg) scale(.65)}}@keyframes fhRightIn{from{opacity:0;transform:translate(165%,-5%) rotate(35deg) scale(.55)}to{opacity:1;transform:translate(62%,-72%) rotate(12deg)}}
@media(max-width:900px){.family-hero{min-height:620px}.fh-copy{top:auto;bottom:8.5rem;inset-inline-start:1.35rem;width:calc(100% - 2.7rem);transform:none;z-index:8}.fh-title{font-size:clamp(3.2rem,15vw,5.4rem)}.fh-tagline{margin:.65rem 0 1rem}.fh-products{width:94vw;height:55vh;left:50%;top:37%;transform:translate(-50%,-50%)}.fh-product--main{width:48%;height:78%}.fh-product--left{width:28%;height:48%;transform:translate(-132%,-30%) rotate(-14deg)}.fh-product--right{width:27%;height:47%;transform:translate(65%,-72%) rotate(12deg)}.fh-bgword{top:32%;font-size:28vw}.fh-shape--a{width:82vw;height:82vw;left:47%;top:34%;transform:translate(-50%,-50%) rotate(12deg)}.fh-shape--b{display:none}.fh-rail{top:34%;inset-inline-end:.75rem}.fh-arrow{width:2.7rem;height:2.7rem}.fh-hint{display:none}.fh-family-nav{bottom:1.3rem}.family-hero.is-leaving .fh-copy{animation:fhCopyOutM .3s both}.family-hero.is-entering .fh-copy{animation:fhCopyInM .55s .1s both}@keyframes fhCopyOutM{to{opacity:0;transform:translateX(-35px)}}@keyframes fhCopyInM{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}}
@media(prefers-reduced-motion:reduce){.family-hero *{animation:none!important;transition:none!important}}

/* ==========================================================================\n   MAYAN FAMILY HERO v2 — orbital stage + breathing geometry + natural scroll\n   ========================================================================== */
.family-hero{min-height:680px}
.fh-copy{width:min(27rem,29vw);z-index:9}
html[dir="rtl"] .fh-copy{inset-inline-start:clamp(2.4rem,5.2vw,5.8rem)}
html[dir="ltr"] .fh-copy{inset-inline-start:clamp(2.4rem,5.2vw,5.8rem)}
.fh-title{font-size:clamp(3.4rem,6.4vw,7.2rem)}
.fh-tagline{max-width:25rem}

/* give the products their own visual territory, away from the copy */
.fh-products{left:58%;width:min(48vw,690px);height:min(74vh,720px);transform:translate(-50%,-48%)}
html[dir="rtl"] .fh-products{left:42%}
.fh-product--main{width:48%;height:80%}
.fh-product--left{width:27%;height:48%;transform:translate(-142%,-22%) rotate(-12deg)}
.fh-product--right{width:26%;height:47%;transform:translate(76%,-77%) rotate(10deg)}

/* ambient background: huge, quiet geometry, deliberately clipped by viewport */
.fh-ambient{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.72}
.fh-ambient__ring{position:absolute;display:block;border-radius:50%;border:1px solid color-mix(in srgb,var(--fh-ink) 20%,transparent);will-change:transform}
.fh-ambient__ring--1{width:58vw;height:58vw;min-width:650px;min-height:650px;right:-24vw;top:-30vw;animation:fhAmbientCW 32s linear infinite}
.fh-ambient__ring--2{width:31vw;height:31vw;min-width:380px;min-height:380px;left:-13vw;bottom:-15vw;border-width:2px;border-style:dashed;opacity:.42;animation:fhAmbientCCW 25s linear infinite}
.fh-ambient__ring--3{width:13vw;height:13vw;min-width:150px;min-height:150px;left:15%;top:13%;border-color:color-mix(in srgb,var(--fh-accent) 58%,transparent);box-shadow:0 0 0 22px color-mix(in srgb,var(--fh-accent) 6%,transparent);animation:fhAmbientFloat 9s ease-in-out infinite alternate}
.fh-ambient__dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--fh-ink);opacity:.35}
.fh-ambient__dot--1{left:8%;top:29%;animation:fhAmbientFloat 6s ease-in-out infinite alternate-reverse}.fh-ambient__dot--2{right:9%;bottom:18%;width:15px;height:15px;background:var(--fh-accent);animation:fhAmbientFloat 8s 1s ease-in-out infinite alternate}
@keyframes fhAmbientCW{to{transform:rotate(360deg)}}@keyframes fhAmbientCCW{to{transform:rotate(-360deg)}}@keyframes fhAmbientFloat{to{transform:translate3d(18px,-24px,0) scale(1.08)}}

/* product pedestal — an offset orbital sculpture rather than a flat blob */
.fh-orbit{position:absolute;z-index:2;left:58%;top:50%;width:min(43vw,620px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(-7deg);pointer-events:none;transition:transform .9s cubic-bezier(.16,.85,.25,1)}
html[dir="rtl"] .fh-orbit{left:42%}
.fh-orbit__disc{position:absolute;inset:12%;border-radius:46% 54% 49% 51%/52% 44% 56% 48%;background:radial-gradient(circle at 38% 32%,color-mix(in srgb,#fff 25%,transparent),transparent 32%),color-mix(in srgb,var(--fh-accent) 88%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 22%,transparent),0 34px 75px color-mix(in srgb,var(--fh-ink) 13%,transparent);transform:rotate(11deg);animation:fhDiscBreathe 7s ease-in-out infinite alternate}
.fh-orbit__arc{position:absolute;border-radius:50%;border-style:solid;will-change:transform}
.fh-orbit__arc--a{inset:2%;border-width:2px;border-color:var(--fh-ink) transparent var(--fh-ink) transparent;opacity:.56;animation:fhOrbitCW 17s linear infinite}
.fh-orbit__arc--b{inset:8%;border-width:1px;border-color:transparent var(--fh-ink) transparent var(--fh-ink);opacity:.3;animation:fhOrbitCCW 23s linear infinite}
.fh-orbit__arc--c{inset:19%;border-width:1px;border-color:color-mix(in srgb,#fff 48%,transparent) transparent;opacity:.8;animation:fhOrbitCW 12s linear infinite}
.fh-orbit__sat{position:absolute;border-radius:50%;background:var(--fh-ink);box-shadow:0 0 0 7px color-mix(in srgb,var(--fh-bg) 45%,transparent)}
.fh-orbit__sat--a{width:13px;height:13px;left:13%;top:23%;animation:fhSatA 8s ease-in-out infinite alternate}.fh-orbit__sat--b{width:8px;height:8px;right:8%;bottom:28%;background:var(--fh-accent);animation:fhSatB 10s ease-in-out infinite alternate}
.fh-orbit__tick{position:absolute;width:2px;height:34px;background:var(--fh-ink);opacity:.36;left:50%;top:-1%;transform-origin:50% calc(310px + 1%)}
.fh-orbit__tick--2{transform:rotate(122deg)}.fh-orbit__tick--3{transform:rotate(242deg)}
@keyframes fhOrbitCW{to{transform:rotate(360deg)}}@keyframes fhOrbitCCW{to{transform:rotate(-360deg)}}@keyframes fhDiscBreathe{to{transform:rotate(17deg) scale(1.035);border-radius:53% 47% 43% 57%/46% 55% 45% 54%}}@keyframes fhSatA{to{transform:translate(18px,-16px) scale(1.25)}}@keyframes fhSatB{to{transform:translate(-20px,13px) scale(.8)}}

/* old decorative blob now becomes only a faint offset echo */
.fh-shape--a{left:58%;top:50%;width:min(34vw,500px);height:min(34vw,500px);opacity:.12;filter:blur(2px);transform:translate(-50%,-50%) rotate(28deg)}
html[dir="rtl"] .fh-shape--a{left:42%}.fh-shape--b{opacity:.12}

/* the stage itself participates in every family change */
.family-hero.is-leaving .fh-orbit{transform:translate(-50%,-50%) rotate(54deg) scale(.86);opacity:.25}
.family-hero.is-entering .fh-orbit{animation:fhOrbitStageIn .9s cubic-bezier(.16,.85,.25,1) both}
@keyframes fhOrbitStageIn{from{opacity:.1;transform:translate(-50%,-50%) rotate(-58deg) scale(.76)}to{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}}
.family-hero.is-leaving .fh-ambient__ring--3{transform:scale(1.35);opacity:0}

@media(max-width:1100px) and (min-width:901px){.fh-copy{width:29vw}.fh-products{width:50vw}.fh-orbit{width:46vw}}
@media(max-width:900px){
  .family-hero{min-height:640px}
  .fh-copy{inset-inline-start:1.35rem;width:calc(100% - 2.7rem);bottom:7.3rem}
  .fh-title{font-size:clamp(2.8rem,13vw,4.8rem)}
  .fh-tagline{max-width:70%;font-size:.96rem}
  .fh-products,html[dir="rtl"] .fh-products{left:50%;top:34%;width:88vw;height:48vh;transform:translate(-50%,-50%)}
  .fh-orbit,html[dir="rtl"] .fh-orbit{left:50%;top:34%;width:min(78vw,430px);transform:translate(-50%,-50%) rotate(-7deg)}
  .fh-shape--a,html[dir="rtl"] .fh-shape--a{left:50%;top:34%;width:64vw;height:64vw}
  .fh-product--main{width:45%;height:76%}.fh-product--left{width:25%;height:44%}.fh-product--right{width:24%;height:43%}
  .fh-ambient__ring--1{right:-70vw;top:-25vw}.fh-ambient__ring--2{left:-55vw;bottom:-22vw}.fh-ambient__ring--3{left:8%;top:12%}
  .fh-orbit__tick{display:none}
}
@media(max-width:560px){.fh-tagline{max-width:78%}.fh-cta{font-size:.9rem}.fh-rail{top:31%}.fh-family-nav{bottom:1rem}}
@media(prefers-reduced-motion:reduce){.fh-ambient__ring,.fh-ambient__dot,.fh-orbit__disc,.fh-orbit__arc,.fh-orbit__sat{animation:none!important}}


/* =====================================================================
   MAYAN v2 — GLOBAL MOTION SYSTEM
   v2 composition preserved; motion, depth and adaptive color upgraded.
   ===================================================================== */
.family-hero{
  --fh-bg:#173D2B;--fh-ink:#FFF1D8;--fh-accent:#B9974C;
  --fh-orbit:#D7C28B;--fh-orbit2:#FFF1D8;--fh-glow:#B9974C;
  --fh-px:50%;--fh-py:45%;--fh-tilt-x:0deg;--fh-tilt-y:0deg;
  height:100svh;min-height:680px;background:var(--fh-bg);color:var(--fh-ink);
  transition:background-color .95s cubic-bezier(.2,.72,.2,1),color .55s ease;
}
.fh-stage{perspective:1400px;background:var(--fh-bg)}
.fh-webgl{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.86}
.fh-pointer-light{position:absolute;inset:-15%;z-index:1;pointer-events:none;background:radial-gradient(circle at var(--fh-px) var(--fh-py),color-mix(in srgb,var(--fh-orbit2) 17%,transparent) 0,transparent 17%),radial-gradient(circle at 50% 50%,transparent 35%,color-mix(in srgb,var(--fh-bg) 82%,#000 18%) 100%);mix-blend-mode:soft-light;transition:opacity .4s}

.fh-bgword{z-index:1;left:58%;top:57%;transform:translate3d(-50%,-50%,0);font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;font-stretch:condensed;font-size:clamp(8.5rem,21vw,22rem);font-weight:900;line-height:.7;letter-spacing:-.072em;color:color-mix(in srgb,var(--fh-ink) 19%,transparent);text-shadow:0 18px 54px color-mix(in srgb,var(--fh-bg) 55%,transparent);opacity:1;transition:color .65s ease,text-shadow .65s ease,opacity .35s ease;will-change:transform,opacity}
html[dir="rtl"] .fh-bgword{left:42%}
.family-hero[data-scene-type="story"] .fh-bgword,.family-hero[data-scene-type="serve"] .fh-bgword,.family-hero[data-scene-type="brands"] .fh-bgword{color:color-mix(in srgb,var(--fh-ink) 12%,transparent)}

.fh-copy{z-index:9;width:min(28rem,30vw);transform:translateY(-48%);filter:drop-shadow(0 12px 34px color-mix(in srgb,var(--fh-bg) 28%,transparent));will-change:transform,opacity}
.fh-eyebrow{font-family:"29LT Bukra","Tajawal","Cairo",sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.13em;margin-bottom:1.05rem;overflow:hidden}
.fh-eyebrow i{background:var(--fh-ink);box-shadow:0 0 18px color-mix(in srgb,var(--fh-ink) 22%,transparent)}
.fh-title{font-family:"29LT Bukra","Tajawal","Cairo",sans-serif;font-size:clamp(3rem,5.5vw,6.3rem);font-weight:800;line-height:.98;letter-spacing:-.045em;color:var(--fh-ink);text-shadow:0 8px 28px color-mix(in srgb,var(--fh-bg) 38%,transparent);overflow:visible;transition:color .55s ease,text-shadow .55s ease}
.fh-title-line{display:block;overflow:hidden;padding:.06em 0 .1em}
.fh-title-line>span{display:block;will-change:transform,clip-path,filter,opacity}
.fh-title-line--accent>span{color:var(--fh-accent)}
.fh-tagline{font-family:"29LT Bukra","Tajawal","Cairo",sans-serif;font-size:clamp(.98rem,1.15vw,1.18rem);line-height:1.8;font-weight:500;max-width:26rem;margin:1.15rem 0 1.45rem;color:color-mix(in srgb,var(--fh-ink) 82%,transparent);text-shadow:0 6px 18px color-mix(in srgb,var(--fh-bg) 24%,transparent);will-change:transform,clip-path,filter,opacity}
.fh-cta{font-family:"29LT Bukra","Tajawal","Cairo",sans-serif;color:var(--fh-ink);border-color:color-mix(in srgb,var(--fh-ink) 72%,transparent);will-change:transform,opacity}
.fh-cta b{background:var(--fh-ink);color:var(--fh-bg);box-shadow:0 8px 24px color-mix(in srgb,var(--fh-bg) 34%,transparent)}
.fh-cta[hidden]{display:none!important}

.fh-products{z-index:6;left:58%;top:50%;width:min(48vw,690px);height:min(74vh,720px);transform:translate3d(-50%,-48%,36px);transform-style:preserve-3d;will-change:transform}
html[dir="rtl"] .fh-products{left:42%}
.fh-product{transform-style:preserve-3d;will-change:transform,opacity,filter}
.fh-product img{transition:filter .55s ease;will-change:transform;filter:drop-shadow(0 2.1rem 1.55rem color-mix(in srgb,var(--fh-bg) 42%,transparent)) drop-shadow(0 0 22px color-mix(in srgb,var(--fh-orbit2) 8%,transparent))}
.fh-product--main img{transform:translate3d(var(--fh-main-x,0px),var(--fh-main-y,0px),28px) rotateX(var(--fh-img-rx,0deg)) rotateY(var(--fh-img-ry,0deg));transition:filter .55s ease}
.fh-product--left img{transform:translate3d(var(--fh-left-x,0px),var(--fh-left-y,0px),10px)}
.fh-product--right img{transform:translate3d(var(--fh-right-x,0px),var(--fh-right-y,0px),16px)}

.fh-orbit{z-index:3;left:58%;top:50%;width:min(43vw,620px);transform:translate3d(-50%,-50%,12px) rotate(-7deg) rotateX(var(--fh-tilt-x)) rotateY(var(--fh-tilt-y));transform-style:preserve-3d;transition:opacity .45s ease,transform .72s cubic-bezier(.2,.82,.22,1)}
html[dir="rtl"] .fh-orbit{left:42%}
.fh-orbit__halo{position:absolute;inset:-11%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--fh-glow) 19%,transparent),transparent 67%);filter:blur(18px);opacity:.92;animation:fhHalo 5.5s ease-in-out infinite alternate}
.fh-orbit__disc{background:radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--fh-orbit2) 28%,transparent),transparent 27%),radial-gradient(circle at 70% 76%,color-mix(in srgb,var(--fh-glow) 18%,transparent),transparent 36%),color-mix(in srgb,var(--fh-accent) 86%,var(--fh-bg) 14%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fh-orbit2) 22%,transparent),0 34px 75px color-mix(in srgb,var(--fh-bg) 33%,transparent),0 0 70px color-mix(in srgb,var(--fh-glow) 12%,transparent)}
.fh-orbit__arc--a{border-color:var(--fh-orbit) transparent var(--fh-orbit) transparent;opacity:.74}
.fh-orbit__arc--b{border-color:transparent color-mix(in srgb,var(--fh-orbit2) 72%,transparent) transparent color-mix(in srgb,var(--fh-orbit2) 72%,transparent);opacity:.42}
.fh-orbit__arc--c{border-color:color-mix(in srgb,var(--fh-orbit2) 64%,transparent) transparent;opacity:.76}
.fh-orbit__sat{background:var(--fh-orbit);box-shadow:0 0 0 7px color-mix(in srgb,var(--fh-bg) 50%,transparent),0 0 22px color-mix(in srgb,var(--fh-glow) 36%,transparent)}
.fh-orbit__sat--b{background:var(--fh-orbit2)}
.fh-orbit__tick{background:var(--fh-orbit);opacity:.34}
.fh-ambient__ring{border-color:color-mix(in srgb,var(--fh-orbit) 27%,transparent)}
.fh-ambient__ring--3{border-color:color-mix(in srgb,var(--fh-orbit2) 42%,transparent);box-shadow:0 0 0 22px color-mix(in srgb,var(--fh-glow) 5%,transparent)}
.fh-ambient__dot--1{background:var(--fh-orbit)}.fh-ambient__dot--2{background:var(--fh-orbit2)}
.fh-shape--a{background:var(--fh-accent);opacity:.09;filter:blur(6px)}
.fh-shape--b{background:var(--fh-orbit2);opacity:.06}
.fh-spark{background:var(--fh-orbit2);filter:drop-shadow(0 0 12px color-mix(in srgb,var(--fh-glow) 38%,transparent))}

.fh-transition-sweep{position:absolute;z-index:4;left:58%;top:50%;width:min(46vw,670px);aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--fh-orbit2) 50%,transparent);transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;box-shadow:0 0 70px color-mix(in srgb,var(--fh-glow) 16%,transparent)}
html[dir="rtl"] .fh-transition-sweep{left:42%}
.family-hero.is-leaving .fh-transition-sweep{animation:fhSweepOut .54s cubic-bezier(.45,0,.55,1) both}
.family-hero.is-entering .fh-transition-sweep{animation:fhSweepIn .72s cubic-bezier(.16,.82,.25,1) both}
@keyframes fhSweepOut{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}45%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(1.32) rotate(38deg)}}
@keyframes fhSweepIn{0%{opacity:.72;transform:translate(-50%,-50%) scale(1.18) rotate(-35deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.62) rotate(0)}}
@keyframes fhHalo{to{transform:scale(1.055);opacity:.66}}

/* Story, Serve and Brands are built from the exact same visual grammar as a family. */
.fh-story-core,.fh-serve-core,.fh-brands-core{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d}
.fh-story-seal{position:relative;width:52%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--fh-orbit2) 40%,transparent);box-shadow:inset 0 0 0 18px color-mix(in srgb,var(--fh-orbit) 7%,transparent),0 24px 55px color-mix(in srgb,var(--fh-bg) 28%,transparent)}
.fh-story-seal:before,.fh-story-seal:after{content:"";position:absolute;border-radius:50%;border:1px dashed color-mix(in srgb,var(--fh-orbit) 52%,transparent);inset:-15%;animation:fhOrbitCW 18s linear infinite}.fh-story-seal:after{inset:10%;border-style:solid;border-color:transparent color-mix(in srgb,var(--fh-orbit2) 50%,transparent);animation:fhOrbitCCW 12s linear infinite}
.fh-story-year{font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;font-size:clamp(5rem,8.2vw,8.5rem);font-weight:900;letter-spacing:-.07em;line-height:.75;color:var(--fh-ink);text-shadow:0 12px 30px color-mix(in srgb,var(--fh-bg) 34%,transparent)}
.fh-story-mark{position:absolute;bottom:15%;font-family:"29LT Bukra","Tajawal",sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.08em;color:color-mix(in srgb,var(--fh-ink) 76%,transparent)}

.fh-serve-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:"29LT Bukra","Tajawal",sans-serif;font-size:clamp(3rem,5.5vw,5.6rem);font-weight:800;color:var(--fh-ink);text-shadow:0 10px 30px color-mix(in srgb,var(--fh-bg) 30%,transparent)}
.fh-sector{position:absolute;left:50%;top:50%;font-family:"29LT Bukra","Tajawal",sans-serif;font-size:clamp(.75rem,1vw,1rem);font-weight:700;color:var(--fh-ink);white-space:nowrap;padding:.52rem .8rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--fh-orbit2) 46%,transparent);background:color-mix(in srgb,var(--fh-bg) 76%,transparent);backdrop-filter:blur(8px);box-shadow:0 10px 26px color-mix(in srgb,var(--fh-bg) 30%,transparent);transition:transform .45s cubic-bezier(.2,.8,.2,1),background .4s,color .4s}
.fh-sector.is-hot{background:var(--fh-ink);color:var(--fh-bg);transform:var(--sector-transform) scale(1.1)}

.fh-brand-logo{position:absolute;left:50%;top:50%;display:grid;place-items:center;filter:drop-shadow(0 18px 28px color-mix(in srgb,var(--fh-bg) 32%,transparent))}
.fh-brand-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.fh-brand-logo--main{width:44%;height:36%;transform:translate(-50%,-50%);z-index:4}
.fh-brand-logo--a{width:25%;height:20%;transform:translate(-138%,-132%) rotate(-7deg)}
.fh-brand-logo--b{width:23%;height:20%;transform:translate(48%,-140%) rotate(8deg)}
.fh-brand-logo--c{width:23%;height:19%;transform:translate(55%,56%) rotate(-5deg)}
.fh-brand-thread{position:absolute;inset:15%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--fh-orbit) 45%,transparent);animation:fhOrbitCW 21s linear infinite}

.fh-rail{z-index:12}.fh-arrow{border-color:color-mix(in srgb,var(--fh-ink) 72%,transparent);box-shadow:0 8px 24px color-mix(in srgb,var(--fh-bg) 22%,transparent)}
.fh-family-nav{z-index:12;background:color-mix(in srgb,var(--fh-bg) 72%,transparent);border:1px solid color-mix(in srgb,var(--fh-ink) 16%,transparent);box-shadow:0 14px 34px color-mix(in srgb,var(--fh-bg) 24%,transparent)}
.fh-family-dot{background:var(--fh-ink)}
.fh-progress{position:absolute;z-index:11;left:50%;bottom:1.35rem;width:min(36vw,430px);height:1px;transform:translateX(-50%);background:color-mix(in srgb,var(--fh-ink) 15%,transparent);overflow:hidden;pointer-events:none}
.fh-progress i{display:block;width:100%;height:100%;background:var(--fh-ink);transform-origin:0 50%;transform:scaleX(0);will-change:transform}
html[dir="rtl"] .fh-progress i{transform-origin:100% 50%}

.family-hero.is-leaving .fh-bgword{opacity:0;transform:translate3d(-50%,-50%,0) scale(1.07) skewX(-3deg)}
.family-hero.is-entering .fh-bgword{animation:fhWordGlobal .82s cubic-bezier(.16,.85,.25,1) both}
@keyframes fhWordGlobal{from{opacity:0;transform:translate3d(-50%,-42%,0) scale(.96);filter:blur(10px)}to{opacity:1;transform:translate3d(-50%,-50%,0) scale(1);filter:blur(0)}}

@media(max-width:900px){
  .family-hero{min-height:640px}.fh-copy{bottom:7rem;width:calc(100% - 2.7rem);filter:none}
  .fh-title{font-size:clamp(2.55rem,11.5vw,4.3rem);line-height:1.02}.fh-tagline{font-size:.92rem;line-height:1.65;max-width:88%;margin:.75rem 0 1rem}
  .fh-products,html[dir="rtl"] .fh-products{left:50%;top:34%;width:88vw;height:47vh;transform:translate3d(-50%,-50%,20px)}
  .fh-orbit,html[dir="rtl"] .fh-orbit{left:50%;top:34%;width:min(77vw,430px);transform:translate3d(-50%,-50%,8px) rotate(-7deg) rotateX(var(--fh-tilt-x)) rotateY(var(--fh-tilt-y))}
  .fh-bgword,html[dir="rtl"] .fh-bgword{left:50%;top:38%;font-size:26vw}
  .fh-transition-sweep,html[dir="rtl"] .fh-transition-sweep{left:50%;top:34%;width:min(82vw,460px)}
  .fh-story-seal{width:49%}.fh-story-year{font-size:clamp(4rem,18vw,6.4rem)}
  .fh-serve-center{font-size:clamp(2.4rem,12vw,4.2rem)}.fh-sector{font-size:.7rem;padding:.4rem .62rem}
  .fh-brand-logo--main{width:42%;height:34%}.fh-brand-logo--a,.fh-brand-logo--b,.fh-brand-logo--c{width:23%;height:18%}
  .fh-progress{bottom:.85rem;width:52vw}.fh-family-nav{bottom:1.4rem}
}
@media(max-width:560px){.fh-title{font-size:clamp(2.35rem,11vw,3.7rem)}.fh-copy{bottom:6.4rem}.fh-progress{display:none}.fh-family-nav{bottom:1rem}}
@media(prefers-reduced-motion:reduce){.fh-webgl{display:none}.fh-pointer-light{display:none}}


/* Final hierarchy polish after visual QA */
.family-hero[data-scene-type="family"] .fh-title{font-size:clamp(2.85rem,4.9vw,5.45rem)}
.family-hero[data-scene-type="story"] .fh-title{font-size:clamp(2.55rem,4.25vw,4.85rem);line-height:1.02}
.family-hero[data-scene-type="story"] .fh-title-line:nth-child(1){font-size:.78em;margin-inline-start:8%}
.family-hero[data-scene-type="story"] .fh-title-line:nth-child(2){font-size:.96em}
.family-hero[data-scene-type="story"] .fh-title-line:nth-child(3){font-size:.82em;margin-inline-start:15%}
.family-hero[data-scene-type="serve"] .fh-title{font-size:clamp(2.7rem,4.7vw,5.1rem)}
.family-hero[data-scene-type="brands"] .fh-title{font-size:clamp(2.55rem,4.15vw,4.7rem);line-height:1.06}
.family-hero[data-scene-type="brands"] .fh-title-line:nth-child(2){font-size:.88em;margin-inline-start:10%}
.fh-tagline{color:color-mix(in srgb,var(--fh-ink) 91%,transparent);font-weight:600}
.family-hero[data-scene-type="story"] .fh-eyebrow{letter-spacing:.035em;text-transform:none}
.family-hero[data-scene-type="story"] .fh-eyebrow #fhEnglish{font-family:"29LT Bukra","DIN Next Arabic","Tajawal","Cairo",sans-serif;font-size:.78rem}
@media(max-width:900px){
 .family-hero[data-scene-type="story"] .fh-title{font-size:clamp(2.15rem,9.7vw,3.55rem)}
 .family-hero[data-scene-type="brands"] .fh-title{font-size:clamp(2.1rem,9.2vw,3.4rem)}
 .family-hero[data-scene-type="serve"] .fh-title{font-size:clamp(2.2rem,10vw,3.7rem)}
}