@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 700; src: url(/fonts/BarlowCondensed-BoldItalic.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 600; src: url(/fonts/BarlowCondensed-SemiBoldItalic.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; src: url(/fonts/InstrumentSerif-Italic.ttf) format("truetype"); font-display: swap; }

:root {
  --black: #0a0a0a; --carbon: #111111; --ice: #f4f4f2; --steel: #8c8c8c;
  --coral: #f0997b; --live: #e8633a; --ink: #4a1b0c; --rule: #1e1e1e;
  --glow: linear-gradient(135deg, #f6bba3, #e8633a);
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --voice: "Instrument Serif", Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--black); color: var(--ice); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.55 var(--ui); background: radial-gradient(90% 40% at 50% 0%, #1f1f1f, var(--black) 70%) no-repeat var(--black); min-height: 100vh; }
a { color: var(--coral); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
header.top { display: flex; align-items: center; justify-content: space-between; padding: 28px 0; }
.lockup { display: inline-flex; align-items: center; gap: 12px; color: var(--ice); }
.lockup img { width: 34px; height: 34px; }
.lockup span { font: italic 700 30px/1 var(--display); letter-spacing: -0.5px; text-transform: uppercase; }
nav a { font: 500 13px/1 var(--ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--steel); margin-left: 24px; }
nav a:hover { color: var(--ice); text-decoration: none; }

.hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; padding: 56px 0 72px; }
h1 { font: italic 600 clamp(56px, 8vw, 96px)/0.92 var(--display); letter-spacing: -2.5px; text-transform: uppercase; margin: 0 0 24px; }
h1 em { font-style: italic; color: var(--coral); }
.voice { font: italic 400 clamp(20px, 2.4vw, 26px)/1.35 var(--voice); color: var(--steel); margin: 0 0 32px; max-width: 30ch; }
.cta { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 28px; background: var(--glow); color: var(--ink); font: 500 17px/1 var(--ui); }
.cta:hover { text-decoration: none; filter: brightness(1.05); }
.cta.ghost { background: transparent; color: var(--ice); border: 1px solid rgba(255,255,255,0.14); margin-left: 12px; }
.phone { position: relative; margin: 0 auto; width: min(100%, 330px); border-radius: 44px; padding: 10px; background: var(--carbon); border: 1px solid var(--rule); box-shadow: 0 40px 120px rgba(232, 99, 58, 0.12); }
.phone::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1.5px; background: var(--glow); opacity: 0.8; border-radius: 2px; }
.phone img { display: block; width: 100%; border-radius: 34px; }

.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 0 72px; }
.point { border-top: 1px solid var(--rule); padding-top: 20px; }
.point h2 { font: italic 600 30px/1 var(--display); letter-spacing: -0.5px; text-transform: uppercase; margin: 0 0 10px; }
.point p { margin: 0; color: var(--steel); font-size: 16px; }
.point p strong { color: var(--ice); font-weight: 500; }

section.contact { border-top: 1px solid var(--rule); padding: 48px 0 56px; }
section.contact h2, .doc h2 { font: italic 600 40px/1 var(--display); letter-spacing: -1px; text-transform: uppercase; margin: 0 0 12px; }
section.contact p, .doc p, .doc li { color: var(--steel); max-width: 66ch; }
.doc { padding: 24px 0 72px; }
.doc h1 { font-size: clamp(44px, 6vw, 64px); margin: 0 0 8px; }
.doc .meta { font: 500 12px/1 var(--ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--steel); margin-bottom: 40px; }
.doc h2 { font-size: 30px; margin-top: 44px; }
.doc table { border-collapse: collapse; width: 100%; margin: 16px 0 8px; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); color: var(--steel); }
.doc th { color: var(--ice); font-weight: 500; }
.doc td:first-child { color: var(--ice); }
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--ice); }
footer { border-top: 1px solid var(--rule); padding: 28px 0 48px; color: var(--steel); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
footer a { color: var(--steel); }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 32px 0 56px; }
  .points { grid-template-columns: 1fr; }
  .cta.ghost { margin: 12px 0 0; }
  nav a { margin-left: 16px; }
  .lockup span { font-size: 26px; }
}