@import url('palette.css');
/* ============================================================
   Micro Turners — Home   ·  homepage.css
  
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,Segoe UI,Roboto,sans-serif;color:var(--text-primary);background:var(--bg-surface);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:100%;max-width:none;margin:0 auto;padding:17px 40px}
/* keep the header exactly where it is (it shares .container) */
.site-header .container{max-width:1400px;padding:0 40px}
::selection{background:rgba(var(--color-primary-rgb),.18)}

/* ---------- shared section heads ---------- */
.pe-eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--color-secondary);margin-bottom:14px}
.pe-head{margin-bottom:46px}
.pe-head.center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.pe-head h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;color:var(--text-heading);line-height:1.15;letter-spacing:-.5px}
.pe-head p{margin-top:16px;font-size:16.5px;color:var(--text-secondary)}

/* ---------- buttons ---------- */
.pe-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 34px;border-radius:var(--radius-md);font-weight:700;font-size:15px;letter-spacing:.4px;cursor:pointer;transition:.25s;border:2px solid transparent;text-transform:uppercase}
.pe-btn svg{width:16px;height:16px}
.pe-btn-primary{background:var(--color-primary);color:#fff}
.pe-btn-primary:hover{background:var(--color-primary-dark);transform:translateY(-2px)}
.pe-btn-light{background:#fff;color:var(--color-primary);border-color:#fff}
.pe-btn-light:hover{background:transparent;color:#fff}
.pe-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.pe-btn-ghost:hover{background:#fff;color:var(--color-primary);border-color:#fff}

/* ============================================================
   HERO  — full-bleed image + navy overlay
   ============================================================ */
.pe-hero{position:relative;min-height:50vh;display:flex;align-items:center;color:#fff;
  background:linear-gradient(115deg,rgba(8,15,45,.92) 0%,rgba(0,31,186,.62) 55%,rgba(8,15,45,.45) 100%),
             url('../images/common/company-profile-3.jpg') center/cover no-repeat;background-attachment:fixed}
.pe-hero-inner{max-width:1500px;padding:0px 0;animation:peRise .8s ease both}
.pe-hero .pe-eyebrow{color:#fff;opacity:.85}
.pe-hero h1{font-size:clamp(36px,5.6vw,68px);font-weight:600;line-height:1.08;letter-spacing:-1px;margin-bottom:22px}
.pe-hero h1 .accent{color:#9fb0ff}
.pe-hero p{font-size:clamp(16px,1.5vw,19px);color:rgba(255,255,255,.9);max-width:640px;margin-bottom:34px}
.pe-hero-cta{display:flex;gap:16px;flex-wrap:wrap}
@keyframes peRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* thin brand bar under hero */
.pe-bar{background:var(--color-primary);color:#fff}
.pe-bar .container{display:flex;flex-wrap:wrap;justify-content:space-around;gap:18px;padding:26px 0;text-align:center}
.pe-bar .item{flex:1 1 180px}
.pe-bar .num{display:block;font-size:clamp(26px,3vw,38px);font-weight:800;line-height:1}
.pe-bar small{display:block;margin-top:6px;font-size:13px;letter-spacing:.5px;opacity:.85;text-transform:uppercase}

/* ============================================================
   COMMITMENT + INTEGRATED CAPABILITY  — two side-by-side boxes
   ============================================================ */
.pe-combined{padding:30px 0}
.pe-frames{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}

/* each box */
.pe-frame{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--border-light);border-radius:var(--radius-xl);
  box-shadow:0 18px 50px rgba(8,15,45,.08);padding:15px clamp(26px,3vw,48px);
  overflow:hidden;transition:.3s}

/* accent gradient rail on the top edge */
.pe-frame::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--color-primary),var(--color-secondary))}

.pe-frame h2{font-size:clamp(22px,2vw,30px);font-weight:800;color:var(--text-heading);line-height:1.22;margin-bottom:16px}
.pe-frame p{font-size:16px;color:var(--text-secondary);margin-bottom:16px}

/* certs chips (box 1) */
.pe-frame .certs{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:10px}
.pe-frame .certs span{font-size:12.5px;font-weight:700;letter-spacing:.4px;color:var(--color-primary);background:rgba(var(--color-primary-rgb),.07);border:1px solid var(--border-light);padding:9px 14px;border-radius:var(--radius-md)}

/* tick list (box 2) */
.pe-frame .ticks{list-style:none;margin:8px 0 26px}
.pe-frame .ticks li{position:relative;padding-left:20px;margin-bottom:12px;color:#334155}
.pe-frame .ticks li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:#424f61}
/* push the button to the bottom so both boxes align */
.pe-frame .pe-btn-primary{margin-top:auto;align-self:flex-start}

@media (max-width:880px){
  .pe-frames{grid-template-columns:1fr}
}

/* ============================================================
   WHO WE SERVE  — logo wall
   ============================================================ */
.pe-serve{padding:30px 0;background:var(--bg-section)}
/* auto-scrolling logo marquee (seamless loop, no boxes) */
.pe-marquee{position:relative;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pe-track{display:flex;flex-wrap:nowrap;align-items:center;width:max-content;
  gap:70px;animation:peMarquee 35s linear infinite}
.pe-track .cell{flex:0 0 auto;display:grid;place-items:center}
.pe-track .cell img{max-height:70px;width:auto;filter:grayscale(15%);opacity:.95;transition:.3s}
.pe-track .cell img:hover{filter:none;opacity:1;transform:scale(1.08)}
/* pause when the visitor hovers the strip */
.pe-marquee:hover .pe-track{animation-play-state:paused}
@keyframes peMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.pe-track{animation:none}}


/* ============================================================
   CAPABILITY / SERVICE CARDS
   ============================================================ */
.pe-services{padding:30px 0;background:var(--bg-section)}
.pe-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pe-card{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.pe-card:hover{transform:translateY(-12px) scale(1.03);border-color:rgba(var(--color-primary-rgb),.45);
  box-shadow:0 28px 60px rgba(8,15,45,.18);z-index:2}
.pe-card .thumb{height:210px;overflow:hidden}
.pe-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pe-card:hover .thumb img{transform:scale(1.07)}
.pe-card .body{padding:10px 8px 5px;display:flex;flex-direction:column;flex:1}
.pe-card h3{font-size:21px;font-weight:800;color:var(--text-heading);margin-bottom:10px}
.pe-card p{font-size:15px;color:var(--text-secondary);margin-bottom:9px;flex:1}
.pe-card .more{font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--color-primary);display:inline-flex;align-items:center;gap:8px}
.pe-card .more svg{width:15px;height:15px;transition:transform .25s}
.pe-card:hover .more svg{transform:translateX(5px)}

/* ============================================================
   LOCATIONS + CAPABILITY BADGES
   ============================================================ */
.pe-locations{padding:6px 0}
.pe-locations .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}
.pe-locations .map img{width:87%}
#plant-map{width:100%;height:460px;border-radius:var(--radius-lg,14px);box-shadow:0 10px 30px rgba(0,0,0,.12);border:1px solid var(--border-light);z-index:0}
#plant-map .leaflet-popup-content{font-family:'Poppins',sans-serif;font-size:13px;margin:10px 12px}
#plant-map .leaflet-popup-content b{color:var(--color-primary);font-weight:700;font-size:14px}
.pe-locations h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;color:var(--text-heading);line-height:1.2;margin-bottom:18px}
.pe-locations p{font-size:16.5px;color:var(--text-secondary);margin-bottom:24px}
/* plant names as a clean two-column list (no boxes) */
.pe-badges{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 32px;margin:0}
.pe-badges li{position:relative;padding-left:20px;font-size:15.5px;color:#334155}
.pe-badges li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:#424f61}
@media (max-width:520px){.pe-badges{grid-template-columns:1fr}}



/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .pe-logos{grid-template-columns:repeat(3,1fr)}
  .pe-cards,.pe-news .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .pe-hero{background-attachment:scroll}
  .pe-locations .grid{grid-template-columns:1fr}
  /* let the logo row wrap on smaller screens so they don't get tiny */
  .pe-logos{flex-wrap:wrap;justify-content:center;gap:34px}
  .pe-logos .cell{flex:0 0 auto}
}
@media (max-width:620px){
  .pe-cards,.pe-news .grid{grid-template-columns:1fr}
  .pe-hero-cta{flex-direction:column;align-items:flex-start}
  .pe-hero-cta .pe-btn{width:100%;justify-content:center}
}