@font-face{font-family:"Noor Serif";src:url(study-instrument-serif.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Noor Serif";font-style:italic;src:url(study-instrument-serif-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Noor Sans";src:url(InterTight.woff2) format("woff2");font-weight:400 700;font-display:swap}
/* Fashion magazine: white, black and one powder blush; oversized serif, small tracked labels. */
:root{--bg:#FBF8F6;--ink:#141113;--muted:#6F6668;--blush:#EBCFC7;--blush-deep:#B9776C;--accent:#141113;--on-accent:#FBF8F6;--line:rgba(20,17,19,.14);--radius:0;--font-head:"Noor Serif",Georgia,serif;--font-body:"Noor Sans",system-ui,sans-serif;--header-bg:#FBF8F6;--field-bg:#fff;--legend-font:400 38px/1.05 var(--font-head)}
body{background:var(--bg);color:var(--ink)}
::selection{background:var(--blush);color:var(--ink)}

h1,h2,h3{font-family:var(--font-head);font-weight:400;letter-spacing:-.02em;line-height:.95}
h1{font-size:clamp(64px,9vw,150px)}
h2{font-size:clamp(44px,5.6vw,92px)}
h3{font-size:30px}
h1 em,h2 em,.big em,.hero-line em{font-style:italic;color:var(--blush-deep)}
.label{font:600 11px/1.3 var(--font-body);letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
p.label{margin-bottom:22px}
.lead{font-size:clamp(17px,1.3vw,20px);color:var(--muted);max-width:32em}
.fine{font-size:13px;color:var(--muted);margin-top:18px}
.button{border-radius:0;background:var(--ink);color:var(--bg);text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600;min-height:52px}
.button:hover{background:var(--blush-deep)}
.text-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:14px;letter-spacing:.04em;border-bottom:1px solid var(--ink);text-decoration:none}
.text-link:hover{color:var(--blush-deep);border-color:var(--blush-deep)}
.section{padding:clamp(80px,10vw,150px) 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,104px);align-items:center}
figure{margin:0}figure img{width:100%;object-fit:cover}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px;flex-wrap:wrap}

