/* =========================================================
   SEA LICENSING — SERVICES FINAL V5
   Completely scoped to .sv5
   ========================================================= */

.sv5{
  --navy:#082d43;
  --deep:#05293e;
  --blue:#119bd2;
  --cyan:#61d7f2;
  --ink:#09283c;
  --muted:#5c7481;
  --line:#d5e6ed;

  overflow:hidden;
  background:#fff;
}


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

.sv5-hero{
  position:relative;
  min-height:565px;

  display:flex;
  align-items:center;

  overflow:hidden;
  isolation:isolate;

  background:#052b41;
}

.sv5-hero-photo{
  position:absolute;
  inset:-22px;

  z-index:0;

  background:
    url("/assets/images/services/final/services-main-bg.webp")
    center 50% / cover no-repeat;

  transform:
    translate3d(0,var(--sv5-y,0px),0)
    scale(var(--sv5-scale,1.045));

  will-change:transform;
}

.sv5-hero::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  background:
    linear-gradient(
      90deg,
      rgba(3,31,47,.94) 0%,
      rgba(3,38,56,.87) 30%,
      rgba(4,45,65,.57) 48%,
      rgba(3,37,55,.20) 67%,
      rgba(3,29,45,.12) 100%
    );
}

.sv5-hero::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:2;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse at 48% 62%,
      rgba(255,209,119,.15),
      transparent 25%
    ),
    radial-gradient(
      ellipse at 79% 27%,
      rgba(78,208,240,.10),
      transparent 27%
    );
}

.sv5-hero-inner{
  position:relative;
  z-index:4;

  width:calc(100% - 64px);
  max-width:1440px;

  margin:0 auto;

  display:grid;

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

  gap:70px;

  align-items:center;
}

.sv5-copy{
  max-width:710px;
}

.sv5-kicker{
  display:block;

  color:var(--cyan);

  font-size:10px;
  line-height:1;

  font-weight:900;

  letter-spacing:.17em;

  text-transform:uppercase;
}

.sv5-copy h1{
  max-width:700px;

  margin:18px 0 0;

  color:#fff;

  font-size:clamp(52px,4.2vw,76px);

  line-height:.95;

  letter-spacing:-.055em;
}

.sv5-copy h1 span{
  color:#60d3ef;
}

.sv5-copy > p{
  max-width:635px;

  margin:22px 0 0;

  color:rgba(239,248,251,.85);

  font-size:15px;

  line-height:1.68;
}

.sv5-actions{
  margin-top:27px;

  display:flex;
  flex-wrap:wrap;

  gap:11px;
}

.sv5-btn{
  min-height:50px;

  padding:0 21px;

  display:inline-flex;

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

  gap:10px;

  border-radius:5px;

  font-size:11px;

  font-weight:850;

  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    box-shadow .3s ease,
    background .3s ease;
}

.sv5-btn.primary{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #118fc9,
      #20b8df
    );

  box-shadow:
    0 13px 30px rgba(7,116,166,.23);
}

.sv5-btn.primary:hover{
  transform:translateY(-3px);

  box-shadow:
    0 19px 38px rgba(7,116,166,.31);
}

.sv5-btn.secondary{
  color:#fff;

  border:1px solid rgba(255,255,255,.31);

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

  backdrop-filter:blur(8px);
}

