/* =============================================================================
   FANCY NAILS PARADISE — design system

   MOBILE FIRST, and meant literally: every base rule below describes the phone.
   Desktop is added on top through `min-width` queries only — there is not a
   single `max-width` breakpoint in this file. A nail salon is found on a phone,
   usually one-handed, often standing up, so the phone layout is the design and
   the desktop layout is the adaptation.

   Palette is anchored to the salon's real interior, which is publicly described
   as baby blue with oversized armchairs — so powder blue is the ground truth
   here, warmed with porcelain and a deep rose for action.

   Contrast: every token below was checked against WCAG AA on all three
   surfaces (--porcelain, --shell, --powder). The two that needed solving were
   the muted grey and the rose: --ink-3 #566670 clears 5.71/5.21/4.86, and
   --rose #94564F clears 5.45/4.96/4.63 with white-on-rose at 5.67 so it is
   safe as a filled button. --rose-soft is DECORATIVE ONLY — it fails as text.
   ============================================================================= */

:root {
  --porcelain: #FCFAF8;
  --shell:     #F4EFEA;
  --powder:    #DEEAF1;
  --powder-2:  #C2D9E6;
  --ink:       #1F2E38;
  --ink-2:     #4C5D68;
  --ink-3:     #566670;
  --rose:      #94564F;
  --rose-soft: #B4736C;   /* decorative only — never text */
  --rose-lt:   #E0A49C;   /* on dark only */
  --muted-d:   #A9BAC4;   /* on dark only */
  --line:      #E7DFD8;
  --line-2:    #D6CCC3;

  --wrap: 1140px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;

  --shadow-1: 0 1px 2px rgba(31,46,56,.05), 0 4px 16px rgba(31,46,56,.05);
  --shadow-2: 0 2px 8px rgba(31,46,56,.07), 0 20px 44px rgba(31,46,56,.10);

  --ease: cubic-bezier(.22,.68,.32,1);
  --f-display: "Playfair Display", Georgia, serif;
  --f-text: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* height of the sticky mobile action bar, so content can clear it */
  --bookbar: 68px;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* the sticky booking bar sits above the home indicator on iOS */
  padding-bottom: calc(var(--bookbar) + env(safe-area-inset-bottom, 0px));
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 8.5vw, 3rem); }
h2 { font-size: clamp(1.65rem, 6.5vw, 2.2rem); }
h3 { font-size: 1.16rem; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

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

.wrap { width: min(100% - 2.2rem, var(--wrap)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: var(--porcelain);
  padding: .85rem 1.2rem; font-weight: 700; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- reveals ---------- */
.js-anim .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-anim .reveal.is-in { opacity: 1; transform: none; }
.js-anim .reveal-d1 { transition-delay: .07s; }
.js-anim .reveal-d2 { transition-delay: .14s; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252,250,248,.94);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; gap: .75rem; min-height: 60px; }

.brand {
  display: flex; align-items: center; gap: .55rem; text-decoration: none;
  margin-right: auto; min-width: 0; min-height: 44px;
}
.brand .mark { flex: none; color: var(--rose); }
.brand-txt { display: grid; line-height: 1.03; min-width: 0; }
.brand-txt b {
  font-family: var(--f-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: .01em; white-space: nowrap;
}
.brand-txt small {
  font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}

/* Nav is a drawer on phones. */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: none; border: 1px solid var(--line-2); border-radius: 50%;
  color: var(--ink); cursor: pointer;
}
/* The drawer lives inside a viewport-sized shell that CLIPS it.

   A fixed element translated off-canvas still counts toward the document's
   scroll width — that alone was adding ~300px of horizontal overflow to every
   page at every phone size. Clipping it in a fixed, overflow:hidden shell is
   the honest fix; setting `overflow-x: hidden` on body would have hidden this
   bug and every future one like it. */
.nav-shell {
  position: fixed; inset: 0; z-index: 150;
  overflow: hidden; visibility: hidden;
}
.nav-open .nav-shell { visibility: visible; }

.site-nav {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(78vw, 300px); z-index: 2;
  background: var(--porcelain); border-left: 1px solid var(--line);
  padding: 5rem 1.4rem 2rem;
  display: flex; flex-direction: column; gap: .2rem;
  transform: translateX(100%); transition: transform .32s var(--ease);
  box-shadow: var(--shadow-2);
}
.nav-open .site-nav { transform: none; }
.site-nav a {
  text-decoration: none; font-weight: 600; font-size: 1.02rem; color: var(--ink-2);
  min-height: 52px; display: flex; align-items: center;
  border-bottom: 1px solid var(--line);
}
.site-nav a[aria-current="page"] { color: var(--rose); }
.nav-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: none; border: 1px solid var(--line-2); color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
}
.scrim {
  position: absolute; inset: 0; z-index: 1; background: rgba(31,46,56,.42);
  opacity: 0; transition: opacity .3s var(--ease);
}
.nav-open .scrim { opacity: 1; }
.head-cta { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--f-text); font-weight: 700; font-size: .95rem;
  min-height: 50px; padding: .5rem 1.4rem;
  border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .15s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--rose); color: #fff; }
