:root {
  --bg: #080b0d;
  --bg-soft: #0d1114;
  --text: #f2f2ef;
  --muted: #9fa3a6;
  --gold: #d8ad61;
  --line: rgba(216,173,97,.45);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(circle at 70% 20%, #172027 0, #0b0f12 34%, #07090b 72%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.page-shell { width: min(1280px, 100%); margin: 0 auto; min-height: 100vh; }

/* HERO */
.hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: 48% 52%;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "title visual"
    "statement visual";
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,9,11,.98) 0%, rgba(7,9,11,.88) 35%, rgba(7,9,11,.28) 61%, rgba(7,9,11,.06) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero-title,
.hero-statement { position: relative; z-index: 2; }
.hero-title { grid-area: title; padding: 92px 42px 0 52px; align-self: end; }
.hero-statement { grid-area: statement; padding: 0 42px 76px 52px; }
.hero-visual {
  grid-area: visual;
  min-height: 680px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.14)),
    url('assets/hero-steve.png') center center / cover no-repeat;
  filter: saturate(.85) contrast(1.04);
}
h1 { font-size: clamp(48px, 5vw, 76px); line-height: .95; letter-spacing: .025em; margin: 0 0 10px; font-weight: 800; }
.hero h2 { font-size: clamp(36px, 4.2vw, 64px); line-height: .95; margin: 0; color: #e3bd79; letter-spacing: .02em; }
.rule { width: 78px; height: 3px; background: var(--gold); margin: 38px 0 30px; }
.lead { font-size: clamp(22px, 2.2vw, 31px); line-height: 1.3; margin: 0; max-width: 700px; }
.sublead { margin-top: 28px; color: var(--muted); font-size: 14px; letter-spacing: .22em; line-height: 1.8; }
.hero-actions { display:flex; gap:26px; flex-wrap:wrap; margin-top:34px; }
.text-link { color:#d9dcde; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.16em; border-bottom:1px solid rgba(216,173,97,.45); padding-bottom:7px; }
.text-link:hover { color:var(--gold); border-color:var(--gold); }

/* SKILLS */
.skills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(12,16,19,.98), rgba(8,11,13,.98));
}
.skills article { padding: 42px 24px 44px; text-align: center; border-right: 1px solid rgba(255,255,255,.08); }
.skills article:last-child { border-right: none; }
.icon { color: var(--gold); font-size: 42px; line-height: 1; margin-bottom: 18px; }
.skills h3 { font-size: 14px; letter-spacing: .14em; margin: 0 0 16px; }
.skills p { margin: 0; color: #b5b8ba; line-height: 1.55; font-size: 15px; }

/* CONTACT */
.contact {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  padding: 80px 52px;
  background: #080b0d;
}
.brand-kicker { letter-spacing: .28em; font-size: 13px; color: #b4b7b9; margin-bottom: 24px; }
.contact h2 { font-size: clamp(38px, 4vw, 58px); margin: 0; letter-spacing: .02em; }
.contact p { color: #c0c2c4; font-size: 18px; line-height: 1.6; }
.contact-card { display:block; }
.contact-form { display:grid; gap:18px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form label { display:grid; gap:8px; }
.contact-form label > span { color:#c9ccce; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width:100%;
  min-height: 48px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:0;
  background:#0d1114;
  color:var(--text);
  padding:14px 15px;
  outline:none;
  transition:border-color .2s ease, background .2s ease;
}
.contact-form textarea { resize:vertical; min-height:150px; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color:var(--gold); background:#10161a; }
.contact-form select { color:#d6d8d9; }
.cta { text-decoration:none; border:1px solid rgba(255,255,255,.35); min-height:48px; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:700; letter-spacing:.08em; transition:.2s ease; }
.cta:hover { border-color:var(--gold); transform:translateY(-1px); }
.cta.primary { border-color:var(--gold); color:#f0cc8a; }
.form-submit { width:100%; background:transparent; cursor:pointer; font-size:13px; }
.form-note { margin:0 !important; color:#7f8589 !important; font-size:12px !important; line-height:1.5 !important; }
.hp { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.contact-links { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.meta { color:#b0b4b6; font-size:14px; line-height:1.6; padding:12px 4px; }
.meta strong { color:var(--text); font-size:12px; text-transform:uppercase; letter-spacing:.15em; }
.contact-links .meta { grid-column:1 / -1; }

footer {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:24px;
  align-items:center;
  padding:30px 52px 44px;
  color:#9ea2a4;
  font-size:12px;
  letter-spacing:.11em;
}
footer strong { color:var(--gold); letter-spacing:.28em; font-weight:600; }
footer span:last-child { text-align:right; }

/* TABLET */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "title"
      "visual"
      "statement";
    min-height: auto;
    overflow: visible;
    background: #080b0d;
  }
  .hero::after { display:none; }
  .hero-title { padding: 56px 28px 34px; }
  .hero-visual {
    min-height: 500px;
    background-position: 52% 22%;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .hero-statement { padding: 0 28px 54px; }
  .hero-statement .rule { margin-top: 34px; }
  .lead { max-width: 760px; }
  .skills { grid-template-columns: 1fr 1fr; }
  .skills article:nth-child(2) { border-right:none; }
  .skills article:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.07); }
  .contact { grid-template-columns:1fr; gap:42px; padding:64px 28px; }
  footer { grid-template-columns:1fr; text-align:left; padding:26px 28px 40px; }
  footer span:last-child { text-align:left; }
}

/* PHONE */
@media (max-width: 560px) {
  .hero-title { padding: 42px 20px 26px; }
  h1 { font-size: clamp(42px, 13vw, 56px); }
  .hero h2 { font-size: clamp(34px, 10vw, 44px); }
  .hero-visual {
    min-height: 390px;
    background-size: cover;
    background-position: 54% 18%;
  }
  .hero-statement { padding: 0 20px 44px; }
  .hero-statement .rule { margin: 28px 0 22px; width:64px; }
  .lead { font-size: clamp(22px, 6.4vw, 28px); line-height:1.28; }
  .sublead { font-size:11px; letter-spacing:.15em; line-height:1.65; margin-top:22px; }
  .sublead br { display:none; }
  .hero-actions { gap:22px; margin-top:28px; }
  .text-link { min-height:44px; display:inline-flex; align-items:center; }

  .skills { grid-template-columns:1fr 1fr; }
  .skills article { padding:30px 14px 32px; border-bottom:1px solid rgba(255,255,255,.07); }
  .skills article:nth-child(odd) { border-right:1px solid rgba(255,255,255,.08); }
  .skills article:nth-child(even) { border-right:none; }
  .skills article:nth-last-child(-n+2) { border-bottom:none; }
  .icon { font-size:34px; margin-bottom:14px; }
  .skills h3 { font-size:11px; letter-spacing:.11em; line-height:1.35; }
  .skills p { font-size:13px; line-height:1.45; }
  .skills p br { display:none; }

  .contact { padding:52px 20px; gap:34px; }
  .contact h2 { font-size:42px; }
  .contact p { font-size:16px; }
  .contact p br { display:none; }
  .form-row, .contact-links { grid-template-columns:1fr; }
  .contact-links .meta { grid-column:auto; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea { font-size:16px; }
  .form-submit, .cta { min-height:52px; }
  footer { padding:24px 20px 34px; gap:12px; font-size:10px; }
  footer strong { letter-spacing:.18em; line-height:1.5; }
}

/* VERY SMALL PHONES */
@media (max-width: 380px) {
  .hero-title, .hero-statement, .contact { padding-left:16px; padding-right:16px; }
  .hero-visual { min-height:350px; background-position:55% 18%; }
  .skills { grid-template-columns:1fr; }
  .skills article,
  .skills article:nth-child(odd),
  .skills article:nth-child(even),
  .skills article:nth-last-child(-n+2) {
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .skills article:last-child { border-bottom:none; }
}