/* Twin Senses · 2026 */
:root{
  --bone:#F2EEE7; --sand:#E6DFD3; --stone:#8C8577; --ink:#1C1B19; --ink-2:#2A2825;
  --wood:#9A7653; --line:rgba(28,27,25,.14); --line-l:rgba(242,238,231,.22);
  --serif:"Cormorant Garamond", Georgia, serif; --sans:"Plus Jakarta Sans", system-ui, sans-serif;
  --gut:clamp(16px,4vw,56px); --max:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font:300 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font:500 12px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--stone);margin-bottom:18px}
.eyebrow.light{color:rgba(242,238,231,.8)}
.display{font:400 clamp(44px,6.4vw,96px)/.98 var(--serif);letter-spacing:-.01em}
.display em,.hero-title em{font-style:italic}
.display.light{color:var(--bone)}
.display-s{font:400 clamp(34px,4vw,56px)/1.02 var(--serif);margin-bottom:20px}
.section-lead{max-width:640px;font-size:18px;color:#4a4740;margin-top:24px}
.section-lead strong{font-weight:500;color:var(--ink)}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gut);transition:background .4s,padding .4s,box-shadow .4s}
.brand img{height:44px;width:auto}
.logo-dark{display:none}
.nav{display:flex;gap:36px}
.nav a{font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bone);position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .35s}
.nav a:hover::after{width:100%}
.site-header.is-solid{background:rgba(242,238,231,.94);backdrop-filter:blur(10px);padding:14px var(--gut);box-shadow:0 1px 0 var(--line)}
.site-header.is-solid .nav a{color:var(--ink)}
.site-header.is-solid .logo-light{display:none}
.site-header.is-solid .logo-dark{display:block}
.nav-toggle{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;position:relative}
.nav-toggle span{position:absolute;left:8px;right:8px;height:1.5px;background:var(--bone);transition:.3s}
.nav-toggle span:first-child{top:15px}.nav-toggle span:last-child{top:24px}
.site-header.is-solid .nav-toggle span{background:var(--ink)}

/* Hero */
.hero,.phero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--bone);overflow:hidden;background:var(--ink)}
.phero{min-height:88svh}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .hero-media{filter:grayscale(.15)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,17,.45) 0%,rgba(20,19,17,.05) 35%,rgba(20,19,17,.65) 100%)}
.hero-inner,.phero-inner{position:relative;padding-bottom:clamp(64px,12vh,140px);width:100%}
.hero-title{font:400 clamp(48px,8.4vw,128px)/.95 var(--serif);letter-spacing:-.015em;margin-bottom:28px}
.hero-sub{max-width:520px;font-size:18px;color:rgba(242,238,231,.88);margin-bottom:40px}
.btn{display:inline-block;border:1px solid currentColor;padding:16px 30px;font:500 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;transition:background .3s,color .3s}
.btn.light:hover{background:var(--bone);color:var(--ink)}
.scroll-cue{position:absolute;right:var(--gut);bottom:44px;width:1px;height:64px;background:var(--line-l);overflow:hidden}
.scroll-cue span{position:absolute;left:0;top:-30px;width:1px;height:30px;background:var(--bone);animation:cue 2.2s infinite}
@keyframes cue{to{top:64px}}
.back{display:inline-block;font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(242,238,231,.8);margin-bottom:40px}
.back:hover{color:var(--bone)}

/* Intro */
.intro{padding:clamp(90px,14vw,180px) 0 clamp(70px,10vw,140px)}
.intro-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(40px,7vw,120px);align-items:end}
.intro-text{font:400 clamp(28px,3.2vw,46px)/1.18 var(--serif)}
.stats{display:grid;gap:28px}
.stats div{border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:baseline;gap:20px}
.stats dt{font:400 46px/1 var(--serif);min-width:150px}
.stats dd{font-size:14px;color:var(--stone)}

