@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-tight-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-tight-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-tight-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-tight-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-mono-latin-500-normal.woff2) format("woff2")}

:root{
    --bg:#FFFFFF; --ink:#0A0A0A; --ink-2:#5C5C5C; --ink-3:#9A9A9A; --line:#E4E4E4;
    --dark-bg:#000000; --dark-ink:#FFFFFF; --dark-ink-2:#A3A3A3; --dark-ink-3:#5E5E5E; --dark-line:#262626;
    --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
    --display:"Inter Tight","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
    --mono:"DM Mono",ui-monospace,Menlo,monospace;
  }
  *{box-sizing:border-box}
  html{color-scheme:light}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;letter-spacing:0;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  a:focus-visible,button:focus-visible,input:focus-visible{outline:1.5px solid currentColor;outline-offset:3px}
  .wrap{max-width:1400px;margin:0 auto;padding:0 clamp(20px,4vw,64px)}
  .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
  .mono.lab::before{content:"[ "}.mono.lab::after{content:" ]"}

  /* dark band */
  .dark{background:var(--dark-bg);color:var(--dark-ink);--ink:var(--dark-ink);--ink-2:var(--dark-ink-2);--ink-3:var(--dark-ink-3);--line:var(--dark-line)}

  /* nav */
  header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
  .mark{display:flex;align-items:center;color:var(--ink)}
  .logo{height:15px;width:auto;display:block}
  footer .logo{height:11px;position:relative;top:1px}
  nav{display:flex;align-items:center;gap:34px;color:var(--ink-2)}
  nav a:hover{color:var(--ink)}
  nav .btn{color:var(--ink);border:1px solid var(--ink);padding:9px 14px}
  nav .btn:hover{background:var(--ink);color:#fff}
  @media(max-width:700px){nav a:not(.btn){display:none}}

  /* hero */
  .hero{padding:clamp(72px,11vw,150px) 0 clamp(56px,7vw,96px)}
  .hero h1{font-family:var(--display);font-weight:600;font-size:clamp(60px,11.5vw,176px);line-height:.95;letter-spacing:-.02em;margin:22px 0 0;text-wrap:balance;max-width:10ch}
  .hero .row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;margin-top:clamp(40px,6vw,88px);align-items:end}
  @media(max-width:800px){.hero .row{grid-template-columns:1fr}}
  .hero .sub{font-size:clamp(18px,1.6vw,22px);line-height:1.5;letter-spacing:0;color:var(--ink);max-width:34ch;margin:0}
  .cta{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--ink)}
  .cta a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
  .cta a span{color:var(--ink-3)}
  .cta a:hover span{color:var(--ink)}

  /* sections */
  section{padding:clamp(72px,9vw,128px) 0}
  section + section{border-top:1px solid var(--line)}
  .dark section{border-top-color:var(--dark-line)}
  .head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:end}
  @media(max-width:800px){.head{grid-template-columns:1fr;gap:20px}}
  .head .mono{color:var(--ink-3)}
  h2{font-family:var(--display);font-weight:600;font-size:clamp(34px,4.6vw,68px);line-height:1.05;letter-spacing:-.015em;margin:0;text-wrap:balance}
  .lead{font-size:clamp(19px,1.8vw,24px);line-height:1.45;letter-spacing:0;max-width:38ch;margin:0}
  .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
  .grid3>div{padding:28px 32px 36px 0;border-bottom:1px solid var(--line)}
  @media(min-width:800px){.grid3>div+div{border-left:1px solid var(--line);padding-left:32px}}
  .grid3 .mono{color:var(--ink-3);display:block;margin-bottom:22px}
  .grid3 h3{font-weight:600;font-size:22px;letter-spacing:-.005em;line-height:1.25;margin:0 0 12px}
  .grid3 p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.6;max-width:36ch}

  /* specs table */
  .specs{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
  .specs div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
  .specs .mono{color:var(--ink-3)}
  .specs b{font-weight:500;letter-spacing:0;font-size:18px}

  /* two column */
  .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,5vw,80px);margin-top:clamp(40px,5vw,72px)}
  .two h3{font-family:var(--display);font-weight:600;font-size:clamp(26px,2.8vw,40px);letter-spacing:-.01em;line-height:1.12;margin:0 0 20px}
  .two p{margin:0;color:var(--ink-2);max-width:46ch;font-size:17px}
  .dark .two p{color:var(--dark-ink-2)}
  .dark button{color:#000}

  /* cards */
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:clamp(40px,5vw,72px)}
  .card{border:1px solid var(--line);padding:24px;min-height:210px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .2s}
  .card:hover{border-color:var(--ink)}
  .card .mono{color:var(--ink-3)}
  .card h4{font-weight:600;font-size:20px;letter-spacing:-.005em;line-height:1.3;margin:0}
  .card.ph h4{color:var(--ink-3)}
  .links{margin-top:28px;display:flex;gap:32px}
  .links a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}

  /* contact */
  form{display:grid;gap:22px;max-width:520px;margin-top:36px}
  label{display:grid;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  input{border:0;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);font:400 17px var(--sans);letter-spacing:0;padding:8px 0;border-radius:0}
  input::placeholder{color:var(--ink-3)}
  button{justify-self:start;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:14px 22px;background:var(--ink);color:#fff;border:0;cursor:pointer}
  .side p{color:var(--ink-2);max-width:40ch;margin:0 0 16px}
  .side .mail{font-family:var(--display);font-size:clamp(22px,2.4vw,32px);font-weight:600;letter-spacing:-.01em;border-bottom:1.5px solid var(--ink)}

  /* about */
  .about-top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,72px);align-items:start;margin-top:36px}
  @media(max-width:800px){.about-top{grid-template-columns:1fr}}
  .photo{display:block;width:100%;max-width:380px;height:auto;aspect-ratio:4/5;object-fit:cover;background:#F2F2F2}
  .photo .mono{color:var(--ink-3)}
  .bio p{color:var(--ink-2);max-width:60ch;margin:0 0 18px;font-size:17px}
  .bio p:first-child{color:var(--ink);font-size:clamp(20px,2vw,25px);letter-spacing:0;line-height:1.45}
  .kit{margin-top:48px;border-top:1px solid var(--line)}
  .kit>div{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
  @media(max-width:800px){.kit>div{grid-template-columns:1fr;gap:8px}}
  .kit .mono{color:var(--ink-3)}
  .kit p{margin:0;color:var(--ink-2);font-size:16px;max-width:70ch}

  footer{border-top:1px solid var(--line);padding:40px 0 56px;color:var(--ink-3)}
  footer .row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px;align-items:center}
  footer .row div{display:flex;gap:28px;flex-wrap:wrap}
  footer a:hover{color:var(--ink)}
  footer small{display:block;max-width:80ch;font-size:12px;line-height:1.6;color:var(--ink-3);margin-top:8px}


  @media(prefers-reduced-motion:no-preference){
    .hero>.wrap>*{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
    .hero>.wrap>*:nth-child(2){animation-delay:.08s}.hero>.wrap>*:nth-child(3){animation-delay:.18s}.hero>.wrap>*:nth-child(4){animation-delay:.3s}
    @keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  }

  .h2-wide{font-size:clamp(30px,3.8vw,56px);max-width:none}
  section[hidden]{display:none}
  .head > .lead{margin-bottom:-.3em}