:root{
  --kwaicheong:#F4F4E8;
  --tanklog:#2C382A;
  --beacon:#C46038;
  --kwaichun:#202A1E;
  --hullpanel:#EAEAD8;
  --bunker:#B27655;
  --mooring:#9AB89E;
  --line:#C8C9B4;
  --line-deep:#A9AB95;
  --plate:#DCDCC7;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-size:16px;
  font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
  background:var(--kwaicheong);
  color:var(--tanklog);
  line-height:1.65;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:Georgia,"Times New Roman",serif;
  color:var(--tanklog);
  line-height:1.2;
  margin:0 0 0.5em;
}

p{margin:0 0 1em;}
a{color:var(--beacon);}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ============ GAUGE COLUMN NAV ============ */
.gaugecolumn{
  background:var(--kwaicheong);
  padding:0 0 4px;
  border-bottom:3px solid var(--kwaichun);
}

.gaugecolumn-board{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  background:var(--hullpanel);
  border:2px solid var(--kwaichun);
  border-top:none;
  display:flex;
  align-items:flex-end;
  gap:22px;
  min-height:132px;
}

.gaugecolumn-tubes{
  display:flex;
  align-items:flex-end;
  gap:20px;
  flex:1;
  padding:16px 0 12px;
}

.gaugecolumn-tube{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  text-decoration:none;
  position:relative;
}

.gaugecolumn-glass{
  width:26px;
  background:var(--kwaicheong);
  border:2px solid var(--kwaichun);
  border-bottom:none;
  position:relative;
  display:block;
}

.tube-a .gaugecolumn-glass{height:64px;}
.tube-b .gaugecolumn-glass{height:88px;}
.tube-c .gaugecolumn-glass{height:52px;}
.tube-d .gaugecolumn-glass{height:76px;}
.tube-e .gaugecolumn-glass{height:44px;}

.gaugecolumn-float{
  position:absolute;
  left:2px;
  right:2px;
  height:4px;
  background:var(--beacon);
  display:block;
}

.tube-a .gaugecolumn-float{top:34px;}
.tube-b .gaugecolumn-float{top:28px;}
.tube-c .gaugecolumn-float{top:22px;}
.tube-d .gaugecolumn-float{top:40px;}
.tube-e .gaugecolumn-float{top:18px;}

.gaugecolumn-tube.is-active .gaugecolumn-glass{
  background:var(--plate);
}
.gaugecolumn-tube.is-active .gaugecolumn-float{
  background:var(--beacon);
  height:10px;
}

.gaugecolumn-plate{
  display:block;
  margin-top:0;
  background:var(--kwaichun);
  color:var(--kwaicheong);
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:8px 10px 6px;
  text-align:center;
  border:2px solid var(--kwaichun);
  border-top:none;
  width:100%;
}

.gaugecolumn-tube:hover .gaugecolumn-plate{
  background:var(--beacon);
  color:var(--kwaichun);
}

.gaugecolumn-brand{
  align-self:center;
  max-width:260px;
  text-align:right;
  font-family:Georgia,serif;
  font-size:15px;
  color:var(--tanklog);
  border-left:2px solid var(--line-deep);
  padding:10px 0 10px 18px;
  line-height:1.35;
}

.gaugecolumn-brand strong{
  display:block;
  font-size:16px;
  color:var(--kwaichun);
}

.gaugecolumn-brand span{
  display:block;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--bunker);
  margin-top:4px;
}

.gaugecolumn-toggle{
  display:none;
  width:100%;
  background:var(--kwaichun);
  color:var(--kwaicheong);
  border:2px solid var(--kwaichun);
  font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:12px;
  font-family:inherit;
  cursor:pointer;
}

/* ============ HERO TANKER PROFILE ============ */
.tankerprofile{
  padding:56px 0 64px;
  background:var(--kwaicheong);
  border-bottom:2px solid var(--line);
}

.tankerprofile-grid{
  display:grid;
  grid-template-columns:54% 46%;
  gap:36px;
  align-items:center;
}

.tankerprofile-text h1{
  font-size:44px;
  margin-bottom:16px;
}

