/* ==========================================================================
   HUJJAJ TRAVEL & TOURS — EDITORIAL HOMEPAGE
   Eight movements. No cards. No grids of N. Hairlines, not boxes.
   Self-contained: inherits nothing from the legacy stylesheet stack.
   ========================================================================== */

:root {
  --kiswah:    #070603;      /* the cloth */
  --ink:       #14110A;
  --gold:      #C8A43F;
  --gold-2:    #E8C97A;
  --bronze:    #9E7C2A;
  --ivory:     #F8F4E6;
  --paper:     #F4F5F3;      /* the cool ground of the 30% */
  --text:      #2A241A;
  --text-soft: #5C5344;
  --text-faint:#938974;

  --display: 'EB Garamond', Georgia, serif;
  --body:    'Sora', system-ui, sans-serif;
  --arabic:  'Aref Ruqaa', 'Amiri', serif;

  --measure: 1180px;
  --movement: clamp(6rem, 14vw, 13rem);   /* the page breathes in chapters */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  font-family: var(--body); font-weight: 400;
  font-size: 1.0625rem; line-height: 1.75;
  color: var(--text); background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: #fff; }

h1, h2, h3 {
  font-family: var(--display); font-weight: 600;
  line-height: 1.09; letter-spacing: -.012em; color: var(--ink);   /* sturdier hairlines than 96 = timeless, not fragile */
  text-wrap: balance;
}
em { font-style: italic; font-weight: 400; }

.wrap { width: min(var(--measure), 88%); margin-inline: auto; }
.movement { padding-block: var(--movement); position: relative; }

/* Reveal — one gesture, used everywhere, then forgotten */
.r { opacity: 0; transform: translateY(18px); transition: opacity 1.1s cubic-bezier(.2,.8,.25,1), transform 1.1s cubic-bezier(.2,.8,.25,1); transition-delay: var(--d, 0s); }
.r.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .r { opacity: 1; transform: none; transition: none; } }

/* The single action. One label, one intent. */
.act {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--body); font-weight: 500;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 1.15rem 2.4rem; border-radius: 2px;
  background: linear-gradient(180deg, #D2AE48, #C8A43F 60%, #B7942F);
  color: #14110A; border: 1px solid transparent;
  transition: transform .4s, box-shadow .4s;
}
.act:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -18px rgba(158,124,42,.75); }
.act svg { width: 18px; height: 18px; flex: 0 0 auto; }
.act.ghost { background: none; color: var(--ivory); border-color: rgba(255,255,255,.4); }
.act.ghost:hover { background: rgba(255,255,255,.07); border-color: var(--gold-2); box-shadow: none; }
.quiet {
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bronze); border-bottom: 1px solid rgba(158,124,42,.4);
  padding-bottom: .3rem; transition: color .3s, border-color .3s;
}
.quiet:hover { color: var(--ink); border-color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* ==========================================================================
   NAV — 64px, one line, disappears into the page
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 68px;
  display: flex; align-items: center;
  transition: background .5s, border-color .5s;
  border-bottom: 1px solid transparent;
}
.nav.solid { background: rgba(248,244,230,.92); backdrop-filter: blur(14px); border-bottom-color: rgba(158,124,42,.2); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand b { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.005em; display: block; line-height: 1.15; }
.brand span { font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text-faint); }
.nav.on-dark .brand b { color: var(--ivory); }
.nav.on-dark .brand span { color: rgba(234,216,166,.66); }
.nav.on-dark .nav-links a { color: rgba(248,244,230,.86); }
.nav-links { display: flex; gap: 2.2rem; }
.nav-links a {
  font-size: .7rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-soft); transition: color .3s;
}
.nav-links a:hover { color: var(--bronze); }
.burger { display: none; background: none; border: 0; width: 34px; height: 34px; cursor: pointer; }
.burger span { display: block; height: 1px; background: currentColor; margin: 7px 0; transition: transform .4s; }
.nav.on-dark .burger { color: var(--ivory); }

.drawer {
  position: fixed; inset: 0; z-index: 70; background: var(--kiswah);
  display: grid; place-content: center; gap: 1.6rem; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .5s;
}
.drawer.open { opacity: 1; pointer-events: auto; }
.drawer a { font-family: var(--display); font-size: 1.9rem; color: var(--ivory); }
.drawer .close { position: absolute; top: 1.4rem; right: 1.6rem; background: none; border: 0; color: var(--ivory); font-size: 1.6rem; cursor: pointer; }

/* ==========================================================================
   I · THRESHOLD
   ========================================================================== */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-media video { position: absolute; inset: 0; opacity: 0; transition: opacity 2s; }
.hero-media video.ready { opacity: 1; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,6,3,.62) 0%, rgba(7,6,3,.28) 34%, rgba(7,6,3,.86) 88%);
}
.hero .wrap { padding-bottom: clamp(4rem, 9vh, 7rem); }
.hero .ayah {
  font-family: var(--arabic); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.8;
  color: var(--gold-2); margin-bottom: .4rem; padding-bottom: .1em;
  /* the script renders right-to-left, but the block sits in the type column:
     an RTL block left to itself aligns right and floats away from the headline */
  text-align: left;
}
.hero h1 {
  color: var(--ivory); font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 600;   /* confident, not shouting */
  line-height: 1.08; letter-spacing: -.024em;
  max-width: 17ch; margin-bottom: clamp(2rem, 3vw, 2.6rem);
}

/* ==========================================================================
   II · THE INSTITUTION — the Kiswah, discovered through light
   ========================================================================== */
.institution {
  background: var(--kiswah); color: var(--ivory);
  text-align: center; overflow: hidden; isolation: isolate;
}
.cloth {
  position: absolute; inset: 0; z-index: -1;
  background: url('../img/kiswah-cloth.jpg') center / cover no-repeat;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 62% 68% at 50% 46%, #000, rgba(0,0,0,.7) 42%, transparent 78%);
          mask-image: radial-gradient(ellipse 62% 68% at 50% 46%, #000, rgba(0,0,0,.7) 42%, transparent 78%);
}
.institution .year {
  font-family: var(--display); font-weight: 700;
  font-size: min(40vw, 34rem); line-height: .8; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(200,164,63,.22);
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  z-index: -1; pointer-events: none; user-select: none;
}
.institution h2 { color: var(--ivory); font-size: clamp(2rem, 4.6vw, 3.5rem); letter-spacing: -.006em; line-height: 1.12; max-width: 18ch; margin-inline: auto; }
.institution h2 em { color: var(--gold-2); }
.institution p { color: rgba(234,216,166,.76); max-width: 52ch; margin: 1.7rem auto 0; }
.figures {
  display: flex; justify-content: center; gap: clamp(2.4rem, 8vw, 6.5rem);
  margin-top: clamp(3.4rem, 6vw, 5rem);
}
.figures div { text-align: center; }
.figures b {
  font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 3.4vw, 2.9rem);
  color: var(--gold-2); line-height: 1; letter-spacing: -.02em; display: block;
}
.figures span { font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(234,216,166,.58); margin-top: .8rem; display: block; }
.licence {
  margin-top: clamp(3rem, 5vw, 4.2rem); padding-top: 2rem;
  border-top: 1px solid rgba(200,164,63,.24);
  font-size: .86rem; color: rgba(234,216,166,.6); max-width: 52ch; margin-inline: auto;
}

