/* Hull Cleaning & Propeller Polishing: page-specific styles. */


/*complete code start here*/

/* =========================================================
   SINDYBAD — UNDERWATER MARINE SERVICES
   FINAL PREMIUM FULL-WIDTH VERSION
========================================================= */

.sbuh,
.sbuh * {
  box-sizing: border-box;
}


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

.sbuh {
  --sbuh-site-header: 72px;

  --sbuh-navy: #031725;
  --sbuh-navy-2: #072e43;
  --sbuh-navy-3: #0a3b51;

  --sbuh-cyan: #18c4d7;
  --sbuh-aqua: #62e6df;

  --sbuh-purple: #8b5cf6;
  --sbuh-orange: #ff8b38;

  --sbuh-white: #ffffff;
  --sbuh-ink: #f3fbff;
  --sbuh-muted: #9db2bf;

  --sbuh-line:
    rgba(125,216,229,.15);

  position: relative;
  isolation: isolate;

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

  min-width: 0;

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

  overflow: clip;

  color:
    var(--sbuh-ink);

  background:
    #031725;

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


/* subtle global engineering texture */

.sbuh::before {
  position: absolute;

  z-index: 0;

  inset: 0;

  content: "";

  pointer-events: none;

  opacity: .32;

  background:
    radial-gradient(
      circle at 7% 7%,
      rgba(98,230,223,.10),
      transparent 29rem
    ),
    radial-gradient(
      circle at 91% 16%,
      rgba(139,92,246,.09),
      transparent 31rem
    ),
    linear-gradient(
      rgba(98,230,223,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(98,230,223,.025) 1px,
      transparent 1px
    );

  background-size:
    auto,
    auto,
    80px 80px,
    80px 80px;
}


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

.sbuh-chapter {
  position: relative;

  z-index: 2;

  width: 100%;

  scroll-margin-top:
    calc(
      var(--sbuh-site-header) +
      18px
    );
}


/* =========================================================
   HERO — TRUE FULL SCREEN
========================================================= */

.sbuh-hero {
  display: flex;

  flex-direction: column;

  width: 100%;

  min-height:
    calc(
      100svh -
      var(--sbuh-site-header)
    );

  background:
    var(--sbuh-navy);
}


.sbuh-hero__content {
  display: grid;

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

  flex: 1;

  width: 100%;

  min-height:
    calc(
      100svh -
      var(--sbuh-site-header) -
      88px
    );
}


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

.sbuh-hero__copy {
  position: relative;

  display: flex;

  min-width: 0;

  align-items: center;

  padding:
    clamp(46px,6vh,76px)
    clamp(42px,6vw,116px);

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(24,196,215,.10),
      transparent 31%
    ),
    radial-gradient(
      circle at 88% 90%,
      rgba(139,92,246,.06),
      transparent 26%
    ),
    linear-gradient(
      145deg,
      #031725,
      #051d2b
    );
}


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

  top: 7%;
  right: 0;
  bottom: 7%;

  width: 1px;

  content: "";

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


.sbuh-hero__copy-inner {
  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 700px;
}


/* =========================================================
   KICKER
========================================================= */

.sbuh-kicker {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 20px;

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

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

  letter-spacing: .15em;

  text-transform: uppercase;
}


.sbuh-kicker span {
  color:
    var(--sbuh-aqua);
}


.sbuh-kicker i {
  width: 38px;
  height: 1px;

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


/* =========================================================
   CLASSIFICATION
========================================================= */

.sbuh-classification {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 15px;
}


.sbuh-classification > span {
  display: grid;

  width: 32px;
  height: 32px;

  place-items: center;

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

  border-radius: 7px;

  color:
    var(--sbuh-aqua);

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

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


.sbuh-classification small {
  display: block;

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

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

  letter-spacing: .11em;
}


.sbuh-classification strong {
  display: block;

  margin-top: 3px;

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

  font-size: 8px;
}


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

.sbuh-hero h1 {
  max-width: 680px;

  margin: 0;

  color:
    var(--sbuh-white);

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

  font-weight: 880;

  line-height: 1.01;

  letter-spacing:
    -.045em;

  text-wrap: balance;
}


.sbuh-hero h1 span {
  display: block;

  margin-top: 6px;

  color:
    var(--sbuh-aqua);
}


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

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


.sbuh-hero__secondary {
  max-width: 620px;

  margin:
    11px
    0
    0;

  color:
    var(--sbuh-muted);

  font-size: 11px;

  line-height: 1.65;
}


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

.sbuh-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 22px;
}


.sbuh-tags span {
  padding:
    7px
    10px;

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

  border-radius: 5px;

  color:
    rgba(224,247,249,.67);

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

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


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

.sbuh-actions,
.sbuh-final__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 26px;
}


.sbuh-button {
  display: inline-flex;

  min-height: 47px;

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

  gap: 14px;

  padding:
    0
    18px;

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

  border-radius: 7px;

  color:
    var(--sbuh-white);

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

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

  text-decoration: none;

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


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

  border-color:
    var(--sbuh-cyan);

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

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


@media (hover:hover) {

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

}


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

.sbuh-status {
  display: grid;

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

  margin-top: 31px;

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

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


.sbuh-status > div {
  padding:
    13px
    12px;
}


.sbuh-status > div:first-child {
  padding-left: 0;
}


.sbuh-status > div + div {
  border-left:
    1px solid
    rgba(125,216,229,.08);
}


.sbuh-status span {
  display: block;

  color:
    var(--sbuh-orange);

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


.sbuh-status strong {
  display: block;

  margin-top: 5px;

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

  font-size: 9px;
}


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

.sbuh-hero__visual {
  min-width: 0;

  padding:
    12px
    12px
    12px
    0;
}


.sbuh-hero__figure {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 100%;

  margin: 0;

  overflow: hidden;

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

  border-radius:
    26px
    26px
    26px
    80px;

  background:
    #02121d;

  box-shadow:
    0 28px 78px
    rgba(0,7,13,.32);
}


.sbuh-hero__image {
  position: absolute;

  z-index: 1;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(.79)
    contrast(1.08)
    brightness(.69);

  transform:
    translate3d(
      var(--sbuh-x,0),
      var(--sbuh-y,0),
      0
    )
    scale(1.035);

  transition:
    transform .8s
    cubic-bezier(.2,.7,.2,1);
}


.sbuh-hero__shade {
  position: absolute;

  z-index: 2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(2,14,24,.06),
      rgba(2,14,24,.03) 34%,
      rgba(2,14,24,.25) 64%,
      rgba(2,13,22,.88)
    ),
    linear-gradient(
      90deg,
      rgba(3,22,36,.23),
      transparent 58%
    ),
    radial-gradient(
      circle at 72% 35%,
      rgba(24,196,215,.16),
      transparent 30%
    );
}


.sbuh-hero__grid {
  position: absolute;

  z-index: 3;

  inset: 0;

  opacity: .17;

  pointer-events: none;

  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 55% 44%,
      #000,
      transparent 77%
    );

  mask-image:
    radial-gradient(
      circle at 55% 44%,
      #000,
      transparent 77%
    );
}


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

.sbuh-sonar {
  position: absolute;

  z-index: 4;

  top: 43%;
  right: 7%;

  width:
    min(49%,430px);

  aspect-ratio: 1;

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

  border-radius: 50%;

  transform:
    translateY(-50%);

  pointer-events: none;
}


.sbuh-sonar::before,
.sbuh-sonar::after {
  position: absolute;

  border-radius: 50%;

  content: "";
}


.sbuh-sonar::before {
  inset: 18%;

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


.sbuh-sonar::after {
  inset: 36%;

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


.sbuh-sonar > span {
  position: absolute;

  top: 50%;
  left: 50%;
}


.sbuh-sonar > span:nth-child(1) {
  width: 112%;
  height: 1px;

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

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


.sbuh-sonar > span:nth-child(2) {
  width: 1px;
  height: 112%;

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

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


.sbuh-sonar > span:nth-child(3) {
  width: 72%;
  height: 72%;

  border:
    1px solid
    rgba(24,196,215,.13);

  border-radius: 50%;

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


.sbuh-sonar__node {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sbuh-aqua);

  box-shadow:
    0 0 0 5px
    rgba(98,230,223,.09),
    0 0 16px
    rgba(98,230,223,.42);
}


.sbuh-sonar__node--1 {
  top: 12%;
  right: 17%;
}


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

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


.sbuh-sonar__node--3 {
  bottom: 14%;
  left: 12%;

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


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

.sbuh-hero__topline {
  position: absolute;

  z-index: 8;

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

  display: flex;

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


.sbuh-hero__topline span {
  display: flex;

  align-items: center;

  gap: 8px;

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

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

  letter-spacing: .14em;
}


.sbuh-hero__topline span i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sbuh-aqua);

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


.sbuh-hero__topline b {
  color:
    rgba(255,255,255,.34);

  font-size: 7px;

  letter-spacing: .13em;
}


.sbuh-hero__ghost {
  position: absolute;

  z-index: 3;

  top: 44%;
  right: 9%;

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

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

  font-weight: 900;

  line-height: 1;

  letter-spacing:
    -.08em;

  transform:
    translateY(-50%);
}


.sbuh-hero__vertical {
  position: absolute;

  z-index: 6;

  top: 50%;
  right: 20px;

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

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

  letter-spacing: .18em;

  transform:
    translateY(-50%)
    rotate(90deg);
}


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

.sbuh-hero__panel {
  position: absolute;

  z-index: 8;

  right:
    clamp(24px,3vw,46px);

  bottom:
    clamp(74px,7vw,104px);

  left:
    clamp(24px,3vw,46px);

  max-width: 670px;

  padding:
    20px
    22px;

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

  border-radius: 13px;

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

  box-shadow:
    0 22px 52px
    rgba(0,0,0,.23);
}


.sbuh-panel__head {
  display: flex;

  align-items: center;

  gap: 9px;
}


.sbuh-panel__head span {
  color:
    var(--sbuh-aqua);

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

  letter-spacing: .13em;
}


.sbuh-panel__head i {
  width: 34px;
  height: 1px;

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


.sbuh-panel__head small {
  color:
    rgba(255,255,255,.38);

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


.sbuh-hero__panel h2 {
  margin:
    9px
    0
    0;

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

  line-height: 1.05;

  letter-spacing:
    -.035em;
}


.sbuh-hero__panel p {
  max-width: 540px;

  margin:
    8px
    0
    0;

  color:
    rgba(228,244,248,.66);

  font-size: 10px;

  line-height: 1.6;
}


.sbuh-panel__tags {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 14px;

  padding-top: 12px;

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


.sbuh-panel__tags span {
  padding:
    5px
    7px;

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

  border-radius: 5px;

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

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


/* =========================================================
   HERO BOTTOM STRIP
========================================================= */

.sbuh-hero__strip {
  position: absolute;

  z-index: 8;

  right: 24px;
  bottom: 20px;
  left: 24px;

  display: grid;

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

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

  border-radius: 9px;

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


.sbuh-hero__strip > div {
  padding:
    9px
    12px;
}


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


.sbuh-hero__strip span {
  display: block;

  color:
    var(--sbuh-orange);

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


.sbuh-hero__strip strong {
  display: block;

  margin-top: 3px;

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

  font-size: 7px;
}


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

.sbuh-rail {
  display: grid;

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

  width: 100%;

  min-height: 88px;

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

  background:
    #041a29;
}


.sbuh-rail a {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 10px;

  min-width: 0;

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

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

  color:
    inherit;

  text-decoration: none;
}


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

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


.sbuh-rail small {
  display: block;

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

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

  letter-spacing: .10em;
}


.sbuh-rail strong {
  display: block;

  margin-top: 4px;

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

  font-size: 9px;
}


.sbuh-rail a > i {
  color:
    var(--sbuh-orange);

  font-style: normal;
}


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

.sbuh-depth {
  position: fixed;

  z-index: 900;

  top:
    calc(
      var(--sbuh-site-header) +
      9vh
    );

  right: 12px;

  display: grid;

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

  width: 76px;

  height:
    min(
      76vh,
      720px
    );

  padding:
    12px
    8px;

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

  border-radius: 18px;

  color:
    var(--sbuh-white);

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

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

  opacity: 1;

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


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

  pointer-events: none;

  transform:
    translateX(14px);
}


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


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

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

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

  letter-spacing: .12em;

  text-transform: uppercase;
}


.sbuh-depth__readout strong {
  display: block;

  margin-top: 4px;

  color:
    var(--sbuh-aqua);

  font-size: 15px;
}


.sbuh-depth__track {
  position: relative;

  width: 2px;

  height:
    calc(100% - 24px);

  margin:
    13px
    auto;

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


.sbuh-depth__fill {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 0;

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

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


.sbuh-depth__marker {
  position: absolute;

  z-index: 5;

  top: 0;
  left: 50%;

  display: grid;

  width: 31px;
  height: 31px;

  place-items: center;

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

  border-radius: 50%;

  color:
    var(--sbuh-white);

  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%);
}


.sbuh-depth__marker i {
  position: absolute;

  inset: 3px;

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

  border-radius: 50%;
}


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

  letter-spacing: .06em;
}


.sbuh-depth__mark {
  position: absolute;

  left: 50%;

  width: 48px;

  transform:
    translateX(-50%);
}


.sbuh-depth__mark i {
  position: absolute;

  left: 23px;

  width: 7px;
  height: 1px;

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


.sbuh-depth__mark small {
  position: absolute;

  top: -4px;
  right: 31px;

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

  font-size: 6px;
}


.sbuh-depth__chapter {
  overflow: hidden;
}


.sbuh-depth__chapter strong {
  display: block;

  margin-top: 5px;

  overflow: hidden;

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

  font-size: 7px;

  line-height: 1.25;

  text-overflow: ellipsis;

  white-space: nowrap;
}


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

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


/* =========================================================
   STANDARD CONTENT WIDTH
   Only INNER content is centered — page stays full width.
========================================================= */

.sbuh-shell {
  position: relative;

  z-index: 2;

  width:
    min(
      1320px,
      calc(100% - 80px)
    );

  margin-inline: auto;
}


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

.sbuh-section {
  position: relative;

  width: 100%;

  padding:
    clamp(84px,9vw,134px)
    0;

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

  background:
    #031725;
}


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


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

.sbuh-section-head {
  display: grid;

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

  gap:
    clamp(50px,8vw,120px);

  align-items: end;

  margin-bottom:
    clamp(42px,5vw,70px);
}


.sbuh-index {
  margin:
    0
    0
    14px;

  color:
    var(--sbuh-aqua);

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

  letter-spacing: .16em;

  text-transform: uppercase;
}


.sbuh-section h2,
.sbuh-final h2 {
  margin: 0;

  color:
    var(--sbuh-white);

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

  line-height: 1.02;

  letter-spacing:
    -.045em;
}


.sbuh-section h2 span,
.sbuh-final h2 span {
  color:
    var(--sbuh-aqua);
}


.sbuh-section-head > p {
  margin: 0;

  color:
    var(--sbuh-muted);

  font-size: 13px;

  line-height: 1.72;
}


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

.sbuh-overview {
  display: grid;

  grid-template-columns:
    minmax(0,.8fr)
    minmax(0,1.2fr);

  gap:
    clamp(36px,6vw,90px);

  align-items: center;
}


.sbuh-prose {
  display: grid;

  gap: 16px;
}


.sbuh-prose p {
  margin: 0;

  color:
    var(--sbuh-muted);

  font-size: 13px;

  line-height: 1.78;
}


.sbuh-prose p:first-child {
  color:
    rgba(243,251,255,.82);
}


.sbuh-feature {
  position: relative;

  min-height: 440px;

  margin: 0;

  overflow: hidden;

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

  border-radius:
    22px
    22px
    22px
    58px;

  background:
    #041b29;
}


.sbuh-feature img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(.78)
    brightness(.70);
}


.sbuh-feature::after {
  position: absolute;

  inset: 0;

  content: "";

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


.sbuh-feature figcaption {
  position: absolute;

  z-index: 3;

  right: 24px;
  bottom: 22px;
  left: 24px;
}


.sbuh-feature small {
  color:
    var(--sbuh-aqua);

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

  letter-spacing: .12em;
}


.sbuh-feature strong {
  display: block;

  margin-top: 6px;

  font-size: 16px;
}


/* =========================================================
   METRICS
========================================================= */

.sbuh-metrics {
  display: grid;

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

  margin-top: 48px;

  overflow: hidden;

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

  border-radius: 12px;

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


.sbuh-metrics article {
  padding: 22px;
}


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


.sbuh-metrics span {
  color:
    var(--sbuh-orange);

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


.sbuh-metrics strong {
  display: block;

  margin-top: 8px;

  color:
    var(--sbuh-aqua);

  font-size: 16px;
}


.sbuh-metrics p {
  margin:
    5px
    0
    0;

  color:
    var(--sbuh-muted);

  font-size: 9px;
}


/* =========================================================
   CENTER HEADING
========================================================= */

.sbuh-center-head {
  max-width: 790px;

  margin:
    0
    auto
    52px;

  text-align: center;
}


.sbuh-center-head > p:last-child {
  max-width: 650px;

  margin:
    18px
    auto
    0;

  color:
    var(--sbuh-muted);

  font-size: 13px;

  line-height: 1.7;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.sbuh-service-grid {
  display: grid;

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

  gap: 22px;
}


.sbuh-service-card {
  overflow: hidden;

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

  border-radius: 19px;

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


.sbuh-service-card__media {
  position: relative;

  height: 330px;

  overflow: hidden;
}


.sbuh-service-card__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(.78)
    brightness(.66);

  transition:
    transform .45s ease;
}


@media (hover:hover) {

  .sbuh-service-card:hover
  .sbuh-service-card__media img {
    transform:
      scale(1.025);
  }

}


.sbuh-service-card__media::after {
  position: absolute;

  inset: 0;

  content: "";

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


.sbuh-service-card__media > span {
  position: absolute;

  z-index: 3;

  top: 20px;
  right: 20px;

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

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

  letter-spacing: .15em;
}


.sbuh-service-card__body {
  padding: 25px;
}


.sbuh-mini {
  margin:
    0
    0
    9px;

  color:
    var(--sbuh-aqua);

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

  letter-spacing: .14em;
}


.sbuh-service-card h3 {
  margin: 0;

  color:
    var(--sbuh-white);

  font-size: 23px;

  line-height: 1.08;

  letter-spacing:
    -.035em;
}


.sbuh-service-card__body >
p:not(.sbuh-mini) {
  margin:
    13px
    0
    0;

  color:
    var(--sbuh-muted);

  font-size: 11px;

  line-height: 1.7;
}


.sbuh-chip-grid {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 20px;
}


.sbuh-chip-grid span {
  padding:
    6px
    8px;

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

  border-radius: 5px;

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

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

  font-size: 7px;
}


/* =========================================================
   BENEFITS
========================================================= */

.sbuh-benefits {
  display: grid;

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

  overflow: hidden;

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

  border-radius: 15px;
}


.sbuh-benefits article {
  min-height: 190px;

  padding: 24px;

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

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

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


.sbuh-benefits article:nth-child(3n) {
  border-right: 0;
}


.sbuh-benefits article:nth-child(n+4) {
  border-bottom: 0;
}


.sbuh-benefits span {
  color:
    var(--sbuh-orange);

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


.sbuh-benefits strong {
  display: block;

  margin-top: 24px;

  color:
    var(--sbuh-white);

  font-size: 15px;
}


.sbuh-benefits p {
  margin:
    9px
    0
    0;

  color:
    var(--sbuh-muted);

  font-size: 10px;

  line-height: 1.6;
}


/* =========================================================
   PROCESS
========================================================= */

.sbuh-process {
  display: grid;

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

  gap: 10px;

  margin: 0;

  padding: 0;

  list-style: none;
}


.sbuh-process li {
  min-height: 220px;

  padding: 21px;

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

  border-radius: 12px;

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


.sbuh-process span {
  color:
    var(--sbuh-orange);

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


.sbuh-process small {
  display: block;

  margin-top: 23px;

  color:
    var(--sbuh-aqua);

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

  letter-spacing: .12em;
}


.sbuh-process strong {
  display: block;

  margin-top: 6px;

  font-size: 14px;
}


.sbuh-process p {
  margin:
    10px
    0
    0;

  color:
    var(--sbuh-muted);

  font-size: 10px;

  line-height: 1.6;
}


/* =========================================================
   DELIVERABLES
========================================================= */

.sbuh-deliverables {
  display: grid;

  grid-template-columns:
    .82fr
    1.18fr;

  gap: 50px;

  padding:
    clamp(28px,4vw,52px);

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

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(7,46,67,.52),
      rgba(3,23,37,.70)
    );
}


.sbuh-deliverables__intro > p:not(.sbuh-index) {
  max-width: 470px;

  color:
    var(--sbuh-muted);

  font-size: 12px;

  line-height: 1.7;
}


.sbuh-stamp {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  margin-top: 24px;
}


.sbuh-stamp strong {
  display: grid;

  width: 43px;
  height: 43px;

  place-items: center;

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

  border-radius: 50%;

  color:
    var(--sbuh-aqua);
}


.sbuh-stamp span {
  color:
    var(--sbuh-muted);

  font-size: 7px;

  letter-spacing: .12em;
}


.sbuh-deliverables__list {
  display: grid;

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


.sbuh-deliverables__list span {
  display: flex;

  min-height: 58px;

  align-items: center;

  gap: 10px;

  padding:
    10px
    13px;

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

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

  font-size: 9px;
}


.sbuh-deliverables__list b {
  color:
    var(--sbuh-orange);

  font-size: 7px;
}


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

.sbuh-note {
  max-width: 900px;

  margin:
    28px
    auto
    0;

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

  font-size: 9px;

  line-height: 1.7;

  text-align: center;
}


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

.sbuh-final {
  position: relative;

  width: 100%;

  padding:
    clamp(75px,8vw,115px)
    0;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(24,196,215,.13),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 40%,
      rgba(139,92,246,.10),
      transparent 30%
    ),
    #041b29;
}


.sbuh-final__grid {
  display: grid;

  grid-template-columns:
    1fr
    auto;

  gap: 50px;

  align-items: center;
}


.sbuh-final p:not(.sbuh-index) {
  max-width: 650px;

  color:
    var(--sbuh-muted);

  font-size: 12px;

  line-height: 1.7;
}


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

@media (max-width:1050px) {

  .sbuh-hero__content {
    grid-template-columns: 1fr;

    min-height: auto;
  }


  .sbuh-hero__copy {
    min-height:
      calc(
        100svh -
        var(--sbuh-site-header)
      );

    padding:
      76px
      28px
      48px;
  }


  .sbuh-hero__copy-inner {
    max-width: 830px;
  }


  .sbuh-hero__visual {
    padding:
      0
      28px
      28px;
  }


  .sbuh-hero__figure {
    height: 670px;

    min-height: 670px;
  }


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


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

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


  .sbuh-section-head {
    grid-template-columns: 1fr;

    gap: 22px;
  }


  .sbuh-overview {
    grid-template-columns: 1fr;
  }


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


  .sbuh-final__grid {
    grid-template-columns: 1fr;
  }

}


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

@media (max-width:700px) {

  .sbuh-depth {
    display: none;
  }


  .sbuh-mobile-depth {
    position: fixed;

    z-index: 900;

    top:
      calc(
        var(--sbuh-site-header) +
        8px
      );

    right: 12px;
    left: 12px;

    display: block;

    min-height: 43px;

    overflow: hidden;

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

    border-radius: 11px;

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

    box-shadow:
      0 10px 30px
      rgba(0,8,15,.30);

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


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

    pointer-events: none;

    transform:
      translateY(-8px);
  }


  .sbuh-mobile-depth__fill {
    position: absolute;

    z-index: 1;

    bottom: 0;
    left: 0;

    width: 0;
    height: 2px;

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


  .sbuh-mobile-depth > div {
    position: relative;

    z-index: 2;

    display: flex;

    min-height: 43px;

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

    gap: 12px;

    padding:
      0
      13px;
  }


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

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

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

    letter-spacing: .10em;

    text-overflow: ellipsis;

    text-transform: uppercase;

    white-space: nowrap;
  }


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

    font-size: 11px;
  }


  .sbuh-hero__copy {
    padding:
      64px
      16px
      35px;
  }


  .sbuh-kicker b {
    display: none;
  }


  .sbuh-hero h1 {
    font-size:
      clamp(34px,8.5vw,37px);
  }


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


  .sbuh-button {
    width: 100%;
  }


  .sbuh-status {
    grid-template-columns: 1fr;
  }


  .sbuh-status > div {
    padding:
      11px
      0;
  }


  .sbuh-status > div + div {
    border-top:
      1px solid
      var(--sbuh-line);

    border-left: 0;
  }


  .sbuh-hero__visual {
    padding:
      0
      14px
      14px;
  }


  .sbuh-hero__figure {
    height: 585px;

    min-height: 585px;

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


  .sbuh-hero__vertical {
    display: none;
  }


  .sbuh-sonar {
    right: -42px;

    width: 235px;
  }


  .sbuh-hero__panel {
    right: 14px;
    bottom: 105px;
    left: 14px;

    padding: 16px;
  }


  .sbuh-hero__strip {
    right: 14px;
    bottom: 14px;
    left: 14px;

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


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


  .sbuh-rail a {
    min-height: 65px;
  }


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


  .sbuh-section {
    padding:
      72px
      0;
  }


  .sbuh-service-grid,
  .sbuh-benefits {
    grid-template-columns: 1fr;
  }


  .sbuh-service-card__media {
    height: 270px;
  }


  .sbuh-benefits article,
  .sbuh-benefits article:nth-child(3n),
  .sbuh-benefits article:nth-child(n+4) {
    border-right: 0;

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


  .sbuh-benefits article:last-child {
    border-bottom: 0;
  }


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


  .sbuh-metrics article:nth-child(3) {
    border-top:
      1px solid
      var(--sbuh-line);

    border-left: 0;
  }


  .sbuh-metrics article:nth-child(4) {
    border-top:
      1px solid
      var(--sbuh-line);
  }


  .sbuh-process {
    grid-template-columns: 1fr;
  }


  .sbuh-process li {
    min-height: auto;
  }


  .sbuh-deliverables {
    grid-template-columns: 1fr;

    gap: 30px;

    padding: 22px;
  }


  .sbuh-deliverables__list {
    grid-template-columns: 1fr;
  }


  .sbuh-final__actions {
    flex-direction: column;
  }

}


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

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

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

    transition-duration:
      .01ms !important;

    animation:
      none !important;
  }

}



/*complete code end here*/