.tankerprofile-eyebrow{
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--bunker);
  border-left:4px solid var(--beacon);
  padding-left:12px;
  margin-bottom:18px;
  display:inline-block;
}

.tankerprofile-display{
  display:block;
  font-size:76px;
  letter-spacing:4px;
  color:var(--beacon);
  font-weight:bold;
  line-height:1;
  margin-top:6px;
}

.tankerprofile-text p{
  font-size:17px;
  max-width:560px;
  margin-bottom:22px;
}

.tankerprofile-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:560px;
  background:var(--beacon);
  color:var(--kwaicheong);
  text-decoration:none;
  padding:16px 22px;
  font-size:16px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:bold;
  border:2px solid var(--beacon);
}

.tankerprofile-cta:hover{
  background:var(--kwaichun);
  border-color:var(--kwaichun);
}

.tankerprofile-cta span{
  font-size:22px;
}

.tankerprofile-inline{
  font-weight:bold;
  color:var(--beacon);
  text-decoration:underline;
}

/* tanker drawing */
.tankerprofile-art{
  position:relative;
  height:340px;
}

.tankerprofile-ship{
  position:absolute;
  left:0;
  right:0;
  bottom:110px;
  height:120px;
}

.tankerprofile-deck{
  position:absolute;
  left:6%;
  right:0;
  bottom:0;
  height:6px;
  background:var(--kwaichun);
}

.tankerprofile-tank{
  position:absolute;
  bottom:6px;
  width:20%;
  background:var(--hullpanel);
  border:2px solid var(--kwaichun);
  border-bottom:none;
  overflow:hidden;
}

.tank-one{left:8%;height:78px;}
.tank-two{left:30%;height:96px;}
.tank-three{left:52%;height:64px;}

.tankerprofile-oil{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:var(--kwaichun);
}

.tank-one .tankerprofile-oil{height:46px;}
.tank-two .tankerprofile-oil{height:40px;}
.tank-three .tankerprofile-oil{height:30px;}

.tankerprofile-mark{
  position:absolute;
  left:0;
  right:0;
  height:4px;
  background:var(--beacon);
}

.tank-one .tankerprofile-mark{bottom:46px;}
.tank-two .tankerprofile-mark{bottom:40px;}
.tank-three .tankerprofile-mark{bottom:30px;}

.tankerprofile-stern{
  position:absolute;
  right:2%;
  bottom:6px;
  width:15%;
  height:110px;
  background:var(--kwaichun);
  border:2px solid var(--kwaichun);
}

.tankerprofile-stern::after{
  content:"";
  position:absolute;
  top:14px;
  left:18%;
  width:30%;
  height:30px;
  background:var(--kwaicheong);
  border:2px solid var(--kwaicheong);
}

.tankerprofile-bunker{
  position:absolute;
  left:22%;
  bottom:96px;
  width:8%;
  height:26px;
  background:var(--bunker);
  border:2px solid var(--kwaichun);
}

.tankerprofile-bunker::after{
  content:"";
  position:absolute;
  top:-16px;
  left:40%;
  width:2px;
  height:16px;
  background:var(--kwaichun);
}

.tankerprofile-sea{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:104px;
  background:var(--plate);
  border-top:2px solid var(--kwaichun);
}

.tankerprofile-bollard{
  position:absolute;
  right:16%;
  bottom:104px;
  width:16px;
  height:26px;
  background:var(--kwaichun);
}

.tankerprofile-line{
  position:absolute;
  right:17%;
  bottom:128px;
  width:2px;
  height:86px;
  background:var(--mooring);
  transform:rotate(18deg);
  transform-origin:bottom;
}

/* ============ SHARED SECTION HEAD ============ */
.section{
  padding:60px 0;
}
.section-alt{
  background:var(--hullpanel);
  border-top:2px solid var(--line);
  border-bottom:2px solid var(--line);
}
.section-head{
  margin-bottom:38px;
}
.section-head h2{
  font-size:34px;
  margin-bottom:10px;
}
.section-head p{
  max-width:720px;
  font-size:16px;
}
.section-kicker{
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--bunker);
  display:block;
  margin-bottom:8px;
}

