/* ===== HERO (full-bleed photo right, swoosh mask, text overlay) ===== */
/* Figma home hero: wide photo on the right, darkened to solid #011221 on the
   left by the EXACT Figma gradient (no box edge -> no rounding on the left);
   headline + subline vertically centered on that dark area. BR 140px sweep. */
/* CLI-specific (NOT playbook): hero height comes from the copy's top/bottom margin,
   not a section min-height — matches how this Figma is laid out. */
.section--hero{ position:relative; padding:0; display:flex; align-items:center;
  overflow:clip; background:var(--c-eclipse); }
.hero__media{ position:absolute; top:0; right:0; bottom:0; width:76%; z-index:0; overflow:hidden;
  border-radius:0 0 140px 0; }   /* ONLY bottom-right sweep; left + top square */
.hero__img{ width:100%; height:100%; object-fit:cover; object-position:center center; display:block; border:0; border-radius:0; will-change:transform; }
/* exact Figma overlay: gradient of #011221 — transparent at right -> opaque at left */
.hero__media::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to left, rgba(1,18,33,0) 0%, rgba(1,18,33,.35) 42%, rgba(1,18,33,.78) 70%, #011221 100%); }
.hero__inner{ position:relative; z-index:2; width:100%; display:flex; align-items:center; min-height:0; }   /* reset the shared .hero__inner min-height:540 so height is truly margin-driven */
/* Proportional hero (Slider-Revolution style): the copy box is a query container,
   and the type is sized in cqi (% of THIS box) — so headline + lead always keep the
   exact same proportions and line breaks, scale together, and can never spill past
   the box. Container width can change freely without rebreaking the hero. */
.hero__copy{ width:56%; container-type:inline-size; margin-block:var(--hero-y); }   /* top+bottom margin sets the hero height (replaces section min-height) */
.hero__title{ margin:0 0 3.5cqi; font-weight:var(--w-reg); line-height:1.03; letter-spacing:-.02em;
  font-size:clamp(2.75rem, 16cqi, 6.7rem); }   /* ~16% of the box: "matters work" fills ~95%, 2 lines always */
.hero__lead{ font-size:clamp(1.1rem, 3.7cqi, 1.55rem); line-height:1.4; }   /* scales with the same box */

/* ── P1S1 scroll reveal — TABLET + MOBILE ONLY ────────────────────────────
   The hero pins to the top; opaque content blocks (lifted above it) scroll UP
   over it, so the cover image reads as a fixed/parallax background (index.js
   gives it a gentle drift). The image does NOT fold. Desktop hero is untouched. */
@media (max-width:979.98px){
  /* Pin the hero from scroll 0: sticky top = header height, so the hero's rest
     position already equals the pin threshold — no initial nav-height slide. */
  .page-home .section--hero{ position:sticky; top:var(--solnav-h); z-index:0; }
  /* The post-hero column rides over the pinned hero as ONE opaque block (so the
     hero can't bleed through transparent section corners / .sol-zones gaps). */
  .page-home .section--hero ~ .page-flow{
    position:relative; z-index:1; background:var(--c-eclipse);
    --reveal-r:clamp(48px, 14vw, 140px); }
  /* CONCAVE up-right sweep at the reveal edge = the original hero bottom-right
     radius, but on the SCROLLING layer so it moves up with scroll. A plain radius
     rounds the corner OFF (convex, wrong way); instead this is an eclipse "bump"
     sitting just ABOVE the content whose top-left quarter is scooped out by a
     radial-gradient — tangent to the seam on the left, tangent to the edge on the
     right, exactly like border-bottom-right-radius. The scoop reveals the hero. */
  .page-home .section--hero ~ .page-flow::before{
    content:""; position:absolute; right:0; top:calc(-1 * var(--reveal-r));
    width:var(--reveal-r); height:var(--reveal-r); pointer-events:none;
    background:radial-gradient(circle var(--reveal-r) at left top, #0000 calc(100% - 1px), var(--c-eclipse) 100%); }
}

/* ===== LOGO STRIP ===== */
.logo-strip__title {
  text-align: center;
  font-size: var(--fs-h4);   /* Figma 28px */
  font-weight: 600;
  color: var(--c-pale);                          /* Figma pale #BEE3FA, not blue */
  margin: 0 0 var(--space-xl);
}
.logo-item {
  flex: 0 0 auto;
  width: clamp(140px, 18vw, 200px);
  display: grid;
  place-items: center;
}

/* ===== PAIN BLOCK ===== */
.pain {
  display: grid;
  grid-template-columns: minmax(180px, 0.5fr) minmax(0, 1fr);
  gap: var(--space-lg) var(--space-2xl);
  align-items: start;
}
.pain__eyebrow {
  font-size: var(--fs-h3);
  line-height: 1.12;
  font-weight: 600;
  margin: 0;
  text-align: right;
}
.pain__close {
  margin: var(--space-lg) 0 0;
  font-size: var(--fs-body);   /* unified body size (matches process-intro etc.) */
  font-weight: 500;
}
/* Home pain bullets at the unified body size. */
.pain .list-bullets li {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
}

/* ===== A COMPLETE PROCESS ===== */
.process-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}
.process-intro__img {
  width: 100%;
  height: auto;
  max-width: 560px;
}
.process-intro__title { margin: 0 0 var(--space-md); font-size: var(--fs-h1); }  /* Figma 72px */

/* ===== SERVICE ROWS ===== */
.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl) var(--space-2xl);
  align-items: center;
  margin-top: var(--space-2xl);
}
.service:first-of-type { margin-top: var(--space-2xl); }

