:root{
  /* Tinted neutrals (warm-green ink, warm paper) in OKLCH */
  --ink:        oklch(0.18 0.012 150);
  --ink-2:      oklch(0.23 0.013 150);
  --ink-3:      oklch(0.04 0.01 150);
  --paper:      oklch(0.965 0.012 90);
  --paper-2:    oklch(0.93 0.02 85);
  --sand:       oklch(0.87 0.03 82);
  --stone:      oklch(0.56 0.018 135);
  --moss:       oklch(0.46 0.022 145);
  /* One restrained accent, pulled from the brand's sunset */
  --ember:      oklch(0.71 0.15 58);
  --ember-deep: oklch(0.62 0.16 48);

  --on-ink:     oklch(0.97 0.012 88);
  --on-ink-dim: oklch(0.97 0.012 88 / 0.66);
  --on-paper-dim: oklch(0.18 0.012 150 / 0.66);

  --line:        oklch(0.18 0.012 150 / 0.16);
  --line-strong: oklch(0.18 0.012 150 / 0.28);
  --line-light:  oklch(0.97 0.012 88 / 0.16);

  --shadow:    0 34px 90px oklch(0.18 0.012 150 / 0.30);
  --shadow-sm: 0 16px 50px oklch(0.18 0.012 150 / 0.16);

  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo-ish */
  --wrap: min(1180px, calc(100% - clamp(32px, 8vw, 116px)));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button,input,textarea{font:inherit}
::selection{background:var(--ember); color:var(--ink-3)}
:focus-visible{outline:2px solid var(--ember); outline-offset:3px; border-radius:4px}

.wrap{width:var(--wrap); margin-inline:auto}

.grain{
  position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.06; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* ---------- Brand mark ---------- */
.brand{display:inline-flex; align-items:center; gap:12px; color:currentColor}
.brand__mark{height:42px; width:auto; flex:none}
.brand__word{
  font-weight:700; font-size:18px; letter-spacing:.34em; text-indent:.34em;
  text-transform:uppercase; line-height:1;
}

/* ---------- Header ---------- */
.header{
  position:fixed; z-index:60; inset:0 0 auto;
  height:88px; display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,5vw,58px); color:var(--on-ink);
  transition:height .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-scrolled{
  height:70px; background:oklch(0.18 0.012 150 / 0.72); backdrop-filter:blur(22px) saturate(1.2);
  border-color:var(--line-light);
}
.header__brand{display:inline-flex}
.header__nav{display:flex; align-items:center; gap:clamp(20px,2.4vw,34px); font-size:13px; font-weight:600; letter-spacing:.02em}
.header__nav a:not(.pill){position:relative; opacity:.78; transition:opacity .25s var(--ease)}
.header__nav a:not(.pill)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1.5px;
  background:var(--ember); transition:right .35s var(--ease);
}
.header__nav a:not(.pill):hover{opacity:1}
.header__nav a:not(.pill):hover::after{right:0}
.pill{
  border:1px solid var(--line-light); padding:11px 19px; border-radius:999px;
  background:oklch(0.97 0.012 88 / 0.05); transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.pill:hover{background:var(--ember); border-color:var(--ember); color:var(--ink-3)}
.header__toggle{display:none; width:44px; height:44px; background:transparent; border:0; color:currentColor; padding:0; position:relative; z-index:70}
.header__toggle span{display:block; width:24px; height:2px; background:currentColor; margin:6px auto; border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease)}
.header__toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.header__toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{min-height:100svh; position:relative; overflow:hidden; color:var(--on-ink); background:var(--ink); display:grid; align-items:end}
.hero__image{position:absolute; inset:-4% 0; background-image:url('assets/hero.jpg'); background-size:cover; background-position:center; transform:scale(1.06); will-change:transform}
.hero__shade{position:absolute; inset:0; background:
  radial-gradient(60% 50% at 78% 42%, oklch(0.72 0.15 58 / 0.26), transparent 60%),
  linear-gradient(90deg, oklch(0.04 0.01 150 / 0.88) 0%, oklch(0.04 0.01 150 / 0.55) 40%, oklch(0.04 0.01 150 / 0.08) 76%),
  linear-gradient(0deg, oklch(0.04 0.01 150 / 0.92) 0%, oklch(0.04 0.01 150 / 0.12) 58%)}
.hero__content{position:relative; z-index:2; padding:176px 0 clamp(56px,9vh,90px)}
.hero__bottom{display:grid; grid-template-columns:minmax(280px,600px) auto; align-items:end; gap:36px; max-width:980px}
.hero__bottom p{font-size:clamp(17px,1.7vw,21px); color:var(--on-ink-dim); line-height:1.62; margin:0; max-width:54ch}
.hero__signature{position:absolute; z-index:1; right:-.04em; bottom:-.18em; font-size:clamp(76px,18vw,270px); letter-spacing:-.08em; line-height:.75; color:oklch(0.97 0.012 88 / 0.05); font-weight:800; pointer-events:none; font-family:Manrope, sans-serif}

/* ---------- Type ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:11px; margin:0 0 22px;
  color:var(--on-ink-dim); text-transform:uppercase; letter-spacing:.2em; font-size:12px; font-weight:700;
}
.kicker::before{content:""; width:9px; height:9px; background:var(--ember); border-radius:2px; flex:none; transform:rotate(45deg)}
.kicker--dark{color:var(--stone)}
h1,h2,h3,p{margin-top:0}
h1{font-family:Manrope, sans-serif; font-weight:800; letter-spacing:-.04em; font-size:clamp(46px,8vw,118px); line-height:.98; max-width:16ch; margin-bottom:40px}
h2{font-family:Manrope, sans-serif; font-weight:700; letter-spacing:-.03em; font-size:clamp(34px,4.8vw,66px); line-height:1.04; margin:0}
h3{font-size:24px; font-weight:700; letter-spacing:-.025em; line-height:1.12; margin-bottom:12px}

.cta{
  justify-self:start; display:inline-flex; align-items:center; gap:12px; min-height:56px; padding:0 14px 0 24px;
  border-radius:999px; background:var(--on-ink); color:var(--ink-3); font-weight:700; white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.cta span{display:grid; place-items:center; width:30px; height:30px; border-radius:999px; background:var(--ink-3); color:var(--on-ink); font-size:15px; transition:transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease)}
.cta:hover{background:var(--ember); color:var(--ink-3)}
.cta:hover span{transform:translateX(4px); background:var(--ink-3); color:var(--ember)}

/* ---------- Sections ---------- */
.section{padding:clamp(84px,12vh,128px) 0}
.section--dark{background:var(--ink); color:var(--on-ink)}
.section--sand{background:linear-gradient(180deg, var(--paper-2), var(--sand))}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.is-visible{opacity:1; transform:none}
[data-stagger] > .reveal{transition-delay:calc(var(--i, 0) * 90ms)}

/* Section index label (deliberate wayfinding system) */
.section__head{max-width:46ch; margin-bottom:clamp(40px,6vh,58px)}
.section__head .kicker{margin-bottom:20px}

/* ---------- Intro ---------- */
.intro{background:var(--paper)}
.intro__grid{display:grid; grid-template-columns:230px 1fr; gap:clamp(40px,6vw,72px)}
.intro__label{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); padding-top:12px; border-top:1px solid var(--line); display:inline-block; height:fit-content}
.intro__copy{max-width:62ch}
.intro__copy p{font-size:clamp(18px,1.5vw,20px); line-height:1.75; color:var(--on-paper-dim); margin:32px 0 0}

