/* ==========================================================================
   Medical Marketing Whiz shared design system
   Token driven. Every brand reads the same stylesheet and diverges only
   through the custom properties written in the :root block below.
   ========================================================================== */

@font-face {
  font-family: "Brixanos";
  src: url("/assets/fonts/brixanos.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Dermagnify palette, from the live site's own tokens (--color-3 to
     --color-6 and --primary-color). Teal carries every dark ground, button
     and rule; caramel is the accent; chocolate is the reading colour on
     stone, as it is on the current site. */
  --ink: #083937;
  --ink-2: #036564;
  --accent: #CEA171;
  --surface: #F0EEEB;
  --sand: #E1DBD5;
  --text: #49281F;
  --muted: color-mix(in srgb, var(--text) 45%, var(--surface));
  --ground-dark: linear-gradient(180deg, var(--ink) 54%, color-mix(in srgb, var(--ink-2) 30%, var(--ink)) 100%);

  /* Derived neutrals. Text steps derive from chocolate so muted copy keeps
     the warm cast; the soft band is the live site's sand. */
  --ink-90: color-mix(in srgb, var(--text) 90%, var(--surface));
  --ink-70: color-mix(in srgb, var(--text) 80%, var(--surface));
  --ink-55: color-mix(in srgb, var(--text) 76%, var(--surface));
  --ink-12: color-mix(in srgb, var(--text) 12%, var(--surface));
  --ink-06: var(--sand);
  --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface));
  --accent-deep: color-mix(in srgb, var(--accent) 38%, var(--text));
  --white: #ffffff;
  --rule: color-mix(in srgb, var(--text) 16%, transparent);
  --rule-accent: color-mix(in srgb, var(--accent) 70%, transparent);

  /* Typography */
  --font-display: 'Brixanos', 'Times New Roman', serif;
  --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.36vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.7vw, 1.95rem);
  --step-3: clamp(1.75rem, 1.48rem + 1.25vw, 2.6rem);
  --step-4: clamp(2.1rem, 1.63rem + 2.15vw, 3.5rem);
  --step-5: clamp(2.5rem, 1.72rem + 3.6vw, 4.7rem);
  --step-6: clamp(2.9rem, 1.6rem + 6vw, 6.2rem);

  --eyebrow-spacing: 0.24em;
  --display-weight: 400;
  --display-spacing: 0;
  --display-leading: 1.12;

  /* Form and shape */
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --border-weight: 1px;

  /* Spacing scale */
  --space-2xs: 0.375rem;
  --space-xs: 0.75rem;
  --space-s: 1.25rem;
  --space-m: 2rem;
  --space-l: 3rem;
  --space-xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --space-2xl: clamp(5rem, 3rem + 8vw, 9.5rem);

  --container: 1240px;
  --container-narrow: 780px;
  --container-wide: 1480px;
  --gutter: clamp(1.25rem, 0.85rem + 2vw, 3rem);

  --header-h: 76px;

  /* Motion */
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur: 420ms;
  --dur-slow: 900ms;

  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
  --shadow: 0 18px 48px -24px color-mix(in srgb, var(--ink) 30%, transparent);
  --shadow-lg: 0 40px 90px -40px color-mix(in srgb, var(--ink) 40%, transparent);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: 999;
  background: var(--ink);
  color: var(--surface);
  padding: 0.75rem 1.25rem;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 0.5rem; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-spacing);
  text-wrap: balance;
}

h1, .h1 { font-size: var(--step-5); }
h2, .h2 { font-size: var(--step-4); }
h3, .h3 { font-size: var(--step-2); }
h4, .h4 { font-size: var(--step-1); }
h5, h6 { font-family: var(--font-body); font-size: var(--step--1); }

.display-xl { font-size: var(--step-6); }

p { text-wrap: pretty; }
.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-70);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--accent-deep);
}
.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--rule-accent);
}
.eyebrow--center::before { display: none; }

.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.prose a:hover { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose ul li { list-style: none; position: relative; padding-left: 1.1rem; }
.prose ul li + li { margin-top: 0.5rem; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
}
.prose ol { list-style: decimal; }
.prose ol li { padding-left: 0.35rem; }
.prose ol li + li { margin-top: 0.5rem; }
.prose blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-l); }
.section--tall { padding-block: var(--space-2xl); }
.section--ink { background: var(--ink); background-image: var(--ground-dark); color: var(--surface); }
.section--ink .lede { color: color-mix(in srgb, var(--surface) 72%, transparent); }
.section--ink .eyebrow { color: var(--accent); }
.section--soft { background: var(--ink-06); }
.section--accent { background: var(--accent-soft); }

.grid { display: grid; gap: var(--space-m); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-s); }
.grid--split { grid-template-columns: 1fr; gap: var(--space-l); align-items: center; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--split { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .grid--split-wide { grid-template-columns: 1.15fr 0.85fr; }
  .grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-xl); align-items: start; }
}

