/* ============================================================
   OAK & UMBER — atelier serif edition
   palette: dark oak + coffee · type: Fraunces / Instrument Sans
   ============================================================ */
:root{
  --esp-950:#120B06;
  --esp-900:#1A1109;
  --cof-800:#26180D;
  --umb-700:#372514;
  --bark-600:#57402A;
  --oak-500:#8A6238;
  --amber:#C68A4E;
  --amber-hi:#E3B478;
  --cream:#F2E9DA;
  --parch:#E9DEC9;
  --latte:#CDBBA0;
  --ink:#221507;
  --ink-soft:#5C4A35;
  --hair-d:rgba(198,138,78,.25);
  --hair-l:rgba(34,21,7,.18);
  --head:76px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--esp-900); color:var(--cream);
  font:16px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--amber); color:var(--esp-950)}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
.wrap{max-width:1440px; margin:0 auto; padding-inline:clamp(20px,4vw,64px)}

/* film grain over everything — artisan texture */
#grain{position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");}
/* scroll progress hairline */
#progress{position:fixed; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg,var(--oak-500),var(--amber-hi)); z-index:80}

/* ---------- type helpers ---------- */
.label{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:600;
  display:inline-flex; gap:14px; align-items:center;
}
.label::before{content:""; width:34px; height:1px; background:var(--amber)}
.label .dia{color:var(--amber); font-size:9px}
h1,h2,h3,.display{
  font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1.06; text-wrap:balance;
}
.display-xl{font-size:clamp(48px,7.2vw,118px); font-weight:300}
.display-lg{font-size:clamp(38px,4.8vw,80px); font-weight:300}
.display-md{font-size:clamp(30px,3.3vw,54px); font-weight:400}
em.it{font-style:italic; font-weight:300; color:var(--amber-hi)}
.muted{color:var(--latte)}
.on-light .muted{color:var(--ink-soft)}
/* editorial drop cap */
.dropcap::first-letter{
  font-family:var(--serif); font-weight:500; font-size:3.4em; float:left;
  line-height:.82; padding:.06em .12em 0 0; color:var(--amber);
}

/* underline arrow link */
.ulink{
  display:inline-flex; flex-direction:column; gap:12px; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:600; cursor:pointer; min-width:240px;
}
.ulink .row{display:flex; justify-content:space-between; align-items:center; gap:40px}
.ulink .bar{height:1px; background:currentColor; opacity:.4; transform-origin:left; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ulink svg{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ulink:hover svg{transform:translateX(8px)}
.ulink:hover .bar{transform:scaleX(.72)}

/* sharp atelier button */
.btn{
  display:inline-flex; align-items:center; gap:16px;
  background:transparent; color:var(--cream);
  font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  padding:20px 34px; border:1px solid var(--amber); border-radius:0; cursor:pointer;
  position:relative; overflow:hidden; transition:color .35s;
}
.btn::before{content:""; position:absolute; inset:0; background:var(--amber); transform:scaleY(0); transform-origin:bottom; transition:transform .35s cubic-bezier(.2,.8,.2,1); z-index:0}
.btn:hover::before{transform:scaleY(1)}
.btn:hover{color:var(--esp-950)}
.btn>*{position:relative; z-index:1}
.on-light .btn{color:var(--ink); border-color:var(--oak-500)}
.on-light .btn::before{background:var(--ink)}
.on-light .btn:hover{color:var(--cream)}

/* ---------- reveal-on-scroll ---------- */
.rv{opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0)*90ms)}
.rv.in{opacity:1; transform:none}
.rv-img{overflow:hidden}
.rv-img img{transform:scale(1.1); transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.rv-img.in img{transform:scale(1)}
.wsplit .w{display:inline-block; overflow:hidden; vertical-align:top}
.wsplit .w>span{display:inline-block; transform:translateY(110%); transition:transform .8s cubic-bezier(.2,.75,.2,1); transition-delay:calc(var(--wi)*45ms)}
.wsplit.in .w>span{transform:none}

/* ============================================================
   INTRO
   ============================================================ */
#intro{
  position:fixed; inset:0; z-index:100; background:var(--esp-950);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s ease .1s, visibility 0s .9s;
}
#intro .m{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(22px,3vw,34px); color:var(--latte); animation:introPulse 1.6s ease infinite alternate}
#intro.done{opacity:0; visibility:hidden}
@keyframes introPulse{from{opacity:.4}to{opacity:1}}

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--head);
  display:flex; align-items:center; transition:background .4s, box-shadow .4s;
}
header.scrolled{background:rgba(18,11,6,.85); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--hair-d)}
.head-in{width:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
.brandmark{display:flex; align-items:center; gap:14px}
#burger{
  width:44px; height:44px; border:1px solid var(--hair-d); border-radius:0;
  background:rgba(18,11,6,.4); cursor:pointer; display:grid; place-items:center;
}
#burger span{display:block; width:18px; height:1.5px; background:var(--cream); margin:2.5px 0; transition:transform .35s, opacity .35s}
#burger.open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
#burger.open span:nth-child(2){opacity:0}
#burger.open span:nth-child(3){transform:translateY(-4px) rotate(-45deg)}
.head-word{font-family:var(--serif); font-size:21px; letter-spacing:.02em}
.head-word .amp{font-style:italic; color:var(--amber-hi)}
.head-cta{justify-self:end; font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:700; border-bottom:1px solid var(--amber); padding-bottom:5px; transition:color .3s}
.head-cta:hover{color:var(--amber-hi)}

/* ---------- full-screen menu ---------- */
#menu{
  position:fixed; inset:0; z-index:49; background:var(--esp-950);
  display:flex; align-items:center;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s cubic-bezier(.75,0,.2,1);
}
#menu.open{clip-path:inset(0 0 0% 0)}
#menu nav{display:flex; flex-direction:column; gap:0; padding-top:var(--head); width:100%}
#menu nav a{
  font-family:var(--serif); font-weight:300; font-size:clamp(36px,5.6vw,68px); line-height:1.3;
  color:var(--latte); display:flex; align-items:baseline; gap:26px;
  border-bottom:1px solid rgba(198,138,78,.12); padding:6px 0;
  opacity:0; transform:translateY(26px); transition:color .3s, opacity .5s, transform .5s;
}
#menu.open nav a{opacity:1; transform:none; transition-delay:calc(.15s + var(--i)*60ms)}
#menu nav a:hover{color:var(--amber-hi); font-style:italic}
#menu nav a small{font-family:var(--sans); font-size:11px; letter-spacing:.26em; color:var(--amber); font-weight:600}
#menu .menu-foot{position:absolute; bottom:32px; left:0; right:0; display:flex; justify-content:space-between; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--latte)}

/* ============================================================
   HERO — editorial cover
   ============================================================ */
