/* =========================================================
   SEA LICENSING
   SURVEYS & CERTIFICATION — PREMIUM DESKTOP V1
   Main content only
   ========================================================= */

.sc1-main{
  --sc-navy:#002B49;
  --sc-deep:#052C44;
  --sc-deeper:#031F31;
  --sc-ocean:#004E7C;
  --sc-blue:#0084D1;
  --sc-cyan:#4CC8F5;
  --sc-pale:#F4F8FB;
  --sc-line:#D9E6EE;
  --sc-text:#12364C;
  --sc-muted:#607989;

  background:#fff;
  color:var(--sc-text);
  overflow:hidden;
}

.sc1-main *,
.sc1-main *::before,
.sc1-main *::after{
  box-sizing:border-box;
}

.sc1-shell{
  width:min(calc(100% - 96px),var(--shell,1440px));
  margin-inline:auto;
}

.sc1-eyebrow{
  display:block;
  margin:0 0 14px;
  color:var(--sc-blue);
  font-size:10px;
  line-height:1;
  font-weight:850;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.sc1-title{
  margin:0;
  color:var(--sc-deep);
  font-size:43px;
  line-height:1.03;
  font-weight:800;
  letter-spacing:-.045em;
}

.sc1-rule{
  display:block;
  width:48px;
  height:2px;
  margin-top:18px;
  background:linear-gradient(90deg,var(--sc-blue),var(--sc-cyan));
}


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

.sc1-hero{
  position:relative;
  min-height:570px;
  display:flex;
  align-items:center;
  isolation:isolate;
  background:#032238;
}

.sc1-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;

  background:
    linear-gradient(
      90deg,
      rgba(2,29,47,.97) 0%,
      rgba(2,35,56,.92) 32%,
      rgba(2,38,59,.62) 58%,
      rgba(2,31,48,.22) 82%,
      rgba(2,28,43,.10) 100%
    ),
    url("/assets/images/hero-surveys-certification.jpg")
    center 48% / cover no-repeat;
}

.sc1-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(0,43,73,.04),
      rgba(0,43,73,0) 55%,
      rgba(0,20,34,.36)
    );
}

.sc1-hero-grid{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
  gap:90px;
  align-items:center;
  padding:48px 0;
}

.sc1-hero-copy{
  max-width:760px;
}

.sc1-hero .sc1-eyebrow{
  color:#72D2F8;
  margin-bottom:18px;
}

.sc1-hero h1{
  max-width:760px;
  margin:0;
  color:#fff;
  font-size:64px;
  line-height:.98;
  font-weight:800;
  letter-spacing:-.055em;
}

.sc1-hero-copy > p{
  max-width:665px;
  margin:24px 0 0;
  color:rgba(255,255,255,.80);
  font-size:15px;
  line-height:1.75;
}

.sc1-hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:31px;
}

.sc1-btn{
  min-height:45px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 21px;
  border:1px solid transparent;
  border-radius:4px;
  text-decoration:none;
  font-size:10px;
  line-height:1;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:
    transform .25s ease,
    background-color .25s ease,
    border-color .25s ease;
}

.sc1-btn-primary{
  color:#fff;
  background:var(--sc-blue);
  border-color:var(--sc-blue);
}

.sc1-btn-primary:hover{
  background:#0395E5;
  border-color:#0395E5;
  transform:translateY(-1px);
}

.sc1-btn-ghost{
  color:#fff;
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(7px);
}

.sc1-btn-ghost:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.62);
}

.sc1-hero-panel{
  width:100%;
  max-width:390px;
  justify-self:end;
  padding:28px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;

  background:
    linear-gradient(
      145deg,
      rgba(4,47,73,.74),
      rgba(3,34,54,.48)
    );

  box-shadow:
    0 24px 65px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06);

  backdrop-filter:blur(12px);
}

.sc1-hero-panel-label{
  display:block;
  color:#68CEF7;
  font-size:9px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.sc1-hero-panel h2{
  margin:12px 0 0;
  color:#fff;
  font-size:22px;
  line-height:1.16;
  letter-spacing:-.025em;
}

.sc1-hero-panel p{
  margin:11px 0 0;
  color:rgba(255,255,255,.68);
  font-size:11px;
  line-height:1.68;
}

.sc1-hero-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:21px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
}

