.bs-show { margin-top: 2.5rem; border-radius: var(--hge-radius); overflow: hidden; }
.bs-show-cap { margin: .75rem 0 0; }
.bs-show-cap + .bs-cards { margin-top: 3rem; }
/* Before / after draggable slider gallery */
.bs-ba-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 1.5rem; margin-top: 1.5rem;
}
.bs-ba-wrap { margin: 0; }
#show-facelift.bs-show { overflow: visible; border-radius: 0; }
#show-facelift > .bs-ba-wrap { width: 100%; max-width: 1180px; margin: 0 auto; }
.bs-ba {
  position: relative;
  aspect-ratio: 1600 / 1000;
  border-radius: var(--hge-radius, 14px);
  overflow: hidden;
  border: 1px solid #e4e9f2;
  box-shadow: var(--hge-shadow);
  --pos: 50%;             /* divider position from left; before shows left of it, after right */
  user-select: none;
  touch-action: pan-y;    /* let the page scroll vertically; the range handles horizontal drag */
}
/* Lead height leaves room for the compact header, the caption and at least 32px above and below the pinned figure. */
#show-facelift { --bs-lead-w: min(100%, calc((100svh - 220px) * 1.6)); }
.bs-ba--lead { width: var(--bs-lead-w); margin-inline: auto; }
.bs-ba--lead + .bs-ba-cap { width: var(--bs-lead-w); margin-inline: auto; }
.bs-ba--lead.is-end .bs-ba-line { opacity: 0; }
/* The auto-dealer after capture has a ~10px off-colour band baked into its right edge; both lead layers are scaled 1% from the top-left so the band falls outside the clip and the two layers stay pixel-aligned. */
.bs-ba.bs-ba--lead img { width: 101%; max-width: none; height: 101%; }
.bs-ba img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block; pointer-events: none;
}
/* After occupies the LEFT of the divider so dragging the handle right EXPANDS
   the after (the Hugo Greene rebuild), rather than shrinking it. */
