/* =========================================================
   01 — c-nav · top navigation
   ========================================================= */
.c-nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), padding var(--t-base);
}
.c-nav.is-scrolled { border-bottom-color: var(--line); padding: .7rem var(--gutter); }
.c-nav__logo { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--accent); }
.c-nav__links { display: flex; gap: 2rem; font-size: .9rem; }
.c-nav__links a { color: var(--text); }
.c-nav__links a:hover { color: var(--accent); }
.c-nav__tools { display: flex; gap: .9rem; align-items: center; }
.c-nav__burger { display: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 3px; }
.c-nav__burger span { display: block; width: 18px; height: 1.5px; background: var(--text); margin: 4px auto; transition: var(--t-base); }
@media (max-width: 880px) {
  .c-nav__links { display: none; }
  .c-nav__burger { display: grid; place-items: center; }
}

/* =========================================================
   02 — c-btn · button system
   ========================================================= */
.c-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono);
  font-size: var(--fz-mono-sm);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .85rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.c-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.c-btn:active { transform: translateY(1px); }
.c-btn[disabled], .c-btn.is-disabled { opacity: .4; pointer-events: none; }

.c-btn--primary {
  background: var(--accent); color: var(--bg);
}
.c-btn--primary:hover { background: var(--accent-hover); }

.c-btn--secondary {
  background: transparent; color: var(--text); border-color: var(--line-bright);
}
.c-btn--secondary:hover { border-color: var(--accent); color: var(--accent); }

.c-btn--ghost {
  background: transparent; color: var(--accent); padding-left: 0; padding-right: 0;
}
.c-btn--ghost:hover { color: var(--accent-hover); }
.c-btn--ghost::after { content: " →"; transition: transform var(--t-base); }
.c-btn--ghost:hover::after { transform: translateX(4px); }

.c-btn.is-loading { color: transparent; position: relative; }
.c-btn.is-loading::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border: 1.5px solid currentColor; border-bottom-color: transparent;
  border-radius: 50%; animation: btn-spin .8s linear infinite; color: var(--bg);
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* =========================================================
   03 — c-hero · editorial hero
   ========================================================= */
.c-hero {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse 60% 50% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}
.c-hero__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.c-hero__corner {
  position: absolute; font-family: var(--mono); font-size: .65rem;
  letter-spacing: .25em; text-transform: uppercase; color: var(--text-muted);
}
.c-hero__corner.is-tl { top: 1.2rem; left: var(--gutter); }
.c-hero__corner.is-tr { top: 1.2rem; right: var(--gutter); }
.c-hero__corner.is-br { bottom: 1.2rem; right: var(--gutter); }
.c-hero__title {
  margin: 1rem 0 1rem;
  font-size: clamp(2.6rem, 6vw, 5rem);
}
.c-hero__sub {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  color: var(--text-muted); font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  max-width: 50ch; margin-bottom: 2rem;
}
.c-hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.c-hero.is-procedure .c-hero__chips {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.5rem;
}
.c-hero.is-procedure .c-hero__chips .chip {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .35rem .75rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; color: var(--text);
}

/* =========================================================
   04 — c-card-procedure
   ========================================================= */
.c-card-procedure {
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.c-card-procedure:hover {
  transform: translateY(-3px); border-color: var(--accent-deep);
  box-shadow: 0 12px 40px -20px color-mix(in srgb, var(--accent) 50%, transparent);
}
.c-card-procedure__img {
  aspect-ratio: 4/3;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in srgb, var(--accent) 18%, transparent), var(--bg-3) 80%);
}
.c-card-procedure__body { padding: 1.4rem 1.5rem 1.6rem; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.c-card-procedure__cat {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.c-card-procedure__title { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--text); margin: 0; }
.c-card-procedure__meta { font-family: var(--mono); font-size: .7rem; color: var(--text-muted); margin-top: .3rem; }
.c-card-procedure__price { font-family: var(--mono); font-size: .8rem; color: var(--accent); margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }

/* =========================================================
   05 — c-tabs · category filter tabs
   ========================================================= */
.c-tabs {
  display: flex; gap: 2rem; border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
}
.c-tabs__tab {
  position: relative; padding: 1rem 0; color: var(--text-muted);
  background: transparent; border: 0; cursor: pointer;
  transition: color var(--t-base);
}
.c-tabs__tab:hover { color: var(--text); }
.c-tabs__tab[aria-selected="true"] { color: var(--accent); }
.c-tabs__tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent);
}

/* =========================================================
   06 — c-accordion · FAQ accordion
   ========================================================= */
