/* ===== MÁDE Studio — editorial B&W revamp ===== */
:root{
  --paper:#FFFFFF;
  --bone:#F6F4F1;
  --stone:#433032;        /* brand plum-brown */
  --stone-d:#433032;
  --ink:#171513;
  --ink-soft:#3A3631;
  --muted:#7C766E;
  --line:rgba(23,21,19,.13);
  --line-2:rgba(23,21,19,.07);
  --blush:#EDE6DB;        /* warm cream accent */
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --maxw:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;line-height:1.72;font-size:17px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px}
.eyebrow{font-size:11.5px;letter-spacing:.36em;text-transform:uppercase;font-weight:400;color:var(--stone-d)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.005em}

/* wordmark */
.wordmark{font-family:var(--serif);font-weight:500;letter-spacing:-.04em;display:inline-block;line-height:1}
.wordmark .ac{position:relative}

/* ---------- NAV ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .55s var(--ease),box-shadow .55s var(--ease),padding .55s var(--ease);padding:12px 0;background:#433032}
header.scrolled{background:#433032;box-shadow:0 6px 30px -18px rgba(23,21,19,.55);padding:6px 0}
.nav{display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center}
.lockup{display:block;line-height:0;transition:opacity .45s var(--ease)}
.nav-logo:hover .lockup{opacity:.78}
.lockup img{display:block;width:auto;height:48px;transition:height .55s var(--ease)}
header.scrolled .lockup img{height:40px}
header.scrolled .nav-logo,.nav-logo.dark{color:var(--ink)}
.nav-mid{display:flex;align-items:center;gap:40px}
.nav-mid a{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:#fff;position:relative;padding:5px 0;transition:color .55s var(--ease)}
header.scrolled .nav-mid a{color:#fff}
.nav-mid a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .45s var(--ease)}
.nav-mid a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:22px}
.nav-ig{display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.nav-ig svg{width:23px;height:23px;display:block}
.nav-ig:hover{opacity:.7;transform:translateY(-2px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;background:#433032;color:#fff;padding:15px 30px;border:1px solid #433032;cursor:pointer;transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease),border-color .45s var(--ease)}
.btn:hover{background:#2e2224;border-color:#2e2224;color:#fff;transform:translateY(-2px)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-outline:hover{background:#fff;color:#433032;border-color:#fff}
.btn-ink-outline{background:transparent;color:#433032;border-color:#433032}
.btn-ink-outline:hover{background:#433032;color:#fff;border-color:#433032}
/* nav CTA sits on the plum header — inverse white pill so it stays visible */
.nav-cta .btn{background:#fff;color:#433032;border-color:#fff}
.nav-cta .btn:hover{background:transparent;color:#fff;border-color:#fff}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav-toggle span{width:26px;height:1.5px;background:#fff;transition:.35s var(--ease)}
header.scrolled .nav-toggle span{background:#fff}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--stone)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;filter:grayscale(1) contrast(1.02)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.28),rgba(20,18,16,.12) 40%,rgba(20,18,16,.30));z-index:1}
.kenburns{animation:kenburns 26s var(--ease) infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.13)}}
.hero-inner{position:relative;z-index:2;text-align:center;color:#fff;padding:0 24px}
.hero-word{font-family:var(--serif);font-weight:500;font-size:clamp(86px,20vw,290px);line-height:.86;letter-spacing:-.04em;display:flex;justify-content:center}
.hero-word .ltr{display:inline-block;overflow:hidden;line-height:.92}
.hero-word .ltr span{display:inline-block;transform:translateY(110%);animation:rise 1.1s var(--ease-out) forwards}
.hero-word .ltr:nth-child(1) span{animation-delay:.25s}
.hero-word .ltr:nth-child(2) span{animation-delay:.37s}
.hero-word .ltr:nth-child(3) span{animation-delay:.49s}
.hero-word .ltr:nth-child(4) span{animation-delay:.61s}
@keyframes rise{to{transform:translateY(0)}}
.hero-tag{font-family:var(--sans);font-size:clamp(12px,1.5vw,17px);letter-spacing:.5em;text-transform:uppercase;font-weight:300;margin-top:18px;padding-left:.5em;opacity:0;animation:fadeIn 1.1s var(--ease) .95s forwards}
.hero-actions{margin-top:46px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeIn 1.1s var(--ease) 1.15s forwards}
.scroll-cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;color:#fff;font-size:10px;letter-spacing:.34em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:fadeIn 1.1s var(--ease) 1.5s forwards}
.scroll-cue i{width:1px;height:46px;background:rgba(255,255,255,.6);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes fadeIn{to{opacity:1}}

/* ---------- HERO (photo w/ baked wordmark) ---------- */
.hero-photo{background:var(--stone)}
.hero-photo .hero-media{animation:heroIn 1.9s var(--ease-out) both}
/* One static frame: the retail-shelf portrait. Landscape viewports hold it 30%
   from the top, which sits Natasha's head in the upper fifth with wall above it
   and carries the shelves and the product in her hand down to the fold — from
   4:3 through ultrawide the crop never reaches her hairline or her face. Portrait
   viewports show the full height, so the focal point moves to 72% across instead
   and she keeps the shelves beside her rather than being cut in half. */
.hero-photo .hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:none;animation:none}
@media(max-aspect-ratio:5/6){.hero-photo .hero-media img{object-position:72% 50%}}
/* Warm scrim: light through the upper third so the photograph reads, deepening
   toward the fold so the ivory lockup, buttons and scroll cue hold contrast over
   her cream trousers and the lit wall. */
.hero-photo .hero-media::after{background:linear-gradient(180deg,rgba(37,25,26,.38),rgba(37,25,26,.10) 28%,rgba(37,25,26,.42) 56%,rgba(37,25,26,.78))}
.hero-photo .hero-inner{position:absolute;left:0;right:0;bottom:6vh;top:auto;color:#fff;display:flex;flex-direction:column;align-items:center;gap:34px}
.hero-photo .hero-actions{margin-top:0;animation:heroRise 1.1s var(--ease-out) 1.25s both}
.hero-logo{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0 auto 6px;color:#fff;animation:heroLogoIn 1.1s var(--ease-out) 1.05s both}
.hero-name{width:clamp(258px,40vw,520px);margin:0 auto}
.hero-name img{display:block;width:100%;height:auto}
/* The lockup artwork is plum on transparent; flattened to pure white so the
   wordmark and LASH AND BROW ATELIER read as crisp white on the photograph.
   brightness(0) takes every pixel to black and invert(1) takes it to #fff with
   the alpha intact — do not add sepia() or a mask here, both warmed the ivory
   and let the photograph tint through. The drop shadow carries the contrast. */
.hero-photo .hero-name img{filter:brightness(0) invert(1) drop-shadow(0 14px 34px rgba(28,19,18,.5))}
@keyframes heroLogoIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-photo .hero-actions .btn-ink-outline{color:#fff;border-color:rgba(255,255,255,.72)}
.hero-photo .hero-actions .btn-ink-outline:hover{background:#fff;color:#433032;border-color:#fff}
.hero-photo .scroll-cue{position:static;left:auto;bottom:auto;transform:none;color:rgba(255,255,255,.88);animation:heroRise 1.1s var(--ease-out) 1.45s both}
.hero-photo .scroll-cue i{background:rgba(255,255,255,.6)}
@keyframes heroIn{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero-photo .hero-media,.hero-photo .hero-actions,.hero-logo,.hero-photo .scroll-cue{animation:none;opacity:1;transform:none}}

/* ---------- MARQUEE ---------- */
.strip{background:#433032;color:var(--bone);overflow:hidden;padding:20px 0}
.marquee{display:flex;gap:0;white-space:nowrap;width:max-content;animation:scroll 34s linear infinite}
.marquee span{font-family:var(--serif);font-style:italic;font-weight:400;font-size:23px;color:var(--bone);opacity:.92;padding:0 38px;display:inline-flex;align-items:center;gap:38px}
.marquee span::after{content:"✦";font-style:normal;color:var(--bone);opacity:.55;font-size:11px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- SECTION SHELL ---------- */
.pad{padding:140px 0}
.pad-sm{padding:96px 0}
.sec-head{margin-bottom:70px;max-width:760px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .eyebrow{display:block;margin-bottom:20px}
.sec-head h2{font-size:clamp(40px,5.6vw,82px)}
.sec-head h2 em{font-style:italic;font-weight:400}

/* ---------- INTRO / NATURAL BEAUTY ---------- */
.intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center}
.intro-copy .eyebrow{display:block;margin-bottom:24px}
.intro-copy h2{font-size:clamp(38px,5vw,68px);margin-bottom:30px}
.intro-copy h2 em{font-style:italic;font-weight:400;color:var(--stone-d)}
.intro-copy p{font-size:18.5px;color:var(--ink-soft);margin-bottom:22px;max-width:54ch}
.intro-copy .lead{font-family:var(--serif);font-size:25px;line-height:1.5;color:var(--ink)}
.intro-visual{position:relative}
.intro-visual .frame{overflow:hidden}
.intro-visual .frame>img{width:100%;height:620px;object-fit:cover}
.intro-slides{position:relative;width:100%;height:620px;overflow:hidden}
.intro-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:introFade 24s var(--ease) infinite}
.intro-slides img:nth-child(1){animation-delay:0s}
.intro-slides img:nth-child(2){animation-delay:4s}
.intro-slides img:nth-child(3){animation-delay:8s}
.intro-slides img:nth-child(4){animation-delay:12s}
.intro-slides img:nth-child(5){animation-delay:16s}
.intro-slides img:nth-child(6){animation-delay:20s}
@keyframes introFade{0%{opacity:0}3.33%{opacity:1}16.67%{opacity:1}20%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.intro-slides img{animation:none}.intro-slides img:nth-child(1){opacity:1}}
.intro-visual .cap{position:absolute;left:-26px;bottom:38px;background:var(--paper);padding:16px 22px;box-shadow:0 26px 60px -34px rgba(23,21,19,.5)}
.intro-visual .cap b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:21px;display:block}
.intro-visual .cap span{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--stone-d)}

/* ---------- OUR SPACE (taupe block) ---------- */
.space{background:var(--stone);color:#fff}
.space-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:560px}
.space-media{position:relative;overflow:hidden;min-height:560px}
.space-slides{position:absolute;inset:0}
.space-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:spaceFade 8s var(--ease) infinite}
.space-slides img:nth-child(1){animation-delay:0s}
.space-slides img:nth-child(2){animation-delay:4s}
@keyframes spaceFade{0%{opacity:0}10%{opacity:1}50%{opacity:1}60%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.space-slides img{animation:none}.space-slides img:nth-child(1){opacity:1}}
.space-copy{display:flex;flex-direction:column;justify-content:center;padding:90px clamp(40px,7vw,110px)}
.space-copy .eyebrow{color:rgba(255,255,255,.75);display:block;margin-bottom:22px}
.space-copy h2{font-size:clamp(36px,4.6vw,62px);color:#fff;margin-bottom:26px}
.space-copy h2 em{font-style:italic;font-weight:400}
.space-copy p{color:rgba(255,255,255,.86);font-size:18.5px;max-width:46ch;margin-bottom:18px}
.space-stats{display:flex;gap:46px;margin-top:38px;flex-wrap:wrap}
.space-stats .n{font-family:var(--serif);font-size:46px;line-height:1;color:#fff}
.space-stats .l{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:10px}

/* ---------- SERVICES ---------- */
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:46px;flex-wrap:wrap}
.filters{display:flex;flex-wrap:wrap;gap:9px}
.filters button{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;background:transparent;border:1px solid var(--line);color:var(--ink-soft);padding:11px 21px;border-radius:40px;cursor:pointer;transition:all .4s var(--ease)}
.filters button:hover{border-color:var(--stone)}
.filters button.active{background:#433032;border-color:#433032;color:var(--paper)}
.filters button.filter-jump{border-style:dashed;border-color:var(--stone);color:var(--stone-d);margin-left:6px}
.filters button.filter-jump:hover{background:var(--stone);border-style:solid;color:var(--paper)}
.svc-list{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:auto 1fr auto auto;gap:30px;align-items:baseline;padding:30px 8px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .4s var(--ease),padding .4s var(--ease);position:relative}
.svc:hover{background:var(--bone);padding-left:24px;padding-right:24px}
.svc-name{font-family:var(--serif);font-size:27px;font-weight:500;color:var(--ink);line-height:1.1;white-space:nowrap}
.svc-desc{font-size:15px;color:var(--muted);line-height:1.6;max-width:62ch;font-weight:300}
.svc-meta{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone-d);white-space:nowrap;text-align:right}
.svc-price{font-family:var(--serif);font-size:23px;color:var(--ink);white-space:nowrap;text-align:right;min-width:120px}
.svc-arrow{position:absolute;right:8px;top:50%;transform:translateY(-50%) translateX(8px);opacity:0;transition:.4s var(--ease);font-size:18px}
.svc:hover .svc-arrow{opacity:1;transform:translateY(-50%) translateX(0)}
.svc.hide{display:none}
.svc-cat-row{display:none}

/* ---------- SERVICES PAGE ---------- */
.svc-page{padding-top:120px}
.svc-hero{padding:clamp(70px,9vw,120px) 0 clamp(40px,5vw,60px);text-align:center}
.svc-hero .eyebrow{display:block;margin-bottom:22px}
.svc-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(52px,7.5vw,104px);line-height:.96;letter-spacing:-.01em}
.svc-hero h1 em{font-style:italic;font-weight:400;color:var(--stone-d)}
.svc-hero p{font-size:clamp(17px,1.5vw,20px);line-height:1.7;color:var(--ink-soft);font-weight:300;max-width:52ch;margin:26px auto 0;text-wrap:pretty}
.svc-section{padding:0 0 clamp(90px,11vw,140px)}
.svc-group-label{grid-column:1/-1;padding:44px 8px 16px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(24px,2.6vw,32px);color:var(--stone-d);border-bottom:1px solid var(--line)}
.svc-group-label.hide{display:none}
.svc-note{grid-column:1/-1;font-size:13px;color:var(--muted);padding:26px 8px 0;font-weight:300;letter-spacing:.02em}
.svc-cta{background:var(--stone);color:#fff;text-align:center;padding:clamp(80px,10vw,130px) 0}
.svc-cta .eyebrow{color:rgba(255,255,255,.7);display:block;margin-bottom:22px}
.svc-cta h2{color:#fff;font-size:clamp(34px,4.6vw,64px);margin-bottom:24px}
.svc-cta h2 em{font-style:italic;font-weight:400;color:var(--blush)}
.svc-cta p{font-size:clamp(17px,1.4vw,20px);line-height:1.7;color:rgba(255,255,255,.84);font-weight:300;max-width:48ch;margin:0 auto 40px;text-wrap:pretty}
.svc-cta .about-cta{justify-content:center}
.svc-cta .btn-ink-outline{color:#fff;border-color:rgba(255,255,255,.7)}
.svc-cta .btn-ink-outline:hover{background:#fff;color:var(--stone);border-color:#fff}

/* ---------- RETAIL / AFTERCARE ---------- */
.retail{background:var(--bone);padding:clamp(80px,10vw,130px) 0}
.retail-head{max-width:640px;margin-bottom:clamp(44px,5vw,64px)}
.retail-head .eyebrow{display:block;margin-bottom:20px}
.retail-head h2{font-size:clamp(34px,4.4vw,58px);margin-bottom:22px}
.retail-head h2 em{font-style:italic;font-weight:400;color:var(--stone-d)}
.retail-head p{font-size:16.5px;line-height:1.7;color:var(--ink-soft);font-weight:300;max-width:52ch}
.retail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
.retail-card{background:var(--paper);padding:clamp(28px,2.6vw,38px);border:1px solid var(--line-2);display:flex;flex-direction:column;gap:12px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.retail-card:hover{transform:translateY(-4px);box-shadow:0 40px 70px -50px rgba(23,21,19,.55)}
.retail-brand{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--stone-d);font-weight:400}
.retail-card h3{font-family:var(--serif);font-weight:500;font-size:clamp(23px,2.2vw,28px);line-height:1.12;color:var(--ink)}
.retail-card p{font-size:14.5px;line-height:1.6;color:var(--muted);font-weight:300;flex:1}
.retail-price{font-family:var(--serif);font-size:24px;color:var(--ink);margin-top:6px}
.retail-note{margin-top:clamp(34px,4vw,52px);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-d);display:flex;align-items:center;gap:12px}
.retail-note::before{content:"";width:34px;height:1px;background:var(--stone);flex-shrink:0}
@media(max-width:1024px){.retail-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.retail-grid{grid-template-columns:1fr}}

/* ---------- FAQ PAGE ---------- */
.faq-section{padding:0 0 clamp(90px,11vw,140px)}
.faq-wrap{max-width:840px;margin:0 auto}
.faq-group{margin-bottom:clamp(38px,4vw,58px)}
.faq-group-label{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(24px,2.6vw,32px);color:var(--stone-d);margin-bottom:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:26px;padding:26px 4px;font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.9vw,24px);color:var(--ink);line-height:1.3;transition:color .35s var(--ease)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--stone-d)}
.faq-item .plus{flex-shrink:0;width:22px;height:22px;position:relative;margin-top:6px}
.faq-item .plus::before,.faq-item .plus::after{content:"";position:absolute;background:var(--stone);transition:transform .4s var(--ease),opacity .4s var(--ease)}
.faq-item .plus::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)}
.faq-item .plus::after{left:50%;top:0;height:100%;width:1.5px;transform:translateX(-50%)}
.faq-item[open] .plus::after{transform:translateX(-50%) scaleY(0);opacity:0}
.faq-item .faq-a{padding:0 4px 30px;max-width:66ch}
.faq-item .faq-a p{font-size:16px;line-height:1.72;color:var(--ink-soft);font-weight:300}
.faq-item .faq-a p + p{margin-top:14px}
.faq-item[open] summary{color:var(--stone-d)}
.faq-still{text-align:center;margin-top:clamp(56px,6vw,84px)}
.faq-still p{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,30px);color:var(--ink);margin-bottom:26px}
.faq-still .about-cta{justify-content:center}

/* ---------- GALLERY / RANGE ---------- */
.range{background:var(--bone);overflow:hidden}
.range-track{display:flex;gap:22px;padding:6px 48px 30px;width:max-content;animation:range-scroll 60s linear infinite}
.range-card{flex:0 0 auto;width:360px}
.range-card img,.range-card .frame img{width:100%;height:460px;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.range-card .frame{overflow:hidden}
.range-card:hover img,.range-card:hover .frame img{transform:scale(1.05)}
@keyframes range-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 11px))}}
@media (prefers-reduced-motion:reduce){.range-track{animation:none}}

