.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-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-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; }
}


/* Keep Promise's ocean character in the scenery, below readable content. */
.brand-ppn .ppn-ocean-panel { position: relative; isolation: isolate; overflow: clip; }
.brand-ppn .ppn-ocean-panel > .ppn-ocean-atmosphere {
  position: absolute; inset: 0; z-index: 0; opacity: 1;
  transform: none; perspective: none; pointer-events: none;
}
.brand-ppn .ppn-ocean-panel > :is(.ppn-wrap,.ps-wrap,.hero-grid,.practice-footer-inner) {
  position: relative; z-index: 3;
}
.brand-ppn .ppn-ocean-panel > .ppn-reef-zone { z-index: 1; opacity: .85; }
.brand-ppn .ppn-reef-kelp { opacity: .6; }
.brand-ppn .ppn-reef-coral { opacity: .7; }
.brand-ppn .ppn-ocean-panel .ppn-ocean-fish { display: block; }
.brand-ppn .ppn-ocean-panel .ppn-ocean-fish:nth-last-child(2) {
  animation-direction: reverse; scale: -1 1;
}
.brand-ppn .ppn-ocean-panel .grand-bubble {
  bottom: -80px; animation-name: ppnLocalBubbleRise; backdrop-filter: none;
  border-color: #ffffffb8;
}
.brand-ppn .ppn-ocean-atmosphere::after { opacity: .3; }
.brand-ppn .ppn-ocean-atmosphere::before {
  inset: -10% -12% 0; transform: none; opacity: .5;
  background: linear-gradient(112deg,transparent 9%,#ffffff29 16%,transparent 23%,transparent 41%,#ffffff18 48%,transparent 56%,transparent 70%,#ffffff16 77%,transparent 84%);
  animation: ppnSoftLight 18s ease-in-out infinite alternate;
}
@keyframes ppnSoftLight { to { translate: 3% 0; opacity: .25; } }
.brand-ppn .ppn-ocean-panel:not(.ocean-in-view) :is(.ppn-ocean-atmosphere,.ppn-reef-zone) *,
.brand-ppn .ppn-ocean-panel:not(.ocean-in-view) :is(.ppn-ocean-atmosphere,.ppn-reef-zone) *::after {
  animation-play-state: paused;
}
.brand-ppn .ppn-brand-statement {
  background: radial-gradient(ellipse at 50% 0,#f2feff80,transparent 70%),linear-gradient(180deg,#b9e7f2,#d4f2ef);
}
.brand-ppn .ppn-section#services {
  background: radial-gradient(ellipse at 20% 0,#74d3e344,transparent 60%),linear-gradient(160deg,#166282,#187a9c 56%,#12637e) !important;
}
.brand-ppn .ppn-section#team {
  background: radial-gradient(ellipse at 80% 0,#e9fffa99,transparent 60%),linear-gradient(180deg,#cfedf4,#b8e7ec) !important;
}
.brand-ppn .ppn-section#questions {
  background: linear-gradient(155deg,#d8f2f5,#b9e5ef 70%,#c9eee2);
}
.brand-ppn .ps-section.mist.ppn-ocean-panel {
  background: linear-gradient(155deg,#e5f7f9,#c8eaf2 70%,#d6f1e9) !important;
}
.brand-ppn .page-hero.ppn-ocean-panel {
  background: radial-gradient(ellipse at 55% 0,#f4feff99,transparent 60%),linear-gradient(135deg,#d9f3f6,#b4e1ed 70%,#c8eee1) !important;
}
.brand-ppn .practice-footer.ppn-ocean-panel {
  background: radial-gradient(ellipse at 75% 100%,#27889555,transparent 60%),linear-gradient(160deg,#123e56,#0d536e) !important;
}
.brand-ppn .ppn-hero .ppn-ocean-atmosphere { opacity: .65; }
.brand-ppn .ppn-hero .ppn-ocean-atmosphere::before,
.brand-ppn .ppn-hero .ppn-ocean-atmosphere::after { display: none; }
.brand-ppn .ppn-ocean-panel:not(.ppn-hero):not(.ps-hero):not(.page-hero)::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  inset: auto -8% -48px; height: 90px; border-radius: 50%;
  background: #8cd4e33b; box-shadow: 0 -16px 0 #b8ede52b; transform: rotate(-1deg);
}
@keyframes ppnLocalBubbleRise {
  0% { translate: 0 0; opacity: 0; }
  12% { opacity: var(--opacity); }
  70% { translate: 14px calc(var(--ocean-rise) * -.7); opacity: var(--opacity); }
  100% { translate: -10px calc(var(--ocean-rise) * -1); opacity: 0; }
}
@media(max-width:600px) {
  .brand-ppn .ppn-ocean-panel .ppn-ocean-fish { width: 40px; height: 21px; }
  .brand-ppn .ppn-reef-coral { width: 70px; height: 54px; right: 0; }
  .brand-ppn .ppn-reef-kelp { height: 90px; width: 14px; }
}
/* The ocean remains visible when visitors prefer still scenery. */
@media(prefers-reduced-motion:reduce) {
  .brand-ppn :is(.ppn-ocean-atmosphere,.ppn-reef-zone),
  .brand-ppn :is(.ppn-ocean-atmosphere,.ppn-reef-zone) *,
  .brand-ppn :is(.ppn-ocean-atmosphere,.ppn-reef-zone) *::after,
  .brand-ppn .ppn-ocean-atmosphere::before { animation: none !important; }
  .brand-ppn .ppn-ocean-panel .ppn-ocean-fish {
    left: var(--fish-rest-x); translate: none; transform: none; animation: none;
  }
  .brand-ppn .ppn-ocean-panel .grand-bubble {
    top: var(--bubble-rest-y); bottom: auto; translate: none; transform: none;
    animation: none; opacity: .45;
  }
}