/* =======================
   P & E Goods - main.css (v11.3-full)
   ======================= */

/* ---------- CSS Variables ---------- */
:root{
  --gold:#b7863a;
  --gold-2:#c59b58;
  --ink:#e5e7eb;
  --muted:#a8b1bb;
  --bg:#0b0f0e;
  --panel:rgba(0,0,0,.35);
  --panel-2:rgba(12,16,15,.6);
  --border:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ---------- Base & Layout ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.55;
  display:flex;
  flex-direction:column;
}
img{max-width:100%;height:auto}
a{color:inherit}
.container{width:min(1200px,100%);margin:0 auto;padding:0 24px}
.section{padding:64px 0}
.row{display:flex;gap:20px}
.wrap{flex-wrap:wrap}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}

/* Sticky footer */
main{flex:1 0 auto}
.footer{flex-shrink:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:999px;border:2px solid transparent;
  font-weight:700;cursor:pointer;text-decoration:none;transition:all .2s ease;
}
.btn-primary{background:var(--gold);color:#111;box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-outline{border-color:#666;color:#ddd;background:transparent}
.btn-outline:hover{border-color:var(--ink);color:#fff}

/* ---------- Cards / Panels ---------- */
.cap-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  box-shadow:0 3px 12px rgba(0,0,0,.15);
}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* ---------- Header / Nav ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(0,0,0,.5);
  backdrop-filter:saturate(160%) blur(6px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand img{height:44px;width:auto;display:block}
.name .title{font-weight:800;letter-spacing:.08em}
.name .tag{font-size:12px;color:#e9d1a4}

/* Header links: base + active underline */
.nav a{
  text-decoration:none;
  color:var(--ink);
  opacity:.9;
  margin-left:18px;
  border-bottom:2px solid transparent;   /* reserve space to prevent layout shift */
  padding-bottom:4px;
  transition:color .15s ease, opacity .15s ease, border-color .15s ease;
}
.nav a:hover{ color:var(--gold); opacity:1; }
.nav a.active{
  color:var(--gold);
  opacity:1 !important;
  border-bottom-color:var(--gold);
}

.mobile-toggle{display:none;background:transparent;border:0;color:var(--ink);font-size:24px}
.mobile-menu{display:none;padding:10px 24px;border-top:1px solid var(--border);background:rgba(0,0,0,.7)}
.mobile-menu a{display:block;padding:8px 0;text-decoration:none;color:var(--ink)}
@media (max-width:980px){
  .nav{display:none}
  .mobile-toggle{display:block}
}

/* Space below fixed header */
main{padding-top:86px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:108px 0 88px}
.hero .hero-inner{position:relative;z-index:2;max-width:820px}
.hero h1{font-size:clamp(32px,4.6vw,56px);line-height:1.05;margin:0 0 10px}
.hero p{font-size:clamp(16px,2.1vw,22px);color:#dfe6ec}
.hero .hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(22px);opacity:.35;animation:float 16s ease-in-out infinite}
.orb1{width:420px;height:420px;background:#00c38920;left:-60px;top:-60px;animation-duration:18s}
.orb2{width:360px;height:360px;background:#b7863a20;right:-80px;top:10%;animation-duration:20s}
.orb3{width:300px;height:300px;background:#2dd4bf20;left:40%;bottom:-120px;animation-duration:22s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.gridlines{position:absolute;inset:0;background:
  radial-gradient(800px 300px at 15% 15%,rgba(0,80,60,.09),transparent 40%),
  radial-gradient(800px 300px at 85% 20%,rgba(183,134,58,.10),transparent 40%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,0.6),rgba(0,0,0,0.2));
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,0.6),rgba(0,0,0,0.2));
}

/* ---------- Forms ---------- */
input,textarea,select{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid var(--border);background:var(--panel-2);color:var(--ink);
  outline:none;transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,textarea:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(183,134,58,.25)}

/* ---------- Timeline ---------- */
.timeline{position:relative;padding-left:28px;border-left:2px solid var(--gold)}
.timeline-item{margin-bottom:38px;position:relative}
.timeline-year{position:absolute;left:50px;top:0;width:120px;font-weight:800;font-size:16px;text-align:left;color:var(--gold)}
.timeline-item::before{content:"";position:absolute;left:-32px;top:8px;width:14px;height:14px;background:var(--gold);border-radius:50%}
@media (max-width:700px){
  .timeline{border:none;padding-left:0}
  .timeline-year{position:relative;left:0;top:0;width:auto;text-align:left;margin-bottom:8px}
  .timeline-item::before{display:none}
}

/* ---------- Footer ---------- */
.footer{
  background:#070a09;border-top:1px solid var(--border);
}
.footer .container{
  padding:16px 24px;display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;align-items:center
}
.brand-mini{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.brand-mini img{display:block;height:38px;width:auto}
.brand-mini div{font-size:14px;font-weight:600;color:var(--ink);opacity:.75;letter-spacing:.03em}
.brand-mini:hover div{opacity:1;color:var(--gold);transition:opacity .2s ease,color .2s ease}

/* ---------- Print ---------- */
@media print{
  .header,.footer,.print-hide{display:none !important}
  body{background:#fff !important;color:#000 !important}
  .cap-card{background:#fff !important;border:1px solid #ddd !important;box-shadow:none !important}
  a{color:#000 !important;text-decoration:none}
}

/* Keep header steady during swaps */
.header { will-change: contents; contain: layout paint; }

/* Optional: reduce visual change while content swaps */
body.transitioning * { cursor: progress; }