@import url("/assets/css/gravity-ds.css");   /* the shared language — tokens, devices, motion */

/* Poppins, self-hosted — the Google Fonts link was removed from every
   page: a render-blocking third-party request before any text could
   paint, and one the service worker could not cache because it skips
   cross-origin. Same origin now, so it survives offline too. */
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-600.woff2") format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-700.woff2") format("woff2");font-weight:700 900;font-display:swap}

/* ============ Gravity Media Solutions ============ */

/* ---------- Expo Arabic (brand font) ---------- */
@font-face {
  font-family: "Expo Arabic";
  src: url("../fonts/ExpoArabic-Light.woff2") format("woff2"),
       url("../fonts/ExpoArabic-Light.ttf") format("truetype");
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: "Expo Arabic";
  src: url("../fonts/ExpoArabic-Book.woff2") format("woff2"),
       url("../fonts/ExpoArabic-Book.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Expo Arabic";
  src: url("../fonts/ExpoArabic-Medium.woff2") format("woff2"),
       url("../fonts/ExpoArabic-Medium.ttf") format("truetype");
  font-weight: 500 600; font-display: swap;
}
@font-face {
  font-family: "Expo Arabic";
  src: url("../fonts/ExpoArabic-SemiBold.woff2") format("woff2"),
       url("../fonts/ExpoArabic-SemiBold.ttf") format("truetype");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Expo Arabic";
  src: url("../fonts/ExpoArabic-Bold.woff2") format("woff2"),
       url("../fonts/ExpoArabic-Bold.otf") format("opentype");
  font-weight: 800 900; font-display: swap;
}

:root {
  --navy: #141a3a;
  --ink: #171c33;
  --orange: #ef8f20;
  --pink: #d31d53;
  --purple: #462d93;
  --bg: #f5f4f1;
  --card: #ffffff;
  --surface: #ffffff;
  --title: #141a3a;
  --muted: #5b6178;
  --grad: linear-gradient(140deg, var(--orange), var(--pink) 52%, var(--purple));
  --radius: 22px;
  --shadow: 0 18px 50px -18px rgba(23, 28, 51, 0.22);
  --font-ar: "Expo Arabic", "Tajawal", sans-serif;
  /* Expo listed after Poppins so stray Arabic inside Latin-styled elements
     (the ع lang toggle, mixed labels) still renders in the brand font. */
  --font-en: "Poppins", "Expo Arabic", sans-serif;
  /* subtle borders + form field fill — theme-aware so text never goes invisible */
  --border-soft: rgba(23, 28, 51, 0.14);
  --field-bg: #ffffff;
  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ar), var(--font-en);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  /* clip, not hidden: `overflow-x: hidden` computes overflow-y to `auto`, which
     turns body into a scroll container — and position:sticky inside one sticks
     to it rather than the viewport, so the pinned hero stage never held. clip
     hides the same horizontal overflow without creating that container. */
  overflow-x: clip;
}
html[lang="en"] body { font-family: var(--font-en), var(--font-ar); }

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

