/* LUOKUN GROUP LIMITED - night seal bench theme */

:root {
  --lamp-deck: #22262B;
  --lamp-cream: #F0EAD8;
  --seal-brass: #C99A3C;
  --hull-ink: #171B1F;
  --container-rust: #8C4A2F;
  --canvas-khaki: #B7A87E;
  --bench-steel: #39424B;
  --lamp-glow: #E8D9A8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-size: 16px;
  font-family: Georgia, "Times New Roman", serif;
  background-color: #22262B;
  color: #F0EAD8;
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  line-height: 1.2;
  margin: 0 0 0.5em 0;
  letter-spacing: 0.01em;
}

h2 { color: #F0EAD8; font-size: 1.9rem; }
h3 { color: #F0EAD8; font-size: 1.25rem; }
p { margin: 0 0 1em 0; }

a { color: #C99A3C; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; color: #E8D9A8; }

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

/* ---------- LAMP POST HEAD ---------- */
.lamppost {
  background-color: #171B1F;
  border-bottom: 4px solid #C99A3C;
  padding: 0;
}

.lamppost-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 24px 0 24px;
  display: flex;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}

.lamppost-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #39424B;
  border: 2px solid #C99A3C;
  border-radius: 3px;
  padding: 9px 15px;
  margin-bottom: 14px;
}

.lamppost-bolt {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #C99A3C;
  border: 3px solid #171B1F;
  box-shadow: 0 0 0 2px #C99A3C;
  flex: 0 0 auto;
}

.lamppost-brand-text {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: bold;
  font-size: 1rem;
  color: #F0EAD8;
  letter-spacing: 0.06em;
}

.lamppost-posts {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.lamppost-post {
  text-align: center;
  min-width: 92px;
}

.lamppost-dome {
  width: 14px;
  height: 14px;
  margin: 0 auto 3px auto;
  border-radius: 50% 50% 0 0;
  background-color: #E8D9A8;
  box-shadow: 0 0 10px 3px #E8D9A8;
}

.lamppost-disc {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #39424B;
  border: 3px solid #C99A3C;
}

.lamppost-stem {
  display: block;
  background-color: #39424B;
  color: #F0EAD8;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 6px;
  margin-top: 3px;
  border-radius: 0 0 3px 3px;
}

.lamppost-stem:hover, .lamppost-stem:focus {
  background-color: #C99A3C;
  color: #171B1F;
  text-decoration: none;
}

.lamppost-post.p2 { margin-bottom: 8px; }
.lamppost-post.p3 { margin-bottom: 16px; }
.lamppost-post.p4 { margin-bottom: 4px; }
.lamppost-post.p5 { margin-bottom: 12px; }

.lamppost-toggle {
  display: none;
  margin: 0 0 14px 0;
  background-color: #39424B;
  color: #F0EAD8;
  border: 2px solid #C99A3C;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.85rem;
  padding: 8px 14px;
  cursor: pointer;
}

/* ---------- HERO: SEAL BENCH SCENE ---------- */
.sealbench {
  background-color: #22262B;
  padding: 54px 0 0 0;
}

.sealbench-headline {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 30px 24px;
}

.sealbench-line {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.05;
  display: block;
}

.sealbench-line.brass { color: #C99A3C; }
.sealbench-line.cream { color: #F0EAD8; }

.sealbench-lede {
  max-width: 640px;
  color: #F0EAD8;
  font-size: 1.05rem;
  margin-top: 18px;
}

.sealbench-ctas {
  display: flex;
  gap: 16px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.sealtag {
  display: inline-block;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 22px;
  position: relative;
  padding-left: 42px;
}

.sealtag-primary {
  background-color: #C99A3C;
  color: #171B1F;
  border: 2px solid #C99A3C;
}

.sealtag-primary::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #171B1F;
  border: 3px solid #E8D9A8;
}

.sealtag-primary:hover, .sealtag-primary:focus {
  text-decoration: none;
  background-color: #E8D9A8;
  color: #171B1F;
}

.sealtag-secondary {
  background-color: #22262B;
  color: #C99A3C;
  border: 2px solid #C99A3C;
}

.sealtag-secondary::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #C99A3C;
  border: 3px solid #22262B;
}

.sealtag-secondary:hover, .sealtag-secondary:focus {
  text-decoration: none;
  background-color: #C99A3C;
  color: #171B1F;
}

/* YARD BAND - the stacked CSS scene */
.yardband {
  position: relative;
  background-color: #171B1F;
  height: 400px;
  overflow: hidden;
  border-top: 6px solid #39424B;
  border-bottom: 6px solid #39424B;
}

/* stacked container silhouettes skyline */
.container-sil {
  position: absolute;
  background-color: #22262B;
  border: 2px solid #39424B;
}

.container-sil .rodrow {
  position: absolute;
  top: 10%;
  height: 80%;
  width: 100%;
}

.container-sil .lockrod {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: #39424B;
}

.sil-a {
  left: 30%;
  top: 58px;
  width: 300px;
  height: 120px;
}

.sil-b {
  left: 44%;
  top: 178px;
  width: 340px;
  height: 120px;
}

.sil-c {
  left: 20%;
  top: 178px;
  width: 220px;
  height: 120px;
}

.sil-door {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 88px;
  height: 96px;
  background-color: #8C4A2F;
  border: 2px solid #171B1F;
}

.sil-door .drod {
  position: absolute;
  top: 4px;
  width: 5px;
  height: 88px;
  background-color: #C99A3C;
}

/* gate office window in the far skyline */
.gatewindow {
  position: absolute;
  right: 5%;
  top: 96px;
  width: 120px;
  height: 96px;
  background-color: #171B1F;
  border: 4px solid #39424B;
}

.gatewindow-glass {
  position: absolute;
  left: 12px;
  top: 12px;
  right: 12px;
  bottom: 12px;
  background-color: #E8D9A8;
}

.gatewindow-slot {
  position: absolute;
  left: 26px;
  top: 38px;
  width: 68px;
  height: 12px;
  background-color: #171B1F;
}

.gatewindow-counter {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 80px;
  height: 8px;
  background-color: #8C4A2F;
}

/* work lamp */
.worklamp {
  position: absolute;
  left: 4%;
  bottom: 110px;
  width: 12px;
  height: 200px;
  background-color: #39424B;
}

.worklamp-head {
  position: absolute;
  left: -20px;
  top: -18px;
  width: 52px;
  height: 26px;
  background-color: #39424B;
  border: 2px solid #C99A3C;
  border-radius: 6px;
}

.lampcone {
  position: absolute;
  left: 40px;
  top: 138px;
  width: 0;
  height: 0;
  border-left: 130px solid transparent;
  border-right: 130px solid transparent;
  border-top: 210px solid #E8D9A8;
}

/* vessel board */
.vesselboard {
  position: absolute;
  left: 40%;
  bottom: 150px;
  width: 200px;
  height: 78px;
  background-color: #171B1F;
  border: 4px solid #39424B;
  padding: 8px 10px;
}

.vesselboard-text {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: #E8D9A8;
  text-align: center;
  line-height: 1.3;
}

/* bench and equipment */
.bench {
  position: absolute;
  left: 3%;
  bottom: 46px;
  width: 46%;
  height: 22px;
  background-color: #39424B;
  border-top: 5px solid #C99A3C;
}

.bench-leg {
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 46px;
  background-color: #39424B;
}

.sealpress {
  position: absolute;
  left: 12%;
  bottom: 68px;
  width: 74px;
  height: 58px;
  background-color: #39424B;
  border: 2px solid #C99A3C;
  border-radius: 3px;
}

.sealpress::after {
  content: "";
  position: absolute;
  left: 24px;
  top: -16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #8C4A2F;
  border: 3px solid #C99A3C;
}

.clipboard {
  position: absolute;
  left: 26%;
  bottom: 68px;
  width: 62px;
  height: 82px;
  background-color: #B7A87E;
  border: 2px solid #171B1F;
}

.clipboard-clip {
  position: absolute;
  left: 20px;
  top: -6px;
  width: 22px;
  height: 10px;
  background-color: #39424B;
}

.clipboard-line {
  position: absolute;
  left: 8px;
  height: 2px;
  width: 46px;
  background-color: #171B1F;
}

/* seal rack with bolt + cable seals */
.sealrack {
  position: absolute;
  right: 3%;
  bottom: 46px;
  width: 34%;
  height: 130px;
  background-color: #39424B;
  border-left: 4px solid #C99A3C;
  border-right: 4px solid #C99A3C;
}

.bolseal {
  position: absolute;
  width: 16px;
  height: 26px;
  background-color: #C99A3C;
  border-radius: 3px;
}

.bolseal::after {
  content: "";
  position: absolute;
  left: -6px;
  top: -8px;
  width: 28px;
  height: 16px;
  border-radius: 8px 8px 0 0;
  background-color: #C99A3C;
  border: 2px solid #171B1F;
}

.cabseal {
  position: absolute;
  width: 44px;
  height: 10px;
  background-color: #C99A3C;
  border-radius: 5px;
}

.cabseal::after {
  content: "";
  position: absolute;
  right: -12px;
  top: -6px;
  width: 26px;
  height: 22px;
  background-color: #B7A87E;
  border: 2px solid #171B1F;
}

/* ---------- SECTION: SEAL RACK RUN ---------- */
.sealrackrun {
  background-color: #22262B;
  padding: 60px 0 70px 0;
}

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

.railhead-kicker {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C99A3C;
}

.section-intro {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 30px 24px;
  color: #F0EAD8;
}

.rackrail {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 24px 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 22px;
  border-top: 3px solid #39424B;
}

.station {
  background-color: #39424B;
  border: 2px solid #C99A3C;
  border-radius: 3px;
  padding: 22px 20px 24px 20px;
  position: relative;
}

.station .sealnum {
  position: absolute;
  right: 12px;
  top: 10px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: #B7A87E;
}

.station .stamp {
  position: absolute;
  left: 20px;
  bottom: 12px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E8D9A8;
  border: 2px solid #8C4A2F;
  padding: 2px 7px;
}

.station h3 { margin-top: 52px; }

.station p { color: #F0EAD8; margin-bottom: 1.4em; }

.station .svc-link {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C99A3C;
}

.mountbolt {
  width: 40px;
  height: 52px;
  position: relative;
  margin-bottom: 6px;
}

.mountbolt .body {
  position: absolute;
  left: 12px;
  bottom: 0;
  width: 16px;
  height: 30px;
  background-color: #C99A3C;
  border-radius: 3px;
}

.mountbolt .dome {
  position: absolute;
  left: 4px;
  top: 0;
  width: 32px;
  height: 18px;
  border-radius: 9px 9px 0 0;
  background-color: #C99A3C;
  border: 2px solid #171B1F;
}

.mountcable {
  width: 40px;
  height: 52px;
  position: relative;
  margin-bottom: 6px;
}

.mountcable .loop {
  position: absolute;
  left: 2px;
  top: 4px;
  width: 36px;
  height: 40px;
  border: 4px solid #C99A3C;
  border-radius: 40px 40px 6px 6px;
  border-bottom-color: #171B1F;
}

.mountcable .tag {
  position: absolute;
  right: 0;
  top: 26px;
  width: 18px;
  height: 20px;
  background-color: #B7A87E;
  border: 2px solid #171B1F;
}

.station.w-wide { width: 355px; margin-left: 26px; margin-top: 34px; }
.station.w-mid { width: 300px; margin-left: 4px; margin-top: 0; }
.station.w-narrow { width: 260px; margin-left: 40px; margin-top: 58px; }
.station.w-wide2 { width: 340px; margin-left: 0; margin-top: 10px; }
.station.w-mid2 { width: 290px; margin-left: 60px; margin-top: 46px; }
.station.w-narrow2 { width: 270px; margin-left: 20px; margin-top: 22px; }

/* ---------- ACCENT STRIP: VESSEL BOARD ---------- */
.vesselstrip {
  background-color: #171B1F;
  border-top: 4px solid #C99A3C;
  border-bottom: 4px solid #C99A3C;
  padding: 20px 0;
}

.vesselstrip-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.vesselstrip-board {
  background-color: #171B1F;
  border: 3px solid #39424B;
  padding: 12px 20px;
}

.vesselstrip-board span {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  color: #E8D9A8;
}

.vesselstrip-sentence {
  color: #F0EAD8;
  flex: 1 1 320px;
  margin: 0;
}

/* ---------- CONTENT BLOCKS ---------- */
.contentblock {
  padding: 60px 0;
}

.contentblock.alt {
  background-color: #171B1F;
}

.twocol {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
}

.twocol > div { flex: 1 1 320px; }

.leadtext { font-size: 1.08rem; color: #F0EAD8; }

.listpanel {
  background-color: #39424B;
  border-left: 5px solid #C99A3C;
  padding: 22px 26px;
}

.listpanel h3 { color: #F0EAD8; }

.listpanel ul { margin: 0; padding-left: 20px; color: #F0EAD8; }
.listpanel li { margin-bottom: 0.7em; }

.pagehead {
  background-color: #171B1F;
  border-bottom: 5px solid #C99A3C;
  padding: 46px 0;
}

.pagehead h1 {
  font-size: 2.5rem;
  color: #F0EAD8;
  margin: 0;
}

.pagehead p { color: #F0EAD8; margin: 12px 0 0 0; max-width: 760px; }

/* service detail blocks on services.html */
.svcdetail {
  padding: 44px 0;
  border-bottom: 2px solid #39424B;
}

.svcdetail h2 { color: #C99A3C; }
.svcdetail .svcnum {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: #B7A87E;
  text-transform: uppercase;
}

.processtable {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}

.processtable th, .processtable td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 2px solid #39424B;
  color: #F0EAD8;
}

.processtable th {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  color: #C99A3C;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ctapanel {
  background-color: #171B1F;
  border: 3px solid #C99A3C;
  padding: 34px 30px;
  margin: 40px 0;
}

.ctapanel h2 { color: #E8D9A8; }

/* contact page */
.contactgrid {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
  padding: 56px 0;
}

.contactgrid .col { flex: 1 1 340px; }

.contactform label {
  display: block;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C99A3C;
  margin-bottom: 6px;
}

.contactform input,
.contactform textarea {
  width: 100%;
  background-color: #171B1F;
  border: 2px solid #39424B;
  color: #F0EAD8;
  font-family: Georgia, serif;
  font-size: 1rem;
  padding: 11px 12px;
  margin-bottom: 18px;
}

.contactform input:focus,
.contactform textarea:focus {
  border-color: #C99A3C;
  outline: none;
}

.contactform button {
  background-color: #C99A3C;
  color: #171B1F;
  border: 2px solid #C99A3C;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 26px;
  cursor: pointer;
}

.contactform button:hover,
.contactform button:focus {
  background-color: #E8D9A8;
}

.formnote { color: #B7A87E; font-size: 0.9rem; margin-top: 8px; }

.infoblock {
  background-color: #39424B;
  border-left: 5px solid #C99A3C;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.infoblock h3 { margin-top: 0; color: #E8D9A8; }
.infoblock p { margin-bottom: 0.5em; }

.faqitem {
  border-bottom: 2px solid #39424B;
  padding: 16px 0;
}

.faqq {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  color: #C99A3C;
  font-weight: bold;
  margin: 0 0 6px 0;
}

/* ---------- SCROLL REVEAL ---------- */
.revealable {
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.revealable.will-reveal {
  opacity: 0;
  transform: translateY(24px);
}

.revealable.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- FOOTER: GATE OFFICE ---------- */
.gateoffice {
  background-color: #171B1F;
  border-top: 6px solid #39424B;
  padding: 48px 0 0 0;
}

.gateoffice-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 30px 24px;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.gateoffice-window {
  width: 260px;
  height: 170px;
  background-color: #171B1F;
  border: 5px solid #39424B;
  position: relative;
  flex: 0 0 auto;
}

.gateoffice-glass {
  position: absolute;
  left: 16px;
  top: 16px;
  right: 16px;
  bottom: 16px;
  background-color: #E8D9A8;
}

.gateoffice-slot {
  position: absolute;
  left: 44px;
  top: 60px;
  width: 140px;
  height: 14px;
  background-color: #171B1F;
}

.gateoffice-counter {
  position: absolute;
  left: 30px;
  bottom: 30px;
  width: 170px;
  height: 10px;
  background-color: #8C4A2F;
}

.gateoffice-duty {
  background-color: #B7A87E;
  color: #171B1F;
  padding: 18px 22px;
  flex: 1 1 280px;
}

.gateoffice-duty h3 { color: #171B1F; margin-top: 0; }
.gateoffice-duty p { color: #171B1F; margin-bottom: 0.6em; }

.gateoffice-passes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 320px;
  align-items: flex-start;
}

.gatepass {
  background-color: #39424B;
  border: 2px solid #C99A3C;
  color: #F0EAD8;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 2px;
  position: relative;
}

.gatepass::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #C99A3C;
}

.gatepass:hover, .gatepass:focus {
  background-color: #C99A3C;
  color: #171B1F;
  text-decoration: none;
}

.plinth {
  background-color: #22262B;
  border-top: 3px solid #39424B;
  padding: 18px 0;
}

.plinth-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  color: #F0EAD8;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.85rem;
}

.plinth-bolt {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #C99A3C;
  margin-right: 7px;
  vertical-align: middle;
}

.plinth-copy { color: #B7A87E; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  .lamppost-toggle { display: block; }
  .lamppost-posts { display: none; width: 100%; flex-direction: column; align-items: stretch; }
  .lamppost-posts.open { display: flex; }
  .lamppost-post { min-width: 0; width: 100%; margin-bottom: 0; display: flex; align-items: center; gap: 10px; }
  .lamppost-dome, .lamppost-disc { display: none; }
  .lamppost-stem { flex: 1 1 auto; text-align: left; margin-top: 0; }
  .sealbench-line { font-size: 2.1rem; }
  .yardband { height: 480px; }
  .lampcone { border-left-width: 90px; border-right-width: 90px; border-top-width: 150px; }
  .station.w-wide, .station.w-mid, .station.w-narrow,
  .station.w-wide2, .station.w-mid2, .station.w-narrow2 {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }
}