:root{
  --paper:#E7E3DF;
  --paper-2:#DCD7D1;
  --ink:#16120F;
  --ink-soft:#2A2320;
  --muted:#736A62;
  --rule:rgba(22,18,15,.14);
  --accent:#A8492A;
  --pad:clamp(1.25rem,5vw,5.5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--paper);color:var(--ink);
  font-size:17px;line-height:1.6;font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
/* paper grain */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* ── type ── */
h1,h2,h3{font-weight:400;letter-spacing:-.032em;line-height:1.0}
.h-xl{font-size:clamp(2.9rem,8.4vw,6.75rem)}
.h-lg{font-size:clamp(2.1rem,4.8vw,3.9rem);line-height:1.02}
.h-md{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.08;letter-spacing:-.026em}
.lede{font-size:clamp(1.02rem,1.35vw,1.28rem);line-height:1.5;color:var(--muted);max-width:42ch;font-weight:400}
.eyebrow{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;font-weight:500;
  color:var(--muted);display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:'';width:1.4rem;height:1px;background:var(--accent);flex:none}
.slash{color:var(--accent);font-weight:300}

/* ── layout ── */
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--pad)}
.band{padding-block:clamp(4.5rem,10vw,9rem)}
.band-dark{background:var(--ink);color:var(--paper)}
.band-dark .lede,.band-dark .eyebrow{color:rgba(231,227,223,.62)}
.rule{height:1px;background:var(--rule);border:0}
.band-dark .rule{background:rgba(231,227,223,.14)}

/* ── nav ── */
.nav{
  position:sticky;top:0;z-index:100;background:rgba(231,227,223,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--rule);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:70px}
.brand{display:flex;align-items:baseline;gap:.5rem;font-size:1.18rem;font-weight:500;letter-spacing:-.03em}
.brand small{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.nav-links{display:flex;gap:2.1rem;font-size:.94rem;color:var(--ink-soft)}
.nav-links a{position:relative;padding-block:.2rem}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ink);transition:width .32s cubic-bezier(.4,0,.2,1)}
.nav-links a:hover::after{width:100%}
@media(max-width:900px){.nav-links{display:none}}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.7rem;border-radius:999px;
  font-size:.95rem;font-weight:500;letter-spacing:-.01em;transition:all .28s cubic-bezier(.4,0,.2,1);
  border:1px solid transparent;white-space:nowrap;
}
.btn-fill{background:var(--ink);color:var(--paper)}
.btn-fill:hover{background:var(--accent);transform:translateY(-2px)}
.btn-line{border-color:var(--rule);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);background:rgba(22,18,15,.04)}
.band-dark .btn-fill{background:var(--paper);color:var(--ink)}
.band-dark .btn-fill:hover{background:var(--accent);color:var(--paper)}
.band-dark .btn-line{border-color:rgba(231,227,223,.25);color:var(--paper)}
.band-dark .btn-line:hover{border-color:var(--paper);background:rgba(231,227,223,.06)}

/* ── hero ── */
.hero{padding-top:clamp(3rem,7vw,6rem);padding-bottom:clamp(2rem,4vw,3.5rem)}
.hero h1{max-width:19ch}
.hero-foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:2.2rem;margin-top:clamp(2rem,4vw,3.2rem)
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-meta{display:flex;gap:2.4rem;font-size:.9rem;color:var(--muted)}
.hero-meta b{display:block;font-size:1.5rem;font-weight:400;color:var(--ink);letter-spacing:-.03em;margin-bottom:.15rem}

/* ── reel ── */
.reel{position:relative;margin-top:clamp(2.2rem,5vw,4rem);border-radius:.4rem;overflow:hidden;background:var(--ink);aspect-ratio:16/9}
.reel video{width:100%;height:100%;object-fit:cover}
.reel-tag{
  position:absolute;left:1rem;bottom:1rem;display:flex;gap:.45rem;flex-wrap:wrap;
}
.chip{
  background:rgba(231,227,223,.92);color:var(--ink);font-size:.72rem;font-weight:500;
  padding:.42rem .85rem;border-radius:999px;letter-spacing:-.005em;
}
/* no mp4 is attached below 901px or under reduced motion, so fall back to the poster
   as a background rather than trusting an empty <video> to paint it */
@media(prefers-reduced-motion:reduce),(max-width:900px){
  .reel video{display:none}
  .reel{background:var(--ink) url('vd-reel-poster-v2.webp') center/cover}}

/* ── marquee trust ── */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 2.6rem;font-size:.95rem;color:var(--muted)}
.trust span:not(.dot){color:var(--ink-soft)}
.dot{width:3px;height:3px;border-radius:50%;background:var(--rule);flex:none}

