:root{
  --navy: #12233F;
  --navy-2: #16294A;
  --navy-3: #1B3160;
  --orange: #F2884B;
  --orange-dark: #DD6E31;
  --grey-bg: #F4F6F9;
  --text: #2B3A4E;
  --muted: #6B7A8D;
  --white: #FFFFFF;
  --line: #E6E9EF;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:120px;}
body{font-family:'Roboto', sans-serif; color:var(--text); background:var(--white); line-height:1.7;}
h1,h2,h3,h4{font-family:'Poppins', sans-serif; font-weight:700; color:var(--navy); line-height:1.28;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}
section{padding:90px 0;}
@media (max-width:780px){section{padding:56px 0;} .wrap{padding:0 18px;}}

.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 30px; font-weight:600; font-size:0.94rem; border-radius:3px; transition:.25s; font-family:'Poppins',sans-serif;}
.btn-orange{background:var(--orange); color:var(--white);}
.btn-orange:hover{background:var(--orange-dark);}
.btn-outline{border:2px solid rgba(255,255,255,0.55); color:var(--white);}
.btn-outline:hover{background:rgba(255,255,255,0.12); border-color:var(--white);}
.btn-navy{background:var(--navy); color:var(--white);}
.btn-navy:hover{background:var(--navy-3);}

/* ---------- topbar ---------- */
.topbar{background:var(--navy); color:rgba(255,255,255,0.82); font-size:0.86rem;}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:10px 24px; flex-wrap:wrap; gap:8px;}
.topbar .tb-left{display:flex; gap:26px; flex-wrap:wrap;}
.topbar .tb-item{display:flex; align-items:center; gap:8px;}
.topbar .tb-item i{color:var(--orange);}
.topbar .tb-right{display:flex; gap:16px; align-items:center; font-size:0.82rem; color:rgba(255,255,255,0.6);}
.topbar .reg{font-family:'Poppins',sans-serif; letter-spacing:0.02em;}
@media (max-width:900px){ .topbar .tb-right{display:none;} }
@media (max-width:560px){ .topbar .tb-left{font-size:0.78rem; gap:14px;} }

/* ---------- header / nav ---------- */
header{background:var(--white); box-shadow:0 2px 14px rgba(18,35,63,0.07); position:sticky; top:0; z-index:50;}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:82px;}
.logo{display:flex; flex-direction:column; font-family:'Poppins',sans-serif;}
.logo .l1{font-weight:800; font-size:1.28rem; color:var(--navy); letter-spacing:-0.01em;}
.logo .l2{font-weight:500; font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--orange);}
.navlinks{display:flex; align-items:center; gap:6px;}
.navlinks > li{position:relative;}
.navlinks > li > a{display:flex; align-items:center; gap:5px; padding:14px 16px; font-weight:600; font-size:0.93rem; color:var(--navy); font-family:'Poppins',sans-serif;}
.navlinks > li > a i{font-size:0.66rem; color:var(--muted); transition:.2s;}
.navlinks > li:hover > a{color:var(--orange);}
.navlinks > li:hover > a i{transform:rotate(180deg); color:var(--orange);}
.navlinks > li.active > a{color:var(--orange);}
.dropdown{
  position:absolute; top:100%; left:0; background:var(--white); min-width:260px;
  box-shadow:0 18px 40px rgba(18,35,63,0.14); border-top:3px solid var(--orange);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.2s; padding:8px 0;
}
.navlinks > li:hover .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown a{display:block; padding:12px 22px; font-size:0.89rem; color:var(--text); font-weight:500;}
.dropdown a:hover{background:var(--grey-bg); color:var(--orange);}
.dropdown a.active{color:var(--orange); font-weight:700;}
.nav-cta{margin-left:8px;}
.navtoggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.navtoggle span{width:24px; height:2px; background:var(--navy);}
@media (max-width:980px){
  .navlinks{position:fixed; top:0; right:0; bottom:0; width:78%; max-width:340px; background:var(--white);
    flex-direction:column; align-items:stretch; padding:90px 0 24px; box-shadow:-10px 0 30px rgba(0,0,0,0.15);
    transform:translateX(100%); transition:.3s; overflow-y:auto;}
  .navlinks.open{transform:translateX(0);}
  .navlinks > li > a{padding:16px 26px; justify-content:space-between;}
  .dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border-top:none; display:none; background:var(--grey-bg); padding:0;}
  .navlinks > li.open .dropdown{display:block;}
  .nav-cta{margin:14px 26px;}
  .navtoggle{display:flex;}
}

