/* ==========================================================================
   Lashevista Beauty — design system
   Warm minimal: cream ground, warm off-black type, taupe + bronze accents
   ========================================================================== */

:root{
  --cream:        #FAF7F2;
  --cream-deep:   #F4EFE6;
  --ink:          #15110D;
  --ink-soft:     #4A423C;
  --taupe:        #9C8A6C;
  --taupe-light:  #CDBB99;
  --brass:        #A88A55;
  --brass-deep:   #7C6238;
  --brass-light:  #DFC08D;
  --line:         #E4DCCB;
  --white:        #FFFFFF;

  --display: "Fraunces", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --body: "Jost", "Futura", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 1180px;
  --gut: clamp(20px, 5vw, 48px);
  --section: clamp(64px, 10vw, 128px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

/* ---------- Layout ---------- */

.wrap{
  width:100%;
  max-width:var(--measure);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.wrap--narrow{ max-width:760px; }

section{ padding-block:var(--section); }

/* ---------- Type ---------- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  font-variation-settings:"opsz" 96;
  line-height:1.08;
  letter-spacing:-0.018em;
  text-wrap:balance;
  margin:0 0 0.5em;
}
h3,h4{ font-variation-settings:"opsz" 24; letter-spacing:-0.008em; line-height:1.2; }

h1{ font-size:clamp(2.75rem, 7vw, 5rem); }
h2{ font-size:clamp(2rem, 4.5vw, 3.25rem); }
h3{ font-size:clamp(1.35rem, 2.4vw, 1.75rem); }

p{ margin:0 0 1.25em; }

.eyebrow{
  font-family:var(--body);
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--taupe);
  margin:0 0 1.25rem;
}

.lede{
  font-size:clamp(1.05rem, 1.7vw, 1.25rem);
  color:var(--ink-soft);
  max-width:56ch;
}

.muted{ color:var(--ink-soft); }
.small{ font-size:0.875rem; }

/* ---------- Buttons ---------- */

.btn{
  display:inline-block;
  font-family:var(--body);
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.05rem 2.25rem;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--cream);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
  cursor:pointer;
}
.btn:hover{ background:var(--brass); border-color:var(--brass); color:var(--white); }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.btn--light{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.btn--light:hover{ background:transparent; color:var(--cream); border-color:var(--cream); }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2rem; }

/* ---------- Header ---------- */

.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(250,247,242,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}

.nav{
  display:flex; align-items:center;
  gap:clamp(14px,3vw,34px); min-height:76px;
}
.brand{ margin-right:auto; }

/* Header lockup: the monogram mark plus the wordmark in Jost caps, matching the
   lettering inside the logo.
   The mark here is the FAVICON artwork, not the full emblem. The full emblem is
   180 hairlines with the wordmark set inside it; at nav size the ring greys out
   and that inner type is about 3px tall. The monogram is 60 heavier strokes
   around a serif L and was drawn to survive small sizes. The full emblem is used
   at 130px and up, in the footer and the CTA bands. */
.brand{
  position:relative;
  display:inline-flex; align-items:center; gap:13px;
  text-decoration:none; color:var(--ink);
}

/* At the top of the page the full emblem hangs out of the header and breaks
   into the panel below, the same move as the hero emblem. It only works at size,
   so as soon as you scroll it swaps for the compact monogram lockup and the bar
   returns to its normal height. Desktop only: on a phone the emblem would land
   on the hero photograph. */
.brand-emblem{
  position:absolute; left:-6px; top:-14px;
  width:150px; height:150px;
  opacity:0; visibility:hidden;
  transition:opacity .28s ease;
  pointer-events:none;
}
@media (min-width:861px){
  .site-header{ overflow:visible; }
  .site-header:not(.is-scrolled) .nav{ min-height:112px; }
  .site-header:not(.is-scrolled) .brand-mark,
  .site-header:not(.is-scrolled) .brand-word{ opacity:0; visibility:hidden; }
  .site-header:not(.is-scrolled) .brand-emblem{ opacity:1; visibility:visible; }
  .brand-mark, .brand-word{ transition:opacity .28s ease; }
  .nav{ transition:min-height .28s ease; }
}
.brand-mark{ width:44px; height:44px; flex:0 0 44px; display:block; }
.brand-word{
  font-family:var(--body);
  font-size:1.02rem;
  font-weight:400;
  letter-spacing:0.34em;
  text-indent:0.34em;
  text-transform:uppercase;
  white-space:nowrap;
}
.brand:hover .brand-word{ color:var(--brass-deep); }
@media (max-width:520px){
  .brand{ gap:10px; }
  .brand-mark{ width:36px; height:36px; flex-basis:36px; }
  .brand-word{ font-size:0.86rem; letter-spacing:0.24em; text-indent:0.24em; }
}
.site-footer .brand-mark{ display:none; }

/* emblem, used only where it has room to read */
.emblem{ display:block; width:100%; height:auto; }
.emblem-wrap{ width:clamp(132px,15vw,172px); margin:0 auto; }
.cta-band .emblem-wrap{ margin:0 auto 2.25rem; }
.site-footer .emblem-wrap{ margin:0 0 1.25rem; width:clamp(120px,12vw,146px); }

.nav-links{
  display:flex; align-items:center; gap:34px;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none;
  font-size:0.8rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-block:6px;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav-links a:hover{ color:var(--ink); border-color:var(--taupe); }
.nav-links a[aria-current="page"]{ color:var(--ink); border-color:var(--ink); }

/* The booking button lives outside the collapsible list so it stays on screen
   on a phone. Inside the list it disappeared behind the Menu toggle, which left
   small screens with no visible call to action at all. */
.nav-book{ display:inline-block; white-space:nowrap; }

.nav-toggle{
  display:none;
  background:none; border:0; padding:8px;
  font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink); cursor:pointer;
}

@media (max-width: 860px){
  .nav-toggle{ display:block; order:3; }
  .nav-book{ order:2; padding:0.8rem 1.35rem; font-size:0.7rem; letter-spacing:0.14em; }
  .nav-links{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--cream);
    border-bottom:1px solid var(--line);
    padding:8px var(--gut) 24px;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:14px 0; border-bottom:1px solid var(--line); }
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  min-height:min(86vh, 760px);
  display:flex; align-items:flex-end;
  background:var(--cream-deep) center/cover no-repeat;
  padding-block:clamp(48px,9vw,96px);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(31,27,24,.72) 0%, rgba(31,27,24,.34) 45%, rgba(31,27,24,.12) 100%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero h1, .hero p, .hero .eyebrow{ color:var(--cream); }
.hero .eyebrow{ color:var(--taupe-light); }
.hero .lede{ color:rgba(250,247,242,.9); }

/* Split hero — copy on cream, photograph uncropped alongside it.
   Used when the hero image is high-key and a dark scrim would muddy it. */
.hero-split{
  padding-block:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.hero-split .copy{
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(36px,4.6vh,84px);
  padding-left:max(var(--gut), calc((100vw - var(--measure))/2));
  padding-right:clamp(24px,4vw,64px);
}
.hero-split .copy-inner{ max-width:clamp(19rem, 30vw, 28rem); }
.hero-split .frame{ position:relative; background:var(--cream-deep); }
/* Sits on the boundary, half over cream and half over the photograph. Anchored
   to the frame rather than the section so it follows the photo when the layout
   stacks. */
/* The emblem straddles the seam. Its wordmark sits dead centre, so wherever the
   emblem lands, half the type would fall on the photograph. A soft cream disc
   under the middle carries the type; it fades out well inside the lash ring, so
   the ring itself still reads as laid over the picture. */
.hero-emblem-wrap{
  position:absolute; z-index:3; pointer-events:none;
  left:0; top:56%; transform:translate(-50%,-50%);
  width:clamp(196px,23vw,310px); aspect-ratio:1/1;
  display:grid; place-items:center;
  background:radial-gradient(circle closest-side,
    rgba(250,247,242,.94) 0%,
    rgba(250,247,242,.90) 42%,
    rgba(250,247,242,.55) 58%,
    rgba(250,247,242,0) 76%);
}
.hero-emblem{ width:100%; height:auto; min-height:0; display:block; }
.hero-split .hero-photo{
  display:block;
  width:100%; height:100%; object-fit:cover; object-position:50% 35%;
  min-height:min(62vh, 560px);
}
@media (max-width:860px){
  .hero-split{ grid-template-columns:1fr; }
  .hero-split .frame{ order:-1; }
  .hero-split .hero-photo{ min-height:0; aspect-ratio:auto; height:min(33vh,310px); }
  /* stacked: drop the emblem far enough that the wordmark clears the photo
     edge entirely and sits on cream */
  .hero-emblem-wrap{
    left:50%; top:auto; bottom:0; transform:translate(-50%,66%);
    width:clamp(140px,34vw,186px);
  }
  .hero-split h1{ font-size:clamp(2.3rem,10vw,3.1rem); }
  .hero-split .lede{ font-size:1rem; }
  .hero-split .btn-row{ margin-top:1.4rem; gap:10px; }
  .hero-split .copy{
    padding-inline:var(--gut);
    padding-block:calc(clamp(140px,34vw,186px) * 0.62) clamp(36px,7vw,56px);
  }
}

/* On a short laptop the resting header, the hero padding and the headline
   together push the booking button under the fold. Tighten all three. */
@media (min-width:861px) and (max-height:820px){
  .site-header:not(.is-scrolled) .nav{ min-height:92px; }
  .brand-emblem{ width:122px; height:122px; top:-10px; }
  .hero-split h1{ font-size:clamp(2.4rem,4.4vw,3.4rem); }
  .hero-split .lede{ font-size:1.02rem; }
  .hero-split .btn-row{ margin-top:1.5rem; }
}

/* Page hero (interior pages) */
.page-hero{
  background:var(--cream-deep);
  border-bottom:1px solid var(--line);
  padding-block:clamp(56px,9vw,110px);
}
.page-hero h1{ margin-bottom:0.35em; }

/* ---------- Grid helpers ---------- */

.grid{ display:grid; gap:clamp(24px,4vw,48px); }
.grid-2{ grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); }

/* ---------- Trust strip ---------- */

.strip{
  background:var(--ink);
  color:var(--cream);
  padding-block:clamp(28px,4vw,40px);
}
.strip ul{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,5vw,64px);
  list-style:none; margin:0; padding:0;
  font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase;
  text-align:center;
}
.strip li{ color:rgba(250,247,242,.85); }

/* ---------- Service cards ---------- */

.card{
  background:var(--white);
  border:1px solid var(--line);
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:border-color .25s ease;
}
.card > img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.card-body{ padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; flex:1; }
.card:hover{ border-color:var(--taupe); }
.card-body h3{ margin-bottom:0.4em; }
.card-body p{ color:var(--ink-soft); font-size:0.95rem; }
.card-body .price{
  margin-top:auto; padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--display); font-size:1.5rem; color:var(--ink);
}
.card-body .price small{
  display:block; font-family:var(--body); font-size:0.72rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--taupe);
  margin-bottom:4px;
}