.bs-ba-after { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
/* Load-on-intent hero clip: sits over the after image in the same box and fades in once it can play. The image stays underneath, so a clip that never loads changes nothing. */
.bs-ba-clip {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.bs-ba.bs-ba--lead .bs-ba-clip { width: 101%; max-width: none; height: 101%; }
.bs-ba-clip.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bs-ba-clip { display: none; } }
.bs-ba-line {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: #fff; z-index: 3; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(9,64,132,.28);
}
.bs-ba-line::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; box-shadow: var(--hge-shadow);
}
.bs-ba-line::after {
  content: '\2194'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--hge-body); font-size: 1.05rem; font-weight: 700;
  color: var(--hge-navy, #094084);
}
.bs-ba-tag {
  position: absolute; bottom: .7rem; z-index: 4; pointer-events: none;
  font-family: var(--hge-display); text-transform: uppercase;
  letter-spacing: .12em; font-size: .62rem; color: #fff;
  background: rgba(9,64,132,.74); padding: .28rem .55rem; border-radius: 6px;
}
.bs-ba-tag--after { left: .7rem; }
.bs-ba-tag--before { right: .7rem; }
.bs-ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  z-index: 5; -webkit-appearance: none; appearance: none;
  background: transparent; cursor: ew-resize; border-radius: var(--hge-radius, 14px);
  touch-action: pan-y; /* let a vertical swipe on the slider still scroll the page on mobile */
}
.bs-ba-range:focus-visible { outline: 3px solid var(--hgb-green-fill, #2FA85A); outline-offset: 3px; }
.bs-ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; background: transparent; cursor: ew-resize; }
.bs-ba-range::-moz-range-thumb { width: 44px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.bs-ba-range::-moz-range-track { background: transparent; }
.bs-ba-cap {
  position: relative; z-index: 1;
  font-family: var(--hge-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: .72rem; color: var(--hgb-muted, #5A6472);
  margin-top: .6rem;
}


@media (min-width: 900px) { .bs-ba-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Showpiece: onboarding ---- */
/* #show-onboarding is the pinned block (stage + caption); .bs-ob is the framed "screen". */
#show-onboarding.bs-show { overflow: visible; border-radius: 0; }
.bs-ob { --ob-paper-w: clamp(150px, 17%, 210px); position: relative; height: clamp(400px, calc(100svh - 250px), 560px); padding: clamp(1.5rem, 3vw, 2.5rem); background: #EAEEE8; border: 1px solid rgba(9,64,132,.10); border-radius: var(--hge-radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.bs-papers { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.bs-paper { position: absolute; left: 50%; top: 50%; width: var(--ob-paper-w); aspect-ratio: 8.5 / 11; margin: calc(var(--ob-paper-w) * -11 / 17) 0 0 calc(var(--ob-paper-w) / -2); background: #fff; border: 1px solid rgba(9,64,132,.08); border-radius: 3px; box-shadow: 0 1px 2px rgba(14,31,73,.08), 0 10px 28px rgba(14,31,73,.12); padding: calc(var(--ob-paper-w) * .1) calc(var(--ob-paper-w) * .09) calc(var(--ob-paper-w) * .11); display: flex; flex-direction: column; gap: calc(var(--ob-paper-w) * .065); visibility: hidden; opacity: 0; transform-origin: 50% 50%; }
.bs-paper--1 { z-index: 4; } .bs-paper--2 { z-index: 3; } .bs-paper--3 { z-index: 2; } .bs-paper--4 { z-index: 1; }
.bs-paper b { display: block; padding-bottom: calc(var(--ob-paper-w) * .045); border-bottom: 1.5px solid var(--hge-navy); font: 600 .72rem/1.2 var(--hge-body); letter-spacing: .005em; color: var(--hge-navy); white-space: nowrap; }
/* Field row: a label stub above a write-on line. */
.bs-pf { display: block; position: relative; height: 14px; border-bottom: 1px solid rgba(9,64,132,.20); }
.bs-pf::before { content: ""; position: absolute; left: 0; top: 0; width: 34%; height: 3px; border-radius: 2px; background: rgba(9,64,132,.30); }
.bs-pf--half { width: 58%; }
.bs-pf--half::before { width: 52%; }
/* Checkbox row: a small box with a label stub beside it, no line. */
.bs-pf--box { height: 8px; border-bottom: 0; padding-left: 14px; }
.bs-pf--box::before { left: 14px; top: 2px; width: 46%; background: rgba(9,64,132,.22); }
.bs-pf--box::after { content: ""; position: absolute; left: 0; top: -1px; width: 8px; height: 8px; border: 1px solid rgba(9,64,132,.45); border-radius: 1.5px; }
.bs-paper--3 .bs-pf--box:nth-of-type(4)::after { background: rgba(9,64,132,.45); }
/* Signature line with its stub label underneath, pinned to the foot of the sheet. */
.bs-pf--sig { margin-top: auto; width: 64%; height: 10px; border-bottom-color: rgba(9,64,132,.45); }
.bs-pf--sig::before { top: auto; bottom: -8px; width: 40%; height: 2px; background: rgba(9,64,132,.22); }
.bs-dash { position: relative; z-index: 1; width: min(100%, 620px); background: #fff; border-radius: var(--hge-radius); box-shadow: var(--hge-shadow); padding: 1.5rem; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.25rem 1.75rem; align-items: center; color: var(--hge-navy); font-family: var(--hge-body); }
.bs-dash-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; width: 100%; padding-bottom: 1rem; border-bottom: 1px solid rgba(9,64,132,.10); font: 600 .9rem/1.5 var(--hge-body); color: var(--hge-navy); }
.bs-dash-head span:last-child { font-size: .875rem; font-weight: 500; color: var(--hgb-muted); }
.bs-dash-progress { position: relative; display: grid; place-items: center; width: 120px; height: 120px; }
.bs-ring { display: block; width: 120px; height: 120px; transform: rotate(-90deg); }
.bs-ring-track { fill: none; stroke: rgba(9,64,132,.10); stroke-width: 10; }
.bs-ring-fill { fill: none; stroke: var(--hgb-green-fill); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.bs-dash-done { position: absolute; font: 600 .875rem/1.5 var(--hge-body); color: var(--hge-navy); font-variant-numeric: tabular-nums; }
#bs-main .bs-dash-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; width: 100%; }
.bs-dash-item { padding: .5rem 0 .5rem 1.75rem; position: relative; font: 500 .95rem/1.3 var(--hge-body); color: var(--hge-navy); border-bottom: 1px solid rgba(9,64,132,.08); }
.bs-dash-item:last-child { border-bottom: 0; }
/* Empty slot under each check, so an unchecked row still reads as a to-do. */
.bs-dash-item::before { content: ""; position: absolute; left: 0; top: .6rem; width: 1rem; height: 1rem; box-sizing: border-box; border-radius: 50%; border: 1.5px solid rgba(9,64,132,.22); }
.bs-dash-check { position: absolute; left: 0; top: .6rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--hgb-green-fill); }
.bs-dash-check::after { content: ""; position: absolute; left: .35rem; top: .2rem; width: .3rem; height: .5rem; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
#show-onboarding .bs-show-cap { margin: .75rem 0 0; }
@media (prefers-reduced-motion: reduce) { .bs-paper { display: none; } }
@media (max-width: 767px) {
  .bs-ob { --ob-paper-w: 34%; height: auto; min-height: 460px; padding: 1.25rem; }
  .bs-paper b { font-size: .6rem; }
  .bs-dash { grid-template-columns: 1fr; justify-items: center; gap: 1rem; padding: 1.25rem; }
  .bs-dash-head { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* ---- Showpiece: menu to report ---- */
/* #show-menu is the pinned block (stage + caption); .bs-mr is the framed stage, sized like onboarding. */
#show-menu.bs-show { overflow: visible; border-radius: 0; }
.bs-mr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; min-height: clamp(400px, calc(100svh - 250px), 560px); padding: clamp(1.5rem, 3vw, 2.5rem); background: #EAEEE8; border: 1px solid rgba(9,64,132,.10); border-radius: var(--hge-radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
/* Chalkboard card: navy slate, faint chalk haze and grain from gradients only, double inner border. */
.bs-menu { position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: 380px; justify-self: center; padding: 1.75rem 1.6rem 1.5rem; color: var(--hge-paper); border-radius: 10px; transform: rotate(-2deg);
  background-color: #0B2A55;
  background-image:
    radial-gradient(ellipse 80% 55% at 30% 18%, rgba(244,246,243,.075), rgba(244,246,243,0) 70%),
    radial-gradient(ellipse 60% 45% at 78% 88%, rgba(244,246,243,.05), rgba(244,246,243,0) 70%),
    repeating-linear-gradient(97deg, rgba(244,246,243,.012) 0 1px, rgba(244,246,243,0) 1px 3px),
    repeating-linear-gradient(8deg, rgba(0,0,0,.035) 0 1px, rgba(0,0,0,0) 1px 6px);
  border: 1px solid rgba(244,246,243,.22);
  box-shadow: inset 0 0 0 6px #0B2A55, inset 0 0 0 7px rgba(244,246,243,.22), inset 0 0 40px rgba(0,0,0,.25), 0 2px 4px rgba(14,31,73,.12), 0 18px 40px rgba(14,31,73,.22); }
/* The site shell sets p { color: #094084 } and Oswald on h-tags; these ID-scoped rules restore the chalk palette. */
#bs-main #show-menu .bs-menu-title { margin: 0 0 1.1rem; padding: 0 0 .9rem; border-bottom: 1px solid rgba(244,246,243,.32); font-family: var(--hge-display); font-size: clamp(1.5rem, 2.3vw, 1.9rem); font-weight: 600; line-height: 1.15; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--hge-paper); }
#bs-main #show-menu .bs-menu-section { margin: 1rem .4rem .35rem; font-family: var(--hge-body); font-size: .68rem; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,246,243,.62); }
#bs-main #show-menu .bs-menu-title + .bs-menu-section { margin-top: 0; }
#bs-main #show-menu .bs-menu-line { position: relative; isolation: isolate; margin: 0 0 .2rem; padding: .32rem .4rem; border-radius: 4px; font-family: var(--hge-body); font-size: .98rem; font-weight: 400; line-height: 1.25; letter-spacing: .005em; color: var(--hge-paper); }
/* Highlight lives behind the text (z-index -1 inside the line's own stacking context). */
.bs-menu-hit { position: absolute; z-index: -1; inset: 0; transform-origin: 50% 0; border-radius: inherit; background: rgba(61,192,102,.28); box-shadow: inset 2px 0 0 rgba(61,192,102,.75); pointer-events: none; }
.bs-scan { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 2px; background: var(--hgb-green); box-shadow: 0 0 10px 1px rgba(61,192,102,.85), 0 0 28px 4px rgba(61,192,102,.35); opacity: 0; visibility: hidden; pointer-events: none; }
/* Soft wash trailing above the scan line. */
.bs-scan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 48px; background: linear-gradient(to top, rgba(61,192,102,.16), rgba(61,192,102,0)); }
.bs-report { min-width: 0; align-self: center; background: #fff; color: var(--hge-navy); border-radius: var(--hge-radius); box-shadow: var(--hge-shadow); overflow: hidden; }
.bs-report-title { padding: 1.15rem 1rem; font: 600 .95rem/1.4 var(--hge-body); }
.bs-report-head, .bs-report-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr); gap: .75rem; align-items: center; padding: .7rem 1rem; font: 500 .9rem/1.2 var(--hge-body); }
.bs-report-head { background: var(--hge-navy); color: #fff; font-weight: 600; }
.bs-report-row { min-height: 3.4rem; }
.bs-report-row + .bs-report-row { border-top: 1px solid rgba(9,64,132,.08); }
.bs-report-row > span { min-width: 0; overflow-wrap: anywhere; }
.bs-report-row > span:nth-child(2) { color: var(--hgb-muted); }
.bs-tag { justify-self: start; padding: .15rem .55rem; border-radius: 999px; background: rgba(9,64,132,.08); color: var(--hge-navy); font-size: .8rem; white-space: nowrap; }
.bs-tag--open { background: rgba(61,192,102,.14); color: var(--hgb-green-deep); }
#show-menu .bs-show-cap { margin: .75rem 0 0; }
#show-menu + .bs-cards { margin-top: 3rem; }
@media (max-width: 767px) {
  .bs-mr { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 1.25rem; }
  .bs-menu { transform: none; max-width: 340px; }
  .bs-report-head, .bs-report-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 4rem; gap: .4rem; padding: .7rem .6rem; font-size: .8rem; line-height: 1.4; }
  .bs-report-title { padding: 1rem .6rem; }
  .bs-tag { font-size: .75rem; padding: .15rem .4rem; }
}
@media (prefers-reduced-motion: reduce) { .bs-scan { display: none; } }

/* ---- Showpiece: booking ---- */
/* #show-booking is the pinned block (stage + caption); .bs-bk is the framed stage, sized like onboarding.
   The CSS default is the final frame: paper hidden, week full, both bubbles in, the 10:00 slot confirmed. */
#show-booking.bs-show { overflow: visible; border-radius: 0; }
.bs-bk { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) clamp(13.5rem, 21%, 15.5rem); grid-template-rows: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; height: clamp(420px, calc(100svh - 210px), 560px); padding: clamp(1.5rem, 3vw, 2.5rem); background: #EAEEE8; border: 1px solid rgba(9,64,132,.10); border-radius: var(--hge-radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); font-family: var(--hge-body); color: var(--hge-navy); }
/* Paper book: cream page with ruled lines and a red margin rule, tilted on the desk. Each name sits on its own rule:
   the title and every line are one 2.1rem row, and the ruling repeats at the same pitch from the top padding. */
.bs-bk-paper { --bk-row: 2.1rem; --bk-w: clamp(260px, 24vw, 330px); position: absolute; z-index: 3; inset: 0; width: var(--bk-w); height: min(calc(var(--bk-w) * 1.22), 84%); margin: auto; padding: 1.1rem 1.4rem 0 2.6rem; overflow: hidden; display: flex; flex-direction: column; background-color: #FBFAF6;
  background-image: linear-gradient(90deg, rgba(196,48,43,0) 1.95rem, rgba(196,48,43,.30) 1.95rem, rgba(196,48,43,.30) calc(1.95rem + 1px), rgba(196,48,43,0) calc(1.95rem + 1px)), repeating-linear-gradient(180deg, rgba(9,64,132,0) 0 calc(var(--bk-row) - 1px), rgba(9,64,132,.12) calc(var(--bk-row) - 1px) var(--bk-row));
  background-position: 0 0, 0 1.1rem; background-repeat: no-repeat, repeat-y; background-size: 100% 100%, 100% var(--bk-row); border: 1px solid rgba(9,64,132,.08); border-radius: 4px; box-shadow: 0 1px 2px rgba(14,31,73,.08), 0 16px 38px rgba(14,31,73,.15); transform: rotate(-2deg); visibility: hidden; opacity: 0; }
#bs-main #show-booking .bs-bk-paper b { display: block; flex: none; height: var(--bk-row); margin: 0; font-family: var(--hge-display); font-size: 1.1rem; font-weight: 600; line-height: calc(var(--bk-row) - .2rem); letter-spacing: .08em; text-transform: uppercase; color: var(--hge-navy); }
/* A handwritten name stub resting on its rule; crossed names carry a red strike drawn at a slight angle. */
.bs-bk-line { position: relative; display: block; flex: none; height: var(--bk-row); }
.bs-bk-line::before { content: ""; position: absolute; left: 0; bottom: .55rem; width: 62%; height: .45rem; border-radius: 4px; background: rgba(9,64,132,.32); }
.bs-bk-line:nth-of-type(2)::before { width: 46%; }
.bs-bk-line:nth-of-type(3)::before { width: 70%; }
.bs-bk-line:nth-of-type(4)::before { width: 38%; }
.bs-bk-line.is-crossed::before { background: rgba(9,64,132,.18); }
.bs-bk-line.is-crossed::after { content: ""; position: absolute; left: -.4rem; width: calc(62% + 1rem); bottom: calc(.55rem + .22rem - 1px); height: 2px; border-radius: 2px; background: rgba(196,48,43,.78); transform: rotate(-3deg); }
.bs-bk-line.is-crossed:nth-of-type(3)::after { width: calc(70% + 1rem); }
/* Missed-call notes stuck to the page edge. */
#bs-main #show-booking .bs-bk-missed { position: absolute; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border-radius: 999px; background: linear-gradient(rgba(196,48,43,.12), rgba(196,48,43,.12)), #fff; box-shadow: 0 1px 2px rgba(14,31,73,.10), 0 6px 16px rgba(14,31,73,.10); font-size: .8rem; font-weight: 600; line-height: 1.3; color: #9B2520; white-space: nowrap; }
#show-booking .bs-bk-missed::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: #C4302B; }
#show-booking .bs-bk-missed:nth-of-type(5) { right: 1.1rem; top: 58%; transform: rotate(4deg); }
#show-booking .bs-bk-missed:nth-of-type(6) { left: 2.9rem; top: 76%; transform: rotate(-3deg); }
/* Week calendar: white card, five day columns, appointment chips placed on six time rows. */
.bs-bk-week { position: relative; z-index: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; border-radius: var(--hge-radius); box-shadow: 0 1px 2px rgba(14,31,73,.06), 0 14px 36px rgba(14,31,73,.12); padding: 1rem 1.1rem 1.1rem; }
.bs-bk-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 .1rem .8rem; margin-bottom: .8rem; border-bottom: 1px solid rgba(9,64,132,.10); font-size: .95rem; font-weight: 600; line-height: 1.4; color: var(--hge-navy); }
.bs-bk-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.bs-bk-col { min-width: 0; display: grid; grid-template-rows: auto repeat(6, minmax(0, 1fr)); gap: .35rem; padding: 0 .3rem .3rem; border-radius: 10px; background: rgba(9,64,132,.03); }
.bs-bk-day { padding: .45rem 0 .2rem; text-align: center; font-size: .75rem; font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--hgb-muted); }
/* Chip: the name row sits above two stacked state layers; only opacity changes between them. */
.bs-bk-appt { position: relative; isolation: isolate; align-self: start; min-width: 0; display: grid; grid-template-areas: "name" "state"; padding: .45rem .55rem .4rem; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(9,64,132,.10), 0 1px 2px rgba(14,31,73,.06); overflow: hidden; }
.bs-bk-name { grid-area: name; position: relative; z-index: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 500; line-height: 1.3; color: var(--hge-navy); }
#bs-main #show-booking .bs-bk-name b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bs-bk-state { grid-area: state; display: flex; align-items: center; gap: .3rem; margin-top: .15rem; font-size: .75rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
/* Each layer's tint fills the whole chip (the state span is static, so inset resolves to the chip); the cross-fade swaps tint and label together. */
.bs-bk-state::before { content: ""; position: absolute; z-index: -1; inset: 0; }
.bs-bk-state::after { content: ""; order: -1; flex: none; width: .45rem; height: .45rem; border-radius: 50%; }
.bs-bk-state--pending { color: var(--hgb-muted); }
.bs-bk-state--pending::before { background: rgba(9,64,132,.06); }
.bs-bk-state--pending::after { box-shadow: inset 0 0 0 1.5px rgba(90,100,114,.7); }
.bs-bk-state--confirmed { color: #1E7D44; opacity: 0; visibility: hidden; }
.bs-bk-state--confirmed::before { background: rgba(61,192,102,.14); box-shadow: inset 0 0 0 1px rgba(47,168,90,.35); }
.bs-bk-state--confirmed::after { background: #2FA85A; }
.bs-bk-appt--target .bs-bk-state--confirmed { opacity: 1; visibility: inherit; }
.bs-bk-appt--target .bs-bk-state--pending { opacity: 0; visibility: hidden; }
/* Phone: the booking card loop's outline, scaled up into a whole handset. */
.bs-bk-phone { position: relative; z-index: 1; min-width: 0; align-self: center; height: min(100%, 30rem); display: flex; flex-direction: column; gap: .75rem; padding: 2.1rem .9rem 1rem; background: var(--hge-paper); border: 1px solid rgba(9,64,132,.14); border-radius: 30px; box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px rgba(9,64,132,.06), 0 1px 2px rgba(14,31,73,.06), 0 18px 40px rgba(14,31,73,.16); }
.bs-bk-phone::before { content: ""; position: absolute; top: .8rem; left: 50%; width: 3rem; height: .3rem; margin-left: -1.5rem; border-radius: 4px; background: rgba(9,64,132,.16); }
/* An empty compose bar at the foot of the screen. */
.bs-bk-phone::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 1rem; height: 2rem; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(9,64,132,.12); }
.bs-bk-from { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding-bottom: .75rem; margin-bottom: .25rem; border-bottom: 1px solid rgba(9,64,132,.08); font-size: .78rem; font-weight: 600; line-height: 1.3; color: var(--hge-navy); text-align: center; }
.bs-bk-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(140deg, var(--hgb-green) 0%, var(--hgb-green-deep) 100%); }
#bs-main #show-booking .bs-bk-sms, #bs-main #show-booking .bs-bk-reply { margin: 0; padding: .6rem .8rem; font-family: var(--hge-body); font-size: .85rem; font-weight: 400; line-height: 1.45; letter-spacing: 0; }
#bs-main #show-booking .bs-bk-sms { align-self: flex-start; max-width: 92%; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--hge-navy); box-shadow: 0 1px 2px rgba(9,64,132,.10); }
#bs-main #show-booking .bs-bk-reply { align-self: flex-end; min-width: 2.6rem; text-align: center; font-weight: 600; border-radius: 16px 16px 4px 16px; background: var(--hgb-green-deep); color: #fff; }
#show-booking .bs-show-cap { margin: .75rem 0 0; }
@media (prefers-reduced-motion: reduce) { .bs-bk-paper { display: none; } }
/* Short desktop windows: a slightly tighter week so six time rows of chips fit the stage. */
@media (min-width: 768px) and (max-height: 780px) {
  .bs-bk-week { padding: .8rem .9rem .9rem; }
  .bs-bk-head { padding-bottom: .6rem; margin-bottom: .6rem; }
  .bs-bk-col { gap: .3rem; }
  .bs-bk-day { padding: .35rem 0 .1rem; }
  .bs-bk-appt { padding: .35rem .5rem .3rem; }
  .bs-bk-name { font-size: .82rem; }
  .bs-bk-state { font-size: .72rem; margin-top: .1rem; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .bs-bk-name { font-size: .75rem; }
  .bs-bk-state { font-size: .68rem; }
  .bs-bk-col { padding: 0 .2rem .2rem; }
}
/* Phone width: no pin, the paper stays hidden, and the week (as day rows) stacks above the phone. */
@media (max-width: 767px) {
  .bs-bk { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; padding: 1.25rem; gap: 1.25rem; }
  .bs-bk-paper { display: none; }
  .bs-bk-week { padding: .9rem; }
  .bs-bk-head { font-size: .875rem; }
  .bs-bk-grid { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .bs-bk-col { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .4rem; }
  .bs-bk-day { flex: none; width: 2.75rem; padding: 0; text-align: left; }
  .bs-bk-appt { grid-row: auto !important; flex: 0 1 auto; }
  .bs-bk-phone { height: auto; min-height: 19rem; width: min(100%, 17rem); justify-self: center; padding-bottom: 3.75rem; }
}

/* ---- Showpiece: gift cards ---- */
/* #show-giftcards is the pinned block; .bs-gc is the framed stage, sized like onboarding.
   The CSS default is the final frame: the card in the middle, a copy of it in each of the four places, every buy cue lit.
   The places never take a transform (only opacity), so the flying copies are not trapped in a stacking context. */
#show-giftcards.bs-show { overflow: visible; border-radius: 0; }
.bs-gc { --gc-card-w: clamp(12.5rem, 19vw, 16.5rem); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) var(--gc-card-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "web master social" "google master qr"; gap: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2.5rem); height: clamp(420px, calc(100svh - 210px), 560px); padding: clamp(1.5rem, 3vw, 2.5rem); background: #EAEEE8; border: 1px solid rgba(9,64,132,.10); border-radius: var(--hge-radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); font-family: var(--hge-body); color: var(--hge-navy); }
/* The card: a brand-neutral navy face with a fine guilloche, a soft sheen, a ring mark and a green foil rule. Sized in em so every copy is the same card. */
.bs-gc-card { position: relative; display: block; width: 15em; aspect-ratio: 1.586; overflow: hidden; border-radius: .9em; background-color: #0B2A55;
  background-image: radial-gradient(ellipse 70% 90% at 82% 8%, rgba(244,246,243,.16), rgba(244,246,243,0) 60%), repeating-radial-gradient(circle at 115% 120%, rgba(244,246,243,0) 0 .55em, rgba(244,246,243,.07) .55em .62em), linear-gradient(140deg, #0B2A55 0%, #094084 62%, #0F4E98 100%);
  box-shadow: 0 .06em .15em rgba(14,31,73,.18), 0 .9em 2.2em rgba(14,31,73,.24); color: var(--hge-paper); }
.bs-gc-card::after { content: ""; position: absolute; left: 1.2em; right: 1.2em; bottom: 1.1em; height: .14em; border-radius: .1em; background: linear-gradient(90deg, var(--hgb-green) 0%, rgba(61,192,102,.15) 100%); }
.bs-gc-mark { position: absolute; left: 1.2em; top: 1.1em; width: 1.9em; height: 1.9em; border-radius: 50%; box-shadow: inset 0 0 0 .14em rgba(244,246,243,.85), inset 0 0 0 .5em #0B2A55, inset 0 0 0 .64em var(--hgb-green); }
.bs-gc-word { position: absolute; left: 1.2em; bottom: 1.75em; font-family: var(--hge-display); font-size: 1.15em; font-weight: 600; line-height: 1; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: var(--hge-paper); }
.bs-gc-chip { position: absolute; right: 1.2em; top: 1.25em; width: 1.9em; height: 1.4em; border-radius: .3em; background: linear-gradient(135deg, rgba(244,246,243,.42), rgba(244,246,243,.16)); box-shadow: inset 0 0 0 .07em rgba(244,246,243,.35); }
.bs-gc-master { grid-area: master; position: relative; z-index: 2; align-self: center; justify-self: center; font-size: calc(var(--gc-card-w) / 15); }
/* Places: a small label over a white screen. Copies sit above the master card while they fly. */
.bs-gc-place { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .5rem; }
.bs-gc-place--web { grid-area: web; } .bs-gc-place--google { grid-area: google; } .bs-gc-place--social { grid-area: social; } .bs-gc-place--qr { grid-area: qr; }
.bs-gc-label { flex: none; font-family: var(--hge-display); font-size: .8rem; font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--hge-navy); }
.bs-gc-screen { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .55rem; padding: .85rem; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(14,31,73,.06), 0 12px 30px rgba(14,31,73,.10); }
.bs-gc-copy { position: relative; z-index: 5; flex: none; display: block; font-size: .36rem; }
.bs-gc-stub { display: block; flex: none; width: 72%; height: .45rem; border-radius: 4px; background: rgba(9,64,132,.12); }
.bs-gc-stub--h { width: 46%; height: .6rem; background: rgba(9,64,132,.26); }
.bs-gc-stub--s { width: 54%; }
.bs-gc-accent { position: relative; z-index: 1; }
/* Website: browser chrome, a few stub lines and the buy button beside a copy of the card. */
.bs-gc-browser { padding: 0; gap: 0; overflow: visible; }
.bs-gc-bar { display: flex; align-items: center; gap: .3rem; padding: .5rem .65rem; border-bottom: 1px solid rgba(9,64,132,.08); }
.bs-gc-bar i { width: .42rem; height: .42rem; border-radius: 50%; background: rgba(9,64,132,.16); }
.bs-gc-url { flex: 1; height: .7rem; margin-left: .4rem; border-radius: 999px; background: rgba(9,64,132,.07); }
.bs-gc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; padding: .8rem .85rem .85rem; }
.bs-gc-row { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
/* The card and the button sit in a soft hero band that fills the rest of the page. */
.bs-gc-hero { flex: 1; min-height: 0; justify-content: center; margin-top: .25rem; padding: .6rem; border-radius: 8px; background: radial-gradient(ellipse 70% 80% at 30% 40%, #fff, rgba(255,255,255,0) 70%), #EDF1F5; }
.bs-gc-buy { display: inline-flex; align-items: center; padding: .5rem .8rem; border-radius: 999px; background: var(--hgb-green-deep); color: #fff; font-size: .75rem; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: 0 4px 12px rgba(30,125,68,.28); }
/* Google listing: a copy as the listing photo, a title stub, stars, and a row of action chips ending in Gift cards. */
.bs-gc-listing-top { display: flex; align-items: flex-start; gap: .75rem; }
.bs-gc-listing-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem; padding-top: .15rem; }
.bs-gc-listing-text .bs-gc-stub--h { width: 80%; }
.bs-gc-stars { display: flex; gap: .15rem; }
.bs-gc-stars i { width: .6rem; height: .6rem; background: #D9A21B; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
/* A quiet map strip between the listing header and its action chips: two roads and a pin on a pale grid. */
.bs-gc-map { position: relative; flex: 1; min-height: 0; border-radius: 8px; background: linear-gradient(28deg, rgba(255,255,255,0) 46%, #fff 46% 52%, rgba(255,255,255,0) 52%), linear-gradient(-62deg, rgba(255,255,255,0) 58%, #fff 58% 63%, rgba(255,255,255,0) 63%), repeating-linear-gradient(0deg, rgba(9,64,132,.05) 0 1px, rgba(9,64,132,0) 1px 14px), repeating-linear-gradient(90deg, rgba(9,64,132,.05) 0 1px, rgba(9,64,132,0) 1px 14px), #EDF2EC; }
.bs-gc-map::after { content: ""; position: absolute; left: 56%; top: 38%; width: .7rem; height: .7rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--hgb-green-deep); box-shadow: 0 2px 4px rgba(14,31,73,.2); }
.bs-gc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: auto; }
.bs-gc-chipbtn { width: 2.6rem; height: 1.55rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(9,64,132,.16); }
.bs-gc-giftchip { display: inline-flex; align-items: center; height: 1.55rem; padding: 0 .7rem; border-radius: 999px; background: linear-gradient(rgba(61,192,102,.14), rgba(61,192,102,.14)), #fff; box-shadow: inset 0 0 0 1px rgba(47,168,90,.45); color: var(--hgb-green-deep); font-size: .75rem; font-weight: 600; line-height: 1; white-space: nowrap; }
/* Social post: avatar, name stub and the pinned label, the card as the post image, a caption stub. */
.bs-gc-post-head { display: flex; align-items: center; gap: .5rem; }
.bs-gc-post-head .bs-gc-stub--h { width: auto; flex: 1; max-width: 5rem; }
.bs-gc-avatar { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: linear-gradient(140deg, var(--hgb-green) 0%, var(--hgb-green-deep) 100%); }
.bs-gc-pin { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; padding: .2rem .5rem; border-radius: 999px; background: linear-gradient(rgba(9,64,132,.08), rgba(9,64,132,.08)), #fff; color: var(--hge-navy); font-size: .7rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.bs-gc-post-media { flex: 1; min-height: 0; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(ellipse 80% 70% at 50% 40%, #fff, rgba(255,255,255,0) 70%), #E4EAF1; }
.bs-gc-post-media .bs-gc-copy { font-size: .42rem; }
/* Counter QR: a small tent sign with the code and one line, the card propped beside it. */
.bs-gc-counter { flex-direction: row; align-items: center; justify-content: center; gap: 1rem; background: linear-gradient(180deg, #fff 0 78%, #F1EEE7 78% 100%); }
.bs-gc-sign { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .6rem .6rem .5rem; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(9,64,132,.10), 0 8px 18px rgba(14,31,73,.10); }
.bs-gc-qr { display: block; line-height: 0; color: #0B2A55; }
.bs-gc-qr svg { display: block; width: clamp(56px, 6vw, 84px); height: auto; }
.bs-gc-sign-text { font-size: .7rem; font-weight: 600; line-height: 1.2; color: var(--hge-navy); white-space: nowrap; }
.bs-gc-counter .bs-gc-copy { transform-origin: 50% 100%; rotate: -4deg; }
#show-giftcards .bs-show-cap { margin: .75rem 0 0; }
/* Short desktop windows: tighter screens so all four places keep their content inside the stage. */
@media (min-width: 768px) and (max-height: 780px) {
  .bs-gc-screen { padding: .7rem; gap: .45rem; }
  .bs-gc-body { padding: .65rem .75rem .75rem; gap: .4rem; }
  .bs-gc-copy { font-size: .32rem; }
  .bs-gc-post-media .bs-gc-copy { font-size: .36rem; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .bs-gc { --gc-card-w: 10.5rem; }
  .bs-gc-copy { font-size: .3rem; }
  .bs-gc-buy, .bs-gc-giftchip { font-size: .68rem; }
  .bs-gc-chipbtn { width: 1.6rem; }
  .bs-gc-pin { font-size: .64rem; }
}
/* Phone width: no pin; the card sits on top and the four places form a 2 by 2 grid under it. */
@media (max-width: 767px) {
  .bs-gc { --gc-card-w: min(14rem, calc(100vw - 9rem)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "master master" "web social" "google qr"; height: auto; padding: 1.25rem; gap: 1.25rem .75rem; }
  .bs-gc-master { margin-bottom: .25rem; }
  .bs-gc-screen { min-height: 9.5rem; padding: .6rem; gap: .4rem; }
  .bs-gc-body { padding: .55rem .6rem .6rem; gap: .35rem; }
  .bs-gc-row { flex-direction: column; align-items: flex-start; gap: .45rem; }
  .bs-gc-hero { padding: .45rem; }
  .bs-gc-map { min-height: 1.5rem; }
  .bs-gc-copy { font-size: .26rem; }
  .bs-gc-post-media .bs-gc-copy { font-size: .3rem; }
  .bs-gc-buy, .bs-gc-giftchip { font-size: .68rem; padding-inline: .6rem; }
  .bs-gc-chipbtn { width: 1.2rem; }
  .bs-gc-chipbtn + .bs-gc-chipbtn { display: none; }
  .bs-gc-listing-top { gap: .5rem; }
  .bs-gc-stars i { width: .5rem; height: .5rem; }
  .bs-gc-pin { font-size: .62rem; padding: .15rem .4rem; }
  .bs-gc-post-head .bs-gc-stub--h { display: none; }
  .bs-gc-counter { flex-direction: column; gap: .5rem; background: #fff; }
  .bs-gc-qr svg { width: 52px; }
  .bs-gc-label { font-size: .72rem; }
}

/* ---- Showpiece: visibility score ---- */
/* #show-score is the pinned block; .bs-sc is the framed stage. The CSS default is the final frame:
   score 7, ring 70% full, all five findings shown. Pass reads green (#1E7D44 on its tint, 4.58:1); fix reads amber (#8A4B00 on its tint, 5.8:1). */
#show-score.bs-show { overflow: visible; border-radius: 0; }
.bs-sc { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; height: clamp(420px, calc(100svh - 230px), 540px); padding: clamp(1.5rem, 3vw, 2.5rem); background: #EAEEE8; border: 1px solid rgba(9,64,132,.10); border-radius: var(--hge-radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); font-family: var(--hge-body); color: var(--hge-navy); }
.bs-sc-dial { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem); background: #fff; border-radius: var(--hge-radius); box-shadow: var(--hge-shadow); }
.bs-sc-gauge { position: relative; display: grid; place-items: center; width: clamp(150px, 15vw, 200px); aspect-ratio: 1; }
.bs-sc-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.bs-sc-track { fill: none; stroke: rgba(9,64,132,.10); stroke-width: 9; }
.bs-sc-fill { fill: none; stroke: var(--hgb-green-fill); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 30; }
.bs-sc-num { position: relative; display: flex; align-items: baseline; gap: .15rem; font-family: var(--hge-display); font-weight: 600; line-height: 1; color: var(--hge-navy); font-variant-numeric: tabular-nums; }
.bs-sc-n { display: inline-block; width: 1ch; text-align: center; font-size: clamp(3.5rem, 5.5vw, 4.75rem); font-weight: 600; letter-spacing: -.02em; }
.bs-sc-of { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--hgb-muted); letter-spacing: .02em; }
#bs-main #show-score .bs-sc-label { margin: 0; font-family: var(--hge-body); font-size: .9rem; font-weight: 600; line-height: 1.4; letter-spacing: .02em; color: var(--hge-navy); white-space: nowrap; }
.bs-sc-report { min-width: 0; background: #fff; border-radius: var(--hge-radius); box-shadow: 0 1px 2px rgba(14,31,73,.06), 0 14px 36px rgba(14,31,73,.12); overflow: hidden; }
.bs-sc-head { display: flex; align-items: center; gap: .3rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(9,64,132,.08); }
.bs-sc-dots { display: flex; gap: .3rem; }
.bs-sc-dots i { width: .45rem; height: .45rem; border-radius: 50%; background: rgba(9,64,132,.16); }
.bs-sc-url { flex: 1; max-width: 16rem; height: .75rem; margin-left: .5rem; border-radius: 999px; background: rgba(9,64,132,.07); }
#bs-main #show-score .bs-sc-list { list-style: none; margin: 0; padding: .35rem 1rem .5rem; display: grid; }
#bs-main #show-score .bs-sc-item { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: .85rem; margin: 0; padding: .8rem 0; font-size: .98rem; font-weight: 500; line-height: 1.35; color: var(--hge-navy); }
.bs-sc-item + .bs-sc-item { border-top: 1px solid rgba(9,64,132,.08); }
.bs-sc-mark { position: relative; width: 1.5rem; height: 1.5rem; border-radius: 50%; }
.bs-sc-mark::after { content: ""; position: absolute; }
.bs-sc-item--pass .bs-sc-mark { background: var(--hgb-green-fill); }
.bs-sc-item--pass .bs-sc-mark::after { left: .53rem; top: .33rem; width: .38rem; height: .66rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bs-sc-item--fix .bs-sc-mark { background: #D98A00; }
.bs-sc-item--fix .bs-sc-mark::after { left: 50%; top: .32rem; width: 2px; height: .86rem; margin-left: -1px; background: linear-gradient(#fff 0 62%, transparent 62% 76%, #fff 76% 100%); }
.bs-sc-tag { padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.bs-sc-item--pass .bs-sc-tag { background: linear-gradient(rgba(61,192,102,.14), rgba(61,192,102,.14)), #fff; color: var(--hgb-green-deep); }
.bs-sc-item--fix .bs-sc-tag { background: linear-gradient(rgba(217,138,0,.16), rgba(217,138,0,.16)), #fff; color: #8A4B00; }
#show-score .bs-show-cap { margin: .75rem 0 0; }
@media (min-width: 768px) and (max-height: 780px) {
  #bs-main #show-score .bs-sc-item { padding: .62rem 0; font-size: .92rem; }
  .bs-sc-dial { gap: .8rem; }
}
@media (max-width: 767px) {
  .bs-sc { grid-template-columns: minmax(0, 1fr); height: auto; padding: 1.25rem; gap: 1.25rem; }
  .bs-sc-dial { width: 100%; padding: 1.25rem; }
  .bs-sc-gauge { width: 150px; }
  #bs-main #show-score .bs-sc-list { padding: .25rem .85rem .4rem; }
  #bs-main #show-score .bs-sc-item { grid-template-columns: 1.35rem minmax(0, 1fr) auto; gap: .65rem; padding: .7rem 0; font-size: .9rem; }
  .bs-sc-mark { width: 1.35rem; height: 1.35rem; }
  .bs-sc-item--pass .bs-sc-mark::after { left: .47rem; top: .28rem; width: .34rem; height: .6rem; }
  .bs-sc-item--fix .bs-sc-mark::after { top: .27rem; height: .8rem; }
}

/* ---- Showpiece: website enhancement (Website Enhancements page) ---- */
/* #show-enhance is the pinned block; .bs-en is the framed stage. Before: a 2009-era small-business page (tiled
   background, glossy maroon header with a serif welcome, bevelled link buttons, a visitor counter, a clip-art photo,
   a cramped sidebar and a tiny phone line). After: a bespoke, dark cinematic homepage (layered gradient field, grain,
   an arched "photo", a big Oswald headline, a warm primary button, an editorial strip) and the same design on a phone.
   Drawn in HTML/CSS only, generic demo words only. The CSS default is the final frame (the After), which reduced motion keeps.
   Contrast on the After: cream #F6EFE6 on ink #0A1120 (16:1), sub copy at .76 alpha (10:1), ink #1A1208 on the warm
   button #E9B07A (10:1), heading ink #14182A on paper #F5EFE7 (16:1). */
#show-enhance.bs-show { overflow: visible; border-radius: 0; }
.bs-en { --en-ink: #0A1120; --en-cream: #F6EFE6; --en-warm: #E9B07A; --en-paper: #F5EFE7; position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; height: clamp(420px, calc(100svh - 230px), 540px); padding: clamp(2.75rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3.5rem) clamp(1.75rem, 3vw, 2.5rem); background: radial-gradient(120% 90% at 70% 0%, #F3F4EF 0%, #E6EAE3 60%, #DDE2DA 100%); border: 1px solid rgba(9,64,132,.10); border-radius: var(--hge-radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); font-family: var(--hge-body); color: var(--hge-navy); }
.bs-en-tag { position: absolute; top: 1rem; left: 1rem; z-index: 5; font-family: var(--hge-display); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 600; line-height: 1; color: #fff; background: rgba(9,64,132,.86); padding: .38rem .6rem; border-radius: 6px; }
.bs-en-tag--after { background: var(--hgb-green-deep); }
.bs-en-tag--before, .bs-en-old { opacity: 0; visibility: hidden; }
.bs-en :where(span, i, b) { display: block; font-style: normal; }
.bs-en :where(svg) { display: block; }
/* The set holds the desktop browser and the phone; the phone overhangs the browser's lower right corner. */
.bs-en-set { position: relative; height: 100%; aspect-ratio: 16 / 10; max-width: 86%; margin-right: 6%; }
.bs-en-desk { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(10,17,32,.08), 0 10px 24px rgba(10,17,32,.10), 0 30px 60px rgba(10,17,32,.16); container-type: inline-size; }
.bs-en-bar { flex: none; display: flex; align-items: center; gap: .3rem; padding: .6rem .9rem; background: #FAFAF8; border-bottom: 1px solid rgba(10,17,32,.07); }
.bs-en-dots { display: flex; gap: .3rem; }
.bs-en-dots i { width: .45rem; height: .45rem; border-radius: 50%; background: rgba(10,17,32,.16); }
.bs-en-url { flex: 1; max-width: 16rem; height: .7rem; margin-left: .5rem; border-radius: 999px; background: rgba(10,17,32,.06); }
.bs-en-screen { position: relative; flex: 1; min-height: 0; overflow: hidden; }

/* Before: a narrow centred page on a tiled background, everything small, glossy and crowded. */
.bs-en-old { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 2.4cqw 12cqw; background: repeating-conic-gradient(#E3D7BC 0 25%, #F0E8D6 0 50%) 0 0 / 2.2cqw 2.2cqw; font-family: Verdana, Geneva, sans-serif; }
.bs-en-old > * { background: #FBF8F0; box-shadow: 0 0 0 1px #CDBF9F; }
.bs-en-o-head { flex: none; display: flex; align-items: center; gap: 1.6cqw; height: 8.4cqw; padding: 0 1.6cqw; background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.04) 50%, rgba(0,0,0,0) 51%), linear-gradient(#8E3832, #5A1F1C); border-bottom: .4cqw solid #C9A64A; }
.bs-en-o-logo { flex: none; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3B8, #E3B73E 45%, #9C7417 100%); box-shadow: 0 0 0 .3cqw #F7E6A6, .2cqw .3cqw .4cqw rgba(0,0,0,.45); }
.bs-en-o-title { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 2.5cqw; line-height: 1; color: #F8DC7C; text-shadow: .18cqw .18cqw 0 #2A0E0C; white-space: nowrap; }
.bs-en-o-nav { flex: none; display: flex; gap: .5cqw; padding: .6cqw 1.4cqw; background: #E4D6B4; border-bottom: 1px solid #B9A57A; }
.bs-en-o-nav span { padding: .35cqw 1cqw; font-size: 1.05cqw; line-height: 1.2; color: #1B2F8A; text-decoration: underline; background: linear-gradient(#FFFDF4, #DCCB9F); border: 1px solid; border-color: #FFF #9C8A5E #9C8A5E #FFF; white-space: nowrap; }
.bs-en-o-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 24% 1fr; gap: 1.4cqw; padding: 1.4cqw; }
.bs-en-o-side { display: flex; flex-direction: column; gap: .8cqw; min-height: 0; padding: 1cqw; background: #EFE6D2; border: 1px solid #D9CCAE; }
.bs-en-o-side i { height: .9cqw; background: #2B3FA8; opacity: .55; }
.bs-en-o-side i:nth-child(odd) { width: 78%; }
.bs-en-o-ad { flex: 1; min-height: 2cqw; margin-top: .4cqw; background: repeating-linear-gradient(45deg, #D8C8A4 0 .6cqw, #E9DDC2 .6cqw 1.2cqw); border: 1px solid #C8B48A; }
.bs-en-o-count { align-self: center; padding: .3cqw .6cqw; font-family: 'Courier New', Courier, monospace; font-size: 1.1cqw; font-weight: 700; line-height: 1; letter-spacing: .15em; color: #7CFF5A; background: #111; border: .2cqw inset #777; }
.bs-en-o-main { display: flex; flex-direction: column; gap: 1.2cqw; min-width: 0; }
.bs-en-o-pic { position: relative; flex: none; overflow: hidden; height: 12cqw; width: 46%; background: linear-gradient(#7FB9F0, #CDE6FB 70%); border: .4cqw solid #fff; box-shadow: 0 0 0 1px #CDBF9F, .3cqw .3cqw .6cqw rgba(60,40,10,.35); }
.bs-en-o-sun { position: absolute; top: 1.6cqw; right: 2.4cqw; width: 3cqw; height: 3cqw; border-radius: 50%; background: #FFE14D; box-shadow: 0 0 0 .5cqw rgba(255,225,77,.35); }
.bs-en-o-hill { position: absolute; left: -10%; right: -10%; bottom: -55%; height: 100%; border-radius: 50%; background: linear-gradient(#69B04A, #3F8A2C); }
.bs-en-o-txt { display: flex; flex-direction: column; gap: .7cqw; }
.bs-en-o-txt i { height: .8cqw; background: #4F443A; opacity: .5; }
.bs-en-o-txt i:last-child { width: 60%; }
.bs-en-o-foot { flex: none; display: flex; align-items: center; gap: 1.2cqw; height: 4cqw; padding: 0 1.4cqw; background: #5A1F1C; }
.bs-en-o-foot > i { width: 8cqw; height: .8cqw; background: rgba(255,255,255,.4); }
.bs-en-o-tel { display: flex; align-items: center; gap: .4cqw; color: rgba(255,255,255,.7); }
.bs-en-o-tel svg { width: 1.1cqw; height: 1.1cqw; }
.bs-en-o-tel i { width: 6cqw; height: .7cqw; background: rgba(255,255,255,.55); }

/* After: a full-bleed cinematic hero (gradient field, warm glow, an arched photo, grain), a quiet nav, a big headline
   with one warm button, then an editorial strip peeking below the fold. */
.bs-en-new { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--en-paper); }
.bs-en-n-hero { position: relative; flex: none; height: 74%; overflow: hidden; background: var(--en-ink); color: var(--en-cream); }
.bs-en-n-bg { position: absolute; inset: -6%; background:
  radial-gradient(55% 75% at 80% 28%, rgba(233,170,110,.42), rgba(233,170,110,0) 62%),
  radial-gradient(48% 70% at 12% 95%, rgba(52,98,156,.55), rgba(52,98,156,0) 66%),
  radial-gradient(38% 50% at 52% 112%, rgba(160,74,62,.38), rgba(160,74,62,0) 70%),
  linear-gradient(158deg, #13203A 0%, #0A1120 52%, #060A13 100%); }
.bs-en-n-glow { position: absolute; top: -18cqw; right: -6cqw; width: 52cqw; height: 52cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,206,150,.34), rgba(255,206,150,.10) 55%, rgba(255,206,150,0)); mix-blend-mode: screen; }
.bs-en-n-arch { position: absolute; right: 8cqw; bottom: 0; width: 25cqw; height: 37cqw; overflow: hidden; border-radius: 12.5cqw 12.5cqw 0 0; background:
  radial-gradient(70% 38% at 50% 30%, rgba(255,236,200,.9), rgba(255,236,200,0) 70%),
  linear-gradient(180deg, #F0C58E 0%, #D88A58 34%, #8C4A3E 62%, #2B1B28 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 3cqw 6cqw rgba(0,0,0,.35); transform-origin: 50% 100%; }
.bs-en-n-arch-in { position: absolute; inset: auto -10% 0; height: 46%; background:
  radial-gradient(60% 90% at 30% 100%, #1E1422 0 60%, rgba(30,20,34,0) 61%),
  radial-gradient(70% 80% at 85% 100%, #2A1A26 0 58%, rgba(42,26,38,0) 59%),
  linear-gradient(rgba(20,14,24,0), #140E18 70%); }
.bs-en-n-grain { position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; }
.bs-en-n-sweep { position: absolute; top: -25%; bottom: -25%; left: 0; width: 24cqw; opacity: 0; visibility: hidden; background: linear-gradient(100deg, rgba(255,240,220,0) 0%, rgba(255,240,220,.10) 38%, rgba(255,248,236,.30) 50%, rgba(255,240,220,.10) 62%, rgba(255,240,220,0) 100%); mix-blend-mode: screen; transform: skewX(-16deg); }
.bs-en-n-nav { position: absolute; z-index: 2; top: 2.6cqw; left: 4.4cqw; right: 4.4cqw; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; font-size: 1.35cqw; line-height: 1; letter-spacing: .02em; }
.bs-en-n-logo { display: flex; align-items: center; gap: 1cqw; color: var(--en-cream); }
.bs-en-n-logo svg { width: 2.6cqw; height: 2.6cqw; }
.bs-en-n-logo b { width: 7cqw; height: .8cqw; border-radius: 999px; background: rgba(246,239,230,.82); }
.bs-en-n-links { display: flex; gap: 3.2cqw; margin-left: auto; color: rgba(246,239,230,.80); }
.bs-en-n-cta { margin-left: 3cqw; padding: .85cqw 1.8cqw; border: 1px solid rgba(246,239,230,.38); border-radius: 999px; color: var(--en-cream); font-weight: 500; white-space: nowrap; }
.bs-en-n-copy { position: absolute; z-index: 2; left: 4.4cqw; bottom: 6.4cqw; width: 54%; }
.bs-en-n-h { font-family: var(--hge-display); font-weight: 600; text-transform: uppercase; font-size: 8.6cqw; line-height: .9; letter-spacing: -.012em; color: var(--en-cream); }
.bs-en-n-line { overflow: hidden; padding-bottom: .06em; }
.bs-en-n-line + .bs-en-n-line { color: var(--en-warm); }
.bs-en-n-sub { margin-top: 1.8cqw; font-size: 1.6cqw; line-height: 1.4; color: rgba(246,239,230,.76); letter-spacing: .01em; }
.bs-en-n-acts { display: flex; align-items: center; gap: 2.4cqw; margin-top: 2.6cqw; }
.bs-en-n-btn { padding: 1.15cqw 2.5cqw; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,0) 55%), var(--en-warm); color: #1A1208; font-size: 1.45cqw; font-weight: 600; line-height: 1; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 .8cqw 2.4cqw rgba(233,176,122,.28), inset 0 1px 0 rgba(255,255,255,.4); }
.bs-en-n-ghost { display: flex; align-items: center; gap: .6cqw; font-size: 1.45cqw; font-weight: 500; line-height: 1; color: var(--en-cream); white-space: nowrap; }
.bs-en-n-ghost svg { width: 1.2cqw; height: 1.2cqw; }
.bs-en-n-ed { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 3cqw; align-items: start; padding: 3.2cqw 4.4cqw 0; overflow: hidden; }
.bs-en-n-photo { border-radius: .9cqw; box-shadow: 0 1.2cqw 3cqw rgba(20,24,42,.16); }
.bs-en-n-photo--a { height: 22cqw; background: radial-gradient(60% 50% at 70% 25%, rgba(255,226,186,.75), rgba(255,226,186,0) 70%), linear-gradient(140deg, #C98B5E 0%, #8A513D 55%, #3A2730 100%); }
.bs-en-n-photo--b { height: 16cqw; margin-top: 4.4cqw; background: radial-gradient(55% 45% at 30% 30%, rgba(233,176,122,.55), rgba(233,176,122,0) 70%), linear-gradient(160deg, #34507A 0%, #17253D 60%, #0C1424 100%); }
.bs-en-n-text { padding-top: .8cqw; }
.bs-en-n-kh { font-family: var(--hge-display); font-weight: 600; text-transform: uppercase; font-size: 2.5cqw; line-height: 1; letter-spacing: 0; color: #14182A; }
.bs-en-n-text i { height: .75cqw; margin-top: 1.1cqw; border-radius: 999px; background: rgba(20,24,42,.16); }
.bs-en-n-text i:first-of-type { margin-top: 1.8cqw; }
.bs-en-n-text i:last-child { width: 62%; }

/* The phone: the same After on a small screen. The phone is its own size container, so its children use cqw of the phone. */
.bs-en-phone { position: absolute; z-index: 3; right: -9%; bottom: -5%; height: 76%; aspect-ratio: 9 / 19.5; padding: 4px; border-radius: 24px; background: linear-gradient(145deg, #4A505C 0%, #1A1D24 38%, #2C3038 70%, #121419 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 4px 10px rgba(10,17,32,.18), 0 24px 50px rgba(10,17,32,.32); container-type: inline-size; }
.bs-en-p-screen { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--en-paper); }
.bs-en-p-island { position: absolute; top: 6cqw; left: 50%; width: 30cqw; height: 8.5cqw; margin-left: -15cqw; border-radius: 999px; background: #05070B; }
.bs-en-p-hero { position: relative; flex: none; height: 60%; overflow: hidden; background: radial-gradient(70% 55% at 85% 25%, rgba(233,170,110,.45), rgba(233,170,110,0) 70%), radial-gradient(60% 50% at 0% 100%, rgba(52,98,156,.5), rgba(52,98,156,0) 70%), linear-gradient(160deg, #13203A, #0A1120 55%, #060A13); }
.bs-en-p-glow { position: absolute; top: -20cqw; right: -20cqw; width: 80cqw; height: 80cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,206,150,.30), rgba(255,206,150,0)); }
.bs-en-p-arch { position: absolute; right: 7cqw; bottom: 0; width: 28cqw; height: 44cqw; border-radius: 14cqw 14cqw 0 0; background: radial-gradient(70% 38% at 50% 30%, rgba(255,236,200,.85), rgba(255,236,200,0) 70%), linear-gradient(180deg, #F0C58E, #D88A58 36%, #8C4A3E 66%, #2B1B28); opacity: .9; }
.bs-en-p-h { position: absolute; left: 9cqw; bottom: 9cqw; font-family: var(--hge-display); font-weight: 600; text-transform: uppercase; font-size: 14cqw; line-height: .92; color: var(--en-cream); }
.bs-en-p-btn { flex: none; margin: 7cqw 9cqw 0; padding: 5cqw 0; border-radius: 999px; background: var(--en-warm); color: #1A1208; text-align: center; font-size: max(.5rem, 7.5cqw); font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: 0 2cqw 5cqw rgba(233,176,122,.3); }
.bs-en-p-card { flex: 1; min-height: 0; margin: 7cqw 9cqw 0; border-radius: 5cqw 5cqw 0 0; background: radial-gradient(60% 50% at 70% 25%, rgba(255,226,186,.7), rgba(255,226,186,0) 70%), linear-gradient(140deg, #C98B5E, #8A513D 55%, #3A2730); }

/* A small browser (phone-width pages): drop the nav links, the nav button, the sub line and the text link so the
   headline and the one button stay legible. */
@container (max-width: 480px) {
  .bs-en-n-links, .bs-en-n-cta, .bs-en-n-sub, .bs-en-n-ghost { display: none; }
  .bs-en-n-copy { bottom: 7cqw; width: 60%; }
  .bs-en-n-btn { padding: .32rem .6rem; font-size: .5rem; }
  .bs-en-n-acts { margin-top: 3cqw; }
}
@media (max-width: 767px) {
  .bs-en { display: block; place-items: normal; height: auto; padding: 3rem 1rem 2.25rem; }
  /* The set plus the phone's overhang (about 95% of the stage) sits centred. */
  .bs-en-set { height: auto; width: 74%; max-width: none; aspect-ratio: 4 / 3.4; margin: 0 0 0 5.5%; }
  .bs-en-bar { padding: .45rem .6rem; }
  .bs-en-dots i { width: .35rem; height: .35rem; }
  .bs-en-phone { right: -21%; bottom: -10%; height: 88%; padding: 3px; border-radius: 15px; }
  .bs-en-p-screen { border-radius: 12px; }
  .bs-en-old { padding: 2cqw 4cqw; }
  .bs-en-n-hero { height: 78%; }
  .bs-en-tag { top: .75rem; left: .75rem; }
}
@media (prefers-reduced-transparency: reduce) { .bs-en-n-grain { display: none; } }