/* ==========================================================================
   Amir Hair Clinic — design system
   Palette derived from the clinic's existing bordeaux / bone identity.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Surfaces */
  --bone-0: #fffdfb;
  --bone-1: #faf5f0;
  --bone-2: #f3ebe3;
  --bone-3: #ece0d5;
  --line: #e6dace;
  --line-soft: #efe6dd;

  /* Ink */
  --ink: #1a1210;
  --body: #4c403a;
  --muted: #6c5d55;
  --muted-2: #7a6b62;

  /* Brand */
  --bdx: #7e1113;         /* fills: buttons, dots, filled icons */
  --bdx-ink: #7e1113;     /* the same bordeaux used as TEXT — diverges in dark */
  --bdx-deep: #5d0c0e;
  --bdx-soft: #c96a6d;   /* light-on-dark tint — passes AA on --night */
  --bdx-wash: #f6eae8;
  --sienna: #75311c;
  --night: #150d0c;
  --night-2: #241615;
  --header-veil: rgba(255, 253, 251, 0.82);   /* frosted sticky header */
  --wash: #f7ece4;                            /* warm radial page wash */
  --wash-0: rgba(247, 236, 228, 0);

  /* Type */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.14rem, 1.07rem + 0.34vw, 1.34rem);
  --step-2: clamp(1.34rem, 1.2rem + 0.66vw, 1.75rem);
  --step-3: clamp(1.6rem, 1.32rem + 1.32vw, 2.4rem);
  --step-4: clamp(1.95rem, 1.45rem + 2.4vw, 3.3rem);
  --step-5: clamp(2.35rem, 1.5rem + 4vw, 4.6rem);

  /* Space */
  --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2.5rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --wrap: 1220px;
  --wrap-narrow: 760px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.6s;

  /* Shape */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(26, 18, 16, 0.04), 0 4px 14px -6px rgba(26, 18, 16, 0.08);
  --shadow-md: 0 2px 4px rgba(26, 18, 16, 0.04), 0 18px 40px -18px rgba(26, 18, 16, 0.18);
  --shadow-lg: 0 4px 8px rgba(26, 18, 16, 0.04), 0 40px 80px -30px rgba(26, 18, 16, 0.26);

  --header-h: 78px;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.68;
  color: var(--body);
  background: var(--bone-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--bdx); color: #fff; }

:focus-visible {
  outline: 2px solid var(--bdx);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--bdx);
  color: #fff;
  padding: 0.7rem 1.3rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--step--1);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.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;
}

/* ---------- 3. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide { max-width: 1400px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--bone { background: var(--bone-1); }
.section--bone2 { background: var(--bone-2); }
.section--night { background: var(--night); color: #d9cec8; }
.section--night h2, .section--night h3 { color: #fbf6f1; }

.grid { display: grid; gap: clamp(1.2rem, 0.8rem + 1.6vw, 2.2rem); }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 620px) and (max-width: 999px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 4. Typography helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bdx-ink);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.section--night .eyebrow { color: var(--bdx-soft); }

.h-display { font-size: var(--step-5); }
.h-1 { font-size: var(--step-4); }
.h-2 { font-size: var(--step-3); }
.h-3 { font-size: var(--step-2); }
.h-4 { font-size: var(--step-1); }

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.section--night .lede { color: #b6a8a2; }

.section-head { max-width: 68ch; margin-bottom: clamp(2.2rem, 1.5rem + 2.5vw, 3.6rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head p { margin-top: 1.1rem; }

.text-bdx { color: var(--bdx-ink); }
.serif-italic { font-family: var(--font-display); font-style: italic; }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--bdx);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 1.9rem;
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.35s var(--ease);
  will-change: transform;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bdx-deep);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(126, 17, 19, 0.55); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform 0.4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: var(--bone-0); box-shadow: none; }

.btn--light { --btn-bg: #fbf6f1; --btn-fg: var(--bdx); }
.btn--light::before { background: #fff; }

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fbf6f1;
  border: 1px solid rgba(251, 246, 241, 0.28);
}
.btn--outline-light::before { background: #fbf6f1; }
.btn--outline-light:hover { color: var(--bdx); box-shadow: none; }

.btn--sm { padding: 0.78rem 1.4rem; font-size: 0.76rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bdx-ink);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform 0.4s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }
.link-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ---------- 6. Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  /* Above the drawer, so the logo and the close button stay reachable. */
  z-index: 130;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease), height 0.45s var(--ease);
}
.header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header-veil);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.header.is-stuck::after { opacity: 1; }
.header.is-stuck { height: 66px; }

