/* Underwater Inspection & Surveys: page-specific styles. */


/*Section hero start hrere*/


/* =========================================================
   SINDYBAD®
   UNDERWATER INSPECTIONS & MARINE SURVEYS

   FINAL LONG PAGE
   Prefix: sui
========================================================= */


.sui-page,
.sui-page *,
.sui-page *::before,
.sui-page *::after {
  box-sizing: border-box;
}


/* =========================================================
   ROOT
========================================================= */

.sui-page {
  --sui-navy: #031725;
  --sui-navy-2: #072e43;
  --sui-navy-3: #0a3b51;

  --sui-cyan: #18c4d7;
  --sui-aqua: #62e6df;
  --sui-purple: #8b5cf6;
  --sui-orange: #ff8b38;

  --sui-white: #ffffff;
  --sui-text: #f3fbff;
  --sui-muted: #9db2bf;

  --sui-line:
    rgba(125, 216, 229, 0.15);

  --sui-depth-progress: 0;

  position: relative;
  isolation: isolate;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: clip;

  color:
    var(--sui-text);

  background:
    radial-gradient(
      circle at 8% 8%,
      rgba(98, 230, 223, 0.08),
      transparent 26rem
    ),
    radial-gradient(
      circle at 92% 18%,
      rgba(139, 92, 246, 0.07),
      transparent 30rem
    ),
    var(--sui-navy);

  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


.sui-page img {
  display: block;

  max-width: 100%;
}


.sui-page a {
  color: inherit;

  text-decoration: none;
}


/* =========================================================
   INNER WIDTH
========================================================= */

.sui-shell {
  width:
    min(
      1360px,
      calc(100% - 80px)
    );

  margin-inline: auto;
}


/* =========================================================
   CHAPTER
========================================================= */

.sui-chapter {
  position: relative;
  z-index: 3;

  width: 100%;

  scroll-margin-top: 80px;
}


/* =========================================================
   GLOBAL UNDERWATER ATMOSPHERE
========================================================= */

.sui-atmosphere {
  position: absolute;
  z-index: 0;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.sui-atmosphere__grid {
  position: absolute;

  inset: 0;

  opacity: 0.27;

  background-image:
    linear-gradient(
      rgba(98,230,223,.027) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(98,230,223,.027) 1px,
      transparent 1px
    );

  background-size:
    80px 80px;
}


/* =========================================================
   WATER MOVEMENT
========================================================= */

.sui-water {
  position: absolute;

  left: -18%;

  width: 136%;
  height: 430px;

  border-radius: 50%;

  will-change: transform;
}


.sui-water--one {
  top: -300px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(98,230,223,.16),
      rgba(24,196,215,.07) 38%,
      transparent 70%
    );

  animation:
    suiWaterOne
    17s
    ease-in-out
    infinite alternate;
}


.sui-water--two {
  top: -340px;

  opacity: .7;

  background:
    radial-gradient(
      ellipse at center,
      rgba(139,92,246,.12),
      rgba(24,196,215,.05) 40%,
      transparent 72%
    );

  animation:
    suiWaterTwo
    23s
    ease-in-out
    infinite alternate;
}


.sui-water--three {
  top: 36%;
  right: -24%;
  left: auto;

  width: 90%;

  opacity: .32;

  background:
    radial-gradient(
      ellipse at center,
      rgba(24,196,215,.13),
      transparent 68%
    );

  animation:
    suiWaterThree
    21s
    ease-in-out
    infinite alternate;
}


@keyframes suiWaterOne {

  to {
    transform:
      translate3d(6%,45px,0)
      rotate(2deg)
      scaleX(1.07);
  }

}


@keyframes suiWaterTwo {

  to {
    transform:
      translate3d(-5%,58px,0)
      rotate(-2deg);
  }

}


@keyframes suiWaterThree {

  to {
    transform:
      translate3d(-7%,-35px,0)
      scale(1.08);
  }

}


/* =========================================================
   UNDERWATER LIGHT SHAFTS
========================================================= */

.sui-beam {
  position: absolute;

  top: -5%;

  width: 34vw;
  height: 110vh;

  opacity: .32;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(98,230,223,.038),
      transparent
    );
}


.sui-beam--one {
  left: -7%;

  transform:
    rotate(17deg);
}


.sui-beam--two {
  right: -8%;

  transform:
    rotate(-16deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(139,92,246,.042),
      transparent
    );
}


/* =========================================================
   WATER DROPS
========================================================= */

.sui-drops {
  position: absolute;

  inset: 0;

  overflow: hidden;
}


.sui-drops::before,
.sui-drops::after {
  position: absolute;

  inset: 0;

  content: "";

  opacity: .20;

  background-image:
    radial-gradient(
      circle,
      rgba(98,230,223,.48) 0 1px,
      transparent 1.7px
    ),
    radial-gradient(
      circle,
      rgba(255,255,255,.19) 0 1px,
      transparent 1.7px
    );

  background-size:
    190px 280px,
    270px 390px;

  background-position:
    30px 40px,
    140px 180px;

  animation:
    suiBubbleField
    28s
    linear
    infinite;
}


.sui-drops::after {
  opacity: .12;

  background-size:
    340px 470px,
    250px 360px;

  animation-duration: 41s;

  animation-direction: reverse;
}


@keyframes suiBubbleField {

  to {
    background-position:
      30px -240px,
      140px -210px;
  }

}


.sui-drops > i {
  position: absolute;

  top: var(--y);
  left: var(--x);

  width: var(--s);
  height: var(--s);

  border:
    1px solid
    rgba(98,230,223,.50);

  border-radius: 50%;

  opacity: .30;

  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255,255,255,.58),
      rgba(98,230,223,.12) 38%,
      transparent 72%
    );

  box-shadow:
    0 0 8px
    rgba(24,196,215,.11);

  animation:
    suiBubbleFloat
    var(--d)
    ease-in-out
    infinite alternate;

  animation-delay:
    var(--delay);

  will-change: transform;
}


@keyframes suiBubbleFloat {

  0% {
    transform:
      translate3d(0,35px,0);
  }

  50% {
    transform:
      translate3d(14px,-70px,0);
  }

  100% {
    transform:
      translate3d(-9px,-145px,0);
  }

}


/* =========================================================
   TOP TECH LINE
========================================================= */

.sui-topline {
  position: absolute;
  z-index: 40;

  top: 25px;

  right:
    clamp(100px,8vw,148px);

  left:
    clamp(28px,4vw,76px);

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  color:
    rgba(220,241,246,.56);

  font-size: 8px;
  font-weight: 850;

  letter-spacing: .17em;

  text-transform: uppercase;

  pointer-events: none;
}


.sui-topline > span:first-child {
  display: flex;

  align-items: center;

  gap: 9px;
}


.sui-topline i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sui-cyan);

  box-shadow:
    0 0 14px
    rgba(24,196,215,.70);
}


/* =========================================================
   DEPTH METER
========================================================= */

.sui-depth {
  position: fixed;
  z-index: 999;

  top: 12vh;
  right: 12px;

  display: grid;

  grid-template-rows:
    auto
    minmax(0,1fr)
    auto;

  width: 76px;
  height: 76vh;

  padding:
    12px
    8px;

  border:
    1px solid
    rgba(98,230,223,.20);

  border-radius: 18px;

  background:
    rgba(3,23,37,.91);

  box-shadow:
    0 18px 60px
    rgba(0,8,15,.38),
    inset 0 1px
    rgba(255,255,255,.05);

  -webkit-backdrop-filter:
    blur(12px);

  backdrop-filter:
    blur(12px);

  transition:
    opacity .2s ease,
    transform .2s ease;
}


