/* ============================================================
   Maison Lune — appointment-only hair studio
   Palette: plaster, blush, deep aubergine, brushed brass
   Type: Fraunces (display) + Archivo (body)
   ============================================================ */
:root{
  --plaster:#F3ECE4; --plaster-2:#EAE0D5;
  --aubergine:#2A1A24; --aubergine-2:#3E2635;
  --blush:#D8A79B; --brass:#B08544; --brass-2:#C99E5A;
  --ink:#2A1A24; --ink-soft:#6E5A62;
  --line:rgba(42,26,36,0.14);
  --f-display:'Fraunces', Georgia, serif;
  --f-body:'Archivo', system-ui, sans-serif;
  --radius:2px; --ease:cubic-bezier(.4,0,.1,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ background:var(--plaster); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
em{font-style:italic;}
img{display:block; max-width:100%;}

.eyebrow{ font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--brass); font-weight:600; margin-bottom:1.1rem; }
.eyebrow--light{ color:var(--brass-2); }
.section__head{ max-width:640px; margin:0 auto clamp(2.5rem,5vw,4rem); text-align:center; padding:0 6vw; overflow:visible; }
.section__title{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.8rem,4vw,3rem); line-height:1.18; letter-spacing:-0.01em; padding-bottom:0.08em; }
.section__title em{ color:var(--aubergine); font-style:italic; }
.section__sub{ margin-top:1rem; color:var(--ink-soft); font-size:1rem; }

.btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--f-body); font-weight:600; font-size:0.92rem; padding:0.95rem 1.7rem; border-radius:var(--radius); cursor:pointer; text-decoration:none; border:1px solid transparent; transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.btn--solid{ background:var(--aubergine); color:var(--plaster); }
.btn--solid:hover{ background:var(--aubergine-2); transform:translateY(-2px); }
.btn--ghost-light{ border-color:rgba(243,236,228,0.4); color:var(--plaster); }
.btn--ghost-light:hover{ border-color:var(--plaster); background:rgba(243,236,228,0.1); transform:translateY(-2px); }
.btn--full{ width:100%; }

/* nav */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:1.1rem clamp(1.2rem,5vw,3rem); transition:background .4s, border-color .4s; border-bottom:1px solid transparent; }
.nav.solid{ background:rgba(243,236,228,0.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom-color:var(--line); }
.nav__brand{ display:flex; align-items:center; gap:0.5rem; text-decoration:none; color:var(--plaster); transition:color .4s; }
.nav.solid .nav__brand{ color:var(--ink); }
.nav__mark{ color:var(--brass-2); font-size:0.9rem; }
.nav.solid .nav__mark{ color:var(--brass); }
.nav__name{ font-family:var(--f-display); font-size:1.25rem; }
.nav__links{ display:flex; gap:2rem; }
.nav__links a{ color:rgba(243,236,228,0.8); text-decoration:none; font-size:0.9rem; transition:color .25s; }
.nav.solid .nav__links a{ color:var(--ink-soft); }
.nav__links a:hover{ color:var(--brass-2); }
.nav.solid .nav__links a:hover{ color:var(--aubergine); }
.nav__cta{ font-family:var(--f-body); font-weight:600; font-size:0.86rem; padding:0.6rem 1.2rem; border:1px solid rgba(243,236,228,0.55); border-radius:var(--radius); color:var(--plaster); text-decoration:none; transition:background .25s, color .25s, border-color .25s; }
.nav.solid .nav__cta{ border-color:var(--aubergine); color:var(--aubergine); }
.nav__cta:hover{ background:var(--plaster); color:var(--aubergine); border-color:var(--plaster); }
.nav.solid .nav__cta:hover{ background:var(--aubergine); color:var(--plaster); }
@media(max-width:820px){ .nav__links{ display:none; } }

/* hero with video */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:7rem clamp(1.4rem,6vw,5rem) 4rem; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__video{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,12,17,0.86) 0%, rgba(20,12,17,0.6) 38%, rgba(20,12,17,0.15) 70%, transparent 100%); }
.hero__frame{ position:relative; z-index:2; max-width:640px; color:var(--plaster); }
.hero__eyebrow{ font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--brass-2); font-weight:600; margin-bottom:1.6rem; }
.hero__title{ font-family:var(--f-display); font-weight:300; font-size:clamp(2.8rem,7vw,5.4rem); line-height:1.06; letter-spacing:-0.02em; margin-bottom:1.8rem; color:var(--plaster); }
.hero__title span{ display:block; padding-bottom:0.06em; }
.hero__title .l2{ padding-bottom:0.12em; }
.hero__title em{ color:var(--blush); font-weight:400; font-style:italic; }
.hero__lead{ max-width:46ch; color:rgba(243,236,228,0.86); font-size:1.05rem; line-height:1.65; margin-bottom:2rem; }
.hero__actions{ display:flex; gap:0.9rem; flex-wrap:wrap; }
.hero__avail{ display:inline-flex; align-items:center; gap:0.6rem; margin-top:2.4rem; padding:0.7rem 1.1rem; border:1px solid rgba(243,236,228,0.24); border-radius:var(--radius); background:rgba(20,12,17,0.4); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-size:0.85rem; }
.avail__dot{ width:8px; height:8px; border-radius:50%; background:#7DC98A; box-shadow:0 0 0 0 rgba(125,201,138,.5); animation:pulse 2.4s infinite; }
.avail__text{ color:rgba(243,236,228,0.72); }
.avail__slot{ font-weight:600; color:var(--brass-2); }
.hero__scrollcue{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); width:1px; height:44px; background:rgba(243,236,228,0.3); overflow:hidden; z-index:2; }
.hero__scrollcue span{ position:absolute; top:-44px; left:0; width:1px; height:44px; background:var(--brass-2); animation:scrollcue 2.2s var(--ease) infinite; }
@media(max-width:900px){ .hero__scrim{ background:linear-gradient(180deg, rgba(20,12,17,0.55) 0%, rgba(20,12,17,0.82) 100%); } }