.header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  color: var(--bdx-ink);
  flex: none;
}
.logo__mark { height: 40px; width: auto; flex: none; transition: transform 0.5s var(--ease); }
.logo picture { display: flex; align-items: center; flex: none; }
.logo:hover .logo__mark { transform: scale(1.05); }
.logo__text { display: flex; flex-direction: column; gap: 2px; }
.logo__name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
  line-height: 1;
}
.logo__sub {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted-2);
  line-height: 1;
}

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; align-items: center; gap: 2.1rem; }
}
.nav a {
  position: relative;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--body);
  padding-block: 0.4rem;
  transition: color 0.3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--bdx);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav a:hover { color: var(--bdx-ink); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--bdx-ink); font-weight: 600; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 0.6rem; }
.header__cta { display: none; }
@media (min-width: 700px) { .header__cta { display: inline-flex; } }

/* Elevated white chip with the mark in brand colour — reads as a real control
   against the warm hero wash instead of dissolving into it. */
.icon-btn {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--bone-3);
  background: var(--bone-0);
  color: var(--bdx-ink);
  box-shadow: var(--shadow-sm);
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover {
  background: var(--bdx);
  color: #fff;
  border-color: var(--bdx-ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(126, 17, 19, 0.5);
}
.icon-btn:active { transform: translateY(0); }

/* Burger */
/* Solid bordeaux: on a phone this is the primary navigation control, so it
   carries the brand weight rather than sitting as a faint outline. */
.burger {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--bdx);
  background: var(--bdx);
  box-shadow: 0 6px 18px -8px rgba(126, 17, 19, 0.55);
  position: relative;
  z-index: 120;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger:hover { background: var(--bdx-deep); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(126, 17, 19, 0.6); }
.burger:active { transform: translateY(0); }
.burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 2px;
  margin: -1px 0 0 -8.5px;          /* dead-centre; transforms offset from here */
  background: #fbf6f1;
  border-radius: 2px;
  transition: transform 0.45s var(--ease), opacity 0.25s var(--ease);
}
.burger span:nth-child(1) { transform: translateY(-6px); }
.burger span:nth-child(2) { transform: translateY(0); }
.burger span:nth-child(3) { transform: translateY(6px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

/* ── Phone header ──────────────────────────────────────────────────────────
   Three 46px controls plus the full lock-up needed 424px inside a 398px
   window once Facebook joined the row, so the burger fell off the right
   edge — body{overflow-x:hidden} hid the damage instead of scrolling it.
   What follows buys that width back without dropping either social button.
   Controls stay at or above the 44px touch target down to 380px. */
@media (max-width: 999px) {
  .header__inner { gap: 0.75rem; }
  .header .logo { gap: 0.6rem; }
  .header .logo__mark { height: 36px; }
  .header .logo__name { font-size: 1rem; }
  /* 0.26em tracking made the strapline the single widest thing up there */
  .header .logo__sub { font-size: 0.5rem; letter-spacing: 0.14em; }
  .header__actions { gap: 0.4rem; }
  .icon-btn, .burger { width: 44px; height: 44px; }
  .icon-btn svg { width: 19px; height: 19px; }
}
@media (max-width: 420px) {
  /* Below this the strapline costs more than it earns — the mark and name
     already carry the brand, and the room goes to the controls instead. */
  .header .logo__sub { display: none; }
  .header .logo__name { font-size: 0.95rem; }
  .icon-btn, .burger { width: 42px; height: 42px; }
  .header__actions { gap: 0.35rem; }
}
@media (max-width: 360px) {
  .header__inner { padding-inline: 0.85rem; gap: 0.5rem; }
  .header .logo__mark { height: 32px; }
  .header .logo__name { font-size: 0.88rem; }
  .icon-btn, .burger { width: 42px; height: 42px; }
  .icon-btn svg { width: 18px; height: 18px; }
}
@media (max-width: 330px) {
  /* Only the oldest 320px handsets reach here. Measured: the row needed
     321px of a 320px screen, so the wordmark and gutter each give a little
     back. 40px is the floor for the controls. */
  .header__inner { padding-inline: 0.7rem; }
  .header .logo__name { font-size: 0.8rem; }
  .icon-btn, .burger { width: 40px; height: 40px; }
}

/* ── Phone touch + proportions ─────────────────────────────────────────────
   Measured on a 390px viewport: the compact button variant came out 37px
   tall and inline arrow links 23px, both under the 44px touch guideline.
   Padding grows the hit area without changing how either one reads.
   The 78px header also ate a tenth of the screen on a phone, so it comes
   down; everything derived from --header-h follows through calc(). */
@media (max-width: 640px) {
  :root { --header-h: 66px; }
  .header.is-stuck { height: 58px; }
  .btn { min-height: 46px; }
  .btn--sm { min-height: 44px; padding-block: 0.85rem; }
  .link-arrow { padding-block: 0.5rem; }
}

/* ── Foldable cover screens ────────────────────────────────────────────────
   Galaxy Fold's outer display is 280px. Below 300px even the trimmed
   lock-up cannot share the row with three controls, so the wordmark steps
   aside and the monogram carries the brand on its own. */
@media (max-width: 300px) {
  .header .logo__text { display: none; }
}


/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--bone-0);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease);
  overflow-y: auto;
  visibility: hidden;
}
.drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
@media (min-width: 1000px) { .drawer { display: none; } }

