/* ============================================================
   site.css — Gloss Nail Bar, page-specific layout.
   Reuses framework components; adds only what's unique to this
   site. Custom classes are prefixed .g- to stay out of the
   shared component namespace. Every value still a token.
   ============================================================ */

/* Display face on headings + the brand wordmark. */
h1, h2, h3, .g-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
}
.nav__brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; }
/* The gloss dot in the wordmark — the signature, in miniature. */
.g-mark { color: var(--brand-gloss); }

/* Eyebrow tuned for this brand: plum, spaced, with a gloss tick. */
.eyebrow { color: var(--color-brand); display: inline-flex; align-items: center; gap: var(--space-2);
  text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--text-xs); font-weight: var(--weight-bold); }
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: var(--brand-gloss); border-radius: var(--radius-full); }

/* ---- Gloss line: the signature divider ---------------------
   A glossy lacquer sweep echoing the hero's painted stroke.
   Sits between sections as a quiet flourish. */
.g-stroke { display: block; width: 100%; height: 36px; margin: var(--space-8) 0; color: var(--brand-gloss); }
.g-stroke svg { width: 100%; height: 100%; }

/* ---- Hero --------------------------------------------------
   Text left; an atmospheric SVG of a lacquered nail / gloss
   drop right. Stacks on mobile with the art behind the words. */
.g-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 8%, var(--brand-gloss-soft) 0%, transparent 55%),
    linear-gradient(180deg, #FDEDF3 0%, var(--color-bg) 70%);
  border-bottom: 1px solid var(--color-border);
}
.g-hero__inner {
  display: grid; gap: var(--space-12); align-items: center;
  grid-template-columns: 1.1fr 0.9fr;
  padding-block: var(--space-24) var(--space-16);
}
.g-hero__title { font-size: clamp(2.6rem, 6vw, var(--text-4xl)); margin: var(--space-4) 0; }
.g-hero__title em { font-style: italic; color: var(--color-brand); }
.g-hero__lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 34rem; }
.g-hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }
.g-hero__art { position: relative; display: grid; place-items: center; min-height: 18rem; }
.g-hero__art svg { width: 100%; max-width: 28rem; height: auto; }
@media (max-width: 820px) {
  .g-hero__inner { grid-template-columns: 1fr; padding-block: var(--space-16) var(--space-12); }
  .g-hero__art { order: -1; opacity: 0.95; }
}

/* A quiet line of what's on offer — not a stat-grid cliché. */
.g-offer { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center;
  color: var(--color-text-muted); font-size: var(--text-sm); }
.g-offer span { display: inline-flex; align-items: center; gap: var(--space-2); }
.g-offer .ico { color: var(--color-brand); }

/* ---- Section scaffolding ----------------------------------- */
.g-section { padding-block: var(--space-16); }
.g-section__head { max-width: var(--max-width-prose); margin-bottom: var(--space-12); }
.g-section__head p { color: var(--color-text-muted); margin-top: var(--space-3); }

/* ---- Treatment cards --------------------------------------- */
.g-treats { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.g-treat { display: grid; gap: var(--space-3); align-content: start; }
.g-treat__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.g-treat__name { font-family: var(--font-display); font-size: var(--text-xl); }
.g-treat__body { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- Price menu -------------------------------------------- */
.g-menu { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.g-menu caption { text-align: left; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.g-menu th, .g-menu td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.g-menu thead th { font-family: var(--font-sans); font-weight: var(--weight-medium); color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-xs); }
.g-menu tbody tr:hover { background: var(--color-surface); }
.g-menu__price { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; font-weight: var(--weight-medium); }
.g-menu__time { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-muted); }
.g-menu__name { font-weight: var(--weight-medium); }
@media (max-width: 640px) { .g-menu .g-hide-sm { display: none; } }

/* ---- Team -------------------------------------------------- */
.g-team { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.g-tech { display: grid; gap: var(--space-3); justify-items: start; }
.g-tech__avatar {
  width: 4.5rem; height: 4.5rem; border-radius: var(--radius-full); display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-brand);
  background: radial-gradient(120% 120% at 30% 20%, var(--brand-gloss-soft), var(--color-surface-2));
  border: 1px solid var(--color-border);
}
.g-tech__name { font-family: var(--font-display); font-size: var(--text-lg); }
.g-tech__role { color: var(--color-brand); font-size: var(--text-sm); }
.g-tech__bio { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- Offer band: the dark, glossy moment ------------------- */
.g-band { background: var(--color-brand); color: #FBEFF4; border-radius: var(--radius-lg); overflow: hidden; }
.g-band__inner { display: grid; gap: var(--space-12); grid-template-columns: 1.3fr 1fr; align-items: center;
  padding: var(--space-16); }
.g-band h2 { color: #FFF3F8; }
.g-band p { color: #ECD2DF; }
.g-band .eyebrow { color: var(--brand-gloss-soft); }
.g-band .eyebrow::before { background: var(--brand-gloss); }
.g-band__card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-4); }
.g-band__price { font-family: var(--font-display); font-size: var(--text-3xl); color: #FFF3F8; }
.g-band__meta { display: grid; gap: var(--space-2); font-size: var(--text-sm); color: #ECD2DF; }
.g-band__meta div { display: flex; gap: var(--space-3); align-items: baseline; }
.g-band__meta dt { color: var(--brand-gloss-soft); min-width: 5.5rem; }
.g-band__meta dd { margin: 0; }
@media (max-width: 820px) { .g-band__inner { grid-template-columns: 1fr; padding: var(--space-12); } }

/* ---- Booking split (scheduler + enquiry) ------------------- */
.g-booking { display: grid; gap: var(--space-16); grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 900px) { .g-booking { grid-template-columns: 1fr; gap: var(--space-12); } }

/* ---- Visit ------------------------------------------------- */
.g-visit { display: grid; gap: var(--space-12); grid-template-columns: 1fr 1.2fr; align-items: start; }
@media (max-width: 820px) { .g-visit { grid-template-columns: 1fr; } }
.g-hours { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.g-hours div { display: flex; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-1);
  border-bottom: 1px dashed var(--color-border); }
.g-hours dt { color: var(--color-text); }
.g-hours dd { margin: 0; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }