:root{
  --paper:#f6f2ec; --paper-2:#efe9e0; --card:#fbf9f5;
  --ink:#1c1917; --espresso:#241d1a; --body:#4a4442; --muted:#7a716b;
  --line:#ddd5ca; --line-dark:rgba(246,242,236,.16);
  --clay:#88492b; --clay-bright:#a5582f; --oak:#c9a77c;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --gutter:clamp(20px,5vw,72px); --block:clamp(80px,10vw,148px);
  --max:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{list-style:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:99}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}

/* type */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.eyebrow-light{color:var(--oak)}
h1,.display{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1.04}
h1 em,.display em{font-style:italic;font-weight:300;color:var(--clay)}
.display{font-size:clamp(36px,4.6vw,64px)}
h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,27px);line-height:1.2;letter-spacing:-.01em}
.sub{color:var(--body);font-size:18px;max-width:46ch}
.muted{color:var(--muted);font-size:14px}
.fine{color:var(--muted);font-size:14px;margin-top:28px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 15px/1 var(--sans);text-decoration:none;padding:16px 26px;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--clay)}
.btn-accent{background:var(--clay);color:#fff}
.btn-accent:hover{background:var(--ink)}
.contact .btn-accent:hover{background:var(--paper);color:var(--ink)}
.link-arrow{font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;display:inline-flex;gap:10px}
.link-arrow::after{content:"→";transition:transform .25s}
.link-arrow:hover::after{transform:translateX(4px)}
.link-arrow.light{color:var(--paper)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,242,236,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-color:var(--line)}
.header-row{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand img{width:50px;height:auto}
.nav ul{display:flex;align-items:center;gap:30px}
.nav a{text-decoration:none;font-size:15px;font-weight:500}
.nav ul a:not(.btn){position:relative}
.nav ul a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav ul a:not(.btn):hover::after{transform:scaleX(1)}
.nav .btn{padding:13px 20px;font-size:14px}
.nav-phone a{color:var(--clay);font-variant-numeric:tabular-nums}
.nav-toggle{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.nav-toggle span:not(.sr){position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:transform .3s,top .3s}
.nav-toggle span:nth-child(1){top:17px}.nav-toggle span:nth-child(2){top:26px}
.nav-toggle[aria-expanded=true] span:nth-child(1){top:22px;transform:rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){top:22px;transform:rotate(-45deg)}

/* hero */
.hero{padding:clamp(40px,6vw,88px) 0 var(--block)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:end}
.hero h1{font-size:clamp(48px,6.4vw,96px);margin-bottom:30px}
.lede{font-size:clamp(17px,1.4vw,19px);color:var(--body);max-width:44ch;margin-bottom:36px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-bottom:52px}
.hero-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:36px;border-top:1px solid var(--line);padding-top:24px}
.hero-facts strong{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1}
.hero-facts span{font-size:13px;color:var(--muted)}
.hero-figure{position:relative}
.hero-figure img{width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:62% 50%}
figcaption{font-size:13px;color:var(--muted);margin-top:14px;display:flex;gap:14px}
figcaption span{color:var(--ink);font-weight:600;white-space:nowrap}

/* statement */
.statement{padding:var(--block) 0;border-top:1px solid var(--line)}
.statement-grid{display:grid;align-items:start;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:40px}
.statement .display{font-size:clamp(40px,5.4vw,80px);max-width:16ch;margin-bottom:48px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;color:var(--body);max-width:900px}

/* section head */
.section-head{margin-bottom:clamp(44px,5vw,72px)}
.section-head .display{max-width:20ch;margin-bottom:22px}
.section-head.row{display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap}
.section-head.row .display{margin-bottom:0}

/* options */
.options{padding:var(--block) 0;background:var(--paper-2)}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.option{background:var(--card);display:grid;grid-template-rows:auto 1fr}
.option-media{overflow:hidden;aspect-ratio:16/11}
.option-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.option:hover .option-media img{transform:scale(1.04)}
.option-body{padding:clamp(26px,3vw,44px)}
.option-num{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--clay);margin-bottom:14px}
.option h3{font-size:clamp(26px,2.4vw,34px);margin-bottom:16px}
.option-body>p{color:var(--body)}
.specs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:28px 0 22px}
.specs div{padding:18px 0}
.specs div+div{padding-left:18px;border-left:1px solid var(--line)}
.specs dt{font-size:12px;color:var(--muted);letter-spacing:.04em}
.specs dd{font-family:var(--serif);font-size:24px;line-height:1.2}
.fit{font-size:15px;color:var(--body)}
.fit span{font-weight:600;color:var(--ink);margin-right:6px}

