/* ==========================================================================
   BENOUARETH GOLD AND DIAMONDS — Design system
   Palette, typography and section rhythm derived from the approved design
   canvas (design/Benouareth Gold and Diamonds.dc.html).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg:            #0b0a08;
  --bg2:           #16130c;
  --fg:            #f6efe0;
  --fg2:           #fdf6e6;
  --muted:         #aa9f89;
  --muted2:        #d8c8a0;
  --muted3:        #8f8164;
  --border:        rgba(227, 178, 60, .22);
  --border2:       rgba(227, 178, 60, .40);
  --gold:          #e3b23c;
  --gold2:         #f4d488;
  --gold-shine:    #fff3cf;
  --ok:            #4caf7d;
  --err:           #d9705f;
  --gold-ink:      #151006;
  --band:          linear-gradient(135deg, #241a08, #16130c);
  --navbg:         rgba(11, 10, 8, .88);
  --hero-ink:      #0b0a08;
  --hero-ink-soft: rgba(11, 10, 8, .74);
  --shadow:        0 24px 50px rgba(0, 0, 0, .45);
  --shadow-sm:     0 12px 28px rgba(0, 0, 0, .28);

  /* The Arabic face follows its Latin counterpart in each stack rather than
     replacing it, so a mixed line — an Arabic sentence quoting XAU/USD — takes
     each glyph from the family that has it. app.js loads the three Arabic
     faces the first time Arabic is chosen; until then these names resolve to
     nothing and cost nothing. */
  --font-display:  'Cinzel', 'Noto Kufi Arabic', 'Times New Roman', serif;
  --font-serif:    'Cormorant Garamond', 'Amiri', Georgia, serif;
  --font-body:     'Manrope', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shell:         1240px;
  --gutter:        clamp(20px, 5vw, 40px);
  --section-y:     clamp(72px, 10vw, 130px);
  --radius:        2px;
}

html[data-theme="light"] {
  --bg:            #faf5e6;
  --bg2:           #f1e6c8;
  --fg:            #241b09;
  --fg2:           #150f06;
  --muted:         #5f5236;
  --muted2:        #4a3f22;
  --muted3:        #6f6237;
  --border:        rgba(160, 110, 10, .25);
  --border2:       rgba(160, 110, 10, .40);
  /* Gold on cream is the hard case in this palette. #96680a cleared 4.5:1 on
     --bg but only reached 3.7:1 on --bg2 and on the band, where most of the
     small uppercase labels actually sit. Both tones are deepened so every
     surface clears AA, and the step between them is kept. */
  --gold:          #7c5507;
  --gold2:         #6a4a06;
  /* The title's shine sweeps a lighter tone across the letters. Near-white
     works on black; on cream it made the middle of the word vanish at
     1.02:1, so here the highlight is a brighter gold, not a paler one. */
  --gold-shine:    #9c7211;
  /* The green and red that read well on black drop to 2.1:1 and 2.5:1 on
     cream. These carry the answer a visitor gets after sending a form, so
     they are darkened here rather than left to be guessed at. */
  --ok:            #27684a;
  --err:           #a63523;
  --gold-ink:      #fdf6e6;
  --band:          linear-gradient(135deg, #efdfae, #f1e6c8);
  --navbg:         rgba(250, 245, 230, .92);
  --hero-ink:      #faf5e6;
  --hero-ink-soft: rgba(250, 245, 230, .82);
  --shadow:        0 24px 50px rgba(90, 62, 6, .18);
  --shadow-sm:     0 12px 28px rgba(90, 62, 6, .12);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* An author `display` beats the browser's own [hidden] { display: none }, so
   any component given a display value would ignore the attribute and sit on
   the page while claiming to be hidden — the lightbox over /media, the save
   bar over the admin panel. Stated once here rather than patched per
   component, because the next one would be missed too. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 116px;
  /* The off-canvas menu sits at translateX(100%); `clip` keeps it from
     widening the document while leaving the sticky nav working. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold2); }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; }
p, ul, ol { margin: 0; }
button { font: inherit; cursor: pointer; }
::selection { background: #cda449; color: #0b0a08; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Parked before the start edge, which no browser makes scrollable — in
   either direction. Written as `left` it worked in French and added ten
   thousand pixels of empty width to every Arabic page, because in a
   right-to-left document leftward is the scrollable side. */
.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--gold-ink);
  padding: 12px 20px; font-size: 13px; letter-spacing: calc(1px * var(--track, 1)); text-transform: uppercase;
}
.skip-link:focus { inset-inline-start: 12px; top: 12px; }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); width: 100%; }
.shell--narrow { max-width: 880px; }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg2); border-top: 1px solid var(--border); }
.section--base { background: var(--bg); }

