/* Roofline — shared tokens and base. Single theme by choice: the brand lives at blue hour. */
:root {
  --dusk: #0D1321;
  --slate: #1B2436;
  --surface: #161E2E;
  --surface-raised: #1E2839;
  --line: #2A3549;
  --plaster: #F3EEE6;
  --fog: #A3ACBD;
  --porchlight: #F2A65A;
  --twilight: #8FB3E3;
  --ready: #6CC6A0;
  --sold: #E5735A;

  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r-xs: 2px; --r-sm: 6px; --r-md: 14px; --r-device: 36px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--dusk);
  color: var(--plaster);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--porchlight); text-underline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--porchlight); outline-offset: 2px; border-radius: 4px; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }

.eyebrow {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--twilight);
}
.title {
  font-family: var(--font-display);
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.9;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: 0; }
.muted { color: var(--fog); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--plaster);
  font-weight: 500; font-size: 15px; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--surface-raised); border-color: #3a4862; }
.btn-primary { background: var(--porchlight); border-color: var(--porchlight); color: var(--dusk); font-weight: 600; }
.btn-primary:hover { background: #f6b673; border-color: #f6b673; }
.btn:active { transform: translateY(1px); }

/* Header */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 19, 33, 0.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(42, 53, 73, 0.7);
}
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--plaster); }
.logo svg { width: 32px; height: 32px; flex: none; }
.logo span { font-family: var(--font-display); font-stretch: 62%; font-weight: 800; font-size: 26px; letter-spacing: .01em; line-height: 1; }
.nav { display: flex; gap: 22px; margin-left: 12px; }
.nav a { color: var(--fog); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav a:hover { color: var(--plaster); }
.head-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.head-cta .btn { min-height: 38px; padding: 8px 14px; font-size: 14px; }
.beta-pill {
  font-family: var(--font-mono); font-size: 11px; color: var(--twilight);
  border: 1px solid rgba(143, 179, 227, .35); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
@media (max-width: 900px) { .nav { display: none; } }
@media (max-width: 520px) { .head-cta .btn:not(.btn-primary) { display: none; } .beta-pill { display: none; } }

/* The lower third, the brand's signature graphic */
.lt { --lt-bar: var(--porchlight); --lt-bar-ink: var(--dusk); --lt-sub: var(--plaster); --lt-sub-ink: var(--dusk); --lt-rule: var(--porchlight); --lt-stretch: 62%; --lt-weight: 800; }
.lt .rule { height: 2px; background: var(--lt-rule); transform-origin: left; }
.lt .bar {
  display: inline-block; background: var(--lt-bar); color: var(--lt-bar-ink);
  font-family: var(--font-display); font-stretch: var(--lt-stretch); font-weight: var(--lt-weight);
  text-transform: uppercase; line-height: 1; border-radius: var(--r-xs);
}
.lt .sub {
  display: inline-block; background: var(--lt-sub); color: var(--lt-sub-ink);
  font-family: var(--font-display); font-stretch: 125%; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; line-height: 1; border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}