/* =========================================================================
   DR. MUBARAK AL-EMADI — STYLESHEET
   Organized by section. Each numbered block below matches a section of the
   page in reading order, so anyone new to the file can find things fast.
   ========================================================================= */

/* ===== 1) DESIGN TOKENS =====
   Central place for every color, spacing unit, and shared value. Change a
   token here and it updates everywhere it's used — this is what keeps the
   whole site visually consistent without hunting through the file. */
:root {
  /* Brand colors — unchanged from the original Qatar maroon identity */
  --maroon: #8a1538;
  --maroon-dark: #5e0e26;
  --maroon-deep: #430a1b;
  --white: #ffffff;
  --tint: #f7e9ec; /* lighter tint than before — more whitespace, less "painted" */
  --gold: #e8c27a; /* single deliberate warm accent — used sparingly (tagline, small highlights) */
  --text: #2b1c20; /* slightly darker than original for better contrast */
  --text-muted: #6b5a5e;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  --radius: 16px;
  --radius-lg: 28px;
  --max: 1160px;

  /* Shadows — softer, single-layer ambient shadows replace the old
     multi-layer inset/gloss "neumorphic" effect. This is the single
     biggest change that moves the site from dated to premium. */
  --shadow-sm: 0 2px 10px rgba(67, 10, 27, 0.08);
  --shadow-md: 0 12px 30px rgba(67, 10, 27, 0.12);
  --shadow-lg: 0 24px 60px rgba(67, 10, 27, 0.18);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 2) BASE / RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  width: 100%;
}

/* ===== Themed scrollbar =====
   Replaces the plain default OS scrollbar with a slim maroon/gold one
   that matches the rest of the site, instead of looking like an
   unstyled leftover next to an otherwise custom-designed page. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(67, 10, 27, 0.25);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(67, 10, 27, 0.25);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold) 0%, #c99a4e 100%);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
  background-clip: padding-box;
}

/* Respect visitors who've asked their OS to reduce motion — accessibility
   requirement, and also just good practice for a professional site. */
@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;
  }
}

/* Page background is now a deep maroon gradient edge-to-edge (matching the
   Tony Robbins-style reference: a dark brand-colored canvas with white
   content cards floating on top), instead of the previous white/pink wash. */
body {
  font-family: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  color: var(--white);
  line-height: 1.65;
  background: linear-gradient(
    160deg,
    var(--maroon-deep) 0%,
    var(--maroon-dark) 45%,
    var(--maroon) 100%
  );
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Arabic text gets its own typeface — Tajawal reads far better in RTL
   than a Latin system font stack, and looks intentional rather than
   like an afterthought. Applied wherever content is marked lang="ar". */
[lang="ar"] {
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}
ul,
ol {
  list-style: none;
}
img {
  max-width: 100%;
  display: block;
}

/* Skip link — invisible until focused, lets keyboard users bypass the nav */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--maroon);
  color: var(--white);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  z-index: 100;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 1rem;
}

/* Visible focus states everywhere — required for keyboard accessibility */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--maroon);
  outline-offset: 3px;
}

/* ===== 3) TOP BAR + BRAND ===== */

/* Solid maroon, white text, sticky at the top — no transparency, since the
   hero below it is now a light photo rather than a dark video. */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  height: 72px;
  background: linear-gradient(
    160deg,
    var(--maroon) 0%,
    var(--maroon-dark) 100%
  );
  color: var(--white);
  padding: 0 var(--space-md);
  padding-left: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
  box-sizing: border-box;
  /* Fixed height on purpose — the logo is allowed to be taller than this
     bar and simply overflow it slightly (see .brand-logo) rather than
     stretching the bar itself every time the logo size changes. */
  overflow: visible;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
}
/* Logo stays static (no motion), no ring/outline — just a clean, bigger
   mark that reads clearly against the maroon nav. */
.brand-logo {
  height: 200px;
  width: auto;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}
