/* ==========================================================================
   Glow Getter Bedford
   Layout and components. Tokens live in tokens.css, faces in fonts.css.
   ========================================================================== */

/* --- Primitives ---------------------------------------------------------- */

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

section { position: relative; }

/* Adjacent sections each contribute this, so the gap between two of them is
   double the value — keep it modest. */
.section {
  padding-block: clamp(56px, 6.5vw, 100px);
}

.section--tint { background: var(--cream-deep); }

.stack   { display: grid; gap: 16px; }
.center  { text-align: center; justify-items: center; }

.lede {
  font-size: 18px;
  line-height: 1.5;
  max-width: 56ch;
  margin: 0;
}

.muted { color: var(--brown-muted); }

/* Section heading block */
.head { display: grid; gap: 14px; margin-bottom: clamp(36px, 5vw, 64px); }
.head h2 { font-size: clamp(32px, 5vw, 60px); }
.head.center { justify-items: center; text-align: center; }
.head.center .lede { margin-inline: auto; }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, transform .25s ease;
}

.btn--solid  { background: var(--grad-solid); background-image: var(--grad); color: #fff; }
.btn--solid:hover  { background-image: var(--grad-hover); transform: translateY(-2px); }

/* Compact variant — used for the header CTA so the pill sits neatly in the bar. */
.btn--sm { padding: 9px 18px; font-size: 14px; }

.btn--ghost  { background: transparent; color: var(--brown); border-color: rgba(99,59,44,.25); }
.btn--ghost:hover  { background: var(--bronze-10); border-color: var(--bronze); }

.btn--light  { background: var(--card); color: var(--brown); }
.btn--light:hover  { background: #fff; transform: translateY(-2px); }

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

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
.header.is-stuck { border-bottom-color: var(--bronze-10); }

/* Nav left, wordmark centred, CTA right — the reference's arrangement. */
.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 88px;
}
/* grid-row must be explicit on all four. Without it, auto-placement only ever
   moves forward, so the nav (column 1) lands on a second row after the
   wordmark (column 2) and the header doubles in height. */
.header__inner .wordmark    { grid-column: 2; grid-row: 1; justify-self: center; }
.header__inner .nav         { grid-column: 1; grid-row: 1; justify-self: start; }
.header__inner .header__cta { grid-column: 3; grid-row: 1; justify-self: end; }
.header__inner .nav-toggle  { grid-column: 3; grid-row: 1; justify-self: end; }

/* Supplied logo, cropped and background-keyed to transparency so it sits on
   any surface. Aspect is 679:335 — wordmark only, tagline cropped off. */
.wordmark { text-decoration: none; display: block; line-height: 0; }
.wordmark img {
  display: block;
  height: 46px;
  width: auto;
}
.wordmark--footer img { height: 58px; }

@media (max-width: 560px) {
  .wordmark img { height: 36px; }
  .wordmark--footer img { height: 46px; }
}

.nav { display: flex; align-items: center; gap: 22px; }
.nav a {
  font-size: 14px;
  font-weight: 500;
  /* Seven items beside a centred logo — without this they wrap to two and
     three lines and the header grows. */
  white-space: nowrap;
  color: var(--brown);
  text-decoration: none;
  position: relative;
  padding-block: 4px;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle { display: none; }

/* --- Hero ----------------------------------------------------------------
   A single full-bleed rounded image card, inset slightly from the viewport
   edges, with the headline centred over the photograph. The treatment ring
   sits inside the bottom of the same card. */

/* Reference insets the card 50px each side at desktop (93.4% of the viewport)
   and rounds it 50px, tapering to 10px/30px on a phone. */
.hero { padding: 10px clamp(10px, 2.8vw, 50px) 0; }

.hero__card {
  position: relative;
  border-radius: clamp(30px, 3vw, 50px);
  overflow: hidden;
  min-height: var(--card-h);
  display: grid;
  /* Top-aligned, not centred: the lower half of the card belongs to the ring. */
  align-content: start;
  isolation: isolate;
  background: var(--cream-deep);
}

.hero__card > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 30%;
  z-index: -2;
}

/* The photograph is light, so the white headline needs a scrim to hold
   contrast. Weighted to the centre where the type actually sits. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 78% at 50% 38%, rgba(60, 33, 20, .52) 0%, rgba(60, 33, 20, .28) 45%, rgba(60, 33, 20, 0) 78%),
    linear-gradient(to bottom, rgba(60, 33, 20, .30) 0%, rgba(60, 33, 20, 0) 32%, rgba(60, 33, 20, .18) 100%);
}

.hero__content {
  position: relative;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: clamp(40px, 5vw, 80px) var(--gutter) 0;
  max-width: 940px;
  margin-inline: auto;
}

.hero__content .eyebrow { color: rgba(255, 255, 255, .82); }

.hero h1 {
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.08;
  color: #FFFDF9;
  /* Wide enough to hold two lines — a third line runs into the ring. */
  max-width: 17ch;
  text-shadow: 0 2px 24px rgba(60, 33, 20, .28);
}

