/* ==========================================================================
   HireJuno — css/service.css
   The 14 marketing service pages (/services/<slug>).

   LOAD ORDER (matches tokens.css contract):
     brand.css -> redesign.css -> megamenu.css -> service.css -> tokens.css -> motion.css

   service.css loads BEFORE tokens.css on purpose: tokens.css re-values the
   legacy brand tokens in dark mode and must win. Everything here is written
   against the semantic --hj-* layer so both modes come out right for free.

   Owned by the service-page generator (scripts/generate-service-pages.mjs).
   Every class is prefixed `svc-` so nothing here can leak into another page.

   MOTION BUDGET: 150-300ms, transform/opacity/colour only, and every single
   transition is disabled under prefers-reduced-motion at the bottom of this
   file. No layout-shifting hovers anywhere.
   ========================================================================== */

/* ---------- local aliases so the file reads cleanly ---------- */
.svc-page {
  --svc-dur:      var(--hj-dur, 200ms);
  --svc-dur-fast: var(--hj-dur-fast, 150ms);
  --svc-ease:     var(--hj-ease, cubic-bezier(.22, .61, .36, 1));
  --svc-ease-pop: var(--hj-ease-emphasis, cubic-bezier(.2, .7, .3, 1));
  --svc-radius:   var(--hj-radius-lg, 16px);
  --svc-star:     #F5A623;

  background: var(--hj-bg, #FAF8F3);
  color: var(--hj-fg, #1B2A41);
}

/* The page must never scroll sideways, at any width. */
.svc-page, .svc-page * { min-width: 0; }

.svc-shell {
  width: 100%;
  max-width: var(--hj-container, 1160px);
  margin-inline: auto;
  padding-inline: var(--hj-gutter, 16px);
}
@media (min-width: 768px) { .svc-page { --hj-gutter: 24px; } }
@media (min-width: 1440px) { .svc-page { --hj-gutter: 32px; } }

.svc-band { padding-block: var(--hj-section, clamp(3.5rem, 2.62rem + 3.756vw, 6rem)); }
.svc-band--sm { padding-block: var(--hj-section-sm, clamp(2.5rem, 1.972rem + 2.254vw, 4rem)); }
.svc-band--sunken { background: var(--hj-surface-sunken, #F3EFE6); }
.svc-band--surface { background: var(--hj-surface, #fff); }

.svc-head { max-width: 46rem; margin-block-end: var(--hj-gap-lg, 32px); }
.svc-head h2 {
  font-size: var(--hj-text-3xl, clamp(1.75rem, 1.53rem + .939vw, 2.375rem));
  line-height: var(--hj-leading-tight, 1.18);
  letter-spacing: var(--hj-tracking-tight, -.02em);
  margin: 0 0 var(--hj-space-sm, 12px);
  color: var(--hj-fg);
}
.svc-head p {
  margin: 0;
  color: var(--hj-fg-muted, #4A5568);
  font-size: var(--hj-text-md, 1.0625rem);
  line-height: var(--hj-leading-relaxed, 1.7);
  text-wrap: pretty;
}
.svc-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--hj-font-display); font-weight: 700;
  font-size: var(--hj-text-xs, .8125rem);
  letter-spacing: var(--hj-tracking-caps, .06em); text-transform: uppercase;
  color: var(--hj-accent-strong, #1F6B33);
  margin-block-end: var(--hj-space-sm, 12px);
}
.svc-eyebrow svg { width: 15px; height: 15px; }


/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.svc-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-block: var(--hj-space-md, 16px) 0;
  font-size: var(--hj-text-sm, .9375rem);
  color: var(--hj-fg-subtle, #5F6B7F);
}
.svc-crumb a { color: var(--hj-fg-muted, #4A5568); text-decoration: none; border-radius: 4px; }
.svc-crumb a:hover { color: var(--hj-accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.svc-crumb svg { width: 15px; height: 15px; color: var(--hj-fg-subtle); flex: none; }
.svc-crumb [aria-current] { color: var(--hj-fg); font-weight: 600; }


/* ==========================================================================
   HERO
   ========================================================================== */
.svc-hero { padding-block: var(--hj-space-lg, 24px) var(--hj-section-sm, 48px); }
.svc-hero__inner { display: grid; gap: var(--hj-gap-lg, 32px); align-items: start; }
@media (min-width: 960px) {
  .svc-hero__inner { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
}

.svc-hero h1 {
  font-size: var(--hj-text-4xl, clamp(2.125rem, 1.817rem + 1.315vw, 3rem));
  line-height: var(--hj-leading-display, 1.05);
  letter-spacing: var(--hj-tracking-tighter, -.03em);
  margin: 0 0 var(--hj-space-sm, 12px);
  color: var(--hj-fg);
  text-wrap: balance;
}
.svc-hero h1 .in { color: var(--hj-accent-strong, #1F6B33); }
.svc-hero__tagline {
  font-size: var(--hj-text-lg, 1.3125rem);
  line-height: var(--hj-leading-snug, 1.32);
  color: var(--hj-fg-muted);
  margin: 0 0 var(--hj-space-md, 16px);
  max-width: 34ch;
}
.svc-hero__desc {
  font-size: var(--hj-text-base, 1rem);
  line-height: var(--hj-leading-relaxed, 1.7);
  color: var(--hj-fg-muted);
  margin: 0 0 var(--hj-space-lg, 24px);
  max-width: 52ch;
}

/* live rating strip — replaced by real data, skeleton until then */
.svc-ratingline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-block-end: var(--hj-space-md, 16px);
  min-height: 30px;
}
.svc-ratingline a { color: inherit; text-decoration: none; }
.svc-ratingline a:hover .svc-rating__count { text-decoration: underline; text-underline-offset: 3px; }
.svc-rating {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--hj-text-sm, .9375rem);
}
.svc-rating__num {
  font-family: var(--hj-font-display); font-weight: 800;
  font-size: var(--hj-text-md, 1.0625rem); color: var(--hj-fg);
  font-variant-numeric: tabular-nums;
}
.svc-rating__count { color: var(--hj-fg-muted); }

/* 5-star meter: two stacked rows, the filled row clipped to the score. */
.svc-stars { position: relative; display: inline-block; line-height: 0; flex: none; }
.svc-stars__row { display: flex; gap: 2px; }
.svc-stars__row svg { width: var(--svc-star-size, 17px); height: var(--svc-star-size, 17px); flex: none; }
.svc-stars__row--empty svg { color: var(--hj-border-strong, #D8D4C9); }
.svc-stars__row--full {
  position: absolute; inset: 0 auto 0 0; overflow: hidden;
  width: calc(var(--svc-fill, 0) * 100%);
}
.svc-stars__row--full svg { color: var(--svc-star); }
.svc-stars--lg { --svc-star-size: 22px; }

.svc-hero__points { list-style: none; margin: 0 0 var(--hj-space-lg, 24px); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-hero__points li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--hj-radius-pill, 999px);
  background: var(--hj-surface, #fff); border: 1px solid var(--hj-border, #E7E4DC);
  font-size: var(--hj-text-sm, .9375rem); font-weight: 600; color: var(--hj-fg);
}
.svc-hero__points svg { width: 15px; height: 15px; color: var(--hj-accent-strong); flex: none; }

.svc-priceline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin-block-end: var(--hj-space-lg, 24px);
}
.svc-priceline .from {
  font-family: var(--hj-font-display); font-size: var(--hj-text-sm, .9375rem);
  font-weight: 600; color: var(--hj-fg-muted);
}
.svc-priceline .from b {
  font-size: var(--hj-text-2xl, 1.875rem); color: var(--hj-fg); margin-inline-start: 5px;
  font-variant-numeric: tabular-nums;
}
.svc-priceline .note { font-size: var(--hj-text-sm, .9375rem); color: var(--hj-fg-subtle); }

.svc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-end: var(--hj-space-md, 16px); }
.svc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--hj-radius-md, 12px);
  font-family: var(--hj-font-display); font-weight: 700; font-size: var(--hj-text-base, 1rem);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  min-height: 48px;
  transition: background-color var(--svc-dur-fast) linear,
              color var(--svc-dur-fast) linear,
              border-color var(--svc-dur-fast) linear,
              box-shadow var(--svc-dur) var(--svc-ease),
              scale var(--svc-dur-fast) var(--svc-ease-pop);
}
.svc-btn svg { width: 18px; height: 18px; flex: none; transition: translate var(--svc-dur) var(--svc-ease-pop); }
.svc-btn:active { scale: .975; }
.svc-btn--primary {
  background: var(--hj-accent-strong, #1F6B33); color: var(--hj-on-accent, #fff);
  box-shadow: var(--hj-elev-2);
}
.svc-btn--primary:hover { background: var(--hj-accent-deep, #14532D); box-shadow: var(--hj-elev-3); text-decoration: none; }
.svc-btn--primary:hover svg { translate: 3px 0; }
.svc-btn--ghost {
  background: transparent; color: var(--hj-fg);
  border-color: var(--hj-border-interactive, #7E8794);
}
.svc-btn--ghost:hover { background: var(--hj-surface, #fff); border-color: var(--hj-fg-muted); text-decoration: none; }
.svc-btn--block { width: 100%; }

.svc-hero__fine { font-size: var(--hj-text-sm, .9375rem); color: var(--hj-fg-subtle); margin: 0; }

/* photo mosaic — real service imagery */
.svc-mosaic {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, auto);
}
.svc-mosaic__cell {
  position: relative; overflow: hidden;
  border-radius: var(--svc-radius);
  background: var(--hj-surface-sunken, #F3EFE6);
  border: 1px solid var(--hj-border);
  aspect-ratio: 4 / 3;
}
.svc-mosaic__cell:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
/* The first cell spans both columns, so an EVEN-indexed last cell would sit
   alone with a hole beside it. Let it span instead — services ship 2-5 photos
   and every count has to look deliberate. */
.svc-mosaic__cell:last-child:nth-child(even) { grid-column: span 2; aspect-ratio: 2 / 1; }
.svc-mosaic__cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 300ms var(--svc-ease); }
.svc-mosaic__cell:hover img { scale: 1.04; }
.svc-mosaic__tag {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--hj-radius-pill, 999px);
  background: rgb(255 255 255 / .92); color: #1B2A41;
  font-size: var(--hj-text-xs, .8125rem); font-weight: 700;
  backdrop-filter: blur(6px);
}
.svc-mosaic__tag svg { width: 13px; height: 13px; color: #1F6B33; }


/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.svc-trust {
  background: var(--hj-surface, #fff);
  border-block: 1px solid var(--hj-border, #E7E4DC);
}
.svc-trust__inner {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  justify-content: center; padding-block: 15px;
}
.svc-trust__item {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--hj-text-sm, .9375rem); font-weight: 600; color: var(--hj-fg);
}
.svc-trust__item svg { width: 19px; height: 19px; color: var(--hj-accent-strong); flex: none; }


/* ==========================================================================
   MAIN LAYOUT — content + sticky booking aside
   ========================================================================== */
.svc-layout { display: grid; gap: var(--hj-gap-lg, 32px); align-items: start; }
@media (min-width: 1080px) {
  .svc-layout { grid-template-columns: minmax(0, 1fr) 372px; gap: clamp(32px, 3.5vw, 56px); }
  .svc-aside { position: sticky; top: 88px; }
}
.svc-main > * + * { margin-block-start: var(--hj-section-sm, 48px); }


/* ---------- generic content blocks ---------- */
.svc-block__title {
  font-family: var(--hj-font-display); font-weight: 700;
  font-size: var(--hj-text-2xl, 1.875rem); line-height: var(--hj-leading-tight, 1.18);
  letter-spacing: var(--hj-tracking-tight, -.02em);
  margin: 0 0 var(--hj-space-sm, 12px); color: var(--hj-fg);
}
.svc-block__intro {
  margin: 0 0 var(--hj-space-lg, 24px); color: var(--hj-fg-muted);
  font-size: var(--hj-text-base, 1rem); line-height: var(--hj-leading-relaxed, 1.7);
  max-width: 62ch; text-wrap: pretty;
}

/* checklist grid */
.svc-incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 620px) { .svc-incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-incl li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--hj-radius-md, 12px);
  background: var(--hj-surface, #fff); border: 1px solid var(--hj-border);
  font-size: var(--hj-text-sm, .9375rem); line-height: var(--hj-leading-normal, 1.55);
  color: var(--hj-fg);
}
.svc-incl svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--hj-accent-strong); }

/* priced-extra rows */
.svc-extras { display: grid; gap: 8px; }
.svc-extra {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 16px; border-radius: var(--hj-radius-md, 12px);
  background: var(--hj-surface, #fff); border: 1px solid var(--hj-border);
}
.svc-extra__label { font-size: var(--hj-text-sm, .9375rem); font-weight: 600; color: var(--hj-fg); }
.svc-extra__meta { display: block; font-weight: 400; font-size: var(--hj-text-xs, .8125rem); color: var(--hj-fg-subtle); margin-top: 2px; }
.svc-extra__price {
  font-family: var(--hj-font-display); font-weight: 700; white-space: nowrap;
  font-size: var(--hj-text-sm, .9375rem); color: var(--hj-fg);
  font-variant-numeric: tabular-nums;
}

/* pricing explainer + worked example */
.svc-formula { display: grid; gap: 10px; margin-block-end: var(--hj-space-lg, 24px); }
.svc-formula__row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--hj-radius-md, 12px);
  background: var(--hj-surface, #fff); border: 1px solid var(--hj-border);
}
.svc-formula__n {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--hj-accent-soft, #E9F5EC); color: var(--hj-accent-strong);
  font-family: var(--hj-font-display); font-weight: 800; font-size: .8125rem;
}
.svc-formula__row b { display: block; font-size: var(--hj-text-sm, .9375rem); color: var(--hj-fg); }
.svc-formula__row span { display: block; font-size: var(--hj-text-sm, .9375rem); color: var(--hj-fg-muted); margin-top: 2px; }

.svc-example {
  border: 1px solid var(--hj-border); border-radius: var(--svc-radius);
  background: var(--hj-surface, #fff); overflow: hidden;
}
.svc-example__head {
  padding: 14px 18px; border-block-end: 1px solid var(--hj-border);
  background: var(--hj-surface-sunken, #F3EFE6);
}
.svc-example__head b { font-family: var(--hj-font-display); font-size: var(--hj-text-base, 1rem); color: var(--hj-fg); }
.svc-example__head span { display: block; font-size: var(--hj-text-xs, .8125rem); color: var(--hj-fg-subtle); margin-top: 2px; }
.svc-example__rows { padding: 6px 18px 14px; }
.svc-example__row {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding-block: 9px; border-block-end: 1px dashed var(--hj-border);
  font-size: var(--hj-text-sm, .9375rem);
}
.svc-example__row:last-child { border-block-end: 0; }
.svc-example__row span:first-child { color: var(--hj-fg-muted); }
.svc-example__row span:last-child { font-variant-numeric: tabular-nums; color: var(--hj-fg); font-weight: 600; white-space: nowrap; }
.svc-example__row--total {
  border-block-start: 1.5px solid var(--hj-border-strong); border-block-end: 0;
  margin-block-start: 4px; padding-block-start: 13px;
}
.svc-example__row--total span { font-family: var(--hj-font-display); font-size: var(--hj-text-lg, 1.3125rem); font-weight: 800; color: var(--hj-fg); }

/* numbered "on the day" steps */
.svc-steps { list-style: none; margin: 0; padding: 0; counter-reset: svcstep; display: grid; gap: 2px; }
.svc-steps li {
  position: relative; counter-increment: svcstep;
  padding: 0 0 22px 46px;
}
.svc-steps li::before {
  content: counter(svcstep);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hj-accent-strong); color: var(--hj-on-accent, #fff);
  font-family: var(--hj-font-display); font-weight: 800; font-size: .8125rem;
}
.svc-steps li::after {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 2px;
  background: var(--hj-border); border-radius: 2px;
}
.svc-steps li:last-child { padding-bottom: 0; }
.svc-steps li:last-child::after { display: none; }
.svc-steps b { display: block; font-family: var(--hj-font-display); font-size: var(--hj-text-base, 1rem); color: var(--hj-fg); margin-bottom: 3px; }
.svc-steps p { margin: 0; font-size: var(--hj-text-sm, .9375rem); line-height: var(--hj-leading-relaxed, 1.7); color: var(--hj-fg-muted); }

/* duration callout */
.svc-callout {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--svc-radius);
  background: var(--hj-accent-soft, #E9F5EC);
  border: 1px solid rgb(46 139 68 / .22);
}
.svc-callout svg { width: 21px; height: 21px; flex: none; color: var(--hj-accent-strong); margin-top: 1px; }
.svc-callout b { display: block; font-family: var(--hj-font-display); font-size: var(--hj-text-base, 1rem); color: var(--hj-fg); }
.svc-callout p { margin: 3px 0 0; font-size: var(--hj-text-sm, .9375rem); line-height: var(--hj-leading-normal, 1.55); color: var(--hj-fg-muted); }

/* prep checklist */
.svc-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.svc-checklist li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: var(--hj-text-sm, .9375rem); line-height: var(--hj-leading-relaxed, 1.7);
  color: var(--hj-fg-muted);
}
.svc-checklist svg { width: 19px; height: 19px; flex: none; margin-top: 5px; color: var(--hj-accent-strong); }

/* fact / problem cards */
.svc-facts { display: grid; gap: 12px; }
@media (min-width: 620px) { .svc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-fact {
  padding: 16px 18px; border-radius: var(--hj-radius-md, 12px);
  background: var(--hj-surface, #fff); border: 1px solid var(--hj-border);
  transition: border-color var(--svc-dur-fast) linear, box-shadow var(--svc-dur) var(--svc-ease);
}
.svc-fact:hover { border-color: var(--hj-border-strong); box-shadow: var(--hj-elev-2); }
.svc-fact b { display: block; font-family: var(--hj-font-display); font-size: var(--hj-text-base, 1rem); color: var(--hj-fg); margin-bottom: 4px; text-transform: capitalize; }
.svc-fact p { margin: 0; font-size: var(--hj-text-sm, .9375rem); line-height: var(--hj-leading-relaxed, 1.7); color: var(--hj-fg-muted); }


/* ==========================================================================
   PRICE CALCULATOR (the sticky aside)
   ========================================================================== */
.svc-calc {
  background: var(--hj-surface, #fff);
  border: 1px solid var(--hj-border-strong, #D8D4C9);
  border-radius: var(--hj-radius-xl, 20px);
  box-shadow: var(--hj-elev-3);
  overflow: hidden;
}
.svc-calc__head {
  padding: 18px 20px 14px;
  border-block-end: 1px solid var(--hj-border);
}
.svc-calc__head h2 {
  margin: 0 0 3px; font-family: var(--hj-font-display); font-weight: 700;
  font-size: var(--hj-text-lg, 1.3125rem); color: var(--hj-fg);
}
.svc-calc__head p { margin: 0; font-size: var(--hj-text-xs, .8125rem); color: var(--hj-fg-subtle); }
/* No scrollbar. The panel used to cap at min(52vh, 460px) and scroll, which
   put a second scroll region inside the page and hid controls behind it. The
   cap is gone; the height is controlled instead by tightening the rhythm and
   collapsing the extras behind a disclosure. */
.svc-calc__body { padding: 14px 18px; display: grid; gap: 12px; }

.svc-ctrl__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: var(--hj-text-sm, .9375rem); font-weight: 600; color: var(--hj-fg);
  margin-block-end: 8px;
}
.svc-ctrl__hint { font-size: var(--hj-text-xs, .8125rem); font-weight: 400; color: var(--hj-fg-subtle); text-align: right; }

/* stepper */
.svc-counter {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--hj-border-interactive, #7E8794);
  border-radius: var(--hj-radius-md, 12px);
  padding: 4px; width: fit-content;
  background: var(--hj-surface);
}
.svc-counter button {
  width: 40px; height: 40px; border-radius: var(--hj-radius-sm, 8px);
  border: 0; background: var(--hj-surface-sunken, #F3EFE6); color: var(--hj-fg);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--svc-dur-fast) linear, scale var(--svc-dur-fast) var(--svc-ease-pop);
}
.svc-counter button:hover:not(:disabled) { background: var(--hj-accent-soft, #E9F5EC); color: var(--hj-accent-strong); }
.svc-counter button:active:not(:disabled) { scale: .93; }
.svc-counter button:disabled { opacity: .35; cursor: not-allowed; }
.svc-counter button svg { width: 17px; height: 17px; }
.svc-counter output {
  /* <output> is display:inline by default, and an inline box ignores both
     min-width and text-align — which is why the number sat hard against the
     minus button instead of centred between the two. inline-grid gives it a
     box that can actually take a width, and place-items centres it on both
     axes so it stays put as the value goes from 1 to 10. */
  display: inline-grid; place-items: center;
  min-width: 54px; height: 40px;
  font-family: var(--hj-font-display); font-weight: 700; font-size: var(--hj-text-base, 1rem);
  color: var(--hj-fg); font-variant-numeric: tabular-nums;
}

/* segmented choice */
.svc-seg { display: flex; flex-wrap: wrap; gap: 7px; border: 0; padding: 0; margin: 0; }
.svc-seg legend { padding: 0; }
.svc-seg__opt { position: relative; }
.svc-seg__opt input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.svc-seg__opt span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: var(--hj-radius-pill, 999px);
  border: 1.5px solid var(--hj-border-strong, #D8D4C9);
  background: var(--hj-surface); color: var(--hj-fg-muted);
  font-size: var(--hj-text-sm, .9375rem); font-weight: 600; cursor: pointer;
  transition: background-color var(--svc-dur-fast) linear, color var(--svc-dur-fast) linear,
              border-color var(--svc-dur-fast) linear, scale var(--svc-dur-fast) var(--svc-ease-pop);
}
.svc-seg__opt span b { font-weight: 700; font-variant-numeric: tabular-nums; }
.svc-seg__opt input:hover + span { border-color: var(--hj-fg-muted); }
.svc-seg__opt input:active + span { scale: .97; }
.svc-seg__opt input:checked + span {
  background: var(--hj-accent-soft, #E9F5EC);
  border-color: var(--hj-accent-strong); color: var(--hj-accent-strong);
}
.svc-seg__opt input:focus-visible + span {
  outline: var(--hj-focus-width, 3px) solid var(--hj-focus-color, #1F6B33);
  outline-offset: 2px;
}

/* add-on toggles */
.svc-addons { display: grid; gap: 7px; }
.svc-addon { position: relative; }
.svc-addon input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.svc-addon span {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: var(--hj-radius-md, 12px);
  border: 1.5px solid var(--hj-border, #E7E4DC); background: var(--hj-surface);
  font-size: var(--hj-text-sm, .9375rem); color: var(--hj-fg); cursor: pointer;
  transition: background-color var(--svc-dur-fast) linear, border-color var(--svc-dur-fast) linear,
              scale var(--svc-dur-fast) var(--svc-ease-pop);
}
.svc-addon span b { font-family: var(--hj-font-display); font-weight: 700; color: var(--hj-fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.svc-addon input:hover + span { border-color: var(--hj-border-strong); }
.svc-addon input:active + span { scale: .985; }
.svc-addon input:checked + span { border-color: var(--hj-accent-strong); background: var(--hj-accent-soft, #E9F5EC); }
.svc-addon input:checked + span b { color: var(--hj-accent-strong); }
.svc-addon input:focus-visible + span { outline: var(--hj-focus-width, 3px) solid var(--hj-focus-color, #1F6B33); outline-offset: 2px; }

/* running total */
.svc-calc__foot { padding: 15px 20px 20px; border-block-start: 1px solid var(--hj-border); background: var(--hj-surface-sunken, #F3EFE6); }
.svc-lines { display: grid; gap: 5px; margin-block-end: 11px; }
.svc-lines__row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: var(--hj-text-xs, .8125rem); color: var(--hj-fg-muted);
}
.svc-lines__row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-lines__row--discount span { color: var(--hj-success, #1E7A55); font-weight: 600; }
.svc-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-block-start: 11px; border-block-start: 1.5px solid var(--hj-border-strong);
  margin-block-end: 13px;
}
.svc-total__label { font-size: var(--hj-text-sm, .9375rem); font-weight: 600; color: var(--hj-fg); }
.svc-total__value {
  font-family: var(--hj-font-display); font-weight: 800;
  font-size: var(--hj-text-3xl, 2.375rem); line-height: 1; color: var(--hj-fg);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--svc-dur-fast) linear;
}
.svc-total__value.is-updating { opacity: .45; }
.svc-calc__fine { margin: 11px 0 0; font-size: var(--hj-text-xs, .8125rem); line-height: 1.5; color: var(--hj-fg-subtle); text-align: center; }
.svc-calc__floor {
  display: flex; gap: 8px; align-items: flex-start;
  margin-block-start: 11px; padding: 10px 12px;
  border-radius: var(--hj-radius-sm, 8px);
  background: var(--hj-surface); border: 1px dashed var(--hj-border-strong);
  font-size: var(--hj-text-xs, .8125rem); line-height: 1.5; color: var(--hj-fg-muted);
}
.svc-calc__floor svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--hj-accent-strong); }


/* ==========================================================================
   REVIEWS  —  every number here comes from Supabase at runtime
   ========================================================================== */
.svc-reviews__top { display: grid; gap: var(--hj-gap-lg, 32px); align-items: start; margin-block-end: var(--hj-space-xl, 32px); }
@media (min-width: 860px) { .svc-reviews__top { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); } }

.svc-score { display: flex; flex-direction: column; gap: 9px; }
.svc-score__num {
  font-family: var(--hj-font-display); font-weight: 800;
  font-size: clamp(3rem, 8vw, 4.25rem); line-height: 1;
  color: var(--hj-fg); font-variant-numeric: tabular-nums;
}
.svc-score__num small { font-size: .4em; font-weight: 600; color: var(--hj-fg-subtle); margin-inline-start: 4px; }
.svc-score__meta { font-size: var(--hj-text-sm, .9375rem); color: var(--hj-fg-muted); margin: 0; }
.svc-score__meta b { color: var(--hj-fg); font-variant-numeric: tabular-nums; }
.svc-score__src { font-size: var(--hj-text-xs, .8125rem); color: var(--hj-fg-subtle); margin: 0; }

.svc-dist { display: grid; gap: 7px; }
.svc-dist__row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 60px; gap: 11px; align-items: center; font-size: var(--hj-text-xs, .8125rem); color: var(--hj-fg-muted); }
/* Both are <span>s: without display:block an inline box ignores width/height
   and the meter renders as an empty rail. */
.svc-dist__bar { display: block; height: 9px; border-radius: 999px; background: var(--hj-surface-sunken, #F3EFE6); overflow: hidden; border: 1px solid var(--hj-border); }
.svc-dist__fill {
  display: block; height: 100%; border-radius: 999px; background: var(--svc-star);
  width: 0; transition: width 300ms var(--svc-ease);
}
.svc-dist__n { text-align: right; font-variant-numeric: tabular-nums; }
.svc-dist__star { display: inline-flex; align-items: center; gap: 3px; }
.svc-dist__star svg { width: 12px; height: 12px; color: var(--svc-star); }

.svc-rcards { display: grid; gap: 14px; }
@media (min-width: 700px)  { .svc-rcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .svc-rcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-rcard {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; border-radius: var(--svc-radius);
  background: var(--hj-surface, #fff); border: 1px solid var(--hj-border);
  transition: border-color var(--svc-dur-fast) linear, box-shadow var(--svc-dur) var(--svc-ease), translate var(--svc-dur) var(--svc-ease-pop);
}
.svc-rcard:hover { border-color: var(--hj-border-strong); box-shadow: var(--hj-elev-2); translate: 0 -2px; }
.svc-rcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.svc-rcard__age { font-size: var(--hj-text-xs, .8125rem); color: var(--hj-fg-subtle); white-space: nowrap; }
/* Imported reviews run from six words to six hundred. Clamp the body so one
   essay cannot stretch every card in its grid row to 900px tall. */
.svc-rcard__body {
  margin: 0; font-size: var(--hj-text-sm, .9375rem);
  line-height: var(--hj-leading-relaxed, 1.7); color: var(--hj-fg);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden;
}
.svc-rcard__who { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.svc-rcard__who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.svc-rcard__ava {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--hj-accent-soft, #E9F5EC); color: var(--hj-accent-strong);
  font-family: var(--hj-font-display); font-weight: 700; font-size: .8125rem;
}
.svc-rcard__name { font-size: var(--hj-text-sm, .9375rem); font-weight: 600; color: var(--hj-fg); }
.svc-rcard__tag { font-size: var(--hj-text-xs, .8125rem); color: var(--hj-fg-subtle); }
.svc-rcard__shots { display: flex; gap: 7px; flex-wrap: wrap; }
.svc-rcard__shots img {
  width: 66px; height: 66px; object-fit: cover; border-radius: var(--hj-radius-sm, 8px);
  border: 1px solid var(--hj-border); background: var(--hj-surface-sunken);
}

/* photo wall */
.svc-photos {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.svc-photo {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1; border-radius: var(--hj-radius-md, 12px);
  border: 1px solid var(--hj-border); background: var(--hj-surface-sunken);
  transition: box-shadow var(--svc-dur) var(--svc-ease), translate var(--svc-dur) var(--svc-ease-pop);
}
.svc-photo:hover { box-shadow: var(--hj-elev-3); translate: 0 -2px; }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 300ms var(--svc-ease); }
.svc-photo:hover img { scale: 1.06; }
.svc-photo__cap {
  position: absolute; inset: auto 0 0 0; padding: 18px 10px 8px;
  background: linear-gradient(to top, rgb(0 0 0 / .72), transparent);
  color: #fff; font-size: var(--hj-text-xs, .8125rem); font-weight: 600;
  display: flex; align-items: center; gap: 5px;
}
.svc-photo__cap svg { width: 12px; height: 12px; color: #FFD166; flex: none; }

.svc-reviews__more { margin-block-start: var(--hj-space-lg, 24px); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* skeletons */
.svc-skel { background: var(--hj-surface-sunken, #F3EFE6); border-radius: var(--hj-radius-sm, 8px); position: relative; overflow: hidden; }
.svc-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent);
  translate: -100% 0; animation: svc-shimmer 1.25s linear infinite;
}

@keyframes svc-shimmer { to { translate: 100% 0; } }
.svc-skel--line { height: 1em; margin-block: .3em; }
.svc-skel--pill { height: 26px; width: 190px; border-radius: 999px; }
.svc-skel--card { height: 176px; border-radius: var(--svc-radius); }
.svc-skel--num  { height: 58px; width: 120px; }

/* the whole reviews band is removed if live data never arrives */
[hidden] { display: none !important; }


/* ==========================================================================
   FAQ
   ========================================================================== */
.svc-faq { display: grid; gap: 9px; max-width: 62rem; }
.svc-faq__item {
  border: 1px solid var(--hj-border); border-radius: var(--hj-radius-md, 12px);
  background: var(--hj-surface, #fff); overflow: hidden;
  transition: border-color var(--svc-dur-fast) linear;
}
.svc-faq__item[open] { border-color: var(--hj-border-strong); }
.svc-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; cursor: pointer; list-style: none;
  font-family: var(--hj-font-display); font-weight: 600;
  font-size: var(--hj-text-base, 1rem); color: var(--hj-fg);
}
.svc-faq__item summary::-webkit-details-marker { display: none; }
.svc-faq__item summary:hover { background: var(--hj-surface-sunken, #F3EFE6); }
.svc-faq__item summary svg { width: 18px; height: 18px; flex: none; color: var(--hj-accent-strong); transition: rotate var(--svc-dur) var(--svc-ease-pop); }
.svc-faq__item[open] summary svg { rotate: 45deg; }
.svc-faq__item p {
  margin: 0; padding: 0 18px 17px;
  font-size: var(--hj-text-sm, .9375rem); line-height: var(--hj-leading-relaxed, 1.7);
  color: var(--hj-fg-muted); max-width: 68ch;
}


/* ==========================================================================
   SUBURBS SERVED
   ========================================================================== */
.svc-areas { display: grid; gap: var(--hj-gap, 20px); }
@media (min-width: 640px)  { .svc-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .svc-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-area { padding: 16px 18px; border-radius: var(--hj-radius-md, 12px); background: var(--hj-surface, #fff); border: 1px solid var(--hj-border); }
.svc-area h3 {
  margin: 0 0 9px; font-family: var(--hj-font-display); font-weight: 700;
  font-size: var(--hj-text-sm, .9375rem); color: var(--hj-fg);
  letter-spacing: var(--hj-tracking-caps, .06em); text-transform: uppercase;
}
.svc-area ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px 7px; }
.svc-area a {
  display: inline-block; padding: 5px 10px; border-radius: var(--hj-radius-pill, 999px);
  background: var(--hj-surface-sunken, #F3EFE6); color: var(--hj-fg-muted);
  font-size: var(--hj-text-xs, .8125rem); font-weight: 600; text-decoration: none;
  transition: background-color var(--svc-dur-fast) linear, color var(--svc-dur-fast) linear;
}
.svc-area a:hover { background: var(--hj-accent-soft, #E9F5EC); color: var(--hj-accent-strong); text-decoration: none; }
.svc-areas__all { margin-block-start: var(--hj-space-lg, 24px); display: flex; flex-wrap: wrap; gap: 12px; }


/* ==========================================================================
   CTA BAND + STICKY MOBILE BAR
   ========================================================================== */
.svc-cta {
  border-radius: var(--hj-radius-2xl, 28px);
  padding: clamp(28px, 5vw, 52px) clamp(20px, 4vw, 48px);
  background: linear-gradient(135deg, #14532D, #2E8B44);
  color: #fff; text-align: center;
}
.svc-cta h2 { color: #fff; margin: 0 0 10px; font-size: var(--hj-text-3xl, 2.375rem); line-height: 1.15; }
.svc-cta p { color: rgb(255 255 255 / .88); max-width: 54ch; margin: 0 auto 22px; font-size: var(--hj-text-base, 1rem); }
.svc-cta .svc-actions { justify-content: center; margin-block-end: 0; }
.svc-cta .svc-btn--primary { background: #fff; color: #14532D; }
.svc-cta .svc-btn--primary:hover { background: #EAF6EE; }
.svc-cta .svc-btn--ghost { color: #fff; border-color: rgb(255 255 255 / .62); }
.svc-cta .svc-btn--ghost:hover { background: rgb(255 255 255 / .12); border-color: #fff; }
.svc-cta a:focus-visible { outline-color: #A7F3C4; }

.svc-stickybar {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
  background: var(--hj-surface, #fff);
  border-block-start: 1px solid var(--hj-border-strong, #D8D4C9);
  box-shadow: 0 -6px 20px -10px rgb(27 42 65 / .3);
  translate: 0 0;
  transition: translate var(--hj-dur-slow, 260ms) var(--svc-ease);
}
.svc-stickybar[data-tucked="true"] { translate: 0 110%; }
.svc-stickybar__p { display: flex; flex-direction: column; min-width: 0; }
.svc-stickybar__p b { font-family: var(--hj-font-display); font-size: var(--hj-text-base, 1rem); color: var(--hj-fg); line-height: 1.2; }
.svc-stickybar__p span { font-size: var(--hj-text-xs, .8125rem); color: var(--hj-fg-subtle); }
.svc-stickybar .svc-btn { padding: 10px 18px; min-height: 44px; flex: none; }
@media (min-width: 1080px) { .svc-stickybar { display: none; } }
/* keep the last band clear of the fixed bar */
@media (max-width: 1079px) { .svc-page { padding-block-end: 84px; } }


/* ==========================================================================
   REDUCED MOTION — kill every transition/animation this file introduces
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .svc-page *,
  .svc-page *::before,
  .svc-page *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .svc-skel::after { animation: none; }
  .svc-mosaic__cell:hover img,
  .svc-photo:hover img { scale: 1; }
  .svc-rcard:hover, .svc-photo:hover { translate: 0 0; }
}


/* ==========================================================================
   SERVICE PAGE — hero figure, gallery band, scope slot, photo lightbox
   Added when the hero moved from a 5-up mosaic to a single image.
   ========================================================================== */

/* ---- hero: one image ---------------------------------------------------- */
.svc-herofig {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--svc-radius);
  border: 1px solid var(--hj-border);
  background: var(--hj-surface-sunken, #F3EFE6);
  aspect-ratio: 4 / 3;
}
@media (min-width: 900px) { .svc-herofig { aspect-ratio: 5 / 4; } }
.svc-herofig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-herofig__tag {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--hj-radius-pill, 999px);
  background: rgb(255 255 255 / .92); color: #1B2A41;
  font-size: var(--hj-text-xs, .8125rem); font-weight: 700;
  backdrop-filter: blur(6px);
}
.svc-herofig__tag svg { width: 13px; height: 13px; color: #1F6B33; }

/* ---- the hero's other photos, rehomed --------------------------------- */
.svc-gal { margin-block: var(--hj-space-xl, 40px) 0; }
.svc-gal__grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-block-start: var(--hj-space-md, 16px);
}
.svc-gal__cell {
  margin: 0; overflow: hidden;
  border-radius: var(--svc-radius);
  border: 1px solid var(--hj-border);
  background: var(--hj-surface-sunken, #F3EFE6);
  aspect-ratio: 4 / 3;
}
.svc-gal__cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 300ms var(--svc-ease); }
.svc-gal__cell:hover img { scale: 1.04; }

/* ---- 21:9 scope image in "What's included" ----------------------------- */
/* The figure reserves the ratio, so the image cannot shift the page while it
   loads. */
.svc-incl__shot {
  margin: var(--hj-space-lg, 24px) 0 0;
  aspect-ratio: 21 / 9;
  border-radius: var(--svc-radius);
  overflow: hidden;
  border: 1px solid var(--hj-border);
  background: var(--hj-surface-sunken, #F3EFE6);
}
.svc-incl__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---- photo tiles are buttons now, so reset the UA button styling ------- */
.svc-photo { appearance: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.svc-photo:focus-visible { outline: 2px solid #1F6B33; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .svc-gal__cell:hover img { scale: 1; }
}


/* ==========================================================================
   PRICE CALCULATOR — compaction pass
   The panel no longer scrolls, so its height has to come down honestly:
   tighter control rhythm, and the optional extras behind a disclosure.
   ========================================================================== */

.svc-ctrl__label { margin-block-end: 6px; }
/* .svc-seg gap/padding removed: they re-tightened chips below the 44px
   touch minimum that the grid rule above establishes. */
.svc-addons { gap: 5px; }
.svc-addon span { padding: 8px 11px; }

/* Steppers sit inline with their label instead of below it, which removes a
   whole row per numeric control. Buttons stay 44px for touch. */
.svc-ctrl--num { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.svc-ctrl--num .svc-ctrl__label { margin-block-end: 0; flex-direction: column; align-items: flex-start; gap: 1px; }
.svc-ctrl--num .svc-ctrl__hint { text-align: left; }

/* Optional extras disclosure */
.svc-extras-d { border-block-start: 1px solid var(--hj-border); padding-block-start: 12px; }
.svc-extras-d__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none;
  font-size: var(--hj-text-sm, .9375rem); font-weight: 600; color: var(--hj-fg);
}
.svc-extras-d__sum::-webkit-details-marker { display: none; }
.svc-extras-d__sum svg { width: 17px; height: 17px; flex: none; color: var(--hj-fg-subtle); transition: rotate 200ms var(--svc-ease); }
.svc-extras-d[open] .svc-extras-d__sum svg { rotate: 180deg; }
.svc-extras-d__sum:focus-visible { outline: 2px solid #1F6B33; outline-offset: 3px; border-radius: 6px; }
.svc-extras-d__n {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  margin-inline-start: 6px; padding: 0 6px;
  border-radius: 999px; background: var(--hj-surface-sunken, #F3EFE6);
  font-size: var(--hj-text-xs, .8125rem); font-weight: 700; color: var(--hj-fg-muted);
  font-variant-numeric: tabular-nums;
}
.svc-extras-d .svc-addons { margin-block-start: 10px; }

/* The total is the loudest thing in the panel; it does not need to be 38px. */
.svc-total__value { font-size: var(--hj-text-2xl, 1.9rem); }
.svc-calc__foot { padding: 13px 18px 18px; }

@media (prefers-reduced-motion: reduce) {
  .svc-extras-d__sum svg { transition: none; }
}


/* ==========================================================================
   CALCULATOR — corrections from the layout audit
   ========================================================================== */

/* The option groups were sitting in raw browser <fieldset> chrome: a 2px
   groove border with a notched legend, plus 0.75em inline padding. .svc-seg
   reset the inner div, but .svc-ctrl IS the fieldset and had no reset, so the
   chips were inset 16px from every other control in the panel and wrapped in
   a 1990s box. That is most of what "buttons stuck on top of each other"
   was. */
.svc-ctrl { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.svc-ctrl > legend { display: block; width: 100%; padding: 0; float: left; }
.svc-ctrl > legend + * { clear: both; }

/* Chips were intrinsically sized in a flex-wrap row, so they orphaned: on
   oven-cleaning all four "Oven type" options landed on four separate rows,
   each with 150-190px of dead space beside it. An auto-fit grid gives every
   chip in a group the same width and fills the row; an odd last child spans
   so nothing is left stranded. */
.svc-seg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  gap: var(--s-2);
}
.svc-seg__opt { display: grid; }
.svc-seg > .svc-seg__opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.svc-seg__opt span {
  justify-content: center; text-align: center;
  min-height: 44px; padding: 10px 12px;
  border-radius: var(--hj-radius-md, 12px);
}

/* Touch targets: chips and steppers were 40px against a 44px minimum, with a
   7px gap against an 8px minimum. */
.svc-counter button { width: 44px; height: 44px; }
.svc-counter output { height: 44px; }
.svc-addons { gap: var(--s-2); }

/* The action bar pins to the bottom of the calculator card. Sticky inside a
   card whose containing block is .svc-calc, so it never escapes the panel:
   the price and Book this stay reachable at any panel height, including with
   the extras open, without reintroducing an internal scrollbar. */
.svc-calc { overflow: visible; }
.svc-calc__foot {
  position: sticky; bottom: 0; z-index: 2;
  border-end-start-radius: var(--hj-radius-xl, 20px);
  border-end-end-radius: var(--hj-radius-xl, 20px);
  box-shadow: 0 -10px 24px -18px rgb(27 42 65 / .35);
}

/* Two columns from 1000px rather than 1080px, so 1024 tablets and half-screen
   windows keep the calculator beside the copy instead of dropping it 5,700px
   down the page. Below that it leads rather than trails. */
@media (min-width: 1000px) {
  .svc-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (min-width: 1180px) {
  .svc-layout { grid-template-columns: minmax(0, 1fr) 372px; }
}
@media (max-width: 999px) {
  .svc-aside { order: -1; }
  .svc-calc  { max-width: 640px; margin-inline: auto; }
}