.grid { display: grid; gap: clamp(32px, 5vw, 70px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--split { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: center; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(28px, 4vw, 44px); }

/* --------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */
.eyebrow { font-size: 12px; letter-spacing: calc(3px * var(--track, 1)); text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }

.rule { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.rule::after { content: ""; width: 36px; height: 1px; background: var(--border2); }
.rule__gem { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex: none; }
.rule--center { justify-content: center; }
.rule--center::before { content: ""; width: 36px; height: 1px; background: var(--border2); }

.h-display { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 36px); line-height: 1.2; letter-spacing: calc(.5px * var(--track, 1)); color: var(--fg); }
.h-serif { font-family: var(--font-serif); font-size: clamp(20px, 2.4vw, 24px); color: var(--gold2); font-weight: 600; margin: 0 0 20px; }
.lead { font-size: 15.5px; line-height: 1.85; color: var(--muted); }
.body-sm { font-size: 14px; line-height: 1.85; color: var(--muted2); }
.center { text-align: center; }
.measure { max-width: 780px; margin-inline: auto; }
.mt-l { margin-top: clamp(40px, 6vw, 70px); }
.mt-m { margin-top: clamp(28px, 4vw, 44px); }
.mb-l { margin-bottom: clamp(40px, 6vw, 70px); }
.mb-m { margin-bottom: clamp(28px, 4vw, 44px); }

.section-head { text-align: center; margin-bottom: clamp(40px, 6vw, 60px); }
.section-head .lead { margin-top: 22px; }

.list-check { list-style: none; padding: 0; margin: 0; }
.list-check li {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 12px; font-size: 14.5px; line-height: 1.65; color: var(--muted2);
}
.list-check li::before {
  content: ""; flex: none; width: 17px; height: 17px; margin-top: 3px; background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.list-bullet { margin: 0; padding-inline-start: 18px; font-size: 14px; line-height: 1.9; color: var(--muted2); }
.list-bullet li { margin-bottom: 4px; }
.list-bullet li::marker { color: var(--gold); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: calc(1px * var(--track, 1)); text-transform: uppercase; font-weight: 600;
  padding: 16px 32px; border-radius: var(--radius); border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; }

.btn--gold { background: linear-gradient(135deg, var(--gold2), var(--gold)); color: var(--gold-ink); }
.btn--gold:hover { color: var(--gold-ink); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(224, 178, 60, .34); }

.btn--ghost { border-color: var(--border2); color: var(--fg); background: transparent; }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

.btn--sm { padding: 12px 22px; font-size: 11.5px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. Animations & splash
   -------------------------------------------------------------------------- */
@keyframes splashFade {
  0%, 100% { opacity: .72; transform: scale(.985); }
  50%      { opacity: 1;   transform: scale(1); }
}
@keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

#splash {
  position: fixed; inset: 0; z-index: 999; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .7s ease, visibility .7s ease;
}
#splash .logo { width: min(300px, 68vw); animation: splashFade 1.8s ease-in-out infinite; }
body.is-loaded #splash { opacity: 0; visibility: hidden; pointer-events: none; }

/* --------------------------------------------------------------------------
   7. Top utility bar
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--band); border-bottom: 1px solid var(--border);
  font-size: 11px; letter-spacing: calc(1.4px * var(--track, 1)); text-transform: uppercase; color: var(--muted2);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 38px; padding-block: 8px; }
.topbar__values { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dot { color: var(--gold); }

.ticker { display: none; align-items: center; gap: 18px; }
.ticker.is-live { display: flex; }
.ticker__item { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.ticker__label { color: var(--muted3); }
.ticker__value { color: var(--fg); font-weight: 600; letter-spacing: calc(.4px * var(--track, 1)); }
.ticker__delta { font-size: 10.5px; letter-spacing: calc(.4px * var(--track, 1)); }
.ticker__delta.up { color: var(--ok); }
.ticker__delta.down { color: var(--err); }

.socials { display: flex; gap: 10px; align-items: center; }
.socials a {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--muted2);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.socials a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.socials svg { width: 13px; height: 13px; fill: currentColor; }

@media (max-width: 900px) { .topbar__inner { justify-content: center; } .ticker { display: none; } .ticker.is-live { display: flex; } }
@media (max-width: 620px) {
  .topbar { font-size: 9.5px; letter-spacing: calc(1px * var(--track, 1)); }
  .topbar__values { flex-wrap: nowrap; gap: 7px; }
  .topbar .socials { display: none; }
}

/* --------------------------------------------------------------------------
   8. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s ease;
}
/* The tint and the blur sit on a layer of their own rather than on .nav.
   backdrop-filter turns an element into the containing block for any fixed
   descendant, and the off-canvas menu inside this header is fixed: on .nav it
   was trapped inside the header's own 130px, which made the column of links
   wrap into twelve side-by-side columns off the right edge. */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--navbg); backdrop-filter: blur(12px);
}
.nav.is-stuck { box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.nav__inner { display: flex; align-items: center; gap: 18px; min-height: clamp(72px, 8vw, 92px); padding-block: 10px; }

/* The logo is the gold lockup on its own — no disc, no ring, no plate. */
/* Drawn as a background, not an <img>, because the two theme variants used to
   be two <img> tags with one hidden — and a display:none image is still
   downloaded. Every page was fetching 53 KB of a logo it never showed. As a
   background, only the variant the theme actually selects is requested. */
.logo {
  display: block;
  aspect-ratio: 600 / 366;
  background: url("../img/logo-mark.webp?v=c0843ab1") center / contain no-repeat;
}
html[data-theme="light"] .logo { background-image: url("../img/logo-mark-light.webp?v=60f7c642"); }

.brand { display: flex; align-items: center; flex: none; }
/* The emblem carries the diamonds and the scrollwork, so it needs real height
   to stay legible — the bar grows with it. */
.brand .logo { height: clamp(46px, 5.4vw, 72px); }

.nav__links { display: flex; flex-wrap: wrap; gap: 4px clamp(9px, .85vw, 14px); flex: 1; justify-content: center; }
.nav__links a { font-size: 10.5px; letter-spacing: calc(.9px * var(--track, 1)); text-transform: uppercase; color: var(--muted2); padding: 6px 1px; position: relative; white-space: nowrap; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--gold); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }

.nav__tools { display: flex; align-items: center; gap: 8px; flex: none; }

.langs { display: flex; gap: 5px; }
.lang-btn {
  padding: 2px; border-radius: 3px; border: 1.5px solid transparent;
  background: transparent; line-height: 0; transition: border-color .2s ease, opacity .2s ease;
  opacity: .65;
}
.lang-btn:hover { opacity: 1; }
.lang-btn[aria-current] { border-color: var(--gold); opacity: 1; }
.flag { display: block; width: 22px; height: 15px; border-radius: 2px; }

/* Sun while the page is dark (click for light), moon while it is light. */
.theme-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border2);
  background: transparent; color: var(--gold); flex: none;
  display: grid; place-items: center; transition: border-color .2s ease, color .2s ease;
}
.theme-btn:hover { border-color: var(--gold); color: var(--gold2); }
.theme-btn svg { width: 15px; height: 15px; grid-area: 1 / 1; }
html[data-theme="dark"]  .theme-btn__moon { display: none; }
html[data-theme="light"] .theme-btn__sun  { display: none; }

.nav__cta { display: none; }
@media (min-width: 760px) { .nav__cta { display: inline-flex; } }
/* Once the full link row is shown it needs the width the button would take;
   below 1200px the links move into the burger and the button gets its place. */
@media (min-width: 1200px) { .nav__cta { display: none; } }

.burger { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border2); border-radius: var(--radius); background: transparent; }
.burger span { display: block; width: 16px; height: 1.5px; background: var(--gold); position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; inset-inline-start: 0; width: 16px; height: 1.5px; background: var(--gold);
  transition: transform .25s ease, top .25s ease;
}
.burger span::before { top: -5px; }
.burger span::after  { top:  5px; }
body.nav-open .burger span { background: transparent; }
body.nav-open .burger span::before { top: 0; transform: rotate(45deg); }
body.nav-open .burger span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1199px) {
  .nav__links {
    /* nowrap: the base rule wraps, which in a column means new columns. */
    position: fixed; inset-block: 0; inset-inline: auto 0; width: min(320px, 84vw); flex-wrap: nowrap;
    background: var(--bg2); border-inline-start: 1px solid var(--border);
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    gap: 0; padding: 90px 28px 40px; transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1); z-index: 70; overflow-y: auto;
  }
  body.nav-open .nav__links { transform: none; }
  .nav__links a { font-size: 13px; padding: 16px 0; border-bottom: 1px solid var(--border); letter-spacing: calc(1.6px * var(--track, 1)); }
  .nav__links a::after { display: none; }
  .nav__scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 65; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
  body.nav-open .nav__scrim { opacity: 1; visibility: visible; }
}
@media (min-width: 1200px) { .burger, .nav__scrim { display: none; } }

/* --------------------------------------------------------------------------
   9. Hero
   One continuous scene bleeding off the right edge, copy laid over the dark
   side of it — the composition used in the reference mockups. No framed
   panels: the bars, the diamonds and the trade map are all one image.
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  min-height: min(90vh, 780px); display: flex; align-items: center;
  background: var(--bg);
}

/* Scaled to the hero width, not its height: that keeps the bars at the size
   they have in the reference composition instead of zooming into them. Any
   spare height above and below is absorbed by the vertical scrim. */
