/* =================================================================
   AWE AESTHETICS — STYLES
   =================================================================
   Structure:
     1. Design tokens (colors, type, spacing)  ← edit brand values here
     2. Base / reset
     3. Reusable pieces (buttons, headings, layout)
     4. Sections (nav, hero, about, services, favorites, footer)
     5. Responsive

   Look & feel: light, warm, airy. White/cream backgrounds throughout.
   Marigold is the DOMINANT brand color — used for borders, label text,
   CTA buttons, pull-quote accents, and section markers (per brand guide).
   Secondary colors (Moss/Blue Spa/Lime) are reserved for sparing use.
   ================================================================= */


/* =================================================================
   1. DESIGN TOKENS
   ================================================================= */
:root {
  /* --- Brand colors: Primary "Marigold" palette (dominant) --- */
  --marigold: #eaab43;   /* primary brand color — the star of the show */
  --mango:    #f0c87a;
  --saffron:  #f4d9a2;

  /* --- Brand colors: Secondary palette (use sparingly) --- */
  --moss:     #b8b665;
  --blue-spa: #699fa2;
  --lime:     #9fc67d;

  /* --- Neutrals: warm, light, airy --- */
  --page:     #fdfbf7;   /* soft warm white — default page background */
  --paper:    #ffffff;   /* pure white for alternating sections/cards */
  --cream:    #f7f2e9;   /* warm cream for alternating sections */
  --ink:      #2b2a27;   /* headings + primary text */
  --ink-soft: #56534c;   /* body / secondary text */
  --line:     #ece4d5;   /* hairline borders */
  --gold-tint:#f6e6c6;   /* faint marigold wash for soft fills / callout panels */

  /* --- Semantic aliases --- */
  --gold: var(--marigold);       /* bright marigold: buttons, borders, bars, large display */
  --gold-text: #8a5c13;          /* deep marigold for SMALL TEXT on light bg. Bright
                                    marigold fails contrast at body size, so info-carrying
                                    text (prices, labels, eyebrows) uses this instead.

                                    Measured contrast (WCAG AA needs 4.5:1 for small text):
                                      on --page  #fdfbf7 ... 5.61:1  PASS
                                      on --cream #f7f2e9 ... 5.20:1  PASS
                                      on --gold-tint #f6e6c6 ... 4.71:1  PASS

                                    Was #8f6016, which passed on page/cream but hit only
                                    4.43:1 on the gold-tint callout panel — just under the
                                    threshold, and the source of Lighthouse's accessibility
                                    contrast flag (96/100). Darkened the minimum needed to
                                    clear AA on all three backgrounds. */
  --bg:   var(--page);
  --text: var(--ink);

  /* --- Type --- */
  --font-display: "Josefin Sans", system-ui, sans-serif; /* headings, nav, buttons, labels */
  --font-body:    "Andada Pro", Georgia, serif;          /* body copy */

  /* --- Layout --- */
  --maxw: 1160px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  --radius: 6px;
  --transition: 200ms ease;
}


/* =================================================================
   2. BASE / RESET
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
:target { scroll-margin-top: 90px; } /* keep sticky nav off section tops */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* ~17px */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;        /* safety net against horizontal scroll */
}

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

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

.hero__inner, .about__inner, .services__inner,
.favorites__inner, .footer__inner, .nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* =================================================================
   3. REUSABLE PIECES
   ================================================================= */

/* Section marker + eyebrow: small uppercase marigold label with a
   short marigold rule to its left (a "section marker"). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);   /* legible deep gold; the dash below stays bright */
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--gold);
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 1.2rem;
  color: var(--ink);
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 2.1rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-2px); }

/* Primary CTA — solid Marigold (the dominant brand action color) */
.btn--gold {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(234,171,67,0.28);
}
.btn--gold:hover { background: #dd9c30; border-color: #dd9c30; }

/* Secondary CTA — marigold outline on light */
.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--gold);
}
.btn--outline:hover { background: var(--gold); color: var(--ink); }


