/* ==========================================================================
   LUTKAY BAZIRGANI — Luxury Design System (Phase 3)
   Derived from the crest: deep navy, royal blue, ice-blue globe highlight,
   warm metallic gold, warm white, single red flag accent.
   Luxury = control + restraint, not more effects.
   ========================================================================== */

:root{
  /* ---- Brand palette — tonal depth per official crest sampling ---- */
  --navy-950: #050A14;  /* Midnight            */
  --navy-900: #07152C;  /* Deep Navy            */
  --navy-800: #0D2854;  /* Royal Navy           */
  --navy-700: #163A6E;
  --blue-600: #1857A6;  /* Logo Blue            */
  --blue-500: #2E6FC2;
  --ice-400:  #BBD8F5;  /* Ice Blue             */
  --gold-600: #A9761F;
  --gold-500: #D8A849;  /* Champagne Gold       */
  --gold-400: #E4BC6E;
  --gold-200: #F0D397;  /* Soft Gold            */
  --red-600:  #A31E22;

  --white:     #FFFFFF;
  --warm-white:#FBF8F2;  /* Ivory */
  --paper:     #F4EFE6;
  --ink-900:   #14171C;
  --ink-700:   #3B3F46;
  --ink-500:   #6B7078;
  --line:      #E4DDCE;

  /* ---- Spacing scale (unchanged) ---- */
  --sp-1: .4rem;
  --sp-2: .8rem;
  --sp-3: 1.6rem;
  --sp-4: 2.4rem;
  --sp-5: 4rem;
  --sp-6: 6.4rem;
  --sp-7: 9.6rem;

  /* ---- Luxury radius scale — bigger, more contemporary ----
     small control 12–14 · button 14–18 · card 20–24 · feature 24–30 · panel 28–36 */
  --radius-s:   14px;  /* inputs, chips, small controls */
  --radius-m:   18px;  /* buttons                       */
  --radius-l:   24px;  /* standard/feature cards         */
  --radius-xl:  32px;  /* major panels, hero surfaces    */
  --radius-full: 999px;

  /* ---- Elevation system ---- */
  --shadow-1: 0 1px 2px rgba(5,10,20,.06), 0 1px 1px rgba(5,10,20,.04);
  --shadow-2: 0 10px 30px -12px rgba(5,10,20,.24), 0 2px 8px -2px rgba(5,10,20,.10);
  --shadow-3: 0 32px 70px -22px rgba(5,10,20,.42), 0 10px 24px -10px rgba(5,10,20,.22);
  --shadow-soft: var(--shadow-3);
  --shadow-tight: var(--shadow-2);
  --glow-gold: 0 0 0 1px rgba(216,168,73,.35), 0 8px 30px -8px rgba(216,168,73,.35);
  --glow-gold-lg: 0 0 0 1px rgba(228,188,110,.4), 0 22px 55px -14px rgba(228,188,110,.42);
  --glow-ice: 0 0 0 1px rgba(187,216,245,.3), 0 8px 26px -10px rgba(187,216,245,.35);
  --ring-focus: 0 0 0 3px rgba(216,168,73,.35);

  /* ---- Phase 5 — independent-card + more-blue system ---- */
  --surface-card-light: linear-gradient(172deg, #FFFFFF 0%, #FBF7EE 58%, #F6EEDD 100%);
  --border-card-light: rgba(112,142,181,.24);
  --border-card-light-hover: rgba(112,142,181,.42);
  --edge-champagne: rgba(228,188,110,.6);
  --edge-ice: rgba(158,196,238,.55);
  --shadow-card-rest:
    0 1px 1px rgba(9,20,42,.04),
    0 8px 18px -10px rgba(9,20,42,.12),
    0 26px 50px -22px rgba(9,20,42,.16);
  --shadow-card-hover:
    0 2px 2px rgba(9,20,42,.05),
    0 16px 30px -12px rgba(9,20,42,.18),
    0 42px 80px -24px rgba(20,60,120,.24);
  --surface-card-dark: linear-gradient(165deg, var(--navy-800) 0%, var(--navy-900) 62%, var(--navy-950) 100%);
  --border-card-dark: rgba(158,196,238,.16);
  --border-card-dark-hover: rgba(158,196,238,.32);
  --shadow-card-dark-rest:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 10px 24px -12px rgba(2,6,16,.6),
    0 32px 64px -22px rgba(2,6,16,.62);
  --shadow-card-dark-hover:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 34px -12px rgba(2,6,16,.68),
    0 48px 96px -20px rgba(10,30,70,.55);
  --btn-primary-grad: linear-gradient(155deg, var(--blue-500) 0%, var(--blue-600) 55%, var(--navy-800) 100%);
  --royal-glow: 0 0 0 1px rgba(158,196,238,.28), 0 10px 34px -10px rgba(46,111,194,.4);

  /* ---- Type ----
     Deliberately different fonts for heading vs. body (not just a size
     difference) — Noto Kufi Arabic's Kufic structure gives major Kurdish
     headlines real editorial character, while Vazirmatn (purpose-built
     for Kurdish/Farsi, excellent full-weight range) carries body/UI copy
     for maximum readability at small sizes. Both are already verified
     loading in production; each is the other's fallback, so a failed
     request never falls back to a Latin-oriented font for Kurdish. */
  --font-display: "Noto Kufi Arabic", "Vazirmatn", "IBM Plex Sans Arabic", "Playfair Display", serif;
  --font-body: "Vazirmatn", "IBM Plex Sans Arabic", "Noto Sans Arabic", "Inter", sans-serif;
  --font-en-display: "Fraunces", "Georgia", serif;
  --font-en-body: "Manrope", "Inter", "Segoe UI", sans-serif;

  /* ---- Motion tokens — six durations, two curves, used with intent ----
     micro (hover/focus) → card → menu → filters/dropdowns → section reveals → hero */
  --duration-fast:    200ms;  /* button hover, icon movement, control states       */
  --duration-card:    250ms;  /* card hover lift/glow                              */
  --duration-menu:    380ms;  /* mobile menu sheet open/close                      */
  --duration-ui:      420ms;  /* filters, dropdowns, misc component motion         */
  --duration-section: 750ms;  /* editorial section entrance, heading reveal        */
  --duration-hero:   1400ms;  /* hero sequencing only                              */
  --ease-luxury:    cubic-bezier(.22,1,.36,1);    /* confident expo-out, default   */
  --ease-out-expo:  cubic-bezier(.19,1,.22,1);    /* stronger deceleration, hero    */

  /* Back-compat aliases (existing rules below reference these names) */
  --motion-fast: var(--duration-fast);
  --motion-med:  var(--duration-ui);
  --motion-slow: var(--duration-section);
  --ease: var(--ease-luxury);
  --ease-soft: var(--ease-out-expo);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:16px; scroll-behavior:smooth; overflow-x:hidden; }
body{ overflow-x:hidden; max-width:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--warm-white);
  color:var(--ink-900);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html[dir="ltr"] body{ font-family:var(--font-en-body); }

img{ max-width:100%; display:block; }
/* The `hidden` attribute must always win over any component's own
   `display` rule (buttons, modals, flex/grid containers, etc.) — without
   this, `.btn{display:inline-flex}`-style component rules silently defeat
   `hidden` at equal specificity, since an author rule always beats the
   UA stylesheet's own `[hidden]{display:none}`, regardless of selector
   specificity. This is the standard, deliberate use of !important for
   exactly this one semantic case. */
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; }
html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] h3, html[dir="ltr"] h4{ font-family:var(--font-en-display); }
p{ margin:0; }
button{ font:inherit; }

:focus-visible{ outline:none; box-shadow:var(--ring-focus); border-radius:var(--radius-s); }

.wrap{ max-width:1240px; margin-inline:auto; padding-inline:var(--sp-4); }
@media (max-width:720px){ .wrap{ padding-inline:var(--sp-3); } }

/* ---------- Icon system (Lucide + Simple Icons, inlined, currentColor) ---------- */
.icon{ width:18px; height:18px; flex:0 0 auto; display:inline-block; vertical-align:-3px; }
.nav-icon{ width:22px; height:22px; }
.wa-icon{ width:18px; height:18px; color:var(--white); }
.play-icon{ width:26px; height:26px; color:var(--navy-950); margin-inline-start:3px; }
.social-icon{ width:17px; height:17px; }
.inline-icon{ width:15px; height:15px; vertical-align:-2px; margin-inline-end:.4em; color:var(--gold-600); }
.search-icon{ width:17px; height:17px; color:var(--ink-500); }
.btn-arrow .icon{ width:16px; height:16px; }

/* ---------- Eyebrow / kicker ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.78rem; color:var(--gold-600); font-weight:700;
}
/* Wide tracking + uppercase are Latin-typography conventions — Arabic-script
   glyphs lose their joining forms and become hard to read under them, so this
   treatment is scoped to LTR (English) pages only. */
