/**
 * GraceHola case-study single (V2) - child theme
 * ----------------------------------------------------------------------------
 * Loaded ONLY when gh_cs_v2_active() is true (see inc/gh-case-study.php): an editor
 * previewing with ?gh_cs_preview=1, or after the 'gh_cs_v2_enabled' filter is switched on.
 * Everything is scoped under .gh-cs.
 *
 * Palette: GraceHola brand only - navy #012840, royal #003399, pale blue #EDF5FF, white,
 * gold #F3C10C (plus the kit neutrals ink / body / line). Dark sections never introduce another
 * blue: rings and cards are royal and pale blue at low opacity over navy.
 *
 * Colour system (why dark-on-dark cannot recur): resets use :where() so they have zero
 * specificity, and text colour is never set directly on a component. Components set two
 * custom properties instead - --cs-h (headings) and --cs-fg (everything else) - and ONE
 * rule at the bottom of the "Colour" block applies them with higher specificity than the
 * Elementor kit's global heading/paragraph colours. A dark section only has to declare
 * --cs-h / --cs-fg once.
 *
 * Motion: entrance reveals reuse gh-inner ([data-gh-in]); this file adds only the image settle,
 * hover polish and the gallery strip. Reduced motion is handled in the last block.
 */

/* Tokens -------------------------------------------------------------------- */
.gh-cs{
  --cs-navy:var(--gh-navy,#012840);--cs-royal:var(--gh-royal,#003399);--cs-gold:var(--gh-gold,#F3C10C);
  --cs-mist:var(--gh-mist,#EDF5FF);--cs-ink:var(--gh-ink,#0E2235);--cs-body:var(--gh-body,#3D4E5F);--cs-line:var(--gh-line,#D5E0EF);
  /* pale blue (mist) at fixed strengths, for text and hairlines on navy */
  --cs-on-dark:rgba(237,245,255,.92);--cs-on-dark-soft:rgba(237,245,255,.78);--cs-hair-dark:rgba(237,245,255,.2);
  --cs-head:var(--gh-font-heading,Poppins),system-ui,-apple-system,"Segoe UI",sans-serif;
  --cs-text:var(--gh-font-body,Montserrat),system-ui,-apple-system,"Segoe UI",sans-serif;
  --cs-pad:clamp(20px,4vw,48px);--cs-y:clamp(56px,8vw,104px);--cs-card:20px;
  /* default (light) text roles */
  --cs-h:var(--cs-navy);--cs-fg:var(--cs-body);
  font-family:var(--cs-text);font-size:16px;line-height:1.7;color:var(--cs-fg);
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
.gh-cs{--cs-ico-pdf:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5'/><path d='M9 13h6M9 17h4'/></svg>");--cs-ico-ext:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7M8 7h9v9'/></svg>");--cs-ico-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");--cs-ico-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4.5' width='18' height='15' rx='2.5'/><circle cx='9' cy='10' r='1.8'/><path d='m4 18 5.5-5.5 4 4 2.5-2.5L20 18'/></svg>")}

/* Resets: zero specificity, so any component class can override them -------------- */
:where(.gh-cs) *,:where(.gh-cs) *::before,:where(.gh-cs) *::after{box-sizing:border-box}
:where(.gh-cs) :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote){margin:0;padding:0}
:where(.gh-cs) :where(ul,ol){list-style:none}
:where(.gh-cs) img{display:block;max-width:100%;height:auto}
:where(.gh-cs) :where(h1,h2,h3,h4){font-family:var(--cs-head);overflow-wrap:break-word}

/* Colour: the only place text colour is applied ----------------------------------- */
.gh-cs.gh-cs :is(h1,h2,h3,h4){color:var(--cs-h)}
.gh-cs.gh-cs :is(p,li,dt,dd,cite,blockquote,span,b,strong,em,a,button,figcaption){color:var(--cs-fg)}
/* Dark sections: white headings, pale-blue supporting text. Nothing else needs to change per component. */
.gh-cs :is(.gh-cs-hero,.gh-cs-role,.gh-cs-outcomes,.gh-cs-cta,.gh-cs-quote__card){--cs-h:#fff;--cs-fg:var(--cs-on-dark)}

.gh-cs-wrap{width:100%;max-width:var(--gh-container,1240px);margin-inline:auto;padding-inline:var(--cs-pad)}
.gh-cs-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gh-cs a:focus-visible,.gh-cs button:focus-visible,.gh-cs [tabindex]:focus-visible{outline:3px solid var(--cs-royal);outline-offset:3px;border-radius:4px}
.gh-cs :is(.gh-cs-hero,.gh-cs-outcomes,.gh-cs-cta,.gh-cs-role,.gh-cs-quote__card) :is(a,button):focus-visible{outline-color:var(--cs-gold)}

/* Shared bits ---------------------------------------------------------------- */
.gh-cs-eyebrow{display:flex;align-items:center;gap:12px;font:600 12.5px/1.3 var(--cs-head);letter-spacing:.14em;text-transform:uppercase;--cs-fg:var(--cs-royal)}
.gh-cs-eyebrow::before{content:"";flex:none;width:32px;height:3px;border-radius:3px;background:var(--cs-gold)}
:is(.gh-cs-hero,.gh-cs-role,.gh-cs-outcomes,.gh-cs-cta) .gh-cs-eyebrow{--cs-fg:var(--cs-gold)}
.gh-cs-sec{padding-block:var(--cs-y)}
.gh-cs-sec__head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,44px)}
.gh-cs .gh-cs-sec__title{font-weight:700;font-size:clamp(26px,3.2vw,40px);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.gh-cs-chips{display:flex;flex-wrap:wrap;gap:8px}
.gh-cs-chip{display:inline-flex;align-items:center;min-height:30px;padding:4px 14px;border-radius:999px;font:600 12px/1.2 var(--cs-head);letter-spacing:.05em;text-transform:uppercase;border:1.5px solid currentColor;--cs-fg:var(--cs-royal)}
.gh-cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 28px;border-radius:var(--gh-radius,6px);background:var(--cs-gold);font:600 15px/1.2 var(--cs-head);text-decoration:none;border:2px solid var(--cs-gold);transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease;--cs-fg:var(--cs-navy)}
.gh-cs-btn:hover{background:#fff;border-color:#fff;box-shadow:0 10px 24px rgba(1,40,64,.28)}
.gh-cs-btn--pdf::before{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--cs-ico-pdf) center/contain no-repeat;mask:var(--cs-ico-pdf) center/contain no-repeat}

/* Oversized concentric geometry: the case-study motif. Pale-blue "glass" over navy: very low-opacity fills,
   thin pale-blue outlines, one thin gold ring. No saturated blue anywhere in the circles. */
.gh-cs-hero,.gh-cs-outcomes,.gh-cs-cta{position:relative;overflow:hidden;isolation:isolate;background:var(--cs-navy)}
.gh-cs-hero::before,.gh-cs-outcomes::before,.gh-cs-cta::before{content:"";position:absolute;z-index:-1;aspect-ratio:1;border-radius:50%;pointer-events:none;
  border:1.5px solid rgba(237,245,255,.22);
  background:
    linear-gradient(140deg,rgba(237,245,255,.06),rgba(237,245,255,0) 55%),
    radial-gradient(circle closest-side,
      rgba(237,245,255,.07) 0 38%,rgba(237,245,255,.26) 38% calc(38% + 1.5px),
      rgba(237,245,255,.04) calc(38% + 1.5px) 69%,rgba(237,245,255,.2) 69% calc(69% + 1.5px),
      rgba(237,245,255,.022) calc(69% + 1.5px) 100%)}
.gh-cs-hero::before{right:-18%;top:-52%;width:clamp(520px,78vw,1180px)}
.gh-cs-hero::after,.gh-cs-outcomes::after,.gh-cs-cta::after{content:"";position:absolute;z-index:-1;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(243,193,12,.4);pointer-events:none}
.gh-cs-hero::after{left:-70px;bottom:-96px;width:230px}
.gh-cs-outcomes::before{left:-20%;bottom:-70%;width:clamp(520px,70vw,1040px)}
.gh-cs-outcomes::after{right:6%;top:-70px;width:180px;border-color:rgba(243,193,12,.34)}
.gh-cs-cta::before{left:50%;top:50%;translate:-50% -50%;width:clamp(460px,64vw,980px)}
.gh-cs-cta::after{right:8%;bottom:-60px;width:150px;border-color:rgba(243,193,12,.34)}

/* Prose ---------------------------------------------------------------------- */
.gh-cs-prose{max-width:68ch;display:grid;gap:1.1em}
.gh-cs-prose p{font-size:16.5px}
.gh-cs-prose--lead>p:first-child{font-size:clamp(18px,1.8vw,21px);line-height:1.6;font-weight:500;--cs-fg:var(--cs-ink)}
.gh-cs-prose strong{font-weight:600;--cs-fg:var(--cs-ink)}
.gh-cs-prose a{text-decoration-line:underline;text-decoration-color:var(--cs-gold);text-decoration-thickness:2px;text-underline-offset:3px;--cs-fg:var(--cs-royal)}
.gh-cs-subhead{font:600 17px/1.4 var(--cs-head);--cs-fg:var(--cs-navy)}
.gh-cs-list{display:grid;gap:12px;margin-block:.2em}
.gh-cs-list li{position:relative;padding:14px 18px 14px 46px;background:var(--cs-mist);border-radius:14px;font-size:15.5px;line-height:1.6;--cs-fg:var(--cs-ink)}
.gh-cs-list li::before{content:"";position:absolute;left:18px;top:1.15em;width:12px;height:12px;border-radius:3px;background:var(--cs-gold);transform:rotate(45deg) scale(.82)}

/* 1) Hero: copy left, project image right, gold offset block, overlapping impact card ---- */
.gh-cs-hero{padding-block:clamp(44px,6.5vw,92px) clamp(64px,8vw,116px)}
.gh-cs-hero__grid{position:relative;display:grid;gap:clamp(40px,5vw,72px);align-items:center}
.gh-cs-hero__body{display:grid;gap:18px;justify-items:start;min-width:0}
.gh-cs .gh-cs-hero__title{font-weight:700;font-size:clamp(30px,3.9vw,50px);line-height:1.1;letter-spacing:-.015em;text-wrap:balance;max-width:24ch}
.gh-cs-hero__client{display:grid;gap:3px;font:500 clamp(17px,1.7vw,21px)/1.35 var(--cs-head);--cs-fg:#fff}
.gh-cs-hero__label{font:600 11.5px/1.2 var(--cs-head);letter-spacing:.14em;text-transform:uppercase;--cs-fg:var(--cs-gold)}
.gh-cs-hero .gh-cs-chip{--cs-fg:var(--cs-on-dark)}
.gh-cs-hero .gh-cs-chip--primary{background:var(--cs-gold);border-color:var(--cs-gold);--cs-fg:var(--cs-navy)}
.gh-cs-hero__period{font:600 14.5px/1.4 var(--cs-head);letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.gh-cs-hero__period::before{content:"";flex:none;width:18px;height:18px;background:var(--cs-gold);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><rect x='3.5' y='5' width='17' height='15' rx='2.5'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><rect x='3.5' y='5' width='17' height='15' rx='2.5'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>") center/contain no-repeat}
.gh-cs-hero__summary{max-width:54ch;font-size:clamp(16.5px,1.5vw,19px);line-height:1.65}
.gh-cs-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.gh-cs-hero__media{position:relative;margin:0 18px 26px 0;min-width:0}
.gh-cs-hero__media::before{content:"";position:absolute;right:-18px;bottom:-18px;width:80%;height:80%;border-radius:var(--cs-card);background:rgba(237,245,255,.09);border:1px solid rgba(237,245,255,.2)}
.gh-cs-hero__media>img{position:relative;width:100%;aspect-ratio:var(--ar,4/3);object-fit:cover;border-radius:var(--cs-card);box-shadow:0 24px 48px rgba(1,40,64,.4)}
/* Temporary project-image placeholder: rendered only for editors previewing, never saved as content */
.gh-cs-hero__ph{position:relative;display:grid;place-content:center;justify-items:center;gap:10px;aspect-ratio:4/3;padding:24px;text-align:center;border-radius:var(--cs-card);background:linear-gradient(135deg,rgba(237,245,255,.13),rgba(237,245,255,.05)),var(--cs-navy);border:2px dashed rgba(237,245,255,.55)}
.gh-cs-hero__ph::before{content:"";width:46px;height:46px;background:var(--cs-on-dark);-webkit-mask:var(--cs-ico-image) center/contain no-repeat;mask:var(--cs-ico-image) center/contain no-repeat}
.gh-cs-hero__ph-t{font:700 14px/1.3 var(--cs-head);letter-spacing:.14em;text-transform:uppercase}
.gh-cs-hero__ph-s{max-width:34ch;font-size:13px;line-height:1.5;--cs-fg:var(--cs-on-dark-soft)}
.gh-cs-hero__impact{position:absolute;left:-22px;bottom:-28px;z-index:2;display:grid;gap:2px;padding:16px 22px 18px;border-radius:16px;background:var(--cs-navy);border:1.5px solid var(--cs-gold);box-shadow:0 14px 30px rgba(1,40,64,.45);max-width:min(78%,260px)}
.gh-cs-hero__impact-num{font:700 clamp(34px,3.6vw,46px)/1 var(--cs-head);letter-spacing:-.02em;--cs-fg:var(--cs-gold)}
.gh-cs-hero__impact-lab{font:600 13.5px/1.35 var(--cs-head);--cs-fg:#fff}
/* No image and not previewing: the headline metric stands alone as a card */
.gh-cs-hero__stat{position:relative;display:grid;gap:10px;align-content:center;padding:clamp(28px,4vw,48px);border-radius:var(--cs-card);background:rgba(237,245,255,.06);border:1px solid rgba(237,245,255,.16);box-shadow:14px 14px 0 var(--cs-gold);margin:0 14px 14px 0}
.gh-cs-hero__stat-num{font:700 clamp(56px,8vw,104px)/1 var(--cs-head);letter-spacing:-.02em;--cs-fg:var(--cs-gold)}
.gh-cs-hero__stat-lab{font:600 clamp(17px,1.7vw,22px)/1.35 var(--cs-head);--cs-fg:#fff}
.gh-cs-hero__stat-more{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:14px;margin-top:6px;border-top:1px solid var(--cs-hair-dark);font:500 14px/1.4 var(--cs-text)}
.gh-cs-hero__stat-more b{font:700 15px var(--cs-head);--cs-fg:var(--cs-gold)}
@media (min-width:900px){.gh-cs-hero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
@media (max-width:899px){.gh-cs-hero__impact{left:-6px;bottom:-24px}.gh-cs-hero__ph{padding-bottom:78px}}

/* 2-5) Story zone: rail + challenge / role / approach ---------------------------- */
.gh-cs-story{padding-block:var(--cs-y);background:#fff}
.gh-cs-story__grid{display:grid;gap:clamp(40px,5vw,64px);align-items:start}
.gh-cs-rail{background:var(--cs-mist);border:1px solid var(--cs-line);border-radius:var(--cs-card);padding:clamp(22px,2vw,26px)}
.gh-cs .gh-cs-rail__title{font:700 10.5px/1.2 var(--cs-head);letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:24px;white-space:nowrap;--cs-h:var(--cs-royal)}
.gh-cs-rail__title::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--cs-gold)}
.gh-cs-rail__list{display:grid;gap:26px 24px}
.gh-cs-rail__item{display:grid;gap:7px;min-width:0;align-content:start}
.gh-cs-rail dt{font:600 10.5px/1.3 var(--cs-head);letter-spacing:.16em;text-transform:uppercase;--cs-fg:var(--cs-royal)}
.gh-cs-rail dd{font:600 15px/1.5 var(--cs-head);overflow-wrap:anywhere;--cs-fg:var(--cs-navy)}
.gh-cs-rail .gh-cs-chips .gh-cs-chip{font-size:11px;min-height:28px;padding:3px 12px}
.gh-cs-rail .gh-cs-chips .gh-cs-chip--primary{background:var(--cs-navy);border-color:var(--cs-navy);--cs-fg:#fff}
/* Services: plain list; the arrow sits inline straight after each title */
.gh-cs-rail__links{display:grid;gap:6px}
.gh-cs-rail__links a{display:block;padding:5px 0;min-height:32px;text-decoration:none;font:600 14px/1.45 var(--cs-head);--cs-fg:var(--cs-navy);transition:color .2s ease}
.gh-cs-rail__links a::after{content:"";display:inline-block;width:13px;height:13px;margin-left:6px;vertical-align:-1px;background:var(--cs-royal);-webkit-mask:var(--cs-ico-arrow) center/contain no-repeat;mask:var(--cs-ico-arrow) center/contain no-repeat;transition:transform .2s ease}
@media (pointer:coarse){.gh-cs-rail__links{gap:0}.gh-cs-rail__links a{padding:12px 0;min-height:44px}}
.gh-cs-rail__links a:hover{--cs-fg:var(--cs-royal)}
.gh-cs-rail__links a:hover::after{transform:translateX(3px)}
.gh-cs-rail .gh-cs-btn{width:100%;margin-top:2px;min-height:46px;padding:11px 18px;font-size:14px;background:var(--cs-navy);border-color:var(--cs-navy);--cs-fg:#fff}
.gh-cs-rail .gh-cs-btn:hover{background:var(--cs-royal);border-color:var(--cs-royal)}
.gh-cs-story__main{display:grid;gap:clamp(56px,7vw,88px);min-width:0}
@media (min-width:600px) and (max-width:1099px){.gh-cs-rail__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){
  .gh-cs-story__grid{grid-template-columns:336px minmax(0,1fr);gap:clamp(52px,5vw,76px)}
  .gh-cs-rail{position:sticky;top:112px}
}
/* No story sections (e.g. PDF-led): the rail becomes a full-width fact bar */
.gh-cs-story--solo .gh-cs-story__grid{grid-template-columns:minmax(0,1fr)}
.gh-cs-story--solo .gh-cs-rail{position:static}
@media (min-width:760px){.gh-cs-story--solo .gh-cs-rail__list{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}

/* Our role: GraceHola's contribution, set apart. First statement leads. */
.gh-cs-role{position:relative;background:var(--cs-navy);border-radius:var(--cs-card);padding:clamp(28px,4.4vw,52px);box-shadow:0 0 0 1px rgba(1,40,64,.08),0 18px 40px rgba(1,40,64,.16)}
.gh-cs-role .gh-cs-sec__head{margin-bottom:clamp(20px,3vw,28px)}
.gh-cs-role .gh-cs-prose{max-width:62ch;gap:1.2em}
.gh-cs-role .gh-cs-prose>p{font-size:16px;line-height:1.7}
.gh-cs-role .gh-cs-prose>p:first-child{font:600 clamp(20px,2.1vw,25px)/1.45 var(--cs-head);letter-spacing:-.005em;--cs-fg:#fff}
@media (max-width:600px){.gh-cs-role{box-shadow:0 0 0 1px rgba(1,40,64,.08),0 12px 28px rgba(1,40,64,.16)}}

/* How we delivered: numbered vertical timeline */
.gh-cs-steps{display:grid}
.gh-cs-step{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:clamp(16px,2.4vw,28px);padding-bottom:clamp(32px,4vw,46px)}
.gh-cs-step:last-child{padding-bottom:0}
.gh-cs-step::before{content:"";position:absolute;left:25px;top:60px;bottom:8px;width:2px;background:var(--cs-line)}
.gh-cs-step:last-child::before{display:none}
.gh-cs-step__num{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--cs-gold);font:700 17px/1 var(--cs-head);box-shadow:0 0 0 6px #fff;--cs-fg:var(--cs-navy)}
.gh-cs-step__body{display:grid;gap:12px;min-width:0;padding-top:8px}
.gh-cs .gh-cs-step__title{font-weight:600;font-size:clamp(19px,2vw,23px);line-height:1.3}
.gh-cs-step .gh-cs-prose{max-width:62ch}

/* 6) Outcomes ------------------------------------------------------------------ */
.gh-cs-outcomes .gh-cs-wrap{position:relative}
.gh-cs-metrics{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin-bottom:clamp(56px,5vw,64px)}
.gh-cs-metric{display:grid;align-content:start;gap:8px;padding:clamp(24px,3vw,32px);border-radius:var(--cs-card);background:rgba(237,245,255,.05);border:1px solid rgba(237,245,255,.14);transition:transform .3s ease,border-color .3s ease,background-color .3s ease}
.gh-cs-metric__num{font:700 clamp(42px,5.4vw,64px)/1 var(--cs-head);letter-spacing:-.02em;overflow-wrap:anywhere;--cs-fg:var(--cs-gold)}
.gh-cs-metric__lab{font:600 16.5px/1.35 var(--cs-head);--cs-fg:#fff}
.gh-cs-metric__note{margin-top:7px;font-size:14px;line-height:1.55;--cs-fg:var(--cs-on-dark-soft)}
@media (hover:hover){.gh-cs-metric:hover{transform:translateY(-4px);border-color:rgba(243,193,12,.6);background:rgba(237,245,255,.08)}}
.gh-cs-results__label{font:600 12.5px/1.3 var(--cs-head);letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;--cs-fg:var(--cs-gold)}
.gh-cs-results{display:grid;gap:0 clamp(24px,4vw,56px);max-width:none}
.gh-cs-results li{position:relative;padding:18px 0 18px 40px;border-top:1px solid var(--cs-hair-dark);font-size:16px;line-height:1.6}
.gh-cs-results li::before{content:"";position:absolute;left:4px;top:1.5em;width:15px;height:8px;border-left:3px solid var(--cs-gold);border-bottom:3px solid var(--cs-gold);transform:rotate(-45deg) translateY(-50%)}
@media (min-width:900px){.gh-cs-results--cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 7) Legacy (pale blue break) ------------------------------------------------------- */
.gh-cs-legacy{background:var(--cs-mist)}
.gh-cs-legacy__grid{display:grid;gap:clamp(24px,4vw,56px);align-items:start}
.gh-cs-legacy__text{border-left:4px solid var(--cs-gold);padding-left:clamp(20px,3vw,36px)}
@media (min-width:900px){.gh-cs-legacy__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.gh-cs-legacy .gh-cs-sec__head{margin-bottom:0}}

/* 8) Partners: text only, numbered rows with hairline dividers ---------------------- */
.gh-cs-partners{background:#fff}
.gh-cs-plist{counter-reset:gh-p;display:grid;gap:0 clamp(24px,4vw,56px);grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.gh-cs-plist li{counter-increment:gh-p;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:baseline;gap:6px;border-top:1px solid var(--cs-line);padding:18px 0;font:600 16.5px/1.4 var(--cs-head);--cs-fg:var(--cs-navy)}
.gh-cs-plist li::before{content:counter(gh-p,decimal-leading-zero);font:700 12px/1 var(--cs-head);letter-spacing:.08em;--cs-fg:var(--cs-royal);color:var(--cs-royal)}
.gh-cs-plist li{position:relative}
.gh-cs-plist li::after{content:"";position:absolute;left:0;top:-1px;width:28px;height:3px;border-radius:3px;background:var(--cs-gold)}
.gh-cs-plist a{display:inline-flex;align-items:center;gap:8px;min-height:32px;text-decoration:none;--cs-fg:var(--cs-navy)}
.gh-cs-plist a::after{content:"";flex:none;width:14px;height:14px;background:var(--cs-royal);-webkit-mask:var(--cs-ico-ext) center/contain no-repeat;mask:var(--cs-ico-ext) center/contain no-repeat}
.gh-cs-plist a:hover{--cs-fg:var(--cs-royal)}

/* 9) Testimonial: static card ---------------------------------------------------- */
.gh-cs-quote{background:#fff;padding-block:calc(var(--cs-y) * .6)}
.gh-cs-quote__card{position:relative;max-width:920px;margin-inline:auto;background:var(--cs-navy);border:1px solid rgba(237,245,255,.16);border-radius:calc(var(--cs-card) + 6px);padding:clamp(76px,9vw,104px) clamp(28px,5vw,60px) clamp(32px,5vw,56px);box-shadow:0 0 0 1px rgba(1,40,64,.08),0 18px 40px rgba(1,40,64,.16);overflow:hidden}
.gh-cs-quote__card::before{content:"\201C";position:absolute;left:clamp(24px,4.4vw,56px);top:clamp(10px,1.6vw,18px);font:700 clamp(80px,9vw,112px)/1 var(--cs-head);color:rgba(237,245,255,.2);pointer-events:none}
.gh-cs-quote__text{position:relative;font:500 clamp(18px,2vw,23px)/1.6 var(--cs-head);max-width:60ch;--cs-fg:#fff}
.gh-cs-quote__text p+p{margin-top:.9em}
.gh-cs-quote__who{display:flex;align-items:center;gap:16px;margin-top:clamp(24px,3vw,36px);padding-top:clamp(20px,3vw,28px);border-top:1px solid var(--cs-hair-dark)}
.gh-cs-quote__img{flex:none;width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid rgba(237,245,255,.5)}
.gh-cs-quote__name{font:600 16.5px/1.3 var(--cs-head);font-style:normal;--cs-fg:#fff}
.gh-cs-quote__role{font:500 14px/1.4 var(--cs-text);--cs-fg:var(--cs-on-dark-soft)}
@media (max-width:600px){.gh-cs-quote__card{box-shadow:0 0 0 1px rgba(1,40,64,.08),0 12px 28px rgba(1,40,64,.16)}}

/* 10) Project gallery: editorial composition on desktop, swipeable strip on mobile, no autoplay.
   Sits between "How we delivered" and "Key outcomes" as visual evidence of delivery. */
.gh-cs-gallery{background:var(--cs-mist);position:relative;overflow:hidden;isolation:isolate}
.gh-cs-gallery::before{content:"";position:absolute;z-index:-1;right:-12%;top:-30%;width:clamp(420px,52vw,760px);aspect-ratio:1;border-radius:50%;pointer-events:none;border:1.5px solid rgba(1,40,64,.1);background:radial-gradient(circle closest-side,rgba(255,255,255,.55) 0 62%,rgba(1,40,64,.09) 62% calc(62% + 1.5px),rgba(255,255,255,.28) calc(62% + 1.5px) 100%)}
.gh-cs-gallery__head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:clamp(24px,3vw,36px)}
.gh-cs-gallery__head .gh-cs-sec__head{margin-bottom:0}
.gh-cs-gallery__note{margin:-12px 0 24px;font-size:13px;line-height:1.5;--cs-fg:var(--cs-royal)}
.gh-cs-strip__ctl{display:none;gap:10px;flex:none}
.gh-cs-strip__ctl.is-ready{display:flex}
.gh-cs .gh-cs-strip__btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--cs-navy);background:transparent;color:var(--cs-navy);display:grid;place-items:center;cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}
.gh-cs-strip__btn::before{content:"";width:12px;height:12px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:rotate(45deg) translate(-2px,2px)}
.gh-cs-strip__btn--prev::before{transform:rotate(-135deg) translate(-2px,2px)}
.gh-cs .gh-cs-strip__btn:focus,.gh-cs .gh-cs-strip__btn:active{background:transparent;color:var(--cs-navy);box-shadow:none}
.gh-cs .gh-cs-strip__btn:hover:not([aria-disabled="true"]),.gh-cs .gh-cs-strip__btn:focus-visible:not([aria-disabled="true"]){background:var(--cs-navy);color:#fff}
.gh-cs .gh-cs-strip__btn[aria-disabled="true"]{opacity:.35;cursor:default}
.gh-cs-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--cs-navy) transparent;padding-bottom:14px;overscroll-behavior-x:contain;align-items:center}
.gh-cs-strip__item{margin:0;scroll-snap-align:start}
.gh-cs-gal__ph{display:grid;place-content:center;justify-items:center;gap:4px;aspect-ratio:var(--ar,1.5);width:100%;padding:16px;text-align:center;border-radius:16px;background:#fff;border:2px dashed rgba(0,51,153,.45)}
.gh-cs-gal__ph::before{content:"";width:34px;height:34px;background:var(--cs-royal);-webkit-mask:var(--cs-ico-image) center/contain no-repeat;mask:var(--cs-ico-image) center/contain no-repeat}
.gh-cs-gal__ph-t{font:700 12px/1.3 var(--cs-head);letter-spacing:.14em;text-transform:uppercase;--cs-fg:var(--cs-navy)}
.gh-cs-gal__ph-s{font-size:12.5px;line-height:1.4;--cs-fg:var(--cs-body)}
/* Natural proportions: each figure takes its own aspect ratio (--ar), so images are never trimmed to fit a slot. */
.gh-cs-gal .gh-cs-gal__i{flex:0 0 auto;width:min(86vw,calc(var(--ar,1.5) * 300px));aspect-ratio:var(--ar,1.5)}
.gh-cs-gal .gh-cs-gal__i img{width:100%;height:100%;object-fit:cover;border-radius:16px;background:var(--cs-line);box-shadow:0 0 0 1px rgba(1,40,64,.08),0 8px 22px rgba(1,40,64,.08)}
/* Mobile: rows and the feature group dissolve into one swipe strip */
@media (max-width:899px){.gh-cs-gal__row,.gh-cs-gal__feature,.gh-cs-gal__stack{display:contents}}
@media (min-width:900px){
  .gh-cs-gal{display:grid;gap:14px;overflow:visible;scroll-snap-type:none;padding-bottom:0;align-items:start}
  .gh-cs-gal__row,.gh-cs-gal__feature{display:grid;grid-template-columns:var(--cols);gap:14px;width:100%;max-width:min(100%,var(--cap,100%));margin-inline:auto;align-items:stretch}
  .gh-cs-gal .gh-cs-gal__i{width:auto;aspect-ratio:var(--ar,1.5);min-width:0}
  .gh-cs-gal .gh-cs-gal__i img{height:auto;aspect-ratio:var(--ar,1.5)}
  /* Feature group: the stack takes the large image's height and splits it by the supporting photos' own shapes (--w) */
  .gh-cs-gal__stack{display:flex;flex-direction:column;gap:14px;min-height:0}
  .gh-cs-gal__stack .gh-cs-gal__i{position:relative;flex:var(--w,.6) 1 0;min-height:0;aspect-ratio:auto;width:auto}
  .gh-cs-gal__stack .gh-cs-gal__i img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
}

/* 11) Related ------------------------------------------------------------------ */
.gh-cs-related{background:#fff}
.gh-cs-cards{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.gh-cs-card{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:var(--cs-card);background:#fff;border:1px solid var(--cs-line);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.gh-cs-card__media{aspect-ratio:16/10;background:var(--cs-mist);overflow:hidden}
.gh-cs-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gh-cs-card__body{display:grid;align-content:start;gap:10px;padding:22px 22px 24px}
.gh-cs-card .gh-cs-chip{font-size:11px;min-height:26px;padding:3px 12px;justify-self:start}
.gh-cs .gh-cs-card__title{font-weight:600;font-size:19px;line-height:1.3}
.gh-cs-card__title a{text-decoration:none;--cs-fg:var(--cs-navy)}
.gh-cs-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.gh-cs-card__sum{font-size:14.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gh-cs-card__go{display:inline-flex;align-items:center;gap:8px;font:600 14px/1.2 var(--cs-head);margin-top:4px;--cs-fg:var(--cs-royal)}
.gh-cs-card__go::after{content:"";width:16px;height:16px;background:var(--cs-royal);-webkit-mask:var(--cs-ico-ext) center/contain no-repeat;mask:var(--cs-ico-ext) center/contain no-repeat;transition:transform .25s ease}
@media (hover:hover){.gh-cs-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(1,40,64,.14);border-color:var(--cs-gold)}.gh-cs-card:hover .gh-cs-card__media img{transform:scale(1.04)}.gh-cs-card:hover .gh-cs-card__go::after{transform:translate(3px,-3px)}}
.gh-cs-card:focus-within{border-color:var(--cs-gold)}

/* 12) CTA ----------------------------------------------------------------------- */
.gh-cs-cta{text-align:center;padding-block:clamp(72px,9vw,120px)}
.gh-cs-cta .gh-cs-wrap{position:relative}
.gh-cs-cta .gh-cs-eyebrow{justify-content:center}
.gh-cs-cta__inner{display:grid;gap:18px;justify-items:center;max-width:760px;margin-inline:auto}
.gh-cs .gh-cs-cta__title{font-weight:700;font-size:clamp(28px,4vw,46px);line-height:1.15;text-wrap:balance}
.gh-cs-cta__text{font-size:clamp(16px,1.5vw,18px);max-width:46ch}
.gh-cs-cta .gh-cs-btn{margin-top:8px;padding-inline:36px}

/* Motion: image settle + reduced-motion -----------------------------------------------
   Reveal itself ([data-gh-in]) is gh-inner's. This adds only the hero image settle. */
@keyframes gh-cs-settle{from{transform:scale(1.045)}to{transform:scale(1)}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .gh-cs [data-gh-in].is-in[data-gh-img]>img{animation:gh-cs-settle .9s cubic-bezier(.22,.61,.36,1) both}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.gh-cs-btn:hover{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){
  .gh-cs *,.gh-cs *::before,.gh-cs *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .gh-cs .gh-cs-metric:hover,.gh-cs .gh-cs-card:hover,.gh-cs .gh-cs-btn:hover{transform:none!important}
  .gh-cs .gh-cs-card:hover .gh-cs-card__media img{transform:none!important}
}
@media (forced-colors:active){
  .gh-cs-chip,.gh-cs-btn,.gh-cs-strip__btn{border:2px solid ButtonText}
  .gh-cs-role,.gh-cs-quote__card,.gh-cs-metric,.gh-cs-card,.gh-cs-rail{border:1px solid CanvasText}
}

/* Hero with neither image nor metric: single column */
@media (min-width:900px){.gh-cs-hero--solo .gh-cs-hero__grid{grid-template-columns:minmax(0,1fr)}.gh-cs-hero--solo .gh-cs-hero__title{max-width:24ch}}