/* Per-zone top-spacing tuning (desktop review 2026-07-08):
   P1S5 People (first zone) drops the 48px first-service margin above Strategy —
   the 80px section pad after the sticky bar is enough on its own.
   P1S6 Process + P1S7 Product drop the 80px section pad-TOP (bottom kept) so the
   zone-to-zone gap doesn't stack the previous zone's bottom pad onto a full top pad. */
#zone-people .service:first-of-type { margin-top: 0; }
#zone-process > .section,
#zone-product > .section { padding-top: 0; }

.service__main { max-width: 46ch; }
.service .service__title { margin: 0; font-size: var(--fs-h2); letter-spacing: .06em; }  /* Figma 48px; subtle tracking */
.service__body { margin: var(--space-sm) 0 var(--space-md); font-size: var(--fs-body); }  /* unified body size */
.service .icon-badge { flex: 0 0 auto; width: 88px; height: 88px; border-radius: var(--r-md) var(--r-md) 0 var(--r-md); }  /* Figma ~89px, single sharp corner (bottom-right) */
.service .icon-badge img { width: 60%; height: 60%; }
.service-media .img-ph { width: 100%; }

/* keep visual order matching the mockup zig-zag on desktop */
.service--text-right .service__main { order: 2; }
.service--text-right .service-media { order: 1; }

/* ===== FAQ ===== */
.faq__title { text-align: center; margin: 0 0 var(--space-xl); font-size: var(--fs-h1); }  /* Figma 64px */

/* ===== RESPONSIVE ===== */
/* Service rows STACK on Tablet + Mobile (≤767); 2-col only on Laptop + Desktop.
   (2-col on Tablet overflowed — big titles didn't fit the narrow columns.)
   minmax(0,1fr) NOT 1fr → the column can shrink below content min-content, so the
   image (and card) stays CONTAINED at small phone widths instead of overflowing. */
@media (max-width:767.98px){
  .service{ grid-template-columns:minmax(0,1fr); }
  .service--text-right .service__main,
  .service--text-right .service-media{ order:0; }
  .service-media{ order:-1; }
}
/* MOBILE (<480): badge ABOVE the title (not beside) so the big titles get the full
   narrow column and wrap instead of overflowing (e.g. "Leader Development" at 360).
   Everything (icon, title, body, link) is CENTER-aligned. */
@media (max-width:479.98px){
  .service__head{ flex-direction:column; align-items:center; }
  .service__main,
  .service__body{ text-align:center; margin-inline:auto; }
}
/* TABLET (480–767): stacked image capped at 200px tall, full-width cover-cropped.
   Bias the crop toward the TOP so faces (upper third) aren't cut by the tight cap. */
@media (min-width:480px) and (max-width:767.98px){
  .service-media{ aspect-ratio:auto !important; height:200px; }
  .service-media .pmedia__bg{ background-position:center 22%; }
}
/* LAPTOP (768–979): 2-col; the image column STRETCHES to the text column's height
   (text wraps taller in the narrower laptop columns → image grows to match). */
@media (min-width:768px) and (max-width:979.98px){
  .service{ align-items:stretch; }
  .service-media{ aspect-ratio:auto !important; height:100%; }
}