.stack > * + * { margin-top: var(--space-s); }
.stack-m > * + * { margin-top: var(--space-m); }

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-l);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head .eyebrow { margin-bottom: var(--space-xs); }
.section-head p { margin-top: var(--space-s); }

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

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

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--surface);
  --btn-bd: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1.05em 2em;
  border: var(--border-weight) solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease);
}
.btn:hover::after { transform: translateY(0); }
.btn:hover { color: var(--ink); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
}
.btn--accent {
  --btn-bg: var(--accent);
  --btn-fg: var(--ink);
  --btn-bd: var(--accent);
}
.btn--accent::after { background: var(--ink); }
.btn--accent:hover { color: var(--surface); border-color: var(--ink); }

.btn--light {
  --btn-bg: transparent;
  --btn-fg: var(--surface);
  --btn-bd: color-mix(in srgb, var(--surface) 45%, transparent);
}
.btn--light:hover { color: var(--ink); }

.btn--sm { padding: 0.8em 1.4em; font-size: 0.78rem; }
.btn--full { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--rule-accent);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--accent-deep); border-color: var(--accent); }
.link-arrow:hover svg { transform: translateX(5px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */

.announce {
  background: var(--ink);
  color: color-mix(in srgb, var(--surface) 86%, transparent);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  min-height: 42px;
  padding-block: 0.5rem;
  text-align: center;
}
.announce__authority {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.announce__sep { display: none; }
.announce a { text-decoration: underline; text-underline-offset: 0.2em; }
.announce a:hover { color: var(--accent); }

@media (min-width: 900px) {
  .announce__inner { justify-content: space-between; text-align: left; }
  .announce__sep { display: block; }
}
@media (max-width: 899px) {
  .announce__msg { display: none; }
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  /* Positioning context for the mega panel, so a wide panel centres on the
     container instead of hanging off the left edge of the Treatments item. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo svg, .logo img { height: 38px; width: auto; }
@media (min-width: 900px) { .logo svg, .logo img { height: 44px; } }

.nav { display: none; }

@media (min-width: 1240px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 0.4rem + 1.4vw, 2.1rem);
  }
  .nav__item { position: relative; }
  .nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding-block: 0.6rem;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease);
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0.15rem;
    width: 100%; height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }
  .nav__item:hover .nav__link::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__caret { width: 9px; height: 9px; opacity: 0.55; transition: transform var(--dur-fast) var(--ease); }
  .nav__item:hover .nav__caret { transform: rotate(180deg); }

  /* Mega panel */
  .nav__panel {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 50%;
    translate: -50% 0;
    min-width: 240px;
    padding: var(--space-s);
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
      visibility var(--dur);
  }
  .nav__item:hover .nav__panel,
  .nav__item:focus-within .nav__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* The mega item opts out of being a containing block so its panel
     resolves against .header__inner and spans the container width. */
  .nav__item--mega { position: static; }

  .nav__panel--mega {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-l);
    padding: var(--space-l) var(--space-m);
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    translate: 0 0;
  }
  .nav__col-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-deep);
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav__sub a {
    display: block;
    padding: 0.4rem 0;
    font-size: 0.88rem;
    color: var(--ink-70);
    transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
  }
  .nav__sub a:hover { color: var(--ink); padding-left: 0.35rem; }
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.header__phone:hover { color: var(--accent-deep); }
.header__phone svg { width: 15px; height: 15px; flex-shrink: 0; }
.header__phone-label { display: none; }
@media (min-width: 560px) { .header__phone-label { display: inline; } }

.header__cta { display: none; }
@media (min-width: 780px) { .header__cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 1240px) { .nav-toggle { display: none; } }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--surface);
  padding: calc(var(--header-h) + var(--space-m)) var(--gutter) var(--space-l);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
body.nav-open .drawer { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1240px) { .drawer { display: none; } }

.drawer__group + .drawer__group { border-top: 1px solid var(--rule); }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.05rem 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-align: left;
}
.drawer__link svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.drawer__link[aria-expanded="true"] svg { transform: rotate(45deg); }
.drawer__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.drawer__link[aria-expanded="true"] + .drawer__sub { grid-template-rows: 1fr; }
.drawer__sub > div { overflow: hidden; }
.drawer__sub a {
  display: block;
  padding: 0.55rem 0 0.55rem 1rem;
  border-left: 1px solid var(--rule);
  color: var(--ink-70);
  font-size: 0.95rem;
}
.drawer__sub a:hover { color: var(--ink); border-color: var(--accent); }
.drawer__sub-title {
  display: block;
  padding-top: 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.drawer__foot {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--space-s);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--surface);
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Bias the crop right so the subject is not hidden behind the copy. */
  object-position: 72% 50%;
  opacity: 0.62;
  transform: scale(1.06);
  animation: heroDrift 18s var(--ease-soft) forwards;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--ink) 92%, transparent) 0%,
    color-mix(in srgb, var(--ink) 80%, transparent) 26%,
    color-mix(in srgb, var(--ink) 38%, transparent) 58%,
    color-mix(in srgb, var(--ink) 8%, transparent) 100%
  );
}
/* This element is also .container, so it inherits margin-inline: auto.
   Overriding its max-width therefore does NOT left-align the copy, it
   produces a narrower box that is still centred in the viewport, which is
   the opposite of the intent.

   So the container keeps its full centred width and gutters, and the copy is
   constrained and pushed to the start by a single grid column instead. */
