:root {
  --black: #050505;
  --panel: #0b0b0b;
  --white: #f5f3ee;
  --muted: #aaa9a5;
  --line: #282828;
  --red: #f20d18;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--white); font-family: Inter, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }

.site-header {
  position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 108px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 5vw;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.brand img { display: block; width: 188px; height: auto; }
nav { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
nav a { transition: color .2s ease; }
nav a:hover, nav a:focus-visible { color: var(--red); }
.nav-contact { border: 1px solid #4a4a4a; padding: 13px 20px; }

.hero { min-height: 830px; height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center; padding: 145px 8vw 80px; }
.grid-lines { position: absolute; inset: 0; opacity: .09; background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to right, #000, transparent 70%); }
.hero::after { content: ""; position: absolute; right: -10vw; bottom: -40%; width: 60vw; height: 100%; border: 1px solid rgba(242,13,24,.3); transform: skew(-18deg); }
.hero-content { position: relative; z-index: 2; max-width: 1100px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; color: #c4c2bd; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow span { width: 34px; height: 3px; background: var(--red); }
h1, h2 { font-family: "Barlow Condensed", Impact, sans-serif; text-transform: uppercase; }
h1 { margin: 0; max-width: 1000px; font-size: clamp(68px, 8.5vw, 138px); line-height: .84; letter-spacing: -.025em; }
h1 em { color: var(--red); font-style: normal; }
.hero-copy { max-width: 650px; margin: 38px 0; color: #c2c1bd; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.65; }
.primary-action { display: inline-flex; align-items: center; gap: 46px; border-bottom: 2px solid var(--red); padding: 14px 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.primary-action span { color: var(--red); font-size: 19px; transition: transform .2s ease; }
.primary-action:hover span { transform: translateY(4px); }
.hero-mark { position: absolute; right: 3vw; bottom: -3.8vw; color: transparent; font-family: "Barlow Condensed", sans-serif; font-size: 28vw; font-weight: 800; line-height: .7; -webkit-text-stroke: 1px rgba(255,255,255,.055); }

.about { padding: 120px 8vw; background: var(--white); color: #101010; display: grid; grid-template-columns: .45fr 1.45fr; gap: 40px 7vw; }
.section-label { padding-top: 15px; color: #6c6b68; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.about-copy h2, .contact h2 { margin: 0 0 35px; font-size: clamp(54px, 6vw, 96px); line-height: .9; letter-spacing: -.02em; }
.about-copy p { max-width: 760px; margin: 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.8; color: #4c4b48; }
.principles { grid-column: 2; display: grid; grid-template-columns: repeat(3,1fr); margin-top: 35px; border-top: 1px solid #c9c7c2; }
.principles div { padding: 27px 20px 0 0; border-right: 1px solid #c9c7c2; }
.principles div + div { padding-left: 25px; }
.principles div:last-child { border-right: 0; }
.principles strong, .principles span { display: block; }
.principles strong { color: var(--red); font-family: "Barlow Condensed", sans-serif; font-size: 25px; text-transform: uppercase; }
.principles span { margin-top: 7px; color: #62615d; font-size: 13px; }

.contact { padding: 120px 8vw; background: var(--panel); display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; }
.contact-heading .eyebrow { margin-bottom: 35px; }
.contact h2 { font-size: clamp(68px, 7vw, 112px); }
.contact-list { border-top: 1px solid #383838; }
.contact-list a { position: relative; display: grid; grid-template-columns: 130px 1fr 30px; gap: 25px; align-items: center; padding: 28px 0; border-bottom: 1px solid #383838; transition: padding .2s ease, color .2s ease; }
.contact-list a:hover { color: var(--red); padding-left: 8px; }
.contact-list a span { color: #999; font-size: 13px; }
.contact-list a strong { font-size: clamp(16px, 1.5vw, 21px); font-weight: 500; }
.contact-list a b { color: var(--red); font-size: 22px; }
address { margin-top: 35px; color: #a6a5a1; font-size: 15px; font-style: normal; line-height: 1.7; }
.contact-list .contact-page-link { margin-top: 30px; }

.contact-page .site-header { position: relative; }
.contact-page-main { min-height: calc(100vh - 258px); }
.contact-page-hero { position: relative; overflow: hidden; min-height: 710px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; align-items: center; padding: 100px 8vw; }
.contact-page-hero::after { content: ""; position: absolute; right: -18vw; bottom: -55%; width: 58vw; height: 115%; border: 1px solid rgba(242,13,24,.32); transform: skew(-18deg); }
.contact-page-intro, .contact-card { position: relative; z-index: 2; }
.contact-page-intro h1 { font-size: clamp(72px, 8vw, 126px); }
.contact-page-intro > p:last-child { max-width: 570px; margin: 34px 0 0; color: #aaa9a5; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.7; }
.contact-card { border-top: 3px solid var(--red); background: #0d0d0d; padding: 34px 42px 42px; box-shadow: 0 25px 80px rgba(0,0,0,.35); }
.card-label { margin: 0 0 18px; color: #777; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.contact-card > a { display: grid; grid-template-columns: 125px 1fr 24px; gap: 20px; align-items: center; padding: 28px 0; border-bottom: 1px solid #343434; transition: color .2s ease, padding .2s ease; }
.contact-card > a:hover { color: var(--red); padding-left: 7px; }
.contact-card a span, .contact-address > span { color: #8d8c89; font-size: 13px; }
.contact-card a strong { font-size: clamp(15px, 1.35vw, 19px); font-weight: 500; overflow-wrap: anywhere; }
.contact-card a b { color: var(--red); font-size: 21px; }
.contact-address { display: grid; grid-template-columns: 125px 1fr; gap: 20px; padding-top: 28px; }
.contact-address address { margin: 0; color: var(--white); }

footer { min-height: 150px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 40px 8vw; border-top: 1px solid #222; }
footer img { width: 135px; }
footer p { color: #777; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 760px) {
  .site-header { height: 88px; padding: 0 22px; }
  .brand img { width: 135px; }
  nav { gap: 17px; font-size: 10px; }
  .nav-contact { padding: 10px 12px; }
  .hero { min-height: 720px; padding: 125px 24px 70px; }
  h1 { font-size: clamp(58px, 18vw, 84px); line-height: .88; }
  .hero-copy { margin: 30px 0; }
  .about, .contact { display: block; padding: 85px 24px; }
  .section-label { margin-bottom: 42px; }
  .principles { display: block; margin-top: 55px; }
  .principles div, .principles div + div { padding: 20px 0; border-right: 0; border-bottom: 1px solid #c9c7c2; }
  .contact-heading { margin-bottom: 35px; }
  .contact-list a { grid-template-columns: 1fr 24px; gap: 8px; }
  .contact-list a span { grid-column: 1 / -1; }
  .contact-list a strong { overflow-wrap: anywhere; }
  footer { padding: 35px 24px; }
  .contact-page-hero { display: block; min-height: 0; padding: 80px 24px; }
  .contact-page-intro { margin-bottom: 58px; }
  .contact-card { padding: 28px 22px 32px; }
  .contact-card > a { grid-template-columns: 1fr 24px; gap: 8px; }
  .contact-card > a span { grid-column: 1 / -1; }
  .contact-address { display: block; }
  .contact-address > span { display: block; margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }