:root {
  --ink: #161616;
  --muted: #5f5f5f;
  --line: #e7e4e2;
  --soft: #f7f4f3;
  --bg: #ffffff;
  --accent: #7e93ab;        /* slate blue */
  --accent-dark: #5a6e86;
  --radius: 14px;
  --display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
html, body { overflow-x: clip; }  /* last-resort guard against sideways scroll on phones */
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
section { padding-block: 56px; scroll-margin-top: 64px; }
#contact { scroll-margin-top: 80px; }
#bundles { scroll-margin-top: 80px; }
.eyebrow { font: 500 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
h2 { font-size: clamp(26px, 4.4vw, 34px); margin-bottom: 10px; }
.lede { color: var(--muted); max-width: 560px; margin: 0; }

/* Header */
header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.brand { font: 600 17px/1 var(--display); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.brand img { height: 46px; width: auto; display: block; }
.brand .amp { color: var(--accent); }
nav { display: flex; gap: 20px; }
nav a { text-decoration: none; font-size: 14px; color: var(--muted); }
nav a:hover { color: var(--ink); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px; font: 500 15px/1 var(--body); text-decoration: none; border: 1.5px solid var(--ink); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark); }

/* Hero */
.hero { padding-block: 64px 60px; border-bottom: 1px solid var(--line); }
.hero h1 { font-size: clamp(36px, 8vw, 64px); max-width: 12ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .tagline { margin: 16px 0 24px; font-size: clamp(16px, 2.4vw, 19px); color: var(--muted); }
.hero .tagline b { font-weight: 500; color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .meta { margin-top: 20px; font-size: 14px; color: var(--muted); }
.hero-grid { display: grid; gap: 24px; align-items: center; }
.hero-text { min-width: 0; }
.hero-logo { width: 112px; height: auto; order: -1; }
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
  .hero-logo { width: clamp(220px, 24vw, 290px); order: 0; }
}

/* Offer */
.offer { background: var(--soft); }
.offer-grid { display: grid; gap: 16px; margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 520px; }
.bundle { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.bundle h3 { font-size: 20px; }
.bundle .price { font: 600 30px/1 var(--display); color: var(--accent); }
.offer-more { margin: 16px 0 0; font-size: 15px; }
.offer-more a { color: var(--accent-dark); font-weight: 500; }

/* Services */
.services-grid { display: grid; gap: 1px; margin-top: 24px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service { background: #fff; padding: 18px 20px; }
.service .num { font: 500 11px/1 var(--body); color: var(--accent); letter-spacing: .1em; }
.service h3 { font-size: 18px; margin: 6px 0 4px; }
.service p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
@media (max-width: 720px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
  .service { padding: 14px; }
  .service h3 { font-size: 16px; }
  .service p { font-size: 13px; }
}

/* Prices */
.prices { border-top: 1px solid var(--line); }
.price-grid { display: grid; gap: 10px; margin-top: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 860px) { .price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } }
.price-col { display: grid; gap: 10px; min-width: 0; }
.prices details { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.prices summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; font: 600 18px/1.2 var(--display); }
.prices summary::-webkit-details-marker { display: none; }
.prices summary::after { content: '+'; font: 400 24px/1 var(--body); color: var(--accent-dark); transition: transform .2s; }
.prices details[open] summary::after { transform: rotate(45deg); }
.prices summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.price-list { list-style: none; margin: 0; padding: 0 22px 16px; }
.price-list li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 15px; }
.price-list li::after { content: ''; order: 1; flex: 1; border-bottom: 1px dotted #c9c4c1; min-width: 12px; }
.price-list span { min-width: 0; }
.price-list b { order: 2; font-weight: 500; white-space: nowrap; }
.deal-group h3 { font: 600 15px/1.3 var(--body); color: var(--accent-dark); padding: 6px 22px 2px; display: flex; justify-content: space-between; gap: 10px; }
.deal-group h3 b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.deal-group .price-list { padding-bottom: 8px; }
.deal-group:last-child .price-list { padding-bottom: 16px; }
.lash-table { width: calc(100% - 44px); margin: 0 22px 18px; border-collapse: collapse; font-size: 14px; }
.lash-table th, .lash-table td { padding: 8px 4px; text-align: right; border-bottom: 1px solid var(--line); }
.lash-table th[scope="row"], .lash-table thead th:first-child { text-align: left; font-weight: 500; }
.lash-table thead th { font-size: 12px; font-weight: 500; color: var(--muted); }
.lash-table tr:last-child th, .lash-table tr:last-child td { border-bottom: 0; }
.menu-links { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.menu-links a { color: var(--accent-dark); font-weight: 500; }

/* Instagram gallery */
.ig { background: var(--soft); }
.ig-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.ig-head .lede a { color: var(--accent); text-decoration: none; font-weight: 500; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 24px; }
.ig-grid a { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: var(--line); }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.ig-grid a:hover img, .ig-grid a:focus-visible img { transform: scale(1.04); }
.ig-grid a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (min-width: 860px) { .ig-grid { gap: 12px; } .ig-grid a { border-radius: 10px; } }

/* Booking */
.book { background: var(--ink); color: #fff; }
.book .lede { color: #bdbdbd; }
.book .eyebrow { color: #b8c6d6; }
.book-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .book-grid { grid-template-columns: 1fr 1.3fr; } }
.book-aside p { margin: 14px 0 0; color: #bdbdbd; }
.book-aside a { color: #fff; }
.book-cta { align-self: center; }
.book-cta p { margin: 12px 0 0; font-size: 14px; color: #bdbdbd; text-align: center; }
.step-fields { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.full { grid-column: 1 / -1; }
label { display: grid; gap: 4px; font-size: 13px; color: #d4d4d4; min-width: 0; }
.field-error { font-size: 13px; color: #ff9b8f; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #ff9b8f; }
.services-pick > .field-error { grid-column: 1 / -1; }
input, select, textarea { width: 100%; min-width: 0; font: 16px/1.4 var(--body); color: var(--ink); background: #fff; border: 1.5px solid transparent; border-radius: 8px; padding: 7px 12px; min-height: 40px; }
/* iOS Safari gives date/time inputs a built-in minimum width that can push the page sideways */
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; display: block; }
input::-webkit-date-and-time-value { text-align: left; }
textarea { min-height: 64px; resize: vertical; }
.services-pick { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; }
.services-pick legend { font-size: 13px; color: #d4d4d4; padding: 0; margin-bottom: 8px; }
.services-pick label { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #fff; cursor: pointer; min-height: 32px; }
.services-pick input { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--accent); }
.services-pick .group-label { margin: 6px 0 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #b8c6d6; }
/* Details screen: one section per picked service that has options (js/nail-picker.mjs) */
.services-pick.option-group { display: block; }
.services-pick.option-group[hidden] { display: none; }
.option-group + .option-group { margin-top: 30px; }
.services-pick.option-group > legend { margin-bottom: 14px; font: 600 17px/1.2 var(--display); color: #fff; }
.nail-group-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; }
#spa-services > .nail-details { border-left: 0; margin: 0; padding: 0; }
.nail-item { min-width: 0; }
.nail-item.open { grid-column: 1 / -1; }
.nail-details { border: 0; border-left: 2px solid var(--accent); margin: 6px 0 4px 9px; padding: 4px 0 4px 18px; min-width: 0; display: grid; gap: 12px; }
.nail-details[hidden] { display: none; }
.nail-details .choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.nail-details .choice-label { padding: 0; margin: 0 0 6px; font-size: 13px; color: #d4d4d4; }
.nail-details .choice-label .optional { color: #9a9a9a; }
.nail-details .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.services-pick .nail-details .pills label { position: relative; min-height: 36px; padding: 6px 14px; border: 1.5px solid #4a4a4a; border-radius: 999px; font-size: 14px; gap: 0; }
.services-pick .nail-details .pills input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.services-pick .nail-details .pills label:has(input:checked) { background: var(--accent-dark); border-color: var(--accent); color: #fff; }
.services-pick .nail-details .pills label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(126,147,171,.35); }
.nail-details .addons label { min-height: 28px; font-size: 14px; }
.nail-details .choice-error { margin: 6px 0 0; font-size: 13px; color: #ff9b8f; }
.nail-details .choice.missing .pills label { border-color: #ff9b8f; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(126,147,171,.35); }
.book .btn-primary { background: var(--accent); border-color: var(--accent); width: 100%; }
.book .btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
#booking-status { margin: 0; font-size: 14px; color: #b8c6d6; min-height: 1.4em; }
@media (max-width: 520px) { .step-fields { grid-template-columns: minmax(0, 1fr); } }

/* Booking page (book/index.html): one form shown a step at a time — see js/steps.mjs */
.book-page { min-height: calc(100vh - 61px); min-height: calc(100dvh - 61px); padding-block: 36px 0; }
.book-wrap { max-width: 640px; }
.book-page h1 { font-size: clamp(28px, 6vw, 38px); }
.book-intro { margin: 10px 0 0; color: #bdbdbd; font-size: 15px; }
.book-intro a { color: #fff; }
.book-intro .together { white-space: nowrap; }  /* "Prefer to call?" and the number stay on one line */
.progress { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; padding: 0; }
.progress li { padding-top: 10px; border-top: 3px solid #3a3a3a; font-size: 13px; color: #9a9a9a; transition: border-color .25s, color .25s; }
.progress li.done { border-color: var(--accent-dark); color: #d4d4d4; }
.progress li[aria-current="step"] { border-color: var(--accent); color: #fff; font-weight: 500; }
#booking-form { margin-top: 28px; scroll-margin-top: 150px; }
.step[hidden], #booking-form[hidden], .progress[hidden], .book-intro[hidden], #booking-done[hidden] { display: none; }
.step { animation: step-in .28s ease both; }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .step { animation: none; } html { scroll-behavior: auto; } }
.step h2 { font-size: clamp(22px, 4.6vw, 28px); margin-bottom: 18px; }
.step h2:focus { outline: none; }
.recap-line { margin: -8px 0 18px; font-size: 14px; color: #bdbdbd; }
/* The recap is kept to a line or two per row so the last screen fits a phone without scrolling */
.recap { margin: 0 0 14px; padding: 2px 14px; border: 1px solid #333; border-radius: var(--radius); background: #1e1e1e; }
.recap > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 8px 0; font-size: 14px; line-height: 1.4; }
.recap > div + div { border-top: 1px solid #333; }
.recap dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* read out, not shown */
.recap dd { margin: 0; color: #fff; overflow-wrap: anywhere; }
.recap dd span + span::before { content: ' · '; color: #9a9a9a; }
/* Last screen: name and phone share a row even on phones, and notes starts one line tall */
.step[data-step="4"] h2 { margin-bottom: 12px; }
.step[data-step="4"] .step-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.step[data-step="4"] textarea { min-height: 40px; }
.recap button { font: 500 13px/1.6 var(--body); color: #b8c6d6; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.recap button:hover { color: #fff; }
/* Next/Back stay pinned to the bottom of the screen while the step scrolls */
.step-bar { position: sticky; bottom: 0; z-index: 5; margin: 26px -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: rgba(22,22,22,.94); backdrop-filter: blur(8px); border-top: 1px solid #2c2c2c; }
.step-bar #booking-status { min-height: 0; margin: 0 0 10px; }
.step-bar #booking-status:empty { display: none; }
.step-buttons { display: flex; gap: 10px; }
.step-bar .btn[hidden] { display: none; }
.step-bar .btn-primary { flex: 1; width: auto; }
.btn-back { flex: none; background: transparent; color: #fff; border-color: #5a5a5a; }
.btn-back:hover { border-color: #fff; }
.step-bar .btn:disabled { opacity: .6; cursor: default; }
.step-bar .btn:focus-visible, .recap button:focus-visible, .done-actions a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#booking-done { padding-block: 28px 56px; }
#booking-done:focus { outline: none; }
#booking-done .tick { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-dark); font-size: 26px; line-height: 1; animation: step-in .4s ease both; }
#booking-done h2 { margin: 18px 0 8px; }
#booking-done > p { margin: 0 0 22px; color: #d4d4d4; }
.done-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.done-actions .btn-ghost { color: #fff; border-color: #5a5a5a; }
.done-actions .btn-ghost:hover { color: #fff; border-color: #fff; }
.done-actions .btn-primary { width: auto; }
@media (max-width: 600px) { .done-actions .btn { flex: 1 1 100%; } }

/* Hours + contact */
.two-col { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .two-col { grid-template-columns: 1fr 1fr; } }
table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15px; }
td { padding: 9px 0; border-bottom: 1px solid var(--line); }
td:last-child { text-align: right; color: var(--muted); }
tr.today td { font-weight: 500; color: var(--accent-dark); }
.open-status { font-weight: 500; color: var(--muted); }
.open-status::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #9a9a9a; margin-right: 7px; vertical-align: 1px; }
.open-status.is-open { color: #1f6b3a; }
.open-status.is-open::before { background: #2e9d57; }
.open-status:empty { display: none; }
#hours .open-status { margin: 4px 0 0; }
tr.today td:first-child::after { content: ' · Today'; font-size: 12px; color: var(--accent); }
.visit { font-style: normal; margin-top: 18px; }
.visit-addr { display: inline-block; font: 500 clamp(22px, 3.4vw, 27px)/1.3 var(--display); text-decoration: none; }
.visit-lines { margin: 16px 0 0; line-height: 1.9; }
.visit-lines a { font-weight: 500; text-underline-offset: 3px; word-break: break-word; }
.visit a:hover { color: var(--accent-dark); }
.perks { display: flex; flex-wrap: wrap; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.perks li { white-space: nowrap; }
.perks li:not(:last-child)::after { content: '·'; margin: 0 8px; }
.directions { margin-top: 22px; }

footer { border-top: 1px solid var(--line); padding-block: 22px; font-size: 13px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

@media (max-width: 600px) {
  nav { gap: 14px; }
  nav a.hide-sm { display: none; }
  section { padding-block: 44px; }
  .actions .btn { flex: 1 1 100%; }
}
@media (max-width: 400px) {
  .brand { font-size: 15px; gap: 8px; }
  .brand img { height: 38px; }
}
@media (max-width: 360px) {
  nav a.hide-xs { display: none; }  /* hero already has a Book button */
  nav { gap: 10px; }
  nav a { font-size: 13px; }
}