/* =================================================================
   4a. NAV  (light: transparent over hero, solid white on scroll)
   ================================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
}
.nav.is-scrolled {
  background: rgba(253,251,247,0.92);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 1px 0 var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  line-height: 1;
}
.nav__logo-icon { height: 44px; width: auto; display: block; flex-shrink: 0; }

/* Inline wordmark beside the icon. See the brand-guide deviation note in
   index.html — this is a deliberate override, not an oversight.
   Type treatment matches the site's eyebrow/label style (Josefin Sans,
   uppercase, letter-spaced, AA-safe deep gold).
   Size and tracking scale fluidly with the viewport instead of switching at a
   breakpoint, so the wordmark stays visible on small phones (where the
   business name matters most) without ever crowding the hamburger. */
.nav__logo-text {
  font-family: var(--font-display);
  font-size: clamp(0.5rem, 1.75vw, 0.72rem);
  font-weight: 600;
  letter-spacing: clamp(0.06em, 0.45vw, 0.18em);
  text-transform: uppercase;
  color: var(--gold-text);
  white-space: nowrap;
  line-height: 1;
  min-width: 0;
}
/* Final safety on very narrow devices (≤359px, e.g. iPhone SE 1st gen):
   below this the wordmark can't shrink further without becoming illegible,
   so drop it rather than push the hamburger off-screen. The name is still on
   the anchor's aria-label and in the footer. */
@media (max-width: 359px) {
  .nav__logo-text { display: none; }
}

.nav__menu { display: flex; align-items: center; gap: 2rem; }
.nav__menu a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--transition);
}
.nav__menu a:hover { color: var(--gold-text); }

.nav__cta {
  border: 1.5px solid var(--gold);
  color: var(--ink) !important;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  text-transform: uppercase;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em;
}
.nav__cta:hover { background: var(--gold); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
}
.nav__toggle span {
  width: 26px; height: 2px;
  background: var(--ink);
  transition: transform var(--transition), opacity var(--transition);
}


/* =================================================================
   4b. HERO  (light, warm, airy, typographic; marigold accents)
   ================================================================= */
.hero {
  background: var(--page);
  color: var(--ink);
  padding-top: clamp(9rem, 18vh, 12rem);
  padding-bottom: var(--section-y);
  position: relative;
  overflow: hidden;
}
/* Soft mango glow, top-right, for warmth + depth (very subtle) */
.hero::after {
  content: "";
  position: absolute;
  top: -25%; right: -12%;
  width: 60vw; height: 60vw;
  max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(240,200,122,0.35), transparent 62%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; max-width: 900px; }

/* Orientation line above the headline (what + where) */
.hero__eyebrow { margin-bottom: 1.25rem; }

.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  /* min lowered so the headline never overflows narrow phones */
  font-size: clamp(1.9rem, 8vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 1.4rem;
  color: var(--ink);
  overflow-wrap: break-word;
}
.hero__subhead {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.6;
  max-width: 40rem;   /* wider measure — fills more of the hero, fewer wraps */
  color: var(--ink-soft);
  margin-bottom: 2.25rem;
}
.hero__cta { margin-bottom: 0; }

/* Pull-quote accent — marigold left rule + gold lead line */
.hero__note {
  border-left: 3px solid var(--gold);
  padding-left: 1.5rem;
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: 1rem;
}
.hero__note-lead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
}


/* =================================================================
   4c. ABOUT  (white; purpose-built portrait + "Meet Ewa" copy)
   ================================================================= */
.about { padding-block: var(--section-y); background: var(--paper); }
.about__inner {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about__media img {
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
}
.about__body { max-width: none; }  /* fill the text column — no narrow measure */
/* Marigold section marker above the heading */
.about__body .section-heading::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--gold);
  margin-bottom: 1.25rem;
}


/* =================================================================
   4c-2. WHAT TO EXPECT  (soft honey highlight; centered value statement
   — carries the "everything included" message that justifies pricing)
   ================================================================= */
.expect { padding-block: var(--section-y); background: #f8ecce; }
.expect__inner {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.expect .section-heading::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--gold);
  margin: 0 auto 1.25rem;
}
.expect p {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto 1.2rem;
}
/* .expect__close removed 2026-08-03 — the closing line it styled
   ("You show up. I do the thinking...") was cut. See git history. */


/* =================================================================
   4d. SERVICES  (cream; clearest section — grouping + aligned prices)
   ================================================================= */
.services { padding-block: var(--section-y); background: var(--cream); }

