/* PEC — Power Engineering Corporation · shared styles */
:root{
  --ink:#070d13; --ink-2:#0b141c; --steel:#111c26; --steel-2:#18252f;
  --paper:#edefec; --paper-2:#e1e4e0; --white:#fbfbf9;
  --fg-d:#e8edf1; --mut-d:#93a1ad; --line-d:rgba(232,237,241,.12);
  --fg-l:#0b141b; --mut-l:#55626c; --line-l:rgba(11,20,27,.14);
  --accent:#ff6a14; --accent-l:#c94a06; --blue:#27a8df;
  --f-display:"Archivo",system-ui,sans-serif; --f-body:"IBM Plex Sans",system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --gut:clamp(16px,4vw,56px); --maxw:1360px; --nav-h:72px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--ink);color:var(--fg-d);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--accent);color:#111}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:999;background:var(--accent);color:#111;padding:10px 14px;font-weight:600}
.skip:focus{top:12px}

/* ---------- type ---------- */
.d{font-family:var(--f-display);font-stretch:112%;font-weight:700;letter-spacing:-.025em;line-height:.98}
.d-xl{font-size:clamp(44px,min(8.2vw,13vh),136px)}
.d-l{font-size:clamp(36px,min(5.6vw,9.5vh),92px)}
.d-m{font-size:clamp(30px,min(3.9vw,7vh),60px)}
.d-s{font-size:clamp(22px,2.1vw,30px);line-height:1.12;letter-spacing:-.015em}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.lede{font-size:clamp(18px,1.45vw,22px);line-height:1.5}
.mut{color:var(--mut-d)}
.light .mut{color:var(--mut-l)}
.acc{color:var(--accent)}
.light .acc{color:var(--accent-l)}
.tag{display:inline-flex;align-items:center;gap:10px}
.tag::before{content:"";width:22px;height:2px;background:var(--accent)}
.light .tag::before{background:var(--accent-l)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;padding-block:clamp(84px,11vw,168px)}
.light{background:var(--paper);color:var(--fg-l)}
.light-2{background:var(--paper-2);color:var(--fg-l)}
.steel{background:var(--steel)}
.rule{height:1px;background:var(--line-d)}
.light .rule{background:var(--line-l)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(44px,6vw,88px)}
.sec-head .mono{margin-bottom:22px}
.sec-head p{max-width:520px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 24px;font:600 15px/1 var(--f-body);letter-spacing:.01em;border:1px solid transparent;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);white-space:nowrap}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--acc{background:var(--accent);color:#120800}
.btn--acc:hover{background:#ff8540}
.btn--ghost{border-color:rgba(232,237,241,.35);color:var(--fg-d)}
.btn--ghost:hover{border-color:var(--fg-d);background:rgba(232,237,241,.06)}
.light .btn--ghost{border-color:rgba(11,20,27,.3);color:var(--fg-l)}
.light .btn--ghost:hover{border-color:var(--fg-l);background:rgba(11,20,27,.04)}
.btn--sm{height:44px;padding:0 18px;font-size:14px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link{display:inline-flex;align-items:center;gap:10px;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:4px}
.link svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.link:hover svg{transform:translateX(4px)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--gut);transition:background .4s var(--ease),transform .45s var(--ease),border-color .4s;border-bottom:1px solid transparent}
.nav.is-solid{background:rgba(7,13,19,.82);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-color:var(--line-d)}
.nav.is-hidden{transform:translateY(-100%)}
.nav .logo img{height:38px;width:auto}
.nav-links{display:flex;gap:4px}
.nav-links a{position:relative;padding:10px 14px;font-size:15px;font-weight:500;color:rgba(232,237,241,.82);transition:color .25s}
.nav-links a:hover,.nav-links a[aria-current]{color:#fff}
.nav-links a[aria-current]::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--accent)}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-tel{font:500 14px var(--f-mono);letter-spacing:.04em;color:rgba(232,237,241,.82)}
.nav-tel:hover{color:#fff}
.burger{display:none;width:44px;height:44px;position:relative}
.burger span,.burger span::before{position:absolute;left:11px;right:11px;height:2px;background:#fff;content:"";transition:transform .3s var(--ease)}
.burger span{top:17px}
.burger span::before{left:0;right:0;top:8px}
.mnav{position:fixed;inset:0;z-index:70;background:var(--ink);display:flex;flex-direction:column;padding:18px var(--gut) 28px;transform:translateY(-102%);transition:transform .55s var(--ease);visibility:hidden}
.mnav.is-open{transform:none;visibility:visible}
.mnav-top{display:flex;justify-content:space-between;align-items:center;height:44px}
.mnav-top img{height:34px;width:auto}
.mnav-top button{width:44px;height:44px;display:grid;place-items:center}
.mnav-top svg{width:24px;height:24px}
.mnav-links{display:flex;flex-direction:column;margin-top:8vh}
.mnav-links a{font:700 clamp(34px,9vw,52px)/1.18 var(--f-display);font-stretch:112%;letter-spacing:-.02em;padding:6px 0;border-bottom:1px solid var(--line-d)}
.mnav-links a[aria-current]{color:var(--accent)}
.mnav-meta{margin-top:auto;display:grid;gap:10px;color:var(--mut-d);font-size:15px}
.mnav-meta a{color:var(--fg-d)}

/* ---------- page header (inner pages) ---------- */
.ph{position:relative;min-height:min(84svh,820px);display:flex;align-items:flex-end;padding:calc(var(--nav-h) + 80px) 0 clamp(48px,6vw,88px);overflow:hidden;isolation:isolate}
.ph-media{position:absolute;inset:0;z-index:-2}
.ph-media img,.ph-media video{width:100%;height:100%;object-fit:cover}
.ph::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,13,19,.55) 0%,rgba(7,13,19,.35) 40%,rgba(7,13,19,.92) 100%)}
.ph h1{max-width:14ch}
.ph .lede{max-width:600px;margin-top:28px;color:rgba(232,237,241,.86)}
.ph-meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:40px;color:var(--mut-d)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.chips a{font:500 13px var(--f-body);padding:9px 14px;border:1px solid rgba(232,237,241,.25);color:rgba(232,237,241,.9);transition:background .25s,border-color .25s}
.chips a:hover{background:rgba(232,237,241,.08);border-color:rgba(232,237,241,.6)}