.drawer__nav { display: flex; flex-direction: column; gap: 0.2rem; }
.drawer__nav a {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.6rem);
  color: var(--ink);
  padding-block: 0.42rem;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), color 0.3s var(--ease);
}
.drawer.is-open .drawer__nav a { opacity: 1; transform: none; }
.drawer__nav a:hover { color: var(--bdx-ink); }
.drawer__foot {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease) 0.34s, transform 0.6s var(--ease) 0.34s;
}
.drawer.is-open .drawer__foot { opacity: 1; transform: none; }
.drawer__meta { font-size: 0.85rem; color: var(--muted); }
.drawer__meta a { color: var(--bdx-ink); font-weight: 500; }

body.nav-open { overflow: hidden; }
body.nav-open .to-top { opacity: 0; visibility: hidden; }
/* While the drawer is open the header sits on the drawer's own surface. */
body.nav-open .header::after { opacity: 1; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.4rem, 1rem + 6vw, 5.5rem));
  padding-bottom: clamp(3rem, 2rem + 5vw, 6rem);
  background:
    radial-gradient(120% 90% at 88% 8%, var(--wash) 0%, var(--wash-0) 58%),
    radial-gradient(90% 70% at 0% 100%, #f8eeea 0%, rgba(248, 238, 234, 0) 60%),
    var(--bone-0);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
}

.hero__title {
  font-size: var(--step-5);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin-bottom: 1.5rem;
}
.hero__title em {
  font-style: italic;
  color: var(--bdx-ink);
}
.hero__lede { max-width: 46ch; margin-bottom: 2.2rem; }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}
.hero__ctas + .book-strip { margin-bottom: 2.4rem; }

/* Healee booking strip — sits under the hero CTAs */
.book-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.72rem 1.3rem 0.72rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bone-0);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.4s var(--ease);
}
.book-strip:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--bone-3); }
.book-strip__logo {
  flex: none;
  display: grid;
  place-items: center;
  padding-right: 0.95rem;
  border-right: 1px solid var(--line);
}
.book-strip__logo img { width: 72px; height: auto; }
.book-strip__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.book-strip__txt strong { font-size: 0.92rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.book-strip__txt span { font-size: 0.77rem; color: var(--muted); line-height: 1.3; }
.book-strip__arrow { width: 16px; height: 16px; flex: none; color: var(--bdx-ink); transition: transform 0.4s var(--ease); }
.book-strip:hover .book-strip__arrow { transform: translateX(4px); }
@media (max-width: 640px) {
  .book-strip { width: 100%; border-radius: var(--r-md); padding-block: 0.85rem; }
}

.hero__points {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line);
}
.hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--body);
  list-style: none;
}
.hero__points svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--bdx-ink); }

/* Hero portrait */
.hero__media { position: relative; }
.hero__portrait {
  position: relative;
  border-radius: 260px 260px var(--r-lg) var(--r-lg);
  overflow: hidden;
  background: linear-gradient(165deg, var(--bone-2), var(--bone-3));
  aspect-ratio: 4 / 4.6;
  box-shadow: var(--shadow-lg);
}
.hero__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.02);
}
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21, 13, 12, 0.34), rgba(21, 13, 12, 0) 42%);
}

.hero__badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-top: 0.9rem;
  background: var(--bone-0);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.05rem 1.3rem;
  box-shadow: var(--shadow-sm);
}
.hero__badge-num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--bdx-ink);
  flex: none;
}
.hero__badge-txt { font-size: 0.78rem; line-height: 1.45; color: var(--muted); }

.hero__caption {
  position: absolute;
  left: clamp(1.2rem, 2.4vw, 1.9rem);
  bottom: clamp(1.1rem, 1.6vw, 1.5rem);
  z-index: 2;
  color: #fbf6f1;
  max-width: 86%;
}
.hero__caption strong { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em; }
.hero__caption span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }

/* On small screens the stat sits below the portrait instead of overlapping it. */
@media (max-width: 640px) {
  .hero__ctas .btn { width: 100%; }
  .eyebrow { letter-spacing: 0.16em; }
}

