/* ==========================================================================
   Refine Lifestyles — cosmeticsurgerykent.co.uk
   Tokens from the staging build (refine.sociallinkup.co.uk), per the design doc.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font Licence; see assets/fonts) ---------- */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bodoni-moda-latin-400-normal.woff2?v=20261023") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/bodoni-moda-latin-400-italic.woff2?v=20261023") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/bodoni-moda-latin-600-normal.woff2?v=20261023") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/bodoni-moda-latin-600-italic.woff2?v=20261023") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/montserrat-latin-300-normal.woff2?v=20261023") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-400-normal.woff2?v=20261023") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-latin-500-normal.woff2?v=20261023") format("woff2"); }

:root {
  --night: #0F0F0F;
  --night-2: #1A1A1A;
  --night-3: #0A0A0A;
  --ink: #1A1A1A;
  --ivory: #F5F0E6;
  --cream: #EDE6D9;
  --white: #FFFFFF;
  --gold: #D4AF7F;
  --gold-2: #C9A66B;
  --gold-deep: #8A6D3F;
  --gold-ink: #6B5228;   /* gold text on ivory/cream: ~6:1 contrast */
  --btn-a: #B08A52;
  --btn-b: #8E6C3B;
  --mist: #C9C2B6;
  --mist-2: #B9B2A6;
  --mist-3: #8E887E;
  --ink-soft: #4A453E;
  --hair: rgba(212, 175, 127, .22);
  --error: #E8A38C;

  --serif: "Bodoni Moda", Didot, "Bodoni 72", "Playfair Display", Georgia, serif;
  --sans: "Montserrat", Futura, "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --wrap: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --band: clamp(88px, 11vw, 150px);
  --header: 96px;
  --topbar: 40px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--night); scrollbar-gutter: stable; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) - 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ivory);
  font: 300 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; }
h1 em, h2 em { font-style: italic; color: var(--gold); }
p { margin: 0 0 1.1em; }
strong, b { font-weight: 500; }   /* Montserrat ships 300/400/500 only; avoids faux bold */
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

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

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--gold); color: var(--night); padding: 10px 16px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
}
.skip:focus { top: 16px; }

h2 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.1; letter-spacing: -.005em; margin-bottom: .6em; }
h3 { font-size: 24px; line-height: 1.2; }

.lead { font-size: 18px; line-height: 1.85; color: var(--mist); }

.eyebrow {
  display: flex; align-items: center; gap: 16px;
  font: 400 12px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 26px;
}
.eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; flex: none; }
.eyebrow--deep { color: var(--gold-ink); }

/* ---------- Buttons & links ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 15px 26px; border: 1px solid var(--btn-a);
  font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--white); background: transparent; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.btn span { transition: transform .4s var(--ease); }
.btn:hover span { transform: translateX(4px); }
.btn--line::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-out);
}
.btn--line:hover::before { transform: scaleY(1); }
.btn--gold { background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); }
.btn--gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease);
}
.btn--gold:hover::after { left: 120%; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: wait; }

.link-line {
  display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px;
  font: 400 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  border-bottom: 1px solid var(--gold-2);
}
.link-line span { transition: transform .4s var(--ease); }
.link-line:hover span { transform: translateX(4px); }

.actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Media (images with a warm fallback while photography is pending) ---------- */
.media {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(212, 175, 127, .28), transparent 60%),
    linear-gradient(160deg, #3a3129 0%, #1c1916 55%, #0f0f0f 100%);
}
.media picture { display: block; width: 100%; height: 100%; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.is-missing img { display: none; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; transition: background .5s var(--ease), backdrop-filter .5s; }
.topbar {
  height: var(--topbar); border-bottom: 1px solid var(--hair);
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--mist-2);
  overflow: hidden; transition: height .4s var(--ease), opacity .4s var(--ease);
}
.topbar__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.topbar a:hover { color: var(--gold); }
.topbar__contact { display: flex; align-items: center; gap: 14px; }
.topbar__contact a[href^="mailto"] { text-transform: none; letter-spacing: .08em; }
.topbar__sep { color: var(--gold); }
.header__inner { height: var(--header); display: flex; align-items: center; gap: 40px; transition: height .4s var(--ease); }