/* ---------- Capabilities ---------- */
.capability-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.cap-card{
  position:relative; min-height:288px; padding:28px; border:1px solid var(--line-light);
  background:linear-gradient(180deg, oklch(0.97 0.012 88 / 0.06), oklch(0.97 0.012 88 / 0.02));
  border-radius:24px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  transition:border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.cap-card:hover{transform:translateY(-4px); border-color:oklch(0.71 0.15 58 / 0.5)}
.cap-card span{font-size:12px; letter-spacing:.16em; font-weight:700; color:var(--ember); margin-bottom:auto}
.cap-card p{color:var(--on-ink-dim); line-height:1.58; margin:0; font-size:15px}
.cap-card--wide{grid-column:span 2}
.cap-card--wide h3{font-weight:700; font-size:clamp(26px,2.8vw,36px); letter-spacing:-.03em; line-height:1.08; max-width:20ch}
.cap-card--image{padding:0; min-height:288px}
.cap-card--image img{width:100%; height:100%; object-fit:cover; opacity:.9; filter:saturate(.9) contrast(1.04); transition:transform .6s var(--ease)}
.cap-card--image:hover img{transform:scale(1.05)}

/* ---------- Manifesto ---------- */
.manifesto{background:var(--paper)}
.manifesto__grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(40px,5.5vw,74px); align-items:center}
.manifesto__image{position:relative; border-radius:28px; overflow:hidden; box-shadow:var(--shadow); max-height:760px}
.manifesto__image img{width:100%; height:100%; object-fit:cover}
.manifesto__text p:not(.kicker){font-size:clamp(18px,1.5vw,20px); line-height:1.72; color:var(--on-paper-dim); max-width:60ch; margin:30px 0 0}
.metrics{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin-top:42px; padding-top:28px; gap:20px}
.metrics strong{display:block; font-weight:700; font-size:24px; letter-spacing:-.02em}
.metrics span{display:block; margin-top:8px; color:var(--on-paper-dim); line-height:1.45; font-size:14px}

