/* ==========================================================================
   Components
   ========================================================================== */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.95em 1.9em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--color-primary);
  color: #0a0b0a;
  box-shadow: 0 0 0 rgba(166,241,31,0);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 6px 24px -6px rgba(166, 241, 31, 0.45);
}
.btn-outline {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: var(--color-text);
}
.btn-block { width: 100%; }
.btn-sm { padding: 0.65em 1.3em; font-size: 0.78rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* ---- Top announcement bar ---- */
.topbar {
  height: var(--bar-h);
  background: #060706;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  font-size: 0.78rem;
  color: var(--color-muted);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar a { color: var(--color-muted); transition: color var(--dur-fast); }
.topbar a:hover { color: var(--color-primary); }
.topbar__promo { color: var(--color-primary); font-weight: 600; }
.topbar__right { display: flex; align-items: center; gap: 1.4rem; }
@media (max-width: 700px) { .topbar__promo-full { display: none; } }

/* ---- Navigation ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 9, 8, 0.97);
  border-bottom: 1px solid var(--color-border);
}
/* NOTE: intentionally no backdrop-filter/transform here — either one creates a
   new containing block for position:fixed descendants (the mobile nav panel
   below), which broke the burger menu by computing its position relative to
   this ~116px header instead of the viewport. */
.navbar { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand__mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--color-primary);
  flex-shrink: 0;
}
.brand__text { line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.brand__sub {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--color-primary);
  text-transform: uppercase;
  margin-top: 2px;
}
.nav-links { display: flex; align-items: center; gap: 2.1rem; }
.nav-links .mobile-cta { display: none; }
.nav-links a {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  position: relative;
  padding-block: 6px;
  transition: color var(--dur-fast);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--color-primary);
  transition: width var(--dur) var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-text); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; }
.navbar__actions { display: flex; align-items: center; gap: 1rem; }
.navbar__phone { display: flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; color: var(--color-muted); }
.navbar__phone svg { width: 16px; height: 16px; color: var(--color-primary); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  position: relative;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 11px; right: 11px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle span { top: 20px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); background: var(--color-primary); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); background: var(--color-primary); }

@media (max-width: 960px) {
  .nav-links, .navbar__phone { display: none; }
  .nav-toggle { display: block; }
  .mobile-panel.is-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    position: fixed;
    top: calc(var(--nav-h) + var(--bar-h));
    left: 0; right: 0; bottom: 0;
    background: var(--color-bg);
    padding: 1.5rem var(--content-pad) 2rem;
    overflow-y: auto;
  }
  .mobile-panel.is-open .nav-links a { width: 100%; padding-block: 0.9rem; border-bottom: 1px solid var(--color-border); font-size: 1rem; }
  .mobile-panel.is-open .navbar__phone { display: flex; padding-top: 1rem; }
  .mobile-panel.is-open .nav-links .mobile-cta { display: flex; margin-top: 1.2rem; }

  /* The header's own Book Now pill crowds the brand + toggle on narrow
     phones (320–400px) and can push the toggle button out of easy reach.
     The mobile sticky bar (bottom of screen) and the button inside the
     flyout menu below already cover booking, so hide the header pill here. */
  .navbar__actions > .btn-primary { display: none; }
}

@media (max-width: 400px) {
  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: 0.88rem; }
  .brand__sub { font-size: 0.56rem; }
}

/* ---- Cards ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--color-border-strong); }

/* Quick service tiles */
.service-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
  padding: 1.6rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.service-tile:hover { border-color: var(--color-primary-dim); transform: translateY(-3px); }
.service-tile__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  color: var(--color-primary);
}
.service-tile__icon svg { width: 22px; height: 22px; }
.service-tile__label { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* Trust bar */
.trust-bar { border-block: 1px solid var(--color-border); background: var(--color-bg-alt); }
.trust-bar__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding-block: 1.6rem; }
.trust-stat { display: flex; align-items: baseline; gap: 0.5rem; }
.trust-stat strong { font-family: var(--font-display); font-size: var(--step-2); color: var(--color-primary); }
.trust-stat span { font-size: 0.8rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* Checklist */
.checklist li { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.85rem; color: var(--color-text); }
.checklist svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-primary); margin-top: 2px; }

