/* ============================================================
   منفّذون — Sage Garden design tokens (21st.dev theme "sage-garden")
   Concept 2 · Studio — RTL · light + dark.
   ============================================================ */

:root {
  /* — Sage Garden (verbatim from 21st.dev, OKLCH) — */
  --background:         oklch(0.976 0.004 91.446);
  --foreground:         oklch(0.242 0.030 269.883);
  --card:               oklch(1 0 0);
  --card-foreground:    oklch(0.242 0.030 269.883);
  --primary:            oklch(0.633 0.031 154.904);
  --primary-foreground: oklch(1 0 0);
  --secondary:          oklch(0.860 0.029 119.992);
  --secondary-foreground: oklch(0.242 0.030 269.883);
  --muted:              oklch(0.925 0.007 88.645);
  --muted-foreground:   oklch(0.551 0.023 264.364);
  --accent:             oklch(0.824 0.022 136.609);
  --accent-foreground:  oklch(0.242 0.030 269.883);
  --destructive:        oklch(0.562 0.174 26.143);
  --border:             oklch(0.925 0.007 88.645);
  --input:              oklch(1 0 0);
  --ring:               oklch(0.633 0.031 154.904);
  --chart-2:            oklch(0.721 0.049 120.947);
  --chart-3:            oklch(0.674 0.043 136.011);

  /* — Derived (for AA contrast; the theme's primary is 3.3:1 on white) — */
  --primary-strong:     oklch(0.470 0.040 154.904);  /* sage text / buttons with white label */
  --primary-soft:       oklch(0.950 0.014 140);      /* tinted wash */
  --border-strong:      oklch(0.870 0.010 100);
  --ink:                oklch(0.205 0.026 269.883);  /* deep surfaces */
  --ink-foreground:     oklch(0.965 0.006 91.446);

  /* — Brand gold (منفّذون identity) — accent only, never body text — */
  --gold:               #B08D57;  /* lines, dots, fills */
  --gold-ink:           #8A6C3E;  /* small text on light (4.56:1) */

  --radius:     0.35rem;
  --radius-md:  0.75rem;
  --radius-lg:  1.25rem;
  --radius-xl:  1.75rem;

  --shadow-color: 26 31 46;
  --shadow-xs: 0 1px 2px rgb(var(--shadow-color) / .04);
  --shadow-sm: 0 1px 3px rgb(var(--shadow-color) / .06), 0 1px 2px rgb(var(--shadow-color) / .04);
  --shadow-md: 0 12px 28px -8px rgb(var(--shadow-color) / .12), 0 4px 10px -4px rgb(var(--shadow-color) / .06);
  --shadow-lg: 0 32px 64px -20px rgb(var(--shadow-color) / .22);

  --font-sans:    "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-display: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --nav-h: 68px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);   /* iOS sheet curve */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background:         oklch(0.185 0.012 264);
    --foreground:         oklch(0.945 0.006 91.446);
    --card:               oklch(0.225 0.014 264);
    --card-foreground:    oklch(0.945 0.006 91.446);
    --primary:            oklch(0.720 0.048 154.904);
    --primary-foreground: oklch(0.185 0.012 264);
    --secondary:          oklch(0.330 0.025 130);
    --secondary-foreground: oklch(0.945 0.006 91.446);
    --muted:              oklch(0.265 0.012 264);
    --muted-foreground:   oklch(0.720 0.015 264);
    --accent:             oklch(0.360 0.025 140);
    --accent-foreground:  oklch(0.945 0.006 91.446);
    --border:             oklch(0.290 0.012 264);
    --input:              oklch(0.225 0.014 264);
    --primary-strong:     oklch(0.780 0.055 154.904);
    --primary-soft:       oklch(0.250 0.020 150);
    --border-strong:      oklch(0.360 0.012 264);
    --ink:                oklch(0.140 0.012 264);
    --gold:               #CBAE7E;
    --gold-ink:           #CBAE7E;
    --shadow-color: 0 0 0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --background:         oklch(0.185 0.012 264);
  --foreground:         oklch(0.945 0.006 91.446);
  --card:               oklch(0.225 0.014 264);
  --card-foreground:    oklch(0.945 0.006 91.446);
  --primary:            oklch(0.720 0.048 154.904);
  --primary-foreground: oklch(0.185 0.012 264);
  --secondary:          oklch(0.330 0.025 130);
  --secondary-foreground: oklch(0.945 0.006 91.446);
  --muted:              oklch(0.265 0.012 264);
  --muted-foreground:   oklch(0.720 0.015 264);
  --accent:             oklch(0.360 0.025 140);
  --accent-foreground:  oklch(0.945 0.006 91.446);
  --border:             oklch(0.290 0.012 264);
  --input:              oklch(0.225 0.014 264);
  --primary-strong:     oklch(0.780 0.055 154.904);
  --primary-soft:       oklch(0.250 0.020 150);
  --border-strong:      oklch(0.360 0.012 264);
  --ink:                oklch(0.140 0.012 264);
  --gold:               #CBAE7E;
  --gold-ink:           #CBAE7E;
  --shadow-color: 0 0 0;
  color-scheme: dark;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--secondary); color: var(--secondary-foreground); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: -60px; right: 16px; z-index: 200; background: var(--foreground); color: var(--background); padding: 10px 16px; border-radius: var(--radius-md); transition: top .2s; }