/* ticker */
.ticker{ overflow:hidden; padding:0.9rem 0; background:var(--aubergine); }
.ticker__row{ display:inline-flex; align-items:center; gap:1.6rem; white-space:nowrap; animation:scroll 28s linear infinite; }
.ticker__row span{ font-family:var(--f-display); font-style:italic; font-size:1.1rem; color:var(--plaster); }
.ticker__dot{ color:var(--brass-2) !important; font-style:normal !important; }

/* work */
.work{ padding:clamp(4rem,9vw,7rem) clamp(1.4rem,6vw,5rem); }
.work__grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:14px; max-width:1200px; margin:0 auto; }
.work__item{ position:relative; overflow:hidden; border-radius:var(--radius); }
.work__item--tall{ grid-row:span 2; }
.work__item--wide{ grid-column:span 2; }
.work__imgwrap{ width:100%; height:100%; overflow:hidden; }
.work__img{ width:100%; height:100%; min-height:240px; object-fit:cover; transition:transform 1.1s var(--ease); }
.work__item--tall .work__img{ min-height:494px; }
.work__item--wide .work__img{ min-height:300px; }
.work__item:hover .work__img{ transform:scale(1.05); }
.work__item figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.1rem 0.9rem; font-size:0.82rem; color:var(--plaster); background:linear-gradient(0deg,rgba(20,12,17,0.82),transparent); }
@media(max-width:760px){ .work__grid{ grid-template-columns:1fr 1fr; } .work__item--tall{ grid-row:span 1; } .work__item--tall .work__img{ min-height:240px; } }

/* services */
.services{ padding:clamp(4rem,9vw,7rem) clamp(1.4rem,6vw,5rem); background:var(--plaster-2); }
.svc__list{ list-style:none; max-width:860px; margin:0 auto; counter-reset:svc; }
.svc{ position:relative; padding:2.1rem 1.6rem 2.1rem 4.6rem; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto; grid-template-areas:'name price' 'desc price'; gap:0.4rem 2rem; align-items:start; transition:background .35s var(--ease); }
.svc:first-child{ border-top:1px solid var(--line); }
.svc::before{ counter-increment:svc; content:'0' counter(svc); position:absolute; left:1.4rem; top:2.3rem; font-family:var(--f-display); font-size:0.95rem; color:var(--brass); letter-spacing:0.05em; }
.svc::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--brass); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease); }
.svc:hover{ background:rgba(176,133,68,0.05); }
.svc:hover::after{ transform:scaleY(1); }
.svc__name{ grid-area:name; font-family:var(--f-display); font-size:1.45rem; }
.svc__desc{ grid-area:desc; color:var(--ink-soft); font-size:0.95rem; max-width:48ch; }
.svc__meta{ grid-area:price; display:flex; flex-direction:column; align-items:flex-end; gap:0.3rem; text-align:right; }
.svc__time{ font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--brass); }
.svc__price{ font-family:var(--f-display); font-size:1.5rem; color:var(--aubergine); white-space:nowrap; }
@media(max-width:600px){
  .svc{ padding:1.8rem 0 1.8rem 3.4rem; grid-template-columns:1fr; grid-template-areas:'name' 'desc' 'price'; gap:0.6rem; }
  .svc::before{ left:0.2rem; top:2rem; }
  .svc__meta{ align-items:flex-start; text-align:left; flex-direction:row; align-items:baseline; gap:1rem; margin-top:0.3rem; }
  .svc__price{ font-size:1.3rem; }
}

/* studio */
.studio{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(2rem,5vw,4.5rem); padding:clamp(4rem,9vw,7rem) clamp(1.4rem,6vw,5rem); }
.studio__media{ overflow:hidden; border-radius:var(--radius); }
.studio__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.studio__p{ color:var(--ink-soft); font-size:1.05rem; line-height:1.7; margin:1.4rem 0 2rem; max-width:48ch; }
.studio__meta{ display:grid; gap:1rem; }
.studio__meta > div{ display:grid; grid-template-columns:120px 1fr; gap:1rem; padding-bottom:0.9rem; border-bottom:1px solid var(--line); }
.studio__meta dt{ font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass); }
.studio__meta dd{ font-size:0.95rem; }
@media(max-width:820px){ .studio{ grid-template-columns:1fr; } .studio__media{ order:-1; } }