html[dir="ltr"] .eyebrow{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow::before{
  content:""; width:22px; height:2px; background:linear-gradient(90deg,var(--gold-500),var(--gold-300,var(--gold-400)));
  display:inline-block; border-radius:2px;
}
.section-dark .eyebrow{ color:var(--gold-400); }

/* ==========================================================================
   HEADER — premium translucent → solid transition
   ========================================================================== */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  padding:1.1rem 0;
  background:linear-gradient(180deg, rgba(7,14,30,.55), rgba(7,14,30,0));
  transition:background var(--motion-med) var(--ease), box-shadow var(--motion-med) var(--ease),
             padding var(--motion-med) var(--ease), border-color var(--motion-med) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(9,20,42,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--shadow-2);
  padding:.65rem 0;
  border-bottom:1px solid rgba(217,170,85,.16);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.brand{ display:flex; align-items:center; gap:.75rem; transition:opacity var(--motion-fast) var(--ease); }
.brand:hover{ opacity:.85; }
.brand img{ width:44px; height:44px; border-radius:50%; box-shadow:0 0 0 1px rgba(217,170,85,.4), 0 4px 14px -4px rgba(0,0,0,.5); }
.brand-type{ display:flex; flex-direction:column; line-height:1.25; gap:.15rem; }
.brand-type strong{ color:var(--white); font-family:var(--font-display); font-size:1.05rem; }
.brand-type span{ color:var(--gold-200); font-size:.82rem; font-weight:600; letter-spacing:.06em; }
html[dir="ltr"] .brand-type span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }

.main-nav{ display:flex; align-items:center; gap:1.5rem; }
.main-nav ul{ display:flex; gap:1.3rem; }
.main-nav a{ color:rgba(255,255,255,.82); font-size:.9rem; font-weight:500; position:relative; padding-block:.4rem; transition:color var(--motion-fast) var(--ease); }
.main-nav a::after{
  content:""; position:absolute; inset-inline-start:0; bottom:-2px; height:2px; width:0;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-400)); border-radius:2px;
  transition:width var(--motion-med) var(--ease);
}
.main-nav a:hover{ color:var(--white); }
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.main-nav a.active{ color:var(--gold-400); }

.lang-switch{ display:flex; gap:.25rem; background:rgba(255,255,255,.08); padding:.28rem; border-radius:var(--radius-full); border:1px solid rgba(255,255,255,.08); }
.lang-switch a{ padding:.4rem .8rem; border-radius:var(--radius-full); font-size:.76rem; color:rgba(255,255,255,.65); font-weight:600; transition:all var(--motion-fast) var(--ease); }
.lang-switch a:hover{ color:var(--white); }
.lang-switch a.active{ background:linear-gradient(180deg,var(--gold-400),var(--gold-600)); color:var(--navy-950); box-shadow:0 2px 8px -2px rgba(196,146,46,.6); }

/* Tasteful header CTA — a compact button, not a second competing hero
   action; only shown alongside the full desktop nav. */
.header-cta{ margin-inline-start:.3rem; padding-inline:1.1rem; white-space:nowrap; }

.nav-toggle{
  display:none; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:var(--white);
  border-radius:var(--radius-full); width:44px; height:44px; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--motion-fast) var(--ease);
}
.nav-toggle:hover{ background:rgba(255,255,255,.16); }

/* Custom animated 3-line menu icon — morphs to X, not a static icon swap */
.burger{ position:relative; width:18px; height:13px; display:inline-block; }
.burger span{
  position:absolute; inset-inline:0; height:2px; border-radius:2px; background:currentColor;
  transition:transform var(--duration-ui) var(--ease-out-expo), opacity var(--duration-fast) var(--ease-luxury), top var(--duration-ui) var(--ease-out-expo);
}
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:5.5px; }
.burger span:nth-child(3){ top:11px; }
.burger.is-open span:nth-child(1){ top:5.5px; transform:rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ top:5.5px; transform:rotate(-45deg); }
@media (max-width:1279px){
  /* Language switcher is duplicated inside .mobile-menu at this width, so the
     header itself only needs to carry the brand + menu toggle — keeping both
     nav lists in the header row was overflowing narrow/mid viewports (all
     8 links + language switch + CTA button only reliably fit in one row at
     1280px+; below that a wrapped two-row nav reads as broken, not premium). */
  .main-nav ul, .main-nav .lang-switch, .main-nav .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width:380px){
  /* Keep the "٥٥ سێکتەر" tagline legible instead of hiding it — the crest
     shrinks a touch on the very narrowest phones; the brand text keeps its
     full readable size, never shrunk to solve a layout problem. */
  .brand img{ width:38px; height:38px; }
}

/* ==========================================================================
   BUTTONS — premium system: primary / secondary / dark / ghost / icon
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.9rem 1.7rem; border-radius:var(--radius-m); font-weight:600; font-size:.92rem;
  border:1px solid transparent; cursor:pointer;
  transition:transform var(--motion-fast) var(--ease), box-shadow var(--motion-med) var(--ease),
             background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  position:relative;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0px) scale(.98); }
.btn:disabled, .btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; pointer-events:none; }

/* Primary CTA — royal navy → logo blue, the international/sophisticated
   surface the brand should lead with. Gold is kept as a hairline edge and
   the icon accent only, not a fill (see art-direction brief §17). Class
   name kept as .btn-gold for template compatibility. */
.btn-gold{
  background:var(--btn-primary-grad);
  color:var(--white); border:1px solid rgba(228,188,110,.32);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, var(--shadow-2);
}
.btn-gold:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, var(--royal-glow), var(--shadow-3);
  border-color:rgba(228,188,110,.55);
}
.btn-gold .btn-arrow{ color:var(--gold-400); }
.btn-gold-solid{
  background:linear-gradient(155deg,var(--gold-400) 0%, var(--gold-500) 55%, var(--gold-600) 100%);
  color:var(--navy-950); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, var(--shadow-2);
}
.btn-gold-solid:hover{ box-shadow:0 1px 0 rgba(255,255,255,.45) inset, var(--glow-gold-lg); }

.btn-outline{ border-color:rgba(187,216,245,.4); color:var(--white); background:rgba(187,216,245,.03); }
.btn-outline:hover{ border-color:var(--gold-400); color:var(--gold-400); background:rgba(217,170,85,.08); box-shadow:var(--shadow-2); }

.btn-dark{ background:linear-gradient(155deg,var(--navy-800),var(--navy-950)); color:var(--white); box-shadow:var(--shadow-1); }
.btn-dark:hover{ box-shadow:var(--shadow-2); }

.btn-ghost{ background:transparent; color:rgba(255,255,255,.75); border:1px solid transparent; padding:.9rem 1.1rem; }
.btn-ghost:hover{ color:var(--gold-400); transform:translateY(-1px); }

.btn-sm{ padding:.6rem 1.15rem; font-size:.82rem; border-radius:var(--radius-s); }
.btn-lg{ padding:1.1rem 2.1rem; font-size:1rem; }
/* Icon-only variant — composes with any color variant above
   (e.g. `btn btn-dark btn-icon`); same 44px minimum touch target and
   motion as every other button. */
.btn-icon{ width:44px; height:44px; padding:0; border-radius:var(--radius-full); display:inline-flex; align-items:center; justify-content:center; gap:0; }
.btn-icon .icon{ width:18px; height:18px; }

.btn-arrow{ display:inline-flex; transition:transform var(--motion-med) var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(-4px); }
html[dir="ltr"] .btn:hover .btn-arrow{ transform:translateX(4px); }

/* ==========================================================================
   HERO — cinematic, layered, restrained depth
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 42%, var(--navy-800) 82%, var(--navy-700) 100%);
  color:var(--white); overflow:hidden;
  perspective:1400px;
}
/* Layer 1 — atmosphere: soft radial light bloom, fades in first. Now carries
   more of the logo's ice/royal blue rather than leaning on gold+navy alone. */
.hero-bloom{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:
    radial-gradient(58% 50% at 50% 8%, rgba(158,196,238,.22), transparent 64%),
    radial-gradient(48% 44% at 84% 18%, rgba(216,168,73,.14), transparent 62%),
    radial-gradient(56% 50% at 10% 92%, rgba(46,111,194,.30), transparent 64%);
  filter:blur(6px);
  animation:bloomIn 1.8s var(--ease-out-expo) forwards;
}
/* Layer 2 — extremely subtle topography grid */
.hero::before{
  content:""; position:absolute; inset:0; opacity:.4; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 40%, black, transparent 75%);
}
/* Layer 3 — the globe: the crest's world sits behind the mark itself, not as
   a separate background image, so mark + globe + network read as one object */
.hero-globe{
  position:absolute; top:8%; left:50%; z-index:1; pointer-events:none;
  width:min(58vw,580px); height:min(58vw,580px); border-radius:50%;
  transform:translateX(-50%) scale(.92); opacity:0;
  background:
    radial-gradient(46% 40% at 32% 26%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(closest-side, rgba(158,196,238,.26), rgba(46,111,194,.14) 62%, transparent 78%);
  border:1.5px solid rgba(158,196,238,.30);
  box-shadow:inset 0 0 70px rgba(158,196,238,.16), inset 0 -30px 60px rgba(5,10,20,.35), 0 0 90px -20px rgba(158,196,238,.25);
  animation:globeIn 1.9s var(--ease-out-expo) .18s forwards;
}
.hero-globe::before{
  content:""; position:absolute; inset:9%; border-radius:50%; opacity:.7;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 11%);
  mask-image:radial-gradient(circle, black 58%, transparent 78%);
}
.hero-globe::after{
  content:""; position:absolute; inset:9%; border-radius:50%; opacity:.5;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 14%);
  mask-image:radial-gradient(circle, black 58%, transparent 78%);
}
@media (max-width:600px){
  /* The globe is the clearest "custom to Lutkay" signal in the hero and
     was previously so faint on a phone it read as plain navy — sized and
     lit for a small dark screen specifically, not a scaled-down desktop
     value. */
  .hero-globe{ width:78vw; height:78vw; top:8%; }
}
/* Layer 4 — Summit Network connection lines, centered behind the mark so
   the routes read as travelling around the logo rather than as wallpaper */
