/* ===== Executive Coaching page ===== */

/* Hero: pale band (#BEE3FA), copy left, vertically centered. The coaching-wheel
   photo is a right-bleed panel whose LEFT edge DISSOLVES into the band via a
   left→pale gradient (Figma: image layers each carry a linear gradient fading to
   #BEE3FA). No rounded corners: the gradient is the edge, and the global
   .hero__media rounding/clip is reset here so nothing rounds the photo. */
.hero--coaching{
  position:relative;
  overflow:clip;
  padding:0;
  min-height:clamp(380px, 30.6vw, 441px);  /* Figma band = 441px @1440 */
  display:flex;
  align-items:center;
  border-bottom-left-radius:140px;         /* Figma: rectRadii [0,0,0,140] */
}
.hero--coaching .hero__media{
  position:absolute;
  inset:0 0 0 auto;
  width:62%;                                /* Figma photo rect x=550 → 1440 edge */
  z-index:0;
  border-radius:0;                          /* kill the global .hero__media rounding+clip */
  overflow:visible;
}
.hero--coaching .hero__media .img-ph{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:60% 38%;
  border-radius:0;
  min-height:0;
}
/* Fade the photo's left edge into the pale band (Figma pexels layer: opaque
   #BEE3FA at the left, transparent by ~64% across). */
.hero--coaching .hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to right,
    rgba(190,227,250,1) 0%,
    rgba(190,227,250,.9) 22%,
    rgba(190,227,250,0) 62%);
}
.hero--coaching .hero__inner{
  position:relative;
  z-index:1;
  width:100%;
  display:block;   /* photo is absolute here, so drop the base 2-col grid → the copy box can reach its 600px */
  min-height:0;    /* drop the base .hero__inner 540px min-height so the hero's align-items:center actually centres the copy */
}
.hero--coaching .hero__copy{ container-type:inline-size; max-width:600px; }   /* wider box so the title fits ONE line; cqi keeps the size persistent (P1 model) */
.hero--coaching .hero__title{
  font-size:clamp(2rem, 10.5cqi, 4rem);          /* cqi of the 600px box → "Executive Coaching" on one line, same proportion at any width */
  line-height:1.02;
  margin:0 0 var(--space-md);
}
.hero--coaching .hero__copy .lead{
  font-size:var(--fs-h4);     /* Figma: 28px */
  line-height:1.25;
  color:var(--c-eclipse);     /* fills the wider box (was capped at 34ch) */
}

/* Two-column split: lead heading on left, body on right.
   Top-aligned to match the mockup (heading top lines up with photo top). */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-2xl);
  align-items:stretch;   /* photo matches the copy column's height (top+bottom flush) */
}
/* P4S2 (the text-only split: lead + body, no photo) centres its two columns vertically. */
.split:has(.split__lead):has(.split__body){ align-items:center; }
.split h2{ color:var(--c-pale); }   /* section headings on this page are pale blue (matches other pages) */
.split__lead h2{margin-block:0 var(--space-md);}
.split__body > p + p{margin-block-start:var(--space-md);}
/* Immersion block: clear gap between the big H2 and the PLS sub-heading */
.split__body h2 + h3{margin-block:var(--space-lg) var(--space-sm);}
.split__body h3{margin-block:var(--space-xs) var(--space-sm);}
.split__media .img-ph{
  width:100%;
  border-radius:var(--r-2xl);
}
/* media-first variant keeps source order accessible while showing media left */
.split--media-first .split__media{order:-1;}
/* P4S3: narrower image column (~35%, was 50/50) + right-edge crop so all three
   seated people are visible (the centre crop cut everyone but the hand-raiser). */
.split--media-first{ grid-template-columns:35% 1fr; }
.split--media-first .split__media .pmedia__bg{ background-position:right center; }

/* Three phase cards */
.phase-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-lg);
}
.phase{
  text-align:center;
  padding-block:var(--space-2xl);
  border-radius:var(--r-xl);
}
.phase__eyebrow{
  color:var(--c-blue);
  font-weight:500;
  margin-block:0 var(--space-xs);
}
.phase__title{
  margin-block:0 var(--space-md);
}
.phase__body{
  color:var(--c-white);
  opacity:.92;
  margin-block:0;
}