.hero__inner {
  position: relative;
  padding-block: clamp(5rem, 3rem + 12vw, 10.5rem);
  display: grid;
  grid-template-columns: minmax(0, var(--hero-copy, 40rem));
  justify-content: start;
  align-content: center;
}
.hero .eyebrow { color: var(--accent); margin-bottom: var(--space-s); }
.hero h1 { margin-bottom: var(--space-s); }
.hero__lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: color-mix(in srgb, var(--surface) 80%, transparent);
  max-width: 34rem;
  margin-bottom: var(--space-m);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid color-mix(in srgb, var(--surface) 22%, transparent);
  font-size: 0.85rem;
}
.hero__meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--accent);
}
.hero__meta span { color: color-mix(in srgb, var(--surface) 70%, transparent); }

@keyframes heroDrift {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}

/* Page hero, used by every layout except the home page */
.page-hero {
  position: relative;
  background: var(--ink);
  color: var(--surface);
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.page-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ink) 70%, transparent),
    color-mix(in srgb, var(--ink) 92%, transparent));
}
/* Same correction as .hero__inner. See the note there. */
.page-hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 2.5rem + 6vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, var(--page-hero-copy, 46rem));
  justify-content: start;
}
.page-hero .eyebrow { color: var(--accent); margin-bottom: var(--space-xs); }
.page-hero p {
  margin-top: var(--space-s);
  font-size: var(--step-1);
  line-height: 1.55;
  color: color-mix(in srgb, var(--surface) 78%, transparent);
}

/* Marquee ribbon */
.marquee {
  background: var(--accent);
  color: var(--ink);
  padding-block: 0.9rem;
  overflow: hidden;
  white-space: nowrap;
  border-block: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
}
/* The track carries NO gap. Spacing lives inside each item instead, so the
   duplicated track is exactly twice the original width and translating by
   -50% lands precisely on the start of the second copy. With a gap on the
   track the two halves differ by half a gap, which is the visible stutter. */
.marquee__track {
  display: flex;
  gap: 0;
  width: max-content;
  align-items: center;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 2.75rem;
  padding-right: 2.75rem;
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.02em;
}
.marquee__item::after {
  content: "";
  width: 6px; height: 6px;
  flex: 0 0 auto;
  background: var(--ink);
  border-radius: 50%;
  opacity: 0.5;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Authority: press bar and associations
   -------------------------------------------------------------------------- */

.authority {
  background: var(--white);
  border-block: 1px solid var(--rule);
  padding-block: var(--space-m);
}
.authority__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
}
.authority__head .eyebrow::before { display: none; }
/* Twelve outlets, so the column counts are all divisors of twelve: even rows
   at every breakpoint, no orphan mark stranded on a line of its own. The
   phone gap is tighter so the long wordmarks keep some height. */
.authority__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s) var(--space-xs);
  align-items: center;
  justify-items: center;
}
@media (min-width: 560px) { .authority__grid { grid-template-columns: repeat(4, 1fr); column-gap: var(--space-m); } }
@media (min-width: 1000px) { .authority__grid { grid-template-columns: repeat(6, 1fr); } }

/* Real outlet marks. Each sits centred in a fixed-height row box and is drawn
   at its own width (--w, set per outlet in the data for equal ink area), so
   the AP block and the USA Today lockup read at the same visual weight. The
   SVGs carry explicit dimensions, so the width alone fixes the height. */
.outlet {
  --k: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  color: var(--ink);
  opacity: 0.7;
  filter: grayscale(1) contrast(1.05);
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.outlet:hover,
.outlet:focus-visible {
  opacity: 1;
  filter: none;
  transform: translateY(-2px);
}
@media (min-width: 560px) { .outlet { --k: 1; } }
.outlet img {
  display: block;
  width: calc(var(--w, 110px) * var(--k));
  max-width: 100%;
  height: auto;
}

/* Text fallback, for any outlet with no licensed mark available. */
.outlet__name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
}
.outlet__sub {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.authority__note {
  margin-top: var(--space-s);
  text-align: center;
  font-size: 0.72rem;
  color: var(--ink-55);
  max-width: 44rem;
  margin-inline: auto;
}

/* Centred flex row of equal-width cards: three or four always balance on
   the line, with no empty grid column left over on the right. */
.assoc-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
}
.assoc-grid > li { flex: 0 1 15.5rem; min-width: 0; }
@media (max-width: 559px) { .assoc-grid > li { flex-basis: calc(50% - var(--space-s) / 2); } }

