/*
 * NNG + Promise dimensional experience layer
 * Exact brand palettes and type systems:
 * NNG: Quicksand + Nunito / #F6F2EA #C49A2C #7E96EB #C48AE8 #6A396A #1A124A
 * Promise: Baloo 2 + Nunito / #3FA7D6 #59CD90 #FAC05E #EE6352 #F79D84
 */

:root {
  --grand-ease: cubic-bezier(.2,.78,.2,1);
  --grand-shadow: 0 34px 90px rgba(8, 10, 38, .22);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

.grand-skip {
  position: fixed;
  z-index: 100000;
  left: 16px;
  top: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  color: #1A124A;
  font: 800 13px/1 Nunito, sans-serif;
  transform: translateY(-150%);
  transition: transform .2s;
}
.grand-skip:focus { transform: none; }

.grand-tilt {
  --rx: 0deg;
  --ry: 0deg;
  --tz: 0px;
  --lift: 0px;
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,var(--lift),var(--tz));
  transform-style: preserve-3d;
  transition: transform .24s var(--grand-ease), box-shadow .24s ease, border-color .24s ease;
  will-change: transform;
}
.grand-tilt > * { transform-style: preserve-3d; }
.grand-tilt.is-hovering { --lift: -8px; }

.grand-depth-rail {
  position: fixed;
  z-index: 8900;
  left: 18px;
  top: 50%;
  width: 42px;
  transform: translateY(-50%);
  pointer-events: none;
}
.grand-depth-track {
  position: relative;
  width: 4px;
  height: min(44vh, 380px);
  margin: auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.grand-depth-fill {
  position: absolute;
  inset: 0 0 auto;
  height: var(--grand-progress, 0%);
  border-radius: inherit;
  background: linear-gradient(180deg,#FAC05E,#EE6352,#59CD90,#3FA7D6);
  box-shadow: 0 0 24px rgba(250,192,94,.46);
}
.grand-depth-dot {
  position: absolute;
  left: 50%;
  top: var(--grand-progress, 0%);
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #EE6352;
  box-shadow: 0 5px 16px rgba(0,0,0,.22);
  transform: translate(-50%,-50%);
}
.grand-depth-label {
  position: absolute;
  left: 50%;
  top: -34px;
  width: max-content;
  color: #fff;
  font: 900 8px/1 Nunito,sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  transform: translateX(-50%) rotate(-90deg) translateX(-100%);
  transform-origin: left center;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* -------------------------------------------------------------------------- */
/* PROMISE PEDIATRIC NEUROSURGERY — THE UNDERWATER JOURNEY                    */
/* -------------------------------------------------------------------------- */

.ppn,
.ps {
  --ppn-blue: #3FA7D6;
  --ppn-green: #59CD90;
  --ppn-yellow: #FAC05E;
  --ppn-coral: #EE6352;
  --ppn-peach: #F79D84;
  --ppn-depth: color-mix(in srgb, #3FA7D6 52%, #000);
}

.ppn { isolation: isolate; }
.ppn > main,
.ppn > section { position: relative; z-index: 3; }

.ppn-ocean-atmosphere {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1100px;
  opacity: .92;
}
.ppn-ocean-atmosphere::before {
  content: "";
  position: absolute;
  inset: -12% -10% 42%;
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,.19) 0 2px, transparent 2px 64px),
    radial-gradient(circle at 50% -20%, rgba(250,192,94,.48), transparent 56%);
  transform: perspective(600px) rotateX(55deg) translateZ(-80px);
  transform-origin: top;
  animation: ppnLightSweep 15s ease-in-out infinite alternate;
}
.ppn-ocean-atmosphere::after {
  content: "";
  position: absolute;
  inset: 54% -15% -20%;
  background: radial-gradient(ellipse at 50% 0, rgba(63,167,214,.18), transparent 67%);
}

.grand-bubble {
  --bubble-color: #3FA7D6;
  position: absolute;
  left: var(--x);
  bottom: -14vh;
  width: var(--size);
  height: var(--size);
  border: max(1px,calc(var(--size) * .035)) solid rgba(255,255,255,.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 25%,rgba(255,255,255,.95) 0 7%,transparent 8%),
    radial-gradient(circle at 65% 72%,color-mix(in srgb,var(--bubble-color) 42%,transparent),transparent 62%);
  box-shadow:
    inset -8px -10px 20px color-mix(in srgb,var(--bubble-color) 23%,transparent),
    0 16px 35px rgba(10,70,100,.12);
  opacity: var(--opacity);
  transform: translate3d(0,0,var(--z)) scale(var(--scale,1));
  animation: ppnBubbleRise var(--duration) linear var(--delay) infinite;
  pointer-events: none;
}
.grand-bubble.is-playable {
  z-index: 8;
  pointer-events: auto;
  cursor: pointer;
}
.grand-bubble.is-playable:hover {
  box-shadow: inset -8px -10px 20px color-mix(in srgb,var(--bubble-color) 35%,transparent),0 16px 38px rgba(238,99,82,.22);
}
.grand-bubble.is-popped {
  animation: ppnBubblePop .42s var(--grand-ease) forwards !important;
}
@keyframes ppnBubbleRise {
  0% { transform: translate3d(0,12vh,var(--z)) scale(var(--scale,1)); }
  35% { transform: translate3d(28px,-36vh,var(--z)) scale(var(--scale,1)); }
  70% { transform: translate3d(-18px,-82vh,var(--z)) scale(var(--scale,1)); }
  100% { transform: translate3d(9px,-128vh,var(--z)) scale(var(--scale,1)); }
}
@keyframes ppnBubblePop {
  50% { opacity: 1; transform: scale(1.32) translateZ(var(--z)); }
  100% { opacity: 0; transform: scale(.1) translateZ(var(--z)); }
}
@keyframes ppnLightSweep {
  to { transform: perspective(600px) rotateX(58deg) translate3d(6%,-2%,40px); opacity: .58; }
}

.ppn .grand-depth-rail .grand-depth-track {
  background: rgba(255,255,255,.34);
  box-shadow: 0 12px 35px rgba(23,75,106,.14),inset 0 0 0 1px rgba(255,255,255,.38);
}

.ppn-hero {
  min-height: 100svh !important;
  perspective: 1800px;
  transform-style: preserve-3d;
  background: var(--ppn-blue) !important;
}
.ppn-hero::after {
  background:
    radial-gradient(circle at 82% 12%,rgba(250,192,94,.46),transparent 24%),
    radial-gradient(circle at 78% 76%,rgba(89,205,144,.34),transparent 28%),
    linear-gradient(92deg,rgba(0,35,55,.88),rgba(0,35,55,.56) 53%,rgba(0,35,55,.08)) !important;
}
.ppn-hero-grid {
  transform-style: preserve-3d;
  perspective: 1700px;
}
.ppn-hero-grid > :first-child { transform: translateZ(72px); }
.ppn-hero-side {
  transform: rotateY(-7deg) rotateX(1.5deg) translateZ(34px);
  transform-style: preserve-3d;
  perspective: 1300px;
}
.ppn-hero-side > * {
  transform-style: preserve-3d;
  border: 1px solid rgba(255,255,255,.42) !important;
  box-shadow: 0 28px 64px rgba(5,42,61,.24),inset 0 1px rgba(255,255,255,.35) !important;
}
.ppn-hero-side > :nth-child(1) { transform: translate3d(-18px,0,72px) rotateY(3deg); }
.ppn-hero-side > :nth-child(2) { transform: translate3d(20px,-2px,18px) rotateY(-3deg); }
.ppn-hero-side > :nth-child(3) { transform: translate3d(-5px,-4px,42px) rotateY(2deg); }
.ppn-hero-side video { filter: saturate(1.08) contrast(1.03); }
.ppn-hero-side img,
.iris-guide img,
.ppn-map-iris,
.ppn-world-iris { filter: none !important; }
.ppn-title { max-width: 830px; font-size: clamp(39px,5vw,61px) !important; }
.ppn-h2 { font-size: clamp(32px,3.8vw,48px) !important; }

.ppn-world-map,
.ppn-section,
.ppn-tour,
.ppn-northstar,
.ppn-adventure {
  isolation: isolate;
}
.ppn-world-map::before,
.ppn-section::before,
.ppn-tour::before,
.ppn-northstar::before,
.ppn-adventure::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -7%;
  right: -7%;
  top: -72px;
  height: 145px;
  border-radius: 50%;
  background: inherit;
  pointer-events: none;
}
.ppn-world-map { background: linear-gradient(180deg,#fff 0%,color-mix(in srgb,#3FA7D6 16%,#fff) 100%) !important; }
.ppn-section.mist { background: linear-gradient(180deg,color-mix(in srgb,#3FA7D6 13%,#fff),color-mix(in srgb,#59CD90 12%,#fff)) !important; }
.ppn-tour {
  background:
    radial-gradient(circle at 12% 28%,rgba(250,192,94,.25),transparent 23%),
    radial-gradient(circle at 88% 70%,rgba(89,205,144,.28),transparent 25%),
    linear-gradient(180deg,color-mix(in srgb,#3FA7D6 84%,#000),color-mix(in srgb,#3FA7D6 62%,#000)) !important;
}
.ppn-northstar { background: linear-gradient(145deg,#59CD90,#3FA7D6) !important; }
.ppn-adventure { background: linear-gradient(180deg,color-mix(in srgb,#3FA7D6 65%,#000),color-mix(in srgb,#3FA7D6 45%,#000)) !important; }
.ppn-section#services {
  background:
    radial-gradient(circle at 10% 12%,rgba(250,192,94,.23),transparent 22%),
    radial-gradient(circle at 90% 60%,rgba(247,157,132,.24),transparent 25%),
    linear-gradient(180deg,color-mix(in srgb,#3FA7D6 50%,#000),color-mix(in srgb,#3FA7D6 35%,#000)) !important;
  color: #fff;
}
.ppn-section#services .ppn-kicker { color: var(--ppn-yellow) !important; }
.ppn-section#services .ppn-services-head p { color: rgba(255,255,255,.78); }
.ppn-section#services .ppn-filter { border-color: rgba(255,255,255,.25); color:#fff; background:rgba(255,255,255,.08); }
.ppn-section#services .ppn-filter.is-active { background:var(--ppn-yellow); color:color-mix(in srgb,#3FA7D6 46%,#000); }
.ppn-section#services .ppn-service-controls span { color:rgba(255,255,255,.66); }

.ppn-map-stage,
.ppn-tour-theater,
.ppn-tour-grid,
.ppn-adventure-grid,
.ppn-provider-grid,
.ppn-promise,
.ppn-test,
.ppn-visit,
.ps-cinema-grid,
.ps-story {
  perspective: 1500px;
  transform-style: preserve-3d;
}
.ppn-map-stage {
  box-shadow: 0 44px 110px rgba(23,75,106,.18),inset 0 1px rgba(255,255,255,.85) !important;
  transform: perspective(1500px) rotateX(2.2deg);
}
.ppn-map-stop { transform-style: preserve-3d; }
.ppn-map-stop > * { transform: translateZ(24px); }
.ppn-map-stop:hover { transform: translateY(-10px) translateZ(30px) rotateX(-2deg) !important; }
.ppn-map-iris { transform: translateZ(90px); }

.ppn-tour-theater { transform: perspective(1700px) rotateX(1.6deg); }
.ppn-tour-window {
  transform-style: preserve-3d;
  box-shadow: 0 42px 96px rgba(4,37,55,.32),inset 0 1px rgba(255,255,255,.25) !important;
}
.ppn-tour-window.main { transform: translateZ(32px) rotateY(1.2deg); }
.ppn-tour-window.detail { transform: translate3d(8px,10px,-18px) rotateY(-2deg); }
.ppn-tour-window.view { transform: translate3d(-6px,-5px,14px) rotateY(2deg); }
.ppn-tour-caption { transform: translateZ(68px); }
.ppn-tour-card { transform: perspective(1100px) rotateY(-5deg) translateZ(20px); }

.ppn-adventure-stage { transform: perspective(1500px) rotateY(2.5deg) translateZ(24px); }
.ppn-adventure-photo { transform: perspective(1100px) rotateY(-4deg) translateZ(18px); }
.ppn-adventure-note { transform: perspective(1100px) rotateY(3deg) translateZ(40px); }
.ppn-pillar { transform-style: preserve-3d; }
.ppn-pillar:hover,
.ppn-pillar.is-active { transform: perspective(900px) translateY(-8px) rotateX(-3deg); }

.ppn-promise article,
.ppn-test button,
.ppn-provider,
.ppn-service,
.ppn-faq,
.ppn-step-tab,
.ps-service,
.ps-step,
.ps-person,
.ps-cinema-window,
.ps-story-main,
.ps-story-side { transform-style: preserve-3d; }
.ppn-promise article > *,
.ppn-test button > *,
.ppn-provider-body > *,
.ppn-service-text,
.ps-service > *,
.ps-step > * { transform: translateZ(18px); }
.ppn-provider { box-shadow: 0 38px 95px rgba(23,75,106,.15) !important; }
.ppn-provider:first-child { transform: perspective(1300px) rotateY(2.5deg); }
.ppn-provider:last-child { transform: perspective(1300px) rotateY(-2.5deg) translateY(26px); }

.ppn-grid {
  perspective: 1700px;
  perspective-origin: 50% 40%;
  padding-top: 34px !important;
  padding-bottom: 65px !important;
}
.ppn-service {
  border-color: rgba(255,255,255,.9) !important;
  box-shadow: 0 34px 84px rgba(3,34,50,.38) !important;
  transform-origin: center bottom;
}
.ppn-service:nth-child(3n+1) { transform: rotateY(4deg) translateZ(8px); }
.ppn-service:nth-child(3n+2) { transform: translateY(-13px) translateZ(30px); }
.ppn-service:nth-child(3n) { transform: rotateY(-4deg) translateZ(8px); }
.ppn-service:hover { transform: translateY(-22px) translateZ(60px) rotateX(-2deg) !important; }
.ppn-service video { transform: scale(1.04); transition: transform .7s var(--grand-ease),filter .7s ease; }
.ppn-service:hover video { transform: scale(1.11); filter: saturate(1.12); }

.iris-guide {
  filter: none !important;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.iris-launch-avatar {
  box-shadow: 0 22px 48px rgba(23,75,106,.22),inset 0 1px rgba(255,255,255,.8);
  transform: translateZ(34px);
}
.iris-launch-avatar img { filter: none !important; }
.iris-panel { box-shadow: 0 45px 120px rgba(8,55,78,.34) !important; }
.iris-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 42px;
  transform: translateZ(-28px);
}
.iris-3d-status {
  margin: 10px 2px 0;
  color: #6B8798;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
}

/* Promise service pages receive the same dimensional system. */
.ps { position: relative; }
.ps-hero-grid { transform-style:preserve-3d; }
.ps-hero-grid > :first-child { transform: translateZ(60px); }
.ps-visit-card { transform: perspective(1100px) rotateY(-5deg) translateZ(26px); }
.ps-cinema-window.main { transform: translateZ(26px) rotateY(1.5deg); }
.ps-cinema-window:nth-child(2) { transform: translateY(10px) rotateY(-3deg); }
.ps-cinema-window:nth-child(3) { transform: translateX(10px) rotateY(3deg); }
.ps-concern:hover,
.ps-record:hover,
.ps-step:hover,
.ps-person:hover { transform: perspective(1000px) translateY(-9px) rotateX(-2deg); }

/* -------------------------------------------------------------------------- */
/* NATIONAL NEUROSURGERY GROUP — CINEMATIC COMPASS DEPTH                      */
/* -------------------------------------------------------------------------- */

.nng,
.as {
  --nng-ivory: #F6F2EA;
  --nng-gold: #C49A2C;
  --nng-blue: #7E96EB;
  --nng-lilac: #C48AE8;
  --nng-plum: #6A396A;
  --nng-navy: #1A124A;
}

.nng { position: relative; }
.nng-hero {
  min-height: 100svh !important;
  perspective: 1900px;
  transform-style: preserve-3d;
}
.nng-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  right: -8vw;
  top: 8vh;
  width: min(54vw,720px);
  aspect-ratio: 1;
  border: 1px solid rgba(196,154,44,.38);
  border-radius: 50%;
  box-shadow:
    0 0 0 54px rgba(196,138,232,.06),
    0 0 0 112px rgba(126,150,235,.045),
    0 0 0 170px rgba(196,154,44,.025);
  transform: perspective(900px) rotateX(69deg) rotateZ(var(--nng-orbit,0deg));
  animation: nngGrandOrbit 34s linear infinite;
  pointer-events: none;
}
@keyframes nngGrandOrbit { to { transform: perspective(900px) rotateX(69deg) rotateZ(360deg); } }
.nng-hero .nng-wrap { transform: translateZ(62px); }
.nng-hero-compass {
  transform: translateZ(110px) rotate(var(--nng-compass-angle,0deg));
  transform-style: preserve-3d;
}
.nng-title { max-width: 900px; font-size: clamp(38px,5vw,61px) !important; }
.nng-h2 { font-size: clamp(31px,3.6vw,46px) !important; }
.nng-brand,
.as-brand {
  position: relative;
  width: min(310px,42vw);
  height: 70px;
  overflow: hidden;
  display: block !important;
}
.nng-brand img,
.as-brand img {
  position: absolute;
  top: -50px;
  left: 28px;
  width: 250px !important;
  max-width: none !important;
  height: auto !important;
  object-fit: initial !important;
  object-position: initial !important;
  transform: none !important;
}
.nng-hero-copy { transform-style: preserve-3d; }
.nng-hero-copy > * { transform: translateZ(18px); }
.nng-actions { transform: translateZ(38px) !important; }

.nng-compass-rail {
  position: fixed;
  z-index: 8800;
  left: 17px;
  top: 50%;
  width: 54px;
  transform: translateY(-50%);
  pointer-events: none;
}
.nng-compass-rail img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  opacity: .88;
  transform: rotate(var(--nng-page-angle,0deg));
  transition: transform .18s linear;
}
.nng-compass-rail span {
  display: block;
  width: 2px;
  height: min(34vh,260px);
  margin: 9px auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(196,154,44,.2);
}
.nng-compass-rail span::after {
  content: "";
  display: block;
  width: 100%;
  height: var(--nng-progress,0%);
  background: linear-gradient(#C49A2C,#C48AE8,#7E96EB);
}
.nng-compass-rail small {
  display: block;
  color: #C49A2C;
  font: 700 7px/1.25 Quicksand,sans-serif;
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
}

.nng-promise-stage,
.nng-journey-stage,
.nng-visit-copy,
.nng-person,
.nng-service,
.nng-media-card,
.nng-surgery-shot,
.nng-step,
.nng-group,
.nng-faq,
.as-summary,
.as-card,
.as-record,
.as-cinema-window,
.as-person,
.as-step { transform-style: preserve-3d; }
.nng-promise-stage { transform: perspective(1400px) rotateY(-4deg) translateZ(26px); }
.nng-promise-stage > * { transform: translateZ(22px); }
.nng-journey-stage { transform: perspective(1500px) rotateY(3deg) translateZ(28px); }
.nng-visit-copy { transform: perspective(1200px) rotateY(3deg); }

.nng-service-track,
.nng-surgery-stage,
.nng-media-grid,
.nng-team,
.nng-groups,
.nng-steps,
.as-cinema-grid,
.as-story,
.as-team { perspective: 1700px; transform-style: preserve-3d; }
.nng-service:nth-child(3n+1) { transform: rotateY(4deg) translateZ(6px); }
.nng-service:nth-child(3n+2) { transform: translateY(-12px) translateZ(30px); }
.nng-service:nth-child(3n) { transform: rotateY(-4deg) translateZ(6px); }
.nng-service:hover { transform: translateY(-20px) translateZ(56px) rotateX(-2deg) !important; }
.nng-service-copy { transform: translateZ(30px); }

.nng-media-card:nth-child(2n+1) { transform: rotateY(2.2deg) translateZ(12px); }
.nng-media-card:nth-child(2n) { transform: rotateY(-2.2deg) translateZ(24px); }
.nng-media-card:hover { transform: translateY(-12px) translateZ(52px) rotateX(-2deg) !important; }

.nng-surgery-stage { transform: perspective(1900px) rotateX(1.4deg); }
.nng-surgery-shot { cursor: zoom-in; }
.nng-surgery-shot.hero { transform: translateZ(18px); }
.nng-surgery-shot.portrait { transform: translate3d(0,-8px,40px) rotateY(-2deg); }
.nng-surgery-shot.team { transform: translate3d(10px,0,64px) rotateY(2deg); }
.nng-surgery-shot.prep { transform: rotateY(2deg) translateZ(18px); }
.nng-surgery-shot.detail { transform: translateY(8px) translateZ(38px); }
.nng-surgery-shot.focus { transform: rotateY(-2deg) translateZ(18px); }
.nng-surgery-shot figcaption { transform: translateZ(34px); }
.nng-surgery-shot:hover { transform: translateY(-10px) translateZ(72px) !important; }

.nng-person:first-child { transform: perspective(1300px) rotateY(2.5deg); }
.nng-person:last-child { transform: perspective(1300px) rotateY(-2.5deg) translateY(24px); }
.nng-person:hover { transform: perspective(1300px) translateY(-8px) translateZ(36px) !important; }
.nng-person-copy > * { transform: translateZ(18px); }
.nng-step:hover,
.nng-group:hover,
.nng-faq:hover { transform: perspective(1000px) translateY(-8px) rotateX(-2deg); }

.nng-lightbox {
  position: fixed;
  z-index: 99999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4vw;
  border: 0;
  background: rgba(26,18,74,.92);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.nng-lightbox.is-open { opacity: 1; pointer-events: auto; }
.nng-lightbox figure { margin:0; width:min(1100px,92vw); transform: perspective(1300px) rotateX(1deg); }
.nng-lightbox img { display:block; width:100%; max-height:78vh; object-fit:contain; border-radius:28px; box-shadow:0 42px 120px rgba(0,0,0,.5); }
.nng-lightbox figcaption { margin-top:14px; color:#fff; font:700 14px/1.5 Nunito,sans-serif; text-align:center; }
.nng-lightbox button { position:absolute; top:18px; right:18px; width:48px; height:48px; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(255,255,255,.1); color:#fff; font-size:28px; cursor:pointer; }

/* NNG service pages share the same dimensional polish. */
.as { position: relative; }
.as-hero-grid { transform-style: preserve-3d; }
.as-hero-grid > :first-child { transform: translateZ(60px); }
.as-summary { transform: perspective(1100px) rotateY(-5deg) translateZ(28px); }
.as-cinema-window.main { transform: translateZ(30px) rotateY(1.5deg); }
.as-cinema-window:nth-child(2) { transform: translateY(10px) rotateY(-3deg); }
.as-cinema-window:nth-child(3) { transform: translateX(10px) rotateY(3deg); }
.as-card:hover,
.as-record:hover,
.as-step:hover,
.as-person:hover { transform: perspective(1000px) translateY(-9px) rotateX(-2deg); }

@media (max-width: 1080px) {
  .grand-depth-rail,
  .nng-compass-rail { display: none; }
  .ppn-hero-side,
  .ppn-provider:first-child,
  .ppn-provider:last-child,
  .nng-person:first-child,
  .nng-person:last-child,
  .nng-promise-stage,
  .nng-journey-stage,
  .nng-visit-copy { transform: none; }
}

@media (max-width: 720px) {
  .ppn-title,
  .nng-title { font-size: clamp(36px,11vw,50px) !important; }
  .ppn-h2,
  .nng-h2 { font-size: clamp(30px,9vw,42px) !important; }
  .ppn-hero-side > :nth-child(n),
  .ppn-tour-window.main,
  .ppn-tour-window.detail,
  .ppn-tour-window.view,
  .ppn-adventure-stage,
  .ppn-adventure-photo,
  .ppn-adventure-note,
  .nng-surgery-shot.hero,
  .nng-surgery-shot.portrait,
  .nng-surgery-shot.team,
  .nng-surgery-shot.prep,
  .nng-surgery-shot.detail,
  .nng-surgery-shot.focus { transform: none; }
  .grand-bubble:nth-child(n+25) { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .grand-bubble,
  .ppn-ocean-atmosphere::before,
  .nng-hero::before { animation:none !important; }
  .grand-tilt,
  .grand-tilt.is-hovering,
  .ppn-service,
  .nng-service,
  .nng-surgery-shot { transform:none !important; transition:none !important; }
}

/* ─────────────────────────────────────────────────────────────
   Dr. Stacey visual Q&A theaters
   ───────────────────────────────────────────────────────────── */
.video-qa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(88px, 10vw, 148px) 0;
}

.video-qa-wrap {
  position: relative;
  z-index: 3;
}

.video-qa-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .7fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 68px);
}

.video-qa-head .nng-h2,
.video-qa-head .ppn-h2 {
  max-width: 760px;
  margin: 10px 0 0;
  font-size: clamp(38px, 5.2vw, 70px) !important;
  line-height: .98 !important;
}

.video-qa-head > p {
  max-width: 620px;
  margin: 0;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.72;
}

.video-qa-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(300px, .72fr);
  gap: clamp(20px, 3.4vw, 52px);
  align-items: stretch;
  position: relative;
  perspective: 1500px;
  transform-style: preserve-3d;
}

.video-qa-stage {
  position: relative;
  min-width: 0;
  border-radius: clamp(25px, 3vw, 46px);
  transform: rotateY(1.8deg) translateZ(22px);
  transform-origin: right center;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease;
}

.video-qa-stage::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: inherit;
  filter: blur(18px);
  opacity: .6;
}

.video-qa-shell:hover .video-qa-stage {
  transform: rotateY(0) translateZ(42px);
}

.video-qa-stage video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: inherit;
  background: #080B25;
}

.video-qa-stage.is-changing {
  animation: videoQaChange .52s cubic-bezier(.2,.8,.2,1);
}

@keyframes videoQaChange {
  0% { transform: rotateY(1.8deg) translateZ(22px) scale(1); filter: brightness(1); }
  45% { transform: rotateY(-2deg) translateZ(52px) scale(.985); filter: brightness(1.18); }
  100% { transform: rotateY(1.8deg) translateZ(22px) scale(1); filter: brightness(1); }
}

.video-qa-badge {
  position: absolute;
  z-index: 4;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(10, 13, 42, .78);
  color: white;
  font: 800 11px/1.2 Nunito, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.video-qa-answer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: clamp(28px, 4vw, 54px);
  border-radius: clamp(25px, 3vw, 46px);
  transform: rotateY(-2deg) translateZ(8px);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}

.video-qa-shell:hover .video-qa-answer {
  transform: rotateY(0) translateZ(25px);
}

.video-qa-answer > small {
  margin-bottom: 13px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.video-qa-answer h3 {
  margin: 0;
  font-size: clamp(25px, 3vw, 42px);
  line-height: 1.08;
}

.video-qa-answer > p:not(.video-qa-status) {
  margin: 22px 0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.72;
}

.video-qa-answer > a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  margin-top: 4px;
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

.video-qa-answer > a span {
  transition: transform .25s ease;
}

.video-qa-answer > a:hover span {
  transform: translate(3px, -3px);
}

.video-qa-status {
  margin: 30px 0 0;
  font-size: 12px;
  font-weight: 800;
  opacity: .76;
}

.video-qa-question-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(32px, 5vw, 64px);
  perspective: 1200px;
}

.video-qa-question {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 11px;
  align-items: center;
  min-height: 92px;
  padding: 17px 18px;
  border: 0;
  border-radius: 18px;
  text-align: left;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background .28s ease, border-color .28s ease;
}

.video-qa-question:hover,
.video-qa-question:focus-visible {
  transform: translateY(-7px) rotateX(3deg) translateZ(22px);
}

.video-qa-question:focus-visible {
  outline: 4px solid white;
  outline-offset: 3px;
}

.video-qa-question span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 950;
}

.video-qa-question b {
  font-size: 14px;
  line-height: 1.3;
}

.video-qa-question em {
  grid-column: 2;
  margin-top: -6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .68;
}

.video-qa-disclaimer {
  max-width: 980px;
  margin: 30px auto 0;
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
}

/* NNG: structured jewel-tone screening room */
.nng-video-qa {
  color: #F6F2EA;
  background:
    radial-gradient(circle at 14% 10%, rgba(196,138,232,.23), transparent 31%),
    radial-gradient(circle at 89% 82%, rgba(196,154,44,.2), transparent 32%),
    linear-gradient(145deg, #110B38 0%, #1A124A 48%, #271448 100%);
}

.nng-video-qa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .25;
  background-image:
    linear-gradient(rgba(126,150,235,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,150,235,.09) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(700px) rotateX(58deg) scale(1.45) translateY(28%);
  transform-origin: bottom;
}

.nng-video-qa .nng-kicker { color: #C49A2C; }
.nng-video-qa .nng-h2 { color: #F6F2EA; }
.nng-video-qa .video-qa-head > p { color: rgba(246,242,234,.78); }

.video-qa-orbits {
  position: absolute;
  width: min(54vw, 800px);
  aspect-ratio: 1;
  left: -22vw;
  top: 9%;
  z-index: 0;
  transform: rotateX(68deg) rotateZ(-14deg);
}

.video-qa-orbits i {
  position: absolute;
  inset: calc(var(--ring, 0) * 13%);
  border: 1px solid rgba(196,154,44,.34);
  border-radius: 50%;
  box-shadow: inset 0 0 30px rgba(196,138,232,.08);
  animation: nngQaOrbit 16s linear infinite;
}

.video-qa-orbits i:nth-child(2) { --ring: 1; animation-direction: reverse; animation-duration: 23s; }
.video-qa-orbits i:nth-child(3) { --ring: 2; animation-duration: 11s; }

.video-qa-orbits i::after {
  content: "";
  position: absolute;
  top: 6%;
  left: 47%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #C49A2C;
  box-shadow: 0 0 25px #C49A2C;
}

@keyframes nngQaOrbit { to { transform: rotate(360deg); } }

.nng-video-qa .video-qa-stage {
  border: 2px solid rgba(196,154,44,.82);
  box-shadow: 0 46px 90px rgba(3,1,20,.48), 0 0 0 9px rgba(196,138,232,.09);
}

.nng-video-qa .video-qa-stage::before {
  background: linear-gradient(120deg, #C49A2C, #6A396A, #7E96EB);
}

.nng-video-qa .video-qa-answer {
  color: #F6F2EA;
  background: linear-gradient(145deg, rgba(106,57,106,.74), rgba(26,18,74,.88));
  border: 1px solid rgba(196,138,232,.42);
  box-shadow: 0 35px 80px rgba(3,1,20,.36), inset 0 1px rgba(255,255,255,.15);
  backdrop-filter: blur(22px);
}

.nng-video-qa .video-qa-answer > small,
.nng-video-qa .video-qa-answer > a { color: #E0B843; }
.nng-video-qa .video-qa-answer > p:not(.video-qa-status) { color: rgba(246,242,234,.8); }

.video-qa-depth-mark {
  position: absolute;
  right: -23px;
  bottom: -28px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #6A396A 0 23%, #1A124A 24% 48%, #C49A2C 49% 57%, #1A124A 58%);
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  transform: rotate(-12deg) translateZ(60px);
}

.video-qa-depth-mark span {
  color: #F6F2EA;
  font: 800 18px/1 Quicksand, sans-serif;
}

.video-qa-depth-mark i {
  position: absolute;
  width: 3px;
  height: 29px;
  top: 6px;
  background: #F6F2EA;
  clip-path: polygon(50% 0,100% 30%,68% 30%,68% 100%,32% 100%,32% 30%,0 30%);
}

.nng-video-qa .video-qa-question {
  color: #F6F2EA;
  background: linear-gradient(145deg, rgba(106,57,106,.56), rgba(26,18,74,.92));
  border: 1px solid rgba(126,150,235,.28);
  box-shadow: 0 18px 34px rgba(5,2,28,.25);
}

.nng-video-qa .video-qa-question span {
  color: #1A124A;
  background: #C49A2C;
}

.nng-video-qa .video-qa-question:hover,
.nng-video-qa .video-qa-question.is-active {
  color: #1A124A;
  background: #F6F2EA;
  border-color: #C49A2C;
  box-shadow: 0 24px 50px rgba(3,1,20,.38), 0 0 0 4px rgba(196,154,44,.2);
}

.nng-video-qa .video-qa-question.is-active span {
  color: #F6F2EA;
  background: #6A396A;
}

.nng-video-qa .video-qa-disclaimer { color: rgba(246,242,234,.66); }

/* Promise: an undersea Question Cove */
.ppn-video-qa {
  color: #123F5B;
  background:
    radial-gradient(circle at 12% 10%, rgba(250,192,94,.86), transparent 16%),
    radial-gradient(circle at 89% 16%, rgba(247,157,132,.72), transparent 17%),
    linear-gradient(180deg, #DDF8FF 0%, #84DDEB 22%, #3FA7D6 57%, #237AA8 100%);
}

.ppn-video-qa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .28;
  background:
    repeating-radial-gradient(ellipse at 50% -5%, transparent 0 41px, rgba(255,255,255,.52) 42px 44px, transparent 45px 83px);
  animation: ppnQaRays 11s ease-in-out infinite alternate;
}

.ppn-video-qa::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -5%;
  right: -5%;
  bottom: -54px;
  height: 150px;
  background:
    radial-gradient(ellipse at 9% 100%, #59CD90 0 25%, transparent 26%),
    radial-gradient(ellipse at 22% 100%, #FAC05E 0 22%, transparent 23%),
    radial-gradient(ellipse at 74% 100%, #EE6352 0 19%, transparent 20%),
    radial-gradient(ellipse at 93% 100%, #59CD90 0 28%, transparent 29%);
  filter: saturate(.92);
}

@keyframes ppnQaRays {
  to { transform: translateY(18px) scale(1.03); opacity: .4; }
}

.ppn-video-qa .ppn-kicker {
  display: inline-flex;
  color: #123F5B;
  background: #FAC05E;
  padding: 8px 14px;
  border-radius: 999px;
}

.ppn-video-qa .ppn-h2 { color: white; text-shadow: 0 4px 22px rgba(12,78,113,.25); }
.ppn-video-qa .video-qa-head > p { color: rgba(8,59,88,.9); font-weight: 700; }

.ppn-video-qa .video-qa-stage {
  border: 7px solid white;
  box-shadow: 0 40px 80px rgba(10,75,112,.28), 0 0 0 9px rgba(250,192,94,.4);
}

.ppn-video-qa .video-qa-stage::before {
  background: linear-gradient(120deg, #FAC05E, #EE6352, #59CD90);
}

.ppn-video-qa .video-qa-answer {
  color: #174B66;
  background: rgba(255,255,255,.9);
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: 0 30px 60px rgba(17,87,123,.24), inset 0 2px rgba(255,255,255,.9);
  backdrop-filter: blur(20px);
}

.ppn-video-qa .video-qa-answer > small,
.ppn-video-qa .video-qa-answer > a { color: #D64C42; }

.ppn-video-qa .video-qa-answer h3 {
  color: #17668D;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
}

.ppn-video-qa .video-qa-answer > p:not(.video-qa-status) { color: #315E73; }

.ppn-qa-iris {
  position: absolute;
  z-index: 6;
  right: -49px;
  bottom: -58px;
  width: clamp(102px, 11vw, 160px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 18px 20px rgba(20,92,125,.28));
  transform-origin: 50% 18%;
  animation: ppnQaIris 4.2s ease-in-out infinite;
}

@keyframes ppnQaIris {
  0%,100% { transform: translateY(0) rotate(-4deg) translateZ(50px); }
  50% { transform: translateY(-17px) rotate(4deg) translateZ(72px); }
}

.ppn-qa-kelp {
  position: absolute;
  z-index: 2;
  bottom: -34px;
  width: 28px;
  height: 105px;
  border-radius: 70% 20% 60% 25%;
  background: #59CD90;
  transform-origin: bottom;
  animation: ppnQaKelp 4s ease-in-out infinite alternate;
  pointer-events: none;
}

.ppn-qa-kelp.one { left: 4%; transform: rotate(-12deg); }
.ppn-qa-kelp.two { left: 10%; height: 78px; background: #FAC05E; animation-delay: -1.8s; }
@keyframes ppnQaKelp { to { transform: rotate(10deg) skewX(5deg); } }

.ppn-question-reef {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ppn-video-qa .video-qa-question {
  color: #164E69;
  background: rgba(255,255,255,.86);
  border: 2px solid white;
  box-shadow: 0 17px 34px rgba(12,89,127,.2);
}

.ppn-video-qa .video-qa-question:nth-child(5n+1) span { background: #FAC05E; }
.ppn-video-qa .video-qa-question:nth-child(5n+2) span { background: #59CD90; }
.ppn-video-qa .video-qa-question:nth-child(5n+3) span { background: #F79D84; }
.ppn-video-qa .video-qa-question:nth-child(5n+4) span { color: white; background: #EE6352; }
.ppn-video-qa .video-qa-question:nth-child(5n+5) span { color: white; background: #3FA7D6; }

.ppn-video-qa .video-qa-question:hover,
.ppn-video-qa .video-qa-question.is-active {
  color: white;
  background: #176E98;
  border-color: #FAC05E;
  box-shadow: 0 25px 48px rgba(12,89,127,.3), 0 0 0 5px rgba(250,192,94,.35);
}

.ppn-video-qa .video-qa-question.is-active span {
  color: #174B66;
  background: #FAC05E;
}

.ppn-video-qa .video-qa-disclaimer { color: rgba(8,59,88,.82); font-weight: 700; }

.ppn-qa-bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ppn-qa-bubbles i {
  position: absolute;
  bottom: -80px;
  width: var(--s);
  height: var(--s);
  left: var(--x);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.72);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.8), rgba(255,255,255,.08) 42%, rgba(89,205,144,.15));
  box-shadow: inset 0 0 16px rgba(255,255,255,.46);
  animation: ppnQaBubble var(--d) linear infinite;
  animation-delay: var(--delay);
}

.ppn-qa-bubbles i:nth-child(1) { --s:44px;--x:5%;--d:10s;--delay:-2s; }
.ppn-qa-bubbles i:nth-child(2) { --s:22px;--x:18%;--d:13s;--delay:-8s; }
.ppn-qa-bubbles i:nth-child(3) { --s:68px;--x:48%;--d:16s;--delay:-5s; }
.ppn-qa-bubbles i:nth-child(4) { --s:32px;--x:65%;--d:11s;--delay:-9s; }
.ppn-qa-bubbles i:nth-child(5) { --s:82px;--x:84%;--d:18s;--delay:-4s; }
.ppn-qa-bubbles i:nth-child(6) { --s:18px;--x:94%;--d:9s;--delay:-1s; }

@keyframes ppnQaBubble {
  from { transform: translateY(0) translateX(0) scale(.7); opacity: 0; }
  12% { opacity: .75; }
  55% { transform: translateY(-55vh) translateX(22px) scale(1); }
  to { transform: translateY(-112vh) translateX(-15px) scale(1.12); opacity: 0; }
}

@media (max-width: 1080px) {
  .video-qa-head,
  .video-qa-shell { grid-template-columns: 1fr; }
  .video-qa-head { align-items: start; gap: 22px; }
  .video-qa-answer { min-height: auto; transform: translateZ(8px); }
  .video-qa-stage { transform: translateZ(22px); }
  .video-qa-question-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .video-qa { padding: 76px 0 90px; }
  .video-qa-head .nng-h2,
  .video-qa-head .ppn-h2 { font-size: clamp(34px, 11vw, 47px) !important; }
  .video-qa-stage { border-radius: 24px; }
  .video-qa-badge {
    top: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
    font-size: 9px;
  }
  .video-qa-answer { padding: 27px 23px; border-radius: 24px; }
  .video-qa-question-list { grid-template-columns: 1fr; gap: 10px; }
  .video-qa-question { min-height: 72px; }
  .ppn-qa-iris { right: -20px; bottom: -45px; width: 100px; }
  .video-qa-depth-mark { right: -7px; bottom: -32px; transform: scale(.76) rotate(-12deg); }
  .nng-brand,
  .as-brand { width: min(230px, 58vw); height: 58px; }
  .nng-brand img,
  .as-brand img { top: -40px; left: 15px; width: 200px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .video-qa-orbits i,
  .ppn-video-qa::before,
  .ppn-qa-iris,
  .ppn-qa-kelp,
  .ppn-qa-bubbles i { animation: none !important; }
  .video-qa-stage.is-changing { animation: none !important; }
  .video-qa-stage,
  .video-qa-answer,
  .video-qa-question,
  .video-qa-shell:hover .video-qa-stage,
  .video-qa-shell:hover .video-qa-answer { transform: none !important; transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   Promise ocean world — continuous depth, play, and movement
   ───────────────────────────────────────────────────────────── */
.ppn-ocean-atmosphere {
  --ocean-depth: 0;
  --ocean-x: 0px;
  --ocean-y: 0px;
  z-index: 36;
  opacity: 1;
  transform: translate3d(var(--ocean-x),var(--ocean-y),0);
  transition: transform .8s var(--grand-ease);
}

.ppn-ocean-atmosphere::after {
  inset: 0;
  background:
    linear-gradient(180deg,transparent 0 24%,rgba(63,167,214,.03) 42%,rgba(19,98,137,.16) 100%),
    radial-gradient(ellipse at 50% 104%,rgba(89,205,144,.2),transparent 58%);
  opacity: calc(.12 + (var(--ocean-depth) * .52));
  transition: opacity .25s linear;
}

.ppn-ocean-ray {
  position: absolute;
  z-index: -1;
  top: -16vh;
  left: var(--ray-x);
  width: var(--ray-width);
  height: 112vh;
  border-radius: 0 0 62% 62%;
  background: linear-gradient(180deg,rgba(255,255,255,.28),rgba(250,192,94,.08) 43%,transparent 84%);
  filter: blur(2px);
  opacity: var(--ray-opacity);
  transform: skewX(var(--ray-skew)) rotate(var(--ray-rotate));
  transform-origin: top;
  animation: ppnOceanRay 12s ease-in-out var(--ray-delay) infinite alternate;
}

@keyframes ppnOceanRay {
  to { translate: 7vw 2vh; rotate: 3deg; opacity: .12; }
}

.ppn-ocean-current {
  position: absolute;
  z-index: -1;
  left: -26vw;
  top: var(--current-y);
  width: 152vw;
  height: var(--current-height);
  border: 2px solid rgba(255,255,255,var(--current-opacity));
  border-color: rgba(255,255,255,var(--current-opacity)) transparent transparent;
  border-radius: 50%;
  filter: drop-shadow(0 10px 17px rgba(63,167,214,.16));
  transform: translate3d(calc(var(--ocean-depth) * -8vw),0,var(--current-z)) rotate(var(--current-rotate));
  animation: ppnOceanCurrent var(--current-duration) ease-in-out var(--current-delay) infinite alternate;
}

.ppn-ocean-current::after {
  content: "";
  position: absolute;
  inset: 17px 3% auto;
  height: 100%;
  border: inherit;
  border-radius: inherit;
  opacity: .55;
}

@keyframes ppnOceanCurrent {
  to { translate: 8vw 18px; scale: 1.04 .92; }
}

.ppn-ocean-fish {
  --fish-color: #FAC05E;
  position: absolute;
  z-index: 2;
  left: -100px;
  top: var(--fish-y);
  width: var(--fish-size);
  height: calc(var(--fish-size) * .52);
  border-radius: 62% 48% 52% 62%;
  background: linear-gradient(135deg,color-mix(in srgb,var(--fish-color) 78%,white),var(--fish-color));
  box-shadow: inset -10px -7px 14px rgba(23,75,106,.13),0 12px 22px rgba(23,75,106,.13);
  opacity: var(--fish-opacity);
  animation: ppnFishSwim var(--fish-duration) linear var(--fish-delay) infinite;
  transform-style: preserve-3d;
}

.ppn-ocean-fish::before {
  content: "";
  position: absolute;
  right: 14%;
  top: 23%;
  width: 7px;
  height: 7px;
  border: 2px solid white;
  border-radius: 50%;
  background: #17668D;
}

.ppn-ocean-fish::after {
  content: "";
  position: absolute;
  left: -31%;
  top: 5%;
  width: 39%;
  height: 90%;
  background: color-mix(in srgb,var(--fish-color) 82%,white);
  clip-path: polygon(100% 50%,0 0,17% 50%,0 100%);
  transform-origin: right center;
  animation: ppnFishTail .44s ease-in-out infinite alternate;
}

@keyframes ppnFishTail { to { transform: rotateY(38deg); } }
@keyframes ppnFishSwim {
  0% { translate: -15vw 0; transform: rotateY(0) translateZ(var(--fish-z)); }
  32% { translate: 38vw -24px; }
  66% { translate: 88vw 17px; }
  100% { translate: 132vw -9px; transform: rotateY(8deg) translateZ(var(--fish-z)); }
}

.ppn .grand-bubble,
.ps .grand-bubble {
  z-index: 4;
  box-shadow:
    inset -8px -10px 20px color-mix(in srgb,var(--bubble-color) 29%,transparent),
    inset 5px 5px 12px rgba(255,255,255,.26),
    0 15px 35px rgba(10,70,100,.15);
  backdrop-filter: blur(1px);
}

.ppn .grand-bubble:nth-of-type(7n),
.ps .grand-bubble:nth-of-type(7n) {
  border-width: 3px;
  filter: saturate(1.25);
}

.ppn main > section,
.ps main > section,
.ps > section {
  isolation: isolate;
  overflow: clip;
}

.ppn main > section > .ppn-wrap,
.ps main > section > .ps-wrap,
.ps > section > .ps-wrap {
  position: relative;
  z-index: 3;
}

.ppn-reef-zone {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ppn-reef-kelp {
  --kelp: #59CD90;
  position: absolute;
  left: var(--kelp-x);
  bottom: -24px;
  width: var(--kelp-width);
  height: var(--kelp-height);
  border-radius: 90% 15% 82% 20%;
  background: linear-gradient(90deg,color-mix(in srgb,var(--kelp) 78%,#17668D),var(--kelp));
  box-shadow: calc(var(--kelp-width) * .75) 12px 0 color-mix(in srgb,var(--kelp) 72%,white);
  opacity: .52;
  transform: rotate(var(--kelp-rotate));
  transform-origin: bottom center;
  animation: ppnKelpSway var(--kelp-duration) ease-in-out var(--kelp-delay) infinite alternate;
}

@keyframes ppnKelpSway {
  to { transform: rotate(calc(var(--kelp-rotate) + 14deg)) skewX(5deg) translateX(8px); }
}

.ppn-reef-coral {
  position: absolute;
  right: var(--coral-x);
  bottom: -22px;
  width: var(--coral-size);
  height: calc(var(--coral-size) * .76);
  opacity: .5;
  background:
    radial-gradient(circle at 22% 36%,#FAC05E 0 13%,transparent 14%),
    radial-gradient(circle at 48% 19%,#F79D84 0 13%,transparent 14%),
    radial-gradient(circle at 74% 36%,#EE6352 0 13%,transparent 14%),
    radial-gradient(ellipse at 50% 100%,#EE6352 0 45%,transparent 46%);
  filter: drop-shadow(0 14px 18px rgba(23,75,106,.16));
  animation: ppnCoralBreathe 5.8s ease-in-out var(--coral-delay) infinite alternate;
}

@keyframes ppnCoralBreathe { to { transform: scale(1.07) rotate(2deg); } }

.ppn-reef-bubble {
  position: absolute;
  left: var(--reef-x);
  bottom: -30px;
  width: var(--reef-size);
  height: var(--reef-size);
  border: 2px solid rgba(255,255,255,.56);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%,rgba(255,255,255,.8),transparent 16%);
  opacity: .55;
  animation: ppnReefBubble var(--reef-duration) linear var(--reef-delay) infinite;
}

@keyframes ppnReefBubble {
  0% { translate: 0 20px; scale: .6; opacity: 0; }
  13% { opacity: .56; }
  55% { translate: 22px -55vh; scale: 1; }
  100% { translate: -12px -105vh; scale: 1.14; opacity: 0; }
}

.ppn main > section:not(.ppn-hero)::after,
.ps main > section:not(.ps-hero)::after,
.ps > section:not(.ps-hero)::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -6%;
  right: -6%;
  bottom: -46px;
  height: 88px;
  border-radius: 50%;
  background: color-mix(in srgb,#3FA7D6 10%,transparent);
  box-shadow: 0 -16px 55px rgba(63,167,214,.09);
  pointer-events: none;
}

.ppn-world-map,
.ppn-section.mist,
.ps-section.mist {
  background:
    radial-gradient(circle at 12% 18%,rgba(250,192,94,.28),transparent 22%),
    radial-gradient(circle at 88% 72%,rgba(247,157,132,.26),transparent 24%),
    linear-gradient(180deg,#F8FDFF,color-mix(in srgb,#3FA7D6 18%,white)) !important;
}

.ppn-adventure,
.ps-world {
  background:
    radial-gradient(circle at 10% 16%,rgba(250,192,94,.32),transparent 21%),
    radial-gradient(circle at 89% 82%,rgba(238,99,82,.25),transparent 24%),
    linear-gradient(180deg,color-mix(in srgb,#3FA7D6 22%,white),color-mix(in srgb,#59CD90 18%,white)) !important;
}

.ps-section.deep {
  background:
    radial-gradient(circle at 12% 15%,rgba(250,192,94,.22),transparent 24%),
    radial-gradient(circle at 90% 72%,rgba(247,157,132,.2),transparent 27%),
    linear-gradient(155deg,#17668D,color-mix(in srgb,#3FA7D6 56%,#123F5B)) !important;
}

.ppn-service,
.ps-concern,
.ps-record,
.ps-step,
.ppn-map-stop {
  backface-visibility: hidden;
}

.ppn-service::after,
.ps-concern::after,
.ps-record::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg,transparent 22%,rgba(255,255,255,.26) 46%,transparent 68%);
  translate: -130% 0;
  transition: translate .75s var(--grand-ease);
  pointer-events: none;
}

.ppn-service:hover::after,
.ps-concern:hover::after,
.ps-record:hover::after { translate: 130% 0; }

.iris-launch-avatar {
  position: relative;
  animation: ppnIrisSwim 3.8s ease-in-out infinite;
}

.iris-launch-avatar::before,
.iris-launch-avatar::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  border: 2px solid rgba(63,167,214,.38);
  animation: ppnIrisRipple 2.8s ease-out infinite;
}

.iris-launch-avatar::before { inset: -8px; }
.iris-launch-avatar::after { inset: -18px; animation-delay: -1.4s; }

@keyframes ppnIrisSwim {
  0%,100% { transform: translateY(0) rotate(-3deg) translateZ(34px); }
  50% { transform: translateY(-10px) rotate(4deg) translateZ(54px); }
}

@keyframes ppnIrisRipple {
  0% { opacity: .62; scale: .72; }
  100% { opacity: 0; scale: 1.32; }
}

.video-qa-badge { display: none !important; }
.video-qa-head .nng-h2,
.video-qa-head .ppn-h2 {
  font-size: clamp(32px,4vw,48px) !important;
  line-height: 1.02 !important;
}

/* ─────────────────────────────────────────────────────────────
   NNG motion field — jewel-tone depth without pediatric motifs
   ───────────────────────────────────────────────────────────── */
.nng-motion-field {
  --nng-field-x: 0px;
  --nng-field-y: 0px;
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1500px;
  transform: translate3d(var(--nng-field-x),var(--nng-field-y),0);
  transition: transform 1s var(--grand-ease);
}

.nng-motion-beam {
  position: absolute;
  left: var(--beam-x);
  top: -20vh;
  width: var(--beam-width);
  height: 140vh;
  background: linear-gradient(180deg,rgba(196,154,44,.1),rgba(196,138,232,.05) 44%,transparent 85%);
  filter: blur(12px);
  opacity: var(--beam-opacity);
  transform: rotate(var(--beam-rotate)) translateZ(var(--beam-z));
  animation: nngBeamShift var(--beam-duration) ease-in-out var(--beam-delay) infinite alternate;
}

@keyframes nngBeamShift { to { translate: 7vw 2vh; opacity: .2; } }

.nng-motion-ring {
  position: absolute;
  right: var(--ring-right);
  top: var(--ring-top);
  width: var(--ring-size);
  aspect-ratio: 1;
  border: 1px solid rgba(196,154,44,.24);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(196,138,232,.025),0 0 0 76px rgba(126,150,235,.018);
  transform: rotateX(68deg) rotateZ(0) translateZ(var(--ring-z));
  animation: nngFieldOrbit var(--ring-duration) linear infinite;
}

.nng-motion-ring::after {
  content: "";
  position: absolute;
  left: 47%;
  top: -6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #C49A2C;
  box-shadow: 0 0 24px rgba(196,154,44,.7);
}

@keyframes nngFieldOrbit { to { transform: rotateX(68deg) rotateZ(360deg) translateZ(var(--ring-z)); } }

.nng > main,
.as > main { position: relative; z-index: 3; }

@media (max-width: 720px) {
  .ppn-ocean-fish:nth-of-type(n+5),
  .grand-bubble:nth-child(n+36) { display:none; }
  .ppn-ocean-ray { opacity: calc(var(--ray-opacity) * .65); }
  .ppn-reef-kelp { opacity: .38; }
  .ppn main > section:not(.ppn-hero)::after,
  .ps main > section:not(.ps-hero)::after,
  .ps > section:not(.ps-hero)::after { height: 58px; bottom: -31px; }
}

@media (prefers-reduced-motion: reduce) {
  .ppn-ocean-ray,
  .ppn-ocean-current,
  .ppn-ocean-fish,
  .ppn-reef-kelp,
  .ppn-reef-coral,
  .ppn-reef-bubble,
  .iris-launch-avatar,
  .iris-launch-avatar::before,
  .iris-launch-avatar::after,
  .nng-motion-beam,
  .nng-motion-ring { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   Promise balanced experience — one cinematic path, less clutter
   ───────────────────────────────────────────────────────────── */
.ppn-hero-walkthrough {
  min-height: 100svh !important;
  align-items: center !important;
  padding: 150px 0 92px !important;
  background: #174B6A !important;
}

.ppn-hero-walkthrough::before { display: none !important; }
.ppn-hero-walkthrough::after {
  background: linear-gradient(90deg,rgba(8,49,72,.9),rgba(8,49,72,.62) 48%,rgba(8,49,72,.18) 78%,rgba(8,49,72,.08)) !important;
}

.ppn-hero-walkthrough .ppn-hero-video {
  filter: saturate(1.02) contrast(1.02) !important;
  object-position: center center;
}

.ppn-hero-veil {
  position: absolute;
  z-index: -3;
  inset: 0;
  background: linear-gradient(0deg,rgba(8,49,72,.68),transparent 48%);
  pointer-events: none;
}

.ppn-hero-walkthrough .ppn-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0,850px) !important;
  justify-content: start;
  align-items: center !important;
}

.ppn-hero-walkthrough .ppn-hero-copy {
  max-width: 850px;
}

.ppn-hero-walkthrough .ppn-title {
  max-width: 820px;
  font-size: clamp(42px,5vw,58px) !important;
  line-height: 1.01 !important;
}

.ppn-hero-walkthrough .ppn-intro {
  max-width: 680px;
  font-size: clamp(16px,1.2vw,18px) !important;
}

.ppn-brand-statement {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px,8vw,104px) 0;
  background: linear-gradient(120deg,#FFF9E9 0%,#ECF8FD 48%,#EFFBF5 100%);
}

.ppn-brand-statement::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 320px;
  aspect-ratio: 1;
  right: -130px;
  top: -170px;
  border: 44px solid rgba(63,167,214,.1);
  border-radius: 50%;
}

.ppn-brand-statement-inner {
  max-width: 1000px;
  text-align: center;
}

.ppn-brand-statement p {
  color: #EE6352;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ppn-brand-statement h2 {
  max-width: 920px;
  margin: 16px auto 0 !important;
  color: #174B6A;
  font: 800 clamp(32px,4.1vw,48px)/1.06 "Baloo 2",cursive !important;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.ppn-brand-statement span {
  display: block;
  margin-top: 17px;
  color: rgba(23,75,106,.72);
  font: 700 15px/1.6 Nunito,sans-serif;
}

.ppn-adventure-focused {
  padding: clamp(82px,9vw,122px) 0 !important;
  color: #174B6A !important;
  background: linear-gradient(180deg,#FFFDFC,#ECF8FD) !important;
}

.ppn-adventure-focused .ppn-adventure-head {
  grid-template-columns: minmax(0,1fr) minmax(260px,.55fr) !important;
  gap: 42px !important;
}

.ppn-adventure-focused .ppn-adventure-grid {
  display: grid !important;
  grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr) !important;
  gap: 18px !important;
}

.ppn-adventure-focused .ppn-adventure-stage {
  min-height: 620px !important;
  transform: none !important;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 40px 40px 14px 40px !important;
}

.ppn-adventure-focused .ppn-adventure-photo {
  min-height: 620px;
  transform: none !important;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 14px 40px 40px 40px !important;
}

.ppn-adventure-focused .ppn-adventure-photo img { object-position: 57% center; }

.ppn-section#services {
  padding: clamp(84px,9vw,124px) 0 !important;
  background:
    radial-gradient(circle at 9% 14%,rgba(250,192,94,.18),transparent 22%),
    linear-gradient(155deg,#123F5B,#17668D 58%,#1F789D) !important;
}

.ppn-section#services::before,
.ppn-section#services::after { opacity: .42 !important; }

.ppn-section#services .ppn-services-head {
  grid-template-columns: minmax(0,1fr) minmax(250px,.45fr) !important;
  margin-bottom: 24px !important;
}

.ppn-section#services .ppn-services-head .ppn-h2 {
  max-width: 780px;
  font-size: clamp(32px,3.8vw,47px) !important;
}

.ppn-section#services .ppn-services-head p {
  max-width: 360px;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.ppn-section#services .ppn-filters {
  margin-bottom: 27px !important;
}

.ppn-section#services .ppn-grid {
  display: grid !important;
  grid-template-columns: repeat(12,minmax(0,1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  gap: 16px !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 8px 0 0 !important;
  perspective: none !important;
}

.ppn-section#services .ppn-service {
  grid-column: span 4;
  min-height: 350px !important;
  transform: none !important;
  border-width: 2px !important;
  border-radius: 28px 28px 10px 28px !important;
  box-shadow: 0 24px 62px rgba(3,34,50,.28) !important;
}

.ppn-section#services .ppn-service:nth-child(1),
.ppn-section#services .ppn-service:nth-child(7),
.ppn-section#services .ppn-service:nth-child(11) { grid-column: span 7; }

.ppn-section#services .ppn-service:nth-child(2),
.ppn-section#services .ppn-service:nth-child(6),
.ppn-section#services .ppn-service:nth-child(12) { grid-column: span 5; }

.ppn-section#services .ppn-service:nth-child(1),
.ppn-section#services .ppn-service:nth-child(2) { min-height: 490px !important; }

.ppn-section#services .ppn-service:nth-child(6),
.ppn-section#services .ppn-service:nth-child(7),
.ppn-section#services .ppn-service:nth-child(11),
.ppn-section#services .ppn-service:nth-child(12) { min-height: 410px !important; }

.ppn-section#services .ppn-service:hover,
.ppn-section#services .ppn-service:focus-visible {
  transform: translateY(-8px) !important;
  box-shadow: 0 34px 78px rgba(3,34,50,.36) !important;
}

.ppn-section#services .ppn-service-text {
  inset: auto 22px 21px !important;
  transform: none !important;
}

.ppn-section#services .ppn-service-text strong {
  max-width: 580px;
  font-size: clamp(21px,2vw,28px) !important;
}

.ppn-section#services .ppn-service-text em { margin-top: 12px !important; }
.ppn-section#services .ppn-service video { filter: saturate(.94) contrast(1.02); }

.ppn-ocean-atmosphere { opacity: .54; }
.ppn-reef-zone { opacity: .45; }
.ppn-reef-kelp { opacity: .35; }
.ppn-reef-coral { opacity: .34; }
.ppn-reef-bubble { opacity: .38; }

.iris-panel .iris-quick {
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
}

.iris-panel .iris-choice {
  min-height: 44px !important;
  padding: 8px 10px !important;
  font-size: 10px !important;
}

.iris-trail { display: none !important; }

.ps-world-grid {
  grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr) !important;
  grid-template-rows: 500px !important;
}

.ps-world-grid .ps-world-window.main,
.ps-world-grid .ps-world-window:nth-child(2) {
  grid-row: 1 !important;
  transform: none !important;
}

@media (max-width: 900px) {
  .ppn-adventure-focused .ppn-adventure-head,
  .ppn-adventure-focused .ppn-adventure-grid,
  .ppn-section#services .ppn-services-head { grid-template-columns: 1fr !important; }
  .ppn-adventure-focused .ppn-adventure-stage,
  .ppn-adventure-focused .ppn-adventure-photo { min-height: 500px !important; }
  .ppn-section#services .ppn-service,
  .ppn-section#services .ppn-service:nth-child(n) {
    grid-column: span 6;
    min-height: 365px !important;
  }
}

@media (max-width: 620px) {
  .ppn-hero-walkthrough { min-height: 92svh !important; padding: 132px 0 76px !important; }
  .ppn-hero-walkthrough .ppn-title { font-size: clamp(36px,10.4vw,44px) !important; }
  .ppn-hero-walkthrough .ppn-hero-tour-label { max-width: calc(100% - 38px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ppn-brand-statement { padding: 64px 0; }
  .ppn-brand-statement h2 { font-size: clamp(30px,8.8vw,39px) !important; }
  .ppn-adventure-focused .ppn-adventure-stage,
  .ppn-adventure-focused .ppn-adventure-photo { min-height: 430px !important; }
  .ppn-section#services .ppn-grid { grid-template-columns: 1fr !important; }
  .ppn-section#services .ppn-service,
  .ppn-section#services .ppn-service:nth-child(n) {
    grid-column: 1;
    min-height: 390px !important;
  }
  .iris-panel .iris-quick { grid-template-columns: 1fr !important; }
}

/* Final brand, navigation, portrait-safe media, and dimensional Iris pass. */
.nng-brand,
.ppn-brand {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.32) !important;
  box-shadow: 0 16px 46px rgba(8,25,56,.13) !important;
  backdrop-filter: blur(18px) saturate(1.2);
}

.nng-brand img,
.ppn-brand img {
  filter: drop-shadow(0 4px 10px rgba(8,25,56,.12));
}

.brand-more {
  position: relative;
  color: inherit;
}

.brand-more summary {
  padding: 11px 13px;
  border-radius: 999px;
  list-style: none;
  cursor: pointer;
  font: inherit;
}

.brand-more summary::-webkit-details-marker { display: none; }
.brand-more summary::after { content: " +"; opacity: .65; }
.brand-more[open] summary::after { content: " −"; }

.brand-more > div {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  min-width: 205px;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 18px;
  background: rgba(26,18,74,.94);
  box-shadow: 0 24px 60px rgba(8,16,48,.32);
  backdrop-filter: blur(18px);
}

.ppn-nav .brand-more > div { background: rgba(23,75,106,.96); }
.brand-more:not([open]) > div { display: none; }
.brand-more > div a { display: block; white-space: nowrap; }

.nng-service video,
.ppn-service video,
.nng-film video,
.ppn-film video {
  object-position: center 22% !important;
}

.ppn-hero-walkthrough .ppn-hero-grid {
  grid-template-columns: minmax(0,1.04fr) minmax(330px,.64fr) !important;
  align-items: center !important;
}

.ppn-hero-welcome {
  position: relative;
  justify-self: end;
  width: min(410px,36vw);
  aspect-ratio: 1;
  overflow: visible;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 34px;
  background: #174B6A;
  box-shadow: 0 34px 95px rgba(3,34,50,.38);
  transform: perspective(1100px) rotateY(-5deg) translateZ(60px);
  transition: transform .5s var(--grand-ease);
}

.ppn-hero-welcome:hover {
  transform: perspective(1100px) rotateY(0) translateY(-8px) translateZ(80px);
}

.ppn-hero-welcome video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  border-radius: inherit;
}

.ppn-hero-welcome::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(0deg,rgba(23,75,106,.92),transparent 52%);
}

.ppn-hero-welcome > img {
  position: absolute;
  z-index: 3;
  right: -42px;
  top: -58px;
  width: 150px;
  height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 22px 30px rgba(23,75,106,.32));
  animation: ppnHeroIris 4.4s ease-in-out infinite;
}

.ppn-hero-welcome > span {
  position: absolute;
  z-index: 4;
  left: 24px;
  right: 24px;
  bottom: 22px;
  color: #fff;
}

.ppn-hero-welcome small {
  display: block;
  color: #FAC05E;
  font: 900 9px/1 "Nunito",sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.ppn-hero-welcome strong {
  display: block;
  max-width: 285px;
  margin-top: 8px;
  font: 800 clamp(21px,2.2vw,29px)/1.05 "Baloo 2",cursive;
}

@keyframes ppnHeroIris {
  50% { transform: translateY(-10px) rotate(3deg) scale(1.035); }
}

.iris-guide {
  perspective: 900px;
  filter: drop-shadow(0 25px 36px rgba(23,75,106,.28)) !important;
}

.iris-launch {
  width: 160px !important;
  height: 160px !important;
  transform-style: preserve-3d;
}

.iris-launch-avatar {
  width: 152px !important;
  height: 152px !important;
  padding: 7px !important;
  background: radial-gradient(circle at 35% 24%,rgba(255,255,255,.98),rgba(233,248,255,.82) 48%,rgba(89,205,144,.28)) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.82),0 22px 55px rgba(23,75,106,.22);
  transform: perspective(800px) rotateX(var(--iris-tilt-y,0deg)) rotateY(var(--iris-tilt-x,0deg)) translateZ(35px);
  transition: transform .22s ease;
}

.iris-launch-avatar img {
  width: 137px !important;
  height: 137px !important;
  filter: drop-shadow(0 18px 18px rgba(23,75,106,.28)) !important;
}

.iris-launch-copy { right: 135px !important; top: 54px !important; }
.iris-panel { right: 40px !important; bottom: 170px !important; }
.iris-guide.is-upper .iris-panel { top: 166px !important; bottom: auto !important; }
.iris-teaser { right: 45px !important; bottom: 175px !important; }
.iris-guide.is-upper .iris-teaser { top: 162px !important; bottom: auto !important; }

.ppn-step-stage > img,
.ppn-qa-iris,
.ppn-map-iris,
.ppn-world-iris {
  filter: drop-shadow(0 24px 28px rgba(23,75,106,.26)) !important;
  transform-style: preserve-3d;
}

@media (max-width: 990px) {
  .ppn-hero-walkthrough .ppn-hero-grid { grid-template-columns: 1fr !important; }
  .ppn-hero-welcome { justify-self: start; width: min(520px,88vw); }
  .brand-more { display: none; }
}

@media (max-width: 620px) {
  .ppn-hero-welcome { width: min(86vw,390px); border-radius: 28px; }
  .ppn-hero-welcome > img { width: 112px; height: 112px; right: -18px; top: -40px; }
  .iris-launch { width: 116px !important; height: 116px !important; }
  .iris-launch-avatar { width: 110px !important; height: 110px !important; }
  .iris-launch-avatar img { width: 99px !important; height: 99px !important; }
  .iris-launch-copy { right: 96px !important; top: 35px !important; }
  .iris-panel { right: 5px !important; bottom: 122px !important; }
  .iris-guide.is-upper .iris-panel { top: 120px !important; }
}