
/* =========================================================
   SEABORNE — PROJECT MANAGEMENT PAGE
   Page-specific CSS only.
   Global font is controlled by assets/css/style.css.
   ========================================================= */
.project-page{font-family:var(--global-font)!important;}

.project-page{
  background:#fff;
  color:var(--black-deep,#10263b);
}

/* ---------------- HERO ---------------- */
.project-page .pm-hero{
  position:relative;
  width:100%;
  min-height:0;
  aspect-ratio:3/2;
  overflow:hidden;
  color:#fff;
  background:#071a2b;
}

.project-page .pm-hero-media{
  position:absolute;
  inset:0;
  background:#071a2b url("../img/project-management-header.png") center center/100% 100% no-repeat;
}

.project-page .pm-hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(3,18,31,.94) 0%,
      rgba(4,25,42,.82) 38%,
      rgba(4,25,42,.42) 68%,
      rgba(4,25,42,.12) 100%
    );
}

.project-page .pm-hero-content-wrap{
  position:relative;
  z-index:2;
  min-height:0;
  height:100%;
  display:flex;
  align-items:center;
}

.project-page .pm-hero-copy{
  max-width:780px;
  padding:76px 0;
}

.project-page .pm-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  color:#8edcff;
  text-transform:uppercase;
  letter-spacing:.075em;
  font-size:13px;
  font-weight:800;
}

.project-page .pm-eyebrow:before{
  content:"";
  width:36px;
  height:2px;
  background:#20a8e8;
}

.project-page .pm-hero h1{font-family:var(--global-font)!important;font-size:clamp(48px,6vw,78px);line-height:.98;letter-spacing:-.045em;margin:18px 0 22px;max-width:820px;}
.project-page .pm-hero .hero-copy{font-size:18px;line-height:1.55;color:#d9e8f1;max-width:760px;margin:0;}

/*
.project-page .pm-hero h1{
  font-size:clamp(48px,6vw,78px);
  line-height:.98;
  letter-spacing:-.045em;
  margin:18px 0 22px;
  max-width:820px;
  color:#fff!important;
}
*/
.project-page .pm-hero-copy-text{
  font-size:18px;
  line-height:1.55;
  color:#d9e8f1;
  max-width:750px;
  margin:0;
}

.project-page .pm-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px;
}

/* ---------------- COMMON SECTION HEAD ---------------- */
.project-page .pm-section{
  padding:54px 0;
}

.project-page .pm-section-head{
  margin-bottom:28px;
}

.project-page .pm-section-head .kicker{
  color:#20a8e8!important;
  font-family:var(--global-font)!important;
  letter-spacing:-.015em!important;
}


.project-page .pm-section-head .kicker-sub{
  color:#185a98!important;
  letter-spacing:-.012em!important;
  margin-top:6px;
}

