/* C16 organic hero v1 (Claude, 16 Oct 2026): the paid opening's ten-stages animation beside the live organic hero copy.
   Andy, 16 Oct 16:59: "update the header for the standard organic landing page to feature this new animation as well".
   Scope: the live organic Playbook landing pages (/brand-building/ and /us/brand-building/, default hero only), whose
   opening carries data-c16-organic-hero="v1" (set by the public Worker). Paid R7 pages are untouched (:not(.r7-page)).
   The art itself is styled by c16-opening-v2.css; this file lays the organic hero out like the paid opening and repeats
   the art rules that c16-opening-v2.css scopes to paid pages. Copy, prices and CTAs are unchanged. */

/* ---------- Layout: copy left, art right, on the header grid (1000px and wider) ---------- */
.phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"]{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:44px;row-gap:0;align-items:start!important;justify-content:stretch!important;width:min(1180px,calc(100% - 48px))!important;max-width:none!important;margin-inline:auto!important;padding:28px 0 60px!important;min-height:0!important;height:auto!important;box-sizing:border-box}
.phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] > h1{grid-column:1;grid-row:2;align-self:end}
.phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] > .hero-value-line{grid-column:1;grid-row:3}
.phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] > .hero-cta-row{grid-column:1;grid-row:4}
.phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] > .pb8-hero-media{grid-column:2;grid-row:1 / -1;align-self:center;min-width:0;margin:0}
@media (min-width:1000px){
 .phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] > h1{font-size:clamp(50px,4.75vw,68px)!important;line-height:1!important;max-width:none!important;margin:0 0 26px!important}
 .phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] > .hero-cta-row{row-gap:22px}
}

/* ---------- The art (the rules c16-opening-v2.css scopes to paid pages) ---------- */
.phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] .pb8-hero-figure{position:relative;display:block;width:100%;margin:0!important}
.phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] .pb8-hero-art.pb8-hero-art--stages{position:relative;width:100%;max-width:100%;aspect-ratio:1.2;overflow:visible;background:none;border-radius:0;isolation:isolate;container-type:size;-webkit-tap-highlight-color:transparent}
.phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] .pbs-stage img{display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:center;border-radius:0;pointer-events:none;user-select:none;-webkit-user-drag:none}
.phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] .pbs-stage img.pbs-logo{width:auto;height:34px;object-fit:contain;mix-blend-mode:multiply}
.phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] .pbs-mh img.pbs-logo{height:31px}
.phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] .pbs-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0}

/* ---------- Tablet: copy, then the art underneath ---------- */
@media (max-width:999px){
 .phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"]{display:block!important;width:calc(100% - 48px)!important;padding:28px 0 44px!important}
 .phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] > .pb8-hero-media{max-width:720px;margin:34px auto 0!important}
 .phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] .pb8-hero-art.pb8-hero-art--stages{aspect-ratio:1.28}
}

/* ---------- Phone: the phone device and the product films ---------- */
@media (max-width:760px){
 .phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] > .pb8-hero-media{margin:36px 0 0!important}
 .phase3.story-revision:not(.r7-page) #opening[data-c16-organic-hero="v1"] .pb8-hero-art.pb8-hero-art--stages{aspect-ratio:.82}
}