/* ============ CARGO LOG ROWS ============ */
.cargolog{
  padding:64px 0;
  background:var(--kwaicheong);
}
.cargolog-rail{
  background:var(--hullpanel);
  border:2px solid var(--line-deep);
  padding:40px 30px 34px;
  position:relative;
}
.cargolog-rail::before{
  content:"";
  position:absolute;
  top:16px;
  left:30px;
  right:30px;
  height:6px;
  background:var(--line-deep);
}
.cargolog-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  align-items:start;
}
.cargolog-slip{
  background:var(--kwaicheong);
  border:2px solid var(--kwaichun);
  padding:22px 18px 20px;
  position:relative;
}
.cargolog-slip:nth-child(1){transform:rotate(-1.2deg);grid-column:span 2;}
.cargolog-slip:nth-child(2){transform:rotate(0.8deg);grid-column:span 1;}
.cargolog-slip:nth-child(3){transform:rotate(-0.6deg);grid-column:span 1;}
.cargolog-slip:nth-child(4){transform:rotate(0.9deg);grid-column:span 1;}
.cargolog-slip:nth-child(5){transform:rotate(-1deg);grid-column:span 2;}
.cargolog-slip:nth-child(6){transform:rotate(0.5deg);grid-column:span 1;}
.cargolog-tab{
  display:inline-block;
  background:var(--beacon);
  color:var(--kwaicheong);
  font-size:12px;
  letter-spacing:2px;
  padding:4px 10px;
  margin-bottom:12px;
  text-transform:uppercase;
  font-weight:bold;
}
.cargolog-mark{
  font-size:12px;
  letter-spacing:3px;
  color:var(--mooring);
  font-weight:bold;
  display:block;
  margin-bottom:6px;
}
.cargolog-slip h3{
  font-size:20px;
  margin-bottom:8px;
}
.cargolog-slip p{
  font-size:15px;
  margin-bottom:10px;
}
.cargolog-link{
  font-size:13px;
  font-weight:bold;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--beacon);
}

/* ============ PROSE BLOCKS ============ */
.prose{
  max-width:820px;
  font-size:16px;
}
.prose h2{
  font-size:30px;
  margin-top:32px;
}
.prose h3{
  font-size:21px;
  margin-top:26px;
}
.prose p{
  margin-bottom:16px;
}

.twocol{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.steps{
  counter-reset:step;
  list-style:none;
  padding:0;
  margin:0;
}
.steps li{
  position:relative;
  padding-left:60px;
  margin-bottom:22px;
  font-size:16px;
}
.steps li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:0;
  top:0;
  width:40px;
  height:40px;
  background:var(--kwaichun);
  color:var(--kwaicheong);
  font-family:Georgia,serif;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}
.steps li strong{
  display:block;
  font-size:17px;
  color:var(--tanklog);
}

/* ============ BUOY LINE BAND ============ */
.buoylineband{
  background:var(--kwaichun);
  padding:48px 0 42px;
}
.buoylineband-channel{
  display:flex;
  justify-content:center;
  gap:70px;
  align-items:flex-start;
  margin-bottom:26px;
  height:70px;
}
.buoylineband-float{
  width:34px;
  background:var(--hullpanel);
  border:2px solid var(--kwaicheong);
  position:relative;
  align-self:flex-start;
}
.buoylineband-float::before{
  content:"";
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  width:14px;
  height:8px;
  background:var(--beacon);
}
.buoy-one{height:44px;margin-top:0;}
.buoy-two{height:32px;margin-top:18px;}
.buoy-three{height:52px;margin-top:6px;}
.buoylineband-sentence{
  text-align:center;
  color:var(--kwaicheong);
  font-size:18px;
  max-width:760px;
  margin:0 auto;
  font-family:Georgia,serif;
  line-height:1.5;
}
.buoylineband-sentence a{
  color:var(--beacon);
  text-decoration:underline;
  font-weight:bold;
}