.skip-link:focus { top: 12px; }

.section { padding-block: clamp(72px, 10vw, 128px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600;
  color: var(--gold-ink);
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--gold); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--card);
  font-size: 13px; font-weight: 500; color: var(--muted-foreground);
}
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in oklch, var(--gold) 25%, transparent); }
.title-xl { font-size: clamp(2.4rem, 5.6vw, 4.6rem); letter-spacing: -.01em; }
.title-lg { font-size: clamp(2rem, 4vw, 3.2rem); }
.title-md { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted-foreground); max-width: 56ch; }
.muted { color: var(--muted-foreground); }

/* ---------- Buttons (21st / shadcn style) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 15.5px; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .2s var(--ease-out), background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--dark { background: var(--foreground); color: var(--background); }
.btn--dark:hover { background: color-mix(in oklch, var(--foreground) 86%, var(--primary)); }
.btn--sage { background: var(--primary-strong); color: var(--primary-foreground); }
.btn--sage:hover { background: color-mix(in oklch, var(--primary-strong) 88%, black); }
.btn--outline { background: var(--card); border-color: var(--border-strong); color: var(--foreground); box-shadow: var(--shadow-xs); }
.btn--outline:hover { background: var(--muted); }
.btn--ghost { color: var(--foreground); padding-inline: 12px; }
.btn--ghost:hover { color: var(--primary-strong); }
.btn--block { width: 100%; }
.btn--light { background: var(--ink-foreground); color: var(--ink); }
.btn--light:hover { background: white; }

/* ---------- Scroll progress ---------- */
.scroll-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 120; pointer-events: none;
  background: var(--gold); transform-origin: right; transform: scaleX(var(--sp, 0)); }

/* ---------- Navbar ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color .3s, box-shadow .3s, backdrop-filter .3s;
}
.nav.is-scrolled {
  background: color-mix(in oklch, var(--background) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { display: block; flex: none; }
.brand__mark img { height: 44px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-family: var(--font-display); font-size: 18px; }
.brand__text small { font-size: 12px; color: var(--muted-foreground); }
.nav__links { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav__links a:not(.btn) {
  padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--muted-foreground);
  transition: color .2s, background-color .2s;
}
.nav__links a:not(.btn):hover, .nav__links a[aria-current="true"] { color: var(--foreground); }
.nav__links { position: relative; }
.nav__end { display: flex; align-items: center; gap: 8px; flex: none; }
.nav__loc {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--muted-foreground);
  transition: color .2s, background-color .2s;
}
.nav__loc svg { flex: none; color: var(--gold-ink); }
.nav__loc:hover { color: var(--foreground); background: var(--muted); }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 12px; place-items: center; }
.nav__toggle span { display: block; width: 20px; height: 1.6px; background: currentColor; margin: 4px auto; transition: transform .3s var(--ease-out), opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: grid; }
  .nav__links { display: none; }
  .nav__end { margin-inline-start: auto; }
}

/* ---------- Side menu — 3D door panel + page tilt ---------- */
.sheet { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.sheet.is-open { pointer-events: auto; }
.sheet__scrim { position: absolute; inset: 0; background: rgb(10 12 18 / .28); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity .35s ease; }
.sheet.is-open .sheet__scrim { transition-duration: .55s; }
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet__panel {
  position: absolute; inset: 10px 10px 10px auto; width: min(400px, calc(100vw - 48px)); display: flex; flex-direction: column;
  padding: 16px 22px max(22px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: 0 30px 70px -20px rgb(var(--shadow-color) / .35), 0 8px 24px -8px rgb(var(--shadow-color) / .12);
  transform-origin: right center; transform: translateX(calc(100% + 24px)) scale(.97); opacity: .6;
  transition: transform .42s var(--ease-sheet), opacity .3s ease; will-change: transform;
}
.sheet.is-open .sheet__panel { transform: none; opacity: 1; transition-duration: .62s, .4s; }
.sheet__panel::before { content: ""; position: absolute; inset: 0 22px auto; height: 2px; border-radius: 2px; background: linear-gradient(to left, transparent, var(--gold), transparent); opacity: .7; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.sheet__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; }
.sheet__brand small { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 12px; color: var(--muted-foreground); }
.sheet__close { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-strong); background: var(--background); transition: background-color .2s, transform .4s var(--ease-out); }
.sheet__close:hover { background: var(--muted); transform: rotate(90deg); }
.sheet__kicker { margin-top: 26px; font-size: 13px; color: var(--gold-ink); display: flex; align-items: center; gap: 10px; }
.sheet__kicker::before { content: ""; width: 24px; height: 1px; background: var(--gold); }

.sheet__nav { display: flex; flex-direction: column; margin-top: 10px; perspective: 700px; }
.sheet__nav a {
  display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 5.2vw, 1.45rem); line-height: 1.35;
  transform: translateY(14px); opacity: 0; filter: blur(4px);
  transition: transform .5s var(--ease-sheet), opacity .3s ease, filter .3s ease; transition-delay: 0ms;
}
.sheet.is-open .sheet__nav a { transform: none; opacity: 1; filter: none; transition-duration: .7s, .55s, .55s; transition-delay: calc(140ms + var(--i) * 45ms); }
.sheet__n { font-family: var(--font-mono), var(--font-sans); font-size: 11px; font-weight: 400; color: var(--gold-ink); min-width: 22px; }