/* Mobile first, and here it is worth real bytes: a phone showed the 1600px
   scene at 375 CSS px and paid 101 KB for it. The small file is the default
   and the large one is opted into once the layout is wide enough to use it. */
.hero__scene {
  position: absolute; inset: 0; z-index: 0;
  background: url("../img/hero-scene-800.webp?v=40b6ea5b") center / 100% auto no-repeat;
}
@media (min-width: 861px) {
  .hero__scene { background-image: url("../img/hero-scene.webp?v=aefcb05a"); }
}
/* A dense phone screen still wants the detail; 2x of 375 is 750, so only the
   larger displays cross into the big file. */
@media (max-width: 860px) and (min-resolution: 2dppx) and (min-width: 500px) {
  .hero__scene { background-image: url("../img/hero-scene.webp?v=aefcb05a"); }
}

/* Seats the scene on the page: darker at the top and bottom edges, and a last
   touch of shade behind the copy. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--hero-ink) 0%, var(--hero-ink) 12%, var(--hero-ink-soft) 34%, transparent 66%),
    linear-gradient(180deg, var(--hero-ink) 0%, transparent 22%, transparent 62%, var(--hero-ink) 100%);
}

.hero__inner {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(72px, 12vw, 120px);
}

.hero__copy { max-width: 620px; }
.hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 5.6vw, 58px); line-height: 1.08; letter-spacing: calc(1px * var(--track, 1)); margin: 0 0 24px;
  background: linear-gradient(100deg, var(--gold2), var(--gold) 30%, var(--gold-shine) 50%, var(--gold) 70%, var(--gold2));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}
.hero__quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 2.4vw, 25px); color: var(--gold2); margin: 0 0 26px; }
.hero__sub { font-size: 16px; line-height: 1.75; color: var(--muted2); margin: 0 0 40px; max-width: 480px; }

.hero__badges { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 40px; }
.hero__badge { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: calc(1px * var(--track, 1)); text-transform: uppercase; color: var(--muted2); }
.hero__badge svg { width: 20px; height: 20px; flex: none; stroke: var(--gold); fill: none; stroke-width: 1.4; }

/* Narrow screens: the scene sits behind the copy, pushed right and dimmed. */
@media (max-width: 860px) {
  .hero { min-height: auto; }
  .hero__scene { background-size: auto 100%; background-position: 72% center; }
  /* The copy runs the full width here, so its last words land on the lit face
     of the bar. The old right-hand stop left only a 20% veil there and the
     text dropped to 3.6:1; holding it at 52% keeps the bars clearly present
     and the sentence readable over them. */
  .hero__scrim {
    background:
      linear-gradient(90deg, var(--hero-ink) 0%, rgba(11, 10, 8, .80) 50%, rgba(11, 10, 8, .52) 100%),
      linear-gradient(180deg, var(--hero-ink-soft) 0%, transparent 24%, transparent 56%, var(--hero-ink) 100%);
  }

  /* Light theme needs its own veil here. On a wide screen the copy sits in a
     620px column and the photo has the right half to itself; on a phone the
     lines run the full width and end on the lit face of the gold bar. Pale
     text survives that, dark text on bright gold does not — so the cream holds
     most of the way across and the bars read as a warm shimmer behind it. */
  html[data-theme="light"] .hero__scrim {
    background:
      linear-gradient(90deg,
        var(--hero-ink) 0%,
        var(--hero-ink) 50%,
        rgba(250, 245, 230, .90) 76%,
        rgba(250, 245, 230, .74) 100%),
      linear-gradient(180deg, var(--hero-ink-soft) 0%, transparent 24%, transparent 56%, var(--hero-ink) 100%);
  }
}

/* --------------------------------------------------------------------------
   10. Media panels (photo-ready slots, decorative SVG fallback)
   -------------------------------------------------------------------------- */
.media {
  position: relative; overflow: hidden; border-radius: 6px;
  background-color: #100d07; background-position: center; background-size: cover; background-repeat: no-repeat;
  border: 1px solid var(--border); min-height: 120px;
}
.media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.42) 100%); pointer-events: none; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media--flat { border-radius: 0; }

/* A real photo brings its own subject and black surround: the decorative
   border and the darkening gradient only get in its way. */
.media.has-photo { border-color: transparent; background-color: #000; }
.media.has-photo::after { background: linear-gradient(180deg, rgba(0,0,0,0) 68%, rgba(0,0,0,.28) 100%); }


.media[data-art="bars"]     { background-image: url("../img/art-bars.svg?v=92f31eab"); }
.media[data-art="diamond"]  { background-image: url("../img/art-diamond.svg?v=4e4aeccc"); }
.media[data-art="pour"]     { background-image: url("../img/art-pour.svg?v=7610f75e"); }
.media[data-art="lab"]      { background-image: url("../img/art-lab.svg?v=02c148fb"); }
.media[data-art="vault"]    { background-image: url("../img/art-vault.svg?v=05e705b4"); }
.media[data-art="mine"]     { background-image: url("../img/art-mine.svg?v=3bd12a5c"); }
.media[data-art="ingot"]    { background-image: url("../img/art-ingot.svg?v=10713afb"); }
.media[data-art="coins"]    { background-image: url("../img/art-coins.svg?v=dbca4787"); }
.media[data-art="portrait"] { background-image: url("../img/art-portrait.svg?v=40778ea4"); }

/* --------------------------------------------------------------------------
   11. Trust strip
   -------------------------------------------------------------------------- */
.trust-strip { background: var(--bg); padding-inline: var(--gutter); }
.trust-strip__inner {
  max-width: var(--shell); margin: -1px auto 0;
  border: 1px solid var(--border); border-top: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  background: var(--bg2);
}
.trust-item { padding: 30px 28px; display: flex; gap: 16px; align-items: flex-start; border-inline-end: 1px solid var(--border); }
.trust-item:last-child { border-inline-end: none; }
.trust-item svg { width: 30px; height: 30px; flex: none; margin-top: 2px; stroke: var(--gold); fill: none; stroke-width: 1.4; }
.trust-item h4 { font-size: 13px; letter-spacing: calc(.8px * var(--track, 1)); text-transform: uppercase; color: var(--fg); margin: 0 0 6px; }
.trust-item p { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   12. Category cards
   -------------------------------------------------------------------------- */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); gap: 18px; }
