/* ==========================================================================
   KHALAF GIBRAN AL KAABI — PREMIUM CYBER / MATH RESEARCH PORTFOLIO
   Theme: obsidian black + light gold, luxury minimal, reference-inspired.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THEME VARIABLES — the single source of truth for color, spacing, type.
   Change values here to re-skin the whole site without touching markup.
   -------------------------------------------------------------------------- */
:root {
  /* Color system: obsidian surfaces + one restrained gold accent.
     Deliberately no secondary hue — gold carries every highlight. */
  --bg-void:        #07070a;   /* deepest background (page base) */
  --bg-primary:     #0a0a0d;   /* section background */
  --bg-elevated:    #121216;   /* card / panel surface */
  --bg-elevated-2:  #17171c;   /* hovered / active surface */

  --gold:           #d3af37;   /* primary accent — matches the owner's logo gold exactly */
  --gold-light:     #e5d089;   /* hover / glow highlight — lightened tint of the logo gold */
  --gold-dim:       rgba(211, 175, 55, 0.16);   /* subtle borders */
  --gold-glow:      rgba(211, 175, 55, 0.35);   /* glow shadows */

  --text-primary:   #f2efe8;   /* main text, warm off-white (not pure white) */
  --text-secondary: #9b9ba3;   /* muted supporting text */
  --text-tertiary:  #5f5f68;   /* captions, faint labels */

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-gold:    rgba(211, 175, 55, 0.28);

  /* These flip automatically inside .theme-light sections so every
     card/glass/hover effect stays legible on both black and white backgrounds. */
  --section-bg:     var(--bg-void);
  --glass-1:        rgba(255, 255, 255, 0.045);
  --glass-2:        rgba(255, 255, 255, 0.01);
  --hover-overlay:  rgba(255, 255, 255, 0.035);

  /* Typography: Poppins / Tajawal for bold reference-style authority in
     headings, Inter / Cairo for clean readable body text. Set per-language via [lang]. */
  --font-heading-en: 'Poppins', sans-serif;
  --font-body-en:    'Inter', sans-serif;
  --font-heading-ar: 'Tajawal', sans-serif;
  --font-body-ar:    'Cairo', sans-serif;

  /* Layout rhythm */
  --container-max: 1240px;
  --section-pad:   clamp(4.5rem, 9vw, 8rem);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.25s;
  --dur-med:  0.55s;
}

/* --------------------------------------------------------------------------
   1b. PRELOADER — full-screen splash shown before content is visible.
   Fades out (opacity + visibility) once JS decides it's time; see
   initPreloader() in main.js. Placed early in the cascade since it needs
   to render correctly the instant the stylesheet parses, before layout
   for the rest of the page even matters.
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 2rem;
  background: radial-gradient(circle at 50% 42%, #0c0a06 0%, #050504 55%, #020202 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.is-fading {
  opacity: 0;
  visibility: hidden;
}
.preloader-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(211, 175, 55, 0.75);
}
.preloader-video {
  /* Responsive by width AND height (min() on both), capped by viewport
     height so the whole label -> video -> caption stack never overflows
     on short/small windows. Mobile gets its own smaller cap below. */
  width: min(750px, 75vh);
  height: min(700px, 75vh);
  object-fit: contain;
  display: block;
  /* Explicitly zeroed out — no border, box-shadow, or drop-shadow filter.
     Any of those trace the video's rectangular edges and create a visible
     "frame"/shadow that looks unintentional. If the source footage itself
     has a stray edge artifact, crop it out instead, e.g.:
     clip-path: inset(2px 2px 2px 2px); */
  border: none;
  outline: none;
  box-shadow: none;
  filter: none;
  background: transparent;
}
@media (max-width: 860px) {
  .preloader-video {
    width: min(560px, 68vh);
    height: min(560px, 68vh);
  }
}

/* ===== TEMP (reversible): modern text-based preloader standing in for the
   video above, while the original stays intact (commented out) in the markup.
   Shows only "Smart IT" / "Solutions System" — plain text, no S icon, no logo
   image. Colors/fonts here are hardcoded to match the ORIGINAL company video's
   own gold/cream wordmark (assets/video/smart-it.mp4), not this site's general
   theme — none of this reads from a --gold/--text-* variable, so it can't drift
   if the site palette changes, and nothing here affects any other component.
   To restore the video preloader: delete/comment out this block in index.html
   and uncomment the <video> block back in; these rules can stay here unused,
   they simply won't render without .preloader-text-brand. ===== */
.preloader-text-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px 16px 10px;
}
/* soft blurred amber halo behind the wordmark, echoing the glow the circular
   "S" medallion cast in the original video */
