/* Maison Oriel — fictional interior design studio (showcase) */
:root{--bone:#ebe5da;--linen:#f5f1ea;--char:#1d1b18;--clay:#8b6a4f;--mute:#6f685d;--ln:rgba(29,27,24,.16);
--disp:'Cormorant Garamond',Georgia,serif;--body:'Jost',system-ui,sans-serif;--pad:clamp(20px,4vw,64px);--e:cubic-bezier(.2,.8,.2,1);--veil:#1d1b18;--cursor-bg:#1d1b18;--cursor-fg:#f5f1ea}
body{background:var(--linen);color:var(--char);font-family:var(--body);font-weight:300;font-size:clamp(15px,1.02vw,17px);line-height:1.7}
::selection{background:var(--clay);color:var(--linen)}
.w{max-width:1560px;margin:0 auto;padding:0 var(--pad)}
.lbl{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;color:var(--mute)}
.d1{font-family:var(--disp);font-weight:300;font-size:clamp(64px,13vw,236px);line-height:.86;letter-spacing:-.03em}
.d2{font-family:var(--disp);font-weight:300;font-size:clamp(42px,6vw,104px);line-height:.98;letter-spacing:-.02em}
.d3{font-family:var(--disp);font-weight:400;font-size:clamp(28px,2.6vw,44px);line-height:1.08}
.d1 em,.d2 em,.d3 em{font-style:italic}
.sec{padding:clamp(96px,12vw,190px) 0}
.dark{background:var(--char);color:var(--linen)}.dark .lbl{color:#a49b8d}
.bone{background:var(--bone)}
/* nav */
.on{position:fixed;inset:0 0 auto;z-index:100;color:var(--linen);transition:transform .6s var(--e),background .4s,color .4s}
.on.is-scrolled{background:rgba(245,241,234,.88);color:var(--char);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.on.is-scrolled .w{height:72px}.on .w{transition:height .4s var(--e)}
.menu-open .on{color:var(--linen);background:transparent}
.on.is-hidden{transform:translateY(-100%)}
.on .w{display:flex;justify-content:space-between;align-items:center;height:90px}
.on .brand{font-family:var(--disp);font-size:26px;letter-spacing:.02em}
.on .brand em{font-style:italic}
.on nav{display:flex;gap:40px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.on nav a{position:relative}
.on nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e)}
.on nav a:hover::after,.on nav a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.on .burger{display:none;background:none;border:0;color:inherit;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:12px 0}
.omenu{position:fixed;inset:0;z-index:90;background:var(--char);color:var(--linen);display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s cubic-bezier(.77,0,.18,1),visibility 0s .8s}
.menu-open .omenu{clip-path:inset(0);visibility:visible;transition-delay:0s}
.omenu a{font-family:var(--disp);font-size:clamp(48px,13vw,84px);line-height:1.1;font-weight:300}
@media (max-width:860px){.on nav{display:none}.on .burger{display:block}}
/* hero */
.ohero{position:relative;height:100svh;min-height:620px;color:var(--linen);overflow:hidden}
.ohero .media{position:absolute;inset:0}
.ohero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,.45),rgba(20,18,15,0) 35%,rgba(20,18,15,.2) 60%,rgba(20,18,15,.72))}
.ohero__c{position:absolute;inset:auto 0 0;padding-bottom:clamp(28px,4vw,56px)}
.ohero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:28px;font-size:14px}
.ohero__row p{max-width:34ch;color:rgba(245,241,234,.86)}
.scroll-cue{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.scroll-cue i{width:1px;height:44px;background:rgba(245,241,234,.4);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--linen);animation:cue 2.2s var(--e) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (max-width:700px){.ohero__row{flex-direction:column;align-items:flex-start}.scroll-cue{display:none}}
/* intro */
.intro{display:grid;grid-template-columns:1fr 2.2fr;gap:40px}
.intro p.big{font-family:var(--disp);font-size:clamp(30px,3.4vw,58px);line-height:1.14;font-weight:300}
.intro .sig{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:72px;padding-top:28px;border-top:1px solid var(--ln)}
.intro .sig b{display:block;font-family:var(--disp);font-weight:300;font-size:clamp(46px,4.6vw,76px);line-height:1}
.intro .sig span{font-size:13px;color:var(--mute)}
@media (max-width:860px){.intro{grid-template-columns:1fr}.intro .sig{grid-template-columns:1fr 1fr}}
/* horizontal projects */
.hs{overflow:hidden}
.hs__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:56px;flex-wrap:wrap}
.hs__track{display:flex;gap:clamp(16px,2vw,32px);padding-left:var(--pad);will-change:transform}
.pcard{flex:none;width:clamp(280px,34vw,560px)}
.pcard:nth-child(even){margin-top:80px}
.pcard .media{aspect-ratio:4/5;border-radius:2px}
.pcard .media img{transition:transform 1.4s var(--e)}
.pcard:hover .media img{transform:scale(1.05)}
.pcard .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;gap:16px}
.pcard h3{font-family:var(--disp);font-weight:400;font-size:clamp(26px,2.2vw,36px);line-height:1.1}
.pcard .meta span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.pcard.end{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;border:1px solid var(--ln);font-family:var(--disp);font-size:36px;font-style:italic}
@media (max-width:1023px){.hs__track{overflow-x:auto;scroll-snap-type:x mandatory;padding-right:var(--pad);scrollbar-width:none}.pcard{scroll-snap-align:start;width:78vw}.pcard:nth-child(even){margin-top:0}}
/* philosophy */
.phil{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,120px);align-items:center}
.phil .media{aspect-ratio:4/5}
.phil .stack{position:relative}
.phil .stack .small{position:absolute;width:44%;aspect-ratio:3/4;right:-8%;bottom:-10%;border:10px solid var(--bone)}
.phil p{color:var(--mute);max-width:44ch;margin-top:28px}
@media (max-width:860px){.phil{grid-template-columns:1fr}.phil .stack .small{right:0}}
/* services */
.svc{border-top:1px solid rgba(245,241,234,.18)}
.svc__row{display:grid;grid-template-columns:80px 1.2fr 1fr 40px;gap:24px;align-items:baseline;padding:40px 0;border-bottom:1px solid rgba(245,241,234,.18);transition:padding .6s var(--e)}
.svc__row:hover{padding-left:16px}
.svc__row .n{font-family:var(--disp);font-style:italic;color:#a49b8d;font-size:20px}
.svc__row h3{font-family:var(--disp);font-weight:300;font-size:clamp(34px,4vw,64px);line-height:1}
.svc__row p{color:#b8ae9f;font-size:15px}
.svc__row .plus{font-size:28px;font-weight:200;text-align:right}
@media (max-width:860px){.svc__row{grid-template-columns:40px 1fr}.svc__row p{grid-column:2}.svc__row .plus{display:none}}
/* quote */
.oq{text-align:center;max-width:1100px;margin:0 auto}
.oq blockquote{font-family:var(--disp);font-weight:300;font-size:clamp(32px,4.2vw,68px);line-height:1.1;font-style:italic}
.oq cite{display:block;margin-top:36px;font-style:normal}
/* press */
.press{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px 48px;align-items:center;padding:44px 0;border-block:1px solid var(--ln);font-family:var(--disp);font-size:clamp(22px,2vw,30px);color:var(--mute)}
.press span:nth-child(odd){font-style:italic}
/* journal */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px)}
.jcard .media{aspect-ratio:3/2;margin-bottom:20px}
.jcard .media img{transition:transform 1.4s var(--e)}.jcard:hover .media img{transform:scale(1.05)}
.jcard h3{font-family:var(--disp);font-weight:400;font-size:28px;line-height:1.15;margin-top:8px}
@media (max-width:860px){.jgrid{grid-template-columns:1fr}}
/* contact band */
.oband{position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--linen);overflow:hidden}
.oband .media{position:absolute;inset:0}
.oband .media::after{content:"";position:absolute;inset:0;background:rgba(20,18,15,.5)}
.oband .c{position:relative}
.obtn{display:inline-flex;align-items:center;gap:14px;margin-top:40px;height:58px;padding:0 34px;border:1px solid currentColor;border-radius:99px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;position:relative;overflow:hidden;isolation:isolate;transition:color .6s var(--e)}
.obtn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--linen);transform:translateY(101%);border-radius:inherit;transition:transform .6s var(--e)}
.obtn:hover{color:var(--char)}.obtn:hover::before{transform:none}
.obtn.dk::before{background:var(--char)}.obtn.dk:hover{color:var(--linen)}
/* footer */
.of{background:var(--char);color:var(--linen);padding:96px 0 110px}
.of__g{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;font-size:14px}
.of__g h4{font-weight:400;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#a49b8d;margin-bottom:16px}
.of__g li{margin-bottom:8px;color:#d8d0c3}
.of__mark{font-family:var(--disp);font-weight:300;font-size:clamp(70px,17vw,300px);line-height:.8;letter-spacing:-.04em;margin-top:80px}
.of__mark em{font-style:italic}
@media (max-width:860px){.of__g{grid-template-columns:1fr 1fr}.of__g>div:first-child{grid-column:1/-1}}
/* subpage header */
.ophead{padding:clamp(170px,20vw,260px) 0 clamp(56px,7vw,100px)}
.ophead .row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.ophead p{max-width:38ch;color:var(--mute)}
.sub .on{color:var(--char)}
.sub .on.is-scrolled{background:rgba(245,241,234,.85);backdrop-filter:blur(12px)}
/* filters + project grid */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:48px}
.filters button{height:42px;padding:0 20px;border-radius:99px;border:1px solid var(--ln);background:none;cursor:pointer;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);transition:all .4s var(--e)}
.filters button[aria-pressed=true]{background:var(--char);color:var(--linen);border-color:var(--char)}
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px);row-gap:clamp(56px,6vw,96px)}
.pgrid .pcard{width:auto;grid-column:span 6;transition:opacity .5s,transform .5s var(--e)}
.pgrid .pcard:nth-child(3n+1){grid-column:span 7}.pgrid .pcard:nth-child(3n+2){grid-column:span 5;margin-top:120px}
.pgrid .pcard:nth-child(3n){grid-column:3/span 8}
.pgrid .pcard:nth-child(3n) .media{aspect-ratio:16/10}
.pgrid .pcard.hide{display:none}
@media (max-width:860px){.pgrid .pcard,.pgrid .pcard:nth-child(n){grid-column:1/-1;margin-top:0}}
/* case study */
.cs-hero{height:92svh;min-height:560px;position:relative;overflow:hidden}
.cs-hero .media{position:absolute;inset:0}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:40px 0;border-bottom:1px solid var(--ln)}
.facts dt{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.facts dd{margin:0;font-family:var(--disp);font-size:26px}
@media (max-width:700px){.facts{grid-template-columns:1fr 1fr}}
.cs-text{display:grid;grid-template-columns:1fr 1.6fr;gap:40px}
.cs-text p+p{margin-top:1.2em}
.cs-text .body{color:#4b463e;font-size:clamp(16px,1.15vw,19px);max-width:60ch}
@media (max-width:860px){.cs-text{grid-template-columns:1fr}}
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,24px)}
.gal .media:nth-child(1){grid-column:1/-1;aspect-ratio:21/9}
.gal .media:nth-child(2){grid-column:span 5;aspect-ratio:4/5}
.gal .media:nth-child(3){grid-column:span 7;aspect-ratio:7/6}
.gal .media:nth-child(4){grid-column:2/span 10;aspect-ratio:16/9}
@media (max-width:700px){.gal .media:nth-child(n){grid-column:1/-1;aspect-ratio:4/3}}
.next{display:block;text-align:center;padding:clamp(100px,12vw,180px) 0;border-top:1px solid var(--ln)}
.next .d1{transition:letter-spacing .8s var(--e)}
.next:hover .d1{letter-spacing:-.01em}
/* studio */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.mem{border-top:1px solid var(--ln);padding-top:22px}
.mem .mono{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--bone);font-family:var(--disp);font-size:28px;font-style:italic;margin-bottom:28px}
.mem h3{font-family:var(--disp);font-weight:400;font-size:28px}
.mem p{font-size:14px;color:var(--mute)}
@media (max-width:860px){.team{grid-template-columns:1fr 1fr}}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;counter-reset:s}
.steps4 li{border-top:1px solid rgba(245,241,234,.2);padding-top:24px}
.steps4 li::before{counter-increment:s;content:"0" counter(s);font-family:var(--disp);font-style:italic;font-size:22px;color:#a49b8d}
.steps4 h3{font-family:var(--disp);font-weight:300;font-size:36px;margin:40px 0 12px}
.steps4 p{color:#b8ae9f;font-size:15px}
@media (max-width:860px){.steps4{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps4,.team{grid-template-columns:1fr}}
/* form */
.oform{display:grid;grid-template-columns:1fr 1fr;gap:32px 28px}
.oform .full{grid-column:1/-1}
.oform label{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.oform input,.oform select,.oform textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--ln);padding:10px 0 12px;font-family:var(--disp);font-size:24px;border-radius:0}
.oform textarea{min-height:110px;resize:vertical}
.oform :is(input,select,textarea):focus{outline:0;border-color:var(--char)}
.ocontact{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px,7vw,140px)}
.ocontact .addr p{font-family:var(--disp);font-size:26px;line-height:1.3}
.ocontact .addr div{padding:24px 0;border-bottom:1px solid var(--ln)}
@media (max-width:860px){.ocontact,.oform{grid-template-columns:1fr}}