*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;color:#15232d;background:#fff}a{text-decoration:none;color:inherit}header{height:86px;background:#fff;display:flex;align-items:center;padding:0 5vw;justify-content:space-between;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:12px}.nms{font-weight:900;font-size:25px;letter-spacing:-2px;color:#0a4771}.brand>span:last-child{display:grid;border-left:1px solid #bbb;padding-left:12px}.brand b{font-size:10px;letter-spacing:1.8px}.brand small{font-size:9px;letter-spacing:4px;color:#72808a;margin-top:2px}nav{display:flex;gap:34px;font-size:11px;color:#46545d}nav a:hover{color:#0a649a}.phone{font-size:9px;font-weight:bold;letter-spacing:1px;color:#0a4771;border-bottom:2px solid #0a4771;padding:8px 0}.hero{height:calc(100vh - 86px);min-height:650px;position:relative;color:#fff;overflow:hidden}.heroPhoto{position:absolute;inset:0;background:url("assets/sts.jpg") center 55%/cover no-repeat;transform:scale(1.02)}.heroShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,19,31,.76),rgba(4,28,43,.2) 65%,rgba(0,0,0,.08))}.heroContent{position:absolute;left:8vw;top:50%;transform:translateY(-50%)}.heroContent p{font-size:10px;letter-spacing:5px;margin:0 0 18px}.heroContent h1{font-size:clamp(66px,8.5vw,140px);line-height:.78;letter-spacing:-6px;margin:0;font-weight:800}.heroContent span{display:block;font-size:9px;letter-spacing:2px;margin-top:35px}.scroll{position:absolute;right:4vw;bottom:35px;font-size:8px;letter-spacing:2px;display:flex;align-items:center;gap:12px}.scroll i{width:55px;height:1px;background:#fff}.services{padding:105px 5vw 0}.title{display:grid;grid-template-columns:.5fr 1fr 1fr;align-items:end;margin-bottom:55px}.title small,.companyText small,.opTitle small,.banner small,.contact small{font-size:9px;letter-spacing:2px;color:#78909e}.title h2,.companyText h2,.opTitle h2,.banner h2,.contact h2{font-size:clamp(42px,5vw,72px);line-height:.95;margin:0;color:#123b55}.title p{max-width:390px;color:#66747c;font-size:13px;line-height:1.7}.tiles{display:grid;grid-template-columns:repeat(2,1fr);height:780px}.tile{position:relative;padding:45px;color:#fff;overflow:hidden;display:flex;align-items:flex-end}.tile:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#061a28cc,transparent 70%)}.tile>div{position:relative;z-index:2}.tile span{font-size:9px;letter-spacing:2px}.tile h3{font-size:42px;line-height:.95;margin:18px 0}.tile p{font-size:12px;max-width:330px;color:#d7e0e4}.tile b{font-size:9px;display:block;margin-top:25px;letter-spacing:1px}.photo1{background:url("assets/bunkering.jpg") center/cover}.photo2{background:url("assets/sts.jpg") center/cover}.dark{background:#0a4164}.dark:after,.light:after{display:none}.light{background:#e5edf0;color:#17384b}.light p{color:#62747e}.company{margin-top:120px;display:grid;grid-template-columns:1.08fr .92fr;min-height:680px}.companyPic{background:url("assets/sts.jpg") center/cover}.companyText{background:#f2f4f3;padding:100px 8vw}.companyText h2{margin:22px 0 35px}.companyText p{font-size:13px;line-height:1.8;color:#617079;max-width:520px}.companyText>a{display:inline-block;margin-top:30px;color:#0a527e;font-size:9px;font-weight:bold;letter-spacing:1px}.companyText>a b{margin-left:30px}.operations{padding:110px 5vw}.opTitle{display:flex;align-items:end;justify-content:space-between;margin-bottom:50px}.opGrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #cbd3d6}.opGrid>div{padding:28px 30px 30px 0;border-right:1px solid #d7dddf;min-height:250px}.opGrid>div+div{padding-left:30px}.opGrid span{font-size:9px;color:#0b679b}.opGrid h3{font-size:20px;margin-top:70px}.opGrid p{font-size:11px;line-height:1.65;color:#68767e}.banner{height:590px;background:linear-gradient(#073a5fb8,#073a5fb8),url("assets/bunkering.jpg") center/cover;color:#fff;display:flex;align-items:center;padding:0 8vw}.banner small{color:#c6d8e2}.banner h2{color:#fff;margin:22px 0;font-size:65px}.banner p{font-size:12px;letter-spacing:1px}.contact{padding:110px 8vw;background:#f1f4f4;display:grid;grid-template-columns:.7fr 1.3fr;gap:100px}.contact h2{margin:22px 0}.contact p{font-size:13px;line-height:1.7;color:#68767e;max-width:400px}.contact .notice{font-size:9px;color:#9a6c55;margin-top:28px}.contact a{display:block;font-weight:bold;font-size:15px;margin:8px 0}form{background:#fff;padding:35px;display:grid;grid-template-columns:1fr 1fr;gap:15px}input,select,textarea{font:12px Arial;border:0;border-bottom:1px solid #c8d0d3;padding:14px 5px;outline:none;border-radius:0;background:#fff}textarea,button{grid-column:1/-1}button{border:0;background:#0a4771;color:#fff;padding:18px;text-align:left;font-size:9px;letter-spacing:1px;cursor:pointer}footer{height:120px;padding:0 5vw;background:#08283d;color:#fff;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1px}footer .brand b,footer .brand small{color:#fff}
@media(max-width:850px){nav,.phone{display:none}.heroContent h1{letter-spacing:-4px}.title{grid-template-columns:1fr;gap:15px}.tiles{grid-template-columns:1fr;height:auto}.tile{min-height:430px}.company{grid-template-columns:1fr}.companyPic{min-height:430px}.opGrid{grid-template-columns:1fr 1fr}.contact{grid-template-columns:1fr;gap:45px}.banner h2{font-size:48px}}@media(max-width:520px){header{height:70px}.brand>span:last-child{display:none}.hero{height:720px}.heroContent{left:6vw}.heroContent h1{font-size:58px;letter-spacing:-3px}.services{padding:75px 5vw 0}.tile{min-height:370px;padding:28px}.tile h3{font-size:34px}.company{margin-top:75px}.companyText{padding:70px 6vw}.operations,.contact{padding:75px 6vw}.opTitle{display:block}.opGrid{grid-template-columns:1fr}.opGrid>div,.opGrid>div+div{padding:25px 0}.opGrid h3{margin-top:30px}.banner{height:480px;padding:0 6vw}.banner h2{font-size:40px}.contact{gap:35px}form{grid-template-columns:1fr;padding:22px}textarea,button{grid-column:auto}footer{height:auto;padding:30px 5vw;gap:20px;flex-wrap:wrap}}
.headerRight{display:flex;align-items:center;gap:18px}
.onlineStatus,.heroOnline{display:flex;align-items:center;gap:8px;font-size:8px;font-weight:700;letter-spacing:1.3px;white-space:nowrap}
.onlineStatus{color:#28444f}
.onlineStatus i,.heroOnline i{width:8px;height:8px;border-radius:50%;background:#3bd47f;box-shadow:0 0 0 5px rgba(59,212,127,.12),0 0 14px rgba(59,212,127,.55);animation:onlinePulse 1.8s ease-in-out infinite}
.heroOnline{margin-bottom:22px;color:#e5f1ea}
.heroOnline i{width:9px;height:9px}
@keyframes onlinePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.65;transform:scale(.85)}}
.langSwitch{border:0;background:transparent;padding:7px 0;display:flex;gap:5px;align-items:center;cursor:pointer;color:#9aa5aa;font-size:9px;letter-spacing:.7px}
.langSwitch b{font-weight:700;color:#9aa5aa}.langSwitch b.active{color:#0a4771}.langSwitch span{color:#c1c8cb}
@media(max-width:980px){header{padding:0 3vw}.headerRight{gap:12px}.onlineStatus{display:none}nav{gap:18px}}
@media(max-width:850px){.headerRight .phone{display:none}.langSwitch{display:flex}}

/* v3 — glass availability card */
.availabilityCard{
  position:absolute;
  z-index:4;
  right:7vw;
  top:50%;
  transform:translateY(-50%);
  width:270px;
  padding:0;
  color:#fff;
  background:rgba(7,35,52,.30);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  box-shadow:0 20px 50px rgba(0,0,0,.10);
}
.availabilityTop{
  height:54px;
  padding:0 19px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.22);
}
.availabilityTop span,.availabilityBottom span{
  font-size:7px;
  letter-spacing:1.8px;
  color:rgba(255,255,255,.65);
}
.availabilityTop b{
  font-size:9px;
  letter-spacing:1.5px;
}
.availabilityMain{
  min-height:116px;
  padding:26px 19px;
  display:flex;
  align-items:center;
  gap:15px;
}
.availabilityMain i{
  width:11px;
  height:11px;
  flex:0 0 11px;
  border-radius:50%;
  background:#66e29a;
  box-shadow:0 0 0 6px rgba(102,226,154,.09),0 0 18px rgba(102,226,154,.5);
  animation:glassPulse 2s ease-in-out infinite;
}
.availabilityMain div{display:grid;gap:5px}
.availabilityMain small{
  font-size:7px;
  letter-spacing:1.6px;
  color:rgba(255,255,255,.58);
}
.availabilityMain strong{
  font-size:17px;
  letter-spacing:1.2px;
}
.availabilityBottom{
  padding:16px 19px 17px;
  display:grid;
  gap:5px;
  border-top:1px solid rgba(255,255,255,.22);
}
.availabilityBottom b{
  font-size:8px;
  letter-spacing:1.3px;
}
@keyframes glassPulse{
  0%,100%{opacity:1;box-shadow:0 0 0 5px rgba(102,226,154,.08),0 0 15px rgba(102,226,154,.42)}
  50%{opacity:.68;box-shadow:0 0 0 8px rgba(102,226,154,.025),0 0 23px rgba(102,226,154,.65)}
}
@media(max-width:1000px){
  .availabilityCard{right:4vw;width:235px}
}
@media(max-width:850px){
  .availabilityCard{top:auto;right:5vw;bottom:90px;transform:none;width:225px}
  .availabilityMain{min-height:88px;padding:18px}
}
@media(max-width:520px){
  .availabilityCard{left:6vw;right:auto;bottom:98px;width:205px}
  .availabilityTop{height:42px;padding:0 14px}
  .availabilityMain{min-height:70px;padding:13px 14px}
  .availabilityMain strong{font-size:13px}
  .availabilityBottom{padding:11px 14px}
}

/* v4 — enlarged transparent operations panel */
.availabilityCard{
  right:6vw!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:365px!important;
  background:rgba(4,28,44,.11)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
  box-shadow:0 22px 65px rgba(0,0,0,.06)!important;
}
.availabilityTop{
  height:auto!important;
  min-height:64px!important;
  padding:15px 22px!important;
}
.availabilityTop>div{display:grid;gap:5px}
.availabilityTop small{font-size:7px;color:rgba(255,255,255,.50);letter-spacing:1.6px}
.availabilityMain{
  min-height:132px!important;
  padding:29px 22px!important;
}
.availabilityMain strong{font-size:21px!important}
.opsInfo{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(255,255,255,.18);
}
.opsInfo>div{
  min-height:82px;
  padding:15px 18px;
  display:grid;
  align-content:center;
  gap:6px;
  border-right:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.opsInfo>div:nth-child(2n){border-right:0}
.opsInfo span{font-size:6px;line-height:1.4;letter-spacing:1.35px;color:rgba(255,255,255,.46)}
.opsInfo b{font-size:8px;line-height:1.45;letter-spacing:.75px;color:rgba(255,255,255,.96)}
.availabilityBottom{padding:17px 22px 19px!important;border-top:0!important}

@media(max-width:1000px){
  .availabilityCard{width:320px!important;right:4vw!important}
}
@media(max-width:850px){
  .availabilityCard{
    width:292px!important;
    right:5vw!important;
    top:auto!important;
    bottom:88px!important;
    transform:none!important;
  }
  .opsInfo>div{min-height:68px}
}
@media(max-width:520px){
  .availabilityCard{
    left:5vw!important;
    right:auto!important;
    width:267px!important;
    bottom:90px!important;
  }
  .availabilityTop{padding:11px 14px!important}
  .availabilityMain{padding:14px!important;min-height:78px!important}
  .availabilityMain strong{font-size:15px!important}
  .opsInfo>div{padding:10px 12px;min-height:59px}
  .availabilityBottom{padding:11px 14px 13px!important}
}

/* v6 — service card typography and motion refinements */

/* Main 4 service tiles */
.serviceTile{
  position:relative;
  isolation:isolate;
  transition:
    transform .55s cubic-bezier(.2,.7,.2,1),
    box-shadow .55s cubic-bezier(.2,.7,.2,1),
    filter .55s ease;
  will-change:transform;
  overflow:hidden;
}

.serviceTile::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    180deg,
    rgba(4,20,31,.03) 0%,
    rgba(4,20,31,.08) 42%,
    rgba(4,20,31,.48) 100%
  );
  opacity:.65;
  transition:opacity .45s ease, background .45s ease;
  pointer-events:none;
}

.serviceTile.dark::before,
.serviceTile.light::before{
  display:none;
}

.serviceTile>div{
  position:relative;
  z-index:3;
  transform:translateY(0);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}

.serviceTile h3{
  font-family:Arial,sans-serif !important;
  font-size:46px !important;
  line-height:.98 !important;
  letter-spacing:-1.3px;
  font-weight:700 !important;
  margin:18px 0 17px !important;
  transition:transform .45s ease, letter-spacing .45s ease;
}

.serviceTile p{
  font-size:15px !important;
  line-height:1.6 !important;
  max-width:390px !important;
  margin-bottom:0;
}

.serviceTile b{
  font-size:10px !important;
  letter-spacing:1.15px !important;
  opacity:.82;
  transform:translateX(0);
  transition:transform .4s ease, opacity .4s ease;
}

.serviceTile span{
  font-size:10px !important;
  letter-spacing:2.1px !important;
}

.serviceTile.photo1,
.serviceTile.photo2{
  background-size:cover !important;
  background-position:center !important;
}

@media(hover:hover) and (pointer:fine){
  .serviceTile:hover{
    transform:translateY(-7px);
    box-shadow:0 24px 55px rgba(8,38,56,.16);
  }

  .serviceTile:hover::before{
    opacity:.9;
    background:linear-gradient(
      180deg,
      rgba(4,20,31,.02) 0%,
      rgba(4,20,31,.10) 35%,
      rgba(4,20,31,.62) 100%
    );
  }

  .serviceTile:hover>div{
    transform:translateY(-8px);
  }

  .serviceTile:hover h3{
    transform:translateY(-2px);
    letter-spacing:-1.6px;
  }

  .serviceTile:hover b{
    transform:translateX(8px);
    opacity:1;
  }

  .serviceTile.dark:hover{
    background:#0c4f77;
  }

  .serviceTile.light:hover{
    background:#edf3f5;
  }
}

/* Gentle entry animation for all service tiles */
@keyframes serviceCardIn{
  from{
    opacity:0;
    transform:translateY(26px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.serviceTile{
  animation:serviceCardIn .75s cubic-bezier(.2,.7,.2,1) both;
}
.serviceTile:nth-child(2){animation-delay:.08s}
.serviceTile:nth-child(3){animation-delay:.16s}
.serviceTile:nth-child(4){animation-delay:.24s}

/* Smaller lower service cards */
.animatedSmallCards article{
  position:relative;
  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    background .45s ease,
    box-shadow .45s ease;
  overflow:hidden;
}

.animatedSmallCards article::after{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  bottom:20px;
  height:1px;
  background:linear-gradient(90deg,#0a649a,transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s ease;
}

.animatedSmallCards h3{
  font-family:Arial,sans-serif !important;
  font-size:31px !important;
  line-height:1.06 !important;
  font-weight:700 !important;
  letter-spacing:-.8px;
}

.animatedSmallCards p{
  font-size:14px !important;
  line-height:1.68 !important;
}

@media(hover:hover) and (pointer:fine){
  .animatedSmallCards article:hover{
    transform:translateY(-6px);
    background:#f7fafb;
    box-shadow:0 18px 40px rgba(11,57,82,.08);
  }
  .animatedSmallCards article:hover::after{
    transform:scaleX(1);
  }
}

/* Respect reduced-motion preference */
@media(prefers-reduced-motion:reduce){
  .serviceTile,
  .serviceTile *,
  .animatedSmallCards article,
  .animatedSmallCards article *{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}

/* Mobile readability */
@media(max-width:850px){
  .serviceTile h3{
    font-size:40px !important;
  }
  .serviceTile p{
    font-size:15px !important;
  }
}

@media(max-width:520px){
  .serviceTile h3{
    font-size:34px !important;
    letter-spacing:-.7px;
  }
  .serviceTile p{
    font-size:14px !important;
    line-height:1.62 !important;
  }
  .animatedSmallCards h3{
    font-size:27px !important;
  }
  .animatedSmallCards p{
    font-size:13px !important;
  }
}

/* v7 — premium service-card typography */
.serviceTile h3{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:48px!important;
  line-height:.96!important;
  font-weight:400!important;
  letter-spacing:-1.65px!important;
  text-wrap:balance;
  max-width:520px;
}
.serviceTile p{
  font-family:Arial,sans-serif!important;
  font-size:16px!important;
  line-height:1.62!important;
  font-weight:400!important;
  letter-spacing:.05px;
  max-width:455px!important;
  color:rgba(255,255,255,.88)!important;
}
.serviceTile.light p{color:#536974!important}
.serviceTile.dark p{color:rgba(255,255,255,.86)!important}
.serviceTile>div{max-width:560px}
.serviceTile>div>span:first-child{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:9px!important;
  font-weight:700;
  letter-spacing:2.2px!important;
  opacity:.78;
}
.serviceTile>div>span:first-child:after{
  content:"";
  width:38px;
  height:1px;
  background:currentColor;
  opacity:.5;
}
.serviceTile b{
  margin-top:31px!important;
  display:inline-flex!important;
  align-items:center;
  min-height:32px;
  padding-bottom:6px;
  border-bottom:1px solid currentColor;
  font-size:9px!important;
  font-weight:700;
  letter-spacing:1.25px!important;
  opacity:.92!important;
}
.serviceTile.dark,.serviceTile.light{padding:54px!important}
.serviceTile.photo1,.serviceTile.photo2{padding:54px!important}
.serviceTile.dark h3,.serviceTile.light h3{margin-top:22px!important}
@media(hover:hover) and (pointer:fine){
 .serviceTile:hover h3{letter-spacing:-1.9px!important}
 .serviceTile:hover b{transform:translateX(7px)}
}
@media(max-width:850px){
 .serviceTile h3{font-size:42px!important}
 .serviceTile p{font-size:15px!important;max-width:430px!important}
 .serviceTile.dark,.serviceTile.light,.serviceTile.photo1,.serviceTile.photo2{padding:38px!important}
}
@media(max-width:520px){
 .serviceTile h3{font-size:35px!important;line-height:1!important;letter-spacing:-1px!important}
 .serviceTile p{font-size:14px!important;line-height:1.6!important}
 .serviceTile.dark,.serviceTile.light,.serviceTile.photo1,.serviceTile.photo2{padding:29px!important}
}

/* v8 — compass / ports / call glass panel */
.availabilityCard{
  width:390px!important;
  background:rgba(5,31,47,.10)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
  overflow:hidden;
}

.availabilityMain{
  min-height:92px!important;
  padding:18px 22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
}

.statusBlock{
  display:flex;
  align-items:center;
  gap:14px;
}

.statusDot{
  width:11px!important;
  height:11px!important;
  border-radius:50%;
  background:#62e59c;
  box-shadow:0 0 0 5px rgba(98,229,156,.08),0 0 18px rgba(98,229,156,.52);
  animation:glassPulse 2s ease-in-out infinite;
}

.statusBlock>div{display:grid;gap:4px}
.statusBlock small{
  font-size:6px;
  letter-spacing:1.45px;
  color:rgba(255,255,255,.52);
}
.statusBlock strong{
  font-size:18px!important;
  letter-spacing:1.05px;
}

.callAction{
  min-width:118px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:7px;
  font-weight:700;
  letter-spacing:1px;
  transition:background .3s ease,border-color .3s ease,transform .3s ease;
}
.callAction:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.48);
  transform:translateY(-2px);
}
.phoneIcon{
  font-size:14px;
  color:#79efad;
  line-height:1;
}

.navModule{
  border-top:1px solid rgba(255,255,255,.17);
  border-bottom:1px solid rgba(255,255,255,.17);
  padding:15px 20px 16px;
}
.navHeader,.navFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.navHeader span,.navFooter span{
  font-size:6px;
  letter-spacing:1.35px;
  color:rgba(255,255,255,.43);
}
.navHeader b,.navFooter b{
  font-size:7px;
  letter-spacing:1px;
  color:rgba(255,255,255,.88);
}

.compassWrap{
  position:relative;
  height:245px;
  margin:10px 0 7px;
}

.compassOuter{
  position:absolute;
  width:170px;
  height:170px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.23);
  border-radius:50%;
  box-shadow:
    inset 0 0 0 14px rgba(255,255,255,.015),
    inset 0 0 0 15px rgba(255,255,255,.09);
}
.compassOuter:before,
.compassOuter:after{
  content:"";
  position:absolute;
  background:rgba(255,255,255,.13);
}
.compassOuter:before{width:1px;height:100%;left:50%;top:0}
.compassOuter:after{height:1px;width:100%;left:0;top:50%}

.compassTicks{
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,.35) 0deg 1deg,
      transparent 1deg 14deg
    );
  -webkit-mask:radial-gradient(circle,transparent 0 65%,#000 66%);
  mask:radial-gradient(circle,transparent 0 65%,#000 66%);
  opacity:.5;
}

.compassRose{
  position:absolute;
  inset:25px;
  border-radius:50%;
  animation:compassDrift 18s linear infinite;
}
.compassRose span{
  position:absolute;
  font-size:7px;
  font-weight:700;
  color:rgba(255,255,255,.72);
}
.compassRose .north{top:-2px;left:50%;transform:translateX(-50%);color:#7cf0af}
.compassRose .south{bottom:-2px;left:50%;transform:translateX(-50%)}
.compassRose .east{right:-1px;top:50%;transform:translateY(-50%)}
.compassRose .west{left:-1px;top:50%;transform:translateY(-50%)}

.needleNorth,.needleSouth{
  position:absolute;
  left:50%;
  width:0;
  height:0;
  transform:translateX(-50%);
}
.needleNorth{
  top:18px;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-bottom:46px solid #7cf0af;
  filter:drop-shadow(0 0 6px rgba(124,240,175,.28));
}
.needleSouth{
  bottom:18px;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:42px solid rgba(255,255,255,.35);
}

.compassCore{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(7,39,57,.92);
  border:1px solid rgba(255,255,255,.30);
  color:#fff;
  font-size:8px;
  font-weight:700;
  letter-spacing:1px;
}

.portTag{
  position:absolute;
  z-index:5;
  padding:5px 7px;
  border:1px solid rgba(255,255,255,.17);
  background:rgba(5,31,47,.24);
  color:rgba(255,255,255,.82);
  font-size:6px;
  letter-spacing:.9px;
  white-space:nowrap;
  backdrop-filter:blur(4px);
}
.portTag:before{
  content:"";
  width:5px;
  height:5px;
  display:inline-block;
  margin-right:5px;
  border-radius:50%;
  background:#6fe6a2;
  box-shadow:0 0 9px rgba(111,230,162,.45);
}
.portSpb{left:4px;top:22px}
.portPrimorsk{right:4px;top:28px}
.portBronka{left:-1px;top:106px}
.portKron{right:-1px;top:112px}
.portUst{left:50%;bottom:10px;transform:translateX(-50%)}

@keyframes compassDrift{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

/* Keep card elegant rather than too active */
@media(prefers-reduced-motion:reduce){
  .compassRose{animation:none!important}
}

.opsInfo{
  grid-template-columns:1fr 1fr!important;
}
.opsInfo>div{
  min-height:76px!important;
}

@media(max-width:1000px){
  .availabilityCard{width:350px!important}
  .compassWrap{height:220px}
  .compassOuter{width:155px;height:155px}
}
@media(max-width:850px){
  .availabilityCard{
    width:315px!important;
    bottom:70px!important;
  }
  .navModule{padding:13px 15px 14px}
  .compassWrap{height:195px}
  .compassOuter{width:140px;height:140px}
  .callAction{min-width:102px;height:38px}
}
@media(max-width:520px){
  .availabilityCard{
    width:280px!important;
    bottom:78px!important;
  }
  .availabilityMain{padding:13px 14px!important}
  .statusBlock strong{font-size:14px!important}
  .callAction{min-width:94px;height:36px;padding:0 10px}
  .navModule{padding:12px}
  .compassWrap{height:170px}
  .compassOuter{width:120px;height:120px}
  .compassRose{inset:20px}
  .needleNorth{top:13px;border-left-width:5px;border-right-width:5px;border-bottom-width:34px}
  .needleSouth{bottom:13px;border-left-width:5px;border-right-width:5px;border-top-width:30px}
  .compassCore{width:31px;height:31px;font-size:7px}
  .portTag{font-size:5px;padding:4px 5px}
  .portSpb{top:12px}.portPrimorsk{top:18px}.portBronka{top:78px}.portKron{top:85px}.portUst{bottom:4px}
}

/* v9 — call + email quick actions */
.contactActions{display:flex;align-items:center;gap:7px}
.contactActions .callAction,.contactActions .mailAction{
  height:42px;min-width:104px;padding:0 11px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.075);
  color:#fff;font-size:6.5px;font-weight:700;letter-spacing:.85px;
  transition:transform .3s ease,background .3s ease,border-color .3s ease;
}
.contactActions .mailAction{min-width:101px}
.contactActions .contactIcon{
  width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(121,239,173,.42);
  color:#79efad;font-size:11px;line-height:1;
  background:rgba(121,239,173,.06);
}
@media(hover:hover) and (pointer:fine){
 .contactActions a:hover{transform:translateY(-2px);background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.48)}
 .contactActions a:hover .contactIcon{background:rgba(121,239,173,.13)}
}
@media(max-width:1000px){
 .contactActions{gap:5px}
 .contactActions .callAction,.contactActions .mailAction{min-width:88px;padding:0 8px;font-size:6px}
}
@media(max-width:520px){
 .availabilityMain{gap:8px!important}
 .contactActions .callAction,.contactActions .mailAction{min-width:40px;width:40px;padding:0}
 .contactActions a>span:last-child{display:none}
 .contactActions .contactIcon{width:23px;height:23px}
}

/* v10 — compact icon-only contacts; preserve panel geometry */
.availabilityMain{
  justify-content:flex-start!important;
}
.statusBlock{
  flex:1 1 auto;
  min-width:0;
}
.contactActions{
  margin-left:auto!important;
  display:flex!important;
  flex:0 0 auto;
  align-items:center;
  gap:8px!important;
}
.contactIconButton{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  padding:0!important;
  border-radius:50%;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.30)!important;
  background:rgba(255,255,255,.065)!important;
  color:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  transition:transform .28s ease,background .28s ease,border-color .28s ease,box-shadow .28s ease!important;
}
.contactIconButton svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.contactIconButton:first-child svg{width:16px;height:16px}
@media(hover:hover) and (pointer:fine){
 .contactIconButton:hover{
   transform:translateY(-2px)!important;
   background:rgba(111,230,162,.11)!important;
   border-color:rgba(111,230,162,.48)!important;
   color:#8bf1b8!important;
   box-shadow:0 7px 22px rgba(0,0,0,.09);
 }
}
@media(max-width:520px){
 .contactActions{gap:6px!important}
 .contactIconButton{width:34px!important;height:34px!important;min-width:34px!important}
 .contactIconButton svg{width:15px;height:15px}
}


/* =========================================================
   NMS DARK MARINE THEME
   ========================================================= */
:root{
  --nms-bg:#06131d;
  --nms-bg2:#081b27;
  --nms-panel:#0b2230;
  --nms-panel2:#102b3a;
  --nms-text:#f2f6f7;
  --nms-muted:#9eb0b9;
  --nms-line:rgba(255,255,255,.11);
  --nms-green:#79efad;
}

html,body{
  background:var(--nms-bg)!important;
  color:var(--nms-text)!important;
}

/* Header/navigation */
header,.header,.topbar,.nav,.navbar{
  background:rgba(4,15,23,.90)!important;
  border-color:var(--nms-line)!important;
  color:var(--nms-text)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
header a,.header a,.nav a,.navbar a{
  color:rgba(255,255,255,.84)!important;
}

/* Main formerly-light sections */
main,section,
.services,.about,.operations,.contact,
.servicesSection,.aboutSection,.operationsSection,.contactSection{
  border-color:var(--nms-line)!important;
}
.services,.about,.operations,.contact,
.servicesSection,.aboutSection,.operationsSection,.contactSection{
  background:var(--nms-bg)!important;
  color:var(--nms-text)!important;
}

section h1,section h2,section h3,section h4,
.services h1,.services h2,.services h3,
.about h1,.about h2,.about h3,
.operations h1,.operations h2,.operations h3,
.contact h1,.contact h2,.contact h3{
  color:var(--nms-text)!important;
}
section p,.services p,.about p,.operations p,.contact p{
  color:var(--nms-muted)!important;
}

/* Main service cards */
.serviceTile.dark,.serviceTile.light,
.tile.dark,.tile.light{
  background:var(--nms-panel)!important;
  color:var(--nms-text)!important;
  border-color:rgba(255,255,255,.08)!important;
}
.serviceTile.dark p,.serviceTile.light p,
.tile.dark p,.tile.light p{
  color:#b0c0c8!important;
}
.serviceTile.dark h3,.serviceTile.light h3,
.tile.dark h3,.tile.light h3{
  color:#f5f8f9!important;
}
.serviceTile.dark span,.serviceTile.light span,
.serviceTile.dark b,.serviceTile.light b{
  color:rgba(255,255,255,.87)!important;
}

@media(hover:hover) and (pointer:fine){
  .serviceTile.dark:hover,.serviceTile.light:hover,
  .tile.dark:hover,.tile.light:hover{
    background:var(--nms-panel2)!important;
    box-shadow:0 28px 70px rgba(0,0,0,.32)!important;
  }
}

/* Smaller cards */
.animatedSmallCards article,.service-small-grid article,
.serviceCard,.smallCard{
  background:#091f2c!important;
  border-color:var(--nms-line)!important;
  color:var(--nms-text)!important;
}
.animatedSmallCards article h3,.service-small-grid article h3{
  color:#f3f7f8!important;
}
.animatedSmallCards article p,.service-small-grid article p{
  color:#9eafb8!important;
}
@media(hover:hover) and (pointer:fine){
  .animatedSmallCards article:hover,.service-small-grid article:hover{
    background:#102b3a!important;
    box-shadow:0 20px 50px rgba(0,0,0,.25)!important;
  }
}

/* Lines / operational blocks */
.ops,.operation,.operationRow,.operations article,
.aboutGrid,.contactGrid,.opsInfo>div{
  border-color:var(--nms-line)!important;
}

/* Forms */
input,textarea,select{
  background:#081d29!important;
  color:#f3f7f8!important;
  border-color:rgba(255,255,255,.16)!important;
}
input::placeholder,textarea::placeholder{
  color:#718792!important;
}
input:focus,textarea:focus,select:focus{
  border-color:rgba(121,239,173,.55)!important;
  outline:none!important;
}

/* Glass compass panel remains transparent but deeper */
.availabilityCard{
  background:rgba(3,18,28,.26)!important;
  border-color:rgba(255,255,255,.20)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.24)!important;
}
.contactIconButton{
  background:rgba(255,255,255,.055)!important;
}

/* Footer */
footer,.footer{
  background:#030d14!important;
  color:#91a4ae!important;
  border-color:var(--nms-line)!important;
}

/* Generic light backgrounds that belong to content blocks */
.bg-light,.light-section{
  background:var(--nms-bg)!important;
  color:var(--nms-text)!important;
}

hr,.line,.divider{
  border-color:var(--nms-line)!important;
  background:var(--nms-line)!important;
}

::selection{
  background:rgba(121,239,173,.22);
  color:#fff;
}

/* =========================================================
   NORD MARINE SURVEY — DARK v2 refinements
   About + Contact
   ========================================================= */

/* ABOUT / COMPANY */
.company{
  background:#071722!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}

.companyPic{
  position:relative;
}
.companyPic:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(3,14,22,.02),rgba(3,14,22,.23)),
    linear-gradient(0deg,rgba(3,14,22,.16),transparent 45%);
  pointer-events:none;
}

.companyText{
  background:
    linear-gradient(145deg,rgba(13,38,52,.98),rgba(6,22,32,.99))!important;
  color:#f4f7f8!important;
  border-left:1px solid rgba(255,255,255,.08)!important;
  position:relative;
  overflow:hidden;
}

.companyText:before{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  right:-135px;
  top:-145px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(45,126,164,.16),transparent 68%);
  pointer-events:none;
}

.companyText small{
  color:#7896a5!important;
}
.companyText h2{
  color:#f5f8f9!important;
}
.companyText p{
  color:#a9bbc4!important;
  font-size:14px!important;
  line-height:1.82!important;
}
.companyText>a{
  color:#91d9f5!important;
  border-bottom:1px solid rgba(145,217,245,.34);
  padding-bottom:5px;
  transition:color .25s ease,border-color .25s ease,transform .25s ease;
}
@media(hover:hover) and (pointer:fine){
  .companyText>a:hover{
    color:#c1efff!important;
    border-color:#c1efff;
    transform:translateX(4px);
  }
}

/* CONTACT */
.contact{
  background:
    radial-gradient(circle at 10% 17%,rgba(28,83,108,.20),transparent 34%),
    linear-gradient(145deg,#061621,#091d29)!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  color:#f4f7f8!important;
}
.contact h2{
  color:#f6f8f9!important;
}
.contact p{
  color:#9fb1ba!important;
  font-size:14px!important;
  line-height:1.78!important;
}
.contact .notice{
  color:#d0a486!important;
  background:rgba(255,255,255,.025);
  border-left:2px solid rgba(208,164,134,.55);
  padding:10px 12px;
  max-width:430px;
}
.contact a{
  color:#e9eff2!important;
  transition:color .25s ease;
}
@media(hover:hover) and (pointer:fine){
  .contact a:hover{
    color:#84ebb1!important;
  }
}

/* Contact form: dark glass */
.contact form{
  background:
    linear-gradient(145deg,rgba(13,37,50,.91),rgba(7,24,34,.94))!important;
  border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:
    0 30px 72px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:38px!important;
  position:relative;
  overflow:hidden;
}

.contact form:before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:2px;
  background:linear-gradient(90deg,#65dfa0,rgba(101,223,160,.18),transparent);
}

.contact form input,
.contact form select,
.contact form textarea{
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:#f2f6f7!important;
  min-height:52px!important;
  padding:13px 14px!important;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}

.contact form textarea{
  min-height:105px!important;
}

.contact form input::placeholder,
.contact form textarea::placeholder{
  color:#718994!important;
}

.contact form select{
  color:#dce5e9!important;
}

.contact form input:focus,
.contact form select:focus,
.contact form textarea:focus{
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(101,223,160,.48)!important;
  box-shadow:0 0 0 3px rgba(101,223,160,.055);
  outline:none!important;
}

.contact form button{
  background:linear-gradient(90deg,#0f6a89,#0b5570)!important;
  color:#fff!important;
  min-height:56px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  transition:transform .28s ease,filter .28s ease,box-shadow .28s ease;
}
@media(hover:hover) and (pointer:fine){
  .contact form button:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
    box-shadow:0 16px 34px rgba(0,0,0,.24);
  }
}

@media(max-width:850px){
  .companyText{
    border-left:0!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
  }
  .contact form{
    padding:28px!important;
  }
}
@media(max-width:520px){
  .contact form{
    padding:20px!important;
  }
  .contact form input,
  .contact form select,
  .contact form textarea{
    min-height:49px!important;
  }
}