:root{--black:#111;--paper:#fcfcfc;--clay:#d9cfc7;--grey:#8a8a8a;--line:#e3e3e3}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--black);
  font:400 16px/1.62 "Space Grotesk",-apple-system,Segoe UI,sans-serif;
  letter-spacing:-.006em}
img{max-width:100%;display:block;height:auto}
h1,h2,h3{font-weight:500;line-height:1.06;margin:0 0 .5em;letter-spacing:-.032em;
  text-transform:lowercase}
h1{font-size:clamp(2.6rem,6.4vw,5rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
h3{font-size:1.12rem;letter-spacing:-.018em}
p{margin:0 0 1.1em;max-width:56ch}
a{color:var(--black)}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  margin:0 0 20px;display:block}

/* ---- header: hairline, tiny nav ---- */
.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
.brand img{width:168px}
nav ul{display:flex;list-style:none;gap:26px;margin:0;padding:0;flex-wrap:wrap}
nav a{font-size:13px;letter-spacing:-.01em;text-decoration:none;color:var(--grey)}
nav a:hover,nav a:focus-visible{color:var(--black)}
nav a[aria-current]{color:var(--black);text-decoration:underline;text-underline-offset:5px;
  text-decoration-color:var(--clay);text-decoration-thickness:2px}

/* ---- strict visible 12-column grid ---- */
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:0}
.row{border-top:1px solid var(--line)}
.cell{padding:52px 32px 52px 0;border-right:1px solid var(--line)}
.cell:last-child{border-right:0;padding-right:0}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}
.c9{grid-column:span 9}.c12{grid-column:span 12}
.hero{padding:104px 0 88px}
.pad{padding:80px 0}
.tight{padding:48px 0}
.lede{font-size:1.18rem;line-height:1.5;color:var(--grey);max-width:46ch}

/* ---- numbered items ---- */
.item{border-top:1px solid var(--line);padding:28px 0;display:grid;
  grid-template-columns:64px 1fr;gap:24px;align-items:start}
.item .n{font-size:11px;letter-spacing:.16em;color:var(--grey);padding-top:4px}
.item h3{margin:0 0 .5em}
.item p{margin:0;color:var(--grey)}

/* ---- image slots ---- */
.slot{margin:0;position:relative;aspect-ratio:var(--ratio,4/3);overflow:hidden;
  background:var(--clay);border:0}
.slot img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12)}
.slot::after{content:attr(data-slot);position:absolute;inset:auto 0 12px 0;text-align:center;
  font-size:10px;letter-spacing:.24em;color:#a89b91}
.slot:has(img)::after{display:none}
.grid-img{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.grid-img .slot{--ratio:3/4}

/* ---- quote ---- */
.q{border-top:1px solid var(--black);padding-top:24px}
.q p{font-size:1.5rem;line-height:1.28;letter-spacing:-.024em;margin-bottom:.8em;
  max-width:34ch}
.q cite{font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey)}

/* ---- buttons / forms ---- */
.btn{display:inline-block;font-size:13px;letter-spacing:.02em;text-decoration:none;
  color:var(--paper);background:var(--black);padding:15px 26px;border:1px solid var(--black)}
.btn:hover,.btn:focus-visible{background:var(--paper);color:var(--black)}
.btn.o{background:transparent;color:var(--black)}
.btn.o:hover{background:var(--black);color:var(--paper)}
form label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin:0 0 8px}
form input,form textarea,form select{width:100%;font:400 15px/1.55 "Space Grotesk",sans-serif;
  padding:12px 0;border:0;border-bottom:1px solid var(--line);background:transparent;
  color:var(--black);margin-bottom:26px;border-radius:0}
form input:focus,form textarea:focus,form select:focus{outline:none;
  border-bottom-color:var(--black)}
form textarea{border:1px solid var(--line);padding:12px}
.ok{border:1px solid var(--black);padding:16px 20px;margin-bottom:26px;font-size:14px}

/* ---- faq ---- */
.qa{border-top:1px solid var(--line);padding:26px 0;display:grid;
  grid-template-columns:1fr 1.5fr;gap:32px}
.qa h3{margin:0}
.qa p{margin:0;color:var(--grey)}

/* ---- footer ---- */
footer{border-top:1px solid var(--black);margin-top:0;padding:56px 0 44px}
footer h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  margin:0 0 16px;font-weight:400}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:8px;font-size:14px}
footer a{color:var(--black);text-decoration:none}
footer a:hover,footer a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.fine{border-top:1px solid var(--line);margin-top:44px;padding-top:22px;font-size:12px;
  color:var(--grey);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;position:fixed;z-index:99;background:var(--black);
  color:var(--paper);padding:12px 18px}

@media(max-width:960px){
  .c3,.c4,.c5,.c6,.c7,.c8,.c9{grid-column:span 12}
  .cell{border-right:0;border-bottom:1px solid var(--line);padding:36px 0}
  .cell:last-child{border-bottom:0}
  .wrap{padding:0 22px}
  .hero{padding:60px 0 48px}
  .pad{padding:48px 0}
  .grid-img{grid-template-columns:repeat(2,1fr)}
  .qa{grid-template-columns:1fr;gap:12px}
  nav ul{gap:16px}
}