.sv5-btn.secondary:hover{
  transform:translateY(-3px);

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


/* PATHWAY */

.sv5-pathway{
  width:100%;
  max-width:370px;

  justify-self:end;

  padding:25px;

  border:
    1px solid rgba(97,214,243,.24);

  border-radius:11px;

  background:
    linear-gradient(
      145deg,
      rgba(4,41,61,.94),
      rgba(5,74,101,.89)
    );

  backdrop-filter:blur(13px);

  box-shadow:
    0 25px 58px rgba(0,19,32,.28);
}

.sv5-pathway h2{
  margin:11px 0 16px;

  color:#fff;

  font-size:23px;

  line-height:1.06;

  letter-spacing:-.03em;
}

.sv5-path{
  min-height:65px;

  padding:11px 8px;

  display:flex;

  align-items:center;

  gap:13px;

  border-top:
    1px solid rgba(255,255,255,.11);

  color:#fff;

  transition:
    padding-left .3s ease,
    background .3s ease;
}

.sv5-path:hover{
  padding-left:14px;

  background:
    rgba(80,210,240,.065);
}

.sv5-path i{
  width:34px;
  height:34px;

  flex:0 0 34px;

  display:grid;

  place-items:center;

  border:
    1px solid rgba(110,221,246,.28);

  border-radius:50%;

  color:#6eddf7;

  font-size:9px;

  font-style:normal;

  font-weight:900;
}

.sv5-path b{
  display:block;

  color:#fff;

  font-size:11px;
}

.sv5-path small{
  display:block;

  margin-top:3px;

  color:rgba(229,243,248,.66);

  font-size:8.5px;
}

.sv5-proof{
  position:absolute;

  left:max(
    32px,
    calc((100% - 1440px) / 2)
  );

  bottom:24px;

  z-index:4;

  display:flex;

  gap:22px;

  color:#70dff7;

  font-size:8px;

  font-weight:900;

  letter-spacing:.15em;

  text-transform:uppercase;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.sv5-divider{
  height:70px;

  display:flex;

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

  background:#fff;
}

.sv5-divider span{
  position:relative;

  color:#376e88;

  font-size:8.5px;

  font-weight:900;

  letter-spacing:.19em;

  text-transform:uppercase;
}

.sv5-divider span::before,
.sv5-divider span::after{
  content:"";

  position:absolute;

  top:50%;

  width:72px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #73c8e5
    );
}

.sv5-divider span::before{
  right:calc(100% + 18px);
}

.sv5-divider span::after{
  left:calc(100% + 18px);

  transform:scaleX(-1);
}


/* =========================================================
   SERVICES AREA
   ========================================================= */

.sv5-services{
  position:relative;

  padding:78px 0 88px;

  overflow:hidden;
  isolation:isolate;

  background:
    radial-gradient(
      circle at 87% 18%,
      rgba(28,168,216,.13),
      transparent 27%
    ),

    radial-gradient(
      circle at 8% 77%,
      rgba(33,161,206,.075),
      transparent 28%
    ),

    repeating-linear-gradient(
      135deg,
      rgba(12,129,176,.034) 0,
      rgba(12,129,176,.034) 1px,
      transparent 1px,
      transparent 50px
    ),

    linear-gradient(
      rgba(12,129,176,.034) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(12,129,176,.028) 1px,
      transparent 1px
    ),

    linear-gradient(
      180deg,
      #f8fcfe,
      #e9f6fb
    );

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

.sv5-services::before{
  content:"";

  position:absolute;

  right:-310px;
  top:-260px;

  width:760px;
  height:760px;

  z-index:-1;

  border:
    1px solid rgba(24,153,202,.10);

  border-radius:50%;

  box-shadow:
    0 0 0 76px rgba(24,153,202,.020),
    0 0 0 152px rgba(24,153,202,.013);
}

.sv5-heading{
  position:relative;

  max-width:735px;
}

.sv5-heading h2{
  margin:13px 0 0;

  color:var(--ink);

  font-size:clamp(41px,4vw,60px);

  line-height:.98;

  letter-spacing:-.052em;
}

.sv5-heading p{
  max-width:625px;

  margin:18px 0 0;

  color:var(--muted);

  font-size:14px;

  line-height:1.68;
}

.sv5-side-note{
  position:absolute;

  right:-440px;
  top:5px;

  width:180px;

  color:#5591ac;

  font-size:8.5px;

  font-weight:900;

  line-height:1.65;

  letter-spacing:.14em;

  text-transform:uppercase;

  text-align:right;
}


/* SERVICE CARDS */

.sv5-grid{
  margin-top:42px;

  display:grid;

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

  gap:14px;
}

.sv5-card{
  position:relative;

  min-height:252px;

  padding:24px;

  overflow:hidden;
  isolation:isolate;

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

  border-radius:9px;

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

  box-shadow:
    0 13px 30px rgba(5,66,94,.045);

  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    border-color .38s ease,
    box-shadow .38s ease;
}

.sv5-card:nth-child(-n+4){
  grid-column:span 3;
}

.sv5-card:nth-child(5){
  grid-column:2 / span 3;
}

.sv5-card:nth-child(6){
  grid-column:5 / span 3;
}

.sv5-card:nth-child(7){
  grid-column:8 / span 3;
}

.sv5-card::after{
  content:"";

  position:absolute;

  right:-4%;
  bottom:-2%;

  width:75%;
  height:73%;

  z-index:-1;

  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;

  opacity:.43;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.25) 28%,
      #000 70%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.25) 28%,
      #000 70%
    );

  transition:
    opacity .38s ease,
    transform .45s cubic-bezier(.22,1,.36,1);
}

