:root {
  --graphite:#1A1917; --graphite-rgb:26,25,23; --concrete:#2A2724; --plaster:#EDE8E0;
  --stone:#A39A8C; --brass:#B08D4F; --brass-rgb:176,141,79; --line:rgba(237,232,224,0.12);
  --bg:var(--graphite); --surface:var(--concrete);
  --text:var(--plaster); --muted:var(--stone); --accent:var(--brass);
  /* --brass-ink: brass used as body text (not backgrounds/borders). Same as --brass by
     default; overridden in light theme only, since raw brass fails 4.5:1 on a light bg. */
  --brass-ink:var(--brass);
  --fs-display:clamp(3rem,9vw,8rem); --fs-h2:clamp(1.75rem,4vw,3rem);
  --fs-body:1.0625rem; --fs-util:0.8125rem;
  --maxw:1280px; --gutter:clamp(1.25rem,4vw,4rem);
}
:root[data-theme="light"]{
  --bg:var(--plaster); --surface:#F6F2EB; --text:var(--graphite); --muted:#6B6357;
  /* Darkened brass (same hue/sat, lower lightness) — raw --brass is ~2.5:1 on this bg
     (fails AA); this hits ~5.8:1 on --bg and ~6.4:1 on --surface. Left --brass/--accent
     untouched so .btn--cta (dark text on brass fill) keeps its existing contrast. */
  --brass-ink:#6A552F;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Instrument Sans",system-ui,sans-serif;font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Archivo Expanded","Instrument Sans",sans-serif;font-weight:700;line-height:1.02}
.util{font-family:"Space Mono",monospace;font-size:var(--fs-util);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
a{color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Header / navigation ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.site-header__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1rem,3vw,2rem);
  padding-block:1.1rem;
}
.site-logo{
  font-family:"Archivo Expanded","Instrument Sans",sans-serif;
  font-weight:700; font-size:1.125rem; letter-spacing:.04em;
  text-decoration:none; color:var(--text);
}

.site-nav{ display:flex; align-items:center; gap:clamp(1.5rem,3vw,3rem); }
.site-nav__list{
  display:flex; align-items:center; gap:clamp(1.25rem,2.5vw,2.25rem);
  list-style:none; margin:0; padding:0;
}
.site-nav__list a{
  text-decoration:none; color:var(--text); font-size:.9375rem;
}
.site-nav__list a:hover{ color:var(--accent); }
.site-nav__aside{ display:flex; align-items:center; gap:1.25rem; }
.site-nav__lang{
  font-family:"Space Mono",monospace; font-size:var(--fs-util);
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); text-decoration:none;
}
.site-nav__lang:hover{ color:var(--accent); }

.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; padding:0;
  background:transparent; border:1px solid var(--line); border-radius:0;
  color:var(--text); cursor:pointer;
}
.theme-toggle:hover{ color:var(--accent); border-color:var(--accent); }
.theme-toggle__icon{ display:none; width:1.05rem; height:1.05rem; }
:root[data-theme="dark"] .theme-toggle__icon--sun{ display:block; }
:root[data-theme="light"] .theme-toggle__icon--moon{ display:block; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:0;
  font-family:"Space Mono",monospace; font-size:var(--fs-util);
  text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none; cursor:pointer;
  padding:.65em 1.25em;
}
.btn--cta{ background:var(--accent); color:var(--graphite); }
.btn--cta:hover{ background:var(--text); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:44px; height:44px; padding:0;
  background:transparent; border:1px solid var(--line); border-radius:0;
  cursor:pointer;
}
.nav-toggle__bar{
  display:block; width:20px; height:2px; background:var(--text);
}