.sui-depth.is-hidden {
  opacity: 0;

  pointer-events: none;

  transform:
    translateX(14px);
}


.sui-depth__readout,
.sui-depth__chapter {
  text-align: center;
}


.sui-depth__readout span,
.sui-depth__chapter span {
  display: block;

  color:
    rgba(198,228,234,.53);

  font-size: 6px;
  font-weight: 850;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.sui-depth__readout strong {
  display: block;

  margin-top: 4px;

  color:
    var(--sui-aqua);

  font-size: 15px;
}


.sui-depth__chapter strong {
  display: block;

  margin-top: 5px;

  overflow: hidden;

  color:
    rgba(234,249,251,.82);

  font-size: 7px;

  line-height: 1.2;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.sui-depth__track {
  position: relative;

  width: 2px;

  height:
    calc(100% - 24px);

  margin:
    13px
    auto;

  background:
    rgba(154,215,225,.18);
}


.sui-depth__fill {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  transform:
    scaleY(
      var(--sui-depth-progress)
    );

  transform-origin:
    top;

  background:
    linear-gradient(
      to bottom,
      var(--sui-cyan),
      var(--sui-purple),
      var(--sui-orange)
    );

  box-shadow:
    0 0 12px
    rgba(98,230,223,.45);
}


.sui-depth__marker {
  position: absolute;
  z-index: 4;

  top:
    calc(
      var(--sui-depth-progress) *
      100%
    );

  left: 50%;

  display: grid;

  width: 31px;
  height: 31px;

  place-items: center;

  border:
    1px solid
    rgba(98,230,223,.52);

  border-radius: 50%;

  background:
    #082b3d;

  box-shadow:
    0 0 0 5px
    rgba(24,196,215,.08),
    0 0 21px
    rgba(24,196,215,.30);

  transform:
    translate(-50%,-50%);
}


.sui-depth__marker i {
  position: absolute;

  inset: 3px;

  border:
    1px dashed
    rgba(98,230,223,.31);

  border-radius: 50%;

  animation:
    suiDepthSpin
    14s
    linear
    infinite;
}


@keyframes suiDepthSpin {

  to {
    transform:
      rotate(360deg);
  }

}


.sui-depth__marker b {
  font-size: 7px;

  letter-spacing: .04em;
}


.sui-depth__mark {
  position: absolute;

  left: 50%;

  width: 48px;

  transform:
    translateX(-50%);
}


.sui-depth__mark::before {
  position: absolute;

  top: 0;
  left: 22px;

  width: 8px;
  height: 1px;

  content: "";

  background:
    rgba(203,237,242,.34);
}


.sui-depth__mark small {
  position: absolute;

  top: -4px;
  right: 31px;

  color:
    rgba(203,237,242,.48);

  font-size: 6px;
}


/* =========================================================
   MOBILE DEPTH
========================================================= */

.sui-mobile-depth {
  display: none;
}


/* =========================================================
   HERO
========================================================= */

.sui-hero {
  display: flex;

  flex-direction: column;

  min-height: 100svh;

  background:
    linear-gradient(
      145deg,
      #031725,
      #051d2b
    );
}


.sui-hero__main {
  display: grid;

  grid-template-columns:
    minmax(0,46%)
    minmax(0,54%);

  flex: 1;

  width: 100%;

  min-height:
    calc(100svh - 90px);
}


/* =========================================================
   HERO COPY
========================================================= */

.sui-hero__copy {
  position: relative;

  display: flex;

  min-width: 0;

  align-items: center;

  padding:
    clamp(86px,10vh,126px)
    clamp(42px,6vw,114px)
    clamp(54px,7vh,84px);

  background:
    radial-gradient(
      circle at 7% 15%,
      rgba(24,196,215,.08),
      transparent 29%
    ),
    radial-gradient(
      circle at 90% 86%,
      rgba(139,92,246,.05),
      transparent 27%
    );
}


.sui-hero__copy::after {
  position: absolute;

  top: 8%;
  right: 0;
  bottom: 8%;

  width: 1px;

  content: "";

  background:
    linear-gradient(
      transparent,
      rgba(98,230,223,.20),
      rgba(139,92,246,.17),
      transparent
    );
}


.sui-hero__copy-inner {
  width: 100%;

  max-width: 700px;
}


.sui-eyebrow {
  display: flex;

  align-items: center;

  gap: 11px;

  margin:
    0
    0
    17px;

  color:
    var(--sui-aqua);

  font-size: 9px;
  font-weight: 850;

  letter-spacing: .11em;

  text-transform: uppercase;
}


.sui-mini-sonar {
  position: relative;

  display: grid;

  width: 32px;
  height: 32px;

  flex: 0 0 auto;

  place-items: center;

  border:
    1px solid
    rgba(98,230,223,.27);

  border-radius: 50%;
}


.sui-mini-sonar::before {
  position: absolute;

  inset: 6px;

  border:
    1px solid
    rgba(98,230,223,.13);

  border-radius: 50%;

  content: "";
}


.sui-mini-sonar i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--sui-aqua);

  box-shadow:
    0 0 9px
    rgba(98,230,223,.65);
}


/* =========================================================
   HEADINGS
========================================================= */

.sui-hero h1,
.sui-section h2,
.sui-final h2 {
  margin: 0;

  color:
    var(--sui-white);

  font-size:
    clamp(34px,3vw,39px);

  font-weight: 880;

  line-height: 1.02;

  letter-spacing:
    -.045em;
}


.sui-hero h1 em,
.sui-section h2 em,
.sui-final h2 em {
  color:
    var(--sui-aqua);

  font-style: normal;
}


.sui-hero h1 em {
  display: block;

  margin-top: 5px;
}


/* =========================================================
   HERO TEXT
========================================================= */

.sui-hero__lead {
  max-width: 650px;

  margin:
    24px
    0
    0;

  color:
    rgba(236,248,250,.80);

  font-size:
    clamp(13px,.95vw,15px);

  line-height: 1.72;
}


.sui-highlights {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 8px;

  margin-top: 23px;
}


.sui-highlights span {
  display: flex;

  min-height: 36px;

  align-items: center;

  gap: 8px;

  padding:
    8px
    10px;

  border:
    1px solid
    rgba(98,230,223,.10);

  border-radius: 6px;

  color:
    rgba(231,248,250,.68);

  background:
    rgba(255,255,255,.018);

  font-size: 8px;
}


.sui-highlights i {
  color:
    var(--sui-orange);

  font-style: normal;
}


/* =========================================================
   BUTTONS
========================================================= */

.sui-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 27px;
}


.sui-actions--center {
  justify-content: center;
}