.assoc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: var(--space-m) var(--space-s);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  text-align: center;
  height: 100%;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.assoc:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

/* The organisations' own marks, in their own colours: on a credentials strip
   the real seal is the proof. Each is drawn at its data width (--w) inside a
   fixed-height box so the names below line up across the row. */
.assoc__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  width: 100%;
  margin-bottom: 0.6rem;
}
.assoc__mark img {
  display: block;
  width: var(--w, 96px);
  max-width: 100%;
  height: auto;
}

.assoc__abbr {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--accent-deep);
}
.assoc__name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.assoc__label {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--ink-55);
}

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

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-06);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-s);
  flex: 1;
}
.card__eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.card__title { font-size: var(--step-1); }
.card__text { font-size: 0.92rem; color: var(--ink-70); }
.card__foot {
  margin-top: auto;
  padding-top: var(--space-s);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  font-size: 0.8rem;
}
.card__price { font-weight: 700; color: var(--ink); }
.card__link { position: absolute; inset: 0; z-index: 2; }
.card__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Editorial numbered card, no image */
.card--numbered { padding: var(--space-m) var(--space-s); }
.card__num {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--accent);
  margin-bottom: var(--space-xs);
}

/* Feature tile with hover reveal */
.tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--surface);
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
.tile:hover img { transform: scale(1.06); opacity: 0.5; }
.tile__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-m) var(--space-s) var(--space-s);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--ink) 92%, transparent),
    transparent);
}
.tile__title { font-size: var(--step-2); }
.tile__text {
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--surface) 76%, transparent);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease),
    margin-top var(--dur) var(--ease);
}
.tile:hover .tile__text { max-height: 8rem; opacity: 1; margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   Trust pillars, stats, testimonials
   -------------------------------------------------------------------------- */

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-top: var(--space-s);
  border-top: 2px solid var(--accent);
}
.pillar__title { font-family: var(--font-display); font-size: var(--step-1); }
.pillar__text { font-size: 0.92rem; color: var(--ink-70); }

.stat { text-align: center; }
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1;
  color: var(--accent);
}
.stat__label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.section--ink .stat__label { color: color-mix(in srgb, var(--surface) 62%, transparent); }

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  height: 100%;
}
.quote__stars { display: inline-flex; gap: 2px; color: var(--accent); }
.quote__stars svg { width: 15px; height: 15px; }
.quote__text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.45;
}
.quote__attr {
  margin-top: auto;
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  color: var(--ink-55);
}
.quote__attr strong { display: block; color: var(--ink); font-size: 0.9rem; }

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.75rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
}
.rating-badge__score {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--accent-deep);
}

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

.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
  width: 100%;
  padding: var(--space-s) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.3;
  transition: color var(--dur-fast) var(--ease);
}
.faq__q:hover { color: var(--accent-deep); }
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 0.35em;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  background: var(--accent-deep);
  transition: transform var(--dur) var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
/* The heading wraps the button, so the panel is a sibling of the h3 rather
   than of the button. Match on the item instead. */
.faq__item:has(.faq__q[aria-expanded="true"]) .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--space-s); max-width: 60ch; color: var(--ink-70); }
.faq__a p + p { padding-top: 0.75rem; }

/* --------------------------------------------------------------------------
   Answer blocks, for answer engine visibility
   -------------------------------------------------------------------------- */

.answer {
  padding: var(--space-s) var(--space-m);
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
}
.answer__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.4rem;
}
.answer p { font-size: 1.02rem; line-height: 1.6; }

/* Opening statement on utility pages: headline left, copy right, sitting on
   the same container edge as the sections below it. */
.section.intro { padding-bottom: 0; } /* the next section's top padding is the gap */
.intro__grid { display: grid; gap: var(--space-m); }
.intro__grid .eyebrow { margin-bottom: var(--space-xs); }
.intro__statement { max-width: 16ch; }
.intro__body > * + * { margin-top: 1em; }
.intro__body p:not(.lede) { color: var(--ink-70); max-width: 62ch; }
.intro__body .lede { color: var(--ink); max-width: 40ch; }
.intro__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
}
.intro__contact dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.intro__contact dd { margin: 0.3rem 0 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; }
.intro__contact a:hover { color: var(--accent-deep); }
@media (min-width: 900px) {
  .intro__grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-xl); align-items: start; }
  .intro__body { padding-top: calc(var(--space-xs) + 1.1em); }
}

