:root{
  --ink:#141210;
  --ink-2:#1d1a16;
  --paper:#f4efe6;
  --paper-2:#ece5d6;
  --paper-3:#e4dcc8;
  --bone:#f8f4ec;
  --rule:#23211d;
  --muted:#6b6558;
  --muted-2:#8c8675;
  --accent:#7a5a2c;
  --accent-2:#a3814f;
  --oxblood:#5a221d;
  --max:1320px;
  --gutter:clamp(24px,5vw,72px);
  --serif:"Fraunces","Cormorant Garamond","Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
::selection{background:var(--oxblood);color:var(--paper)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","ss02","kern","liga";
}
/* Subtle paper grain — pure CSS, zero KB */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:opacity .35s ease,color .35s ease}
a:hover{opacity:.65}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}

/* ── TYPE ── */
.eyebrow,.mono{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);font-weight:400}
.eyebrow.dark{color:var(--ink)}
.eyebrow .dot{display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;margin:0 10px;vertical-align:middle;transform:translateY(-2px)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.02em;margin:0;color:var(--ink);font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0}
h1{font-size:clamp(56px,11vw,180px);letter-spacing:-.035em;font-weight:300}
h2{font-size:clamp(38px,6vw,84px);letter-spacing:-.025em}
h3{font-size:clamp(24px,2.8vw,36px);letter-spacing:-.015em;line-height:1.1}
h4{font-size:20px;letter-spacing:-.005em;line-height:1.2}
p{margin:0 0 1.2em;color:var(--ink)}
.lead{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2vw,28px);line-height:1.4;letter-spacing:-.005em;color:var(--ink-2)}
.muted{color:var(--muted)}
.italic{font-style:italic;font-family:var(--serif)}
em{font-family:var(--serif);font-style:italic;font-weight:300}

/* ── SECTIONS / RULES ── */
.section{padding:clamp(96px,12vw,200px) 0;position:relative}
.section--tight{padding:clamp(64px,8vw,120px) 0}
.section--ink{background:var(--ink);color:var(--paper)}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:var(--paper)}
.section--ink p{color:rgba(244,239,230,.78)}
.section--ink .muted{color:rgba(244,239,230,.55)}
.section--ink .eyebrow{color:var(--accent-2)}
.section--paper-2{background:var(--paper-2)}

.hairline{height:1px;background:rgba(20,18,16,.18);width:100%}
.section--ink .hairline{background:rgba(244,239,230,.2)}
.hairline--short{width:48px;margin:24px 0}
.hairline--vert{width:1px;height:64px;background:rgba(20,18,16,.18);margin:0 auto}

/* ── HEADER ── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease}
.site-header.scrolled{background:rgba(244,239,230,.88);backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid rgba(20,18,16,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;font-family:var(--mono)}
.brand{font-family:var(--serif);font-size:24px;letter-spacing:-.02em;line-height:1;font-weight:400;font-style:italic}
.brand sup{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-style:normal;margin-left:8px;vertical-align:top;color:var(--accent);font-weight:400}
.nav-list{display:flex;gap:36px;list-style:none;margin:0;padding:0;align-items:center}
.nav-list a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:400}
.nav-list a:hover{color:var(--accent)}
.nav-cta{border:1px solid currentColor;padding:10px 18px;font-size:10px;letter-spacing:.22em}
.nav-cta:hover{background:var(--ink);color:var(--paper);opacity:1;border-color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;font-size:22px;line-height:1;font-family:var(--mono)}

/* ── HERO (editorial cover) ── */
.hero{padding:max(120px,16vh) 0 clamp(80px,8vw,140px);position:relative;min-height:96vh;display:flex;flex-direction:column;justify-content:space-between}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;padding-top:60px}
.hero-issue{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);display:flex;flex-direction:column;gap:6px}
.hero-issue strong{color:var(--ink);font-weight:400}
.hero-mid{margin:auto 0}
.hero h1{margin:0;max-width:14ch}
.hero h1 .amp{font-style:italic;color:var(--accent);font-weight:300;font-variation-settings:"opsz" 144,"SOFT" 80}
.hero-bottom{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;padding-top:48px;border-top:1px solid rgba(20,18,16,.16);margin-top:48px}
.hero-bottom .lead{max-width:50ch}
.hero-meta{display:flex;flex-direction:column;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.hero-meta div{display:flex;justify-content:space-between;gap:24px;padding-bottom:14px;border-bottom:1px solid rgba(20,18,16,.1)}
.hero-meta strong{color:var(--ink);font-weight:400;text-align:right}

/* ── CHAPTER LIST (services on home) ── */
.chapters{padding:0}
.chapter{display:grid;grid-template-columns:.1fr .8fr 1.4fr;gap:48px;align-items:start;padding:64px 0;border-top:1px solid rgba(20,18,16,.16);transition:background .5s ease}
.chapter:hover{background:rgba(20,18,16,.02)}
.chapter:last-child{border-bottom:1px solid rgba(20,18,16,.16)}
.chapter .num{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent)}
.chapter h3{font-family:var(--serif);font-size:clamp(32px,4.5vw,60px);font-weight:300;letter-spacing:-.02em;line-height:1.02}
.chapter .body{display:flex;flex-direction:column;gap:24px;padding-top:14px}
.chapter .body p{font-size:17px;line-height:1.55;color:var(--muted);max-width:46ch;margin:0}
.chapter .more{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);align-self:flex-start;border-bottom:1px solid var(--accent);padding-bottom:4px}
.chapter .more:hover{color:var(--accent);opacity:1}

