/* =========================================================================
   Solutions — scroll-driven People / Process / Product experience
   Variant: HORIZONTAL STICKY TOP BAR (the approved pointed-tab pipeline,
   now sticky + scroll-synced instead of click-to-switch).
   Scoped to this page. Reuses :root tokens from assets/styles.css only.
   ========================================================================= */


/* ---- Hero: photo backdrop, centered title (pipeline moved to sticky bar) -- */
.sol-hero{
  position:relative;
  overflow:hidden;
  padding-block:0;                        /* height comes from __inner (constant), not .section's responsive sec-y */
  border-bottom-left-radius:0;            /* Figma: Header section radii [0,0,140,0] */
  border-bottom-right-radius:140px;
}
.sol-hero__media{ position:absolute; inset:0; z-index:0; }
/* Keep the subject's face in frame on wide/short crops (she sits upper-right). */
.sol-hero__img{ width:100%; height:100%; object-fit:cover; object-position:70% 28%; border-radius:0; border:0; display:block; }
/* Overlay must live on the wrapping div: ::after does NOT paint on a replaced
   <img>, which is why the darkening never showed. */
/* Figma match: same half-dark treatment as the HOME hero — #011221 solid on the
   LEFT, fading to the photo on the RIGHT (horizontal), not a bottom gradient. */
.sol-hero__media::after{
  content:"";
  position:absolute; inset:0;
  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%);
}
.sol-hero__inner{
  position:relative; z-index:1;
  container-type:inline-size;   /* proportional hero: title scales in cqi of this box */
  min-height:360px;             /* ONE hero height at every breakpoint */
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:var(--space-lg);
  /* bottom padding reserves the P/P/P bar (it floats up 104px into the hero) */
  padding-block:var(--space-2xl) calc(104px + var(--space-md));
}
.sol-hero__title{ text-align:center; margin:0; font-size:clamp(2rem, 9.2cqi, 6rem); }   /* cqi = same proportion at any width */
.sol-hero__sub{
  text-align:center;
  max-width:46ch;
  color:var(--t-on-dark);
  font-size:var(--fs-body);
  margin:0;
}

/* ===== P/P/P STICKY BAR (.solnav*) now lives in the SHARED assets/solnav.css,
   linked before this file, so Home + Solutions render byte-identical. ===== */

/* =========================================================================
   ZONES — full-width stacked content; existing single-column-of-rows layout
   with the service rows' zig-zag (text/photo alternating) preserved.
   ========================================================================= */

/* Stage intro: copy + paired photo (alternates side per zone = the zig-zag) */
.sol-stage{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3xl);
  align-items:stretch;   /* photo matches the copy column's height (top+bottom flush) */
}
.sol-zone--flip .sol-stage__copy{ order:2; }
.sol-zone--flip .sol-stage__media{ order:1; }
.sol-stage__title{
  font-size:var(--fs-h2);
  line-height:1.04;
  color:var(--c-pale);
  margin:var(--space-sm) 0 var(--space-xl);
}
.sol-stage__list{ font-size:var(--fs-body); }   /* unified body size (matches Home) */
/* P/P/P bullets use the blue chevron marker (not the white dot) per mockup */
.sol-stage__list li::before{
  width:9px; height:9px; top:.62em;
  background:none; border-radius:0;
  border-right:2.5px solid var(--c-blue);
  border-bottom:2.5px solid var(--c-blue);
  transform:translateY(-50%) rotate(-45deg);
}
.sol-stage__media .img-ph{ width:100%; }
/* P2S3 (Process) + P2S4 (Product): the person sits on the RIGHT of the frame — bias the
   cover-crop to the right edge so they stay in shot at every width (not centre-cropped). */
#zone-process .sol-stage__media .pmedia__bg,
#zone-product .sol-stage__media .pmedia__bg{ background-position:right center; }

/* Service row: icon badge left, heading + body right */
.sol-service{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-xl);
  align-items:start;
  max-width:1080px;
  margin-inline:auto;
  padding-block:var(--space-xl);
  /* deep-link target (Home P1S5 "Learn more" -> #strategy etc.): clear the sticky
     site header + the sticky P/P/P bar so the heading isn't hidden under them. */
  scroll-margin-top:calc((2 * var(--solnav-h)) + 28px);
}
.sol-service .icon-badge{
  width:128px; height:128px;
  border-radius:var(--r-xl) var(--r-xl) 0 var(--r-xl);
  display:flex; align-items:center; justify-content:center;
  background:var(--c-blue);
  flex:0 0 auto;
}
.sol-service .icon-badge img{ width:56px; height:56px; }
.sol-service__text .service__title{
  color:var(--c-pale);
  font-size:var(--fs-h3);
  margin:var(--space-xs) 0 var(--space-md);
}
.sol-service__text .service__body{
  font-size:var(--fs-body);   /* unified body size (matches Home) */
  max-width:62ch;
}

