/* ===== Brand / theme ===== */
:root{
  --bg:#0b0f11;
  --panel:#161a1e;
  --panel2:#1d2329;
  --muted:#9eabb6;
  --text-light:#c9d1d9;

  --gold:#d4a017;
  --gold-soft:#e5bb52;
  --ember:#882d03;
  --red:#c63232;
  --cyan:#0066a0;

  --phoenix-charcoal:#0b0f11;
  --phoenix-panel:#161a1e;
  --phoenix-gold:#d4a017;
  --phoenix-ember:#882d03;
  --phoenix-light:#c9d1d9;
  --phoenix-cyan:#0066a0;

  --header-h:66px;
}

/* Reset/base */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  position:relative;
  min-height:100%;
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text-light);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}
body::before,
body::after{
  pointer-events:none;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 900px at 10% 12%, rgba(213,160,23,.08), transparent 55%),
    radial-gradient(820px 820px at 90% 18%, rgba(0,102,160,.09), transparent 55%),
    radial-gradient(1100px 700px at 18% 82%, rgba(136,45,3,.08), transparent 60%);
  z-index:-2;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:radial-gradient(circle at center, transparent 45%, rgba(0,0,0,.5) 100%);
  z-index:-1;
}
a{color:#dfe7ff;text-decoration:none}
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
  border-radius:8px;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  height:var(--header-h);
  background:linear-gradient(180deg, rgba(15,18,22,.94), rgba(11,15,17,.88));
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 18px rgba(0,0,0,.25) inset;
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  background:linear-gradient(90deg, rgba(0,102,160,.8), rgba(213,160,23,.85));
  opacity:.9;
}
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
}
.container.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
}
.brand{
  display:flex;
  align-items:center;
  gap:.55rem;
}
.brand-logo{
  height:44px;
  width:auto;
  display:block;
  filter:drop-shadow(0 0 6px rgba(198,147,10,.5));
}
.brand-word{
  font-family:"Cinzel",serif;
  font-weight:800;
  color:var(--gold-soft);
  letter-spacing:.4px;
  white-space:nowrap;
}

/* TOP NAV */
.site-nav{
  display:flex;
  align-items:center;
}
.site-nav a,
.site-nav a:visited{
  position:relative;
  margin-left:16px;
  padding:8px 10px;
  border-radius:10px;
  color:var(--text-light);
  text-decoration:none;
  font-size:.95rem;
  transition:color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.site-nav a:hover{
  background:rgba(0,102,160,.08);
  color:#e6f5ff;
  transform:translateY(-1px);
  box-shadow:0 0 12px rgba(0,102,160,.25);
}
.site-nav a::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:2px;
  height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease-out;
  opacity:.9;
}
.site-nav a.active{
  background:rgba(212,160,23,.12);
  border:1px solid rgba(212,160,23,.4);
  box-shadow:0 0 12px rgba(212,160,23,.22);
}
.site-nav a.active::after{
  transform:scaleX(1);
}

/* Buttons */
.btn{
  display:inline-block;
  border:1px solid rgba(255,255,255,.2);
  padding:8px 14px;
  border-radius:999px;
  color:#fff;
  font-size:.9rem;
  transition:transform .2s ease, box-shadow .25s ease, background .2s ease;
}
.btn.small{padding:7px 12px}
.btn.primary{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  border:none;
  box-shadow:0 6px 18px rgba(212,160,23,.24);
}
.btn.ghost{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.btn.primary:hover{
  box-shadow:0 10px 26px rgba(212,160,23,.32);
}
.btn.ghost:hover{
  box-shadow:0 10px 22px rgba(0,102,160,.18);
}

/* Layout wrapper */
.page{
  position:relative;
  padding:0 18px;
  isolation:isolate;
}
.page::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:120px 120px;
  opacity:.05;
  pointer-events:none;
  z-index:-1;
}
.page-content{min-width:0;}

