/* R8: all content is exact source imagery; responsive composition owns only the opening. */
.phase3.story-revision.r7-page #opening.pb8-opening {
  box-sizing:border-box; display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center!important;
  gap:48px; width:100%; max-width:1480px!important; min-height:0!important;
  max-height:none!important; margin-inline:auto; padding:44px 48px!important;
}
.phase3.story-revision.r7-page #opening.pb8-opening > .pb8-opening-copy,
.phase3.story-revision.r7-page #opening.pb8-opening > .pb8-original-opening-copy,
.phase3.story-revision.r7-page #opening.pb8-opening > .pb8-hero-media {min-width:0; width:100%;}
.phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-context="organic"] h1 {max-width:12ch!important; width:100%; font-size:clamp(64px,6.1vw,88px)!important; line-height:1.02!important;}
.phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-context="organic"] .hero-cta-row {display:flex; flex-wrap:wrap; gap:18px 24px; align-items:center;}
.phase3.story-revision.r7-page #opening.pb8-opening .pb8-hero-figure {display:block; width:100%; max-width:none; margin:0!important;}
.phase3.story-revision.r7-page #opening.pb8-opening .pb8-hero-art {position:relative; isolation:isolate; width:100%; aspect-ratio:1.22; overflow:hidden; background:#e7e8ea; border-radius:7px;}
.phase3.story-revision.r7-page #opening.pb8-opening .pb8-hero-art img {display:block; width:100%; height:100%; max-width:none; aspect-ratio:auto; object-fit:contain; object-position:center; border-radius:0;}
.phase3.story-revision.r7-page #opening.pb8-opening .pb8-hero-art picture {display:block; width:100%; height:100%;}
.pb8-hero-art .pb8-output-page {position:absolute; overflow:hidden; background:#fff; border:1px solid rgba(20,21,26,.09); border-radius:2px; box-shadow:0 18px 38px -22px rgba(20,21,26,.45),0 2px 8px rgba(20,21,26,.05);}
.pb8-workspace-device {position:absolute; width:108%; aspect-ratio:1600 / 1195; left:-4%; top:-1%;}
.pb8-device-plate {position:absolute; inset:0; mask-image:linear-gradient(to bottom,#000 90%,transparent 100%);}
/* Verified blank screen of 2336×1744 plate: x370,y298–1966,1249. */
.pb8-device-screen {position:absolute; left:15.8390%; top:17.0872%; width:68.3219%; height:54.5298%; overflow:hidden; background:#e7e8ea;}
.pb8-workspace-output {z-index:2; width:42%; aspect-ratio:1.6; right:3%; bottom:4%; transform:rotate(2deg);}
.phase3.story-revision.r7-page #opening.pb8-opening .pb8-hero-art--gallery {background:linear-gradient(142deg,#f4f4f5 0%,#e7e8ea 47%,#d6d8dc 100%);}
.phase3.story-revision.r7-page #opening.pb8-opening .pb8-hero-art img.pb8-gallery-wordmark {position:absolute; width:47%; height:auto; top:6%; left:6%; mix-blend-mode:multiply;}
.pb8-gallery-strategy {width:43%; aspect-ratio:1600 / 2262; left:5%; top:24%; transform:rotate(-1.7deg);}
.pb8-gallery-identity {width:43%; aspect-ratio:1.6; right:4%; top:24%; transform:rotate(1.7deg);}
.pb8-gallery-packaging {width:43%; aspect-ratio:1.6; right:4%; bottom:5%; transform:rotate(-1deg);}
.phase3.story-revision.r7-page #opening.pb8-opening .pb8-hero-art--system {background:radial-gradient(ellipse at 78% 18%,#f7f7f8 0%,#e7e8ea 48%,#d5d8dc 100%);}
.pb8-system-reading {position:absolute; width:72%; aspect-ratio:1280 / 763; left:4%; top:8%; overflow:hidden; border:5px solid #272a30; border-radius:9px; box-shadow:0 22px 38px -24px rgba(20,21,26,.45);}
.pb8-system-proposition {z-index:2; width:25%; aspect-ratio:9 / 16; right:3%; top:23%; transform:rotate(2deg);}
.pb8-system-identity {z-index:3; width:53%; aspect-ratio:1.6; left:11%; bottom:8%; transform:rotate(-2deg);}
.pb8-system-path {position:absolute; width:39%; height:29%; top:44%; right:18%; border-right:1px solid rgba(20,21,26,.27); border-bottom:1px solid rgba(20,21,26,.27); border-radius:0 0 18px 0;}
.pb8-system-path::after {content:""; position:absolute; left:-3px; bottom:-3px; width:5px; height:5px; border-radius:50%; background:#686d76;}
@media (max-width:999px) {
  .phase3.story-revision.r7-page #opening.pb8-opening {display:block!important; padding:32px 24px 44px!important;}
  .phase3.story-revision.r7-page #opening.pb8-opening > .pb8-hero-media {max-width:760px; margin:28px auto 0;}
  .phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-context="organic"] h1 {font-size:clamp(52px,7vw,68px)!important;}
  .phase3.story-revision.r7-page #opening.pb8-opening .pb8-hero-art {aspect-ratio:1.5;}
  .pb8-workspace-device {width:84%; left:-1%; top:-12%;}
  .pb8-workspace-output {width:40%; bottom:5%;}
  .pb8-gallery-strategy {width:34%; top:23%; left:10%;}
  .pb8-gallery-identity,.pb8-gallery-packaging {width:38%; right:10%;}
  .pb8-gallery-identity {top:22%;}
  .pb8-gallery-packaging {bottom:7%;}
  .pb8-system-reading {width:66%; top:7%;}
  .pb8-system-proposition {width:21%; top:13%; right:6%;}
  .pb8-system-identity {width:46%; left:16%; bottom:6%;}
}
@media (max-width:760px) {
  .phase3.story-revision.r7-page #opening.pb8-opening {padding:24px 24px 36px!important;}
  .phase3.story-revision.r7-page #opening.pb8-opening > .pb8-hero-media {margin-top:24px;}
  .phase3.story-revision.r7-page #opening.pb8-opening[data-r8-hero-context="organic"] h1 {max-width:14ch!important; font-size:clamp(44px,11.6vw,52px)!important; line-height:1.04!important;}
  .phase3.story-revision.r7-page #opening.pb8-opening .pb8-hero-art {aspect-ratio:.95;}
  .pb8-workspace-device {width:83%; left:4%; top:4%; aspect-ratio:390 / 420; border:5px solid #272a30; border-radius:12px; overflow:hidden; box-shadow:0 20px 34px -22px rgba(20,21,26,.5);}
  .phase3.story-revision.r7-page #opening.pb8-opening .pb8-device-plate {display:none;}
  .pb8-device-screen {inset:0; width:100%; height:100%;}
  .pb8-workspace-output {width:43%; right:3%; bottom:5%; transform:rotate(2deg);}
  .phase3.story-revision.r7-page #opening.pb8-opening .pb8-hero-art img.pb8-gallery-wordmark {width:55%; top:6%; left:7%;}
  .pb8-gallery-strategy {width:46%; left:4%; top:26%;}
  .pb8-gallery-identity {width:44%; right:4%; top:26%;}
  .pb8-gallery-packaging {width:44%; right:4%; bottom:13%;}
  .pb8-system-reading {width:70%; aspect-ratio:390 / 420; left:4%; top:5%; border-width:4px; border-radius:11px;}
  .pb8-system-proposition {width:24%; right:3%; top:27%;}
  .pb8-system-identity {width:56%; left:8%; bottom:5%;}
  .pb8-system-path {width:30%; right:22%; top:46%; height:28%;}
}
@media (prefers-reduced-motion:reduce) {
  .pb8-hero-art,.pb8-hero-art * {animation:none!important; transition:none!important;}
}