.preloader-text-brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(520px, 88vw);
  height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(224, 168, 74, 0.32) 0%, rgba(224, 168, 74, 0) 70%);
  filter: blur(6px);
}
.preloader-text-main {
  display: block;
  font-family: 'Cinzel', 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 5.4vw, 3.1rem);
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.2;
  background: linear-gradient(100deg, #a9761f 15%, #f6dd9e 40%, #fff3d6 50%, #f6dd9e 60%, #a9761f 85%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(214, 160, 66, 0.35));
  animation: preloaderGoldShine 3.4s ease-in-out infinite;
}
.preloader-text-sub {
  display: block;
  font-family: 'Cinzel', 'Poppins', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(0.7rem, 1.7vw, 0.95rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* re-centers the line under the extra trailing tracking */
  text-align: center;
  color: #ecdfc2;
  margin-top: 8px;
  opacity: 0.92;
}
@media (max-width: 860px) {
  .preloader-text-main { letter-spacing: 0.035em; }
  .preloader-text-sub { letter-spacing: 0.32em; text-indent: 0.32em; }
}
@keyframes preloaderGoldShine {
  0% { background-position: 0% 0; }
  50% { background-position: -180% 0; }
  100% { background-position: -180% 0; }
}

.preloader-divider {
  width: 40px;
  height: 2px;
  background: #d3af37;
}
.preloader-caption {
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #f2efe8;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

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

body {
  background: var(--bg-void);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.6;
  font-family: var(--font-body-en);
}

/* Language-driven typography + direction.
   The [lang="ar"] attribute is toggled by JS and switches direction, fonts,
   and letter-spacing (Arabic never wants tracked-out letter-spacing). */
html[lang="ar"] body { font-family: var(--font-body-ar); }
html[dir="rtl"] { direction: rtl; }
html[dir="ltr"] { direction: ltr; }

h1, h2, h3, h4, .font-heading {
  font-family: var(--font-heading-en);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .font-heading {
  font-family: var(--font-heading-ar);
  font-weight: 700;
  letter-spacing: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }

::selection { background: var(--gold-dim); color: var(--gold-light); }

/* Visible keyboard focus everywhere — accessibility floor */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding-block: var(--section-pad); position: relative; overflow: hidden; }

/* ---- Alternating section themes ------------------------------------------
   Applied directly on <section> elements (theme-dark / theme-light). Because
   every component below reads color from CSS variables (--text-primary,
   --bg-elevated, --border-subtle, etc.) instead of hardcoded values, cards,
   text, and hover states automatically adapt to whichever theme wraps them. */
.theme-dark {
  --section-bg: var(--bg-void);
  background: var(--section-bg);
}
.theme-light {
  --section-bg: #f6f3ec;
  background: var(--section-bg);
  --text-primary:   #17150d;
  --text-secondary: #55523f;
  --text-tertiary:  #8d8971;
  --bg-elevated:    #ffffff;
  --bg-elevated-2:  #efece1;
  --border-subtle:  rgba(23, 21, 13, 0.09);
  --border-gold:    rgba(211, 175, 55, 0.5);
  --glass-1:        rgba(23, 21, 13, 0.035);
  --glass-2:        rgba(23, 21, 13, 0.008);
  --hover-overlay:  rgba(23, 21, 13, 0.035);
  color: var(--text-primary);
}

/* Eyebrow label used above section titles — small tracked gold caption */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 1rem;
}
html[lang="ar"] .eyebrow { letter-spacing: 0.02em; text-transform: none; }
.eyebrow::before {
  content: '';
  width: 22px; height: 1px;
  background: var(--gold);
  display: inline-block;
}

.section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  margin-bottom: 0.85rem;
}
.section-subtitle {
  color: var(--text-secondary);
  max-width: 640px;
  font-size: 1.02rem;
}
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  background: var(--gold);
  color: #14120a;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px var(--gold-glow);
}
.btn-outline {
  border-color: var(--border-gold);
  color: var(--text-primary);
  background: transparent;
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  background: var(--gold-dim);
}

/* --------------------------------------------------------------------------
   3. HEADER — a small frosted-glass nav pill fixed in one corner. (The
   logo badge that used to float in the opposite corner has been removed —
   the logo now appears only within the Hero section, plus a separate
   floating WhatsApp button reusing the same logo — see section 12b.)
   The pill starts hidden (opacity: 0) and only animates in once main.js
   adds .is-ready — see initHeaderReveal() — so the entrance is actually
   seen rather than finishing invisibly before the page is ready to show it.
   Logical properties (inset-inline-*) are used throughout so it mirrors
   correctly when direction flips to rtl.
   -------------------------------------------------------------------------- */

/* Full-width invisible strip that positions the pill to one side.
   pointer-events: none so it never blocks clicks over the rest of the page;
   the pill itself re-enables pointer-events. */
.nav-pill-wrapper {
  position: fixed;
  top: 1.5rem;
  inset-inline: 0;
  z-index: 150;
  display: flex;
  justify-content: flex-end; /* pill sits on the "end" side (right in LTR, left in RTL) */
  padding-inline: 1.25rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-42px);
}
.nav-pill-wrapper.is-ready {
  animation: pill-slide-in 0.85s var(--ease-out) forwards;
}
@keyframes pill-slide-in {
  from { opacity: 0; transform: translateY(-42px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-pill {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  background: rgba(10, 10, 13, 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding-block: 0.65rem;
  padding-inline: 1.3rem 0.75rem;
  box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.6);
}

.nav-pill-brand {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.5rem);
}
.nav-links a {
  font-size: 0.85rem;
  color: rgba(242, 239, 232, 0.82);
  position: relative;
  padding-block: 0.3rem;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: #ffffff; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* Small circular language toggle — single button, always shows the
   language you'd switch TO (e.g. shows "ع" while the site is in English). */
.lang-toggle-circle {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lang-toggle-circle:hover { background: var(--gold-dim); transform: scale(1.08); }

/* Hamburger (mobile only) — three bars, each with a small gold/gray dot
   that idles back and forth, so the icon stays alive even before it's tapped. */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  padding: 0.4rem;
  flex-shrink: 0;
}
.hamburger span {
  position: relative;
  width: 22px; height: 2px;
  background: #ffffff;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
/* The idle dot: a small circle riding along each bar, sliding side to side */
.hamburger span::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-50%);
  animation: hamburger-dot-slide 3.2s ease-in-out infinite;
}
.hamburger span:nth-child(1)::after { animation-delay: 0s; }
.hamburger span:nth-child(2)::after { background: var(--text-tertiary); animation-delay: 0.35s; }
.hamburger span:nth-child(3)::after { animation-delay: 0.7s; }
@keyframes hamburger-dot-slide {
  0%, 100% { left: 0; }
  50%      { left: calc(100% - 5px); }
}
.hamburger.is-open span::after { animation: none; opacity: 0; }
.hamburger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); background: var(--gold); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background: var(--gold); }

/* Mobile nav dropdown — its own small floating frosted-glass card that
   drops from the pill, NOT a full-screen overlay. */
.mobile-dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  inset-inline-end: 1.25rem; /* matches .nav-pill-wrapper's padding-inline so it lines up under the pill */
  width: min(240px, 72vw);
  background: rgba(9, 9, 12, 0.85);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: translateY(-14px) scale(0.96);
  pointer-events: none;
  transform-origin: top right;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
/* The actual <a> links are children of #mobile-menu-links (a wrapper div
   inside .mobile-dropdown) — this needs its own flex-column, otherwise the
   links are inline elements that flow onto one line instead of stacking. */
.mobile-dropdown #mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
html[dir="rtl"] .mobile-dropdown { transform-origin: top left; }
.mobile-dropdown.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.mobile-dropdown a {
  font-size: 1.05rem;
  font-family: var(--font-heading-en);
  color: #ffffff;
  transition: color var(--dur-fast) var(--ease-out);
}
html[lang="ar"] .mobile-dropdown a { font-family: var(--font-heading-ar); }
.mobile-dropdown a:hover { color: var(--gold); }

