/*
Theme Name: UNIPEM
Theme URI: https://www.unipem.com
Author: UNIPEM — Project Engineering Management
Description: Custom brand theme for UNIPEM. Independent engineering & project management consultancy. Built to the UNIPEM Brand Guidelines (2026): Berkeley Navy, Imperial Red, Steel Blue, Powder Blue, Honeydew; Baumans / Josefin Sans / Poppins / DM Sans.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: unipem
*/

/* ================= TOKENS ================= */
:root{
  --red:#E63946; --red-dark:#C92A37;
  --cream:#F1FAEE;
  --powder:#A8DADC;
  --steel:#457B9D;
  --navy:#1D3557; --navy-2:#274a77;
  --ink:#16233b; --body:#43536E; --muted:#7C8AA0; --line:#E2E8F0;
  --ff-display:'Baumans',cursive;
  --ff-sub:'Josefin Sans',sans-serif;
  --ff-head:'Poppins',sans-serif;
  --ff-body:'DM Sans',sans-serif;
  --wrap:1140px;
}

/* ================= RESET / BASE ================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--ff-body); color:var(--body); font-size:17px; line-height:1.65; background:#fff; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--steel); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--navy); }
h1,h2,h3,h4{ font-family:var(--ff-head); color:var(--navy); line-height:1.2; font-weight:600; }
h1{ font-size:2.6rem; } h2{ font-size:2rem; } h3{ font-size:1.35rem; } h4{ font-size:1.1rem; }
.u-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* Screen-reader only */
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ================= BUTTONS ================= */
.u-btn{ display:inline-block; font-family:var(--ff-head); font-weight:600; font-size:.95rem;
  background:var(--red); color:#fff !important; text-decoration:none; border-radius:8px;
  padding:13px 28px; border:2px solid var(--red); transition:all .2s ease; }
