/**
 * GraceHola "Our Projects" landing (V2) - child theme
 * ----------------------------------------------------------------------------
 * Loaded ONLY when gh_pj_active() is true (see inc/gh-projects.php): an editor previewing page 17 with
 * ?gh_pj_preview=1, or after the 'gh_pj_enabled' filter is switched on. Builds on assets/gh-case.css
 * (tokens, resets, chips, eyebrow, CTA, circles all come from there) and adds only the landing layout.
 * Everything is scoped under .gh-cs, and heading/button rules carry the .gh-cs prefix so the Elementor
 * kit's global h1-h3 / button styles cannot override them.
 *
 * Palette: navy, white, pale blue, restrained gold. Royal blue only for small accents, links, focus.
 */

.gh-pj{background:#fff}

/* 1) Hero: headline left, one cohesive "Proof in practice" panel right ------------------------------ */
.gh-cs .gh-pj-hero{--cs-h:#fff;--cs-fg:var(--cs-on-dark);position:relative;overflow:hidden;isolation:isolate;background:var(--cs-navy);padding-block:clamp(56px,8vw,120px) clamp(60px,8vw,112px)}
.gh-pj-hero::before{content:"";position:absolute;z-index:-1;aspect-ratio:1;border-radius:50%;pointer-events:none;left:-16%;bottom:-86%;width:clamp(560px,84vw,1240px);
  border:1.5px solid rgba(237,245,255,.22);
  background:
    linear-gradient(40deg,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-pj-hero::after{content:"";position:absolute;z-index:-1;aspect-ratio:1;border-radius:50%;pointer-events:none;right:6%;top:-70px;width:170px;border:1.5px solid rgba(243,193,12,.36)}
.gh-pj-hero .gh-cs-eyebrow{--cs-fg:var(--cs-gold)}
.gh-pj-hero__grid{position:relative;display:grid;gap:clamp(36px,5vw,72px);align-items:end}
.gh-pj-hero__body{display:grid;gap:clamp(18px,2vw,26px);justify-items:start;min-width:0}
.gh-cs .gh-pj-hero__title{font-weight:700;font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance;max-width:none}
.gh-pj-hero__intro{max-width:52ch;font-size:clamp(16.5px,1.5vw,19px);line-height:1.7}
@media (min-width:900px){.gh-pj-hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.gh-pj-hero--solo .gh-pj-hero__grid{grid-template-columns:minmax(0,1fr)}}

.gh-pj-proof{position:relative;min-width:0;border-radius:var(--cs-card);padding:clamp(22px,3vw,34px) clamp(22px,3vw,36px) clamp(8px,1.4vw,14px);background:linear-gradient(150deg,rgba(237,245,255,.11),rgba(237,245,255,.04));border:1px solid rgba(237,245,255,.2)}
.gh-pj-proof__head{display:flex;align-items:center;gap:12px;margin-bottom:6px;font:600 12px/1.3 var(--cs-head);letter-spacing:.16em;text-transform:uppercase;--cs-fg:var(--cs-on-dark-soft)}
.gh-pj-proof__head::before{content:"";flex:none;width:24px;height:3px;border-radius:3px;background:var(--cs-gold)}
.gh-pj-proof__item{display:grid;grid-template-columns:clamp(88px,9vw,128px) minmax(0,1fr);gap:clamp(14px,2vw,26px);align-items:baseline;padding-block:clamp(14px,1.8vw,20px);border-top:1px solid var(--cs-hair-dark)}
.gh-pj-proof__list>li:first-child{border-top:0}
.gh-pj-proof__num{font:700 clamp(32px,3.6vw,46px)/1 var(--cs-head);letter-spacing:-.02em;font-variant-numeric:tabular-nums;--cs-fg:var(--cs-gold)}
.gh-pj-proof__lab{font:600 15px/1.4 var(--cs-head);--cs-fg:#fff}
.gh-pj-proof__link{display:inline-block;margin-top:4px;padding-block:2px;font:500 13px/1.4 var(--cs-text);text-decoration:underline;text-decoration-color:rgba(237,245,255,.35);text-underline-offset:3px;--cs-fg:var(--cs-on-dark-soft);transition:color .2s ease,text-decoration-color .2s ease}
.gh-pj-proof__link:hover{text-decoration-color:var(--cs-gold);--cs-fg:#fff}

/* 2) Featured project: asymmetric, real image, pale glass behind ------------------------------------- */
.gh-pj-feature{position:relative;overflow:hidden;isolation:isolate;background:var(--cs-mist);padding-block:var(--cs-y)}
.gh-pj-feature::before{content:"";position:absolute;z-index:-1;left:-14%;top:-34%;width:clamp(420px,56vw,820px);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-pj-feature__grid{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
@media (min-width:900px){.gh-pj-feature__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.gh-pj-feature__media{position:relative;min-width:0;margin:0 0 18px 16px}
.gh-pj-feature__media::before{content:"";position:absolute;z-index:0;left:-16px;bottom:-18px;width:72%;height:72%;border-radius:var(--cs-card);background:rgba(243, 193, 12, .90)}
.gh-pj-feature__media img{position:relative;z-index:1;width:100%;aspect-ratio:var(--ar,3/2);object-fit:cover;border-radius:var(--cs-card);box-shadow:0 0 0 1px rgba(1,40,64,.08),0 22px 48px rgba(1,40,64,.18)}
.gh-pj-feature__body{display:grid;gap:clamp(14px,1.6vw,20px);justify-items:start;min-width:0}
.gh-pj-feature .gh-cs-chips .gh-cs-chip,.gh-pj-row .gh-cs-chips .gh-cs-chip{font-size:11px;min-height:26px;padding:3px 12px}
.gh-pj-feature .gh-cs-chips .gh-cs-chip--primary,.gh-pj-row .gh-cs-chips .gh-cs-chip--primary{background:var(--cs-navy);border-color:var(--cs-navy);--cs-fg:#fff}
.gh-cs .gh-pj-feature__title{font-weight:700;font-size:clamp(26px,3.2vw,40px);line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
.gh-pj-feature__title a{text-decoration:none;--cs-fg:var(--cs-navy);transition:color .2s ease}
.gh-pj-feature__title a:hover{--cs-fg:var(--cs-royal)}
.gh-pj-feature__meta{display:grid;gap:4px;font:500 15.5px/1.5 var(--cs-head);--cs-fg:var(--cs-ink)}
.gh-pj-feature__meta b{margin-right:6px;font:600 11.5px/1.2 var(--cs-head);letter-spacing:.14em;text-transform:uppercase;--cs-fg:var(--cs-royal)}
.gh-pj-feature__sum{max-width:56ch;font-size:clamp(16px,1.4vw,18px);line-height:1.7}
.gh-pj-feature__metric{display:grid;gap:6px;padding-top:16px;border-top:1px solid var(--cs-line);width:100%}
.gh-pj-feature__metric::before,.gh-pj-row__metric:not(:empty):not(.gh-pj-row__metric--pdf)::before{content:"";width:28px;height:3px;border-radius:3px;background:var(--cs-gold)}
.gh-pj-feature__num{font:700 clamp(40px,4.6vw,56px)/1 var(--cs-head);letter-spacing:-.02em;--cs-fg:var(--cs-navy)}
.gh-pj-feature__lab{font:600 15px/1.4 var(--cs-head);--cs-fg:var(--cs-ink)}
.gh-cs .gh-pj-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-navy);border:2px solid var(--cs-navy);font:600 15px/1.2 var(--cs-head);text-decoration:none;transition:background-color .25s ease,border-color .25s ease,transform .25s ease;--cs-fg:#fff}
.gh-cs .gh-pj-btn::after{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--cs-ico-arrow) center/contain no-repeat;mask:var(--cs-ico-arrow) center/contain no-repeat;transition:transform .25s ease}
.gh-cs .gh-pj-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}
.gh-cs .gh-pj-btn--pdf::after{display:none}
.gh-cs .gh-pj-btn:hover{background:var(--cs-royal);border-color:var(--cs-royal)}
.gh-cs .gh-pj-btn:hover::after{transform:translateX(3px)}

/* 3) Sector key + services strip: compact, secondary ------------------------------------------------ */
.gh-pj-lens{background:#fff;padding-block:clamp(28px,4vw,48px);border-bottom:1px solid var(--cs-line)}
.gh-pj-lens__grid{display:grid;gap:clamp(24px,3vw,40px)}
@media (min-width:900px){.gh-pj-lens__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(40px,5vw,72px)}.gh-pj-lens__col+.gh-pj-lens__col{padding-left:clamp(28px,4vw,56px);border-left:1px solid var(--cs-line)}}
.gh-cs .gh-pj-lens__title{--cs-h:var(--cs-royal);margin-bottom:14px;font:700 12px/1.3 var(--cs-head);letter-spacing:.16em;text-transform:uppercase}
.gh-pj-key,.gh-pj-svcs{display:flex;flex-wrap:wrap;gap:10px}
.gh-pj-key__link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 8px 6px 18px;border-radius:999px;border:1.5px solid var(--cs-navy);font:600 13.5px/1.2 var(--cs-head);text-decoration:none;--cs-fg:var(--cs-navy);transition:background-color .2s ease,color .2s ease}
.gh-pj-key__n{display:inline-grid;place-items:center;min-width:28px;height:28px;padding-inline:6px;border-radius:999px;background:var(--cs-navy);font:700 12.5px/1 var(--cs-head);--cs-fg:#fff}
.gh-pj-key__link:hover,.gh-pj-key__link.is-active{background:var(--cs-navy);--cs-fg:#fff}
.gh-pj-key__link:hover .gh-pj-key__n,.gh-pj-key__link.is-active .gh-pj-key__n{background:#fff;--cs-fg:var(--cs-navy)}
.gh-pj-svc{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;border-radius:999px;background:var(--cs-mist);font:600 13px/1.25 var(--cs-head);text-decoration:none;--cs-fg:var(--cs-navy);transition:background-color .2s ease,color .2s ease}
.gh-pj-svc::after{content:"";width:12px;height:12px;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}
.gh-pj-svc:hover{background:var(--cs-navy);--cs-fg:#fff}
.gh-pj-svc:hover::after{background:#fff;transform:translateX(2px)}
@media (pointer:coarse){.gh-pj-svc{min-height:44px}.gh-pj-proof__link{display:inline-flex;align-items:center;min-height:44px;padding-block:0}}

/* 4) Project index: ruled editorial rows ------------------------------------------------------------- */
.gh-pj-index{background:#fff;padding-block:var(--cs-y)}
.gh-pj-index__note{margin-top:-18px;margin-bottom:22px;font:600 14px/1.4 var(--cs-head)}
.gh-pj-index__note a{--cs-fg:var(--cs-royal);text-decoration-line:underline;text-decoration-color:var(--cs-gold);text-decoration-thickness:2px;text-underline-offset:3px}
.gh-pj-rows{border-bottom:1px solid var(--cs-line)}
.gh-pj-row{position:relative;display:grid;gap:14px 24px;padding:clamp(22px,2.6vw,32px) clamp(12px,1.6vw,20px);border-top:1px solid var(--cs-line);transition:background-color .25s ease;
  grid-template-columns:1fr auto 44px;grid-template-areas:"media media media" "main main main" "sum sum sum" "period metric go";align-items:start}
.gh-pj-row__media{grid-area:media;position:relative;min-width:0}
.gh-pj-row__media img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;box-shadow:0 0 0 1px rgba(1,40,64,.08),0 8px 22px rgba(1,40,64,.08)}
.gh-pj-row__media:empty{display:none}
.gh-pj-row__badge{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:999px;background:var(--cs-navy);font:700 11px/1.2 var(--cs-head);letter-spacing:.14em;--cs-fg:#fff}
.gh-pj-row__main{grid-area:main;display:grid;gap:10px;justify-items:start;min-width:0}
.gh-pj-row__kind{display:flex;align-items:center;gap:10px;font:600 11.5px/1.3 var(--cs-head);letter-spacing:.14em;text-transform:uppercase;--cs-fg:var(--cs-royal)}
.gh-pj-row__kind::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--cs-gold)}
.gh-cs .gh-pj-row__title{font-weight:600;font-size:clamp(19px,1.7vw,22px);line-height:1.3;text-wrap:balance}
.gh-pj-row__title a{text-decoration:none;--cs-fg:var(--cs-navy);transition:color .2s ease}
.gh-pj-row__title a::after{content:"";position:absolute;inset:0;z-index:1}
.gh-pj-row__client{font:500 14px/1.45 var(--cs-text);--cs-fg:var(--cs-body)}
.gh-pj-row__sum{grid-area:sum;font-size:15px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
.gh-pj-row__period{grid-area:period;font:600 13.5px/1.4 var(--cs-head);--cs-fg:var(--cs-ink)}
.gh-pj-row__period:empty{display:none}
.gh-pj-row__metric{grid-area:metric;display:grid;gap:6px;justify-items:start;min-width:0}
.gh-pj-row__num{font:700 clamp(26px,2.4vw,32px)/1 var(--cs-head);letter-spacing:-.02em;font-variant-numeric:tabular-nums;--cs-fg:var(--cs-navy)}
.gh-pj-row__lab{font:500 12.5px/1.4 var(--cs-text);--cs-fg:var(--cs-body)}
.gh-pj-row__metric--pdf{grid-auto-flow:column;align-items:center;gap:8px;font:600 14px/1.3 var(--cs-head);--cs-fg:var(--cs-royal)}
.gh-pj-row__doc{width:18px;height:18px;background:var(--cs-royal);-webkit-mask:var(--cs-ico-pdf) center/contain no-repeat;mask:var(--cs-ico-pdf) center/contain no-repeat}
.gh-pj-row__go{grid-area:go;justify-self:end;align-self:center;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--cs-navy);transition:background-color .25s ease,transform .25s ease}
.gh-pj-row__go::before{content:"";width:16px;height:16px;background:var(--cs-navy);-webkit-mask:var(--cs-ico-arrow) center/contain no-repeat;mask:var(--cs-ico-arrow) center/contain no-repeat;transition:background-color .25s ease}
.gh-pj-row--pdf{background:linear-gradient(90deg,var(--cs-mist),rgba(237,245,255,0) 75%)}
@media (hover:hover){.gh-pj-row:hover{background:var(--cs-mist)}.gh-pj-row:hover .gh-pj-row__title a{--cs-fg:var(--cs-royal)}.gh-pj-row:hover .gh-pj-row__go{background:var(--cs-navy);transform:translateX(4px)}.gh-pj-row:hover .gh-pj-row__go::before{background:#fff}}
.gh-pj-row:focus-within{background:var(--cs-mist)}
@supports selector(:has(*)){.gh-pj-row__title a:focus-visible{outline:none}.gh-pj-row:has(a:focus-visible){outline:3px solid var(--cs-royal);outline-offset:-3px;border-radius:6px}}
.gh-pj-row .gh-cs-chip{white-space:nowrap}
.gh-pj-row__sum:empty{display:none}
@media (min-width:640px) and (max-width:899px){.gh-pj-row{grid-template-columns:200px 1fr auto 44px;grid-template-areas:"media main main main" "media sum sum sum" "media period metric go";gap:14px 28px}.gh-pj-row__media img{aspect-ratio:4/3}}
@media (min-width:900px) and (max-width:1139px){.gh-pj-row{grid-template-columns:190px 1fr 1fr 44px;grid-template-areas:"media main main go" "media sum sum sum" "media period metric metric";gap:14px 28px}.gh-pj-row__media img{aspect-ratio:4/3}.gh-pj-row__go{align-self:start}}
/* Wide: thumbnail | title block | summary | date over metric | arrow. Period and metric share one column so the summary keeps room. */
@media (min-width:1140px){.gh-pj-row{grid-template-columns:200px minmax(0,1.15fr) minmax(0,1.35fr) 190px 44px;grid-template-areas:"media main sum period go" "media main sum metric go";gap:10px 36px;align-items:center}
  .gh-pj-row__media{align-self:center}.gh-pj-row__media img{aspect-ratio:4/3}
  .gh-pj-row__main,.gh-pj-row__sum{grid-row:1 / span 2;align-self:center}
  .gh-pj-row__period{align-self:end;padding-bottom:4px}.gh-pj-row__metric{align-self:start;padding-top:4px}
  .gh-pj-row__go{grid-row:1 / span 2}
  .gh-pj-row--pdf .gh-pj-row__metric{grid-row:1 / span 2;align-self:center;padding-top:0}}

/* Palette test: "pale" variant (preview only, ?gh_pj_palette=pale) ----------------------------------
   Same structure, existing GraceHola colours only: pale blue (--cs-mist) as the large-area colour, navy as the
   contrast surface, gold as the accent. Royal blue stays on small accents/focus. Nothing here is global. */
.gh-pj--pale .gh-pj-hero{--cs-h:var(--cs-navy);--cs-fg:var(--cs-body);background:var(--cs-mist);padding-block:clamp(64px,8.5vw,128px) clamp(72px,9vw,124px)}
.gh-pj--pale .gh-pj-hero .gh-cs-eyebrow{--cs-fg:var(--cs-royal)}
.gh-pj--pale .gh-pj-hero__intro{--cs-fg:var(--cs-ink)}
.gh-pj--pale .gh-pj-hero::before{left:-14%;bottom:-88%;width:clamp(560px,84vw,1240px);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-pj--pale .gh-pj-hero::after{right:-60px;top:-80px;width:clamp(240px,26vw,380px);border:1.5px solid rgba(1,40,64,.1);
  background:radial-gradient(circle closest-side,rgba(255,255,255,.5) 0 58%,rgba(243,193,12,.3) 58% calc(58% + 1.5px),rgba(255,255,255,.22) calc(58% + 1.5px) 100%)}
.gh-pj--pale .gh-pj-proof{--cs-h:#fff;--cs-fg:var(--cs-on-dark);overflow:hidden;isolation:isolate;background:var(--cs-navy);border:1px solid rgba(237,245,255,.22);padding:clamp(30px,3.6vw,42px) clamp(30px,3.6vw,44px) clamp(14px,1.8vw,20px);box-shadow:0 12px 28px rgba(1,40,64,.15),0 0 0 1px rgba(1,40,64,.05)}
.gh-pj--pale .gh-pj-proof::before{content:"";position:absolute;z-index:-1;right:-70px;top:-90px;width:240px;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(237,245,255,.16);background:radial-gradient(circle closest-side,rgba(237,245,255,.07) 0 60%,rgba(237,245,255,.2) 60% calc(60% + 1.5px),rgba(237,245,255,.03) calc(60% + 1.5px) 100%)}
.gh-pj--pale .gh-pj-proof__head{--cs-fg:var(--cs-on-dark-soft)}
/* hero -> featured: a clear white band between two pale areas, with the circles bridging it */
.gh-pj--pale .gh-pj-feature{background:linear-gradient(#fff,#fff) top/100% clamp(36px,5vw,64px) no-repeat,var(--cs-mist);padding-top:calc(var(--cs-y) + clamp(36px,5vw,64px) * .6)}
.gh-pj--pale .gh-pj-feature::before{top:-26%}
/* Work with us: pale blue, navy type and button */
.gh-pj--pale .gh-cs-cta{--cs-h:var(--cs-navy);--cs-fg:var(--cs-navy);background:var(--cs-mist)}
.gh-pj--pale .gh-cs-cta .gh-cs-eyebrow{--cs-fg:var(--cs-royal)}
.gh-pj--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-pj--pale .gh-cs-cta::after{border-color:rgba(243,193,12,.5)}
.gh-pj--pale .gh-cs-cta{padding-bottom:clamp(88px,10vw,136px)}
.gh-pj--pale .gh-cs-cta .gh-cs-btn{background:var(--cs-navy);border-color:var(--cs-navy);--cs-fg:#fff}
.gh-pj--pale .gh-cs-cta .gh-cs-btn:hover{background:#fff;border-color:var(--cs-navy);--cs-fg:var(--cs-navy)}
.gh-pj--pale .gh-cs-cta :is(a,button):focus-visible{outline-color:var(--cs-royal)}
.gh-pj--pale .gh-pj-hero :is(a,button):focus-visible{outline-color:var(--cs-royal)}
.gh-pj--pale .gh-pj-proof :is(a,button):focus-visible{outline-color:var(--cs-gold)}

/* Motion + accessibility ------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){.gh-pj-row,.gh-pj-row__go,.gh-cs .gh-pj-btn,.gh-pj-svc,.gh-pj-key__link{transition:none}.gh-pj-row:hover .gh-pj-row__go{transform:none}}
@media (forced-colors:active){.gh-pj-proof,.gh-pj-row__go,.gh-pj-key__link,.gh-pj-svc{border:1px solid CanvasText}}