/* ---------- page header banner (inner pages) ---------- */
.pagehead{position:relative; padding:72px 0; color:var(--white); overflow:hidden;}
.pagehead-bg{position:absolute; inset:0; background:linear-gradient(100deg, rgba(18,35,63,0.93) 0%, rgba(18,35,63,0.8) 100%), var(--img) center/cover; background-color:var(--navy);}
.pagehead .wrap{position:relative; z-index:1;}
.pagehead .eyebrow{color:var(--orange); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; font-size:0.82rem; margin-bottom:12px; font-family:'Poppins',sans-serif;}
.pagehead h1{color:var(--white); font-size:clamp(1.9rem,3.6vw,2.7rem); margin-bottom:14px;}
.crumb{color:rgba(255,255,255,0.65); font-size:0.9rem;}
.crumb a:hover{color:var(--white);}
.crumb .sep{margin:0 8px; opacity:0.5;}

/* ---------- hero (home only) ---------- */
.hero{position:relative; min-height:640px; display:flex; align-items:center; color:var(--white); overflow:hidden;}
.hero-bg{position:absolute; inset:0; background:linear-gradient(100deg, rgba(18,35,63,0.93) 0%, rgba(18,35,63,0.72) 45%, rgba(18,35,63,0.42) 100%), url('images/hero-1.jpg') center/cover;}
.hero-inner{position:relative; z-index:1; max-width:640px; padding:80px 0;}
.hero .eyebrow{color:var(--orange); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; font-size:0.86rem; margin-bottom:16px; font-family:'Poppins',sans-serif;}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem); color:var(--white); margin-bottom:20px;}
.hero p{font-size:1.05rem; color:rgba(255,255,255,0.86); margin-bottom:32px; max-width:540px;}
.hero .cta-row{display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- section heading ---------- */
.shead{max-width:680px; margin:0 auto 56px; text-align:center;}
.shead .eyebrow{color:var(--orange); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; font-size:0.82rem; margin-bottom:12px; font-family:'Poppins',sans-serif;}
.shead h2{font-size:clamp(1.7rem,2.8vw,2.3rem);}
.shead p{color:var(--muted); margin-top:14px; font-size:1.02rem;}
.shead.left{text-align:left; margin-left:0;}

/* ---------- feature grid (icon cards) ---------- */
.features{background:var(--grey-bg);}
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.feat-grid{grid-template-columns:1fr;}}
.feat-card{background:var(--white); padding:36px 30px; border-radius:6px; box-shadow:0 6px 24px rgba(18,35,63,0.06); transition:.25s; border-bottom:3px solid transparent;}
.feat-card:hover{transform:translateY(-6px); box-shadow:0 16px 34px rgba(18,35,63,0.12); border-bottom-color:var(--orange);}
.feat-icon{width:58px; height:58px; border-radius:50%; background:rgba(242,136,75,0.12); display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.feat-icon i{font-size:1.5rem; color:var(--orange);}
.feat-card h3{font-size:1.16rem; margin-bottom:10px;}
.feat-card p{color:var(--muted); font-size:0.94rem;}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;}
@media (max-width:860px){.about-grid{grid-template-columns:1fr; gap:32px;}}
.about-img{position:relative;}
.about-img img{border-radius:6px; width:100%; height:420px; object-fit:cover;}
.about-img .badge{position:absolute; bottom:-22px; right:-22px; background:var(--navy); color:var(--white); padding:22px 26px; border-radius:6px; box-shadow:0 14px 30px rgba(18,35,63,0.25);}
.about-img .badge .n{font-family:'Poppins',sans-serif; font-weight:800; font-size:1.7rem; color:var(--orange);}
.about-img .badge .l{font-size:0.78rem; color:rgba(255,255,255,0.75); margin-top:2px;}
@media (max-width:560px){.about-img .badge{right:8px; bottom:-18px; padding:16px 18px;}}
.about-copy p{color:var(--muted); margin-bottom:14px;}
.check-list{margin-top:22px;}
.check-list li{display:flex; gap:12px; padding:10px 0; align-items:flex-start;}
.check-list i{color:var(--orange); margin-top:4px;}
.check-list span{color:var(--text); font-size:0.96rem;}