/* ---------- 8. Marquee / trust strip ---------- */
.strip {
  border-block: 1px solid var(--line);
  background: var(--bone-1);
  padding-block: 1.1rem;
  overflow: hidden;
}
.marquee { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 3.2rem; padding-right: 3.2rem; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.marquee__item svg { width: 15px; height: 15px; color: var(--bdx-ink); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 9. Cards ---------- */
.card {
  position: relative;
  background: var(--bone-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.45s var(--ease);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bdx), var(--sienna));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--bone-3); }
.card:hover::before { transform: scaleX(1); }
.card__num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--bdx-ink);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.card__icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--bdx-wash);
  color: var(--bdx-ink);
  margin-bottom: 1.3rem;
  transition: background 0.45s var(--ease), color 0.45s var(--ease), transform 0.5s var(--ease);
}
.card__icon svg { width: 23px; height: 23px; }
.card:hover .card__icon { background: var(--bdx); color: #fff; transform: scale(1.06) rotate(-4deg); }
.card h3 { font-size: var(--step-1); margin-bottom: 0.7rem; }
.card p { font-size: 0.95rem; color: var(--muted); }
.card__foot { margin-top: auto; padding-top: 1.4rem; }

/* ---------- 10. Treatment split rows ---------- */
.split {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3.5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip .split__media { order: -1; }
}
.split + .split { margin-top: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.split__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bone-1);
  border: 1px solid var(--line);
}
/* Stacked: keep the visual from swallowing the whole column. */
@media (max-width: 899px) {
  .split__media { max-width: 440px; margin-inline: auto; width: 100%; }
}
.split__media img { width: 100%; transition: transform 1.2s var(--ease); }
.split__media:hover img { transform: scale(1.03); }
.split__body h3 { font-size: var(--step-3); margin-bottom: 1.1rem; }
.split__body > p { margin-bottom: 1.1rem; }

.spec-list { list-style: none; margin-top: 1.7rem; display: grid; gap: 0.9rem; }
.spec-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  font-size: 0.95rem;
}
.spec-list svg { width: 18px; height: 18px; color: var(--bdx-ink); margin-top: 4px; }

