/* =====================================================
   PSGL GROUP — SHARED STYLESHEET
   Used by all pages in the PSGL Ltd domain
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300&family=Barlow+Condensed:wght@400;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

:root {
  --navy:        #1b3a52;
  --navy-dark:   #112840;
  --navy-deeper: #0b1e30;
  --navy-mid:    #234e6e;
  --navy-light:  #2e6490;
  --navy-pale:   #d6e4ef;
  --navy-bg:     #eef4f8;
  --steel:       #4a7fa5;
  --steel-light: #7aafc9;
  --offwhite:    #f5f7f9;
  --white:       #ffffff;
  --ink:         #0b1e2d;
  --ink-mid:     #2d4a5e;
  --muted:       #5c7a8e;
  --muted-light: #8ca8bb;
  --border:      rgba(27,58,82,0.14);
  --border-mid:  rgba(27,58,82,0.25);
  --amber:       #e8a020;
  --amber-light: #f5be50;
  --amber-dark:  #b87c10;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Barlow', sans-serif;
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 52px; height: 72px;
  background: rgba(11,30,48,0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(27,58,82,0.5);
  transition: background 0.3s;
}
.nav-logo-wrap { display: flex; align-items: center; gap: 0; text-decoration: none; }
.nav-logo-wrap img {
  height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
}
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a {
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover { color: var(--amber-light); }
.nav-cta {
  color: var(--ink) !important; background: var(--amber);
  padding: 11px 26px; clip-path: polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--amber-light) !important; }

/* SHARED BUTTONS */
.btn-amber {
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px;
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); background: var(--amber); padding: 16px 40px;
  text-decoration: none; display: inline-block;
  clip-path: polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
  transition: background 0.2s, transform 0.15s; border: none; cursor: pointer;
}
.btn-amber:hover { background: var(--amber-light); transform: translateY(-2px); }
.btn-outline {
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px;
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); border: 1.5px solid rgba(255,255,255,0.2);
  padding: 16px 40px; text-decoration: none; display: inline-block;
  transition: border-color 0.2s, color 0.2s; background: none; cursor: pointer;
}
.btn-outline:hover { border-color: var(--amber); color: var(--amber-light); }
.btn-navy {
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px;
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--white); background: var(--navy); padding: 14px 36px;
  text-decoration: none; display: inline-block;
  transition: background 0.2s; border: none; cursor: pointer;
}
.btn-navy:hover { background: var(--navy-mid); }

/* CONTAINER */
.container { max-width: 1180px; margin: 0 auto; padding: 0 52px; }

/* SECTION LABEL */
.sec-label {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy-light);
  margin-bottom: 16px; display: flex; align-items: center; gap: 14px;
}
.sec-label::before { content:''; display:block; width:28px; height:2px; background:var(--amber); }
.sec-label-inv { color: var(--amber); }
.sec-label-inv::before { background: var(--amber); }

/* PAGE HERO (inner pages) */
.page-hero {
  padding: 140px 0 80px;
  background: var(--navy-deeper);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(46,100,144,0.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,100,144,0.12) 1px,transparent 1px);
  background-size: 48px 48px; pointer-events: none;
}
.page-hero::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, var(--amber), transparent);
}
.page-hero .container { position: relative; }
.page-hero-chip {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber);
  margin-bottom: 20px; display: flex; align-items: center; gap: 14px;
}
.page-hero-chip::before { content:''; display:block; width:28px; height:2px; background:var(--amber); }
.page-hero h1 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(40px,6vw,72px); text-transform: uppercase;
  line-height: 1.0; color: var(--white); margin-bottom: 20px;
}
.page-hero h1 em { font-style: normal; color: var(--amber); }
.page-hero p {
  font-size: 16px; color: rgba(255,255,255,0.5);
  font-weight: 300; max-width: 540px; line-height: 1.75;
}

/* FOOTER */
footer { background: #060e16; padding: 68px 0 40px; border-top: 2px solid var(--navy); }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 52px; margin-bottom: 52px; }
.footer-brand-logo img { height: 44px; width: auto; object-fit: contain; display: block; margin-bottom: 16px; filter: brightness(0) invert(1) opacity(0.8); }
.footer-brand p { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.3); line-height: 1.75; margin-bottom: 18px; max-width: 280px; }
.footer-tagline { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); }
.footer-col h4 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 20px; border-bottom: 1px solid rgba(27,58,82,0.4); padding-bottom: 10px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 13px; color: rgba(255,255,255,0.38); text-decoration: none; transition: color 0.2s; font-weight: 300; }
.footer-col a:hover { color: var(--amber-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 28px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 14px;
  text-align: center;
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.footer-bottom-links a {
  font-size: 10.5px;
  color: rgba(255,255,255,0.2);
  text-decoration: none;
  letter-spacing: 0.08em;
  font-family: 'DM Mono', monospace;
  transition: color 0.2s;
}

.footer-bottom-links a:hover {
  color: var(--amber);
}

.footer-copy {
  margin: 0;

  text-align: center;

  font-size: 10.5px;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.08em;
  font-family: 'DM Mono', monospace;
}
.footer-bottom-links a { font-size: 10.5px; color: rgba(255,255,255,0.2); text-decoration: none; letter-spacing: 0.08em; font-family: 'DM Mono', monospace; transition: color 0.2s; }
.footer-bottom-links a:hover { color: var(--amber); }

/* ADDRESS MODAL */
.addr-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.6); z-index: 9999;
  align-items: center; justify-content: center;
}
.addr-modal-overlay.open { display: flex; }
.addr-modal {
  background: var(--white); max-width: 420px; width: 90%;
  padding: 40px; position: relative;
  border-top: 4px solid var(--amber);
}
.addr-modal h3 { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:24px; text-transform:uppercase; color:var(--navy-dark); margin-bottom:16px; }
.addr-modal p { font-size:14px; color:var(--ink-mid); line-height:1.7; margin-bottom:8px; }
.addr-modal-close { position:absolute; top:16px; right:20px; font-size:22px; cursor:pointer; color:var(--muted); background:none; border:none; }
.addr-modal-close:hover { color:var(--navy); }

