/**
 * Case-study single: pale-blue-led palette (PREVIEW ONLY)
 * ----------------------------------------------------------------------------
 * Loaded only for editors with ?gh_cs_preview=1&gh_cs_palette=pale (see inc/gh-case-study.php), and applied
 * under .gh-cs--pale. It is a colour-only layer over assets/gh-case.css: no layout, spacing, type scale, sticky
 * behaviour, gallery geometry, content or ACF mapping changes. Colours are the existing GraceHola tokens only:
 * pale mist blue, navy, white, gold, and royal blue for small accents / focus. Matches the approved /our-projects/.
 */

/* Hero: pale canvas, navy type, faint glass circles, navy evidence card --------------------------- */
.gh-cs--pale .gh-cs-hero{--cs-h:var(--cs-navy);--cs-fg:var(--cs-body);background:var(--cs-mist)}
.gh-cs--pale .gh-cs-hero::before{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--pale .gh-cs-hero::after{border-color:rgba(243,193,12,.4)}
.gh-cs--pale .gh-cs-hero .gh-cs-eyebrow{--cs-fg:var(--cs-royal)}
.gh-cs--pale .gh-cs-hero__client{--cs-fg:var(--cs-navy)}
.gh-cs--pale .gh-cs-hero__label{--cs-fg:var(--cs-royal)}
.gh-cs--pale .gh-cs-hero .gh-cs-chip{--cs-fg:var(--cs-navy)}
.gh-cs--pale .gh-cs-hero .gh-cs-chip--primary{background:var(--cs-navy);border-color:var(--cs-navy);--cs-fg:#fff}
.gh-cs--pale .gh-cs-hero__period{--cs-fg:var(--cs-navy)}
.gh-cs--pale .gh-cs-hero__summary{--cs-fg:var(--cs-ink)}
.gh-cs--pale .gh-cs-hero .gh-cs-btn{background:var(--cs-navy);border-color:var(--cs-navy);--cs-fg:#fff}
.gh-cs--pale .gh-cs-hero .gh-cs-btn:hover{background:#fff;border-color:var(--cs-navy);--cs-fg:var(--cs-navy)}
.gh-cs--pale .gh-cs-hero :is(a,button):focus-visible{outline-color:var(--cs-royal)}
/* photo: no gold block; a light glass panel and a softer shadow, image itself untouched */
.gh-cs--pale .gh-cs-hero__media::before{background:rgba(243, 193, 12,.90)}
.gh-cs--pale .gh-cs-hero__media>img{box-shadow:0 0 0 1px rgba(1,40,64,.08),0 18px 40px rgba(1,40,64,.2)}
/* evidence: navy card, white copy, gold figure, pale glass edge and a small gold line (as on the landing page) */
.gh-cs--pale .gh-cs-hero__impact{border:1px solid rgba(237,245,255,.22);box-shadow:0 12px 28px rgba(1,40,64,.2)}
.gh-cs--pale .gh-cs-hero__impact::before{content:"";width:24px;height:3px;border-radius:3px;background:var(--cs-gold);margin-bottom:6px}
.gh-cs--pale .gh-cs-hero__stat{--cs-fg:var(--cs-on-dark);background:var(--cs-navy);border:1px solid rgba(237,245,255,.22);box-shadow:0 12px 28px rgba(1,40,64,.2)}

/* Work with us: the approved /our-projects/ treatment, meeting the global footer directly --------- */
.gh-cs--pale .gh-cs-cta{--cs-h:var(--cs-navy);--cs-fg:var(--cs-navy);background:var(--cs-mist);padding-bottom:clamp(88px,10vw,136px)}
.gh-cs--pale .gh-cs-cta .gh-cs-eyebrow{--cs-fg:var(--cs-royal)}
.gh-cs--pale .gh-cs-cta::before{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--pale .gh-cs-cta::after{border-color:rgba(243,193,12,.5)}
.gh-cs--pale .gh-cs-cta .gh-cs-btn{background:var(--cs-navy);border-color:var(--cs-navy);--cs-fg:#fff}
.gh-cs--pale .gh-cs-cta .gh-cs-btn:hover{background:#fff;border-color:var(--cs-navy);--cs-fg:var(--cs-navy)}
.gh-cs--pale .gh-cs-cta :is(a,button):focus-visible{outline-color:var(--cs-royal)}