/* ============================================================
   Giant Vision Marketing — Service & Campaign Page Styles v3
   Shared by all /services/* and /campaigns/* pages.
   Depends on: ../style.css (must load first — provides tokens)
   ============================================================ */

/* Compatibility aliases so existing page HTML works unchanged */
.s-request-form         { /* alias */ }
.s-request-form .fld    { display: flex; flex-direction: column; gap: 6px; }
.s-request-form .fld label { font-size:.78rem;font-weight:600;color:var(--fg-muted); }
.s-request-form .fld input,
.s-request-form .fld select,
.s-request-form .fld textarea { width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);color:var(--fg);font-family:'Tajawal',sans-serif;font-size:.92rem;padding:12px 16px;outline:none;direction:inherit;transition:border-color var(--t),box-shadow var(--t); }
.s-request-form .fld input::placeholder,
.s-request-form .fld textarea::placeholder { color:var(--fg-dim); }
.s-request-form .fld input:focus,
.s-request-form .fld select:focus,
.s-request-form .fld textarea:focus { border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-a12); }
.s-request-form .fld input[readonly] { background:var(--brand-a05);border-color:var(--border-brand);color:var(--brand);cursor:default; }
.s-request-form .fld select { appearance:none;cursor:pointer; }
.s-request-form .fld textarea { resize:vertical;min-height:120px;line-height:1.65; }
[data-theme="light"] .s-request-form .fld input,
[data-theme="light"] .s-request-form .fld select,
[data-theme="light"] .s-request-form .fld textarea { background:var(--bg-2); }

/* Step body — allow direct h4/h5/p inside .s-step */
.s-step > h4, .s-step > h5 { font-size:1rem;font-weight:700;margin-bottom:6px;color:var(--fg); }
.s-step > p  { font-size:.87rem;color:var(--fg-muted);line-height:1.7; }

/* Deliv icon alias */
.s-deliv-icon { width:22px;height:22px;border-radius:50%;background:var(--brand-a12);border:1px solid var(--brand);display:flex;align-items:center;justify-content:center;font-size:.82rem;flex-shrink:0;margin-top:1px; }

/* Audience icon alias */
.s-aud-icon  { font-size:2rem;margin-bottom:12px; }
.s-aud > h5  { font-size:.95rem;font-weight:700;margin-bottom:6px;color:var(--fg); }
.s-aud > p   { font-size:.82rem;color:var(--fg-muted);line-height:1.55; }

/* Campaign heading accent — used on several campaign pages' <h2> spans
   but was never actually defined, so it rendered as plain foreground text. */
.text-orange { color: var(--brand); }

/* Final CTA actions alias */
.s-final-actions { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px; }

/* Breadcrumb */
.s-breadcrumb { display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--fg-muted);margin-bottom:18px;justify-content:center; }
.s-breadcrumb a { color:var(--fg-muted);transition:color var(--t); }
.s-breadcrumb a:hover { color:var(--brand); }
.s-breadcrumb-sep { color:var(--fg-dim); }

/* Type chip */
.s-type-chip { display:inline-block;background:var(--brand-a12);border:1px solid var(--border-brand);color:var(--brand);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:var(--r-pill);margin-bottom:18px; }

/* Hero tagline */
.s-hero-tagline { font-size:.92rem;color:var(--brand);font-weight:700;letter-spacing:.06em;margin-bottom:12px; }

/* Form note */
.s-form-note { font-size:.75rem;color:var(--fg-dim);text-align:center;margin-top:4px; }

/* Footer logo: mirrors .s-nav-logo (the header lockup, itself copied
   from the homepage's .nav-logo) size/spacing/text exactly — 56px icon,
   1.5px gap, same text scale — so the footer logo never drifts out of
   sync with the header again. */
/* inline-flex (not flex) so the lockup shrinks to fit its own content and
   sits flush at the RTL/LTR start edge instead of stretching the full
   2fr-wide footer-grid column — a stretched flex row-reverse container
   with no justify-content let the icon+text land at the wrong (left)
   edge while the paragraph/email below correctly hugged the right edge,
   same bug this exact fix already solved on the homepage footer. */
.s-footer-logo-wrap { display:inline-flex;flex-direction:row-reverse;align-items:center;gap:1.5px;margin-bottom:18px; }
.s-footer-logo      { height:56px;width:auto;object-fit:contain;display:block; }
.s-footer-logo-svg  { width:56px;height:56px;flex-shrink:0;display:none; }
.s-footer-brand-text { font-size:.8rem;font-weight:900;letter-spacing:.12em;line-height:1.2;color:var(--fg);display:block; }
.s-footer-brand-text span { color:var(--brand); }
.s-honeypot { position:absolute;opacity:0;height:0;width:0; }
.s-hero-inner { position:relative;z-index:1;width:100%; }
.s-hero-glow { position:absolute;top:0;bottom:0;inset-inline-end:0;width:50%;pointer-events:none; }
.s-hero-glow-center { position:absolute;inset:0;pointer-events:none; }
.s-footer-email     { color:var(--brand);font-size:.84rem; }
.s-footer-brand-tag { font-size:.65rem;font-weight:700;letter-spacing:.18em;color:var(--brand); }

/* ----- SERVICE NAVBAR ---------------------------------------- */
.s-navbar {
  position: fixed;
  top: 0; inset-inline: 0;
  z-index: 900;
  padding: 18px 0;
  transition: background var(--t-slow), padding var(--t), border-color var(--t-slow), backdrop-filter var(--t-slow);
  border-bottom: 1px solid transparent;
}
.s-navbar.scrolled {
  background: rgba(5,5,5,.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 12px 0;
  border-bottom-color: var(--border);
}
[data-theme="light"] .s-navbar.scrolled {
  background: rgba(250,250,248,.96);
}
.s-nav-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* Nav logo: same size/spacing/text values as the homepage's .nav-logo /
   .nav-logo-img / .nav-brand-name (style.css) — copied verbatim, not
   re-measured, so this never drifts out of sync with it again. */
.s-nav-logo-img { height:56px;width:auto;object-fit:contain;display:block; }
.s-nav-logo-svg { width:56px;height:56px;flex-shrink:0;display:none; }
.s-brand-name   { font-size:.8rem;font-weight:900;letter-spacing:.12em;line-height:1.2;color:var(--fg);display:block; }
.s-brand-name span { color:var(--brand); }
.s-nav-logo {
  flex-shrink: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 1.5px;
}

.s-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fg-muted);
  font-size: .83rem;
  font-weight: 500;
  transition: color var(--t);
  margin-inline-start: 12px;
}
.s-nav-back:hover { color: var(--brand); }
.s-nav-back svg  { transition: transform var(--t); }
.s-nav-back:hover svg { transform: translateX(3px); }
[dir="rtl"] .s-nav-back:hover svg { transform: translateX(-3px); }

.s-nav-utils {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.s-nav-cta {
  background: var(--brand);
  color: #fff;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: .84rem;
  padding: 9px 20px;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
  white-space: nowrap;
}
.s-nav-cta:hover {
  background: var(--brand-h);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232,117,26,.35);
}

.s-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none;
  padding: 6px; cursor: pointer;
}
.s-nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--fg); border-radius: 2px;
  transition: all var(--t);
}
.s-nav-menu {
  display: none;
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg-2);
  backdrop-filter: blur(24px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.s-nav-menu.open { display: flex; }
.s-nav-menu a {
  color: var(--fg-muted);
  font-size: 1.2rem;
  font-weight: 600;
  transition: color var(--t);
}
.s-nav-menu a:hover { color: var(--brand); }
.s-nav-close {
  background: none; border: none; cursor: pointer;
  color: var(--fg-muted); padding: 4px 10px; margin-top: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.s-nav-close svg { width: 22px; height: 22px; }

/* ============================================================
   WAVE / AMBIENT BACKGROUNDS — service pages
   Uses CSS pseudo-elements to avoid touching every HTML file.
   ============================================================ */

/* Hero ambient glow (supplements existing hero-bg grid) */
.s-hero::before {
  content: '';
  position: absolute;
  inset-inline-end: -10%;
  top: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, var(--brand) 0%, transparent 70%);
  opacity: var(--wave-lo, .07);
  pointer-events: none;
  animation: wavePulse 10s ease-in-out infinite;
  border-radius: 50%;
  z-index: 0;
}
.s-hero::after {
  content: '';
  position: absolute;
  inset-inline-start: -5%;
  bottom: -5%;
  width: 35%;
  height: 50%;
  background: radial-gradient(ellipse at center, var(--brand) 0%, transparent 70%);
  opacity: var(--wave-lo, .05);
  pointer-events: none;
  animation: wavePulse 14s ease-in-out infinite;
  border-radius: 50%;
  z-index: 0;
}
[data-theme="light"] .s-hero::before { opacity: var(--wave-lo, .04); }
[data-theme="light"] .s-hero::after  { opacity: .03; }

/* Reuse keyframes already defined in style.css */
@keyframes wavePulse {
  0%,100% { opacity: var(--wave-lo, .07); transform: scale(1); }
  50%      { opacity: var(--wave-hi, .13); transform: scale(1.06); }
}
@keyframes waveDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(14px,-10px) scale(1.03); }
  66%      { transform: translate(-9px,5px) scale(.97); }
}