/* ---------- clients ---------- */
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:mq var(--dur,60s) linear infinite}
.marquee.rev .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(calc(-50% - 7px))}}
.logo-tile{flex:none;width:168px;height:96px;background:#fff;display:grid;place-items:center;padding:14px 18px;border:1px solid var(--line-l)}
.logo-tile img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.78;transition:filter .35s,opacity .35s}
.logo-tile:hover img{filter:none;opacity:1}
.clients-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--line-l);border:1px solid var(--line-l)}
.clients-grid .logo-tile{width:auto;border:0}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(96px,12vw,180px)}
.cta-bg{position:absolute;inset:0;z-index:-2}
.cta-bg img{width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,13,19,.94) 0%,rgba(7,13,19,.72) 55%,rgba(7,13,19,.45) 100%)}
.cta h2{max-width:13ch}
.cta p{max-width:520px;margin:28px 0 40px;color:rgba(232,237,241,.84)}

/* ---------- footer ---------- */
.foot{background:var(--ink);border-top:1px solid var(--line-d);padding:clamp(64px,8vw,110px) 0 28px;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.foot-brand img{height:52px;width:auto}
.foot-brand p{margin-top:22px;max-width:340px;color:var(--mut-d);font-size:15px}
.foot h4{font:500 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut-d);margin-bottom:18px}
.foot li{margin-bottom:10px;font-size:15px}
.foot li a:hover{color:var(--accent)}
.foot address{font-style:normal;font-size:15px;line-height:1.6;color:var(--fg-d)}
.foot-word{font:800 clamp(90px,24vw,380px)/.8 var(--f-display);font-stretch:125%;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(232,237,241,.16);margin:clamp(48px,7vw,96px) 0 18px;white-space:nowrap;user-select:none}
.foot-word span{display:inline-block}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--mut-d);font-size:13px;border-top:1px solid var(--line-d);padding-top:22px}
.foot-partners{display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* ---------- reveal helpers ---------- */
.js [data-rv]{opacity:0;transform:translateY(28px)}
.js [data-rv].in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js .split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js .split .w>i{display:inline-block;font-style:normal;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.js .split.in .w>i{transform:none}
.img-rv{overflow:hidden}
.js .img-rv>img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
.js .img-rv.in>img{transform:none}

/* ---------- generic content blocks ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.list-check li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--line-d);font-size:16px}
.light .list-check li{border-color:var(--line-l)}
.list-check li::before{content:"";position:absolute;left:2px;top:22px;width:14px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.light .list-check li::before{border-color:var(--accent-l)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:0 28px}
.kv dt,.kv dd{padding:14px 0;border-bottom:1px solid var(--line-d)}
.light .kv dt,.light .kv dd{border-color:var(--line-l)}
.kv dt{font:500 12px/1.9 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut-d)}
.light .kv dt{color:var(--mut-l)}
.ph-img{position:relative;overflow:hidden;background:var(--steel)}
.ph-img img{width:100%;height:100%;object-fit:cover}
.cap{position:absolute;left:14px;bottom:12px;font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(7,13,19,.62);padding:6px 9px;backdrop-filter:blur(6px)}

@media (max-width:1100px){
  .nav-links,.nav-tel{display:none}
  .burger{display:block}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  body{font-size:16px}
  .sec-head,.two{grid-template-columns:minmax(0,1fr)}
  .sec-head{align-items:start}
  .nav-cta .btn{display:none}
  .logo-tile{width:136px;height:80px;padding:12px 14px}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .btn{height:50px;padding:0 20px}
  .clients-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .js [data-rv],.js .split .w>i,.js .img-rv>img{opacity:1!important;transform:none!important;transition:none!important}
  .marquee-track{animation:none}
}