/* Word-level 3D swap (Arabic letters must stay joined, so each word flips as a unit) */
.flip { display: inline-flex; flex-wrap: wrap; gap: 0 .28em; }
.flip__w { display: inline-block; perspective: 500px; }
.flip__cube { --h: .675em; display: grid; transform-style: preserve-3d; transform: translateZ(calc(var(--h) * -1)); transition: transform .55s var(--ease-out); transition-delay: calc(var(--w) * 60ms); }
.flip__cube > span { grid-area: 1 / 1; backface-visibility: hidden; transform: translateZ(var(--h)); }
.flip__cube > span + span { color: var(--gold-ink); transform: rotateX(90deg) translateZ(var(--h)); }
@media (hover: hover) { .sheet__nav a:hover .flip__cube { transform: translateZ(calc(var(--h) * -1)) rotateX(-90deg); } }
.sheet__nav a:focus-visible .flip__cube { transform: translateZ(calc(var(--h) * -1)) rotateX(-90deg); }

.sheet__media { position: relative; margin-top: 22px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; background: var(--muted); flex: none;
  opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .5s var(--ease-sheet); }
.sheet.is-open .sheet__media { opacity: 1; transform: none; transition-duration: .6s, .8s; transition-delay: 380ms; }
.sheet__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.sheet__media img.is-swap { opacity: 0; }
.sheet__media figcaption { position: absolute; inset: auto 0 0; padding: 12px 14px; font-size: 13px; color: white; background: linear-gradient(to top, rgb(0 0 0 / .6), transparent); }
.sheet__foot { margin-top: auto; padding-top: 22px; display: grid; gap: 8px; font-size: 14px; opacity: 0; transition: opacity .5s; }
.sheet.is-open .sheet__foot { opacity: 1; transition-delay: 440ms; }
.sheet__foot a:not(.btn) { color: var(--muted-foreground); justify-self: start; }
.sheet__foot a:not(.btn):hover { color: var(--gold-ink); }
.sheet__foot .btn { margin-top: 10px; }

/* Page tilts back as the door opens */
.page3d { transition: transform .45s var(--ease-sheet), border-radius .45s var(--ease-sheet), filter .45s ease; transform-origin: 0 var(--oy, 50vh); }
html.menu-open .page3d { transition-duration: .65s; }
html.menu-open .page3d { transform: perspective(1600px) translateX(-3%) rotateY(4deg) scale(.95); border-radius: 22px; overflow: clip; filter: brightness(.95) saturate(.92); }
html.menu-open { overflow: hidden; }
html.menu-open .fab-whatsapp, html.menu-open .nav { opacity: 0; pointer-events: none; }
.nav { transition: background-color .3s, box-shadow .3s, backdrop-filter .3s, opacity .4s; }
.fab-whatsapp { transition: transform .25s var(--ease-out), background-color .2s, opacity .3s; }

@media (prefers-reduced-motion: reduce) {
  .sheet__panel, .sheet__nav a, .sheet__media { transform: none !important; filter: none !important; }
  html.menu-open .page3d { transform: none; filter: none; }
  .flip__cube, .flip__cube > span { transform: none !important; }
  .flip__cube > span + span { display: none; }
}

/* ---------- Form fields ---------- */
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--foreground);
  background: var(--input); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 12px 14px; transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-foreground); opacity: .8; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 22%, transparent); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--destructive); }
