@font-face{font-family:"Familjen Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/familjen-grotesk-400.woff2) format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/familjen-grotesk-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2) format("woff2")}

:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --text-2:#3d3d3d;
  --muted:#707070;
  --rule:#e5e5e5;
  --on-ink:#ffffff;
  --on-ink-muted:#a8a8a8;
  --sans:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(20px,5vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
.wrap{max-width:1168px;margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}

/* links: .u draws an underline on hover, .ul is underlined and clears on hover */
.u,.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s cubic-bezier(.2,.7,.2,1)}
.u:hover,.u:focus-visible{background-size:100% 1px}
.ul{color:var(--ink);background-size:100% 1px}
.ul:hover{background-size:0 1px}
a:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;border-bottom:1px solid var(--rule)}
.brand{display:block;flex:none}
.brand img{display:block;width:40px;height:40px}
.top nav{display:flex;gap:28px;color:var(--muted)}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}

/* hero */
.hero{display:grid;gap:28px;padding:clamp(44px,9vw,120px) 0 clamp(52px,8vw,104px)}
.hero-logo{display:none}
.eyebrow{color:var(--muted);margin-bottom:22px}
h1{font-weight:700;font-size:clamp(40px,7vw,88px);line-height:.98;letter-spacing:-.035em;max-width:11.5em}
.lead{margin-top:28px;font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:var(--text-2);max-width:31em}

/* what we do */
.index{display:grid;border-top:1px solid var(--ink)}
.item{padding:24px 0 26px;border-bottom:1px solid var(--rule)}
.item:last-child{border-bottom:0}
.num{color:var(--muted)}
.item h2{font-weight:700;font-size:21px;line-height:1.25;letter-spacing:-.01em;margin:12px 0 8px}
.item p{color:var(--text-2);font-size:16.5px;max-width:30em}

/* contact band */
.contact{background:var(--ink);color:var(--on-ink);margin-top:clamp(56px,8vw,104px);scroll-margin-top:24px}
.contact-inner{padding:clamp(56px,9vw,112px) 0}
.contact .eyebrow{color:var(--on-ink-muted)}
.contact h2{font-weight:700;font-size:clamp(30px,4.6vw,54px);line-height:1.04;letter-spacing:-.03em;max-width:14em}
.contact p{margin-top:18px;color:var(--on-ink-muted);font-size:clamp(17px,1.7vw,19px);max-width:32em}
.email{display:inline-flex;align-items:baseline;gap:.4em;margin-top:36px;font-weight:700;font-size:clamp(22px,4.2vw,46px);letter-spacing:-.025em;line-height:1.15;overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;padding-bottom:6px}
.email .arrow{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.email:hover .arrow{transform:translateX(.25em)}

/* company information */
.legal{padding:clamp(48px,7vw,80px) 0 0}
.legal h2{color:var(--muted);font-weight:400;margin-bottom:18px}
.legal dl{display:grid;column-gap:40px}
.legal dl div{padding:14px 0 16px;border-top:1px solid var(--rule)}
.legal dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.legal dd{margin-top:4px;font-size:16.5px}
.base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin:28px 0 36px;padding-top:20px;border-top:1px solid var(--ink);color:var(--muted)}
.base a:hover{color:var(--ink)}

/* privacy policy page */
.doc{max-width:720px;padding:clamp(44px,8vw,96px) 0 clamp(40px,6vw,72px)}
.doc h1{font-size:clamp(40px,6.4vw,72px)}
.doc .updated{margin-top:20px;color:var(--muted)}
.doc .intro{margin-top:32px;font-size:clamp(18px,1.9vw,20px);color:var(--text-2)}
.doc h2{font-weight:700;font-size:22px;line-height:1.25;letter-spacing:-.01em;margin:48px 0 12px;padding-top:22px;border-top:1px solid var(--rule)}
.doc h2 .mono{display:block;font-weight:400;color:var(--muted);margin-bottom:10px}
.doc h3{font-weight:700;font-size:17px;margin:26px 0 4px}
.doc p,.doc ul{color:var(--text-2);margin-bottom:14px}
.doc ul{padding-left:1.15em}
.doc li{margin-bottom:6px}
.doc li::marker{color:var(--muted)}

@media (min-width:600px){
  .legal dl{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:720px){
  .index{grid-template-columns:repeat(3,1fr);column-gap:40px}
  .item{border-bottom:0;padding:26px 0 0}
}
@media (min-width:900px){
  .hero{grid-template-columns:1fr auto;align-items:end;column-gap:64px}
  .hero-logo{display:block;order:2;width:clamp(180px,20vw,232px);height:auto;aspect-ratio:1}
  .legal dl{grid-template-columns:repeat(3,1fr)}
}

/* entrance */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.r{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.14s}.d3{animation-delay:.22s}.d4{animation-delay:.30s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .r{animation:none}
  .u,.ul,.email .arrow{transition:none}
}