/* ---- Fade-up reveal (heading + bullets + rows), once on enter ---------- */
.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; }

/* ---- Responsive: layout single-columns cleanly ------------------------- */
@media (max-width:767.98px){
  /* LAPTOP (768–979) keeps the 2-col stage + service layout (matches Home);
     tablet + mobile (≤767) stack. minmax(0,1fr), not 1fr -> the column can shrink
     below content min-content so the stage photo / long text stays CONTAINED. */
  .sol-stage{ grid-template-columns:minmax(0,1fr); }
  .sol-stage__media{ order:-1; }   /* height set by the ≤767 media band rule below */
  .sol-zone--flip .sol-stage__copy{ order:0; }
  .sol-zone--flip .sol-stage__media{ order:-1; }
  /* Stage copy centers when stacked, matching Home's pain/process-intro
     treatment at this same range: heading + eyebrow centered, bullet block
     sized to its own content and centered as a block (items stay left-aligned
     inside it, so the chevrons don't float away from their text). */
  .sol-stage__copy{ text-align:center; }
  .sol-stage__list{ width:fit-content; margin-inline:auto; text-align:left; }
  /* Service icon shrinks at tablet + mobile; the 2-col icon-LEFT shape is KEPT at
     tablet (base auto/1fr) and only stacks at mobile (≤479 block below). */
  .sol-service .icon-badge{ width:88px; height:88px; }
  .sol-service .icon-badge img{ width:40px; height:40px; }
}

/* TABLET + MOBILE (≤767): stage photo becomes a fixed 200px-tall band, full-width
   cover-cropped, vertically CENTERED (was top-biased 22%, which cut the people
   photos weirdly). Phone keeps the same 200px height as tablet. */
@media (max-width:767.98px){
  .sol-stage__media{ aspect-ratio:auto; height:200px; }
  .sol-stage__media .pmedia__bg{ background-position:center center; }
}

/* MOBILE (<480) only: the service row stacks (icon ABOVE text) and centers as one
   column. TABLET keeps Laptop's icon-LEFT 2-col shape (base auto/1fr) with the
   smaller 88px icon — per Tobie, "retain the shape of Laptop's on Tablet's view." */
@media (max-width:479.98px){
  .sol-service{ grid-template-columns:minmax(0,1fr); gap:var(--space-md); text-align:center; }
  .sol-service .icon-badge{ margin-inline:auto; }
}

/* Reduced motion: no slide, no fade — static, accessible */
@media (prefers-reduced-motion:reduce){
  .reveal{ transition:none !important; opacity:1; transform:none; }
}

/* =========================================================================
   "What's included" service breakdown (chips) + full-list PDF download band.
   Added for the robust-Solutions enhancement (2026-07-11). :root tokens only.
   ========================================================================= */
.sol-includes{ margin-top:var(--space-lg); max-width:62ch; }
.sol-includes__label{
  font-family:var(--font-accent);
  font-size:var(--fs-xs);
  font-weight:var(--w-semi);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--c-blue);
  margin:0 0 var(--space-sm);
}
.sol-includes__chips{
  display:flex; flex-wrap:wrap;
  gap:var(--space-xs) var(--space-sm);
}
.sol-includes__chips li{
  font-size:var(--fs-sm);
  line-height:1.15;
  color:var(--t-on-dark);
  background:var(--c-eclipse-2);
  border:1px solid var(--c-line);
  border-radius:var(--r-pill);
  padding:.42em .95em;
}

/* Download band = the executive-coaching P4S6 look: carbon + round-diag-b (via .is-carbon
   .round-diag-b on the section). Centered stack, mirroring the CTA band right below it. */
.sol-download__inner{ max-width:640px; margin-inline:auto; text-align:center; }
.sol-download__title{ font-size:var(--fs-h4); color:var(--c-pale); margin:0 0 var(--space-xs); }
.sol-download__text p{ color:var(--t-on-dark-muted); font-size:var(--fs-sm); margin:0 auto; max-width:52ch; }

/* Download button: the primary CTA's chevron-wipe, recoloured (pale -> blue) with a
   download icon that drops away on hover. Scoped to THIS button so the global .btn--pale
   (the contact-form submit) is untouched. */