.hero__sub {
  margin: 0;
  max-width: 46ch;
  font-size: 17px;
  color: rgba(255, 253, 249, .88);
  text-shadow: 0 1px 14px rgba(60, 33, 20, .34);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 22px;
  font-size: 14px;
  color: rgba(255, 253, 249, .8);
}
.hero__meta strong { color: #FFFDF9; font-weight: 600; }

/* --- Treatment ring ------------------------------------------------------
   Frosted pills radiating from a centre that sits just below the card, so
   only the top arc reads inside the photograph. Each pill is rotated to run
   along its own spoke — it is not kept upright. */

.hero__ring {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--ring-d);
  height: var(--ring-d);
  /* Anchor the visible arc in absolute terms rather than as a share of the
     ring's own diameter. The diameter tracks viewport WIDTH while the card
     height tracks viewport HEIGHT, so a percentage lets the arc climb into
     the headline on a wide, short window. This keeps exactly --arc of the
     circle inside the card at every size. */
  transform: translate(-50%, calc(100% - var(--arc)));
  pointer-events: none;
}

.hero {
  /* Single source of truth: the card height. The ring, the visible arc and
     the pill length are all proportions of it, taken from the reference
     (ring 0.635, arc 0.259, pill 0.214 of card height).

     This matters more than it looks. Sizing the ring off viewport WIDTH while
     the arc came from viewport HEIGHT left arc/R at 0.36 against the
     reference's 0.81 — the visible angular window collapsed to ~35deg and
     the outer pills fell clean off the bottom of the card. */
  --card-h: clamp(600px, calc(100vh - 118px), 940px);
  /* Capped by viewport width too, so the ring never grows wider than the card
     on a phone. Arc and pill are proportions of the ring itself, which keeps
     the visible angular window at a steady ~75deg at every size. */
  --ring-d: min(calc(var(--card-h) * 0.70), 88vw);
  --arc:    calc(var(--ring-d) * 0.415);
  --pill-len: calc(var(--ring-d) * 0.31);

  /* --fan-step must exceed the angular width a pill occupies (its ~30px
     height divided by its radius), or neighbouring pills overlap. */
  --fan-base: 26deg;
  --fan-step: 15deg;
}

.ring {
  position: absolute;
  inset: 0;
}

.ring__chip {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Angle is derived from the pill's side (--s) and its rank out from the
     centre (--k), so the spread stays responsive without recomputing in JS. */
  --a: calc(var(--s) * (var(--fan-base) + (var(--k) - 1) * var(--fan-step)));
  /* Sit on the spoke at --a, then turn 90° so the pill runs along it. */
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translateY(calc(var(--ring-d) / -2 + var(--pill-len) / 2 + 8px))
    rotate(90deg);
}

.ring__pill {
  display: flex;
  align-items: center;
  gap: 6px;
  width: var(--pill-len);
  /* Kept slim on purpose: pill height sets how much angle each one occupies,
     and therefore how many fit around the arc without colliding. */
  padding: 4px 10px 4px 4px;
  border-radius: 50px;
  background: rgba(152, 106, 62, .16);
  border: 1px solid rgba(255, 255, 255, .30);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}

.ring__dot {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 100%;
  background: rgba(255, 255, 255, .26);
  border: 1px solid rgba(255, 255, 255, .38);
}