.cat {
  position: relative; overflow: hidden; border: 1px solid var(--border);
  background: var(--bg2); border-radius: 4px; display: block;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cat:hover { border-color: var(--border2); transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.cat .media { border: none; border-radius: 0; height: 148px; }
.cat__body { padding: 18px 20px 20px; display: flex; align-items: center; gap: 12px; }
.cat__icon { width: 26px; height: 26px; flex: none; stroke: var(--gold); fill: none; stroke-width: 1.3; }
.cat__text { flex: 1; min-width: 0; }
.cat__title { display: block; font-family: var(--font-serif); font-size: 19px; line-height: 1.25; color: var(--fg); font-weight: 600; }
.cat__sub { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
.cat__arrow { margin-inline-start: auto; color: var(--gold); flex: none; }
.cat__arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; transition: transform .25s ease; }
.cat:hover .cat__arrow svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   13. Stats band
   -------------------------------------------------------------------------- */
.stats { background: var(--band); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-block: 60px; }
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 36px; text-align: center; }
.stat__num { font-family: var(--font-display); font-size: clamp(30px, 4vw, 44px); color: var(--gold); font-weight: 600; }
.stat__label { font-size: 12px; letter-spacing: calc(.6px * var(--track, 1)); color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   14. Services grid
   -------------------------------------------------------------------------- */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.service { background: var(--bg); padding: 42px 34px; transition: background .25s ease; position: relative; }
.service::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold), transparent); transition: width .35s ease; }
.service:hover { background: var(--bg2); }
.service:hover::before { width: 100%; }
.service__num { font-family: var(--font-display); font-size: 26px; color: var(--gold); margin-bottom: 18px; }
.service h3 { font-size: 19px; color: var(--fg); margin: 0 0 12px; }
.service p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   15. How it works
   -------------------------------------------------------------------------- */
.steps-flow { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 0; }
.flow-step { display: flex; flex-direction: column; align-items: center; width: 162px; text-align: center; }
.flow-step__ring {
  width: 64px; height: 64px; border-radius: 50%; background: var(--band);
  border: 1.5px solid var(--gold); display: grid; place-items: center; margin-bottom: 16px;
  transition: background .25s ease, transform .25s ease;
}
.flow-step:hover .flow-step__ring { transform: translateY(-4px); background: linear-gradient(135deg, var(--gold2), var(--gold)); }
.flow-step__ring svg { width: 25px; height: 25px; stroke: var(--gold); fill: none; stroke-width: 1.4; transition: stroke .25s ease; }
.flow-step:hover .flow-step__ring svg { stroke: var(--gold-ink); }
.flow-step__num { font-family: var(--font-display); font-size: 14px; color: var(--gold); margin-bottom: 6px; }
.flow-step h4 { font-size: 13px; color: var(--fg); letter-spacing: calc(.6px * var(--track, 1)); text-transform: uppercase; margin: 0 0 6px; }
.flow-step p { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.flow-link { width: 46px; height: 1.5px; background: var(--border2); margin-top: 32px; flex: none; }
@media (max-width: 760px) { .flow-link { display: none; } .steps-flow { gap: 36px; } }

/* --------------------------------------------------------------------------
   16. Bands / callouts
   -------------------------------------------------------------------------- */
.band { background: var(--band); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-block: clamp(60px, 9vw, 100px); text-align: center; }
.band__quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 3.4vw, 32px); color: var(--fg); margin: 0 auto 36px; max-width: 780px; }

.callout { background: var(--band); border: 1px solid var(--border2); padding: clamp(28px, 4vw, 44px); border-radius: 4px; }
.callout h4 { font-size: 12px; letter-spacing: calc(1.6px * var(--track, 1)); text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.callout p { font-size: 14.5px; line-height: 1.85; color: var(--muted2); margin: 0; }

.panel { border: 1px solid var(--border2); padding: 28px 30px; border-radius: 4px; background: var(--bg2); }
.panel h4 { font-size: 12px; letter-spacing: calc(1.6px * var(--track, 1)); text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.panel p { font-size: 14.5px; line-height: 1.75; color: var(--muted2); margin: 0; }

.cta-band {
  position: relative; overflow: hidden; text-align: center;
  padding-block: clamp(64px, 9vw, 104px);
  background: #0e0b06 url("../img/art-pour.svg?v=7610f75e") center 22% / cover no-repeat;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,10,8,.95) 0%, rgba(11,10,8,.80) 55%, rgba(11,10,8,.94) 100%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 36px); color: #fdf6e6; margin: 0 0 16px; line-height: 1.25; }
.cta-band p { color: #d8c8a0; font-size: 15px; margin: 0 auto 32px; max-width: 640px; line-height: 1.7; }

/* --------------------------------------------------------------------------
   17. About collage / values / owner
   -------------------------------------------------------------------------- */
.collage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; height: clamp(300px, 40vw, 380px); }
.collage__side { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; min-width: 0; }
.collage .media { min-width: 0; min-height: 0; height: 100%; }

.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 28px; }
.value { text-align: center; padding: 0 10px; }
.value__title { font-family: var(--font-serif); font-size: 22px; color: var(--gold); margin-bottom: 12px; }
.value p { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin: 0; }

/* Founder: portrait beside a real profile rather than a lone pull-quote. */
.founder {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 4px;
  padding: clamp(24px, 4vw, 52px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px);
}
@media (min-width: 820px) { .founder { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); } }

.founder__portrait { width: 100%; aspect-ratio: 5 / 6; height: auto; min-height: 0; }
.founder__name { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); color: var(--fg); margin: 0 0 4px; letter-spacing: calc(.5px * var(--track, 1)); }
.founder__role { font-size: 12.5px; letter-spacing: calc(1.4px * var(--track, 1)); text-transform: uppercase; color: var(--gold); margin: 0 0 24px; }

.founder__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 16px 28px; margin: 30px 0 0; padding: 26px 0 0; border-top: 1px solid var(--border);
}
.founder__facts dt { font-size: 11px; letter-spacing: calc(1.4px * var(--track, 1)); text-transform: uppercase; color: var(--muted3); margin-bottom: 4px; }
.founder__facts dd { font-size: 14.5px; color: var(--fg); margin: 0; }

.founder__quote { margin: 30px 0 0; padding-inline-start: 20px; border-inline-start: 2px solid var(--gold); }
.founder__quote p { font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.7; color: var(--fg); margin: 0; }

/* Owner's message: a signed statement, so the portrait carries the same weight
   as the words. Set on --band so it reads as a pause between the service
   sections rather than one more content block. */
.owner-msg { background: var(--band); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.owner-msg__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (min-width: 860px) { .owner-msg__grid { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); } }

.owner-msg__portrait { width: 100%; aspect-ratio: 4 / 5; height: auto; min-height: 0; }
@media (max-width: 859px) { .owner-msg__portrait { max-width: 320px; margin-inline: auto; } }

.owner-msg__title { font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 26px; }

.owner-msg__quote { margin: 0 0 30px; padding-inline-start: clamp(18px, 2.4vw, 26px); border-inline-start: 2px solid var(--gold); }
.owner-msg__quote p {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(18px, 2.2vw, 23px); line-height: 1.72; color: var(--fg); margin: 0;
}

