/* Mane Extension Lounge
   Editorial beauty direction: WHITE ground, near-black ink, one saturated
   accent. No tan, no beige, no cream anywhere, including rule colours.
   The accent is a deep rose, chosen because it belongs to a hair salon and
   because it is not the gold or the copper used on the other MIC builds.
   Type floor is 16px everywhere. */

:root{
  --ink:#141110;            /* warm near-black, for the dark bands */
  --ink-2:#221D1B;
  --rose:#A8265A;           /* on white, passes contrast at body size */
  --rose-lift:#E585A9;      /* on the dark ground */
  --paper:#FFFFFF;
  --paper-2:#F6F2F3;        /* faintest rose tint, NOT a cream */
  --text:#171314;
  --muted:#6B6063;
  --muted-dark:#BBAEB2;
  --line:#E7E0E2;
  --line-dark:rgba(255,255,255,.15);

  --display:'Bodoni Moda',Didot,Georgia,serif;
  --body:'Jost',ui-sans-serif,system-ui,-apple-system,sans-serif;

  --wrap:1220px;
  --gut:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);
  font:400 17px/1.75 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--rose);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.02;
  letter-spacing:-.018em;margin:0;text-wrap:balance}
h1{font-size:clamp(44px,7vw,92px)}
h2{font-size:clamp(32px,4.6vw,60px)}
h3{font-size:clamp(21px,2vw,27px)}
p{margin:0 0 1.15em}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.sec{padding:clamp(62px,9vw,124px) 0}
.sec-tight{padding:clamp(42px,6vw,78px) 0}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.68;color:var(--muted)}
.dark .lede{color:var(--muted-dark)}
/* Letterspaced uppercase label. No decorative bar before it, ever. */
.eyebrow{font:500 16px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;
  color:var(--rose);margin:0 0 20px;display:block}
.dark .eyebrow{color:var(--rose-lift)}
.measure{max-width:60ch}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:#fff;padding:12px 18px;
  box-shadow:0 8px 30px #0003}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px}

/* ---------- buttons: square, editorial ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;
  font:500 16px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
  padding:19px 34px;border:1px solid transparent;text-decoration:none;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-fill{background:var(--ink);color:#fff}
.btn-fill:hover{background:var(--rose)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.dark .btn-fill{background:#fff;color:var(--ink)}
.dark .btn-fill:hover{background:var(--rose-lift);color:var(--ink)}
.dark .btn-ghost{border-color:#fff;color:#fff}
.dark .btn-ghost:hover{background:#fff;color:var(--ink)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:#ffffffee;
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:22px;max-width:var(--wrap);
  margin:0 auto;padding:16px var(--gut)}
.brand{text-decoration:none;flex:none;font:400 25px/1 var(--display);
  letter-spacing:.06em;color:var(--ink)}
.brand span{display:block;font:500 16px/1 var(--body);letter-spacing:.28em;
  text-transform:uppercase;color:var(--muted);margin-top:7px}
.nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.nav a{font:500 16px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);text-decoration:none;padding:6px 0;
  border-bottom:1px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{color:var(--rose);border-color:var(--rose)}
.hdr .btn{padding:14px 22px;font-size:16px}
/* Cascade fix. `.nav a` is (0,1,1) and `.btn-fill` is (0,1,0), so the nav link
   colour was winning and the header button rendered its label in the nav's
   text colour. On Mane that produced a solid black box with invisible text.
   Raise the button rules to match inside the nav. */
.nav a.btn-fill{color:#fff}
.nav a.btn-ghost{color:var(--ink);border-color:var(--ink)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;
  cursor:pointer;color:var(--ink)}
.burger svg{width:26px;height:26px}
@media(max-width:1040px){
  .nav{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);background:var(--ink);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:100px 28px 28px;transform:translateX(100%);
    transition:transform .34s cubic-bezier(.4,0,.2,1);margin-left:0;overflow-y:auto}
  .nav[data-open=true]{transform:translateX(0)}
  .nav a{color:#fff;font-size:17px;padding:17px 0;border-bottom:1px solid var(--line-dark)}
  .nav a:hover,.nav a[aria-current=page]{color:var(--rose-lift);border-color:var(--line-dark)}
  .nav .btn{margin-top:22px;justify-content:center}
  .burger{display:block}
  .scrim{position:fixed;inset:0;background:#000;opacity:0;visibility:hidden;
    transition:opacity .3s,visibility .3s;z-index:55}
  .scrim[data-open=true]{opacity:.5;visibility:visible}
}

/* ---------- hero: full bleed photo, type sitting over it ---------- */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#14111033 0%,#14111000 34%,#141110cc 100%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--gut) clamp(48px,7vw,86px)}
.hero h1{color:#fff;max-width:16ch}
.hero .lede{color:#EFE7E9;max-width:46ch;margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.dark{background:var(--ink);color:#fff}
.dark h2,.dark h3{color:#fff}
.tint{background:var(--paper-2)}

/* ---------- editorial split: deliberately asymmetric ---------- */
.ed{display:grid;gap:clamp(30px,5vw,72px);align-items:center;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.ed.flip>*:first-child{order:2}
@media(max-width:900px){.ed{grid-template-columns:1fr}.ed.flip>*:first-child{order:0}}
.ed figure{margin:0;overflow:hidden}
.ed figure img{width:100%}
.ed .off{margin-top:clamp(0px,4vw,54px)}   /* vertical offset, not a card grid */

/* ---------- rate list: hairline rules, tabular figures ---------- */
.rate-group{margin-top:44px}
.rate-group h3{margin-bottom:6px}
.rate-list{list-style:none;margin:18px 0 0;padding:0}
.rate-list li{display:grid;grid-template-columns:1fr auto;gap:20px;
  align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.dark .rate-list li{border-color:var(--line-dark)}
.rate-list .n{font:500 17px/1.35 var(--body);letter-spacing:.06em;
  text-transform:uppercase}
.rate-list .s{display:block;font:400 16px/1.4 var(--body);color:var(--muted);
  text-transform:none;letter-spacing:0;margin-top:5px;font-style:italic}
.dark .rate-list .s{color:var(--muted-dark)}
.rate-list .p{font:400 23px/1 var(--display);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.rate-list .p::before{content:"$"}
.rate-list .p.noc::before{content:""}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
@media(max-width:820px){.cols2{grid-template-columns:1fr}}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);
  margin-top:48px}
.gal figure{margin:0;overflow:hidden;aspect-ratio:3/4}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.gal figure:hover img{transform:scale(1.05)}
.gal figure:nth-child(2){margin-top:clamp(18px,3vw,46px)}
@media(max-width:700px){.gal{grid-template-columns:1fr 1fr}
  .gal figure:nth-child(n+5){display:none}}

/* ---------- award band ---------- */
.award{text-align:center;padding:clamp(40px,6vw,70px) 0}
.award p{font:400 clamp(24px,3vw,38px)/1.25 var(--display);margin:0 auto;
  max-width:22ch}

/* ---------- prose ---------- */
.prose{max-width:66ch}
.prose p{font-size:17px;line-height:1.85}
.prose h3{margin:36px 0 12px}

/* ---------- form ---------- */
.form{border:1px solid var(--line);padding:clamp(24px,3.4vw,38px);background:#fff}
.fld{margin-bottom:20px}
.fld label{display:block;font:500 16px/1 var(--body);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:9px}
.fld input,.fld textarea,.fld select{width:100%;font:400 17px/1.5 var(--body);
  color:var(--text);background:#fff;border:0;border-bottom:1px solid var(--line);
  padding:12px 2px;border-radius:0}
.fld textarea{min-height:120px;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:0;
  border-bottom-color:var(--rose)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media(max-width:600px){.grid2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:16px;color:var(--muted);margin:14px 0 0}
.msg{margin-top:16px;font:500 17px/1.5 var(--body);display:none}
.msg[data-on]{display:block}
.msg.ok{color:#17703f}.msg.err{color:#b3261e}

/* ---------- contact strip ---------- */
.cstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:42px}
.cstrip .k{font:500 16px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted-dark);display:block;margin-bottom:12px}
.cstrip a,.cstrip p{font-size:17px;margin:0;color:#fff;text-decoration:none}
.cstrip a:hover{color:var(--rose-lift)}
@media(max-width:760px){.cstrip{grid-template-columns:1fr;gap:20px}}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#fff;padding:clamp(56px,7vw,88px) 0 30px}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.foot .brand{color:#fff}
.foot .brand span{color:var(--muted-dark)}
.foot h4{font:500 16px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;
  color:#fff;margin:0 0 18px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.foot a{color:var(--muted-dark);text-decoration:none;font-size:17px}
.foot a:hover{color:var(--rose-lift)}
.foot p{color:var(--muted-dark);font-size:17px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line-dark);
  font-size:16px;color:var(--muted-dark)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr;gap:30px}}

/* ---------- reveal: default VISIBLE ---------- */
.rv{opacity:1}
.ready .rv{opacity:0;transform:translateY(22px)}
.ready .rv.in{opacity:1;transform:none;
  transition:opacity .8s cubic-bezier(.22,.7,.3,1),transform .8s cubic-bezier(.22,.7,.3,1)}
@media(prefers-reduced-motion:reduce){
  .ready .rv,.ready .rv.in{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .gal figure:hover img{transform:none}
}