/* Juggernaut Path — Base Styles
   Palette: Forge Gold, Dark Iron, Ember Red, Ash Gray, Deep Steel
   Author: ChatGPT (Jack)
*/

:root{
  --forge-gold: #E38000;
  --dark-iron: #0D0D0D;
  --ember-red: #B22222;
  --ash-gray: #827D78;
  --deep-steel: #2B2F36;

  --fg: #EDEFF3;
  --muted: #C8CCD4;
  --link: var(--forge-gold);

  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.25);
  --maxw: 1100px;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
}
html,body{
  margin:0;
  padding:0;
  background: radial-gradient(1200px 800px at 20% -10%, rgba(196,62,47,.25), transparent 60%),
              radial-gradient(900px 600px at 120% 20%, rgba(212,175,55,.10), transparent 50%),
              var(--dark-iron);
  color: var(--fg);
  font-family: "Crimson Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  line-height:1.6;
}

a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

img{ max-width:100%; height:auto; display:block; }

.container{
  width: min(92vw, var(--maxw));
  margin-inline: auto;
}

header.site{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(8px);
  background: rgba(26,26,28,.75);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{
  display:flex; align-items:center; gap:.75rem; letter-spacing:.3px; text-transform:uppercase; font-family: 'TruensOne';
}
.brand .logo{ width:28px; height:28px; border-radius:6px; background: linear-gradient(135deg, var(--ember-red), var(--forge-gold)); box-shadow: inset 0 0 20px rgba(0,0,0,.35); }
.nav a{
  color:var(--fg); text-decoration:none; padding:8px 12px; border-radius:10px;
}
.nav a.active, .nav a:focus-visible{
  outline: none;
  background: rgba(255,255,255,.06);
}

.button, .btn{
  appearance:none; border:0; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: 14px 18px; border-radius: 999px; font-weight:700; letter-spacing:.2px;
  background: linear-gradient(180deg, var(--forge-gold), #b28b1f);
  color:#121212; box-shadow: var(--shadow);
}
.button:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.button:active{ transform: translateY(0); }
.button.ghost{
  background: transparent; color: var(--fg); border:1px solid rgba(255,255,255,.18);
  box-shadow: none;
}

.hero{
  padding: clamp(48px, 6vw, 88px) 0;
}
.grid{
  display:grid; gap: 28px;
}
.grid-2{
  grid-template-columns: 1.15fr .85fr;
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: clamp(16px, 2.2vw, 24px);
  box-shadow: var(--shadow-soft);
}
.card.tight{ padding: 18px; }

@font-face {
  font-family: 'TruensOne';
  src: url('/assets/fonts/truens_one.woff2') format('woff2'),
       url('/assets/fonts/truens_one.woff') format('woff'),
       url('/assets/fonts/truens_one.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* ensures text shows while font loads */
}

.h1 {
  font-family: 'TruensOne', sans-serif;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.1;
  margin: 0 0 12px;
}



.lead{
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--muted);
}

.stack{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

.section{ padding: 56px 0; }

.kicker{
  text-transform: uppercase; font-weight: 800; letter-spacing: .22em;
  color: var(--ash-gray); font-size: 12px; margin-bottom: 12px;
}

footer.site{
  margin-top: 56px; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
}
footer .links{ display:flex; gap:18px; flex-wrap:wrap; }
footer .links a{ color: var(--muted); }

.link-list{
  display:grid; gap: 14px; grid-template-columns: 1fr;
  max-width: 680px; margin-inline:auto;
}
.link-btn{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  padding: 16px 18px; border-radius: 14px; text-decoration:none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  color: var(--fg);
  font-weight: 700;
  transition: transform .12s ease, background .2s ease;
}
.link-btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.09); }
.link-btn small{ color: var(--ash-gray); font-weight: 600; }

/* Accessibility & motion */
:focus-visible{ outline:2px solid var(--forge-gold); outline-offset:2px; border-radius:8px; }
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior:auto !important; }
}

/* Utility */
.center{ text-align:center; }
.m0{ margin:0; }
.mtb-8{ margin: 8px 0; }
.mtb-20{ margin: 20px 0; }
.wide{ width: min(92vw, 900px); margin-inline:auto; }

.video-embed{
  position:relative; padding-top:56.25%; border-radius: var(--radius);
  overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow: var(--shadow);
}
.video-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* Simple form */
form.contact{ max-width:680px; margin-inline:auto; }
.input{
  width:100%; padding:14px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: var(--fg);
}
label{ display:block; font-weight:700; margin: 12px 0 6px; }
textarea.input{ min-height:160px; resize:vertical; }

/* Table for press assets */
.table{
  width:100%; border-collapse: collapse; overflow:hidden; border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
}
.table th, .table td{ padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; }
.table th{ background: rgba(255,255,255,.06); }

/* Badges */
.badge{
  display:inline-flex; gap:8px; align-items:center; padding:6px 10px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:999px; color: var(--ash-gray); font-size:12px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
}