.sc1-hero-meta span{
  display:block;
  margin-bottom:5px;
  color:rgba(255,255,255,.43);
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.sc1-hero-meta b{
  color:#fff;
  font-size:11px;
  line-height:1.4;
}


/* =========================================================
   APPROACH
   ========================================================= */

.sc1-approach{
  padding:87px 0 86px;
  background:#fff;
}

.sc1-approach-grid{
  display:grid;
  grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);
  gap:104px;
  align-items:center;
}

.sc1-approach-copy{
  max-width:600px;
}

.sc1-approach-copy .sc1-title{
  max-width:570px;
}

.sc1-approach-prose{
  position:relative;
  padding-left:36px;
}

.sc1-approach-prose::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  bottom:3px;
  width:1px;

  background:
    linear-gradient(
      180deg,
      rgba(0,132,209,.07),
      rgba(0,132,209,.52),
      rgba(0,132,209,.07)
    );
}

.sc1-approach-prose p{
  max-width:650px;
  margin:0;
  color:#536E7F;
  font-size:13px;
  line-height:1.82;
}

.sc1-approach-prose p + p{
  margin-top:18px;
}


/* =========================================================
   SURVEY TYPES
   ========================================================= */

.sc1-types{
  position:relative;
  padding:83px 0 88px;

  background:
    radial-gradient(circle at 86% 16%,rgba(0,132,209,.11),transparent 30%),
    linear-gradient(135deg,#052E47 0%,#00395B 52%,#042A42 100%);
}

.sc1-types-head{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:center;
  margin-bottom:40px;
}

.sc1-types-heading{
  grid-column:1;
}

.sc1-types .sc1-eyebrow{
  color:#61CDF7;
}

.sc1-types .sc1-title{
  color:#fff;
  font-size:40px;
}

.sc1-types-intro{
  position:relative;
  grid-column:2 / 4;
  margin:0;
  padding-left:36px;
  padding-right:40px;

  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.72;
}

.sc1-types-intro::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:50px;
  transform:translateY(-50%);

  background:
    linear-gradient(
      180deg,
      rgba(73,197,247,.10),
      rgba(73,197,247,.78),
      rgba(73,197,247,.10)
    );
}

.sc1-types-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.sc1-type-card{
  position:relative;
  min-height:315px;
  overflow:hidden;
  padding:28px 28px 27px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:7px;

  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.025)
    );

  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);

  transition:
    transform .32s ease,
    border-color .32s ease,
    background .32s ease;
}

.sc1-type-card:hover{
  transform:translateY(-3px);
  border-color:rgba(73,197,247,.27);

  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.080),
      rgba(255,255,255,.032)
    );
}

.sc1-type-no{
  display:block;
  margin-bottom:25px;
  color:#55C9F6;
  font-size:9px;
  font-weight:850;
  letter-spacing:.14em;
}

.sc1-type-card h3{
  margin:0;
  color:#fff;
  font-size:20px;
  line-height:1.18;
  letter-spacing:-.02em;
}

.sc1-type-card > p{
  max-width:320px;
  margin:11px 0 0;
  color:rgba(255,255,255,.62);
  font-size:10.5px;
  line-height:1.65;
}

.sc1-type-list{
  margin:19px 0 0;
  padding:0;
  list-style:none;
}

.sc1-type-list li{
  position:relative;
  padding-left:14px;
  color:rgba(255,255,255,.83);
  font-size:11px;
  line-height:1.70;
}

.sc1-type-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#4CC8F5;
}


/* =========================================================
   START PREPARED
   ========================================================= */

.sc1-prepared{
  padding:86px 0 90px;

  background:
    linear-gradient(180deg,#FBFDFE 0%,#F4F8FB 100%);
}

.sc1-prepared-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:72px;
  align-items:center;
  margin-bottom:38px;
}

.sc1-prepared-copy{
  max-width:610px;
}

.sc1-prepared-copy .sc1-title{
  max-width:600px;
  font-size:41px;
}

.sc1-prepared-description{
  position:relative;
  max-width:610px;
  margin:0;
  padding:2px 34px 2px 36px;

  color:#536F80;
  font-size:13px;
  line-height:1.75;
}

.sc1-prepared-description::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:48px;
  transform:translateY(-50%);

  background:
    linear-gradient(
      180deg,
      rgba(0,132,209,.08),
      rgba(0,132,209,.55),
      rgba(0,132,209,.08)
    );
}