/* ---------- Method timeline ---------- */
.timeline{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:26px; overflow:hidden; background:oklch(0.965 0.012 90 / 0.5); box-shadow:var(--shadow-sm)}
.timeline div{padding:clamp(24px,2.4vw,34px); border-right:1px solid var(--line); min-height:268px; display:flex; flex-direction:column; justify-content:flex-end; transition:background .4s var(--ease)}
.timeline div:last-child{border-right:0}
.timeline div:hover{background:oklch(0.965 0.012 90 / 0.9)}
.timeline span{display:block; margin-bottom:auto; font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--ember)}
.timeline strong{display:block; font-weight:700; font-size:23px; letter-spacing:-.02em; margin-bottom:12px}
.timeline p{margin:0; line-height:1.55; color:var(--on-paper-dim); font-size:15px}

/* ---------- Work ---------- */
.work{background:var(--paper)}
.work__top{display:grid; grid-template-columns:1fr .8fr; gap:clamp(36px,4.5vw,56px); align-items:end; margin-bottom:30px}
.work__top p:not(.kicker){font-size:clamp(16px,1.3vw,18px); line-height:1.7; color:var(--on-paper-dim); margin:0; max-width:54ch}
.work__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:16px}
.work-card{position:relative; margin:0; overflow:hidden; border-radius:26px; background:var(--sand); min-height:330px; box-shadow:var(--shadow-sm)}
.work-card img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.work-card:hover img{transform:scale(1.04)}
.work-card--large{grid-row:span 2; min-height:690px}
.work-card figcaption{
  position:absolute; left:16px; bottom:16px; border-radius:999px;
  background:oklch(0.18 0.012 150 / 0.7); backdrop-filter:blur(14px); color:var(--on-ink);
  padding:10px 16px; font-size:13px; font-weight:600; letter-spacing:.01em;
}