.sui-button {
  display: inline-flex;

  min-height: 48px;

  align-items: center;
  justify-content: center;

  gap: 15px;

  padding:
    0
    19px;

  border:
    1px solid
    rgba(98,230,223,.17);

  border-radius: 7px;

  color:
    var(--sui-white);

  background:
    rgba(255,255,255,.025);

  font-size: 9px;
  font-weight: 850;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.sui-button--primary {
  color:
    #02141e;

  border-color:
    var(--sui-aqua);

  background:
    linear-gradient(
      135deg,
      var(--sui-aqua),
      var(--sui-cyan)
    );

  box-shadow:
    0 15px 32px
    rgba(24,196,215,.17);
}


@media (hover:hover) {

  .sui-button:hover {
    transform:
      translateY(-2px);
  }

}


/* =========================================================
   HERO STATUS
========================================================= */

.sui-hero__status {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  margin-top: 32px;

  border-top:
    1px solid
    var(--sui-line);

  border-bottom:
    1px solid
    var(--sui-line);
}


.sui-hero__status span {
  padding:
    13px
    12px;

  color:
    rgba(234,249,251,.68);

  font-size: 8px;
}


.sui-hero__status span:first-child {
  padding-left: 0;
}


.sui-hero__status span + span {
  border-left:
    1px solid
    rgba(125,216,229,.08);
}


.sui-hero__status b {
  display: block;

  margin-bottom: 4px;

  color:
    var(--sui-orange);

  font-size: 7px;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.sui-hero__visual-wrap {
  min-width: 0;

  padding:
    12px
    12px
    12px
    0;
}


.sui-hero__visual {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 100%;

  margin: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(98,230,223,.12);

  border-radius:
    28px
    28px
    28px
    82px;

  background:
    #02131f;

  box-shadow:
    0 30px 84px
    rgba(0,8,15,.36);
}


.sui-hero__visual > img,
.sui-team > img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(.76)
    contrast(1.09)
    brightness(.65);

  transform:
    translate3d(
      var(--sui-px,0),
      var(--sui-py,0),
      0
    )
    scale(1.03);

  transition:
    transform .35s ease-out;
}


.sui-hero__visual > img {
  position: absolute;

  inset: -2%;

  width: 104%;
  height: 104%;

  max-width: none;
}


.sui-media-shade {
  position: absolute;
  z-index: 2;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(2,14,24,.04),
      rgba(2,14,24,.02) 34%,
      rgba(2,14,24,.27) 63%,
      rgba(2,13,22,.93)
    ),
    linear-gradient(
      90deg,
      rgba(3,22,36,.27),
      transparent 60%
    ),
    radial-gradient(
      circle at 71% 35%,
      rgba(24,196,215,.17),
      transparent 29%
    );
}


.sui-visual-grid {
  position: absolute;
  z-index: 3;

  inset: 0;

  opacity: .18;

  background:
    linear-gradient(
      rgba(98,230,223,.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(98,230,223,.08) 1px,
      transparent 1px
    );

  background-size:
    64px 64px;

  -webkit-mask-image:
    radial-gradient(
      circle at 68% 40%,
      #000,
      transparent 74%
    );

  mask-image:
    radial-gradient(
      circle at 68% 40%,
      #000,
      transparent 74%
    );
}


/* =========================================================
   WATER OVER IMAGE
========================================================= */

.sui-water-glass {
  position: absolute;
  z-index: 4;

  inset: 0;

  overflow: hidden;

  opacity: .50;

  pointer-events: none;
}


.sui-water-glass span {
  position: absolute;

  width: 72%;
  height: 18%;

  border:
    1px solid
    rgba(98,230,223,.08);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(98,230,223,.045),
      transparent 68%
    );
}


.sui-water-glass span:nth-child(1) {
  top: 13%;
  left: -19%;

  animation:
    suiRippleOne
    12s
    ease-in-out
    infinite alternate;
}


.sui-water-glass span:nth-child(2) {
  top: 32%;
  right: -25%;

  animation:
    suiRippleTwo
    15s
    ease-in-out
    infinite alternate;
}


.sui-water-glass span:nth-child(3) {
  top: 52%;
  left: 9%;

  width: 90%;

  animation:
    suiRippleThree
    18s
    ease-in-out
    infinite alternate;
}


@keyframes suiRippleOne {

  to {
    transform:
      translate(22%,18px)
      rotate(4deg)
      scaleX(1.12);
  }

}


@keyframes suiRippleTwo {

  to {
    transform:
      translate(-25%,13px)
      scaleX(1.15);
  }

}


@keyframes suiRippleThree {

  to {
    transform:
      translate(-10%,-19px)
      scaleX(.92);
  }

}


/* =========================================================
   SONAR
========================================================= */

.sui-sonar {
  position: absolute;
  z-index: 5;

  top: 43%;
  right: 6%;

  width:
    min(48%,420px);

  aspect-ratio: 1;

  border:
    1px solid
    rgba(98,230,223,.18);

  border-radius: 50%;

  transform:
    translateY(-50%);

  pointer-events: none;
}


.sui-sonar__ring {
  position: absolute;

  border-radius: 50%;
}


.sui-sonar__ring--1 {
  inset: 17%;

  border:
    1px solid
    rgba(98,230,223,.11);
}


.sui-sonar__ring--2 {
  inset: 34%;

  border:
    1px dashed
    rgba(139,92,246,.27);
}


.sui-sonar__ring--3 {
  inset: 46%;

  border:
    1px solid
    rgba(98,230,223,.15);

  background:
    rgba(98,230,223,.025);
}


.sui-sonar__x,
.sui-sonar__y {
  position: absolute;

  top: 50%;
  left: 50%;

  background:
    rgba(98,230,223,.095);

  transform:
    translate(-50%,-50%);
}


.sui-sonar__x {
  width: 110%;
  height: 1px;
}


.sui-sonar__y {
  width: 1px;
  height: 110%;
}


.sui-sonar__beam {
  position: absolute;

  inset: -1px;

  border-radius: 50%;

  opacity: .62;

  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 290deg,
      rgba(98,230,223,.025) 315deg,
      rgba(98,230,223,.17) 354deg,
      transparent 360deg
    );

  animation:
    suiSonarSweep
    15s
    linear
    infinite;
}


@keyframes suiSonarSweep {

  to {
    transform:
      rotate(360deg);
  }

}


.sui-sonar__node {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sui-aqua);

  box-shadow:
    0 0 0 5px
    rgba(98,230,223,.08),
    0 0 17px
    rgba(98,230,223,.52);
}


.sui-sonar__node--1 {
  top: 15%;
  right: 17%;
}


.sui-sonar__node--2 {
  top: 51%;
  right: -4px;

  background:
    var(--sui-orange);
}


.sui-sonar__node--3 {
  bottom: 13%;
  left: 15%;

  background:
    var(--sui-purple);
}


/* =========================================================
   VISUAL DETAILS
========================================================= */

.sui-visual-top {
  position: absolute;
  z-index: 9;

  top: 27px;
  right: 29px;
  left: 29px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  color:
    rgba(255,255,255,.63);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.sui-visual-top span {
  display: flex;

  align-items: center;

  gap: 8px;
}


.sui-visual-top i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sui-aqua);

  box-shadow:
    0 0 13px
    rgba(98,230,223,.68);
}


.sui-visual-top b {
  color:
    rgba(255,255,255,.34);

  font-size: 7px;
}


.sui-ghost-depth {
  position: absolute;
  z-index: 3;

  top: 44%;
  right: 9%;

  color:
    rgba(255,255,255,.037);

  font-size:
    clamp(110px,10vw,190px);

  font-weight: 900;

  line-height: 1;

  letter-spacing:
    -.08em;

  transform:
    translateY(-50%);
}