.sc1-info-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.sc1-info-card{
  position:relative;
  min-height:116px;
  overflow:hidden;
  isolation:isolate;

  padding:22px 23px;

  border:1px solid #DCE7ED;
  border-radius:6px;

  background:#fff;

  box-shadow:0 8px 24px rgba(8,48,72,.025);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.sc1-info-card:hover{
  transform:translateY(-3px);
  border-color:#BFDCEB;
  box-shadow:0 15px 34px rgba(5,45,70,.08);
}

.sc1-info-no{
  display:block;
  margin-bottom:13px;
  color:#0084D1;
  font-size:9px;
  font-weight:850;
  letter-spacing:.12em;
}

.sc1-info-card b{
  display:block;
  max-width:280px;
  color:#113950;
  font-size:13px;
  line-height:1.38;
  font-weight:750;
}


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

.sc1-workflow{
  padding:86px 0 91px;

  background:
    radial-gradient(circle at 50% 120%,rgba(0,132,209,.14),transparent 37%),
    linear-gradient(135deg,#052D45 0%,#003653 55%,#04283E 100%);
}

.sc1-workflow-head{
  width:100%;
  max-width:900px;
  margin:0 auto 68px;
  text-align:center;
}

.sc1-workflow .sc1-eyebrow{
  color:#61CDF7;
}

.sc1-workflow .sc1-title{
  color:#fff;
  font-size:42px;
}

.sc1-workflow-head p{
  max-width:720px;
  margin:17px auto 0;
  color:rgba(255,255,255,.68);
  font-size:11px;
  line-height:1.7;
}

.sc1-stepper{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding-top:44px;
}

.sc1-stepper::before{
  content:"";
  position:absolute;
  left:16.666%;
  right:16.666%;
  top:7px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(73,197,247,.18),
      rgba(73,197,247,.48),
      rgba(73,197,247,.18)
    );
}

.sc1-step{
  position:relative;
  padding:9px 32px 0;
  text-align:center;
}

.sc1-step::before{
  content:"";
  position:absolute;
  left:50%;
  top:-44px;
  width:15px;
  height:15px;
  transform:translateX(-50%);

  border:3px solid #54CAF7;
  border-radius:50%;
  background:#07304A;

  box-shadow:
    0 0 0 5px rgba(0,132,209,.12);
}

.sc1-step span{
  display:block;
  margin-bottom:13px;
  color:#58CDF8;
  font-size:9px;
  font-weight:850;
  letter-spacing:.13em;
}

.sc1-step h3{
  margin:0;
  color:#fff;
  font-size:20px;
  line-height:1.2;
}

.sc1-step p{
  max-width:285px;
  margin:10px auto 0;
  color:rgba(255,255,255,.64);
  font-size:10.5px;
  line-height:1.65;
}


/* =========================================================
   RELATED
   ========================================================= */

.sc1-related{
  padding:82px 0 84px;

  background:
    radial-gradient(circle at 14% 16%,rgba(0,132,209,.04),transparent 30%),
    linear-gradient(180deg,#FBFDFE 0%,#F4F8FB 100%);
}

.sc1-related-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:60px;
  align-items:end;
  margin-bottom:30px;
}

.sc1-related-head .sc1-title{
  font-size:42px;
}

.sc1-related-all{
  margin-bottom:7px;
  color:#0084D1;
  text-decoration:none;
  font-size:10px;
  font-weight:850;
}

.sc1-related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.sc1-related-card{
  position:relative;
  min-height:220px;
  padding:29px 27px 27px;

  border:1px solid #DBE6EC;
  border-radius:7px;

  background:#fff;
  text-decoration:none;

  box-shadow:0 10px 30px rgba(7,48,72,.035);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.sc1-related-card:hover{
  transform:translateY(-3px);
  border-color:#C5DDEA;
  box-shadow:0 17px 40px rgba(7,48,72,.07);
}

.sc1-related-card span{
  display:block;
  margin-bottom:31px;
  color:#0084D1;
  font-size:9px;
  font-weight:850;
  letter-spacing:.13em;
}

.sc1-related-card h3{
  margin:0;
  color:#092F46;
  font-size:20px;
  line-height:1.15;
  letter-spacing:-.025em;
}

.sc1-related-card p{
  max-width:330px;
  margin:11px 0 0;
  padding-bottom:42px;

  color:#627988;
  font-size:11px;
  line-height:1.62;
}

.sc1-related-card b{
  position:absolute;
  left:27px;
  bottom:24px;

  color:#0084D1;
  font-size:9.5px;
  font-weight:850;
}


/* =========================================================
   DESKTOP ALIGNMENT LOCK
   ========================================================= */

@media (min-width:1101px){

  .sc1-main .sc1-hero .sc1-hero-grid{
    width:min(calc(100% - 96px),var(--shell,1440px));
    max-width:none;
    margin-left:auto;
    margin-right:auto;
  }

}


/* =========================================================
   BASIC FALLBACK ONLY
   Mobile/tablet refinement intentionally later
   ========================================================= */

@media (max-width:1100px){

  .sc1-shell{
    width:min(calc(100% - 48px),var(--shell,1440px));
  }

  .sc1-hero-grid,
  .sc1-approach-grid,
  .sc1-prepared-head{
    gap:46px;
  }

  .sc1-hero h1{
    font-size:52px;
  }

}


/* ==========================================================
   SURVEYS & CERTIFICATION — PREMIUM HERO IMAGE
   Hero background only
   ========================================================== */

.sc1-main .sc1-hero::before{
  background:
    linear-gradient(
      90deg,
      rgba(2,29,47,.97) 0%,
      rgba(2,35,56,.92) 30%,
      rgba(2,38,59,.62) 55%,
      rgba(2,31,48,.24) 78%,
      rgba(2,28,43,.10) 100%
    ),
    url("/assets/images/hero-surveys-certification-premium-opt.webp?v=20260924-172953")
    center center / cover no-repeat !important;
}


/* =========================================================
   SURVEYS & CERTIFICATION — CARD BACKGROUND VECTORS
   subtle, faded, premium
   ========================================================= */

.surveys-service-grid > *,
.survey-service-grid > *,
.survey-cards-grid > *,
.survey-types-grid > *,
.service-scope .scope-grid > *,
.scope-grid.cards-mode > *{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.surveys-service-grid > * > *,
.survey-service-grid > * > *,
.survey-cards-grid > * > *,
.survey-types-grid > * > *,
.service-scope .scope-grid > * > *,
.scope-grid.cards-mode > * > *{
  position: relative;
  z-index: 1;
}

.surveys-service-grid > *::after,
.survey-service-grid > *::after,
.survey-cards-grid > *::after,
.survey-types-grid > *::after,
.service-scope .scope-grid > *::after,
.scope-grid.cards-mode > *::after{
  content: "";
  position: absolute;
  right: 18px;
  bottom: 12px;
  width: 170px;
  height: 170px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .10;
  pointer-events: none;
  z-index: 0;
  filter: saturate(0.95);
}

/* 01 / CONDITION — ship outline */
.surveys-service-grid > *:nth-child(1)::after,
.survey-service-grid > *:nth-child(1)::after,
.survey-cards-grid > *:nth-child(1)::after,
.survey-types-grid > *:nth-child(1)::after,
.service-scope .scope-grid > *:nth-child(1)::after,
.scope-grid.cards-mode > *:nth-child(1)::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none'%3E%3Cg stroke='%236ec9ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 146h96l22 24H58l-22-24z'/%3E%3Cpath d='M76 122V91h36v31'/%3E%3Cpath d='M88 91V70h14v21'/%3E%3Cpath d='M154 170h24'/%3E%3Cpath d='M28 184c10-10 20-10 30 0 10-10 20-10 30 0 10-10 20-10 30 0 10-10 20-10 30 0 10-10 20-10 30 0'/%3E%3C/g%3E%3C/svg%3E");
}

/* 02 / QUANTITY — droplet + gauge */
.surveys-service-grid > *:nth-child(2)::after,
.survey-service-grid > *:nth-child(2)::after,
.survey-cards-grid > *:nth-child(2)::after,
.survey-types-grid > *:nth-child(2)::after,
.service-scope .scope-grid > *:nth-child(2)::after,
.scope-grid.cards-mode > *:nth-child(2)::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none'%3E%3Cg stroke='%236ec9ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='118' cy='126' r='44'/%3E%3Cpath d='M118 126l24-18'/%3E%3Cpath d='M88 98c10-15 18-24 30-40 12 16 20 25 30 40 0 18-13 32-30 32s-30-14-30-32z'/%3E%3Cpath d='M76 175h84'/%3E%3Cpath d='M82 183h72'/%3E%3C/g%3E%3C/svg%3E");
}

/* 03 / CARGO — crane + container */
.surveys-service-grid > *:nth-child(3)::after,
.survey-service-grid > *:nth-child(3)::after,
.survey-cards-grid > *:nth-child(3)::after,
.survey-types-grid > *:nth-child(3)::after,
.service-scope .scope-grid > *:nth-child(3)::after,
.scope-grid.cards-mode > *:nth-child(3)::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none'%3E%3Cg stroke='%236ec9ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M56 176h128'/%3E%3Cpath d='M73 176V94h28'/%3E%3Cpath d='M101 94h54'/%3E%3Cpath d='M155 94v22'/%3E%3Cpath d='M155 116l16 14'/%3E%3Cpath d='M171 130v16'/%3E%3Crect x='98' y='146' width='48' height='24' rx='2'/%3E%3Cpath d='M114 146v24M130 146v24'/%3E%3C/g%3E%3C/svg%3E");
}