.owner-msg__sign { margin: 0 0 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.owner-msg__name { font-family: var(--font-display); font-size: 20px; color: var(--fg); letter-spacing: calc(.5px * var(--track, 1)); margin: 0 0 6px; }
.owner-msg__role { font-size: 12px; letter-spacing: calc(1.4px * var(--track, 1)); text-transform: uppercase; color: var(--gold); margin: 0 0 4px; }
.owner-msg__place { font-size: 13px; color: var(--muted3); margin: 0; }

/* --------------------------------------------------------------------------
   18. Process steps
   -------------------------------------------------------------------------- */
.process { display: flex; flex-direction: column; }
.process__row { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--border); }
.process__row:last-child { border-bottom: 1px solid var(--border); }
.process__num { font-family: var(--font-display); font-size: 22px; color: var(--gold); }
.process__row h4 { font-size: 16.5px; color: var(--fg); margin: 0 0 8px; }
.process__row p { font-size: 14.5px; line-height: 1.75; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   19. Cards / testimonials
   -------------------------------------------------------------------------- */
.cards-tight { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.card-tight { background: var(--bg2); padding: 34px; }
.card-tight h4 { font-size: 17px; color: var(--gold2); margin: 0 0 10px; }
.card-tight p { font-size: 14px; line-height: 1.75; color: var(--muted); margin: 0; }

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 28px; }
.quote-card { margin: 0; background: var(--bg2); border: 1px solid var(--border); padding: 34px; border-radius: 4px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--border2); }
.quote-card__mark { font-family: var(--font-serif); font-size: 44px; line-height: .6; color: var(--gold); opacity: .5; }
.quote-card p { font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.7; color: var(--fg); margin: 14px 0 18px; }
.quote-card cite { font-size: 12.5px; letter-spacing: calc(.4px * var(--track, 1)); color: var(--gold2); font-style: normal; }

/* --------------------------------------------------------------------------
   20. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  width: 100%; background: transparent; border: none; text-align: start;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 4px; color: var(--fg); font-size: 16px; font-weight: 600; line-height: 1.4;
  transition: color .2s ease;
}
.faq__q:hover { color: var(--gold); }
.faq__sign { font-family: var(--font-serif); font-size: 26px; color: var(--gold); flex: none; line-height: 1; transition: transform .25s ease; }
.faq__q[aria-expanded="true"] .faq__sign { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { font-size: 14.5px; line-height: 1.8; color: var(--muted); margin: 0 4px 26px; max-width: 740px; }

/* --------------------------------------------------------------------------
   21. Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(36px, 5vw, 70px); }

.contact-line { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; font-size: 14.5px; color: var(--muted2); }
.contact-line svg { width: 18px; height: 18px; flex: none; margin-top: 3px; stroke: var(--gold); fill: none; stroke-width: 1.5; }
.contact-line strong { display: block; font-size: 11px; letter-spacing: calc(1.2px * var(--track, 1)); text-transform: uppercase; color: var(--muted3); font-weight: 500; margin-bottom: 2px; }
.contact-line a { color: var(--fg); }
.contact-line a:hover { color: var(--gold); }

.form { background: var(--bg); border: 1px solid var(--border); padding: clamp(24px, 4vw, 44px); border-radius: 4px; }
.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 20px 24px; margin-bottom: 22px; }
.field label { font-size: 11px; letter-spacing: calc(1px * var(--track, 1)); text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border2);
  color: var(--fg); padding: 9px 0; font-size: 14px; font-family: inherit; transition: border-color .2s ease;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field select option { background: var(--bg2); color: var(--fg); }
.field ::placeholder { color: var(--muted3); }
.field--full { grid-column: 1 / -1; }
.form__note { font-size: 12.5px; color: var(--muted3); margin: 20px 0 0; line-height: 1.7; }
.form__status { font-size: 13.5px; margin: 16px 0 0; min-height: 20px; line-height: 1.6; }
.form__status.ok { color: var(--ok); }
.form__status.err { color: var(--err); }
.hp { position: absolute; inset-inline-start: -9999px; opacity: 0; height: 0; width: 0; }
/* The WhatsApp link offered when the form cannot reach the mail provider. */
.status-fallback { display: inline-block; margin-top: 8px; }

/* --------------------------------------------------------------------------
   Gallery, lightbox and comments — /media
   -------------------------------------------------------------------------- */

/* Tiles share one portrait ratio and crop to fill. A masonry of mixed ratios
   would need per-tile inline styles, which this CSP does not allow, and the
   uncropped frame is one click away in the lightbox anyway. */
.gallery {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
}

.gallery__item {
  position: relative; display: block; margin: 0; padding: 0;
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px;
  background: #100d07; border: 1px solid var(--border);
  cursor: pointer; text-align: start;
  transition: border-color .2s ease, transform .3s ease;
}
.gallery__item:hover, .gallery__item:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.gallery__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A caption sits on the photo, so it needs its own bed to stay readable
   whatever is behind it. */
.gallery__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 14px 12px;
  font-size: 12.5px; line-height: 1.45; color: #f4ecdc;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.78) 62%);
}

.gallery__play {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  pointer-events: none;
}
.gallery__play svg {
  width: 54px; height: 54px; padding: 14px; border-radius: 50%;
  color: #12100a; background: rgba(227, 178, 60, .92);
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
}

/* A player is not a tile: it must keep the video's own shape and must not
   swallow clicks meant for the controls. */
.gallery__item--player { aspect-ratio: auto; cursor: default; background: #000; }
.gallery__item--player video,
.gallery__item--player iframe { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; }
.gallery--video .gallery__item--player video,
.gallery--video .gallery__item--player iframe { aspect-ratio: 16 / 9; }
.gallery__item--player figcaption { padding: 10px 12px; font-size: 12.5px; color: var(--muted2); }

.gallery--video { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }

.gallery__empty {
  grid-column: 1 / -1; margin: 0; padding: 34px 26px; text-align: center;
  font-size: 14px; color: var(--muted3);
  border: 1px dashed var(--border2); border-radius: 4px; background: var(--bg2);
}

/* --- lightbox ----------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: clamp(14px, 4vw, 44px);
  background: rgba(8, 7, 4, .93);
}
body.has-lightbox { overflow: hidden; }

.lightbox__figure {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: min(1100px, 100%); max-height: 100%; min-width: 0;
}
.lightbox__figure img {
  max-width: 100%; max-height: calc(100vh - 150px);
  object-fit: contain; border-radius: 4px; background: #000;
}
.lightbox__figure figcaption {
  font-size: 13.5px; color: #d9cfba; text-align: center; max-width: 70ch;
}

.lightbox__close, .lightbox__nav {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  color: #f4ecdc; cursor: pointer; transition: background .2s ease, border-color .2s ease;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(227, 178, 60, .22); border-color: var(--gold); }
.lightbox__close svg, .lightbox__nav svg { width: 20px; height: 20px; }
.lightbox__close { position: absolute; top: clamp(12px, 3vw, 26px); inset-inline-end: clamp(12px, 3vw, 26px); }

@media (max-width: 640px) {
  .lightbox__nav { position: absolute; bottom: 18px; }
  /* Logical, so "previous" sits on the side the reader came from — the left
     in French, the right in Arabic. */
  .lightbox__nav--prev { inset-inline-start: 22%; }
  .lightbox__nav--next { inset-inline-end: 22%; }
  .lightbox__figure img { max-height: calc(100vh - 190px); }
}

/* --- comments ----------------------------------------------------------- */
.comments { display: grid; gap: 14px; }

.comment {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 4px;
  padding: 22px clamp(18px, 3vw, 28px);
}
.comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 10px; }
.comment__name { font-family: var(--font-serif); font-size: 17px; color: var(--fg); }
.comment__meta { font-size: 11.5px; letter-spacing: calc(1.1px * var(--track, 1)); text-transform: uppercase; color: var(--muted3); }
.comment__body { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--muted2); white-space: pre-wrap; }