.sv5-card:hover{
  transform:translateY(-7px);

  border-color:
    rgba(36,176,221,.40);

  box-shadow:
    0 23px 47px rgba(4,73,102,.12);
}

.sv5-card:hover::after{
  opacity:.57;

  transform:
    scale(1.07)
    translateX(-3px);
}

.sv5-num{
  color:#12a2d7;

  font-size:8.5px;

  font-weight:900;

  letter-spacing:.13em;
}

.sv5-card h3{
  position:relative;

  z-index:2;

  max-width:220px;

  margin:55px 0 0;

  color:#092a3e;

  font-size:21px;

  line-height:1.04;

  letter-spacing:-.03em;
}

.sv5-card p{
  position:relative;

  z-index:2;

  max-width:220px;

  margin:10px 0 0;

  color:#607985;

  font-size:10px;

  line-height:1.52;
}

.sv5-card-link{
  position:absolute;

  left:24px;
  bottom:20px;

  z-index:3;

  color:#078fc8;

  font-size:8.5px;

  font-weight:900;

  text-transform:uppercase;
}

.sv5-card-link::after{
  content:" →";

  margin-left:4px;
}

.sv5-card.vessel::after{
  background-image:
    url("/assets/images/services/cards/01-vessel-registration.png");
}

.sv5-card.survey::after{
  background-image:
    url("/assets/images/services/cards/02-surveys-certification.webp");
}

.sv5-card.licensing::after{
  background-image:
    url("/assets/images/services/cards/03-seafarer-licensing.webp");
}

.sv5-card.crew::after{
  background-image:
    url("/assets/images/services/cards/04-crew-manning.webp");
}

.sv5-card.training::after{
  background-image:
    url("/assets/images/services/cards/05-maritime-training.webp");
}

.sv5-card.advisory::after{
  background-image:
    url("/assets/images/services/cards/06-advisory-compliance.webp");
}

.sv5-card.offshore::after{
  background-image:
    url("/assets/images/services/cards/07-offshore-companies.webp");
}


/* =========================================================
   AUDIENCES
   ========================================================= */

.sv5-audience{
  position:relative;

  padding:78px 0 84px;

  overflow:hidden;
  isolation:isolate;

  background:#fff;
}

.sv5-audience::before{
  content:"";

  position:absolute;

  left:-10%;
  top:100px;

  width:120%;
  height:500px;

  z-index:-1;

  border-top:
    1px solid rgba(19,145,193,.075);

  border-radius:50%;
}

.sv5-audience-head{
  display:grid;

  grid-template-columns:
    .75fr 1.25fr;

  gap:70px;

  align-items:end;
}

.sv5-audience-head h2{
  margin:12px 0 0;

  color:var(--ink);

  font-size:
    clamp(38px,3.8vw,56px);

  line-height:.98;

  letter-spacing:-.05em;
}

.sv5-audience-head p{
  max-width:630px;

  color:var(--muted);

  font-size:13px;

  line-height:1.72;
}

.sv5-audience-grid{
  margin-top:37px;

  display:grid;

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

  gap:15px;
}

.sv5-audience-card{
  position:relative;

  min-height:325px;

  padding:31px;

  overflow:hidden;
  isolation:isolate;

  border-radius:10px;

  color:#fff;

  background:#053a55;

  box-shadow:
    0 19px 43px rgba(5,56,80,.13);

  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    box-shadow .38s ease;
}

.sv5-audience-card::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:-2;

  background-size:cover;

  background-position:center;
}

.sv5-audience-card.owner::before{
  background-image:
    url("/assets/images/services/final/shipowners.jpg");
}

.sv5-audience-card.seafarer::before{
  background-image:
    url("/assets/images/services/final/seafarer.jpg");
}

.sv5-audience-card::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:-1;

  background:
    linear-gradient(
      90deg,
      rgba(3,43,64,.98) 0%,
      rgba(4,57,80,.91) 50%,
      rgba(4,60,83,.44) 100%
    );
}

.sv5-audience-card.seafarer::after{
  background:
    linear-gradient(
      90deg,
      rgba(3,54,76,.98) 0%,
      rgba(4,76,100,.89) 52%,
      rgba(4,78,102,.37) 100%
    );
}

