@font-face { font-family: 'Geist'; src: url('/fonts/geist.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/geist-mono.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/fonts/archivo-400.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/fonts/archivo-700.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-700.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }

:root {
  --background: #FFFFFF; --foreground: #0B0F11; --hunter: #0B0F11; --forest: #3E5F70;
  --signal: #4E6E7E; --paper: #FFFFFF; --stone: #E8EEF1; --steel: #4A5257;
  --pool: #A8C4CE; --harbor: #3E5F70; --line: #E6E9EB; --line-light: rgba(232, 238, 241, 0.3);
  --font-geist-sans: 'Geist'; --font-geist-mono: 'Geist Mono'; --font-archivo: 'Archivo'; --font-ibm-plex-mono: 'IBM Plex Mono';
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--background); }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
::selection { color: var(--paper); background: var(--hunter); }

.site-header { position: absolute; z-index: 20; top: 0; left: 0; display: grid; width: 100%; height: 76px; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 28px; border-bottom: 1px solid var(--line-light); background: #000000; color: #E8EEF1; }
.brand { display: inline-flex; width: max-content; align-items: center; gap: 11px; font-family: var(--font-archivo), Arial, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.09em; }
.brand-mark { display: grid; width: 20px; height: 20px; grid-template-columns: repeat(3, 1fr); gap: 2px; transform: skewY(-20deg); }
.brand-mark i { background: #E8EEF1; }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { background: #A8C4CE; }
.header-cta { display: inline-flex; justify-self: end; align-items: center; gap: 8px; font-family: var(--font-ibm-plex-mono), monospace; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; transition: color 180ms ease; }
.header-cta:hover { color: var(--stone); }

.hero { position: relative; display: grid; min-height: 92svh; overflow: hidden; place-items: center; padding: 0; background: var(--forest) url('/miami-network-map.jpg') center top / cover no-repeat; color: var(--paper); }
.hero::before { position: absolute; z-index: 0; inset: 0; background: rgba(11, 15, 17, 0.42); content: ''; }
.hero-copy { position: relative; z-index: 1; margin: 0 auto; padding: 0 clamp(32px, 5vw, 88px) 88px; text-align: center; }
.hero h1 { max-width: 1320px; margin: 0 auto; color: #FFFFFF; font-family: 'Archivo', Helvetica, sans-serif; font-size: clamp(38px, 9vw, 88px); font-weight: 700; line-height: 0.92; letter-spacing: 0.01em; text-align: center; text-transform: uppercase; text-wrap: balance; }
.hero h1 span { display: block; }

.domains-section { background: var(--stone); color: var(--hunter); }
.domain-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.domain-card { display: flex; min-height: 285px; flex-direction: column; padding: 30px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--stone); transition: background 200ms ease; }
.domain-card:hover { background: var(--paper); }
.domain-main { margin-top: 0; }
.domain-main h3 { min-height: 2.3em; max-width: 430px; margin: 0 0 18px; color: #0B0F11; font-family: var(--font-archivo), Arial, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; }
.domain-main p { max-width: 430px; margin: 0; color: #4A5257; font-family: var(--font-archivo), Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; }

.partnership-section { display: grid; min-height: 500px; grid-template-columns: 68% 32%; background: var(--paper); color: var(--hunter); }
.partnership-image { position: relative; min-height: 500px; overflow: hidden; background: var(--hunter) url('/wing-nest-clean.webp') 52% center / cover no-repeat; }
.partnership-content { display: flex; max-width: 760px; flex-direction: column; justify-content: center; padding: 48px 50px; border-top: 1px solid var(--line); }
.partnership-content h2 { margin: 0; font-size: clamp(46px, 4.7vw, 72px); font-weight: 520; line-height: 0.93; letter-spacing: -0.058em; }
.partnership-content h2 em { color: var(--hunter); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.partnership-copy { max-width: 560px; margin: 32px 0 0; color: var(--steel); font-size: 14px; line-height: 1.58; }
.partnership-cta { display: flex; max-width: 340px; align-items: center; justify-content: space-between; margin-top: 40px; padding: 15px 0; border-top: 1px solid var(--signal); border-bottom: 1px solid var(--signal); color: var(--signal); font-family: var(--font-geist-mono), monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; }

footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 28px; background: #000000; color: #E8EEF1; }
.footer-brand { flex: 0 0 auto; }
footer > div { display: flex; align-items: center; justify-content: flex-end; gap: 32px; color: #9A9A9A; font-family: var(--font-ibm-plex-mono), monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.08em; white-space: nowrap; }
.map-credit a { border-bottom: 1px solid rgba(154,154,154,0.5); }

@media (max-width: 800px) {
  .site-header { height: 66px; grid-template-columns: 1fr auto; padding: 0 18px; }
  .header-cta { font-size: 9px; }
  .hero { min-height: 94svh; padding: 0; }
  .hero-copy { margin: 0 auto; padding: 0 22px 52px; }
  .domain-list { grid-template-columns: 1fr; }
  .domain-card { min-height: 240px; padding: 26px 18px; }
  .domain-main h3 { min-height: 0; margin-bottom: 14px; font-size: 17px; }
  .partnership-section { display: block; min-height: auto; }
  .partnership-image { min-height: max(320px, 62vw); }
  .partnership-content { display: block; padding: 54px 18px 62px; }
  .partnership-content h2 { font-size: 44px; }
  .partnership-copy { margin-top: 28px; }
  .partnership-cta { margin-top: 36px; }
  footer { gap: 14px; padding: 30px 18px; }
  footer .brand { gap: 8px; font-size: 12px; }
  footer > div { gap: 10px; font-size: 7px; letter-spacing: 0.04em; }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .hero-copy { padding-bottom: 68px; }
  .domain-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partnership-section { grid-template-columns: 1.12fr 1fr; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