.comments__empty {
  margin: 0; padding: 30px 26px; text-align: center;
  font-size: 14px; color: var(--muted3);
  border: 1px dashed var(--border2); border-radius: 4px;
}

/* --- moderation queue (/moderation, staff only) ------------------------- */
.mod-row {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 4px;
  padding: 20px clamp(16px, 3vw, 26px); margin-bottom: 14px;
}
.mod-row__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 10px; }
.mod-row__body { margin: 0 0 16px; font-size: 14.5px; line-height: 1.8; color: var(--muted2); white-space: pre-wrap; }
.mod-tag { font-size: 11px; letter-spacing: calc(1.2px * var(--track, 1)); text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border2); color: var(--muted3); }
.mod-tag--pending  { color: var(--gold); border-color: var(--gold); }
.mod-tag--approved { color: var(--ok); border-color: var(--ok); }
.mod-tag--rejected { color: var(--err); border-color: var(--err); }

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--bg2); border-top: 1px solid var(--border); padding-top: clamp(56px, 8vw, 80px); }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 40px; padding-bottom: 48px; }
.footer__brand .logo { width: min(200px, 100%); margin-bottom: 20px; }
.footer__brand p { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin: 0 0 18px; max-width: 280px; }
.footer h5 { font-size: 11.5px; letter-spacing: calc(1.8px * var(--track, 1)); text-transform: uppercase; color: var(--gold); margin: 0 0 18px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 10px; }
.footer ul a, .footer ul span { font-size: 13.5px; color: var(--muted); }
.footer ul a:hover { color: var(--gold); }

.footer__quote { text-align: center; border-top: 1px solid var(--border); padding: 40px 0 32px; }
.footer__quote p:first-child { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 2.6vw, 25px); color: var(--gold2); margin: 0 0 8px; }
.footer__quote p:last-child { font-size: 13px; color: var(--muted); margin: 0; }

.footer__legal {
  border-top: 1px solid var(--border); padding: 20px 0 26px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--muted3);
}
.footer__legal a { color: var(--muted3); }
.footer__legal a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   23. Floating actions
   -------------------------------------------------------------------------- */