/* WHATSAPP FLOAT */
.wa-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 500;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25); text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.wa-float:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,0.35); }
.wa-float svg { width: 30px; height: 30px; fill: white; }

/* MARQUEE */
.marquee-wrap { background: var(--navy); overflow: hidden; border-top: 2px solid var(--amber); border-bottom: 1px solid rgba(27,58,82,0.4); }
.marquee-inner { display: flex; white-space: nowrap; animation: mq 28s linear infinite; }
.m-item { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.7); padding:14px 40px; display:inline-flex; align-items:center; gap:20px; }
.m-dot { width:5px; height:5px; background:var(--amber); transform:rotate(45deg); flex-shrink:0; }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* FORM STYLES */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-mid); margin-bottom:8px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--border-mid);
  font-family: 'Barlow', sans-serif; font-size: 14px; color: var(--ink);
  background: var(--white); transition: border-color 0.2s; outline: none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--navy); }
.form-group textarea { min-height: 140px; resize: vertical; }

/* CARD GRID */
.card-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border-mid); border: 1px solid var(--border-mid); }
.card-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--border-mid); border: 1px solid var(--border-mid); }
.info-card { background: var(--white); padding: 32px 28px; }
.info-card h3 { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:20px; text-transform:uppercase; color:var(--navy-dark); margin-bottom:10px; }
.info-card p { font-size:13px; line-height:1.7; color:var(--muted); font-weight:300; }

/* TIMELINE (shared) */
.tl-wrap { position: relative; }
.tl-rail { position:absolute; left:100px; top:8px; bottom:0; width:2px; background:linear-gradient(to bottom,var(--amber) 0%,var(--navy-pale) 100%); }
.tl-item { display:grid; grid-template-columns:140px 1fr; gap:36px; margin-bottom:36px; align-items:start; opacity:0; transform:translateX(-16px); transition:opacity 0.5s ease,transform 0.5s ease; }
.tl-item.vis { opacity:1; transform:translateX(0); }
.tl-year { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:26px; color:var(--amber); text-align:right; padding-right:24px; padding-top:4px; position:relative; letter-spacing:0.02em; line-height:1; }
.tl-year::after { content:''; position:absolute; right:-6px; top:10px; width:10px; height:10px; background:var(--amber); border-radius:50%; border:2px solid var(--white); box-shadow:0 0 0 2px var(--amber); }
.tl-box { background:var(--offwhite); border:1px solid var(--border); border-left:4px solid var(--navy); padding:22px 26px; }
.tl-box.current { border-left-color:var(--amber); background:var(--white); border-color:var(--border-mid); }
.tl-phase { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--navy-light); margin-bottom:6px; }
.tl-box.current .tl-phase { color:var(--amber-dark); }
.tl-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:18px; color:var(--navy-dark); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px; }
.tl-desc { font-size:13px; line-height:1.7; color:var(--muted); font-weight:300; }

/* NAV SCROLL EFFECT (js adds class) */
nav.scrolled { background: rgba(6,14,22,0.99) !important; }

/* SECTION SPACING */
.sec { padding: 96px 0; }
.sec-alt { padding: 96px 0; background: var(--offwhite); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec-dark { padding: 96px 0; background: var(--navy-deeper); position: relative; overflow: hidden; }
.sec-dark::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(46,100,144,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(46,100,144,0.06) 1px,transparent 1px); background-size:52px 52px; pointer-events:none; }
.sec-dark h2 { color: var(--white); }

/* HEADINGS */
h2.sec-heading { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(32px,4vw,50px); text-transform:uppercase; line-height:1.0; color:var(--navy-dark); margin-bottom:48px; }

/* BREADCRUMB */
.breadcrumb { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.14em; color:rgba(255,255,255,0.4); margin-bottom:14px; }
.breadcrumb a { color:var(--amber); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }


/* =========================
   RESPONSIVE GRID SYSTEM
========================= */

.executive-layout{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:60px;
  align-items:start;
}

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

.board-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
}