/* Chevron-bullet expectations list */
.list-chevrons{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--space-md);
}
.list-chevrons li{
  position:relative;
  padding-inline-start:var(--space-lg);
  font-size:var(--fs-body);
  line-height:1.4;
}
.list-chevrons li::before{
  content:"\203A";
  position:absolute;
  inset-inline-start:0;
  top:-0.05em;
  color:var(--c-blue);
  font-size:1.4em;
  font-weight:600;
  line-height:1;
}

/* Testimonial quotes inside carbon block */
.quote-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--space-3xl);
}
.quote{text-align:center;}
.quote__text{
  font-size:var(--fs-body);
  font-weight:300;
  line-height:1.45;
  margin-block:0 var(--space-sm);
  color:var(--c-white);
}
.quote__cite{
  color:var(--c-blue);
  font-weight:500;
  margin-block:0;
}

/* P4S4: 3-up phase cards stay 3 columns on Laptop; stack only on Tablet + Mobile. */
@media (max-width:767.98px){
  .phase-grid{ grid-template-columns:1fr; }
}
@media (max-width:979.98px){
  /* P4S1 — P1 hero treatment on T/M: the photo COVERS the hero, a full dark overlay
     sits over it, the title + lead center on top. The hero PINS (sticky) and the page
     content scrolls up over it (fold-in), revealing a moving concave bottom-LEFT
     corner (mirror of Home's bottom-right). Desktop is untouched. */
  .page-exec .hero--coaching{
    display:flex; align-items:center; justify-content:center;
    min-height:70vh; min-height:70svh;
    padding-block:var(--sec-y);
    border-bottom-left-radius:0;
    background:var(--c-eclipse);
    position:sticky; top:var(--solnav-h, 84px); z-index:0;   /* fallback: this page doesn't load solnav.css, so pin under the 84px header */
  }
  .page-exec .hero--coaching .hero__media{ position:absolute; inset:0; width:100%; height:100%; }
  .page-exec .hero--coaching .hero__media .img-ph{ object-position:60% 38%; }
  .page-exec .hero--coaching .hero__media::after{
    display:block; inset:0;
    background:linear-gradient(180deg, rgba(1,18,33,.75) 0%, rgba(1,18,33,.85) 62%, rgba(1,18,33,.95) 100%);
  }
  .page-exec .hero--coaching .hero__inner{ position:relative; z-index:2; }
  .page-exec .hero--coaching .hero__copy{ max-width:none; text-align:center; margin-inline:auto; }
  .page-exec .hero--coaching .hero__title{ color:var(--c-blue); }   /* keep the headline blue (matches desktop) */
  .page-exec .hero--coaching .lead{ color:var(--t-on-dark); max-width:34ch; margin-inline:auto; }

  /* Content rides over the pinned hero as ONE opaque block; concave bottom-LEFT reveal
     edge that travels up with scroll. */
  .page-exec .hero--coaching ~ .page-flow{
    position:relative; z-index:1; background:var(--c-eclipse);
    --reveal-r:clamp(48px, 14vw, 140px);
  }
  .page-exec .hero--coaching ~ .page-flow::before{
    content:""; position:absolute; left: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 right top, #0000 calc(100% - 1px), var(--c-eclipse) 100%);
  }
}

/* Split rows STACK on Tablet + Mobile (≤767); 2-col only on Laptop + Desktop.
   minmax(0,1fr) NOT 1fr → the column can shrink below content min-content, so the
   photo/card stays CONTAINED at small phone widths instead of overflowing. */
@media (max-width:767.98px){
  .split{ grid-template-columns:minmax(0,1fr); }
  /* Tablet AND mobile: SAME 200px cover-cropped band, image on top when stacked. */
  .split__media{ order:-1; aspect-ratio:auto; height:200px; }
  .split__media .pmedia__bg{ background-position:center 22%; }
}
/* MOBILE (<480): center the copy. The chevron list centers as a block but keeps
   its own text left-aligned (a centered bullet list reads worse per line). */
@media (max-width:479.98px){
  .hero--coaching .hero__copy{ text-align:center; }
  .split__lead,
  .split__body{ text-align:center; }
  .list-chevrons{ width:fit-content; margin-inline:auto; text-align:left; }
}
/* LAPTOP (768–979): 2-col; the image column STRETCHES to match the (often
   taller) text column, same as Desktop's align-items:stretch. */
@media (min-width:768px) and (max-width:979.98px){
  .split__media{ aspect-ratio:auto !important; height:100%; }
}