.brand:hover .brand-logo {
  transform: scale(1.05);
}

/* Temporarily hides the "S" badge baked into the left side of the logo
   PNG (icon + wordmark are one image). To bring the icon back, delete
   this rule (or remove the "logo-s-hidden" class from the <img> tags). */
.logo-s-hidden {
  clip-path: inset(0 0 0 34.5%);
}

/* ===== 4) NAVIGATION ===== */
.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.main-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.main-nav a,
.main-nav .lang-btn,
.main-nav summary {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--white);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.88;
  transition:
    opacity 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.main-nav a:hover,
.main-nav a:focus,
.main-nav .lang-btn:hover,
.main-nav .lang-btn:focus,
.main-nav summary:hover,
.main-nav summary:focus {
  opacity: 1;
  transform: translateY(-1px);
}
.main-nav .nav-icon {
  width: 20px;
  height: 20px;
  fill: var(--white);
}

/* Active section indicator — thin underline that grows in from the center,
   toggled by main.js as the visitor scrolls (initActiveNavHighlight) */
.nav-link {
  position: relative;
  padding-bottom: 3px;
}
.nav-link::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition:
    left 0.25s var(--ease),
    right 0.25s var(--ease);
}
.nav-link.is-active {
  opacity: 1;
  font-weight: 700;
}
.nav-link.is-active::after {
  left: 0;
  right: 0;
}

/* Hidden on desktop; only the hamburger toggle is shown under 800px */
.hamburger {
  display: none;
}

@media (max-width: 799px) {
  .main-nav {
    display: none;
  } /* replaced by the mobile slide-down menu */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px; /* 44px meets the minimum comfortable touch-target size */
    background: none;
    border: none;
    cursor: pointer;
  }
  .hamburger span {
    width: 22px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition:
      transform 0.2s var(--ease),
      opacity 0.2s var(--ease);
  }
  /* X transformation when the mobile menu is open */
  .hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ===== 5) MOBILE MENU =====
   A full-width panel that slides down under the nav. Toggled by
   initMobileMenu() in main.js via the [hidden] attribute + .is-open class
   (the class drives the open animation; [hidden] keeps it out of the
   accessibility tree and tab order while closed). */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  background: linear-gradient(
    160deg,
    var(--maroon) 0%,
    var(--maroon-dark) 100%
  );
  /* Was a fixed 90px, which no longer cleared the taller nav bar once the
     logo grew — that's what was cutting off "Home" behind the nav. */
  padding: 100px var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  box-shadow: var(--shadow-lg);
}
/* Same fix as .popup-overlay above — without this, toggling [hidden] via
   JS wouldn't actually hide the menu, since display:flex here would win. */
.mobile-menu[hidden] {
  display: none;
}
.mobile-link {
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.mobile-menu-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-sm);
}
.mobile-menu-footer a svg {
  fill: var(--white);
}
.mobile-menu-social {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lang-btn--mobile {
  color: var(--white);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  padding: 0.5rem 1rem;
  border-radius: 999px;
}

/* Thin maroon strip — used once, between the final CTA and the footer */
.section-divider {
  height: 4px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    var(--maroon-dark),
    var(--maroon),
    var(--maroon-dark)
  );
}

/* ===== 6) CONTACT WIDGET =====
   Fixed bottom-right, matching a chat-widget pattern: a round toggle
   bubble that's always visible, and a card panel that appears above it
   when open. Auto-opens once per browser session (initContactWidget in
   main.js), and can be reopened any time by clicking the bubble — this is
   the "premium contact experience" replacing the old plain WhatsApp circle. */