/* ── work ── */
.work-item{padding-block:clamp(2.6rem,5vw,4.2rem);border-top:1px solid rgba(231,227,223,.14)}
.work-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.6rem}
.work-num{font-size:.82rem;letter-spacing:.14em;color:rgba(231,227,223,.4)}
.work-media{position:relative;border-radius:.35rem;overflow:hidden;background:var(--ink);display:block;aspect-ratio:16/9}
.work-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.work-item:hover .work-media img{transform:scale(1.028)}
.work-body{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin-top:1.5rem;align-items:start}
.work-body p{color:rgba(231,227,223,.66);max-width:52ch}
.work-list{list-style:none;display:grid;gap:.6rem;font-size:.93rem;color:rgba(231,227,223,.8)}
.work-list li{display:flex;gap:.7rem}
.work-list li::before{content:'/';color:var(--accent);flex:none}
@media(max-width:820px){.work-body{grid-template-columns:1fr;gap:1.4rem}}

/* ── steps ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3rem);margin-top:3rem}
.step{border-top:1px solid var(--rule);padding-top:1.4rem}
.step-n{font-size:.82rem;letter-spacing:.14em;color:var(--accent);margin-bottom:1rem}
.step h3{font-size:1.28rem;margin-bottom:.6rem;letter-spacing:-.025em}
.step p{font-size:.95rem;color:var(--muted)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* ── price ── */
.price{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.price-fig{font-size:clamp(3.4rem,8vw,6rem);line-height:.94;letter-spacing:-.045em;font-weight:300}
.price-fig sup{font-size:.34em;vertical-align:super;letter-spacing:0;font-weight:400;margin-right:.1em}
/* the range qualifier riding the big figure. --muted is a paper-band token and drops
   to 3.46:1 on ink, so supporting text inside band-dark tints from the paper instead. */
.price-unit{font-size:.26em;letter-spacing:0;color:rgba(231,227,223,.72);font-weight:400}
.price-sub{font-size:1.05rem;color:var(--muted);margin-top:.9rem;max-width:46ch}
.band-dark .price-sub{color:rgba(231,227,223,.72)}
.price-list{list-style:none;display:grid;gap:.85rem;font-size:1rem}
.price-list li{display:flex;gap:.85rem;align-items:baseline;padding-bottom:.85rem;border-bottom:1px solid var(--rule)}
.price-list li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;transform:translateY(-3px)}
@media(max-width:820px){.price{grid-template-columns:1fr}}

/* ── about ── */
/* set as a signed letter: the copy holds the wide column, the direct line holds the
   narrow one. no portrait, so the person is made present by voice and by the number
   being large enough to read as the point rather than as a footnote. */
.about{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:2.6rem}
.about-body{margin-top:1.4rem;max-width:56ch;color:var(--muted)}
.direct{border-top:1px solid var(--rule);padding-top:1.4rem}
.direct-num{
  display:block;margin-top:1.1rem;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.08;
  letter-spacing:-.026em;color:var(--ink);border-bottom:1px solid var(--rule);
  padding-bottom:.5rem;width:fit-content;transition:color .3s,border-color .3s;
}
.direct-num:hover{color:var(--accent);border-bottom-color:var(--accent)}
.direct-note{margin-top:1.1rem;font-size:.9rem;color:var(--muted);max-width:30ch}
/* signs the section the way the wordmark signs the page. lives in the copy column,
   not the figure, so it survives when no portrait has been supplied yet. */
.signature{
  display:flex;align-items:center;gap:.7rem;margin-top:1.8rem;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;font-weight:500;color:var(--ink);
}
/* single column when the portrait is absent or the viewport is narrow */
@media(max-width:820px){.about{grid-template-columns:1fr;gap:2.4rem}}

/* ── faq ── */
.faq{display:grid;gap:0;margin-top:2.5rem;max-width:900px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.5rem 0;font-size:1.12rem;letter-spacing:-.02em;
  display:flex;justify-content:space-between;gap:2rem;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.4rem;color:var(--muted);font-weight:300;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding-bottom:1.6rem;color:var(--muted);max-width:64ch;font-size:1rem}

/* ── contact ── */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
@media(max-width:820px){.contact{grid-template-columns:1fr}}
.field{display:grid;gap:.45rem;margin-bottom:1.1rem}
.field label{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(231,227,223,.55)}
.field input,.field textarea{
  background:transparent;border:0;border-bottom:1px solid rgba(231,227,223,.22);
  padding:.75rem 0;color:var(--paper);font:inherit;font-size:1rem;transition:border-color .3s;
}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:rgba(231,227,223,.3)}

/* ── footer ── */
.foot{padding-block:3rem;font-size:.9rem;color:var(--muted)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.4rem}
.foot a:hover{color:var(--ink)}

/* ── reveal ── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── legal / prose pages ── */
.prose{max-width:72ch;margin-top:2.6rem}
.prose h2{font-size:clamp(1.25rem,2.1vw,1.65rem);letter-spacing:-.025em;margin-top:2.6rem;margin-bottom:.8rem}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--muted);font-size:1rem;margin-bottom:.9rem}
.prose ul{padding-left:1.1rem;margin-bottom:1.2rem}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose strong{color:var(--ink);font-weight:500}
.updated{font-size:.82rem;color:var(--muted);letter-spacing:.04em}
.notice{border-left:2px solid var(--accent);padding:.2rem 0 .2rem 1.1rem;margin:2rem 0}
.notice p{margin-bottom:0;font-size:.95rem}