/* Repeats every 5s: a quick confident "pop" (scale up then settle) followed
   by a long still hold — reused on the floating WhatsApp button below. */
@keyframes logo-pop {
  0%   { transform: scale(1); }
  4%   { transform: scale(0.88); }
  10%  { transform: scale(1.16); }
  16%  { transform: scale(0.97); }
  22%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   4. HERO — headline, video (one half only), and triangle+copy footer.
   Desktop: bottom-anchored text column at left, video absolute on the right.
   Mobile: reordered via flex `order` into
     [headline ~50vh] -> [video ~50vh] -> [triangle + copy, below the fold]
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* bottom-anchors the text column on desktop */
  min-height: 88svh;
  padding-block: 10.5rem 4.5rem; /* extra top clearance keeps the headline clear of the fixed badge/pill */
  overflow: hidden;
  background: var(--bg-void);
}

/* Video fills exactly one half of the hero on desktop — never the full
   background. Positioned with physical left/right (see the [dir="rtl"]
   override) so it mirrors sides correctly when the language switches. */
.hero-media {
  position: absolute;
  top: 0; right: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  order: 0;
  /* Fallback look until assets/video/hero-bg.mp4 is added — a subtle dark
     gradient + fine grid, evocative of a data/security dashboard. */
  background:
    linear-gradient(rgba(211,175,55,0.05) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(211,175,55,0.05) 1px, transparent 1px) 0 0 / 34px 100%,
    radial-gradient(120% 100% at 100% 0%, #14120a 0%, var(--bg-void) 70%);
}
html[dir="rtl"] .hero-media { right: auto; left: 0; }
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
}
.hero-media-overlay {
  /* Fades the video into the obsidian background so the seam between the
     two halves feels intentional rather than a hard cut. */
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--bg-void) 0%, transparent 42%, transparent 100%);
}
html[dir="rtl"] .hero-media-overlay {
  background: linear-gradient(to left, var(--bg-void) 0%, transparent 42%, transparent 100%);
}

.hero-headline,
.hero-footer {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-headline-inner,
.hero-footer-inner { max-width: 620px; }

.hero-logo {
  position: absolute;
  top: 1.5rem;
  inset-inline-start: 1.5rem;
  z-index: 2;
  height: 75px;
  width: 75px;
  border-radius: 50%;
  background: #0d0d10;
  border: 3px solid var(--gold);
  display: grid;
  place-items: center;
  /* Inset shadow per the reference tool (X -2px, Y 5px, blur 12px, spread
     2px) but in gold, not black — a black shadow was invisible against
     the near-black circle background. */
  box-shadow: inset -1px 3px 12px 2px rgba(211, 175, 55, 0.3);
}
.hero-logo img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  animation: logo-pop 5s var(--ease-out) infinite;
}

/* Huge, heavy, condensed uppercase headline — English uses Anton (a true
   heavy condensed display face); Arabic falls back to Tajawal at 900 since
   Anton has no Arabic glyphs. */
.hero-title {
  font-family: 'Anton', var(--font-heading-en);
  font-weight: 400; /* Anton only ships one (already black/heavy) weight */
  text-transform: uppercase;
  font-size: clamp(2.2rem, 6.2vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
}
html[lang="ar"] .hero-title { font-family: var(--font-heading-ar); font-weight: 900; text-transform: none; }
.hero-title .line { display: block; margin: 0; line-height: 0.95; }
.hero-title .white { color: #ffffff; }
.hero-title .gold { color: var(--gold); }

/* Triangle + dashed line flourish — the triangle now travels the full
   length of the dash (matching the About section's photo-deco style)
   instead of just nudging a few pixels in place. */
.hero-divider {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-block: 1.8rem;
}
.hero-triangle {
  width: 0; height: 0;
  flex-shrink: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid var(--gold);
  filter: drop-shadow(0 0 6px var(--gold-glow));
}
html[dir="rtl"] .hero-triangle {
  border-left: none;
  border-right: 18px solid var(--gold);
}
.hero-dash {
  position: relative;
  flex: 1;
  max-width: 280px;
  border-top: 3px dashed var(--gold);
  opacity: 0.6;
}
.hero-dash::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 0; height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 16px solid var(--gold-light);
  filter: drop-shadow(0 0 6px var(--gold-glow));
  transform: translateY(-50%);
  animation: deco-travel 3s ease-in-out infinite;
}
html[dir="rtl"] .hero-dash::after {
  border-left: none;
  border-right: 16px solid var(--gold-light);
  right: 0; left: auto;
  animation-name: deco-travel-rtl;
}

.hero-description {
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 480px;
}

.scroll-cue {
  position: absolute;
  bottom: 1.6rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 22px; height: 36px;
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  display: flex; justify-content: center; padding-top: 7px;
}
.scroll-cue span {
  width: 3px; height: 7px;
  border-radius: 2px;
  background: var(--gold);
  animation: scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot {
  0%   { transform: translateY(0); opacity: 1; }
  60%  { transform: translateY(9px); opacity: 0.2; }
  100% { transform: translateY(0); opacity: 0; }
}

/* --------------------------------------------------------------------------
   4b. FILM-STRIP MARQUEE — two looping gold-on-black bands crossing in an X,
   sitting in the gap between Hero and About. Each strip is a duplicated,
   infinitely-scrolling row of bordered "frames" with a dotted sprocket-hole
   line above and below, in the spirit of a cinema film reel but reworked
   with a cybersecurity accent (shield/lock glyphs sit in some frames).
   -------------------------------------------------------------------------- */
.film-marquee {
  position: relative;
  background: var(--bg-void);
  padding-block: 5.5rem;
  overflow: hidden;
}
.film-strip {
  position: absolute;
  inset-inline: -5%;
  width: 110%;
  overflow: hidden;
}
/* Two bands, rotated in opposite directions so they visually cross in an X */
.film-strip-a { top: 38%; transform: rotate(-5deg); }
.film-strip-b { top: 58%; transform: rotate(5deg); }

.film-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  padding-block: 16px; /* room for the sprocket-hole rows above/below */
  animation: film-scroll-left 26s linear infinite;
}
.film-track-reverse { animation-name: film-scroll-right; animation-duration: 30s; }
@keyframes film-scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes film-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Dotted sprocket-hole lines running the full length of each strip */
.film-track::before,
.film-track::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  background-image: repeating-linear-gradient(90deg, var(--gold) 0 5px, transparent 5px 16px);
  opacity: 0.55;
}
.film-track::before { top: 0; }
.film-track::after { bottom: 0; }