.services__header {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.services__subhead { font-size: 1.15rem; color: var(--ink-soft); margin: 0; }
/* Single inclusion note (replaces the repeated LED/BioCharger lines) */
.services__includes {
  margin: 1rem 0 0;
  font-size: 0.98rem;
  font-style: italic;
  color: var(--ink-soft);
}

.service-group { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
/* Marigold section marker: category label underlined in gold */
.service-group__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.75rem;
  margin: 0 0 1.5rem;
  border-bottom: 2px solid var(--gold);
}

.service { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.service:last-child { border-bottom: 0; }

.service__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
}
.service__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  margin: 0;
}
.service__title { display: flex; flex-direction: column; align-items: flex-start; }
/* "Recommended for your first visit" badge on the Comprehensive Facial */
.service__tag {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: var(--gold-tint);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.service__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--gold-text);   /* prices are key info — must be legible */
  white-space: nowrap;
  text-align: right;
}
/* Small duration line beneath the price */
.service__duration {
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}
/* Descriptions fill the row width (no narrow measure leaving big right-side
   whitespace); they're short blurbs, so a wide measure reads fine and keeps
   the page shorter. */
.service__desc { color: var(--ink-soft); margin: 0; }

/* Combined Face Care is the only card that lists options rather than describing
   one treatment, so it gets a list. Matches .service__desc colour and sits close
   under the paragraph that introduces it. */
.service__list {
  color: var(--ink-soft);
  margin: 0.6rem 0 0;
  padding-left: 1.25rem;
}
.service__list li + li { margin-top: 0.3em; }

/* Reassurance callout — soft marigold wash with a marigold button */
.services__cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--gold-tint);
  border: 1px solid var(--saffron);
  border-radius: var(--radius);
  text-align: center;
}
.services__cta p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 500;
  color: var(--ink);
  max-width: 42ch;
  margin: 0 auto 1.5rem;
}


/* =================================================================
   4e. EWA'S FAVORITES  (white; card grid, marigold-bordered cards)
   ================================================================= */
.favorites { padding-block: var(--section-y); background: var(--paper); }
.favorites__header { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.favorites__subhead { font-size: 1.15rem; color: var(--ink-soft); }

.favorites__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  align-items: stretch;   /* equal-height cards so the row looks tidy */
}
.fav-card {
  display: flex;
  flex-direction: column;
  /* natural height (grid is align-items:start) so shorter cards don't
     leave dead space above the button */
  padding: 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold); /* marigold accent border */
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(43,42,39,0.05);
}
/* Product photo at the top of each card — fixed ratio so cards align */
.fav-card__media {
  margin: -2rem -2rem 1.5rem;   /* bleed to the card edges */
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.fav-card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.fav-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0 0 0.9rem;
}
.fav-card__desc { color: var(--ink-soft); font-size: 1rem; }
/* .fav-card__products removed 2026-08-03 with the Truth Treatment card
   (its product list was the only user). See git history to restore. */
.ph { color: #c2ab74; font-style: italic; } /* obvious placeholder styling */

/* Equal-height cards; button pinned to the BOTTOM, full-width, and a uniform
   min-height with centered text so 1-line and 2-line labels are the same size. */
.fav-card .btn {
  margin-top: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.25rem;
  line-height: 1.2;
  text-align: center;
}

/* .favorites__more (storefront banner) removed 2026-08-03 — Ewa never set up
   the Amazon storefront, so the button had no destination. See git history. */


/* =================================================================
   4e-2. BOOKING  (cream; two scheduling paths before the scheduler)
   ================================================================= */
.booking { padding-block: var(--section-y); background: var(--cream); }
.booking__inner {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.booking__lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 48ch;
  margin: 0 auto clamp(1.5rem, 4vw, 2rem);
}
/* Call/text button — a big, obvious tap target (great on mobile: one tap dials)
   with the phone NUMBER as the prominent element. */
.booking__call {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  background: var(--gold);
  color: var(--ink);
  padding: 1rem 2.75rem;
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(234,171,67,0.28);
  transition: background var(--transition), transform var(--transition);
}
.booking__call:hover { background: #dd9c30; transform: translateY(-2px); }
.booking__call-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.booking__call-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  letter-spacing: 0.01em;
}


/* =================================================================
   4f. FOOTER  (light cream, marigold top border + accents)
   ================================================================= */
.footer {
  background: var(--cream);
  color: var(--ink-soft);
  border-top: 3px solid var(--gold);
}
.footer__inner {
  display: grid;
  /* Hours column gets extra room so the times don't wrap awkwardly
     (.footer__hours dd is white-space:nowrap).
     Five columns since 2026-08-10 — a "Treatments" column was added so the
     six service pages are linked from every page, including each other. */
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr 0.8fr;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.footer__logo-img { height: auto; width: clamp(180px, 16vw, 230px); margin-bottom: 1.25rem; }

/* Hours as an aligned label/value list — no awkward wrapping */
.footer__hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.1rem;
  margin: 0;
  font-size: 0.95rem;
}
.footer__hours dt { font-weight: 600; color: var(--ink); white-space: nowrap; }
.footer__hours dd { margin: 0; white-space: nowrap; color: var(--ink-soft); }
.footer__contact { font-style: normal; line-height: 1.9; font-size: 0.95rem; color: var(--ink-soft); }
.footer__contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.footer__contact a:hover { color: var(--gold-text); }

.footer__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1rem;
}
.footer__col p { font-size: 0.95rem; line-height: 1.8; }