.sol-download__btn{ margin-top:var(--space-lg); position:relative; overflow:hidden; isolation:isolate; }
.sol-download__btn::before{
  content:""; position:absolute; top:0; bottom:0; left:0; right:-22px; z-index:-1;
  background:var(--c-blue); transform:translateX(-102%);
  -webkit-clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  transition:transform .42s var(--ease);
}
.sol-download__btn:hover{ background:var(--c-pale); color:var(--c-white); }
.sol-download__btn:hover::before{ transform:translateX(0); }
.sol-download__ico{ transition:transform .38s var(--ease), opacity .28s var(--ease); }
.sol-download__btn:hover .sol-download__ico{ transform:translateY(1.4rem); opacity:0; }
.sol-download__btn .btn__label{ transition:transform .38s var(--ease); }
.sol-download__btn:hover .btn__label{ transform:translateX(-0.6rem); }

/* CTA + download keyboard-focus ring: pale, not the default blue, so it reads as intentional
   instead of an awkward blue-on-blue border (esp. once the button wipes to blue on hover). */
.sol-modal__foot .btn:focus-visible, .sol-download__btn:focus-visible{ outline-color:var(--c-pale); outline-offset:2px; }

@media (max-width:767.98px){
  .sol-download__inner{ flex-direction:column; align-items:flex-start; }
  .sol-download__text{ flex:0 1 auto; }   /* stacked: size to content, not a 340px vertical basis */
}
@media (max-width:479.98px){
  .sol-download__inner{ align-items:center; text-align:center; }
  .sol-download__text p{ margin-inline:auto; }
}

/* =========================================================================
   Zone capability tag band + zone modals (2026-07-11).
   Pills consolidated to the end of each P/P/P zone; each band opens a modal
   with that zone's full breakdown. :root tokens only. (No delivery-mode colour
   coding — the Training/Consulting/Both split was set aside per the client.)
   ========================================================================= */

/* ---- Tag band = interactive card (mirrors the homepage .service card) --- */
.sol-tagband{
  max-width:1080px; margin-inline:auto; margin-top:var(--space-2xl);
  padding:var(--space-2xl);
  background-color:var(--c-eclipse-2);
  border:1px solid var(--c-line);
  border-radius:0 61px 0 61px;                 /* echoes the homepage service-card diagonal */
  cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.sol-tagband__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-xs) var(--space-md); margin-bottom:var(--space-md); }