.project-page .pm-section-head p{
  max-width:570px;
  margin:0;
  color:var(--muted,#66798a);
  font-size:16px;
  line-height:1.55;
}

.project-page .pm-dark-head .kicker{
  color:#20a8e8!important;
}

.project-page .pm-dark-sub{
  /*color:#185a98!important;*/
  color:#fff!important;
}

.project-page .pm-dark-head p{
  color:#c7d8e5;
}

.project-page .pm-section-head .kicker-sub.pm-dark-sub{
  color:#fff!important;
  letter-spacing:-.012em!important;
  margin-top:6px;
}

/* ---------------- DRYDOCKING ---------------- */
.project-page .pm-two-col{
  align-items:start;
  gap:42px;
}

.project-page .pm-visual{
  margin:0;
}

.project-page .pm-visual img{
  height:500px;
  object-fit:cover;
  object-position:center;
  display:block;
  width:100%;
  border-radius:28px;
  box-shadow:var(--shadow);
}

.project-page .pm-visual .image-caption{
  margin-top:8px;
  font-size:10px;
  color:#7b8e9e;
  line-height:1.4;
}

.project-page .pm-copy p{
  color:var(--black-deep,#10263b);
  font-size:16px;
  line-height:1.62;
  margin:0 0 16px;
}

.project-page .pm-service-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:22px;
}

.project-page .pm-service-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
  border:1px solid var(--line,#dbe7ef);
  border-radius:15px;
  padding:13px;
  background:#fff;
}

.project-page .pm-service-item span{
  width:30px;
  height:30px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e9f6fc;
  color:#1761a3;
  font-size:9px;
  font-weight:900;
}

.project-page .pm-service-item strong{
  font-size:14px;
  line-height:1.35;
  padding-top:5px;
}

/* ---------------- MARKET ---------------- */
.project-page .pm-market-section{
  background:#0c3555;
}

.project-page .pm-market-grid{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:42px;
  align-items:start;
}

.project-page .pm-market-copy>p{
  color:#d1e1eb;
  font-size:17px;
  line-height:1.62;
  margin:0;
}

.project-page .pm-objective{
  margin-top:24px;
  padding:20px 22px;
  border-radius:19px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

.project-page .pm-objective strong{
  display:block;
  color:#8edcff;
  font-size:20px;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:8px;
}

.project-page .pm-objective p{
  margin:0;
  color:#d5e4ed;
  font-size:18px;
  line-height:1.6;
}

.project-page .pm-market-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.project-page .pm-market-card{
  min-height:132px;
  padding:20px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}

.project-page .pm-market-card span{
  color:#8edcff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}

.project-page .pm-market-card h3{
  display: flex;
  color:#fff;
  font-size:18px;
  
  justify-content: center;
  align-items: center;
  
  justify-content: center; /* Horizontally centers */
  align-items: center;     /* Vertically centers */
  text-align:center!important;     /* Centers wrapped text lines */
  
  line-height:1.2;
  margin:9px 0 0;
}

/* ---------------- COMMERCIAL ---------------- */
.project-page .pm-commercial-grid{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:42px;
  align-items:start;
}

.project-page .pm-commercial-copy{
  display:grid;
  gap:15px;
}

.project-page .pm-commercial-card{
  padding:24px;
  border-radius:20px;
  border:1px solid var(--line,#dbe7ef);
  background:#fff;
}

.project-page .pm-commercial-card span{
  display:block;
  color:#175d9f;
  font-size:18px;
  font-weight:850;
  letter-spacing:-.025e;
  text-transform:uppercase;
}

.project-page .pm-commercial-card h3{
  margin:8px 0 10px;
  color:#10263b;
  font-size:17px;
  line-height:1.08;
  letter-spacing:-.025em;
}

.project-page .pm-commercial-card p{
  margin:0;
  color:var(--muted,#66798a);
  font-size:16px;
  line-height:1.6;
}

.project-page .pm-commercial-visual{
  margin:0;
  border-radius:28px;
  overflow:hidden;
  border:1px solid var(--line,#dbe7ef);
  box-shadow:var(--shadow);
  background:#fff;
}

.project-page .pm-commercial-visual img{
  display:block;
  width:100%;
  height:470px;
  object-fit:cover;
}

.project-page .pm-flow{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}

.project-page .pm-flow-step{
  min-height:105px;
  padding:15px;
  border:1px solid var(--line,#dbe7ef);
  border-radius:15px;
  background:#fff;
}

.project-page .pm-flow-step span{
  display:block;
  color:#1761a3;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}

.project-page .pm-flow-step strong{
  display:block;
  margin-top:7px;
  color:#10263b;
  font-size:12px;
  line-height:1.32;
}

/* ---------------- CONNECT / ENQUIRY ---------------- */
.project-page .pm-contact{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:40px;
  align-items:center;
  padding:38px;
  border-radius:28px;
  background:linear-gradient(135deg,#082a44,#0d466f);
  color:#fff;
}

.project-page .pm-contact-kicker{
  color:#8edcff;
  font-size:11px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.project-page .pm-contact h2{
  margin:0 0 13px;
  color:#fff;
  font-size:clamp(36px,4vw,50px);
  line-height:1.04;
  letter-spacing:-.04em;
}

.project-page .pm-contact-copy p{
  margin:0;
  color:#c9dce8;
  font-size:16px;
  line-height:1.6;
}

.project-page .pm-form{
  padding:22px;
  border-radius:21px;
  background:#fff;
  color:#10263b;
}

.project-page .pm-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.project-page .pm-form .field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.project-page .pm-form .field.full{
  grid-column:1/-1;
}

.project-page .pm-form label{
  font-size:10px;
  font-weight:800;
  color:#576c7d;
}

.project-page .pm-form input,
.project-page .pm-form select,
.project-page .pm-form textarea{
  width:100%;
  border:1px solid var(--line,#dbe7ef);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
  background:#fff;
}

.project-page .pm-form textarea{
  min-height:90px;
  resize:vertical;
}

.project-page .pm-note{
  margin-top:8px;
  color:#7d8f9f;
  font-size:10px;
  line-height:1.4;
}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1050px){
  .project-page .pm-market-grid,
  .project-page .pm-commercial-grid,
  .project-page .pm-contact{
    grid-template-columns:1fr;
  }

  .project-page .pm-flow{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:900px){
  .project-page .pm-hero,
  .project-page .pm-hero-content-wrap{
    min-height:610px;
  }

  .project-page .pm-hero-media{
    background-position:62% center;
  }

  .project-page .pm-hero-overlay{
    background:linear-gradient(
      90deg,
      rgba(3,18,31,.94) 0%,
      rgba(4,25,42,.78) 55%,
      rgba(4,25,42,.33) 100%
    );
  }
}

@media(max-width:720px){
  .project-page .pm-hero-copy{
    padding:58px 0;
  }

  .project-page .pm-hero h1{
    font-size:48px;
  }

  .project-page .pm-two-col,
  .project-page .pm-service-list,
  .project-page .pm-market-cards,
  .project-page .pm-form-grid{
    grid-template-columns:1fr;
  }

  .project-page .pm-visual img{
    height:auto;
    min-height:340px;
  }

  .project-page .pm-commercial-visual img{
    height:360px;
  }

  .project-page .pm-flow{
    grid-template-columns:1fr 1fr;
  }

  .project-page .pm-contact{
    padding:24px 18px;
  }
}

@media(max-width:480px){
  .project-page .pm-hero h1{
    font-size:40px;
  }

  .project-page .pm-hero-copy-text{
    font-size:16px;
  }

  .project-page .pm-flow{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   FINAL PROJECT MANAGEMENT PAGE ADJUSTMENTS
   ========================================================= */

/* Keep the Project Management submenu visible on its own page. */
body.project-page .secondary-row{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

/* Drydocking: eight HTML boxes blue; numbering omitted. */
.project-page .pm-service-item{
  background:#174b70!important;
  border-color:rgba(255,255,255,.16)!important;
  color:#fff!important;
}

.project-page .pm-service-item span{
  display:none!important;
}

.project-page .pm-service-item strong{
  color:#fff!important;
  padding-top:0!important;
  font-size:15px!important;
}

/* Remove the descriptive line beneath the drydocking image. */
.project-page #drydocking .pm-visual .image-caption{
  display:none!important;
}

/* Market Research: remove numbers from the right-hand cards. */
.project-page .pm-market-card span{
  display:none!important;
}

.project-page .pm-market-card h3{
  margin-top:0!important;
}

/* Commercial & Project Control: two left-hand content cards light blue. */
.project-page .pm-commercial-card{
  background:#eaf6fc!important;
  border-color:#c9e6f3!important;
}

.project-page .pm-commercial-card span{
  color:#185a98!important;
}

.project-page .pm-commercial-card h3{
  color:#123b61!important;
}

.project-page .pm-commercial-card p{
  color:#294c68!important;
}

/* FINAL: Commercial & Project Control — lower six process boxes */
.project-page .pm-flow-step{
  background:#174b70!important;
  border-color:rgba(255,255,255,.16)!important;
}
.project-page .pm-flow-step span,
.project-page .pm-flow-step strong{
  color:#fff!important;
}
.project-page .pm-flow-step span{
  color:#8edcff!important;
}

/* FINAL: Commercial & Project Control — remove numbers and compact six boxes */
.project-page .pm-flow-step{
  min-height:78px!important;
  height:auto!important;
  padding:11px 12px!important;
  background:#174b70!important;
  border-color:rgba(255,255,255,.16)!important;
  display:flex!important;
  align-items:center!important;
}
.project-page .pm-flow-step span{
  display:none!important;
}
.project-page .pm-flow-step strong{
  color:#fff!important;
  margin:0!important;
  font-size:12px!important;
  line-height:1.25!important;
}

/* Full-image header: no crop on desktop or mobile. */
.project-page .pm-hero-media{
  background-position:center center!important;
  background-size:100% 100%!important;
}
@media(max-width:900px){
  .project-page .pm-hero{
    aspect-ratio:3/2;
  }
  .project-page .pm-hero-content-wrap{
    padding-top:40px;
    padding-bottom:40px;
  }
}
@media(max-width:650px){
  .project-page .pm-hero{
    aspect-ratio:auto;
    min-height:680px;
  }
  .project-page .pm-hero-media{
    background-size:cover!important;
    background-position:center center!important;
  }
}