.site-header.is-scrolled {
  background: rgba(15, 15, 15, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.site-header.is-scrolled .topbar { height: 0; opacity: 0; border-bottom-color: transparent; }
.site-header.is-scrolled .header__inner { height: 80px; }
.site-header--solid { background: rgba(15, 15, 15, .97); border-bottom: 1px solid var(--hair); }
.site-header--solid + .legal + .site-footer, .legal + .site-footer { padding-top: 40px; }

.logo { display: block; flex: none; }
.logo img { height: 60px; width: auto; }
.hero__small a[href^="mailto"] { text-transform: none; letter-spacing: .06em; }
.logo__text { display: none; font: 400 26px/1 var(--serif); letter-spacing: .02em; color: var(--ivory); }
.logo__text em { color: var(--gold); }
.is-wordmark > img { display: none; }
.is-wordmark > .logo__text { display: block; }

.nav { display: flex; gap: 34px; margin-left: auto; }
.nav a {
  position: relative; padding: 6px 0;
  font: 400 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--cream);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.header__cta { flex: none; }

.burger {
  display: none; flex: none; margin-left: auto; width: 46px; height: 46px; padding: 0; position: relative; z-index: 2;
  background: transparent; border: 1px solid rgba(212, 175, 127, .55); cursor: pointer;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.burger:hover, .burger[aria-expanded="true"] { border-color: var(--gold); background: rgba(212, 175, 127, .08); }
.burger span { position: absolute; left: 13px; right: 13px; height: 1px; background: var(--ivory); transition: transform .4s var(--ease), top .4s var(--ease); }
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 26px; }
.burger[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--night);
  display: flex; flex-direction: column; justify-content: center; gap: 40px;
  padding: 120px var(--gutter) calc(40px + env(safe-area-inset-bottom));
  clip-path: circle(0 at calc(100% - 46px) 60px); transition: clip-path .7s var(--ease-out);
}
.mobile-menu.is-open { clip-path: circle(150% at calc(100% - 46px) 60px); }
.mobile-menu nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu nav a { font: 400 clamp(32px, 9vw, 48px)/1.25 var(--serif); color: var(--ivory); }
.mobile-menu nav a:hover { color: var(--gold); }
.mobile-menu__contact { display: grid; gap: 10px; }
.mobile-menu__contact a { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.mobile-menu__contact a[href^="mailto"] { text-transform: none; letter-spacing: .06em; font-size: 14px; }
html.menu-open, html.menu-open body { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--topbar) + var(--header) + 40px) 0 90px;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { animation: kenburns 22s var(--ease) forwards; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 18% 55%, rgba(212, 175, 127, .12), transparent 70%),
    linear-gradient(90deg, rgba(15, 15, 15, .92) 0%, rgba(15, 15, 15, .7) 45%, rgba(15, 15, 15, .2) 100%),
    linear-gradient(0deg, rgba(15, 15, 15, .9) 0%, transparent 35%);
}
.hero__inner { position: relative; z-index: 1; }
.hero__title {
  max-width: 13ch; margin-bottom: 30px;
  font-size: clamp(46px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -.015em;
}
.hero__title em { font-style: italic; color: var(--gold); }
.hero .lead { max-width: 560px; margin-bottom: 40px; }
.hero__small { margin: 28px 0 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--mist-2); }
.hero__small a { color: var(--gold); }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }

/* ---------- Marquee ---------- */
.marquee { background: var(--night-2); border-block: 1px solid var(--hair); overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.marquee ul { display: flex; }
.marquee li {
  display: flex; align-items: center; padding: 22px 0;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--mist-2); white-space: nowrap;
}
.marquee li::after { content: "✦"; color: var(--gold); margin: 0 34px; font-size: 10px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Bands ---------- */
.band { padding: var(--band) 0; }
.band--night { background: var(--night); }
.band--ivory { background: var(--ivory); color: var(--ink); }
.band--cream { background: var(--cream); color: var(--ink); }
.band--ivory h2, .band--cream h2 { font-weight: 600; color: #111; }
.band--ivory h2 em, .band--cream h2 em { color: var(--gold-ink); font-weight: 600; }
.band--ivory h3, .band--cream h3 { font-weight: 600; color: #111; }
.band--ivory p, .band--cream p, .band--ivory li, .band--cream li { color: #3E3A34; }
.band--ivory .lead, .band--cream .lead { color: #3E3A34; }
.band--ivory .link-line, .band--cream .link-line { border-color: var(--gold-ink); color: var(--ink); }

.band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 56px; }
.band__head h2 { margin-bottom: 0; }
.band__head--centre { flex-direction: column; align-items: center; text-align: center; }
.band__head--centre .eyebrow { justify-content: center; }
.band__head--centre .eyebrow::after { content: ""; width: 40px; height: 1px; background: currentColor; }
.band__head--centre h2 { max-width: 18ch; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 96px); align-items: center; }
.split--top { align-items: start; }

/* Philosophy frame */
.frame { position: relative; padding: 0 28px 28px 0; }
.frame::before { content: ""; position: absolute; inset: 28px 0 0 28px; border: 1px solid rgba(107, 82, 40, .5); }
.frame .media { position: relative; }
.media--tall { height: clamp(420px, 48vw, 660px); }
.frame__mono { position: absolute; right: -6px; bottom: -6px; width: 88px; padding: 16px; background: var(--night); border: 1px solid rgba(212, 175, 127, .35); }

/* ---------- Procedure cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { position: relative; display: block; height: 520px; overflow: hidden; background: var(--night-2); color: var(--ivory); isolation: isolate; }
.card .media { position: absolute; inset: 0; z-index: -2; }
.card .media img { transition: transform 1.4s var(--ease-out); }
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .35) 50%, rgba(10, 10, 10, .05) 100%);
}
.card::after {
  content: ""; position: absolute; inset: 16px; border: 1px solid rgba(212, 175, 127, .6);
  opacity: 0; transform: scale(1.03); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.card:hover .media img, .card:focus-visible .media img { transform: scale(1.06); }
.card:hover::after, .card:focus-visible::after { opacity: 1; transform: scale(1); }
.card__body { position: absolute; left: 36px; right: 36px; bottom: 34px; }
.card__kicker { margin-bottom: 10px; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.card h3 { font-size: 32px; margin-bottom: 10px; }
.card__list { margin-bottom: 0; font-size: 14px; color: var(--mist); }
.card__cta {
  display: inline-flex; gap: 10px; margin-top: 18px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.card:hover .card__cta, .card:focus-visible .card__cta { opacity: 1; transform: none; }
.card--begin { background: linear-gradient(160deg, #221d18, var(--night-2)); border: 1px solid var(--hair); }
.card--begin::before { display: none; }
.card--begin .card__body { top: 50%; bottom: auto; transform: translateY(-50%); text-align: center; }
.card--begin .card__cta { opacity: 1; transform: none; }
.card__mono { width: 64px; margin: 0 auto 26px; opacity: .9; }

/* ---------- Journey ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; counter-reset: step; }
.step .media { height: 260px; margin-bottom: 26px; }
.step__num { display: block; margin-bottom: 10px; font: italic 600 22px/1 var(--serif); color: var(--gold-ink); }
.step h3 { font-size: 28px; margin-bottom: 12px; }
.step p { font-size: 15px; margin: 0; }

/* ---------- Choosing well ---------- */
.checks { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.checks li { padding: 26px 0 24px 34px; border-bottom: 1px solid var(--hair); position: relative; }
.checks li::before { content: "◆"; position: absolute; left: 0; top: 30px; font-size: 10px; color: var(--gold); }
.checks h3 { font-size: 22px; margin-bottom: 8px; }
.checks p { margin: 0; color: var(--mist); font-size: 15px; }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 920px; }
.faq { border-top: 1px solid rgba(138, 109, 63, .3); }
.faq details { border-bottom: 1px solid rgba(138, 109, 63, .3); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font: 600 clamp(20px, 2vw, 24px)/1.3 var(--serif); color: #111;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 300 26px/1 var(--sans); color: var(--gold-ink); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 70ch; padding-bottom: 26px; margin: 0; }

/* ---------- Consultation ---------- */
.consult__intro .lead { max-width: 460px; margin-bottom: 44px; }
.contact-list { margin: 0; display: grid; gap: 22px; }
.contact-list dt { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--mist-2); margin-bottom: 4px; }
.contact-list dd { margin: 0; font: 400 22px/1.3 var(--serif); }
.contact-list a:hover { color: var(--gold); }

.form-card { background: var(--night-2); border: 1px solid var(--hair); padding: clamp(28px, 4vw, 52px); }
.rl-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.rl-field { margin-bottom: 26px; }
.rl-field label {
  display: block; margin-bottom: 6px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mist-2);
  transition: color .3s var(--ease);
}
.rl-field:focus-within label { color: var(--gold); }
.rl-field input, .rl-field select, .rl-field textarea {
  width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(212, 175, 127, .35); border-radius: 0;
  background: transparent; color: var(--ivory); font: 300 16px/1.5 var(--sans);
  transition: border-color .3s var(--ease);
}
.rl-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%23D4AF7F'/%3E%3C/svg%3E") no-repeat right 4px center;
}
.rl-field select option { background: var(--night-2); color: var(--ivory); }
.rl-field textarea { resize: vertical; min-height: 84px; }
.rl-field input:focus, .rl-field select:focus, .rl-field textarea:focus { outline: none; border-bottom-color: var(--gold); }
[aria-invalid="true"] { border-bottom-color: var(--error) !important; }
.rl-field__error { margin: 6px 0 0; font-size: 13px; color: var(--error); }

.rl-check { display: grid; grid-template-columns: 20px 1fr; gap: 4px 14px; align-items: start; margin-bottom: 18px; }
.rl-check input {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 3px 0 0;
  border: 1px solid rgba(212, 175, 127, .6); background: transparent; cursor: pointer; display: grid; place-items: center;
}
.rl-check input:checked { background: var(--gold); border-color: var(--gold); }
.rl-check input:checked::after { content: ""; width: 9px; height: 5px; border: solid var(--night); border-width: 0 0 1.5px 1.5px; transform: translateY(-1px) rotate(-45deg); }
.rl-check label { font-size: 14px; line-height: 1.6; color: var(--mist); cursor: pointer; }
.rl-check label a { color: var(--gold); border-bottom: 1px solid currentColor; }
.rl-check .rl-field__error { grid-column: 2; margin-top: 0; }

.slu-hp-wrap { position: absolute !important; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rl-form .btn { margin-top: 14px; }
.rl-form__status { margin: 22px 0 0; padding: 16px 18px; font-size: 14px; border: 1px solid var(--hair); }
.rl-form__status[data-state="success"] { border-color: var(--gold); color: var(--ivory); }
.rl-form__status[data-state="error"] { border-color: var(--error); color: var(--error); }


/* ---------- Section intros ---------- */
.band__intro { max-width: 460px; margin: 0; font-size: 16px; }
.band__intro--dark { color: var(--mist); }
.sub-head { font-size: 28px; margin-bottom: 14px; }
.muted { color: var(--mist); }
.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; }
h4 { margin: 0 0 12px; font: 500 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); }