.contact-widget {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.contact-panel {
  width: min(340px, calc(100vw - 44px));
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform-origin: bottom right;
  animation: panelIn 0.25s var(--ease);
}
/* Toggled via [hidden] — no author display rule conflicts with it here,
   since .contact-panel doesn't declare its own display value. */
@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.contact-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(
    160deg,
    var(--maroon) 0%,
    var(--maroon-dark) 100%
  );
  color: var(--white);
  padding: 14px 16px;
}
.contact-panel-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}
.contact-panel-icon svg {
  fill: var(--white);
}
.contact-panel-name {
  font-weight: 700;
  font-size: 0.95rem;
  flex: 1;
}
.contact-panel-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  cursor: pointer;
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.2s var(--ease);
}
.contact-panel-close:hover {
  background: rgba(255, 255, 255, 0.32);
}

.contact-panel-body {
  padding: 16px;
  text-align: right;
}
.contact-panel-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--maroon);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.contact-panel-message {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}
.contact-panel-cta {
  width: 100%;
}

/* The round toggle bubble — a soft pulsing ring behind it draws initial
   attention without being distracting (single slow pulse cycle, not a
   constant flashing loop). Icon crossfades between chat/close glyphs. */
.contact-bubble {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(
    160deg,
    var(--maroon) 0%,
    var(--maroon-dark) 100%
  );
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.contact-bubble:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--shadow-lg);
}
.contact-bubble-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--maroon);
  opacity: 0;
  animation: bubblePulse 3s ease-out infinite;
}
@keyframes bubblePulse {
  0% {
    transform: scale(0.9);
    opacity: 0.55;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.contact-bubble-icon {
  fill: var(--white);
}

@media (max-width: 480px) {
  .contact-widget {
    bottom: 16px;
    right: 16px;
  }
  .contact-bubble {
    width: 54px;
    height: 54px;
  }
}

/* ===== 7) HERO SECTION — "Full-Bleed Photo + Floating Video Card" =====
   His portrait fills the frame as the background (with the full-bleed
   breakout fix so it spans edge-to-edge regardless of nesting). A maroon
   gradient overlay keeps headline text readable. A smaller video preview
   card floats on top of the photo — positioned bottom-right on desktop,
   bottom-center on mobile. */
.hero {
  position: relative;
  /* Slightly shorter than a full viewport so the hero + sticky nav
     together still fit inside the first screen, instead of overflowing it. */
  height: 88vh;
  min-height: 460px;
  max-height: 760px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  /* Breaks the hero out of <main>'s max-width + padding so it spans the
     full browser width edge-to-edge, regardless of how it's nested. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Cancels out main's own top padding so no maroon page-background strip
     shows between the sticky nav and the hero photo. */
  margin-top: calc(-1 * var(--space-sm));
  background: linear-gradient(
    160deg,
    var(--maroon) 0%,
    var(--maroon-dark) 100%
  );
}

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Below 860px the hero is narrower than the photo's own 1.25:1 ratio,
     so cover crops left/right, not top/bottom (full height always shows).
     He stands in the source photo's left ~45%, so anchoring near the
     left edge (instead of centering on the whole frame, which would cut
     straight through him on narrow phones) keeps him in shot at every
     mobile/tablet width tested. */
  object-position: 8% top;
  animation: heroZoom 24s ease-in-out infinite alternate;
}
.hero-content {
  position: relative;
  z-index: 2;
  /* A narrower column pinned to the right, instead of a wide block that
     just happens to right-align its text — this is what actually reads
     as "content in the top-right corner" rather than looking centered. */
  width: 100%;
  max-width: 620px;
  margin: 0 0 0 auto;
  padding: 48px var(--space-md) 0 var(--space-md);
  text-align: right;
  margin-top: auto;
  margin-bottom: 20%;
}

/* Desktop: let height: 88vh (above) govern directly instead of the
   760px cap — 88vh is already "near one screen" at any monitor size,
   which is what a hero should feel like, so capping it at a flat 760px
   was fighting its own intent (and forcing object-fit: cover to crop the
   photo's subject far more aggressively than necessary on tall monitors).
   min-height here is a head-safety floor only, not a hands-safety one:
   15vw keeps the crop line above ~18.5% down the 1.25-ratio source photo
   (the subject's head starts at ~16.5%), so the head can never be cropped
   even on an unusually short/wide browser window — it does not try to
   keep the hands in frame too, since doing that reintroduces the
   excessive-height problem this is fixing. Below 860px nothing here
   applies; mobile/tablet keep the base 460px/760px bounds unchanged. */
@media (min-width: 860px) {
  .hero {
    min-height: max(460px, calc(15vw));
    max-height: none;
  }
  /* object-fit: cover (base rule) already spans the full hero width with
     zero blank space — a crop never leaves empty area, it just scales the
     whole photo (person AND skyline) up until the hero's width is filled,
     then trims whatever no longer fits vertically. The earlier two-layer
     version (a blurred full-bleed copy behind a sharp, masked-off cutout
     of just the person) read as "half photo, half empty" because the
     sharp layer visibly stopped partway across — this reverts to the one
     sharp photo, full width, and only tunes WHERE the vertical crop line
     falls via object-position.
     At this ratio cover shows roughly 55-83% of the photo's height
     (more on narrower desktop windows, less on ultra-wide monitors — see
     the min-height rule above, which puts a floor under how short that
     window can get). The subject's head sits ~16.5% down and his
     clasped hands sit near the very bottom (~97%) of the source photo,
     so there isn't room to guarantee both at every width; "35% top" was
     measured to keep the head fully in frame with a little headroom
     first (decapitation reads far worse than a tighter waist-level crop),
     then shows as much of the torso/hands below that as each width's
     taller or shorter crop window allows. */
  .hero-photo {
    object-position: center 25%;
  }

  .hero-content {
    margin-top: 0;
    margin-bottom: 0;
  }
}
@keyframes heroZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      ellipse at center,
      transparent 55%,
      rgba(67, 10, 27, 0.2) 100%
    ),
    linear-gradient(
      0deg,
      rgba(94, 14, 38, 0.95) 0%,
      rgba(94, 14, 38, 0.6) 30%,
      rgba(94, 14, 38, 0.1) 60%,
      transparent 78%
    );
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  /* White (not maroon/gold) — the overlay darkens with maroon at the top
     now that content lives up there, so white is what actually stays
     visible against it regardless of how bright the photo is underneath. */
  color: var(--white);
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  margin-bottom: 16px;
  padding-bottom: 10px;
  position: relative;
  opacity: 0;
  filter: blur(6px);
  animation: heroLineIn 0.7s var(--ease) 0.15s forwards;
}
.hero-eyebrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 2px;
  background: var(--gold);
}
.hero-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.12;
  margin-bottom: 16px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  filter: blur(6px);
  animation: heroLineIn 0.7s var(--ease) 0.3s forwards;
}
.hero-tagline {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 56ch;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: var(--space-lg);
  opacity: 0;
  filter: blur(6px);
  animation: heroLineIn 0.7s var(--ease) 0.45s forwards;
}
@keyframes heroLineIn {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* --- Floating video preview card, on top of the photo — pinned to the
   bottom-right corner at every screen size, scaling down smoothly via
   clamp() instead of jumping between fixed layouts at a breakpoint. --- */
.hero-video-float {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  right: clamp(12px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  filter: blur(6px);
  animation: heroLineIn 0.8s var(--ease) 0.75s forwards;
}
.hero-video-float-frame {
  position: relative;
  width: clamp(120px, 30vw, 220px);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 3px solid rgba(255, 255, 255, 0.5);
}
.hero-video-float-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Buttons — shared across the site --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    background 0.2s var(--ease);
}
.btn:active {
  transform: scale(0.97);
} /* small press feedback — a "micro-interaction" rather than a big motion */
.btn--primary {
  background: var(--white);
  color: var(--maroon-dark);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn--outline {
  background: transparent;
  color: var(--maroon);
  border: 1.5px solid var(--maroon);
}
.btn--outline:hover {
  background: var(--maroon);
  color: var(--white);
  transform: translateY(-2px);
}
.btn--on-dark {
  background: var(--white);
  color: var(--maroon-dark);
  box-shadow: var(--shadow-sm);
}
.btn--on-dark:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Scroll cue at the bottom of the hero */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  transition: opacity 0.3s var(--ease);
  animation: bobCue 2s ease-in-out infinite;
}
@keyframes bobCue {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
/* main.js adds .is-hidden once the visitor starts scrolling */
.scroll-cue.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===== 8) SCROLL-REVEAL UTILITY =====
   Any element with class="reveal" fades/slides into place the first time
   it scrolls into view, then stays visible (main.js unobserves it after
   that). A continuous fade-in/fade-out version was tried but caused a
   visible stutter when the transition restarted mid-animation, so this
   reveals once and stays.
   reveal-left / reveal-right are the same idea but slide in from a side
   instead of from below — used for the About section's photo/text split. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(3px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease),
    filter 0.45s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ===== 9) SECTION PANELS (general content sections) =====
   Panels remain white/light cards — like the reference site, content
   blocks float as bright cards on top of the dark maroon page background,
   which is what keeps the long-form text readable while the rest of the
   page carries the maroon brand color. */