/* ── PROSE TWO-COL ── */
.two-col{display:grid;grid-template-columns:.9fr 1.5fr;gap:clamp(48px,8vw,140px);align-items:start}
.two-col h2{margin-bottom:24px;max-width:14ch}
.two-col .label{margin-bottom:32px}

/* ── PRINCIPLE PLATES ── */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(244,239,230,.2);border-bottom:1px solid rgba(244,239,230,.2)}
.principle{padding:48px 36px;border-right:1px solid rgba(244,239,230,.2);display:flex;flex-direction:column;gap:18px}
.principle:last-child{border-right:0}
.principle .num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--accent-2)}
.principle h4{font-family:var(--serif);font-size:32px;font-weight:300;letter-spacing:-.015em;line-height:1.05}
.principle p{font-size:15px;line-height:1.55;color:rgba(244,239,230,.7);margin:0}

/* ── TEAM ── */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid rgba(20,18,16,.16)}
.member{padding:48px 0;border-bottom:1px solid rgba(20,18,16,.16);display:grid;grid-template-columns:.7fr 1.3fr;gap:32px;align-items:start}
.member:nth-child(odd){padding-right:48px;border-right:1px solid rgba(20,18,16,.16)}
.member:nth-child(even){padding-left:48px}
.member .meta{display:flex;flex-direction:column;gap:12px}
.member .num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--accent)}
.member .role{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.member h3{font-family:var(--serif);font-size:clamp(28px,3vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1.05;margin:0}
.member p{font-size:15px;line-height:1.6;color:var(--muted);margin:0;max-width:52ch}

/* ── PROJECT TILES ── */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid rgba(20,18,16,.16)}
.work-tile{position:relative;padding:64px 48px 80px;border-bottom:1px solid rgba(20,18,16,.16);min-height:340px;display:flex;flex-direction:column;justify-content:space-between;transition:background .5s ease;overflow:hidden}
.work-tile:nth-child(odd){border-right:1px solid rgba(20,18,16,.16)}
.work-tile:hover{background:rgba(20,18,16,.025)}
.work-tile .num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--accent)}
.work-tile h3{margin:16px 0 0;max-width:18ch}
.work-tile p{color:var(--muted);font-size:15px;margin:24px 0 0;max-width:42ch}
.work-tile .arrow{position:absolute;bottom:32px;right:48px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:transform .4s ease,color .4s ease}
.work-tile:hover .arrow{transform:translateX(8px);color:var(--accent)}

/* ── FAQ (chapter style) ── */
.faq{border-top:1px solid rgba(20,18,16,.18)}
.section--ink .faq{border-top-color:rgba(244,239,230,.2)}
.faq details{border-bottom:1px solid rgba(20,18,16,.18);padding:32px 0}
.section--ink .faq details{border-bottom-color:rgba(244,239,230,.2)}
.faq summary{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);font-weight:300;letter-spacing:-.015em;cursor:pointer;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:32px;line-height:1.15}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:14px;height:14px;flex-shrink:0;margin-top:14px;background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);background-size:14px 1px,1px 14px;background-position:center,center;background-repeat:no-repeat;color:var(--accent);transition:transform .4s ease,opacity .4s ease}
.faq details[open] summary::after{transform:rotate(45deg);opacity:.6}
.faq details p{margin:24px 0 0;color:var(--muted);max-width:64ch;font-size:16px;line-height:1.65}
.section--ink .faq details p{color:rgba(244,239,230,.72)}