/* 04 / INTEGRITY — container / hatch grid */
.surveys-service-grid > *:nth-child(4)::after,
.survey-service-grid > *:nth-child(4)::after,
.survey-cards-grid > *:nth-child(4)::after,
.survey-types-grid > *:nth-child(4)::after,
.service-scope .scope-grid > *:nth-child(4)::after,
.scope-grid.cards-mode > *:nth-child(4)::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none'%3E%3Cg stroke='%236ec9ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='70' y='78' width='100' height='84' rx='4'/%3E%3Cpath d='M103 78v84M137 78v84M70 106h100M70 134h100'/%3E%3Cpath d='M52 176h136'/%3E%3Cpath d='M76 188h88'/%3E%3C/g%3E%3C/svg%3E");
}

/* 05 / INCIDENT — warning + report */
.surveys-service-grid > *:nth-child(5)::after,
.survey-service-grid > *:nth-child(5)::after,
.survey-cards-grid > *:nth-child(5)::after,
.survey-types-grid > *:nth-child(5)::after,
.service-scope .scope-grid > *:nth-child(5)::after,
.scope-grid.cards-mode > *:nth-child(5)::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none'%3E%3Cg stroke='%236ec9ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M120 70l50 88H70l50-88z'/%3E%3Cpath d='M120 103v26'/%3E%3Ccircle cx='120' cy='142' r='2.8' fill='%236ec9ff' stroke='none'/%3E%3Cpath d='M66 178h108'/%3E%3Cpath d='M74 188h92'/%3E%3C/g%3E%3C/svg%3E");
}