.kv {
  display: grid;
  gap: 0;
  margin-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.kv div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.kv dt { color: var(--muted); }
.kv dd { font-weight: 600; color: var(--ink); text-align: right; }

/* ---------- 11. Results carousel ---------- */
.rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}
.rail-nav { display: flex; gap: 0.6rem; }
.rail-nav button {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), opacity 0.3s;
}
.rail-nav button svg { width: 17px; height: 17px; }
.rail-nav button:hover:not(:disabled) { background: var(--bdx); color: #fff; border-color: var(--bdx-ink); }
.rail-nav button:disabled { opacity: 0.3; cursor: default; }

.rail {
  display: flex;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.8rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.rail > * { scroll-snap-align: start; flex: 0 0 min(86%, 380px); }
@media (min-width: 760px) { .rail > * { flex-basis: min(52%, 420px); } }
@media (min-width: 1100px) { .rail > * { flex-basis: min(33%, 400px); } }

.result-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bone-0);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.result-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.result-card figure { margin: 0; background: var(--bone-0); }
.result-card img { width: 100%; }
.result-card figcaption {
  padding: 1.2rem 1.4rem 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.result-card h3 { font-size: 1.06rem; margin-bottom: 0.35rem; }
.result-card p { font-size: 0.86rem; color: var(--muted); }

/* ---------- 12. Stats ---------- */
.stats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 560px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--bone-0);
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  text-align: center;
}
.section--night .stats { background: rgba(251, 246, 241, 0.12); border-color: rgba(251, 246, 241, 0.14); }
.section--night .stat { background: var(--night); }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.7rem + 2.2vw, 3.2rem);
  line-height: 1;
  color: var(--bdx-ink);
  letter-spacing: -0.02em;
}
.section--night .stat__num { color: #fbf6f1; }
.stat__label {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}
.section--night .stat__label { color: #a9998f; }

/* ---------- 13. Process timeline ---------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  position: relative;
  display: grid;
  gap: 0.4rem 1.6rem;
  padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem) 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 780px) { .step { grid-template-columns: 88px 1fr 1fr; align-items: start; } }
.step__idx {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--bdx-ink);
  line-height: 1;
}
.step__idx::before { content: "0" counter(step); }
.step h3 { font-size: var(--step-2); }
.step p { font-size: 0.96rem; color: var(--muted); }
.step::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--bdx);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.7s var(--ease);
}
.step:hover::after { transform: scaleY(1); }

/* ---------- 14. Accordion ---------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem;
  text-align: left;
  padding: clamp(1.15rem, 0.9rem + 0.7vw, 1.6rem) 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  transition: color 0.3s var(--ease);
}
.acc__btn:hover { color: var(--bdx-ink); }
.acc__icon {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  position: relative;
  margin-top: 2px;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  background: var(--bdx);
  border-radius: 2px;
  transition: transform 0.45s var(--ease), background 0.4s var(--ease);
}
.acc__icon::before { width: 11px; height: 1.5px; }
.acc__icon::after { width: 1.5px; height: 11px; }
.acc__btn[aria-expanded="true"] .acc__icon { background: var(--bdx); border-color: var(--bdx-ink); }
.acc__btn[aria-expanded="true"] .acc__icon::before,
.acc__btn[aria-expanded="true"] .acc__icon::after { background: #fff; }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(90deg); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease);
}
.acc__panel > div { overflow: hidden; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel p { max-width: 74ch; color: var(--muted); }
.acc__panel p + p { margin-top: 0.9rem; }
.acc__panel > div > *:last-child { margin-bottom: 1.7rem; }

/* ---------- 15. CTA band ---------- */
.cta-band {
  position: relative;
  background: var(--bdx);
  color: #fbf6f1;
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
  overflow: hidden;
}
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(251, 246, 241, 0.12);
  pointer-events: none;
}
.cta-band::before { width: 520px; height: 520px; top: -230px; right: -120px; }
.cta-band::after { width: 380px; height: 380px; bottom: -220px; left: -90px; }
.cta-band h2 { color: #fff; font-size: var(--step-4); margin-bottom: 1.1rem; }
.cta-band p { color: rgba(251, 246, 241, 0.78); max-width: 54ch; margin-inline: auto; }
.cta-band__inner { position: relative; text-align: center; }
.cta-band__ctas { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }

/* ---------- 16. Footer ---------- */
.footer {
  background: var(--night);
  color: #a9998f;
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
  font-size: 0.92rem;
}
.footer__grid {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  padding-bottom: 3rem;
}
@media (min-width: 700px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; } }
.footer .logo__name { color: #fbf6f1; }
.footer .logo { color: #fbf6f1; }
.footer .logo__sub { color: rgba(251, 246, 241, 0.45); }
.footer__about { margin-top: 1.4rem; max-width: 34ch; line-height: 1.65; }
.footer h4 {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fbf6f1;
  margin-bottom: 1.2rem;
}
.footer ul { list-style: none; display: grid; gap: 0.72rem; }
.footer a { transition: color 0.3s var(--ease); }
.footer a:hover { color: #fbf6f1; }
.footer__bottom {
  border-top: 1px solid rgba(251, 246, 241, 0.12);
  padding-block: 1.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.8rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(251, 246, 241, 0.45);
}
.footer__legal { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* Sits in the same flex row but claims the full width, so it drops onto its
   own line underneath without disturbing the copyright/legal balance. */
.footer__credit {
  flex-basis: 100%;
  order: 3;
  margin-top: -0.2rem;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: rgba(251, 246, 241, 0.45);
}
.footer__credit a {
  color: rgba(251, 246, 241, 0.75);
  font-weight: 500;
  /* Understated rule: the other footer links sit in a nav row where their role
     is obvious — this one is inside a sentence and needs to look clickable. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(251, 246, 241, 0.3);
  /* Inline padding grows the tap area (14px is thin on a phone) without
     changing the line box, since vertical padding on an inline element
     does not affect layout. */
  padding-block: 0.3rem;
  transition: text-decoration-color 0.3s var(--ease), color 0.3s var(--ease);
}
.footer__credit a:hover { text-decoration-color: rgba(251, 246, 241, 0.7); }

.social { display: flex; gap: 0.65rem; margin-top: 1.6rem; }
.social a {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(251, 246, 241, 0.18);
  display: grid;
  place-items: center;
  color: #fbf6f1;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.social a svg { width: 18px; height: 18px; }
.social a:hover { transform: translateY(-3px); border-color: transparent; }
.social a.ig:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.social a.fb:hover { background: #1877f2; }

.ig-card {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bone-0);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.4s var(--ease);
}
.ig-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--bone-3); }
.ig-card__icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.ig-card__icon svg { width: 24px; height: 24px; }
.ig-card strong { display: block; color: var(--ink); font-size: 0.95rem; font-weight: 600; }
.ig-card span { font-size: 0.83rem; color: var(--muted); }

/* ---------- 17. Page hero (interior) ---------- */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(2.6rem, 1.5rem + 4vw, 4.5rem));
  padding-bottom: clamp(2.2rem, 1.5rem + 3vw, 3.8rem);
  background:
    radial-gradient(100% 80% at 85% 0%, var(--wash) 0%, var(--wash-0) 60%),
    var(--bone-0);
  border-bottom: 1px solid var(--line-soft);
}
.page-hero h1 { font-size: var(--step-4); margin-bottom: 1.1rem; }
.page-hero .lede { max-width: 58ch; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted-2);
  margin-bottom: 1.5rem;
  list-style: none;
}
.crumbs li { display: flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before { content: "/"; opacity: 0.5; }
.crumbs a { transition: color 0.3s; }
.crumbs a:hover { color: var(--bdx-ink); }
.crumbs [aria-current] { color: var(--body); }

/* ---------- 18. Article ---------- */
.article-hero {
  padding-top: calc(var(--header-h) + clamp(2.2rem, 1.5rem + 3vw, 3.6rem));
  padding-bottom: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  background: var(--bone-1);
  border-bottom: 1px solid var(--line);
}
.article-hero h1 { font-size: var(--step-4); margin-bottom: 1.2rem; max-width: 22ch; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  font-size: 0.83rem;
  color: var(--muted);
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.article-meta__author { display: flex; align-items: center; gap: 0.7rem; }
.article-meta__author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.article-meta__author strong { display: block; color: var(--ink); font-weight: 600; font-size: 0.88rem; }
.article-meta__author span { font-size: 0.76rem; }
.tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bdx-ink);
  background: var(--bdx-wash);
  padding: 0.42rem 0.85rem;
  border-radius: 100px;
}

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--bdx), var(--sienna));
  z-index: 101;
}