/* Alt sections (s-section.alt) — subtle side glow */
.s-section.alt {
  position: relative;
  overflow: hidden;
}
.s-section.alt::before {
  content: '';
  position: absolute;
  inset-inline-end: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  height: 70%;
  background: radial-gradient(ellipse at center, var(--brand) 0%, transparent 70%);
  opacity: .04;
  border-radius: 50%;
  pointer-events: none;
  animation: wavePulse 12s ease-in-out infinite;
}
[data-theme="light"] .s-section.alt::before { opacity: .025; }

/* Final CTA band — stronger glow */
.s-final-cta {
  position: relative;
  overflow: hidden;
}
.s-final-cta::before {
  content: '';
  position: absolute;
  inset-inline-end: -5%;
  top: -40%;
  width: 50%;
  height: 180%;
  background: radial-gradient(ellipse at center, var(--brand) 0%, transparent 65%);
  opacity: .08;
  border-radius: 50%;
  pointer-events: none;
  animation: wavePulse 9s ease-in-out infinite;
}
.s-final-cta::after {
  content: '';
  position: absolute;
  inset-inline-start: -8%;
  bottom: -20%;
  width: 30%;
  height: 100%;
  background: radial-gradient(ellipse at center, var(--brand) 0%, transparent 70%);
  opacity: .05;
  border-radius: 50%;
  pointer-events: none;
  animation: wavePulse 13s ease-in-out infinite;
}
[data-theme="light"] .s-final-cta::before { opacity: .05; }
[data-theme="light"] .s-final-cta::after  { opacity: .03; }

/* Footer ambient */
.s-footer::before {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  top: -60px;
  transform: translateX(-50%);
  width: 80%;
  height: 160px;
  background: radial-gradient(ellipse at 50% 0%, var(--brand) 0%, transparent 70%);
  opacity: .05;
  pointer-events: none;
  animation: wavePulse 15s ease-in-out infinite;
}
[data-theme="light"] .s-footer::before { opacity: .03; }

/* Service page icon boxes (for SVG icon replacements).
   Each of the 3 upgraded sections gets its own mark shape so the systems
   stay visually distinct: Overview = circle (insight point), Deliverables
   = rounded square (installed module), Expected Value = glowing gradient
   circle (impact/KPI). */
.s-comp-icon {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--brand-a08);
  border: 1px solid var(--border-brand);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--brand-a05), 0 0 14px var(--brand-a12);
  transition: background var(--t), transform var(--t);
}
.s-comp-icon::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--border-brand);
  animation: nodeRingPulse 3.6s ease-in-out infinite;
}
.s-comp:nth-of-type(2) .s-comp-icon::before { animation-delay: -.6s; }
.s-comp:nth-of-type(3) .s-comp-icon::before { animation-delay: -1.2s; }
.s-comp:nth-of-type(4) .s-comp-icon::before { animation-delay: -1.8s; }
.s-comp:nth-of-type(5) .s-comp-icon::before { animation-delay: -2.4s; }
.s-comp:nth-of-type(6) .s-comp-icon::before { animation-delay: -3s; }
.s-comp-icon svg { width: 20px; height: 20px; }
.s-comp:hover .s-comp-icon { background: var(--brand-a18); transform: rotate(-8deg) scale(1.06); }

/* Deliverables badge — rounded-square "module" mark. Covers both leading-
   badge variants in use: the checkmark glyph (service pages) and the SVG
   icon (campaign pages) — same shape language either way. */
.s-deliv-check, .s-deliv-icon {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--brand-a12);
  border: 1px solid var(--border-brand);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand); font-size: .78rem; font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background var(--t), color var(--t), transform var(--t);
}
.s-deliv-icon svg { width: 15px; height: 15px; }
.s-deliv:hover .s-deliv-check,
.s-deliv:hover .s-deliv-icon { background: var(--brand); color: #fff; transform: scale(1.08); }

.s-aud-icon {
  position: relative;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--brand-a18), var(--brand-a05));
  border: 1px solid var(--border-brand);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  margin: 0 auto 16px;
  box-shadow: 0 0 0 1px var(--brand-a05), 0 0 20px var(--brand-a18);
  transition: transform var(--t), box-shadow var(--t);
}
.s-aud-icon::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--border-brand);
  animation: nodeRingPulse 3.2s ease-in-out infinite;
}
.s-aud:nth-of-type(2) .s-aud-icon::before { animation-delay: -.6s; }
.s-aud:nth-of-type(3) .s-aud-icon::before { animation-delay: -1.2s; }
.s-aud:nth-of-type(4) .s-aud-icon::before { animation-delay: -1.8s; }
.s-aud-icon svg { width: 22px; height: 22px; }
.s-aud:hover .s-aud-icon { transform: scale(1.1); box-shadow: 0 0 0 1px var(--brand-a08), 0 0 28px var(--brand-a18); }

/* ----- SERVICE HERO ------------------------------------------ */
.s-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 130px 28px 90px;
  overflow: hidden;
}
.s-hero-bg  { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* Hero photo — ALWAYS the global approved artwork (images/services/
   hero-dark.webp / hero-light.webp), switching with [data-theme], for
   EVERY page that carries html[data-category] or html[data-campaign] —
   services and campaigns alike. This is intentionally a plain literal
   url(), not a per-campaign variable: campaign pages get their own
   distinct identity from --s-camp-photo/--s-camp-photo-2 further down,
   which are used ONLY on internal sections/CTA, never the hero — the
   hero must stay the one consistent, global piece of artwork site-wide.
   Sits behind the grid + gradient overlay so the grid's radial mask and
   the overlay's fade both read as intentional depth, not pasted on top. */
html[data-category] .s-hero-bg, html[data-campaign] .s-hero-bg {
  background-image: url("images/services/hero-dark.webp");
  background-size: cover;
  background-position: center;
}
html[data-theme="light"][data-category] .s-hero-bg,
html[data-theme="light"][data-campaign] .s-hero-bg { background-image: url("images/services/hero-light.webp"); }
html[data-category] .s-hero-bg::after, html[data-campaign] .s-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,.78) 0%, rgba(5,5,5,.42) 32%, rgba(5,5,5,.5) 68%, rgba(5,5,5,.82) 100%);
}
html[data-theme="light"][data-category] .s-hero-bg::after,
html[data-theme="light"][data-campaign] .s-hero-bg::after {
  background: linear-gradient(180deg, rgba(250,250,248,.82) 0%, rgba(250,250,248,.5) 32%, rgba(250,250,248,.58) 68%, rgba(250,250,248,.85) 100%);
}
/* Per-campaign PRIMARY + SECONDARY internal-section photos (never used by
   the hero — see above). PRIMARY carries that campaign's specific
   identity (bespoke art for Ramadan/back-to-school/major-retail, a
   thematically-fitting reused service photo for the other campaigns
   whose subject overlaps) and covers Overview/Components/Audience.
   SECONDARY is Deliverables' own distinct photo — deliberately a
   DIFFERENT file from that campaign's PRIMARY, and spread across
   several different assets rather than one generic texture repeated on
   every campaign, mirroring the same per-category logic used for
   services' --s-svc-photo-2 above: content deliverables (Ramadan)
   borrow media-production, ad-performance deliverables (back-to-school)
   borrow digital-performance, in-mall activation deliverables (major
   retail) borrow digital-performance's growth-chart feel, growth/
   expansion-metrics deliverables (launch & expansion) also borrow
   digital-performance, promo-launch deliverables (retail sales, summer)
   borrow product-launch, and religious uses the abstract tech-texture.
   Global seasons has no single-country bespoke art either, so it
   borrows product-launch as its PRIMARY (distinct from its own
   tech-texture SECONDARY above) — every rule in this file only ever
   points at files that currently exist in images/services/ or
   images/campaigns/.
   --s-cta-photo (closing band) keeps its own dedicated value, distinct
   from both, so the hero/sections/CTA are three different pictures, not
   one repeated everywhere. Note: How-We-Work (:nth-of-type(4) below) no
   longer reads PRIMARY/SECONDARY at all — every campaign now shares the
   same two official How-We-Work images via --s-flow-photo, defined with
   the services rules above. */