.factbox {
  display: grid;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
@media (min-width: 640px) { .factbox { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .factbox { grid-template-columns: repeat(4, 1fr); } }
.factbox__cell {
  padding: var(--space-s);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 640px) {
  .factbox__cell:not(:nth-child(2n)) { border-right: 1px solid var(--rule); }
}
@media (min-width: 1000px) {
  .factbox__cell { border-right: 1px solid var(--rule); }
  .factbox__cell:last-child { border-right: 0; }
}
.factbox__label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 0.35rem;
}
.factbox__value { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }

/* Comparison table */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
table.compare {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--white);
  font-size: 0.92rem;
}
table.compare th,
table.compare td {
  padding: 0.9rem var(--space-s);
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.compare thead th {
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare tbody th { font-weight: 700; width: 26%; }
table.compare tbody tr:nth-child(even) { background: var(--ink-06); }

/* --------------------------------------------------------------------------
   Provider cards
   -------------------------------------------------------------------------- */

.provider { text-align: left; }
.provider__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-06);
  margin-bottom: var(--space-s);
}
.provider__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.15);
  transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease);
}
.provider:hover .provider__media img { transform: scale(1.04); filter: none; }
.provider__name { font-size: var(--step-1); }
.provider__role {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-top: 0.3rem;
}
.provider__creds { font-size: 0.86rem; color: var(--ink-55); margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   Before and after
   -------------------------------------------------------------------------- */

.ba {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-06);
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}
.ba img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* The widget, not the photo, takes the pointer, so dragging moves the
     divider rather than starting a native image drag. */
  pointer-events: none;
  -webkit-user-drag: none;
}
.ba__after { clip-path: inset(0 0 0 var(--split, 50%)); }
.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 2px;
  background: var(--white);
  pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent);
}
.ba__handle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 42px; height: 42px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 35%, transparent);
  backdrop-filter: blur(3px);
}
.ba__tag {
  position: absolute;
  top: var(--space-xs);
  padding: 0.3rem 0.7rem;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  color: var(--surface);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.ba__tag--before { left: var(--space-xs); }
.ba__tag--after { right: var(--space-xs); }
.ba-caption { margin-top: 0.75rem; font-size: 0.82rem; color: var(--ink-55); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--space-s); }
.form__row { display: grid; gap: var(--space-s); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, 1fr); } }

.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.95rem 1rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem; }
.field--check input { width: 18px; height: 18px; margin-top: 0.2rem; padding: 0; }
.field--check label {
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--ink-70);
  line-height: 1.5;
}
.form__note { font-size: 0.76rem; color: var(--ink-55); }

/* --------------------------------------------------------------------------
   Call to action band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  background: var(--ink);
  color: var(--surface);
  overflow: hidden;
}
.cta-band__media { position: absolute; inset: 0; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.cta-band__inner {
  position: relative;
  display: grid;
  gap: var(--space-m);
  padding-block: var(--space-xl);
  align-items: center;
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1.25fr auto; gap: var(--space-xl); }
}
.cta-band .eyebrow { color: var(--accent); margin-bottom: var(--space-xs); }
.cta-band p {
  margin-top: var(--space-s);
  color: color-mix(in srgb, var(--surface) 78%, transparent);
  max-width: 44rem;
}

/* --------------------------------------------------------------------------
   Breadcrumbs and pagination
   -------------------------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--surface) 66%, transparent);
  margin-bottom: var(--space-s);
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before { content: "/"; opacity: 0.4; }
.crumbs [aria-current] { color: var(--accent); }

/* --------------------------------------------------------------------------
   Footer, identical across every Medical Marketing Whiz build
   -------------------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: color-mix(in srgb, var(--surface) 74%, transparent);
  font-size: 0.86rem;
}

.footer__map {
  height: clamp(180px, 18vw, 240px);
  background: color-mix(in srgb, var(--ink) 90%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--surface) 12%, transparent);
}
.footer__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.85) contrast(1.1) brightness(0.9);
  transition: filter var(--dur-slow) var(--ease);
}
.footer__map:hover iframe { filter: grayscale(0) contrast(1) brightness(1); }

/* One row of six on desktop: brand, four link columns, visit. Two columns
   on phones, three on tablets, with the brand and visit blocks spanning. */
.footer__main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m) var(--space-s);
  padding-block: var(--space-l) var(--space-m);
}
.footer__brand,
.footer__visit { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .footer__main { grid-template-columns: repeat(4, 1fr); }
  .footer__brand { grid-column: span 2; }
  .footer__visit { grid-column: span 2; }
}
@media (min-width: 1180px) {
  .footer__main {
    grid-template-columns: 1.5fr repeat(4, 1fr) 1.25fr;
    gap: var(--space-m);
  }
  .footer__brand,
  .footer__visit { grid-column: auto; }
}

.footer__brand .logo svg,
.footer__brand .logo img { height: 40px; }
.footer__note {
  margin-block: var(--space-s);
  font-size: 0.8rem;
  line-height: 1.6;
  max-width: 22rem;
}