.fab-stack { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 55; display: flex; flex-direction: column; gap: 12px; }
.fab {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border2); background: var(--bg2); color: var(--gold);
  box-shadow: var(--shadow-sm); transition: transform .2s ease, background .2s ease, color .2s ease, opacity .25s ease;
}
.fab:hover { transform: translateY(-3px); }
.fab svg { width: 22px; height: 22px; }
.fab--wa { background: #25d366; border-color: #25d366; color: #fff; }
.fab--wa:hover { color: #fff; background: #1fbe5a; }
.fab--wa svg { fill: currentColor; }
.fab--top { opacity: 0; pointer-events: none; }
.fab--top.is-visible { opacity: 1; pointer-events: auto; }
.fab--top svg { stroke: currentColor; fill: none; stroke-width: 1.8; }

/* --------------------------------------------------------------------------
   24. Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   26. Utilities
   Small, named helpers so no markup needs an inline style attribute —
   which keeps the Content-Security-Policy in _headers free of 'unsafe-inline'.
   -------------------------------------------------------------------------- */
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-22 { margin-bottom: 22px; }
.mb-24 { margin-bottom: 24px; }
.mb-26 { margin-bottom: 26px; }
.mb-28 { margin-bottom: 28px; }
.mb-30 { margin-bottom: 30px; }
.mb-48 { margin-bottom: 48px; }
.pt-0  { padding-top: 0; }
.spacer { flex: 1; }
.stack > * + * { margin-top: 18px; }

/* Small uppercase gold label above a list or paragraph */
.label { font-size: 12px; letter-spacing: calc(1.6px * var(--track, 1)); text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.label--sub { font-size: 11px; color: var(--muted3); margin: 30px 0 14px; }

/* The oversized serif lede under the "Who we are" eyebrow */
.lede {
  font-family: var(--font-serif); font-size: clamp(21px, 2.9vw, 29px);
  line-height: 1.5; color: var(--fg); font-weight: 500; margin: 0 0 28px;
}

.h-section-sm { margin-bottom: 48px; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: calc(1px * var(--track, 1)); }
.note-sm { font-size: 13px; color: var(--muted3); margin: 0 0 24px; }
/* Inside a panel the note closes the block, so it needs air above, not below. */
.panel .note-sm { margin: 26px 0 0; line-height: 1.7; }

.section--tight { padding-block: clamp(60px, 9vw, 100px); }
.panel--lg { padding: clamp(28px, 4vw, 44px); }
.grid--tight { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px 40px; }
.list-narrow { max-width: 780px; margin: 0 auto 44px; }

.media--tall   { height: clamp(260px, 32vw, 340px); }
.media--taller { height: clamp(280px, 36vw, 400px); }

.hr-soft { border: none; border-top: 1px solid var(--border); margin: 56px 0; }
.legal strong { color: var(--fg); }

/* --------------------------------------------------------------------------
   Admin panel (/admin, staff only)
   Built from the same tokens as the site so the owner edits their pages in
   their own palette rather than in a generic dashboard.
   -------------------------------------------------------------------------- */
.admin-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.admin-title { margin: 0; font-size: clamp(26px, 3.4vw, 38px); }

.admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.admin-tab {
  background: transparent; border: 1px solid transparent; border-bottom: none;
  padding: 12px 18px; border-radius: 4px 4px 0 0; cursor: pointer;
  font-size: 12px; letter-spacing: calc(1.2px * var(--track, 1)); text-transform: uppercase;
  color: var(--muted); font-family: inherit;
  transition: color .2s ease, background .2s ease;
}
.admin-tab:hover { color: var(--gold); }
.admin-tab.is-active { color: var(--gold); background: var(--bg2); border-color: var(--border); }

/* The save bar follows the page: on a long list of fields the button must not
   be a scroll away from the field just edited. */
.admin-bar {
  position: sticky; top: clamp(72px, 8vw, 92px); z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin: 0 0 18px; padding: 14px 18px; border-radius: 4px;
  background: var(--bg2); border: 1px solid var(--gold);
  box-shadow: var(--shadow-sm);
  font-size: 13.5px; color: var(--fg);
}
.admin-bar > span:first-child { flex: 1 1 auto; }

.admin-group { border: 1px solid var(--border); border-radius: 4px; margin-bottom: 12px; background: var(--bg2); }
.admin-group > summary {
  cursor: pointer; padding: 16px 20px; list-style: none;
  font-size: 12px; letter-spacing: calc(1.4px * var(--track, 1)); text-transform: uppercase; color: var(--gold);
}
.admin-group > summary::-webkit-details-marker { display: none; }
.admin-group > summary::before { content: "▸ "; }
.admin-group[open] > summary::before { content: "▾ "; }
.admin-group[open] > summary { border-bottom: 1px solid var(--border); }

.admin-field { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.admin-field:last-child { border-bottom: none; }
.admin-field__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.admin-field__key { font-size: 11.5px; color: var(--muted3); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }

/* Only an edited field advertises itself, so scanning the list shows what has
   been touched without opening every group. */
.admin-badge { display: none; font-size: 10.5px; letter-spacing: calc(1.2px * var(--track, 1)); text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 2px 9px; }
.admin-field.is-changed .admin-badge { display: inline-block; }
/* An edited row is marked with a gold edge rather than a wash. The wash was
   only 7%, but on cream that was enough to darken the background under the
   11px key and language labels and drop them from 4.9:1 to 4.2:1. An inset
   shadow costs no layout and no contrast. */
.admin-field.is-changed { box-shadow: inset 3px 0 0 var(--gold); }
.admin-reset { display: none; margin-left: auto; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--muted); text-decoration: underline; }
.admin-field.is-changed .admin-reset { display: inline-block; }
.admin-reset:hover { color: var(--gold); }

.admin-field__row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

.admin-cell { display: block; min-width: 0; }
.admin-cell--wide { grid-column: 1 / -1; }
.admin-cell__lang { display: block; font-size: 10.5px; letter-spacing: calc(1.4px * var(--track, 1)); text-transform: uppercase; color: var(--muted3); margin-bottom: 6px; }
.admin-cell input, .admin-cell textarea {
  width: 100%; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border2); border-radius: 3px;
  padding: 10px 12px; font-size: 14px; font-family: inherit; line-height: 1.6;
  transition: border-color .2s ease;
}
.admin-cell input:focus, .admin-cell textarea:focus { outline: none; border-color: var(--gold); }
.admin-cell textarea { resize: vertical; }
.admin-json { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12.5px; }
.admin-json.is-invalid { border-color: var(--err); }

/* A list item: one small form per entry, so a non-technical owner edits
   "Title" and "Description" rather than a block of JSON. */
.admin-items { display: grid; gap: 10px; }
.admin-item {
  display: grid; gap: 10px;
  padding: 14px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg);
}
.admin-item__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-item__num {
  font-size: 11px; letter-spacing: calc(1.2px * var(--track, 1)); color: var(--muted3);
  border: 1px solid var(--border2); border-radius: 999px; padding: 2px 10px;
}
.admin-item__tools { display: flex; gap: 4px; }
.admin-item select {
  width: 100%; background: var(--bg2); color: var(--fg);
  border: 1px solid var(--border2); border-radius: 3px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
}
.admin-item select:focus { outline: none; border-color: var(--gold); }

/* One label, then the French and the English of that field beside each other.
   They stack on a phone, but stay adjacent — the point is that a translation
   is checkable without scrolling away from what it translates. */
.admin-pair { display: grid; gap: 6px; }
.admin-pair__row { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.admin-lang { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 8px; }
.admin-lang__tag {
  font-size: 10px; letter-spacing: calc(1px * var(--track, 1)); color: var(--muted3);
  padding-top: 12px; text-align: right;
}
.admin-lang input, .admin-lang textarea, .admin-pair > select {
  width: 100%; background: var(--bg2); color: var(--fg);
  border: 1px solid var(--border2); border-radius: 3px;
  padding: 10px 12px; font-size: 14px; font-family: inherit; line-height: 1.6;
}
.admin-lang input:focus, .admin-lang textarea:focus, .admin-pair > select:focus {
  outline: none; border-color: var(--gold);
}
.admin-lang textarea { resize: vertical; }

.admin-warn {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 3px;
  border: 1px solid var(--err); color: var(--err);
  font-size: 12.5px; line-height: 1.6;
}

.admin-list { display: grid; gap: 12px; margin-bottom: 22px; }
.admin-row {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 16px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg2);
}
.admin-row__body { display: grid; gap: 12px; min-width: 0; }
.admin-row__tools { display: flex; flex-direction: column; gap: 6px; }
.admin-icon { padding: 6px 10px; min-width: 38px; }
.admin-kind { margin: 0; font-size: 11.5px; letter-spacing: calc(1.3px * var(--track, 1)); text-transform: uppercase; color: var(--gold); }
.admin-thumb { width: 76px; height: 96px; object-fit: cover; border-radius: 3px; background: #000; border: 1px solid var(--border); }

/* Two fields share the first row and the rest span the width, so letting the
   grid spread to four tracks on a tablet just left empty columns. */
#pane-settings .form__grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); max-width: 720px; }

.admin-fileline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.admin-filename { font-size: 12.5px; color: var(--muted); word-break: break-all; flex: 1 1 160px; }

@media (max-width: 700px) {
  .admin-row { grid-template-columns: minmax(0, 1fr); }
  .admin-row__tools { flex-direction: row; }
  .admin-thumb { width: 100%; height: 200px; }

  /* Pinned to the bottom rather than the top: the list is long, and an edit
     made near its end should not need a scroll back to the header to save. */
  .admin-bar { position: sticky; top: auto; bottom: 10px; }
}

/* --------------------------------------------------------------------------
   Mobile refinements
   The layout already reflows correctly; what follows is about the two things
   a phone changes: the pointer is a fingertip, and the text is held closer
   but read in worse conditions.
   -------------------------------------------------------------------------- */

/* Touch ergonomics follow the pointer, not the width: a tablet in landscape is
   1194px wide and still operated with a thumb. Keying these to a phone-sized
   breakpoint left every iPad with 14px form fields and 18px footer links. */
@media (pointer: coarse) {
  /* A finger covers about 9mm. Rather than enlarging the visible chrome — which
     would unbalance a bar built around small gold marks — each control keeps
     its size and gains an invisible 44px hit area centred on it. */
  .lang-btn, .theme-btn, .burger, .socials a { position: relative; }

  .lang-btn::after,
  .theme-btn::after,
  .burger::after,
  .socials a::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }

  /* The two flags sit side by side, so their hit areas must not touch: a tap
     in the seam would switch to the wrong language. Widening the gap to 16px
     puts the centres 44px apart, which is exactly the target size. */
  .langs { gap: 16px; }

  /* iOS zooms the page in when a focused field has text under 16px — on the
     iPad as much as on the iPhone — and leaves the visitor scrolled sideways
     on a form they were filling in. The admin panel is edited from a phone as
     often as the contact form is filled in from one. */
  .field input, .field select, .field textarea { font-size: 16px; padding: 12px 0; }
  .field label { font-size: 11.5px; }
  .admin-cell input, .admin-cell textarea,
  .admin-lang input, .admin-lang textarea,
  .admin-item select, .admin-pair > select { font-size: 16px; }
  .admin-json { font-size: 14px; }

  /* The reorder and remove controls are small marks by design, but one of them
     deletes a photo — they get a full target rather than a 38x32 one. */
  .admin-icon { min-width: 44px; min-height: 44px; }

  /* "Rétablir" is a text link at 55x21; padding gives it a real target
     without changing how it looks. */
  .admin-reset { padding: 12px 4px; }

  /* Footer links were 18px tall — two columns of them are easy to mis-tap. */
  .footer ul li { margin-bottom: 2px; }
  .footer ul a { display: inline-block; padding: 11px 0; }
  .footer__legal { gap: 10px 18px; }
}

/* Reading comfort follows the width: a handheld screen is held closer and read
   in worse light than a desk monitor. Covers phones and tablets in portrait. */
@media (max-width: 1024px) {
  /* These are paragraphs, not labels. The uppercase gold labels stay as they
     are — their letter-spacing already carries them. */
  .trust-item p,
  .flow-step p,
  .form__note,
  .gallery__item--player figcaption { font-size: 13.5px; }
  .cat__sub { font-size: 13px; }
  .stat__label { font-size: 13px; }
  .gallery__cap { font-size: 13px; }
  .footer__legal { font-size: 12.5px; }
}

/* Tablet portrait. Three groups on the site hold exactly four items, and in
   this band an auto-fit grid gives them three columns — leaving one item
   stranded on a row of its own. Four items want 2x2 until there is room for
   all four side by side, which arrives at 1024px. */
@media (min-width: 760px) and (max-width: 1023px) {
  .trust-strip__inner,
  .stats__grid,
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* One column of content: the phone layout proper. */
@media (max-width: 760px) {
  /* One column, so the brand block has the width to itself and hanging off
     the left edge reads as a column that lost its neighbours. The link lists
     below it stay left-aligned — centred lists are harder to scan. */
  .footer__brand { text-align: center; }
  .footer__brand .logo,
  .footer__brand p { margin-inline: auto; }
  .footer__brand .socials { justify-content: center; }

  /* Full width reads as a target rather than something to aim at, and a row of
     two half-width buttons is cramped under 400px. */
  .btn-row { gap: 12px; }
  .btn-row .btn { flex: 1 1 100%; justify-content: center; }
  .btn-row .btn--sm { flex: 0 1 auto; }
  /* The submit button is the point of the page it sits on. */
  form > .btn[type="submit"] { width: 100%; justify-content: center; }
}

/* Landscape on a phone: iOS inflates text on rotation unless told not to, and
   a full-height off-canvas menu has very little room, so it scrolls. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* A phone on its side leaves the off-canvas menu about 400px of height for
   twelve links, so it tightens up and scrolls. Keyed to the height rather than
   the width: a tablet in landscape is just as wide and has room to spare. */
@media (max-height: 560px) {
  .nav__links { padding-top: 70px; padding-bottom: 24px; }
  .nav__links a { padding: 11px 0; }
}

/* A grey flash on every tap looks like a rendering fault on a dark, gold site;
   each control already has its own pressed state. */
a, button, [role="button"] { -webkit-tap-highlight-color: rgba(227, 178, 60, .15); }

/* A long unbroken string — a reference number, an address someone pastes into
   a comment — must wrap rather than push the page sideways. */
body { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   25. Print
   -------------------------------------------------------------------------- */
@media print {
  .nav, .topbar, .fab-stack, #splash, .hero__scene, .hero__scrim, .form { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   27. Arabic and right-to-left
   --------------------------------------------------------------------------
   Everything above is written with logical properties, so most of the layout
   mirrors on its own once dir="rtl" is set. What follows is the remainder:
   the things CSS cannot express logically (transforms, gradient angles), the
   typographic habits that are Latin-only, and the few places where a figure
   has to keep reading left to right inside an Arabic sentence.
   -------------------------------------------------------------------------- */

/* Arabic letters join. Tracking pulls them apart into disconnected shapes —
   the script equivalent of s p a c i n g   o u t  every word. Every tracked
   rule above is written as a multiple of --track, so setting it to zero here
   cancels all thirty-eight at once; the Latin islands below set it back to 1.
   A variable rather than a blanket override because --track inherits, and a
   later rule adding tracking to a new component is covered without knowing
   this section exists. */
[dir="rtl"] { --track: 0; }

/* Arabic has no italic. A browser asked for one synthesises a slant, which on
   a cursive script reads as a rendering fault rather than emphasis. The pull
   quotes carry their weight through the serif face and the gold rule instead. */
[dir="rtl"] .hero__quote,
[dir="rtl"] .band__quote,
[dir="rtl"] .founder__quote p,
[dir="rtl"] .owner-msg__quote p,
[dir="rtl"] .quote-card p { font-style: normal; }

/* Arabic sits on a taller body: the script has deep descenders and stacked
   diacritics, and lines set for Latin leading collide. */
[dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] .hero__sub,
[dir="rtl"] .lede,
[dir="rtl"] p { line-height: 1.9; }

/* Figures and market prices stay left to right inside the Arabic sentence.
   Written "10+" and "99.5%+", they would otherwise be reordered to "+10" by
   the bidi algorithm, which puts the sign where the reader does not expect it.
   Tracking comes back here because these are Latin glyphs again. */
[dir="rtl"] .stat__num,
[dir="rtl"] .service__num,
[dir="rtl"] .flow-step__num,
[dir="rtl"] .process__num,
[dir="rtl"] .ticker__value,
[dir="rtl"] .ticker__delta { direction: ltr; --track: 1; }
[dir="rtl"] .ticker__value,
[dir="rtl"] .ticker__delta { unicode-bidi: isolate; }

/* The wordmark is Latin and stays Latin — it is what is stamped on the bars,
   so it keeps its glyph order and its tracking. It still has to hang off the
   right margin with the rest of the hero, though: direction alone would align
   it left and leave it floating away from the text it belongs to. */
[dir="rtl"] .hero__title { direction: ltr; text-align: right; --track: 1; }

/* A phone number is one left-to-right unit, but its groups are separated by
   spaces, and a space between two numbers in an Arabic paragraph belongs to the
   paragraph. Left alone, +232 33 018 970 paints as 970 018 33 +232 — still
   "correct" to the bidi algorithm, and the wrong number to anyone who copies
   it. Isolated so the run is ordered on its own and cannot disturb the Arabic
   around it either. */
[dir="rtl"] [data-contact="phone"] { direction: ltr; unicode-bidi: isolate; }

/* The nav underline grows from the side the reading starts on. */
[dir="rtl"] .nav__links a::after { transform-origin: right; }

/* The drawer is pinned to the inline end by inset-inline, so off-screen is now
   the other way along the X axis. Inside the same query as the drawer itself:
   above 1199px .nav__links is an ordinary row, and translating it there threw
   the whole Arabic navigation 880px off the left of the screen. */
@media (max-width: 1199px) {
  [dir="rtl"] .nav__links { transform: translateX(-100%); }
  [dir="rtl"] body.nav-open .nav__links { transform: none; }
}

/* The card arrow points the way the reader is going. Mirrored by scaleX, and
   the hover nudge is composed on top of the flip so it still travels forward. */
[dir="rtl"] .cat__arrow svg { transform: scaleX(-1); }
[dir="rtl"] .cat:hover .cat__arrow svg { transform: scaleX(-1) translateX(4px); }

/* The viewer's chevrons. The buttons swapped sides with inset-inline, so the
   glyphs have to follow or each one points away from the picture it leads to. */
[dir="rtl"] .lightbox__nav svg { transform: scaleX(-1); }

/* The service hover rule sweeps in from the inline start. */
[dir="rtl"] .service::before { background: linear-gradient(270deg, var(--gold), transparent); }