/* Panels (vertical, full-height sections) */
.panel{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
  background:
    radial-gradient(1200px 620px at 78% 20%, rgba(229,187,82,.12), transparent 60%),
    radial-gradient(1000px 640px at 16% 90%, rgba(21,30,38,.6), transparent 65%),
    var(--bg);
  border-bottom:1px solid rgba(255,255,255,.06);
  scroll-margin-top:calc(var(--header-h) + 14px);
}
.panel.hero{
  min-height:calc(100vh - var(--header-h));
  background:#050308;
}

#services{
  background:
    radial-gradient(1200px 520px at 70% 18%, rgba(229,187,82,.14), transparent 62%),
    radial-gradient(1200px 780px at 18% 88%, rgba(136,45,3,.12), transparent 65%),
    linear-gradient(180deg, rgba(22,26,30,.9), rgba(11,15,17,.94)),
    var(--bg);
}
#sectors{
  background:
    radial-gradient(1100px 520px at 78% 18%, rgba(0,102,160,.16), transparent 62%),
    radial-gradient(1200px 760px at 16% 86%, rgba(21,30,38,.75), transparent 65%),
    linear-gradient(180deg, rgba(14,17,21,.95), rgba(11,15,17,.92)),
    var(--bg);
}
#sectors .inner{
  position:relative;
}
#sectors .inner::before{
  content:"";
  position:absolute;
  inset:-8% -6% auto;
  height:78%;
  background:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:140px 140px;
  opacity:.05;
  filter:blur(0.5px);
  pointer-events:none;
  z-index:0;
}
#about{
  background:
    radial-gradient(1200px 520px at 24% 20%, rgba(229,187,82,.12), transparent 60%),
    radial-gradient(1200px 820px at 82% 86%, rgba(136,45,3,.12), transparent 65%),
    linear-gradient(180deg, rgba(18,22,26,.94), rgba(11,15,17,.92)),
    var(--bg);
}
#governance{
  background:
    radial-gradient(1100px 520px at 74% 16%, rgba(229,187,82,.12), transparent 62%),
    radial-gradient(1200px 640px at 20% 80%, rgba(0,0,0,.42), transparent 70%),
    linear-gradient(180deg, rgba(16,19,24,.95), rgba(11,15,17,.94)),
    var(--bg);
}
#contact{
  background:
    radial-gradient(1100px 540px at 26% 20%, rgba(0,102,160,.12), transparent 60%),
    radial-gradient(1200px 820px at 78% 82%, rgba(229,187,82,.12), transparent 65%),
    linear-gradient(180deg, rgba(13,16,20,.94), rgba(11,15,17,.92)),
    var(--bg);
}

.panel:not(.hero)::before,
.panel:not(.hero)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  pointer-events:none;
  z-index:0;
}
.panel:not(.hero)::before{
  top:-16vh;
  height:24vh;
  background:linear-gradient(to bottom, rgba(11,15,17,.85), rgba(11,15,17,0));
  filter:blur(2px);
}
.panel:not(.hero)::after{
  bottom:-18vh;
  height:26vh;
  background:linear-gradient(to top, rgba(11,15,17,.88), rgba(11,15,17,0));
  filter:blur(3px);
}
.panel > *{position:relative;z-index:1;}
.inner{
  padding:40px 24px;
  width:100%;
}
.inner.max{
  max-width:1200px;
  margin:0 auto;
}

/* === Phoenix Hero – Cinematic Truck Background === */
.hero{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
}

.hero-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:transparent;
  z-index:1;
}

