:root{
  --ink:#333333; --black:#141414; --brass:#9A7B4F;
  --sand:#F6F1E7; --stone:#7D776C; --line:#D8D0C2;
  --page:#FBF9F5;
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --body:"Jost","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}

/* ---------- shared type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;letter-spacing:.01em}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--brass);font-weight:400;margin:0 0 22px}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.85;color:#4a4a4a;font-weight:300}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(251,249,245,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:20px 0}
.brand img{height:34px;width:auto;max-width:100%}
.brand .stack{display:none}
nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0}
nav a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stone);padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s}
nav a:hover,nav a[aria-current]{color:var(--ink);border-color:var(--brass)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;
  font:inherit;color:var(--ink)}
.burger span{display:block;width:24px;height:1px;background:var(--ink);margin:6px 0}

/* ---------- hero ---------- */
.hero{padding:clamp(80px,13vw,170px) 0 clamp(60px,9vw,110px);text-align:center}
.hero .mark{max-width:min(620px,86vw);margin:0 auto clamp(38px,6vw,60px)}
.hero h1{font-size:clamp(30px,4.4vw,60px);line-height:1.28;font-style:italic;
  max-width:15ch;margin:0 auto}
.hero p{margin:30px auto 0;max-width:56ch}
.scroll{margin-top:clamp(50px,8vw,84px);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--stone)}

/* ---------- sections ---------- */
section{padding:clamp(64px,9vw,120px) 0}
.sec-head{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:clamp(40px,6vw,66px)}
.sec-head h2{font-size:clamp(24px,3.1vw,40px);line-height:1.34}
.band{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dark{background:var(--black);color:var(--sand)}
.dark h2,.dark h3{color:var(--sand)}
.dark .lede{color:#c8c2b6}
.dark .rule{background:#3a3630}

/* ---------- pillars / grids ---------- */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.cell{background:var(--page);padding:clamp(26px,3.4vw,44px)}
.band .cell{background:var(--sand)}
.cell h3{font-size:20px;margin-bottom:12px}
.cell p{margin:0;font-size:14.5px;line-height:1.8;color:#57534d}
.num{font-family:var(--display);font-size:12px;color:var(--brass);
  display:block;margin-bottom:16px;letter-spacing:.1em}

/* ---------- record ---------- */
.record{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:1px;
  background:#3a3630;border:1px solid #3a3630}
.record div{background:var(--black);padding:clamp(30px,4vw,52px) 14px}
.record b{font-family:var(--display);font-size:clamp(34px,5vw,60px);
  font-weight:400;display:block;line-height:1;color:var(--sand)}
.record span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:#9d968a;margin-top:14px;display:block}

/* ---------- work ---------- */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
.tile{background:var(--sand);border:1px solid var(--line)}
.tile .ph{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#efe9dd,#e3dbcb);color:#b3a992;
  font-family:var(--display);font-size:38px;font-style:italic}
.tile .cap{padding:20px 22px 24px}
.tile h3{font-size:17px;margin-bottom:6px}
.tile .meta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}

/* ---------- clients ---------- */
.clients{columns:3;column-gap:clamp(24px,4vw,60px);list-style:none;margin:0;padding:0}
.clients li{break-inside:avoid;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:14px;color:#57534d}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.team div{background:var(--page);padding:26px 24px}
.team b{font-family:var(--display);font-size:19px;font-weight:400;display:block}
.team span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass);margin-top:8px;display:block}

/* ---------- lineage ---------- */
.lineage{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(20px,4vw,48px);text-align:center}
.lineage .node{padding:clamp(24px,3vw,38px);border:1px solid var(--line);background:var(--sand)}
.lineage .node b{font-family:var(--display);font-size:clamp(17px,2vw,23px);
  font-weight:400;display:block;letter-spacing:.06em}
.lineage .node span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stone);margin-top:10px;display:block}
.lineage .link{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px)}
.field{margin-bottom:26px}
.field label{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--stone);margin-bottom:9px}
.field input,.field textarea{width:100%;border:0;border-bottom:1px solid var(--line);
  background:transparent;padding:10px 0;font:inherit;font-size:15px;color:var(--ink)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--brass)}
.btn{display:inline-block;margin-top:10px;padding:15px 42px;background:var(--ink);
  color:var(--sand);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  border:0;cursor:pointer;font-family:var(--body);transition:background .25s}
.btn:hover{background:var(--brass)}
.detail{margin-bottom:32px}
.detail dt{font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass);margin-bottom:10px}
.detail dd{margin:0;font-size:15px;line-height:1.85;color:#4a4a4a}

/* ---------- footer ---------- */
footer{background:var(--black);color:#9d968a;padding:clamp(56px,7vw,86px) 0 34px;
  font-size:13px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(28px,5vw,64px);
  padding-bottom:44px;border-bottom:1px solid #322e29}
footer img{height:44px;margin-bottom:22px}
footer h4{font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sand);margin:0 0 16px;font-weight:400;font-family:var(--body)}
footer a:hover{color:var(--sand)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
.fbot{display:flex;justify-content:space-between;gap:20px;padding-top:26px;
  font-size:11px;letter-spacing:.06em;flex-wrap:wrap}
.endorse{color:#6f6960;font-size:12px;line-height:1.8;max-width:38ch}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .g3,.work{grid-template-columns:repeat(2,1fr)}
  .clients{columns:2}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .burger{display:block}
  nav{position:fixed;inset:69px 0 auto;background:var(--page);
    border-bottom:1px solid var(--line);transform:translateY(-120%);
    transition:transform .35s ease;padding:10px 0 26px}
  nav[data-open]{transform:translateY(0)}
  nav ul{flex-direction:column;gap:0;padding:0 var(--gut)}
  nav li{border-bottom:1px solid var(--line)}
  nav a{display:block;padding:17px 0;font-size:13px}
  .g3,.g2,.work,.contact,.record,.fgrid,.team{grid-template-columns:1fr}
  .clients{columns:1}
  .lineage{grid-template-columns:1fr}
  .lineage .link{padding:10px 0}
  .hero h1{max-width:none}
  /* the horizontal mark is ~14:1 and overflows narrow viewports */
  .brand .wide{display:none}
  .brand .stack{display:block;height:38px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}