main {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-sm);
  flex: 1 0 auto;
}

.panel {
  background: linear-gradient(160deg, #ffffff 0%, var(--tint) 100%);
  border: 1px solid rgba(138, 21, 56, 0.1);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-md);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-lg);
  scroll-margin-top: 100px;
}

/* Dark/maroon variant — used where the white card look isn't wanted
   (Certificates, Courses) so the section blends into the page's maroon
   background instead of sitting in a white box. Headings, intros, and
   links inside get light-on-dark overrides to match. */
.panel--dark {
  background: linear-gradient(
    160deg,
    var(--maroon-deep) 0%,
    var(--maroon-dark) 100%
  );
  border-color: rgba(255, 255, 255, 0.08);
}
.panel--dark h2 {
  color: var(--white);
  border-bottom-color: var(--gold);
}
.panel--dark .section-intro {
  color: rgba(255, 255, 255, 0.72);
}
.panel--dark .link-arrow {
  color: var(--gold);
}
.panel--dark .link-arrow:hover {
  border-color: var(--gold);
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.panel-header h2 {
  margin-bottom: 0;
}

h1,
h2 {
  color: var(--maroon-dark);
}
h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 600;
  margin-bottom: var(--space-md);
  padding-bottom: 10px;
  border-bottom: 3px solid var(--maroon);
  display: inline-block;
}
.section-intro {
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

/* Arabic sections align right to match their RTL content */
#certificates h2,
#about h2 {
  text-align: right;
}