@media (max-width:979.98px) {
  .process-intro,
  .pain { grid-template-columns: 1fr; }
  /* P1S4 process — centered on m/t, diagram capped at 400px */
  .process-intro { text-align: center; }
  .process-intro__diagram { display: grid; place-items: center; }
  .process-intro__img { max-width: 400px; }
  /* ── P1S3 pain — centered stack on m/t. Heading on ONE line (drop the forced
     <br>, full width, font scales to stay one line). Bullet block sized to its
     own content and centered. Close line centered. */
  .pain { text-align: center; }
  .pain__eyebrow {
    text-align: center; white-space: nowrap;
    font-size: min(var(--fs-h3), calc((100vw - 40px) / 13)); }   /* K=13 keeps it one line (measured) */
  .pain__eyebrow br { display: none; }
  .pain .list-bullets { width: fit-content; margin-inline: auto; text-align: left; }
  .pain__close { text-align: center; }
  /* ── P1S1 hero — Variant B (2026-07-08): background image + FULL overlay, text
     on top. The whole photo (top 25% back) covers the section as a background; a
     full dark overlay sits over ALL of it; headline (the focus) + lead are centered
     on top. Variant A (banner + crop + drift parallax) is saved in
     build/_variants/hero-P1S1-variantA-banner-crop-parallax.md. */
  .section--hero{ position:relative; display:flex; align-items:center; justify-content:center;
    min-height:70vh; min-height:70svh; padding-block:var(--sec-y); overflow:hidden; background:var(--c-eclipse); }
  .hero__media{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
  .hero__img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block; border-radius:0; will-change:transform; }
  /* full overlay, a touch deeper toward the bottom so the copy reads on any photo */
  .hero__media::after{ inset:0; height:auto;
    background:linear-gradient(180deg, rgba(1,18,33,.75) 0%, rgba(1,18,33,.85) 62%, rgba(1,18,33,.95) 100%); }
  .section--hero::after{ display:none; }
  .hero__inner{ position:relative; z-index:2; }
  .hero__copy{ width:100%; max-width:none; margin:0; text-align:center; container-type:normal; }
  /* continuous, jump-free sizing (holds fixed, then fills as the screen narrows) */
  .hero__title{ font-size:min(4.6rem, calc((100vw - 40px) / 5.95)); margin:0 0 var(--space-md); }
  .hero__lead{ font-size:clamp(1rem, 3.6vw, 1.3rem); max-width:27rem; margin-inline:auto; }
}

/* P/P/P sticky tab bar (.solnav*, --solnav-h, .sol-zones, .sol-zone scroll-margin)
   now lives in the SHARED assets/solnav.css so Home P1S5 + Solutions P2S2 stay
   byte-identical. Edit the bar there, not here. */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); will-change:opacity, transform; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ transition:none !important; opacity:1; transform:none; }
}

/* ============================================================== */
/* ===== PREMIUM POLISH (additive; tasteful, restrained) ======== */
/* ============================================================== */

/* --- 3. AMBIENT DEPTH GLOWS ----------------------------------- */
/* Soft, low-alpha brand-blue radial glows give the flat dark some
   depth. Pure CSS, behind content, no pointer/scroll cost.        */
.section--hero{ position:relative; isolation:isolate; overflow:clip; }
.section--hero::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-18%; right:-10%;
  width:min(720px, 70vw); aspect-ratio:1;
  background:radial-gradient(closest-side, rgba(64,140,245,.12), rgba(64,140,245,0) 72%);
  filter:blur(8px);
}
.sol-zones::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:8%; left:-12%;
  width:min(820px, 78vw); aspect-ratio:1;
  background:radial-gradient(closest-side, rgba(64,140,245,.10), rgba(64,140,245,0) 70%);
  filter:blur(10px);
}
.sol-zones > .sol-zone{ position:relative; z-index:1; }

/* --- 1. PER-STAGE BACKGROUND SHIFT ---------------------------- */
/* Each P/P/P zone carries a subtly different dark tone so a section
   change is felt, while the whole thing stays one dark family.
   A soft gradient over each zone blends the seams so it morphs
   rather than hard-cuts.                                          */