/* ---------- TESTIMONIALS ---------- */
.quotes{text-align:center;position:relative}
.quote{display:none;max-width:920px;margin:0 auto;animation:qin .8s var(--ease)}
.quote.on{display:block}
@keyframes qin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.quote .stars{color:var(--stone);letter-spacing:.4em;font-size:14px;margin-bottom:30px}
.quote blockquote{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.6vw,42px);line-height:1.28;color:var(--ink);font-style:italic}
.quote cite{display:block;margin-top:34px;font-style:normal;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-d)}
.quote-dots{display:flex;gap:11px;justify-content:center;margin-top:48px}
.quote-dots button{width:8px;height:8px;border-radius:50%;background:var(--line);border:none;cursor:pointer;padding:0;transition:.4s var(--ease)}
.quote-dots button.on{background:#433032;transform:scale(1.2)}

/* ---------- BOOKING ---------- */
.book{background:#433032;color:var(--paper);position:relative;overflow:hidden}
.book-bg{position:absolute;inset:0;z-index:0;opacity:.16}
.book-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.book-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.05fr;gap:84px;align-items:start}
.book-intro .eyebrow{color:rgba(255,255,255,.65);display:block;margin-bottom:22px}
.book-intro h2{font-size:clamp(40px,5.2vw,76px);color:#fff}
.book-intro h2 em{font-style:italic;font-weight:400;color:var(--blush)}
.book-intro p{color:rgba(255,255,255,.78);font-size:18px;margin:28px 0;max-width:42ch}
.book-detail{display:flex;gap:15px;align-items:flex-start;margin-top:20px}
.book-detail .dot{width:6px;height:6px;border-radius:50%;background:var(--blush);margin-top:11px;flex-shrink:0}
.book-detail b{font-family:var(--serif);font-size:20px;font-weight:500;display:block;color:#fff}
.book-detail span{font-size:13.5px;color:rgba(255,255,255,.6);letter-spacing:.03em}
/* Square call-to-action — the paper panel the booking request form used to fill,
   kept to the same width, padding and rhythm so the section reads unchanged. */
.book-cta{background:var(--paper);color:var(--ink);padding:48px;text-align:center}
.book-cta h3{font-family:var(--serif);font-size:27px;margin-bottom:8px}
.book-cta p{font-size:14px;color:var(--muted);margin-bottom:30px;line-height:1.6}
.book-cta .btn{width:100%;padding:18px}

/* ---------- FOOTER ---------- */
footer{background:var(--paper);padding:110px 0 44px}
.foot-top{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:48px;padding-bottom:64px;border-bottom:1px solid var(--line)}
.badge{display:block;width:128px;height:128px;border-radius:50%;object-fit:cover}
.foot-badge p{margin-top:22px;color:var(--muted);font-size:15px;max-width:30ch}
.foot-col h4{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--stone-d);margin-bottom:22px;font-family:var(--sans);font-weight:400}
.foot-col a,.foot-col p{display:block;font-size:15px;color:var(--ink-soft);margin-bottom:13px;transition:color .35s var(--ease)}
.foot-col a:hover{color:var(--stone-d)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:34px;flex-wrap:wrap;gap:14px}
.foot-bottom p{font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.foot-word{font-family:var(--serif);font-size:18px;letter-spacing:-.02em;color:var(--ink)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(38px);transition:opacity 1.05s var(--ease-out),transform 1.05s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.27s}.reveal.d4{transition-delay:.36s}
.clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease-out)}
.clip.in{clip-path:inset(0 0 0 0)}

@media(prefers-reduced-motion:reduce){
  .reveal,.clip{opacity:1;transform:none;clip-path:none;transition:none}
  .marquee,.kenburns,.scroll-cue i{animation:none}
  .hero-word .ltr span,.hero-tag,.hero-actions,.scroll-cue{opacity:1;transform:none;animation:none}
  html{scroll-behavior:auto}
}

/* ---------- FOUNDER (home) + ABOUT PAGE ---------- */
.founder-grid{display:grid;grid-template-columns:.82fr 1fr;gap:clamp(38px,6vw,88px);align-items:center}
.founder-media,.about-media{display:flex;justify-content:center}
.arch-frame{position:relative;width:100%;max-width:400px;aspect-ratio:3/4;overflow:hidden;border-radius:200px 200px 22px 22px;box-shadow:0 46px 90px -52px rgba(23,21,19,.6)}
.arch-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.founder-copy .eyebrow{display:block;margin-bottom:20px}
.founder-copy h2{font-size:clamp(38px,4.6vw,62px)}
.founder-copy h2 em{font-style:italic;font-weight:400;color:var(--stone-d)}
.note{font-family:var(--sans);font-weight:300;font-size:18.5px;line-height:1.72;color:var(--ink-soft);margin:26px 0 0;max-width:54ch}
.note + .note{margin-top:22px}
.sign{line-height:0;margin-top:26px}
.sign img{display:inline-block;width:clamp(158px,17vw,224px);height:auto;opacity:.92}
.founder-title,.about-role{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--stone-d);margin-top:16px;font-weight:400}
.about-page{padding-top:130px}
.about-grid{display:grid;grid-template-columns:.9fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.about-media .arch-frame{max-width:460px}
.about-copy .eyebrow{display:block;margin-bottom:22px}
.about-copy h1{font-family:var(--serif);font-weight:500;font-size:clamp(58px,8vw,108px);line-height:.94;letter-spacing:-.01em}
.about-role{font-size:12px;margin-top:14px}
.about-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.about-copy .lede{font-size:clamp(18px,1.5vw,21px);line-height:1.7;color:var(--ink-soft);font-weight:300;margin-top:26px;max-width:48ch}
/* about — motto band */
.about-quote{background:var(--stone);padding:clamp(70px,9vw,120px) 0;text-align:center}
.about-quote p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(28px,3.6vw,50px);line-height:1.28;color:#fff;max-width:20ch;margin:0 auto;text-wrap:balance}
.about-quote em{font-style:italic;color:var(--blush)}
/* about — story rows */
.about-story .story-grid{display:grid;grid-template-columns:1fr .82fr;gap:clamp(40px,6vw,96px);align-items:center}
.story-copy .eyebrow{display:block;margin-bottom:20px}
.story-copy h2{font-size:clamp(32px,3.8vw,52px);margin-bottom:26px}
.story-copy p{font-size:17px;line-height:1.78;color:var(--ink-soft);font-weight:300;max-width:52ch}
.story-copy p + p{margin-top:20px}
.story-media .arch-frame{max-width:420px;margin-left:auto}
/* about — philosophy */
.about-philosophy{background:var(--bone)}
.about-philosophy .phil-grid{display:grid;grid-template-columns:1fr .78fr;gap:clamp(40px,6vw,90px);align-items:center}
.phil-copy .eyebrow{display:block;margin-bottom:22px}
.phil-copy h2{font-size:clamp(34px,4.4vw,58px);margin-bottom:30px}
.phil-copy p{font-size:clamp(17px,1.4vw,20px);line-height:1.74;color:var(--ink-soft);font-weight:300;max-width:48ch}
.phil-media .arch-frame{max-width:400px;margin-left:auto}
/* about — values */
.about-values .values-grid{display:grid;grid-template-columns:.8fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.values-media .arch-frame{max-width:400px}
.arch-soft{border-radius:22px}
.values-copy .eyebrow{display:block;margin-bottom:20px}
.values-copy h2{font-size:clamp(32px,3.8vw,52px);margin-bottom:34px}
.values-list{list-style:none;display:flex;flex-direction:column;gap:26px}
.values-list li{display:flex;flex-direction:column;gap:7px;padding-left:24px;border-left:2px solid var(--stone)}
.values-list strong{font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;color:var(--ink)}
.values-list span{font-size:15.5px;line-height:1.65;color:var(--muted);font-weight:300}
/* about — the space */
.about-space{background:var(--stone);color:#fff;padding:clamp(90px,11vw,150px) 0;text-align:center}
.about-space .eyebrow{color:rgba(255,255,255,.72);display:block;margin-bottom:22px}
.about-space h2{color:#fff;font-size:clamp(34px,4.6vw,66px);margin-bottom:28px}
.about-space p{font-size:clamp(18px,1.5vw,21px);line-height:1.72;color:rgba(255,255,255,.86);font-weight:300;max-width:54ch;margin:0 auto;text-wrap:pretty}
.space-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);margin-top:clamp(48px,6vw,74px)}
.space-shot{border-radius:16px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 40px 70px -46px rgba(0,0,0,.7)}
.space-shot img{width:100%;height:100%;object-fit:cover}
/* about — personal */
.about-personal{text-align:center}
.about-personal .eyebrow{display:block;margin-bottom:22px}
.about-personal h2{font-size:clamp(34px,4.4vw,60px);margin-bottom:28px}
.about-personal p{font-size:clamp(17px,1.4vw,20px);line-height:1.76;color:var(--ink-soft);font-weight:300;max-width:56ch;margin:0 auto}
.about-personal p + p{margin-top:18px}
.about-personal .sign{margin:38px 0 0;text-align:center}
.about-personal .about-cta{justify-content:center}
.why-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:26px 44px;max-width:820px;margin:44px auto 0;text-align:left}
.why-list li{display:flex;flex-direction:column;gap:7px;padding-left:22px;border-left:2px solid var(--stone)}
.why-list strong{font-family:var(--serif);font-style:italic;font-weight:500;font-size:21px;color:var(--ink)}
.why-list span{font-size:15px;line-height:1.6;color:var(--muted);font-weight:300}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .wrap{padding:0 32px}
  .intro-grid,.book-grid{grid-template-columns:1fr;gap:54px}
  .founder-grid,.about-grid{grid-template-columns:1fr;gap:44px}
  .founder-media,.about-media{order:-1}
  .arch-frame,.about-media .arch-frame{max-width:340px}
  .about-story .story-grid,.about-values .values-grid{grid-template-columns:1fr;gap:44px}
  .about-philosophy .phil-grid{grid-template-columns:1fr;gap:44px;text-align:center}
  .phil-copy p{margin-left:auto;margin-right:auto}
  .phil-media .arch-frame{margin:0 auto}
  .story-media,.values-media{order:-1}
  .why-list{grid-template-columns:1fr;gap:22px;max-width:440px}
  .story-media .arch-frame,.values-media .arch-frame{max-width:340px;margin:0 auto}
  .space-grid{grid-template-columns:1fr}
  .intro-visual .frame>img{height:480px}
  .intro-slides{height:480px}
  .svc{grid-template-columns:1fr auto;gap:8px 24px}
  .svc-desc{grid-column:1/-1;order:3}
  .svc-meta{order:4;text-align:left;grid-column:1/-1}
  .svc-price{order:2}
  .nav-mid{display:none}
  .nav-toggle{display:flex;padding:10px 6px}
  .foot-top{grid-template-columns:1fr 1fr;gap:40px}
}
@media(max-width:680px){
  .wrap{padding:0 22px}
  .pad{padding:90px 0}
  .range-track{padding:6px 22px 26px}
  .range-card{width:78vw}
  form{padding:32px 26px}
  .foot-top{grid-template-columns:1fr;gap:34px}
  .intro-visual .cap{left:0}
  .nav-cta .btn{display:none}
  .hero-actions .btn{padding:14px 24px}
  .lockup img{height:38px}
  .mobile-menu a{font-size:15px}
  /* Phones are shorter than the 640px floor, and 100vh measures the viewport
     with the address bar hidden, so the lockup and cue fell below the fold. */
  .hero{height:100svh;min-height:560px}
  /* The nowrap name plus the 120px price column needs 453px — wider than a
     phone — so the name wraps and the price takes only the room it needs. */
  .svc-name{white-space:normal}
  .svc-price{min-width:0}
  .book-cta{padding:30px 26px}
  .space-gallery{grid-template-columns:1fr}
  /* Same 8px dots, inside a 32px tap target. */
  .quote-dots{gap:0}
  .quote-dots button{width:32px;height:32px;background:radial-gradient(circle at center,var(--line) 3.6px,transparent 4px)}
  .quote-dots button.on{background:radial-gradient(circle at center,#433032 4.4px,transparent 4.8px)}
}
/* mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:99;background:var(--paper);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;transform:translateY(-100%);transition:transform .6s var(--ease);}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{font-family:var(--serif);font-size:38px;color:var(--ink);padding:10px 0}
.mobile-menu .btn{margin-top:24px;font-family:var(--sans)}
.mobile-menu .mm-meta{margin-top:40px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- RESPONSIVE — TOUCH + SHORT VIEWPORTS ---------- */
/* The menu is a fixed, centred stack. Its content is taller than the screen on
   most phones, so it scrolls, and the auto margins keep it centred when it does
   fit. These follow the mobile-menu block so they win on source order. */
@media(max-width:1024px){
  .mobile-menu{justify-content:flex-start;padding:78px 22px 36px;overflow-y:auto;overscroll-behavior:contain}
  .mobile-menu>:first-child{margin-top:auto}
  .mobile-menu>:last-child{margin-bottom:auto}
  /* .mobile-menu a is more specific than .btn, so the CTA inherited the 38px
     serif link size and lost its horizontal padding — restored to the pill the
     rest of the site uses, and held inside the gutters. */
  .mobile-menu .btn{font-size:12px;letter-spacing:.22em;padding:15px 30px;max-width:100%;text-align:center}
}
/* Landscape phones: the 640px floor put the lockup, button and cue below the
   fold, so the hero collapses to the visible viewport and the stack tightens. */
@media(orientation:landscape) and (max-height:520px) and (max-width:960px){
  .hero{height:100svh;min-height:0}
  .hero-photo .hero-inner{bottom:4vh;gap:16px}
  .hero-name{width:clamp(190px,26vw,300px)}
  .hero-photo .scroll-cue i{height:26px}
}
/* A tap leaves :hover stuck on, so the states that move or reveal something are
   neutralised for touch and left exactly as they are for pointer devices. */
@media(hover:none){
  .btn:hover{transform:none}
  .nav-ig:hover{opacity:1;transform:none}
  .svc:hover{background:transparent;padding-left:8px;padding-right:8px}
  .svc:hover .svc-arrow{opacity:0;transform:translateY(-50%) translateX(8px)}
  .range-card:hover img,.range-card:hover .frame img{transform:none}
  .retail-card:hover{transform:none;box-shadow:none}
}