/* finishes */
.finishes{background:var(--espresso);color:var(--paper);padding:var(--block) 0;overflow:hidden}
.finishes-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.finishes .display em{color:var(--oak)}
.finishes .display{margin-bottom:28px}
.finishes-copy p{color:rgba(246,242,236,.74);margin-bottom:18px;max-width:46ch}
.finishes-copy .link-arrow{margin-top:14px}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.swatches li{position:relative}
.swatches img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.swatches li:nth-child(even){margin-top:28px}
.swatches li:hover img{transform:translateY(-8px)}
.swatches span{display:block;font-size:14px;margin-top:12px}
.swatches small{font-size:11px;letter-spacing:.12em;color:rgba(246,242,236,.5)}

/* proof */
.proof{padding:var(--block) 0}
.proof-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center}
.proof-copy .display{margin-bottom:26px}
.proof-copy p{color:var(--body);max-width:44ch;margin-bottom:16px}
.compare{position:relative;aspect-ratio:3/4;overflow:hidden;user-select:none;--pos:50%}
.compare>img,.compare-before img{width:100%;height:100%;object-fit:cover}
.compare-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;pointer-events:none;transform:translateX(-1px)}
.compare-handle::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:18px;letter-spacing:4px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.tag{position:absolute;top:18px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:rgba(28,25,23,.78);color:#fff;padding:7px 11px;pointer-events:none}
.tag-before{left:18px}.tag-after{right:18px}

/* work */
.work{padding:0 0 var(--block)}
.work-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,28px)}
.work-item{grid-column:span 2;margin:0}
.work-item.wide{grid-column:span 3}
.work-item img{width:100%;aspect-ratio:4/3.2;object-fit:cover}
.work-item figcaption{flex-direction:column;gap:2px;font-size:15px;color:var(--body)}
.work-item figcaption span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}

/* surfaces */
.surfaces{padding:var(--block) 0;border-top:1px solid var(--line)}
.surfaces-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px)}
.surfaces .display{margin-bottom:22px}
.lists{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.lists h3{font-size:28px}
.list-sub{font-size:14px;color:var(--muted);margin-bottom:18px}
.lists li{padding:13px 0;border-top:1px solid var(--line);font-size:16px}

/* principles */
.principles{padding:var(--block) 0;background:var(--paper-2)}
.principles .display{max-width:22ch}
.principle-list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px);counter-reset:p}
.principle-list li{counter-increment:p;border-top:1px solid var(--ink);padding-top:22px}
.principle-list li::before{content:"0" counter(p);display:block;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--clay);margin-bottom:22px}
.principle-list h3{font-size:22px;margin-bottom:12px}
.principle-list p{color:var(--body);font-size:15px}

/* process */
.process{padding:var(--block) 0}
.steps{display:grid;grid-template-columns:repeat(5,1fr);counter-reset:s;position:relative}
.steps li{counter-increment:s;padding:0 22px 0 0;position:relative}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;font-family:var(--serif);font-size:18px;background:var(--paper);position:relative;z-index:1;margin-bottom:26px}
.steps li::after{content:"";position:absolute;top:22px;left:44px;right:0;height:1px;background:var(--line)}
.steps li:last-child::after{display:none}
.step-time{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--clay);margin-bottom:8px}
.steps h3{font-size:21px;margin-bottom:10px}
.steps p{color:var(--body);font-size:15px}

/* studio */
.studio{padding:var(--block) 0;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.studio-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);align-items:center}
.studio-mark{background:var(--paper-2);aspect-ratio:1;display:grid;place-items:center;margin:0}
.studio-mark img{width:52%}
.studio .display{margin-bottom:28px;max-width:20ch}
.studio p{color:var(--body);max-width:56ch;margin-bottom:18px}
.signature{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--ink)!important;margin-top:30px}
.signature span{display:block;font-family:var(--sans);font-style:normal;font-size:13px;color:var(--muted);letter-spacing:.04em}