html[data-campaign="ramadan"]       { --s-camp-photo: url("images/campaigns/ramadan-dark.webp"); --s-camp-photo-2: url("images/services/media-production-dark.webp"); --s-cta-photo: url("images/campaigns/ramadan-dark.webp"); }
html[data-campaign="backtoschool"]  { --s-camp-photo: url("images/campaigns/back-to-school-dark.webp"); --s-camp-photo-2: url("images/services/digital-performance-dark.webp"); --s-cta-photo: url("images/campaigns/back-to-school-dark.webp"); }
html[data-campaign="majorretail"]   { --s-camp-photo: url("images/campaigns/major-retail-dark.webp"); --s-camp-photo-2: url("images/services/digital-performance-dark.webp"); --s-cta-photo: url("images/campaigns/major-retail-dark.webp"); }
html[data-campaign="globalseasons"] { --s-camp-photo: url("images/services/product-launch-dark.webp"); --s-camp-photo-2: url("images/services/tech-texture-dark.webp"); --s-cta-photo: url("images/services/product-launch-dark.webp"); }
html[data-campaign="launchexpansion"] { --s-camp-photo: url("images/services/product-launch-dark.webp"); --s-camp-photo-2: url("images/services/digital-performance-dark.webp"); --s-cta-photo: url("images/services/product-launch-dark.webp"); }
html[data-campaign="retailsales"]   { --s-camp-photo: url("images/services/digital-performance-dark.webp"); --s-camp-photo-2: url("images/services/product-launch-dark.webp"); --s-cta-photo: url("images/services/digital-performance-dark.webp"); }
html[data-campaign="religious"]     { --s-camp-photo: url("images/services/media-production-dark.webp"); --s-camp-photo-2: url("images/services/tech-texture-dark.webp"); --s-cta-photo: url("images/services/hero-dark.webp"); }
html[data-campaign="summer"]        { --s-camp-photo: url("images/services/media-production-dark.webp"); --s-camp-photo-2: url("images/services/product-launch-dark.webp"); --s-cta-photo: url("images/services/hero-dark.webp"); }
html[data-theme="light"][data-campaign="ramadan"]       { --s-camp-photo: url("images/campaigns/ramadan-light.webp"); --s-camp-photo-2: url("images/services/media-production-light.webp"); --s-cta-photo: url("images/campaigns/ramadan-light.webp"); }
html[data-theme="light"][data-campaign="backtoschool"]  { --s-camp-photo: url("images/campaigns/back-to-school-light.webp"); --s-camp-photo-2: url("images/services/digital-performance-light.webp"); --s-cta-photo: url("images/campaigns/back-to-school-light.webp"); }
html[data-theme="light"][data-campaign="majorretail"]   { --s-camp-photo: url("images/campaigns/major-retail-light.webp"); --s-camp-photo-2: url("images/services/digital-performance-light.webp"); --s-cta-photo: url("images/campaigns/major-retail-light.webp"); }
html[data-theme="light"][data-campaign="globalseasons"] { --s-camp-photo: url("images/services/product-launch-light.webp"); --s-camp-photo-2: url("images/services/tech-texture-light.webp"); --s-cta-photo: url("images/services/product-launch-light.webp"); }
html[data-theme="light"][data-campaign="launchexpansion"] { --s-camp-photo: url("images/services/product-launch-light.webp"); --s-camp-photo-2: url("images/services/digital-performance-light.webp"); --s-cta-photo: url("images/services/product-launch-light.webp"); }
html[data-theme="light"][data-campaign="retailsales"]   { --s-camp-photo: url("images/services/digital-performance-light.webp"); --s-camp-photo-2: url("images/services/product-launch-light.webp"); --s-cta-photo: url("images/services/digital-performance-light.webp"); }
html[data-theme="light"][data-campaign="religious"]     { --s-camp-photo: url("images/services/media-production-light.webp"); --s-camp-photo-2: url("images/services/tech-texture-light.webp"); --s-cta-photo: url("images/services/hero-light.webp"); }
html[data-theme="light"][data-campaign="summer"]        { --s-camp-photo: url("images/services/media-production-light.webp"); --s-camp-photo-2: url("images/services/product-launch-light.webp"); --s-cta-photo: url("images/services/hero-light.webp"); }
.s-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}
[data-theme="light"] .s-hero-grid {
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
}
.s-hero-content {
  position: relative; z-index: 1;
  max-width: 820px; margin: 0 auto;
}
.s-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 24px;
}
.s-hero-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-block;
  animation: dotPulse 2.4s ease-in-out infinite;
}
.s-hero-title {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 22px;
  color: var(--fg);
}
.s-hero-desc {
  font-size: clamp(.92rem, 1.8vw, 1.08rem);
  color: var(--fg-muted);
  margin-bottom: 40px;
  line-height: 1.85;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.s-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Hero visual SVG container */
.s-hero-visual {
  margin: 40px auto 0;
  max-width: 280px;
  opacity: .8;
}
.s-hero-shape { width: 100%; height: auto; display: block; }

/* ----- SECTION BASE ------------------------------------------ */
.s-section {
  padding: 96px 0;
  background: var(--bg);
}
.s-section.alt { background: var(--bg-2); }
/* Fallback faint data-mesh texture for /campaigns/* pages only — always
   overridden in practice by the per-section campaign-photo system further
   below (same .s-section target, later in the cascade), kept here purely
   as a harmless safety net. Service pages get a real, meaning-matched
   photo per section instead — see the per-category system right after
   this block — so this generic texture no longer applies to them. */
html[data-campaign] .s-section.alt::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("images/services/data-mesh-dark.webp");
  background-size: cover;
  background-position: center;
  opacity: .05;
  pointer-events: none;
}
html[data-theme="light"][data-campaign] .s-section.alt::after {
  background-image: url("images/services/data-mesh-light.webp");
  opacity: .07;
}

/* SERVICE internal-section photos — one deliberately-matched background
   per section TYPE (not per position), so Overview/Deliverables/Process/
   Expected-Value each carry their own meaning instead of an arbitrary
   alternating texture. Detected by content (.s-overview/.s-components/
   .s-deliverables/#process/.s-audiences) rather than structural position,
   since services — unlike campaigns — don't all share one fixed section
   count (hub pages add an extra cross-link grid; ~16 pages pair a text
   intro with a points grid; 4 pages have only the points grid). This
   covers every structural variant seen across the 25 service pages
   without any per-page HTML changes.
   --s-svc-photo is the per-category Overview photo (same mapping as
   --s-cta-photo above). --s-svc-photo-2 is a DIFFERENT photo per
   category used only for Deliverables, deliberately cross-mapped from
   a different category's Overview asset — never the same file as that
   category's own --s-svc-photo — so Overview and Deliverables never
   look like the same background repositioned, and Deliverables isn't
   one generic image reused everywhere: digital's output/report feel
   borrows the abstract tech-texture; events' activation/rollout
   deliverable feel borrows product-launch; media's distribution/
   analytics deliverable feel borrows digital-performance; pr's
   deliverable is literally press photo/video output, so it borrows
   media-production; launch's deliverable is a launch-day activation, so
   it borrows tech-texture's abstract data feel instead of repeating its
   own product-launch identity photo. The "pr" category's own identity
   photo (used for its Overview and CTA band) is tech-texture, and the
   "events" category's own identity photo (Overview and CTA band) is
   media-production — every rule across this file only ever points at
   files that currently exist in images/services/.
   --s-prob-photo is a THIRD per-category photo, used only by the
   content/points-grid section that sits directly after Overview (named
   "problems" on 16 pages, an unnamed intro-recap on the 4 hub-style
   pages) — that section also matches .s-components structurally, which
   used to make it share --s-svc-photo with Overview immediately above
   it: the same picture in two sections back to back. --s-prob-photo is
   always a different file from that category's own --s-svc-photo AND
   --s-svc-photo-2, so this section never repeats either neighbor.
   --s-flow-photo/--s-value-photo stay universal across all 5 categories
   since "how we work" and "expected value" aren't category-specific
   concepts: --s-flow-photo is the two approved How-We-Work images
   (Giant Vision's official artwork for this section, same two files
   used on /campaigns/* below) and --s-value-photo reuses the
   product-launch growth-arrow-and-metrics artwork. */