.ring__pill span {
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes ring-spin { to { transform: rotate(-360deg); } }

/* The cream notch at the bottom centre, carrying the ring's call to action. */
.hero__notch {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: var(--cream);
  border-radius: 100px 100px 0 0;
  padding: 18px 34px 14px;
  display: grid;
  justify-items: center;
  gap: 4px;
  z-index: 3;
}
.hero__notch a {
  font-size: 15px;
  font-weight: 600;
  color: var(--brown);
  text-decoration: none;
}
.hero__notch a:hover { color: var(--bronze); }
.hero__notch svg { width: 18px; height: 18px; color: var(--bronze); }

/* Credentials strip beneath the hero card — carries the booking CTA that the
   reference keeps out of the hero itself. */
.credentials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 30px;
  padding: 34px 0 4px;
  font-size: 15px;
  color: var(--brown-muted);
}
.credentials strong { color: var(--brown); font-weight: 600; }
.credentials .btn { margin-left: 6px; }

/* --- Word-scrub statement ------------------------------------------------ */

.scrub {
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 46px);
  line-height: 1.28;
  /* Centred full-width, as in the reference — not a narrow left column. */
  text-align: center;
  max-width: 30ch;
  margin: 22px auto 0;
}
.scrub .w {
  color: rgba(99, 59, 44, .22);
  transition: color .45s ease;
}
.scrub .w.on { color: var(--brown); }

.proof { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 40px; }
.proof__score {
  background: var(--grad-solid);
  background-image: var(--grad);
  color: #fff;
  width: 64px; height: 64px;
  border-radius: 100%;
  display: grid; place-items: center;
  flex: none;
}
.proof__score { font-family: var(--serif); font-size: 24px; }
.proof__stars { color: var(--bronze); letter-spacing: 2px; font-size: 14px; }

/* --- Page hero ------------------------------------------------------------
   Inner pages get a plain typographic band rather than the home page's
   photographic card. */

.page-hero {
  padding-block: clamp(48px, 6vw, 88px) clamp(8px, 2vw, 24px);
}
.page-hero h1 {
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.08;
  max-width: 18ch;
  margin-top: 18px;
}
.page-hero .lede { margin-top: 20px; }

.nav a[aria-current="page"] { color: var(--grad-solid); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--grad-solid); }

/* --- Treatment accordion -------------------------------------------------
   Full-width stacked rows rather than a card grid, matching the reference:
   each row ~200px closed, opening to reveal detail and an image. */

.accordion { display: grid; gap: 20px; }

.acc {
  background: var(--cream-deep);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.acc__head {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 20px 32px;
  padding: clamp(24px, 2.6vw, 36px);
}

.acc__icon {
  width: 44px; height: 44px;
  border-radius: 100%;
  background: var(--bronze-10);
  display: grid; place-items: center;
  color: var(--bronze);
  margin-bottom: 14px;
}
.acc__icon svg { width: 22px; height: 22px; }

.acc__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 38px);
  color: var(--brown);
  line-height: 1.1;
  margin: 0 0 12px;
}

.acc__desc { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.55; }

.acc__toggle {
  grid-column: 2;
  grid-row: 1;
  flex: none;
  width: 46px; height: 46px;
  border-radius: 100%;
  background: var(--card);
  display: grid; place-items: center;
  color: var(--bronze);
  transition: transform .35s ease, background-color .25s ease;
}
.acc__toggle svg { width: 18px; height: 18px; }
.acc[open] .acc__toggle { transform: rotate(45deg); }
.acc__head:hover .acc__toggle { background: #fff; }

/* Body reveals on open */
.acc__body {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  padding: 0 clamp(24px, 2.6vw, 36px) clamp(24px, 2.6vw, 36px);
}
.acc__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.acc__list li {
  display: flex; justify-content: space-between; gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bronze-10);
  font-size: 15px;
}
.acc__list b { color: var(--brown); font-weight: 600; }
.acc__list span { color: var(--bronze); font-family: var(--serif); font-size: 18px; }

.acc__media {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bronze-06);
  display: grid;
  place-items: center;
  color: var(--bronze);
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

.acc summary { list-style: none; }
.acc summary::-webkit-details-marker { display: none; }