/* --- Craft upgrades: the Institution as a Kiswah "sitara" panel ------------- */
/* A fine gold-thread frame turns the section into a crafted exhibit. It sits in
   the padding, so it never crosses the type. */
.institution::before {
  content: ''; position: absolute; inset: clamp(1.4rem, 3vw, 2.6rem);
  border: 1px solid rgba(200,164,63,.22); z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(200,164,63,.08);
}
/* A single 8-point star resting on the top thread — the jewel of the panel */
.institution::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(clamp(1.4rem, 3vw, 2.6rem) - 9px); width: 18px; height: 18px; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='%23C8A43F' d='M9 0 L10.6 5.5 L16 3.4 L12.5 8 L18 9 L12.5 10 L16 14.6 L10.6 12.5 L9 18 L7.4 12.5 L2 14.6 L5.5 10 L0 9 L5.5 8 L2 3.4 L7.4 5.5 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(200,164,63,.4));
}

/* The giant 1975 catches candlelight — a very slow breath, once the eye settles */
.institution .year { animation: yearGlow 9s ease-in-out infinite; }
@keyframes yearGlow {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(200,164,63,.04)); }
  50%      { filter: drop-shadow(0 0 46px rgba(232,201,122,.15)); }
}

/* Figures read as inscriptions on a plaque: a fine divider between the pair */
.figures > div { position: relative; }
.figures > div + div::before {
  content: ''; position: absolute; top: 8%; bottom: 24%;
  left: calc(-1 * clamp(1.2rem, 4vw, 3.25rem)); width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200,164,63,.5), transparent);
}

/* "Guests of Allah" — real gold that catches light, a slow luxurious shimmer */
.institution h2 em {
  background: linear-gradient(100deg, #9E7C2A 0%, #E8C97A 38%, #FBF0D0 50%, #E8C97A 62%, #9E7C2A 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: goldShimmer 6.5s ease-in-out infinite;
}
@keyframes goldShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Figures grow into a real anchor; the count-up lands on scroll (JS) */
.figures b { font-size: clamp(2.3rem, 4vw, 3.4rem); }
.figures { margin-top: clamp(3rem, 5.5vw, 4.4rem); }

/* Credentials as small gold seals — a museum vitrine instead of a sentence.
   Each mark is ready to hold an official accreditation logo (swap the svg for
   <img src="assets/img/cred-*.png">). */
.creds {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
  margin-top: clamp(2.8rem, 5vw, 4rem);
}
/* White accreditation badges — official logos read cleanly, and white marks on
   the dark Kiswah band signal "certified" the way a museum lists its patrons. */
.cred {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 1rem 1.15rem .75rem; border-radius: 14px;
  background: #FBFAF6; border: 1px solid rgba(200,164,63,.28);
  box-shadow: 0 16px 34px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s;
}
.cred:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -20px rgba(0,0,0,.75); }
.cred-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; height: 40px; }
.cred-mark img { height: 40px; width: auto; max-width: 96px; object-fit: contain; display: block; }
.cred > span:last-child {
  font-family: var(--body); font-weight: 400;
  font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; color: #6B6151;
}
.cred-note {
  margin-top: 1.5rem; font-family: var(--display); font-style: italic;
  font-size: .96rem; color: rgba(234,216,166,.6); max-width: 46ch; margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .institution .year, .institution h2 em { animation: none; }
  .institution h2 em { background-position: 0 50%; }
}

/* ==========================================================================
   III · THE JOURNEYS — three, editorial, no cards
   ========================================================================== */
.journeys h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); max-width: 16ch; margin-bottom: clamp(2.6rem, 5vw, 4rem); }

/* 3-up asymmetric grid: three portrait cards, staggered heights for editorial
   rhythm. Height cut by ~55% vs the old row-per-card layout, but each card
   holds more compositional presence — image + copy overlaid, not stacked. */
.journeys-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.journey {
  position: relative; display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden; border-radius: 3px;
  background: #14110A; text-decoration: none;
  isolation: isolate;
}
/* Staggered heights: middle card sits lower, outer cards higher — editorial
   asymmetry, not stamped rhythm */
@media (min-width: 900px) {
  .journey:nth-child(2) { transform: translateY(clamp(2rem, 4vw, 3.4rem)); }
}
.journey-media { position: absolute; inset: 0; overflow: hidden; }
.journey-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s cubic-bezier(.2,.8,.25,1), filter .5s;
  filter: brightness(.85);
}
.journey:hover .journey-media img { transform: scale(1.05); filter: brightness(.95); }
/* Dark gradient overlay for text legibility */
.journey::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 30%, rgba(11,10,5,.55) 65%, rgba(11,10,5,.92) 100%);
  transition: background .5s;
}
.journey:hover::after { background: linear-gradient(180deg, transparent 20%, rgba(11,10,5,.65) 55%, rgba(11,10,5,.95) 100%); }

.journey-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  color: #fff;
}
.journey h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -.015em;
  color: #fff; margin: 0 0 .7rem; line-height: 1.15;
}
.journey .facts {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  font-size: .7rem; color: rgba(255,255,255,.78);
  letter-spacing: .04em;
  margin: 0 0 1.3rem;
}
.journey .facts span { position: relative; }
.journey .facts span + span::before {
  content: ''; position: absolute; left: -.65rem; top: 50%;
  width: 3px; height: 3px; border-radius: 50%; background: var(--gold);
  transform: translateY(-50%);
}
.journey .quiet {
  color: var(--gold-2); border-bottom-color: rgba(232,201,122,.55);
  font-size: .66rem; letter-spacing: .22em;
}
.journey:hover .quiet { color: #fff; border-bottom-color: #fff; }

/* ==========================================================================
   IV · THE PREPARATION — the flatlay carries the argument
   ========================================================================== */
.preparation { background: var(--ivory); }
/* 12-col grid with a real gap. Figure spans 1/7, copy spans 8/13 — no overlap.
   The image gets to breathe on its own; the panel reads as a museum plate
   sitting next to (not on top of) the exhibit. */
.prep-layout {
  display: grid; grid-template-columns: repeat(12, 1fr);
  align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
}
.prep-figure {
  grid-column: 1 / 8; grid-row: 1; margin: 0;
  position: relative;
}
.prep-figure img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: 3px; display: block;
  box-shadow: 0 30px 60px -30px rgba(43,33,20,.35);
}
/* Fine gold-thread inner frame — makes the image feel exhibited, not cropped */
.prep-figure::after {
  content: ''; position: absolute; inset: 10px;
  border: 1px solid rgba(200,164,63,.28); pointer-events: none;
  border-radius: 2px;
}
.prep-figure figcaption {
  margin-top: 1.1rem; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-faint);
  display: flex; align-items: center; gap: .8rem;
}
.prep-figure figcaption::before {
  content: ''; width: 22px; height: 1px; background: var(--gold);
  display: inline-block; flex: none;
}
.prep-copy {
  grid-column: 8 / 13; grid-row: 1;
  background: transparent; padding: 0;
  border: 0; position: relative; box-shadow: none;
}
.prep-copy h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); max-width: 15ch; margin-bottom: 2.2rem; }
.prep-copy::before { content: none; }
.steps { counter-reset: s; }
.step {
  counter-increment: s; padding: 1.5rem 0 1.5rem 5.2rem;
  border-top: 1px solid rgba(158,124,42,.24); position: relative;
  transition: padding-left .5s cubic-bezier(.2,.8,.25,1);
}
.step:first-child { border-top: 0; padding-top: 0; }
/* Numbers: big Bodoni display numerals, hollow gold — museum exhibit plates.
   On hover, the number fills in gold — like a plate lit as you pass. */
.step::before {
  content: '0' counter(s);
  position: absolute; left: 0; top: 1.3rem;
  font-family: var(--display); font-weight: 500;
  font-size: 2.4rem; line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200,164,63,.65);
  transition: color .5s, -webkit-text-stroke-color .5s, transform .5s cubic-bezier(.2,.8,.25,1);
}
.step:first-child::before { top: -.15rem; }
.step:hover::before {
  color: var(--gold-2);
  -webkit-text-stroke-color: transparent;
  transform: scale(1.06);
}
.step:hover { padding-left: 5.6rem; }
.step b {
  font-family: var(--display); font-weight: 600;
  font-size: 1.22rem; letter-spacing: -.005em;
  display: block; margin-bottom: .35rem;
}
.step p { font-size: .94rem; line-height: 1.55; color: var(--text-soft); }
.prep-foot {
  margin-top: clamp(3rem, 5vw, 4rem); padding-top: 1.8rem;
  border-top: 1px solid rgba(158,124,42,.24);
  display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; justify-content: space-between;
}
.prep-foot p { font-size: .95rem; color: var(--text-soft); max-width: 54ch; }

/* ==========================================================================
   V · SILENCE — one frame, no argument
   ========================================================================== */
/* Silence → All-services moment: one confident line + one action + Kiswah
   ambience. Not a header-with-button, an EXHIBIT. Star jewels top & bottom,
   gold-thread frame around the whole panel, a faint sitara pattern behind. */
.silence {
  padding: clamp(6rem, 12vw, 10rem) 0;
  background: var(--kiswah); position: relative; text-align: center;
  overflow: hidden; isolation: isolate;
}
/* Ambient radial glow + faint sitara pattern behind the text */
.silence::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 65% at 50% 50%, rgba(232,201,122,.11), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23C8A43F' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M70 15 L82 55 L122 70 L82 85 L70 125 L58 85 L18 70 L58 55 Z'/%3E%3Cpath d='M70 30 L79 61 L110 70 L79 79 L70 110 L61 79 L30 70 L61 61 Z'/%3E%3Ccircle cx='70' cy='70' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center, center;
  background-repeat: no-repeat, repeat;
}
.silence .wrap { position: relative; z-index: 2; max-width: 800px; }

/* Kicker: eyebrow-style label to add editorial layers above the headline */
.silence-kicker {
  font-family: var(--body); font-weight: 400; font-size: .66rem;
  letter-spacing: .32em; text-transform: uppercase; color: var(--gold-2);
  display: inline-flex; align-items: center; gap: 1rem; margin-bottom: 1.8rem;
}
.silence-kicker::before, .silence-kicker::after {
  content: ''; width: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.silence-line {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.2; letter-spacing: -.02em;
  color: var(--ivory); max-width: 20ch; margin: 0 auto clamp(2.4rem, 4vw, 3.2rem);
  text-wrap: balance;
}
.silence-line em {
  font-family: var(--display); font-style: italic; font-weight: 400;
  background: linear-gradient(100deg, #9E7C2A 0%, #E8C97A 38%, #FBF0D0 50%, #E8C97A 62%, #9E7C2A 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: goldShimmer 7s ease-in-out infinite;
}

.silence .act.line {
  background: transparent; color: var(--ivory);
  border: 1px solid rgba(200,164,63,.55);
  padding: 1.15rem 2.6rem;
  font-size: .74rem; letter-spacing: .24em;
}
.silence .act.line:hover {
  background: rgba(200,164,63,.1); border-color: var(--gold-2);
  color: var(--gold-2);
  box-shadow: 0 18px 34px -14px rgba(200,164,63,.5);
  transform: translateY(-2px);
}

/* Gold-thread frame + star jewels top & bottom (like Institution section) */
.silence-frame {
  position: absolute; inset: clamp(1.4rem, 3vw, 2.6rem); z-index: 1;
  border: 1px solid rgba(200,164,63,.22);
  box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(200,164,63,.08);
  pointer-events: none;
}
.silence-star {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; z-index: 3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='%23C8A43F' d='M9 0 L10.6 5.5 L16 3.4 L12.5 8 L18 9 L12.5 10 L16 14.6 L10.6 12.5 L9 18 L7.4 12.5 L2 14.6 L5.5 10 L0 9 L5.5 8 L2 3.4 L7.4 5.5 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(200,164,63,.5));
  pointer-events: none;
}
.silence-star.top { top: calc(clamp(1.4rem, 3vw, 2.6rem) - 8px); }
.silence-star.bottom { bottom: calc(clamp(1.4rem, 3vw, 2.6rem) - 8px); }

/* Kiswah hizam edges — top & bottom */
.silence::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,164,63,.5) 25%, rgba(232,201,122,.7) 50%, rgba(200,164,63,.5) 75%, transparent);
  z-index: 2;
}
.silence-bottom-edge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(200,164,63,.5) 25%, rgba(232,201,122,.7) 50%, rgba(200,164,63,.5) 75%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .silence-line em { animation: none; background-position: 0 50%; }
}

/* ==========================================================================
   VI · ONE VOICE
   ========================================================================== */
.voice { text-align: center; }
.voice blockquote {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.35rem); line-height: 1.42; letter-spacing: -.008em;
  max-width: 24ch; margin-inline: auto; color: var(--ink);
}
.voice figcaption {
  margin-top: 2.4rem; font-size: .64rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--text-faint);
}
.voice figcaption b { color: var(--bronze); font-weight: 400; }

/* Section title (the name the client asked for) + Google attribution --------- */
.voice-title {
  font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.014em; margin-bottom: 1rem;
}
.g-logo { display: inline-block; vertical-align: middle; flex: none; }
.voice-head {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
  padding: .55rem 1.1rem; border-radius: 100px;
  /* a glass pill for the attribution */
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.voice-head .g-logo { width: 17px; height: 17px; }
.voice-head span {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-soft);
}
.voice-head b { color: var(--bronze); font-weight: 500; }

/* Monogram avatar — the pattern Google itself uses when there is no photo.
   Honest (no invented faces) and it still gives each review a human anchor. */
.voice-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-weight: 500; font-size: .78rem; letter-spacing: .01em;
  color: var(--ivory); background: var(--a, var(--bronze));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px -6px rgba(0,0,0,.4);
}
.voice-stars { color: var(--gold); font-size: .7rem; letter-spacing: .14em; line-height: 1; }
.voice-stars.big { font-size: .82rem; letter-spacing: .18em; margin-bottom: 1.4rem; }

/* Feature: gravitas of one voice, now with its avatar + rating ---------------- */
.voice-feature { margin-bottom: clamp(3rem, 6vw, 4.6rem); }
.voice-feature figcaption {
  display: flex; align-items: center; justify-content: center; gap: .85rem;
  flex-wrap: wrap;
}

/* --- The drift: a single slow marquee (the one allowed on the page) --------- */
.voice-marquee {
  position: relative; overflow: hidden; padding-block: .5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.voice-track {
  display: flex; width: max-content; gap: 1.4rem; align-items: stretch;
  animation: voice-drift 70s linear infinite;
}
.voice-marquee:hover .voice-track,
.voice-marquee:focus-within .voice-track { animation-play-state: paused; }
@keyframes voice-drift { to { transform: translateX(-50%); } }

/* Cards: a real surface now. color-mix keeps one rule working on ivory, dark
   and cloth — each variant already re-maps --ink and --gold. */
.voice-card {
  flex: 0 0 clamp(320px, 28vw, 380px);
  text-align: left; padding: 1.8rem 1.9rem 1.6rem;
  border-radius: 16px; position: relative;
  display: flex; flex-direction: column;
  background: rgba(150,135,105,.08);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 20px 40px -24px rgba(0,0,0,.55);
  transition: transform .5s cubic-bezier(.2,.8,.25,1), box-shadow .5s, border-color .5s;
}
.voice-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 28px 52px -22px rgba(200,164,63,.32);
}
/* Decorative gold quote glyph — a jeweller's mark */
.voice-card::before {
  content: '\201C'; position: absolute; top: -.14em; left: .55rem;
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 4.6rem; line-height: 1; color: var(--gold);
  opacity: .32; pointer-events: none;
}
.voice-avatar { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px -6px rgba(0,0,0,.4), 0 0 0 3px color-mix(in srgb, var(--ivory) 14%, transparent); }
@media (prefers-reduced-transparency: reduce) {
  .voice-card, .voice-head { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .voice-card { background: color-mix(in srgb, var(--ink) 10%, var(--ivory)); }
}
.voice-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.15rem; position: relative; z-index: 1;
}
.voice-card blockquote {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 1.04rem; line-height: 1.55; letter-spacing: -.006em;
  color: var(--ink); max-width: none; margin: 0 0 1.4rem;
  position: relative; z-index: 1;
}
.voice-card figcaption {
  margin-top: auto; padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-faint);
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
}
.voice-card figcaption b {
  color: var(--bronze); font-weight: 500; letter-spacing: .1em;
  font-size: .72rem; text-transform: none;
}
.voice-card figcaption span { display: inline-flex; align-items: center; gap: .35rem; }
.voice-card figcaption span::before {
  content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
}

/* "See all on Google" link — replaces the static "83 reviews" count.
   More useful than a number: it actually links out to the profile. */
.voice-more {
  margin-top: clamp(2.6rem, 4vw, 3.6rem); text-align: center;
}
.voice-more a {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 1.8rem; border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  font-family: var(--body); font-weight: 500; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bronze);
  transition: transform .35s, border-color .35s, background .35s, color .35s;
}
.voice-more a:hover {
  transform: translateY(-2px); color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 65%, transparent);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
}
.voice-more .g-logo { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .voice-track { animation: none; width: auto; overflow-x: auto; }
  .voice-marquee { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 640px) {
  .voice-card { flex-basis: 78vw; }
}

/* ==========================================================================
   TROPHY WALL — awards & recognitions, museum vitrine
   Dark Kiswah band with ambient gold light, slow horizontal marquee of shields
   presented on white plaques (like museum display cases). Hovers show name.
   ========================================================================== */
.trophy-wall {
  padding-block: clamp(5rem, 9vw, 8rem);
  background: var(--kiswah);
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--ivory);
}
.trophy-wall::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 50% 50%, rgba(232,201,122,.09), transparent 70%);
}
.trophy-head {
  text-align: center; margin-bottom: clamp(3rem, 5vw, 4.5rem);
  padding-inline: 2rem;
}
.trophy-head .kicker {
  font-family: var(--body); font-weight: 400; font-size: .66rem;
  letter-spacing: .32em; text-transform: uppercase; color: var(--gold-2);
  display: inline-flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;
}
.trophy-head .kicker::before, .trophy-head .kicker::after {
  content: ''; width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.trophy-head h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem); color: var(--ivory);
  letter-spacing: -.015em; line-height: 1.15;
  max-width: 22ch; margin: 0 auto 1.3rem; text-wrap: balance;
}
.trophy-head h2 em {
  font-family: var(--display); font-style: italic; font-weight: 500;
  color: var(--gold-2);
}
.trophy-head p {
  color: rgba(234,216,166,.6); max-width: 54ch; margin: 0 auto;
  font-size: 1rem; line-height: 1.75;
}

/* Marquee: auto-scrolling row, hover to pause, mouse-drag to scrub.
   The animation is applied via keyframes but paused as soon as the pointer
   enters or during drag; drag is handled by JS translating the track manually. */
.trophy-marquee {
  position: relative; overflow: hidden; padding-block: 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  cursor: grab;
}
.trophy-marquee.dragging { cursor: grabbing; user-select: none; }
/* Note: don't disable pointer-events on children during drag — that breaks
   the click handler on the exact card the user released on. The JS uses
   `movedPx > 6` to distinguish drag vs click instead. */
.trophy-track {
  display: flex; width: max-content; gap: 1.6rem; align-items: stretch;
  will-change: transform;
  /* animation is disabled by JS on load; JS drives the transform in requestAnimationFrame */
}
@keyframes trophyDrift { to { transform: translateX(-50%); } }
/* small visual hint that the marquee is draggable */
.trophy-marquee::before {
  content: 'Drag or hover to browse'; position: absolute;
  top: 1rem; left: 50%; transform: translateX(-50%);
  font-family: var(--body); font-weight: 400; font-size: .58rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(232,201,122,.3);
  pointer-events: none;
  opacity: 0; transition: opacity .5s;
  z-index: 3;
}
.trophy-marquee:hover::before { opacity: 1; }

/* All three marquees share the same style, but photos need different sizing */
.trophy.is-cert .trophy-media img { padding: 1rem; }
.trophy.is-photo { width: clamp(300px, 30vw, 400px); }
.trophy.is-photo .trophy-media { height: 240px; }
.trophy.is-photo .trophy-media img { object-fit: cover; width: 100%; height: 100%; border-radius: 2px; }
.trophy .trophy-caption { cursor: pointer; }

/* Divider between sub-sections inside Trophy Wall */
.trophy-subhead {
  text-align: center; margin: clamp(3.5rem, 6vw, 5rem) auto clamp(2rem, 3.5vw, 2.8rem);
  padding-inline: 2rem;
}
.trophy-subhead .kicker {
  font-family: var(--body); font-weight: 400; font-size: .62rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2);
  display: inline-flex; align-items: center; gap: .9rem; margin-bottom: 1rem;
}
.trophy-subhead .kicker::before, .trophy-subhead .kicker::after {
  content: ''; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.trophy-subhead h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--ivory);
  letter-spacing: -.015em; line-height: 1.2;
  max-width: 26ch; margin: 0 auto .6rem;
}
.trophy-subhead h3 em { font-style: italic; font-weight: 400; color: var(--gold-2); }
.trophy-subhead p {
  color: rgba(234,216,166,.55); max-width: 48ch; margin: 0 auto;
  font-size: .92rem; line-height: 1.6;
}

/* Individual trophy card — glass over Kiswah, gold-thread border. The trophies
   themselves were photographed on dark backgrounds, so the card ground lets
   them float naturally instead of fighting an ivory plaque. */
.trophy {
  flex: 0 0 auto; width: clamp(240px, 22vw, 300px);
  display: flex; flex-direction: column; align-items: stretch;
  border-radius: 4px; padding: 1.2rem 1.2rem 1rem;
  background: rgba(20,17,10,.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(200,164,63,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
              0 22px 44px -22px rgba(0,0,0,.7);
  transition: transform .5s cubic-bezier(.2,.8,.25,1), box-shadow .5s, border-color .5s;
  position: relative; overflow: hidden;
}
/* Fine gold-thread inner rule — museum vitrine detail */
.trophy::before {
  content: ''; position: absolute; inset: 6px;
  border: 1px solid rgba(200,164,63,.14); pointer-events: none;
  border-radius: 2px;
}
.trophy:hover {
  transform: translateY(-5px);
  border-color: rgba(200,164,63,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1),
              0 30px 55px -18px rgba(200,164,63,.32);
}
.trophy-media {
  height: 220px; display: flex; align-items: center; justify-content: center;
  margin-bottom: .85rem; position: relative; z-index: 1;
}
.trophy-media img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transition: transform .8s cubic-bezier(.2,.8,.25,1);
}
.trophy:hover .trophy-media img { transform: scale(1.05); }
.trophy-caption {
  border-top: 1px solid rgba(200,164,63,.22); padding-top: .85rem;
  text-align: center; position: relative; z-index: 1;
}
.trophy-caption b {
  font-family: var(--display); font-weight: 600;
  font-size: .95rem; color: var(--ivory);
  letter-spacing: -.005em; display: block; line-height: 1.3;
  margin-bottom: .3rem;
}
.trophy-caption span {
  font-family: var(--body); font-weight: 400; font-size: .58rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-2); opacity: .8;
}

.trophy-foot {
  text-align: center; margin-top: clamp(3rem, 5vw, 4rem);
  color: rgba(234,216,166,.6); font-size: .94rem;
  font-family: var(--display); font-style: italic;
}
.trophy-foot a {
  color: var(--gold-2);
  border-bottom: 1px solid rgba(232,201,122,.4);
  padding-bottom: .1rem;
  transition: color .3s, border-color .3s;
}
.trophy-foot a:hover { color: var(--ivory); border-bottom-color: var(--ivory); }

/* Marquee count summary */
.trophy-summary {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; justify-content: center;
  margin-top: clamp(3rem, 5vw, 4rem);
  font-family: var(--body); font-weight: 400; font-size: .66rem;
  letter-spacing: .24em; text-transform: uppercase; color: rgba(234,216,166,.6);
}
.trophy-summary b { color: var(--gold-2); font-weight: 500; font-family: var(--display); font-size: 1.05rem; letter-spacing: 0; }
.trophy-summary span { display: inline-flex; align-items: baseline; gap: .55rem; }

/* Credential badge — clickable state */
.foot-cred[data-cert] { cursor: pointer; }
.foot-cred[data-cert]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Certificate lightbox — same treatment as the trophy lightbox */
.cred-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,4,3,.94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s;
  padding: clamp(2rem, 5vw, 4rem);
}
.cred-lightbox.open { opacity: 1; pointer-events: auto; }
.cred-lightbox img {
  max-width: 92%; max-height: 88vh; object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.7);
}
.cred-lightbox .close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(200,164,63,.3);
  color: var(--ivory); font-size: 1.6rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, transform .3s;
}
.cred-lightbox .close:hover {
  background: rgba(200,164,63,.15);
  transform: rotate(90deg);
}
.cred-lightbox .caption {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  color: var(--gold-2); font-family: var(--body); font-weight: 400;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  text-align: center; max-width: 80%;
}

/* Lightbox (shared with all three marquees) */
.archive-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,4,3,.94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s;
  padding: clamp(2rem, 5vw, 4rem);
}
.archive-lightbox.open { opacity: 1; pointer-events: auto; }
.archive-lightbox img {
  max-width: 92%; max-height: 88vh; object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.7);
}
.archive-lightbox .close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(200,164,63,.3);
  color: var(--ivory); font-size: 1.6rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, transform .3s;
}
.archive-lightbox .close:hover {
  background: rgba(200,164,63,.15);
  transform: rotate(90deg);
}
.archive-lightbox .caption {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  color: var(--gold-2); font-family: var(--body); font-weight: 400;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .trophy-track { animation: none; }
  .trophy-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 640px) {
  .trophy { width: 78vw; }
}

/* ==========================================================================
   AIRLINES — a quiet trust band under Preparation
   Logos live on white badges (source files are all white-bg) and drift slowly.
   Reads as an airline directory, not decoration.
   ========================================================================== */
.airlines {
  padding-block: clamp(3rem, 5vw, 4.5rem);
  border-top: 1px solid rgba(158,124,42,.18);
  border-bottom: 1px solid rgba(158,124,42,.18);
  position: relative;
}
/* Subtle centred gold star bridging airlines strip into Journeys — visual seam
   that ties the two sections instead of a sudden cut */
.airlines::after {
  content: ''; position: absolute; left: 50%; bottom: -6px;
  transform: translateX(-50%);
  width: 12px; height: 12px; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='%23C8A43F' d='M9 0 L10.6 5.5 L16 3.4 L12.5 8 L18 9 L12.5 10 L16 14.6 L10.6 12.5 L9 18 L7.4 12.5 L2 14.6 L5.5 10 L0 9 L5.5 8 L2 3.4 L7.4 5.5 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(200,164,63,.45));
}
.airlines-label {
  text-align: center; margin-bottom: 2rem;
  font-size: .64rem; letter-spacing: .28em; text-transform: uppercase; color: var(--bronze);
  display: flex; align-items: center; justify-content: center; gap: 1rem;
}
.airlines-label::before, .airlines-label::after {
  content: ''; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.airlines-marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.airlines-track {
  display: flex; width: max-content; gap: 1rem; align-items: stretch;
  animation: airDrift 55s linear infinite;
}
.airlines-marquee:hover .airlines-track { animation-play-state: paused; }
@keyframes airDrift { to { transform: translateX(-50%); } }

.airline {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 92px; padding: 0 1.6rem; min-width: 180px;
  background: #FBFAF6; border: 1px solid rgba(200,164,63,.22);
  border-radius: 8px;
  box-shadow: 0 8px 20px -14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s;
}
.airline:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(0,0,0,.55); }
.airline img { height: 44px; width: auto; max-width: 160px; object-fit: contain; display: block; }