.hero-media{
  display:none;
}
.hero-layout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3rem;
  width:100%;
  padding:56px 24px 64px;
}
.hero-copy{
  flex:0 0 48%;
  max-width:540px;
}
.hero-visual{
  flex:0 0 52%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.hero-vehicle-card{
  position:relative;
  width:100%;
  max-width:620px;
  aspect-ratio:16 / 9;
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(229,187,82,0.22), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,0.9), transparent 55%);
  box-shadow:
    0 26px 65px rgba(0,0,0,0.80),
    0 0 40px rgba(0,0,0,0.6);
}
.hero-vehicle-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:26px;
  padding:1px;
  background:linear-gradient(135deg, rgba(212,160,23,.55), rgba(0,102,160,.35), rgba(229,187,82,.5));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.9;
  pointer-events:none;
  z-index:1;
}
.hero-vehicle-card img,
.hero-visual-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  position:absolute;
  inset:0;
  transform:scale(1.02) translateY(2px);
  filter:saturate(1.08) contrast(1.12) brightness(1.04);
  transition:opacity .65s ease, transform .65s ease;
  opacity:1;
}
.hero-visual-img.incoming{opacity:0;transform:scale(1.015);}
.hero-visual-img.fade-in{opacity:1;}
.hero-visual-img.fade-out{opacity:0.12;}
.hero-vehicle-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 50%, rgba(0,0,0,0.35), transparent 62%),
    linear-gradient(to right, rgba(0,0,0,0.12), rgba(0,0,0,0.45));
  pointer-events:none;
  z-index:2;
}
.hero-chip-row{
  margin-top:.75rem;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.hero-swap-trigger{
  border:1px solid rgba(212,160,23,.5);
  background:rgba(255,255,255,.04);
  color:var(--phoenix-gold);
  border-radius:999px;
  padding:7px 12px;
  min-width:128px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.74rem;
  line-height:1.25;
  text-align:center;
  white-space:normal;
  display:block;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.hero-swap-trigger:hover,
.hero-swap-trigger.is-active{
  background:linear-gradient(135deg, rgba(136,45,3,.25), rgba(212,160,23,.25));
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  color:#ffe9b3;
  transform:translateY(-1px);
}
.hero-inner{
  position:relative;
  z-index:2;
  max-width:560px;
  padding:6rem 8vw 4rem;
}
.hero-inner::before{
  content:"";
  position:absolute;
  inset:-40%;
  z-index:-1;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,190,80,0.15) 0%, transparent 60%),
    radial-gradient(circle at 50% 20%, rgba(255,150,40,0.18) 0%, transparent 65%);
  opacity:.9;
  mix-blend-mode:screen;
  pointer-events:none;
}
.hero-pill{
  display:inline-block;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:.35rem .85rem;
  border-radius:999px;
  border:1px solid rgba(212,160,23,.6);
  background:radial-gradient(circle at top left, rgba(255,255,255,0.09), rgba(0,0,0,0.7));
  color:var(--phoenix-gold);
}
.hero-title{
  margin:1.6rem 0 .8rem;
  font-size:clamp(2.6rem,4vw,3.6rem);
  line-height:1.1;
  font-weight:700;
  text-transform:uppercase;
  text-shadow:0 0 25px rgba(0,0,0,0.7);
}
.hero-title-accent{
  display:block;
  font-size:.75em;
  font-weight:400;
  letter-spacing:.18em;
  color:var(--phoenix-gold);
}
.hero-continuation{
  display:none;
}
.hero-cont-title{
  font-size:1rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin:0 0 6px;
}
.hero-cont-text{
  margin:0 0 10px;
  color:rgba(201,209,217,0.9);
}
.hero-cont-meta{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(201,209,217,0.72);
  margin-bottom:10px;
}
.hero-cont-cta .btn{
  width:100%;
}
.hero-subtitle{
  max-width:40rem;
  margin-top:.85rem;
  margin-bottom:1.9rem;
  font-size:.98rem;
  line-height:1.7;
  color:rgba(201,209,217,0.86);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-bottom:1.35rem;
}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.78rem;
  transition:color .2s ease, box-shadow .25s ease, background .2s ease;
}
.back-link:hover{
  color:var(--gold-soft);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  background:rgba(255,255,255,.05);
}
.hero-btn-main{
  background:linear-gradient(135deg, var(--phoenix-ember), var(--phoenix-gold));
  border:none;
  color:#0b0f11;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  padding-inline:1.8rem;
  box-shadow:0 14px 35px rgba(0,0,0,0.55);
}
.hero-btn-main:hover{
  filter:brightness(1.06);
  box-shadow:0 18px 40px rgba(0,0,0,0.7);
}
.hero-btn-secondary{
  border-color:rgba(212,160,23,.7);
  color:var(--phoenix-gold);
  text-transform:uppercase;
  letter-spacing:.14em;
}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(201,209,217,0.68);
}
.hero-scroll-indicator{
  position:absolute;
  left:50%;
  bottom:2.5rem;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.25rem;
  z-index:2;
}
.hero-scroll-dot{
  width:4px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,0.3);
}
.hero-scroll-line{
  width:2px;
  height:40px;
  border-radius:999px;
  background:linear-gradient(to bottom, rgba(212,160,23,0), rgba(212,160,23,0.8));
  animation:hero-scroll-pulse 1.6s infinite ease-in-out;
}
@keyframes hero-scroll-pulse{
  0%{transform:scaleY(0.4);opacity:0.5;}
  50%{transform:scaleY(1);opacity:1;}
  100%{transform:scaleY(0.4);opacity:0.3;}
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  .hero-scroll-line{animation:none;}
  .hero-visual-img{transition:none !important;}
}