html[data-category="digital"] { --s-svc-photo: url("images/services/digital-performance-dark.webp"); --s-svc-photo-2: url("images/services/tech-texture-dark.webp"); }
html[data-category="events"]  { --s-svc-photo: url("images/services/media-production-dark.webp"); --s-svc-photo-2: url("images/services/product-launch-dark.webp"); }
html[data-category="media"]   { --s-svc-photo: url("images/services/media-production-dark.webp"); --s-svc-photo-2: url("images/services/digital-performance-dark.webp"); }
html[data-category="pr"]      { --s-svc-photo: url("images/services/tech-texture-dark.webp"); --s-svc-photo-2: url("images/services/media-production-dark.webp"); }
html[data-category="launch"]  { --s-svc-photo: url("images/services/product-launch-dark.webp"); --s-svc-photo-2: url("images/services/tech-texture-dark.webp"); }
html[data-theme="light"][data-category="digital"] { --s-svc-photo: url("images/services/digital-performance-light.webp"); --s-svc-photo-2: url("images/services/tech-texture-light.webp"); }
html[data-theme="light"][data-category="events"]  { --s-svc-photo: url("images/services/media-production-light.webp"); --s-svc-photo-2: url("images/services/product-launch-light.webp"); }
html[data-theme="light"][data-category="media"]   { --s-svc-photo: url("images/services/media-production-light.webp"); --s-svc-photo-2: url("images/services/digital-performance-light.webp"); }
html[data-theme="light"][data-category="pr"]      { --s-svc-photo: url("images/services/tech-texture-light.webp"); --s-svc-photo-2: url("images/services/media-production-light.webp"); }
html[data-theme="light"][data-category="launch"]  { --s-svc-photo: url("images/services/product-launch-light.webp"); --s-svc-photo-2: url("images/services/tech-texture-light.webp"); }
html[data-category="digital"] { --s-prob-photo: url("images/services/media-production-dark.webp"); }
html[data-category="events"]  { --s-prob-photo: url("images/services/digital-performance-dark.webp"); }
html[data-category="media"]   { --s-prob-photo: url("images/services/tech-texture-dark.webp"); }
html[data-category="pr"]      { --s-prob-photo: url("images/services/digital-performance-dark.webp"); }
html[data-category="launch"]  { --s-prob-photo: url("images/services/digital-performance-dark.webp"); }
html[data-theme="light"][data-category="digital"] { --s-prob-photo: url("images/services/media-production-light.webp"); }
html[data-theme="light"][data-category="events"]  { --s-prob-photo: url("images/services/digital-performance-light.webp"); }
html[data-theme="light"][data-category="media"]   { --s-prob-photo: url("images/services/tech-texture-light.webp"); }
html[data-theme="light"][data-category="pr"]      { --s-prob-photo: url("images/services/digital-performance-light.webp"); }
html[data-theme="light"][data-category="launch"]  { --s-prob-photo: url("images/services/digital-performance-light.webp"); }
html[data-category], html[data-campaign] {
  --s-flow-photo: url("images/services/data-mesh-dark.webp");
}
html[data-theme="light"][data-category], html[data-theme="light"][data-campaign] {
  --s-flow-photo: url("images/services/data-mesh-light.webp");
}
html[data-category] {
  --s-value-photo: url("images/services/product-launch-dark.webp");
}
html[data-theme="light"][data-category] {
  --s-value-photo: url("images/services/product-launch-light.webp");
}
html[data-category] .s-section:not(.s-form-section) { position: relative; overflow: hidden; }
html[data-category] .s-section:not(.s-form-section)::after {
  content: '';
  position: absolute; inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}
html[data-category] .s-section:has(.s-overview)::after,
html[data-category] .s-section:has(.s-components)::after {
  background-image: linear-gradient(180deg, rgba(5,5,5,.6), rgba(5,5,5,.6)), var(--s-svc-photo);
  background-position: center 30%;
}
html[data-category] .s-section:has(.s-deliverables)::after {
  background-image: linear-gradient(180deg, rgba(5,5,5,.6), rgba(5,5,5,.6)), var(--s-svc-photo-2);
  background-position: right 78%;
}
html[data-category] .s-section#process::after {
  background-image: linear-gradient(180deg, rgba(5,5,5,.6), rgba(5,5,5,.6)), var(--s-flow-photo);
  background-position: center;
}
html[data-category] .s-section:has(.s-audiences)::after {
  background-image: linear-gradient(180deg, rgba(5,5,5,.6), rgba(5,5,5,.6)), var(--s-value-photo);
  background-position: left 65%;
}
/* Overrides the rule above for the ONE section that structurally matches
   .s-components but sits directly after the Overview section (see
   --s-prob-photo comment above) — must come after the general rule so
   its extra compound (the adjacent-sibling condition) wins in the
   cascade. */
html[data-category] .s-section:has(.s-overview) + .s-section:has(.s-components)::after {
  background-image: linear-gradient(180deg, rgba(5,5,5,.6), rgba(5,5,5,.6)), var(--s-prob-photo);
  background-position: center 60%;
}
/* "events" category only: on the one hub-style page where Deliverables
   sits directly before the Audience section (no Process/Value between
   them), Audience's universal --s-value-photo (product-launch) happens
   to equal events' own --s-svc-photo-2 (also product-launch) — the same
   picture in two sections back to back. Force a distinct photo just for
   that adjacency; every other events page keeps --s-value-photo as-is
   since Deliverables never sits next to it there. */
html[data-category="events"] .s-section:has(.s-deliverables) + .s-section:has(.s-audiences)::after {
  background-image: linear-gradient(180deg, rgba(5,5,5,.6), rgba(5,5,5,.6)), url("images/services/tech-texture-dark.webp");
  background-position: left 65%;
}
html[data-theme="light"][data-category] .s-section:has(.s-overview)::after,
html[data-theme="light"][data-category] .s-section:has(.s-components)::after {
  background-image: linear-gradient(180deg, rgba(250,250,248,.66), rgba(250,250,248,.66)), var(--s-svc-photo);
}
html[data-theme="light"][data-category] .s-section:has(.s-deliverables)::after {
  background-image: linear-gradient(180deg, rgba(250,250,248,.66), rgba(250,250,248,.66)), var(--s-svc-photo-2);
}
html[data-theme="light"][data-category] .s-section#process::after {
  background-image: linear-gradient(180deg, rgba(250,250,248,.66), rgba(250,250,248,.66)), var(--s-flow-photo);
}
html[data-theme="light"][data-category] .s-section:has(.s-audiences)::after {
  background-image: linear-gradient(180deg, rgba(250,250,248,.66), rgba(250,250,248,.66)), var(--s-value-photo);
}
html[data-theme="light"][data-category] .s-section:has(.s-overview) + .s-section:has(.s-components)::after {
  background-image: linear-gradient(180deg, rgba(250,250,248,.66), rgba(250,250,248,.66)), var(--s-prob-photo);
}
html[data-theme="light"][data-category="events"] .s-section:has(.s-deliverables) + .s-section:has(.s-audiences)::after {
  background-image: linear-gradient(180deg, rgba(250,250,248,.66), rgba(250,250,248,.66)), url("images/services/tech-texture-light.webp");
}
/* Campaign internal sections — deliberately alternate between that
   campaign's PRIMARY and SECONDARY photo (see --s-camp-photo/-2 above),
   each at a DIFFERENT crop position per section, so the page reads as
   one cohesive identity without ever repeating one identical picture in
   every section (that repetition — and reusing the hero's own image —
   was the exact problem this replaces). Text in these sections sits on
   solid card surfaces (.s-comp/.s-deliv/.s-aud backgrounds), not
   directly on the photo, so a moderate tint keeps everything readable
   without hiding the image or killing the orange glow. Applies to every
   .s-section on a campaign page except .s-form-section, which keeps its
   own lighter, campaign-neutral texture — a busy photo behind input
   fields hurts usability more than it helps.
   Structural order on every campaign page is fixed (hero, Overview,
   Components, Process/How-We-Work, Deliverables, Audience, Form, Final
   CTA), so :nth-of-type on the shared <section> tag reliably targets
   each one without needing per-page HTML changes: 2=Overview, 3=
   Components, 4=Process, 5=Deliverables, 6=Audience.
   Components (nth-of-type 3) now uses SECONDARY rather than PRIMARY:
   it used to share --s-camp-photo with the Overview section directly
   above it, which meant the exact same photo rendered in two sections
   back to back. SECONDARY is still that campaign's own dedicated art
   (not a generic shared texture), so Components still visibly belongs
   to the campaign — it just no longer repeats Overview's picture.
   Deliverables (nth-of-type 5) also uses SECONDARY, but that's never a
   problem: Process (nth-of-type 4, --s-flow-photo) always sits between
   Components and Deliverables, so the repeat is never back-to-back.
   Audience (nth-of-type 6) keeps PRIMARY — it sits right after
   Deliverables (SECONDARY), so the two are never the same image
   either. Process/How-We-Work (nth-of-type 4) is the one section that
   never reads PRIMARY/SECONDARY at all: it uses --s-flow-photo, the two
   official How-We-Work images shared with every service page, the same
   on every campaign. */