/* Service card (full) */
.service-card { overflow: hidden; display: flex; flex-direction: column; }
.service-card__img { aspect-ratio: 4/3; overflow: hidden; background: var(--color-surface-2); }
.service-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.service-card:hover .service-card__img img { transform: scale(1.05); }
.service-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }
.service-card__features { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }
.service-card__features li { font-size: 0.86rem; color: var(--color-muted); display: flex; gap: 0.5rem; }
.service-card__features li::before { content: "—"; color: var(--color-primary); }
.service-card__actions { margin-top: auto; display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.price-card { padding: 2rem 1.7rem; display: flex; flex-direction: column; position: relative; }
.price-card--featured { border-color: var(--color-primary); background: linear-gradient(180deg, rgba(166,241,31,0.07), var(--color-surface) 40%); }
.price-card__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--color-primary); color: #0a0b0a;
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.08em;
  padding: 0.35em 1em; border-radius: 999px; text-transform: uppercase;
}
.price-card__name { font-size: var(--step-1); margin-bottom: 0.2em; }
.price-card__desc { font-size: 0.86rem; margin-bottom: 1.1rem; }
.price-card__amount { font-family: var(--font-display); font-size: var(--step-4); color: var(--color-primary); margin-bottom: 0.2rem; line-height: 1; }
.price-card__amount sub { font-family: var(--font-body); font-size: 0.9rem; color: var(--color-muted); }
.price-card__note { font-size: 0.76rem; color: var(--color-muted-2); margin-bottom: 1.3rem; }
.price-card__list { flex: 1; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; }
.price-card__list li { font-size: 0.88rem; color: var(--color-text); display: flex; gap: 0.55rem; }
.price-card__list li::before { content: "✓"; color: var(--color-primary); font-weight: 700; }

.addons-panel { padding: 1.8rem; }
.addons-panel h3 { font-size: var(--step-1); margin-bottom: 1rem; }
.addons-panel ul { display: flex; flex-direction: column; }
.addons-panel li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 0.65rem;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.88rem;
}
.addons-panel li span:first-child { color: var(--color-text); }
.addons-panel li span:last-child { color: var(--color-primary); font-family: var(--font-display); }
.addons-panel__discount {
  margin-top: 1.2rem;
  background: rgba(166,241,31,0.08);
  border: 1px solid var(--color-primary-dim);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  font-size: 0.82rem;
  color: var(--color-primary);
  text-align: center;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Before / after slider */
.ba-slider {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  max-width: 900px;
  margin-inline: auto;
  user-select: none;
  touch-action: pan-y;
}
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-slider__after { z-index: 1; }
/* The "before" image is full-size and full-width at all times — we reveal
   only the left portion with clip-path (updated by JS as the handle moves)
   instead of shrinking a container's width. This keeps the image correctly
   scaled to the slider at every viewport size, including on mobile, where a
   fixed pixel-width image previously broke the comparison. */
.ba-slider__before-wrap { position: absolute; inset: 0; z-index: 2; overflow: hidden; clip-path: inset(0 50% 0 0); }
.ba-slider__handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 3px; background: var(--color-primary);
  z-index: 3; cursor: ew-resize; transform: translateX(-50%);
}
.ba-slider__handle::before {
  content: "";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 6px rgba(166,241,31,0.18);
}
.ba-slider__handle::after {
  content: "◂ ▸";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 0.8rem; color: #0a0b0a; z-index: 1; letter-spacing: 2px;
}
.ba-slider__label { position: absolute; top: 14px; z-index: 4; font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4em 0.8em; background: rgba(10,11,10,0.7); border: 1px solid var(--color-border-strong); border-radius: 3px; }
.ba-slider__label--before { left: 14px; }
.ba-slider__label--after { right: 14px; }

/* Gallery */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }
.gallery-filters button {
  background: transparent; border: 1px solid var(--color-border-strong);
  color: var(--color-muted); padding: 0.55em 1.2em; border-radius: 999px;
  font-size: 0.8rem; letter-spacing: 0.03em; cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.gallery-filters button:hover { color: var(--color-text); border-color: var(--color-text); }
.gallery-filters button.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #0a0b0a; font-weight: 600; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
@media (max-width: 980px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-item {
  position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius-sm);
  cursor: pointer; border: 1px solid var(--color-border);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item__tag {
  position: absolute; bottom: 8px; left: 8px;
  font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(10,11,10,0.75); padding: 0.3em 0.6em; border-radius: 3px;
}
.gallery-item.is-hidden { display: none; }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(6,7,6,0.94);
  display: none; align-items: center; justify-content: center;
  padding: 2rem;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(90vw, 1000px); max-height: 82vh; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute; background: rgba(255,255,255,0.06); border: 1px solid var(--color-border-strong);
  color: var(--color-text); width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
}
.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { border-color: var(--color-primary); color: var(--color-primary); }
.lightbox__caption { position: absolute; bottom: 1.5rem; left: 0; right: 0; text-align: center; font-size: 0.85rem; color: var(--color-muted); }

/* Process steps */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }
.process-step { padding: 1.8rem 1.5rem; }
.process-step__num { font-family: var(--font-display); font-size: var(--step-3); color: var(--color-primary); opacity: 0.5; margin-bottom: 0.3rem; }
.process-step h4 { margin-bottom: 0.4rem; }
.process-step p { font-size: 0.88rem; margin-bottom: 0; }