.quote-box{background:var(--grey-bg); border-left:4px solid var(--orange); padding:22px 26px; margin-top:26px; border-radius:0 6px 6px 0;}
.quote-box p{font-family:'Poppins',sans-serif; font-weight:600; color:var(--navy); font-size:1.06rem; font-style:italic;}

/* ---------- mission ---------- */
.mission-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:20px;}
@media (max-width:860px){.mission-grid{grid-template-columns:1fr;}}
.mission-card{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:30px 26px; position:relative;}
.mission-card .mnum{font-family:'Poppins',sans-serif; font-weight:800; font-size:2rem; color:var(--grey-bg); -webkit-text-stroke:1.5px var(--orange); position:absolute; top:18px; right:22px;}
.mission-card h4{font-size:1rem; margin-bottom:10px; padding-right:30px;}
.mission-card p{color:var(--muted); font-size:0.92rem;}

/* ---------- safety (dark) ---------- */
.safety{background:var(--navy); color:var(--white); position:relative;}
.safety .shead h2{color:var(--white);}
.safety .shead p{color:rgba(255,255,255,0.68);}
.safety-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
@media (max-width:900px){.safety-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.safety-grid{grid-template-columns:1fr;}}
.safety-card{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:6px; padding:28px 24px;}
.safety-card i{color:var(--orange); font-size:1.5rem; margin-bottom:16px; display:block;}
.safety-card h4{color:var(--white); font-size:1.02rem; margin-bottom:10px;}
.safety-card p{color:rgba(255,255,255,0.68); font-size:0.9rem;}

/* ---------- business area ---------- */
.biz-row{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; border-radius:6px; overflow:hidden; box-shadow:0 10px 30px rgba(18,35,63,0.08); margin-bottom:28px;}
@media (max-width:780px){.biz-row{grid-template-columns:1fr;}}
.biz-row img{width:100%; height:100%; object-fit:cover; min-height:280px;}
.biz-copy{background:var(--white); padding:44px 40px; display:flex; flex-direction:column; justify-content:center;}
.biz-copy .num{font-family:'Poppins',sans-serif; font-weight:800; color:var(--orange); font-size:0.86rem; letter-spacing:0.08em; margin-bottom:10px;}
.biz-copy h3{font-size:1.5rem; margin-bottom:14px;}
.biz-copy p{color:var(--muted);}

/* ---------- people ---------- */
.people-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start;}
@media (max-width:860px){.people-grid{grid-template-columns:1fr; gap:32px;}}
.people-grid p{color:var(--muted); margin-bottom:14px;}
.exec-card{background:var(--grey-bg); border-radius:6px; padding:26px; margin-bottom:14px; display:flex; align-items:center; gap:16px;}
.exec-avatar{width:52px; height:52px; border-radius:50%; background:var(--navy); color:var(--orange); display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:700; flex:none;}
.exec-card .name{font-family:'Poppins',sans-serif; font-weight:700; color:var(--navy); font-size:1.02rem;}
.exec-card .role{color:var(--muted); font-size:0.84rem;}

.exec-card.featured{align-items:flex-start; background:var(--white); border:1px solid var(--line); box-shadow:0 8px 24px rgba(18,35,63,0.06); padding:24px;}
.exec-photo{width:84px; height:84px; border-radius:8px; object-fit:cover; flex:none;}
.exec-card.featured .exec-avatar{width:84px; height:84px; border-radius:8px; font-size:1.3rem;}
.exec-card.featured .exec-body{display:flex; flex-direction:column;}
.exec-card.featured .bio{color:var(--muted); font-size:0.88rem; margin-top:10px; line-height:1.65;}