/* --- Cards --------------------------------------------------------------- */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--card);
  border: 1px solid var(--bronze-10);
  border-radius: var(--r-md);
  padding: 28px;
  display: grid;
  gap: 12px;
  align-content: start;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--bronze);
  box-shadow: 0 18px 40px -24px rgba(99, 59, 44, .45);
}
.card h3 { font-size: 24px; }
.card p { margin: 0; font-size: 15px; line-height: 1.55; }

.card__icon {
  width: 46px; height: 46px;
  border-radius: var(--r-pill);
  background: var(--bronze-10);
  display: grid; place-items: center;
  color: var(--bronze);
}
.card__icon svg { width: 22px; height: 22px; }

.card__link {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bronze);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.card__link:hover { color: var(--bronze-deep); }
.card__link svg { width: 14px; height: 14px; transition: transform .25s ease; }
.card__link:hover svg { transform: translateX(4px); }

/* --- About (sticky column) ----------------------------------------------- */

/* Rounded cream block holding a two-column image / text split. */
.about__block {
  background: var(--cream-deep);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.about__figure {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bronze-06);
  display: grid;
  place-items: center;
  color: var(--bronze);
  text-align: center;
  padding: 24px;
  font-size: 14px;
}
.about__figure img { width: 100%; height: 100%; object-fit: cover; }

/* Frosted credential card over the photograph */
.about__card {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  background: rgba(99, 59, 44, .34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  display: grid;
  gap: 4px;
  text-align: left;
}
.about__card b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  color: #FFFDF9;
}
.about__card span { font-size: 14px; color: rgba(255, 253, 249, .84); font-weight: 600; }

.ticks { display: grid; gap: 18px; margin: 32px 0 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; }
.ticks svg { flex: none; width: 20px; height: 20px; color: var(--bronze); margin-top: 2px; }

/* --- Signature (Million Dollar) ------------------------------------------ */

.signature {
  background: var(--ink);
  color: rgba(255,255,255,.72);
  border-radius: var(--r-lg);
  padding: clamp(36px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.signature h2 { color: #fff; font-size: clamp(30px, 4vw, 52px); }
.signature .eyebrow { color: #C89B6A; }
.signature ol { margin: 28px 0 0; padding-left: 20px; display: grid; gap: 10px; font-size: 15px; }
.signature__price {
  font-family: var(--serif);
  font-size: 52px;
  color: #fff;
  line-height: 1;
}

/* --- Stats bento --------------------------------------------------------- */

.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bento .card { justify-items: start; }
.bento .stat { font-family: var(--serif); font-size: clamp(34px, 4vw, 54px); color: var(--brown); line-height: 1; }
.bento .card p { color: var(--brown-muted); }
.bento .card--wide { grid-column: span 2; }

/* --- Prices -------------------------------------------------------------- */

.price-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
  justify-content: center;
}
.price-nav button {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--bronze-10);
  background: transparent;
  color: var(--brown-muted);
  cursor: pointer;
  transition: all .25s ease;
}
.price-nav button:hover { border-color: var(--bronze); color: var(--brown); }
.price-nav button[aria-selected="true"] { background: var(--brown); border-color: var(--brown); color: var(--cream); }

.price-group + .price-group { margin-top: 48px; }
.price-group h3 {
  font-size: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bronze-10);
  margin-bottom: 6px;
}

.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--bronze-06);
  align-items: baseline;
}
.price-row__name { font-size: 17px; font-weight: 600; color: var(--brown); }
.price-row__meta { grid-column: 1; font-size: 13px; color: var(--brown-muted); }
.price-row__price {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--bronze);
  white-space: nowrap;
}
.price-row__desc { grid-column: 1 / -1; font-size: 14px; line-height: 1.55; margin: 6px 0 0; max-width: 70ch; }

.tag {
  display: inline-block;
  font-family: var(--label);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--bronze-10);
  color: var(--bronze);
  margin-left: 8px;
  vertical-align: middle;
}

/* --- Testimonials -------------------------------------------------------- */

