/* ─────────────────────────────────────────────────────────────────────────────
   One page header for every page that still wore the theme's stock one (lane PH-2,
   2026-11-04): /contact, /about, /pricing, /watch, /portfolio, /faq and its pages,
   /blog and its categories, the legal pages; plus the case-study and blog-post
   headers. Written by react-app/scripts/page-headers.mjs. The product pages
   (/scope3d, /clickpad, /handyman) keep their own (product-header.css).

   The stock purple/red/blue swirl photo is gone. In its place:
     · a ground: near-black in dark, near-white in light, a measured blueprint grid
       (fine every 24 px, major every 120 px) fading out to the right, and a soft
       green glow from the foot; the grid drifts slowly unless reduced motion;
     · where the page has a film of its own (.bo-pgh--pic; PH-2b: a playing film, started past
       its title card, never on phones), it sits on the
       right and fades into the ground, so the words never sit on imagery;
     · an eyebrow (the section), the title with balanced wrapping, a muted
       subtitle, breadcrumbs as a pill.
   ───────────────────────────────────────────────────────────────────────────── */
.bo-pgh,.bo-pgh-panel{
  --pgh-ground:#0B0D0C;--pgh-ink:#fff;--pgh-sub:rgba(255,255,255,.72);--pgh-crumb:rgba(255,255,255,.62);
  --pgh-line:rgba(255,255,255,.055);--pgh-major:rgba(255,255,255,.09);--pgh-edge:rgba(255,255,255,.08);
  --pgh-green:#00ff85;--pgh-glow:rgba(0,255,133,.16);--pgh-pill:rgba(255,255,255,.05)}
html[data-color-scheme="light"] .bo-pgh,html[data-color-scheme="light"] .bo-pgh-panel{
  --pgh-ground:#F7F8F6;--pgh-ink:#111318;--pgh-sub:#4A4D55;--pgh-crumb:#5E616B;
  --pgh-line:rgba(17,19,24,.05);--pgh-major:rgba(17,19,24,.085);--pgh-edge:rgba(17,19,24,.09);
  --pgh-green:#00994f;--pgh-glow:rgba(0,170,90,.13);--pgh-pill:rgba(255,255,255,.75)}

/* the ground, shared by the page header box and the case-study / post panels */
.page-header.bo-pgh .page-header__inner,.bo-pgh-panel{position:relative;isolation:isolate;
  background:
    radial-gradient(60% 90% at 12% 120%,var(--pgh-glow),transparent 70%),
    radial-gradient(40% 60% at 92% -20%,var(--pgh-glow),transparent 70%),
    var(--pgh-ground);
  border:1px solid var(--pgh-edge);border-radius:var(--jkd-br-lg,24px);overflow:hidden}
.page-header.bo-pgh .page-header__inner:before,.bo-pgh-panel:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--pgh-major) 1px,transparent 1px),linear-gradient(90deg,var(--pgh-major) 1px,transparent 1px),
    linear-gradient(var(--pgh-line) 1px,transparent 1px),linear-gradient(90deg,var(--pgh-line) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(120% 140% at 0% 100%,#000 25%,transparent 78%);mask-image:radial-gradient(120% 140% at 0% 100%,#000 25%,transparent 78%);
  animation:bo-pgh-drift 60s linear infinite}
@keyframes bo-pgh-drift{to{background-position:119px -121px,119px -121px,23px -25px,23px -25px}}
@media (prefers-reduced-motion:reduce){.page-header.bo-pgh .page-header__inner:before,.bo-pgh-panel:before{animation:none}}
.bo-pgh-panel>*{position:relative;z-index:1}

/* the page header box: tighter than the theme's 500 px banner, sized by its words */
.page-header.bo-pgh,.page-header.bo-pgh:not(.no-bg){height:auto!important;min-height:0;margin-top:calc(15px + var(--jkd-admin-bar-height,0px))}
.page-header.bo-pgh .page-header__inner{height:auto!important;min-height:clamp(320px,27vw,400px);align-items:flex-end;
  padding-top:calc(var(--jkd-nav-height,80px) + 28px)}
.page-header.bo-pgh .page-header__inner:after{display:none!important}
.page-header.bo-pgh .page-header__content{position:relative;z-index:3;gap:0;padding-bottom:clamp(30px,3.4vw,48px)!important}
.page-header.bo-pgh .bottom-line{display:none}

/* type */
.bo-pgh__eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-family:var(--jkd-font-family);
  font-size:13px;font-weight:600;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--pgh-green)}
.bo-pgh__eyebrow:before{content:"";width:18px;height:1px;background:currentColor}
.page-header.bo-pgh .page-header__title{margin:0;color:var(--pgh-ink)!important;font-weight:600;
  font-size:clamp(40px,4.4vw,64px);line-height:1.04;letter-spacing:-.025em;text-wrap:balance;max-width:16ch}
.page-header.bo-pgh .page-header__subtitle{margin:14px 0 0;color:var(--pgh-sub)!important;opacity:1!important;
  font-size:clamp(17px,1.35vw,20px);line-height:1.4;text-wrap:pretty;max-width:46ch}