.prose { max-width: 70ch; margin-inline: auto; }
.prose > * + * { margin-top: 1.35em; }
.prose h2 {
  font-size: var(--step-3);
  margin-top: 2.6em;
  margin-bottom: 0.1em;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h3 {
  font-size: var(--step-1);
  margin-top: 2em;
  margin-bottom: 0.1em;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose p { font-size: 1.06rem; line-height: 1.78; }
.prose a {
  color: var(--bdx-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(126, 17, 19, 0.35);
  transition: text-decoration-color 0.3s;
}
.prose a:hover { text-decoration-color: var(--bdx-ink); }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: 0.6rem; }
.prose li { line-height: 1.72; padding-left: 0.3rem; }
.prose li::marker { color: var(--bdx-ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose figure { margin-block: 2.4em; }
.prose figure img { width: 100%; border-radius: var(--r-md); border: 1px solid var(--line); }
.prose figcaption { margin-top: 0.8rem; font-size: 0.83rem; color: var(--muted-2); text-align: center; }
.prose blockquote {
  border-left: 2px solid var(--bdx);
  padding: 0.2rem 0 0.2rem 1.6rem;
  margin-block: 2em;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.8em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.prose .table-scroll { overflow-x: auto; margin-block: 2em; }
.prose th, .prose td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 600; color: var(--ink); background: var(--bone-1); font-size: 0.86rem; }

.callout {
  background: var(--bone-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bdx);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: clamp(1.2rem, 1rem + 0.7vw, 1.7rem);
  margin-block: 2.2em;
}
.callout__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bdx-ink);
  margin-bottom: 0.7rem;
}
.callout p { font-size: 0.98rem; }
.callout p + p { margin-top: 0.8rem; }

.toc {
  background: var(--bone-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.5rem 1.7rem;
  margin-bottom: 2.5rem;
}
.toc h2 {
  font-family: var(--font-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem !important;
}
.toc ol { list-style: none; padding: 0; display: grid; gap: 0.55rem; counter-reset: toc; }
.toc li { counter-increment: toc; padding-left: 0; }
.toc a { font-size: 0.95rem; color: var(--body); text-decoration: none; display: flex; gap: 0.7rem; }
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--bdx-ink); font-size: 0.78rem; font-weight: 600; padding-top: 3px; }
.toc a:hover { color: var(--bdx-ink); }

.author-box {
  display: grid;
  gap: 1.4rem;
  align-items: center;
  background: var(--bone-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  margin-top: 3.5rem;
}
@media (min-width: 560px) { .author-box { grid-template-columns: 88px 1fr; } }
.author-box img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.author-box h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.author-box p { font-size: 0.92rem; color: var(--muted); }
.author-box .link-arrow { margin-top: 0.9rem; }

/* Article cards */
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bone-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  position: relative;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.4s;
  isolation: isolate;
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--bone-3); }
.post-card__cat {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--bdx-ink);
  margin-bottom: 1rem;
}
.post-card h3 { font-size: var(--step-1); line-height: 1.28; margin-bottom: 0.7rem; }
.post-card p { font-size: 0.93rem; color: var(--muted); }
.post-card__foot {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--muted-2);
}
.post-card__foot svg { width: 16px; height: 16px; color: var(--bdx-ink); transition: transform 0.4s var(--ease); }
.post-card:hover .post-card__foot svg { transform: translateX(5px); }
.post-card a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.post-card--feature { background: var(--night); border-color: var(--night-2); }
.post-card--feature h3 { color: #fbf6f1; }
.post-card--feature p { color: #a9998f; }
.post-card--feature .post-card__cat { color: var(--bdx-soft); }
.post-card--feature .post-card__foot { color: rgba(251, 246, 241, 0.5); }
.post-card--feature .post-card__foot svg { color: var(--bdx-soft); }
@media (min-width: 1000px) { .post-card--feature { grid-column: span 2; } }

/* ---------- 19. Forms / quiz ---------- */
.quiz {
  background: var(--bone-0);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 3rem);
  box-shadow: var(--shadow-md);
  max-width: 720px;
  margin-inline: auto;
}
.quiz__bar {
  height: 3px;
  background: var(--bone-2);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 0.9rem;
}
.quiz__bar i { display: block; height: 100%; background: var(--bdx); width: 0; transition: width 0.6s var(--ease); border-radius: 100px; }
.quiz__count {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
}
.quiz__step { display: none; }
.quiz__step.is-active { display: block; animation: stepIn 0.55s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } }
.quiz__q { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink); line-height: 1.25; margin-bottom: 1.6rem; }