.quote { display: grid; gap: 18px; align-content: start; }
.quote p { font-family: var(--serif); font-size: 20px; line-height: 1.45; color: var(--brown); margin: 0; }
.quote__who { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.quote__avatar {
  width: 42px; height: 42px;
  border-radius: 100%;
  background: var(--bronze-10);
  display: grid; place-items: center;
  color: var(--bronze);
  font-weight: 700;
  font-size: 14px;
  flex: none;
}

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

.faq { display: grid; gap: 0; }
.faq details {
  border-bottom: 1px solid var(--bronze-10);
  padding: 22px 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--brown);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-right: 1.5px solid var(--bronze);
  border-bottom: 1.5px solid var(--bronze);
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { margin: 14px 0 0; max-width: 72ch; font-size: 15px; line-height: 1.6; }

/* --- CTA + Footer -------------------------------------------------------- */

.cta {
  background: var(--cream-deep);
  border-radius: var(--r-lg);
  padding: clamp(48px, 7vw, 96px) var(--gutter);
  text-align: center;
  display: grid;
  gap: 20px;
  justify-items: center;
}
.cta h2 { font-size: clamp(32px, 5vw, 60px); max-width: 16ch; }

/* --- Opening hours ------------------------------------------------------- */

.hours { margin: 0; display: grid; gap: 0; }
.hours div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bronze-10);
  font-size: 15px;
}
.hours dt { font-weight: 600; color: var(--brown); }
.hours dd { margin: 0; text-align: right; }
.hours .closed { color: var(--bronze); }

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

.footer {
  background: var(--cream-deep);
  border-radius: 30px 30px 0 0;
  padding: clamp(48px, 6vw, 80px) 0 40px;
  margin-top: clamp(48px, 6vw, 90px);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.footer h4 {
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.24px;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 18px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer a { color: var(--brown-muted); text-decoration: none; font-size: 15px; }
.footer a:hover { color: var(--bronze); }
.footer__bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--bronze-10);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 13px;
}

/* --- Reveal on scroll ---------------------------------------------------- */

[data-reveal] {
  opacity: 0.001;
  transform: translateY(46px) scale(.97);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
[data-reveal].in { opacity: 1; transform: none; }

/* --- Responsive ---------------------------------------------------------- */

/* Nav collapses earlier than the rest of the layout: seven items plus a
   centred logo and a CTA run out of room well before 940px. */
@media (max-width: 1080px) {
  .header__inner { grid-template-columns: auto 1fr; }
  .header__inner .wordmark   { grid-column: 1; grid-row: 1; justify-self: start; }
  .header__inner .nav-toggle { grid-column: 2; grid-row: 1; }
  .header__cta { display: none; }

  .nav {
    position: fixed;
    inset: 88px 0 auto;
    background: var(--cream);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    border-bottom: 1px solid var(--bronze-10);
    transform: translateY(-120%);
    transition: transform .35s ease;
  }
  .nav a { padding-block: 14px; border-bottom: 1px solid var(--bronze-06); font-size: 16px; }
  .header.is-open .nav { transform: none; }

  .nav-toggle {
    display: grid;
    gap: 5px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px;
  }
  .nav-toggle i { display: block; width: 22px; height: 1.5px; background: var(--brown); transition: transform .3s ease, opacity .3s ease; }
  .header.is-open .nav-toggle i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .header.is-open .nav-toggle i:nth-child(2) { opacity: 0; }
  .header.is-open .nav-toggle i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

@media (max-width: 940px) {
  .about__grid,
  .acc__body,
  .signature,
  .grid--2 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .card--wide { grid-column: span 2; }
  .about__sticky { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 560px) {
  .grid--4, .bento { grid-template-columns: 1fr; }
  .bento .card--wide { grid-column: span 1; }
  .footer__grid { grid-template-columns: 1fr; }
  .price-row { grid-template-columns: 1fr auto; }

  /* Shorter pills and a tighter fan so the ring stays inside the card. */
  .hero { --fan-base: 22deg; --fan-step: 16deg; }
  .ring__pill { font-size: 13px; }
  .hero__notch { padding: 16px 28px 12px; }
  .hero__notch a { font-size: 14px; }
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .ring, .ring__chip span { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* --- Category jump nav (treatments page) --------------------------------- */

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.jump a {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--bronze-10);
  color: var(--brown-muted);
  text-decoration: none;
  transition: all .25s ease;
}
.jump a:hover { border-color: var(--grad-solid); color: var(--brown); background: var(--bronze-06); }