/* Fonts are self-hosted alongside this stylesheet, so the page has no network
   dependency at all. Both families are Open Font License (Google Fonts), latin
   subset, which covers the French accents used here. Relative paths, so they
   resolve the same from disk, at /staging/ and on the live domain. */
@font-face{
  font-family:'Great Vibes';
  src:url('greatvibes-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Bebas Neue';
  src:url('bebasneue-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

/* Beauty by RBS. Palette sampled by Lens from the salon's own photographs:
   #7B5EA7 amethyst (the neon sign, the logo badge), #B39DDB lavender,
   #3D2B8E indigo (their flyer lettering), #E8B4CB blush, #C8A96E woven basket. */

:root{
  --purple:#7B5EA7;
  --indigo:#3D2B8E;
  --lavender:#B39DDB;
  --blush:#E8B4CB;
  --gold:#C8A96E;
  --ink:#2A2035;
  --muted:#5A4E6B;
  --line:#EAE3F2;
  --paper:#FFFFFF;
  --tint:#FAF7FC;

  --f-script:'Great Vibes','Snell Roundhand','Apple Chancery',cursive;
  --f-display:'Bebas Neue','Haettenschweiler','Arial Narrow',Impact,sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  --pad:20px;
  --r:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--indigo)}

:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:4px}

.wrap{max-width:1040px;margin:0 auto;padding:52px var(--pad)}
.micro{font-size:14px;color:var(--muted);margin:12px 0 0}
.script{font-family:var(--f-script);font-weight:400;color:var(--purple)}
.script--sm{font-size:1.25em;line-height:1}

/* ---------- top bar ---------- */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px var(--pad);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
}
.bar__mark{display:block;line-height:0}
.bar__mark img{width:148px;height:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:12px 22px;
  font:inherit;font-weight:600;
  color:#fff;background:var(--purple);
  border:2px solid var(--purple);border-radius:999px;
  text-decoration:none;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.btn:hover{background:var(--indigo);border-color:var(--indigo)}
.btn--ghost{color:var(--indigo);background:transparent;border-color:var(--lavender)}
.btn--ghost:hover{background:var(--tint);border-color:var(--purple);color:var(--indigo)}
.btn--sm{min-height:44px;padding:8px 18px;font-size:15px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.cta--stack .btn{flex:1 1 auto}

/* ---------- hero ---------- */
.hero__media{position:relative;background:var(--tint)}
.hero__media img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:50% 42%}
.hero__media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);
}
.hero__body{padding:8px var(--pad) 44px;max-width:1040px;margin:0 auto}

.eyebrow{
  font-family:var(--f-display);letter-spacing:.14em;text-transform:uppercase;
  font-size:15px;color:var(--purple);margin:0 0 6px;
}
h1{
  font-family:var(--f-display);
  font-size:clamp(46px,13vw,74px);
  line-height:.92;letter-spacing:.01em;text-transform:uppercase;
  color:var(--indigo);margin:0 0 16px;
}
h1 .script{
  display:inline-block;text-transform:none;letter-spacing:0;
  font-size:.82em;line-height:1.15;padding-right:.12em;
}
.lede{font-size:18px;margin:0 0 18px;color:var(--ink);max-width:46ch}
.open{
  display:inline-block;margin:0;
  background:var(--tint);border:1px solid var(--lavender);
  border-left:5px solid var(--purple);
  border-radius:0 var(--r) var(--r) 0;
  padding:10px 16px;font-size:16px;color:var(--indigo);
}

/* ---------- section headings ---------- */
h2{
  font-family:var(--f-display);
  font-size:clamp(30px,7vw,40px);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--indigo);margin:0 0 8px;line-height:1;
}
h2::after{
  content:"";display:block;width:56px;height:3px;margin-top:12px;
  background:linear-gradient(90deg,var(--purple),var(--blush));
}
.sub{color:var(--muted);margin:14px 0 26px;max-width:56ch;font-size:16px}

/* ---------- price list ---------- */
.menu__h{
  font-family:var(--f-display);letter-spacing:.12em;text-transform:uppercase;
  font-size:20px;color:var(--purple);
  margin:34px 0 4px;padding-bottom:6px;border-bottom:2px solid var(--line);
}
.menu__h:first-child{margin-top:0}
.list{list-style:none;margin:0;padding:0}
.list li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.list--tight li{padding:11px 0}
.list .n{flex:1 1 62%;font-weight:600}
.list .n em{display:block;font-style:normal;font-weight:400;font-size:14.5px;color:var(--muted);margin-top:2px}
.list .p{margin-left:auto;white-space:nowrap;font-weight:700;color:var(--indigo)}

/* ---------- work grid ---------- */
.grid{display:grid;gap:18px}
.card{margin:0}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r)}
.card figcaption{font-size:15px;color:var(--muted);margin-top:10px}

/* an image slot, not a grey box: the salon's own purple, their marble tint */
.slot{
  aspect-ratio:1/1;border-radius:var(--r);
  border:2px dashed var(--lavender);
  background:
    radial-gradient(circle at 30% 28%,rgba(179,157,219,.34),transparent 58%),
    radial-gradient(circle at 74% 76%,rgba(232,180,203,.34),transparent 55%),
    var(--tint);
  display:flex;align-items:center;justify-content:center;
}
.slot__mark{
  font-family:var(--f-display);font-size:44px;letter-spacing:.12em;
  color:var(--purple);opacity:.55;
}
.card--slot figcaption{color:var(--ink)}
.card--slot figcaption strong{color:var(--indigo)}

/* ---------- band ---------- */
.band{
  background:
    linear-gradient(180deg,var(--tint),#fff),
    var(--tint);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.band__in{padding-top:48px;padding-bottom:48px}
.band__in p{max-width:62ch}

/* ---------- hours + venir ---------- */
.cols{display:grid;gap:44px}
.hours{width:100%;border-collapse:collapse;margin-top:6px}
.hours th,.hours td{text-align:left;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
.hours th{font-weight:600}
.hours td{text-align:right;color:var(--indigo);font-weight:700;white-space:nowrap}
address{font-style:normal;font-size:19px;font-weight:600;color:var(--indigo);margin:6px 0 12px;line-height:1.45}

/* ---------- footer ---------- */
.foot{
  border-top:3px solid var(--purple);
  background:var(--tint);
  padding:30px var(--pad);text-align:center;
}
.foot p{margin:0 0 6px;font-size:15px}
.foot .micro{margin-top:8px}
/* The footer number was a bare inline link, about 24px tall. It is the last
   thing a visitor scrolls to and the one they are most likely to tap, so it
   gets a real 44px hit area (11 + 22 + 11) without becoming a button. */
.foot a{
  display:inline-block;
  padding:11px 10px;
  line-height:22px;
  min-height:44px;
  font-weight:700;
  color:var(--indigo);
}

/* ---------- wider screens ---------- */
@media (min-width:760px){
  :root{--pad:32px}
  .grid{grid-template-columns:repeat(3,1fr);gap:22px}
  .cols{grid-template-columns:1fr 1fr;gap:56px}
  .cta--stack .btn{flex:0 0 auto}
  .list .n{flex:1 1 auto}
}

@media (min-width:1000px){
  .hero{
    display:grid;grid-template-columns:1fr 1fr;align-items:center;
    gap:56px;max-width:1040px;margin:0 auto;padding:56px var(--pad) 64px;
  }
  .hero__media img{aspect-ratio:4/5;border-radius:var(--r)}
  .hero__media::after{display:none}
  .hero__body{padding:0;order:-1}
  .bar__mark img{width:168px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}