.btn-outline { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-ink { background: var(--ink); color: var(--porcelain); }
.btn-wide { width: 100%; }

/* utility: constrain a lede's measure without an inline style */
.measure { max-width: 56ch; }
.acts-gap { margin-top: 1.7rem; }
/* outline button sitting on the dark band */
.btn-on-dark { color: var(--porcelain); border-color: rgba(252,250,248,.45); }

/* ---------- sticky booking bar (the conversion mechanism) ---------- */
.bookbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: grid; grid-template-columns: 1fr 1fr; gap: .55rem;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(252,250,248,.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.bookbar .btn { min-height: 48px; font-size: .92rem; padding-inline: .6rem; }

/* ---------- sections ---------- */
.section { padding: 3.2rem 0; }
.section-shell { background: var(--shell); }
.section-powder { background: var(--powder); }
.section-ink { background: var(--ink); color: var(--porcelain); }
.section-ink h2, .section-ink h3 { color: var(--porcelain); }
.section-ink p { color: var(--muted-d); }

.eyebrow {
  /* 12px floor — .68rem rendered at 10.9px, too small to read on a phone */
  font-size: .75rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--rose); margin: 0 0 .7rem;
}
.section-ink .eyebrow { color: var(--rose-lt); }
.lede { font-size: 1.04rem; color: var(--ink-2); }
.section-ink .lede { color: var(--muted-d); }

/* ---------- hero ---------- */
.hero { padding: 2rem 0 2.6rem; }
.hero h1 { margin-bottom: .4em; }
.hero h1 em { font-style: italic; color: var(--rose); }
.hero-sub { font-size: 1.05rem; color: var(--ink-2); }
.hero-fig { margin-bottom: 1.6rem; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); }
.hero-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero-acts { display: grid; gap: .6rem; margin-top: 1.5rem; }

.hero-facts {
  display: grid; gap: .5rem; margin-top: 1.6rem; padding-top: 1.3rem;
  border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-3);
}
.hero-facts div { display: flex; align-items: center; gap: .55rem; }
.hero-facts svg { width: 17px; height: 17px; flex: none; color: var(--rose); }
.hero-facts b { color: var(--ink); font-weight: 700; }

/* open-now pill */
.open-pill { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 700; }
.open-pill .led { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.open-pill.is-open .led { background: #3F7D52; box-shadow: 0 0 0 3px rgba(63,125,82,.18); }
.open-pill.is-shut .led { background: #9B5B4F; box-shadow: 0 0 0 3px rgba(155,91,79,.16); }

/* ---------- trust strip ---------- */
.trust { display: grid; gap: .9rem; }
.trust-item {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--porcelain); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1rem 1.1rem;
}
.trust-item svg { width: 22px; height: 22px; flex: none; color: var(--rose); margin-top: 2px; }
.trust-item b { display: block; font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; }
.trust-item span { font-size: .9rem; color: var(--ink-2); }

/* ---------- service cards (home) ---------- */
.svc-grid { display: grid; gap: 1rem; }
.svc {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .95rem;
  align-items: center;
  background: var(--porcelain); border: 1px solid var(--line);
  border-radius: var(--r); padding: .75rem; text-decoration: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
}
.svc img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; }
.svc h3 { margin: 0 0 .2rem; font-size: 1.06rem; }
.svc p {
  margin: 0; font-size: .88rem; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.svc .from { display: block; margin-top: .35rem; font-size: .84rem; font-weight: 700; color: var(--rose); }

/* ---------- price list ---------- */
.price-tools {
  display: grid; gap: .7rem;
  padding-bottom: 1.1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line);
}
.search { position: relative; }
.search svg {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-3); pointer-events: none;
}
.search input {
  width: 100%; min-height: 50px;
  font-family: var(--f-text); font-size: 1rem; color: var(--ink);
  background: var(--porcelain); border: 1.5px solid var(--line-2); border-radius: 999px;
  padding: .5rem 1rem .5rem 2.8rem;
}
.search input::placeholder { color: var(--ink-3); }

