/* ═══════════════════════════════════════════════════════════════════════════
   BREAKOUT HERO — the subject steps out of the phone.

   READ THIS BEFORE CHANGING ANYTHING.

   The effect is TWO COPIES OF THE SAME PHOTO at pixel-identical geometry,
   stacked either side of the phone frame:

     1  .bh-media            full photo, clipped to the screen rectangle
     2  .bh-ui               the live DOM booking card
     3  .bh-shell            bezel, notch, glass — pointer-events:none
     4  .bh-media--breakout  alpha cutout of the SAME photo, over the frame

   Because layers 1 and 4 are the same image at the same coordinates, the seam
   is invisible for free — there is nothing to align, and it stays aligned at
   every viewport size. Only the part of layer 4 that falls outside the screen
   rectangle reads as "breaking out".

   Do NOT flatten this into one image, and do NOT try to fake it with a
   clip-path on a single photo. Both were tried; both look wrong. The cutout is
   generated by scripts/make-cutout.py and is erased back to a crossing line
   that sits INSIDE the screen rect, so its feathered inner edge is hidden by
   identical pixels underneath.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-scaler {
  /* the design tokens live HERE, not on .bh — the scaler's aspect-ratio needs
     them, and .bh inherits them anyway */
  /* The design box must END WHERE THE PICTURE ENDS. media-x (-143) + media-w
     (600) = 457, so a 620-wide box reserved ~160px of empty space on the right
     that showed as a blue gap between the wall and the next column. */
  --bh-design-w: 470;
  --bh-design-h: 420;

  /* the on-page footprint; the design space is scaled to fit this */
  position: relative;
  width: min(100%, calc(var(--bh-design-w) * 1px));
  aspect-ratio: var(--bh-design-w) / var(--bh-design-h);
  overflow: visible;               /* any clip here kills the breakout */
  container-type: inline-size;
}

.bh {
  /* ── design space ─────────────────────────────────────────────────────────
     Every number below is in design pixels. Nothing is sized in %, so the two
     photo layers resolve against the same coordinate system. */

  /* the phone's screen rectangle, relative to the hero's top-left */
  --bh-screen-x: 18px;
  --bh-screen-y: 34px;
  --bh-screen-w: 184px;
  --bh-screen-h: 352px;
  --bh-screen-r: 26px;

  /* the photo, in that same coordinate space — wider than the screen so it
     spills. media-x is chosen so the cutout's crossing line lands inside the
     screen rect; move it and you expose the feather. */
  --bh-media-x: -143px;
  --bh-media-y: 10px;
  --bh-media-w: 600px;

  position: absolute;
  inset: 0;
  width: calc(var(--bh-design-w) * 1px);
  height: calc(var(--bh-design-h) * 1px);
  transform: scale(var(--bh-scale, 1));
  transform-origin: top left;
}

/* one transform for the whole composition — never scale layers individually */
@container (max-width: 470px) {
  .bh { --bh-scale: calc(100cqw / (var(--bh-design-w) * 1px)); }
}

/* ── layer 1 + 2: inside the screen ─────────────────────────────────────── */
.bh-clip {
  position: absolute;
  left: var(--bh-screen-x);
  top: var(--bh-screen-y);
  width: var(--bh-screen-w);
  height: var(--bh-screen-h);
  border-radius: var(--bh-screen-r);
  overflow: hidden;
  z-index: 1;
  background: #0b1330;
}

.bh-media {
  position: absolute;
  width: var(--bh-media-w);
  height: auto;
  display: block;
  max-width: none;                 /* beat any global img{max-width:100%} */
}

/* inside the clip, coordinates are relative to the screen rect, so subtract
   the screen origin — this is what keeps the two copies coincident */
.bh-clip .bh-media {
  left: calc(var(--bh-media-x) - var(--bh-screen-x));
  top: calc(var(--bh-media-y) - var(--bh-screen-y));
}