.link-arrow {
  font-weight: 600;
  color: var(--maroon);
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.link-arrow:hover {
  border-color: var(--maroon);
}

/* ===== 10) TRUST STRIP =====
   A narrower, modern "feature strip" — white card with maroon/grey text,
   icon badges, and thin dividers between items. */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 820px;
  margin: var(--space-xl) auto var(--space-lg);
  background: var(--white);
  border: 1px solid rgba(138, 21, 56, 0.1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) var(--space-lg);
  text-align: center;
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 1 150px;
  padding: var(--space-xs) var(--space-sm);
  position: relative;
  transition: transform 0.25s var(--ease);
}
.trust-item:hover {
  transform: translateY(-4px);
}
/* Thin divider between items on wider screens, skipped on the first item */
.trust-item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: rgba(138, 21, 56, 0.14);
}
@media (max-width: 560px) {
  .trust-item:not(:first-child)::before {
    display: none;
  }
}
.trust-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--tint) 0%, #ffffff 100%);
  box-shadow: var(--shadow-sm);
  margin-bottom: 2px;
}
.trust-icon {
  fill: var(--maroon);
}
.trust-number,
.trust-plus {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--maroon);
  display: inline;
}
.trust-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ===== 11) CERTIFICATES GRID =====
   Premium maroon flip-cards: front shows the credential, a click/tap (or
   Enter/Space when focused) flips it to reveal the issuing detail on the
   back — driven by initCertFlip() in main.js toggling .is-flipped. */