.sol-tagband__label{ font-family:var(--font-accent); font-size:var(--fs-xs); font-weight:var(--w-semi); letter-spacing:.09em; text-transform:uppercase; color:var(--c-blue); margin:0; }
.sol-tagband__chips{ display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-sm); }
/* "click to learn more" — subtle italic hint under the label (also the keyboard trigger) */
.sol-tagband__more{ display:inline-flex; align-items:center; gap:.4em; margin:0; padding:0; border:0; background:none; color:var(--t-on-dark-muted); font-family:var(--font-body); font-size:var(--fs-sm); font-style:italic; text-transform:lowercase; cursor:pointer; opacity:.8; transition:opacity .2s var(--ease), color .2s var(--ease); }
.sol-tagband__more .arrow{ display:inline-block; font-style:normal; transition:transform .25s var(--ease); }
.sol-chip{ max-width:100%; font-family:var(--font-body); font-size:var(--fs-sm); line-height:1.15; color:var(--t-on-dark); background:var(--c-eclipse); border:1px solid var(--c-line); border-radius:var(--r-pill); padding:.42em .95em; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.sol-chip:hover{ border-color:var(--c-blue); color:var(--c-white); }

/* Desktop hover = the homepage card treatment (lift + blue-lifted fill + shadow + arrow nudge) */
@media (hover:hover){
  .sol-tagband:hover{ transform:translateY(-4px); box-shadow:0 22px 55px rgba(0,0,0,.38); background-color:color-mix(in srgb, var(--c-blue) 12%, var(--c-eclipse-2)); }
  .sol-tagband:hover .sol-tagband__more{ opacity:1; color:var(--c-pale); }
  .sol-tagband:hover .sol-tagband__more .arrow{ transform:translateX(4px); }
}
/* Touch (T/M): hover never fires, so solutions.js toggles .is-inview on the band
   nearest the viewport centre as it scrolls (same treatment as the homepage cards).
   Tighter padding keeps the widest chips inside the narrower card. */
@media (max-width:767.98px){
  .sol-tagband{ padding:var(--space-lg); }
  .sol-tagband__head{ flex-direction:column; align-items:center; }   /* T/M: stack label + hint, centered */
  .sol-tagband__chips{ justify-content:center; }   /* T/M: centered pills per direction */
  .sol-tagband.is-inview{ transform:translateY(-4px); box-shadow:0 22px 55px rgba(0,0,0,.38); background-color:color-mix(in srgb, var(--c-blue) 12%, var(--c-eclipse-2)); }
  .sol-tagband.is-inview .sol-tagband__more{ opacity:1; color:var(--c-pale); }
}
@media (max-width:479.98px){
  .sol-tagband{ padding:var(--space-md); }
}

/* ---- Zone modal -------------------------------------------------------- */
.sol-modal[hidden]{ display:none; }
.sol-modal{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:var(--space-lg); opacity:0; transition:opacity .25s var(--ease); }
.sol-modal.is-open{ opacity:1; }
.sol-modal__overlay{ position:absolute; inset:0; background:rgba(1,18,33,.74); }
.sol-modal__dialog{ position:relative; z-index:1; width:min(760px,100%); max-height:88vh; display:flex; flex-direction:column; overflow:hidden; background:var(--c-eclipse-2); border:1px solid var(--c-line); border-radius:var(--r-lg); box-shadow:var(--shadow-card); transform:translateY(14px) scale(.985); transition:transform .3s var(--ease); }
.sol-modal__scroll{ min-height:0; overflow-y:auto; overflow-x:hidden; padding:var(--space-2xl); }
.sol-modal.is-open .sol-modal__dialog{ transform:none; }
.sol-modal__dialog:focus{ outline:none; }
/* X pinned to the dialog card's top-right corner (absolute -> the dialog, which itself doesn't
   scroll; the inner .sol-modal__scroll scrolls under it). Understated: no fill, thin outline,
   dimmed at rest -> full opacity on hover. */
.sol-modal__close{ position:absolute; top:var(--space-sm); right:var(--space-sm); z-index:2; width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--c-line); border-radius:var(--r-pill); background:none; color:var(--t-on-dark); font-size:1.4rem; line-height:1; cursor:pointer; opacity:.55; transition:opacity .2s var(--ease); }
.sol-modal__close:hover{ opacity:1; }
.sol-modal__eyebrow{ font-family:var(--font-accent); font-size:var(--fs-xs); font-weight:var(--w-semi); letter-spacing:.09em; text-transform:uppercase; color:var(--c-blue); margin:0 0 var(--space-xs); }
.sol-modal__title{ font-size:var(--fs-h3); color:var(--c-pale); margin:0 0 var(--space-md); padding-right:var(--space-2xl); }
.sol-modal__lead{ font-size:var(--fs-body); color:var(--t-on-dark); margin:0; }
.sol-modal__group{ margin-top:var(--space-lg); padding-top:var(--space-lg); border-top:1px solid var(--c-line); }
.sol-modal__group-title{ font-size:var(--fs-h4); color:var(--c-white); margin:0 0 var(--space-xs); }
.sol-modal__group-desc{ font-size:var(--fs-sm); color:var(--t-on-dark-muted); margin:0 0 var(--space-md); max-width:60ch; }
.sol-modal__caps{ display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-sm); }
.sol-modal__caps li{ max-width:100%; font-size:var(--fs-sm); line-height:1.15; color:var(--t-on-dark); background:var(--c-eclipse); border:1px solid var(--c-line); border-radius:var(--r-pill); padding:.42em .95em; transition:border-color .2s var(--ease), background .2s var(--ease); }
.sol-modal__caps li.is-highlight{ border-color:var(--c-blue); background:rgba(64,140,245,.14); }
.sol-modal__foot{ margin-top:var(--space-xl); padding-top:var(--space-lg); border-top:1px solid var(--c-line); display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); flex-wrap:wrap; }
.sol-modal__outcome{ flex:1 1 300px; font-size:var(--fs-sm); color:var(--t-on-dark); margin:0; }

.sol-noscroll{ overflow:hidden; }

@media (max-width:767.98px){
  .sol-modal{ padding:var(--space-md); }              /* less viewport gutter -> wider dialog */
  .sol-modal__scroll{ padding:var(--space-lg); }      /* less inner padding -> caps fit, no h-scroll */
  .sol-modal__foot{ flex-direction:column; align-items:flex-start; }
}
/* Very small screens: let the long CTA / download labels wrap instead of overflowing the pill. */
@media (max-width:479.98px){
  .sol-modal__foot .btn, .sol-download__btn{ white-space:normal; max-width:100%; justify-content:center; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .sol-modal, .sol-modal__dialog, .sol-tagband, .sol-chip, .sol-tagband__more{ transition:none !important; }
}