/* ---------- Procedures Explained (tabs) ---------- */
.guide { background: var(--ivory); border: 1px solid rgba(107, 82, 40, .25); }
.guide__tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(107, 82, 40, .25); }
.guide__tabs::-webkit-scrollbar { display: none; }
.guide__tabs button {
  flex: 1 0 auto; padding: 22px 22px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: 500 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #5A544B; cursor: pointer; white-space: nowrap;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.guide__tabs button:hover { color: #111; }
.guide__tabs button[aria-selected="true"] { color: #111; border-bottom-color: var(--gold-ink); background: rgba(212, 175, 127, .12); }
.guide__panel { padding: clamp(28px, 4vw, 56px); }
.guide__panel:focus-visible { outline-offset: -4px; }
.guide__panel h3 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 14px; }
.guide__lead { max-width: 760px; font-size: 17px; line-height: 1.8; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 30px 0 36px; border-block: 1px solid rgba(107, 82, 40, .25); }
.facts div { padding: 18px 20px 18px 0; }
.facts div + div { padding-left: 20px; border-left: 1px solid rgba(107, 82, 40, .2); }
.facts dt { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #5A544B; margin-bottom: 6px; }
.facts dd { margin: 0; font: 600 19px/1.3 var(--serif); color: #111; }
.guide__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
.guide__cols p { margin: 0; }
.ticks li { position: relative; padding-left: 22px; margin-bottom: 10px; font-size: 15px; line-height: 1.65; }
.ticks li::before { content: "◆"; position: absolute; left: 0; top: 6px; font-size: 8px; color: var(--gold-ink); }
.ticks--dark li { color: var(--mist); }
.ticks--dark li::before { color: var(--gold); }
.ticks .tbc { color: var(--mist-2); font-style: italic; }
.risk-note { max-width: 900px; margin: 34px 0 0; font-size: 14px; }
.risk-note strong { font-weight: 500; color: #111; }

/* ---------- Before You Decide ---------- */
.questions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; counter-reset: q; border-top: 1px solid var(--hair); }
.questions li { counter-increment: q; padding: 32px 0 30px; border-bottom: 1px solid var(--hair); }
.questions li::before { content: counter(q, decimal-leading-zero); display: block; margin-bottom: 14px; font: italic 400 20px/1 var(--serif); color: var(--gold); }
.questions h3 { font-size: 24px; margin-bottom: 10px; }
.questions p { margin: 0; color: var(--mist); font-size: 15px; }
.decide__close { margin: 40px 0 0; max-width: 680px; font: italic 400 clamp(20px, 2vw, 24px)/1.5 var(--serif); color: var(--ivory); }

/* ---------- Pricing ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--hair); }
.price-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
.price-table th, .price-table td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--hair); }
.price-table thead th { font: 500 10px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); background: var(--night-2); }
.price-table tbody th { font: 400 19px/1.3 var(--serif); color: var(--ivory); }
.price-table td { color: var(--mist); }
.price-table td:nth-child(2) { color: var(--ivory); font-weight: 400; }
.price-table tbody tr:last-child > * { border-bottom: 0; }
.price-table tbody tr:hover { background: rgba(212, 175, 127, .05); }
.table-note { margin: 16px 0 0; font-size: 13px; color: var(--mist-3); max-width: 900px; }
.quote-block { margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--hair); }

/* ---------- Choosing Well on light ---------- */
#choosing .split > div:first-child { position: sticky; top: 130px; }
.checks--light { border-top-color: rgba(107, 82, 40, .25); }
.checks--light li { border-bottom-color: rgba(107, 82, 40, .25); }
.checks--light li::before { color: var(--gold-ink); }
.checks--light p { color: #3E3A34; }

.review-note { margin: 34px auto 0; max-width: 760px; text-align: center; font-size: 13px; color: #5A544B !important; }

/* ---------- Custom cursor (fine pointers only) ----------
   site.js sets the ring's width/height each frame (so its 1px border stays
   sharp at any size) and centres both ring and dot on the pointer with
   transforms, so the dot always sits in the middle of the ring. */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary, .has-cursor label, .has-cursor [role="tab"] { cursor: none; }
  .has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }
  .has-cursor .cursor { display: block; }
  .cursor__ring, .cursor__dot {
    position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; border-radius: 50%;
    opacity: 0; will-change: transform; transition: opacity .35s var(--ease);
  }
  .cursor__ring {
    width: 36px; height: 36px; border: 1px solid var(--gold);
    transition: opacity .35s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
  }
  .cursor__dot { width: 6px; height: 6px; background: var(--gold); }
  .cursor.is-active .cursor__ring, .cursor.is-active .cursor__dot { opacity: 1; }
  .cursor.is-hover .cursor__ring { background-color: rgba(212, 175, 127, .1); border-color: rgba(212, 175, 127, .8); }
  .cursor.is-text .cursor__ring, .cursor.is-text .cursor__dot { opacity: 0; }
}

/* ---------- Procedure panel call to action ---------- */
.guide__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 36px; padding-top: 30px; border-top: 1px solid rgba(107, 82, 40, .2); }
.guide__cta p { margin: 0; font-size: 14px; }
.guide__cta .btn { color: var(--white); }

/* ---------- Cookie banner ---------- */
.cookie {
  position: fixed; left: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 120;
  width: min(440px, calc(100% - 32px)); padding: 28px 28px 24px;
  background: var(--night-2); border: 1px solid rgba(212, 175, 127, .4); color: var(--mist);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  transform: translateY(16px); opacity: 0; transition: transform .5s var(--ease-out), opacity .5s var(--ease);
}
.cookie.is-open { transform: none; opacity: 1; }
.cookie__title { margin: 0 0 10px; font: 400 22px/1.25 var(--serif); color: var(--ivory); }
.cookie p { margin: 0 0 18px; font-size: 14px; line-height: 1.65; }
.cookie a { color: var(--gold); border-bottom: 1px solid currentColor; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie__actions .btn { flex: 1 1 auto; padding: 13px 16px; }
.cookie__prefs { margin: 4px 0 18px; border-top: 1px solid var(--hair); }
.cookie__pref { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.cookie__pref strong { font-weight: 500; color: var(--ivory); font-size: 14px; }
.cookie__pref span { grid-column: 1; font-size: 13px; color: var(--mist-2); }
.cookie__pref input { grid-row: 1 / span 2; grid-column: 2; }
.switch { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; border-radius: 22px; border: 1px solid rgba(212, 175, 127, .6); background: transparent; position: relative; cursor: pointer; transition: background .3s var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--mist-2); transition: transform .3s var(--ease), background .3s var(--ease); }
.switch:checked { background: var(--gold); border-color: var(--gold); }
.switch:checked::after { transform: translateX(18px); background: var(--night); }
.switch:disabled { opacity: .55; cursor: not-allowed; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.link-btn:hover { color: var(--gold); }

/* ---------- Privacy policy page ---------- */
.legal { padding: calc(var(--topbar) + var(--header) + clamp(48px, 7vw, 96px)) 0 var(--band); background: var(--ivory); color: var(--ink); }
.legal .wrap { max-width: 860px; }
.legal h1 { font: 600 clamp(40px, 5vw, 64px)/1.08 var(--serif); color: #111; margin-bottom: 18px; }
.legal h1 em { color: var(--gold-ink); }
.legal h2 { font-size: clamp(26px, 2.6vw, 32px); font-weight: 600; color: #111; margin: 56px 0 16px; }
.legal h3 { font-size: 21px; font-weight: 600; color: #111; margin: 30px 0 10px; }
.legal p, .legal li { color: #3E3A34; font-size: 16px; line-height: 1.8; }
.legal ul { margin: 0 0 1.1em; }
.legal ul li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.legal ol { list-style: decimal; margin: 0 0 1.1em; padding-left: 22px; }
.legal ol li { margin-bottom: 10px; padding-left: 6px; }
.legal ol li::marker { color: var(--gold-ink); font-weight: 500; }
.legal ul li::before { content: "◆"; position: absolute; left: 0; top: 2px; font-size: 8px; color: var(--gold-ink); }
.legal a { color: var(--gold-ink); border-bottom: 1px solid currentColor; }
.legal .updated { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #5A544B; }
.legal table { width: 100%; border-collapse: collapse; margin: 10px 0 24px; font-size: 15px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border: 1px solid rgba(107, 82, 40, .25); color: #3E3A34; }
.legal th { font-weight: 500; color: #111; background: rgba(212, 175, 127, .12); }
.legal .table-scroll { overflow-x: auto; }
.legal .table-scroll table { min-width: 560px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night-3); padding: 100px 0 40px; color: var(--mist); font-size: 14px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--hair); }
.footer__brand img { height: 64px; width: auto; margin-bottom: 22px; }
.footer__brand .logo__text { margin-bottom: 22px; }
.footer__brand p { max-width: 320px; }
.footer__head { margin-bottom: 20px; font: 400 11px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.site-footer li { margin-bottom: 10px; }
.site-footer a:hover { color: var(--gold); }
.footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 28px; font-size: 12px; color: var(--mist-3); }
.footer__legal p { margin: 0; }
.footer__legal ul { display: flex; gap: 24px; }
.footer__disclaimer { margin: 26px 0 0; font-size: 12px; line-height: 1.7; color: var(--mist-3); max-width: 900px; }

/* ---------- Sticky bar & back to top ---------- */
.sticky-bar { display: none; }
.to-top {
  position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 80;
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--btn-a);
  display: grid; place-items: center; background: rgba(15, 15, 15, .8); color: var(--gold);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .4s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--btn-a); color: var(--white); }

/* ---------- Render below-the-fold sections only when they're near the screen ----------
   Speeds up the first paint and the re-layout when web fonts arrive. Heights are
   estimates until a section has been seen once; site.js corrects in-page jumps. */
main > .band:not(#philosophy), .site-footer { content-visibility: auto; contain-intrinsic-size: auto 1200px; }
#procedures { contain-intrinsic-size: auto 1500px; }
#explained { contain-intrinsic-size: auto 1700px; }
#questions { contain-intrinsic-size: auto 1500px; }
#consultation { contain-intrinsic-size: auto 1300px; }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav { gap: 22px; }
  .nav a { letter-spacing: .14em; }
}
@media (max-width: 1060px) {
  .nav, .header__cta { display: none; }
  .burger { display: block; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .questions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  :root { --header: 80px; }
  .logo img { height: 40px; }
  .topbar__contact { display: none; }
  .split { grid-template-columns: 1fr; }
  #choosing .split > div:first-child { position: static; }
  .guide__cols { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts div:nth-child(n+3) { border-top: 1px solid rgba(107, 82, 40, .2); }
  .band__head { flex-direction: column; align-items: flex-start; }
  .band__head--centre { align-items: center; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .hero { align-items: flex-end; }
  .hero__media::after {
    background: linear-gradient(0deg, rgba(15, 15, 15, .96) 0%, rgba(15, 15, 15, .75) 50%, rgba(15, 15, 15, .35) 100%);
  }
  .sticky-bar {
    display: grid; grid-template-columns: 1fr 2fr; position: fixed; inset: auto 0 0; z-index: 85;
    background: var(--night-2); border-top: 1px solid var(--hair);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%); transition: transform .4s var(--ease);
  }
  .sticky-bar.is-visible { transform: none; }
  .sticky-bar a {
    display: grid; place-items: center; height: 56px;
    font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  }
  .sticky-bar__cta { background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); color: var(--white); }
  .to-top { bottom: calc(76px + env(safe-area-inset-bottom)); right: 16px; width: 46px; height: 46px; }
  .cookie { left: 16px; right: 16px; width: auto; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .cards, .steps, .rl-form__row, .footer__grid, .questions { grid-template-columns: 1fr; }
  .guide__tabs button { padding: 18px 16px; }
  .guide__tabs { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .card { height: 440px; }
  .card__body { left: 28px; right: 28px; bottom: 28px; }
  .step .media { height: 220px; }
  .actions .btn { flex: 1 1 100%; }
  .footer__legal ul { flex-wrap: wrap; gap: 14px 20px; }
}
@media (hover: none) {
  .card__cta { opacity: 1; transform: none; }
  .card::after { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Legal-page header and footer (replaces inline styles so the CSP needs no unsafe-inline) */
.header__cta--end { margin-left: auto; }
.footer__legal--flush { padding-top: 0; }