#hero{min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-top:calc(var(--head) + 40px)}
.hero-top{margin-bottom:clamp(28px,3.5vw,54px)}
.hero-top .label{color:var(--latte); margin-bottom:26px}
.hero-top h1{max-width:11em}
.hero-body{display:grid; grid-template-columns:minmax(300px,440px) 1fr; gap:clamp(28px,4vw,80px); align-items:end; margin-bottom:clamp(40px,5vw,70px)}
.hero-left p{color:var(--latte); max-width:26em; font-size:17px}
.trustrow{display:flex; align-items:center; gap:16px; margin-bottom:26px}
.avatars{display:flex}
.avatars img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--esp-900);margin-left:-10px}
.avatars img:first-child{margin-left:0}
.trustrow .stars{color:var(--amber-hi); letter-spacing:3px; font-size:13px}
.trustrow .t{font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600}
.hero-left .btn{margin-top:36px}
.hero-photo{position:relative}
.hero-photo .ph{overflow:hidden}
.hero-photo img{width:100%; aspect-ratio:16/8.6; object-fit:cover; will-change:transform}
.hero-photo .cap{display:flex; justify-content:space-between; margin-top:14px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--latte)}
/* rotating stamp badge */
.stamp{position:absolute; top:-52px; right:34px; width:110px; height:110px; z-index:2}
.stamp svg{width:100%; height:100%; animation:spin 14s linear infinite}
.stamp text{font-family:var(--sans); font-size:10.5px; letter-spacing:.32em; text-transform:uppercase; fill:var(--amber-hi)}
.stamp .core{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif); font-style:italic; color:var(--amber-hi); font-size:15px}
@keyframes spin{to{transform:rotate(360deg)}}

/* marquee strip */
.marquee{border-block:1px solid var(--hair-d); overflow:hidden; padding:16px 0; background:var(--esp-900)}
.marquee .track{display:flex; gap:0; width:max-content; animation:marq 28s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font-family:var(--serif); font-weight:300; font-size:clamp(18px,1.8vw,26px); white-space:nowrap; padding-right:.6em}
.marquee .d{color:var(--amber); padding-right:.6em}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   GALLERY — auto-drifting rail, asymmetric widths
   ============================================================ */
#gallery{padding:clamp(90px,10vw,150px) 0 clamp(70px,8vw,110px)}
#gallery .hd{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:56px}
#gallery .hd .sub{font-family:var(--serif); font-style:italic; color:var(--latte); font-size:18px}
.rail{
  display:flex; align-items:flex-end; gap:clamp(16px,2vw,28px); overflow-x:auto; cursor:grab;
  padding-inline:clamp(20px,4vw,64px); scrollbar-width:none; user-select:none;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing}
.rail figure{flex:0 0 auto}
.rail figure:nth-child(3n+1){width:clamp(240px,26vw,380px)}
.rail figure:nth-child(3n+2){width:clamp(300px,36vw,520px)}
.rail figure:nth-child(3n){width:clamp(200px,22vw,320px)}
.rail .ph{overflow:hidden; background:var(--cof-800)}
.rail figure:nth-child(3n+1) .ph{aspect-ratio:3/4}
.rail figure:nth-child(3n+2) .ph{aspect-ratio:16/10}
.rail figure:nth-child(3n) .ph{aspect-ratio:1/1.15}
.rail img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); pointer-events:none}
.rail figure:hover img{transform:scale(1.05)}
.rail figcaption{display:flex; gap:12px; align-items:baseline; margin-top:12px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--latte)}
.rail figcaption .no{font-family:var(--serif); font-style:italic; color:var(--amber); letter-spacing:0}

/* ============================================================
   WHAT WE DO  (cream, editorial)
   ============================================================ */
.on-light{background:var(--cream); color:var(--ink)}
#whatwedo{padding:clamp(90px,11vw,160px) 0}
#whatwedo .grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,120px); align-items:start}
#whatwedo .label{color:var(--oak-500)}
#whatwedo h2{margin-top:28px}
#whatwedo p.lead{font-size:clamp(17px,1.4vw,20px); line-height:1.75; color:var(--ink-soft)}
#whatwedo .ulink{color:var(--ink); margin-top:36px}

/* ============================================================
   SERVICES — hover-reveal index with floating preview
   ============================================================ */
#services{background:var(--esp-900); padding:clamp(90px,11vw,160px) 0; position:relative}
#services .hd{margin-bottom:64px}
.svc-list{border-top:1px solid var(--hair-d)}
.svc-row{
  display:grid; grid-template-columns:70px 1fr auto; gap:clamp(16px,3vw,50px); align-items:center;
  padding:clamp(26px,3vw,42px) 0; border-bottom:1px solid var(--hair-d); cursor:pointer;
  transition:padding-left .4s cubic-bezier(.2,.8,.2,1);
}
.svc-row:hover{padding-left:18px}
.svc-row .no{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(18px,1.8vw,26px); color:var(--amber)}
.svc-row h3{font-size:clamp(28px,3.4vw,56px); font-weight:300; transition:color .3s, font-style .1s}
.svc-row:hover h3{color:var(--amber-hi); font-style:italic}
.svc-row .go{width:52px; height:52px; border:1px solid var(--hair-d); display:grid; place-items:center; transition:background .3s}
.svc-row:hover .go{background:var(--amber)}
.svc-row:hover .go svg path{stroke:var(--esp-950)}
.svc-row .desc{grid-column:2/4; color:var(--latte); max-width:44em; font-size:15px;
  max-height:0; overflow:hidden; opacity:0; transition:max-height .5s cubic-bezier(.2,.8,.2,1), opacity .5s, margin .5s}
.svc-row:hover .desc, .svc-row.open .desc{max-height:120px; opacity:1; margin-top:6px}
/* floating preview image (desktop) */
#svc-preview{
  position:fixed; z-index:40; width:min(24vw,340px); aspect-ratio:3/3.6; pointer-events:none;
  overflow:hidden; opacity:0; transition:opacity .35s;
}
#svc-preview img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s}
#svc-preview img.show{opacity:1}
#svc-preview.on{opacity:1; transform:scale(1)}
@media (hover:none), (max-width:960px){ #svc-preview{display:none} }

/* ============================================================
   PHILOSOPHY
   ============================================================ */
#philosophy{padding:clamp(110px,14vw,200px) 0; background:var(--cream); color:var(--ink)}
#philosophy .label{color:var(--oak-500)}
#philosophy .display-lg{max-width:15em; margin-top:34px}
#philosophy .display-lg .accent{font-style:italic; color:var(--oak-500)}

/* ============================================================
   FOUNDER  (coffee panel w/ grain)
   ============================================================ */
#founder{position:relative; padding:clamp(110px,13vw,190px) 0; background:var(--cof-800); overflow:hidden}
#founder .grainbg{position:absolute; inset:-10%; background:url(../img/grain.jpg) center/cover; opacity:.16; mix-blend-mode:overlay; will-change:transform}
#founder .in-z{position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr; gap:clamp(36px,5vw,90px); align-items:center}
#founder .portrait{width:clamp(180px,20vw,280px); aspect-ratio:3/4.2; object-fit:cover;
  border-radius:999px 999px 0 0}  /* arched artisan frame */