@media (prefers-reduced-motion: reduce) {
  .airlines-track { animation: none; width: auto; overflow-x: auto; }
  .airlines-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   VII · BEYOND — the 30%, in a different climate
   ========================================================================== */
.beyond { background: var(--paper); }
.beyond-head { text-align: center; margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.beyond h2 { color: #232722; font-size: clamp(2rem, 3.8vw, 3rem); max-width: 20ch; margin-inline: auto; }
.beyond .lede { color: #5A6055; max-width: 52ch; margin: 1.4rem auto 0; font-size: 1rem; }

/* Destination grid — six curated cards, editorial 3-up */
.beyond-grid { display: grid; gap: 1.3rem; grid-template-columns: repeat(3, 1fr); }
.dest {
  position: relative; display: block; overflow: hidden; border-radius: 3px;
  background: #1a1a1a; text-decoration: none; isolation: isolate;
  aspect-ratio: 4 / 5;
}
.dest img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.8,.25,1);
  filter: saturate(1.02) brightness(.94);
}
.dest:hover img { transform: scale(1.06); }
.dest::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.78) 100%);
  transition: background .5s;
}
.dest:hover::after { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.88) 100%); }
.dest-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1.3rem, 2vw, 1.8rem); color: #fff;
}
.dest-info h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.65rem, 2.8vw, 2.2rem);
  color: #fff; margin: 0 0 .55rem; letter-spacing: -.02em; line-height: 1.1;
}
.dest-info .sub {
  font-family: var(--body); font-weight: 400;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  display: flex; align-items: center; gap: .5rem;
}
.dest-info .sub::after {
  content: '→'; margin-left: auto; font-size: .95rem; letter-spacing: 0;
  transition: transform .4s; color: var(--gold-2);
}
.dest:hover .dest-info .sub::after { transform: translateX(6px); }

/* Foot: the conversion moment — plan a tour + WhatsApp */
.beyond-foot { margin-top: clamp(3rem, 5vw, 4.4rem); text-align: center; }
.beyond-foot p { color: #5A6055; max-width: 48ch; margin: 0 auto 2rem; font-size: 1rem; }
.beyond-foot .actions {
  display: inline-flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
}
/* Beyond CTAs — matched to the other primary actions on the page: taller,
   more presence, gold-accent hover so they read as inviting rather than mute */
.beyond .act {
  padding: 1.25rem 2.8rem;
  font-size: .74rem; letter-spacing: .24em;
  transition: transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s, background .4s, border-color .4s, color .4s;
}
.beyond .act.dark {
  background: #14110A; color: #fff;
  box-shadow: 0 12px 24px -14px rgba(0,0,0,.5);
}
.beyond .act.dark:hover {
  background: linear-gradient(180deg, #D2AE48, #C8A43F 60%, #B7942F);
  color: #14110A; transform: translateY(-3px);
  box-shadow: 0 20px 40px -18px rgba(158,124,42,.6);
}
.beyond .act.line {
  background: rgba(255,255,255,.85); color: #14110A;
  border: 1px solid rgba(35,39,34,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.beyond .act.line:hover {
  border-color: rgba(37,211,102,.7); color: #25D366;
  background: #fff; transform: translateY(-3px);
  box-shadow: 0 16px 30px -14px rgba(37,211,102,.3);
}
.beyond .act.line svg { width: 18px; height: 18px; margin-right: .5rem; }

@media (max-width: 900px) { .beyond-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .beyond-grid { grid-template-columns: 1fr; }
  .dest { aspect-ratio: 16 / 11; }
}

/* ==========================================================================
   VIII · THE INVITATION
   ========================================================================== */
.invitation { position: relative; background: var(--kiswah); color: var(--ivory); isolation: isolate; overflow: hidden; }
.invitation img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; z-index: -2; }
.invitation::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(97deg, rgba(7,6,3,.94) 12%, rgba(7,6,3,.74) 46%, rgba(7,6,3,.3) 80%);
}
.invitation .ayah {
  font-family: var(--arabic); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.3rem);
  color: var(--gold-2); line-height: 1.8; display: block; margin-bottom: 1rem; padding-bottom: .1em;
}
.invitation h2 { color: var(--ivory); font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 700; letter-spacing: -.022em; line-height: 1.05; max-width: 14ch; }
.invitation h2 em { color: var(--gold-2); }
.invitation p { color: rgba(248,244,230,.78); max-width: 44ch; margin: 1.5rem 0 2.6rem; }
.invitation .row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ==========================================================================
   FOOTER — the endpaper
   ========================================================================== */
/* ==========================================================================
   FOOTER — the endpaper of a luxury book
   Three tiers: newsletter + credentials · main links · bottom bar.
   ========================================================================== */
.foot { background: var(--kiswah); color: rgba(234,216,166,.65); position: relative; overflow: hidden; }

/* Kiswah corner as endpaper (kept — barely there) */
.corner {
  position: absolute; top: 0; right: 0; z-index: 0; pointer-events: none;
  width: min(46%, 600px); height: min(64%, 460px);
  background: url('../img/kiswah-corner.jpg') right center / cover no-repeat;
  opacity: .3;
  -webkit-mask-image: linear-gradient(252deg, #000, rgba(0,0,0,.42) 46%, transparent 80%);
          mask-image: linear-gradient(252deg, #000, rgba(0,0,0,.42) 46%, transparent 80%);
}

/* Embroidered gold seam at the top edge — Kiswah hizam signature */
.foot::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(200,164,63,.5) 20%, rgba(232,201,122,.7) 50%, rgba(200,164,63,.5) 80%, transparent);
}
.foot::after {
  content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; z-index: 3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23C8A43F' d='M9 0 L10.6 5.5 L16 3.4 L12.5 8 L18 9 L12.5 10 L16 14.6 L10.6 12.5 L9 18 L7.4 12.5 L2 14.6 L5.5 10 L0 9 L5.5 8 L2 3.4 L7.4 5.5 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(200,164,63,.5));
}

.foot .wrap { position: relative; z-index: 1; padding-block: 0 2rem; }

/* Pre-footer: heritage statement — a big Bodoni closing line, museum-plate */
.foot-heritage {
  position: relative; z-index: 1;
  padding-block: clamp(5rem, 9vw, 8rem);
  border-bottom: 1px solid rgba(200,164,63,.14);
  text-align: center;
}
.foot-heritage .kicker {
  font-family: var(--body); font-weight: 400; font-size: .62rem;
  letter-spacing: .32em; text-transform: uppercase; color: var(--gold-2);
  display: block; margin-bottom: 1.6rem;
}
.foot-heritage h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.15; letter-spacing: -.02em;
  color: var(--ivory); max-width: 22ch; margin: 0 auto;
}
.foot-heritage h2 em { color: var(--gold-2); font-weight: 400; }
.foot-heritage .line {
  width: 60px; height: 1px; margin: 1.8rem auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}
.foot-heritage .whisper {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 1rem; color: rgba(234,216,166,.55); margin-top: 1.4rem;
}