.cert-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.cert-card {
  position: relative;
  height: 200px;
  perspective: 1200px;
  cursor: pointer;
  border-radius: var(--radius);
}
.cert-card:focus-visible {
  outline-offset: 4px;
}

.cert-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transform-style: preserve-3d;
  transition:
    transform 0.6s var(--ease),
    box-shadow 0.25s var(--ease);
}
.cert-card:hover .cert-card-inner {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-lg);
}
.cert-card.is-flipped .cert-card-inner {
  transform: rotateY(180deg);
}
.cert-card.is-flipped:hover .cert-card-inner {
  transform: rotateY(180deg) translateY(-4px);
}

.cert-card-front,
.cert-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
}
.cert-card-front {
  background: linear-gradient(160deg, #ffffff 0%, var(--tint) 100%);
  border: 1px solid rgba(138, 21, 56, 0.12);
  color: var(--maroon-dark);
}
.cert-card-front .cert-icon {
  fill: var(--maroon);
  margin-bottom: 12px;
}
.cert-card-front p {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--maroon-dark);
}

.cert-card-back {
  background: linear-gradient(
    160deg,
    var(--maroon-dark) 0%,
    var(--maroon-deep) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
  transform: rotateY(180deg);
}
.cert-back-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gold);
  margin-bottom: 8px;
}
.cert-card-back p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

/* Small rotate glyph hinting the card is interactive */
.cert-flip-hint {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  color: var(--maroon);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

@media (min-width: 640px) {
  .cert-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 980px) {
  .cert-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== 12) COURSES GRID =====
   White premium cards (matching the certificates front now) with a
   placeholder photo up top that fades into the card's white at the
   bottom edge, and maroon text below. */
.course-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.course-card {
  background: linear-gradient(160deg, #ffffff 0%, var(--tint) 100%);
  border: 1px solid rgba(138, 21, 56, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.course-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--maroon);
}

/* Placeholder photo — swap the <img src> for real course photography
   whenever it's ready; the card layout doesn't need to change. */
.course-thumb-wrap {
  height: 160px;
  overflow: hidden;
  position: relative;
}
.course-thumb-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Fades the bottom of the photo into the card's white so the photo
     and the text block below feel like one continuous card, not a photo
     stuck on top of a box. */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 55%,
    var(--tint) 100%
  );
}
.course-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s var(--ease);
}
.course-card:hover .course-thumb {
  transform: scale(1.08);
}

.course-body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  text-align: right;
}
.course-tags {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: var(--space-xs);
}
.tag {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--maroon-dark);
  background: var(--tint);
  padding: 3px 10px;
  border-radius: 999px;
}
.course-body h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.15rem;
  margin-bottom: 6px;
  color: var(--maroon-dark);
}
.course-body p {
  font-size: 0.92rem;
  color: var(--text-muted);
}

@media (min-width: 640px) {
  .course-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 980px) {
  .course-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== 13) ABOUT SECTION =====
   Full-bleed, edge-to-edge two-column split — not a boxed panel card.
   Photo fills one half, white text fills the other, breaking out of
   <main>'s max-width the same way the hero does. */