.sv5-audience-card:hover{
  transform:translateY(-6px);

  box-shadow:
    0 27px 53px rgba(5,58,83,.19);
}

.sv5-audience-label{
  color:#6cdef7;

  font-size:8.5px;

  font-weight:900;

  letter-spacing:.15em;

  text-transform:uppercase;
}

.sv5-audience-card h3{
  max-width:430px;

  margin:15px 0 0;

  font-size:29px;

  line-height:1;

  letter-spacing:-.04em;
}

.sv5-audience-card ul{
  max-width:450px;

  margin:23px 0 0;

  padding:0;

  list-style:none;
}

.sv5-audience-card li{
  position:relative;

  padding:8px 0 8px 21px;

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

  color:rgba(239,249,252,.85);

  font-size:10px;
}

.sv5-audience-card li::before{
  content:"✓";

  position:absolute;

  left:0;
  top:8px;

  color:#5edcf6;

  font-weight:900;
}


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

.sv5-process{
  position:relative;

  padding:74px 0 80px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(28,169,216,.11),
      transparent 27%
    ),

    repeating-linear-gradient(
      0deg,
      rgba(12,127,173,.023) 0,
      rgba(12,127,173,.023) 1px,
      transparent 1px,
      transparent 44px
    ),

    repeating-linear-gradient(
      90deg,
      rgba(12,127,173,.018) 0,
      rgba(12,127,173,.018) 1px,
      transparent 1px,
      transparent 44px
    ),

    linear-gradient(
      135deg,
      #edf8fc,
      #e6f4f9
    );
}

.sv5-process h2{
  max-width:620px;

  margin:12px 0 0;

  color:var(--ink);

  font-size:
    clamp(38px,3.8vw,55px);

  line-height:.98;

  letter-spacing:-.05em;
}

.sv5-process-grid{
  margin-top:34px;

  display:grid;

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

  border:
    1px solid #d4e6ed;

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

  box-shadow:
    0 12px 30px rgba(4,65,92,.035);
}

.sv5-process-card{
  min-height:175px;

  padding:22px;

  border-right:
    1px solid #d4e6ed;

  transition:
    transform .35s ease,
    background .35s ease;
}

.sv5-process-card:last-child{
  border-right:0;
}

.sv5-process-card:hover{
  transform:translateY(-4px);

  background:#fff;
}

.sv5-process-number{
  color:#28acd9;

  font-size:23px;

  font-weight:900;
}

.sv5-process-card h3{
  margin:26px 0 0;

  color:#092a3d;

  font-size:15px;
}

.sv5-process-card p{
  margin:8px 0 0;

  color:#607985;

  font-size:9px;

  line-height:1.55;
}


/* =========================================================
   DIGITAL
   ========================================================= */

.sv5-digital{
  position:relative;

  padding:76px 0 81px;

  overflow:hidden;

  background:
    radial-gradient(
      ellipse at 84% 43%,
      rgba(31,169,214,.08),
      transparent 29%
    ),

    repeating-linear-gradient(
      135deg,
      rgba(10,128,175,.022) 0,
      rgba(10,128,175,.022) 1px,
      transparent 1px,
      transparent 54px
    ),

    #fff;
}

.sv5-digital-head{
  display:grid;

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

  gap:80px;

  align-items:end;
}

.sv5-digital-head h2{
  margin:12px 0 0;

  color:var(--ink);

  font-size:
    clamp(38px,3.8vw,54px);

  line-height:.98;

  letter-spacing:-.05em;
}

.sv5-digital-head p{
  max-width:490px;

  color:var(--muted);

  font-size:12px;

  line-height:1.65;
}

.sv5-digital-grid{
  margin-top:34px;

  display:grid;

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

  gap:14px;
}

.sv5-digital-card{
  position:relative;

  min-height:205px;

  padding:24px;

  overflow:hidden;
  isolation:isolate;

  border:
    1px solid #d5e6ed;

  border-radius:9px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(240,249,252,.94)
    );

  transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease,
    border-color .35s ease;
}

.sv5-digital-card::after{
  content:"";

  position:absolute;

  right:-3%;
  bottom:-8%;

  width:50%;
  height:83%;

  z-index:-1;

  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;

  opacity:.27;
}