@media (max-width:720px){
  .nav-toggle{ display:flex; }

  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:1.5rem var(--gutter) 2rem;
    transform:translateY(-8px);
    opacity:0; visibility:hidden; pointer-events:none;
  }
  .site-nav[data-open="true"]{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  }
  @media (prefers-reduced-motion:no-preference){
    .site-nav{ transition:opacity .18s ease, transform .18s ease, visibility .18s; }
  }
  .site-nav__list{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .site-nav__aside{ flex-direction:column; align-items:flex-start; gap:1rem; margin-top:1.25rem; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero__media{
  position:absolute; inset:0; z-index:-2;
  overflow:hidden;
  background:linear-gradient(155deg, var(--concrete) 0%, var(--graphite) 100%);
}
.hero__img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.hero__backdrop{
  /* Scrim over the hero photo: darkens it enough to keep the wordmark and
     lede legible at any viewport, plus the original brass glow accent. */
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(var(--brass-rgb),0.28), transparent 55%),
    linear-gradient(190deg, rgba(var(--graphite-rgb),0.35) 0%, rgba(var(--graphite-rgb),0.55) 55%, rgba(var(--graphite-rgb),0.9) 100%);
}
.hero__inner{ padding-block:clamp(6rem,18vw,10rem) clamp(3rem,8vw,5rem); }
.hero__datum-marker{ margin:0 0 1.25rem; color:var(--brass); }
.hero__eyebrow{ margin:0 0 .75rem; color:var(--stone); }
.hero h1{
  margin:0 0 1rem;
  font-size:var(--fs-display);
  color:var(--plaster);
}
.hero__lede{
  max-width:38ch;
  margin:0 0 2rem;
  font-size:clamp(1rem,1.6vw,1.1875rem);
  color:var(--stone);
}

/* ---------- Datum spine ---------- */
.datum{
  position:fixed; top:0; right:0; bottom:0; z-index:40;
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  gap:1.1rem;
  padding-right:clamp(1rem,3vw,2.25rem);
  pointer-events:none;
}
.datum::before{
  content:"";
  position:absolute; top:8%; bottom:8%; right:calc(clamp(1rem,3vw,2.25rem) + .1rem);
  width:1px; background:var(--line);
}
.datum-tick{
  position:relative;
  color:var(--muted);
  opacity:.55;
  transition:color .15s ease, opacity .15s ease;
}
.datum-tick.is-active{
  color:var(--brass-ink);
  opacity:1;
}
@media (prefers-reduced-motion:reduce){
  .datum-tick{ transition:none; }
}

/* ---------- Manifesto ---------- */
.manifesto{
  padding-block:clamp(5rem,14vw,9rem);
}
.manifesto h2{
  max-width:20ch;
  margin:0 0 1.5rem;
}
.manifesto__lede{
  max-width:44ch;
  margin:0;
  font-size:clamp(1.0625rem,1.4vw,1.25rem);
  color:var(--muted);
}

/* ---------- Trust ---------- */
.trust{
  padding-block:clamp(4rem,10vw,7rem);
  border-top:1px solid var(--line);
}
.trust h2{
  max-width:34ch;
  margin:0 0 1rem;
}
.trust__lede{
  max-width:54ch;
  margin:0 0 3rem;
  color:var(--muted);
}
.trust__grid{
  display:grid;
  grid-template-columns:1fr;
  margin:0;
  border-top:1px solid var(--line);
}
.trust__stat{
  margin:0;
  padding-block:1.75rem;
  border-bottom:1px solid var(--line);
}
.trust__stat:last-child{ border-bottom:none; }
.trust__value{
  margin:0 0 .5rem;
  font-size:clamp(1.75rem,4vw,2.75rem);
  letter-spacing:normal;
  color:var(--text);
}
.trust__label{
  margin:0;
  font-size:var(--fs-body);
  color:var(--muted);
}
@media (min-width:720px){
  .trust__grid{ grid-template-columns:repeat(4,1fr); }
  .trust__stat{
    border-bottom:none;
    border-left:1px solid var(--line);
    padding:1.75rem clamp(1rem,2vw,2rem);
  }
  .trust__stat:first-child{ border-left:none; padding-left:0; }
}

@media (max-width:720px){
  .datum{
    top:auto; left:0; right:0; bottom:0;
    flex-direction:row; align-items:center; justify-content:flex-start;
    gap:0; padding:.6rem var(--gutter);
    background:var(--bg); border-top:1px solid var(--line);
    overflow-x:hidden;
  }
  .datum::before{ display:none; }
  .datum-tick{ display:none; font-size:.6875rem; }
  .datum-tick.is-active{ display:inline; }
}

/* ---------- Scroll reveal ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ---------- Selected Works ---------- */
#works{ padding-block:clamp(4rem,10vw,7rem); border-top:1px solid var(--line); }
#works h2{ max-width:34ch; margin:0 0 1rem; }
#works > p:not(.util){ max-width:54ch; margin:0 0 3rem; color:var(--muted); }

.works__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,6vw,3rem);
}
.work{
  display:flex;
  flex-direction:column;
  outline-offset:6px;
}
.work__media{
  display:block;
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  /* Fallback fill while the photo decodes, and behind any letterboxing. */
  background:linear-gradient(155deg, var(--concrete) 0%, var(--graphite) 100%);
}
.work__media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.work__media::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 20% 100%, rgba(var(--brass-rgb),0.22), transparent 60%);
}
@media (prefers-reduced-motion:no-preference){
  .work__media{ transition:transform .5s ease; }
}
.work__body{ padding-top:1.1rem; }
.work__name{
  margin:0 0 .4rem;
  font-size:clamp(1.125rem,1.6vw,1.375rem);
}
.work__meta{ margin:0; }

