@font-face{font-family:"Playfair";src:url(assets/fonts/playfair-display-latin-wght-normal.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Playfair";src:url(assets/fonts/playfair-display-latin-wght-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Geist";src:url(assets/fonts/geist-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--linen:#F3EDE4;--sand:#E2D6C5;--clay:#6E5034;--sage:#6E7461;--ink:#2B2420;--mute:#5A4E45;--serif:"Playfair",Georgia,serif;--sans:"Geist",system-ui,sans-serif;--pad:clamp(20px,5vw,80px)}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth}
body{background:var(--linen);color:var(--ink);font:16px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--linen);padding:8px 14px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.col-num{font:italic 400 15px var(--serif);color:var(--clay);margin-bottom:18px}

.nav{position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--pad);z-index:20;transition:background .4s,padding .4s}
.nav.solid{background:rgba(243,237,228,.92);backdrop-filter:blur(10px);padding-block:12px;border-bottom:1px solid rgba(43,36,32,.08)}
.nav ul{display:flex;gap:34px;list-style:none}
.nav ul a{text-decoration:none;font-size:14px;position:relative}
.nav ul a::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.btn-line{font-size:14px;text-decoration:none;border:1px solid var(--ink);padding:10px 18px;border-radius:99px;transition:background .3s,color .3s}
.btn-line:hover{background:var(--ink);color:var(--linen)}
.btn{display:inline-block;background:var(--ink);color:var(--linen);text-decoration:none;padding:15px 28px;border-radius:99px;font:500 14px var(--sans);border:0;cursor:pointer;transition:transform .3s,background .3s}
.btn:hover{background:var(--clay);transform:translateY(-2px)}
.link{font-size:14px;text-decoration:none;border-bottom:1px solid var(--clay);padding-bottom:2px}

.hero{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:var(--pad);padding:120px var(--pad) 60px}
.hero h1{font-size:clamp(54px,7.6vw,128px);line-height:.95;margin:22px 0 28px}
.hero h1 em{font-style:italic;color:var(--clay)}
.hero h1 span{display:inline}
.lede{max-width:46ch;color:var(--mute);font-size:17px}
.hero-cta{display:flex;align-items:center;gap:28px;margin-top:36px}
.hero-art figcaption{font:italic 14px var(--serif);color:var(--mute);margin-top:14px}
.room{position:relative;aspect-ratio:4/5;background:linear-gradient(180deg,#EDE3D4 0 70%,#D9C8B2 70% 100%);border-radius:4px;overflow:hidden;transition:background 1s}
.arch{position:absolute;left:18%;top:9%;width:44%;height:54%;border-radius:999px 999px 0 0;background:linear-gradient(180deg,#F9F4EA,#E9DCC8);box-shadow:inset 0 0 0 10px #E1D3BE,inset 0 0 0 11px rgba(43,36,32,.08);overflow:hidden}
.arch-light{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,250,236,.9),rgba(255,236,200,.2));animation:breathe 9s ease-in-out infinite}
.arch::before,.arch::after{content:"";position:absolute;background:#E1D3BE}
.arch::before{left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%)}
.arch::after{left:0;right:0;top:46%;height:4px}
.shadow-cast{position:absolute;left:30%;top:66%;width:62%;height:30%;background:linear-gradient(100deg,rgba(255,244,220,.55),transparent 70%);transform:skewX(-28deg);mix-blend-mode:soft-light;animation:drift 12s ease-in-out infinite alternate}
.sofa{position:absolute;left:8%;right:22%;bottom:17%;height:17%}
.sofa i{position:absolute;inset:0 0 34% 0;background:#CDB9A0;border-radius:40px 40px 10px 10px;transition:background 1s}
.sofa b{position:absolute;left:-3%;right:-3%;bottom:0;height:52%;background:#BFA88C;border-radius:26px;transition:background 1s}
.lamp{position:absolute;right:12%;bottom:17%;width:3px;height:44%;background:var(--ink)}
.lamp span{position:absolute;left:50%;top:-6%;width:70px;height:46px;transform:translateX(-50%);background:#F4E7CF;border-radius:50% 50% 8px 8px;box-shadow:0 0 70px 30px rgba(255,226,170,.35)}
.vase{position:absolute;left:66%;bottom:17%;width:34px;height:60px;background:var(--clay);border-radius:40% 40% 30% 30%}
.vase::before{content:"";position:absolute;left:50%;bottom:90%;width:2px;height:80px;background:#6E7461;transform:rotate(-10deg)}
.floor{position:absolute;inset:auto 0 0;height:17%;background:repeating-linear-gradient(90deg,#CDB79A 0 60px,#C6AF90 60px 61px)}
@keyframes breathe{50%{opacity:.6}}
@keyframes drift{to{transform:skewX(-34deg) translateX(-6%)}}

.marquee{border-block:1px solid rgba(43,36,32,.12);overflow:hidden;padding:20px 0}
.track{display:flex;gap:40px;width:max-content;animation:scroll 40s linear infinite;font:italic 26px var(--serif);color:var(--mute)}
@keyframes scroll{to{transform:translateX(-50%)}}

.studio{display:grid;grid-template-columns:120px 1fr;padding:140px var(--pad)}
.studio h2{font-size:clamp(32px,4.2vw,64px);line-height:1.08;max-width:20ch}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:80px}
.principles article{border-top:1px solid rgba(43,36,32,.2);padding-top:22px}
.principles h3{font-size:26px;margin-bottom:10px}
.principles p{color:var(--mute)}

.rooms{padding:40px 0 120px;background:var(--sand)}
.rooms-head{display:flex;align-items:end;gap:40px;padding:80px var(--pad) 40px}
.rooms-head .col-num{margin:0}
.rooms-head h2{font-size:clamp(40px,5vw,80px);flex:1}
.rooms-ctrl{display:flex;gap:10px}
.circ{width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);background:none;font-size:18px;cursor:pointer;transition:background .3s,color .3s;color:var(--ink)}
.circ:hover{background:var(--ink);color:var(--linen)}
.rail{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 20px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 min(420px,80vw);scroll-snap-align:start}
.card h3{font-size:28px;margin:18px 0 4px}
.card p{color:var(--mute);font-size:15px}
.art{aspect-ratio:4/5;border-radius:3px;position:relative;overflow:hidden;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .art{transform:scale(.98)}
.a1{background:radial-gradient(circle at 70% 25%,#FFF6E6 0 12%,transparent 40%),repeating-linear-gradient(90deg,#C8AE8C 0 14px,#BB9F7C 14px 16px) bottom/100% 45% no-repeat,linear-gradient(#EFE5D6,#E3D4BF)}
.a2{background:radial-gradient(ellipse 34% 40% at 50% 46%,#F5ECDD 0 98%,transparent 100%),radial-gradient(ellipse 60% 22% at 50% 82%,#D5C2A8 0 98%,transparent 100%),linear-gradient(#D9C6AE,#C7AF92)}
.a3{background:radial-gradient(ellipse 26% 18% at 50% 72%,#E9DED0 0 96%,transparent 100%),linear-gradient(180deg,#F5EFE6 0 8%,transparent 8%),linear-gradient(160deg,#C9A27F,#A97F5C)}
.a4{background:repeating-linear-gradient(-32deg,#6B4E3A 0 26px,#7A5B45 26px 52px) 0 100%/100% 55% no-repeat,linear-gradient(#E8DCC9,#D8C5AB)}
.a5{background:radial-gradient(circle at 30% 30%,#A9B092 0 18%,transparent 19%),radial-gradient(circle at 62% 22%,#8E9677 0 14%,transparent 15%),repeating-linear-gradient(45deg,#C27D57 0 30px,#B8714C 30px 32px) 0 100%/100% 35% no-repeat,linear-gradient(#EFE7D8,#E1D2BA)}
.note{padding:20px var(--pad) 0;font-size:13px;color:var(--mute)}

.materials{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--pad);padding:140px var(--pad);align-items:center}
.materials h2{font-size:clamp(34px,4vw,60px);line-height:1.08;margin-bottom:18px}
.materials p{color:var(--mute);max-width:42ch}
.swatches{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
.swatches button{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid rgba(43,36,32,.18);background:none;border-radius:8px;cursor:pointer;font:14px var(--sans);color:var(--ink);text-align:left;transition:border-color .3s,background .3s}
.swatches button::before{content:"";width:34px;height:34px;border-radius:50%;background:var(--c);flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.swatches button[aria-checked="true"]{border-color:var(--ink);background:#fff6}
.mat-board{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:14px;aspect-ratio:1/1;position:relative}
.tile{border-radius:4px;transition:background 1s,transform .8s}
.t1{grid-row:span 2}
.board-label{position:absolute;left:18px;bottom:18px;background:var(--linen);padding:10px 16px;border-radius:99px;font-size:14px}
.mat-board[data-p=linen] .t1{background:linear-gradient(#EDE2D1,#DCCBB2)}.mat-board[data-p=linen] .t2{background:repeating-linear-gradient(90deg,#C8AE8C 0 10px,#BEA27F 10px 12px)}.mat-board[data-p=linen] .t3{background:#F7F1E6}.mat-board[data-p=linen] .t4{background:radial-gradient(#D9C3A3 1px,transparent 1.5px) 0 0/8px 8px,#E8D9C3}
.mat-board[data-p=clay] .t1{background:linear-gradient(#D1A684,#B78763)}.mat-board[data-p=clay] .t2{background:repeating-linear-gradient(90deg,#6E4C36 0 10px,#5E3F2C 10px 12px)}.mat-board[data-p=clay] .t3{background:#EBD6C1}.mat-board[data-p=clay] .t4{background:radial-gradient(#A5714E 1px,transparent 1.5px) 0 0/8px 8px,#C99D7B}
.mat-board[data-p=sage] .t1{background:linear-gradient(#B2B89F,#959C80)}.mat-board[data-p=sage] .t2{background:linear-gradient(135deg,#E6E1D3,#D6CFBD)}.mat-board[data-p=sage] .t3{background:#7E8669}.mat-board[data-p=sage] .t4{background:radial-gradient(#C7C0AA 1px,transparent 1.5px) 0 0/8px 8px,#ECE7DA}
.mat-board[data-p=ink] .t1{background:linear-gradient(#4E443D,#352D28)}.mat-board[data-p=ink] .t2{background:repeating-linear-gradient(0deg,#E1D3BE 0 6px,#D6C6AE 6px 7px)}.mat-board[data-p=ink] .t3{background:#8C7A6A}.mat-board[data-p=ink] .t4{background:radial-gradient(#6B5D52 1px,transparent 1.5px) 0 0/8px 8px,#2F2723}

.process{padding:120px var(--pad);background:var(--ink);color:var(--linen)}
.process h2{font-size:clamp(40px,5vw,80px);margin-bottom:60px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.steps li{border-top:1px solid rgba(243,237,228,.25);padding-top:24px}
.steps span{font:italic 44px var(--serif);color:var(--clay)}
.steps h3{font-size:26px;margin:10px 0}
.steps p{color:#CFC3B6;font-size:15px}

.quote{padding:160px var(--pad);text-align:center}
.quote p{font:italic clamp(32px,4.4vw,68px)/1.15 var(--serif);max-width:20ch;margin:0 auto 20px}
.quote cite{font-style:normal;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

.enquire{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);padding:120px var(--pad);background:var(--sand)}
.enquire h2{font-size:clamp(40px,5vw,80px);margin-bottom:16px}
.enquire p{color:var(--mute);max-width:40ch}
form{display:grid;gap:22px}
label{display:grid;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
input,textarea{font:17px var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(43,36,32,.35);padding:10px 0;letter-spacing:0;text-transform:none;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--ink)}
form .btn{justify-self:start}
.form-msg{font-size:14px;min-height:1.4em}

.foot{padding:70px var(--pad) 90px;display:grid;gap:16px;justify-items:start}
.foot p{color:var(--mute);font-size:14px;max-width:60ch}
.small{font-size:12px!important}

.tarzi-ribbon{position:fixed;right:14px;bottom:14px;z-index:50;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;background:rgba(43,36,32,.88);color:#F3EDE4;padding:8px 12px;border-radius:99px;opacity:.85}
.tarzi-ribbon:hover{opacity:1}

.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media (max-width:900px){
  .nav ul{display:none}
  .hero{grid-template-columns:1fr;padding-top:110px}
  .hero-art{order:-1}
  .studio{grid-template-columns:1fr;padding-block:90px}
  .principles,.steps{grid-template-columns:1fr}
  .materials,.enquire{grid-template-columns:1fr;padding-block:90px}
  .rooms-head{flex-wrap:wrap;gap:16px}
  .rooms-head h2{flex-basis:100%}
  .swatches{grid-template-columns:1fr}
}
@media (max-width:480px){.btn-line{padding:8px 14px;font-size:13px}.brand img{width:140px;height:auto}.hero-cta{flex-wrap:wrap;gap:18px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.reveal{opacity:1;transform:none}}
/* imagery */
.ph,.ph img{display:block;width:100%;height:100%}
.ph img{object-fit:cover}
.hero-photo{aspect-ratio:4/5;border-radius:4px;overflow:hidden;position:relative;background:#E2D6C5}
.hero-photo img{object-position:22% 60%;transform:scale(1.06);animation:settle 2.4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes settle{to{transform:scale(1)}}
.art .ph img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.card:hover .art .ph img{transform:scale(1.05)}
.art{background:#D9C8B2}