.footer__col-title {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.footer__links li + li { margin-top: 0.45rem; }
.footer__links a {
  transition: color var(--dur-fast) var(--ease);
}
.footer__links a:hover { color: var(--surface); }

.footer__visit address { font-style: normal; line-height: 1.55; }
.footer__phone {
  display: inline-block;
  margin-block: 0.5rem 0.6rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--surface);
  line-height: 1.1;
}
.footer__phone:hover { color: var(--accent); }
.footer__visit-links {
  display: flex;
  gap: 1.1rem;
  margin-top: 0.6rem;
}
.footer__visit-links a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--surface) 35%, transparent);
}
.footer__visit-links a:hover { color: var(--accent); }

.footer__hours { width: 100%; max-width: 17rem; font-size: 0.8rem; border-collapse: collapse; }
.footer__hours th,
.footer__hours td { padding: 0.15rem 0; text-align: left; font-weight: 400; }
.footer__hours th { padding-right: 0.8rem; white-space: nowrap; }
.footer__hours td { text-align: right; color: color-mix(in srgb, var(--surface) 88%, transparent); }
.footer__hours tr.is-today th,
.footer__hours tr.is-today td { color: var(--accent); font-weight: 700; }

.socials { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid color-mix(in srgb, var(--surface) 22%, transparent);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.socials a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-2px);
}
.socials svg { width: 15px; height: 15px; }

.footer__legal {
  padding-block: var(--space-s);
  border-top: 1px solid color-mix(in srgb, var(--surface) 14%, transparent);
  display: grid;
  gap: var(--space-xs);
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--surface) 60%, transparent);
}
.footer__disclaimer { line-height: 1.6; max-width: 120ch; }
.footer__disclaimer strong { color: color-mix(in srgb, var(--surface) 82%, transparent); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  justify-content: space-between;
  align-items: center;
}
.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}
.footer__legal a:hover { color: var(--accent); }
.footer__credit a { text-decoration: underline; text-underline-offset: 0.2em; }

/* Sticky mobile action bar */
.mobile-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  border-top: 1px solid color-mix(in srgb, var(--surface) 16%, transparent);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}
.mobile-bar.is-visible { transform: none; }
.mobile-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 1.05rem 0.75rem;
  color: var(--surface);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mobile-bar a + a { background: var(--accent); color: var(--ink); }
.mobile-bar svg { width: 15px; height: 15px; }
@media (min-width: 780px) { .mobile-bar { display: none; } }
@media (max-width: 779px) { body { padding-bottom: 54px; } }

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

/* Scoped to .js, which is set by an inline script in the head. If that
   script never runs, or the main bundle fails, every reveal target simply
   renders visible instead of being permanently hidden. Content must never
   depend on JavaScript to appear. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 750ms var(--ease), transform 750ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* The image variant scales rather than clipping. clip-path gave a nicer
   wipe but leaves the element completely invisible if anything goes wrong,
   which is too high a price for an entrance animation. */
.js [data-reveal="mask"] {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 900ms var(--ease), transform 1100ms var(--ease);
}
.js [data-reveal="mask"].is-in { opacity: 1; transform: none; }

.count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .marquee__track { animation: none; }
  .hero__media img { animation: none; transform: none; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .header, .announce, .footer__map, .mobile-bar, .marquee, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ==========================================================================
   Dermagnify additions
   Everything below is specific to this build: the teal gradient grounds from
   the live site, the three-funnel mega menu, and the modules Aurelian did
   not have (fact list, insurance row, visit-type picker, care doors,
   markdown article body).
   ========================================================================== */

.hero, .page-hero, .cta-band, .footer { background-image: var(--ground-dark); }

.footer .logo img { filter: brightness(0) invert(1); opacity: 0.94; }
a.footer__col-title:hover { color: var(--accent); }

/* Mega menu: pillar columns plus a promo tile */
@media (min-width: 1240px) {
  .nav { gap: clamp(0.9rem, 0.2rem + 1vw, 1.6rem); }
  .nav__link { font-size: 0.78rem; letter-spacing: 0.06em; }
  .nav__panel--mega { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-m); }
  .nav__col--split .nav__sub { columns: 2; column-gap: var(--space-m); }
  .nav__sub li { break-inside: avoid; }
  .nav__promo {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-m);
    background: var(--ink);
    background-image: var(--ground-dark);
    color: var(--surface);
  }
  .nav__promo-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .nav__promo-heading { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.3; }
  .nav__promo .link-arrow { margin-top: auto; color: var(--accent); border-color: var(--rule-accent); align-self: flex-start; }
  .nav__promo-all { font-size: 0.8rem; color: color-mix(in srgb, var(--surface) 72%, transparent); display: inline-flex; gap: 0.4em; align-items: center; }
  .nav__promo-all:hover { color: var(--surface); }
}
@media (min-width: 1240px) and (max-width: 1399px) {
  .header__phone-label { display: none; }
}