#founder blockquote{font-family:var(--serif); font-weight:300; font-size:clamp(28px,3.3vw,50px); letter-spacing:-.01em; line-height:1.25; margin-top:32px; max-width:18em}
#founder blockquote em{font-style:italic; color:var(--amber-hi)}
.founder-id{margin-top:40px; border-left:1px solid var(--amber); padding-left:20px}
.founder-id .n{font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700}
.founder-id .r{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--latte); margin-top:4px}

/* ---------- story split ---------- */
#story{background:var(--cof-800); padding-bottom:clamp(100px,12vw,170px)}
#story .grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,110px); align-items:center}
#story .imgs{display:grid; grid-template-columns:1fr 1fr; gap:18px}
#story .imgs .a{overflow:hidden; aspect-ratio:3/4.4; border-radius:999px 999px 0 0}
#story .imgs .b{overflow:hidden; aspect-ratio:3/4; margin-top:64px}
#story .imgs img{width:100%; height:100%; object-fit:cover}
#story p{color:var(--latte); max-width:32em; margin-top:20px; font-size:16px}
#story .ulink{color:var(--cream); margin-top:38px}

/* ============================================================
   SELECTED WORK — alternating editorial spreads
   ============================================================ */
#work{background:var(--esp-900); padding:clamp(100px,12vw,170px) 0}
#work .hd{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:clamp(60px,8vw,110px)}
.spread{
  display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(28px,4vw,80px); align-items:center;
  margin-bottom:clamp(80px,10vw,150px); position:relative;
}
.spread:nth-child(even){grid-template-columns:1fr 1.25fr}
.spread:nth-child(even) .ph{order:2}
.spread .ph{overflow:hidden; position:relative}
.spread .ph img{width:100%; aspect-ratio:4/3.1; object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.2,1); will-change:transform}
.spread:hover .ph img{transform:scale(1.04)}
.spread .ghost{
  position:absolute; top:-0.55em; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(90px,11vw,180px); color:transparent; -webkit-text-stroke:1px var(--bark-600); z-index:0; line-height:1;
}
.spread:nth-child(odd) .ghost{right:0}
.spread:nth-child(even) .ghost{left:0}
.spread .tx{position:relative; z-index:1}
.spread .meta{display:flex; gap:14px; flex-wrap:wrap; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--latte); margin-bottom:22px}
.spread .meta i{color:var(--amber); font-style:normal}
.spread h3{font-size:clamp(30px,3.4vw,54px); font-weight:300}
.spread p{color:var(--latte); margin-top:18px; max-width:26em; font-size:15px}
.spread .ulink{color:var(--cream); margin-top:32px; min-width:200px}

/* big testimonial */
#bigquote{background:var(--umb-700); padding:clamp(100px,12vw,170px) 0}
#bigquote .mark{font-family:var(--serif); font-style:italic; font-size:clamp(70px,8vw,120px); line-height:.6; color:var(--amber); margin-bottom:34px}
#bigquote blockquote{font-family:var(--serif); font-weight:300; font-size:clamp(30px,4.2vw,64px); letter-spacing:-.015em; line-height:1.14; max-width:17em}
#bigquote blockquote .it{color:var(--amber-hi)}
#bigquote .who{display:flex; align-items:center; gap:16px; margin-top:46px}
#bigquote .who img{width:48px;height:48px;border-radius:50%;object-fit:cover}
#bigquote .who .n{font-size:12px; letter-spacing:.2em; font-weight:700; text-transform:uppercase}
#bigquote .who .p{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--latte); margin-top:3px}

/* ============================================================
   STATS
   ============================================================ */
#stats{background:var(--esp-900); padding:clamp(100px,12vw,160px) 0}
#stats .lead{max-width:24em; font-family:var(--serif); font-weight:300; font-size:clamp(24px,2.4vw,38px); line-height:1.35; margin-top:26px}
.statgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px); margin-top:70px}
.stat{border-top:1px solid var(--hair-d); padding-top:26px}
.stat .num{font-family:var(--serif); font-weight:300; font-size:clamp(54px,6vw,96px); letter-spacing:-.02em; color:var(--amber-hi); font-variant-numeric:tabular-nums}
.stat .lbl{margin-top:10px; color:var(--latte); max-width:20em; font-size:15px}
#stats .btn{margin-top:64px}

/* ============================================================
   CLIENT STORIES slider
   ============================================================ */
#stories{background:var(--cream); color:var(--ink); padding:clamp(100px,12vw,170px) 0}
#stories .hd{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,90px); align-items:end; margin-bottom:64px}
#stories .label{color:var(--oak-500)}
#stories .hd h2{margin-top:26px}
#stories .hd p{color:var(--ink-soft); max-width:30em}
.slider{position:relative; border-top:1px solid var(--hair-l); padding-top:50px}
.slide{display:none}
.slide.active{display:block; animation:slideIn .6s cubic-bezier(.2,.7,.2,1)}
@keyframes slideIn{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
.slide blockquote{font-family:var(--serif); font-weight:300; font-size:clamp(24px,2.8vw,44px); letter-spacing:-.01em; line-height:1.3; max-width:24em}
.slide blockquote em{font-style:italic; color:var(--oak-500)}
.slide .who{display:flex; align-items:center; gap:16px; margin-top:34px}
.slide .who img{width:46px; height:46px; border-radius:50%; object-fit:cover; filter:grayscale(1)}
.slide .who .n{font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700}
.slide .who small{display:block; color:var(--ink-soft); font-weight:500; letter-spacing:.16em; text-transform:uppercase; font-size:10px; margin-top:3px}
.slider-nav{display:flex; gap:12px; margin-top:44px}
.slider-nav button{
  width:54px; height:54px; border:1px solid var(--hair-l); background:transparent; border-radius:0;
  cursor:pointer; display:grid; place-items:center; color:var(--ink); transition:background .3s,color .3s;
}
.slider-nav button:hover{background:var(--ink); color:var(--cream)}
.cities{margin-top:70px; padding-top:26px; border-top:1px solid var(--hair-l); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}

/* ============================================================
   PROCESS
   ============================================================ */
#process{background:var(--esp-900); padding:clamp(100px,12vw,170px) 0}
#process .hd{max-width:800px; margin-bottom:80px}
#process .hd h2{margin-top:26px}
#process .hd p{color:var(--latte); margin-top:24px; max-width:34em}
.phase{
  display:grid; grid-template-columns:150px 1fr 1.4fr; gap:clamp(20px,3vw,60px);
  border-top:1px solid var(--hair-d); padding:48px 0; align-items:start; position:relative;
}
.phase .wk{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); font-weight:600; padding-top:14px}
.phase h3{font-size:clamp(26px,2.6vw,42px); font-weight:300; display:flex; gap:20px; align-items:baseline}
.phase h3 .n{font-family:var(--serif); font-style:italic; font-size:clamp(30px,3vw,48px); color:var(--bark-600)}
.phase p{color:var(--latte); max-width:34em; font-size:15px}
.phase ul{display:flex; gap:26px; flex-wrap:wrap; margin-top:18px}
.phase li{list-style:none; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--cream)}
.phase li::before{content:"— "; color:var(--amber-hi)}