.page-header.bo-pgh .jkd-breadcrumbs,.bo-pgh-panel .jkd-breadcrumbs,.bo-pgh-panel .project-back a{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;width:auto;margin-top:22px;padding:6px 14px;
  border:1px solid var(--pgh-edge);border-radius:999px;background:var(--pgh-pill);
  font-size:13px;line-height:1.3;color:var(--pgh-crumb)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.page-header.bo-pgh .jkd-breadcrumbs a,.bo-pgh-panel .jkd-breadcrumbs a{color:var(--pgh-crumb)!important;text-decoration:none}
.page-header.bo-pgh .jkd-breadcrumbs a:hover,.bo-pgh-panel .jkd-breadcrumbs a:hover{color:var(--pgh-ink)!important}
.page-header.bo-pgh .jkd-breadcrumbs>span:last-child,.page-header.bo-pgh .jkd-breadcrumbs .breadcrumb_last,
.bo-pgh-panel .jkd-breadcrumbs .breadcrumb_last{color:var(--pgh-ink)!important}
.page-header.bo-pgh .jkd-breadcrumbs .bc-sep,.bo-pgh-panel .jkd-breadcrumbs .bc-sep{display:inline-flex;opacity:.6;font-size:11px}

/* a real picture of the page's own, on the right, fading into the ground */
.page-header.bo-pgh .page-header__img{z-index:1;left:auto;right:0;width:min(62%,900px);background:none}
.bo-pgh__film,.bo-pgh__film.bo-film{position:absolute;inset:0;margin:0;border:0;border-radius:0;aspect-ratio:auto;overflow:hidden}
.bo-pgh__film>video,.bo-pgh__film>.bo-film__poster,.bo-pgh__film img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;display:block;transform:none!important}
.bo-pgh .bo-pgh__pic,.bo-pgh__film{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;object-position:var(--pgh-pos,center);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 22%,#000 55%),linear-gradient(180deg,transparent 0,#000 34%,#000 72%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 22%,#000 55%),linear-gradient(180deg,transparent 0,#000 34%,#000 72%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
html:not([data-color-scheme="light"]) .bo-pgh .bo-pgh__pic,html:not([data-color-scheme="light"]) .bo-pgh__film{filter:brightness(.72) saturate(.95)}
.page-header.bo-pgh--pic .page-header__title{max-width:min(16ch,48vw)}
.page-header.bo-pgh--pic .page-header__subtitle{max-width:min(46ch,44vw)}

/* tablets: the picture steps back further, the words keep the left */
@media (max-width:1024px){
  .page-header.bo-pgh .page-header__img{width:56%}
  .bo-pgh .bo-pgh__pic,.bo-pgh__film{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 35%,#000 75%),linear-gradient(180deg,transparent 0,#000 34%,#000 66%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 35%,#000 75%),linear-gradient(180deg,transparent 0,#000 34%,#000 66%,transparent 100%)}
}
/* phones: compact, ground only; the picture would sit under the words */
@media (max-width:600px){
  .page-header.bo-pgh .page-header__inner{min-height:250px;padding-top:calc(var(--jkd-nav-height,70px) + 44px)}
  .page-header.bo-pgh .page-header__content{padding:0 20px 26px!important}
  .page-header.bo-pgh .page-header__img{display:none}
  .page-header.bo-pgh .page-header__title,.page-header.bo-pgh--pic .page-header__title{font-size:clamp(34px,10vw,42px);max-width:none}
  .page-header.bo-pgh .page-header__subtitle,.page-header.bo-pgh--pic .page-header__subtitle{font-size:16px;max-width:none}
  .page-header.bo-pgh .jkd-breadcrumbs{margin-top:16px;font-size:12.5px}
  .bo-pgh__eyebrow{font-size:12px;margin-bottom:10px}
}

/* case studies and blog posts: their own header, set on the same ground as a panel */
.bo-pgh-panel{padding:clamp(24px,3.6vw,48px)}
.single-project .project-details.bo-pgh-panel{margin-top:10px}
.bo-pgh-panel .project-back{display:block;margin:0 0 22px}
.bo-pgh-panel .project-back a{margin-top:0;text-transform:none;letter-spacing:0}
.bo-pgh-panel .project-back .icon-wrp{display:inline-flex;margin-right:4px}
.bo-pgh-panel .project-title h1,.bo-pgh-panel .entry-title{color:var(--pgh-ink);text-wrap:balance;letter-spacing:-.02em}
.bo-pgh-panel .project-subtitle{color:var(--pgh-sub);text-wrap:pretty}
.post-details .entry-header.bo-pgh-panel{max-width:var(--jkd-container-md);margin-top:10px}
.post-details .entry-header.bo-pgh-panel .jkd-breadcrumbs{margin:0 0 34px}
.bo-pgh-panel .bo-pgh__eyebrow{margin:6px 0 2px}
@media (max-width:576px){
  .bo-pgh-panel{padding:22px 18px;border-radius:18px}
  .post-details .entry-header.bo-pgh-panel .jkd-breadcrumbs{margin-bottom:14px;padding-bottom:6px}
}

/* a case study's brand film (PH-2b), on the panel's right, faded like the page header's;
   the words move to the left half. Phones: none (the panel stays compact). */
.bo-pgh-panel--film{align-items:flex-start!important;text-align:left;min-height:clamp(300px,26vw,380px);justify-content:flex-end!important}
.bo-pgh-panel--film>.bo-pgh__film{position:absolute;z-index:0;left:auto;right:0;width:min(56%,760px)!important}
.bo-pgh-panel--film .project-details-grid{align-items:flex-start;max-width:min(520px,43%)}
.bo-pgh-panel--film .project-details-grid .project-title,.bo-pgh-panel--film .project-details-grid .project-subtitle{text-align:left;max-width:100%}
@media (max-width:1024px){.bo-pgh-panel--film .project-details-grid{max-width:52%}}
@media (max-width:600px){
  .bo-pgh-panel--film>.bo-pgh__film{display:none}
  .bo-pgh-panel--film{min-height:0}
  .bo-pgh-panel--film .project-details-grid{max-width:100%}
}