/* Typography */
.kicker{
  color:var(--cyan);
  opacity:.9;
  margin:0 0 12px;
  font-size:.9rem;
  letter-spacing:.18em;
  position:relative;
}
.kicker::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:80px;
  height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--gold-soft));
  opacity:.7;
}
h1,h2,h3,h4{
  font-family:"Oswald","Cinzel",serif;
  margin:0 0 10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
h1{
  font-size:clamp(34px,5vw,56px);
  font-weight:600;
}
h2{
  font-size:clamp(24px,3.2vw,32px);
}
h3{
  font-size:1.05rem;
}
.panel h2{
  position:relative;
  z-index:1;
}
.panel h2::before{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  top:50%;
  height:64px;
  transform:translateY(-50%);
  background:radial-gradient(closest-side, rgba(229,187,82,.2), rgba(0,0,0,0));
  filter:blur(26px);
  opacity:.5;
  z-index:-1;
}
#services h2::before{background:radial-gradient(closest-side, rgba(229,187,82,.32), rgba(136,45,3,.16), rgba(0,0,0,0));}
#sectors h2::before{background:radial-gradient(closest-side, rgba(0,102,160,.32), rgba(0,0,0,0));}
#about h2::before{background:radial-gradient(closest-side, rgba(229,187,82,.28), rgba(0,0,0,0));}
#governance h2::before{background:radial-gradient(closest-side, rgba(229,187,82,.26), rgba(0,0,0,0));}
#contact h2::before{background:radial-gradient(closest-side, rgba(0,102,160,.28), rgba(229,187,82,.14), rgba(0,0,0,0));}
.lead{
  color:var(--text-light);
  max-width:68ch;
}
.highlight{color:var(--gold-soft);letter-spacing:.04em;}
.muted.small{
  color:var(--muted);
  font-size:.9rem;
  margin-top:10px;
}
.cta{
  display:flex;
  gap:12px;
  margin-top:14px;
}
.scroll-hint{
  margin-top:16px;
  font-size:.8rem;
  color:var(--muted);
}
.scroll-indicator{
  margin-top:10px;
  display:inline-flex;
  flex-direction:column;
  gap:6px;
}
.scroll-indicator span{
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:radial-gradient(circle, var(--gold-soft), rgba(0,0,0,0));
  opacity:.6;
  animation:scrollPulse 1.8s ease-in-out infinite;
}
.scroll-indicator span:nth-child(2){animation-delay:.2s;opacity:.7;}
.scroll-indicator span:nth-child(3){animation-delay:.4s;opacity:.8;}
.scroll-indicator span:nth-child(4){animation-delay:.6s;opacity:.9;}
@keyframes scrollPulse{
  0%{transform:translateY(0);opacity:.2;}
  50%{transform:translateY(4px);opacity:1;}
  100%{transform:translateY(8px);opacity:.2;}
}

/* Cards / tiles */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:18px;
  position:relative;
}
.card{
  background:var(--panel);
  border-radius:16px;
  padding:16px 16px 18px;
  position:relative;
  overflow:hidden;
}
.card.angled::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:16px;
  padding:1px;
  background:linear-gradient(135deg, rgba(212,160,23,.7), rgba(0,102,160,.4), rgba(229,187,82,.6));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  opacity:.6;
  pointer-events:none;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.35), 0 0 18px rgba(229,187,82,.16);
}
.card h3{
  margin-bottom:8px;
  color:var(--gold-soft);
}
.card ul{
  margin:0;
  padding-left:18px;
}
.card p{margin:.25rem 0 0 0}