/* ============================================================
   FAQ
   ============================================================ */
#faq{background:var(--cream); color:var(--ink); padding:clamp(100px,12vw,170px) 0}
#faq .hd{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,90px); margin-bottom:70px; align-items:end}
#faq .label{color:var(--oak-500)}
#faq .hd h2{margin-top:26px}
#faq .hd .help{font-size:14px; color:var(--ink-soft)}
#faq .hd .ulink{color:var(--ink); margin-top:18px}
.faq-group{margin-bottom:54px}
.faq-group .label{color:var(--oak-500); margin-bottom:10px}
details{border-top:1px solid var(--hair-l)}
details:last-child{border-bottom:1px solid var(--hair-l)}
summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:30px; padding:26px 0; font-family:var(--serif); font-weight:400; font-size:clamp(19px,1.6vw,24px);
}
summary::-webkit-details-marker{display:none}
summary .pm{flex:0 0 auto; width:14px; height:14px; position:relative}
summary .pm::before, summary .pm::after{content:""; position:absolute; inset:0; margin:auto; background:var(--oak-500)}
summary .pm::before{width:14px; height:1px}
summary .pm::after{width:1px; height:14px; transition:transform .3s}
details[open] summary .pm::after{transform:rotate(90deg)}
details .a{padding:0 0 28px; color:var(--ink-soft); max-width:46em}

/* ============================================================
   JOURNAL — editorial cards (image / rule / text)
   ============================================================ */
#journal{background:var(--esp-900); padding:clamp(100px,12vw,170px) 0}
#journal .hd{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:26px; margin-bottom:64px}
.jgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,44px)}
.jcard .ph{overflow:hidden; aspect-ratio:4/3}
.jcard img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.jcard:hover img{transform:scale(1.05)}
.jcard .rule{height:1px; background:var(--hair-d); margin:20px 0 14px; position:relative}
.jcard .rule::before{content:""; position:absolute; left:0; top:-1.5px; width:34px; height:4px; background:var(--amber)}
.jcard .tags{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber-hi); font-weight:700; display:flex; gap:16px; margin-bottom:12px}
.jcard h3{font-size:clamp(20px,1.8vw,27px); font-weight:400; line-height:1.3; transition:color .3s}
.jcard:hover h3{color:var(--amber-hi)}
.jcard p{margin-top:10px; font-size:14px; color:var(--latte)}

/* ============================================================
   CTA — split panel
   ============================================================ */
#cta{display:grid; grid-template-columns:1.1fr 1fr; background:var(--cof-800); overflow:hidden}
#cta .tx{padding:clamp(70px,8vw,130px) clamp(24px,5vw,90px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start}
#cta .small{font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--amber-hi); font-weight:700}
#cta h2{margin-top:26px; max-width:9em}
#cta p{max-width:30em; margin-top:24px; color:var(--latte)}
#cta .btn{margin-top:44px}
#cta .ph{position:relative; overflow:hidden; min-height:420px}
#cta .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform}
#cta .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(to right, var(--cof-800), transparent 40%)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--esp-950); position:relative}
.foot-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:clamp(30px,4vw,70px); padding:clamp(70px,8vw,110px) 0 60px}
.foot-brand .fw{font-family:var(--serif); font-size:26px}
.foot-brand .fw .amp{font-style:italic; color:var(--amber-hi)}
.foot-brand .est{margin-top:16px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--latte)}
.foot-brand address{font-style:normal; margin-top:26px; color:var(--latte); font-size:14px; line-height:2}
.foot-brand address a:hover{color:var(--amber-hi)}
.fcol .t{font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--amber); font-weight:700; margin-bottom:20px}
.fcol a{display:block; padding:5px 0; color:var(--latte); font-size:15px; transition:color .25s, transform .25s}
.fcol a:hover{color:var(--cream); transform:translateX(4px)}
.fnews p{color:var(--latte); font-size:14px; max-width:26em}
.fnews form{display:flex; margin-top:22px; border-bottom:1px solid var(--hair-d)}
.fnews input{flex:1; background:none; border:0; outline:0; color:var(--cream); font:inherit; padding:12px 0}
.fnews input::placeholder{color:var(--bark-600)}
.fnews button{background:none;border:0;color:var(--amber-hi);cursor:pointer; font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700}
.fnews .fine{font-size:12px; color:var(--bark-600); margin-top:14px}
.foot-mid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; padding:28px 0; border-top:1px solid var(--hair-d); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--latte)}
.foot-mid .soc{display:flex; gap:26px}
.foot-mid a:hover{color:var(--amber-hi)}
/* outlined serif wordmark — no photo */
.foot-word{overflow:hidden; padding:clamp(30px,4vw,60px) 0 0; text-align:center; position:relative}
.foot-word::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(520px,70%); height:1px; background:linear-gradient(90deg,transparent,var(--amber),transparent)}
.foot-word h2{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(80px,13.5vw,220px); line-height:.95; margin-bottom:-.18em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px var(--bark-600);
  transition:color 1.2s ease;
}
.foot-word h2.in{color:rgba(198,138,78,.14)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .hero-body{grid-template-columns:1fr}
  .hero-photo{order:-1}
  .stamp{top:-40px; right:16px; width:88px; height:88px}
  #whatwedo .grid, #stories .hd, #faq .hd, #story .grid{grid-template-columns:1fr}
  .spread, .spread:nth-child(even){grid-template-columns:1fr}
  .spread:nth-child(even) .ph{order:0}
  .spread .ghost{display:none}
  #founder .in-z{grid-template-columns:1fr}
  #founder .portrait{width:180px}
  .phase{grid-template-columns:1fr}
  .statgrid{grid-template-columns:1fr}
  .jgrid{grid-template-columns:1fr}
  #cta{grid-template-columns:1fr}
  #cta .ph{min-height:300px; order:-1}
  #cta .ph::after{background:linear-gradient(to top, var(--cof-800), transparent 50%)}
  .foot-top{grid-template-columns:1fr 1fr}
  .head-word{display:none}
  .svc-row{grid-template-columns:50px 1fr auto}
  .svc-row .desc{grid-column:1/4; max-height:200px; opacity:1; margin-top:8px}
}

/* ============================================================
   SUBPAGES — shared chrome (work/ and journal/)
   ============================================================ */
body.sub{background:var(--esp-900)}
body.sub header{background:rgba(18,11,6,.85); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--hair-d)}

