:root{--ink:#24221f;--warm-black:#1b1a17;--stone:#e9e2d7;--sand:#d5c6b3;--cream:#f5f1e9;--line:#24221f2e}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);margin:0;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}
a{color:inherit;text-decoration:none}
.site-header{z-index:10;background:linear-gradient(#f2ece3d1,#f2ece357);border-bottom:1px solid #24221f17;grid-template-columns:1fr auto 1fr;align-items:center;min-height:88px;padding:0 4.5vw;display:grid;position:absolute;top:0;left:0;right:0}
.wordmark{letter-spacing:-.13em;width:max-content;font-family:Georgia,Times New Roman,serif;font-size:2.4rem;line-height:1}
.wordmark span{margin-left:.08em;font-size:.74em}
.site-header nav{gap:2.25rem;display:flex}
.site-header nav a,.header-cta{letter-spacing:.11em;text-transform:uppercase;font-size:.78rem}
.site-header nav a{transition:opacity .2s}
.site-header nav a:hover{opacity:.55}
.header-cta{border-bottom:1px solid var(--ink);justify-self:end;align-items:center;gap:.55rem;padding:.55rem 0;display:flex}
.brand-banner{background-color:#eee8df;background-image:url(./assets/atelier-27-concrete-banner-v2.png);background-position:50%;background-size:cover;justify-content:center;align-items:center;width:100%;min-height:clamp(438px,31vw + 88px,668px);padding:8rem 5vw 4.5rem;display:flex;position:relative;overflow:hidden}
.brand-banner:before{content:"";pointer-events:none;background:linear-gradient(#fffcf70a 0%,#fffcf700 66%,#f5f1e9f0 100%);position:absolute;inset:0}
.brand-banner:after{display:none}
.brand-lockup{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex;position:relative;transform:translateY(10%)}
.brand-name{letter-spacing:-.035em;text-rendering:geometricprecision;white-space:nowrap;font-family:Bodoni MT,Didot,Times New Roman,serif;font-size:clamp(4.6rem,7.7vw,8.9rem);font-weight:300;line-height:.9}
.brand-subtitle{letter-spacing:.01em;margin-top:2rem;font-family:Bodoni MT,Didot,Times New Roman,serif;font-size:clamp(1rem,1.35vw,1.5rem);font-weight:300}
.hero{grid-template-columns:42% 58%;min-height:min(780px,100vh - 88px);display:grid;position:relative;overflow:hidden}
.hero:before{background:linear-gradient(180deg, var(--cream), #f5f1e900);content:"";pointer-events:none;z-index:3;height:4.5rem;position:absolute;top:0;left:0;right:0}
.hero-copy{z-index:2;align-self:center;padding:6rem 5vw 6rem 7vw;position:relative}
.eyebrow{letter-spacing:.24em;text-transform:uppercase;margin:0 0 1.6rem;font-size:.75rem}
h1,h2,h3{margin:0;font-family:Georgia,Times New Roman,serif;font-weight:400}
h1{letter-spacing:-.065em;font-size:clamp(4.2rem,6.8vw,8rem);line-height:.91}
.hero-image{justify-content:center;align-items:center;min-height:680px;padding:3.5rem;display:flex;position:relative;overflow:hidden}
.hero-image:before{content:"";filter:blur(15px);background-image:linear-gradient(135deg,#2b231d57,#1c19168a),url(./assets/atelier-27-salon-wabi-sabi-v3.png);background-position:50%;background-size:cover;position:absolute;inset:-30px;transform:scale(1.09)}
.hero-image:after{content:"";pointer-events:none;background:radial-gradient(circle,#e0d1bc21,#18161333 72%);position:absolute;inset:0}
.hero-reveal{text-align:center;z-index:1;flex-direction:column;align-items:center;gap:1.7rem;display:flex;position:relative}
.hero-reveal>span{color:var(--cream);letter-spacing:.25em;text-shadow:0 2px 18px #00000047;text-transform:uppercase;padding:1.1rem 0;font-family:Georgia,Times New Roman,serif;font-size:clamp(1.25rem,1.75vw,1.8rem);font-style:italic;position:relative}
.hero-reveal>span:before,.hero-reveal>span:after{content:"";background:#f5f1e980;width:4.5rem;height:1px;position:absolute;left:50%;transform:translate(-50%)}
.hero-reveal>span:before{top:0}
.hero-reveal>span:after{bottom:0}
.hero-reveal a{color:#f5f1e9eb;letter-spacing:.18em;text-transform:uppercase;flex-direction:column;align-items:center;gap:.7rem;font-size:.78rem;transition:color .2s,transform .2s;display:flex}
.hero-reveal a:hover{color:#fff;transform:translateY(.2rem)}
.hero-reveal a svg{display:block}
.section-shell{padding-left:7vw;padding-right:7vw}
.atelier{grid-template-columns:1.05fr .95fr;gap:7rem 9vw;padding-top:10rem;padding-bottom:10rem;display:grid}
.atelier h2,.section-heading h2,.details-copy h2,.contact h2{letter-spacing:-.055em;font-size:clamp(3rem,5vw,6rem);line-height:.98}
.atelier-story{border-top:1px solid var(--line);padding-top:2rem}
.atelier-story .lead,.margot-copy .lead{margin-top:0;font-family:Georgia,Times New Roman,serif;font-size:1.55rem;line-height:1.5}
.atelier-story p:last-child,.margot-copy p:last-child{color:#686157;max-width:34rem}
.margot-profile{grid-column:1/-1;grid-template-columns:.85fr 1.15fr;align-items:stretch;gap:7vw;display:grid}
.margot-photo{aspect-ratio:4/5;max-height:670px;margin:0;position:relative;overflow:hidden}
.margot-photo:after{content:"";pointer-events:none;border:1px solid #f5f1e961;position:absolute;inset:1rem}
.margot-photo img{object-fit:cover;object-position:center center;width:100%;height:100%;display:block}
.margot-copy{border-top:1px solid var(--line);align-self:center;padding-top:2rem}
.services{background:var(--stone);padding-top:8rem;padding-bottom:9rem}
.section-heading{justify-content:space-between;align-items:end;margin-bottom:4rem;display:flex}
.section-heading .eyebrow{margin:0 2rem .75rem 0}
.service-list{border-top:1px solid var(--line)}
.service-list article{border-bottom:1px solid var(--line);grid-template-columns:4rem 1fr 1.25fr 2rem;align-items:center;gap:2rem;min-height:150px;display:grid}
.service-list article>span{color:#81776b;letter-spacing:.14em;font-size:.75rem}
.service-list h3{font-size:clamp(2.2rem,3.5vw,4rem)}
.service-list p{color:#665f56;max-width:34rem}
.details{grid-template-columns:1.1fr .9fr;min-height:720px;padding-top:9rem;padding-bottom:9rem;display:grid}
.materials-image{background:url(./assets/atelier-27-materials-original.png) 50%/cover;min-height:540px}
.details-copy{background:var(--sand);align-self:center;margin-left:-4rem;padding:5rem;position:relative}
.details-note{color:#5f574e;margin:2rem 0 0;font-family:Georgia,Times New Roman,serif;font-size:1.25rem}
.contact{background:var(--warm-black);color:var(--cream);padding:8rem 7vw}
.contact-inner{grid-template-columns:.8fr 1.2fr;align-items:stretch;gap:8vw;max-width:1500px;margin:0 auto;display:grid}
.contact img{object-fit:cover;width:100%;height:100%;max-height:650px}
.contact-copy{align-self:center}
.contact .eyebrow{color:#c7bbab}
.contact h2{font-size:clamp(4rem,7vw,8rem)}
.address{border-bottom:1px solid #f5f1e959;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;max-width:42rem;margin-top:3.5rem;padding:1.25rem 0;display:grid}
.booking-placeholder{border-top:1px solid #f5f1e92e;max-width:42rem;margin-top:3.5rem;padding-top:2.2rem}
.booking-placeholder .eyebrow{margin-bottom:1.25rem}
.booking-button{background:var(--cream);color:var(--warm-black);cursor:pointer;font:inherit;letter-spacing:.14em;text-transform:uppercase;border:0;justify-content:space-between;align-items:center;gap:1rem;width:100%;max-width:25rem;padding:1.1rem 1.25rem;font-size:.78rem;display:flex}
.booking-placeholder small{color:#9f968b;letter-spacing:.08em;margin-top:.8rem;font-size:.72rem;display:block}
footer{background:var(--warm-black);color:var(--cream);border-top:1px solid #f5f1e926;grid-template-columns:1fr auto 1fr;align-items:center;padding:2.4rem 7vw;display:grid}
footer p{letter-spacing:.2em;text-transform:uppercase;margin:0;font-size:.7rem}
footer>a:last-child{justify-self:end}
.instagram-link{letter-spacing:.08em;font-family:Georgia,Times New Roman,serif;font-size:.9rem}
@media (width<=900px){.site-header{grid-template-columns:1fr auto;min-height:74px}
.site-header nav{display:none}
.header-cta{font-size:.66rem}
.brand-banner{min-height:394px;padding:6.5rem 5vw 3rem}
.brand-name{font-size:clamp(4.2rem,14vw,7rem)}
.hero{grid-template-columns:1fr;min-height:auto}
.hero-copy{padding:6rem 7vw 5rem}
.hero-image{min-height:62vh}
.atelier{grid-template-columns:1fr;gap:4rem;padding-top:7rem;padding-bottom:7rem}
.margot-profile{grid-column:auto;grid-template-columns:1fr;gap:4rem}
.margot-photo{max-height:none}
.section-heading{flex-direction:column;align-items:start;gap:1rem}
.service-list article{grid-template-columns:2rem 1fr auto;gap:1rem;padding:2rem 0}
.service-list article p{grid-column:2/4;margin:0}
.service-list article svg{grid-area:1/3}
.details{grid-template-columns:1fr;gap:0;padding-top:6rem;padding-bottom:6rem}
.details-copy{margin:-3rem 5vw 0;padding:3.5rem 2rem}
.contact-inner{grid-template-columns:1fr}
.contact img{aspect-ratio:1;max-height:520px}
}
@media (width<=560px){.site-header{padding:0 1.25rem}
.brand-banner{min-height:334px;padding:6rem 1.25rem 2.5rem}
.brand-name{font-size:clamp(3.35rem,16vw,5rem)}
.brand-subtitle{letter-spacing:.01em;margin-top:1.35rem;font-size:.92rem}
.hero-copy{padding:5rem 1.25rem 4.5rem}
h1{font-size:clamp(3.75rem,18vw,5.5rem)}
.hero-image{min-height:54vh;padding:2rem 1.25rem}
.section-shell{padding-left:1.25rem;padding-right:1.25rem}
.services{padding-top:6rem;padding-bottom:6rem}
.details-copy{margin-left:1rem;margin-right:1rem}
.contact{padding:6rem 1.25rem}
.contact h2{font-size:clamp(3.7rem,17vw,5.5rem)}
footer{grid-template-columns:1fr auto;padding:2rem 1.25rem}
footer p{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}