.field__error { font-size: 13px; color: var(--destructive); min-height: 1em; }
.form__note { font-size: 14px; min-height: 1.4em; }
.form__note.is-success { color: var(--primary-strong); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px;
  background: rgb(10 12 18 / .88); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img { max-height: 82vh; max-width: min(92vw, 1100px); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.lightbox figcaption { color: #e6e8e3; text-align: center; margin-top: 12px; font-size: 14px; }
.lightbox__btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(255 255 255 / .1); color: white; font-size: 26px; line-height: 1; transition: background-color .2s;
}
.lightbox__btn:hover { background: rgb(255 255 255 / .2); }
.lightbox__close { top: 20px; left: 20px; }
.lightbox__prev { right: 20px; top: 50%; translate: 0 -50%; }
.lightbox__next { left: 20px; top: 50%; translate: 0 -50%; }

/* ---------- Reveal (Blur Out Up — educalvolpz/blur-out-up) ---------- */
.reveal { opacity: 0; transform: translateY(18px); filter: blur(8px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
.blur-words .w { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.35em); transition: opacity .7s var(--ease-out), filter .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i) * 70ms + var(--d, 0ms)); }
.blur-words.is-in .w { opacity: 1; filter: none; 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, .blur-words .w { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   Page layout — Studio
   ============================================================ */
/* Concept 2 · Studio — Kufi display, mono meta labels, crisp hairlines */
:root { --font-display: "Noto Kufi Arabic", sans-serif; }
.mono { font-family: var(--font-mono), var(--font-sans); font-size: 12.5px; color: var(--muted-foreground); }
.eyebrow { font-family: var(--font-sans); }

/* HERO — 21st: ibrandify/featured-project-hero */
.hero { padding: calc(var(--nav-h) + 48px) 0 64px; }
.hero__line { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.hero__line::before { content: ""; width: 32px; height: 1px; background: var(--gold); }
.hero__line.mono { color: var(--gold-ink); }
.hero__head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end; }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.25; font-weight: 800; }
.hero__side p { color: var(--muted-foreground); }
.hero__count { margin-top: 18px; display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--muted-foreground); }
.hero__count strong { color: var(--foreground); }
.tabs { position: relative; display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 40px 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border-strong); }
.tab { display: inline-flex; align-items: center; gap: 12px; padding: 6px 2px; min-height: 48px; font-weight: 500; color: var(--muted-foreground); transition: color .35s ease; }
.tab:hover, .tab[aria-selected="true"] { color: var(--foreground); }

/* Number badge with a gold progress ring for the autoplay timer */
.tab__n { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px;
  background: var(--muted); transition: background-color .4s ease, color .4s ease, transform .45s var(--ease-sheet), box-shadow .4s ease; }
.tab__ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg) scaleY(-1); pointer-events: none; overflow: visible; }
.tab__ring circle { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transition: opacity .3s; }
.tab[aria-selected="true"] .tab__n { background: var(--foreground); color: var(--background); }
.tab[aria-selected="true"] .tab__ring circle { opacity: 1; }
.is-auto .tab[aria-selected="true"] .tab__ring circle { animation: ring-fill 6s linear forwards; }
.tabs:not(.is-auto) .tab[aria-selected="true"] .tab__ring circle { stroke-dashoffset: 0; }
@keyframes ring-fill { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* Label reveal on selection */
.tab__label { display: inline-block; }
.tab.is-enter .tab__label { animation: tab-label .6s var(--ease-sheet); }
@keyframes tab-label { from { opacity: .3; filter: blur(4px); transform: translateY(6px); } }

/* Gold ink that glides along the bottom border to the selected tab */
.tabs__ink { position: absolute; bottom: -1.5px; left: 0; height: 2px; border-radius: 2px; background: var(--gold); pointer-events: none;
  transition: transform .55s var(--ease-sheet), width .55s var(--ease-sheet); }
.tabs__ink.is-instant { transition: none; }
.tabs__ink.is-moving { animation: ink-stretch .55s var(--ease-sheet); }
@keyframes ink-stretch { 40% { height: 3px; filter: drop-shadow(0 0 6px color-mix(in oklch, var(--gold) 60%, transparent)); } }

.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 14px; }

/* Mobile rhythm: desktop section padding leaves large empty bands on phones */
@media (max-width: 640px) {
  .section { padding-block: 56px; }
  .hero { padding-bottom: 20px; }
  #about { padding-top: 28px; padding-bottom: 48px; }
  .bcard--hero { gap: 22px; padding: 24px 22px; }
  .bcard--hero h2 { margin: 0 0 10px; }
  .feature__body { padding-block: 4px 0; }
  .feature__diff { margin-bottom: 20px; }
}

/* Mobile: one swipeable row instead of wrapping */
@media (max-width: 640px) {
  .tabs {
    flex-wrap: nowrap; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 14px; scroll-padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(to left, black calc(100% - 36px), transparent); mask-image: linear-gradient(to left, black calc(100% - 36px), transparent);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; white-space: nowrap; min-height: 44px; gap: 10px; }
  .tab__n { width: 32px; height: 32px; font-size: 11.5px; }
}

@media (hover: hover) {
  .tab:not([aria-selected="true"]):hover .tab__n { transform: translateY(-3px); background: color-mix(in oklch, var(--gold) 22%, var(--muted)); box-shadow: 0 6px 14px -6px rgb(var(--shadow-color) / .35); }
}
@keyframes fill { to { transform: scaleX(1); } }

.feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.feature__media { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--muted); border: 1px solid var(--border); min-height: 420px; }
.feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease-out), transform 1.2s var(--ease-out); }
.feature__media img.is-out { opacity: 0; transform: scale(1.05); }
.feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(12 14 20 / .45), transparent 30%, transparent 70%, rgb(12 14 20 / .5)); }
.feature__corner { position: absolute; z-index: 2; color: white; font-family: var(--font-mono), var(--font-sans); font-size: 12.5px; }
.feature__corner--tl { top: 20px; right: 22px; font-family: var(--font-display); font-size: 15px; }
.feature__corner--tr { top: 22px; left: 22px; }
.feature__corner--bl { bottom: 20px; right: 22px; }
.feature__corner--br { bottom: 20px; left: 22px; }
.feature__body { display: flex; flex-direction: column; justify-content: center; padding-block: 12px; }
.feature__body > * { transition: opacity .4s var(--ease-out), transform .5s var(--ease-out); }
.feature__body.is-out > * { opacity: 0; transform: translateY(10px); }
.feature h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; margin: 10px 0 12px; }
.feature p { color: var(--muted-foreground); font-size: 1.1rem; }
.ftags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; }
.ftags span { border: 1px solid var(--border-strong); border-radius: 8px; padding: 4px 10px; font-size: 13.5px; background: var(--card); }
.feature__diff { border-top: 1px solid var(--border-strong); padding-top: 18px; margin-bottom: 26px; }
.feature__diff strong { display: block; margin-top: 4px; }
.feature__diff .mono { color: var(--gold-ink); }
.feature .btn { align-self: start; }

/* ABOUT — 21st: ln-dev7/bento-02 (hero card) */
.bcard { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 28px; }
.bcard--hero { display: grid; grid-template-columns: 1.4fr auto; gap: 32px; align-items: center; padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(135deg, var(--card), var(--primary-soft)); }
.bcard--hero h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 800; margin: 0 0 12px; }
.bcard__actions { display: flex; flex-direction: column; gap: 10px; }
.bcard__actions .btn svg { color: currentColor; }
@media (max-width: 640px) { .bcard__actions { flex-direction: row; flex-wrap: wrap; } .bcard__actions .btn { flex: 1 1 140px; } }

/* SERVICES — 21st: anubra266/accordion (icon + chevron) with media */
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.center h2 { font-weight: 800; margin-top: 10px; }
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: 48px; }
.svc__media { position: relative; aspect-ratio: 4/4.4; border-radius: var(--radius-xl); overflow: hidden; background: var(--muted); }
.svc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--ease-out), transform 1s var(--ease-out); }
.svc__media img:not(.is-on) { opacity: 0; transform: scale(1.06); }
.svc__list { display: grid; gap: 10px; }
.svc__item { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--card); transition: background-color .3s, border-color .3s; }
.svc__item.is-open { border-color: var(--primary); background: var(--primary-soft); }
.svc__btn { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: start; font-weight: 600; font-size: 1.08rem; min-height: 56px; }
.svc__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--background); border: 1px solid var(--border); color: var(--primary-strong); flex: none; }
.svc__chev { margin-inline-start: auto; transition: transform .3s var(--ease-out); color: var(--muted-foreground); }
.svc__item.is-open .svc__chev { transform: rotate(180deg); }
.svc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.svc__item.is-open .svc__panel { grid-template-rows: 1fr; }
.svc__panel > div { overflow: hidden; }
.svc__panel p { padding: 0 18px 18px; padding-inline-start: 72px; color: var(--muted-foreground); font-size: 15.5px; }
.svc__thumb { display: none; }

/* STATS — 21st: cnippet-dev/counting-number */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--border-strong); }
.numbers > div { padding: 36px 24px; }
.numbers > div + div { border-inline-start: 1px solid var(--border-strong); }
.numbers strong { display: block; font-family: var(--font-display); font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 800; line-height: 1.1; }
.numbers span { color: var(--muted-foreground); font-size: 14.5px; }

/* PROJECTS — 21st: 0xUrvish/fluid-expanding-grid */
.shead { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; }
.shead h2 { font-weight: 800; margin-top: 10px; }
.fluid { display: flex; gap: 12px; height: clamp(420px, 60vh, 560px); }
.fluid__item { position: relative; flex: 1; min-width: 0; border-radius: var(--radius-lg); overflow: hidden; color: white; text-align: start; transition: flex .7s var(--ease-out); isolation: isolate; }
.fluid__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fluid__item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(10 12 18 / .78), rgb(10 12 18 / .1) 60%); }
.fluid__item.is-active { flex: 3.2; }
.fluid__body { position: absolute; inset: auto 0 0; padding: 24px; }
.fluid__n { font-family: var(--font-mono); font-size: 12px; opacity: .8; }
.fluid__item h3 { font-size: clamp(1.2rem, 2vw, 1.8rem); white-space: nowrap; }
.fluid__more { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease-out), opacity .4s; }
.fluid__item.is-active .fluid__more { max-height: 160px; opacity: 1; }
.fluid__more p { font-size: 15px; opacity: .9; margin-top: 6px; max-width: 42ch; }
.fluid__more span { display: inline-block; margin-top: 10px; font-size: 13px; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / .16); backdrop-filter: blur(6px); }

/* GALLERY — 21st: anurag-mishra22/interactive-bento-gallery */
.gallery { background: var(--card); border-block: 1px solid var(--border); }
.bgal { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 12px; }
.bgal button { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--muted); }
.bgal img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), opacity .4s; }
.bgal button:hover img { transform: scale(1.05); }
.bgal .s-wide { grid-column: span 2; }
.bgal .s-tall { grid-row: span 2; }
.bgal .s-big { grid-column: span 2; grid-row: span 2; }
.gal__bar { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }

/* WHY — 21st: aceternity/timeline */
.tl { position: relative; max-width: 960px; margin-inline: auto; }
.tl__line { position: absolute; top: 0; bottom: 0; right: 27px; width: 2px; background: var(--border-strong); border-radius: 2px; overflow: hidden; }
.tl__line i { position: absolute; inset: 0 0 auto; height: calc(var(--tp, 0) * 100%); background: linear-gradient(to bottom, var(--gold), var(--primary-strong)); }
.tl__item { display: grid; grid-template-columns: 56px 1fr 1.2fr; gap: 24px; padding-block: 40px; }
.tl__dot { position: sticky; top: 40vh; width: 56px; height: 56px; border-radius: 50%; background: var(--background); border: 1px solid var(--border-strong); display: grid; place-items: center; color: var(--primary-strong); align-self: start; z-index: 1; transition: border-color .3s; }
.tl__item.is-on .tl__dot { border-color: var(--gold); color: var(--gold-ink); }
.tl__item h3 { position: sticky; top: 40vh; align-self: start; font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 800; color: var(--muted-foreground); transition: color .3s; }
.tl__item.is-on h3 { color: var(--foreground); }
.tl__body { padding-top: 6px; }
.tl__body p { font-size: 1.1rem; color: var(--muted-foreground); }
.tl__body img { margin-top: 18px; border-radius: var(--radius-lg); aspect-ratio: 16/10; object-fit: cover; width: 100%; }

/* CONTACT — 21st: jatin-yadav05/lets-work-section */
.lets { text-align: center; }
.lets .lead { margin-inline: auto; }
.lets h2 { font-size: clamp(3rem, 9vw, 7rem); line-height: 1.2; font-weight: 700; margin-top: 0; }
.lets h2 .ghost { display: block; color: color-mix(in oklch, var(--muted-foreground) 55%, var(--background)); }
.lets__go { width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; margin: 32px auto; transition: background-color .3s, color .3s, transform .4s var(--ease-out); }
.lets__go:hover { background: var(--foreground); color: var(--background); transform: rotate(-45deg); }
.lets__go svg { width: 28px; height: 28px; }
.lets__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 14px; font-size: 14px; letter-spacing: .06em; color: var(--muted-foreground); }
.lets__links a:hover { color: var(--foreground); }
@media (max-width: 600px) { .lets__links { flex-direction: column; } .lets__links span { display: none; } }
.formcard { max-width: 720px; margin: 48px auto 0; text-align: start; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow-md); display: grid; gap: 14px; }
.formcard__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* FOOTER — minimal centred */
.footer { padding: 56px 0 100px; margin-top: 64px; border-top: 1px solid var(--border); }
.foot { display: flex; flex-direction: column; align-items: center; gap: 18px; font-size: 14px; color: var(--muted-foreground); text-align: center; }
.foot__logo img { height: 120px; width: auto; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 15px; }
.foot nav a { padding: 6px 2px; transition: color .2s; }
.foot nav a:hover { color: var(--foreground); }
.foot a[data-maps] { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot a[data-maps]:hover { color: var(--foreground); }

@media (max-width: 960px) {
  .hero__head, .feature, .bcard--hero, .svc { grid-template-columns: 1fr; }
  /* Mobile: the image lives inside the open item instead of beside the list */
  .svc__media { display: none; }
  .svc { margin-top: 32px; }
  .svc__thumb { display: block; width: calc(100% - 36px); margin: 0 18px 18px; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-md); }
  .svc__panel p { padding-inline-start: 18px; }
  .feature__media { min-height: 320px; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .numbers > div:nth-child(3) { border-inline-start: 0; }
  .numbers > div:nth-child(n+3) { border-top: 1px solid var(--border-strong); }
  .fluid { flex-direction: column; height: auto; }
  .fluid__item { flex: none; height: 110px; transition: height .6s var(--ease-out); }
  .fluid__item.is-active { flex: none; height: 360px; }
  .bgal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .tl__item { grid-template-columns: 56px 1fr; }
  .tl__item h3 { position: static; }
  .tl__body { grid-column: 2; padding-top: 0; }
}
@media (max-width: 600px) {
  .formcard__row { grid-template-columns: 1fr; }
  .tl__item { gap: 16px; }
}

/* ---------- Floating WhatsApp ---------- */
.fab-whatsapp {
  position: fixed; bottom: 20px; left: 20px; z-index: 150;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-strong); color: var(--primary-foreground); box-shadow: var(--shadow-lg);
  transition: transform .25s var(--ease-out), background-color .2s;
}
.fab-whatsapp:hover { transform: translateY(-3px); background: color-mix(in oklch, var(--primary-strong) 88%, black); }
.fab-whatsapp svg { width: 26px; height: 26px; }

/* ============================================================
   Micro-interactions — switching & hover
   21st: ayushmxxn/tubelight-navbar (sliding pill) · cnippet-dev/text-roll ·
         danielpetho/underline-animation
   ============================================================ */

/* Sliding pill for the nav links */
.pill {
  position: absolute; top: 0; left: 0; z-index: 0; border-radius: 999px; pointer-events: none; opacity: 0;
  transition: transform .5s var(--ease-sheet), width .5s var(--ease-sheet), height .5s var(--ease-sheet), opacity .25s ease;
}
.pill.is-instant { transition: none; }
.has-pill > a, .has-pill > button { position: relative; z-index: 1; }
.nav__links .pill { background: var(--muted); }
.nav__links .pill::after { content: ""; position: absolute; inset: auto 30% -6px; height: 2px; border-radius: 2px; background: var(--gold); opacity: 0; transition: opacity .3s; }
.nav__links .pill.is-current::after { opacity: 1; }

/* Buttons — label roll, shine, lift */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .25s var(--ease-out), background-color .25s, color .25s, border-color .25s, box-shadow .3s; }
.roll { display: inline-block; height: 1.5em; line-height: 1.5em; overflow: hidden; vertical-align: middle; }
.roll__in { display: flex; flex-direction: column; transition: transform .45s var(--ease-sheet); }
.roll__in > span { display: block; height: 1.5em; white-space: nowrap; }
.btn::after {
  content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .22) 50%, transparent 65%);
  transform: translateX(110%); transition: transform .7s var(--ease-out);
}
.btn--outline::after, .btn--light::after { background: linear-gradient(105deg, transparent 35%, color-mix(in oklch, var(--gold) 22%, transparent) 50%, transparent 65%); }
.btn svg { transition: transform .35s var(--ease-out); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgb(var(--shadow-color) / .45); }
  .btn:hover .roll__in { transform: translateY(-50%); }
  .btn:hover::after { transform: translateX(-110%); }
  .btn:hover svg { transform: translateX(-3px); }
  .btn:hover svg[data-ic="arrowUp"] { transform: translate(-2px, -2px) rotate(-8deg); }
  .btn:active { transform: translateY(0) scale(.97); }
}

/* Press ripple — every button-like control */
.ripple-host { position: relative; overflow: hidden; }
.ripple-host > :not(.ripple):not(.pill) { position: relative; z-index: 1; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  width: var(--rs); height: var(--rs); left: var(--rx); top: var(--ry); margin: calc(var(--rs) / -2) 0 0 calc(var(--rs) / -2);
  background: currentColor; opacity: .18; transform: scale(0); animation: ripple .6s var(--ease-out) forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* Services accordion */
.svc__btn { border-radius: inherit; }
.svc__ic { transition: transform .45s var(--ease-sheet), background-color .3s, color .3s, border-color .3s; }
.svc__item { transition: background-color .3s, border-color .3s, transform .35s var(--ease-out), box-shadow .35s; }
@media (hover: hover) {
  .svc__item:not(.is-open):hover { transform: translateX(-4px); border-color: var(--primary); box-shadow: var(--shadow-sm); }
  .svc__item:hover .svc__ic { transform: rotate(-8deg) scale(1.08); }
  .svc__item:not(.is-open):hover .svc__chev { transform: translateY(2px); }
}
.svc__item.is-open .svc__ic { background: var(--primary-strong); color: var(--primary-foreground); border-color: transparent; }

/* Round icon buttons */
.roundbtn svg, .lightbox__btn, .sheet__close svg { transition: transform .35s var(--ease-out); }
@media (hover: hover) {
  .lets__go:hover svg { transform: scale(1.1); }
  .chip { transition: border-color .3s, transform .3s var(--ease-out); }
  .chip:hover { border-color: var(--gold); transform: translateY(-1px); }
}

/* Footer links — underline grows from the reading start */
.foot nav a { position: relative; }
.foot nav a::after { content: ""; position: absolute; inset: auto 0 2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-sheet); }
.foot nav a:hover::after, .foot nav a:focus-visible::after { transform: scaleX(1); }

/* Floating WhatsApp — pulse ring on hover */
.fab-whatsapp::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--primary-strong); opacity: 0; }
@media (hover: hover) { .fab-whatsapp:hover::before { animation: ring 1.2s var(--ease-out) infinite; } }
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* Gallery & project tiles — keyboard focus mirrors hover */
.bgal button:focus-visible img, .fluid__item:focus-visible img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .roll__in, .btn::after, .ripple { display: none; }
  .roll__in { display: flex; transform: none !important; }
}


/* ============================================================
   Location — 3D Iraq map (from rawafid-card-design, map/iraq-scene)
   ============================================================ */
.loc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.loc__info .title-lg { font-weight: 800; margin: 10px 0 12px; }
.loc__office { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding: 16px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--card); }
.loc__office small { display: block; font-size: 12.5px; color: var(--muted-foreground); }
.loc__office strong { font-family: var(--font-display); font-size: 1.15rem; }
.loc__pin { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--ink); color: var(--gold); position: relative; }
.loc__pin::after { content: ""; position: absolute; inset: -4px; border-radius: 17px; border: 1.5px solid var(--gold); opacity: 0; animation: pin-ring 2.4s var(--ease-out) infinite; }
@keyframes pin-ring { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }

.loc__sites { display: grid; gap: 8px; margin-top: 14px; }
.loc__sites button {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 16px; min-height: 56px; text-align: start;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: transparent;
  transition: background-color .3s, border-color .3s, transform .35s var(--ease-out);
}
.loc__sites strong { display: block; font-weight: 600; }
.loc__sites small { display: block; font-size: 13px; color: var(--muted-foreground); }
.loc__n { font-family: var(--font-mono), var(--font-sans); font-size: 12px; color: var(--gold-ink); min-width: 22px; }
.loc__sites button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-foreground); }
.loc__sites button[aria-pressed="true"] small { color: color-mix(in oklch, var(--ink-foreground) 70%, transparent); }
.loc__sites button[aria-pressed="true"] .loc__n { color: var(--gold); }
@media (hover: hover) { .loc__sites button:not([aria-pressed="true"]):hover { border-color: var(--gold); transform: translateX(-4px); } }
.loc__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* map stage */
.loc__map { position: relative; margin: 0; }
.locmap {
  position: relative; height: clamp(380px, 46vw, 600px); border-radius: var(--radius-xl); overflow: hidden; touch-action: pan-y; user-select: none;
  border: 1px solid var(--border); background: radial-gradient(120% 90% at 50% 40%, var(--card) 0%, var(--background) 60%, var(--muted) 100%);
}
.locmap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; cursor: grab; }
.locmap canvas:active { cursor: grabbing; }
.locmap.gl-on canvas { opacity: 1; }
.locmap__fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px 24px 56px; transition: opacity .6s ease; }
.locmap.gl-on .locmap__fallback { opacity: 0; visibility: hidden; }
.locmap__fallback svg { width: 100%; height: 100%; max-width: 420px; overflow: visible; }
.fb-land { fill: var(--card); stroke: var(--border-strong); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 10px 14px rgb(var(--shadow-color) / .14)); }
.fb-route { fill: none; stroke: #16283C; stroke-width: 2.4; stroke-linecap: round; opacity: .6; stroke-dasharray: 220; stroke-dashoffset: 220; }
.locmap__fallback .fb-route { animation: fb-draw 1.4s var(--ease-out) .4s forwards; }
@keyframes fb-draw { to { stroke-dashoffset: 0; } }
.fb-site { fill: #16283C; }
.fb-hub { fill: var(--gold); }
.fb-ring { fill: none; stroke: var(--gold); stroke-width: 2; animation: ring2 2.4s ease-out infinite; }
@keyframes ring2 { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }

/* labels projected from the 3D scene */
.locmap__labels { position: absolute; inset: 0; pointer-events: none; }
.locmap .lbl {
  position: absolute; left: 0; top: 0; pointer-events: auto; border: 0; white-space: nowrap; cursor: pointer;
  background: color-mix(in oklch, var(--card) 90%, transparent); color: var(--foreground);
  font: 600 12px/1 var(--font-sans); padding: 7px 10px; border-radius: 999px; box-shadow: 0 1px 4px rgb(var(--shadow-color) / .18);
  will-change: transform; transition: opacity .25s ease, background-color .2s, color .2s;
}
.locmap .lbl::after { content: ""; position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); border-radius: 1px; }
.locmap .lbl[data-side="t"]::after { left: 50%; bottom: -4px; margin-left: -4px; }
.locmap .lbl[data-side="b"]::after { left: 50%; top: -4px; margin-left: -4px; }
.locmap .lbl[data-side="r"]::after { left: -4px; top: 50%; margin-top: -4px; }
.locmap .lbl[data-side="l"]::after { right: -4px; top: 50%; margin-top: -4px; }
.locmap .lbl.hub { background: #16283C; color: #fff; box-shadow: 0 0 0 2px var(--gold); pointer-events: none; z-index: 2; font-size: 12.5px; }
.locmap .lbl.on { background: #16283C; color: #fff; }
.locmap .lbl.ref { background: none; box-shadow: none; padding: 1px 2px; color: var(--muted-foreground); font-weight: 500; font-size: 10.5px; line-height: 1.15; pointer-events: none;
  text-shadow: 0 0 3px var(--card), 0 0 3px var(--card); }
.locmap .lbl.ref::after { display: none; }
.locmap .lbl.hide { opacity: 0; pointer-events: none; }
.locmap__cap { position: absolute; inset: auto 0 16px; display: flex; justify-content: center; pointer-events: none; }
.locmap__cap span { font-size: 13px; font-weight: 500; color: var(--foreground); background: color-mix(in oklch, var(--card) 85%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--border); padding: 7px 14px; border-radius: 999px; transition: opacity .25s; }
.locmap__cap i { display: none; }
.locmap__cap span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-inline-end: 8px; vertical-align: 1px; }

@media (max-width: 960px) {
  .loc { grid-template-columns: 1fr; }
  .locmap { height: clamp(320px, 88vw, 460px); }
}
@media (max-width: 600px) { .locmap .lbl { font-size: 10.5px; padding: 5px 7px; } .locmap .lbl.ref { font-size: 9px; padding: 0 1px; } }
@media (prefers-reduced-motion: reduce) { .loc__pin::after, .fb-ring { animation: none; } .fb-route { stroke-dashoffset: 0; } }