@media (prefers-reduced-motion:no-preference){
  .work__meta{ transition:opacity .3s ease, transform .3s ease; opacity:.72; transform:translateY(4px); }
  .work:hover .work__meta,
  .work:focus-within .work__meta{ opacity:1; transform:translateY(0); }
  .work:hover .work__media,
  .work:focus-within .work__media{ transform:scale(1.03); }
}

@media (min-width:720px){
  .works__grid{
    grid-template-columns:repeat(12,1fr);
    gap:clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,2.25rem);
  }
  .work--1{ grid-column:span 7; }
  .work--2{ grid-column:span 5; }
  .work--3{ grid-column:span 5; }
  .work--4{ grid-column:span 7; }
  .work--5{ grid-column:span 4; }
  .work--6{ grid-column:span 8; }
  .work--1 .work__media,
  .work--4 .work__media{ aspect-ratio:16/10; }
  .work--2 .work__media,
  .work--3 .work__media,
  .work--5 .work__media{ aspect-ratio:3/4; }
  .work--6 .work__media{ aspect-ratio:16/9; }
}

/* ---------- Approach ---------- */
#approach{ padding-block:clamp(4rem,10vw,7rem); border-top:1px solid var(--line); }
#approach h2{ max-width:34ch; margin:0 0 1rem; }
#approach > p:not(.util){ max-width:54ch; margin:0 0 3rem; color:var(--muted); }

.approach__list{
  display:grid;
  grid-template-columns:1fr;
  margin:0; padding:0; list-style:none;
  border-top:1px solid var(--line);
}
.approach__step{
  padding-block:1.75rem;
  border-bottom:1px solid var(--line);
}
.approach__step:last-child{ border-bottom:none; }
.approach__num{ margin:0 0 .75rem; color:var(--brass-ink); }
.approach__title{
  margin:0 0 .5rem;
  font-size:clamp(1.0625rem,1.6vw,1.25rem);
}
.approach__desc{ margin:0; max-width:38ch; color:var(--muted); }

@media (min-width:720px){
  .approach__list{ grid-template-columns:repeat(4,1fr); }
  .approach__step{
    border-bottom:none;
    border-left:1px solid var(--line);
    padding:0 clamp(1rem,2vw,2rem);
  }
  .approach__step:first-child{ border-left:none; padding-left:0; }
}

/* ---------- Testimonials ---------- */
#testimonials{ padding-block:clamp(4rem,10vw,7rem); border-top:1px solid var(--line); }
#testimonials h2{ max-width:34ch; margin:0 0 1rem; }
#testimonials > p:not(.util){ max-width:54ch; margin:0 0 3rem; color:var(--muted); }

.testimonials__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.75rem,4vw,2.5rem);
}
.testimonial{
  margin:0;
  padding-left:1.25rem;
  border-left:2px solid var(--accent);
}
.testimonial p{
  margin:0 0 1rem;
  font-size:clamp(1.0625rem,1.6vw,1.25rem);
  color:var(--text);
}
.testimonial cite{
  display:block;
  font-family:"Space Mono",monospace;
  font-size:var(--fs-util);
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

@media (min-width:720px){
  .testimonials__grid{ grid-template-columns:repeat(3,1fr); gap:clamp(2rem,3vw,2.5rem); }
}

/* ---------- Recognition ---------- */
#recognition{ padding-block:clamp(4rem,10vw,7rem); border-top:1px solid var(--line); }
#recognition h2{ max-width:34ch; margin:0 0 1rem; }
#recognition > p:not(.util){ max-width:54ch; margin:0 0 3rem; color:var(--muted); }

.recognition__list{
  display:flex; flex-direction:column;
  margin:0; padding:0; list-style:none;
  border-top:1px solid var(--line);
}
.recognition__item{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.5rem 1rem;
  padding-block:1.1rem;
  border-bottom:1px solid var(--line);
}
.recognition__name{
  color:var(--muted);
  font-size:clamp(1rem,1.4vw,1.125rem);
}
.recognition__meta{ color:var(--muted); }

@media (min-width:720px){
  .recognition__list{ flex-direction:row; flex-wrap:wrap; border-top:none; }
  .recognition__item{
    flex:1 1 auto;
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:.4rem;
    border-bottom:none;
    border-left:1px solid var(--line);
    padding:0 clamp(1rem,2vw,2rem);
  }
  .recognition__item:first-child{ border-left:none; padding-left:0; }
}

/* ---------- Contact ---------- */
#contact{ padding-block:clamp(4rem,10vw,7rem) clamp(6rem,14vw,9rem); border-top:1px solid var(--line); }
#contact h2{ max-width:34ch; margin:0 0 1rem; }
#contact > p:not(.util){ max-width:54ch; margin:0 0 3rem; color:var(--muted); }

.contact__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.5rem,6vw,4rem);
}