/* ── BLOCKQUOTE ── */
.quote{text-align:center;padding:clamp(80px,10vw,140px) 0}
.quote q{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(32px,4.5vw,64px);line-height:1.15;letter-spacing:-.02em;display:block;max-width:22ch;margin:0 auto;quotes:"\201C" "\201D"}
.quote q::before{content:open-quote;color:var(--accent);margin-right:.1em}
.quote q::after{content:close-quote;color:var(--accent);margin-left:.1em}
.quote cite{display:block;margin-top:40px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-style:normal}

/* ── CTA STRIP ── */
.cta-strip{padding:clamp(96px,12vw,160px) var(--gutter);background:var(--ink);color:var(--paper);text-align:center;position:relative}
.cta-strip h2{margin:24px auto;max-width:14ch}
.cta-strip p{max-width:42ch;margin:0 auto 40px;color:rgba(244,239,230,.7)}

/* ── BUTTONS ── */
.btn{display:inline-block;padding:18px 36px;border:1px solid currentColor;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;background:transparent;cursor:pointer;color:inherit;transition:background .35s ease,color .35s ease,border-color .35s ease}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);opacity:1}
.btn--solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--solid:hover{background:transparent;color:var(--paper);border-color:var(--paper)}
.btn--ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--ink:hover{background:transparent;color:var(--ink);opacity:1}
.btn--ghost{padding-left:0;padding-right:0;border:0;border-bottom:1px solid var(--accent);padding-bottom:8px}
.btn--ghost:hover{background:transparent;color:var(--accent)}

/* ── CRUMBS ── */
.crumbs{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);padding:140px 0 0}
.crumbs a:hover{color:var(--accent);opacity:1}
.crumbs span{margin:0 12px;opacity:.5}

/* ── PAGE HEADER (inner pages) ── */
.page-head{padding:clamp(80px,10vw,160px) 0 clamp(60px,7vw,100px)}
.page-head h1{font-size:clamp(48px,8vw,128px);letter-spacing:-.035em;max-width:14ch}
.page-head .meta-line{margin-bottom:32px;display:flex;gap:24px;align-items:center}
.page-head .meta-line .mono{color:var(--muted)}

/* ── FOOTER ── */
.site-footer{background:var(--ink);color:rgba(244,239,230,.78);padding:120px 0 40px;font-family:var(--sans);font-weight:300;position:relative}
.footer-grid{display:grid;grid-template-columns:1.4fr .7fr .7fr .7fr;gap:64px;margin-bottom:72px;padding-bottom:72px;border-bottom:1px solid rgba(244,239,230,.16)}
.footer-grid h4{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper);margin-bottom:22px;font-weight:400}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:14px}
.footer-grid a{color:rgba(244,239,230,.66)}
.footer-grid a:hover{color:var(--accent-2)}
.footer-brand .brand{color:var(--paper);font-size:32px}
.footer-brand .brand sup{color:var(--accent-2)}
.footer-brand p{color:rgba(244,239,230,.5);max-width:36ch;margin-top:20px;font-size:14px;line-height:1.6}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:rgba(244,239,230,.4);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}

/* ── FORM ── */
.form-wrap{padding:64px;background:var(--paper-2);border:1px solid rgba(20,18,16,.1)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px}
.form-row{display:flex;flex-direction:column;gap:10px}
.form-row.full{grid-column:1/-1}
.form-row label{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.form-row input,.form-row textarea{
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(20,18,16,.3);
  padding:10px 0;
  font-family:var(--serif);
  font-size:20px;
  font-weight:300;
  color:var(--ink);
  border-radius:0;
  outline:none;
  transition:border-color .35s ease;
}
.form-row input:focus,.form-row textarea:focus{border-bottom-color:var(--accent)}
.form-row textarea{resize:vertical;min-height:140px}

/* ── MOTION (scroll reveal) ── */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:translateY(0)}
[data-reveal-delay="1"]{transition-delay:.1s}
[data-reveal-delay="2"]{transition-delay:.2s}
[data-reveal-delay="3"]{transition-delay:.3s}
[data-reveal-delay="4"]{transition-delay:.4s}