/* breadcrumb + page masthead */
.pagehead{padding:calc(var(--head) + clamp(56px,7vw,104px)) 0 clamp(48px,6vw,84px); position:relative}
.pagehead.tight{padding-bottom:clamp(30px,4vw,50px)}
.crumb{display:flex; align-items:center; gap:12px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--latte); margin-bottom:clamp(30px,4vw,54px)}
.crumb a{transition:color .25s}
.crumb a:hover{color:var(--amber-hi)}
.crumb .sep{color:var(--amber); font-size:8px}
.crumb .cur{color:var(--bark-600)}
.pagehead .lede{color:var(--latte); font-size:clamp(15px,1.35vw,18px); max-width:34em; margin-top:clamp(24px,3vw,36px); line-height:1.85}
.pagehead .headgrid{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(30px,5vw,80px); align-items:end}

/* back-to-top / section rule */
.hr-amber{height:1px; background:var(--hair-d); position:relative}
.hr-amber::before{content:""; position:absolute; left:0; top:-1.5px; width:44px; height:4px; background:var(--amber)}

/* ============================================================
   WORK INDEX — filterable editorial register
   ============================================================ */
#windex{padding:0 0 clamp(90px,11vw,150px)}
.wfilter{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:26px 0 clamp(50px,6vw,80px); border-top:1px solid var(--hair-d)}
.wfilter .flabel{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--bark-600); margin-right:18px}
.wfilter button{
  background:none; border:1px solid var(--hair-d); color:var(--latte); cursor:pointer;
  font:600 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  padding:13px 20px; border-radius:0; transition:color .3s, border-color .3s, background .3s;
}
.wfilter button:hover{color:var(--cream); border-color:var(--oak-500)}
.wfilter button.on{background:var(--amber); border-color:var(--amber); color:var(--esp-950)}
.wfilter .count{margin-left:auto; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bark-600)}

.wlist{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(40px,5vw,86px) clamp(26px,3.4vw,54px)}
.witem{position:relative; display:block; transition:opacity .5s, transform .5s}
.witem.hide{display:none}
.witem:nth-child(4n+1),.witem:nth-child(4n+4){grid-column:span 1}
.witem .ph{overflow:hidden; position:relative; background:var(--cof-800)}
.witem .ph img{width:100%; aspect-ratio:4/3.05; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.witem:hover .ph img{transform:scale(1.05)}
.witem .ph::after{
  content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(18,11,6,.72), transparent 46%);
  opacity:0; transition:opacity .5s;
}
.witem:hover .ph::after{opacity:1}
.witem .num{
  position:absolute; top:-.5em; left:-.06em; z-index:2; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(62px,6.4vw,104px); line-height:1; color:transparent; -webkit-text-stroke:1px var(--bark-600);
  transition:-webkit-text-stroke-color .5s;
}
.witem:hover .num{-webkit-text-stroke-color:var(--amber)}
.witem .body{padding-top:24px; display:grid; grid-template-columns:1fr auto; gap:10px 24px; align-items:start}
.witem .meta{grid-column:1/-1; display:flex; gap:12px; flex-wrap:wrap; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--latte)}
.witem .meta i{color:var(--amber); font-style:normal}
.witem h3{font-size:clamp(23px,2.2vw,34px); font-weight:400; line-height:1.24; transition:color .3s; margin-top:6px}
.witem:hover h3{color:var(--amber-hi)}
.witem .arrow{margin-top:10px; color:var(--amber); transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.witem:hover .arrow{transform:translateX(8px)}
.witem p{grid-column:1/-1; color:var(--latte); font-size:14.5px; max-width:34em; margin-top:2px}

/* ============================================================
   CASE STUDY — project detail page
   ============================================================ */
.cs-hero{position:relative; height:clamp(440px,74vh,760px); overflow:hidden; background:var(--cof-800)}
.cs-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform}
.cs-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, var(--esp-900) 2%, rgba(18,11,6,.62) 38%, rgba(18,11,6,.28))}
.cs-hero .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding-bottom:clamp(38px,5vw,70px);
}
.cs-hero h1{font-size:clamp(38px,5.6vw,88px); font-weight:300; max-width:15em; margin-top:22px}
.cs-hero .meta{display:flex; gap:14px; flex-wrap:wrap; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--latte); margin-top:26px}
.cs-hero .meta i{color:var(--amber); font-style:normal}

/* fact sheet */
.factsheet{border-top:1px solid var(--hair-d); border-bottom:1px solid var(--hair-d); padding:clamp(34px,4vw,54px) 0; margin:clamp(56px,7vw,96px) 0 clamp(56px,7vw,90px)}
.factgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,44px)}
.factgrid .f .k{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); font-weight:700; margin-bottom:12px}
.factgrid .f .v{font-family:var(--serif); font-size:clamp(17px,1.5vw,22px); font-weight:400; line-height:1.4}
.factgrid .f .sub{font-size:12.5px; color:var(--latte); margin-top:7px; line-height:1.6}

/* long-form body shared by case studies + articles */
.prose{max-width:36em}
.prose.wide{max-width:44em}
.prose h2{font-size:clamp(26px,2.7vw,40px); font-weight:400; margin:clamp(48px,5.5vw,76px) 0 22px; line-height:1.16}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(19px,1.7vw,25px); font-weight:500; margin:clamp(34px,4vw,52px) 0 16px; color:var(--cream)}
.prose p{color:var(--latte); font-size:clamp(15.5px,1.15vw,17px); line-height:1.92; margin-bottom:22px}
.prose p strong{color:var(--cream); font-weight:600}
.prose p em{color:var(--amber-hi); font-style:italic}
.prose a.inline{color:var(--amber-hi); border-bottom:1px solid var(--hair-d); transition:border-color .3s}
.prose a.inline:hover{border-color:var(--amber)}
.prose ul,.prose ol{margin:0 0 26px; padding-left:0; list-style:none}
.prose ol{counter-reset:pl}
.prose li{color:var(--latte); font-size:clamp(15px,1.1vw,16.5px); line-height:1.8; padding-left:34px; margin-bottom:14px; position:relative}
.prose ul li::before{content:"◆"; position:absolute; left:6px; top:.08em; color:var(--amber); font-size:9px}
.prose ol li{counter-increment:pl}
.prose ol li::before{content:counter(pl,lower-roman) "."; position:absolute; left:0; top:0; color:var(--amber); font-family:var(--serif); font-style:italic; font-size:15px}
.prose li strong{color:var(--cream); font-weight:600}
.prose > .lead{font-size:clamp(17px,1.6vw,21px); line-height:1.72; color:var(--parch); margin-bottom:34px}

/* pull quote */
.pullq{margin:clamp(48px,6vw,80px) 0; padding-left:clamp(22px,3vw,40px); border-left:1px solid var(--amber); max-width:30em}
.pullq blockquote{font-family:var(--serif); font-weight:300; font-size:clamp(23px,2.5vw,36px); line-height:1.28; letter-spacing:-.01em}
.pullq blockquote em{color:var(--amber-hi); font-style:italic}
.pullq .attr{margin-top:22px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--latte)}