.sui-hero__panel {
  position: absolute;
  z-index: 9;

  right:
    clamp(23px,3vw,45px);

  bottom:
    clamp(77px,7vw,105px);

  left:
    clamp(23px,3vw,45px);

  max-width: 680px;

  padding:
    20px
    22px;

  border:
    1px solid
    rgba(98,230,223,.17);

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(3,23,37,.93),
      rgba(7,46,67,.79)
    );

  box-shadow:
    0 23px 58px
    rgba(0,0,0,.25);
}


.sui-hero__panel small {
  color:
    var(--sui-aqua);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.sui-hero__panel strong {
  display: block;

  margin-top: 8px;

  font-size:
    clamp(20px,1.7vw,28px);

  line-height: 1.05;

  letter-spacing:
    -.035em;
}


.sui-hero__panel p {
  max-width: 555px;

  margin:
    8px
    0
    0;

  color:
    rgba(225,244,247,.63);

  font-size: 9px;

  line-height: 1.6;
}


.sui-hero__steps {
  position: absolute;
  z-index: 9;

  right: 22px;
  bottom: 18px;
  left: 22px;

  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  overflow: hidden;

  border:
    1px solid
    rgba(98,230,223,.10);

  border-radius: 9px;

  background:
    rgba(2,17,28,.55);
}


.sui-hero__steps div {
  padding:
    9px
    12px;
}


.sui-hero__steps div + div {
  border-left:
    1px solid
    rgba(98,230,223,.08);
}


.sui-hero__steps span {
  color:
    var(--sui-orange);

  font-size: 6px;
  font-weight: 900;
}


.sui-hero__steps strong {
  display: block;

  margin-top: 3px;

  color:
    rgba(255,255,255,.70);

  font-size: 7px;
}


/* =========================================================
   HERO RAIL
========================================================= */

.sui-rail {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  min-height: 90px;

  border-top:
    1px solid
    var(--sui-line);

  background:
    rgba(4,26,41,.98);
}


.sui-rail a {
  display: grid;

  grid-template-columns:
    28px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 9px;

  padding:
    0
    clamp(18px,2.4vw,38px);

  border-right:
    1px solid
    rgba(98,230,223,.08);
}


.sui-rail > a > span {
  color:
    var(--sui-cyan);

  font-size: 7px;
  font-weight: 900;
}


.sui-rail small {
  display: block;

  color:
    rgba(157,178,191,.55);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .10em;
}


.sui-rail strong {
  display: block;

  margin-top: 4px;

  color:
    rgba(243,251,255,.76);

  font-size: 9px;
}


.sui-rail i {
  color:
    var(--sui-orange);

  font-style: normal;
}


/* =========================================================
   SECTIONS
========================================================= */

.sui-section {
  position: relative;
  z-index: 2;

  padding:
    clamp(82px,8vw,126px)
    0;

  border-bottom:
    1px solid
    rgba(98,230,223,.07);

  background:
    rgba(3,23,37,.90);
}


.sui-section--deep {
  background:
    linear-gradient(
      145deg,
      #02131f,
      #052334
    );
}


/* =========================================================
   SECTION HEADERS
========================================================= */

.sui-split-heading {
  display: grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(300px,.65fr);

  gap:
    clamp(42px,7vw,105px);

  align-items: end;

  margin-bottom: 42px;
}


.sui-kicker {
  margin:
    0
    0
    13px;

  color:
    var(--sui-aqua);

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .15em;

  text-transform: uppercase;
}


.sui-split-heading > p,
.sui-center-heading > p:last-child {
  margin: 0;

  color:
    var(--sui-muted);

  font-size: 12px;

  line-height: 1.72;
}


.sui-center-heading {
  max-width: 820px;

  margin:
    0
    auto
    46px;

  text-align: center;
}


.sui-center-heading > p:last-child {
  max-width: 680px;

  margin:
    17px
    auto
    0;
}


.sui-label {
  color:
    var(--sui-orange);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .14em;

  text-transform: uppercase;
}


/* =========================================================
   NOTE
========================================================= */

.sui-note {
  display: grid;

  grid-template-columns:
    auto
    1fr;

  gap: 18px;

  margin-top: 22px;

  padding:
    16px
    18px;

  border:
    1px solid
    rgba(98,230,223,.12);

  border-radius: 10px;

  background:
    rgba(24,196,215,.028);
}


.sui-note > span {
  color:
    var(--sui-aqua);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .10em;

  text-transform: uppercase;
}


.sui-note p {
  margin: 0;

  color:
    var(--sui-muted);

  font-size: 9px;

  line-height: 1.6;
}


.sui-note--warning {
  border-color:
    rgba(255,139,56,.20);

  background:
    rgba(255,139,56,.025);
}


.sui-note--warning > span {
  color:
    var(--sui-orange);
}


/* =========================================================
   OVERVIEW
========================================================= */

.sui-brief {
  display: grid;

  grid-template-columns:
    1.08fr
    .92fr;

  gap: 22px;
}


.sui-brief__narrative,
.sui-stakeholders,
.sui-matrix,
.sui-register-panel,
.sui-environment {
  border:
    1px solid
    var(--sui-line);

  border-radius: 16px;

  background:
    rgba(255,255,255,.014);
}


.sui-brief__narrative {
  padding:
    clamp(24px,3vw,38px);
}


.sui-brief__narrative p {
  margin:
    13px
    0
    0;

  color:
    var(--sui-muted);

  font-size: 11px;

  line-height: 1.72;
}


.sui-brief__narrative .sui-lead-copy {
  color:
    rgba(243,251,255,.82);

  font-size: 14px;
}


.sui-facts {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  overflow: hidden;

  border:
    1px solid
    var(--sui-line);

  border-radius: 16px;
}


.sui-facts article {
  padding: 22px;

  border-right:
    1px solid
    var(--sui-line);

  border-bottom:
    1px solid
    var(--sui-line);
}


.sui-facts article:nth-child(2n) {
  border-right: 0;
}


.sui-facts article:nth-child(n+3) {
  border-bottom: 0;
}


.sui-facts small {
  color:
    var(--sui-orange);

  font-size: 6px;
  font-weight: 900;
}


.sui-facts strong {
  display: block;

  margin-top: 12px;

  color:
    var(--sui-aqua);

  font-size: 14px;
}


.sui-facts p {
  margin:
    7px
    0
    0;

  color:
    var(--sui-muted);

  font-size: 9px;

  line-height: 1.55;
}


.sui-metrics {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  margin-top: 22px;

  overflow: hidden;

  border:
    1px solid
    var(--sui-line);

  border-radius: 12px;
}


.sui-metrics article {
  padding: 20px;
}


.sui-metrics article + article {
  border-left:
    1px solid
    var(--sui-line);
}


.sui-metrics strong {
  display: block;

  color:
    var(--sui-aqua);

  font-size: 14px;
}


.sui-metrics span {
  display: block;

  margin-top: 5px;

  color:
    var(--sui-muted);

  font-size: 8px;
}


/* =========================================================
   RISK GRID
========================================================= */

.sui-risk-grid {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  overflow: hidden;

  border:
    1px solid
    var(--sui-line);

  border-radius: 16px;
}


.sui-risk-grid article {
  padding: 23px;

  border-right:
    1px solid
    var(--sui-line);

  background:
    rgba(255,255,255,.014);
}


.sui-risk-grid article:last-child {
  border-right: 0;
}


.sui-risk-grid header {
  display: flex;

  gap: 11px;

  padding-bottom: 16px;

  border-bottom:
    1px solid
    var(--sui-line);
}


.sui-risk-grid header > span {
  color:
    var(--sui-orange);

  font-size: 7px;
  font-weight: 900;
}


.sui-risk-grid small {
  display: block;

  color:
    var(--sui-muted);

  font-size: 6px;

  text-transform: uppercase;
}


.sui-risk-grid strong {
  display: block;

  margin-top: 4px;

  font-size: 12px;
}


.sui-risk-list {
  display: grid;

  gap: 8px;

  margin-top: 16px;
}


.sui-risk-list span {
  position: relative;

  padding-left: 11px;

  color:
    rgba(229,246,249,.66);

  font-size: 8px;

  line-height: 1.5;
}


.sui-risk-list span::before {
  position: absolute;

  top: .55em;
  left: 0;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  content: "";

  background:
    var(--sui-cyan);
}


/* =========================================================
   TECHNICAL REGISTER
========================================================= */

.sui-register {
  overflow: hidden;

  border:
    1px solid
    var(--sui-line);

  border-radius: 16px;

  background:
    rgba(255,255,255,.012);
}


.sui-register__head,
.sui-register summary {
  display: grid;

  grid-template-columns:
    60px
    minmax(180px,.85fr)
    minmax(260px,1.7fr)
    90px;

  gap: 14px;
}


.sui-register__head {
  padding:
    13px
    18px;

  border-bottom:
    1px solid
    var(--sui-line);

  color:
    rgba(157,178,191,.58);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .11em;

  text-transform: uppercase;
}


.sui-register__row {
  border-bottom:
    1px solid
    var(--sui-line);
}


.sui-register__row:last-child {
  border-bottom: 0;
}


.sui-register summary {
  min-height: 76px;

  align-items: center;

  padding:
    12px
    18px;

  cursor: pointer;

  list-style: none;
}


.sui-register summary::-webkit-details-marker {
  display: none;
}


.sui-register summary > b {
  color:
    var(--sui-orange);

  font-size: 8px;
}


.sui-register summary > strong {
  font-size: 10px;
}


.sui-register summary > p {
  margin: 0;

  color:
    var(--sui-muted);

  font-size: 8px;

  line-height: 1.5;
}


.sui-register summary > span {
  color:
    var(--sui-aqua);

  font-size: 7px;

  text-align: right;
}


.sui-register summary > span i::before {
  margin-left: 5px;

  content: "+";

  font-style: normal;
}


.sui-register details[open]
summary > span i::before {
  content: "−";
}


.sui-register__body {
  display: grid;

  grid-template-columns:
    1fr
    minmax(240px,.38fr);

  gap: 18px;

  padding:
    0
    18px
    20px
    92px;
}


.sui-register__body small {
  display: block;

  margin-bottom: 10px;

  color:
    var(--sui-aqua);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .10em;

  text-transform: uppercase;
}


.sui-register__body aside {
  padding: 13px;

  border:
    1px solid
    rgba(255,139,56,.12);

  border-radius: 8px;

  background:
    rgba(255,139,56,.025);
}


.sui-register__body aside p {
  margin: 0;

  color:
    var(--sui-muted);

  font-size: 8px;

  line-height: 1.6;
}


/* =========================================================
   TAGS
========================================================= */

.sui-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}