.film-frame {
  flex-shrink: 0;
  width: 92px;
  height: 56px;
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(211, 175, 55, 0.06), rgba(211, 175, 55, 0.01));
  display: grid;
  place-items: center;
  color: var(--gold);
  opacity: 0.85;
}
.film-frame svg { width: 20px; height: 20px; opacity: 0.8; }

/* Word frames size to their text instead of the fixed icon-frame square */
.film-frame-text {
  width: auto;
  min-width: 118px;
  padding-inline: 16px;
  font-family: var(--font-heading-en);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--gold-light);
}
html[lang="ar"] .film-frame-text { font-family: var(--font-heading-ar); letter-spacing: 0.02em; font-weight: 800; }

/* --------------------------------------------------------------------------
   5. SCROLL-REVEAL utility — elements fade/rise in when scrolled into view.
   JS toggles the .is-visible class via IntersectionObserver. Applied across
   every section (about, services, courses, achievements, faq, contact).
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; }

/* Retriggering variants used in the About section — unlike .reveal (which
   plays once and stays), these toggle .is-visible on and off every time the
   element enters/leaves the viewport, so the animation replays each time
   you scroll back to it (see initRetriggerReveal() in main.js). */
.reveal-left {
  opacity: 0;
  transform: translateX(-46px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  will-change: opacity, transform;
}
html[dir="rtl"] .reveal-left { transform: translateX(46px); }
/* The RTL-qualified selector here is deliberate: html[dir="rtl"] .reveal-left
   (above) and a plain .reveal-left.is-visible rule have EQUAL CSS specificity,
   so without this, the hidden-state RTL transform could keep winning even
   after .is-visible is added — leaving Arabic content permanently shifted
   46px toward the edge instead of settling at translateX(0). Repeating the
   dir="rtl" qualifier here gives this rule strictly higher specificity so
   the revealed state always wins, in both directions. */
.reveal-left.is-visible,
html[dir="rtl"] .reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(46px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  will-change: opacity, transform;
}
html[dir="rtl"] .reveal-right { transform: translateX(-46px); }
.reveal-right.is-visible,
html[dir="rtl"] .reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-drop {
  opacity: 0;
  transform: translateY(-52px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  will-change: opacity, transform;
}
.reveal-drop.is-visible { opacity: 1; transform: translateY(0); }


/* --------------------------------------------------------------------------
   6. ABOUT — profile text + photo card with an animated rotating gold border
   -------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.about-text p {
  color: var(--text-secondary);
  margin-bottom: 1.2rem;
  font-size: 1.02rem;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.2rem;
}
.stat-block {
  border-inline-start: 1px solid var(--border-gold);
  padding-inline-start: 0.9rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
.stat-block:hover { transform: translateY(-3px); }
.stat-value {
  font-family: var(--font-heading-en);
  font-size: 1.6rem;
  color: var(--gold);
}
html[lang="ar"] .stat-value { font-family: var(--font-heading-ar); }
.stat-label { color: var(--text-tertiary); font-size: 0.8rem; margin-top: 0.2rem; }

.about-photo-col { max-width: 460px; margin-inline: auto; }

/* .photo-deco-rect / .photo-deco-line below are the shared dashed-line +
   traveling-dot motif pieces, still used by .section-deco elsewhere
   (Services/Achievements dividers, the standalone Trust Quote→Services
   divider) — kept as-is. The .photo-deco *wrapper* that used to flank the
   About certificate card above/below was removed at the owner's request
   (it read as directional arrows pointing at the certificate); nothing
   else referenced that wrapper class, so it's gone rather than left dead. */
.photo-deco-rect {
  flex-shrink: 0;
  width: 22px; height: 11px;
  background: var(--gold);
  border-radius: 2px;
}
.photo-deco-line {
  position: relative;
  flex: 1;
  height: 0;
  border-top: 3px dashed var(--gold);
  opacity: 0.6;
}
.photo-deco-line::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 0; height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 16px solid var(--gold-light);
  filter: drop-shadow(0 0 6px var(--gold-glow));
  transform: translateY(-50%);
  animation: deco-travel 3s ease-in-out infinite;
}
html[dir="rtl"] .photo-deco-line::after {
  border-left: none;
  border-right: 16px solid var(--gold-light);
  right: 0; left: auto;
  animation-name: deco-travel-rtl;
}
@keyframes deco-travel {
  0%, 100% { left: 0; }
  50%      { left: calc(100% - 16px); }
}
@keyframes deco-travel-rtl {
  0%, 100% { right: 0; }
  50%      { right: calc(100% - 16px); }
}

/* Full-width variant of the same decoration, used as a section-level
   divider (Services, Achievements) rather than flanking a single photo. */
.section-deco {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.section-deco .photo-deco-line { max-width: none; }
.section-deco--standalone { padding-block: clamp(2.5rem, 5vw, 3.5rem); margin-top: 0; }

/* Circle variant — a moving dot instead of a triangle, used as a section
   break between Trust Quote and Services. */
.photo-deco-line--circle::after {
  width: 14px; height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 10px 2px var(--gold-glow);
}
html[dir="rtl"] .photo-deco-line--circle::after {
  border: none;
  background: var(--gold-light);
}

/* Sealed-certificate cover — the About card shows only the generic
   rolled/ribboned cover graphic (assets/images/certificate cover
   image.jpg), floating directly on the section's own background with no
   card box around it, plus a small gold caption hint underneath. Clicking
   anywhere on it plays the .is-revealing "unsealing" animation below, then
   opens the actual certificate — composited into the real template — in
   #cert-modal (unchanged; see initCertModal in main.js).

   The cover image's own pure-white background is removed WITHOUT touching
   the source file: mix-blend-mode:multiply on the <img> multiplies white
   pixels out to exactly whatever is painted behind them — so
   .about-cert-cover is given an explicit background:var(--section-bg)
   (the About section's own cream), making the square canvas edge
   disappear and leaving only the rolled paper + gold ribbon visible.
   isolation:isolate scopes that blending to this element's own stacking
   context, so it can only ever blend against that explicit background (or
   the ::before/::after layers below) — never against sibling content
   elsewhere on the page. The same blending lets the ::before (ambient gold
   glow) and ::after (soft grounding shadow) layers behind the image show
   through its "invisible" white areas, which is what sells the
   "resting/floating naturally" look instead of a hard rectangle. */
.about-cert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Continuous slow float/sway — kept on its own wrapper, separate from the
   hover-lift transform below, so the two transforms (keyframe animation on
   the parent, hover transition on the child) compose instead of fighting
   over the same property. */
.about-cert-float {
  width: min(240px, 60vw);
  animation: cert-cover-float 7s ease-in-out infinite;
}
/* Asymmetric 4-point drift (rather than a single back-and-forth) so the
   sway reads as a suspended physical object gently settling, not a
   mechanical up/down loop. */
@keyframes cert-cover-float {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-5px) rotate(-0.8deg); }
  50%  { transform: translateY(-8px) rotate(0.5deg); }
  75%  { transform: translateY(-3px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .about-cert-float { animation: none; }
}

.about-cert-cover {
  position: relative;
  isolation: isolate;
  background: var(--section-bg);
  width: 100%;
  aspect-ratio: 1 / 1;
  transition: transform var(--dur-med) var(--ease-out);
}
.about-cert-card:hover .about-cert-cover,
.about-cert-card:focus-visible .about-cert-cover {
  transform: translateY(-6px) scale(1.035) rotate(-1.2deg);
}

/* Ambient gold glow, sitting behind the image; brightens on hover to read
   as the certificate catching light rather than a generic drop-shadow. */
.about-cert-cover::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 68%);
  opacity: 0.3;
  transition: opacity var(--dur-med) var(--ease-out);
}
.about-cert-card:hover .about-cert-cover::before,
.about-cert-card:focus-visible .about-cert-cover::before {
  opacity: 0.6;
}