html[data-campaign] .s-section:not(.s-form-section) {
  position: relative;
  overflow: hidden;
}
html[data-campaign] .s-section:not(.s-form-section)::after {
  content: '';
  position: absolute; inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}
html[data-campaign] section.s-section:nth-of-type(2)::after { background-image: linear-gradient(180deg, rgba(5,5,5,.6), rgba(5,5,5,.6)), var(--s-camp-photo); background-position: center 25%; }
html[data-campaign] section.s-section:nth-of-type(3)::after { background-image: linear-gradient(180deg, rgba(5,5,5,.6), rgba(5,5,5,.6)), var(--s-camp-photo-2); background-position: left center; }
html[data-campaign] section.s-section:nth-of-type(4)::after { background-image: linear-gradient(180deg, rgba(5,5,5,.6), rgba(5,5,5,.6)), var(--s-flow-photo); background-position: center; }
html[data-campaign] section.s-section:nth-of-type(5)::after { background-image: linear-gradient(180deg, rgba(5,5,5,.6), rgba(5,5,5,.6)), var(--s-camp-photo-2); background-position: right 75%; }
html[data-campaign] section.s-section:nth-of-type(6)::after { background-image: linear-gradient(180deg, rgba(5,5,5,.6), rgba(5,5,5,.6)), var(--s-camp-photo); background-position: center 80%; }
html[data-theme="light"][data-campaign] section.s-section:nth-of-type(2)::after { background-image: linear-gradient(180deg, rgba(250,250,248,.66), rgba(250,250,248,.66)), var(--s-camp-photo); }
html[data-theme="light"][data-campaign] section.s-section:nth-of-type(3)::after { background-image: linear-gradient(180deg, rgba(250,250,248,.66), rgba(250,250,248,.66)), var(--s-camp-photo-2); }
html[data-theme="light"][data-campaign] section.s-section:nth-of-type(4)::after { background-image: linear-gradient(180deg, rgba(250,250,248,.66), rgba(250,250,248,.66)), var(--s-flow-photo); }
html[data-theme="light"][data-campaign] section.s-section:nth-of-type(5)::after { background-image: linear-gradient(180deg, rgba(250,250,248,.66), rgba(250,250,248,.66)), var(--s-camp-photo-2); }
html[data-theme="light"][data-campaign] section.s-section:nth-of-type(6)::after { background-image: linear-gradient(180deg, rgba(250,250,248,.66), rgba(250,250,248,.66)), var(--s-camp-photo); }
.s-section-hd  { text-align: center; margin-bottom: 52px; position: relative; }
.s-section-hd h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 12px;
  color: var(--fg);
}
.s-section-hd p { color: var(--fg-muted); font-size: .95rem; line-height: 1.75; max-width: 560px; margin: 0 auto; }

.s-wrap, .container { max-width: 1200px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

/* ----- SECTION HEADER VARIANTS -------------------------------
   .s-section-hd markup is identical everywhere; each of the 3 upgraded
   section types is detected structurally by what follows it, so the
   right header style applies with zero per-page HTML changes and never
   touches unrelated headers (Process, Form, hub target-audience, etc.
   simply don't match any of these :has() conditions).
   Overview   → editorial: start-aligned, thin accent line.
   Deliverables → manifest: centered, fading double-ended bar.
   Expected Value → impact: centered, bigger weight, bold glowing bar. */
.s-section-hd:has(+ .s-overview),
.s-section-hd:has(+ .s-components) {
  text-align: start;
  max-width: 640px;
  margin-inline: 0;
}
.s-section-hd:has(+ .s-overview) p,
.s-section-hd:has(+ .s-components) p { margin-inline: 0; }
.s-section-hd:has(+ .s-overview)::before,
.s-section-hd:has(+ .s-components)::before {
  content: '';
  display: block;
  width: 42px; height: 3px;
  background: var(--brand);
  border-radius: 2px;
  margin-bottom: 16px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
[dir="rtl"] .s-section-hd:has(+ .s-overview)::before,
[dir="rtl"] .s-section-hd:has(+ .s-components)::before { transform-origin: right; }

.s-section-hd:has(+ .s-deliverables)::before {
  content: '';
  display: block;
  width: 64px; height: 3px;
  margin: 0 auto 16px;
  background: linear-gradient(to right, transparent, var(--brand), transparent);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}

.s-section-hd:has(+ .s-audiences) h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; }
.s-section-hd:has(+ .s-audiences)::before {
  content: '';
  display: block;
  width: 84px; height: 5px;
  margin: 0 auto 18px;
  background: var(--brand);
  border-radius: 3px;
  box-shadow: var(--brand-glow);
  transform: scaleX(0);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.s-section-hd.reveal.visible::before { transform: scaleX(1); }

/* ----- OVERVIEW CARD -----------------------------------------
   Premium editorial panel: brand rule on the lead edge, oversized ghost
   quotation mark, bold "strategic statement" lead paragraph, and the
   closing paragraph promoted into a highlighted insight/note callout —
   all driven by structural position so it works whether a page uses the
   2-column grid intro (hub pages) or plain stacked paragraphs (every
   other page that has .s-overview). */
.s-overview {
  position: relative;
  /* Translucent, not opaque — lets the section's background photo (see
     the campaign/service photo systems above) show through around and
     behind the card instead of being fully hidden by a solid surface. */
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--r-xl);
  padding: 40px 44px;
  max-width: 900px;
}
.s-overview::before {
  content: '\201C';
  position: absolute;
  top: 4px; inset-inline-start: 30px;
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--brand-a12);
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
}
.s-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.s-overview-grid p:first-child { font-size: 1.05rem; font-weight: 700; color: var(--fg); line-height: 1.7; }
.s-overview h3   { font-size: 1.3rem; font-weight: 800; margin-bottom: 16px; color: var(--fg); position: relative; z-index: 1; }
.s-overview > p  { color: var(--fg-muted); font-size: .92rem; line-height: 1.85; position: relative; z-index: 1; }
.s-overview > p:first-child { font-size: 1.05rem; font-weight: 700; color: var(--fg); line-height: 1.7; }
.s-overview > p:last-child {
  background: var(--brand-a05);
  border: 1px solid var(--border-brand);
  border-radius: var(--r);
  padding: 14px 18px;
  color: var(--fg);
  font-weight: 600;
  font-size: .88rem;
  margin-top: 4px;
}
.s-overview-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.s-tag {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-size: .8rem;
  transition: border-color var(--t), color var(--t);
}
.s-tag:hover { border-color: var(--border-brand); color: var(--brand); }

/* ----- OVERVIEW SUPPORTING GRID (insight points) -------------
   Same card grid used for a page's problem/insight points, and (by
   necessity of shared markup) for a hub page's service cross-links and a
   campaign's "ماذا تشمل الحملة؟" module — all read as part of the same
   editorial family via the ghost index numeral and hairline top accent. */