/* callout / shop note */
.shopnote{
  background:var(--cof-800); border-top:2px solid var(--amber);
  padding:clamp(28px,3.4vw,44px); margin:clamp(42px,5vw,68px) 0; max-width:38em;
}
.shopnote .t{font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--amber); font-weight:700; margin-bottom:16px}
.shopnote p{color:var(--latte); font-size:15px; line-height:1.85; margin-bottom:0}
.shopnote p + p{margin-top:14px}

/* figures */
.figure{margin:clamp(48px,6vw,84px) 0}
.figure.full{max-width:none}
.figure .fimg{overflow:hidden; background:var(--cof-800)}
.figure img{width:100%; object-fit:cover}
.figure figcaption{display:flex; gap:14px; align-items:baseline; margin-top:16px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bark-600)}
.figure figcaption .n{color:var(--amber); font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:0; font-size:14px}
.figpair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px)}
.figpair img{aspect-ratio:3/3.6; width:100%; object-fit:cover}

/* spec table */
.spectable{width:100%; border-collapse:collapse; margin:clamp(34px,4vw,54px) 0; font-size:14.5px}
.spectable tr{border-bottom:1px solid var(--hair-d)}
.spectable tr:first-child{border-top:1px solid var(--hair-d)}
.spectable th{
  text-align:left; padding:17px 22px 17px 0; width:34%; vertical-align:top;
  font:700 10px/1.6 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--amber);
}
.spectable td{padding:17px 0; color:var(--latte); line-height:1.75; vertical-align:top}
.spectable td strong{color:var(--cream); font-weight:600}

/* next / prev project or post */
.nextup{border-top:1px solid var(--hair-d); padding-block:clamp(50px,6vw,84px) clamp(70px,9vw,120px)}
.nextup .k{font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--amber); margin-bottom:26px}
.nextup .row{display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center}
.nextup h3{font-size:clamp(28px,3.6vw,56px); font-weight:300; transition:color .35s; line-height:1.1}
.nextup a:hover h3{color:var(--amber-hi)}
.nextup .thumb{width:clamp(120px,14vw,210px); aspect-ratio:4/3; overflow:hidden}
.nextup .thumb img{width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.nextup a:hover .thumb img{transform:scale(1.06)}

/* ============================================================
   JOURNAL INDEX + ARTICLE
   ============================================================ */
/* featured post */
.jfeat{display:grid; grid-template-columns:1.12fr 1fr; gap:clamp(30px,4.4vw,72px); align-items:center; padding-bottom:clamp(56px,7vw,94px); border-bottom:1px solid var(--hair-d)}
.jfeat .ph{overflow:hidden; position:relative}
.jfeat .ph img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.jfeat:hover .ph img{transform:scale(1.04)}
.jfeat .flag{position:absolute; top:0; left:0; z-index:2; background:var(--amber); color:var(--esp-950); font:700 10px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; padding:12px 18px}
.jfeat .tags{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber-hi); font-weight:700; display:flex; gap:16px; margin-bottom:18px}
.jfeat h2{font-size:clamp(28px,3.4vw,52px); font-weight:400; line-height:1.16; transition:color .3s}
.jfeat:hover h2{color:var(--amber-hi)}
.jfeat p{color:var(--latte); margin-top:20px; font-size:15.5px; line-height:1.85; max-width:32em}
.jfeat .ulink{margin-top:32px; color:var(--cream)}

/* post register */
.jrows{padding-top:clamp(20px,3vw,40px)}
.jrow{
  display:grid; grid-template-columns:auto 1.5fr 1fr auto; gap:clamp(20px,3vw,48px); align-items:center;
  padding:clamp(26px,3vw,40px) 0; border-bottom:1px solid var(--hair-d); position:relative;
}
.jrow .no{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--amber); min-width:2.4em}
.jrow h3{font-size:clamp(20px,2vw,30px); font-weight:400; line-height:1.26; transition:color .3s, transform .4s cubic-bezier(.2,.8,.2,1)}
.jrow:hover h3{color:var(--amber-hi)}
.jrow .dek{color:var(--latte); font-size:14.5px; line-height:1.75}
.jrow .rmeta{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bark-600); display:flex; flex-direction:column; gap:8px; text-align:right}
.jrow .rmeta .cat{color:var(--amber-hi); font-weight:700}
.jrow::after{content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--amber); transition:width .6s cubic-bezier(.2,.8,.2,1)}
.jrow:hover::after{width:100%}

/* article masthead + body */
.artmast{padding-block:calc(var(--head) + clamp(50px,6vw,90px)) 0}
.artmast .tags{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--amber-hi); font-weight:700; display:flex; gap:18px; flex-wrap:wrap; margin-bottom:26px}
.artmast h1{font-size:clamp(34px,5vw,76px); font-weight:300; max-width:16em; line-height:1.08}
.artmast .dek{color:var(--parch); font-size:clamp(16px,1.55vw,20px); line-height:1.7; max-width:32em; margin-top:clamp(24px,3vw,34px)}
.byline{display:flex; align-items:center; gap:16px; margin-top:clamp(32px,4vw,46px); padding-bottom:clamp(38px,4.5vw,58px)}
.byline img{width:46px; height:46px; border-radius:50%; object-fit:cover}
.byline .n{font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700}
.byline .d{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--latte); margin-top:5px}
.artcover{overflow:hidden; background:var(--cof-800); margin-bottom:clamp(56px,7vw,94px)}
.artcover img{width:100%; aspect-ratio:16/8.2; object-fit:cover}

/* article two-column: sticky rail + prose */
.artbody{display:grid; grid-template-columns:200px 1fr; gap:clamp(30px,5vw,90px); align-items:start; padding-bottom:clamp(60px,8vw,110px)}
.artrail{position:sticky; top:calc(var(--head) + 40px)}
.artrail .t{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--bark-600); margin-bottom:20px}
.artrail a{display:block; font-size:13.5px; color:var(--latte); padding:9px 0 9px 16px; border-left:1px solid var(--hair-d); transition:color .3s, border-color .3s}
.artrail a:hover,.artrail a.on{color:var(--amber-hi); border-color:var(--amber)}
.artrail .share{margin-top:34px; border-top:1px solid var(--hair-d); padding-top:22px}
.artrail .share a{border:0; padding:6px 0}

/* author card */
.authorcard{display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,3vw,38px); align-items:start; background:var(--cof-800); padding:clamp(28px,3.4vw,46px); margin-top:clamp(48px,6vw,80px)}
.authorcard .pf{width:clamp(76px,9vw,116px); aspect-ratio:1; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; overflow:hidden}
.authorcard .pf img{width:100%; height:100%; object-fit:cover}
.authorcard .r{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); font-weight:700; margin-bottom:12px}
.authorcard h4{font-family:var(--serif); font-size:clamp(20px,1.9vw,27px); font-weight:400; margin-bottom:14px}
.authorcard p{color:var(--latte); font-size:14.5px; line-height:1.8; max-width:36em}

/* related posts */
.related{border-top:1px solid var(--hair-d); padding-block:clamp(56px,7vw,94px) clamp(70px,9vw,120px)}
.related .hd{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:20px; margin-bottom:clamp(36px,4.5vw,58px)}