@media(max-width:992px){

  .executive-layout{
    grid-template-columns:1fr;
    gap:40px;
  }

  .mission-grid{
    grid-template-columns:1fr;
  }

  .board-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:768px){

  .page-hero h1{
    font-size:48px;
    line-height:1;
  }

  .sec{
    padding:70px 0;
  }

}

/* =========================
   CEO IMAGE
========================= */

.ceo-image-wrap{
  width:100%;
  max-width:260px;
  margin:0 auto 20px;
  overflow:hidden;
  border:4px solid rgba(255,255,255,0.06);
  background:var(--navy-mid);
}

.ceo-image{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  filter:contrast(1.05);
}

/* =========================
   TIMELINE
========================= */

.timeline{
  position:relative;
  margin-top:40px;
}

.timeline::before{
  content:"";
  position:absolute;
  left:140px;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(255,255,255,0.08);
}

.timeline-item{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:40px;
  margin-bottom:50px;
  position:relative;
}

.timeline-year{
  font-family:'Barlow Condensed',sans-serif;
  font-size:40px;
  font-weight:900;
  color:var(--amber);
}

.timeline-content{
  background:var(--navy-deeper);
  padding:32px;
  border-left:4px solid var(--amber);
}

.timeline-content h3{
  font-size:24px;
  margin-bottom:12px;
  color:var(--white);
}

.timeline-content p{
  color:rgba(255,255,255,0.65);
  line-height:1.8;
}

@media(max-width:768px){

  .timeline::before{
    display:none;
  }

  .timeline-item{
    grid-template-columns:1fr;
    gap:10px;
  }

}

/* =========================
   SCROLL ANIMATIONS
========================= */

.fade-card{
  opacity:0;
  transform:translateY(30px);
  transition:all 0.8s ease;
}

.show-card{
  opacity:1;
  transform:translateY(0);
}

/* TIMELINE DOTS */

.tl-item{
  position:relative;
}

.tl-item::before{
  content:"";
  position:absolute;
  left:-42px;
  top:28px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 18px rgba(232,160,32,0.6);
  z-index:3;
}

/* ═══════════════════════════════════ */
/* WHY NIGERIA / LOCAL MANUFACTURING */
/* ═══════════════════════════════════ */

.why-nigeria-sec{
  position:relative;
  padding:120px 0;
  background:
    linear-gradient(
      180deg,
      #07111d 0%,
      #0b1726 100%
    );
  overflow:hidden;
}

/* INTRO */

.why-intro{
  max-width:920px;
  margin-bottom:80px;
}

.why-intro h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:72px;
  line-height:0.95;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:28px;
  font-weight:900;
}

.why-intro h2 em{
  display:block;
  color:var(--amber);
  font-style:normal;
}

.why-intro p{
  color:rgba(255,255,255,0.72);
  font-size:16px;
  line-height:1.9;
  margin-bottom:22px;
  max-width:820px;
}

/* GRID */

.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-bottom:100px;
}

/* CARD */

.why-card{
  position:relative;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  padding:42px;
  transition:all 0.4s ease;
  backdrop-filter:blur(8px);
}

.why-card:hover{
  transform:translateY(-8px);
  border-color:rgba(232,160,32,0.4);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.28);
}

.why-icon{
  font-family:'DM Mono',monospace;
  font-size:14px;
  letter-spacing:0.16em;
  color:var(--amber);
  margin-bottom:18px;
}

.why-card h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:28px;
  color:var(--white);
  margin-bottom:18px;
  text-transform:uppercase;
}

.why-card p{
  color:rgba(255,255,255,0.65);
  line-height:1.85;
  font-size:14px;
}

/* FEATURE SECTION */

.why-feature{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:70px;
  align-items:stretch;
}

.feature-label{
  font-family:'DM Mono',monospace;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--amber);
  font-size:10px;
  margin-bottom:18px;
}

.why-feature-content h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:56px;
  line-height:0.95;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:28px;
}

.why-feature-content p{
  color:rgba(255,255,255,0.72);
  line-height:1.9;
  margin-bottom:22px;
  font-size:15px;
}

.why-feature-image{
  overflow:hidden;
  position:relative;
  height:100%;
  min-height:100%;
  display:flex;
}

.why-feature-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.6s ease;
}

.why-feature-image{
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.35);
}

.why-feature-image:hover img{
  transform:scale(1.04);
}

/* RESPONSIVE */

@media(max-width:1100px){

  .why-grid{
    grid-template-columns:1fr 1fr;
  }

  .why-feature{
    grid-template-columns:1fr;
  }

}

@media(max-width:768px){

  .why-intro h2{
    font-size:48px;
  }

  .why-grid{
    grid-template-columns:1fr;
  }

  .why-feature-content h3{
    font-size:40px;
  }

}

.why-nigeria-sec::before{
  content:"";
  position:absolute;
  width:700px;
  height:700px;
  background:radial-gradient(
    rgba(232,160,32,0.08),
    transparent 70%
  );
  top:-180px;
  right:-180px;
  z-index:0;
}

.why-nigeria-sec .container{
  position:relative;
  z-index:2;
}

/* BOARD SECTION SPACING */

.board-section-spacing{
  margin-top:90px;
}