.sui-tags span {
  padding:
    6px
    8px;

  border:
    1px solid
    rgba(98,230,223,.09);

  border-radius: 5px;

  color:
    rgba(233,248,250,.62);

  font-size: 7px;
}


/* =========================================================
   PROGRAMMES
========================================================= */

.sui-programs {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 12px;
}


.sui-program {
  overflow: hidden;

  border:
    1px solid
    var(--sui-line);

  border-radius: 14px;

  background:
    rgba(255,255,255,.014);
}


.sui-program > header {
  padding: 18px;

  border-bottom:
    1px solid
    var(--sui-line);
}


.sui-program > header span {
  color:
    var(--sui-orange);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.sui-program > header strong {
  display: block;

  margin-top: 8px;

  font-size: 14px;
}


.sui-program > header p {
  margin:
    6px
    0
    0;

  color:
    var(--sui-muted);

  font-size: 8px;

  line-height: 1.55;
}


.sui-program__row {
  border-bottom:
    1px solid
    var(--sui-line);
}


.sui-program__row:last-child {
  border-bottom: 0;
}


.sui-program summary {
  display: grid;

  grid-template-columns:
    26px
    1fr
    auto;

  gap: 8px;

  padding:
    14px
    16px;

  cursor: pointer;

  list-style: none;
}


.sui-program summary::-webkit-details-marker {
  display: none;
}


.sui-program summary b {
  color:
    var(--sui-orange);

  font-size: 7px;
}


.sui-program summary strong {
  display: block;

  font-size: 9px;
}


.sui-program summary p {
  margin:
    4px
    0
    0;

  color:
    var(--sui-muted);

  font-size: 7px;

  line-height: 1.45;
}


.sui-program summary i::before {
  content: "+";

  color:
    var(--sui-aqua);

  font-style: normal;
}


.sui-program details[open]
summary i::before {
  content: "−";
}


.sui-program__body {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  padding:
    0
    16px
    15px
    50px;
}


.sui-program__body span {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(98,230,223,.09);

  border-radius: 4px;

  color:
    rgba(230,247,249,.60);

  font-size: 6px;
}


.sui-program__note {
  width: 100%;

  margin-top: 7px;

  color:
    rgba(157,178,191,.72);

  font-size: 7px;

  line-height: 1.5;
}


/* =========================================================
   GOVERNANCE
========================================================= */

.sui-governance {
  display: grid;

  grid-template-columns:
    .42fr
    1fr;

  gap: 16px;
}


.sui-stakeholders,
.sui-matrix {
  padding: 22px;
}


.sui-stakeholders h3 {
  margin:
    10px
    0
    18px;

  font-size: 17px;
}


.sui-matrix__head,
.sui-matrix__row {
  display: grid;

  grid-template-columns:
    .45fr
    1fr
    1fr;

  gap: 14px;

  padding:
    12px
    0;

  border-bottom:
    1px solid
    var(--sui-line);
}


.sui-matrix__head {
  color:
    var(--sui-aqua);

  font-size: 7px;
}


.sui-matrix__row > span {
  color:
    var(--sui-orange);

  font-size: 7px;
  font-weight: 800;
}


.sui-matrix__row p {
  margin: 0;

  color:
    var(--sui-muted);

  font-size: 8px;

  line-height: 1.55;
}


.sui-class-req {
  display: grid;

  gap: 7px;

  margin-top: 14px;
}


.sui-class-req small {
  color:
    var(--sui-aqua);

  font-size: 6px;
  font-weight: 900;
}


.sui-class-req span {
  color:
    rgba(232,248,250,.64);

  font-size: 8px;
}


.sui-class-req i {
  margin-right: 6px;

  color:
    var(--sui-orange);

  font-style: normal;
}


/* =========================================================
   WORKFLOW
========================================================= */

.sui-workflow {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 10px;
}


.sui-workflow article {
  min-height: 220px;

  padding: 20px;

  border:
    1px solid
    var(--sui-line);

  border-radius: 12px;

  background:
    rgba(255,255,255,.014);
}


.sui-workflow b {
  color:
    var(--sui-orange);

  font-size: 8px;
}


.sui-workflow small {
  display: block;

  margin-top: 23px;

  color:
    var(--sui-aqua);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .10em;

  text-transform: uppercase;
}


.sui-workflow strong {
  display: block;

  margin-top: 6px;

  font-size: 13px;
}


.sui-workflow p {
  margin:
    9px
    0
    0;

  color:
    var(--sui-muted);

  font-size: 8px;

  line-height: 1.6;
}


/* =========================================================
   REPORT GRID
========================================================= */

.sui-report-grid {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  overflow: hidden;

  border:
    1px solid
    var(--sui-line);

  border-radius: 15px;
}


.sui-report-grid article {
  padding: 20px;

  border-right:
    1px solid
    var(--sui-line);
}


.sui-report-grid article:last-child {
  border-right: 0;
}


.sui-report-grid header {
  display: flex;

  gap: 10px;

  padding-bottom: 15px;

  border-bottom:
    1px solid
    var(--sui-line);
}


.sui-report-grid header > span {
  color:
    var(--sui-orange);

  font-size: 7px;
  font-weight: 900;
}


.sui-report-grid small {
  color:
    var(--sui-muted);

  font-size: 6px;
}


.sui-report-grid strong {
  display: block;

  margin-top: 3px;

  font-size: 11px;
}


.sui-report-grid article > div {
  display: grid;

  gap: 7px;

  margin-top: 15px;
}


.sui-report-grid article > div span {
  color:
    rgba(233,248,250,.62);

  font-size: 7px;

  line-height: 1.45;
}


/* =========================================================
   PRIORITY
========================================================= */

.sui-priority {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 9px;
}


.sui-priority article {
  min-height: 180px;

  padding: 19px;

  border:
    1px solid
    var(--sui-line);

  border-radius: 11px;

  background:
    rgba(255,255,255,.014);
}


.sui-priority--1 {
  border-top:
    2px solid
    var(--sui-aqua) !important;
}


.sui-priority--2 {
  border-top:
    2px solid
    var(--sui-cyan) !important;
}


.sui-priority--3 {
  border-top:
    2px solid
    var(--sui-purple) !important;
}


.sui-priority--4 {
  border-top:
    2px solid
    var(--sui-orange) !important;
}


.sui-priority b {
  color:
    var(--sui-orange);

  font-size: 7px;
}


.sui-priority small {
  display: block;

  margin-top: 20px;

  color:
    var(--sui-aqua);

  font-size: 6px;
  font-weight: 900;

  text-transform: uppercase;
}


.sui-priority strong {
  display: block;

  margin-top: 5px;

  font-size: 12px;
}


.sui-priority p {
  margin:
    8px
    0
    0;

  color:
    var(--sui-muted);

  font-size: 8px;

  line-height: 1.55;
}


/* =========================================================
   FINDINGS REGISTERS
========================================================= */

.sui-two-registers {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 14px;
}


.sui-register-panel {
  padding: 21px;
}


.sui-register-panel > header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding-bottom: 14px;

  border-bottom:
    1px solid
    var(--sui-line);
}


