/* ==========================================================================
   AE Creative — Page-content section layout
   Structural rules for the homepage's content sections (hero through
   final CTA). Site chrome (header/nav/mobile-menu, footer) now lives in
   header.css/footer.css — this file is purely "the sections a page's
   <main> is built from." Grid column counts here are the DEFAULT
   (desktop) tier only — breakpoint overrides live in responsive.css.
   Vertical section padding comes from the tokens in spacing.css.
   ========================================================================== */

/* ---- Hero ---- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  animation:cae-hero-fade-in .7s var(--ease) both;
}
/* Same missing-asset fallback as .service-section__image below: fades
   the element out instead of showing a broken-image icon when this
   class is used on an <img> placeholder rather than the real <video>.
   `animation:none` is required here — the fade-in keyframe's `both`
   fill mode otherwise keeps holding opacity:1 (animated values win
   over a plain opacity rule of any specificity), masking the fade. */
.hero__video.is-broken{animation:none;opacity:0}
.hero__overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(9,9,12,.55) 0%,rgba(9,9,12,.35) 40%,rgba(9,9,12,.92) 100%);
}
.hero__glow{
  position:absolute;top:-10%;left:-8%;width:60vw;height:60vw;max-width:760px;max-height:760px;
  border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(120,60,220,.35),transparent 62%);
  filter:blur(30px);z-index:1;animation:cae-drift 16s ease-in-out infinite;
}
/* Subtle blend into the next section's background, so the video/overlay
   doesn't end on a hard edge. Sits above .hero__overlay, below the
   content layer; purely decorative, non-interactive. */
/* Fades to the hero's own permanently-dark color (not var(--bg)) — the
   hero/its overlay stay dark regardless of site theme (see .hero__overlay
   above), so this blend strip has to match that, not the light theme's
   page background, or the scroll-cue sitting on top of it would lose
   contrast in light mode. */
.hero__fade{
  position:absolute;inset-inline:0;bottom:0;height:clamp(80px,15vh,160px);
  background:linear-gradient(180deg,transparent 0%,#09090C 100%);
  z-index:1;pointer-events:none;
}
.hero__content{
  position:relative;z-index:2;max-width:var(--container);margin:0 auto;width:100%;
  padding:120px clamp(18px,4vw,40px) 40px;
}
.hero__content .eyebrow-badge{margin-bottom:28px}
.hero__title{
  font-family:var(--ff-display);font-weight:800;font-size:clamp(40px,7vw,88px);
  line-height:1.08;letter-spacing:-.04em;margin:0 0 24px;max-width:20ch;color:#fff;
}
.hero__desc{max-width:600px;font-size:clamp(16px,2vw,20px);line-height:1.7;color:rgba(255,255,255,.8);margin:0 0 38px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:56px}
.hero__trust{border-top:1px solid rgba(255,255,255,.12);padding-top:26px}
.hero__trust-label{font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.5);margin-bottom:16px}
.hero__trust-list{display:flex;flex-wrap:wrap;gap:14px 38px;align-items:center;opacity:.8}
.hero__trust-item{font-family:var(--ff-display);font-weight:700;font-size:16px;color:rgba(255,255,255,.85)}
.scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.6);
}
.scroll-cue__label{font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em}
.scroll-cue__pill{width:22px;height:36px;border:1.5px solid rgba(255,255,255,.4);border-radius:99px;position:relative;display:block}
.scroll-cue__dot{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);width:4px;height:8px;
  border-radius:99px;background:#fff;animation:cae-scroll 1.8s infinite;
}

/* ---- Split section (Production / Marketing) ---- */
.split-section{padding:var(--space-section-y) var(--space-section-x);background:var(--bg)}
.split-section__head{text-align:center;margin-bottom:48px}
.split-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.split-card{
  position:relative;min-height:440px;border-radius:var(--r-2xl);overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:38px;
}
.split-card__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.split-card__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,12,.2),rgba(9,9,12,.9))}
.split-card__body{position:relative}
.split-card__eyebrow{
  display:inline-block;padding:6px 13px;border-radius:99px;background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);font-family:var(--ff-mono);
  font-size:11px;letter-spacing:.12em;color:#fff;margin-bottom:18px;
}
.split-card__title{font-family:var(--ff-display);font-weight:700;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.02em;margin:0 0 12px;color:#fff}
.split-card__desc{margin:0 0 18px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.78);max-width:42ch}
.split-card__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.split-card__tag{padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.85)}
.split-card__link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:#fff}
/* Single full-width variant — reuses .split-card as-is for one large
   "featured project" item instead of the production/marketing pair.
   Introduced for pages/portfolio.html's Featured Project section. */
.split-grid--single{grid-template-columns:1fr}
.split-card--featured{min-height:520px}
.split-card__duration{
  display:block;font-family:var(--ff-mono);font-size:12.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.65);margin-bottom:22px;
}