/* ---------- Price list (services page) ---------- */

.pricelist{ border-top:1px solid var(--line); margin-top:2.5rem; }
.pricelist-row .thumb{
  flex:0 0 104px; width:104px; aspect-ratio:1/1;
  object-fit:cover; align-self:center;
}
@media (max-width:600px){ .pricelist-row .thumb{ flex-basis:76px; width:76px; } }
.pricelist-row{
  display:flex; flex-wrap:wrap; gap:16px 32px;
  align-items:baseline; justify-content:space-between;
  padding-block:26px;
  border-bottom:1px solid var(--line);
}
.pricelist-row .name{ flex:1 1 260px; }
.pricelist-row .name h4{
  font-size:1.2rem; margin:0 0 6px;
}
.pricelist-row .name p{ margin:0; font-size:0.92rem; color:var(--ink-soft); max-width:52ch; }
.pricelist-row .meta{
  display:flex; align-items:baseline; gap:28px; white-space:nowrap;
}
.pricelist-row .dur{
  font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--taupe);
}
.pricelist-row .amt{ font-family:var(--display); font-size:1.5rem; }

/* ---------- Price matrix (fills, priced by days) ---------- */
.scrollx{ overflow-x:auto; margin:2.5rem 0 0; border:1px solid var(--line); background:var(--white); }
.pricetable{ width:100%; border-collapse:collapse; font-size:0.95rem; min-width:560px; }
.pricetable th, .pricetable td{ padding:15px 20px; text-align:left; border-bottom:1px solid var(--line); }
.pricetable tbody tr:last-child td{ border-bottom:0; }
.pricetable thead th{
  font-size:0.7rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--taupe); white-space:nowrap; border-bottom:1px solid var(--ink);
}
.pricetable td.n, .pricetable th.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pricetable td.n{ font-family:var(--display); font-size:1.2rem; font-variation-settings:"opsz" 20; }
.pricetable td.svc{ font-family:var(--display); font-size:1.15rem; font-variation-settings:"opsz" 20; }
.pricetable tr.accent td{ background:var(--cream-deep); }
.pricetable tr.cut td{ color:var(--ink-soft); font-size:0.9rem; }
.pricetable tr.cut td.n{ font-family:var(--body); font-size:0.9rem; }
.table-note{ font-size:0.85rem; color:var(--ink-soft); margin-top:1rem; max-width:62ch; }