.sui-register-panel > header span {
  color:
    var(--sui-aqua);

  font-size: 8px;
  font-weight: 900;
}


.sui-register-panel > header b {
  color:
    var(--sui-orange);

  font-size: 6px;
}


.sui-group-grid {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 18px;

  margin-top: 18px;
}


.sui-group-grid small {
  display: block;

  margin-bottom: 9px;

  color:
    var(--sui-orange);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .10em;

  text-transform: uppercase;
}


.sui-group-grid span {
  display: block;

  padding:
    5px
    0;

  color:
    rgba(233,248,250,.61);

  font-size: 7px;

  border-bottom:
    1px solid
    rgba(125,216,229,.06);
}


.sui-register-panel > p {
  margin:
    17px
    0
    0;

  color:
    var(--sui-muted);

  font-size: 8px;

  line-height: 1.6;
}


/* =========================================================
   DIVER / ROV METHOD
========================================================= */

.sui-method {
  overflow: hidden;

  border:
    1px solid
    var(--sui-line);

  border-radius: 15px;
}


.sui-method__head,
.sui-method__row {
  display: grid;

  grid-template-columns:
    .55fr
    1fr
    1fr;

  gap: 15px;

  padding:
    15px
    18px;

  border-bottom:
    1px solid
    var(--sui-line);
}


.sui-method__head {
  color:
    var(--sui-aqua);

  font-size: 8px;
  font-weight: 900;
}


.sui-method__row > span {
  color:
    var(--sui-orange);

  font-size: 7px;
  font-weight: 800;
}


.sui-method__row p {
  margin: 0;

  color:
    var(--sui-muted);

  font-size: 8px;

  line-height: 1.55;
}


.sui-method-list {
  display: grid;

  gap: 6px;
}


.sui-method-list i {
  color:
    rgba(234,249,251,.62);

  font-size: 7px;

  font-style: normal;
}


.sui-method__criteria {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  padding:
    15px
    18px;
}


.sui-method__criteria small {
  width: 100%;

  color:
    var(--sui-aqua);

  font-size: 6px;
  font-weight: 900;
}


.sui-method__criteria span {
  padding:
    6px
    8px;

  border:
    1px solid
    rgba(98,230,223,.09);

  border-radius: 5px;

  color:
    rgba(234,249,251,.64);

  font-size: 7px;
}


/* =========================================================
   ASSET COVERAGE
========================================================= */

.sui-asset-grid {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  overflow: hidden;

  border:
    1px solid
    var(--sui-line);

  border-radius: 15px;
}


.sui-asset-grid article {
  padding: 21px;

  border-right:
    1px solid
    var(--sui-line);
}


.sui-asset-grid article:last-child {
  border-right: 0;
}


.sui-asset-grid article > b {
  color:
    var(--sui-orange);

  font-size: 7px;
}


.sui-asset-grid small {
  display: block;

  margin:
    15px
    0
    11px;

  color:
    var(--sui-aqua);

  font-size: 7px;
  font-weight: 900;
}


.sui-asset-grid article > span {
  display: block;

  padding:
    5px
    0;

  color:
    rgba(234,249,251,.62);

  font-size: 7px;

  border-bottom:
    1px solid
    rgba(125,216,229,.06);
}


/* =========================================================
   OUTCOMES
========================================================= */

.sui-outcomes {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 10px;
}


.sui-outcomes article {
  display: grid;

  grid-template-columns:
    31px
    1fr;

  gap: 11px;

  min-height: 155px;

  padding: 20px;

  border:
    1px solid
    var(--sui-line);

  border-radius: 11px;

  background:
    rgba(255,255,255,.014);
}


.sui-outcomes > article > span {
  color:
    var(--sui-orange);

  font-size: 7px;
  font-weight: 900;
}


.sui-outcomes strong {
  font-size: 12px;
}


.sui-outcomes p {
  margin:
    7px
    0
    0;

  color:
    var(--sui-muted);

  font-size: 8px;

  line-height: 1.55;
}


/* =========================================================
   SAFETY GATES
========================================================= */

.sui-gates {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 10px;
}


.sui-gates article {
  padding: 20px;

  border:
    1px solid
    var(--sui-line);

  border-radius: 12px;

  background:
    rgba(255,255,255,.012);
}


.sui-gates header {
  padding-bottom: 13px;

  border-bottom:
    1px solid
    var(--sui-line);
}


.sui-gates header span {
  color:
    var(--sui-orange);

  font-size: 6px;
  font-weight: 900;
}


.sui-gates header strong {
  display: block;

  margin-top: 5px;

  font-size: 11px;
}


.sui-check-list {
  display: grid;

  gap: 6px;

  margin-top: 13px;
}