.chips {
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* fade the right edge so it reads as scrollable rather than clipped */
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center;
  font-family: var(--f-text); font-size: .89rem; font-weight: 700; color: var(--ink-2);
  background: var(--porcelain); border: 1.5px solid var(--line-2); border-radius: 999px;
  padding: 0 1rem; cursor: pointer; white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--porcelain); }

.count { font-size: .86rem; color: var(--ink-3); margin: 0 0 1.1rem; }

.price-group { margin-bottom: 2.2rem; }
.price-group:last-child { margin-bottom: 0; }
.price-group h2 { font-size: 1.35rem; margin-bottom: .15rem; }
.price-group .note { font-size: .88rem; color: var(--ink-3); margin-bottom: .9rem; }

.price-list { list-style: none; margin: 0; padding: 0; }
.price-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .2rem .9rem;
  align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.price-row:last-child { border-bottom: 0; }
.price-row .nm { font-weight: 700; font-size: 1rem; }
.price-row .pr {
  font-family: var(--f-display); font-weight: 600; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.price-row .pr.ask { font-family: var(--f-text); font-size: .84rem; font-weight: 700; color: var(--ink-3); }
.price-row .ds { grid-column: 1 / -1; font-size: .88rem; color: var(--ink-2); }

.empty {
  text-align: center; padding: 2.4rem 1rem; color: var(--ink-3);
  border: 1px dashed var(--line-2); border-radius: var(--r);
}
.empty b { display: block; font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); margin-bottom: .25rem; }

/* ---------- band ---------- */
.band { position: relative; overflow: hidden; }
.band-img { position: absolute; inset: 0; }
.band-img img { width: 100%; height: 100%; object-fit: cover; }
.band-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,46,56,.72) 0%, rgba(31,46,56,.86) 100%);
}
.band-in { position: relative; padding: 3rem 0; color: var(--porcelain); }
.band-in h2 { color: var(--porcelain); }
.band-in p { color: #DCE6EC; }

/* ---------- info / visit ---------- */
.facts { display: grid; gap: 1.2rem; }
.fact dt {
  font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .3rem;
}
.fact dd { margin: 0; font-size: 1rem; }
.fact dd a {
  color: var(--rose); font-weight: 700; text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: 44px;
}

.hours { width: 100%; border-collapse: collapse; font-size: .97rem; }
.hours th, .hours td { text-align: left; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.hours th { font-weight: 600; color: var(--ink-2); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--rose); font-weight: 800; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }

.map-card {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--powder);
}
.map-card .map-body { padding: 1.2rem; }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.15rem 2.6rem 1.15rem 0; min-height: 44px;
  font-family: var(--f-display); font-size: 1.08rem; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%; margin-top: -6px;
  width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding: 0 0 1.15rem; color: var(--ink-2); font-size: .95rem; }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: var(--muted-d); padding: 2.8rem 0 2rem; }
