/* ============================================================
   Altoreva — marketing site
   Warm charcoal + gold theme sampled from the Altoreva logo.
   Self-hosted webfonts: Satoshi (body), Cabinet Grotesk (display),
   Geist Mono (numbers / eyebrows).
   ============================================================ */

/* ---- Satoshi — body & UI ---- */
@font-face { font-family:'Satoshi'; src:url('/assets/fonts/satoshi-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/assets/fonts/satoshi-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/assets/fonts/satoshi-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ---- Cabinet Grotesk — display / headings ---- */
@font-face { font-family:'Cabinet Grotesk'; src:url('/assets/fonts/cabinet-grotesk-500.woff2') format('woff2'); font-weight:500 600; font-style:normal; font-display:swap; }
@font-face { font-family:'Cabinet Grotesk'; src:url('/assets/fonts/cabinet-grotesk-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Cabinet Grotesk'; src:url('/assets/fonts/cabinet-grotesk-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

/* ---- Geist Mono — numbers, IDs, eyebrows ---- */
@font-face { font-family:'Geist Mono'; src:url('/assets/fonts/GeistMono-Regular.ttf') format('truetype'); font-weight:400 700; font-style:normal; font-display:swap; }

:root {
  --font-sans: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Cabinet Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --background: #191B20;
  --card: #24262C;
  --border: #3C3E45;
  --foreground: #F2F1ED;
  --muted-foreground: #9A9C9F;
  --faint: #6A6C72;
  --primary: #D4A936;
  --primary-hover: #B68B27;
  --primary-foreground: #1A1206;
  --ring: #E7C15C;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #191B20;
  color: #F2F1ED;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

/* Visible focus for every interactive element (keyboard-first) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #191B20;
  border-bottom: 1px solid #3C3E45;
}
.nav-wrap {
  max-width: 1160px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  min-height: 72px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: #F2F1ED; border-radius: 6px;
}
.brand-mark {
  width: 38px; height: 38px; flex: none;
  background: #F2F1ED; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.brand-mark img { width: 26px; height: 26px; object-fit: contain; }
.brand-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; letter-spacing: 0.01em;
}
.main-nav {
  margin-left: auto;
  display: flex; align-items: center; gap: clamp(14px, 2.5vw, 26px);
  flex-wrap: wrap; padding: 12px 0;
}
.nav-link {
  font-size: 15px; color: #9A9C9F; text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: color .15s ease;
}
.nav-link:hover { color: #F2F1ED; }
.nav-link[aria-current="page"] { color: #F2F1ED; border-bottom-color: #D4A936; }

/* Hamburger toggle — hidden on desktop */
.nav-toggle { display: none; }

/* ---- Mobile header ---- */
@media (max-width: 900px) {
  .nav-wrap { min-height: 62px; padding-top: 11px; padding-bottom: 11px; gap: 12px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 42px; height: 42px; padding: 0;
    background: transparent; color: #F2F1ED;
    border: 1px solid #3C3E45; border-radius: 10px; cursor: pointer;
  }
  .nav-toggle svg { width: 22px; height: 22px; }
  .nav-toggle .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }

  .main-nav {
    order: 3; flex-basis: 100%; width: 100%; margin-left: 0;
    display: none; flex-direction: column; align-items: stretch;
    gap: 0; padding: 6px 0 12px;
  }
  .main-nav.open { display: flex; }
  .main-nav .nav-link {
    width: 100%; font-size: 16px; padding: 14px 4px;
    border-bottom: 1px solid #24262C; border-top: none;
  }
  .main-nav .nav-link[aria-current="page"] { color: #D4A936; border-bottom-color: #24262C; }
  .main-nav .btn { width: 100%; text-align: center; margin-top: 14px; padding: 14px; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-block; border: none; cursor: pointer;
  background: #D4A936; color: #1A1206;
  font-family: var(--font-sans); font-weight: 700; line-height: 1;
  text-decoration: none; border-radius: 10px; white-space: nowrap;
  transition: background .15s ease;
}
.btn:hover { background: #B68B27; }
.btn--sm { font-size: 15px; padding: 10px 18px; }
.btn--lg { font-size: 16px; padding: 14px 26px; }
.btn--block { display: block; width: 100%; text-align: center; padding: 14px; font-size: 16px; }
.btn:disabled { opacity: .7; cursor: default; }

/* ---- Text links ---- */
.link-muted { color: #9A9C9F; text-decoration: none; transition: color .15s ease; }
.link-muted:hover { color: #F2F1ED; }

.ul-link {
  text-decoration: none;
  border-bottom: 1px solid #57595F; padding-bottom: 2px;
  transition: border-color .15s ease, color .15s ease;
}
.ul-link:hover { border-bottom-color: #D4A936; }
.ul-link.to-gold:hover { color: #E7C15C; }

/* ---- Forms (pilot + contact) ---- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 14px; font-weight: 600; color: #F2F1ED; }
.field-label .req { color: #D4A936; margin-left: 2px; }
.field-label .hint { color: #9A9C9F; font-weight: 400; }
.input {
  width: 100%; font: inherit; font-size: 15px;
  background: #191B20; color: #F2F1ED;
  border: 1px solid #3C3E45; border-radius: 10px;
  padding: 11px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: #6A6C72; }
.input:focus { outline: none; border-color: #D4A936; box-shadow: 0 0 0 1px #D4A936; }
textarea.input { resize: vertical; min-height: 96px; line-height: 1.5; }
select.input { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A9C9F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- Long-form article prose ---- */
.breadcrumb { font-family: var(--font-mono); font-size: 12.5px; color: #6A6C72; }
.breadcrumb a { color: #9A9C9F; text-decoration: none; }
.breadcrumb a:hover { color: #F2F1ED; }
.prose { max-width: 720px; }
.prose > p { font-size: 17px; line-height: 1.7; color: #C7C8C4; margin: 20px 0 0; }
.prose > p.lead { font-size: clamp(18px, 2vw, 20px); line-height: 1.6; color: #9A9C9F; }
.prose h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 30px); line-height: 1.15; letter-spacing: -0.01em; color: #F2F1ED; margin: 46px 0 0; }
.prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #F2F1ED; margin: 30px 0 0; }
.prose ul { margin: 16px 0 0; padding-left: 22px; }
.prose li { font-size: 17px; line-height: 1.6; color: #C7C8C4; margin: 9px 0 0; }
.prose strong { color: #F2F1ED; font-weight: 600; }
.prose a:not(.btn):not(.ul-link) { color: #E7C15C; text-decoration: none; border-bottom: 1px solid #57595F; }
.prose a:not(.btn):not(.ul-link):hover { border-bottom-color: #D4A936; }
.article-cta { background: #24262C; border: 1px solid rgba(212,169,54,0.35); border-radius: 16px; padding: clamp(26px,4vw,40px); margin-top: 56px; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid #3C3E45; }
.foot-wrap {
  max-width: 1160px; margin: 0 auto;
  padding: 32px clamp(20px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; font-size: 14px; color: #9A9C9F;
}
.foot-nav { display: flex; gap: 20px; flex-wrap: wrap; }