/* Soft grounding shadow beneath the roll, so it reads as resting on the
   section rather than cut out and pasted on. */
.about-cert-cover::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 2%;
  height: 20%;
  z-index: 0;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3) 0%, transparent 72%);
  filter: blur(4px);
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}
.about-cert-card:hover .about-cert-cover::after,
.about-cert-card:focus-visible .about-cert-cover::after {
  transform: scale(1.08);
  opacity: 0.85;
}

.about-cert-cover-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
}

/* Modern stand-in for the removed arrow motif: a single soft diagonal
   gold-light sweep over the ribbon/seal on hover, instead of any pointing
   indicator. mix-blend-mode:soft-light so it only lifts existing tones
   (reads as light catching the gold ribbon) rather than washing the
   certificate out. Sits above the image (z-index 2); a plain sibling
   element rather than another pseudo-element, since ::before/::after on
   .about-cert-cover are already the glow/shadow layers. */
.about-cert-shimmer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.6) 48%, transparent 62%);
  background-size: 240% 240%;
  background-position: -30% -30%;
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out), background-position 0.9s var(--ease-out);
}
.about-cert-card:hover .about-cert-shimmer,
.about-cert-card:focus-visible .about-cert-shimmer {
  opacity: 1;
  background-position: 130% 130%;
}

/* Reveal micro-animation: the cover briefly scales up and dissolves right
   before the modal opens (~380ms, see initCertModal in main.js), reading as
   the sealed certificate being opened rather than a plain image enlarging.
   It's reset the instant the modal overlay covers it, so there's no
   visible snap-back once .is-revealing is removed. */
.about-cert-card.is-revealing .about-cert-cover {
  transform: scale(1.09);
  opacity: 0;
  transition: transform 0.38s var(--ease-out), opacity 0.38s var(--ease-out);
}

/* Minimal interaction hint — echoes the site's own .eyebrow caption
   language (small tracked gold uppercase label) rather than a button, so
   it reads as an elegant invitation, not a generic CTA. */