.footer__nav, .footer__social { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__nav a, .footer__social a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--transition);
}
.footer__nav a:hover, .footer__social a:hover { color: var(--gold-text); }

.footer__legal {
  border-top: 1px solid var(--line);
  text-align: center;
  padding-block: 1.5rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.footer__legal p { margin: 0; }


/* =================================================================
   4.9  SERVICE PAGES  (/dermaplane, /biocharger-ng, …)
   -----------------------------------------------------------------
   index.html is all short cards, so the stylesheet had NO element rules
   for prose — no h1/h2/h3/ul/li anywhere, only `a { color: inherit }`.
   Dropping 400–900 words of recovered copy in without these would render
   at browser defaults across a ~1100px line. Everything below is additive;
   nothing here can affect index.html except the three clearly-marked
   homepage rules at the end.

   One shared measure (40rem ≈ 68 characters at 1.125rem) is used by the
   hero, the facts band and the prose so all three share a left edge.
   ================================================================= */

.svc-hero,
.prose { padding-inline: var(--gutter); }

/* .nav is position:fixed and nothing pads <body> — .hero compensates with its
   own padding-top, so this compact hero must do the same or the nav overlaps
   the h1. Smaller than .hero's clamp(9rem,18vh,12rem): no full-height stage.

   padding-bottom is 0 on purpose. The gap below the hero has exactly one
   owner — whatever comes next (.svc-photo-lead or .prose) — because when both
   claimed it, a page with no photo showed an 88px hole that read as a missing
   image. The hero's background is var(--page), same as the body, so removing
   its bottom padding is invisible. */
.svc-hero {
  padding-top: clamp(7.5rem, 14vh, 9.5rem);
  padding-bottom: 0;
  background: var(--page);
}

/* 44rem ≈ 75 characters at 1.125rem — the top of the comfortable range for a
   serif, and it lines up with .expect__inner (720px), this site's own
   precedent for long text. It was 40rem, which was narrower than EVERY text
   block on the homepage and read as a squeezed ribbon. The horizontal space
   is filled by the photos below, not by stretching the measure: past ~75
   characters the eye starts losing its place on the return sweep. */
.svc-hero__inner { max-width: 44rem; margin-inline: auto; }

.svc-back {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-text);
  text-decoration: none;
  margin-bottom: 1.5rem;
  /* block, not inline-block: .eyebrow below is display:inline-flex, so an
     inline back-link would sit on the same line as the category label. */
  display: block;
}
.svc-back:hover { text-decoration: underline; }