/* 06 / SUPPORT — certificate / shield */
.surveys-service-grid > *:nth-child(6)::after,
.survey-service-grid > *:nth-child(6)::after,
.survey-cards-grid > *:nth-child(6)::after,
.survey-types-grid > *:nth-child(6)::after,
.service-scope .scope-grid > *:nth-child(6)::after,
.scope-grid.cards-mode > *:nth-child(6)::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none'%3E%3Cg stroke='%236ec9ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M120 64l40 12v32c0 30-16 50-40 64-24-14-40-34-40-64V76l40-12z'/%3E%3Cpath d='M103 116l12 12 22-24'/%3E%3Cpath d='M74 180h92'/%3E%3C/g%3E%3C/svg%3E");
}


/* ==========================================================
   SURVEY TYPE CARDS — CORRECT VECTOR SELECTORS
   ========================================================== */

@media (min-width:1101px){

  .sc1-main .sc1-type-card{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
  }

  .sc1-main .sc1-type-card > *{
    position:relative !important;
    z-index:2 !important;
  }

  .sc1-main .sc1-type-card::after{
    content:"" !important;
    position:absolute !important;

    right:14px !important;
    bottom:8px !important;

    width:165px !important;
    height:165px !important;

    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;

    opacity:.14 !important;

    pointer-events:none !important;
    z-index:1 !important;

    transition:
      opacity .35s ease,
      transform .35s ease !important;
  }

  .sc1-main .sc1-type-card:hover::after{
    opacity:.20 !important;
    transform:translate(-3px,-3px) scale(1.03) !important;
  }


  /* 01 — VESSEL / CONDITION */
  .sc1-main .sc1-type-card:nth-child(1)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 111h92l20 22H45L24 111z'/%3E%3Cpath d='M58 111V82h36v29M70 82V62h14v20'/%3E%3Cpath d='M31 145c8 0 8-4 16-4s8 4 16 4 8-4 16-4 8 4 16 4 8-4 16-4 8 4 16 4'/%3E%3Ccircle cx='132' cy='78' r='23'/%3E%3Cpath d='M132 66v24M120 78h24'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* 02 — BUNKER / QUANTITY */
  .sc1-main .sc1-type-card:nth-child(2)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M88 42c18 24 31 42 31 61a31 31 0 0 1-62 0c0-19 13-37 31-61z'/%3E%3Ccircle cx='123' cy='119' r='27'/%3E%3Cpath d='M123 119l15-12'/%3E%3Cpath d='M101 140h45'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* 03 — CARGO / LOADING */
  .sc1-main .sc1-type-card:nth-child(3)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M43 140V63h28M71 63h63M134 63v25'/%3E%3Cpath d='M134 88l12 12M146 100v13'/%3E%3Crect x='91' y='114' width='48' height='25' rx='2'/%3E%3Cpath d='M107 114v25M123 114v25'/%3E%3Cpath d='M31 140h120'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* 04 — HATCH / HOLD / CONTAINER */
  .sc1-main .sc1-type-card:nth-child(4)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='45' y='53' width='91' height='77' rx='4'/%3E%3Cpath d='M75 53v77M106 53v77M45 79h91M45 104h91'/%3E%3Cpath d='M37 142h108'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* 05 — DAMAGE / INCIDENT */
  .sc1-main .sc1-type-card:nth-child(5)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M89 42l47 82H42l47-82z'/%3E%3Cpath d='M89 72v26'/%3E%3Ccircle cx='89' cy='112' r='3' fill='%2368CFF8' stroke='none'/%3E%3Cpath d='M48 140h84'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* 06 — CERTIFICATION / COMPLIANCE */
  .sc1-main .sc1-type-card:nth-child(6)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%2368CFF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M89 43l38 12v30c0 28-15 47-38 60-23-13-38-32-38-60V55l38-12z'/%3E%3Cpath d='M73 88l11 11 22-25'/%3E%3Cpath d='M49 145h80'/%3E%3C/g%3E%3C/svg%3E") !important;
  }

}