.s-components {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  counter-reset: gv-insight;
}
.s-comp {
  counter-increment: gv-insight;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.s-comp::before {
  content: '';
  position: absolute;
  inset-inline-start: 0; top: 0;
  width: 0; height: 3px;
  background: linear-gradient(to right, var(--brand), transparent);
  transition: width .4s ease;
}
[dir="rtl"] .s-comp::before { background: linear-gradient(to left, var(--brand), transparent); }
.s-comp::after {
  content: counter(gv-insight, decimal-leading-zero);
  position: absolute;
  top: 4px; inset-inline-end: 18px;
  font-size: 3rem;
  font-weight: 900;
  color: var(--brand-a08);
  line-height: 1;
  pointer-events: none;
}
.s-comp:hover { border-color: rgba(232,117,26,.3); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.s-comp:hover::before { width: 100%; }
.s-comp-icon  { font-size: 1.8rem; position: relative; z-index: 1; }
.s-comp-num   { font-size: 2.2rem; font-weight: 900; color: var(--brand-a12); line-height: 1; }
.s-comp h4    { font-size: 1rem; font-weight: 700; color: var(--fg); position: relative; z-index: 1; }
.s-comp p     { font-size: .85rem; color: var(--fg-muted); line-height: 1.65; flex: 1; position: relative; z-index: 1; }

/* ----- PROCESS / STEPS -------------------------------------- */
.s-process { display: flex; flex-direction: column; gap: 0; max-width: 820px; margin: 0 auto; }
.s-step {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding-bottom: 36px;
  position: relative;
}
.s-step:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 19px; top: 44px;
  width: 3px;
  background:
    linear-gradient(to bottom, var(--brand-a18), transparent),
    linear-gradient(to bottom, transparent, var(--brand) 10%, transparent 22%);
  background-size: 100% 100%, 100% 260%;
  background-repeat: no-repeat;
  animation: sStepFlow 2.4s linear infinite;
  filter: drop-shadow(0 0 3px var(--brand-a18));
  bottom: 0;
}
@keyframes sStepFlow {
  0%   { background-position: 0 0, 0 -200%; }
  100% { background-position: 0 0, 0 100%; }
}
.s-step-n {
  position: relative;
  z-index: 1;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; color: var(--brand);
  background: var(--brand-a08);
  box-shadow: 0 0 0 1px var(--brand-a05), 0 0 14px var(--brand-a12);
  flex-shrink: 0;
  transition: background var(--t), box-shadow var(--t), border-color var(--t);
}
.s-step-n svg { width: 18px; height: 18px; }
.s-step-n::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--border-brand);
  animation: nodeRingPulse 3.4s ease-in-out infinite;
}
.s-step:nth-of-type(2) .s-step-n::before { animation-delay: -.85s; }
.s-step:nth-of-type(3) .s-step-n::before { animation-delay: -1.7s; }
.s-step:nth-of-type(4) .s-step-n::before { animation-delay: -2.55s; }
.s-step:nth-of-type(5) .s-step-n::before { animation-delay: -3.4s; }
.s-step:hover .s-step-n { background: var(--brand-a18); box-shadow: 0 0 0 1px var(--brand-a08), var(--brand-glow); }
/* Outcome node — final step reads as the destination/result of the journey */
.s-step:last-child .s-step-n {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 1px var(--brand-a18), var(--brand-glow), 0 0 26px var(--brand-a18);
}
.s-step:last-child .s-step-n::before { border-color: var(--brand); animation-duration: 2.3s; }
.s-step-body h4 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; color: var(--fg); }
.s-step-body p  { font-size: .87rem; color: var(--fg-muted); line-height: 1.7; }

/* ============================================================
   HOW WE WORK — horizontal workflow of glowing icon-in-circle steps
   chained by animated connecting arrows. This is the .s-flow-* system,
   the dedicated "How We Work" section on every service AND campaign
   page: one continuous flow reads left-to-right (right-to-left in
   Arabic, mirrored via [dir="rtl"] below) from the first step to the
   final "outcome" node, which gets the solid-fill treatment so it
   visually reads as the destination the whole sequence builds toward.
   ============================================================ */
.s-flow-track {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 4px 22px;
}
/* Longer workflows (6-7+ steps) can still exceed even a wide desktop
   viewport once every node/arrow is laid out at full size — flex:1 with
   a modest basis lets nodes shrink together to fit shorter tracks
   without scrolling, while still growing to fill the row on tracks with
   fewer steps (see .s-flow-node below). If a track is unusually long and
   still needs to scroll, show a slim, on-brand, always-visible scrollbar
   (not the hidden default) so that's an obvious, discoverable affordance
   rather than a silent hard clip with no visual cue. */
.s-flow-track::-webkit-scrollbar { height: 5px; }
.s-flow-track::-webkit-scrollbar-track { background: transparent; }
.s-flow-track::-webkit-scrollbar-thumb { background: var(--brand-a18); border-radius: 3px; }
.s-flow-track { scrollbar-width: thin; scrollbar-color: var(--brand-a18) transparent; }
.s-flow-node {
  flex: 1 1 130px;
  min-width: 0;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  /* Explicitly include opacity here (matching .reveal's own duration) —
     this element also carries the sitewide .reveal class for its scroll-
     in fade, and redeclaring the `transition` shorthand without opacity
     would silently drop .reveal's opacity transition (shorthand replaces
     the whole property, it doesn't merge per-value with an earlier rule). */
  transition: transform .3s ease, opacity .65s ease;
}
.s-flow-icon {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 1.5px solid var(--brand);
  background: var(--brand-a08);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand-a05), 0 0 22px var(--brand-a12);
  flex-shrink: 0;
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.s-flow-icon svg { width: 28px; height: 28px; }
.s-flow-icon::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--border-brand);
  animation: nodeRingPulse 3.4s ease-in-out infinite;
}
/* Step-order badge — small numbered marker on each node, independent of
   the icon (which carries the step's MEANING); together they satisfy
   both "icon inside a glowing circle" and a clear, countable sequence. */
.s-flow-n {
  position: absolute;
  top: -4px; inset-inline-end: -4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-brand);
  color: var(--brand);
  font-size: .65rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.s-flow-node:nth-child(3)  .s-flow-icon::before { animation-delay: -.7s; }
.s-flow-node:nth-child(5)  .s-flow-icon::before { animation-delay: -1.4s; }
.s-flow-node:nth-child(7)  .s-flow-icon::before { animation-delay: -2.1s; }
.s-flow-node:nth-child(9)  .s-flow-icon::before { animation-delay: -2.8s; }
.s-flow-node:nth-child(11) .s-flow-icon::before { animation-delay: -3.5s; }
.s-flow-body h4 { font-size: .92rem; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.s-flow-body p  { font-size: .78rem; color: var(--fg-muted); line-height: 1.55; }
/* Hover feedback — the node lifts slightly and its glow brightens, a
   lighter echo of the .outcome node's permanent glow so hovering any
   step previews what "arriving" at the destination looks like. */
.s-flow-node:hover { transform: translateY(-4px); }
.s-flow-node:hover .s-flow-icon {
  background: var(--brand-a18);
  box-shadow: 0 0 0 1px var(--brand-a08), 0 0 28px var(--brand-a18);
}
.s-flow-node.outcome .s-flow-icon {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 1px var(--brand-a18), var(--brand-glow), 0 0 30px var(--brand-a18);
}
.s-flow-node.outcome .s-flow-icon::before { border-color: var(--brand); }
.s-flow-node.outcome:hover .s-flow-icon { box-shadow: 0 0 0 1px var(--brand-a18), var(--brand-glow), 0 0 40px var(--brand-a18); }
.s-flow-node.outcome .s-flow-n { background: var(--brand); border-color: var(--brand); color: #fff; }
.s-flow-arrow { flex: 0 0 28px; align-self: center; margin-top: 36px; display: flex; align-items: center; color: var(--brand); overflow: visible; }
.s-flow-arrow svg { width: 100%; height: auto; }
.s-flow-arrow .ff-base  { opacity: .2; }
.s-flow-arrow .ff-flow  { stroke-dasharray: 4 5; animation: dashFlow .9s linear infinite; filter: drop-shadow(0 0 3px var(--brand-a18)); }
.s-flow-arrow .ff-arrow { fill: var(--brand); opacity: .9; }
[dir="rtl"] .s-flow-arrow svg { transform: scaleX(-1); }
@media (max-width: 900px) {
  .s-flow-track { flex-direction: column; align-items: stretch; overflow: visible; gap: 0; }
  .s-flow-node {
    flex-direction: row; text-align: start; flex: none; gap: 16px;
    position: relative; padding-bottom: 30px;
  }
  .s-flow-node:hover { transform: none; }
  [dir="rtl"] .s-flow-node { text-align: right; }
  .s-flow-node:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-inline-start: 27px; top: 56px; bottom: 0;
    width: 2px;
    background:
      linear-gradient(to bottom, var(--brand-a18), transparent),
      linear-gradient(to bottom, transparent, var(--brand) 10%, transparent 22%);
    background-size: 100% 100%, 100% 260%;
    background-repeat: no-repeat;
    animation: sStepFlow 2.4s linear infinite;
  }
  .s-flow-body { flex: 1; }
  .s-flow-arrow { display: none; }
  .s-flow-icon { width: 56px; height: 56px; }
  .s-flow-icon svg { width: 22px; height: 22px; }
}

/* ============================================================
   BEAM SYSTEM — vertical light columns rising from a ground wave
   ============================================================ */
.s-beams { position: relative; }
.s-beams-wave { position: absolute; inset: auto 0 0 0; width: 100%; height: 64px; }
.s-beams-row {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 56px;
}
.s-beam { display: flex; flex-direction: column; align-items: center; text-align: center; }
.s-beam-title { font-size: .92rem; font-weight: 800; color: var(--fg); margin-bottom: 16px; }
.s-beam-col {
  width: 4px; height: 120px;
  border-radius: 3px;
  background: linear-gradient(to top, var(--brand), var(--brand-a05) 75%, transparent);
  box-shadow: 0 0 16px var(--brand-a18);
  transform-origin: bottom;
  animation: beamRise .9s ease-out both;
}
.s-beam:nth-child(2) .s-beam-col { animation-delay: .12s; }
.s-beam:nth-child(3) .s-beam-col { animation-delay: .24s; }
.s-beam-nodes { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; width: 100%; }
.s-beam-node {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  text-align: start;
  transition: border-color var(--t), transform var(--t);
}
[dir="rtl"] .s-beam-node { text-align: right; }
.s-beam-node:hover { border-color: var(--border-brand); transform: translateY(-2px); }
.s-beam-node-icon {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-a12); border: 1px solid var(--border-brand);
  display: flex; align-items: center; justify-content: center; color: var(--brand);
}
.s-beam-node-icon svg { width: 15px; height: 15px; }
.s-beam-node p { font-size: .8rem; color: var(--fg-muted); line-height: 1.5; }
@media (max-width: 860px) {
  .s-beams-row { grid-template-columns: 1fr; gap: 40px; }
  .s-beam-col { height: 56px; }
}