.site-foot .brand { color: var(--porcelain); margin-bottom: 1rem; }
.site-foot .brand .mark { color: var(--rose-lt); }
.site-foot .brand-txt small { color: var(--muted-d); }
.foot-grid { display: grid; gap: 1.8rem; padding-bottom: 1.8rem; border-bottom: 1px solid rgba(169,186,196,.22); }
.site-foot h4 {
  font-family: var(--f-text); font-size: .74rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--porcelain); margin: 0 0 .7rem;
}
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; font-size: .95rem; }
.foot-list a, .foot-list span { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--muted-d); }
.foot-list a:hover { color: var(--porcelain); }
.foot-bottom { padding-top: 1.4rem; font-size: .8rem; display: grid; gap: .3rem; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--bookbar) + 18px);
  transform: translate(-50%, 160%);
  background: var(--ink); color: var(--porcelain);
  padding: .8rem 1.25rem; border-radius: 999px; font-size: .9rem; font-weight: 700;
  z-index: 300; box-shadow: var(--shadow-2); transition: transform .35s var(--ease);
  max-width: calc(100vw - 2rem);
}
.toast.is-up { transform: translate(-50%, 0); }

/* =============================================================================
   DESKTOP LAYERS — everything above describes the phone; these add the desk.
   ============================================================================= */

@media (min-width: 700px) {
  body { font-size: 17px; padding-bottom: 0; }        /* bookbar is mobile-only */
  .bookbar { display: none; }
  .toast { bottom: 26px; }

  .section { padding: 4.5rem 0; }
  h1 { font-size: clamp(2.6rem, 5vw, 3.6rem); }

  /* the bookbar hides here, so the header must carry the call action from the
     same breakpoint — otherwise a phone in landscape has no visible way to book */
  .head-cta { display: block; }
  .head-cta .btn { min-height: 44px; padding-inline: 1rem; font-size: .9rem; }

  .hero-acts { grid-auto-flow: column; justify-content: start; }
  .hero-facts { grid-auto-flow: column; justify-content: start; gap: 1.8rem; }
  .trust { grid-template-columns: repeat(3, 1fr); }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2.4rem; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .price-tools { grid-template-columns: minmax(0, 320px) 1fr; align-items: center; gap: 1rem; }
  .chips { -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; overflow: visible; }
  .band-in { padding: 4.5rem 0; }
  .band-img::after {
    background: linear-gradient(90deg, rgba(31,46,56,.88) 0%, rgba(31,46,56,.72) 46%, rgba(31,46,56,.30) 100%);
  }
  .band-in h2, .band-in p { max-width: 34ch; }
}

@media (min-width: 900px) {
  /* nav becomes a normal bar; the drawer machinery is switched off entirely */
  .nav-toggle, .nav-close, .scrim { display: none; }
  .nav-shell { position: static; overflow: visible; visibility: visible; z-index: auto; }
  .site-nav {
    position: static; width: auto; padding: 0; transform: none;
    flex-direction: row; gap: 1.6rem; background: none; border: 0; box-shadow: none;
  }
  .site-nav a { min-height: 0; border: 0; font-size: .96rem; font-weight: 600; }
  .site-nav a[aria-current="page"] { color: var(--ink); }
  .head-cta { display: block; }
  .bar { min-height: 74px; gap: 1.6rem; }
  .brand-txt b { font-size: 1.16rem; }
  .brand-txt small { font-size: .6rem; }

  .hero { padding: 3.5rem 0 4rem; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; }
  .hero-fig { margin-bottom: 0; order: 2; }
  .hero-fig img { aspect-ratio: 4 / 5; }
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .svc { grid-template-columns: 1fr; padding: 0; overflow: hidden; }
  .svc img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
  .svc-body { padding: 1.1rem 1.2rem 1.3rem; }
  .visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; }
}

@media (min-width: 1100px) {
  .price-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; align-items: start; }
}

/* ---------- touch ----------
   A phone is driven by a thumb, not a cursor: hover never fires, so press
   states carry the feedback, and every control clears 44px. */
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn-primary:hover { background: #7C443E; }
  .btn-outline:hover { border-color: var(--ink); background: var(--shell); }
  .btn-ink:hover { background: #16222A; }
  .chip:hover { border-color: var(--ink-3); color: var(--ink); }
  .svc:hover { border-color: var(--powder-2); box-shadow: var(--shadow-2); transform: translateY(-2px); }
  .site-nav a:hover { color: var(--rose); }
}

@media (pointer: coarse) {
  .btn:active, .chip:active { transform: scale(.97); }
  .svc:active { transform: scale(.995); background: var(--shell); }
  .faq summary { padding-block: 1.25rem; }
}