.sol-zone{ position:relative; transition:background-color .8s var(--ease); }
.sol-zone[data-stage="0"]{ background-color:#011221; } /* People  — base Eclipse */
.sol-zone[data-stage="1"]{ background-color:#0c3556; } /* Process — cool blue-tinted dark */
.sol-zone[data-stage="2"]{ background-color:#001b2e; } /* Product — deep carbon-leaning dark */
/* Seam blend: a gentle top/bottom fade per zone so adjacent tones
   melt into one another instead of stepping.                      */
.sol-zone::before{
  content:""; position:absolute; left:0; right:0; top:0; height:160px;
  pointer-events:none; z-index:0;
  background:linear-gradient(to bottom, rgba(255,255,255,.022), rgba(255,255,255,0));
}
.sol-zone::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:160px;
  pointer-events:none; z-index:0;
  background:linear-gradient(to top, rgba(0,0,0,.16), rgba(0,0,0,0));
}
.sol-zone > *{ position:relative; z-index:1; }
/* (tab band bg is constant #0c3556 — no per-stage change) */

/* --- 4. HOVER MICRO-INTERACTIONS (service rows) --------------- */
/* Gentle lift + soft shadow on the row; the paired photo zooms a
   touch inside its clipped frame; the "Learn more" arrow nudges.   */
.service{
  /* padding so content isn't flush to the card edge -> the hover tint has room */
  padding:var(--space-xl);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
  position:relative;   /* anchor for the stretched whole-card link */
}
/* Whole-card click target: stretch the real "Learn more" <a> across the entire
   card so the whole box is clickable (a larger target = fewer mis-taps), while
   keeping ONE semantic link in the DOM for a11y + SEO. The visible text/arrow
   stay put; only the hit area grows. */
.service .link-more::after{ content:""; position:absolute; inset:0; z-index:3; }
.service{ cursor:pointer; }
/* Card radius echoes the diagonal of the photo it holds (class-based; reused
   across Strategy / Leader Dev / High Performance and their mirrored counterparts). */
.service--text-left{ border-radius:61px 0 61px 0; }
.service--text-right{ border-radius:0 61px 0 61px; }
.service--text-right .pmedia{ border-radius:0 61px 0 61px; }
.service-media img{ transition:transform .5s var(--ease); will-change:transform; }
@media (hover:hover){
  .service:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 55px rgba(0,0,0,.38);
    background-color:rgba(64,140,245,.08);   /* clear-but-tasteful brand-blue tint */
  }
  .service:hover .service-media img{ transform:scale(1.04); }
  .service:hover .link-more .arrow{ transform:translateX(5px); }
}
/* T/M (touch — hover never shows): index.js toggles .is-inview on the service card
   nearest the viewport centre as you scroll, revealing the SAME treatment as :hover. */
@media (max-width:767.98px){
  .service.is-inview{
    transform:translateY(-4px);
    box-shadow:0 22px 55px rgba(0,0,0,.38);
    background-color:rgba(64,140,245,.08);
  }
  .service.is-inview .service-media img{ transform:scale(1.04); }
  .service.is-inview .link-more .arrow{ transform:translateX(5px); }
}

/* --- 5. LOGO STRIP → MARQUEE --------------------------------- */
/* Continuous, seamless auto-scroll. Two identical sets translate by
   exactly one set's width (-50%) for a loop with no jump. Mask fades
   the edges; hover pauses; reduced-motion stops it entirely.       */
.logo-marquee{
  position:relative;
  overflow-x:auto;                 /* manually scrollable to skim ahead... */
  scrollbar-width:none;            /* ...with no visible scrollbar */
  -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee::-webkit-scrollbar{ display:none; }
.logo-marquee__track{
  display:flex;
  width:max-content;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
  will-change:scroll-position;
}
.logo-marquee .logo-item{
  height:46px;
  filter:brightness(0) invert(1);
  opacity:.9;
}
@media (max-width:767.98px){
  .logo-marquee .logo-item{ height:36px; }
}
@media (prefers-reduced-motion:reduce){
  .logo-marquee__track{ animation:none; justify-content:center; flex-wrap:wrap; width:auto; }
}

/* --- 2 / parallax + reduced-motion master switch -------------- */
@media (prefers-reduced-motion:reduce){
  .section--hero::before,
  .sol-zones::before{ display:none; }
  .sol-zone{ transition:none; }
  .service,
  .service-media img,
  .solnav{ transition:none !important; }
  .hero__img{ transform:none !important; }
}