/* ---------- fleet ---------- */
.fleet{background:var(--grey-bg);}
.vessel-card{background:var(--white); border-radius:8px; overflow:hidden; box-shadow:0 12px 34px rgba(18,35,63,0.08); display:grid; grid-template-columns:1.1fr 0.9fr;}
@media (max-width:900px){.vessel-card{grid-template-columns:1fr;}}
.vessel-imgs{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:var(--grey-bg);}
.vessel-imgs img{width:100%; height:100%; object-fit:cover; min-height:170px; border-radius:4px;}
.vessel-imgs img:first-child{grid-column:1/3; min-height:220px;}
.vessel-data{padding:40px;}
.vessel-data .tagline{color:var(--orange); font-weight:700; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.06em; font-family:'Poppins',sans-serif; margin-bottom:8px;}
.vessel-data h3{font-size:1.5rem; margin-bottom:18px;}
.spec-table{width:100%; border-collapse:collapse;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table tr:first-child{border-top:1px solid var(--line);}
.spec-table td{padding:12px 4px; font-size:0.92rem;}
.spec-table td:first-child{color:var(--muted); font-weight:500;}
.spec-table td:last-child{text-align:right; font-family:'Poppins',sans-serif; font-weight:600; color:var(--navy);}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg, var(--navy) 0%, var(--navy-3) 100%); color:var(--white); text-align:center;}
.cta-band h2{color:var(--white); font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:16px;}
.cta-band p{color:rgba(255,255,255,0.75); max-width:560px; margin:0 auto 30px;}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr; gap:36px;}}
.contact-card{background:var(--grey-bg); border-radius:6px; padding:22px 24px; display:flex; gap:16px; align-items:flex-start; margin-bottom:16px;}
.contact-card i{color:var(--orange); font-size:1.2rem; margin-top:2px;}
.contact-card .lbl{font-family:'Poppins',sans-serif; font-weight:700; color:var(--navy); font-size:0.92rem; margin-bottom:4px;}
.contact-card a, .contact-card div.val{color:var(--muted); font-size:0.92rem; display:block;}
.contact-card a:hover{color:var(--orange);}
.contact-form{background:var(--white); border:1px solid var(--line); border-radius:8px; padding:36px; box-shadow:0 10px 30px rgba(18,35,63,0.06);}
.contact-form input, .contact-form textarea{width:100%; border:1px solid var(--line); background:var(--grey-bg); padding:13px 16px; font-family:'Roboto'; font-size:0.94rem; border-radius:4px; margin-bottom:16px;}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--orange); background:var(--white);}
.contact-form label{display:block; font-family:'Poppins',sans-serif; font-weight:600; font-size:0.8rem; color:var(--navy); margin-bottom:6px;}
.contact-map{border-radius:8px; overflow:hidden; margin-top:40px; border:1px solid var(--line);}
.contact-map iframe{width:100%; height:340px; border:0; display:block;}

/* ---------- footer ---------- */
footer{background:var(--navy); color:rgba(255,255,255,0.62);}
.foot-top{padding:70px 0 40px;}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:40px;}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr; row-gap:34px;}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr;}}
.foot-logo{font-family:'Poppins',sans-serif; font-weight:800; color:var(--white); font-size:1.25rem; margin-bottom:14px;}
.foot-grid h5{color:var(--white); font-family:'Poppins',sans-serif; font-size:0.94rem; margin-bottom:18px; text-transform:uppercase; letter-spacing:0.04em;}
.foot-grid ul li{margin-bottom:11px; font-size:0.9rem;}
.foot-grid ul li a:hover{color:var(--orange);}
.foot-social{display:flex; gap:10px; margin-top:18px;}
.foot-social a{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; transition:.2s;}
.foot-social a:hover{background:var(--orange);}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.1); padding:20px 0; font-size:0.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.foot-bottom b{color:rgba(255,255,255,0.85); font-weight:500;}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }

/* ---------- floating whatsapp button ---------- */
.whatsapp-float{
  position:fixed; right:24px; bottom:24px; z-index:999;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
  transition:transform .2s ease, box-shadow .2s ease;
  font-size:1.7rem;
}
.whatsapp-float:hover{transform:scale(1.08); box-shadow:0 10px 30px rgba(0,0,0,0.32);}
.whatsapp-float i{line-height:1;}
@media (max-width:560px){
  .whatsapp-float{right:16px; bottom:16px; width:52px; height:52px; font-size:1.5rem;}
}