/* ── pinned work ── */
.pin{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,4.5rem);margin-top:3.4rem;align-items:start}
.pin-media{position:sticky;top:110px}
.pin-stage{position:relative;aspect-ratio:16/9;border-radius:.35rem;overflow:hidden;background:var(--ink)}
.pin-shot{position:absolute;inset:0;opacity:0;transition:opacity .7s cubic-bezier(.4,0,.2,1);display:block}
.pin-shot.is-on{opacity:1}
.pin-shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.4,0,.2,1)}
.pin-shot.is-on img{transform:scale(1.012)}
.pin-panel{min-height:78vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.28;transition:opacity .55s ease}
.pin-panel.is-on{opacity:1}
.pin-panel .work-num{display:block;margin-bottom:1rem}
/* per-panel screenshot: the pinned stage owns the image on desktop, each panel owns
   its own below 900px (the sticky stage scrolls away before the copy is read there) */
.panel-shot{display:none}
.pin-panel h3{margin-bottom:1rem}
.pin-panel p{color:rgba(231,227,223,.66);max-width:46ch;margin-bottom:1.5rem}
.work-link{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.7rem;font-size:.95rem;
  border-bottom:1px solid var(--rule);padding-bottom:.35rem;width:fit-content;
  transition:border-color .3s,color .3s;
}
.band-dark .work-link{border-bottom-color:rgba(231,227,223,.28)}
.work-link::after{content:'→';transition:transform .3s}
.work-link:hover{border-color:var(--accent);color:var(--accent)}
.work-link:hover::after{transform:translateX(4px)}
@media(max-width:900px){
  .pin{grid-template-columns:1fr;gap:0}
  /* the sticky stage cannot work stacked: it scrolls off before any panel is read,
     and the swap observer never re-fires. hand the image to each panel instead. */
  .pin-media{display:none}
  .pin-panel{min-height:0;opacity:1;padding-block:2.2rem;border-top:1px solid rgba(231,227,223,.14)}
  .pin-panel:first-child{border-top:0}
  .panel-shot{
    display:block;position:relative;aspect-ratio:16/9;border-radius:.35rem;
    overflow:hidden;background:var(--ink);margin-bottom:1.6rem;
  }
  .panel-shot img{width:100%;height:100%;object-fit:cover}
}

/* ── h1 line mask ── */
.split .ln{display:block;overflow:hidden}
.split .ln > span{display:block;transform:translateY(105%);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.split.lit .ln > span{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .split .ln > span{transform:none;transition:none}
  .pin-panel{opacity:1}
  .pin-shot{transition:none}
}

/* ── case study ── */
.case-meta{display:flex;flex-wrap:wrap;gap:2.6rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--rule)}
.case-meta div{font-size:.95rem}
.case-meta dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:.4rem}
.case-meta dd{color:var(--ink)}
.case-shot{margin-block:clamp(2.5rem,6vw,5rem);border-radius:.35rem;overflow:hidden;background:var(--ink)}
.case-body{max-width:68ch}
.case-body h2{font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.028em;margin-top:3.2rem;margin-bottom:1rem}
.case-body h2:first-child{margin-top:0}
.case-body p{color:var(--muted);margin-bottom:1.1rem}
.case-body strong{color:var(--ink);font-weight:500}
.band-dark .case-body p{color:rgba(231,227,223,.66)}
.band-dark .case-body strong{color:var(--paper)}
.pull{font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.25;letter-spacing:-.025em;color:var(--ink);
  border-left:2px solid var(--accent);padding-left:1.6rem;margin-block:2.6rem;max-width:24ch}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.6rem;margin-top:2.4rem}
.spec div{border-top:1px solid var(--rule);padding-top:1rem}
.band-dark .spec div{border-top-color:rgba(231,227,223,.16)}
.spec h3{font-size:1rem;font-weight:500;letter-spacing:-.015em;margin-bottom:.4rem}
.spec p{font-size:.9rem;color:var(--muted);margin:0}
.band-dark .spec p{color:rgba(231,227,223,.6)}

/* ── journal list ── */
.jrnl-list{display:grid;gap:0;margin-top:2.8rem}
.jrnl{display:block;padding-block:1.9rem;border-top:1px solid var(--rule);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.jrnl:last-child{border-bottom:1px solid var(--rule)}
.jrnl:hover{transform:translateX(.7rem)}
.jrnl h2{font-size:clamp(1.25rem,2.1vw,1.65rem);letter-spacing:-.025em;margin-bottom:.5rem}
.jrnl p{color:var(--muted);font-size:.98rem;max-width:62ch;margin-bottom:.7rem}
.jrnl-go{font-size:.9rem;color:var(--muted);border-bottom:1px solid var(--rule);padding-bottom:.2rem;transition:color .3s,border-color .3s}
.jrnl:hover .jrnl-go{color:var(--accent);border-color:var(--accent)}
.area-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.area-links a{font-size:.92rem;padding:.5rem 1rem;border:1px solid var(--rule);border-radius:999px;transition:border-color .3s,background .3s}
.area-links a:hover{border-color:var(--ink);background:rgba(22,18,15,.04)}