/* ============ CTA BLOCK ============ */
.ctablock{
  padding:56px 0;
  background:var(--kwaicheong);
}
.ctablock-inner{
  background:var(--hullpanel);
  border:2px solid var(--kwaichun);
  padding:36px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
}
.ctablock-inner h2{
  font-size:26px;
  margin:0 0 6px;
}
.ctablock-inner p{
  margin:0;
  max-width:560px;
}
.ctablock-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  background:var(--beacon);
  color:var(--kwaicheong);
  text-decoration:none;
  padding:15px 26px;
  font-weight:bold;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:15px;
  min-width:240px;
}
.ctablock-btn:hover{
  background:var(--kwaichun);
}

/* ============ BOLLARD QUAY FOOTER ============ */
.bollardquay2{
  background:var(--kwaichun);
  color:var(--kwaicheong);
  padding-top:0;
  position:relative;
}
.bollardquay2-edge{
  position:relative;
  height:60px;
  background:var(--kwaicheong);
  border-bottom:3px solid var(--kwaichun);
}
.bollardquay2-bollard{
  position:absolute;
  bottom:0;
  background:var(--kwaichun);
}
.bollardquay2-bollard::before{
  content:"";
  position:absolute;
  bottom:100%;
  left:50%;
  width:2px;
  height:34px;
  background:var(--mooring);
  transform:translateX(-50%);
}
.bollard-a{left:14%;width:24px;height:22px;}
.bollard-b{left:44%;width:18px;height:16px;}
.bollard-b::before{
  transform:translateX(-50%) rotate(-28deg);
  transform-origin:bottom;
  height:46px;
}
.bollard-c{left:76%;width:30px;height:28px;}
.bollardquay2-main{
  max-width:1180px;
  margin:0 auto;
  padding:46px 24px 30px;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:60px;
}
.bollardquay2-brand h3{
  color:var(--kwaicheong);
  font-size:22px;
  margin-bottom:12px;
}
.bollardquay2-brand p{
  color:var(--plate);
  font-size:15px;
  max-width:460px;
  margin-bottom:14px;
}
.bollardquay2-detail{
  font-size:15px;
  color:var(--plate);
  margin:0 0 4px;
}
.bollardquay2-detail a{
  color:var(--beacon);
  text-decoration:none;
}
.bollardquay2-detail a:hover{
  text-decoration:underline;
}
.bollardquay2-links h4{
  color:var(--mooring);
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:14px;
}
.bollardquay2-links ul{
  list-style:none;
  padding:0;
  margin:0;
}
.bollardquay2-links li{
  margin-bottom:10px;
}
.bollardquay2-links a{
  color:var(--kwaicheong);
  text-decoration:none;
  font-size:16px;
  border-bottom:1px solid var(--kwaichun);
}
.bollardquay2-links a:hover{
  text-decoration:underline;
  color:var(--beacon);
}
.bollardquay2-baseline{
  border-top:1px solid var(--line-deep);
  max-width:1180px;
  margin:0 auto;
  padding:16px 24px 24px;
  font-size:13px;
  color:var(--plate);
}
.bollardquay2-baseline .glyph{
  display:inline-block;
  width:9px;
  height:9px;
  background:var(--beacon);
  border-radius:50%;
  margin-right:8px;
  vertical-align:middle;
}

/* ============ SERVICES PAGE ============ */
.services-hero{
  padding:56px 0 46px;
  background:var(--hullpanel);
  border-bottom:2px solid var(--line-deep);
}
.services-hero h1{
  font-size:40px;
  margin-bottom:14px;
}
.services-hero p{
  max-width:760px;
  font-size:17px;
}

.service-block{
  padding:44px 0;
  border-bottom:1px solid var(--line);
}
.service-block:last-child{
  border-bottom:none;
}
.service-block h2{
  font-size:27px;
  margin-bottom:6px;
}
.service-block .service-tab{
  display:inline-block;
  background:var(--beacon);
  color:var(--kwaicheong);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:4px 10px;
  margin-bottom:12px;
  font-weight:bold;
}
.service-block p{
  font-size:16px;
  max-width:820px;
}