.foot-main {
  position: relative; z-index: 1;
  padding-block: clamp(4rem, 7vw, 5.5rem);
}

/* Tier 1 — Newsletter + credentials */
.foot-hero {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-bottom: clamp(3rem, 5vw, 4.4rem);
  margin-bottom: clamp(3rem, 5vw, 4.4rem);
  border-bottom: 1px solid rgba(200,164,63,.16);
}
.foot-news h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--ivory);
  max-width: 22ch; margin-bottom: .8rem; letter-spacing: -.015em;
}
.foot-news h3 em { color: var(--gold-2); font-weight: 400; }
.foot-news p { font-size: .92rem; color: rgba(234,216,166,.6); max-width: 42ch; margin-bottom: 1.4rem; }
.news-form {
  display: flex; gap: 0; max-width: 440px;
  border: 1px solid rgba(200,164,63,.34); border-radius: 3px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .3s;
}
.news-form:focus-within { border-color: rgba(232,201,122,.7); }
.news-form input {
  flex: 1; background: transparent; border: 0; outline: 0;
  padding: 1rem 1.1rem; color: var(--ivory);
  font-family: var(--body); font-weight: 300; font-size: .88rem;
  letter-spacing: 0;
}
.news-form input::placeholder { color: rgba(234,216,166,.4); }
.news-form button {
  background: linear-gradient(180deg, #D2AE48, #C8A43F 60%, #B7942F);
  color: #14110A; border: 0; cursor: pointer;
  padding: 0 1.6rem;
  font-family: var(--body); font-weight: 500; font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
  transition: transform .3s, box-shadow .3s;
}
.news-form button:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(200,164,63,.5); }
.news-note { font-size: .66rem; letter-spacing: .04em; color: rgba(234,216,166,.35); margin-top: .8rem; }

.foot-creds { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; align-content: center; }
.foot-cred {
  display: inline-flex; align-items: center; justify-content: center;
  background: #FBFAF6; border-radius: 6px; padding: .5rem .7rem;
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.55);
  transition: transform .3s;
}
.foot-cred:hover { transform: translateY(-2px); }
.foot-cred img { height: 28px; width: auto; max-width: 60px; object-fit: contain; display: block; }

/* Tier 2 — Main link columns */
.foot-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 3rem); }
.foot .brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem; }
.foot .brand img { width: 44px; height: 44px; object-fit: contain; }
.foot .brand b { color: var(--ivory); font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.005em; line-height: 1.1; display: block; }
.foot .brand > span > span { font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(234,216,166,.5); display: block; margin-top: .15rem; }
.foot-about p { font-size: .88rem; line-height: 1.75; color: rgba(234,216,166,.55); max-width: 34ch; margin-bottom: 1.5rem; }

.foot-contact { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.foot-contact li {
  display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .8rem;
  font-size: .88rem; line-height: 1.6;
}
.foot-contact li svg {
  flex: none; width: 15px; height: 15px; color: var(--gold-2); margin-top: .18rem;
}
.foot-contact li a:hover { color: var(--gold-2); }

.foot-social { display: flex; gap: .6rem; }
.foot-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(200,164,63,.28); color: rgba(234,216,166,.75);
  transition: transform .3s, background .3s, color .3s, border-color .3s;
}
.foot-social a:hover {
  background: rgba(200,164,63,.15); color: var(--gold-2);
  border-color: rgba(200,164,63,.6); transform: translateY(-2px);
}
.foot-social a svg { width: 16px; height: 16px; }

.foot h4 {
  font-family: var(--body); font-weight: 400; font-size: .62rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold-2);
  margin-bottom: 1.3rem;
}
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot ul li { margin-bottom: .75rem; font-size: .9rem; }
.foot ul a { color: rgba(234,216,166,.7); transition: color .3s, padding .3s; }
.foot ul a:hover { color: var(--gold-2); padding-left: .35rem; }

/* Tier 3 — Bottom */
.foot-bottom {
  margin-top: clamp(3rem, 5vw, 4rem); padding-top: 1.8rem;
  border-top: 1px solid rgba(200,164,63,.16);
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  justify-content: space-between; align-items: center;
  font-size: .72rem; color: rgba(234,216,166,.45);
}
.foot-bottom .made { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(234,216,166,.4); }
.foot-bottom .ar { font-family: var(--arabic); font-size: 1.05rem; color: rgba(232,201,122,.55); }

@media (max-width: 980px) {
  .foot-hero { grid-template-columns: 1fr; gap: 2.5rem; }
  .foot-creds { justify-content: flex-start; }
  .foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .foot-top { grid-template-columns: 1fr; gap: 2rem; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: .8rem; }
}

/* ==========================================================================
   RESPONSIVE — every composition declares its collapse
   ========================================================================== */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .prep-layout { display: block; }
  .prep-figure { margin-left: 0; }
  .prep-figure img { aspect-ratio: 16 / 10; }
  .prep-copy { padding: 2.2rem 0 0; border: 0; box-shadow: none; }
  .prep-copy::before { content: none; }
  .foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .journeys-grid { grid-template-columns: 1fr; gap: 1rem; }
  .journey { aspect-ratio: 4 / 3; }
  .journey:nth-child(2) { transform: none; }
  .figures { flex-wrap: wrap; gap: 2rem 2.6rem; }
  .invitation::after { background: linear-gradient(180deg, rgba(7,6,3,.7), rgba(7,6,3,.94)); }
  .invitation img { object-position: 68% 50%; }
  .invitation .row .act { width: 100%; justify-content: center; }
  .dest { aspect-ratio: 16 / 11; }
  .silence img { height: 62vh; }
  .foot-top { grid-template-columns: 1fr; gap: 2.4rem; }
  .corner { display: none; }
  .prep-foot { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Floating WhatsApp chat button -- Kiswah gold pill, on every page
   ========================================================================== */
.wa-fab {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 55;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .5rem .55rem .5rem 1.15rem;
  border-radius: 999px;
  background: rgba(11,10,5,.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200,164,63,.4);
  box-shadow: 0 16px 34px -12px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  animation: waFloat 3.6s ease-in-out infinite;
  transition: box-shadow .35s, border-color .35s;
  -webkit-tap-highlight-color: transparent;
}
.wa-fab .wa-label {
  font-family: var(--body); font-weight: 500; font-size: .78rem; letter-spacing: .015em;
  color: var(--ivory); white-space: nowrap;
}
.wa-ico {
  position: relative; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #D2AE48, #C8A43F 55%, #9E7C2A);
  color: #14110A;
  box-shadow: 0 0 0 1px rgba(200,164,63,.5), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .4s cubic-bezier(.2,.8,.25,1);
}
.wa-ico svg { width: 26px; height: 26px; position: relative; z-index: 2; }
/* pulsing ring around the icon */
.wa-ico::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(232,201,122,.6); pointer-events: none;
  animation: waPulse 2.8s ease-out infinite;
}
.wa-fab:hover {
  border-color: rgba(232,201,122,.75);
  box-shadow: 0 22px 40px -12px rgba(158,124,42,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.wa-fab:hover .wa-ico { transform: scale(1.08) rotate(-5deg); }
.wa-fab:active .wa-ico { transform: scale(.97); }
.wa-fab:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; }
@keyframes waFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes waPulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wa-fab { animation: none; }
  .wa-ico::before { animation: none; opacity: 0; }
}
@media (max-width: 560px) {
  .wa-fab {
    right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    padding: .45rem .5rem .45rem 1rem; gap: .55rem;
  }
  .wa-fab .wa-label { font-size: .72rem; }
  .wa-ico { width: 44px; height: 44px; }
  .wa-ico svg { width: 24px; height: 24px; }
}