/* area */
.area{padding:clamp(64px,8vw,110px) 0}
.area-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:end}
.cities{display:flex;flex-wrap:wrap;gap:10px}
.cities li{border:1px solid var(--line);padding:10px 18px;border-radius:40px;font-size:15px;background:var(--card)}

/* faq */
.faq{padding:var(--block) 0;background:var(--paper-2)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px)}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;padding:24px 48px 24px 0;font-family:var(--serif);font-size:clamp(20px,1.8vw,24px);position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-weight:300;font-size:28px;color:var(--clay);transition:transform .3s}
.faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-list details p{color:var(--body);padding:0 48px 26px 0;max-width:62ch}

/* contact */
.contact{background:var(--espresso);color:var(--paper);padding:var(--block) 0}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px)}
.contact .display{margin-bottom:24px}
.contact .display em{color:var(--oak)}
.contact-copy>p{color:rgba(246,242,236,.74);max-width:42ch;margin-bottom:34px}
.contact-details{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;border-top:1px solid var(--line-dark);padding-top:30px}
.contact-details dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--oak);margin-bottom:4px}
.contact-details dd,.contact-details a{font-size:17px;text-decoration:none}
.contact-details a:hover{color:var(--oak)}
.contact-form{background:var(--paper);color:var(--ink);padding:clamp(26px,3.5vw,48px);display:grid;gap:18px;align-content:start}
.form-title{font-family:var(--serif);font-size:26px;line-height:1.2;margin-bottom:6px}
.contact-form label{display:grid;gap:6px;font-size:13px;font-weight:600;letter-spacing:.02em}
.contact-form small{font-weight:400;color:var(--muted)}
.contact-form input,.contact-form select,.contact-form textarea{font:16px var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0;outline:0;transition:border-color .25s;width:100%}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--clay)}
.contact-form textarea{resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form .btn{justify-self:start;margin-top:8px}
.form-note{font-size:13px;color:var(--muted)}
.form-ok{font-size:14px;color:var(--clay);font-weight:600}

/* footer */
.site-footer{background:var(--ink);color:rgba(246,242,236,.72);padding:80px 0 30px;font-size:15px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:56px}
.footer-brand img{width:60px;filter:invert(1) sepia(.15);margin-bottom:22px}
.site-footer h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--oak);font-weight:600;margin-bottom:16px}
.site-footer li{margin-bottom:9px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line-dark);padding-top:26px;font-size:13px;color:rgba(246,242,236,.45)}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s 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){
  .nav-phone{display:none}
  .principle-list{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:34px}
  .steps li{padding:0 0 0 70px}
  .steps li::before{position:absolute;left:0;top:-4px;margin:0}
  .steps li::after{left:22px;top:44px;bottom:-34px;right:auto;width:1px;height:auto}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav ul{position:fixed;inset:84px 0 auto 0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gutter) 28px;border-bottom:1px solid var(--line);transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
  .nav ul.open{opacity:1;transform:none;pointer-events:auto}
  .nav ul li{border-bottom:1px solid var(--line)}
  .nav ul li:last-child{border:0;padding-top:18px}
  .nav ul a:not(.btn){display:block;padding:16px 0;font-size:18px}
  .nav ul a:not(.btn)::after{display:none}
  .nav-phone{display:block}
  .nav .btn{width:100%}
  .hero-grid,.statement-grid,.finishes-grid,.proof-grid,.surfaces-grid,.studio-grid,.area-grid,.faq-grid,.contact-grid{grid-template-columns:1fr}
  .hero-figure{order:-1}
  .hero-figure img{aspect-ratio:4/3}
  .option-grid,.two-col{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .work-item,.work-item.wide{grid-column:auto}
  .studio-mark{max-width:320px}
  .statement-grid{gap:0}
}
@media (max-width:560px){
  body{font-size:16px}
  .header-row{height:72px}
  .nav ul{inset:72px 0 auto 0}
  .brand img{width:42px}
  .hero-facts{grid-template-columns:repeat(3,1fr);gap:16px}
  .hero-facts strong{font-size:21px}
  .swatches{grid-template-columns:repeat(2,1fr)}
  .swatches li:nth-child(n+5){display:none}
  .specs{grid-template-columns:1fr}
  .specs div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .lists,.principle-list,.form-row,.contact-details,.footer-grid{grid-template-columns:1fr}
  .section-head.row{display:block}
  .section-head.row .sub{margin-top:18px}
}