.u-btn:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.u-btn--navy{ background:var(--navy); border-color:var(--navy); }
.u-btn--navy:hover{ background:var(--navy-2); border-color:var(--navy-2); }
.u-btn--ghost{ background:transparent; color:var(--steel) !important; border-color:var(--steel); }
.u-btn--ghost:hover{ background:var(--steel); color:#fff !important; }
.u-btn--light{ background:#fff; border-color:#fff; color:var(--navy) !important; }
.u-btn--light:hover{ background:var(--cream); border-color:var(--cream); }

/* ================= HEADER ================= */
.site-header{ background:var(--navy); position:sticky; top:0; z-index:999; box-shadow:0 2px 12px rgba(16,35,59,.25); }
.site-header .u-wrap{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:24px; }
.site-brand{ display:flex; align-items:center; text-decoration:none; }
.site-brand img{ height:40px; width:auto; background:#fff; border-radius:7px; padding:5px 9px; }
.site-nav ul{ list-style:none; display:flex; gap:6px; align-items:center; }
.site-nav li{ position:relative; }
.site-nav a{ display:block; font-family:var(--ff-head); font-weight:500; font-size:.92rem;
  color:#CFE0EA; text-decoration:none; padding:26px 14px; }
.site-nav a:hover{ color:#fff; }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current_page_ancestor > a{ color:#fff; box-shadow:inset 0 -3px 0 var(--red); }
/* dropdown */
.site-nav .sub-menu, .site-nav .children{ list-style:none; position:absolute; top:100%; left:0; background:#fff;
  min-width:280px; border-radius:0 0 10px 10px; box-shadow:0 14px 30px rgba(16,35,59,.18);
  padding:8px 0; display:none; }
.site-nav li:hover > .sub-menu, .site-nav li:hover > .children,
.site-nav li:focus-within > .sub-menu, .site-nav li:focus-within > .children{ display:block; }
.site-nav .sub-menu a, .site-nav .children a{ color:var(--body); padding:10px 20px; font-weight:500; }
.site-nav .sub-menu a:hover, .site-nav .children a:hover{ background:var(--cream); color:var(--navy); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:10px; }
.nav-toggle span{ display:block; width:26px; height:3px; background:#fff; border-radius:2px; margin:5px 0; transition:.2s; }

/* ================= PAGE HEADER (inner pages) ================= */
.u-pagehead{ background:linear-gradient(115deg, var(--navy) 60%, var(--navy-2)); padding:72px 0 64px; position:relative; overflow:hidden; }
.u-pagehead::after{ content:""; position:absolute; right:-70px; bottom:-110px; width:280px; height:280px;
  background:var(--red); opacity:.85; clip-path:polygon(0 100%,50% 0,100% 100%); }
.u-pagehead .u-kicker{ color:var(--powder); }
.u-pagehead h1{ color:#fff; font-size:2.7rem; max-width:800px; }
.u-pagehead .u-sub{ color:#D9E4EE; max-width:640px; margin-top:14px; font-size:1.05rem; }

/* ================= SECTIONS ================= */
.u-sec{ padding:76px 0; }
.u-sec--cream{ background:var(--cream); }
.u-sec--navy{ background:var(--navy); }
.u-sec--navy h2, .u-sec--navy h3{ color:#fff; }
.u-sec--navy p{ color:#D9E4EE; }
.u-sec--navy .u-card h3{ color:var(--navy); }
.u-sec--navy .u-card p{ color:var(--body); }
.u-sec--tight{ padding:52px 0; }
.u-kicker{ font-family:var(--ff-sub); font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  font-size:.8rem; color:var(--red); margin-bottom:12px; }
.u-sec h2{ margin-bottom:14px; }
.u-lead{ font-size:1.1rem; max-width:760px; }
.u-center{ text-align:center; }
.u-center .u-lead{ margin-left:auto; margin-right:auto; }
.u-rule{ height:4px; width:64px; background:var(--red); border-radius:2px; margin:18px 0 26px; }
.u-center .u-rule{ margin-left:auto; margin-right:auto; }

/* ================= HOME HERO ================= */
.u-hero{ background:linear-gradient(100deg, rgba(22,38,66,.93) 35%, rgba(29,53,87,.72) 65%, rgba(29,53,87,.45)),
  url('assets/img/hero-home.jpg') center/cover no-repeat; padding:130px 0 120px; position:relative; overflow:hidden; }
.u-hero::after{ content:""; position:absolute; right:-60px; bottom:-120px; width:300px; height:300px;
  background:var(--red); opacity:.88; clip-path:polygon(0 100%,50% 0,100% 100%); }
.u-hero .u-kicker{ color:var(--powder); }
.u-hero h1{ color:var(--powder); font-size:3.1rem; font-weight:700; max-width:700px; }
.u-hero h1 strong{ color:#fff; font-weight:700; }
.u-hero p{ color:#D9E4EE; font-size:1.15rem; max-width:600px; margin:20px 0 30px; }
.u-hero .u-btn + .u-btn{ margin-left:12px; }

/* trust strip */
.u-trust{ background:var(--cream); border-bottom:1px solid #E4EEE6; }
.u-trust .u-wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 30px; padding-top:20px; padding-bottom:20px; }
.u-trust span{ font-family:var(--ff-sub); font-weight:600; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); }

/* ================= GRIDS & CARDS ================= */
.u-grid{ display:grid; gap:26px; margin-top:40px; }
.u-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.u-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.u-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.u-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:30px 28px;
  transition:box-shadow .2s ease, transform .2s ease; }
.u-card:hover{ box-shadow:0 14px 34px rgba(29,53,87,.12); transform:translateY(-3px); }
.u-card h3{ margin-bottom:10px; font-size:1.15rem; }
.u-card p{ font-size:.95rem; }
.u-card .u-more{ display:inline-block; margin-top:14px; font-family:var(--ff-head); font-weight:600; font-size:.9rem; text-decoration:none; color:var(--red); }
.u-card .u-more:hover{ color:var(--red-dark); }
.u-dot{ width:34px; height:8px; border-radius:4px; margin-bottom:18px; display:block; }
.u-dot--red{ background:var(--red);} .u-dot--steel{ background:var(--steel);} .u-dot--powder{ background:var(--powder);} .u-dot--navy{ background:var(--navy);}

/* numbered feature list */
.u-num{ font-family:var(--ff-display); font-size:1.6rem; color:var(--red); display:block; margin-bottom:10px; }

/* ================= SPLIT (text + image) ================= */
.u-split{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; margin-top:34px; }
.u-split img{ border-radius:14px; box-shadow:0 18px 40px rgba(29,53,87,.18); }
.u-split h3{ margin:18px 0 8px; }

/* ================= CHECKLIST ================= */
.u-checklist{ list-style:none; margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:14px 34px; }
.u-checklist li{ position:relative; padding-left:34px; font-size:1rem; }
.u-checklist li::before{ content:"✓"; position:absolute; left:0; top:1px; width:22px; height:22px;
  background:var(--cream); color:var(--steel); border-radius:50%; font-size:.8rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; }

/* ================= INDUSTRY BLOCKS ================= */
.u-ind{ display:grid; grid-template-columns:1fr 1fr; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); margin-top:34px; background:#fff; }
.u-ind .u-ind-img{ min-height:300px; background-size:cover; background-position:center; }
.u-ind .u-ind-txt{ padding:44px 46px; }
.u-ind .u-ind-txt h3{ font-size:1.45rem; margin-bottom:10px; }
.u-ind.alt .u-ind-img{ order:2; }
.u-ph--petro{ background-image:url('assets/img/ind-petro.jpg'); }
.u-ph--power{ background-image:url('assets/img/ind-power.jpg'); }
.u-ph--lng{ background-image:url('assets/img/ind-lng.jpg'); }
.u-ph--h2{ background-image:url('assets/img/ind-h2.jpg'); }
.u-ph--about{ background-image:url('assets/img/about.jpg'); }
.u-ph--services{ background-image:url('assets/img/services.jpg'); }
.u-ph--owners{ background-image:url('assets/img/svc-owners.jpg'); }
.u-ph--process{ background-image:url('assets/img/svc-process.jpg'); }
.u-ph--bid{ background-image:url('assets/img/svc-bid.jpg'); }
.u-ph--feasibility{ background-image:url('assets/img/svc-feasibility.jpg'); }
.u-ph--dd{ background-image:url('assets/img/svc-dd.jpg'); }
.u-ph--engmgmt{ background-image:url('assets/img/svc-engmgmt.jpg'); }
.u-photo{ border-radius:14px; min-height:340px; background-size:cover; background-position:center; box-shadow:0 18px 40px rgba(29,53,87,.18); }

/* tag chips */
.u-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.u-chips a, .u-chips span{ background:var(--cream); color:var(--steel); border-radius:999px; text-decoration:none;
  font-family:var(--ff-head); font-weight:500; font-size:.85rem; padding:8px 18px; }
.u-chips a:hover{ background:var(--powder); color:var(--navy); }

/* ================= QUOTE ================= */
.u-quote{ background:var(--navy); border-radius:14px; color:#fff; padding:44px 48px; position:relative; overflow:hidden; margin-top:34px; }
.u-quote p{ font-family:var(--ff-sub); font-weight:300; font-size:1.5rem; line-height:1.4; color:#fff; max-width:720px; }
.u-quote::after{ content:""; position:absolute; right:-40px; bottom:-50px; width:160px; height:160px;
  background:var(--red); opacity:.85; clip-path:polygon(0 100%,50% 0,100% 100%); }

/* ================= CONTACT ================= */
.u-contact{ display:grid; grid-template-columns:1.15fr 1fr; gap:50px; margin-top:40px; align-items:start; }
.u-contact-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:36px; }
.u-contact-list{ list-style:none; }
.u-contact-list li{ padding:16px 0; border-bottom:1px solid var(--line); }
.u-contact-list li:last-child{ border-bottom:none; }
.u-contact-list b{ font-family:var(--ff-sub); font-weight:600; letter-spacing:.16em; font-size:.78rem;
  text-transform:uppercase; color:var(--steel); display:block; margin-bottom:4px; }
.u-contact-list a{ font-size:1.05rem; }
/* form styling (WPForms & generic) */
.u-contact input[type=text], .u-contact input[type=email], .u-contact input[type=tel],
.u-contact select, .u-contact textarea,
.wpforms-container input[type=text], .wpforms-container input[type=email], .wpforms-container input[type=tel],
.wpforms-container select, .wpforms-container textarea{
  width:100%; border:1.5px solid var(--line); border-radius:8px; padding:12px 14px; font-family:var(--ff-body);
  font-size:1rem; color:var(--ink); background:#fff; }
.u-contact input:focus, .u-contact select:focus, .u-contact textarea:focus{ outline:2px solid var(--powder); border-color:var(--steel); }
.wpforms-container button[type=submit], .u-contact button[type=submit]{
  font-family:var(--ff-head); font-weight:600; font-size:.95rem; background:var(--red); color:#fff;
  border:0; border-radius:8px; padding:14px 30px; cursor:pointer; }
.wpforms-container button[type=submit]:hover, .u-contact button[type=submit]:hover{ background:var(--red-dark); }

/* ================= CTA BAND (site-wide, above footer) ================= */
.u-cta-band{ background:var(--red); padding:58px 0; position:relative; overflow:hidden; }
.u-cta-band::after{ content:""; position:absolute; right:60px; top:-40px; width:170px; height:170px;
  background:#fff; opacity:.07; clip-path:polygon(0 100%,50% 0,100% 100%); }
.u-cta-band .u-wrap{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.u-cta-band h2{ color:#fff; font-size:1.7rem; margin:0; }
.u-cta-band p{ color:#FFE1E4; margin-top:6px; font-size:1rem; }

/* ================= FOOTER ================= */
.site-footer{ background:var(--navy); color:#B9C9DC; }
.site-footer .foot-main{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:48px; padding:64px 0 48px; }
.site-footer img.foot-logo{ height:44px; width:auto; background:#fff; border-radius:8px; padding:6px 10px; margin-bottom:18px; }
.site-footer p{ font-size:.92rem; }
.site-footer h4{ color:#fff; font-family:var(--ff-sub); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; font-size:.82rem; margin-bottom:16px; }
.site-footer ul{ list-style:none; }
.site-footer ul li{ margin-bottom:9px; }
.site-footer a{ color:#CFE0EA; text-decoration:none; font-size:.95rem; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:20px 0; }
.foot-bottom .u-wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.foot-bottom span{ font-family:var(--ff-sub); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:#7D92B5; }

/* ================= EMAIL-AS-IMAGE (privacy) ================= */
.u-email-img{ height:17px; width:auto; display:inline-block; vertical-align:middle; }
.u-contact-list .u-email-img{ height:19px; margin-top:2px; }

/* ================= WP CORE NICETIES ================= */
.aligncenter{ margin-left:auto; margin-right:auto; }
.wp-block-image img{ border-radius:14px; }
entry-content > *{ margin-bottom:1.2em; }

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .u-grid.cols-3, .u-grid.cols-4{ grid-template-columns:repeat(2,1fr); }
  .u-split, .u-contact{ grid-template-columns:1fr; gap:34px; }
  .u-ind{ grid-template-columns:1fr; }
  .u-ind.alt .u-ind-img{ order:0; }
  .u-hero h1{ font-size:2.4rem; }
  h1{ font-size:2.1rem; } .u-pagehead h1{ font-size:2.2rem; }
  .site-footer .foot-main{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 700px){
  .u-grid.cols-2, .u-grid.cols-3, .u-grid.cols-4{ grid-template-columns:1fr; }
  .u-checklist{ grid-template-columns:1fr; }
  .u-hero{ padding:90px 0 84px; }
  .u-hero h1{ font-size:2rem; }
  .u-sec{ padding:56px 0; }
  .site-footer .foot-main{ grid-template-columns:1fr; gap:34px; }
  /* mobile nav */
  .nav-toggle{ display:block; }
  .site-nav{ position:fixed; inset:74px 0 auto 0; background:var(--navy); display:none;
    box-shadow:0 20px 30px rgba(0,0,0,.3); max-height:calc(100vh - 74px); overflow:auto; }
  body.nav-open .site-nav{ display:block; }
  .site-nav ul{ flex-direction:column; align-items:stretch; gap:0; padding:10px 0 20px; }
  .site-nav a{ padding:14px 26px; }
  .site-nav .sub-menu, .site-nav .children{ position:static; display:block; background:transparent;
    box-shadow:none; min-width:0; padding:0 0 6px; }
  .site-nav .sub-menu a, .site-nav .children a{ color:#A8DADC; padding:10px 26px 10px 44px; }
  .site-nav .sub-menu a:hover, .site-nav .children a:hover{ background:rgba(255,255,255,.06); color:#fff; }
  .u-cta-band .u-wrap{ flex-direction:column; text-align:center; }
}