/* ==========================================================
   START PREPARED — VISIBLE FADED FIELD VECTORS
   ========================================================== */

@media (min-width:1101px){

  .sc1-main .sc1-info-card{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
  }

  .sc1-main .sc1-info-card > *{
    position:relative !important;
    z-index:3 !important;
  }

  .sc1-main .sc1-info-card::after{
    content:"" !important;
    display:block !important;

    position:absolute !important;
    right:14px !important;
    bottom:3px !important;

    width:118px !important;
    height:118px !important;

    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;

    opacity:.105 !important;
    filter:none !important;

    pointer-events:none !important;
    z-index:1 !important;

    transition:
      opacity .35s ease,
      transform .35s ease !important;
  }

  .sc1-main .sc1-info-card:hover::after{
    opacity:.16 !important;
    transform:translate(-3px,-3px) scale(1.035) !important;
  }


  /* 01 — VESSEL PARTICULARS */
  .sc1-main .sc1-info-card:nth-child(1)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%230084D1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 84h96l-14 22H37L20 84z'/%3E%3Cpath d='M40 84V55h52v29M54 55V39h23v16'/%3E%3Cpath d='M31 112c8 0 8-4 16-4s8 4 16 4 8-4 16-4 8 4 16 4 8-4 16-4'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* 02 — SURVEY / CERTIFICATE */
  .sc1-main .sc1-info-card:nth-child(2)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%230084D1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='30' y='22' width='69' height='85' rx='6'/%3E%3Cpath d='M47 45h35M47 59h35M47 73h25'/%3E%3Ccircle cx='93' cy='91' r='18'/%3E%3Cpath d='M85 91l7 7 12-15'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* 03 — CERTIFICATE STATUS */
  .sc1-main .sc1-info-card:nth-child(3)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%230084D1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M70 22l34 11v29c0 26-13 44-34 57-21-13-34-31-34-57V33l34-11z'/%3E%3Cpath d='M54 66l11 11 23-27'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* 04 — PORT / LOCATION */
  .sc1-main .sc1-info-card:nth-child(4)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%230084D1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M70 115s31-32 31-59a31 31 0 1 0-62 0c0 27 31 59 31 59z'/%3E%3Ccircle cx='70' cy='56' r='11'/%3E%3Cpath d='M19 116c12-6 22-6 34 0M87 116c12-6 22-6 34 0'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* 05 — OPERATIONAL DEADLINE */
  .sc1-main .sc1-info-card:nth-child(5)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%230084D1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='70' cy='73' r='39'/%3E%3Cpath d='M70 50v25l18 10'/%3E%3Cpath d='M57 23h26M70 23v11'/%3E%3C/g%3E%3C/svg%3E") !important;
  }


  /* 06 — SUPPORTING DOCUMENTS */
  .sc1-main .sc1-info-card:nth-child(6)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%230084D1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='28' y='27' width='58' height='74' rx='6'/%3E%3Crect x='49' y='41' width='59' height='74' rx='6'/%3E%3Cpath d='M65 63h27M65 77h27M65 91h19'/%3E%3C/g%3E%3C/svg%3E") !important;
  }

}