.about-split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 560px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--space-xl);
  background: var(--white);
  overflow: hidden;
}
.about-media {
  position: relative;
  /* Sized to the photo's own subject framing (1366x1615 — the person's
     actual bounding box, not the full 1366x2048 frame, which has ~21%
     blank headroom above the ghutra) rather than to the text column's
     height. That keeps object-fit: cover below from ever having to crop
     into the subject: any extra height cover() must shave off comes from
     that disposable top margin instead. Height now derives from width at
     every viewport continuously, so no per-breakpoint overrides needed. */
  aspect-ratio: 1366 / 1615;
  min-height: 300px;
}
.about-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bottom-anchored: the subject runs flush to the image's bottom edge
     with zero margin there, so any cropping must come off the top. */
  object-position: center bottom;
}
.about-copy {
  display: flex;
  align-items: center;
  background: var(--white);
  padding: var(--space-xl) var(--space-lg);
}
.about-text {
  text-align: right;
  width: 100%;
}
.about-text p {
  margin-bottom: var(--space-sm);
  color: var(--text);
}
.about-text .closing {
  font-weight: 600;
  font-style: italic;
  color: var(--maroon-dark);
}

/* Role line + bullet points — the client's real bio copy */
.about-role {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--maroon-dark);
  margin-bottom: var(--space-md);
}
.about-points {
  list-style: none;
  margin-bottom: var(--space-md);
}
.about-points li {
  position: relative;
  padding-right: 1.2em;
  margin-bottom: 0.6em;
  color: var(--text);
  line-height: 1.7;
}
.about-points li::before {
  content: "–";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--maroon);
  font-weight: 700;
}

/* Timeline — order reflects real career progression, so numbering/sequence
   here is meaningful rather than decorative. Text color set explicitly
   here (it previously inherited body's default color with nothing set on
   the <li>/<span>, which was invisible white-on-white — kept as a fix). */
.timeline {
  margin-top: var(--space-md);
  border-right: 2px solid rgba(138, 21, 56, 0.2);
  padding-right: var(--space-md);
  color: var(--text);
}
.timeline li {
  position: relative;
  padding-bottom: var(--space-sm);
  font-size: 0.95rem;
}
.timeline li:last-child {
  padding-bottom: 0;
}
.timeline-dot {
  position: absolute;
  right: calc(-1 * var(--space-md) - 5px);
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--maroon);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--maroon);
}

@media (min-width: 860px) {
  .about-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 620px;
  }
  .about-media {
    /* width:100% pins the box to its actual (now-uncapped) grid column —
       without it, once max-height constrains this element, aspect-ratio
       recomputes width from height instead and pillarboxes. height:100%
       plus min/max-height let viewport HEIGHT govern tallness directly,
       instead of the old trick of capping viewport WIDTH to indirectly
       limit height — so the column keeps scaling with the viewport at
       2560px+ instead of freezing into a static, gutter-flanked island.
       min-height is a head-safety floor (64vw ≈ column-width × 1.28):
       the photo's subject (white ghutra + black agal) starts at ~21% of
       the frame with zero contrast against the backdrop, easy to misjudge
       — this floor keeps the visible crop line at ~15%, a safety margin
       above that, so cover() never cuts into the agal/headband even
       though it has to crop some of the blank backdrop above it. This
       can legitimately push the section past one screen — see comment
       above the aspect-ratio rule: full head beats one-screen fit.
       max-height caps the section to ~one screen (100vh minus the 72px
       sticky header) whenever that's tall enough to clear the floor. */
    width: 100%;
    height: 100%;
    min-height: calc(64vw);
    max-height: calc(100vh - 72px);
  }
}
.final-cta {
  background: linear-gradient(
    160deg,
    var(--maroon) 0%,
    var(--maroon-deep) 100%
  );
  padding: var(--space-xl) var(--space-sm);
  text-align: center;
}
.final-cta-inner {
  max-width: 640px;
  margin: 0 auto;
}
.final-cta h2 {
  color: var(--white);
  border-bottom: none;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-bottom: var(--space-sm);
}
.final-cta p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-md);
}

