:root{
  --bg:#0b1526;
  --bg-alt:#0f1d34;
  --panel:#12233d;
  --text:#e6eef7;
  --muted:#a7b3c8;
  --accent:#ffc857;
  --accent-2:#6ecff6;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:20px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);
  background:linear-gradient(180deg,#0b1526 0%, #0a1321 100%);line-height:1.6}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:20px}
.site-header,.site-footer{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}.brand-name{font-weight:800;letter-spacing:.3px}
.beacon{width:14px;height:14px;border-radius:3px;background:var(--accent);box-shadow:0 0 16px 6px rgba(255,200,87,.65)}
.nav a{margin:0 10px;color:var(--text);opacity:.9}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;border:1px solid #263b5d;background:#14223a;color:var(--text)}
.btn--accent{background:linear-gradient(135deg,var(--accent),#ffd677); color:#2b2100;border:none;font-weight:700}
.btn--primary{background:#1a2c4e;border-color:#355a92}
.btn--ghost{background:transparent;border:1px solid #2a3f61}
.hero{position:relative;min-height:70vh;background:url('hero.jpg') center/cover no-repeat fixed}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,11,20,.55),rgba(5,11,20,.85))}
.hero__content{position:relative;z-index:2;padding:90px 20px;max-width:1100px;margin:0 auto;color:#fff}
.hero__content h1{font-size:48px;line-height:1.1;margin:.2em 0}
.lead{color:var(--muted);max-width:60ch}
.cta{display:flex;gap:14px;margin:18px 0 8px}
.section{padding:60px 20px}.section--alt{background:rgba(255,255,255,0.03);border-top:1px solid #1a2a46;border-bottom:1px solid #1a2a46}
.section--dark{background:#0a1425;border-top:1px solid #132341;border-bottom:1px solid #132341}
.section__title{font-size:28px;margin:0 0 18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#0f1d34;border:1px solid #1a2a46;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card--quote blockquote{margin:0;font-size:18px;color:#d9e6ff}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.checklist{margin:10px 0 0;padding-left:18px;color:var(--text)}
.byline{display:block;margin-top:8px;color:var(--muted);font-size:14px}
.contact{max-width:800px}.center{text-align:center}
.contact__form{margin:18px auto 8px;background:#0f1d34;border:1px solid #1a2a46;padding:20px;border-radius:var(--radius);box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid label{display:flex;flex-direction:column;font-weight:600;font-size:14px;color:#cfe0ff}
.form-grid .full{grid-column:1/-1}
input,select,textarea{margin-top:6px;background:#0b172d;border:1px solid #263b5d;border-radius:10px;color:var(--text);padding:12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,200,87,.2)}
.link{color:#9ed4ff}
.site-footer{padding:30px 20px;color:var(--muted)} .footer-nav a{margin-left:12px;color:#muted}
@media (max-width:900px){.split{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}.hero__content h1{font-size:34px}}
/* Interior hero */
.hero--short { min-height: 42vh; }

/* Article / guide typography */
.prose { max-width: 850px; margin: 0 auto; }
.prose h2 { margin-top: 28px; }
.prose p, .prose li { color: var(--text); }
.prose .toc { margin-bottom: 14px; }

/* Better print layout */
@media print {
  body { background: white; color: #111; }
  .site-header, .site-footer, .hero__overlay, .toc { display: none !important; }
  .hero { background: none !important; }
  .section, .container { padding: 0 !important; max-width: 100% !important; }
  a { color: #111; text-decoration: underline; }
  .btn, .cta { display: none !important; }
  .prose { margin: 0; }
}
/* --- a11y utility --- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- mobile nav --- */
.nav-toggle{display:none; background:#14223a; color:var(--text); border:1px solid #2a3f61; border-radius:10px; padding:10px 12px}
@media (max-width:900px){
  .nav-toggle{display:inline-block}
  .nav{
    position:fixed; top:64px; right:20px; left:20px;
    display:flex; flex-direction:column; gap:10px;
    background:#0f1d34; border:1px solid #1a2a46; border-radius:var(--radius);
    padding:16px; box-shadow:var(--shadow);
    max-height:70vh; overflow:auto;
    transform:translateY(-16px); opacity:0; pointer-events:none;
    transition:.2s ease;
  }
  .nav a{padding:10px 8px}
  .nav.nav--open{transform:translateY(0); opacity:1; pointer-events:auto}
}

/* --- forms stack on phones --- */
@media (max-width:900px){
  .form-grid{grid-template-columns:1fr}
}

/* --- hero improvements for mobile --- */
/* Prefer "small viewport" units to avoid iOS address bar jump */
.hero{ min-height:70svh; }            /* overrides earlier 70vh */
@media (max-width:900px){
  .hero{ background-attachment:scroll } /* avoid iOS jank from fixed backgrounds */
}

/* Smaller hero image for phones (upload assets/hero-small.jpg ~1400px wide) */
@media (max-width:700px){
  .hero{ background-image:url('hero-small.jpg') }
}

/* Fluid type for large titles */
.hero__content h1{ font-size:clamp(28px, 6vw, 48px) }

/* Images never overflow */
img{max-width:100%;height:auto}

/* Buttons & links: comfortable touch targets */
.btn, .nav a{min-height:44px; display:inline-flex; align-items:center}

/* Respect iPhone safe areas for the header */
@supports(padding: max(0px)){
  .site-header{padding-top:max(20px, env(safe-area-inset-top))}
}
/* Sticky header on mobile */
@media (max-width:900px){
  .site-header{
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: saturate(140%) blur(6px);
    background: rgba(10, 20, 37, 0.78); /* matches --bg with transparency */
    border-bottom: 1px solid #132341;
  }
}
/* a11y helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Hamburger button (only shows on small screens) */
.nav-toggle{display:none;background:#14223a;color:var(--text);border:1px solid #2a3f61;border-radius:10px;padding:10px 12px}
@media (max-width:900px){
  .nav-toggle{display:inline-block}
  .nav{
    position:fixed; inset:auto 20px 20px 20px; top:64px;
    display:flex; flex-direction:column; gap:10px;
    background:#0f1d34; border:1px solid #1a2a46; border-radius:var(--radius);
    padding:16px; box-shadow:var(--shadow);
    max-height:70vh; overflow:auto;
    transform:translateY(-16px); opacity:0; pointer-events:none;
    transition:.2s ease;
    z-index:1100; /* make sure menu is above content */
  }
  .nav a{padding:10px 8px}
  .nav.nav--open{transform:translateY(0); opacity:1; pointer-events:auto}
}

/* Optional: prevent body from scrolling when menu is open */
@media (max-width:900px){
  body.menu-open{ overflow:hidden; }
}
/* ==== Inside-page hero (shorter, iOS-friendly) ==== */

/* Shorter height on desktops/tablets */
.hero--short{
  min-height: 42vh;     /* tweak: 36–50vh to taste */
}

/* Slightly tighter spacing than homepage */
.hero--short .hero__content{
  padding: 56px 20px;
}

/* iPhone/Android: avoid 'fixed' jank and keep a ~half-screen height */
@media (max-width:900px){
  .hero{ background-attachment: scroll; } /* don't parallax on mobile */
  .hero--short{ min-height: 50svh; }      /* ~half-screen on phones */
}