.opt { display: grid; gap: 0.7rem; }
.opt label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 0.97rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.opt label:hover { border-color: var(--bdx-ink); background: var(--bone-1); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  flex: none;
  display: grid;
  place-items: center;
  transition: border-color 0.3s var(--ease);
}
.opt .dot::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bdx);
  transform: scale(0);
  transition: transform 0.3s var(--ease);
}
.opt input:checked ~ .dot { border-color: var(--bdx-ink); }
.opt input:checked ~ .dot::after { transform: scale(1); }
.opt input:checked + .dot { border-color: var(--bdx-ink); }
.opt label:has(input:checked) { border-color: var(--bdx-ink); background: var(--bdx-wash); }
.opt input:focus-visible ~ .dot { outline: 2px solid var(--bdx); outline-offset: 3px; }

.field { display: grid; gap: 0.5rem; margin-bottom: 1.1rem; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bone-0);
  font-size: 0.97rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--bdx-ink);
  box-shadow: 0 0 0 3px rgba(126, 17, 19, 0.1);
}
.field textarea { min-height: 130px; resize: vertical; }
.field small { font-size: 0.78rem; color: var(--muted-2); }

.quiz__nav { display: flex; gap: 0.8rem; margin-top: 2rem; align-items: center; }
.quiz__back {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  transition: color 0.3s;
}
.quiz__back:hover { color: var(--bdx-ink); }
.quiz__done { text-align: center; padding-block: 1.5rem; }
.quiz__done svg { width: 56px; height: 56px; color: var(--bdx-ink); margin-inline: auto; margin-bottom: 1.3rem; }

.consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.83rem; color: var(--muted); margin-bottom: 1.4rem; }
.consent input { margin-top: 3px; accent-color: var(--bdx-ink); width: 17px; height: 17px; flex: none; }
.consent a { color: var(--bdx-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 20. Contact ---------- */
.contact-grid { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4rem); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-list { list-style: none; display: grid; gap: 1.1rem; margin-top: 2.2rem; }
.contact-list li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bone-0);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.4s;
}
.contact-list li:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--bone-3); }
.contact-list .ico {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--bdx-wash);
  color: var(--bdx-ink);
  display: grid;
  place-items: center;
}
.contact-list .ico svg { width: 20px; height: 20px; }
.contact-list strong { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.2rem; }
.contact-list span, .contact-list a { font-size: 0.98rem; color: var(--ink); font-weight: 500; }
.contact-list a:hover { color: var(--bdx-ink); }

/* ---------- 21. Misc ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.6rem; }
.pill {
  font-size: 0.78rem;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--bone-0);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
a.pill:hover, .pill.is-active { border-color: var(--bdx-ink); color: var(--bdx-ink); background: var(--bdx-wash); }

.note {
  font-size: 0.82rem;
  color: var(--muted-2);
  line-height: 1.6;
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  margin-top: 2.5rem;
}

.med-disclaimer {
  background: var(--bone-2);
  border-radius: var(--r-md);
  padding: 1.3rem 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 2.5rem;
}
.med-disclaimer strong { color: var(--ink); }

.arch {
  border-radius: 300px 300px var(--r-lg) var(--r-lg);
  overflow: hidden;
  background: var(--bone-2);
}
.arch img { width: 100%; }

/* ---------- 22. Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.95s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(0.965); }

/* Hero line mask reveal */
.reveal-mask { display: block; overflow: hidden; }
.reveal-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
}
.is-loaded .reveal-mask > span { transform: none; }
.reveal-mask:nth-of-type(2) > span { transition-delay: 0.09s; }
.reveal-mask:nth-of-type(3) > span { transition-delay: 0.18s; }