.final-cta-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: var(--space-lg);
}
.final-cta-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(232, 194, 122, 0.35);
  transition:
    background 0.2s var(--ease),
    transform 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.final-cta-contact svg {
  fill: var(--gold);
  flex-shrink: 0;
}
.final-cta-contact:hover {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.final-cta-contact:hover svg {
  fill: var(--maroon-deep);
}

/* ===== 17) FOOTER ===== */
.bottom-bar {
  flex-shrink: 0;
  background: linear-gradient(
    160deg,
    var(--maroon-dark) 0%,
    var(--maroon-deep) 100%
  );
  color: var(--white);
  text-align: center;
  padding: var(--space-sm);
  font-size: 0.85rem;
}
.credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
}
.credit-badge {
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s var(--ease);
}
.credit-badge:hover {
  transform: scale(1.05);
}
.credit-logo {
  height: 200px;
  width: auto;
  /* logo.png (900×720) has a large built-in transparent margin above/below
     its visible content (identical file to Coach Yusri's designer-logo.png),
     which otherwise leaves an oversized gap under "Designed by" once the
     two are stacked vertically. This negative margin removes exactly that
     invisible padding without changing the logo's rendered size. */
  margin-top: -70.28px;
  margin-bottom: -70.28px;
  /* logo-s-hidden crops the "S" icon from the image's physical left edge;
     re-centers the remaining visible text under "Designed by" now that the
     logo is centered in a column instead of sitting inline in a row. */
  transform: translateX(-17.25%);
}

/* ===== 18) SOCIAL DROPDOWN ===== */
.social-menu {
  position: relative;
}
.social-menu summary {
  list-style: none;
}
.social-menu summary::-webkit-details-marker {
  display: none;
}
.social-pop {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--maroon-dark);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  z-index: 60;
}
.social-pop .social-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s var(--ease);
}
.social-pop .social-icon svg {
  fill: var(--white);
}
.social-pop .social-icon:hover {
  background: var(--white);
}
.social-pop .social-icon:hover svg {
  fill: var(--maroon);
}

/* ===== 19) RESPONSIVE BREAKPOINTS =====
   (Small-phone hero spacing is handled by the max-width: 899px rule in
   the hero section above — no separate override needed here.) */

/* ===== 20) PRELOADER =====
   Ported from the Coach Yusri reference project's currently-live
   text-based preloader. The gold "Smart IT Solutions System" wordmark
   below is Smart IT's own branding and is intentionally hardcoded rather
   than using this site's theme tokens — same as on the reference site.
   Only .preloader-caption::before uses this site's own accent
   (var(--maroon), in place of Coach Yusri's lime-green) since that small
   underline is the one themed element. Timing/show/hide logic lives in
   js/main.js. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: radial-gradient(
    ellipse 60% 55% at 50% 45%,
    #2c1c08 0%,
    #180f04 32%,
    #0a0602 58%,
    #030201 82%,
    #000 100%
  );
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.preloader-text-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px 16px 10px;
}
.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", "Tajawal", 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", "Tajawal", serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(0.7rem, 1.7vw, 0.95rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-align: center;
  color: #ecdfc2;
  margin-top: 8px;
  opacity: 0.92;
}
.preloader-text-brand::after {
  content: "";
  display: block;
  width: 200px;
  max-width: 46vw;
  height: 1px;
  margin: 20px auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(230, 190, 120, 0.65),
    transparent
  );
}
@keyframes preloaderGoldShine {
  0% {
    background-position: 0% 0;
  }
  50% {
    background-position: -180% 0;
  }
  100% {
    background-position: -180% 0;
  }
}

.preloader-caption {
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.preloader-caption::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--maroon);
  margin: 0 auto 14px;
}

@media (max-width: 800px) {
  .preloader-label {
    font-size: 0.7rem;
  }
  .preloader-caption {
    font-size: 0.82rem;
  }
  .preloader-text-main {
    letter-spacing: 0.035em;
  }
  .preloader-text-sub {
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preloader {
    transition: none;
  }
  .preloader-text-main {
    animation: none;
  }
}