.hero-lines{
  position:absolute; top:2%; left:50%; transform:translateX(-50%); z-index:2;
  width:min(74vw,900px); height:min(58vw,640px); opacity:0; pointer-events:none;
  animation:fadeInOnly 1s var(--ease-luxury) .35s forwards;
}
/* Layer 5 — the huge translucent "55", now tonally blue+gold rather than gold-only */
.hero-bignum{
  position:absolute; inset-inline-end:-2vw; top:-4vw; z-index:1; pointer-events:none;
  font-family:var(--font-en-display); font-weight:600; font-size:min(44vw,600px);
  line-height:1; user-select:none;
  background:linear-gradient(160deg, rgba(158,196,238,.26), rgba(228,188,110,.19) 55%, rgba(228,188,110,.05));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:scale(.94); filter:blur(6px);
  animation:numReveal var(--duration-hero) var(--ease-out-expo) .3s forwards;
}
html[dir="rtl"] .hero-bignum{ inset-inline-start:-2vw; inset-inline-end:auto; }

/* Layer 6 — mountain silhouette anchoring the base of the scene and
   bridging visually into the section that follows (see .section-bridge) */
.hero-mountain{
  position:absolute; left:0; right:0; bottom:-1px; z-index:3; pointer-events:none;
  width:100%; line-height:0; opacity:0;
  animation:fadeInOnly 1.6s var(--ease-luxury) .5s forwards;
}
.hero-mountain svg{ display:block; width:100%; height:auto; }
/* The flag cloth gets a very small, slow skew — cloth-like, not cartoon
   waving — anchored at the pole edge (transform-origin) so only the free
   edge of the flag moves, the pole stays perfectly still. Collapses to a
   static frame under prefers-reduced-motion via the existing global rule. */
.summit-flag-cloth{ transform-origin:460px 79px; animation:summitFlagWave 3.4s ease-in-out infinite; }
@keyframes summitFlagWave{ 0%,100%{ transform:skewY(0deg) scaleX(1); } 50%{ transform:skewY(3deg) scaleX(.97); } }

.hero-inner{ position:relative; z-index:4; padding-block:var(--sp-7) var(--sp-6); text-align:center; width:100%; }
/* Layer 7 — logo, soft dimensional entrance with a rear glow that ties it
   into the globe/atmosphere behind it instead of sitting on top like a badge */
.hero-crest-wrap{ position:relative; width:clamp(96px, 22vw, 152px); height:clamp(96px, 22vw, 152px); margin-inline:auto var(--sp-3); }
.hero-crest-wrap::before{
  content:""; position:absolute; inset:-26px; z-index:0; border-radius:50%;
  background:radial-gradient(circle, rgba(158,196,238,.26), rgba(216,168,73,.09) 55%, transparent 74%);
  filter:blur(10px); opacity:0; animation:fadeInOnly 1.4s var(--ease-luxury) .3s forwards;
}
/* A crisp bezel ring, distinct from the soft atmospheric halo above — the
   difference between a medallion set into the scene and a sticker pasted
   on top of it. */
.hero-crest-wrap::after{
  content:""; position:absolute; inset:-6px; z-index:0; border-radius:50%;
  border:1px solid rgba(216,168,73,.4);
  box-shadow:0 0 0 1px rgba(158,196,238,.14), 0 0 24px rgba(158,196,238,.18);
  opacity:0; animation:fadeInOnly 1.2s var(--ease-luxury) .5s forwards;
}
.hero-crest{
  position:relative; z-index:1; width:100%; height:100%; margin:0; opacity:0;
  filter:drop-shadow(0 14px 34px rgba(9,20,42,.5)) drop-shadow(0 2px 10px rgba(9,20,42,.35));
  transform:translateY(14px) scale(.92) rotateX(8deg);
  animation:crestIn var(--duration-hero) var(--ease-out-expo) .42s forwards;
}
/* Layer 6 — masked headline reveal */
.hero h1{
  font-size:clamp(2.5rem, 6.4vw, 5.1rem); line-height:1.05; color:var(--white);
  opacity:0; clip-path:inset(0 0 100% 0); transform:translateY(10px);
  animation:maskReveal var(--duration-hero) var(--ease-out-expo) .62s forwards;
}
.hero h1 small{
  display:block; font-family:var(--font-en-display); font-size:.32em;
  color:var(--gold-400); margin-top:1rem; font-weight:500;
}
html[dir="ltr"] .hero h1 small{ letter-spacing:.24em; text-transform:uppercase; font-size:.3em; }
.hero-statement{
  margin-top:var(--sp-2); font-family:var(--font-display); font-size:clamp(1.1rem,2.4vw,1.55rem);
  background:linear-gradient(90deg,var(--gold-200),var(--gold-400));
  -webkit-background-clip:text; background-clip:text; color:var(--gold-400);
  opacity:0; animation:blurResolve var(--duration-section) var(--ease-out-expo) .8s forwards;
}
.hero-sub{
  max-width:640px; margin:var(--sp-3) auto 0; font-size:1.08rem; color:rgba(255,255,255,.76);
  opacity:0; animation:sideReveal var(--duration-section) var(--ease-luxury) .95s forwards;
}
.hero-stat-line{
  margin-top:var(--sp-4); display:flex; justify-content:center; align-items:stretch; gap:var(--sp-4) var(--sp-5); flex-wrap:wrap;
}
.hero-stat-line div{ text-align:center; opacity:0; animation:settleScale var(--duration-ui) var(--ease-out-expo) forwards; position:relative; }
/* Fine editorial dividers between stats instead of gap alone — a deliberate
   "statistics table" reading. Only once the row is guaranteed to stay on
   one line (see .hero-stat-line's own wrap behavior below ~600px) so a
   wrapped second row never inherits a stray vertical line. */
@media (min-width:600px){
  .hero-stat-line div{ padding-inline-end:var(--sp-4); }
  .hero-stat-line div:last-child{ padding-inline-end:0; }
  .hero-stat-line div + div::before{
    content:""; position:absolute; inset-inline-start:calc(-1 * var(--sp-4) / 2); top:.1em; bottom:.1em; width:1px;
    background:linear-gradient(rgba(255,255,255,0), rgba(216,168,73,.4), rgba(255,255,255,0));
  }
}
.hero-stat-line div:nth-child(1){ animation-delay:1.06s; }
.hero-stat-line div:nth-child(2){ animation-delay:1.13s; }
.hero-stat-line div:nth-child(3){ animation-delay:1.20s; }
.hero-stat-line div:nth-child(4){ animation-delay:1.27s; }
.hero-stat-line strong{ display:block; font-family:var(--font-en-display); font-size:2.1rem;
  background:linear-gradient(180deg,var(--gold-200),var(--gold-500)); -webkit-background-clip:text; background-clip:text; color:var(--gold-400); }
.hero-stat-line span{ font-size:.78rem; color:rgba(255,255,255,.6); letter-spacing:.05em; }
/* Layer 7/8 — CTAs, primary settles in with scale, secondary slides in beside it */
.hero-ctas{ margin-top:var(--sp-5); display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; }
.hero-ctas-hier{ align-items:center; }
.hero-ctas .btn-gold{ opacity:0; animation:settleScale var(--duration-section) var(--ease-out-expo) 1.36s forwards; }
.hero-ctas .btn-ghost{ opacity:0; animation:sideReveal var(--duration-section) var(--ease-luxury) 1.48s forwards; }
.hero-scroll{
  position:absolute; bottom:var(--sp-3); inset-inline:0; margin-inline:auto; width:fit-content;
  color:rgba(255,255,255,.5); font-size:.72rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  opacity:0; animation:fadeInOnly .8s var(--ease-luxury) 1.5s forwards;
}
html[dir="ltr"] .hero-scroll{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; }
.hero-scroll .dash{ width:1px; height:34px; background:linear-gradient(var(--gold-400), transparent); animation:dashPulse 2.4s ease-in-out infinite; }