/* hands */
.hands{ padding:clamp(4rem,9vw,7rem) clamp(1.4rem,6vw,5rem); background:var(--aubergine); color:var(--plaster); }
.hands .eyebrow{ color:var(--brass-2); }
.hands .section__title{ color:var(--plaster); }
.hands .section__title em{ color:var(--blush); }
.hands .section__sub{ color:rgba(243,236,228,0.65); }
.hands__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; max-width:1100px; margin:0 auto; }
.stylist__portrait{ width:100%; aspect-ratio:3/4; border-radius:var(--radius); margin-bottom:1rem; overflow:hidden; }
.stylist__portrait img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.15); transition:filter .4s var(--ease), transform .5s var(--ease); }
.stylist:hover .stylist__portrait img{ filter:grayscale(0) saturate(1.05); transform:scale(1.04); }
.stylist h3{ font-family:var(--f-display); font-weight:400; font-size:1.35rem; margin-bottom:0.3rem; }
.stylist p{ font-size:0.88rem; color:rgba(243,236,228,0.7); line-height:1.5; }
@media(max-width:820px){ .hands__grid{ grid-template-columns:1fr 1fr; } }

/* book */
.book{ padding:clamp(4rem,9vw,7rem) clamp(1.4rem,6vw,5rem); }
.book__panel{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:0.9fr 1.1fr; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.book__left{ background:var(--aubergine); color:var(--plaster); padding:clamp(2rem,4vw,3.4rem); }
.book__title{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.12; margin-bottom:1.1rem; }
.book__note{ color:rgba(243,236,228,0.72); font-size:0.95rem; margin-bottom:1.8rem; }
.book__perks{ list-style:none; display:grid; gap:0.7rem; }
.book__perks li{ position:relative; padding-left:1.4rem; font-size:0.92rem; color:rgba(243,236,228,0.9); }
.book__perks li::before{ content:'\2726'; position:absolute; left:0; color:var(--brass-2); }
.book__form{ padding:clamp(2rem,4vw,3.4rem); background:var(--plaster); }
.fld{ margin-bottom:1.2rem; }
.fld label{ display:block; font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass); margin-bottom:0.5rem; }
.fld input, .sel select{ width:100%; padding:0.85rem 0.95rem; font-family:var(--f-body); font-size:0.95rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink); outline:none; transition:border-color .25s; }
.fld input:focus, .sel select:focus{ border-color:var(--aubergine); }
.sel{ position:relative; }
.sel::after{ content:'\2304'; position:absolute; right:0.9rem; top:44%; transform:translateY(-50%); color:var(--ink-soft); pointer-events:none; }
.sel select{ appearance:none; cursor:pointer; }
.hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0; }
.book__status{ margin-top:0.9rem; font-size:0.85rem; min-height:1.2em; }
.book__status.ok{ color:#3F7A4B; }
.book__status.err{ color:#A5443B; }
@media(max-width:820px){ .book__panel{ grid-template-columns:1fr; } }

/* footer */
.ftr{ padding:3rem clamp(1.4rem,6vw,5rem); border-top:1px solid var(--line); text-align:center; }
.ftr__brand{ font-family:var(--f-display); font-size:1.4rem; margin-bottom:0.6rem; }
.ftr__line{ color:var(--ink-soft); font-size:0.9rem; }
.ftr__fine{ color:var(--ink-soft); opacity:0.6; font-size:0.78rem; margin-top:1.2rem; }

/* reveal states (GSAP toggles) */
.reveal, .reveal-img{ will-change:transform, opacity; }

@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(125,201,138,.5);} 50%{ box-shadow:0 0 0 7px rgba(125,201,138,0);} }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes scrollcue{ 0%{ transform:translateY(0);} 100%{ transform:translateY(88px);} }

@media(prefers-reduced-motion:reduce){
  *{ animation-duration:0.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto; }
  .reveal, .reveal-img{ opacity:1!important; transform:none!important; }
}

/* touch-focus states (mobile hover equivalent) */
@media (hover:none){
  .work__item.is-focus .work__img{ transform:scale(1.05); }
  .stylist.is-focus .stylist__portrait img{ filter:grayscale(0) saturate(1.05); transform:scale(1.04); }
  .svc.is-focus{ background:rgba(176,133,68,0.05); }
  .svc.is-focus::after{ transform:scaleY(1); }
}

/* mobile: tighten work grid + hero legibility */
@media (max-width:600px){
  .work__grid{ gap:10px; }
  .hero__title{ font-size:clamp(2.4rem,10vw,3.4rem); }
  .hero__lead{ font-size:0.98rem; }
  .studio__meta > div{ grid-template-columns:96px 1fr; gap:0.6rem; }
  .ticker__row span{ font-size:0.98rem; }
}