.svc-hero__stand {
  font-size: clamp(1.1rem, 2vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

/* Certification line ("Procell™ certified") — credential, so it earns the
   deep gold rather than body grey. */
.svc-cert {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0;
}

/* Price rows. Lives INSIDE the booking block at the foot of the page, not
   under the hero — the page should explain the treatment before it asks for
   anything (client review, 2026-08-10).

   Rows, not a Price/Time pair, because the data has three genuinely different
   shapes and the old markup flattened them badly: it promoted "30 min · $30"
   to a headline and demoted "60 min · $60" to grey small print, when the two
   are equal-status options. Same for Procell's $450 / $560. Every real choice
   is now a row of equal weight; only Time is subordinate, and it is dropped
   entirely where the price is already tiered by duration (BioCharger,
   Ballancer) — that omission lives in data/services.json, not in CSS. */
.svc-price {
  max-width: 27rem;
  margin: 0 auto clamp(1.5rem, 4vw, 2rem);
  text-align: left;          /* .booking__inner is centred; this list is not */
}
.svc-price__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.svc-price dt {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* --gold-text, never --marigold: bright marigold measures 1.95:1 and fails AA
   at this size. See the contrast note in the token block. */
.svc-price dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--gold-text);
  text-align: right;
  white-space: nowrap;
}
.svc-price__row--meta dt { color: var(--ink-soft); }
.svc-price__row--meta dd { font-size: 1rem; font-weight: 500; color: var(--ink-soft); }
/* Techniques with no standalone price list the facials they belong to. Must be
   allowed to wrap — unlike a price, this is a sentence. */
.svc-price__row--links dd {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  white-space: normal;
  color: var(--ink-soft);
}
.svc-price__row--links a {
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  color: var(--gold-text);
}
.svc-price__row--links a:hover { border-bottom-color: var(--gold-text); }

/* Common name for the treatment, where Ewa's heading isn't what people call it
   ("Procell™ Micro-Channeling" -> microneedling). */
.svc-alias {
  font-size: 1rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: -0.4rem 0 0.9rem;
}

/* ---- Photos ------------------------------------------------------------- */
/* Never upscale: several of these source files are only 300–500px wide, and
   stretching them to the 40rem measure would visibly soften them. width/height
   attributes are on every <img> so the box is reserved before load (CLS). */
.svc-photo {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-inline: auto;
}
.svc-photo-lead {
  padding-inline: var(--gutter);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
/* Wider than the 44rem text column, matching .hero__inner (900px). The lead
   photo is what establishes the page's real width — without it the prose
   reads as a narrow ribbon floating in an empty page. Still capped at the
   file's natural size by the img's own width attribute, so nothing upscales. */
.svc-photo-lead .svc-photo { max-width: min(100%, 56rem); }
.svc-photo-wrap { margin: 2rem auto; }

/* On wide screens, in-prose photos float into the margin beside the text.
   This is the other half of the answer to "we're not using the real estate":
   it fills the horizontal space AND shortens the page, without touching the
   measure. Only applies where there's room for the text to keep ~55ch beside it. */
@media (min-width: 1000px) {
  .svc-photo-wrap {
    float: right;
    width: 18rem;
    max-width: 40%;
    margin: 0.4rem calc((100% - 44rem) / 2 * -1 + 1rem) 1.5rem 2rem;
  }
  .prose > h2,
  .prose > h3 { clear: right; }
}

/* ---- Long-form prose ---------------------------------------------------- */
.prose {
  /* Bounds the page at the same 56rem as the lead photo. Without this, the
     floated-photo calc below is computed against the full viewport, and on a
     1920px screen the photo flies ~544px into the margin and detaches from
     the text it belongs to. */
  max-width: calc(56rem + 2 * var(--gutter));
  margin-inline: auto;
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
/* Every child is capped and centred so the prose column lines up with the
   hero and the facts band above it.
   ⚠️ Every margin shorthand below MUST keep `auto` in the inline position —
   writing `margin: 0 0 1.15em` here silently overrides this rule's
   margin-inline and drops the text back to the left gutter. */
.prose > * { max-width: 44rem; margin-inline: auto; }
.prose p { margin: 0 auto 1.15em; }
.prose h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 1.6rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 2.75rem auto 0.8rem;
}
.prose h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 2rem auto 0.5rem;
}
.prose > h2:first-child,
.prose > h3:first-child { margin-top: 0; }
.prose ul { margin: 0 auto 1.15em; padding-left: 1.25rem; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--gold); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }
/* `a { color: inherit }` globally, so prose links would be near-invisible.
   Same underline treatment as the footer. */
.prose a {
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color var(--transition), border-color var(--transition);
}
.prose a:hover { color: var(--gold-text); border-bottom-color: var(--gold-text); }

/* ---- Video facade ------------------------------------------------------- */
/* A still + a play button. The real YouTube player is injected by main.js only
   on click, so a page view costs one self-hosted image instead of the player's
   scripts and third-party requests. aspect-ratio is set on BOTH the button and
   the injected iframe so the swap causes no layout shift. */