.contact__value-prop{
  max-width:42ch;
  margin:0 0 2rem;
  font-size:clamp(1.0625rem,1.4vw,1.1875rem);
  color:var(--text);
}

.contact__direct{
  display:flex; flex-direction:column; gap:1.1rem;
  margin:0 0 2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.contact__direct-item{ display:flex; flex-direction:column; gap:.3rem; margin:0; }
.contact__direct-item dd{ margin:0; }
.contact__direct-item a{
  font-size:clamp(1rem,1.3vw,1.125rem);
  color:var(--text); text-decoration:none;
}
.contact__direct-item a:hover{ color:var(--accent); }

.contact__promise{ margin:0; color:var(--brass-ink); }

.contact__form{ display:flex; flex-direction:column; gap:1.5rem; }

.visually-hidden-field{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
  left:-9999px;
}

.form-field{ display:flex; flex-direction:column; gap:.5rem; }
.form-field label{
  font-family:"Space Mono",monospace; font-size:var(--fs-util);
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted);
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:0;
  padding:.85em 1em;
  font-family:"Instrument Sans",system-ui,sans-serif; font-size:var(--fs-body);
}
.form-field textarea{ resize:vertical; min-height:8rem; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent);
}

.form-error{
  margin:0; min-height:1.2em;
  font-family:"Space Mono",monospace; font-size:var(--fs-util);
  color:var(--brass-ink);
}

.contact__status{
  margin:0; min-height:1.2em;
  font-family:"Space Mono",monospace; font-size:var(--fs-util);
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted);
}

@media (min-width:720px){
  .contact__grid{ grid-template-columns:5fr 7fr; align-items:start; gap:clamp(3rem,6vw,5rem); }
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding-block:clamp(3rem,8vw,4rem);
}
.site-footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
}
.site-footer__brand .site-logo{ display:inline-block; text-decoration:none; }
.site-footer__disclaimer{
  max-width:34ch;
  margin:.85rem 0 0;
  color:var(--muted);
  font-size:.9375rem;
}
.site-footer__heading{ margin:0 0 .85rem; }
.site-footer__list{
  display:flex; flex-direction:column; gap:.6rem;
  margin:0; padding:0; list-style:none;
}
.site-footer__list a{ color:var(--text); text-decoration:none; }
.site-footer__list a:hover{ color:var(--accent); }

.site-footer__social{
  display:flex; gap:.85rem;
  margin:0; padding:0; list-style:none;
}
.site-footer__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem;
  border:1px solid var(--line);
  color:var(--muted);
}
.site-footer__social a:hover{ color:var(--accent); border-color:var(--accent); }
@media (prefers-reduced-motion:no-preference){
  .site-footer__social a{ transition:color .15s ease, border-color .15s ease; }
}
.site-footer__social svg{ width:1.1rem; height:1.1rem; }

.site-footer__bottom{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.75rem 1.5rem;
  margin-top:.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.site-footer__bottom a{ color:var(--muted); text-decoration:none; }
.site-footer__bottom a:hover{ color:var(--accent); }

@media (min-width:720px){
  .site-footer__grid{ grid-template-columns:1.4fr 1fr 1fr; gap:2rem clamp(2rem,4vw,3rem); }
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:.75rem var(--gutter);
  background:var(--bg);
  border-top:1px solid var(--line);
}
.sticky-cta__link{ width:100%; }
@media (max-width:720px){
  .sticky-cta{ display:flex; }
}
.sticky-cta[data-visible="false"]{
  visibility:hidden;
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .sticky-cta{
    opacity:1; transform:translateY(0);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
  }
  .sticky-cta[data-visible="false"]{
    opacity:0; transform:translateY(100%);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
}