/* Projects */
.projects{padding-bottom:clamp(60px,8vw,120px)}
.section-head{margin-bottom:clamp(50px,7vw,100px)}
.pcard{max-width:var(--max);margin:0 auto clamp(80px,11vw,160px);padding:0 var(--gut);display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.pcard.flip{grid-template-columns:1fr 1.35fr}
.pcard.flip .pcard-media{order:2}
.pcard-media{overflow:hidden;aspect-ratio:4/3;background:var(--sand)}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.pcard-media:hover img{transform:scale(1.04)}
.pnum{font:400 15px/1 var(--serif);font-style:italic;color:var(--stone);margin-bottom:26px}
.ptitle{font:400 clamp(38px,4.4vw,64px)/1 var(--serif);margin-bottom:22px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.badge{font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--line)}
.b-obra{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.b-lic{background:var(--wood);color:#fff;border-color:var(--wood)}
.b-con{background:transparent}
.b-glass{border-color:var(--line-l);color:var(--bone);backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}
.phero .b-con{border-color:var(--line-l);color:var(--bone)}
.plead{color:#4a4740;margin-bottom:28px;max-width:480px}
.pfacts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-bottom:32px}
.pfacts li{padding:16px 12px 0 0;font-size:12.5px;color:var(--stone);line-height:1.4}
.pfacts strong{display:block;font:400 30px/1.1 var(--serif);color:var(--ink);margin-bottom:4px}
.link-arrow{font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:14px}
.link-arrow::after{content:"";width:44px;height:1px;background:currentColor;transition:width .35s}
.link-arrow:hover::after{width:72px}

/* Pipeline */
.pipeline{background:var(--sand);padding:clamp(80px,10vw,140px) 0}
.pipe-head{margin-bottom:56px}
.pipe-grid{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:clamp(24px,3vw,48px);align-items:stretch}
.pipe-item{border-top:1px solid var(--ink);padding-top:22px;font-size:15px;color:#4a4740}
.pipe-n{font:400 88px/1 var(--serif);color:var(--ink)}
.pipe-what{font-weight:500;color:var(--ink);margin:8px 0 4px}
.pipe-phase{font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--wood);margin-bottom:16px}
.pipe-img{overflow:hidden;min-height:320px}
.pipe-img img{width:100%;height:100%;object-fit:cover}

/* Obra */
.obra{background:var(--ink);color:rgba(242,238,231,.82);padding:clamp(90px,12vw,170px) 0}
.obra-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,7vw,110px);align-items:center}
.obra-text .display{margin-bottom:34px}
.obra-text p+p{margin-top:18px}
.obra-imgs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.obra-imgs img{width:100%;aspect-ratio:3/4;object-fit:cover}
.obra-imgs img:last-child{margin-top:80px}

/* Sense living */
.sense{padding:clamp(100px,13vw,180px) 0}
.sense-head{margin-bottom:clamp(50px,7vw,90px)}
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,2.4vw,36px)}
.pillars li{border-top:1px solid var(--line);padding-top:22px}
.pillars span{font:400 italic 16px/1 var(--serif);color:var(--stone)}
.pillars h3{font:400 26px/1.1 var(--serif);margin:18px 0 12px}
.pillars p{font-size:14.5px;color:#4a4740}
.values{margin-top:clamp(70px,9vw,120px);text-align:center;font:400 clamp(26px,3.4vw,48px)/1.2 var(--serif)}
.values i{color:var(--wood);font-style:normal;padding:0 .2em}

/* Team */
.team{background:#fff;padding:clamp(100px,13vw,180px) 0}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.team-card img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--sand);margin-bottom:26px;filter:grayscale(1);transition:filter .6s}
.team-card:hover img{filter:none}
.team-card.partners img{filter:none}
.portrait{position:relative;aspect-ratio:4/5;background:var(--sand);margin-bottom:26px;overflow:hidden}
.portrait img{position:absolute;inset:0;height:100%;margin:0;z-index:1}
.mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 96px/1 var(--serif);color:var(--stone);letter-spacing:.04em}
.team-card.wide{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;margin-top:clamp(60px,8vw,110px)}
.team-card.wide img{aspect-ratio:16/10;margin:0}
.role{font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--wood);margin-bottom:10px}
.team-card h3{font:400 34px/1.05 var(--serif);margin-bottom:14px}
.team-card p{font-size:15px;color:#4a4740}
.team-card p+p{margin-top:12px}
.team-card strong{font-weight:500;color:var(--ink)}

/* Project page */
.pfacts-bar{background:var(--ink);color:var(--bone)}
.pfacts-bar ul{display:grid;grid-template-columns:repeat(3,1fr)}
.pfacts-bar li{padding:34px 24px 34px 0;border-right:1px solid var(--line-l);display:flex;flex-direction:column;gap:4px}
.pfacts-bar li+li{padding-left:28px}
.pfacts-bar li:last-child{border-right:0}
.pfacts-bar strong{font:400 clamp(34px,3.6vw,52px)/1 var(--serif)}
.pfacts-bar span{font-size:13px;color:rgba(242,238,231,.7);letter-spacing:.04em}
.pintro{padding:clamp(90px,12vw,160px) 0}
.pintro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px)}
.plead-lg{font:400 clamp(28px,3vw,42px)/1.2 var(--serif);margin-bottom:26px}
.place{font:500 12px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.pbody p{color:#4a4740}
.pbody p+p{margin-top:20px}
.chapter{padding:0 0 clamp(80px,10vw,140px)}
.chapter-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.chapter.flip .chapter-grid{grid-template-columns:1fr 1.5fr}
.chapter.flip figure{order:2}
.chapter figure{overflow:hidden;aspect-ratio:16/10}
.chapter figure img{width:100%;height:100%;object-fit:cover}
.chapter-text p:last-child{color:#4a4740;max-width:420px}
.pvideo video{width:100%;max-height:86vh;object-fit:cover}
.gallery{padding:clamp(90px,12vw,150px) 0;background:#fff}
.ggrid{column-count:3;column-gap:12px}
.gitem{display:block;overflow:hidden;cursor:zoom-in;background:var(--sand);margin-bottom:12px;break-inside:avoid}
.gitem img{width:100%;height:auto;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.gitem:hover img{transform:scale(1.05)}
.credits{padding:clamp(80px,10vw,130px) 0}
.credits-grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(32px,6vw,96px);align-items:end}
.credits dl{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.credits dl div{border-top:1px solid var(--line);padding-top:14px}
.credits dt{font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-bottom:8px}
.credits dd{font:400 22px/1.25 var(--serif)}
.credits small{font:300 13px/1.5 var(--sans);color:var(--stone)}
.doc{display:flex;flex-direction:column;gap:8px;background:var(--ink);color:var(--bone);padding:34px 32px;transition:background .3s}
.doc:hover{background:var(--wood)}
.doc-label{font:400 28px/1.1 var(--serif)}
.doc-label::after{content:" ↓"}
.doc-meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,238,231,.65)}
.next{display:block;position:relative;padding:clamp(90px,12vw,160px) 0;color:var(--bone);background:var(--ink);overflow:hidden}
.next-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;transition:opacity .5s,transform 1.2s}
.next:hover .next-bg{opacity:.58;transform:scale(1.03)}
.next .wrap{position:relative}
.next-title{font:400 clamp(44px,6vw,90px)/1 var(--serif)}
.next-title span{display:inline-block;transition:transform .4s}
.next:hover .next-title span{transform:translateX(12px)}

/* Contact + footer */
.contact{padding:clamp(100px,12vw,170px) 0;background:var(--bone)}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(40px,7vw,110px);align-items:end}
.contact-lead{max-width:460px;color:#4a4740;margin-top:24px}
.contact-item{display:block;border-top:1px solid var(--line);padding:20px 0;font:400 clamp(22px,2.2vw,30px)/1.2 var(--serif);word-break:break-word}
.contact-item span{display:block;font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-bottom:6px}
a.contact-item:hover{color:var(--wood)}
.site-footer{background:var(--ink);color:rgba(242,238,231,.7);padding:clamp(70px,8vw,110px) 0 36px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:40px}
.footer-logo{width:90px}
.site-footer li{margin-bottom:8px}
.site-footer a:hover{color:var(--bone)}
.site-footer .eyebrow{color:rgba(242,238,231,.45)}
.footer-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:70px;padding-top:24px;border-top:1px solid var(--line-l);font-size:12px;color:rgba(242,238,231,.45)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(14,13,12,.96);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain}
.lightbox button{position:absolute;background:none;border:0;color:var(--bone);font:300 44px/1 var(--sans);cursor:pointer;padding:16px;opacity:.75}
.lightbox button:hover{opacity:1}
.lb-close{top:12px;right:16px}.lb-prev{left:8px}.lb-next{right:8px}

/* Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* Responsive */
@media (max-width:1080px){
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pipe-grid{grid-template-columns:1fr 1fr}.pipe-img{grid-column:1/-1}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  body{font-size:16px}
  .nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;align-items:flex-start;justify-content:center;padding:0 var(--gut);gap:28px;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .nav a{font:400 40px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--bone)!important}
  .nav-toggle{display:block;z-index:2}
  body.menu-open .nav{transform:none}
  body.menu-open .nav-toggle span{background:var(--bone)!important}
  body.menu-open .nav-toggle span:first-child{top:20px;transform:rotate(45deg)}
  body.menu-open .nav-toggle span:last-child{top:20px;transform:rotate(-45deg)}
  .brand img{height:36px}
  .intro-grid,.pcard,.pcard.flip,.obra-grid,.pintro-grid,.chapter-grid,.chapter.flip .chapter-grid,.credits-grid,.contact-grid,.team-grid,.team-card.wide{grid-template-columns:1fr}
  .pcard.flip .pcard-media,.chapter.flip figure{order:0}
  .stats dt{min-width:120px;font-size:38px}
  .obra-imgs img:last-child{margin-top:40px}
  .pfacts-bar ul{grid-template-columns:1fr}
  .pfacts-bar li,.pfacts-bar li+li{padding:20px 0;border-right:0;border-bottom:1px solid var(--line-l)}
  .pfacts-bar li:last-child{border-bottom:0}
  .ggrid{column-count:2;column-gap:8px}.gitem{margin-bottom:8px}
  .credits dl{grid-template-columns:1fr}
  .scroll-cue{display:none}
}
@media (max-width:560px){
  .pillars,.pipe-grid,.footer-grid{grid-template-columns:1fr}
  .pfacts{grid-template-columns:1fr 1fr 1fr}
  .pfacts strong{font-size:24px}
  .pipe-n{font-size:68px}
}