.bar-cta{margin-top:16px}

/* Shield tiles */
.tiles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:14px;
  position:relative;
}
.tile{
  background:var(--panel2);
  border-radius:18px;
  padding:14px 14px 16px;
  border:1px solid rgba(255,255,255,.06);
  position:relative;
  overflow:hidden;
}
.tile::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:18px;
  padding:1px;
  background:linear-gradient(120deg, rgba(212,160,23,.45), rgba(0,102,160,.35), rgba(229,187,82,.5));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.65;
  pointer-events:none;
}
.tile:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.32), 0 0 16px rgba(0,102,160,.18);
}
.tile.shield::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at top, rgba(229,187,82,.16), transparent 70%),
    linear-gradient(145deg, rgba(212,160,23,.35) 0, transparent 40%);
  opacity:.25;
  mix-blend-mode:screen;
}
.tile h4{
  margin:0 0 6px;
  font-size:.95rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.tile p{margin:0;font-size:.9rem}

#services .grid-3::before{
  content:"";
  position:absolute;
  inset:8% 6% auto 6%;
  height:68%;
  background:radial-gradient(closest-side, rgba(229,187,82,.22), rgba(136,45,3,.12), transparent 70%);
  filter:blur(48px);
  opacity:.75;
  z-index:0;
  pointer-events:none;
}

#sectors .tiles::before{
  content:"";
  position:absolute;
  inset:10% 8% auto 8%;
  height:70%;
  background:radial-gradient(closest-side, rgba(0,102,160,.22), rgba(0,0,0,0));
  filter:blur(52px);
  opacity:.6;
  pointer-events:none;
  z-index:0;
}
#sectors .tiles{
  grid-template-columns:repeat(3,1fr);
}
.ops-gallery,
.callouts,
.legacy-proof{
  display:grid;
  gap:16px;
  margin-top:18px;
}
.ops-gallery{
  grid-template-columns:repeat(4,1fr);
}
.ops-card,
.callout-card,
.legacy-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:var(--panel2);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  isolation:isolate;
  border:1px solid rgba(255,255,255,.06);
  aspect-ratio:16 / 9;
}
.ops-card img,
.callout-card img,
.legacy-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .35s ease, filter .35s ease, opacity .35s ease;
}
.ops-card::after,
.callout-card::after,
.legacy-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
  opacity:.9;
  pointer-events:none;
  z-index:1;
}
.ops-card:hover img,
.callout-card:hover img,
.legacy-card:hover img{
  transform:scale(1.04);
  filter:brightness(1.05);
}
.ops-card-caption,
.callout-caption,
.legacy-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:12px 14px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f6e8c4;
  z-index:2;
}
#sectors .callouts{
  grid-template-columns:repeat(3,1fr);
}
.legacy-proof{
  grid-template-columns:repeat(3,1fr);
}

#about .facts{
  position:relative;
  background:rgba(255,255,255,.02);
  border-radius:14px;
  padding:14px 18px 16px;
}
#about .facts::before{
  content:"";
  position:absolute;
  inset:-8% -4%;
  background:radial-gradient(closest-side, rgba(229,187,82,.18), rgba(0,0,0,0));
  filter:blur(42px);
  opacity:.7;
  z-index:-1;
  pointer-events:none;
}
#about .split{
  position:relative;
  padding:6px;
}
#about .split::before{
  content:"";
  position:absolute;
  inset:-6%;
  background:radial-gradient(closest-side, rgba(136,45,3,.14), rgba(0,0,0,0));
  filter:blur(56px);
  opacity:.5;
  z-index:-1;
  pointer-events:none;
}