/* ---------- Contact ---------- */
.contact{position:relative; overflow:hidden}
.contact::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, oklch(0.04 0.01 150 / 0.94), oklch(0.04 0.01 150 / 0.7)), url('assets/hero.jpg') center/cover; opacity:.92}
.contact__grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr .92fr; gap:clamp(40px,5vw,70px); align-items:start}
.contact__copy p:not(.kicker){font-size:clamp(18px,1.5vw,20px); line-height:1.72; color:var(--on-ink-dim); max-width:52ch; margin-top:28px}
.contact__form{background:oklch(0.97 0.012 88 / 0.07); border:1px solid var(--line-light); border-radius:26px; padding:clamp(24px,3vw,32px); display:grid; gap:16px; backdrop-filter:blur(22px); box-shadow:var(--shadow)}
.contact__form label{display:grid; gap:8px; font-size:13px; font-weight:700; color:var(--on-ink-dim)}
.contact__form input,.contact__form textarea{border:1px solid var(--line-light); background:oklch(0.97 0.012 88 / 0.07); color:var(--on-ink); border-radius:14px; padding:15px 16px; outline:none; resize:vertical; transition:border-color .25s var(--ease), background .25s var(--ease)}
.contact__form input::placeholder,.contact__form textarea::placeholder{color:oklch(0.97 0.012 88 / 0.4)}
.contact__form input:focus,.contact__form textarea:focus{border-color:var(--ember); background:oklch(0.97 0.012 88 / 0.1)}
.contact__form button{justify-self:start; border:0; background:var(--on-ink); color:var(--ink-3); min-height:52px; border-radius:999px; padding:0 26px; font-weight:700; cursor:pointer; transition:background .3s var(--ease), transform .3s var(--ease)}
.contact__form button:hover{background:var(--ember); transform:translateY(-2px)}
.contact__form small{color:oklch(0.97 0.012 88 / 0.45); font-size:12px}
.contact__form small a{color:var(--ember)}

/* ---------- Footer ---------- */
.footer{background:var(--ink-3); color:var(--on-ink-dim); padding:40px 0}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:22px}
.footer .brand{color:var(--on-ink); opacity:.9}
.footer .brand__word{font-size:15px}
.footer__meta{display:flex; align-items:center; gap:24px}
.footer__mail{font-size:13px; font-weight:700; color:var(--on-ink); border-bottom:1px solid var(--ember); padding-bottom:2px; transition:color .25s var(--ease)}
.footer__mail:hover{color:var(--ember)}
.footer p{margin:0; font-size:13px; font-weight:600}

/* ---------- Publications (home listing) ---------- */
.publications{background:var(--paper)}
.pub-card{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--paper); box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease)}
.pub-card:hover{transform:translateY(-4px); border-color:oklch(0.71 0.15 58 / 0.5); box-shadow:var(--shadow)}
.pub-card__media{position:relative; overflow:hidden; min-height:312px; background:var(--sand)}
.pub-card__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.pub-card:hover .pub-card__media img{transform:scale(1.05)}
.pub-card__body{padding:clamp(28px,3vw,46px); display:flex; flex-direction:column; justify-content:center}
.pub-card__cat{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); margin-bottom:16px}
.pub-card__body h3{font-size:clamp(22px,2.4vw,30px); line-height:1.14; letter-spacing:-.02em; margin-bottom:14px; color:var(--ink)}
.pub-card__body p{font-size:16px; line-height:1.65; color:var(--on-paper-dim); margin:0 0 22px; max-width:50ch}
.pub-card__more{display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--ink)}
.pub-card__more span{transition:transform .3s var(--ease)}
.pub-card:hover .pub-card__more span{transform:translateX(4px)}