.about-cert-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), letter-spacing var(--dur-fast) var(--ease-out);
}
html[lang="ar"] .about-cert-hint { letter-spacing: 0.02em; text-transform: none; }
.about-cert-hint svg { flex-shrink: 0; }
.about-cert-card:hover .about-cert-hint,
.about-cert-card:focus-visible .about-cert-hint {
  opacity: 1;
  color: var(--gold-light);
  letter-spacing: 0.18em;
}
html[lang="ar"] .about-cert-card:hover .about-cert-hint,
html[lang="ar"] .about-cert-card:focus-visible .about-cert-hint {
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   6c. CERTIFICATE MODAL — full-screen popup, opened once the About card's
   unsealing reveal animation finishes (see .is-revealing above and
   initCertModal in main.js). Lives at body level in the markup so it sits
   above everything and isn't clipped by any section. Composites the real
   certificate scans onto assets/images/certificate template.jpg: the frame
   <img> is sized via max-width/max-height (so the browser itself solves
   the "fit within both viewport dimensions, keep aspect ratio" problem),
   and .cert-modal-frame shrink-wraps to that rendered size so the
   percentage-positioned inset area always lines up.

   The inset area (.cert-modal-inset) is a 2-slide swipeable slider: both
   language scans sit side by side in .cert-modal-track, which
   initCertModal() slides via a translateX transform. Nav arrows / dots are
   positioned relative to .cert-modal-content (not .cert-modal-frame, which
   clips to its rounded corners) so they stay visible outside the frame's
   own edges. -------------------------------------------------------------- */
.cert-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 3rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med) var(--ease-out);
}
.cert-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.cert-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, 0.86);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cert-modal-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  direction: ltr; /* keep nav/dots/zoom placement fixed regardless of page RTL */
}
.cert-modal-frame {
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.7);
}
.cert-modal-frame-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(560px, 90vw);
  max-height: 86vh;
}
.cert-modal-inset {
  position: absolute;
  top: 18%;
  left: 8%;
  width: 84%;
  height: 66%;
  overflow: hidden;
  direction: ltr;
  touch-action: none;
  cursor: grab;
}
.cert-modal-inset.is-dragging {
  cursor: grabbing;
}
.cert-modal-track {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform var(--dur-med) var(--ease-out);
}
.cert-modal-inset.is-dragging .cert-modal-track {
  transition: none;
}
.cert-modal-slide {
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cert-modal-inset-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform var(--dur-fast) var(--ease-out);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.cert-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  background: rgba(10, 10, 13, 0.6);
  color: var(--gold-light);
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cert-modal-nav:hover {
  background: var(--gold);
  color: #14120a;
}
.cert-modal-nav:disabled {
  opacity: 0.35;
  pointer-events: none;
}
.cert-modal-nav-prev {
  left: clamp(-1.75rem, -6vw, -0.5rem);
}
.cert-modal-nav-next {
  right: clamp(-1.75rem, -6vw, -0.5rem);
}
.cert-modal-dots {
  position: absolute;
  bottom: clamp(-2rem, -4vw, -1.25rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}
.cert-modal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  background: rgba(10, 10, 13, 0.6);
  padding: 0;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cert-modal-dot.is-active {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.2);
}
.cert-modal-close {
  position: absolute;
  top: clamp(0.75rem, 3vw, 2rem);
  inset-inline-end: clamp(0.75rem, 3vw, 2rem);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  background: rgba(10, 10, 13, 0.6);
  color: var(--gold-light);
  font-size: 1.6rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cert-modal-close:hover {
  background: var(--gold);
  color: #14120a;
  transform: translateY(-2px);
}
body.no-scroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   6b. TRUST QUOTE — a large statement quote attributed to the owner,
   between About and Services. Diagonal gold/black stripes stand in for the
   owner's own background photo until one is supplied (see data.json
   trustQuote.backgroundImage, applied inline by renderTrustQuote()).
   -------------------------------------------------------------------------- */
.trust-quote-section {
  position: relative;
  padding-block: clamp(6rem, 12vw, 9rem);
  overflow: hidden;
  text-align: center;
  background-color: #050506;
  background-image: repeating-linear-gradient(45deg, rgba(211, 175, 55, 0.09) 0 2px, transparent 2px 28px);
  background-size: cover;
  background-position: center;
}
.trust-quote-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 6, 0.35), rgba(5, 5, 6, 0.88));
}
.trust-quote-section .container {
  position: relative;
  z-index: 1;
  max-width: 900px;
}
.trust-quote-mark {
  font-family: 'Anton', var(--font-heading-en);
  font-size: 5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.65;
  margin-bottom: 0.5rem;
}
.trust-quote-text {
  font-family: 'Anton', var(--font-heading-en);
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.2;
  color: #ffffff;
  margin-block: 0.5rem 1.6rem;
  min-height: 2.4em; /* keeps the section from jumping height between short/long quotes */
  filter: blur(0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Outgoing: sink + shrink + blur. Incoming: reverse, settling into place. */
.trust-quote-text.is-leaving {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  filter: blur(6px);
}
.trust-quote-text.is-entering {
  opacity: 0;
  transform: translateY(-14px) scale(0.96);
  filter: blur(6px);
}
html[lang="ar"] .trust-quote-text { font-family: var(--font-heading-ar); font-weight: 800; text-transform: none; }

/* --------------------------------------------------------------------------
   7. SERVICES / FEATURES — card-free reference-style layout: heading +
   paragraph + tag pills per service, separated by a continuously moving
   gold dashed divider (vertical on desktop, horizontal on mobile).
   -------------------------------------------------------------------------- */
#services {
  position: relative;
  background-color: var(--bg-void);
  /* Faint fallback texture until services.backgroundImage is set in
     data.json (applied inline by renderServices) — a real photo will sit
     under this same dark overlay once supplied. */
  background-image:
    radial-gradient(60% 50% at 15% 10%, rgba(211, 175, 55, 0.06), transparent 70%),
    radial-gradient(50% 40% at 90% 90%, rgba(211, 175, 55, 0.05), transparent 70%);
  background-size: cover;
  background-position: center;
}
#services .container { position: relative; z-index: 1; }

/* Background video — hidden (display:none) until services.backgroundVideo
   is set in data.json; renderServices() reveals it and loads the source. */
.services-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.55;
}
.services-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(7,7,10,0.55), rgba(7,7,10,0.85));
  pointer-events: none;
}

.services-row {
  display: flex;
  align-items: stretch;
}
.service-block {
  flex: 1;
  min-width: 0;
  padding-inline: clamp(1rem, 2.4vw, 2.2rem);
}
.service-block:first-child { padding-inline-start: 0; }
.service-block:last-child { padding-inline-end: 0; }

.service-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border-gold);
  display: grid; place-items: center;
  color: var(--gold);
  margin-bottom: 1.3rem;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.service-block:hover .service-icon { background: var(--gold-dim); transform: rotate(-6deg) scale(1.08); }
.service-block h3 { font-size: 1.25rem; margin-bottom: 0.8rem; }
.service-block p { color: var(--text-secondary); font-size: 0.94rem; margin-bottom: 1.4rem; }

.service-tags { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.service-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-light);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
}
html[lang="ar"] .service-tag { letter-spacing: 0.01em; }

/* The moving divider: a column (or row, on mobile) of small gold dashes
   that continuously scrolls, built from a repeating gradient tile. */
.service-divider {
  flex-shrink: 0;
  width: 2px;
  align-self: stretch;
  background-image: repeating-linear-gradient(180deg, var(--gold) 0 7px, transparent 7px 18px);
  background-size: 100% 36px;
  animation: divider-scroll-v 2.4s linear infinite;
  opacity: 0.85;
}
@keyframes divider-scroll-v {
  from { background-position-y: 0; }
  to   { background-position-y: 36px; }
}

/* --------------------------------------------------------------------------
   8. COURSES
   -------------------------------------------------------------------------- */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
}

/* Wrapper carries the same rotating conic-gradient border used on the
   About photo card — a continuously moving gold outline around each
   course. The inner .course-card holds the actual background photo. */