/* COMPAT: .rule (older inline hairline) */
.rule{height:1px;background:rgba(20,18,16,.16);width:48px;margin:24px 0}
.section--ink .rule{background:rgba(244,239,230,.25)}

/* ── COMPAT: cards/grid for inner service pages ── */
.grid{display:grid;gap:0;border-top:1px solid rgba(20,18,16,.16)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{padding:48px 40px;border-right:1px solid rgba(20,18,16,.16);border-bottom:1px solid rgba(20,18,16,.16);background:transparent;display:flex;flex-direction:column;gap:12px;transition:background .5s ease}
.card:hover{background:rgba(20,18,16,.025)}
.card .card-num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:400}
.card h3{margin-top:8px}
.card p{font-size:15px;line-height:1.6;color:var(--muted);max-width:42ch;margin:0}
.grid-3 .card:nth-child(3n){border-right:0}
.grid-2 .card:nth-child(2n){border-right:0}
.grid-4 .card:nth-child(4n){border-right:0}
@media (max-width:980px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .card,.card:nth-child(n){border-right:0;padding:40px 0}
}
.section--ink .card{border-color:rgba(244,239,230,.18)}
.section--ink .card:hover{background:rgba(244,239,230,.03)}
.section--ink .card p{color:rgba(244,239,230,.7)}

/* COMPAT: project-tile (used on projects page) — now editorial work-tile look */
.project-tile{position:relative;padding:64px 48px 80px;background:transparent;border:0;border-bottom:1px solid rgba(20,18,16,.16);min-height:280px;display:flex;flex-direction:column;justify-content:space-between;transition:background .5s ease}
.project-tile:hover{background:rgba(20,18,16,.025)}
.project-tile .marker{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.project-tile h3{margin:16px 0;max-width:18ch}
.project-tile p{color:var(--muted);font-size:15px;margin:0;max-width:42ch}

/* COMPAT: svc-card (used on services hub before redesign) */
.svc-card{justify-content:space-between;min-height:240px}
.svc-card .more{margin-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}

/* COMPAT: team-grid older 2-col now uses new style */

/* ── MARQUEE TICKER (capabilities) ── */
.ticker{overflow:hidden;border-top:1px solid rgba(20,18,16,.16);border-bottom:1px solid rgba(20,18,16,.16);padding:24px 0;background:var(--paper)}
.ticker-track{display:flex;gap:80px;white-space:nowrap;animation:tickerMove 60s linear infinite;font-family:var(--serif);font-size:clamp(28px,4vw,52px);font-weight:300;font-style:italic;letter-spacing:-.02em;color:var(--ink)}
.ticker-track span{display:inline-flex;align-items:center;gap:80px}
.ticker-track span::after{content:"§";font-style:normal;color:var(--accent);font-size:.8em}
@keyframes tickerMove{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── RESPONSIVE ── */
@media (max-width:980px){
  .nav-list{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:8px 0;border-bottom:1px solid rgba(20,18,16,.08)}
  .nav-list.open{display:flex}
  .nav-list a{display:block;padding:18px var(--gutter)}
  .nav-toggle{display:block}
  .hero-bottom{grid-template-columns:1fr;gap:32px}
  .chapter{grid-template-columns:1fr;gap:16px;padding:48px 0}
  .chapter h3{font-size:clamp(32px,8vw,52px)}
  .two-col{grid-template-columns:1fr;gap:40px}
  .principles{grid-template-columns:1fr}
  .principle{border-right:0;border-bottom:1px solid rgba(244,239,230,.2)}
  .principle:last-child{border-bottom:0}
  .team-grid,.work-grid{grid-template-columns:1fr}
  .member,.member:nth-child(odd),.member:nth-child(even){padding:48px 0;border-right:0}
  .member{grid-template-columns:1fr;gap:16px}
  .work-tile,.work-tile:nth-child(odd){border-right:0;padding:48px 0 64px}
  .work-tile .arrow{right:0}
  .form-wrap{padding:32px}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .hero-top{flex-direction:column;gap:24px}
  .crumbs{padding-top:100px}
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
  .ticker-track{animation:none}
}