/* ============================================================
   SUBPAGE RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .artbody{grid-template-columns:1fr}
  .artrail{position:static; display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; border-bottom:1px solid var(--hair-d); padding-bottom:22px; margin-bottom:44px}
  .artrail .t{margin-bottom:0; width:100%}
  .artrail a{border-left:0; padding:4px 0; font-size:12.5px}
  .artrail .share{margin-top:0; border-top:0; padding-top:0; display:flex; gap:18px; width:100%}
}
@media (max-width:960px){
  .pagehead .headgrid{grid-template-columns:1fr; gap:24px; align-items:start}
  .wlist{grid-template-columns:1fr; gap:clamp(44px,7vw,64px)}
  .witem .num{font-size:clamp(54px,13vw,80px)}
  .factgrid{grid-template-columns:repeat(2,1fr)}
  .jfeat{grid-template-columns:1fr; gap:26px}
  .jrow{grid-template-columns:auto 1fr; gap:14px 20px}
  .jrow .dek{grid-column:2/-1}
  .jrow .rmeta{grid-column:2/-1; flex-direction:row; gap:16px; text-align:left}
  .nextup .row{grid-template-columns:1fr}
  .nextup .thumb{display:none}
  .authorcard{grid-template-columns:1fr}
  .figpair{grid-template-columns:1fr}
  .figpair img{aspect-ratio:4/3}
  .spectable th{width:auto; display:block; padding:16px 0 6px}
  .spectable td{display:block; padding:0 0 16px}
  .cs-hero{height:clamp(360px,60vh,520px)}
  .wfilter .count{width:100%; margin-left:0; padding-top:6px}
}
@media (max-width:560px){
  .factgrid{grid-template-columns:1fr}
  .wfilter button{padding:11px 14px; font-size:10px}
}

/* ============================================================
   SERVICES PAGE — in-depth service blocks
   ============================================================ */
#svcpage{padding-bottom:clamp(40px,5vw,70px)}
.svc-detail{
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,4.6vw,84px);
  align-items:start; padding:clamp(56px,7vw,104px) 0; border-top:1px solid var(--hair-d);
  position:relative;
}
.svc-detail:nth-child(even) .svc-media{order:2}
.svc-media{position:relative; position:sticky; top:calc(var(--head) + 40px)}
.svc-media .ph{overflow:hidden; background:var(--cof-800)}
.svc-media img{width:100%; aspect-ratio:4/3.4; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.svc-detail:hover .svc-media img{transform:scale(1.04)}
.svc-media .no{
  position:absolute; top:-.52em; left:-.05em; z-index:2; font-family:var(--serif); font-style:italic;
  font-weight:300; font-size:clamp(58px,6vw,96px); line-height:1; color:transparent;
  -webkit-text-stroke:1px var(--bark-600);
}
.svc-detail h2{font-size:clamp(27px,3.1vw,46px); font-weight:400; line-height:1.14; margin-bottom:20px}
.svc-detail .lede{color:var(--parch); font-size:clamp(16px,1.4vw,19px); line-height:1.7; margin-bottom:30px; max-width:30em}
.svc-detail p{color:var(--latte); font-size:15.5px; line-height:1.88; margin-bottom:18px; max-width:34em}
.svc-detail p strong{color:var(--cream); font-weight:600}

.svc-covers{margin:30px 0 34px}
.svc-covers .t{font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--amber); font-weight:700; margin-bottom:18px}
.svc-covers ul{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:9px 26px}
.svc-covers li{position:relative; padding-left:22px; font-size:14.5px; color:var(--latte); line-height:1.6}
.svc-covers li::before{content:"◆"; position:absolute; left:0; top:.28em; color:var(--amber); font-size:8px}

.svc-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; border-top:1px solid var(--hair-d); border-bottom:1px solid var(--hair-d); padding:24px 0; margin:32px 0 28px}
.svc-strip .k{font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--bark-600); margin-bottom:9px}
.svc-strip .v{font-family:var(--serif); font-size:clamp(15px,1.3vw,19px); font-weight:400; line-height:1.35}
.svc-seen{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--bark-600)}
.svc-seen a{color:var(--amber-hi); border-bottom:1px solid var(--hair-d); padding-bottom:3px; transition:border-color .3s}
.svc-seen a:hover{border-color:var(--amber)}

/* what the quote covers */
#quotecovers{background:var(--cof-800); padding:clamp(70px,9vw,120px) 0}
#quotecovers .hd{margin-bottom:clamp(40px,5vw,66px); max-width:34em}
#quotecovers .hd p{color:var(--latte); margin-top:20px; font-size:15.5px; line-height:1.85}
.qgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.4vw,54px)}
.qgrid .q .n{font-family:var(--serif); font-style:italic; color:var(--amber); font-size:15px; margin-bottom:14px}
.qgrid .q h3{font-size:clamp(17px,1.5vw,22px); font-weight:400; margin-bottom:12px}
.qgrid .q p{color:var(--latte); font-size:14.5px; line-height:1.8}

@media (max-width:960px){
  .svc-detail{grid-template-columns:1fr; gap:26px; padding:clamp(44px,7vw,64px) 0}
  .svc-detail:nth-child(even) .svc-media{order:0}
  .svc-media{position:static}
  .svc-media .no{font-size:clamp(50px,12vw,76px)}
  .svc-covers ul{grid-template-columns:1fr}
  .svc-strip{grid-template-columns:1fr; gap:16px; text-align:left}
  .qgrid{grid-template-columns:1fr; gap:32px}
}

/* ============================================================
   CONTACT MODAL — opens from any "Start a Project" trigger
   ============================================================ */