/* ============================================================
   CONVERGENCE — peripheral nodes flowing into a central core
   ============================================================ */
.s-converge-ring {
  position: relative;
  width: min(440px, 92vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto 44px;
}
.s-converge-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-converge-lines .cv-line {
  fill: none; stroke: var(--brand); stroke-width: .6;
  stroke-dasharray: 3 3; opacity: .4;
  animation: dashFlow 2.2s linear infinite;
  vector-effect: non-scaling-stroke;
}
.s-converge-core {
  position: absolute; top: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--brand-a08);
  border: 1.5px solid var(--brand);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 8px;
  box-shadow: 0 0 0 1px var(--brand-a05), var(--brand-glow), 0 0 40px var(--brand-a12);
  z-index: 2;
}
.s-converge-core::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid var(--border-brand);
  animation: nodeRingPulse 3.6s ease-in-out infinite;
}
.s-converge-core span { font-size: .8rem; font-weight: 800; color: var(--brand); line-height: 1.35; position: relative; z-index: 1; }
.s-converge-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 86px;
  z-index: 2;
}
.s-converge-node-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-brand);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand-a05), 0 0 12px var(--brand-a12);
}
.s-converge-node-icon svg { width: 18px; height: 18px; }
.s-converge-node span { font-size: .68rem; font-weight: 700; color: var(--fg); line-height: 1.3; }
@media (max-width: 640px) { .s-converge-ring { display: none; } }

.s-converge-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  max-width: 940px;
  margin: 0 auto;
}
.s-converge-legend-item { display: flex; gap: 10px; align-items: flex-start; }
.s-converge-legend-item .cvl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-top: 7px; flex-shrink: 0; }
.s-converge-legend-item p { font-size: .82rem; color: var(--fg-muted); line-height: 1.65; }
.s-converge-legend-item strong { color: var(--fg); font-weight: 700; }

/* ----- DELIVERABLES / OUTPUT MODULES -------------------------
   Ledger/module feel: rounded-square badge (defined above), a brand
   accent bar on the lead edge instead of a full border, tighter grid —
   distinct from Overview's numbered insight cards and Expected Value's
   gradient-washed pillars. */