/* ---------- Offer cards ---------- */
.offer{ border:1px solid var(--taupe-light); background:var(--white); padding:clamp(26px,3.2vw,36px); }
.offer .amt{ font-family:var(--display); font-size:2rem; line-height:1; margin:0 0 4px; }
.offer .was{ font-size:0.82rem; color:var(--taupe); letter-spacing:0.06em; }
.offer p{ font-size:0.93rem; color:var(--ink-soft); margin:14px 0 0; }

/* ---------- Feature columns ---------- */

.feature h3{ font-size:1.25rem; }
.feature p{ color:var(--ink-soft); font-size:0.95rem; margin-bottom:0; }
.feature .num{
  font-family:var(--display); font-size:1.05rem; color:var(--taupe);
  display:block; margin-bottom:14px; letter-spacing:0.06em;
  font-variation-settings:"opsz" 14;
}
/* non-sequential feature blocks: a rule, not a number */
.feature--rule{ border-top:1px solid var(--taupe-light); padding-top:22px; }

/* ---------- Split (image + text) ---------- */

.split{
  display:grid; gap:clamp(32px,5vw,72px);
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  align-items:center;
}
.split img{ width:100%; height:100%; object-fit:cover; }
.split .ph{ aspect-ratio:1/1; }

/* ---------- Gallery ---------- */