/* Funnel menu. Aesthetics holds three pillar columns, Face split
   in two, so its panel needs a wider track than the default three. */
@media (min-width: 1240px) {
  .nav__panel--funnel-aesthetics {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-m);
  }
  a.nav__col-title { transition: color var(--dur-fast) var(--ease); }
  a.nav__col-title:hover { color: var(--ink); }
}

/* Plain two-column fact list: label left, value right */
.factlist { display: grid; }
.factlist li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.factlist li:last-child { border-bottom: 0; }
.factlist li > :first-child { font-weight: 700; }
.factlist li > :last-child { text-align: right; color: var(--ink-70); }

/* Insurance row */
.insure { text-align: center; }
.insure__label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--accent-deep);
}
.insure__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-m) var(--space-l);
  margin-top: var(--space-s);
}
/* Logos are trimmed to their ink and sized per logo in site.insurance
   (equal visual area), so the width and height attributes are the size. */
.insure__list img {
  height: auto;
  max-width: min(100%, 40vw);
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.insure__list img:hover { filter: none; opacity: 1; }
.insure__note { margin: var(--space-m) auto 0; max-width: 72ch; font-size: 0.88rem; color: var(--ink-70); }
.insure__note a { text-decoration: underline; text-underline-offset: 0.2em; }

/* Booking form: visit type */
.visit-type { border: 0; padding: 0; margin: 0 0 var(--space-s); min-width: 0; }
.visit-type legend { font-weight: 600; font-size: 0.88rem; margin-bottom: 0.6rem; padding: 0; }
.visit-type__options { display: grid; gap: 0.6rem; }
@media (min-width: 720px) { .visit-type__options { grid-template-columns: repeat(3, 1fr); } }
.visit-type__opt {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.visit-type__opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.visit-type__opt input { margin-top: 0.3rem; accent-color: var(--ink); }
.visit-type__opt strong { display: block; font-size: 0.95rem; }
.visit-type__opt small { display: block; font-size: 0.8rem; line-height: 1.45; color: var(--ink-70); margin-top: 0.2rem; }

/* Home: the care doors (one per pillar, grouped by funnel) */
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.door:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.door__media { aspect-ratio: 16 / 10; overflow: hidden; }
.door__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.door:hover .door__media img { transform: scale(1.04); }
.door__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-m); flex: 1; }
.door__title { font-size: var(--step-3); }
.door__text { color: var(--ink-70); font-size: 0.95rem; }
.door__links { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin-top: var(--space-2xs); }
.door__links a {
  position: relative;
  z-index: 2;
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--rule);
  color: var(--ink-70);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.door__links a:hover { border-color: var(--accent); color: var(--text); }
.door__foot { margin-top: auto; padding-top: var(--space-s); }
.door__cover { position: absolute; inset: 0; z-index: 1; }

/* Home pathways: five pillar tiles under a three-funnel bar. Both lists use
   the same five-column track so each funnel label spans exactly its pillars.
   Below 1100px the bar folds away and the tile eyebrow carries the funnel. */