/* ==========================================================
   START PREPARED — DARK BLUE HOVER EFFECT
   ========================================================== */

.sc1-main .sc1-info-card{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 43, 73, 0.12) !important;
  transition:
    background-color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease !important;
}

.sc1-main .sc1-info-card > *{
  position: relative !important;
  z-index: 3 !important;
}

.sc1-main .sc1-info-card span,
.sc1-main .sc1-info-card b,
.sc1-main .sc1-info-card strong,
.sc1-main .sc1-info-card h3,
.sc1-main .sc1-info-card p{
  transition: color .35s ease !important;
}

.sc1-main .sc1-info-card:hover{
  background: linear-gradient(135deg, #0A3554 0%, #002B49 100%) !important;
  border-color: rgba(0, 132, 209, 0.28) !important;
  box-shadow: 0 18px 40px rgba(0, 43, 73, 0.18) !important;
  transform: translateY(-4px) !important;
}

.sc1-main .sc1-info-card:hover span{
  color: #66BFFF !important;
}

.sc1-main .sc1-info-card:hover b,
.sc1-main .sc1-info-card:hover strong,
.sc1-main .sc1-info-card:hover h3,
.sc1-main .sc1-info-card:hover p{
  color: #FFFFFF !important;
}

.sc1-main .sc1-info-card::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at top right, rgba(0,132,209,.14), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,0)) !important;
  opacity: 0 !important;
  transition: opacity .35s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.sc1-main .sc1-info-card:hover::before{
  opacity: 1 !important;
}

.sc1-main .sc1-info-card::after{
  transition:
    opacity .35s ease,
    transform .35s ease,
    filter .35s ease !important;
}

.sc1-main .sc1-info-card:hover::after{
  opacity: .18 !important;
  filter: brightness(1.2) !important;
  transform: translate(-4px,-4px) scale(1.03) !important;
}


/* ==========================================================
   SURVEYS — RELATED SERVICES
   Premium photographic card backgrounds
   ========================================================== */