.svc-video { margin: 2.25rem auto; }
.svc-video__btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}
.svc-video__thumb { width: 100%; height: 100%; object-fit: cover; }

/* Marigold disc + triangle, drawn in CSS so it costs no extra request. */
.svc-video__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
  transition: transform var(--transition), background var(--transition);
}
.svc-video__play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 0.85rem 0 0.85rem 1.4rem;
  border-color: transparent transparent transparent var(--ink);
}
.svc-video__btn:hover .svc-video__play { transform: translate(-50%, -50%) scale(1.07); background: #dd9c30; }
.svc-video__btn:focus-visible { outline: 3px solid var(--gold-text); outline-offset: 3px; }

.svc-video__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
}

/* Also the no-JS fallback: this link works even if main.js never runs. */
.svc-video__caption {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0.7rem 0 0;
}
.svc-video__caption a { text-decoration: none; border-bottom: 1px solid var(--gold); }
.svc-video__caption a:hover { color: var(--gold-text); border-bottom-color: var(--gold-text); }

/* ---- Homepage rules (these three DO affect index.html) ------------------ */
/* Service and favourites names become links where a detail page exists.
   Only some cards link out; the gold underline is the whole affordance —
   a trailing arrow was tried and dropped as visual noise (client, 2026-08-10). */
.service__name a,
.fav-card__name a {
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color var(--transition), border-color var(--transition);
}
.service__name a:hover,
.fav-card__name a:hover { color: var(--gold-text); border-bottom-color: var(--gold-text); }

/* Dermaplaning and JetPeel have no card of their own, so they're linked inline
   from the facial descriptions that already name them. */
.service__desc a,
.service__list a {
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
}
.service__desc a:hover,
.service__list a:hover { color: var(--gold-text); border-bottom-color: var(--gold-text); }

/* =================================================================
   5. RESPONSIVE
   ================================================================= */
/* Nav collapses to a hamburger below 1150px — the 5 links + logo need ~1140px
   to sit on one row, so this prevents cramming/wrapping on tablets. */
@media (max-width: 1150px) {
  .nav__toggle { display: flex; }
  .nav { background: rgba(253,251,247,0.95); backdrop-filter: saturate(180%) blur(8px); }
  .nav__menu {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--page);
    padding: 0 var(--gutter);
    max-height: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    transition: max-height var(--transition), padding var(--transition);
  }
  .nav__menu.is-open { max-height: 85vh; padding-block: 1rem 1.5rem; }
  .nav__menu a { padding: 0.75rem 0; width: 100%; }

  /* Selector is `.nav__menu a.nav__cta` (0,2,1) on purpose: the rule above is
     `.nav__menu a` (0,1,1), which outranks a bare `.nav__cta` (0,1,0) and was
     flattening this button's horizontal padding to 0 — the gold border ended
     up wrapped tight around full-width text instead of reading as a button.
     Matching specificity fixes it without reaching for !important.

     Solid gold here, unlike desktop. On desktop the outlined treatment is
     deliberate so a sticky nav doesn't compete with the hero CTA. Inside the
     mobile menu it's the last of five items in a plain text list, where an
     outline reads as just another link — so it gets the same solid fill as
     the hero button. Ink on marigold measures 7.11:1, comfortably AA. */
  .nav__menu a.nav__cta {
    margin-top: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: var(--gold);
    border-color: var(--gold);
    text-align: center;
  }
}

/* Five footer columns stop fitting before the other layouts break.
   Must stay ABOVE the 860px block so that block still wins below 860px. */
@media (max-width: 1000px) {
  .footer__inner { grid-template-columns: 1fr 1fr 1fr; }
}

/* Layout stacking (independent of the nav breakpoint) */
@media (max-width: 860px) {
  .about__inner { grid-template-columns: 1fr; }
  .about__media { order: -1; max-width: 420px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

/* Price rows stack their label and value on very narrow screens rather than
   letting a long label squeeze the price against it. */
@media (max-width: 420px) {
  .svc-price__row { flex-direction: column; gap: 0.15rem; }
  .svc-price dd { text-align: left; }
}

@media (max-width: 560px) {
  .footer__inner { grid-template-columns: 1fr; }
  .service__head { flex-direction: column; gap: 0.15rem; }
  .service__price { align-items: flex-start; text-align: left; }
}

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