.container { width: min(1200px, 92%); margin-inline: auto; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 1.9rem; border-radius: 10px;
  font-weight: 700; font-size: 1rem; border: 0; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn-gradient {
  background: var(--grad); color: #fff;
  box-shadow: 0 12px 30px -10px rgba(211, 29, 83, 0.55);
}
.btn-gradient:hover { box-shadow: 0 18px 38px -10px rgba(211, 29, 83, 0.65); }
.btn-ghost {
  background: transparent; color: var(--title);
  box-shadow: inset 0 0 0 2px var(--navy);
}
.btn-ghost:hover { background: var(--navy); color: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.btn-sm { padding: 0.55rem 1.3rem; font-size: 0.92rem; }
.btn-lg { padding: 1.05rem 2.6rem; font-size: 1.15rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding: 1.1rem 0;
}
.site-header.scrolled {
  background: rgba(245, 244, 241, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -18px rgba(23, 28, 51, 0.35);
  padding: 0.55rem 0;
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; }
.brand-logo { height: 46px; width: auto; transition: height .3s ease; }
.site-header.scrolled .brand-logo { height: 38px; }
.main-nav { display: flex; gap: 1.7rem; margin-inline-start: auto; }
.main-nav a {
  font-weight: 700; font-size: 1rem; color: var(--ink);
  position: relative; padding-block: 0.2rem;
}
.main-nav a::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -3px;
  width: 0; height: 3px; border-radius: 3px; background: var(--grad);
  transition: width .3s ease;
}
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 0.8rem; }
.lang-toggle {
  border: 2px solid var(--navy); background: transparent; color: var(--title);
  font-family: var(--font-en); font-weight: 600; font-size: 0.85rem;
  border-radius: 10px; padding: 0.35rem 0.9rem; cursor: pointer;
  transition: all .25s ease;
}
.lang-toggle:hover { background: var(--navy); color: #fff; }
.nav-burger { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: 8.5rem; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.blob {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.35;
}
.blob-1 {
  width: 520px; height: 520px; background: var(--orange);
  top: -180px; inset-inline-end: -120px;
  background: radial-gradient(circle at 30% 30%, var(--orange), var(--pink));
}
.blob-2 {
  width: 420px; height: 420px;
  bottom: -100px; inset-inline-start: -160px;
  background: radial-gradient(circle at 70% 30%, var(--pink), var(--purple));
  opacity: 0.22;
}
.orbit-ring {
  position: absolute; border: 1.5px dashed rgba(32, 41, 90, 0.25);
  border-radius: 50%;
  animation: spin 60s linear infinite;
}
.ring-a { width: 720px; height: 720px; top: -200px; inset-inline-end: -180px; }
.ring-b { width: 460px; height: 460px; top: -60px; inset-inline-end: -40px; animation-duration: 90s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  align-items: center; gap: 2.5rem; position: relative;
}
.eyebrow {
  display: inline-block; font-weight: 700; font-size: 0.95rem; color: var(--pink);
  background: rgba(211, 29, 83, 0.08); border: 1px solid rgba(211, 29, 83, 0.25);
  padding: 0.3rem 1rem; border-radius: 10px; margin-bottom: 1.3rem;
}
.hero-title {
  font-size: clamp(3rem, 7.5vw, 5.6rem);
  font-weight: 900; line-height: 1.12; color: var(--title);
  letter-spacing: -0.5px;
}
.hero-title span { display: inline-block; }
.hero-sub {
  margin-top: 1.4rem; font-size: 1.18rem; color: var(--muted); max-width: 34rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.hero-tagline { margin-top: 2.4rem; }
.en-tag {
  font-family: var(--font-en); font-weight: 400; color: var(--title);
  font-size: 1.02rem; letter-spacing: 0.3px;
}
.en-tag b { font-weight: 700; }

.hero-art { position: relative; }
.hero-img {
  width: 100%; max-width: 520px; margin-inline: auto;
  mix-blend-mode: multiply;
  filter: brightness(1.05); /* lift near-white bg to pure white so multiply blends seamlessly */
  animation: float 7s ease-in-out infinite;
}
.hero-planet {
  position: absolute; width: 130px; top: 4%; inset-inline-start: -6%; z-index: 2;
  animation: float 5s ease-in-out infinite reverse;
  filter: drop-shadow(0 14px 24px rgba(211, 29, 83, 0.3));
}
@keyframes float { 50% { transform: translateY(-16px); } }

/* Marquee */
.marquee {
  margin-top: 3.5rem; padding: 1.1rem 0; overflow: hidden;
  background: var(--navy);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; gap: 3rem; width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee-track span {
  color: rgba(255, 255, 255, 0.85); font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; gap: 3rem; white-space: nowrap;
}
.marquee-track span::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--grad); display: inline-block;
}
@keyframes marquee { to { transform: translateX(-50%); } }
html[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }

/* ---------- Sections ---------- */
.section { padding: 5.5rem 0; }
.section-head { max-width: 46rem; margin-bottom: 3rem; }
.kicker {
  font-weight: 800; color: var(--pink); font-size: 1rem;
  letter-spacing: 0.5px; margin-bottom: 0.6rem;
}
.kicker.light { color: var(--orange); }
.section-title {
  font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 900;
  color: var(--title); line-height: 1.25;
}
.section-sub { margin-top: 0.9rem; color: var(--muted); font-size: 1.1rem; }

/* ---------- About ---------- */
.about-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 3.5rem; align-items: center;
}
.about-text p { font-size: 1.12rem; color: var(--muted); }
.about-text p + p { margin-top: 1.2rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.stat {
  background: var(--card); border-radius: var(--radius); padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.stat::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 5px; background: var(--grad);
}
.stat-num, .stat-plus {
  font-family: var(--font-en); font-size: 2.4rem; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat p { color: var(--muted); font-weight: 700; margin-top: 0.2rem; }

/* ---------- Services ---------- */
.services { background: var(--surface); }
.services-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
}
.service-card {
  background: var(--bg); border-radius: var(--radius); padding: 1.8rem 1.5rem;
  border: 1px solid rgba(32, 41, 90, 0.07);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
  position: relative;
}
.service-card::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  padding: 2px; background: var(--grad); opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .3s ease; pointer-events: none;
}
/* var(--surface), not #fff — hovering a service card in the dark theme turned
   it white under its own near-white text. */
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); background: var(--surface); }
.service-card:hover::after { opacity: 1; }
.service-icon {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: var(--grad); margin-bottom: 1.1rem;
  box-shadow: 0 10px 22px -8px rgba(211, 29, 83, 0.5);
}
.service-icon svg {
  width: 26px; height: 26px; stroke: #fff; stroke-width: 1.7;
  fill: #fff; stroke-linecap: round; stroke-linejoin: round;
}
.service-icon svg [fill="none"] { fill: none; }
.service-card h3 { font-size: 1.15rem; font-weight: 800; color: var(--title); margin-bottom: 0.4rem; }
.service-card p { color: var(--muted); font-size: 0.98rem; }

/* ---------- Feature (events/outdoor) ---------- */
.feature {
  background: var(--navy);
  color: #fff;
}
.feature-inner {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 3.5rem; align-items: center;
}
.feature .section-title { color: #fff; }
.feature-copy > p { color: rgba(255, 255, 255, 0.82); font-size: 1.08rem; }
.feature-art img {
  border-radius: var(--radius); box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.55);
  transform: rotate(-2deg);
}
.feature-chips { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.6rem 0 2rem; }
.feature-chips li {
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 10px;
  padding: 0.35rem 1.1rem; font-weight: 700; font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.06);
}