#governance .grid-3::before{
  content:"";
  position:absolute;
  inset:10% 5% auto 5%;
  height:72%;
  background:radial-gradient(closest-side, rgba(229,187,82,.2), rgba(0,102,160,.12), rgba(0,0,0,0));
  filter:blur(48px);
  opacity:.65;
  pointer-events:none;
  z-index:0;
}
#governance .bar-cta{
  position:relative;
  padding:8px 10px 0;
}
#governance .bar-cta::before{
  content:"";
  position:absolute;
  inset:-10% -6% auto;
  height:70%;
  background:radial-gradient(closest-side, rgba(229,187,82,.18), rgba(0,0,0,0));
  filter:blur(52px);
  opacity:.5;
  pointer-events:none;
  z-index:-1;
}

#contact .contact-lines{
  position:relative;
  background:rgba(255,255,255,.02);
  border-radius:14px;
  padding:14px 18px 16px;
}
#contact .contact-lines::before{
  content:"";
  position:absolute;
  inset:-12% -6% auto;
  height:70%;
  background:radial-gradient(closest-side, rgba(0,102,160,.18), rgba(229,187,82,.12), rgba(0,0,0,0));
  filter:blur(52px);
  opacity:.6;
  pointer-events:none;
  z-index:-1;
}

/* Lists / layout */
.facts{
  margin:10px 0 18px 0;
  padding-left:18px;
}
.bullets{
  margin:8px 0 0 0;
  padding-left:18px;
}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:6px;
}
.contact .contact-lines{
  margin:0 0 12px 0;
  padding-left:18px;
}

/* Glows */
.glow{
  position:absolute;
  pointer-events:none;
  filter:blur(40px);
  opacity:.45;
  mix-blend-mode:screen;
  transition:opacity .3s;
}
.panel:hover .glow{opacity:.65}
.glow.ember{
  width:580px;
  height:580px;
  right:4%;
  top:8%;
  background:radial-gradient(closest-side, rgba(213,160,23,.38), rgba(136,45,3,.16), transparent 70%);
  filter:blur(52px);
}
.glow.smoke{
  width:900px;
  height:520px;
  left:-12%;
  bottom:-8%;
  background:radial-gradient(closest-side, rgba(30,38,46,.5), transparent 70%);
  filter:blur(68px);
}