#contact{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:clamp(16px,4vw,48px);
  opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s .45s;
}
#contact.open{opacity:1; visibility:visible; transition:opacity .45s ease}
#contact .veil{position:absolute; inset:0; background:rgba(9,5,2,.82); backdrop-filter:blur(6px)}
.cdialog{
  position:relative; z-index:1; width:min(920px,100%); max-height:calc(100vh - clamp(32px,8vw,96px));
  overflow-y:auto; background:var(--esp-950); border:1px solid var(--hair-d);
  display:grid; grid-template-columns:.85fr 1.15fr;
  transform:translateY(26px) scale(.985); transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
#contact.open .cdialog{transform:none}
.cdialog .aside{
  background:var(--cof-800); padding:clamp(30px,3.4vw,46px); position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; gap:34px;
}
.cdialog .aside::after{
  content:""; position:absolute; inset:0; background:url(../img/story-chisel.jpg) center/cover;
  opacity:.14; mix-blend-mode:luminosity; pointer-events:none;
}
.cdialog .aside > *{position:relative; z-index:1}
.cdialog .aside h2{font-size:clamp(26px,2.6vw,38px); font-weight:300; line-height:1.14}
.cdialog .aside h2 em{font-style:italic; color:var(--amber-hi)}
.cdialog .aside .blurb{color:var(--latte); font-size:14px; line-height:1.8; margin-top:18px}
.cdialog .aside .det{font-size:12.5px; color:var(--latte); line-height:2}
.cdialog .aside .det a:hover{color:var(--amber-hi)}
.cdialog .aside .det .k{font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); font-weight:700; margin-bottom:8px}
.cbody{padding:clamp(30px,3.4vw,46px); padding-top:clamp(56px,5vw,68px)}
#cclose{
  position:absolute; top:14px; right:14px; z-index:3; width:40px; height:40px; cursor:pointer;
  background:rgba(18,11,6,.6); border:1px solid var(--hair-d); color:var(--cream);
  display:grid; place-items:center; font-size:18px; line-height:1; transition:background .3s, color .3s;
}
#cclose:hover{background:var(--amber); color:var(--esp-950)}
.cform{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px}
.cfield{display:flex; flex-direction:column; gap:8px}
.cfield.full{grid-column:1/-1}
.cfield label{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); font-weight:700}
.cfield label .opt{color:var(--bark-600); font-weight:400}
.cfield input, .cfield select, .cfield textarea{
  background:transparent; border:0; border-bottom:1px solid var(--hair-d); outline:0;
  color:var(--cream); font:15px/1.6 var(--sans); padding:9px 0; border-radius:0;
  transition:border-color .3s;
}
.cfield textarea{resize:vertical; min-height:74px}
.cfield input::placeholder, .cfield textarea::placeholder{color:var(--bark-600)}
.cfield input:focus, .cfield textarea:focus{border-color:var(--amber)}

/* Chrome/Safari force a pale autofill background and their own text colour.
   The inset shadow is the only way to repaint it; the long transition stops
   the flash on load. Colour stays --cream, same as every other body text. */
.cfield input:-webkit-autofill,
.cfield input:-webkit-autofill:hover,
.cfield input:-webkit-autofill:focus,
.cfield input:-webkit-autofill:active,
.cfield textarea:-webkit-autofill,
.cfield textarea:-webkit-autofill:hover,
.cfield textarea:-webkit-autofill:focus,
.fnews input:-webkit-autofill,
.fnews input:-webkit-autofill:hover,
.fnews input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--cream);
  -webkit-box-shadow:0 0 0 1000px var(--esp-950) inset;
  box-shadow:0 0 0 1000px var(--esp-950) inset;
  caret-color:var(--cream);
  border-bottom:1px solid var(--hair-d);
  transition:background-color 100000s ease-in-out 0s, border-color .3s;
}
.cfield input:-webkit-autofill:focus{border-bottom-color:var(--amber)}
/* Firefox */
.cfield input:autofill, .fnews input:autofill{background:transparent; color:var(--cream)}

/* ---------- custom dropdown: the site's own, never the OS one ---------- */
.cselect{position:relative}
.cselect > select{position:absolute; left:0; bottom:0; width:1px; height:1px; opacity:0; pointer-events:none}
.csel-trigger{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--hair-d); border-radius:0;
  color:var(--cream); font:15px/1.6 var(--sans); text-align:left; padding:9px 28px 9px 0;
  cursor:pointer; position:relative; transition:border-color .3s, color .3s;
}
.csel-trigger.placeholder{color:var(--bark-600)}
.csel-trigger:focus{outline:0; border-color:var(--amber)}
.cselect.open .csel-trigger{border-color:var(--amber)}
.csel-caret{
  position:absolute; right:3px; top:50%; width:7px; height:7px; margin-top:-6px; pointer-events:none;
  border-right:1px solid var(--amber); border-bottom:1px solid var(--amber);
  transform:rotate(45deg); transition:transform .38s cubic-bezier(.2,.8,.2,1), margin-top .38s cubic-bezier(.2,.8,.2,1);
}
.cselect.open .csel-caret{transform:rotate(225deg); margin-top:-2px}
.csel-panel{
  position:absolute; left:0; top:calc(100% + 7px); z-index:6;
  min-width:100%; width:max-content; max-width:min(320px,74vw);
  background:var(--esp-900); border:1px solid var(--hair-d); border-radius:0;
  max-height:282px; overflow-y:auto; overscroll-behavior:contain;
  box-shadow:0 18px 44px rgba(9,5,2,.6);
  clip-path:inset(0 0 100% 0); transition:clip-path .42s cubic-bezier(.75,0,.2,1);
  scrollbar-width:thin; scrollbar-color:var(--bark-600) transparent;
}
.csel-panel::-webkit-scrollbar{width:5px}
.csel-panel::-webkit-scrollbar-track{background:transparent}
.csel-panel::-webkit-scrollbar-thumb{background:var(--bark-600)}
.csel-panel::-webkit-scrollbar-thumb:hover{background:var(--oak-500)}
.cselect.open .csel-panel{clip-path:inset(0 0 0 0)}
.cselect.up .csel-panel{top:auto; bottom:calc(100% + 7px); clip-path:inset(100% 0 0 0)}
.cselect.up.open .csel-panel{clip-path:inset(0 0 0 0)}
.csel-opt{
  padding:12px 18px; font-size:14.5px; line-height:1.45; color:var(--latte); cursor:pointer; white-space:nowrap;
  display:flex; align-items:center; gap:10px; position:relative;
  border-bottom:1px solid rgba(198,138,78,.1); transition:color .25s, background .25s;
}
.csel-opt:last-child{border-bottom:0}
.csel-opt::before{content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--amber); transition:width .25s cubic-bezier(.2,.8,.2,1)}
.csel-opt.active{color:var(--cream); background:rgba(198,138,78,.07)}
.csel-opt.active::before{width:2px}
.csel-opt[aria-selected="true"]{color:var(--amber-hi)}
.csel-opt[aria-selected="true"]::after{content:"\25C6"; margin-left:auto; font-size:8px; color:var(--amber)}
.cfield input:invalid:not(:placeholder-shown){border-color:#B4553C}
.cform .actions{grid-column:1/-1; display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:8px}
.cform .fine{font-size:11.5px; color:var(--bark-600); line-height:1.6; flex:1; min-width:180px}
/* success state */
.cdone{display:none; text-align:left}
.cdialog.sent .cform{display:none}
.cdialog.sent .cdone{display:block}
.cdone .tick{width:52px; height:52px; border:1px solid var(--amber); color:var(--amber); display:grid; place-items:center; font-size:22px; margin-bottom:26px}
.cdone h3{font-family:var(--serif); font-size:clamp(22px,2.2vw,31px); font-weight:400; margin-bottom:16px}
.cdone p{color:var(--latte); font-size:14.5px; line-height:1.85; margin-bottom:14px; max-width:34em}
.cdone .note{font-size:12px; color:var(--bark-600); border-top:1px solid var(--hair-d); padding-top:16px; margin-top:24px}

@media (max-width:820px){
  .cdialog{grid-template-columns:1fr}
  .cdialog .aside{padding-bottom:28px; gap:22px}
  .cdialog .aside .det{display:none}
  .cform{grid-template-columns:1fr}
}