.c-accordion { border-top: 1px solid var(--line); }
.c-accordion__item { border-bottom: 1px solid var(--line); }
.c-accordion__btn {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 0; text-align: left; color: var(--text);
  font-family: var(--serif); font-style: italic; font-size: 1.2rem;
}
.c-accordion__btn:hover { color: var(--accent); }
.c-accordion__btn::after {
  content: "+"; font-family: var(--mono); color: var(--accent); transition: transform var(--t-base);
  font-size: 1.2rem; font-style: normal;
}
.c-accordion__btn[aria-expanded="true"]::after { content: "−"; }
.c-accordion__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base);
}
.c-accordion__panel-inner { overflow: hidden; }
.c-accordion__item[data-open="true"] .c-accordion__panel { grid-template-rows: 1fr; }
.c-accordion__panel-inner > * { padding-bottom: 1.4rem; }
.c-accordion__panel p { color: var(--text-muted); max-width: 70ch; }

/* =========================================================
   07 — c-card-surgeon
   ========================================================= */
.c-card-surgeon {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; transition: border-color var(--t-base);
}
.c-card-surgeon:hover { border-color: var(--accent-deep); }
.c-card-surgeon__portrait {
  aspect-ratio: 3/4; border-radius: var(--radius-sm);
  background: radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--sand) 50%, transparent), var(--bg-3) 80%);
}
.c-card-surgeon__name { font-family: var(--serif); font-size: 1.4rem; margin: 0; color: var(--text); }
.c-card-surgeon__creds { font-family: var(--mono); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.c-card-surgeon__specs { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.c-card-surgeon__specs span {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase;
  padding: .25rem .55rem; background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; color: var(--text-muted);
}
.c-card-surgeon__langs { font-family: var(--mono); font-size: .65rem; color: var(--text-muted); }

/* =========================================================
   08 — c-quote · pull quote / testimonial
   ========================================================= */
.c-quote {
  margin: 0; padding: 2rem 0; position: relative;
  text-align: center; max-width: 50ch; margin-inline: auto;
}
.c-quote::before {
  content: """; position: absolute; top: -1rem; left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-size: 5rem; color: var(--accent); line-height: 1; opacity: .3;
}
.c-quote__body {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.35; color: var(--text);
  margin: 0 0 1.5rem;
}
.c-quote__attr {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-muted);
}
.c-quote__attr b { color: var(--accent); font-weight: 500; }

/* =========================================================
   09 — c-price · price disclosure block
   ========================================================= */
.c-price {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
@media (max-width: 700px) { .c-price { grid-template-columns: 1fr; } }
.c-price__head { font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.c-price__range { font-family: var(--serif); font-size: 2.4rem; font-weight: 300; color: var(--text); letter-spacing: -.02em; }
.c-price__note { font-family: var(--sans); font-size: .85rem; color: var(--text-muted); margin-top: .3rem; }
.c-price__includes h4 { font-family: var(--sans); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 .8rem; }
.c-price__includes ul { margin: 0; padding: 0; list-style: none; font-size: .9rem; color: var(--text); }
.c-price__includes li { padding: .25rem 0; }
.c-price__includes li::before { content: "✓ "; color: var(--accent); }

/* =========================================================
   10 — c-form · multi-step consultation form
   ========================================================= */
.c-form { max-width: 560px; }
.c-form__steps { display: flex; gap: 1rem; margin-bottom: 2rem; font-family: var(--mono); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
.c-form__step-dot { display: flex; align-items: center; gap: .5rem; }
.c-form__step-dot[aria-current="step"] { color: var(--accent); }
.c-form__step-dot[aria-current="step"]::before { background: var(--accent); }
.c-form__step-dot::before { content: ""; width: 16px; height: 1px; background: var(--line-bright); }
.c-form__field { margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.c-form__field label { font-family: var(--sans); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); }
.c-form__field input, .c-form__field select, .c-form__field textarea {
  width: 100%; padding: .9rem 1rem; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text); transition: border-color var(--t-base);
}
.c-form__field input:focus, .c-form__field select:focus, .c-form__field textarea:focus {
  outline: 0; border-color: var(--accent);
}
.c-form__field.is-invalid input, .c-form__field.is-invalid select, .c-form__field.is-invalid textarea {
  border-color: #b15a3a;
}
.c-form__error { font-family: var(--mono); font-size: .65rem; color: #b15a3a; letter-spacing: .1em; }
.c-form__step { display: none; }
.c-form__step[data-active="true"] { display: block; }
.c-form__actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }

/* =========================================================
   11 — c-sticky-cta · mobile-only sticky concierge bar
   ========================================================= */
.c-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-cta);
  display: none; grid-template-columns: repeat(3, 1fr);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform var(--t-slow);
}
.c-sticky-cta.is-visible { transform: translateY(0); }
.c-sticky-cta a {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .8rem 0; color: var(--text);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  border-right: 1px solid var(--line);
}
.c-sticky-cta a:last-child { border-right: 0; }
.c-sticky-cta a svg { width: 16px; height: 16px; color: var(--accent); }
@media (max-width: 880px) { .c-sticky-cta { display: grid; } }

/* =========================================================
   12 — c-before-after · before/after slider
   ========================================================= */
.c-before-after {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-3); user-select: none; touch-action: none;
}
.c-before-after__after, .c-before-after__before {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-muted); font-family: var(--mono); font-size: .65rem; letter-spacing: .22em; text-transform: uppercase;
}
.c-before-after__after { background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--sand) 35%, transparent), var(--bg-3) 70%); }
.c-before-after__before {
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--accent-deep) 35%, transparent), var(--bg) 70%);
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.c-before-after__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--accent);
  transform: translateX(-50%); cursor: ew-resize;
}
.c-before-after__handle::after {
  content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 36px; height: 36px; background: var(--accent); color: var(--bg); display: grid; place-items: center;
  border-radius: 999px; font-size: .8rem;
}
.c-before-after__label {
  position: absolute; top: 1rem; padding: .3rem .6rem; background: color-mix(in srgb, var(--bg) 80%, transparent);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text);
}
.c-before-after__label.is-before { left: 1rem; }
.c-before-after__label.is-after { right: 1rem; }

/* =========================================================
   13 — c-mobile-menu · off-canvas menu
   ========================================================= */
.c-mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-mobile-menu);
  display: grid; grid-template-columns: 1fr min(82vw, 380px);
  pointer-events: none; visibility: hidden;
}
.c-mobile-menu.is-open { pointer-events: auto; visibility: visible; }
.c-mobile-menu__overlay {
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity var(--t-base);
}
.c-mobile-menu.is-open .c-mobile-menu__overlay { opacity: 1; }
.c-mobile-menu__panel {
  background: var(--bg-2); border-left: 1px solid var(--line);
  padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem;
  transform: translateX(100%); transition: transform var(--t-slow);
}
.c-mobile-menu.is-open .c-mobile-menu__panel { transform: translateX(0); }
.c-mobile-menu__close { align-self: flex-end; font-family: var(--mono); font-size: .75rem; }
.c-mobile-menu__links { display: flex; flex-direction: column; gap: 1rem; }
.c-mobile-menu__links a {
  font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--text);
}

/* =========================================================
   14 — c-article · longform article layout
   ========================================================= */
.c-article { display: grid; grid-template-columns: 1fr; max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); gap: var(--space-5); }
@media (min-width: 960px) {
  .c-article { grid-template-columns: 240px 1fr; }
  .c-article__toc { position: sticky; top: 100px; align-self: start; }
}
.c-article__toc {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted);
}
.c-article__toc h4 { font-family: var(--sans); font-size: .65rem; letter-spacing: .25em; color: var(--accent); margin-bottom: 1rem; }
.c-article__toc a { display: block; padding: .35rem 0; color: var(--text-muted); border-left: 1px solid var(--line); padding-left: .8rem; }
.c-article__toc a:hover, .c-article__toc a.is-active { color: var(--text); border-left-color: var(--accent); }
.c-article__body { max-width: 70ch; font-size: 1.05rem; line-height: 1.75; }
.c-article__body h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-style: italic; font-weight: 400; }
.c-article__body h3 { margin-top: 2rem; margin-bottom: .8rem; }
.c-article__body > p:first-of-type::first-letter {
  font-family: var(--serif); font-size: 4.5rem; float: left; line-height: .9; padding: .2rem .5rem 0 0; color: var(--accent);
}
.c-article__body p { color: var(--text); margin-bottom: 1.2rem; }
.c-article__body ul, .c-article__body ol { color: var(--text); padding-left: 1.2rem; margin-bottom: 1.2rem; }
.c-article__body li { margin-bottom: .4rem; }
.c-article__body blockquote {
  border-left: 2px solid var(--accent); padding-left: 1.5rem; margin: 2rem 0;
  font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--text);
}
.c-mobile-menu__tools { margin-top: auto; display: flex; gap: 1rem; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* =========================================================
   15 — c-footer · editorial footer
   ========================================================= */
.c-footer {
  background: var(--bg-2); border-top: 1px solid var(--line);
  padding: var(--space-7) 0 var(--space-5);
}
.c-footer__grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-5);
}
@media (max-width: 880px) { .c-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 500px) { .c-footer__grid { grid-template-columns: 1fr; } }
.c-footer__brand h3 { font-family: var(--serif); font-style: italic; font-size: 2rem; margin-bottom: 1rem; color: var(--accent); }
.c-footer h4 { font-family: var(--sans); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.c-footer ul { list-style: none; padding: 0; margin: 0; }
.c-footer li { padding: .25rem 0; }
.c-footer a { color: var(--text-muted); }
.c-footer a:hover { color: var(--accent); }
.c-footer__legal {
  max-width: var(--maxw); margin: var(--space-5) auto 0; padding: var(--space-3) var(--gutter) 0;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted);
}
.c-footer__badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem;
  border: 1px solid var(--accent-deep); border-radius: 3px; color: var(--accent);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .25em; text-transform: uppercase;
}

/* =========================================================
   16 — c-lang-toggle · EN/ES language toggle stub
   ========================================================= */
.c-lang-toggle {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 3px; color: var(--text);
}
.c-lang-toggle:hover { border-color: var(--accent); color: var(--accent); }
.c-lang-toggle .is-inactive { color: var(--text-muted); }

/* =========================================================
   17 — c-skeleton · loading state placeholders
   ========================================================= */
.c-skeleton {
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.c-skeleton--text { height: .9rem; }
.c-skeleton--card { height: 280px; }
.c-skeleton--avatar { width: 64px; height: 64px; border-radius: 999px; }

/* ---- Recovery table (added: replicates the c-rtable style used on BBL) ---- */
.c-table-wrap { overflow: hidden; margin: 1.7rem 0; border: 1px solid var(--line); border-radius: var(--radius); }
.c-recovery-table { width: 100%; border-collapse: collapse; }
.c-recovery-table th, .c-recovery-table td { padding: .9rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.c-recovery-table thead th { font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-2); border-bottom: 1px solid var(--line-bright); white-space: nowrap; font-weight: 400; }
.c-recovery-table tbody th { font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; color: var(--accent); white-space: nowrap; width: 1%; font-weight: 400; }
.c-recovery-table tbody td { color: var(--text); font-size: .88rem; line-height: 1.6; }
.c-recovery-table tbody tr:last-child th, .c-recovery-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  .c-recovery-table, .c-recovery-table tbody, .c-recovery-table tr, .c-recovery-table th, .c-recovery-table td { display: block; width: auto; }
  .c-recovery-table thead { display: none; }
  .c-recovery-table tbody tr { border-bottom: 1px solid var(--line-bright); }
  .c-recovery-table tbody tr:last-child { border-bottom: 0; }
  .c-recovery-table tbody th { color: var(--accent); border-bottom: 0; padding-bottom: .2rem; }
  .c-recovery-table tbody td { border-bottom: 0; padding-top: .2rem; }
}

/* ---- Hero chips as proper pills + remove decorative corner labels (per request) ---- */
.c-hero__corner { display: none !important; }
.c-hero__chips { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.c-chip { display: inline-flex; align-items: center; }

/* ---- Surgeon hero: text/buttons stay light over the dark hero bg (theme-proof incl. light mode) ---- */
.single-surgeon .c-hero .brxe-heading, .single-surgeon .c-hero .c-hero__title, .single-surgeon .c-hero h1, .single-surgeon .c-hero h2 { color: #f1ebe2 !important; }
.single-surgeon .c-hero .c-hero__sub, .single-surgeon .c-hero p { color: #e7dccb !important; }
.single-surgeon .c-hero .t-eyebrow { color: #dca77a !important; }
.single-surgeon .c-hero .c-chip { color: #f1ebe2 !important; border-color: rgba(255,255,255,.3) !important; }
.single-surgeon .c-hero .c-btn--secondary { color: #f1ebe2 !important; border-color: rgba(255,255,255,.32) !important; }
.single-surgeon .c-hero .c-btn--secondary:hover { color: #dca77a !important; border-color: #dca77a !important; }

/* ---- Surgeon content widths (raise specificity so they win over .l-container) ---- */
.l-container.c-surg-c680 { max-width: 680px; margin-left: auto; margin-right: auto; }
.l-container.c-surg-c780 { max-width: 780px; margin-left: auto; margin-right: auto; }

/* ---- Unified main-page hero (index/archive): consistent min-height + full-width inner ---- */
.c-hero { min-height: 40vh; }
.c-page-hero { align-items: stretch; }

.c-hero .brxe-text { display: contents; }

.c-hero .brxe-text > p { display: none; }

.c-hero__inner { position: relative; z-index: 2; }

/* ============ Contact page ============ */
.c-narrow-720 { max-width: 720px; }
.c-narrow-520 { max-width: 520px; }
.is-center { text-align: center; }
.l-section.is-bg2 { background: var(--bg-2); }

/* ---- Forms (Bricks .c-form): 2-col grid, polished fields ---- */
.c-form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.2rem; align-items: start; margin-top: 1rem; }
.c-form .form-group { grid-column: 1 / -1; margin: 0; }
.c-form-steps .form-group:nth-child(1), .c-form-steps .form-group:nth-child(2) { grid-column: span 1; }
.c-form-footer .form-group:nth-child(2), .c-form-footer .form-group:nth-child(3),
.c-form-footer .form-group:nth-child(4), .c-form-footer .form-group:nth-child(5) { grid-column: span 1; }

.c-form .form-group > label, .c-form .form-group > .label {
  display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: .5rem;
}
.c-form input[type=text], .c-form input[type=email], .c-form input[type=tel],
.c-form select, .c-form textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); padding: .85rem 1rem; font-family: var(--sans); font-size: .95rem; transition: border-color .15s;
}
.c-form input::placeholder, .c-form textarea::placeholder { color: var(--text-muted); opacity: .6; }
.c-form input:focus, .c-form select:focus, .c-form textarea:focus { outline: none; border-color: var(--accent); }
.c-form textarea { min-height: 120px; resize: vertical; }
.c-form .options-wrapper { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .55rem 1.6rem; }
.c-form .options-wrapper li { display: flex; align-items: center; gap: .55rem; margin: 0; }
.c-form input[type=radio], .c-form input[type=checkbox] { width: auto; min-width: 0; margin: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.c-form .options-wrapper label { font-family: var(--serif); font-size: 1rem; color: var(--text); text-transform: none; letter-spacing: 0; margin: 0; cursor: pointer; }
.c-form .submit-button-wrapper { margin-top: .3rem; }
.c-form button.bricks-button { background: var(--accent); color: #1a1410; border: 0; border-radius: var(--radius);
  padding: .95rem 1.9rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: filter .2s; }
.c-form button.bricks-button:hover { filter: brightness(1.08); }
@media (max-width: 600px) {
  .c-form { grid-template-columns: 1fr; }
  .c-form-steps .form-group, .c-form-footer .form-group { grid-column: 1 / -1; }
}

/* ---- Quick contact cards: icon circle + hover ---- */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 1.7rem; }
.c-contact-card { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.1rem 1.9rem; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  transition: transform .28s ease, border-color .28s ease; }
.c-contact-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.c-contact-card__icon { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); margin-bottom: 1rem;
  transition: background .28s ease, color .28s ease, transform .28s ease; }
.c-contact-card:hover .c-contact-card__icon { background: var(--accent); color: #1a1410; transform: scale(1.06); }
.c-contact-card__icon svg { width: 24px; height: 24px; display: block; }
.c-contact-card__n { font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.c-contact-card__h { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.55rem; margin: 0 0 .15rem; color: var(--text); }
.c-contact-card__link { font-family: var(--mono); font-size: 1rem; color: var(--text); text-decoration: none; letter-spacing: .03em; word-break: break-word; }
.c-contact-card__link:hover { color: var(--accent); }
.c-contact-card__meta { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin: .55rem 0 0; line-height: 1.7; }
@media (max-width: 820px) { .contact-cards { grid-template-columns: 1fr; } }

/* ---- Map ---- */
.c-map-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); margin: .5rem 0 1.5rem; }
.c-map iframe, .brxe-shortcode iframe { display: block; width: 100%; }

/* ---- Hours: dot-grid pattern + refined panel ---- */
.l-section.is-hours { position: relative; overflow: hidden; }
.l-section.is-hours::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--accent) 1.1px, transparent 1.1px);
  background-size: 26px 26px; opacity: .10;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 45%, #000 25%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 45%, #000 25%, transparent 72%);
}
.l-section.is-hours > * { position: relative; z-index: 1; }
.c-hours { display: flex; flex-direction: column; gap: 0; max-width: 400px; margin: 1.5rem auto 0; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--bg-2) 70%, transparent); overflow: hidden; }
.c-hours__row { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: .95rem 1.4rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.c-hours__row:last-child { border-bottom: 0; }
.c-hours__d { color: var(--text-muted); }
.c-hours__v { color: var(--text); }

/* ---- Misc text ---- */
.c-lede { font-family: var(--serif); font-style: italic; color: var(--text-muted); font-size: 1.05rem; max-width: 60ch; line-height: 1.6; margin: 0 0 1rem; }
.c-note-serif { font-family: var(--serif); font-style: italic; color: var(--text-muted); font-size: .95rem; margin-top: 2rem; line-height: 1.6; }
.c-body { font-family: var(--serif); font-size: 1.05rem; line-height: 1.7; color: var(--text); margin: 0 0 1.2rem; }
.c-mono-meta { font-family: var(--mono); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); line-height: 1.7; }

/* ---- Contact fixes: hover icon visible + custom radios/checkbox (no native flash) ---- */
.c-contact-card__icon svg { color: var(--accent); }
.c-contact-card:hover .c-contact-card__icon svg { color: #0a0807; }

.c-form input[type=radio], .c-form input[type=checkbox] {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; flex: 0 0 auto;
  border: 1.5px solid var(--text-muted); background: transparent; cursor: pointer; position: relative;
  transition: none; box-shadow: none; vertical-align: middle;
}
.c-form input[type=radio] { border-radius: 50%; }
.c-form input[type=checkbox] { border-radius: 4px; }
.c-form input[type=radio]:checked, .c-form input[type=checkbox]:checked { border-color: var(--accent); background: var(--accent); }
.c-form input[type=radio]:checked::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #0a0807; }
.c-form input[type=checkbox]:checked::after { content: ""; position: absolute; left: 5.5px; top: 2px; width: 4px; height: 8px; border: solid #0a0807; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.c-form input[type=radio]:focus-visible, .c-form input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Contact fixes 2: small round radios / square checkbox + clickable cards ---- */
.c-form input[type=radio], .c-form input[type=checkbox] {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; flex: 0 0 16px; aspect-ratio: 1 / 1;
  margin: 0; padding: 0; border: 1.5px solid var(--text-muted); background: transparent; cursor: pointer;
  position: relative; transition: none; box-shadow: none; vertical-align: middle;
}
.c-form input[type=radio] { border-radius: 50%; }
.c-form input[type=checkbox] { border-radius: 3px; }
.c-form input[type=radio]:checked, .c-form input[type=checkbox]:checked { border-color: var(--accent); background: var(--accent); }
.c-form input[type=radio]:checked::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: #0a0807; }
.c-form input[type=checkbox]:checked::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 3.5px; height: 7.5px; border: solid #0a0807; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* clickable contact cards (stretched link over the whole card) */
.c-contact-card { cursor: pointer; }
.c-contact-card__link { position: static; }
.c-contact-card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }

/* ---- Mobile: hide header Call CTA (sticky bar covers it) + room for sticky bar ---- */
@media (max-width: 880px) {
  .c-nav__tools .c-btn--primary { display: none; }
  body { padding-bottom: 62px; }
}

/* ---- Mobile menu styled like local (serif italic links) ---- */
.bricks-mobile-menu-wrapper, .bricks-mobile-menu-wrapper.left, .bricks-mobile-menu-wrapper.right { background: var(--bg-2) !important; }
.bricks-mobile-menu-wrapper li a { font-family: var(--serif) !important; font-style: italic !important; font-weight: 400 !important; font-size: 1.6rem !important; color: var(--text) !important; letter-spacing: 0 !important; text-transform: none !important; }
.bricks-mobile-menu-wrapper li a:hover { color: var(--accent) !important; }
.bricks-mobile-menu-toggle .bar-top, .bricks-mobile-menu-toggle .bar-center, .bricks-mobile-menu-toggle .bar-bottom { background: var(--text); }

body.no-scroll .c-sticky-cta { display: none; }

/* ---- Mobile header: burger far right, theme toggle 30px to its left ---- */
@media (max-width: 880px) {
  .c-nav__logo { margin-right: auto; }
  .c-nav__tools { order: 2; margin-right: 30px; }
  .c-nav__menu { order: 3; }
}

/* ---- Mobile menu: full-screen from the RIGHT, subtle slide animation ---- */
.bricks-mobile-menu-wrapper.left {
  left: auto !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 100vw !important; max-width: 100vw !important; height: 100dvh !important;
  transform: translateX(100%) !important;
  transition: transform .42s cubic-bezier(.4, 0, .2, 1) !important;
  display: flex !important; flex-direction: column !important;
  justify-content: center !important; align-items: center !important;
  padding: 6rem 1.5rem 2rem !important;
}
.bricks-mobile-menu-toggle[aria-expanded="true"] ~ .bricks-mobile-menu-wrapper.left { transform: translateX(0) !important; }
.bricks-mobile-menu-wrapper.left ul.bricks-mobile-menu { display: flex; flex-direction: column; align-items: center; gap: 1.7rem; text-align: center; }
.bricks-mobile-menu-wrapper.left li a { font-size: 2.1rem !important; }
.bricks-mobile-menu-toggle { z-index: 100001 !important; }

/* off-canvas overflow guard: prevent the off-screen mobile menu from extending horizontal scroll */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ---- Animate menu CLOSE (delay visibility:hidden until the slide-out finishes) ---- */
.bricks-mobile-menu-wrapper.left { transition: transform .42s cubic-bezier(.4,0,.2,1), visibility 0s linear .42s !important; }
.bricks-mobile-menu-toggle[aria-expanded="true"] ~ .bricks-mobile-menu-wrapper.left { transition: transform .42s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s !important; }

/* ---- Theme toggle: show one icon per mode (moon in dark, sun in light) ---- */
.colores-mode-toggle { background: none; border: 0; cursor: pointer; color: var(--text); display: inline-flex; align-items: center; padding: 4px; }
.colores-mode-toggle:hover { color: var(--accent); }
.colores-mode-toggle__icon { width: 18px; height: 18px; display: block; }
:root[data-theme="dark"] .colores-mode-toggle__icon.is-sun { display: none; }
:root[data-theme="light"] .colores-mode-toggle__icon.is-moon { display: none; }

/* toggle no margin-right on mobile */
@media (max-width: 880px) { .c-nav__tools { margin-right: 0; } }

/* ---- Mobile menu: brand-focused dark overlay (consistent in dark & light) ---- */
.bricks-mobile-menu-wrapper,
.bricks-mobile-menu-wrapper.left,
.bricks-mobile-menu-wrapper.right {
  background: radial-gradient(ellipse 115% 55% at 50% 0%, rgba(200,147,104,.14), transparent 60%), #0a0807 !important;
}
.bricks-mobile-menu-wrapper li a { color: #f1ebe2 !important; }
.bricks-mobile-menu-wrapper li a:hover { color: #dca77a !important; }
/* close (X) bars + the in-menu toggle always cream so they're visible on the dark menu */
.bricks-mobile-menu-toggle[aria-expanded="true"] .bar-top,
.bricks-mobile-menu-toggle[aria-expanded="true"] .bar-center,
.bricks-mobile-menu-toggle[aria-expanded="true"] .bar-bottom { background: #f1ebe2 !important; }

/* ---- Mobile menu: richer warm brand ambiance (copper top + bronze bottom over onyx) ---- */
.bricks-mobile-menu-wrapper,
.bricks-mobile-menu-wrapper.left,
.bricks-mobile-menu-wrapper.right {
  background:
    radial-gradient(ellipse 140% 60% at 50% -5%, rgba(200,147,104,.26), transparent 55%),
    radial-gradient(ellipse 110% 55% at 50% 105%, rgba(138,94,63,.16), transparent 60%),
    #0c0907 !important;
}

/* ---- Mobile menu: warm espresso brand base + visible champagne glow ---- */
.bricks-mobile-menu-wrapper,
.bricks-mobile-menu-wrapper.left,
.bricks-mobile-menu-wrapper.right {
  background:
    radial-gradient(ellipse 135% 55% at 50% 0%, rgba(220,167,122,.28), transparent 52%),
    radial-gradient(ellipse 120% 50% at 50% 100%, rgba(138,94,63,.20), transparent 58%),
    #150f0a !important;
}

/* ---- Mobile menu: frosted tempered glass, theme-adaptive, fully clouded ---- */
.bricks-mobile-menu-wrapper,
.bricks-mobile-menu-wrapper.left,
.bricks-mobile-menu-wrapper.right {
  background: color-mix(in srgb, var(--bg) 90%, transparent) !important;
  -webkit-backdrop-filter: blur(32px) saturate(118%) !important;
          backdrop-filter: blur(32px) saturate(118%) !important;
}
/* text + close adapt to the theme so they're always readable on the glass */
.bricks-mobile-menu-wrapper li a { color: var(--text) !important; }
.bricks-mobile-menu-wrapper li a:hover { color: var(--accent) !important; }
.bricks-mobile-menu-toggle[aria-expanded="true"] .bar-top,
.bricks-mobile-menu-toggle[aria-expanded="true"] .bar-center,
.bricks-mobile-menu-toggle[aria-expanded="true"] .bar-bottom { background: var(--text) !important; }

/* ---- Mobile menu glass — explicit per-theme rgba (no color-mix, universal) ---- */
.bricks-mobile-menu-wrapper,
.bricks-mobile-menu-wrapper.left,
.bricks-mobile-menu-wrapper.right {
  background: rgba(10, 8, 7, .9) !important;
  -webkit-backdrop-filter: blur(32px) saturate(118%) !important;
          backdrop-filter: blur(32px) saturate(118%) !important;
}
:root[data-theme="light"] .bricks-mobile-menu-wrapper,
:root[data-theme="light"] .bricks-mobile-menu-wrapper.left,
:root[data-theme="light"] .bricks-mobile-menu-wrapper.right {
  background: rgba(241, 235, 226, .9) !important;
}

/* ---- Mobile menu: SOLID opaque theme bg (no backdrop-filter dependency, fully reliable) ---- */
.bricks-mobile-menu-wrapper,
.bricks-mobile-menu-wrapper.left,
.bricks-mobile-menu-wrapper.right {
  background: #0a0807 !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
:root[data-theme="light"] .bricks-mobile-menu-wrapper,
:root[data-theme="light"] .bricks-mobile-menu-wrapper.left,
:root[data-theme="light"] .bricks-mobile-menu-wrapper.right {
  background: #f1ebe2 !important;
}
.bricks-mobile-menu-wrapper li a { color: var(--text) !important; }
.bricks-mobile-menu-wrapper li a:hover { color: var(--accent) !important; }

/* ---- Mobile menu: frosted glass (adapts) + in-menu theme toggle ---- */
.bricks-mobile-menu-wrapper,
.bricks-mobile-menu-wrapper.left,
.bricks-mobile-menu-wrapper.right {
  background: rgba(10, 8, 7, .85) !important;
  -webkit-backdrop-filter: blur(28px) saturate(120%) !important;
          backdrop-filter: blur(28px) saturate(120%) !important;
}
:root[data-theme="light"] .bricks-mobile-menu-wrapper,
:root[data-theme="light"] .bricks-mobile-menu-wrapper.left,
:root[data-theme="light"] .bricks-mobile-menu-wrapper.right {
  background: rgba(241, 235, 226, .85) !important;
}
.bricks-mobile-menu-wrapper li a { color: var(--text) !important; }
.bricks-mobile-menu-wrapper li a:hover { color: var(--accent) !important; }

/* in-menu theme toggle */
.ccs-menu-theme {
  position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .55rem; z-index: 5;
  background: transparent; border: 1px solid var(--line-bright, var(--line)); border-radius: 999px;
  padding: .6rem 1.3rem; color: var(--text); font-family: var(--mono);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.ccs-menu-theme:hover { border-color: var(--accent); color: var(--accent); }
.ccs-menu-theme__i { font-size: 1rem; line-height: 1; }
:root[data-theme="dark"] .ccs-menu-theme__sun { display: none; }
:root[data-theme="light"] .ccs-menu-theme__moon { display: none; }

/* ===== FINAL mobile menu: solid theme bg (follows --bg), full-screen, no glass, no in-menu toggle ===== */
.bricks-mobile-menu-wrapper,
.bricks-mobile-menu-wrapper.left,
.bricks-mobile-menu-wrapper.right {
  background: var(--bg) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 100vw !important; max-width: 100vw !important;
  height: 100vh !important; height: 100dvh !important;
}
.bricks-mobile-menu-wrapper li a { color: var(--text) !important; }
.bricks-mobile-menu-wrapper li a:hover { color: var(--accent) !important; }
.ccs-menu-theme { display: none !important; }

/* light solid override */
:root[data-theme="light"] .bricks-mobile-menu-wrapper,
:root[data-theme="light"] .bricks-mobile-menu-wrapper.left,
:root[data-theme="light"] .bricks-mobile-menu-wrapper.right { background: var(--bg) !important; }

/* ===== FIX: Bricks mobile-menu ::before overlay (was fixed gray rgb(35,40,45)) → follow theme ===== */
.bricks-mobile-menu-wrapper::before,
.bricks-mobile-menu-wrapper.left::before,
.bricks-mobile-menu-wrapper.right::before {
  background: var(--bg) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* menu fullscreen reinforce */
.bricks-mobile-menu-wrapper, .bricks-mobile-menu-wrapper.left, .bricks-mobile-menu-wrapper.right { min-height: 100vh !important; min-height: 100dvh !important; }

/* ===== FIX: .c-nav backdrop-filter created a containing block that broke the mobile menu's fixed positioning.
   Move the blur to a ::before pseudo so .c-nav no longer traps fixed descendants (menu now viewport-fixed). ===== */
.c-nav {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  position: sticky;
}
.c-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
}