/* ---- Why AE Creative ---- */
.why-section{padding:var(--space-section-y) var(--space-section-x);background:var(--bg-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why-section__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px;margin-bottom:50px}
.why-section__head-left{max-width:640px}
.why-section__head-desc{max-width:360px;font-size:15px;line-height:1.75;color:var(--text-2);margin:0}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* ---- Featured services ---- */
.services-section{padding:var(--space-section-y) var(--space-section-x);background:var(--bg)}
.services-section__head{margin-bottom:46px;max-width:640px}
.services-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.services-grid--first{margin-bottom:34px}

/* ---- Portfolio preview ---- */
.work-section{padding:var(--space-section-y) var(--space-section-x);background:var(--bg-1);border-top:1px solid var(--line)}
.work-section__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:44px}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Modifier for a smaller supporting image row (e.g. a 2-image gear/suite
   pair) reusing the same .work-card component — see responsive.css note
   on why no extra breakpoint rule is needed for this modifier. */
.work-grid--2{grid-template-columns:repeat(2,1fr)}

/* ---- Production process (numbered step cards) ----
   Introduced for pages/media-production.html's "Production Process"
   timeline. Reuses the eyebrow/section-title kit + card tokens already
   used everywhere else — no new colors. Deliberately a numbered card
   grid rather than a connected line-and-node timeline: a literal
   connector line breaks unpredictably across the grid's responsive
   wrap points (5 → 3 → 2 columns), while the numbered-step convention
   is already established elsewhere on the site (split-card__eyebrow's
   "01 · ..." numbering). */
.process-section{padding:var(--space-section-y) var(--space-section-x);background:var(--bg-1);border-top:1px solid var(--line)}
.process-section__head{margin-bottom:46px;max-width:640px}
.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.process-step{padding:22px 20px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .3s var(--ease)}
.process-step:hover{border-color:var(--brand-line)}
.process-step__num{font-family:var(--ff-mono);font-size:12px;letter-spacing:.14em;color:var(--brand);display:block;margin-bottom:14px}
.process-step__title{font-family:var(--ff-display);font-weight:600;font-size:15.5px;margin:0 0 6px}
.process-step__text{margin:0;font-size:13px;line-height:1.6;color:var(--text-3)}
/* 6-step variant — introduced for pages/case-study.html's Creative Process
   (Research/Creative Direction/Storyboarding/Production/Editing/Delivery).
   3 columns divides evenly at both the desktop and the existing 3-column
   tablet tier (see responsive.css), unlike the 5-column default. */
.process-grid--6{grid-template-columns:repeat(3,1fr)}

/* ---- FAQ ----
   Native <details>/<summary> — zero JS, matches the site's "no new
   runtime dependency" constraint better than a hand-rolled accordion
   would. Markup/interaction contract documented in COMPONENTS.md. */
.faq-section{padding:var(--space-section-y) var(--space-section-x);background:var(--bg)}
.faq-section__head{text-align:center;margin-bottom:44px}
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}

/* ---- Industries ---- */
.industries-section{padding:var(--space-section-y) var(--space-section-x);background:var(--bg)}
.industries-section__head{text-align:center;margin-bottom:46px}
.industries-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ---- Numbers ---- */
.numbers-section{
  padding:var(--space-section-y-sm) var(--space-section-x);background:var(--bg-1);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.numbers-section__glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70vw;height:400px;
  background:radial-gradient(ellipse,rgba(107,95,255,.18),transparent 70%);pointer-events:none;
}
.numbers-section__head{text-align:center;margin-bottom:44px}
.numbers__title{font-family:var(--ff-display);font-weight:700;font-size:clamp(26px,4vw,42px);letter-spacing:-.03em;margin:0}
.numbers-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}
/* 4-stat variant — introduced for pages/portfolio.html (projects/clients/
   years/satisfaction). Same .stat children, same section, just one fewer
   column than the homepage's 5-stat band. */
.numbers-grid--4{grid-template-columns:repeat(4,1fr)}

/* ---- Testimonials ---- */
.testimonials-section{padding:var(--space-section-y) var(--space-section-x);background:var(--bg)}
.testimonials-section__head{margin-bottom:44px;max-width:640px}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* ---- Clients ----
   Moved to assets/css/partners.css — see .partners-section there
   (index.html's "شركاء النجاح" logo showcase). */

/* ---- Final CTA ---- */
/* Background pinned to its current dark value rather than var(--bg-1):
   this section always carries a photo + dark scrim (up to .92 opaque)
   with permanently-white text on top, same reasoning as .hero__fade
   above — it stays a dark cinematic moment in both themes. */
.cta-section{
  position:relative;padding:var(--space-section-y-lg) var(--space-section-x);
  background:#0F0F14;overflow:hidden;border-top:1px solid var(--line);
}
.cta-section__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.cta-section__bg.is-broken{opacity:0}
.cta-section__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,12,.75),rgba(9,9,12,.92))}
.cta-section__glow{
  position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:80vw;height:500px;
  background:radial-gradient(ellipse,rgba(107,95,255,.35),transparent 68%);
  pointer-events:none;animation:cae-drift 16s ease-in-out infinite;
}
.cta__inner{position:relative;max-width:820px;margin:0 auto;text-align:center}
.cta__inner .eyebrow-badge{margin-bottom:26px}
.cta__title{font-family:var(--ff-display);font-weight:800;font-size:clamp(34px,6vw,68px);letter-spacing:-.04em;line-height:1.1;margin:0 0 20px;color:#fff}
.cta__desc{max-width:560px;margin:0 auto 38px;font-size:clamp(16px,2vw,19px);line-height:1.7;color:rgba(255,255,255,.8)}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}