/* ==========================================================================
   PACKAGE FINDER / QUICK QUOTE + premium lead modal (Kiswah-cloth ground)
   ========================================================================== */
.finder { position: relative; z-index: 4; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1rem, 3vw, 2rem); margin-top: clamp(-3rem, -4vw, -4rem); }
.finder .wrap { width: min(1150px, 92%); }
.finder-card {
  position: relative; overflow: hidden;
  background: linear-gradient(158deg, rgba(14,11,6,.82), rgba(9,8,4,.9)), url("../img/kiswah-cloth.jpg") center / cover;
  border: 1px solid rgba(200,164,63,.34); border-radius: 12px;
  box-shadow: 0 50px 90px -45px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
  padding: clamp(1.6rem, 3vw, 2.5rem);
}
.finder-card::after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:12px;
  box-shadow: inset 0 0 120px rgba(5,4,3,.5); }
.finder-head { text-align: center; margin-bottom: 1.6rem; position: relative; }
.finder-kicker { font-family: var(--body); font-weight: 400; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2); }
.finder-head h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--ivory); margin-top: .5rem; letter-spacing: -.01em; }
.finder-head h2 em { font-style: italic; font-weight: 400; color: var(--gold-2); }
.finder-tabs { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-bottom: 1.7rem; position: relative; }
.finder-tab {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--body); font-weight: 500; font-size: .8rem;
  padding: .72rem 1.35rem; border-radius: 999px;
  background: rgba(8,7,4,.5); border: 1px solid rgba(200,164,63,.3); color: rgba(234,216,166,.85);
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.finder-tab svg { width: 17px; height: 17px; }
.finder-tab:hover { border-color: rgba(200,164,63,.6); color: var(--ivory); transform: translateY(-1px); }
.finder-tab.is-active { background: linear-gradient(180deg,#D2AE48,#C8A43F 60%,#B7942F); color: #14110A; border-color: transparent; box-shadow: 0 10px 22px -12px rgba(158,124,42,.7); }
.finder-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 1rem; position: relative; }
.finder-field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.finder-field > span { font-family: var(--body); font-weight: 400; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); opacity: .85; }
.finder-field select {
  appearance: none; -webkit-appearance: none; width: 100%;
  font-family: var(--body); font-size: .92rem; color: var(--ivory);
  background: rgba(6,5,3,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A43F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .85rem center; background-size: 13px;
  border: 1px solid rgba(200,164,63,.32); border-radius: 6px; padding: .9rem 2.3rem .9rem 1rem;
  cursor: pointer; transition: border-color .3s, box-shadow .3s;
}
.finder-field select:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(200,164,63,.14); }
.finder-field select option { background: #14110A; color: var(--ivory); }
.finder-go { width: 100%; justify-content: center; margin-top: 1.2rem; padding: 1.1rem 1.9rem; position: relative; }
@media (max-width: 560px) { .finder { margin-top: clamp(-2rem,-4vw,-2.5rem); } .finder-fields { grid-template-columns: 1fr; } .finder-tabs { gap: .45rem; } .finder-tab { padding: .62rem 1rem; font-size: .76rem; } }

/* Lead modal -- Kiswah-cloth ground */
.lead-modal { position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(5,4,3,.84); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.lead-modal.open { display: flex; }
.lead-box { position: relative; max-width: 470px; width: 100%; text-align: center; overflow: hidden;
  background: linear-gradient(158deg, rgba(16,12,7,.93), rgba(8,7,4,.96)), url("../img/kiswah-cloth.jpg") center / cover;
  border: 1px solid rgba(200,164,63,.4); border-radius: 12px; padding: clamp(1.9rem, 4vw, 2.8rem);
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.06);
  animation: leadIn .45s cubic-bezier(.2,.8,.25,1); }
@keyframes leadIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.lead-box .close { position: absolute; top: .7rem; right: .95rem; background: none; border: 0; color: rgba(234,216,166,.6); font-size: 1.7rem; line-height: 1; cursor: pointer; transition: color .3s; z-index: 2; }
.lead-box .close:hover { color: var(--gold-2); }
.lead-box h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem,3vw,1.75rem); color: var(--ivory); margin: .5rem 0 .9rem; }
.lead-box h3 em { font-style: italic; font-weight: 400; color: var(--gold-2); }
.lead-summary { color: var(--gold-2); font-family: var(--body); font-size: .78rem; letter-spacing: .04em; line-height: 1.7;
  margin-bottom: 1.5rem; padding: .8rem 1rem; background: rgba(8,7,4,.45); border: 1px solid rgba(200,164,63,.24); border-radius: 6px; }
.lead-fields { display: grid; gap: 1rem; margin-bottom: 1.4rem; text-align: left; }
.lead-fields label { display: flex; flex-direction: column; gap: .45rem; font-family: var(--body); font-weight: 400; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.lead-fields input { font-family: var(--body); font-weight: 400; font-size: .95rem; color: var(--ivory); background: rgba(6,5,3,.7); border: 1px solid rgba(200,164,63,.32); border-radius: 6px; padding: .9rem 1rem; }
.lead-fields input::placeholder { color: rgba(234,216,166,.35); }
.lead-fields input:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(200,164,63,.14); }
.lead-box .act { width: 100%; justify-content: center; }
.lead-note { color: rgba(234,216,166,.55); font-size: .78rem; margin-top: 1rem; }

/* ==========================================================================
   BRAND LOADER -- gold logo intro, shows once per session
   ========================================================================== */
.loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 60% 55% at 50% 44%, #0e0b06, #050403 76%);
  transition: opacity .75s ease, visibility .75s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; }
.loader-logo { width: clamp(74px, 12vw, 112px); height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 0 26px rgba(200,164,63,.45));
  animation: ldLogo 1.5s cubic-bezier(.2,.8,.25,1) both; }
@keyframes ldLogo { 0% { opacity: 0; transform: translateY(12px) scale(.84); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.loader-line { display: block; height: 1px; width: 0; margin: 1.5rem auto .95rem;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  animation: ldLine 1.25s .4s cubic-bezier(.2,.8,.25,1) forwards; }
@keyframes ldLine { to { width: clamp(130px, 22vw, 230px); } }
.loader-name { font-family: var(--body); font-weight: 400; font-size: .62rem; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(234,216,166,.75); opacity: 0; animation: ldName .8s .7s ease forwards; }
@keyframes ldName { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .loader-logo, .loader-line, .loader-name { animation: none; }
  .loader-line { width: clamp(130px,22vw,230px); } .loader-name { opacity: 1; }
}