@keyframes riseIn{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:translateY(0);} }
@keyframes fadeInOnly{ from{opacity:0;} to{opacity:1;} }
@keyframes bloomIn{ from{opacity:0;} to{opacity:1;} }
@keyframes globeIn{ from{opacity:0; transform:translateX(-50%) scale(.92);} to{opacity:1; transform:translateX(-50%) scale(1);} }
@keyframes numReveal{ from{opacity:0; transform:scale(.94); filter:blur(6px);} to{opacity:1; transform:scale(1); filter:blur(0);} }
@keyframes crestIn{ from{opacity:0; transform:translateY(14px) scale(.92) rotateX(8deg);} to{opacity:1; transform:translateY(0) scale(1) rotateX(0);} }
@keyframes maskReveal{ from{opacity:0; clip-path:inset(0 0 100% 0); transform:translateY(10px);} to{opacity:1; clip-path:inset(0 0 0 0); transform:translateY(0);} }
@keyframes blurResolve{ from{opacity:0; filter:blur(7px); transform:translateY(6px);} to{opacity:1; filter:blur(0); transform:translateY(0);} }
@keyframes settleScale{ from{opacity:0; transform:translateY(10px) scale(.985);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes sideReveal{ from{opacity:0; transform:translateX(-14px);} to{opacity:1; transform:translateX(0);} }
html[dir="rtl"] .hero-sub{ animation-name:sideRevealRtl; }
@keyframes sideRevealRtl{ from{opacity:0; transform:translateX(14px);} to{opacity:1; transform:translateX(0);} }
@keyframes dashPulse{ 0%,100%{opacity:.25;} 50%{opacity:1;} }

/* ---------- Summit Network motif — animated route + illuminated nodes ---------- */
.sn-path{
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:snDraw 1.8s var(--ease-out-expo) .3s forwards;
}
.sn-node{ opacity:0; transform-origin:center; transform-box:fill-box; transform:scale(.3);
  animation:snNode .6s var(--ease-luxury) forwards; }
.sn-node-ring{ opacity:0; transform-origin:center; transform-box:fill-box; transform:scale(.4);
  animation:snRing 1.1s var(--ease-out-expo) forwards; }
@keyframes snDraw{ to{ stroke-dashoffset:0; } }
@keyframes snNode{ from{opacity:0; transform:scale(.3);} to{opacity:1; transform:scale(1);} }
@keyframes snRing{ from{opacity:.9; transform:scale(.4);} to{opacity:0; transform:scale(2.6);} }

/* ---------- 404 — "the line that stops before reaching the summit" ---------- */
.notfound-trail{ width:min(90vw,420px); height:auto; margin:var(--sp-3) auto; display:block; opacity:.85; }
.trail-path{ stroke-dasharray:100; stroke-dashoffset:100; animation:snDraw 1.6s var(--ease-out-expo) .3s forwards; }
.trail-break{ opacity:0; animation:trailBreakIn .5s var(--ease-luxury) 1.7s forwards; }
.trail-peak{ opacity:0; animation:fadeInOnly .8s var(--ease-luxury) 1.9s forwards; }
@keyframes trailBreakIn{ from{opacity:0; transform:scale(.5);} to{opacity:1; transform:scale(1);} }
.notfound-hero .hero-crest{ margin-bottom:0; }


/* ==========================================================================
   SCROLL REVEAL — six reveal families so different content types move
   differently, instead of everything sharing one rise/fade (art-direction
   brief §18–20). Legacy .reveal kept for back-compat.
   ========================================================================== */
.js-ready .reveal{ opacity:0; transform:translateY(28px); transition:opacity var(--motion-slow) var(--ease), transform var(--motion-slow) var(--ease); }
.js-ready .reveal.in-view{ opacity:1; transform:translateY(0); }

.js-ready .reveal-mask{ opacity:0; clip-path:inset(0 0 100% 0); transform:translateY(8px); transition:opacity var(--duration-section) var(--ease-out-expo), clip-path var(--duration-section) var(--ease-out-expo), transform var(--duration-section) var(--ease-out-expo); }
.js-ready .reveal-mask.in-view{ opacity:1; clip-path:inset(0 0 0 0); transform:translateY(0); }

.js-ready .reveal-soft{ opacity:0; transform:translateY(10px); transition:opacity var(--duration-section) var(--ease-luxury), transform var(--duration-section) var(--ease-luxury); }
.js-ready .reveal-soft.in-view{ opacity:1; transform:translateY(0); }

.js-ready .reveal-depth{ opacity:0; transform:scale(.985); transition:opacity var(--duration-section) var(--ease-out-expo), transform var(--duration-section) var(--ease-out-expo); }
.js-ready .reveal-depth.in-view{ opacity:1; transform:scale(1); }

.js-ready .reveal-side{ opacity:0; transform:translateX(-18px); transition:opacity var(--duration-section) var(--ease-luxury), transform var(--duration-section) var(--ease-luxury); }
html[dir="rtl"] .js-ready .reveal-side{ transform:translateX(18px); }
.js-ready .reveal-side.in-view{ opacity:1; transform:translateX(0); }

.js-ready .reveal-line{ transform:scaleX(0); transform-origin:left; transition:transform var(--duration-section) var(--ease-out-expo); }
html[dir="rtl"] .js-ready .reveal-line{ transform-origin:right; }
.js-ready .reveal-line.in-view{ transform:scaleX(1); }

.js-ready .reveal-stagger > *{ opacity:0; transform:translateY(14px); transition:opacity var(--duration-ui) var(--ease-luxury), transform var(--duration-ui) var(--ease-luxury); }
.js-ready .reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.js-ready .reveal-stagger.in-view > *:nth-child(1){ transition-delay:.02s; }
.js-ready .reveal-stagger.in-view > *:nth-child(2){ transition-delay:.07s; }
.js-ready .reveal-stagger.in-view > *:nth-child(3){ transition-delay:.12s; }
.js-ready .reveal-stagger.in-view > *:nth-child(4){ transition-delay:.17s; }
.js-ready .reveal-stagger.in-view > *:nth-child(5){ transition-delay:.22s; }
.js-ready .reveal-stagger.in-view > *:nth-child(6){ transition-delay:.27s; }

/* ==========================================================================
   SECTION SHELLS
   ========================================================================== */
.section{ padding-block:var(--sp-6); position:relative; }
@media (max-width:640px){
  /* Desktop's 102px section rhythm reads as generous breathing room; at
     phone width the same value just pushes content further down without
     adding perceived luxury — scaled to a still-deliberate ~80px. */
  .section{ padding-block:5rem; }
  .section-tight{ padding-block:3.6rem; }
}
.section-dark{
  background:linear-gradient(175deg, var(--navy-950), var(--navy-900));
  color:var(--white);
}
/* The page's final beat before the footer — a deliberate dark closing note
   (per the brief's dark/light rhythm) rather than another light box, with a
   soft gold glow behind the CTA instead of a flat repeat of other dark
   sections. */
.closing-cta{ position:relative; overflow:hidden; }
.closing-cta::before{
  content:""; position:absolute; top:-10%; inset-inline-start:50%; transform:translateX(-50%);
  width:min(70vw,640px); height:280px; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(216,168,73,.16), transparent 72%);
}
.closing-cta .wrap{ position:relative; z-index:1; }
.section-tight{ padding-block:var(--sp-5); }

/* ---------- Editorial rhythm utilities — occasional full-bleed / overlap ---------- */
.bleed{ width:100vw; margin-inline-start:calc(50% - 50vw); }
.panel-overlap{ margin-top:calc(-1 * var(--sp-5)); position:relative; z-index:5; }
@media (max-width:760px){ .panel-overlap{ margin-top:calc(-1 * var(--sp-3)); } }
/* A thin gold/blue Summit-Network connector bridging two sections — abstract,
   not literal wayfinding. Purely decorative, aria-hidden in markup. */
.section-connector{ position:relative; height:64px; margin-block:calc(-1 * var(--sp-3)) 0; overflow:hidden; pointer-events:none; }
.section-connector svg{ width:100%; height:100%; display:block; }
.section-head{ max-width:680px; margin-bottom:var(--sp-5); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); margin-top:.6rem; }
.lede{ font-size:1.08rem; color:var(--ink-700); margin-top:var(--sp-2); }
.section-dark .lede{ color:rgba(255,255,255,.72); }

/* ---------- Snapshot stats ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.2vw,16px); background:transparent; border:0; border-radius:0; }
.stat-cell{
  background:var(--surface-card-light); border:1px solid var(--border-card-light); border-radius:var(--radius-m);
  padding:var(--sp-4) var(--sp-3); text-align:center; box-shadow:var(--shadow-card-rest);
  transition:transform var(--duration-card) var(--ease-luxury), box-shadow var(--duration-card) var(--ease-luxury), border-color var(--duration-card) var(--ease-luxury);
}
.stat-cell:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-hover); border-color:var(--border-card-light-hover); }
.stat-cell strong{ font-family:var(--font-en-display); font-size:2.6rem; color:var(--navy-800); display:block; }
.stat-cell span{ font-size:.82rem; color:var(--ink-500); }
@media (max-width:760px){ .stat-grid{ grid-template-columns:repeat(2,1fr);} }

/* ---------- Big idea — premium editorial five-part system ----------
   Large outlined numerals + a fine elevation line with illuminated nodes
   (the Summit Network motif, reused rather than reinvented) running down
   the spine, instead of a plain numbered list. Ivory surface, generous
   vertical rhythm — an editorial feature, not five cards. */
.idea-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-6); align-items:start; }
.idea-intro{ position:sticky; top:calc(var(--sp-6) + 60px); }
.idea-list{
  display:grid; position:relative;
  padding-inline-start:clamp(2.2rem, 4vw, 3.4rem);
}
.idea-list::before{
  content:""; position:absolute; inset-inline-start:.85rem; top:.4rem; bottom:.4rem; width:1px;
  background:linear-gradient(var(--gold-500) 0%, var(--blue-500) 68%, transparent 100%);
  opacity:.3;
}
.idea-list li{
  position:relative; display:flex; gap:clamp(1.1rem,2.4vw,1.9rem); align-items:baseline;
  padding-block:clamp(1.3rem,2.6vw,1.9rem); border-bottom:1px solid var(--line);
}
.idea-list li:first-child{ padding-top:.2rem; }
.idea-list li:last-child{ border-bottom:none; padding-bottom:.2rem; }
.idea-list li::before{
  content:""; position:absolute; inset-inline-start:calc(-1 * clamp(2.2rem, 4vw, 3.4rem) + .55rem); top:50%; transform:translateY(-50%);
  width:9px; height:9px; border-radius:50%; background:var(--gold-500);
  box-shadow:0 0 0 4px rgba(216,168,73,.14); transition:box-shadow var(--duration-ui) var(--ease-luxury), background var(--duration-ui) var(--ease-luxury);
}
.idea-list li:hover::before{ background:var(--blue-600); box-shadow:0 0 0 6px rgba(24,87,166,.16); }
.idea-list .num{
  font-family:var(--font-en-display); font-weight:600; line-height:1; flex:none;
  font-size:clamp(2.1rem,3.6vw,3.1rem);
  background:linear-gradient(160deg,var(--gold-200),var(--gold-500));
  -webkit-background-clip:text; background-clip:text; color:var(--gold-500);
  opacity:.92; min-width:2.6rem; transition:transform var(--duration-ui) var(--ease-luxury);
}
.idea-list li:hover .num{ transform:translateY(-2px); }
.idea-list li span:last-child{ font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.6; padding-top:.35rem; }
@media (max-width:860px){
  .idea-grid{ grid-template-columns:1fr; gap:var(--sp-4); }
  .idea-intro{ position:static; }
}

