:root{
  --ink:#0b0d10; --ink-2:#12151a; --ink-3:#1a1e25;
  --paper:#e9e4da; --dim:#a9a294; --line:rgba(233,228,218,.13);
  --gold:#c9a962; --blue:#6ea8e8; --pink:#e84f9b;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
[id]{scroll-margin-top:84px}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.serif{font-family:'Fraunces',Georgia,serif;font-weight:400;letter-spacing:.01em}
h1,h2,h3{text-wrap:balance}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(11,13,16,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:'Fraunces',serif;font-size:1rem;letter-spacing:.07em;text-transform:uppercase;text-decoration:none}
.brand em{font-style:normal;color:var(--gold)}
.nav-links{display:flex;gap:26px;list-style:none;font-size:.85rem;letter-spacing:.04em}
.nav-links a{text-decoration:none;color:var(--dim);transition:color .2s}
.nav-links a:hover,.nav-links a.here{color:var(--paper)}
@media(max-width:680px){.nav-links{gap:16px;font-size:.78rem}}

/* type */
.kicker{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
.sec-head .n{font-family:'Fraunces',serif;color:var(--gold);font-size:.9rem;letter-spacing:.2em}
section{padding:84px 0;border-bottom:1px solid var(--line)}

/* buttons */
.btn{display:inline-block;padding:13px 26px;border-radius:2px;font-size:.86rem;letter-spacing:.06em;text-decoration:none;transition:all .2s}
.btn-solid{background:var(--paper);color:var(--ink);font-weight:600}
.btn-solid:hover{background:#fff}
.btn-ghost{border:1px solid var(--line);color:var(--paper)}
.btn-ghost:hover{border-color:var(--dim)}

/* placeholder slots — impossible to miss */
.fill{display:inline-block;border:1px dashed var(--gold);color:var(--gold);padding:0 8px;border-radius:3px;font-style:normal;white-space:nowrap;background:rgba(201,169,98,.07)}
.fill::before{content:"✎ "}

/* cards & media */
.card-img{border-radius:4px;overflow:hidden;background:var(--ink-2);border:1px solid var(--line)}
.card-img img,.card-img video{width:100%}
figcaption{margin-top:10px;font-size:.78rem;color:var(--dim);letter-spacing:.04em}
.shot-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
@media(max-width:760px){.shot-grid{grid-template-columns:1fr}}

/* proof bar */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:44px}
@media(max-width:820px){.proof{grid-template-columns:1fr 1fr}}
.proof div{background:var(--ink-2);padding:22px 20px}
.proof b{display:block;font-family:'Fraunces',serif;font-weight:400;font-size:1.7rem;margin-bottom:4px}
.proof span{font-size:.78rem;color:var(--dim);letter-spacing:.05em;text-transform:uppercase}

/* timeline chapters */
.chapter{display:grid;grid-template-columns:190px 1fr;gap:28px;padding:30px 0;border-top:1px solid var(--line)}
.chapter:last-child{border-bottom:1px solid var(--line)}
@media(max-width:680px){.chapter{grid-template-columns:1fr;gap:8px}}
.chapter .when{font-family:'Fraunces',serif;color:var(--gold);font-size:.95rem}
.chapter h3{font-size:1.35rem;margin-bottom:6px}
.chapter p{color:var(--dim);max-width:64ch}
.chapter .role{font-size:.85rem;color:var(--paper);letter-spacing:.03em}

/* footer / contact */
.contact{text-align:center;padding:100px 24px;border-bottom:none}
.contact h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:14px}
.contact p{color:var(--dim);margin-bottom:30px}
.email{font-family:'Fraunces',serif;font-size:clamp(1.15rem,2.6vw,1.7rem);color:var(--paper);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:4px}
.email:hover{color:var(--gold)}
footer{padding:30px 24px;text-align:center;font-size:.76rem;color:var(--dim);letter-spacing:.06em}

/* case studies */
.case{padding:84px 0;border-bottom:1px solid var(--line)}
.case-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.case-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.case-meta{font-size:.82rem;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.case .lede{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:300;line-height:1.5;max-width:62ch;margin:14px 0 8px;color:var(--paper)}
.case .body{color:var(--dim);max-width:70ch;margin-top:10px}
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.tag{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);color:var(--dim);padding:5px 12px;border-radius:999px}
.note{border-left:2px solid var(--gold);padding:10px 18px;margin-top:22px;color:var(--dim);font-size:.9rem;max-width:64ch}