/* ── layer 4: outside, over the frame ───────────────────────────────────── */
.bh-media--breakout {
  position: absolute;
  left: var(--bh-media-x);
  top: var(--bh-media-y);
  z-index: 4;
  pointer-events: none;
  /* drop-shadow, not box-shadow: it follows the alpha channel, so the shadow
     falls from the coach's actual silhouette onto the bezel. This single
     declaration does most of the depth illusion. */
  filter: drop-shadow(-22px 16px 24px rgba(6, 18, 48, 0.46));
}

/* ── the live app UI ────────────────────────────────────────────────────── */
.bh-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-align: left;
}
.bh-status {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 13px 2px;
  font-size: 9px; font-weight: 800; color: #fff;
}
.bh-status i { margin-left: auto; display: flex; gap: 2px; align-items: flex-end; }
.bh-status i b { display: block; width: 3px; background: #fff; border-radius: 1px; }
.bh-status i b:nth-child(1) { height: 4px; }
.bh-status i b:nth-child(2) { height: 6px; }
.bh-status i b:nth-child(3) { height: 8px; opacity: .45; }
.bh-ui > .bh-spacer { flex: 1; min-height: 0; }
.bh-card {
  /* sits in the TOP half, above the photo — so it is a floating card with all
     four corners, not a sheet anchored to the bottom edge */
  margin: 0 10px; padding: 11px 12px 12px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 10px 22px -12px rgba(6, 18, 48, .5);
  flex: none;
}
.bh-card b { display: block; font-size: 15px; color: var(--ink); line-height: 1.2; }
.bh-card small { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-2); }
.bh-card small em { font-style: normal; font-weight: 800; color: #0b6b4f; }
.bh-cta {
  margin-top: 10px; padding: 10px 0; border-radius: 999px; text-align: center;
  background: var(--cta); color: var(--cta-ink); font-size: 13px; font-weight: 800;
}
.bh-tabs {
  display: flex; justify-content: space-between;
  margin: 0 10px; padding: 8px 12px 4px;
  background: #fff; font-size: 9px; font-weight: 700; color: var(--ink-3);
}
.bh-tabs i { font-style: normal; }
.bh-tabs i.on { color: var(--brand); font-weight: 800; }
.bh-home {
  margin: 0 10px 0; padding: 3px 0 7px; background: #fff;
  border-radius: 0 0 14px 14px; display: flex; justify-content: center;
}
.bh-home span { width: 62px; height: 3.5px; border-radius: 99px; background: #d5d8e4; }

/* ── layer 3: the shell ─────────────────────────────────────────────────── */
.bh-shell {
  position: absolute;
  left: calc(var(--bh-screen-x) - 7px);
  top: calc(var(--bh-screen-y) - 7px);
  width: calc(var(--bh-screen-w) + 14px);
  height: calc(var(--bh-screen-h) + 14px);
  border-radius: calc(var(--bh-screen-r) + 7px);
  z-index: 3;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 7px #10182f,        /* the bezel itself */
    inset 0 0 0 8px rgba(255, 255, 255, .10),
    0 30px 56px -26px rgba(6, 18, 48, .75);
}
/* The notch is gone. It was positioned left:50%, which centres on the 620px
   DESIGN SPACE (x=310) rather than on the phone (centre x=110) — so it floated
   out over the photo as a stray dark pill. If it comes back, anchor it to the
   screen rect: left: calc(var(--bh-screen-x) + var(--bh-screen-w) / 2). */

/* ── motion (entrance only — parallax would break the seam) ─────────────── */
@media (prefers-reduced-motion: no-preference) {
  .bh-media--breakout {
    animation: bh-step-out 620ms cubic-bezier(.2, .7, .3, 1) 140ms both;
  }
}
@keyframes bh-step-out {
  from { opacity: 0; transform: translate(-8px, 10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .bh { --bh-media-w: 520px; --bh-media-x: -124px; }
}
@media (max-width: 767px) {
  /* tighten the spill and soften the shadow rather than dropping the effect */
  .bh { --bh-media-w: 460px; --bh-media-x: -110px; }
  .bh-media--breakout { filter: drop-shadow(-12px 10px 16px rgba(6, 18, 48, .40)); }
}
@media (max-width: 400px) {
  /* below this the spill forces horizontal scroll — read as a plain mockup */
  .bh-media--breakout { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TENNIS BREAKOUT — same two-copy technique as .bh, on the freelancers
   bookings section. The pair step out of the LEFT edge of the photo card, so
   the cutout was generated with --invert (keep the left of the crossing line).
   Layers 1 and 2 are the same image at the same coordinates; do not "optimise"
   this into one flat picture.
   ═══════════════════════════════════════════════════════════════════════════ */
.tb-scaler {
  --tb-design-w: 430;
  --tb-design-h: 470;
  /* the card the pair break out of */
  --tb-frame-x: 96px;
  --tb-frame-y: 18px;
  --tb-frame-w: 318px;
  --tb-frame-h: 424px;
  --tb-frame-r: 20px;
  /* the photo, in the same coordinate space */
  --tb-media-x: -66px;
  --tb-media-y: 6px;
  --tb-media-w: 560px;

  position: relative;
  width: min(100%, calc(var(--tb-design-w) * 1px));
  aspect-ratio: var(--tb-design-w) / var(--tb-design-h);
  overflow: visible;
  container-type: inline-size;
}
.tb {
  position: absolute; inset: 0;
  width: calc(var(--tb-design-w) * 1px);
  height: calc(var(--tb-design-h) * 1px);
  transform: scale(var(--tb-scale, 1));
  transform-origin: top left;
}
@container (max-width: 430px) {
  .tb { --tb-scale: calc(100cqw / (var(--tb-design-w) * 1px)); }
}
.tb-clip {
  position: absolute;
  left: var(--tb-frame-x); top: var(--tb-frame-y);
  width: var(--tb-frame-w); height: var(--tb-frame-h);
  border-radius: var(--tb-frame-r);
  overflow: hidden; z-index: 1;
  background: #0b1330;
  box-shadow: 0 30px 60px -26px rgba(6, 18, 48, .55);
}
.tb-media { position: absolute; width: var(--tb-media-w); height: auto; display: block; max-width: none; }
.tb-clip .tb-media {
  left: calc(var(--tb-media-x) - var(--tb-frame-x));
  top: calc(var(--tb-media-y) - var(--tb-frame-y));
}
.tb-media--breakout {
  position: absolute;
  left: var(--tb-media-x); top: var(--tb-media-y);
  z-index: 3; pointer-events: none;
  filter: drop-shadow(18px 18px 26px rgba(6, 18, 48, .40));
}
.tb-dua { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(6,9,22,.55), transparent 42%); }
.tb-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(6,9,22,.74); color: #fff;
  font-size: 11.5px; font-weight: 800; padding: 6px 12px; border-radius: 999px;
}
.tb-tag .livedot { width: 7px; height: 7px; border-radius: 50%; background: #15b364;
  box-shadow: 0 0 0 3px rgba(21,179,100,.25); }

@media (prefers-reduced-motion: no-preference) {
  .tb-media--breakout { animation: tb-step-out 620ms cubic-bezier(.2,.7,.3,1) 120ms both; }
}
@keyframes tb-step-out {
  from { opacity: 0; transform: translate(10px, 10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 480px) { .tb-media--breakout { display: none; } }
/* Only the BOY breaks out; the instructor stays inside the card. The crossing
   is at 0.45 of the source width (source x 720) which maps to design x 186 —
   inside the card frame (96..414), so the feathered cut is hidden by identical
   pixels underneath. Move --tb-media-x and you expose it. */
.tb-scaler{--tb-media-x:-78px}
/* The media was 560 design px wide = 373 tall (1600x1066), but the card is 424
   tall — so the photo could never cover it and the clip's dark background
   showed through. Size the media from the FRAME HEIGHT, not by eye:
   W >= 424 * 1600/1066 = 636.  media-x is then re-derived so the crossing
   (source 720 -> mx + 720/1600*W) still lands inside the frame. */
.tb-scaler{
  --tb-media-w: 660px;   /* 660 * 1066/1600 = 440 tall, covers the 424 frame */
  --tb-media-x: -97px;   /* crossing lands at design x 200, inside 96..414 */
  --tb-media-y: 8px;     /* 8..448 covers the frame's 18..442 */
}

/* ── §6 the panel now carries ONE listing, so promote it ────────────────────
   Deleting two rows and leaving the panel its old height would read as a
   lonely list row in a tall empty box. Bigger thumb, a second detail line, a
   Manage action, and breathing room above the checkout rather than padding
   inside the row. */
#booking .bk-listing--solo{align-items:flex-start;gap:16px;padding:18px 18px 20px}
#booking .bk-thumb--lg{width:72px;height:72px;border-radius:16px;font-size:32px;flex:none}
#booking .bk-listing--solo .bk-info{flex:1;min-width:0}
#booking .bk-listing--solo .bk-info b{font-size:16.5px}
#booking .bk-sub{display:block;margin-top:2px;color:var(--ink-3)}
#booking .bk-listing--solo .bk-cap{margin-top:12px}
#booking .bk-actions{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:none}
#booking .bk-manage{
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  font-size:11.5px;font-weight:800;border-radius:999px;padding:5px 13px;cursor:pointer;
}
#booking .bk-manage:hover{border-color:var(--brand-2);color:var(--brand)}
/* breathing room above the checkout instead of a bottom-heavy panel */
#booking .bk-checkout{margin-top:22px}

/* ── §3 rotated-card stage ──────────────────────────────────────────────────
   The card is tilted. Rotate the SHARED PARENT, never the two photo copies —
   rotating them separately gives sub-pixel drift and a ghost edge along the
   child's back. Because both copies live inside the stage and share its
   origin, no offset subtraction is needed (unlike the phone hero). */
.tb-scaler{--tb-card-rot:-3deg}
.tb-clip{transform:none}
.tb{transform:scale(var(--tb-scale,1)) rotate(var(--tb-card-rot));transform-origin:50% 50%}
/* the stage must never clip — the child escapes through it */
.tb,.tb-scaler{overflow:visible}
/* the card was overlapping the panel far enough to swallow "Checkout — Khan
   family"; keep the pleasing overlap, lose the amputation */
#booking .bk-photo2{transform:translateX(-64px)}

/* ── tennis hero v3 ─────────────────────────────────────────────────────────
   §3 Left-edge break-out only. The media's bottom edge is aligned exactly to
   the card's bottom edge (both 442 in design space), so the spill terminates
   ON the card's edge rather than on a horizontal cut hanging in open space.
   Nothing passes the bottom. */
.tb-scaler{--tb-media-y:2px}

/* §6 contact shadow + ambient, so he is standing in front of the card rather
   than floating over it. Tight one grounds him, wide one gives the mass. */
.tb-media--breakout{
  filter:
    drop-shadow(-10px 10px 14px rgba(10, 22, 55, .30))
    drop-shadow(-22px 26px 38px rgba(10, 22, 55, .22));
}
/* §2 nothing may soften the escaped copy — it is the same photograph and must
   match the in-card copy pixel for pixel in the overlap */
.tb-media--breakout{opacity:1;backdrop-filter:none;image-rendering:auto}
.tb-clip .tb-media{filter:none;opacity:1}

/* §4 the panel must never lose content off the right edge */
#booking .bk-screen{max-width:100%;margin-right:0}
#booking .bk-frame{max-width:520px;margin-left:auto}
/* §5 the cutout was overlapping the text column by 55px; it must clear it by
   48. Shifting the card right is preferable to shrinking the child. */
#booking .bk-photo2{transform:translateX(46px)}
/* §3 the last 7px past the card's base — the tilt adds a little over the
   design-space alignment, so pull the media up to swallow it */
.tb-scaler{--tb-media-y:-6px}
/* §4/§5 The corridor between the text column and the panel's content was 28px
   too narrow for the composition. Rather than shrink the hero by a quarter,
   align the checkout block's content with the listing's (both now clear the
   thumbnail column) — that is a tidier panel anyway, and it buys back ~56px.
   The card may then overhang the checkout block's empty left padding, never
   its content. */
/* activly-lite.css loads after this file, so #booking .bk-checkout at equal
   specificity was winning; add a class to outrank it by source-independent
   specificity rather than reaching for !important */
#booking .bk-frame .bk-checkout{padding-left:92px}

/* §4/§5 solved numerically against both hard constraints at once:
     cutout.left  >= textColumn.right + 48   (48px clearance)
     card.right   <= checkoutText.left - 8   (no panel content covered)
   0.94 / +39px is the largest composition that satisfies both. */


/* §4/§5 measured: the composition needs 350px between the text column and the
   panel's leftmost painted content (the 72px thumbnail); only 280px existed —
   a 70px shortfall. The panel had 87px of right gutter against a 24px minimum,
   so 60px of that slack moves the panel right, and the last 10px comes off the
   composition. Both hard constraints then hold:
     cutout.left >= textColumn.right + 48
     card.right  <= panelContent.left - 8
   The card still overhangs the panel's empty left padding, which is the
   overlap worth keeping. */

/* §4/§5 ROOT CAUSE. The grid was minmax(0,.92fr) auto minmax(0,1.04fr), which
   at 1180px gives the text column 413px and the photo column only 306px — but
   the composition (127px of spill + a 223px card) needs 350. Shrinking the
   hero to 0.75 would have satisfied the constraints and gutted the artwork.
   Rebalance the columns instead: the text is a headline, a paragraph and three
   bullets, and reads fine at ~355px. */
@media(min-width:1024px){
  /* narrowing column 1 walks the whole photo+panel group left without
     touching either clearance — that is what actually moves the card left.
     translateX alone had no room, and scaling from a left origin pushed
     the card RIGHT, which is what went wrong last time. */
  #booking .bk-top3{grid-template-columns:minmax(0,.78fr) 372px minmax(0,1.04fr)}
  /* 29px right closes the text clearance to exactly 48 and still leaves 22px
     of clearance to the panel's content */
  /* card sat 66px below the panel's vertical centre (83px under its top,
     49px past its base) — lift it to centre, and ease left. */
  /* ONLY the photo moves — the panel stays put. The gap between the text
     column and the panel's left edge is 412px and the composition (143px of
     boy + a 261px card) is 404px at scale 1.10, so it fits with 4px a side.
     1.03 buys ~16px each side, then the whole footprint is centred in the gap. */
  #booking .bk-photo2{transform-origin:left center;transform:translate(6px,-66px) scale(1.03)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOOKINGS — title on top, three equal cards, overflow copy underneath.
   The bullets moved below the row so the three cards stay the same height and
   the section reads symmetrically, rather than the text column growing tall
   and dragging the row out of balance.
   ═══════════════════════════════════════════════════════════════════════════ */
#booking .bk-head{max-width:760px;margin:0 0 26px}
#booking .bk-head h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;line-height:1.08;
  margin:14px 0 0;color:var(--ink)}

#booking .bk-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;
}
#booking .bk-card{
  position:relative;border-radius:20px;padding:24px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 20px 44px -30px rgba(16,35,86,.28);
  display:flex;flex-direction:column;justify-content:center;
  min-height:360px;
}
#booking .bk-card--text p{font-size:16px;line-height:1.62;color:var(--ink-2);margin:0}
/* the boy breaks out of the middle card, so it must not clip */
#booking .bk-card--photo{overflow:visible;padding:0;background:none;border:0;box-shadow:none;
  align-items:center}
#booking .bk-card--panel{padding:0;background:none;border:0;box-shadow:none;overflow:visible}
#booking .bk-card--panel .bk-frame{max-width:none;margin:0;width:100%}

/* the copy that would not fit in the left card, symmetrical under all three */
#booking .bk-points{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
#booking .bk-points li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:14.5px;font-weight:600;color:var(--ink-2);line-height:1.5;
}
#booking .bk-tick{color:var(--brand);font-weight:900;flex:none}

@media(max-width:920px){
  #booking .bk-cards,#booking .bk-points{grid-template-columns:1fr}
  #booking .bk-card{min-height:0}
}
/* ── panel: onto the portal palette ────────────────────────────────────────
   Navy dot-grid header like the product's PageHero, white listing on the light
   canvas, gold accent on the price. */
#booking .bk-card--panel{padding:0;overflow:hidden}
#booking .bk-card--panel .bk-frame{padding:0}
#booking .bk-card--panel .bk-bar{
  background-image:var(--dots),linear-gradient(120deg,#16306e 0%,#274ba3 58%,#3f78d8 100%);
  background-size:18px 18px,cover;background-repeat:repeat,no-repeat;
  color:#fff;padding:14px 16px;border:0;
}
#booking .bk-card--panel .bk-bar b{color:#fff}
#booking .bk-card--panel .bk-dot{background:rgba(255,255,255,.4)}
#booking .bk-card--panel .bk-dot:first-child{background:var(--gold)}
#booking .bk-card--panel .bk-new{background:rgba(255,255,255,.16);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
#booking .bk-card--panel .bk-body{padding:16px;background:var(--bg)}
#booking .bk-card--panel .bk-listing--solo{background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:14px}
#booking .bk-frame .bk-checkout{background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:14px;margin-top:12px}
#booking .bk-card--panel .bk-total{color:var(--brand)}

/* ═══════════════════════════════════════════════════════════════════════════
   BOOKINGS CARDS v2 — the numbered-section language used elsewhere on the
   site: light card, a tinted header bar carrying the step number, pastel
   pills, and a per-card accent driven by --ac / --ac-soft.
   ═══════════════════════════════════════════════════════════════════════════ */
#booking .bk-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:0;
  overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;
  box-shadow:0 22px 48px -30px rgba(16,35,86,.30);min-height:380px;
  background-image:none;
}
#booking .bk-cbar{
  display:flex;align-items:center;gap:9px;flex:none;
  background:var(--ac-soft);padding:13px 16px;
}
#booking .bk-cdot{width:9px;height:9px;border-radius:50%;background:var(--ac);flex:none}
#booking .bk-cbar b{font-size:12.5px;font-weight:800;color:color-mix(in srgb,var(--ac) 68%,#000);letter-spacing:.01em}
#booking .bk-cbar i{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:700;color:color-mix(in srgb,var(--ac) 68%,#000)}

#booking .bk-cbody{padding:20px;display:flex;flex-direction:column;flex:1;min-height:0}
#booking .bk-card--text h3{margin:0;font-size:23px;font-weight:800;line-height:1.16;color:var(--ink)}
#booking .bk-card--text p{margin:11px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2)}
#booking .bk-ticks{list-style:none;margin:auto 0 0;padding:16px 0 0;display:grid;gap:9px}
#booking .bk-ticks li{display:flex;gap:9px;font-size:13px;font-weight:700;color:var(--ink-2);line-height:1.4}
#booking .bk-ticks span{color:var(--ac);font-weight:900;flex:none}

/* photo card */
#booking .bk-card--photo .bk-shot{position:relative;flex:1;min-height:0;overflow:hidden}
#booking .bk-card--photo .bk-shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;display:block}
#booking .bk-shot-pill{
  position:absolute;left:14px;bottom:14px;z-index:2;
  background:rgba(255,255,255,.94);color:var(--ink);
  font-size:11.5px;font-weight:800;padding:7px 13px;border-radius:999px;
  box-shadow:0 8px 20px -10px rgba(9,20,54,.5);
}

/* panel card sits in the same frame */
#booking .bk-card--panel{padding:0}
#booking .bk-card--panel .bk-frame{padding:0;background:none;border:0;box-shadow:none}
#booking .bk-card--panel .bk-bar{
  background:var(--ac-soft);background-image:none;color:var(--ac);padding:13px 16px;border:0;
}
#booking .bk-card--panel .bk-bar b{color:var(--ac);font-size:12.5px}
#booking .bk-card--panel .bk-dot{background:var(--ac);opacity:.3}
#booking .bk-card--panel .bk-dot:first-child{opacity:1}
#booking .bk-card--panel .bk-new{background:var(--ac);color:#fff;box-shadow:none;font-size:11px}
#booking .bk-card--panel .bk-body{padding:16px;background:#fff;flex:1}
#booking .bk-card--panel .bk-listing--solo{background:var(--bg);border:1px solid var(--line);
  border-radius:14px;padding:13px}