/* Reviews */
.reviews-track-wrap { overflow: hidden; }
.reviews-track { display: flex; gap: 1.25rem; transition: transform var(--dur-slow) var(--ease); }
.review-card { flex: 0 0 100%; max-width: 100%; padding: 1.8rem; display: flex; flex-direction: column; gap: 0.9rem; }
@media (min-width: 720px) { .review-card { flex: 0 0 calc(50% - 0.625rem); } }
@media (min-width: 1080px) { .review-card { flex: 0 0 calc(33.333% - 0.84rem); } }
.review-card__stars { color: var(--color-primary); letter-spacing: 2px; font-size: 0.95rem; }
.review-card__text { color: var(--color-text); font-size: 0.92rem; margin-bottom: 0; }
.review-card__meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.review-card__name { font-weight: 600; font-size: 0.86rem; }
.review-card__platform { font-size: 0.72rem; color: var(--color-muted-2); text-transform: uppercase; letter-spacing: 0.05em; }
.reviews-controls { display: flex; justify-content: center; gap: 0.8rem; margin-top: 2rem; }
.reviews-controls button {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-border-strong);
  background: transparent; color: var(--color-text); cursor: pointer;
}
.reviews-controls button:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Service area */
.area-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.area-tags span { border: 1px solid var(--color-border-strong); padding: 0.5em 1em; border-radius: 999px; font-size: 0.82rem; color: var(--color-muted); }
.area-map { aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }
.area-map iframe { width: 100%; height: 100%; border: 0; }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item__q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.3rem 0; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.01em; color: var(--color-text);
}
.faq-item__q svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--color-primary); transition: transform var(--dur) var(--ease); }
.faq-item[data-open="true"] .faq-item__q svg { transform: rotate(45deg); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); }
.faq-item__a p { padding-bottom: 1.3rem; margin-bottom: 0; }

/* Forms */
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-size: 0.82rem; margin-bottom: 0.45rem; color: var(--color-text); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--color-surface-2); border: 1px solid var(--color-border-strong);
  color: var(--color-text); padding: 0.85em 1em; border-radius: var(--radius-sm); font: inherit; font-size: 0.92rem;
  transition: border-color var(--dur-fast);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-primary); outline: none; }
.field textarea { resize: vertical; min-height: 100px; }
.field__error { color: var(--color-danger); font-size: 0.78rem; margin-top: 0.35rem; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-danger); }
.field.has-error .field__error { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.form-status { padding: 1rem 1.2rem; border-radius: var(--radius-sm); font-size: 0.88rem; margin-top: 1rem; display: none; }
.form-status.is-success { display: block; background: rgba(166,241,31,0.1); border: 1px solid var(--color-primary-dim); color: var(--color-primary); }
.form-status.is-error { display: block; background: rgba(239,68,68,0.1); border: 1px solid var(--color-danger); color: #f6a3a3; }
.form-status.is-loading { display: block; background: var(--color-surface-2); border: 1px solid var(--color-border-strong); color: var(--color-muted); }

/* Footer */
.site-footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding-block: 3.5rem 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; margin-bottom: 2.5rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h5 { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text); margin-bottom: 1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a, .footer-col li { font-size: 0.86rem; color: var(--color-muted); }
.footer-col a:hover { color: var(--color-primary); }
.footer-brand p { font-size: 0.86rem; max-width: 30ch; }
.footer-social { display: flex; gap: 0.7rem; margin-top: 1rem; }
.footer-social a { width: 36px; height: 36px; border: 1px solid var(--color-border-strong); border-radius: 50%; display: grid; place-items: center; }
.footer-social a:hover { border-color: var(--color-primary); }
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom { border-top: 1px solid var(--color-border); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; font-size: 0.78rem; color: var(--color-muted-2); }
.footer-bottom a { color: var(--color-muted-2); }
.footer-bottom a:hover { color: var(--color-primary); }

/* Back to top */
.back-to-top {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--color-primary); color: #0a0b0a;
  border: none; display: grid; place-items: center; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: all var(--dur) var(--ease);
  box-shadow: 0 6px 20px -4px rgba(166,241,31,0.4);
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Mobile sticky CTA */
.mobile-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-border);
  background: #0a0b0a;
}
.mobile-sticky-cta a { padding: 0.95rem; text-align: center; font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; }
.mobile-sticky-cta a:first-child { background: var(--color-primary); color: #0a0b0a; }
.mobile-sticky-cta a:last-child { background: var(--color-surface); color: var(--color-text); display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
@media (max-width: 720px) {
  .mobile-sticky-cta { display: grid; }
  body { padding-bottom: 62px; }
  /* Keep the back-to-top button from overlapping the sticky Book/Call bar */
  .back-to-top { bottom: calc(62px + 1rem); }
}

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.4em 0.9em; border: 1px solid var(--color-border-strong); border-radius: 999px; color: var(--color-muted); }
.badge svg { width: 14px; height: 14px; color: var(--color-primary); }

/* Breadcrumb */
.breadcrumb { font-size: 0.8rem; color: var(--color-muted-2); padding-block: 1.2rem; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb span { margin-inline: 0.5em; }

/* Page hero (internal pages) */
.page-hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--color-border); background: linear-gradient(180deg, rgba(166,241,31,0.06), transparent); }
.page-hero p { margin-top: 0.6rem; }