/* ============ CONTACT PAGE ============ */
.contact-hero{
  padding:56px 0 40px;
  background:var(--hullpanel);
  border-bottom:2px solid var(--line-deep);
}
.contact-hero h1{
  font-size:40px;
  margin-bottom:12px;
}
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:46px;
  padding:48px 0;
}
.contact-info h2,
.contact-form-wrap h2{
  font-size:24px;
  margin-bottom:16px;
}
.contact-line{
  font-size:16px;
  margin:0 0 10px;
}
.contact-line strong{
  display:block;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--bunker);
  margin-bottom:2px;
}
.contact-line a{
  color:var(--beacon);
  text-decoration:none;
}
.contact-line a:hover{
  text-decoration:underline;
}
.contact-faq-head{
  margin-top:32px;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact-field{
  display:flex;
  flex-direction:column;
}
.contact-field label{
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--tanklog);
  margin-bottom:6px;
  font-weight:bold;
}
.contact-field input,
.contact-field textarea{
  font-family:inherit;
  font-size:16px;
  padding:12px 14px;
  border:2px solid var(--kwaichun);
  background:var(--kwaicheong);
  color:var(--tanklog);
}
.contact-field input:focus,
.contact-field textarea:focus{
  outline:none;
  border-color:var(--beacon);
}
.contact-field textarea{
  min-height:140px;
  resize:vertical;
}
.contact-submit{
  background:var(--beacon);
  color:var(--kwaicheong);
  border:2px solid var(--beacon);
  font-family:inherit;
  font-size:16px;
  font-weight:bold;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:14px;
  cursor:pointer;
}
.contact-submit:hover{
  background:var(--kwaichun);
  border-color:var(--kwaichun);
}
.contact-note{
  font-size:14px;
  color:var(--tanklog);
  margin-top:8px;
}
.contact-note a{
  color:var(--beacon);
}
.faq-item{
  border-top:2px solid var(--line-deep);
  padding:18px 0;
}
.faq-item h3{
  font-size:18px;
  margin-bottom:6px;
}

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 600ms ease, transform 600ms ease;
}
.reveal.is-on{
  opacity:1;
  transform:translateY(0);
}
.no-js .reveal{
  opacity:1;
  transform:none;
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .tankerprofile-grid{
    grid-template-columns:1fr;
  }
  .tankerprofile-art{
    height:280px;
    order:2;
  }
  .tankerprofile-text h1{
    font-size:36px;
  }
  .tankerprofile-display{
    font-size:60px;
  }
  .cargolog-grid{
    grid-template-columns:1fr 1fr;
  }
  .cargolog-slip:nth-child(1),
  .cargolog-slip:nth-child(5){
    grid-column:span 2;
  }
  .twocol{
    grid-template-columns:1fr;
    gap:26px;
  }
  .contact-grid{
    grid-template-columns:1fr;
  }
  .bollardquay2-main{
    grid-template-columns:1fr;
    gap:34px;
  }
  .gaugecolumn-board{
    flex-wrap:wrap;
    min-height:0;
  }
  .gaugecolumn-tubes{
    flex-wrap:wrap;
    gap:12px;
  }
  .gaugecolumn-tube{
    flex:1 1 30%;
  }
  .gaugecolumn-brand{
    width:100%;
    max-width:none;
    border-left:none;
    border-top:2px solid var(--line-deep);
    text-align:left;
    padding:12px 0 4px;
  }
}

@media (max-width:620px){
  .gaugecolumn-tubes{
    display:none;
  }
  .gaugecolumn-tubes.is-open{
    display:flex;
  }
  .gaugecolumn-toggle{
    display:block;
    margin:10px 0 6px;
  }
  .gaugecolumn-board{
    padding-top:10px;
  }
  .tankerprofile-display{
    font-size:46px;
  }
  .cargolog-grid{
    grid-template-columns:1fr;
  }
  .cargolog-slip:nth-child(1),
  .cargolog-slip:nth-child(5){
    grid-column:span 1;
  }
  .cargolog-slip{
    transform:none !important;
  }
  .buoylineband-channel{
    gap:40px;
  }
  .ctablock-inner{
    padding:26px 22px;
  }
  .ctablock-btn{
    width:100%;
  }
}