#booking .bk-frame .bk-checkout{background:var(--ac-soft);border:0;border-radius:14px;
  padding:13px;margin-top:12px}
#booking .bk-card--panel .bk-total{color:var(--ac)}
/* The card is a flex column but something upstream left align-items at center,
   so every child sized to its content — the header bar came out 225px wide and
   .bk-shot collapsed to ZERO width, which is why the photo vanished. */
#booking .bk-card{align-items:stretch}
/* and stop spreading the copy to the card edges — the ticks were pushed to the
   floor with margin:auto, leaving a hole in the middle of the text */
#booking .bk-ticks{margin:18px 0 0}
#booking .bk-cbody{justify-content:flex-start}


/* the panel keeps its white product surfaces, floating on the blue */
#booking .bk-card--panel .bk-bar{background:rgba(255,255,255,.12);color:#fff}
#booking .bk-card--panel .bk-bar b{color:#fff}
#booking .bk-card--panel .bk-new{background:var(--gold);color:#241a00}
#booking .bk-card--panel .bk-dot{background:rgba(255,255,255,.45)}
#booking .bk-card--panel .bk-dot:first-child{background:var(--gold)}
#booking .bk-card--panel .bk-body{background:transparent;padding:14px}
#booking .bk-card--panel .bk-listing--solo{background:#fff;border:0}
#booking .bk-frame .bk-checkout{background:rgba(255,255,255,.94);border:0}
#booking .bk-card--panel .bk-total{color:var(--brand)}

/* ── carousel: no dead band ────────────────────────────────────────────────
   .rd-track was sized to its TALLEST slide (440px) while the visible one ran
   361, leaving ~79px of empty canvas above the dots. */
.rd-track{transition:height .35s cubic-bezier(.4,0,.2,1)}
.rd-dots{margin-top:14px}

/* .rd-slide was absolutely positioned with top:0 AND bottom:0, so its height
   was the track's height — the autofit script measured the track, fed it back
   to the track, and it could never shrink. Let slides size to their content;
   the script then has a real number to work from. */
.rd-slide{bottom:auto !important;height:auto !important}
/* The autofit script kept losing a race with the carousel's own JS. Simpler
   and deterministic: only the active slide is in flow, so the track sizes to
   it naturally with no JS and no dead band. */
.rd-track{position:relative}
.rd-slide{position:relative !important;top:auto !important;left:auto !important;right:auto !important}
.rd-slide:not(.is-on){display:none !important}
























@media(max-width:900px){
  
  
}
@media(max-width:560px){}