/* ============================================================
   MGD CONSTRUCTION LTD - SHIPYARD HULL SITE THEME
   Dark gunmetal plate, dockside-white text, safety-orange accent.
   All decorative colours are pre-blended solid hex values.
   Fully opaque solid colours only, no transparency, no text gradients.
   ============================================================ */

:root{
  --gunmetal:#14181D;      /* body ground, plate steel at dusk      */
  --panel:#1C222A;         /* raised plate panel                    */
  --deep:#0C0F13;          /* deeper dock panel                     */
  --slate:#6E8C99;         /* sea slate draft marks and rails       */
  --hair:#2A323C;          /* hairline separators                   */
  --orange:#DE7E33;        /* safety-orange yard PPE                */
  --cream:#E9ECEF;         /* dockside white text                   */
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

/* The body rule carries a literal font-size of 16px. */
body{
  margin:0;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--cream);
  background-color:var(--gunmetal);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- Typographic baseline ---------- */
h1,h2,h3,h4{line-height:1.15;margin:0 0 0.6em;color:var(--cream);}
p{margin:0 0 1em;}
a{color:var(--orange);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;border:0;}
ul,ol{padding-left:1.2em;}
.lead{color:var(--slate);font-size:1.05rem;}
.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* ---------- Unify reveal ---------- */
/* Elements are only hidden when JS confirms support (html.js hook),
   and revealed via .visible using integer opacity values 0 and 1. */
html.js .fade-up{
  opacity:0;
  -webkit-transform:translateY(26px);
  transform:translateY(26px);
  -webkit-transition:opacity .6s ease,-webkit-transform .6s ease;
  transition:opacity .6s ease,transform .6s ease;
}
html.js .fade-up.visible{
  opacity:1;
  -webkit-transform:none;
  transform:none;
}
html.no-js .fade-up,
html:not(.js) .fade-up,
.fade-up.visible{
  opacity:1;
  -webkit-transform:none;
  transform:none;
}

/* ============================================================
   NAVIGATION : RIVET PLATE NAV (.rivetnav)
   A row of steel plates of slightly varied widths; each plate
   carries rivet dots in its corners. Brand stamped on the widest
   plate at the left; five links sit on plates going right.
   ============================================================ */
.plate-header{
  background-color:var(--deep);
  border-bottom:6px solid var(--orange);
  border-top:6px solid var(--panel);
}
.rivetnav{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:space-between;
  gap:10px;
  max-width:1280px;
  margin:0 auto;
  padding:18px 22px;
}
/* Brand stamp plate - the widest plate at left. */
.brandplate{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  background-color:var(--orange);
  color:var(--gunmetal);
  font-weight:800;
  letter-spacing:1px;
  font-size:1.25rem;
  padding:16px 26px;
  border:2px solid var(--cream);
  position:relative;
}
.brandplate a{color:var(--gunmetal);text-decoration:none;}
.brandplate .stamp2{display:block;font-size:.62rem;letter-spacing:3px;font-weight:600;color:var(--panel);line-height:1;}

/* Small kicker plate under brand handled inline via stamp */

/* Nav link plates */
.navplates{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.navlinkplate{
  display:inline-flex;
  align-items:center;
  justify-self:end;
  background-color:var(--panel);
  color:var(--cream);
  font-weight:700;
  font-size:.98rem;
  padding:16px 22px;
  border:1px solid var(--hair);
  border-top-color:var(--slate);
  border-left:3px solid var(--orange);
  position:relative;
}
/* rivet dots at the corners of a plate */
.navlinkplate::before{
  content:"";
  position:absolute;
  top:5px;right:6px;
  width:6px;height:6px;border-radius:50%;
  background-color:var(--orange);
  box-shadow:-11px 0 0 0 #DE7E33;
}
.navlinkplate::after{
  content:"";
  position:absolute;
  bottom:5px;right:6px;
  width:6px;height:6px;border-radius:50%;
  background-color:var(--orange);
  box-shadow:-11px 0 0 0 #DE7E33;
}
.navlinkplate a{color:var(--cream);text-decoration:none;display:block;}
.navlinkplate a:hover,
.navlinkplate a:focus{color:var(--orange);}

.navlinkplate.is-current{
  background-color:var(--orange);
  border-color:var(--orange);
}
.navlinkplate.is-current a{color:var(--gunmetal);font-weight:800;}

/* Mobile control */
.nav-toggle{
  display:none;
  background-color:var(--orange);
  color:var(--gunmetal);
  border:0;
  font-weight:800;
  font-size:1rem;
  padding:14px 18px;
  cursor:pointer;
}
/* Mobile: plates wrap into two offset rows */
@media (max-width:900px){
  .rivetnav{flex-direction:column;align-items:stretch;}
  .nav-toggle{display:inline-block;align-self:flex-end;}
  .navplates{
    display:none;
    width:100%;
    justify-content:space-between;
  }
  .rivetnav.is-open .navplates{display:flex;}
}
@media (max-width:560px){
  .navplates{margin-left:14px;margin-right:-6px;justify-content:flex-start;}
}

/* ============================================================
   HERO : HULL YARD (.hullyard)
   A shipyard elevation split left copy / right hull side.
   ============================================================ */
.hullyard{
  display:grid;
  grid-template-columns:55% 45%;
  gap:0 0;
  position:relative;
  background-color:var(--gunmetal);
  border-bottom:8px solid var(--deep);
}
/* subtle yard rail at top of hero */
.hullyard::before{
  content:"";
  display:block;
  grid-column:1 / -1;
  height:8px;
  background:
    repeating-linear-gradient(90deg,var(--hair) 0 34px,#2A323C 34px 36px),
    var(--deep);
}
.hullyard-copy{
  padding:64px 48px 64px 28px;
  align-self:center;
  max-width:660px;
}
.hero-eyebrow{
  color:var(--orange);
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:.9rem;
  margin-bottom:18px;
  display:inline-block;
  border-bottom:2px solid var(--orange);
  padding-bottom:6px;
}
.hullyard h1{
  font-size:clamp(2.4rem,5vw,4.4rem);
  font-weight:900;
  letter-spacing:-1px;
  text-transform:uppercase;
}
.hullyard .steady-line{color:var(--slate);display:block;font-weight:500;}
.hullyard h1 .word-steady{color:var(--orange);}
.herolede{
  font-size:1.12rem;
  color:var(--cream);
  margin:18px 0 28px;
  max-width:52ch;
}
.herolede em{font-style:normal;color:var(--slate);}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;}
.cta-plate{
  display:inline-block;
  padding:16px 26px;
  font-weight:800;
  border:2px solid var(--cream);
  color:var(--gunmetal);
  background-color:var(--orange);
}
.cta-plate--ghost{
  background-color:var(--panel);
  border:2px solid var(--slate);
  color:var(--cream);
}
.cta-plate:hover{text-decoration:none;background-color:var(--cream);color:var(--gunmetal);}

/* Right 45%: broad HULL side made of overlapping plates */
.hullside{
  position:relative;
  padding:26px;
  min-height:560px;
  display:flex;
  align-items:flex-end;
  background-color:var(--deep);
  overflow:hidden;
}
/* a scaffold / gantry scaffolding around skin */
.hullside-rig{position:absolute;inset:0;}
/* Mooring bollard low at base of hull */
.bollard{
  position:absolute;
  right:26px;
  bottom:24px;
  width:20px;
  height:74px;
  background-color:var(--orange);
  border:3px solid var(--panel);
  box-shadow:0 6px 0 #1C222A;
}
.bollard::before{content:"";position:absolute;left:-4px;top:6px;width:24px;height:12px;background-color:var(--panel);border:2px solid var(--hair);transform:rotate(-18deg);}
.bollard::after{content:"";position:absolute;right:-6px;bottom:-10px;width:30px;height:10px;background-color:var(--hair);border-radius:4px;}

/* weld seam : dashed bead line crossing the hull */
.weldseam{
  position:absolute;
  left:0;right:0;
  height:8px;
  border-top:3px dashed var(--slate);
  opacity:1;
}
/* Broad hull side composed of overlapping steel plates */
.hullplate{
  position:absolute;
  background-color:var(--panel);
  border:1px solid var(--hair);
  border-top:5px solid var(--slate);
  border-right:3px solid #6E8C99;
  border-left:3px solid #0C0F13;
  box-shadow:0 10px 0 #0C0F13;
  background-image:radial-gradient(circle at 8px 8px,#DE7E33 0 2px,#1C222A 2px 3px);
  background-size:18px 18px;
  background-position:0 0;
  background-repeat:repeat;
}
/* stacked solid plates carry a narrow rivet line and shaded edges */

.hull-plateA{top:64px;right:-70px;width:60%;height:18%;transform:rotate(-6deg);}
.hull-plateB{top:34px;left:-34px;width:78%;height:17%;transform:rotate(7deg);border-left:4px solid var(--slate);}
.hull-plateC{top:120px;right:-96px;width:46%;height:15%;transform:rotate(5deg);}
.hull-plateD{top:170px;left:-40px;width:70%;height:16%;transform:rotate(-9deg);border-top-color:var(--orange);}
.hull-plateE{top:230px;right:-110px;width:58%;height:14%;transform:rotate(3deg);}

/* A large porthole set into one hull plate */
.porthole{
  position:absolute;
  top:168px;left:12%;
  width:clamp(84px,12vw,150px);
  height:clamp(84px,12vw,150px);
  border-radius:50%;
  background-color:var(--cream);
  border:14px solid var(--panel);
  box-shadow:0 0 0 8px #6E8C99,inset 0 0 0 6px #0C0F13;
  display:grid;
  place-items:center;
}
.porthole::before{content:"";width:34%;height:34%;background-color:var(--slate);border-radius:50%;border:6px solid var(--hair);}
.porthole::after{content:"";position:absolute;width:120%;height:9px;background-color:var(--orange);transform:rotate(-26deg);top:48%;}

/* Draft-mark ladder : letters A-E as load line marks */
.draftmarks{
  position:absolute;
  left:6px;
  top:96px;
  display:flex;
  flex-direction:column;
  gap:2px;
  z-index:5;
}
.draftmark{
  display:flex;
  align-items:center;
  gap:2px;
  width:104px;
}
.draftmark span{
  display:block;
  font-family:Verdana,sans-serif;
  font-size:2.4rem;
  font-weight:700;
  color:var(--slate);
  line-height:1;
  text-shadow:0 1px 0 #E9ECEF;
  transform:rotate(90deg);
  transform-origin:left center;
  white-space:nowrap;
}
.draftmark i{display:block;border:3px solid var(--slate);border-bottom:none;height:26px;width:52px;touch-action:none;}

/* floating crane hook hanging into one edge of a section */
.crane-excursion{position:relative;}
.cranehook{
  position:absolute;
  top:-40px;
  right:6%;
  width:120px;height:120px;
}
.cranehook .cbl{position:absolute;top:0;left:50%;width:5px;height:64px;background-color:var(--slate);}
.cranehook .hook{position:absolute;top:64px;left:48%;width:14px;height:14px;background-color:var(--orange);border-radius:12px 12px 12px 12px;box-shadow:-7px 8px 0 #DE7E33;transform:rotate(20deg);}

/* ============================================================
   WELD SEAM SECTIONS (.weldsections)
   Six plate sections stacked with a visible dashed weld seam
   between them. The sections alternate in width and internal
   alignment so no two align into columns.
   ============================================================ */
.weldsections{
  background-color:var(--gunmetal);
  padding:0 18px;
}
.weldseam-horiz{
  height:34px;
  background:transparent;
  background-image:repeating-linear-gradient(90deg,#0C0F13 0 4px,#6E8C99 4px 10px);
  border-left:16px solid var(--gunmetal);
  border-right:16px solid var(--gunmetal);
}
.platesection{
  background-color:var(--panel);
  border:1px solid var(--hair);
  border-top:5px solid var(--slate);
  position:relative;
  margin:0 auto 24px;
  padding:0;
  max-width:1180px;
}
.platesection--wider{max-width:1280px;margin-right:0;}
.platesection--narrow{max-width:960px;margin-left:auto;}
/* gusset tab near top of each plate */
.plate-code{
  display:inline-block;
  background-color:var(--orange);
  color:var(--gunmetal);
  font-weight:800;
  letter-spacing:2px;
  font-family:"Courier New",monospace;
  padding:5px 14px;
  font-size:.86rem;
  border:1px solid var(--cream);
  position:absolute;
  top:-1px;
}
.platesection--right .plate-code{right:20px;left:auto;}
.platesection--left .plate-code{left:20px;}
.platesection-inner{
  display:block;
  padding:60px 42px 46px;
}
.platesection--right{text-align:right;}
.platesection--right .platesection-inner{max-width:620px;margin-left:auto;}
.platesection--left .platesection-inner{max-width:620px;margin-right:auto;}
/* many sections reveal a railing mounted to the plate */
.sectionrail{
  display:block;height:6px;margin:0 0 26px;
}
.sectionrail::after{content:"";display:block;height:6px;background:repeating-linear-gradient(90deg,#6E8C99 0 20px,#1C222A 20px 24px);}


.platesection h3{
  font-size:clamp(1.7rem,3vw,2.5rem);
  font-weight:800;
  letter-spacing:-.5px;
}
.platesection h3 .platehed,.platesection h3 .kicker{display:block;font-size:.52em;font-weight:600;color:var(--orange);letter-spacing:3px;}

.platesection p{
  font-size:1.06rem;
  color:#cdd3d9;
}
.platesection .service-note{
  color:var(--slate);
  font-weight:600;
  margin-top:6px;
}
.platesection .service-note a{color:var(--orange);}

/* small rivet tick on the far side plate */
.platesection::after{
  content:"";
  position:absolute;
  right:14px;bottom:14px;
  width:7px;height:20px;
  background-color:var(--hair);
  border:1px solid var(--slate);
}

/* ============================================================
   HOT WORK STRIP (.hotwork-accent)
   Safety-orange band with gunmetal text announcing open work.
   ============================================================ */
.hotwork-accent{
  background-color:var(--orange);
  color:var(--gunmetal);
  padding:22px 0;
  text-align:center;
}
.hotwork-accent .bandline{
  max-width:1120px;
  margin:0 auto;
  padding:0 22px;
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:.5px;
}
.hotwork-accent .bandline a{color:var(--gunmetal);text-decoration:underline;}
.hotwork-accent .bandline small{display:block;font-weight:600;font-size:.85rem;letter-spacing:2px;text-transform:uppercase;}

/* generic readable narrative band after hero on services/contact */
.elevation-mark{
  background-color:var(--deep);
  border-top:6px solid var(--orange);
  border-bottom:6px solid var(--hair);
  padding:26px 0;
}
.elevation-mark p{max-width:1100px;margin:0 auto;padding:0 22px;color:var(--slate);}

/* ============================================================
   KEEL BLOCK FOOTER (.keelblock)
   Footer as a keel. Slanted keel line across the top, three
   ballast-block link groups, brand blurb, dock floor line.
   ============================================================ */
.keelblock{
  background-color:var(--deep);
  margin-top:40px;
  position:relative;
  padding-top:64px;
}
/* slanted keel line across the top of the footer */
.keelblock::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:26px;
  background:
    linear-gradient(165deg,#DE7E33 0 42%,#0C0F13 42% 58%,#6E8C99 58% 100%);
}
.keelblock-foot{
  max-width:1240px;
  margin:0 auto;
  padding:0 24px 0;
}
.keelbrand{
  text-align:left;
  padding-bottom:26px;
}
.keelbrand strong{font-size:1.7rem;color:var(--cream);letter-spacing:1px;display:block;}
.keelbrand p{max-width:720px;color:var(--slate);margin:8px 0 0;}
.ballast-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  padding:24px 0 20px;
  border-top:1px solid var(--hair);
}
.ballast-block{
  background-color:var(--panel);
  border:1px solid var(--hair);
  border-left:6px solid var(--orange);
  padding:18px 18px;
}
.ballast-block h4{
  margin:0 0 12px;
  font-size:1.02rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--orange);
}
.ballast-block a{display:block;color:var(--cream);padding:5px 0;border-bottom:1px solid var(--hair);}
.ballast-block a:hover{color:var(--orange);}

/* dock floor line along very bottom */
.dockfloor{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  background:repeating-linear-gradient(90deg,#1C222A 0 14px,#6E8C99 14px 16px);
  border-top:8px solid var(--orange);
  padding:26px 24px;
  font-size:.95rem;
}
.dockfloor .dockmeta{color:var(--gunmetal);font-weight:700;}
.dockfloor .dockrow{
  background-color:var(--panel);
  color:var(--cream);
  border:1px solid var(--hair);
  padding:10px 14px;
}
.dockfloor a{color:var(--orange);}
.copyrightline{
  background-color:var(--gunmetal);
  color:var(--slate);
  text-align:center;
  font-size:.86rem;
  padding:14px 18px;
  border-top:1px solid var(--hair);
}

/* ============================================================
   Contact form
   ============================================================ */
.contacthold{
  max-width:1180px;
  margin:0 auto;
  padding:60px 24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
.form-panel{
  background-color:var(--panel);
  border:1px solid var(--hair);
  border-top:6px solid var(--orange);
  padding:30px 30px;
}
.form-field{margin-bottom:18px;}
.form-field label{display:block;font-weight:700;color:var(--cream);margin-bottom:7px;letter-spacing:.3px;}
.form-field input,
.form-field textarea,
.form-field select{
  width:100%;
  background-color:var(--deep);
  border:1px solid var(--hair);
  color:var(--cream);
  padding:12px 14px;
  font-family:inherit;
  font-size:1rem;
}
.form-field input:focus,
.form-field textarea:focus{border-color:var(--orange);outline:none;}
.form-send{
  background-color:var(--orange);
  color:var(--gunmetal);
  border:0;
  font-weight:800;
  padding:15px 26px;
  font-size:1rem;
  cursor:pointer;
}
.contactside{background-color:var(--panel);border:1px solid var(--hair);padding:30px;border-top:6px solid var(--slate);}
.contactside dl{margin:0;}
.contactside dt{color:var(--orange);font-weight:700;}
.contactside dd{color:var(--cream);margin:0 0 18px;}
.form-status{
  background-color:var(--deep);
  border:1px solid var(--slate);
  color:var(--cream);
  padding:12px 16px;
  display:none;
  font-weight:600;
}
.form-status.has-state{display:block;}

/* questions used on contact and generous whitespace */
.flip-item{
  background-color:var(--panel);
  border:1px solid var(--hair);
  border-left:6px solid var(--slate);
  margin:0 0 16px;
  padding:16px 20px;
}
.flip-q{color:var(--cream);font-weight:800;font-size:1.06rem;cursor:pointer;}
.flip-a{
  max-height:0;
  overflow:hidden;
  color:#cdd3d9;
  transition:max-height .35s ease;
}
.flip-item.is-open .flip-a{max-height:600px;margin-top:10px;}
.flip-item.is-open{border-left-color:var(--orange);}

/* page titles shared across interior pages */
.interior-head{
  background-color:var(--deep);
  border-bottom:6px solid var(--orange);
  padding:44px 24px 30px;
}
.interior-head .headwrap{max-width:1180px;margin:0 auto;}
.interior-head h1{font-size:clamp(2rem,4vw,3.2rem);text-transform:uppercase;}
.interior-head p{color:var(--slate);max-width:820px;margin:0;}

/* Services layout helpers */
.servicebody{max-width:1180px;margin:0 auto;padding:0 24px 50px;}
.largeband p{font-size:1.05rem;color:#cfd5db;}
.process-steps{
  list-style:none;
  counter-reset:stepstep;
  padding:0;margin:0;
}
.process-steps li{
  counter-increment:stepstep;
  background-color:var(--panel);
  border:1px solid var(--hair);
  border-left:6px solid var(--orange);
  margin:0 0 14px;
  padding:16px 20px 16px 74px;
  position:relative;
  color:#cdd3d9;
}
.process-steps li::before{
  content:counter(stepstep,decimal-leading-zero);
  position:absolute;left:20px;top:14px;
  font-size:1.7rem;font-weight:800;
  color:var(--orange);
  font-family:"Courier New",monospace;
}

/* misc utility */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.text-slate{color:var(--slate);}
.quietcaps{letter-spacing:3px;text-transform:uppercase;font-weight:700;color:var(--slate);font-size:.82rem;margin-bottom:8px;display:inline-block;border-bottom:2px solid var(--slate);padding-bottom:4px;}

/* Reveal for column image blocks */
.motifline{height:6px;background:repeating-linear-gradient(90deg,#DE7E33 0 22px,#1C222A 22px 30px);margin:26px 0;}

/* narrow entry divider band (draft-load marks) reused */
.draftcap{
  display:flex;flex-direction:column;gap:0;align-items:center;
}
.draftcap i{width:120px;height:30px;background:transparent;border-left:6px solid var(--slate);border-right:6px solid var(--slate);display:block;margin:6px 0;}
.draftcap b{color:var(--orange);font-family:"Courier New",monospace;letter-spacing:4px;font-weight:700;}

@media (max-width:820px){
  .hullyard{grid-template-columns:1fr;}
  .hullyard-copy{padding:36px 22px;}
  .hullside{min-height:460px;margin-top:12px;}
  .ballast-row{grid-template-columns:1fr;}
  .bootline{grid-template-columns:1fr;}
  .contacthold{grid-template-columns:1fr;}
  .interior-head .headwrap{padding:0 6px;}
}
/* extra mobile alignment cleanup so nothing overflows */
@media (max-width:560px){
  .platesection-inner{padding:44px 22px 30px;}
  .plate-code{position:static;margin:0 0 14px;}
}

/* Keep the page grounded: no wasted bottom padding */