.fade-up-load {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease), transform 1s var(--ease);
}
.is-loaded .fade-up-load { opacity: 1; transform: none; }
.is-loaded [data-load-delay="1"] { transition-delay: 0.28s; }
.is-loaded [data-load-delay="2"] { transition-delay: 0.4s; }
.is-loaded [data-load-delay="3"] { transition-delay: 0.52s; }
.is-loaded [data-load-delay="4"] { transition-delay: 0.64s; }

/* ---------- 23. Back to top ---------- */
.to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: 90;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--bdx);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s, background 0.3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--bdx-deep); }
.to-top svg { width: 17px; height: 17px; }

/* ---------- 24. Reduced motion ---------- */
/* ── Landscape phones ──────────────────────────────────────────────────────
   The drawer's type scales on vw, which in landscape is the LONG edge — so
   a 932x430 screen got 2.6rem menu items with only 430px of height to hold
   them. Here the type is driven by the short edge instead. */
@media (max-height: 500px) and (orientation: landscape) {
  .drawer { padding-block: calc(var(--header-h) + 1rem) 1.5rem; }
  .drawer__nav a { font-size: 1.3rem; padding-block: 0.28rem; }
  .drawer__meta { font-size: 0.8rem; }
}

/* ── Dark theme ────────────────────────────────────────────────────────────
   Warm charcoal, not neutral black: the brand is bordeaux and bone, and a
   blue-grey dark mode fights that. Surfaces step up in lightness so cards
   still lift off the page instead of flattening into it.

   Bordeaux has to split here. #a5262a keeps enough body to read as a brand
   fill under white text (7.2:1), but as TEXT on the page ground it would only
   reach 2.6:1 — so text and icons take --bdx-ink at 8.5:1 instead. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bone-0: #17120f;
  --bone-1: #1e1815;
  --bone-2: #251e1a;
  --bone-3: #332a25;
  --line: #382e28;
  --line-soft: #2b2320;

  --ink: #f7f1ea;
  --body: #d3c6bd;
  --muted: #ac9d93;
  --muted-2: #bcada3;

  --bdx: #a5262a;
  --bdx-ink: #e79a9c;
  --bdx-deep: #b8302f;
  --bdx-soft: #e79a9c;
  --bdx-wash: #2b1a19;
  --sienna: #c98a68;
  --night: #100c0a;
  --night-2: #1c1512;

  --header-veil: rgba(23, 18, 15, 0.86);
  --wash: #241a17;
  --wash-0: rgba(36, 26, 23, 0);

  /* Warm tints read as haze on a dark ground, so shadows go to true black. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px -6px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 40px -18px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.45), 0 40px 80px -30px rgba(0, 0, 0, 0.75);
}

/* The monogram is navy; on a dark header it needs the cream remap the footer
   already uses, so both sit in the markup and CSS picks one. */
/* scoped to .header so these outrank `.logo picture` on specificity */
.header .logo-pic--light { display: none; }
:root[data-theme="dark"] .header .logo-pic--dark { display: none; }
:root[data-theme="dark"] .header .logo-pic--light { display: flex; }

/* Sun and moon share one button; only the incoming one is ever in flow. */
.theme-toggle { cursor: pointer; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }

/* No room beside three controls on a phone — there it lives in the drawer. */
.header .theme-toggle { display: none; }
@media (min-width: 820px) { .header .theme-toggle { display: grid; } }

.drawer__theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-top: 1.4rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bone-1);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.drawer__theme svg { width: 19px; height: 19px; color: var(--bdx-ink); flex: none; }
@media (min-width: 820px) { .drawer__theme { display: none; } }

/* Only while switching — a permanent transition on every element would drag
   scrolling, and there is nothing to animate on first paint. */
/* Freeze every transition for one frame while the tokens swap.

   Elements carrying a standing `transition: color` — .nav a and .btn — kept
   their pre-swap colour permanently otherwise: Chrome starts a transition from
   the old value and never lands on the new one when the change arrives through
   var(). Verified in Chrome 152; h1, .lede and body have no colour transition
   and were never affected, which is what pinned it down. */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-mask > span, .fade-up-load { transform: none !important; opacity: 1 !important; }
  .marquee { animation: none; }
}

/* ---------- 25. Print ---------- */
@media print {
  .header, .drawer, .to-top, .cta-band, .footer, .progress, .strip { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}