.sui-check-list i {
  color:
    rgba(234,249,251,.62);

  font-size: 7px;

  font-style: normal;
}


.sui-environment {
  margin-top: 12px;

  padding: 20px;

  background:
    rgba(24,196,215,.02);
}


.sui-environment > header {
  display: flex;

  justify-content: space-between;

  gap: 30px;

  padding-bottom: 15px;

  border-bottom:
    1px solid
    var(--sui-line);
}


.sui-environment > header span {
  color:
    var(--sui-aqua);

  font-size: 8px;
  font-weight: 900;
}


.sui-environment > header p {
  margin: 0;

  color:
    var(--sui-muted);

  font-size: 8px;
}


.sui-environment__grid {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 25px;

  margin-top: 16px;
}


.sui-environment__grid small {
  color:
    var(--sui-orange);

  font-size: 6px;
  font-weight: 900;

  text-transform: uppercase;
}


/* =========================================================
   DELIVERY MODEL
========================================================= */

.sui-pillars {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  overflow: hidden;

  border:
    1px solid
    var(--sui-line);

  border-radius: 14px;
}


.sui-pillars article {
  padding: 20px;

  border-right:
    1px solid
    var(--sui-line);
}


.sui-pillars article:last-child {
  border-right: 0;
}


.sui-pillars article > b {
  color:
    var(--sui-orange);

  font-size: 7px;
}


.sui-pillars small {
  display: block;

  margin:
    13px
    0
    9px;

  color:
    var(--sui-aqua);

  font-size: 7px;
  font-weight: 900;
}


.sui-pillars article > span {
  display: block;

  padding:
    5px
    0;

  color:
    rgba(234,249,251,.62);

  font-size: 7px;

  border-bottom:
    1px solid
    rgba(125,216,229,.06);
}


.sui-team {
  position: relative;

  height: 360px;

  margin:
    18px
    0
    0;

  overflow: hidden;

  border:
    1px solid
    var(--sui-line);

  border-radius:
    18px
    18px
    18px
    48px;
}


.sui-team::after {
  position: absolute;

  inset: 0;

  content: "";

  background:
    linear-gradient(
      transparent 30%,
      rgba(3,23,37,.90)
    );
}


.sui-team figcaption {
  position: absolute;
  z-index: 3;

  right: 25px;
  bottom: 23px;
  left: 25px;
}


.sui-team figcaption small {
  color:
    var(--sui-aqua);

  font-size: 7px;
  font-weight: 900;
}


.sui-team figcaption strong {
  display: block;

  margin-top: 6px;

  font-size: 17px;
}


/* =========================================================
   QUOTE INPUT
========================================================= */

.sui-quote-grid {
  display: grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  overflow: hidden;

  border:
    1px solid
    var(--sui-line);

  border-radius: 14px;
}


.sui-quote-grid article {
  padding: 18px;

  border-right:
    1px solid
    var(--sui-line);
}


.sui-quote-grid article:last-child {
  border-right: 0;
}


.sui-quote-grid header span {
  color:
    var(--sui-orange);

  font-size: 6px;
  font-weight: 900;
}


.sui-quote-grid header strong {
  display: block;

  min-height: 30px;

  margin-top: 6px;

  font-size: 10px;
}


.sui-quote-grid article > i {
  display: block;

  padding:
    5px
    0;

  color:
    rgba(234,249,251,.61);

  font-size: 7px;

  font-style: normal;

  border-bottom:
    1px solid
    rgba(125,216,229,.06);
}


.sui-quote-action {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 16px;

  padding: 18px;

  border:
    1px solid
    rgba(98,230,223,.12);

  border-radius: 11px;

  background:
    rgba(24,196,215,.025);
}


.sui-quote-action small {
  display: block;

  color:
    var(--sui-aqua);

  font-size: 6px;
  font-weight: 900;
}


.sui-quote-action strong {
  display: block;

  margin-top: 4px;

  font-size: 11px;
}


/* =========================================================
   FAQ
========================================================= */

.sui-faq-layout {
  display: grid;

  grid-template-columns:
    .42fr
    1fr;

  gap: 40px;
}


.sui-faq-intro {
  position: sticky;

  top: 30px;

  align-self: start;
}


.sui-faq-intro > p:not(.sui-kicker) {
  color:
    var(--sui-muted);

  font-size: 10px;

  line-height: 1.65;
}


.sui-faq-contact {
  margin-top: 24px;

  padding: 17px;

  border:
    1px solid
    var(--sui-line);

  border-radius: 10px;
}


.sui-faq-contact small {
  color:
    var(--sui-aqua);

  font-size: 6px;
  font-weight: 900;
}


.sui-faq-contact strong {
  display: block;

  margin-top: 5px;

  font-size: 11px;
}


.sui-faq-contact a {
  display: inline-block;

  margin-top: 12px;

  color:
    var(--sui-orange);

  font-size: 8px;
}


.sui-faq-items {
  display: grid;

  gap: 8px;
}


.sui-faq-items details {
  border:
    1px solid
    var(--sui-line);

  border-radius: 10px;

  background:
    rgba(255,255,255,.014);
}


.sui-faq-items summary {
  display: grid;

  grid-template-columns:
    30px
    1fr
    auto;

  gap: 10px;

  min-height: 62px;

  align-items: center;

  padding:
    13px
    16px;

  cursor: pointer;

  list-style: none;
}


.sui-faq-items summary::-webkit-details-marker {
  display: none;
}


.sui-faq-items summary span {
  color:
    var(--sui-orange);

  font-size: 7px;
  font-weight: 900;
}


.sui-faq-items summary strong {
  font-size: 9px;
}


.sui-faq-items summary i::before {
  content: "+";

  color:
    var(--sui-aqua);

  font-style: normal;
}


.sui-faq-items details[open]
summary i::before {
  content: "−";
}


.sui-faq-items details p {
  margin: 0;

  padding:
    0
    16px
    16px
    56px;

  color:
    var(--sui-muted);

  font-size: 9px;

  line-height: 1.65;
}


/* =========================================================
   FINAL CTA
========================================================= */

.sui-final {
  position: relative;
  z-index: 3;

  display: flex;

  min-height: 78svh;

  align-items: center;

  padding:
    clamp(90px,10vw,150px)
    0
    75px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 14% 50%,
      rgba(24,196,215,.13),
      transparent 31%
    ),
    radial-gradient(
      circle at 87% 38%,
      rgba(139,92,246,.11),
      transparent 31%
    ),
    #041b29;
}


.sui-final__rings {
  position: absolute;

  inset: 0;

  opacity: .45;

  pointer-events: none;
}


.sui-final__rings span {
  position: absolute;

  top: 50%;
  left: 50%;

  border:
    1px solid
    rgba(98,230,223,.12);

  border-radius: 50%;

  transform:
    translate(-50%,-50%);
}


.sui-final__rings span:nth-child(1) {
  width: 360px;
  height: 360px;
}


.sui-final__rings span:nth-child(2) {
  width: 600px;
  height: 600px;
}


.sui-final__rings span:nth-child(3) {
  width: 840px;
  height: 840px;
}


.sui-final__content {
  position: relative;
  z-index: 2;

  max-width: 860px;

  text-align: center;
}


.sui-final__content > p:not(.sui-kicker) {
  max-width: 680px;

  margin:
    18px
    auto
    0;

  color:
    var(--sui-muted);

  font-size: 12px;

  line-height: 1.7;
}