.noor-brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink)}
.noor-brand span{font:italic 400 34px/1 var(--font-head)}
.noor-brand small{font:600 10px var(--font-body);letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.site-header nav a{font-size:14px;letter-spacing:.02em}

/* Hero: the word is filled with the photo; on scroll you fly through the first O into the picture. */
.noor-hero{position:relative;height:auto}
.hero-stage{position:relative;height:calc(100vh - 116px);min-height:560px;overflow:hidden;background:var(--bg)}
.hero-photo{position:absolute;inset:0;opacity:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.mask-word{position:absolute;inset:0;display:grid;place-items:center;margin:0;pointer-events:none}
.mask-word .word{display:block;font:400 clamp(160px,34vw,560px)/.8 var(--font-head);letter-spacing:-.05em;text-transform:uppercase;padding:0 .02em .06em;color:var(--ink);background:url(noor-hero.webp) 50% 28%/cover;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transform-origin:39% 52%}
.hero-meta{position:absolute;left:max(24px,calc((100vw - 1320px)/2));bottom:6vh;display:grid;gap:14px;justify-items:start;max-width:380px}
.hero-line{font:400 clamp(28px,2.6vw,40px)/1.05 var(--font-head)}
.hero-issue{position:absolute;top:28px;right:max(24px,calc((100vw - 1320px)/2))}
.hero-scroll{position:absolute;right:max(24px,calc((100vw - 1320px)/2));bottom:6vh}
@media(prefers-reduced-motion:no-preference){
 .noor-hero[data-scroll]{height:220vh}
 .noor-hero[data-scroll] .hero-stage{position:sticky;top:0;height:100vh}
 .noor-hero[data-scroll]{--p:min(1,calc(var(--exit) * 1.9))}
 .noor-hero[data-scroll] .mask-word .word{transform:scale(calc(1 + var(--p) * var(--p) * 16));will-change:transform}
 .noor-hero[data-scroll] .hero-photo{opacity:clamp(0,calc(var(--p) * 2.2 - .9),1);transform:scale(calc(1.25 - var(--p) * .25));will-change:transform,opacity}
 .noor-hero[data-scroll] .hero-meta,.noor-hero[data-scroll] .hero-issue,.noor-hero[data-scroll] .hero-scroll{opacity:calc(1 - var(--p) * 3)}
 .mask-word .word{animation:word-in 1.4s cubic-bezier(.16,1,.3,1) both}
 .hero-meta>*{animation:meta-in 1s cubic-bezier(.16,1,.3,1) both}.hero-meta>:nth-child(2){animation-delay:.15s}.hero-meta>:nth-child(3){animation-delay:.3s}
 @keyframes word-in{from{opacity:0;translate:0 6%}to{opacity:1;translate:0 0}}
 @keyframes meta-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
}

.statement .big{font:400 clamp(36px,4.4vw,72px)/1.08 var(--font-head);max-width:20em}
.big.light-ready .lw{color:var(--ink)}
.big.light-ready em .lw{color:var(--blush-deep)}

/* Service preview: three tall images, the middle one lower like a magazine spread. */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.service{display:block;text-decoration:none;color:inherit}
.service:nth-child(2){margin-top:80px}
.service figure{overflow:hidden;aspect-ratio:4/5;margin-bottom:18px}
.service img{height:100%;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.service:hover img{transform:scale(1.05)}
.service h3{margin:6px 0 6px}.service p{color:var(--muted)}
.service[data-scroll],.look[data-scroll],.reviews blockquote[data-scroll]{--e:clamp(0,calc(var(--enter) * 1.35 - var(--i,0) * .12),1);opacity:calc(.1 + var(--e) * .9);transform:translateY(calc((1 - var(--e)) * 80px));will-change:transform,opacity}

/* Drift: two lines of words slide with the scroll, in opposite directions. */
.drift{overflow:hidden;padding:clamp(40px,6vw,90px) 0;background:var(--blush)}
.drift p{display:flex;white-space:nowrap;font:italic 400 clamp(64px,9vw,150px)/1.05 var(--font-head);will-change:transform}
.drift p+p{font-style:normal;color:var(--bg);-webkit-text-stroke:1px var(--ink);color:transparent}
.drift span{padding-right:.5em}.drift span::after{content:"✦";font-style:normal;font-size:.3em;vertical-align:middle;margin-left:.5em;color:var(--blush-deep);-webkit-text-stroke:0}

.owner-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,104px);align-items:center}
.owner h2{margin-bottom:24px}
.tall{overflow:hidden;aspect-ratio:4/5;position:relative}
.tall img,.wide img{height:100%}
figure[data-scroll]{position:relative;overflow:hidden}
figure[data-scroll]::after{content:"";position:absolute;inset:-1px;background:var(--bg);transform-origin:50% 100%;transform:scaleY(calc(1 - var(--enter)));will-change:transform;pointer-events:none}
figure[data-scroll] img{transform:scale(calc(1.15 - var(--enter) * .15));will-change:transform}

.look-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.look{display:block;text-decoration:none;color:inherit;margin:0}
.look figure,.look-grid .look>img{overflow:hidden}
.look-row .look figure{aspect-ratio:3/4}.look-row .look img{height:100%}
.look-row .look span{display:block;margin-top:12px;font:italic 400 22px var(--font-head)}

.reviews .label{margin-bottom:40px}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)}
.review-grid blockquote{margin:0;border-top:1px solid var(--ink);padding-top:26px}
.review-grid p{font:italic 400 clamp(24px,2vw,30px)/1.2 var(--font-head)}
.review-grid footer{margin-top:18px;font:600 11px var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

.cta-band{background:var(--ink);color:var(--bg);padding:clamp(80px,10vw,140px) 0;text-align:center}
.cta-band .shell{display:grid;justify-items:center;gap:20px}
.cta-band .label{color:var(--blush)}.cta-band p:not(.label){color:#bdb3b3;max-width:30em}
.cta-band h2 em{color:var(--blush)}
.cta-band .button{background:var(--blush);color:var(--ink)}.cta-band .button:hover{background:#fff}

.page-hero{padding:clamp(56px,8vw,120px) 0 clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.page-hero h1{margin-bottom:24px}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.jump a{padding:10px 18px;border:1px solid var(--ink);text-decoration:none;font-size:13px;letter-spacing:.08em;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center}
.jump a:hover{background:var(--ink);color:var(--bg)}

/* Price list with a floating preview that follows the pointer. */
.price-list{position:relative}
.category{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(24px,5vw,80px);padding:48px 0;border-bottom:1px solid var(--line);scroll-margin-top:120px}
.category-head h2{margin-top:10px}
.category ul{display:grid}
.category li{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);transition:padding .4s cubic-bezier(.16,1,.3,1),color .3s}
.category li:last-child{border-bottom:0}
.category li h3{font-size:clamp(24px,2.2vw,32px)}
.category li p{color:var(--muted);font-size:14px;margin-top:4px}
.category li .dots{border-bottom:1px dotted rgba(20,17,19,.35);transform:translateY(-6px)}
.category li b{font:400 clamp(22px,2vw,28px) var(--font-head);white-space:nowrap}
.category li:hover{padding-left:14px;color:var(--blush-deep)}
.hover-preview{position:absolute;left:0;top:0;width:220px;aspect-ratio:4/5;object-fit:cover;pointer-events:none;opacity:0;scale:.85;transition:opacity .3s,scale .4s cubic-bezier(.16,1,.3,1);z-index:2;box-shadow:0 30px 60px rgba(20,17,19,.25)}
.price-list.is-previewing .hover-preview{opacity:1;scale:1}

.products figure{aspect-ratio:1}

/* Team: cards that turn over. */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.flip{perspective:1600px;display:grid;gap:14px;justify-items:start}
.flip-inner{position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;background:none;cursor:pointer;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.16,1,.3,1);text-align:left;color:inherit;font:inherit}
.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
.flip-inner:hover{transform:rotateY(8deg)}.flip.is-flipped .flip-inner:hover{transform:rotateY(172deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.front img{height:100%}
.front .name{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:linear-gradient(transparent,rgba(20,17,19,.65));color:#fff;font-size:13px;letter-spacing:.06em}
.front .name b{display:block;font:italic 400 34px/1 var(--font-head);letter-spacing:0;margin-bottom:6px}
.back{transform:rotateY(180deg);background:var(--blush);padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:14px}
.back-name{font:italic 400 clamp(48px,5vw,72px)/.9 var(--font-head)}
.back-text{font-size:17px;line-height:1.5}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.tags span{padding:6px 12px;border:1px solid var(--ink);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

.salon-photo .wide{aspect-ratio:21/9;margin-bottom:48px}
.salon-photo h2{max-width:14em}

/* Lookbook grid (filters come from study-kit.js). */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:32px}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px}
.filter-chips button{min-height:44px;padding:0 18px;border:1px solid var(--ink);background:none;color:var(--ink);font:600 12px var(--font-body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.filter-chips button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.filter-count{margin-left:auto;color:var(--muted);font-size:14px}
.look-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px);perspective:1600px}
.look-grid .look{transform-origin:50% 60%;backface-visibility:hidden}
.look-grid .look:nth-child(3n+2){margin-top:64px}
.look-grid .look>img{aspect-ratio:4/5;height:auto;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.look-grid .look:hover>img{transform:scale(1.04)}
.look-grid figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.look-grid figcaption b{font:italic 400 24px var(--font-head)}
.look-grid figcaption span{color:var(--muted);font-size:13px}

/* Booking. */
.booking .split{align-items:start}
.booking-card{background:#fff;padding:clamp(24px,4vw,48px);border:1px solid var(--line)}
.step{margin:28px 0 4px;color:var(--blush-deep)}
.slot-label{font-size:15px;font-weight:600}.slot-label span{font-weight:400;color:var(--muted);font-size:13px}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.slots button{min-height:44px;padding:0 16px;border:1px solid var(--line);background:#fff;color:var(--ink);font:500 14px var(--font-body);cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.slots button:hover{border-color:var(--ink)}
.slots button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.stylists button{padding:6px 16px 6px 6px}
.stylists img,.stylists .any{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 20%;display:grid;place-items:center;background:var(--blush)}
.visit figure{aspect-ratio:3/2;margin-bottom:28px}
.visit h2{margin-bottom:16px}
.visit p{color:var(--muted)}
.visit dl,.noor-footer dl{margin:24px 0 0;border-top:1px solid var(--line)}
.visit dl div,.noor-footer dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.visit dd,.noor-footer dd{margin:0}

.noor-footer{padding:56px 0;border-top:1px solid var(--line)}
.noor-footer .shell{display:grid;grid-template-columns:1fr 1fr;gap:24px 64px;align-items:start}
.noor-footer p{color:var(--muted);margin-top:12px}
.noor-footer dl{margin:0}
.noor-footer .fine{grid-column:1/-1}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--blush-deep);transform-origin:0 50%;transform:scaleX(var(--page-progress,0));pointer-events:none;will-change:transform}

@media(max-width:900px){
 .split,.owner-grid,.category{grid-template-columns:1fr}
 .service-grid,.team-grid,.review-grid{grid-template-columns:1fr}
 .service:nth-child(2){margin-top:0}
 .look-row{grid-template-columns:1fr 1fr}
 .look-grid{grid-template-columns:1fr 1fr}.look-grid .look:nth-child(3n+2){margin-top:0}.look-grid .look:nth-child(2n){margin-top:48px}
 .hero-meta{right:24px;max-width:none}
 .hero-issue{display:none}
 .noor-footer .shell{grid-template-columns:1fr}
 .service[data-scroll],.look[data-scroll],.reviews blockquote[data-scroll]{--e:clamp(0,calc(var(--enter) * 1.35),1)}
}
@media(max-width:600px){.look-grid{grid-template-columns:1fr}.look-grid .look:nth-child(2n){margin-top:0}.category li{grid-template-columns:1fr auto}.category li .dots{display:none}}