/* ---------- Work: client logo tiles ---------- */
.clients-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
.client-tile {
  --brand: var(--pink);
  background: #f4f4f4; border-radius: var(--radius);
  padding: 2rem 1.4rem 1.5rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  border: 1px solid rgba(32, 41, 90, 0.07);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative; overflow: hidden;
}
.client-tile::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px;
  background: var(--brand); opacity: 0; transition: opacity .3s ease;
}
.client-tile:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.client-tile:hover::before { opacity: 1; }
.client-tile-logo {
  height: 110px; display: grid; place-items: center; margin-bottom: 0.8rem;
}
.client-tile-logo img { max-height: 100px; max-width: 200px; object-fit: contain; }
.client-tile b { color: #141a3a; font-size: 1.12rem; font-weight: 800; }
.client-tile-tag { color: #5b6178; font-size: 0.92rem; }

.wall-title {
  margin: 3.2rem 0 1.4rem; text-align: center;
  color: var(--muted); font-size: 1.05rem; font-weight: 700;
}
.logo-wall {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem;
}
.wall-logo {
  background: #f4f4f4; border-radius: 14px; padding: 0.7rem 1.1rem;
  display: grid; place-items: center;
  border: 1px solid rgba(32, 41, 90, 0.06);
  filter: grayscale(1); opacity: 0.75;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.wall-logo:hover { filter: none; opacity: 1; transform: translateY(-4px); }
.wall-logo img { height: 44px; max-width: 120px; object-fit: contain; }
.work-more { margin-top: 2.4rem; text-align: center; color: var(--muted); font-size: 1.05rem; }
.work-more a {
  font-weight: 800; margin-inline-start: 0.5rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  border-bottom: 2px solid var(--pink);
}

/* ---------- CTA band ---------- */
.cta-band { padding: 6rem 0; text-align: center; background: var(--surface); }
.cta-title { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 900; color: var(--title); }
.cta-band p { margin: 1rem 0 2.2rem; color: var(--muted); font-size: 1.15rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1.4rem; }
.contact-card {
  background: var(--card); border-radius: var(--radius); padding: 1.8rem 1.5rem;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.25rem;
  transition: transform .3s ease;
}
.contact-card:hover { transform: translateY(-6px); }
.contact-ic {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: var(--grad); margin-bottom: 0.9rem;
}
.contact-ic svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 1.7; fill: #fff; }
.contact-ic svg [fill="none"] { fill: none; }
.contact-card b { color: var(--title); font-size: 1.1rem; font-weight: 800; }
.contact-card span { color: var(--muted); font-size: 0.98rem; }

/* ---------- Social icon row ---------- */
.social-row { display: flex; gap: 0.55rem; margin-top: 0.7rem; }
.soc-ic {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); transition: transform .2s ease;
}
.soc-ic:hover { transform: translateY(-3px) scale(1.06); }
.soc-ic svg { width: 19px; height: 19px; fill: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #fff; padding: 3.2rem 0 2rem; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; }
.footer-brand img {
  height: 52px; margin-inline: auto;
  filter: brightness(0) invert(1);
}
.footer-brand p { margin-top: 0.8rem; font-weight: 700; }
.footer-brand .en-tag { color: rgba(255, 255, 255, 0.75); margin-inline-start: 0.6rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.8rem; justify-content: center; }
.footer-nav a { color: rgba(255, 255, 255, 0.8); font-weight: 700; transition: color .2s; }
.footer-nav a:hover { color: #fff; }
.footer-copy { color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; }

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed; bottom: 1.6rem; inset-inline-end: 1.6rem; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); box-shadow: 0 14px 34px -8px rgba(211, 29, 83, 0.6);
  transition: transform .25s ease;
}
.wa-float:hover { transform: scale(1.1); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- Reveal animations ----------
   visibility, not just opacity — see the .gf-rise note in gforce.css. A block
   waiting to be revealed must be inert, or its text is selectable and its links
   are tabbable while there is visibly nothing there. Nothing here ever hides
   again, so visibility is left out of the transition: it flips to visible the
   moment .in lands and the opacity fade plays over it unchanged. */
.reveal { opacity: 0; visibility: hidden; transform: translateY(34px); }
.reveal.in {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .8s cubic-bezier(.2,.65,.3,1), transform .8s cubic-bezier(.2,.65,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; visibility: visible; transform: none; }
  .hero-img, .hero-planet, .orbit-ring, .marquee-track { animation: none !important; }
}
/* On paper there is no scrolling, so nothing ever enters the viewport and no
   block is ever revealed: printing this site produced a sheet with the header on
   it and almost nothing else. Anything waiting to rise is simply shown. Belongs
   here rather than in gforce.css because the .gf-* half only exists on the
   landing page and an unmatched selector costs nothing. */
@media print {
  .reveal, .gf-rise, .gf-tile .cap {
    opacity: 1 !important; visibility: visible !important; transform: none !important;
  }
  .wa-float, .site-header { display: none !important; }
}

/* ---------- Client case page (styled like the profile's client pages) ---------- */
.client-main { padding: 7.5rem 0 4rem; }
.client-back {
  display: inline-block; font-weight: 700; color: var(--muted);
  margin-bottom: 1.6rem; transition: color .2s;
}
.client-back:hover { color: var(--pink); }
.client-banner {
  --brand: var(--pink);
  background: var(--brand); /* fallback when color-mix is unsupported */
  background:
    radial-gradient(600px 300px at 12% -20%, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(115deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #171c33));
  border-radius: 28px; color: #fff;
  padding: 2.8rem 3rem;
  display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center;
  box-shadow: 0 30px 70px -30px rgba(23, 28, 51, 0.5);
}
.client-banner h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 900; line-height: 1.25; }
.client-tag {
  display: inline-block; margin-top: 0.5rem; font-weight: 700; font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.25rem 1rem; border-radius: 10px;
}
.client-desc { margin-top: 1.1rem; font-size: 1.08rem; color: rgba(255, 255, 255, 0.92); max-width: 44rem; }
.client-logo-badge {
  width: 168px; height: 168px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.25), 0 18px 40px -12px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.client-logo-badge img { max-width: 72%; max-height: 72%; object-fit: contain; }

.gallery-title { margin: 3rem 0 1.4rem; font-size: 1.5rem; font-weight: 900; color: var(--title); }
/* Justified rows. A grid can't tile mixed 1:1 / 16:9 / 9:16 without either
   stretching tiles or leaving holes, so the gallery never squared off. Here
   each tile's flex-grow IS its aspect ratio: widths come out proportional to
   aspect, so every tile in a row lands on one height and the row fills the
   container exactly. JS decides which tiles share a row. */
.client-gallery { display: flex; flex-direction: column; gap: 1.2rem; }
.gal-row { display: flex; gap: 1.2rem; }
.gal-item {
  border-radius: 18px; overflow: hidden; background: var(--card);
  box-shadow: var(--shadow); cursor: zoom-in; position: relative;
  transition: transform .3s ease;
  flex: var(--ar, 1) 1 0; aspect-ratio: var(--ar, 1); min-width: 0;
}
.gal-item:hover { transform: translateY(-5px); z-index: 2; }
/* the media fills the tile now that the tile itself carries the proportion */
.gal-item img, .gal-item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 560px) { .client-gallery, .gal-row { gap: 1rem; } }
.gal-video { cursor: pointer; }
.play-badge {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(23, 28, 51, 0.65); color: #fff; font-size: 1.4rem;
  backdrop-filter: blur(4px); pointer-events: none;
  padding-inline-start: 5px;
}

.client-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; }
.client-nav-link {
  background: var(--card); border-radius: 16px; padding: 1rem 1.5rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 0.15rem; min-width: 200px;
  transition: transform .25s ease;
}
.client-nav-link:hover { transform: translateY(-4px); }
.client-nav-link span { color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.client-nav-link b { color: var(--title); font-weight: 800; }
.client-nav-link:last-child { text-align: end; }

/* var(--card), not #fff: hardcoded white left a white card carrying a white
   heading once the dark theme flipped --title */
.client-cta {
  margin-top: 4rem; text-align: center; background: var(--card);
  border-radius: 28px; padding: 3rem 2rem; box-shadow: var(--shadow);
}
.client-cta h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; color: var(--title); margin-bottom: 1.4rem; }

/* ---------- Forms (order / contact pages) ---------- */
.form-layout {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.6rem; align-items: start;
}
/* var(--card), for the same reason .client-cta above says: a hardcoded #fff
   stayed white when the dark theme flipped --title white with it, so the
   labels vanished into the card and the inputs — which DO follow the theme —
   sat on it as black boxes. */
.form-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 2rem 1.8rem;
}
/* Honeypot. It has to be in the DOM and submittable for the trap to work, but
   it must not be visible or reachable. The old trick of parking it at
   left:-910px is an LTR habit: under dir="rtl" the scroll origin is the right
   edge, so anything at a negative left sits INSIDE the scrollable region and
   stretched contact.html and order.html 895px wider than the viewport at every
   width. Clipping to a zero-size box leaves nothing to scroll to. */
.hp-field {
  position: absolute; top: 0; inset-inline-start: 0;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
  overflow: hidden; clip-path: inset(50%); border: 0; padding: 0;
}
.field-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.ffield { margin-bottom: 1.1rem; }
.ffield label {
  display: block; font-weight: 700; font-size: 0.95rem; color: var(--title);
  margin-bottom: 0.35rem;
}
.ffield input, .ffield textarea, .ffield select {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--field-bg, var(--bg)); border: 1.5px solid var(--border-soft, rgba(32, 41, 90, 0.14));
  border-radius: 12px; padding: 0.75rem 1rem;
  transition: border-color .2s, background .2s;
}
/* The focus background has to follow the theme too. Hardcoded #fff meant that
   in the dark theme a field turned white the moment you tapped it while the
   text stayed near-white — you could not see what you were typing, and only
   in the field you were actually using. */