.sui-footer {
  position: absolute;

  right: 30px;
  bottom: 20px;
  left: 30px;

  display: flex;

  justify-content: space-between;

  color:
    rgba(157,178,191,.50);

  font-size: 7px;

  letter-spacing: .08em;
}


/* =========================================================
   REVEAL
========================================================= */

.sui-page [data-reveal] {
  opacity: 0;

  transform:
    translateY(18px);

  transition:
    opacity .55s ease,
    transform .55s ease;
}


.sui-page [data-reveal].is-visible {
  opacity: 1;

  transform: none;
}


/* =========================================================
   FOCUS
========================================================= */

.sui-page a:focus-visible,
.sui-page summary:focus-visible {
  outline:
    2px solid
    var(--sui-aqua);

  outline-offset: 3px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px) {

  .sui-depth {
    display: none;
  }


  .sui-mobile-depth {
    position: fixed;
    z-index: 999;

    right: 12px;
    bottom: 14px;
    left: 12px;

    display: grid;

    grid-template-columns:
      minmax(0,1fr)
      auto;

    min-height: 46px;

    align-items: center;

    gap: 14px;

    padding:
      0
      13px;

    overflow: hidden;

    border:
      1px solid
      rgba(98,230,223,.24);

    border-radius: 11px;

    background:
      rgba(3,23,37,.95);

    box-shadow:
      0 12px 40px
      rgba(0,8,15,.38);

    transition:
      opacity .2s ease,
      transform .2s ease;
  }


  .sui-mobile-depth.is-hidden {
    opacity: 0;

    pointer-events: none;

    transform:
      translateY(10px);
  }


  .sui-mobile-depth__fill {
    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 2px;

    transform:
      scaleX(
        var(--sui-depth-progress)
      );

    transform-origin:
      left;

    background:
      linear-gradient(
        90deg,
        var(--sui-cyan),
        var(--sui-purple),
        var(--sui-orange)
      );
  }


  .sui-mobile-depth small {
    overflow: hidden;

    color:
      rgba(234,249,251,.62);

    font-size: 7px;

    text-overflow: ellipsis;

    white-space: nowrap;
  }


  .sui-mobile-depth strong {
    color:
      var(--sui-aqua);

    font-size: 11px;
  }


  .sui-topline {
    right: 28px;
  }


  .sui-hero__main {
    grid-template-columns: 1fr;

    min-height: auto;
  }


  .sui-hero__copy {
    min-height: 100svh;

    padding:
      92px
      28px
      52px;
  }


  .sui-hero__copy::after {
    display: none;
  }


  .sui-hero__visual-wrap {
    padding:
      0
      28px
      28px;
  }


  .sui-hero__visual {
    height: 660px;

    min-height: 660px;
  }


  .sui-rail {
    grid-template-columns:
      repeat(2,1fr);
  }


  .sui-rail a {
    min-height: 74px;

    border-bottom:
      1px solid
      var(--sui-line);
  }


  .sui-split-heading,
  .sui-brief,
  .sui-governance,
  .sui-faq-layout {
    grid-template-columns: 1fr;
  }


  .sui-risk-grid,
  .sui-report-grid,
  .sui-asset-grid,
  .sui-pillars {
    grid-template-columns:
      repeat(2,1fr);
  }


  .sui-risk-grid article,
  .sui-report-grid article,
  .sui-asset-grid article,
  .sui-pillars article {
    border-bottom:
      1px solid
      var(--sui-line);
  }


  .sui-programs {
    grid-template-columns: 1fr;
  }


  .sui-workflow {
    grid-template-columns:
      repeat(2,1fr);
  }


  .sui-priority {
    grid-template-columns:
      repeat(2,1fr);
  }


  .sui-quote-grid {
    grid-template-columns:
      repeat(2,1fr);
  }


  .sui-quote-grid article {
    border-bottom:
      1px solid
      var(--sui-line);
  }


  .sui-faq-intro {
    position: static;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px) {

  .sui-shell {
    width:
      calc(100% - 30px);
  }


  .sui-topline {
    top: 18px;
    right: 16px;
    left: 16px;
  }


  .sui-topline span:last-child {
    display: none;
  }


  .sui-hero__copy {
    min-height: 100svh;

    padding:
      74px
      16px
      38px;
  }


  .sui-hero h1,
  .sui-section h2,
  .sui-final h2 {
    font-size:
      clamp(34px,8.5vw,37px);
  }


  .sui-highlights {
    grid-template-columns: 1fr;
  }


  .sui-actions {
    flex-direction: column;
  }


  .sui-button {
    width: 100%;
  }


  .sui-hero__status {
    grid-template-columns: 1fr;
  }


  .sui-hero__status span {
    padding:
      11px
      0;
  }


  .sui-hero__status span + span {
    border-top:
      1px solid
      var(--sui-line);

    border-left: 0;
  }


  .sui-hero__visual-wrap {
    padding:
      0
      14px
      14px;
  }


  .sui-hero__visual {
    height: 580px;

    min-height: 580px;

    border-radius:
      20px
      20px
      20px
      48px;
  }


  .sui-sonar {
    right: -45px;

    width: 245px;
  }


  .sui-hero__panel {
    right: 14px;
    bottom: 106px;
    left: 14px;

    padding: 16px;
  }


  .sui-hero__steps {
    right: 14px;
    bottom: 14px;
    left: 14px;

    grid-template-columns:
      repeat(2,1fr);
  }


  .sui-rail {
    grid-template-columns: 1fr;
  }


  .sui-rail a {
    min-height: 64px;
  }


  .sui-section {
    padding:
      70px
      0;
  }


  .sui-facts,
  .sui-metrics,
  .sui-risk-grid,
  .sui-workflow,
  .sui-report-grid,
  .sui-priority,
  .sui-two-registers,
  .sui-asset-grid,
  .sui-outcomes,
  .sui-gates,
  .sui-pillars,
  .sui-quote-grid,
  .sui-environment__grid {
    grid-template-columns: 1fr;
  }


  .sui-facts article,
  .sui-metrics article,
  .sui-risk-grid article,
  .sui-report-grid article,
  .sui-asset-grid article,
  .sui-pillars article,
  .sui-quote-grid article {
    border-right: 0;

    border-bottom:
      1px solid
      var(--sui-line);
  }


  .sui-register__head {
    display: none;
  }


  .sui-register summary {
    grid-template-columns:
      36px
      1fr
      auto;

    min-height: 68px;

    padding:
      12px
      14px;
  }


  .sui-register summary > p {
    display: none;
  }


  .sui-register__body {
    grid-template-columns: 1fr;

    padding:
      0
      14px
      17px
      50px;
  }


  .sui-matrix__head,
  .sui-matrix__row,
  .sui-method__head,
  .sui-method__row {
    grid-template-columns: 1fr;
  }


  .sui-group-grid {
    grid-template-columns: 1fr;
  }


  .sui-quote-action,
  .sui-environment > header {
    align-items: flex-start;

    flex-direction: column;
  }


  .sui-footer {
    position: static;

    display: grid;

    gap: 5px;

    margin-top: 55px;

    text-align: center;
  }


  .sui-drops > i:nth-child(n+9) {
    display: none;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce) {

  .sui-page *,
  .sui-page *::before,
  .sui-page *::after {
    scroll-behavior:
      auto !important;

    animation:
      none !important;

    transition-duration:
      .01ms !important;
  }

}




/*section hero end here*/