.paths__grid { display: grid; gap: var(--space-s); }
@media (min-width: 640px) { .paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .paths__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.paths__funnels { display: none; }
@media (min-width: 1100px) {
  .paths__grid, .paths__funnels { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .paths__funnels {
    display: grid;
    gap: var(--space-s);
    margin-bottom: var(--space-s);
  }
  .paths__funnels a {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0 0.6rem;
    border-top: 2px solid var(--accent);
    transition: color var(--dur-fast) var(--ease);
  }
  .paths__funnels a:hover { color: var(--accent-deep); }
  .paths__funnels strong {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .paths__funnels span { font-size: 0.85rem; color: var(--ink-70); }
  .door--path .door__funnel { display: none; }
}
.door--path .door__body { padding: var(--space-s); }
.door--path .door__title { font-size: var(--step-2); }
.door__funnel {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.door__sub { font-size: 0.85rem; font-weight: 600; color: var(--ink-70); margin-top: -0.2rem; }
.door--path .door__text { font-size: 0.88rem; }

/* Journal body rendered from Markdown */
.article-body h2 { font-size: var(--step-3); margin-top: 2em; }
.article-body h3 { font-size: var(--step-2); margin-top: 1.6em; }
.article-body h4 { font-size: var(--step-1); margin-top: 1.4em; }
.article-body img { width: 100%; height: auto; margin-block: var(--space-m); }
.article-body table { width: 100%; border-collapse: collapse; font-size: 0.9rem; display: block; overflow-x: auto; }
.article-body th, .article-body td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.article-body th { font-weight: 700; background: var(--ink-06); }
.article-body a { text-decoration: underline; text-underline-offset: 0.2em; }

/* Signature under the physician feature on the home page */
.signature { width: 190px; height: auto; margin-top: var(--space-s); opacity: 0.9; }

/* Focus ring on dark grounds. The default ring is the deep accent, which
   measures 5.6:1 on stone but disappears on teal; caramel measures 5.4:1. */
.section--ink :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.cta-band :focus-visible,
.footer :focus-visible,
.announce :focus-visible,
.nav__promo :focus-visible { outline-color: var(--accent); }

/* ==========================================================================
   Oct 2026 page consolidation (review doc, Oct 16)
   ========================================================================== */

/* Header: a larger logo, and a Portal button beside Book. The header runs on
   the wide container so seven menu items, the phone, Portal and Book fit on
   one line; between 1240 and 1439px Book drops "an Appointment" and the
   phone shows its icon only. */
.logo svg, .logo img { height: 42px; }
@media (min-width: 900px) { .logo svg, .logo img { height: 52px; } }
@media (min-width: 1240px) and (max-width: 1439px) {
  .header .logo img { height: 46px; }
  .header__cta-more { display: none; }
}
@media (min-width: 1240px) and (max-width: 1519px) { .header__phone-label { display: none; } }
@media (max-width: 899px) { .header__cta-more { display: none; } }
.footer .logo img { height: 52px; }
/* One flex item and no wrapping, so "Book" and "an Appointment" stay on one
   line instead of becoming two items that wrap separately. */
.header__cta, .header__portal { white-space: nowrap; }
.header__portal { display: none; }
@media (min-width: 640px) { .header__portal { display: inline-flex; } }

/* Top bar on phones: the authority line and hours fold away, the
   click-to-call number stays. */
.announce__msg a { display: inline-flex; align-items: center; gap: 0.4em; }
@media (max-width: 899px) {
  .announce__msg { display: block; }
  .announce__authority, .announce__hours { display: none; }
}

/* Hero: the three pillars as links that jump to their blocks below */
.hero__pillars {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid color-mix(in srgb, var(--surface) 22%, transparent);
}
@media (min-width: 640px) { .hero__pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hero__pillars a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.1rem 0.75rem;
  height: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--surface) 26%, transparent);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.hero__pillars a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--surface) 8%, transparent); }
.hero__pillars strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); color: var(--accent); }
.hero__pillars span { grid-column: 1; font-size: 0.82rem; color: color-mix(in srgb, var(--surface) 72%, transparent); }
.hero__pillars svg { grid-column: 2; grid-row: 1 / span 2; color: var(--accent); }

/* Home: one block per funnel, the targets of the hero links */
.funnels { display: grid; gap: var(--space-m); }
@media (min-width: 960px) { .funnels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.funnel {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.funnel__media { aspect-ratio: 16 / 10; overflow: hidden; }
.funnel__media img { width: 100%; height: 100%; object-fit: cover; }
.funnel__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-m); flex: 1; }
.funnel__title { font-size: var(--step-3); }
.funnel__text { color: var(--ink-70); font-size: 0.95rem; }
.funnel__foot { margin-top: auto; padding-top: var(--space-s); align-items: center; }
.funnel:target { border-color: var(--accent); box-shadow: var(--shadow); }

/* Five-up card row (the About page pillars) */
.grid--5 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Link cards. Flyers are portrait artwork, so their thumbnail keeps the
   headline at the top in view. Section targets clear the sticky header. */
.card--action .card__media img[src*="/flyer-"] { object-position: 50% 0; }
.card--action .card__foot a { position: relative; z-index: 3; text-decoration: underline; text-underline-offset: 0.2em; }
.section[id], .card--action[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Press: Dr. Cappel's publications as a plain linked list */
.pubs { display: grid; counter-reset: pub; }
.pubs__item {
  display: grid;
  gap: 0.3rem;
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--rule);
}
.pubs__title { font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.pubs__title:hover { text-decoration-color: var(--accent); color: var(--accent-deep); }
.pubs__meta { font-size: 0.86rem; color: var(--ink-70); }
.pubs__source { margin-top: var(--space-m); font-size: 0.85rem; color: var(--ink-55); }
.pubs__source a { text-decoration: underline; text-underline-offset: 0.2em; }

/* Insights hub: the latest issue at full width */
.issue-lead { display: grid; gap: var(--space-m); align-items: center; }
@media (min-width: 900px) { .issue-lead { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-l); } }
.issue-lead__media { aspect-ratio: 3 / 2; overflow: hidden; }
.issue-lead__media img { width: 100%; height: 100%; object-fit: cover; }
.issue-lead__body h2 { margin-block: var(--space-2xs) var(--space-s); }
.issue-lead__body ul { margin-top: var(--space-s); }

.journal-cats { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-size: 0.9rem; color: var(--ink-70); }
.journal-cats a { display: inline-flex; gap: 0.4em; align-items: center; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* Footer: the Also serving line on every page */
.footer__serving { font-size: 0.8rem; line-height: 1.6; max-width: 22rem; margin-bottom: var(--space-s); }