:root { --ink:#11130f; --paper:#f5f5ed; --acid:#d9ff43; --blue:#2930ff; }
* { box-sizing:border-box; }
html { max-width:100%; overflow-x:clip; scroll-behavior:smooth; }
body { margin:0; min-width:320px; max-width:100%; overflow-x:clip; background:var(--ink); color:var(--paper); }
a { color:inherit; text-decoration:none; }

.site { width:100%; max-width:100vw; min-height:100vh; overflow:hidden; background:var(--ink); font-family:Arial,Helvetica,sans-serif; }
.site-header { display:flex; align-items:flex-start; justify-content:space-between; padding:28px 4vw; border-bottom:1px solid #4a4d44; font-size:12px; line-height:1.45; letter-spacing:.08em; text-transform:uppercase; }
.brand { display:flex; align-items:center; gap:14px; font-weight:700; }
.brand-mark { display:grid; place-items:center; width:45px; height:45px; color:var(--ink); background:var(--acid); font-size:17px; letter-spacing:-.08em; transform:rotate(-4deg); }
.site-header>p { margin:3px 0 0; text-align:right; opacity:.62; }

.hero { width:100%; max-width:100%; min-height:720px; padding:72px 4vw 44px; position:relative; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:8.333vw 8.333vw; }
.eyebrow { margin:0 0 28px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.hero h1 { width:100%; max-width:1180px; margin:0; font-size:clamp(3.8rem,8.6vw,8rem); line-height:.85; letter-spacing:-.07em; font-weight:900; }
.hero h1 em { color:var(--acid); font-style:normal; }
.hero-footer { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-top:58px; }
.hero-footer p { max-width:520px; margin:0; color:#c3c6bc; font-size:18px; line-height:1.5; }
.hero-footer a { display:flex; align-items:center; justify-content:space-between; gap:25px; min-width:225px; padding:18px 0; border-top:1px solid #777b70; font-size:13px; font-weight:700; text-transform:uppercase; }

.products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); color:var(--ink); background:var(--acid); border-top:1px solid var(--ink); }
.products>a { min-width:0; min-height:450px; padding:30px; position:relative; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--ink); transition:background .2s,color .2s; }
.products>a:last-child { border-right:0; }
.products>a:hover { color:var(--paper); background:var(--blue); }
.product-top,.product-link { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.product-logo-wrap { display:grid; place-items:center; width:72px; height:56px; }
.product-logo { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.product-logo-ravens { max-width:78%; max-height:78%; }
.product-logo-dive { transform:rotate(-16deg); }
.product-copy { position:relative; z-index:1; }
.products h2 { max-width:8ch; margin:0 0 20px; font-size:clamp(2.3rem,4vw,4.5rem); line-height:.9; letter-spacing:-.06em; text-transform:uppercase; }
.products p { max-width:32ch; margin:0; font-size:16px; line-height:1.5; }
.product-index { position:absolute; right:24px; bottom:38px; font-size:7rem; font-weight:900; letter-spacing:-.08em; opacity:.08; }
.product-link { position:relative; z-index:1; }
.product-link .arrow { display:inline-block; font-size:1.5rem; line-height:1; transform:rotate(-45deg); }
.site-footer { display:flex; justify-content:space-between; padding:25px 4vw; color:#aeb1a7; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }

@media (max-width:800px) {
  .site-header { padding:22px 20px; }
  .site-header>p { display:none; }
  .hero { min-height:660px; padding:62px 20px 38px; background-size:25vw 25vw; }
  .hero h1 { font-size:clamp(2.25rem,11.5vw,5.8rem); }
  .hero-footer { align-items:stretch; flex-direction:column; }
  .products { grid-template-columns:1fr; }
  .products>a { min-height:390px; border-right:0; border-bottom:1px solid var(--ink); }
  .site-footer { padding:22px 20px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; }
}