.course-card-wrap {
  border-radius: var(--radius-md);
  padding: 3px;
  background: conic-gradient(from var(--border-angle),
    var(--gold-dim), var(--gold), var(--gold-light), var(--gold), var(--gold-dim));
  animation: spin-border 7s linear infinite;
  transition: transform var(--dur-fast) var(--ease-out);
}
.course-card-wrap:hover { transform: translateY(-4px); }

.course-card {
  height: 100%;
  border-radius: calc(var(--radius-md) - 2px);
  padding: 1.9rem;
  background-size: cover;
  background-position: center;
}
.course-audience {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--gold);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  margin-bottom: 1rem;
}
.course-card h3 { font-size: 1.08rem; margin-bottom: 0.6rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.course-card p { color: rgba(242, 239, 232, 0.85); font-size: 0.92rem; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.course-book-btn { margin-top: 1.1rem; padding: 0.65rem 1.4rem; font-size: 0.85rem; }

/* ==========================================================================
   COURSE BOOKING MODAL — opens over the page when a course card's "Book
   Now" button is clicked (see js/booking-form.js). Reuses .contact-form,
   .form-group, .form-notice and .btn from the Contact form above; only
   the overlay/panel chrome itself is new.
   ========================================================================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  padding: 1.5rem;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 8, 0.72);
  backdrop-filter: blur(6px);
}
.modal-overlay.is-open { display: flex; }

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: 2.2rem;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  animation: modal-in 0.3s var(--ease-out);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-panel h3 {
  font-size: 1.3rem;
  margin-bottom: 1.4rem;
  color: var(--text-primary);
  padding-right: 2rem;
}
html[dir="rtl"] .modal-panel h3 { padding-right: 0; padding-left: 2rem; }

.modal-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.modal-close:hover { border-color: var(--gold); color: var(--gold-light); }
html[dir="rtl"] .modal-close { right: auto; left: 1.2rem; }

/* Persistent success state — replaces the form once a booking is
   submitted, stays visible until closed (see js/booking-form.js). Uses
   the same gold accent as .form-notice.is-success rather than green, to
   match this site's existing "success = gold" convention. */
.booking-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
  padding: 0.5rem 0 0.2rem;
}
.booking-success.is-visible { display: flex; }
.booking-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  color: var(--gold-light);
  background: var(--gold-dim);
  border: 1px solid var(--border-gold);
  animation: modal-in 0.35s var(--ease-out);
}
.booking-success-message {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.55;
}
.booking-success .btn { min-width: 150px; }

/* --------------------------------------------------------------------------
   9. ACHIEVEMENTS — vertical timeline
   -------------------------------------------------------------------------- */
.timeline { position: relative; padding-inline-start: 2rem; }
.timeline::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 6px; bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold), transparent);
}
.timeline-item { position: relative; padding-bottom: 2.6rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(-2rem + 1px);
  top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--section-bg), 0 0 16px 2px var(--gold-glow);
}
.timeline-year {
  color: var(--gold);
  font-family: var(--font-heading-en);
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}
html[lang="ar"] .timeline-year { font-family: var(--font-heading-ar); }
.timeline-item h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.timeline-item p { color: var(--text-secondary); font-size: 0.92rem; }

/* Certificate carousel — sits below the timeline within the same merged
   Achievements & Certifications section. Text-only cards (title, issuer,
   year); no "View Document" button per the owner's request. */
.cert-carousel { margin-top: clamp(3rem, 6vw, 4.5rem); }
.cert-carousel .eyebrow { margin-bottom: 1.6rem; }
.carousel {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.carousel-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: carousel-scroll 30s linear infinite;
  cursor: grab;
}
.carousel-track.is-paused { animation-play-state: paused; }
.carousel-track:active { cursor: grabbing; }
@keyframes carousel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
html[dir="rtl"] .carousel-track { animation-name: carousel-scroll-rtl; }
@keyframes carousel-scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
.cert-card {
  flex: 0 0 auto;
  width: min(300px, 76vw);
  background: linear-gradient(160deg, var(--glass-1), var(--glass-2));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: 1.7rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.6);
  user-select: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.cert-card:hover {
  transform: scale(1.08) translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 0 30px -6px var(--gold-glow);
  z-index: 2;
  position: relative;
}
.cert-card .cert-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  color: var(--gold);
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
}
.cert-card h4 { font-size: 1rem; margin-bottom: 0.3rem; }
.cert-card .cert-issuer { color: var(--text-secondary); font-size: 0.84rem; margin-bottom: 0.2rem; }
.cert-card .cert-year { color: var(--text-tertiary); font-size: 0.78rem; }

/* --------------------------------------------------------------------------
   10. FAQ — accordion
   -------------------------------------------------------------------------- */
.faq-list { border-top: 1px solid var(--border-subtle); }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  color: var(--text-primary);
  text-align: start;
  padding: 1.5rem 1rem;
  margin-inline: -1rem;
  border-radius: var(--radius-sm);
  font-size: 1.02rem;
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.faq-item.is-open .faq-question {
  background: var(--gold);
  color: #14120a;
}
.faq-item.is-open .faq-question .plus {
  border-color: #14120a;
  color: #14120a;
}
.faq-question .plus {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold);
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-item.is-open .faq-question .plus { transform: rotate(135deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-out);
}
.faq-answer p { color: var(--text-secondary); padding-bottom: 1.6rem; max-width: 720px; font-size: 0.96rem; }

/* --------------------------------------------------------------------------
   11. CONTACT FORM
   -------------------------------------------------------------------------- */