@media (min-width:1101px){

  .sc1-main .sc1-related-card{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    min-height:235px !important;

    background-repeat:no-repeat !important;
    background-size:cover !important;

    border:1px solid #D8E5EC !important;

    transition:
      transform .38s cubic-bezier(.22,.61,.36,1),
      border-color .38s ease,
      box-shadow .38s ease,
      background-size .55s cubic-bezier(.22,.61,.36,1) !important;
  }


  /* 01 — Vessel Registration */
  .sc1-main .sc1-related-card:nth-child(1){
    background-image:
      url("/assets/images/services/related/surveys-related-vessel-registration.webp") !important;

    background-position:center 52% !important;
  }


  /* 02 — Advisory & Compliance */
  .sc1-main .sc1-related-card:nth-child(2){
    background-image:
      url("/assets/images/services/related/surveys-related-advisory.webp") !important;

    background-position:center center !important;
  }


  /* 03 — Service Request */
  .sc1-main .sc1-related-card:nth-child(3){
    background-image:
      url("/assets/images/services/related/surveys-related-service-request.webp") !important;

    background-position:center 48% !important;
  }


  /* Light fade for text readability */
  .sc1-main .sc1-related-card::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;

    z-index:0 !important;
    pointer-events:none !important;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.985) 0%,
        rgba(255,255,255,.95) 37%,
        rgba(255,255,255,.78) 68%,
        rgba(255,255,255,.45) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.18)
      ) !important;
  }


  .sc1-main .sc1-related-card > *{
    position:relative !important;
    z-index:2 !important;
  }


  /* Clean elegant hover — no dark blue overlay */
  .sc1-main .sc1-related-card:hover{
    transform:translateY(-4px) !important;

    border-color:#BDD9E8 !important;

    box-shadow:
      0 17px 40px rgba(4,43,67,.10),
      0 4px 12px rgba(4,43,67,.045) !important;

    background-size:104% auto !important;
  }


  /* Maintain clean readable typography */
  .sc1-main .sc1-related-card h3{
    color:#092F46 !important;
  }

  .sc1-main .sc1-related-card p{
    color:#607887 !important;
  }

  .sc1-main .sc1-related-card span,
  .sc1-main .sc1-related-card b{
    color:#0084D1 !important;
  }


  /* Keep Explore link anchored at bottom */
  .sc1-main .sc1-related-card p{
    padding-bottom:42px !important;
  }

  .sc1-main .sc1-related-card b{
    position:absolute !important;
    left:27px !important;
    bottom:24px !important;
    top:auto !important;
    z-index:3 !important;

    transition:transform .32s ease !important;
  }

  .sc1-main .sc1-related-card:hover b{
    transform:translateX(4px) !important;
  }

}


/* ==========================================================
   SURVEYS WORKFLOW — THIN CIRCLE-TO-CIRCLE GLOW
   ========================================================== */

@media (min-width:1101px){

  .sc1-main .sc1-stepper{
    position:relative !important;
    overflow:visible !important;
    isolation:isolate !important;
  }

  /* Static 1px timeline */
  .sc1-main .sc1-stepper::before{
    content:"" !important;
    display:block !important;

    position:absolute !important;
    left:16.666666% !important;
    right:16.666666% !important;
    top:7px !important;

    height:1px !important;

    background:rgba(82,194,240,.30) !important;
    border:0 !important;
    border-radius:0 !important;

    box-shadow:
      0 0 3px rgba(73,197,247,.12) !important;

    opacity:1 !important;
    z-index:1 !important;

    animation:none !important;
    transform:none !important;
  }


  /* 1px travelling luminous section */
  .sc1-main .sc1-stepper::after{
    content:"" !important;
    display:block !important;

    position:absolute !important;
    left:16.666666% !important;
    top:7px !important;

    width:12% !important;
    height:1px !important;

    border:0 !important;
    border-radius:0 !important;

    background:linear-gradient(
      90deg,
      rgba(105,211,251,0) 0%,
      rgba(105,211,251,.18) 18%,
      rgba(132,222,255,.48) 35%,
      rgba(224,249,255,.98) 50%,
      rgba(132,222,255,.48) 65%,
      rgba(105,211,251,.18) 82%,
      rgba(105,211,251,0) 100%
    ) !important;

    box-shadow:
      0 0 2px rgba(181,236,255,.52),
      0 0 5px rgba(73,197,247,.24) !important;

    filter:none !important;
    pointer-events:none !important;

    z-index:2 !important;

    will-change:transform,opacity !important;

    animation:
      sc1WorkflowCircleTravel 5.6s ease-in-out infinite !important;
  }


  /* nodes above line/glow */
  .sc1-main .sc1-step::before{
    z-index:5 !important;
  }

}


@keyframes sc1WorkflowCircleTravel{

  /* glow centered on circle 01 */
  0%{
    transform:translateX(-50%);
    opacity:0;
  }

  6%{
    opacity:.65;
  }

  13%{
    opacity:1;
  }

  50%{
    opacity:1;
  }

  87%{
    opacity:1;
  }

  94%{
    opacity:.65;
  }

  /* glow centered on circle 03 */
  100%{
    transform:translateX(505.555%);
    opacity:0;
  }

}