.gallery{
  display:grid; gap:clamp(10px,1.4vw,18px);
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
}
.gallery figure{ margin:0; position:relative; overflow:hidden; background:var(--cream-deep); }
.gallery img{ transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.gallery figure:hover img{ transform:scale(1.04); }
.gallery img, .gallery .ph{ aspect-ratio:1/1; width:100%; object-fit:cover; }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px;
  font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--cream);
  background:linear-gradient(to top, rgba(31,27,24,.72), transparent);
}

/* Image placeholder — swap for real <img> */
.ph{
  background:
    repeating-linear-gradient(45deg, var(--cream-deep) 0 14px, #EDE5D9 14px 28px);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--taupe);
  font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase;
  text-align:center; padding:16px;
}

/* ---------- Quote ---------- */

.quote{ background:var(--cream-deep); }
.quote blockquote{
  margin:0; font-family:var(--display);
  font-size:clamp(1.5rem,3.4vw,2.35rem); line-height:1.35;
  max-width:24ch;
}
.quote cite{
  display:block; margin-top:1.5rem; font-style:normal;
  font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--taupe);
}

/* ---------- FAQ ---------- */

.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer;
  padding-block:24px;
  font-family:var(--display); font-size:1.25rem;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--body); font-weight:300; font-size:1.4rem; color:var(--taupe);
  transition:transform .2s ease;
}
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ padding-bottom:24px; margin:0; color:var(--ink-soft); max-width:62ch; }

/* ---------- Info / detail list ---------- */

.detail dt{
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--taupe); margin-bottom:6px;
}
.detail dd{ margin:0 0 26px; font-size:1rem; }
.detail dd a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--taupe-light); }
.detail dd a:hover{ border-color:var(--ink); }

/* ---------- CTA band ---------- */

.cta-band{
  background:var(--ink); color:var(--cream); text-align:center;
}
.cta-band h2{ color:var(--cream); }
.cta-band p{ color:rgba(250,247,242,.78); max-width:46ch; margin-inline:auto; }
.cta-band .btn-row{ justify-content:center; }

/* ---------- Footer ---------- */

.site-footer{
  background:var(--cream-deep);
  border-top:1px solid var(--line);
  padding-block:clamp(48px,7vw,80px) 32px;
  font-size:0.9rem;
}
.footer-grid{
  display:grid; gap:40px;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  margin-bottom:48px;
}
.site-footer h4{
  font-family:var(--body); font-size:0.72rem; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--taupe);
  margin-bottom:16px;
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:10px; }
.site-footer a{ text-decoration:none; color:var(--ink-soft); }
.site-footer a:hover{ color:var(--ink); }
.footer-base{
  border-top:1px solid var(--line); padding-top:24px;
  display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between;
  font-size:0.8rem; color:var(--taupe);
}

/* ---------- Utility ---------- */

.center{ text-align:center; }
.center .lede{ margin-inline:auto; }
.center .btn-row{ justify-content:center; }
.mt-0{ margin-top:0; }
.stack-lg > * + *{ margin-top:clamp(48px,6vw,80px); }

.skip{
  position:absolute; left:-9999px;
}
.skip:focus{
  left:16px; top:16px; z-index:100; background:var(--ink); color:var(--cream);
  padding:12px 20px; text-decoration:none;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}