/* ═══════════════════════════════════════════
   CROWN ENERGY — SHARED DESIGN SYSTEM
   Libre Baskerville + IBM Plex Sans
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }

:root {
  --gold: #ee9c2f;
  --gold-dim: rgba(238,156,47,.15);
  --gold-dark: #c07d1a;
  --navy: #002140;
  --navy2: #05305e;
  --ink: #111118;
  --cream: #f7f4f1;
  --dust: #e7e6e6;
  --mist: #9b9590;
  --white: #ffffff;
  --border: rgba(0,33,64,.09);
}

body {
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--white);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 { font-family:'Libre Baskerville',serif; font-weight:400; line-height:1.1; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
button { font-family:'IBM Plex Sans',sans-serif; }

/* ── HEADER ── */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:500;
  transition: background .4s, box-shadow .4s, border-color .4s;
}
.site-header.at-top .hdr-inner { border-bottom-color: transparent; }
.hdr-inner {
  max-width: 1440px; margin: 0 auto;
  padding: 1rem 3.5rem;
  background: white;
  border-radius: 40px;
  margin-top: 10px;
  height: 74px;
  display: flex; align-items:center; justify-content:space-between;
  gap: 2rem;
  border-bottom: 1px solid transparent;
  transition: height .35s, border-color .35s;
}
.site-header.scrolled .hdr-inner {
  height: 66px;
  margin-top: 10px;
  border-bottom-color: var(--border);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(18px);border-radius: 40px;
  box-shadow: 0 2px 32px rgba(0,33,64,.06);
}

.site-header.scrolled .logo-emblem{
    width:60px; height:60px;
}

/* Logo */
.logo-wrap { display:flex; align-items:center; gap:.85rem; flex-shrink:0; }
.logo-emblem {
  width:70px; height:70px; position:relative; flex-shrink:0; transition:all .35s;
}
.logo-emblem img {
  width:100%; height:100%; object-fit:contain;
}


/* Nav links */
.hdr-nav { display:flex; align-items:center; gap:.15rem; }
.hdr-nav a {
  padding:.45rem 1rem;
  font-size:.77rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  color: var(--navy); transition: color .25s;
  position:relative;
}
.hdr-nav a::after {
  content:''; position:absolute; bottom:-1px; left:1rem; right:1rem;
  height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.hdr-nav a:hover, .hdr-nav a.active { color:var(--gold); }
.hdr-nav a:hover::after, .hdr-nav a.active::after { transform:scaleX(1); }
.site-header.at-top .hdr-nav a { color: var(--ink); }
.site-header.at-top .hdr-nav a:hover { color:var(--gold); }

.hdr-cta {
  padding:.62rem 1.5rem;
  background:var(--gold); color:#fff !important;
  font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border-radius: 30px;
  white-space:nowrap; margin-left:.75rem;
}
.hdr-cta::after { display:none !important; }
.hdr-cta:hover { background:var(--gold-dark); border-color:var(--gold-dark); }

/* Mobile toggle */
.hdr-toggle {
  display:none; background:none; border:none; cursor:pointer;
  padding:4px; color:var(--navy); transition:color .3s;
}
.site-header.at-top .hdr-toggle { color: var(--ink); }
.hdr-toggle .bar {
  display:block; width:23px; height:1.5px; background:currentColor;
  margin:3px 0; transition:all .35s;
}

/* Drawer */
.hdr-drawer {
  position:fixed; top:0; right:0; bottom:0; width:320px;
  background:var(--navy); z-index:600;
  display:flex; flex-direction:column;
  padding:5.5rem 2.5rem 3rem;
  transform:translateX(100%); transition:transform .45s cubic-bezier(.16,1,.3,1);
  gap:1.75rem;
}
.hdr-drawer.open { transform:translateX(0); }
.hdr-drawer a {
  font-family:'Libre Baskerville',serif; font-size:1.9rem; font-weight:400;
  color:rgba(255,255,255,.55); transition:color .2s;
}
.hdr-drawer a:hover, .hdr-drawer a.active { color:var(--gold); }
.hdr-drawer-close {
  position:absolute; top:1.8rem; right:2rem;
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.35); font-size:1.1rem; transition:color .2s;
}
.hdr-drawer-close:hover { color:#fff; }
.drawer-dim {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5); z-index:590;
  opacity:0; transition:opacity .35s;
}
.drawer-dim.show { opacity:1; }