.sv5-digital-card:nth-child(1)::after{
  background-image:
    url("/assets/images/digital/cards/01-seafarers-portal.webp");
}

.sv5-digital-card:nth-child(2)::after{
  background-image:
    url("/assets/images/digital/cards/02-certificate-verification.webp");
}

.sv5-digital-card:nth-child(3)::after{
  background-image:
    url("/assets/images/digital/cards/03-smart-service-request.webp");
}

.sv5-digital-card:hover{
  transform:translateY(-6px);

  border-color:
    rgba(34,174,218,.35);

  box-shadow:
    0 20px 40px rgba(5,70,99,.10);
}

.sv5-digital-label{
  color:#17a7d7;

  font-size:8px;

  font-weight:900;

  letter-spacing:.14em;

  text-transform:uppercase;
}

.sv5-digital-card h3{
  margin:32px 0 0;

  color:#092a3d;

  font-size:17px;
}

.sv5-digital-card p{
  max-width:265px;

  margin:9px 0 0;

  color:#607984;

  font-size:9px;

  line-height:1.55;
}

.sv5-digital-card a{
  display:inline-flex;

  margin-top:20px;

  color:#078fc8;

  font-size:8.5px;

  font-weight:900;

  text-transform:uppercase;
}


/* =========================================================
   PHOTOGRAPHIC CTA
   ========================================================= */

.sv5-cta{
  position:relative;

  padding:62px 0;

  overflow:hidden;
  isolation:isolate;

  color:#fff;

  background:
    url("/assets/images/services/final/services-cta-lighthouse.webp")
    center 54% / cover no-repeat;
}

.sv5-cta::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:-1;

  background:
    linear-gradient(
      90deg,
      rgba(3,38,58,.97) 0%,
      rgba(3,61,84,.84) 48%,
      rgba(4,81,106,.39) 100%
    );
}

.sv5-cta-inner{
  display:flex;

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

  gap:50px;
}

.sv5-cta h2{
  max-width:720px;

  margin:10px 0 0;

  color:#fff;

  font-size:
    clamp(34px,3.5vw,49px);

  line-height:.98;

  letter-spacing:-.045em;
}


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

.js-sv5 .sv5-reveal{
  opacity:0;

  transform:
    translate3d(0,28px,0);

  transition:
    opacity .82s cubic-bezier(.22,1,.36,1),
    transform .82s cubic-bezier(.22,1,.36,1);

  transition-delay:
    var(--sv5-delay,0ms);
}

.js-sv5 .sv5-reveal.left{
  transform:
    translate3d(-30px,0,0);
}

.js-sv5 .sv5-reveal.scale{
  transform:
    scale(.97);
}

.js-sv5 .sv5-reveal.show{
  opacity:1;

  transform:
    translate3d(0,0,0)
    scale(1);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1250px){

  .sv5-hero-inner{
    width:calc(100% - 48px);

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

    gap:38px;
  }

  .sv5-card:nth-child(n){
    grid-column:span 6;
  }

  .sv5-side-note{
    display:none;
  }

}

@media(max-width:850px){

  .sv5-hero{
    min-height:auto;

    padding:82px 0 66px;
  }

  .sv5-hero-inner{
    width:calc(100% - 34px);

    grid-template-columns:1fr;

    gap:28px;
  }

  .sv5-pathway{
    max-width:none;
  }

  .sv5-proof{
    display:none;
  }

  .sv5-card:nth-child(n){
    grid-column:span 12;
  }

  .sv5-audience-head,
  .sv5-digital-head{
    grid-template-columns:1fr;

    gap:22px;
  }

  .sv5-audience-grid,
  .sv5-digital-grid{
    grid-template-columns:1fr;
  }

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

  .sv5-process-card:nth-child(2){
    border-right:0;
  }

  .sv5-process-card:nth-child(-n+2){
    border-bottom:
      1px solid #d4e6ed;
  }

  .sv5-cta-inner{
    align-items:flex-start;

    flex-direction:column;
  }

}

@media(max-width:560px){

  .sv5-copy h1{
    font-size:45px;
  }

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

  .sv5-process-card{
    border-right:0;

    border-bottom:
      1px solid #d4e6ed;
  }

}


/* ACCESSIBILITY */

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

  .js-sv5 .sv5-reveal{
    opacity:1 !important;

    transform:none !important;

    transition:none !important;
  }

  .sv5-hero-photo{
    transform:none !important;
  }

}