/* Footer */
.site-footer{
  position:relative;
  border-top:1px solid rgba(255,255,255,.08);
  background:#0a0e12;
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, rgba(213,160,23,.8), rgba(0,102,160,.7));
}
.site-footer::after{
  content:"";
  position:absolute;
  right:2%;
  bottom:-20%;
  width:320px;
  height:320px;
  background:url('../assets/phoenix-logo.svg') no-repeat center/contain;
  opacity:.04;
  filter:blur(2px);
  pointer-events:none;
}
.container.foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px;
}
.site-footer a{color:#cfe9ff;transition:color .2s ease, text-shadow .2s ease;}
.site-footer a:hover{color:var(--gold-soft);text-shadow:0 0 8px rgba(212,160,23,.4);}

/* ========= Responsive ========= */

@media (max-width:1100px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .ops-gallery{grid-template-columns:repeat(2,1fr);}
  .callouts{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:960px){
  .grid-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .legacy-proof{grid-template-columns:repeat(2,1fr);}
}

/* Tablet down */
@media (max-width:900px){
  .hero{
    align-items:flex-end;
  }
  .hero-layout{
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-copy{
    flex:0 0 auto;
    max-width:100%;
  }
  .hero-visual{
    width:100%;
    justify-content:center;
    margin-top:1.5rem;
  }
  .hero-vehicle-card{
    max-width:100%;
    border-radius:22px;
  }
  .ops-gallery{grid-template-columns:repeat(2,1fr);}
  .callouts{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:768px){
  body{
    background-position:center top;
    background-size:cover;
    overflow-x:hidden;
    transform:none !important;
    min-width:0 !important;
  }
  main,
  .page,
  .inner.max,
  .container,
  .container.nav{
    max-width:100% !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:1.25rem;
    padding-right:1.25rem;
    box-sizing:border-box;
    transform:none !important;
    min-width:0 !important;
  }
  .hero{
    min-height:88vh;
  }
  .hero-layout{
    display:block;
    padding:clamp(1rem,3.5vw,1.75rem) 1.25rem;
  }
  .hero-copy,
  .hero-visual{
    width:100%;
    max-width:100%;
  }
  .hero-title{
    font-size:clamp(2rem,6vw,2.4rem);
    line-height:1.1;
    margin-top:1.1rem;
  }
  .hero-subtitle{
    font-size:clamp(.95rem,3.5vw,1.02rem);
    display:none;
  }
  .hero-pill{display:none;}
  .hero-actions{
    flex-direction:column;
    width:100%;
    gap:.6rem;
    margin-bottom:.9rem;
  }
  .hero-actions .hero-btn-main{
    width:100%;
  }
  .hero-actions .hero-btn-secondary{
    display:none;
  }
  .back-link{
    width:100%;
    justify-content:center;
    padding:10px 12px;
    font-size:.82rem;
  }
  .hero-vehicle-card{
    height:clamp(220px,40vw,280px);
    max-width:100%;
  }
  .hero-vehicle-card img,
  .hero-visual-img{
    object-position:center 35%;
    width:100%;
    height:auto;
    border-radius:18px;
  }
  .hero-chip-row{
    width:100%;
    gap:.5rem;
    row-gap:.5rem;
    justify-content:flex-start;
  }
  .hero-swap-trigger{
    font-size:.65rem;
    padding:6px 10px;
    min-width:120px;
  }
  .inner{
    padding:24px 16px 32px;
  }
  .hero-meta{display:none;}
  .hero-continuation{
    display:block;
    padding:14px 0 12px;
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:12px;
  }
  .hero-cont-cta .btn{
    width:100%;
  }
  .hero-visual{
    margin-top:.75rem;
    width:100%;
    order:5;
  }
  .hero-copy{order:1;width:100%;}
  .hero-actions{order:3;}
  .hero-meta{order:4;width:100%;}
  .hero-layout{
    flex-direction:column;
    align-items:flex-start;
    padding-inline:1.5rem;
  }
}

/* Phone */
@media (max-width:720px){
  .site-header{
    height:auto;
  }
  .container.nav{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:8px 12px 10px;
  }
  .brand-logo{
    height:32px;
  }
  .brand-word{
    font-size:.8rem;
  }
  .site-nav{
    width:100%;
    overflow-x:auto;
    padding-bottom:2px;
  }
  .site-nav a,
  .site-nav a:visited{
    margin-left:0;
    margin-right:8px;
    padding:6px 8px;
    font-size:.85rem;
    white-space:nowrap;
  }

  .page{
    padding-left:16px;
  }
  .inner{
    padding:28px 18px 40px;
  }
  h1{
    font-size:clamp(28px,9vw,38px);
  }
  .lead{
    font-size:.95rem;
  }
  .cta{
    flex-wrap:wrap;
  }
  .scroll-hint{
    font-size:.8rem;
  }
  .hero{
    align-items:flex-end;
    background-position:20% bottom;
  }
  .hero-inner{
    padding:4rem 1.5rem 5rem;
    text-align:left;
  }
  .hero-title{
    font-size:2.1rem;
  }
  .hero-actions{
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-scroll-indicator{
    bottom:1.75rem;
  }
  .ops-gallery,
  .callouts,
  .legacy-proof{
    grid-template-columns:1fr;
  }
}

/* Very small phones */
@media (max-width:480px){
  .hero-inner{
    padding:3.25rem 1.25rem 4.25rem;
  }
  .hero-title{
    font-size:1.9rem;
  }
}

/* ===== FINAL MOBILE OVERRIDE – kill horizontal scroll ===== */
@media (max-width: 720px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* remove desktop left rail spacing completely on phones */
  .page {
    padding-left: 0 !important;
  }

  /* ensure each main panel matches the viewport width */
  .panel,
  .panel.hero,
  #home,
  #services,
  #sectors,
  #about,
  #governance,
  #contact {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* inner content should fill the panel with safe padding */
  .inner,
  .inner.max {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    box-sizing: border-box;
  }
}