/* ── SHARED UTILITIES ── */
.container { max-width:1440px; margin:0 auto; }
.wrap { padding-left:3.5rem; padding-right:3.5rem; }

.section-label {
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:.67rem; letter-spacing:.25em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:1.2rem;
}
.section-label::before { content:''; width:24px; height:1px; background:var(--gold); flex-shrink:0; }

.section-heading {
  font-size: clamp(2rem, 3.5vw, 3.8rem);
  line-height:1.06; margin-bottom:1.25rem;
}
.section-sub {
  font-size:.95rem; line-height:1.78; color:var(--mist);
  font-weight:300; max-width:500px;
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.82rem 1.9rem;
  font-size:.77rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border:none; cursor:pointer; transition:all .25s;
  font-family:'IBM Plex Sans',sans-serif;
}
.btn-gold { background:var(--gold); color:#fff; }
.btn-gold:hover { background:var(--gold-dark); transform:translateY(-1px); box-shadow:0 6px 22px rgba(238,156,47,.35); }
.btn-navy { background:var(--navy); color:#fff; }
.btn-navy:hover { background:var(--navy2); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--navy); border:1.5px solid var(--border); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.btn-ghost-white { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.3); }
.btn-ghost-white:hover { border-color:var(--gold); color:var(--gold); }

/* Reveal animation */
.rv { opacity:0; transform:translateY(30px); transition:opacity .75s ease, transform .75s ease; }
.rv.in { opacity:1; transform:none; }
.rv.d1 { transition-delay:.1s; } .rv.d2 { transition-delay:.2s; }
.rv.d3 { transition-delay:.3s; } .rv.d4 { transition-delay:.4s; }
.rv.d5 { transition-delay:.5s; }

/* ── FOOTER ── */
.site-footer { background:var(--ink); padding:5rem 3.5rem 2rem; }
.footer-grid {
  max-width:1440px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr;
  gap:4rem; padding-bottom:4rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-brand-name {
    height: 80px; display: flex; align-items: center; margin-bottom: 20px;
}
.footer-brand-name img { height: 100%; object-fit: contain; }
.footer-brand p { font-size:.82rem; line-height:1.75; color:rgba(255,255,255,.38); max-width:240px; }
.footer-col h5 {
  font-size:.63rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin-bottom:1.4rem; font-family:'IBM Plex Sans',sans-serif;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.footer-col ul a { font-size:.82rem; color:rgba(255,255,255,.38); transition:color .2s; }
.footer-col ul a:hover { color:var(--gold); }
.footer-contact-item {
  display:flex; align-items:center; gap:.7rem;
  font-size:.82rem; color:rgba(255,255,255,.38); margin-bottom:.7rem;
}
.footer-contact-item i { color:var(--gold); font-size:.78rem; width:14px; flex-shrink:0; }
.footer-bottom {
  max-width:1440px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  padding-top:2rem; flex-wrap:wrap; gap:1rem;
  font-size:.74rem; color:rgba(255,255,255,.25);
}

/* ── RESPONSIVE SHARED ── */
@media(max-width:1024px) {
  .hdr-nav { display:none; }
  .hdr-toggle { display:flex; flex-direction:column; }
  .hdr-inner { padding:0 2rem; }
  .wrap { padding-left:2rem; padding-right:2rem; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .site-footer { padding:4rem 2rem 2rem; }
}
@media(max-width:640px) {
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
}