/* ---------- Article page ---------- */
.header--article{position:static; background:var(--ink); border-bottom:1px solid var(--line-light)}
.header--article.is-scrolled{height:88px; background:var(--ink); backdrop-filter:none}
.article{padding:clamp(44px,7vh,84px) 0 0; background:var(--paper)}
.article__inner{width:min(720px, calc(100% - clamp(32px,8vw,72px))); margin-inline:auto}
.article__eyebrow{margin-bottom:20px}
h1.article__title{font-size:clamp(30px,4.4vw,52px); line-height:1.07; letter-spacing:-.035em; max-width:none; margin:0 0 22px; color:var(--ink)}
.article__lede{font-size:clamp(18px,1.6vw,22px); font-weight:500; line-height:1.58; color:var(--on-paper-dim); margin:0 0 26px}
.article__meta{display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--stone); padding-bottom:34px; border-bottom:1px solid var(--line)}
.article__meta i{font-style:normal; opacity:.45}
.article__body{padding-top:34px}
.article__body p{font-size:17px; line-height:1.75; color:oklch(0.18 0.012 150 / .86); margin:0 0 22px}
.article__body h2{font-size:clamp(22px,2.6vw,30px); font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--ink); margin:46px 0 14px; display:flex; gap:14px; align-items:baseline}
.article__num{color:var(--ember); font-size:.6em; font-weight:700; font-variant-numeric:tabular-nums; flex:none; letter-spacing:.04em; padding-top:.15em}
.article__body h3{font-size:18px; font-weight:700; color:var(--ink); margin:30px 0 10px; letter-spacing:-.01em}
.article__divider{height:1px; background:var(--line); border:0; margin:48px 0}
.article__faq{background:var(--paper-2); border:1px solid var(--line); border-radius:20px; padding:clamp(24px,3vw,34px); margin:46px 0}
.article__faq h2{margin:0 0 6px; font-size:22px; display:block}
.article__faq h3{margin:22px 0 8px}
.article__faq p{font-size:16px; margin:0; color:oklch(0.18 0.012 150 / .82)}
.article__cta{margin:52px 0 12px; padding:clamp(26px,3vw,36px); border:1px solid oklch(0.71 0.15 58 / .5); border-radius:20px; background:linear-gradient(180deg, oklch(0.71 0.15 58 / .08), transparent)}
.article__cta p{font-size:17px; color:var(--ink); margin:0 0 20px; max-width:56ch}
.article__cta .btn{display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 24px; border-radius:999px; background:var(--ink); color:var(--on-ink); font-weight:700; transition:background .3s var(--ease), transform .3s var(--ease)}
.article__cta .btn:hover{background:var(--ember); color:var(--ink-3); transform:translateY(-2px)}
.article__back{display:inline-flex; align-items:center; gap:9px; margin-top:8px; font-size:14px; font-weight:700; color:var(--stone); transition:color .25s var(--ease)}
.article__back:hover{color:var(--ember)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .header__toggle{display:block}
  .header__nav{
    position:fixed; inset:0; background:oklch(0.12 0.012 150 / 0.97); backdrop-filter:blur(16px);
    flex-direction:column; align-items:flex-start; justify-content:center; padding:42px; font-size:32px; gap:26px;
    transform:translateX(100%); transition:transform .4s var(--ease); visibility:hidden;
  }
  .header__nav.is-open{transform:translateX(0); visibility:visible}
  .header__nav a:not(.pill)::after{display:none}
  .pill{font-size:18px}
  .hero__bottom,.intro__grid,.manifesto__grid,.work__top,.contact__grid{grid-template-columns:1fr}
  .pub-card{grid-template-columns:1fr}
  .pub-card__media{min-height:220px}
  .capability-grid{grid-template-columns:1fr 1fr}
  .cap-card--wide{grid-column:span 2}
  .timeline{grid-template-columns:1fr 1fr}
  .timeline div:nth-child(2){border-right:0}
  .timeline div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .work__grid{grid-template-columns:1fr}
  .work-card--large{grid-row:auto; min-height:430px}
  .manifesto__image{max-height:620px}
  .hero__content{padding-top:148px}
  .hero__shade{background:
    radial-gradient(70% 40% at 70% 30%, oklch(0.72 0.15 58 / 0.22), transparent 60%),
    linear-gradient(0deg, oklch(0.04 0.01 150 / 0.92) 0%, oklch(0.04 0.01 150 / 0.16) 64%),
    linear-gradient(90deg, oklch(0.04 0.01 150 / 0.6), oklch(0.04 0.01 150 / 0.08))}
}
@media (max-width:620px){
  .header{height:74px}
  h1{font-size:clamp(50px,15vw,72px); line-height:.88}
  .hero__bottom p{font-size:17px}
  .capability-grid,.timeline,.metrics{grid-template-columns:1fr}
  .cap-card--wide{grid-column:auto}
  .timeline div{border-right:0!important; border-bottom:1px solid var(--line)}
  .timeline div:last-child{border-bottom:0}
  .cap-card{min-height:230px}
  .work-card,.work-card--large{min-height:330px}
  .contact__form{padding:22px; border-radius:22px}
  .footer__inner{align-items:flex-start; flex-direction:column; gap:18px}
  .footer__meta{flex-direction:column; align-items:flex-start; gap:12px}
  .hero__signature{display:none}
}