/* ---------- The 55 index (homepage teaser) ---------- */
.index-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:.55rem; }
.index-chip{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.12); font-family:var(--font-en-display); font-size:1rem; color:rgba(255,255,255,.7);
  border-radius:var(--radius-s); background:rgba(255,255,255,.03);
  transition:all var(--motion-med) var(--ease);
}
.index-chip:hover{
  background:linear-gradient(155deg,var(--gold-400),var(--gold-600)); color:var(--navy-950); border-color:var(--gold-400);
  transform:translateY(-3px) scale(1.04); box-shadow:var(--glow-gold);
}

/* ==========================================================================
   CARDS — luxury surface language
   ========================================================================== */
.card{
  background:linear-gradient(175deg, var(--white), var(--warm-white));
  border:1px solid var(--line); border-radius:var(--radius-l); padding:var(--sp-4);
  box-shadow:var(--shadow-1);
  transition:box-shadow var(--motion-med) var(--ease), transform var(--motion-med) var(--ease), border-color var(--motion-med) var(--ease);
}
.card:hover{ box-shadow:var(--shadow-2); }

/* ---------- Sector grid — 55 INDEPENDENT premium objects, not grid cells ----------
   No shared background/border on the container; each card supplies its own
   radius, border, surface, shadow and lighting. Gap is real space, not a hairline. */
.sector-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:clamp(14px,1.6vw,22px);
  background:transparent; border:0; border-radius:0; overflow:visible;
}
.sector-card{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--surface-card-light);
  border:1px solid var(--border-card-light);
  border-radius:clamp(22px,2.2vw,28px);
  padding:1.5rem 1.35rem 1.25rem;
  min-height:208px;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-card-rest);
  transition:transform var(--duration-card) var(--ease-luxury), box-shadow var(--duration-card) var(--ease-luxury),
             border-color var(--duration-card) var(--ease-luxury);
}
/* thin champagne→ice hairline that only fully appears on hover — the "own lighting" */
.sector-card::before{
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; padding:1px;
  background:linear-gradient(150deg, var(--edge-ice) 0%, transparent 32%, transparent 68%, var(--edge-champagne) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.28; pointer-events:none; transition:opacity var(--duration-ui) var(--ease-luxury);
}
.sector-card:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:var(--shadow-card-hover);
  border-color:var(--border-card-light-hover);
  z-index:2;
}
.sector-card:hover::before{ opacity:.65; }

/* The "stretched link" pattern — one real, fully-transparent anchor
   covering the whole card, so the entire surface is the click/tap/Enter
   target (not just the small arrow) without nesting interactive elements
   inside another interactive element. Absent entirely on booked cards
   (rendered without it) or neutralized in place once a live booking is
   confirmed (see bookings-public.js). */