.s-deliverables {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.s-deliv {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--border-brand);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.s-deliv:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.s-deliv p { font-size: .87rem; color: var(--fg-muted); line-height: 1.55; }

/* ----- EXPECTED VALUE / IMPACT PILLARS ------------------------
   Strongest visual weight of the 3 systems: gradient-washed card face,
   bigger glowing circular icon (defined above), bolder hover lift. */
.s-audiences {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.s-aud {
  position: relative;
  background: linear-gradient(165deg, var(--brand-a18), color-mix(in srgb, var(--surface) 82%, transparent) 55%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 30px 22px 26px;
  text-align: center;
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.s-aud:hover { border-color: var(--border-brand); transform: translateY(-5px); box-shadow: var(--shadow-brand); }
.s-aud h4, .s-aud h5 { font-size: 1rem; font-weight: 800; margin-bottom: 8px; color: var(--fg); }
.s-aud p             { font-size: .84rem; color: var(--fg-muted); line-height: 1.6; }

/* ----- METRICS / RESULTS ROW -------------------------------- */
.s-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.s-metric {
  padding: 32px 20px;
  text-align: center;
  position: relative;
}
.s-metric + .s-metric::before {
  content: '';
  position: absolute;
  inset-inline-start: 0; top: 20%; bottom: 20%;
  width: 1px; background: var(--border);
}
.s-metric-val  { font-size: 2.2rem; font-weight: 900; color: var(--brand); line-height: 1; }
.s-metric-label{ font-size: .82rem; color: var(--fg-muted); margin-top: 6px; }

/* ----- FAQ -------------------------------------------------- */
.s-faqs { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.s-faq {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t);
}
.s-faq.open { border-color: var(--border-brand); }
.s-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 600;
  color: var(--fg);
  background: none; border: none; width: 100%;
  text-align: start;
  font-family: 'Tajawal', sans-serif;
}
.s-faq-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  font-size: .9rem;
  transition: transform var(--t), background var(--t);
}
.s-faq.open .s-faq-icon { transform: rotate(45deg); background: var(--brand-a08); }
.s-faq-a {
  padding: 0 22px;
  max-height: 0; overflow: hidden;
  color: var(--fg-muted); font-size: .9rem; line-height: 1.75;
  transition: max-height .35s ease, padding .25s ease;
}
.s-faq.open .s-faq-a { max-height: 300px; padding: 0 22px 18px; }

/* ----- REQUEST FORM ----------------------------------------- */
.s-form-section {
  padding: 96px 0;
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
}
/* Universal faint tech-texture — same rationale as .s-section.alt::after:
   one consistent, category-neutral abstraction, appropriate on a lead
   form regardless of which service the visitor arrived from. Scoped to
   html[data-category]/html[data-campaign] so any OTHER page sharing
   .s-form-section keeps its existing look untouched. */
html[data-category] .s-form-section::before, html[data-campaign] .s-form-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("images/services/tech-texture-dark.webp");
  background-size: cover;
  background-position: center;
  opacity: .05;
  pointer-events: none;
}
html[data-theme="light"][data-category] .s-form-section::before,
html[data-theme="light"][data-campaign] .s-form-section::before {
  background-image: url("images/services/tech-texture-light.webp");
  opacity: .06;
}
.s-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.s-form-info h2    { font-size: clamp(1.75rem,3.5vw,2.6rem); font-weight: 900; margin-bottom: 16px; }
.s-form-info h3    { font-size: 1.6rem; font-weight: 900; margin-bottom: 14px; color: var(--fg); }
.s-form-info p     { color: var(--fg-muted); font-size: .97rem; line-height: 1.85; margin-bottom: 28px; }
.s-form-info .chip { margin-bottom: 16px; }

.s-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.s-form .fld       { display: flex; flex-direction: column; gap: 6px; }
.s-form .fld label { font-size: .78rem; font-weight: 600; color: var(--fg-muted); }
.s-form .fld input,
.s-form .fld select,
.s-form .fld textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--fg);
  font-family: 'Tajawal', sans-serif;
  font-size: .92rem;
  padding: 12px 16px;
  outline: none;
  direction: inherit;
  transition: border-color var(--t), box-shadow var(--t);
}
[data-theme="light"] .s-form .fld input,
[data-theme="light"] .s-form .fld select,
[data-theme="light"] .s-form .fld textarea { background: var(--bg-2); }
.s-form .fld input::placeholder,
.s-form .fld textarea::placeholder { color: var(--fg-dim); }
.s-form .fld input:focus,
.s-form .fld select:focus,
.s-form .fld textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-a12);
}
.s-form .fld input[readonly] {
  background: var(--brand-a05);
  border-color: var(--border-brand);
  color: var(--brand);
  cursor: default;
}
.s-form .fld select { appearance: none; cursor: pointer; }
.s-form .fld textarea { resize: vertical; min-height: 120px; line-height: 1.65; }
.s-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Submit button */
.s-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--brand);
  color: #fff;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.s-submit-btn:hover {
  background: var(--brand-h);
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}
.s-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* WhatsApp button */
.s-whatsapp-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
  text-decoration: none;
  width: fit-content;
}
.s-whatsapp-btn:hover { background: #1da84e; transform: translateY(-2px); }

/* ----- FINAL CTA BAND --------------------------------------- */
.s-final-cta {
  background: linear-gradient(135deg, var(--brand-a12), var(--brand-a05));
  border-top: 1px solid var(--border-brand);
  border-bottom: 1px solid var(--border-brand);
  padding: 64px 0;
  text-align: center;
}
/* Category-themed close — one deliberately-matched background photo per
   business category (digital/events/media/pr/launch), set via a
   data-category attribute on <html> so every page in the same category
   (its hub page and all its sub-service pages) closes on the same
   imagery. The brand gradient + a heavy theme-tinted layer both paint
   ON TOP of the photo (first-listed background wins), so the CTA
   heading stays fully legible regardless of how bright the source photo
   is — the photo only ever reads as a faint, intentional texture. */
html[data-category] .s-final-cta, html[data-campaign] .s-final-cta {
  background-image:
    linear-gradient(135deg, var(--brand-a18), var(--brand-a08)),
    linear-gradient(135deg, rgba(5,5,5,.88), rgba(5,5,5,.74)),
    var(--s-cta-photo, var(--s-hero-photo, url("images/services/hero-dark.webp")));
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}
html[data-theme="light"][data-category] .s-final-cta,
html[data-theme="light"][data-campaign] .s-final-cta {
  background-image:
    linear-gradient(135deg, var(--brand-a18), var(--brand-a08)),
    linear-gradient(135deg, rgba(250,250,248,.88), rgba(250,250,248,.74)),
    var(--s-cta-photo, var(--s-hero-photo, url("images/services/hero-light.webp")));
}
html[data-category="digital"] { --s-cta-photo: url("images/services/digital-performance-dark.webp"); }
html[data-category="events"]  { --s-cta-photo: url("images/services/media-production-dark.webp"); }
html[data-category="media"]   { --s-cta-photo: url("images/services/media-production-dark.webp"); }
html[data-category="pr"]      { --s-cta-photo: url("images/services/tech-texture-dark.webp"); }
/* "launch" is the one exception to CTA sharing its category's own
   identity photo: --s-value-photo (Expected Value, universal across all
   categories) is product-launch-dark, the very same file as launch's
   own --s-svc-photo — and Expected Value/Audience sits directly above
   the CTA band, with nothing between them. Keeping CTA on
   product-launch here would repeat that section's photo immediately
   below it, so launch's CTA borrows digital-performance instead. */
html[data-category="launch"]  { --s-cta-photo: url("images/services/digital-performance-dark.webp"); }
html[data-theme="light"][data-category="digital"] { --s-cta-photo: url("images/services/digital-performance-light.webp"); }
html[data-theme="light"][data-category="events"]  { --s-cta-photo: url("images/services/media-production-light.webp"); }
html[data-theme="light"][data-category="media"]   { --s-cta-photo: url("images/services/media-production-light.webp"); }
html[data-theme="light"][data-category="pr"]      { --s-cta-photo: url("images/services/tech-texture-light.webp"); }
html[data-theme="light"][data-category="launch"]  { --s-cta-photo: url("images/services/digital-performance-light.webp"); }
/* Campaign close — lighter tint than the shared rule above (same
   selector specificity, later in the cascade wins for html[data-campaign]
   only; html[data-category] pages are untouched since this selector
   never matches them). Campaign photos are already a deliberate, specific
   choice per campaign, so they stay visibly present here instead of
   fading into a generic dark/light wash. */
html[data-campaign] .s-final-cta {
  background-image:
    linear-gradient(135deg, var(--brand-a18), var(--brand-a08)),
    linear-gradient(135deg, rgba(5,5,5,.55), rgba(5,5,5,.42)),
    var(--s-cta-photo, var(--s-hero-photo, url("images/services/hero-dark.webp")));
}
html[data-theme="light"][data-campaign] .s-final-cta {
  background-image:
    linear-gradient(135deg, var(--brand-a18), var(--brand-a08)),
    linear-gradient(135deg, rgba(250,250,248,.6), rgba(250,250,248,.48)),
    var(--s-cta-photo, var(--s-hero-photo, url("images/services/hero-light.webp")));
}
.s-final-cta h3 {
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 900;
  margin-bottom: 12px;
  color: var(--fg);
}
.s-final-cta p  { color: var(--fg-muted); margin-bottom: 28px; font-size: .97rem; }
.s-final-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ----- FOOTER ----------------------------------------------- */
.s-footer {
  position: relative;
  overflow: hidden;
  padding: 64px 0 32px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.s-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}
.s-footer-brand p { font-size: .875rem; color: var(--fg-muted); line-height: 1.75; max-width: 280px; margin-top: 12px; }
.s-footer-col h5  { font-size: .84rem; font-weight: 700; color: var(--fg); margin-bottom: 14px; }
.s-footer-col ul  { display: flex; flex-direction: column; gap: 8px; }
.s-footer-col a   { color: var(--fg-muted); font-size: .84rem; transition: color var(--t); }
.s-footer-col a:hover { color: var(--brand); }
.s-footer-bottom  {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.s-footer-bottom p { color: var(--fg-dim); font-size: .75rem; }
.s-footer-copy     { color: var(--brand); font-size: .68rem; font-weight: 700; letter-spacing: .14em; }

/* ----- RESPONSIVE ------------------------------------------- */
@media (max-width: 1024px) {
  .s-form-grid { grid-template-columns: 1fr; gap: 36px; }
  .s-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .s-hero        { padding: 100px 20px 64px; min-height: auto; }
  .s-overview    { padding: 28px 20px; }
  .s-overview-grid { grid-template-columns: 1fr; }
  .s-components  { grid-template-columns: 1fr; }
  .s-deliverables{ grid-template-columns: 1fr; }
  .s-audiences   { grid-template-columns: 1fr 1fr; }
  .s-metrics     { grid-template-columns: repeat(2, 1fr); }
  .s-form        { padding: 24px 18px; }
  .s-form-row    { grid-template-columns: 1fr; }
  .s-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .s-nav-toggle  { display: flex; }
  .s-nav-utils   { gap: 6px; }
  .s-nav-back    { display: none; }
  .s-nav-cta     { display: none; }
  .lang-toggle   { font-size: .72rem; padding: 0 10px; height: 32px; }
  .s-nav-logo-img, .s-nav-logo-svg { height: 44px; width: 44px; }
  .s-nav-logo-img { width: auto; }
  .s-footer-logo, .s-footer-logo-svg { height: 44px; width: 44px; }
  .s-footer-logo { width: auto; }
  .s-footer-brand-text { font-size: .72rem; }
}
@media (max-width: 480px) {
  .s-section     { padding: 64px 0; }
  .s-section-hd  { margin-bottom: 36px; }
  .s-audiences   { grid-template-columns: 1fr; }
  .s-metrics     { grid-template-columns: repeat(2, 1fr); }
  .s-metric + .s-metric::before { display: none; }
  .s-metric      { border: 1px solid var(--border); }
  .s-final-cta-actions { flex-direction: column; align-items: center; }
  .s-overview    { padding: 28px 24px; }
  .s-overview::before { font-size: 3.2rem; inset-inline-start: 18px; }
  .s-comp        { padding: 26px 20px 22px; }
  .s-comp::after { font-size: 2.2rem; inset-inline-end: 14px; }
}

/* ----- REDUCED MOTION ----------------------------------------
   Keep the discrete hover micro-interactions (they're instant, not
   continuous) but drop the looping glow-ring animation and the
   scroll-triggered accent-line draw-in for anyone who has asked the OS
   to minimize motion. */
@media (prefers-reduced-motion: reduce) {
  .s-comp-icon::before, .s-aud-icon::before { animation: none !important; }
  .s-section-hd::before, .s-section-hd::after { transition: none !important; transform: none !important; }
}