.contact-big-heading { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
}
.contact-info-list { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; }
.contact-icon-btn {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  color: var(--gold);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.contact-icon-btn:hover {
  background: var(--gold);
  color: #14120a;
  transform: translateY(-3px);
}

.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
/* Without this, the browser's default [hidden] -> display:none is
   overridden by the display:flex rule above (author styles always beat
   user-agent defaults at equal specificity), so form.hidden = true in
   js/booking-form.js's showSuccess() would silently do nothing. */
.contact-form[hidden] { display: none; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label { font-size: 0.82rem; color: var(--text-secondary); }
.form-group input, .form-group textarea {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.form-group input:focus, .form-group textarea:focus {
  border-color: var(--gold);
  outline: none;
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group input.is-invalid, .form-group textarea.is-invalid {
  border-color: #e05a5a;
}
.form-group input[readonly] {
  cursor: default;
  opacity: 0.72;
}

/* Theme-matching notice box — replaces the browser's native validation
   popups entirely (form has novalidate). Two states: error (soft red,
   for "please fill in..." messages) and success (gold, confirmation). */
.form-notice {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  border: 1px solid transparent;
  animation: notice-in 0.35s var(--ease-out);
}
.form-notice.is-visible { display: flex; }
.form-notice.is-error {
  background: rgba(224, 90, 90, 0.1);
  border-color: rgba(224, 90, 90, 0.4);
  color: #e88989;
}
.form-notice.is-success {
  background: var(--gold-dim);
  border-color: var(--border-gold);
  color: var(--gold-light);
}
@keyframes notice-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border-subtle);
  padding-block: 2.4rem;
}
.footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-copy { color: var(--text-tertiary); font-size: 0.85rem; }
.footer-social { display: flex; gap: 1rem; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  display: grid; place-items: center;
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}
.footer-social a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }

/* "Designed by" credit — the design studio's logo (not the owner's) */
.footer-designed-by {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--text-tertiary);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.footer-designed-by:hover { opacity: 0.75; }
.footer-designed-by span {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-designed-by img {
  height: 200px;
  width: auto;
}
/* Wrap sizes exactly to the logo image so the icon-mask can be positioned
   with percentages that stay correct at any rendered size. */
.footer-logo-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}
/* Temporary cover for the S-icon badge only — matches the footer's flat
   background so the icon reads as hidden without altering the source
   logo asset. Delete this rule (and its span in the markup) to restore
   the icon. */
.footer-logo-icon-mask {
  position: absolute;
  left: 7%;
  top: 33.5%;
  width: 27%;
  height: 32%;
  background: var(--bg-void);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   12b. FLOATING WHATSAPP BUTTON — the site's one persistent/sticky element,
   bottom-right, using the owner's logo. Hidden until initFloatingWhatsApp()
   (main.js) adds .is-visible once the hero has scrolled out of view.
   -------------------------------------------------------------------------- */
.whatsapp-fab {
  position: fixed;
  bottom: 1.75rem;
  inset-inline-end: 1.75rem;
  z-index: 180;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #0d0d10;
  border: 1px solid var(--border-gold);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(24px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.whatsapp-fab.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.whatsapp-fab:hover {
  transform: translateY(-4px) scale(1.05);
}
/* Pulsing gold glow ring — continuously fades in and out around the button */
.whatsapp-fab::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: fab-glow-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fab-glow-pulse {
  0%, 100% { opacity: 0; transform: scale(0.92); }
  50%      { opacity: 0.85; transform: scale(1.12); }
}
.whatsapp-fab img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  animation: logo-pop 5s var(--ease-out) infinite;
}

/* --------------------------------------------------------------------------
   13. CUSTOM CURSOR — modern gold dot with a trailing "shadow" glow.
   Only enabled on precise-pointer devices (real mice/trackpads); touch
   devices keep their normal default behavior entirely untouched.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  * { cursor: none; }

  .cursor-dot,
  .cursor-glow {
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    will-change: transform;
  }

  /* Small solid gold dot — tracks the pointer almost instantly */
  .cursor-dot {
    width: 9px; height: 9px;
    background: var(--gold-light);
    box-shadow: 0 0 8px 1px var(--gold-glow);
    transition: transform 0.06s linear, width 0.2s var(--ease-out), height 0.2s var(--ease-out);
  }

  /* Larger soft glow — deliberately slower via JS lerp, creating a
     trailing "moving shadow" behind the dot as the cursor travels */
  .cursor-glow {
    width: 34px; height: 34px;
    background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
    filter: blur(2px);
    transition: width 0.2s var(--ease-out), height 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
  }

  /* Grows slightly over links/buttons/cards for a tactile "hover" cue */
  .cursor-dot.is-hovering { width: 14px; height: 14px; }
  .cursor-glow.is-hovering { width: 52px; height: 52px; opacity: 0.8; }
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE — tablet & mobile
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: repeat(2, 1fr); row-gap: 1.4rem; }
  .film-marquee { padding-block: 3.5rem; }
  .film-frame { width: 68px; height: 42px; }
  .film-frame-text { min-width: 88px; padding-inline: 10px; font-size: 0.62rem; }
  /* Image first, then text — per the mobile layout request */
  .about-photo-col { order: -1; margin-bottom: 1rem; }

  /* Services stack vertically; dividers become horizontal moving lines
     between each stacked service instead of vertical columns. */
  .services-row { flex-direction: column; }
  .service-block {
    padding-inline: 0;
    padding-block: 1.6rem;
  }
  .service-block:first-child { padding-block-start: 0; }
  .service-block:last-child { padding-block-end: 0; }
  .service-divider {
    width: 100%;
    height: 2px;
    align-self: auto;
    background-image: repeating-linear-gradient(90deg, var(--gold) 0 7px, transparent 7px 18px);
    background-size: 36px 100%;
    animation-name: divider-scroll-h;
  }
  @keyframes divider-scroll-h {
    from { background-position-x: 0; }
    to   { background-position-x: 36px; }
  }
}

@media (max-width: 900px) {
  /* Hero becomes a simple flex column, reordered so the flow reads:
     header -> [name + big headline, ~50% of the screen]
            -> [looping video, the other ~50%]
            -> [triangle + short copy, revealed by scrolling further]. */
  .hero {
    min-height: auto;
    padding-block: 0;
    justify-content: flex-start;
  }
  .hero-media {
    position: relative;
    order: 2;
    width: 100%;
    height: 50svh;
  }
  .hero-media-overlay {
    background: linear-gradient(180deg, transparent 55%, var(--bg-void) 100%);
  }
  .hero-headline {
    order: 1;
    min-height: 50svh;
    display: flex;
    align-items: center;
    padding-block: 2.5rem;
    /* Clears the fixed nav pill + logo badge sitting in the top corners */
    padding-top: clamp(7rem, 25vw, 9rem);
  }
  .hero-headline-inner,
  .hero-footer-inner { max-width: 100%; }
  .hero-footer {
    order: 3;
    padding-block: 2.6rem 3rem;
  }
  .scroll-cue { display: none; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 480px) {
  .nav-pill-brand { display: none; } /* keep the pill tight on very small phones */
}