.ffield input:focus, .ffield textarea:focus, .ffield select:focus {
  outline: none; border-color: var(--pink); background: var(--card);
}
.ffield textarea { resize: vertical; }
.svc-checks { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.svc-check { position: relative; }
.svc-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.svc-check span {
  display: inline-block; border: 1.5px solid rgba(32, 41, 90, 0.2);
  border-radius: 10px; padding: 0.4rem 1.1rem; font-weight: 700; font-size: 0.92rem;
  color: var(--muted); background: var(--bg); cursor: pointer;
  transition: all .2s ease;
}
.svc-check input:checked + span {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px -8px rgba(211, 29, 83, 0.5);
}
.form-submit { width: 100%; margin-top: 0.4rem; }
.form-note { font-weight: 700; margin-bottom: 0.9rem; }
.form-note.err { color: #c0392b; }
.form-note.ok { color: #1e7d46; }

.form-side { display: flex; flex-direction: column; gap: 1.2rem; }
/* var(--card): these are the contact info cards, and hardcoded white left
   "اتصل بنا / راسلنا / موقعنا / تابعنا" as white headings on a white card. */
.side-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.6rem 1.5rem;
}
.side-card h3 { color: var(--title); font-weight: 800; font-size: 1.08rem; margin-bottom: 0.9rem; }
.side-card p { color: var(--muted); margin-bottom: 0.2rem; }
.side-card p b { color: var(--title); }
.side-card a[data-set] { color: var(--link, var(--pink)); font-weight: 700; }
.side-sep { border: 0; border-top: 1.5px solid #eef0f5; margin: 0.9rem 0; }
.success-card { text-align: center; border-top: 5px solid #1e7d46; }
.success-ic {
  width: 58px; height: 58px; margin: 0 auto 0.8rem; border-radius: 50%;
  background: #e8f6ee; color: #1e7d46; font-size: 1.7rem; font-weight: 900;
  display: grid; place-items: center;
}
.map-wrap {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.map-wrap iframe { width: 100%; height: 380px; border: 0; display: block; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 18, 38, 0.9); backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: 4vh 4vw;
}
.lightbox[hidden] { display: none; }
.lightbox-body { max-width: 92vw; max-height: 88vh; }
.lightbox-body img, .lightbox-body video {
  max-width: 92vw; max-height: 88vh; border-radius: 12px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
}
.lightbox-body iframe {
  width: min(92vw, 960px); height: min(52vw, 540px);
  border: 0; border-radius: 12px;
}
.lightbox-close {
  position: absolute; top: 1.2rem; inset-inline-end: 1.6rem;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.7rem;
  transition: background .2s;
}
.lightbox-close:hover { background: var(--pink); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
  .client-banner { grid-template-columns: 1fr; padding: 2.2rem 1.8rem; }
  .client-logo-badge { order: -1; width: 130px; height: 130px; }
  .form-layout { grid-template-columns: 1fr; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { order: 1; }
  .hero-art { order: 0; max-width: 420px; margin-inline: auto; }
  .hero-sub { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .about-grid, .feature-inner { grid-template-columns: 1fr; }
  .feature-art { max-width: 480px; margin-inline: auto; }
}
@media (max-width: 720px) {
  /* The panel follows --bg instead of a frozen light value. It used to be
     rgba(245,244,241,.97) — the light --bg written out by hand — while the
     links inside are var(--ink), which the dark theme flips to near-white.
     The result was a white panel of white links, only ever visible on a
     phone, which is where the menu is the only way to navigate. */
  .main-nav {
    position: fixed; inset-inline: 0; top: 64px;
    background: color-mix(in srgb, var(--bg) 97%, transparent); backdrop-filter: blur(14px);
    flex-direction: column; align-items: center; gap: 1.2rem;
    padding: 2rem 0; box-shadow: 0 20px 40px -20px rgba(23,28,51,.3);
    transform: translateY(-130%); transition: transform .35s ease;
  }
  .main-nav.open { transform: none; }
  .nav-burger {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: 0; cursor: pointer; padding: 6px;
  }
  .nav-burger span { width: 24px; height: 3px; border-radius: 3px; background: var(--navy); }
  .header-actions .btn { display: none; }
  .services-grid, .contact-grid { grid-template-columns: 1fr; }
  /* Paired fields stack on a phone. Side by side at 375px each label had about
     150px, so "رقم الهاتف / واتساب *" wrapped onto two lines and pushed its
     own input out of line with the one beside it. */
  .field-row2 { grid-template-columns: 1fr; }
  .clients-grid { grid-template-columns: 1fr 1fr; }
  .client-nav { flex-direction: column; }
  .client-nav-link:last-child { text-align: start; }
  .stats { grid-template-columns: 1fr 1fr; }
  .section { padding: 3.8rem 0; }
}

/* ============ Theme toggle button ============ */
.theme-toggle {
  border: 2px solid var(--navy); background: transparent; color: var(--title);
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: all .25s ease; flex-shrink: 0;
}
.theme-toggle:hover { background: var(--navy); color: #fff; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-toggle .ic-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

/* ============ Showreel ============ */
.showreel { background: var(--navy); position: relative; overflow: hidden; }
.showreel::before { content: none; }
.showreel .section-head { position: relative; }
.showreel .section-title { color: #fff; }
.reel-frame {
  position: relative; border-radius: 26px; overflow: hidden; cursor: pointer;
  box-shadow: 0 35px 80px -30px rgba(0, 0, 0, 0.6);
}
.reel-frame img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; transition: transform .6s ease; }
.reel-frame:hover img { transform: scale(1.03); }
.reel-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 18, 38, 0.55), transparent 55%);
}
.reel-play {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--grad); color: #fff; font-size: 1.8rem;
  display: grid; place-items: center; padding-inline-start: 6px;
  box-shadow: 0 0 0 0 rgba(211, 29, 83, 0.5);
  animation: pulse 2.2s ease-out infinite;
  transition: transform .25s ease;
}
.reel-frame:hover .reel-play { transform: scale(1.08); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(211, 29, 83, 0.55); }
  70% { box-shadow: 0 0 0 34px rgba(211, 29, 83, 0); }
  100% { box-shadow: 0 0 0 0 rgba(211, 29, 83, 0); }
}
.reel-hint {
  position: absolute; bottom: 1.4rem; inset-inline-start: 50%; transform: translateX(50%);
  z-index: 2; color: #fff; font-weight: 700; letter-spacing: 0.4px; pointer-events: none;
}
html[dir="ltr"] .reel-hint { transform: translateX(-50%); }

/* ============ Campaign simulator ============ */
.simulator { position: relative; overflow: hidden; }
.sim-box {
  background: var(--card); border-radius: 28px; box-shadow: var(--shadow);
  padding: 2.4rem 2.2rem; max-width: 880px; margin-inline: auto; position: relative;
}
.sim-progress { display: flex; gap: 0.5rem; margin-bottom: 1.8rem; }
.sim-progress i {
  height: 6px; flex: 1; border-radius: 6px; background: rgba(128, 132, 160, 0.25);
  transition: background .3s ease;
}
.sim-progress i.on { background: var(--grad); }
.sim-step h3 { color: var(--title); font-size: 1.35rem; font-weight: 900; margin-bottom: 1.2rem; }
.sim-chips { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.sim-chip {
  border: 1.5px solid rgba(128, 132, 160, 0.35); border-radius: 10px;
  padding: 0.55rem 1.3rem; font-weight: 700; font-size: 0.98rem;
  color: var(--muted); background: transparent; cursor: pointer; font-family: inherit;
  transition: all .2s ease;
}
.sim-chip:hover { border-color: var(--pink); color: var(--title); }
.sim-chip.sel {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 10px 22px -8px rgba(211, 29, 83, 0.5);
}
.sim-slider { padding: 0.6rem 0.2rem 0; }
.sim-slider input[type="range"] { width: 100%; accent-color: var(--pink); cursor: pointer; }
.sim-tiers { display: flex; justify-content: space-between; margin-top: 0.5rem; }
.sim-tiers span { font-size: 0.85rem; font-weight: 700; color: var(--muted); transition: color .2s; }
.sim-tiers span.on {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sim-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.sim-result-mix { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.3rem 0 1.6rem; }
.sim-result-mix span {
  background: rgba(211, 29, 83, 0.09); border: 1.5px solid rgba(211, 29, 83, 0.35);
  color: var(--title); border-radius: 10px; padding: 0.45rem 1.2rem;
  font-weight: 800; font-size: 0.98rem;
}
.sim-send-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-bottom: 1rem; }
.sim-send-row input {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1.5px solid rgba(128, 132, 160, 0.35);
  border-radius: 12px; padding: 0.7rem 1rem;
}
.sim-send-row input:focus { outline: none; border-color: var(--pink); }
.sim-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.sim-restart { background: none; border: 0; color: var(--muted); font-weight: 700; cursor: pointer; font-family: inherit; text-decoration: underline; }
.sim-deco {
  position: absolute; width: 200px; opacity: 0.5; pointer-events: none;
  inset-inline-end: -40px; top: -40px;
  animation: float 6s ease-in-out infinite;
}

/* ============ Dark theme ============ */
html[data-theme="dark"] {
  --bg: #0f1226;
  --card: rgba(255, 255, 255, 0.05);
  --surface: rgba(255, 255, 255, 0.04);
  --title: #ffffff;
  --ink: rgba(255, 255, 255, 0.9);
  --muted: rgba(255, 255, 255, 0.55);
  --shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.65);
  --border-soft: rgba(255, 255, 255, 0.18);
  --field-bg: rgba(255, 255, 255, 0.06);
  /* The house pink is a light-background colour: on a dark card it measures
     3.19:1, under the 4.5:1 that body-size text owes. --link is the same hue
     lifted until it passes (6.1:1), and it is deliberately separate from
     --pink so the gradients, borders and focus rings keep the exact brand
     colour — only text that has to be READ gets moved. */
  --link: #ff6b95;
  color-scheme: dark;               /* native selects/date pickers follow the theme */
}
html[data-theme="dark"] .site-header.scrolled {
  background: rgba(15, 18, 38, 0.82);
  box-shadow: 0 8px 30px -18px rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] .btn-ghost { box-shadow: inset 0 0 0 2px var(--title); }
html[data-theme="dark"] .btn-ghost:hover { background: var(--title); color: var(--navy); }
html[data-theme="dark"] .lang-toggle,
html[data-theme="dark"] .theme-toggle { border-color: var(--title); }
html[data-theme="dark"] .lang-toggle:hover,
html[data-theme="dark"] .theme-toggle:hover { background: var(--title); color: var(--navy); }
html[data-theme="dark"] .nav-burger span { background: var(--title); }
html[data-theme="dark"] .brand-logo { filter: brightness(0) invert(1); }
html[data-theme="dark"] .orbit-ring { border-color: rgba(255, 255, 255, 0.16); }
html[data-theme="dark"] .blob { opacity: 0.22; }
html[data-theme="dark"] .blob-2 { opacity: 0.15; }
html[data-theme="dark"] .hero-img {
  mix-blend-mode: normal; filter: none;
  border-radius: 26px; box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] .marquee { background: #0a0d1f; }
html[data-theme="dark"] .service-card { border-color: rgba(255, 255, 255, 0.08); background: var(--card); }
html[data-theme="dark"] .service-card:hover { background: #21264a; }
html[data-theme="dark"] .client-tile,
html[data-theme="dark"] .wall-logo,
html[data-theme="dark"] .client-tile-logo img { background-color: #f4f4f4; }
html[data-theme="dark"] .ffield input, html[data-theme="dark"] .ffield textarea, html[data-theme="dark"] .ffield select {
  border-color: rgba(255, 255, 255, 0.16);
}
html[data-theme="dark"] .svc-check span { border-color: rgba(255, 255, 255, 0.22); }
html[data-theme="dark"] .side-sep { border-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .main-nav a::after { background: var(--grad); }
@media (max-width: 720px) {
  html[data-theme="dark"] .main-nav {
    background: rgba(15, 18, 38, 0.97);
  }
}

/* ============================================================
   Astronaut scroll-hero (v2 editorial)  — integrated on index
   ============================================================ */
:root { --p: 0; --mx: 0; --my: 0; }
.hh-scroll { height: 380vh; position: relative; }
.hh-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hh-glow {
  position: absolute; left: 50%; top: 56%; width: 46vmin; height: 46vmin; z-index: 0;
  transform: translate(-50%,-50%) scale(calc(1 + var(--p) * 0.15));
  background: radial-gradient(circle, rgba(232,31,99,0.14), rgba(107,46,158,0.09) 40%, transparent 66%);
  filter: blur(12px); pointer-events: none;
}
/* Arabic must use Expo — Poppins has no Arabic glyphs, so the browser was
   silently falling back to a system font for this (the page's first line).
   Wide letter-spacing also breaks Arabic letter joining, so it's Latin-only. */
.hh-eyebrow {
  position: absolute; top: clamp(6rem,13vh,8.5rem); inset-inline: 0; z-index: 5; text-align: center; margin: 0;
  font-family: var(--font-ar); font-weight: 600; font-size: clamp(0.72rem,1.25vw,0.9rem);
  letter-spacing: 0; color: var(--muted);
  opacity: calc(1 - var(--p) * 3.4);
}
html[lang="en"] .hh-eyebrow {
  font-family: var(--font-en); font-size: clamp(0.6rem,1.1vw,0.76rem);
  letter-spacing: 0.34em; text-transform: uppercase;
}
.hh-head {
  position: absolute; z-index: 6; text-align: center; top: clamp(8.5rem,19vh,12rem); inset-inline: 0; padding-inline: 1.2rem;
  transform: translateY(calc(var(--p) * -34px)); opacity: calc(1 - var(--p) * 5.5); filter: blur(calc(var(--p) * 16px));
}
.hh-title { font-weight: 800; line-height: 0.94; letter-spacing: -0.01em; font-size: clamp(2.4rem,6.5vw,5.4rem); color: var(--title); }
.hh-title span { display: inline; }
.hh-sub { margin: 1rem auto 0; max-width: 42ch; color: var(--muted); font-size: clamp(0.9rem,1.6vw,1.12rem); line-height: 1.55; }
.hh-cta { margin-top: 1.5rem; display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }

.hh-bignums { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hh-bignum { position: absolute; top: 24%; left: 50%; transform: translate(-50%,-50%) scale(0.72); opacity: 0; text-align: center; will-change: opacity, transform;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 0.1rem; }
.hh-bignum .n { font-family: var(--font-en); font-weight: 800; font-size: clamp(4.5rem,17vw,15rem); line-height: 0.82; letter-spacing: -0.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hh-bignum .c { font-family: var(--font-ar); font-weight: 700; font-size: clamp(1rem,2.2vw,1.7rem); color: var(--title); }

.hh-art {
  position: absolute; left: 50%; top: 58%; z-index: 3;
  width: min(1360px, 108vw); aspect-ratio: 16 / 9;
  transform: translate(-50%,-50%) translateY(calc(var(--p) * -2vh)) scale(calc(0.99 + var(--p) * 0.06));
  perspective: 1300px; will-change: transform;
}
.hh-layer { position: absolute; inset: 0; }
.hh-layer img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hh-g { z-index: 1; transform: translate3d(calc(var(--mx) * -7px), calc(var(--my) * -6px), 0) scale(calc(1 + var(--p) * 0.015)); transition: transform .18s ease-out; }
.hh-shadow { z-index: 2; transform: translate3d(calc(var(--mx) * 4px), 0, 0) scale(calc(1 - var(--p) * 0.04)); opacity: calc(0.9 - var(--p) * 0.15); animation: hhshpulse 6.5s ease-in-out infinite; }
@keyframes hhshpulse { 0%,100% { opacity: 0.9; } 50% { opacity: 0.72; } }
.hh-helmet { z-index: 3; transform: translate3d(calc(var(--mx) * 11px), calc(var(--my) * 7px), 0) rotateX(calc(var(--my) * -5deg)) rotateY(calc(var(--mx) * 8deg)) scale(calc(1 + var(--p) * 0.05)); transition: transform .16s ease-out; transform-style: preserve-3d; }
.hh-helmet .hh-float { width: 100%; height: 100%; animation: hhfloat 6.5s ease-in-out infinite; }
.hh-helmet img { filter: drop-shadow(0 22px 26px rgba(20,22,42,0.16)); }
@keyframes hhfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

.hh-stage .marquee { position: absolute; bottom: 0; inset-inline: 0; z-index: 4; opacity: calc(1 - var(--p) * 3); }

html[data-theme="dark"] .hh-glow { background: radial-gradient(circle, rgba(232,31,99,0.2), rgba(107,46,158,0.14) 42%, transparent 68%); }
html[data-theme="dark"] .hh-helmet img { filter: drop-shadow(0 22px 34px rgba(0,0,0,0.5)); }

@media (prefers-reduced-motion: reduce) {
  .hh-scroll { height: auto; } .hh-stage { position: relative; }
  .hh-head { filter: none !important; opacity: 1 !important; }
  .hh-float, .hh-shadow { animation: none; }
  .hh-bignum { position: static; opacity: 1; transform: none; display: inline-block; margin: 1rem; }
  .hh-bignums { position: static; display: flex; justify-content: center; flex-wrap: wrap; padding-top: 60vh; }
}
@media (max-width: 720px) {
  .hh-bignum .n { font-size: clamp(4rem, 26vw, 8rem); }
  .hh-art { width: 150vw; top: 60%; }
}

/* ============ Seamless dark navy — unify all bands onto --bg ============ */
html[data-theme="dark"] .feature { background: transparent; }
html[data-theme="dark"] .showreel { background: transparent; }
html[data-theme="dark"] .cta-band { background: transparent; }
html[data-theme="dark"] .site-footer { background: transparent; border-top: 1px solid rgba(255,255,255,0.08); }
html[data-theme="dark"] .marquee { background: rgba(255,255,255,0.035); }
html[data-theme="dark"] .hh-glow {
  background: radial-gradient(circle, rgba(232,31,99,0.22), rgba(107,46,158,0.16) 42%, transparent 68%);
}
/* keep content cards subtly raised, but borders carry the structure on the dark canvas */
html[data-theme="dark"] .cta-band { border-top: 1px solid rgba(255,255,255,0.06); }

/* ============ Two-tone palette: white + darkest blue (gradient = only accent) ============ */
/* brand accents -> the gradient */
.kicker, .kicker.light,
.en-tag { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.en-tag b { color: inherit; }

/* surfaces defined by a white hairline on the dark canvas */
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .sim-box,
html[data-theme="dark"] .feature-art img,
html[data-theme="dark"] .reel-frame,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .contact-form {
  border: 1px solid rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .service-card:hover { background: rgba(255,255,255,0.08); }

/* interactive accents -> white (where a gradient can't apply as a solid) */
html[data-theme="dark"] .sim-slider input[type="range"] { accent-color: #fff; }
html[data-theme="dark"] .sim-chip:hover,
html[data-theme="dark"] .ffield input:focus,
html[data-theme="dark"] .ffield textarea:focus,
html[data-theme="dark"] .ffield select:focus,
html[data-theme="dark"] .sim-send-row input:focus { border-color: rgba(255,255,255,0.65); }
html[data-theme="dark"] .btn-ghost:hover { color: #0f1226; }

/* feature chips as outlined pills */
html[data-theme="dark"] .feature-chips li { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #fff; }

/* section bands -> seamless in dark; cards carry the structure */
html[data-theme="dark"] .services,
html[data-theme="dark"] .about,
html[data-theme="dark"] .work,
html[data-theme="dark"] .contact { background: transparent; }
html[data-theme="dark"] .service-icon { box-shadow: 0 10px 22px -10px rgba(211, 29, 83, 0.4); }

/* ============ Gravity Pulse teaser ============ */
.pulse-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.pulse-copy .section-title { color: var(--title); }
.pulse-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.pulse-ins {
  border: 1px solid var(--border-soft); border-radius: 16px; padding: 1.1rem 1rem; background: var(--surface);
}
.pulse-ins .v {
  font-family: var(--font-en); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pulse-ins .v small { -webkit-text-fill-color: var(--muted); font-size: 0.6em; }
.pulse-ins .l { margin-top: 0.5rem; color: var(--muted); font-size: 0.8rem; font-weight: 600; line-height: 1.4; }

/* This block was authored dark-only: translucent-white fills over a dark page.
   In light mode that fill goes near-white, so hardcoded #fff text vanished.
   Everything here now follows the theme tokens. */
.pulse-card {
  border: 1px solid var(--border-soft); border-radius: 22px; padding: 2rem 1.8rem;
  background: var(--card); position: relative; overflow: hidden;
}
.pulse-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--grad); }
.pulse-card h3 { color: var(--title); font-size: 1.3rem; font-weight: 800; margin-bottom: 0.5rem; }
.pulse-card > p { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.3rem; }
.pulse-form { display: flex; flex-direction: column; gap: 0.7rem; }
.pulse-form input, .pulse-form select {
  width: 100%; padding: 0.8rem 1rem; border-radius: 12px; font-family: inherit; font-size: 0.98rem;
  background: var(--field-bg); border: 1px solid var(--border-soft); color: var(--ink);
}
.pulse-form input::placeholder { color: var(--muted); }
.pulse-form input:focus, .pulse-form select:focus { outline: none; border-color: var(--pink); }
.pulse-form select option { background: var(--field-bg); color: var(--ink); }
.pulse-form .btn { margin-top: 0.3rem; width: 100%; }
.pulse-hp { position: absolute; inset-inline-start: -910px; opacity: 0; height: 0; width: 0; }
.pulse-note { margin-top: 0.9rem; font-weight: 700; font-size: 0.92rem; }
.pulse-note.ok { color: #34d399; }
.pulse-note.err { color: #fb7185; }
@media (max-width: 860px) {
  .pulse-inner { grid-template-columns: 1fr; gap: 2rem; }
  .pulse-insights { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) { .pulse-insights { grid-template-columns: 1fr; } }

/* prevent sticky-header selection-paint glitch on the public site */
.site-header, .hh-eyebrow, .hh-hint { -webkit-user-select: none; user-select: none; }

/* Artwork is not copy. These are drawn with a transparent fill over a clipped
   gradient, and a selection overrides -webkit-text-fill-color — so dragging
   across them flashed the glyphs solid in a flat colour that is not the brand's.
   The floating WhatsApp button is fixed chrome, same reason as the header. */
.gf-statwrap, .hh-bignums, .gf-helmet, .wa-float, .marquee {
  -webkit-user-select: none; user-select: none;
}