.sector-card-link{ position:absolute; inset:0; z-index:4; border-radius:inherit; }
.sector-card-link:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(216,168,73,.45), inset 0 0 0 2px rgba(216,168,73,.6); }
.sector-card-link[aria-disabled="true"]{ display:none; }
.sector-card-top{ position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.sector-card .cat{ font-size:.74rem; color:var(--ink-500); font-weight:600; }
html[dir="ltr"] .sector-card .cat{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }

/* environmental number — a design element the card is built around, not a label */
.sector-card .num{
  position:absolute; z-index:1; inset-inline-end:-.15rem; top:.2rem;
  font-family:var(--font-en-display); font-weight:600; font-size:4.6rem; line-height:1;
  color:var(--navy-800); opacity:.075; pointer-events:none; user-select:none;
  transition:opacity var(--duration-ui) var(--ease-luxury), transform var(--duration-ui) var(--ease-luxury), color var(--duration-ui) var(--ease-luxury);
}
.sector-card:hover .num{ opacity:.16; transform:translateY(-2px) scale(1.02); color:var(--blue-600); }

.sector-card h3{ position:relative; z-index:2; font-size:1.06rem; line-height:1.5; margin-top:auto; margin-bottom:.95rem; max-width:90%; }

.sector-card-bottom{
  position:relative; z-index:2; margin-top:auto; padding-top:.85rem;
  border-top:1px solid rgba(112,142,181,.18);
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
.sector-card-node{
  width:7px; height:7px; border-radius:50%; background:var(--gold-400); opacity:0; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(228,188,110,.5);
  transition:opacity var(--duration-ui) var(--ease-luxury), box-shadow var(--duration-ui) var(--ease-luxury);
}
.sector-card:hover .sector-card-node{ opacity:1; box-shadow:0 0 0 6px rgba(228,188,110,.14); }
.sector-card-arrow{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:rgba(24,87,166,.08); color:var(--blue-600);
  transition:transform var(--duration-fast) var(--ease-luxury), background var(--duration-fast) var(--ease-luxury);
}
.sector-card-arrow .icon{ width:15px; height:15px; }
.sector-card:hover .sector-card-arrow{ transform:translateX(5px); background:rgba(24,87,166,.16); }
html[dir="rtl"] .sector-card:hover .sector-card-arrow{ transform:translateX(-5px); }
.sector-card .status-pill{ transition:transform var(--duration-fast) var(--ease-luxury); }
.sector-card:hover .status-pill{ transform:translateX(2px); }
html[dir="rtl"] .sector-card:hover .status-pill{ transform:translateX(-2px); }

/* ---------- Booked card — editorial selection, stronger presence at rest
   (not just on hover) so a booked sector visibly outranks an available one
   in the grid. Warm champagne wash, not a "reserved seat" gray. ---------- */
.sector-card.is-booked{
  background:linear-gradient(172deg, #FFFDF8 0%, #FBF3E1 55%, #F6E9CC 100%);
  border-color:var(--edge-champagne);
  box-shadow:var(--shadow-card-rest), 0 0 0 1px rgba(216,168,73,.12) inset;
}
.sector-card.is-booked::before{ opacity:.55; }
.sector-card.is-booked:hover{ border-color:var(--gold-500); }
.sector-card.is-booked .num{ color:var(--gold-600); opacity:.12; }
.sector-card.is-booked:hover .num{ color:var(--gold-600); opacity:.22; }

/* Arrived here from the 55-number index or a sector-card deep link — a
   brief, quiet ring settle (not a flash) so attention lands on the right
   card without shouting. Removed from the DOM (class + inline tabindex)
   once the animation finishes, via JS's "animationend" listener. */
.sector-card.sector-card-target{ animation:sectorTargetPulse 1.8s var(--ease-luxury) 1; outline:none; }
@keyframes sectorTargetPulse{
  0%{ box-shadow:0 0 0 0 rgba(216,168,73,.4); }
  50%{ box-shadow:0 0 0 6px rgba(216,168,73,.12); }
  100%{ box-shadow:0 0 0 0 rgba(216,168,73,0); }
}

/* ---------- Dark / feature card variant — for grids placed on dark sections.
   Same shell language (radius, motion), different surface + lighting. ---------- */
.sector-card--dark{
  background:var(--surface-card-dark); border-color:var(--border-card-dark);
  box-shadow:var(--shadow-card-dark-rest); color:var(--white);
}
.sector-card--dark::before{ opacity:.22; }
.sector-card--dark:hover{ box-shadow:var(--shadow-card-dark-hover); border-color:var(--border-card-dark-hover); }
.sector-card--dark:hover::before{ opacity:.5; }
.sector-card--dark .num{ color:var(--ice-400); opacity:.10; }
.sector-card--dark:hover .num{ color:var(--gold-400); opacity:.22; }
.sector-card--dark .cat{ color:rgba(255,255,255,.56); }
.sector-card--dark .sector-card-bottom{ border-top-color:rgba(158,196,238,.16); }
.sector-card--dark .sector-card-arrow{ background:rgba(158,196,238,.10); color:var(--ice-400); }
.sector-card--dark:hover .sector-card-arrow{ background:rgba(158,196,238,.18); }

/* ---------- Portrait card (Leaders) and media card (Episodes) — share the
   sector-card shell's radius/border/shadow/motion, distinct internal layout ---------- */
.sector-card--portrait{ align-items:center; text-align:center; padding-top:1.7rem; }
.sector-card--portrait .portrait{
  width:76px; height:76px; border-radius:50%; object-fit:cover; margin-bottom:.9rem;
  border:2px solid var(--gold-500); box-shadow:var(--shadow-1); position:relative; z-index:2;
}
.sector-card--portrait h3{ margin-inline:auto; }
.sector-card--media{ padding:0; overflow:hidden; }
.sector-card--media .media-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.sector-card--media .media-thumb .num{
  position:absolute; bottom:.4rem; inset-inline-start:.7rem; top:auto; inset-inline-end:auto;
  font-size:2.6rem; color:var(--white); opacity:.85; text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.sector-card--media .media-body{ padding:1.1rem 1.25rem 1.3rem; display:flex; flex-direction:column; flex:1; }

.status-pill{
  margin-top:auto; align-self:flex-start; font-size:.72rem; padding:.32rem .8rem .32rem .6rem; border-radius:var(--radius-full);
  background:var(--paper); color:var(--ink-700); border:1px solid var(--line);
  display:inline-flex; align-items:center; gap:.4em;
}
.status-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ink-500); flex:0 0 auto; }
.status-pill.confirmed{ background:#DDEBE1; color:#245C3A; border-color:#BFDBC9; }
.status-pill.confirmed::before{ background:#2E8B57; }
.status-pill.filming{ background:#FBEAD2; color:#8A5A16; border-color:#F1D3A0; }
.status-pill.filming::before{ background:var(--gold-600); }
.status-pill.ready{ background:#E4EAF7; color:#23407A; border-color:#C9D6F0; }
.status-pill.ready::before{ background:var(--blue-600); }
.status-pill.published{ background:var(--navy-900); color:var(--gold-400); border-color:var(--navy-900); }
.status-pill.published::before{ background:var(--gold-400); }
/* "Booked" via the admin portal — a distinct, prestigious gold treatment
   (not the airline-seat-style flat gray a plain "reserved" pill would read
   as), consistent with the confirmed/filming/ready/published tiers above. */
.status-pill.booked{ background:linear-gradient(155deg, var(--gold-200), var(--gold-400)); color:#4A3410; border-color:var(--gold-400); font-weight:600; }
.status-pill.booked::before{ background:#4A3410; }
.empty-note{ padding:var(--sp-4); text-align:center; color:var(--ink-500); grid-column:1/-1; }

/* ---------- Sector card assignee row — populated client-side from an admin
   booking (see js/bookings-public.js). Hidden until real data lands, so an
   available sector never implies emptiness. ---------- */
.sector-card-assignee{
  position:relative; z-index:2; display:flex; align-items:center; gap:.55rem;
  margin-top:-.5rem; margin-bottom:.85rem; padding-top:.7rem; border-top:1px dashed rgba(112,142,181,.24);
}
.sector-card-assignee .assignee-logo{ width:28px; height:28px; border-radius:50%; object-fit:contain; background:var(--white); border:1px solid var(--line); flex:none; }
.sector-card-assignee .assignee-name{ font-size:.86rem; font-weight:600; color:var(--ink-900); }
.sector-card-assignee .assignee-company{ font-size:.76rem; color:var(--ink-500); }

/* ==========================================================================
   BOOKED-LEADERS MARQUEE — populated client-side only when the admin has
   published at least one "show in hero" booking; stays `hidden` otherwise.
   ========================================================================== */
.marquee-section{ position:relative; padding-block:var(--sp-5) var(--sp-4); overflow:hidden; }
/* A fine gradient seam (with a small illuminated node at center) instead of a
   hard cut, since this section shares the hero's dark tone deliberately —
   they read as one continuous cinematic opening, not two stacked boxes. */
.marquee-section::before{
  content:""; position:absolute; top:0; inset-inline:8%; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(216,168,73,.5) 50%, transparent);
}
.marquee-section::after{
  content:""; position:absolute; top:-1px; inset-inline-start:50%; transform:translateX(-50%); z-index:1;
  width:6px; height:6px; border-radius:50%; background:var(--gold-400); box-shadow:0 0 0 5px rgba(216,168,73,.16), 0 0 16px rgba(216,168,73,.5);
}
.marquee-section .eyebrow{ text-align:center; display:block; }
.marquee-title{ text-align:center; color:var(--white); font-size:clamp(1.3rem,2.6vw,1.9rem); margin-top:.5rem; }
.marquee-viewport{ margin-top:var(--sp-4); overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track{ display:flex; width:max-content; }
.marquee-set{ display:flex; gap:var(--sp-4); padding-inline:var(--sp-3); animation:marqueeScroll 34s linear infinite; }
html[dir="rtl"] .marquee-set{ animation-direction:reverse; }
.marquee-section:hover .marquee-set, .marquee-section:focus-within .marquee-set{ animation-play-state:paused; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }
html[dir="rtl"] .marquee-set{ animation-name:marqueeScrollRtl; }
@keyframes marqueeScrollRtl{ from{ transform:translateX(0); } to{ transform:translateX(100%); } }
.marquee-item{
  flex:none; display:flex; align-items:center; gap:.65rem; padding:.75rem 1.2rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-full);
}
.marquee-item img{ width:40px; height:40px; border-radius:50%; object-fit:contain; background:var(--white); flex:none; }
.marquee-logo-fallback{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;
  background:linear-gradient(155deg,var(--gold-400),var(--gold-600)); color:var(--navy-950); font-weight:700; font-family:var(--font-en-display);
}
.marquee-name{ color:var(--white); font-weight:600; font-size:.92rem; white-space:nowrap; }
.marquee-sub{ color:rgba(255,255,255,.5); font-size:.8rem; white-space:nowrap; }
@media (prefers-reduced-motion: reduce){
  .marquee-set{ animation:none; }
  .marquee-viewport{ overflow-x:auto; }
}

/* ---------- Filter bar / search ---------- */
.filter-bar{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:var(--sp-4); }
.search-field{ position:relative; display:flex; align-items:center; max-width:440px; width:100%; }
.search-field .search-icon{ position:absolute; inset-inline-start:1.15rem; pointer-events:none; color:var(--ink-500); width:19px; height:19px; }
.search-field input[type="search"]{
  padding-inline-start:3rem; width:100%; height:52px; font-size:.98rem;
  border-color:var(--border-card-light); background:var(--white);
  box-shadow:0 1px 2px rgba(9,20,42,.04);
}
.search-field input[type="search"]:focus{ border-color:var(--gold-500); box-shadow:var(--ring-focus); }
.search-field input[type="search"]::placeholder{ color:var(--ink-500); opacity:.8; }
html[dir="rtl"] .search-field .search-icon{ inset-inline-start:auto; inset-inline-end:1.15rem; }
html[dir="rtl"] .search-field input[type="search"]{ padding-inline-start:1.1rem; padding-inline-end:3rem; }

/* A single-row scrollable "chip rail" instead of a multi-row wrapped block —
   19 categories otherwise crowd into 3–4 cramped rows on a phone. Snap +
   edge-fade mask, native scroll (keyboard/focus behavior stays default). */
.chip-rail{
  display:flex; gap:.55rem; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scroll-padding-inline:2px; overscroll-behavior-inline:contain;
  padding-block:.15rem .6rem; margin-block:-0.15rem -0.6rem;
  scrollbar-width:none; -ms-overflow-style:none;
}
/* The edge fade only appears once there's actually more to scroll to on
   that side — otherwise the very first/last chip reads as visually
   "cut off" even though it's fully in view and at rest. */
.chip-rail.has-overflow-start{ -webkit-mask-image:linear-gradient(to left, transparent, #000 24px); mask-image:linear-gradient(to left, transparent, #000 24px); }
.chip-rail.has-overflow-end{ -webkit-mask-image:linear-gradient(to right, transparent, #000 24px); mask-image:linear-gradient(to right, transparent, #000 24px); }
.chip-rail.has-overflow-start.has-overflow-end{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.chip-rail::-webkit-scrollbar{ display:none; }
.chip-btn{
  flex:none; scroll-snap-align:start; white-space:nowrap;
  padding:.58rem 1.2rem; border:1px solid var(--line); background:var(--white); border-radius:var(--radius-full);
  font-size:.86rem; font-weight:600; cursor:pointer; color:var(--ink-700);
  transition:background var(--duration-fast) var(--ease-luxury), color var(--duration-fast) var(--ease-luxury),
             border-color var(--duration-fast) var(--ease-luxury), transform var(--duration-fast) var(--ease-luxury), box-shadow var(--duration-fast) var(--ease-luxury);
}
.chip-btn.active, .chip-btn:hover{ background:var(--navy-900); color:var(--white); border-color:var(--navy-900); transform:translateY(-1px); }
.chip-btn.active{ box-shadow:0 8px 20px -8px rgba(13,40,84,.45); }

/* ---------- Feature / featured-story panel ---------- */
.feature-panel{
  position:relative; padding:var(--sp-5) var(--sp-4); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-l);
  display:flex; flex-direction:column; gap:.6rem; align-items:flex-start;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.feature-panel h3{ color:var(--white); font-size:1.6rem; }
.feature-empty{ align-items:center; text-align:center; border-style:dashed; }
.feature-num{ font-family:var(--font-en-display); font-size:4rem; line-height:1;
  background:linear-gradient(180deg,var(--gold-400),rgba(217,170,85,.15)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Section-to-section continuity ----------
   A soft light bleed at the top of a bright section immediately following a
   dark one, so the boundary reads as a continuous scene rather than a hard
   dark-box/white-box cut. Purely additive — no markup changes required. */
.section-dark + .section{ position:relative; }
.section-dark + .section::before{
  content:""; position:absolute; top:0; inset-inline:0; height:160px; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(46,111,194,.05), transparent);
}
/* Reverse case — a light section immediately before a dark one: the dark
   section picks up a royal-blue glow at its own top edge, like the light
   source carrying over ("film lighting between scenes", brief §25). */
.section + .section-dark{ position:relative; }
.section + .section-dark::before{
  content:""; position:absolute; top:0; inset-inline:0; height:180px; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(46,111,194,.16), transparent);
}

/* ---------- Desktop-only subtle pointer highlight (cards) ----------
   Guarded to fine-pointer/hover-capable devices and off under reduced motion;
   main.js sets --mx/--my as the pointer moves over a card. Tuned quieter and
   cooler (ice-blue) than earlier — felt as depth, not consciously noticed. */
@media (hover:hover) and (pointer:fine){
  .glow-pointer{ position:relative; }
  .glow-pointer::before{
    content:""; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(46,111,194,.09), transparent 68%);
    transition:opacity var(--duration-fast) var(--ease-luxury);
  }
  .glow-pointer:hover::before{ opacity:1; }
  .sector-card--dark.glow-pointer::before{
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(158,196,238,.10), transparent 68%);
  }
}

/* ---------- Production tags ---------- */
.prod-tags{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:var(--sp-3); }
.prod-tag{
  padding:.6rem 1.2rem; border:1px solid rgba(216,168,73,.4); color:var(--gold-400);
  font-size:.8rem; font-weight:500; border-radius:var(--radius-full);
  transition:all var(--motion-fast) var(--ease); background:rgba(217,170,85,.04);
}
html[dir="ltr"] .prod-tag{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.prod-tag:hover{ background:rgba(217,170,85,.14); box-shadow:var(--glow-gold); transform:translateY(-2px); }

/* ---------- Format timeline ---------- */
.format-track{ display:flex; gap:0; overflow-x:auto; padding-bottom:var(--sp-2); scrollbar-width:thin; }
.format-step{ flex:0 0 220px; padding:var(--sp-3); border-inline-start:2px solid var(--gold-500); transition:border-color var(--motion-fast) var(--ease); }
.format-step:hover{ border-inline-start-color:var(--gold-600); }
.format-step .num{ font-family:var(--font-en-display); color:var(--gold-600); font-size:1.4rem; }
@media (max-width:760px){ .format-track{ flex-direction:column; } .format-step{ flex:none; padding-inline-start:var(--sp-3);} }

/* ---------- Coming soon / empty states ---------- */
.coming-soon{
  text-align:center; padding:var(--sp-7) var(--sp-3); border:1px dashed var(--line); border-radius:var(--radius-l); margin-top:var(--sp-4);
  background:linear-gradient(175deg, rgba(196,146,46,.03), transparent);
}
.coming-soon h3{ font-size:1.4rem; margin-bottom:.6rem; }
.coming-soon p{ color:var(--ink-500); max-width:520px; margin-inline:auto; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.form-grid .full{ grid-column:1/-1; }
label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.45rem; color:var(--ink-700); }
input,select,textarea{
  width:100%; padding:.85rem 1rem; border:1px solid var(--line); background:var(--white);
  font:inherit; border-radius:var(--radius-s); color:var(--ink-900);
  transition:border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
input::placeholder, textarea::placeholder{ color:var(--ink-500); opacity:.75; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--gold-500); box-shadow:var(--ring-focus); }
textarea{ min-height:120px; resize:vertical; }
.form-note{ font-size:.82rem; color:var(--ink-500); margin-top:var(--sp-3); }

/* ---------- Sector-selected confirmation (arriving from a sector card) ---------- */
.selected-sector-note{
  display:flex; align-items:center; gap:.5rem; margin-top:.6rem; padding:.55rem .9rem;
  border-radius:var(--radius-s); font-size:.85rem; font-weight:600; color:var(--navy-800);
  background:linear-gradient(155deg, rgba(216,168,73,.14), rgba(24,87,166,.08));
  border:1px solid rgba(216,168,73,.35);
  opacity:0; transform:translateY(-4px);
  animation:selectedNoteIn var(--duration-section) var(--ease-luxury) forwards;
}
.selected-sector-note::before{ content:"✓"; color:var(--gold-600); font-weight:700; }
@keyframes selectedNoteIn{ to{ opacity:1; transform:translateY(0); } }
/* A single, restrained pulse on the field that received the prefilled
   value — not a flash, a single slow settle. */
#f-sector-field.field-highlight{ animation:fieldPulse 1.4s var(--ease-luxury) 1; border-radius:var(--radius-s); }
@keyframes fieldPulse{
  0%{ box-shadow:0 0 0 0 rgba(216,168,73,.35); }
  60%{ box-shadow:0 0 0 8px rgba(216,168,73,0); }
  100%{ box-shadow:0 0 0 0 rgba(216,168,73,0); }
}
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }

/* ---------- Leader hero / detail ---------- */
.leader-hero img{ box-shadow:var(--shadow-3), 0 0 0 1px rgba(217,170,85,.3); }

/* ---------- Video embed (lazy-loaded YouTube) ---------- */
.video-embed{ position:relative; aspect-ratio:16/9; background:var(--navy-950); overflow:hidden; cursor:pointer; border-radius:var(--radius-l); }
.video-poster{ width:100%; height:100%; object-fit:cover; opacity:.7; transition:opacity var(--motion-med) var(--ease); }
.video-embed:hover .video-poster{ opacity:.85; }
.video-play{
  position:absolute; inset:0; margin:auto; width:78px; height:78px; border-radius:50%;
  background:linear-gradient(155deg,var(--gold-400),var(--gold-600)); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--glow-gold-lg); transition:transform var(--motion-fast) var(--ease);
}
.video-embed:hover .video-play{ transform:scale(1.08); }
.video-embed iframe{ width:100%; height:100%; border:0; position:absolute; inset:0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* Premium inset "shell" footer — a rounded dark panel that floats with a
   visible ivory margin around it (the page's own background), rather than
   a flush full-bleed rectangle. Quality reference: the rounded, bordered,
   generously-spaced dark footer shells common to premium SaaS/editorial
   sites — reproduced with this project's own tokens/content, not copied. */
/* Full-bleed dark footer background — the background reaches both
   viewport edges with zero ivory gutter beside it; only the CONTENT
   inside (.footer-wrap) is width-constrained, the same
   background-full-bleed/content-contained pattern used nowhere else on
   the site because nothing else needs it — every other dark section is
   already naturally full-width. A rounded floating "shell" was tried in
   an earlier pass and rejected on real-device review: it produced
   visible ivory strips beside the footer, which reads as broken, not
   premium. */
.site-footer{
  position:relative; overflow:hidden; width:100%;
  border-top:1px solid rgba(216,168,73,.16);
  background:
    radial-gradient(46% 42% at 50% -4%, rgba(158,196,238,.12), transparent 64%),
    radial-gradient(55% 60% at 88% -10%, rgba(216,168,73,.11), transparent 60%),
    radial-gradient(45% 50% at 6% 110%, rgba(46,111,194,.20), transparent 60%),
    linear-gradient(175deg, var(--navy-900) 0%, var(--navy-950) 55%, #03060D 100%);
  color:rgba(255,255,255,.82); padding-block:var(--sp-6) var(--sp-4);
}
.footer-wrap{ max-width:1440px; }
/* Very slow, very quiet Summit Network line drifting across the top edge —
   a signature detail, not decoration you're meant to consciously notice.
   The global prefers-reduced-motion rule already collapses this to a
   static frame, so no separate override is needed. */
.site-footer::after{
  content:""; position:absolute; top:0; inset-inline:-10%; height:1px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(216,168,73,.4) 30%, rgba(158,196,238,.35) 55%, transparent 80%);
  animation:footerLineDrift 26s ease-in-out infinite;
}
@keyframes footerLineDrift{ 0%,100%{ transform:translateX(-4%); } 50%{ transform:translateX(4%); } }
.footer-bignum{
  position:absolute; bottom:-6vw; inset-inline-end:-1vw; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--font-en-display); font-weight:600; font-size:min(26vw,340px); line-height:1;
  background:linear-gradient(0deg, rgba(228,188,110,.1), rgba(228,188,110,.02));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[dir="rtl"] .footer-bignum{ inset-inline-start:-1vw; inset-inline-end:auto; }
.site-footer .wrap{ position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-4); }
@media (max-width:860px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--sp-4) var(--sp-3); }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
}
.footer-grid h4{ color:var(--white); font-size:.95rem; font-weight:700; margin-bottom:var(--sp-3); font-family:var(--font-display); }
html[dir="ltr"] .footer-grid h4{ font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; font-family:var(--font-en-body); }
.footer-grid a{ display:block; padding-block:.4rem; color:rgba(255,255,255,.78); font-size:1rem; transition:color var(--duration-fast) var(--ease-luxury); }
.footer-grid a:hover{ color:var(--gold-400); }
.footer-contact-link{ display:flex !important; align-items:center; }
.footer-bottom{ margin-top:var(--sp-5); padding-top:var(--sp-3); border-top:1px solid rgba(187,216,245,.14); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2); font-size:.85rem; color:rgba(255,255,255,.62); }
.footer-bottom a{ color:rgba(255,255,255,.85); }
.footer-bottom a:hover{ color:var(--gold-400); }

.social-row{ display:flex; gap:.6rem; margin-top:var(--sp-2); flex-wrap:wrap; }
/* .footer-grid a wins the specificity fight against a plain .social-chip
   rule on ANY property they both set — this bit twice: first on `color`
   (icon rendered white instead of gold), then on `display` (a's own
   display:block silently beat this rule's display:flex, so
   align-items/justify-content became no-ops and the icon fell back to
   RTL inline flow, landing hard against the right edge instead of
   centered — the "icon pushed to one side" report). Both the layout
   properties and the color are !important here so nothing this specific
   can silently out-rank it again, matching the same pattern already used
   for .footer-contact-link below for the identical reason. */
.social-chip{
  width:46px !important; height:46px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border:1px solid rgba(216,168,73,.35); background:rgba(216,168,73,.07); border-radius:var(--radius-full);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06); color:var(--gold-600) !important;
  transition:all var(--duration-fast) var(--ease-luxury);
}
.social-chip .icon{ width:20px; height:20px; flex:none; }
.social-chip:hover{ background:linear-gradient(155deg,var(--gold-400),var(--gold-600)); color:var(--navy-950); border-color:var(--gold-400); transform:translateY(-2px); box-shadow:var(--glow-gold); }
.social-chip-light{ border-color:var(--line); color:var(--ink-700); }
.social-chip-light:hover{ box-shadow:var(--glow-gold); }
/* Footer "follow" column — a compact two-column grid instead of one long
   vertical stack of 9 rows. */
.footer-social-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.3rem 1rem; }
.social-link{ display:flex !important; align-items:center; gap:.65em; min-height:44px; color:var(--warm-white) !important; font-size:.92rem; }
.social-link .social-icon{
  flex:none; width:36px; height:36px; padding:8px; box-sizing:border-box;
  border-radius:var(--radius-full); border:1px solid rgba(216,168,73,.35); background:rgba(216,168,73,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--gold-600); transition:all var(--duration-fast) var(--ease-luxury);
}
.social-link:hover .social-icon{ background:linear-gradient(155deg,var(--gold-400),var(--gold-600)); color:var(--navy-950); border-color:var(--gold-400); }
@media (max-width:520px){ .footer-social-grid{ grid-template-columns:1fr 1fr; gap:.2rem .6rem; } }

/* ---------- WhatsApp float ---------- */
/* Respects the phone's safe area (home-indicator strip) and stays a compact
   icon-only pill on narrow screens so it never covers footer links, sector
   cards, or browser chrome — it expands to show the label on hover/focus,
   which only fires with a real pointer (never sticks "open" on touch). */
.wa-float{
  position:fixed;
  bottom:calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  inset-inline-end:calc(var(--sp-3) + env(safe-area-inset-right, 0px));
  z-index:90;
  /* Root cause of the icon-misalignment bug: this control sits on Kurdish/
     Arabic pages under <html dir="rtl">, which this element inherited with
     no override. A flex row with no explicit direction reverses its visual
     axis under RTL, and the (invisible-but-still-laid-out) "WhatsApp" label
     span combined with that reversed axis pushed the icon off-center. Fixed
     by pinning this control's own internal direction to ltr — "WhatsApp" is
     a Latin brand name and should read the same way regardless of the
     page's language — instead of the fragile margin-inline:auto centering
     hack that depended on axis direction to work. */
  direction:ltr;
  /* No `gap` here at rest — flex `gap` reserves space between EVERY pair
     of in-flow siblings, even when one of them is width:0 (the hidden
     label). That phantom gap was still being centered alongside the icon,
     which is what pushed the icon off-true-center even after the label's
     own width was zeroed out. Gap is added back only in the hover/focus
     state below, once the label actually has real width to separate from. */
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg,#1CA355,#0B7A3C); color:var(--white);
  width:52px; height:52px; padding:0; border-radius:var(--radius-full); overflow:hidden;
  border:1px solid rgba(251,248,242,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 20px 40px -16px rgba(5,10,20,.55); font-size:.85rem; font-weight:600; white-space:nowrap;
  transition:transform var(--motion-fast) var(--ease), box-shadow var(--motion-med) var(--ease), width var(--duration-ui) var(--ease-luxury), padding var(--duration-ui) var(--ease-luxury),
             opacity var(--duration-ui) var(--ease-luxury);
  animation:waPulseRing 2.8s var(--ease-luxury) infinite, waBreathe 2.8s var(--ease-luxury) infinite;
}
/* A soft, continuous "sonar" ring (via an expanding box-shadow rather than
   a scaled pseudo-element, so it isn't clipped by the button's own
   overflow:hidden, which is still needed to hide the label at rest) so
   the control reads as alive/inviting even before anyone hovers it —
   tuned slow and low-amplitude to stay premium rather than gimmicky. */
@keyframes waPulseRing{
  0%{ box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 20px 40px -16px rgba(5,10,20,.55), 0 0 0 0 rgba(28,163,85,.45); }
  70%{ box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 20px 40px -16px rgba(5,10,20,.55), 0 0 0 14px rgba(28,163,85,0); }
  100%{ box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 20px 40px -16px rgba(5,10,20,.55), 0 0 0 0 rgba(28,163,85,0); }
}
@keyframes waBreathe{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-2px) scale(1.05); } }
/* Yields once the footer's own contact links are on screen, so it never
   sits on top of them; restores as soon as the footer scrolls away. */
.wa-float.wa-float-yield{ opacity:0; transform:translateY(8px) scale(.92); pointer-events:none; animation:none; }
.wa-float .wa-icon{ flex:none; }
/* width:0 (not just opacity:0) so the invisible label takes no space in
   the flex layout at rest — otherwise centering the flex line still
   centers icon+gap+label as a group, and the 52px circle then shows an
   off-center slice of that wider, mostly-hidden group instead of the
   icon alone. This was the actual root cause of the icon appearing
   pushed to one side. */
.wa-float span{ opacity:0; width:0; overflow:hidden; transition:opacity var(--duration-fast) var(--ease-luxury); }
@media (hover:hover) and (pointer:fine){
  .wa-float:hover, .wa-float:focus-visible{
    width:auto; gap:.6rem; justify-content:flex-start; padding:.85rem 1.2rem; box-shadow:0 24px 50px -14px rgba(15,142,69,.55); transform:translateY(-3px) scale(1);
    animation-play-state:paused;
  }
  .wa-float:hover span, .wa-float:focus-visible span{ opacity:1; width:auto; }
}
@media (max-width:720px){
  /* Compact on mobile always — never grows into a wide bar that can eclipse
     content beneath it — and sits closer to the corner. */
  .wa-float{ width:48px; height:48px; bottom:calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); inset-inline-end:var(--sp-2); }
}

/* ---------- Mobile menu ---------- */
/* A true animated open/close: the panel is always in the flex layout, and
   visibility/opacity/transform carry the transition instead of a hard
   display:none ↔ flex swap, which cannot itself be animated. */
.mobile-menu{
  position:fixed; inset:0; background:linear-gradient(175deg, var(--navy-950), var(--navy-900)); z-index:200;
  display:flex; flex-direction:column; padding:var(--sp-4);
  visibility:hidden; opacity:0; pointer-events:none;
  transform:translateY(-14px) scale(.99);
  transition:opacity var(--duration-menu) var(--ease-out-expo), transform var(--duration-menu) var(--ease-out-expo),
             visibility 0s linear var(--duration-menu);
  overflow:hidden;
}
.mobile-menu::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:radial-gradient(60% 45% at 85% 12%, rgba(216,168,73,.16), transparent 65%),
             radial-gradient(50% 40% at 10% 90%, rgba(46,111,194,.2), transparent 65%);
}
.mobile-menu.open{
  visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0) scale(1);
  transition:opacity var(--duration-menu) var(--ease-out-expo), transform var(--duration-menu) var(--ease-out-expo), visibility 0s linear 0s;
}
.mobile-menu > *{ position:relative; z-index:1; }
html.menu-open{ overflow:hidden; }
.mobile-menu ul{ display:flex; flex-direction:column; gap:1.3rem; margin-top:var(--sp-5); }
.mobile-menu li{ opacity:0; transform:translateY(14px); }
.mobile-menu.open li{ animation:menuItemIn var(--duration-ui) var(--ease-out-expo) forwards; }
.mobile-menu.open li:nth-child(1){ animation-delay:.08s; } .mobile-menu.open li:nth-child(2){ animation-delay:.13s; }
.mobile-menu.open li:nth-child(3){ animation-delay:.18s; } .mobile-menu.open li:nth-child(4){ animation-delay:.23s; }
.mobile-menu.open li:nth-child(5){ animation-delay:.28s; } .mobile-menu.open li:nth-child(6){ animation-delay:.33s; }
.mobile-menu.open li:nth-child(7){ animation-delay:.38s; } .mobile-menu.open li:nth-child(8){ animation-delay:.43s; }
.mobile-menu.open li:nth-child(9){ animation-delay:.48s; }
@keyframes menuItemIn{ to{ opacity:1; transform:translateY(0); } }
.mobile-menu a{ color:var(--white); font-size:1.35rem; font-family:var(--font-display); transition:color var(--duration-fast) var(--ease-luxury); }
.mobile-menu a:hover, .mobile-menu a:active{ color:var(--gold-400); }
.mobile-menu .close-btn{
  align-self:flex-end; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:var(--white);
  border-radius:var(--radius-full); width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background var(--duration-fast) var(--ease-luxury);
}
.mobile-menu .close-btn:hover{ background:rgba(255,255,255,.16); }

/* ---------- Utility ---------- */
.mt-1{margin-top:var(--sp-1);} .mt-2{margin-top:var(--sp-2);} .mt-3{margin-top:var(--sp-3);} .mt-4{margin-top:var(--sp-4);} .mt-5{margin-top:var(--sp-5);}
.text-gold{ color:var(--gold-500); }
.container-page{ padding-top:calc(var(--sp-7) + var(--sp-2)); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

@media (max-width:720px){
  .hero-bignum{ font-size:60vw; top:2vw; opacity:.7; }
}