/* BD One-Pager — frontend styles. All colors/typography come from CSS vars set by Tools → Site Styles. */

html, body { margin:0; padding:0; background:var(--bd-c-bg); overscroll-behavior:none; }
body.bd-lock { overflow:hidden; height:100%; }
html { scroll-behavior:auto !important; }

.bd-app { position:fixed; inset:0; overflow:hidden; background:var(--bd-c-bg); color:var(--bd-c-text); -webkit-font-smoothing:antialiased; }
.bd-app *, .bd-app *::before, .bd-app *::after { box-sizing:border-box; }
.bd-app img { max-width:100%; display:block; }
.bd-app h1,.bd-app h2,.bd-app h3,.bd-app p { margin:0; }

.bd-track { position:absolute; top:0; left:0; height:100%; display:flex; will-change:transform; }
.bd-panel { position:relative; width:100vw; height:100vh; height:100svh; flex:0 0 auto; overflow:hidden; }

.bd-progress { position:fixed; left:0; bottom:0; width:100%; height:2px; background:rgba(255,255,255,.08); z-index:40; }
.bd-progress-bar { display:block; height:100%; width:0; background:var(--bd-c-accent); }

/* typography roles */
.bd-display { font-family:var(--bd-display-family); font-size:var(--bd-display-size); font-weight:var(--bd-display-weight); font-style:var(--bd-display-style); text-transform:var(--bd-display-transform); text-decoration:var(--bd-display-decoration); line-height:var(--bd-display-line); letter-spacing:var(--bd-display-ls); word-spacing:var(--bd-display-ws); color:var(--bd-display-color); mix-blend-mode:difference; white-space:nowrap; }
.bd-headline { font-family:var(--bd-headline-family); font-size:var(--bd-headline-size); font-weight:var(--bd-headline-weight); font-style:var(--bd-headline-style); text-transform:var(--bd-headline-transform); text-decoration:var(--bd-headline-decoration); line-height:var(--bd-headline-line); letter-spacing:var(--bd-headline-ls); word-spacing:var(--bd-headline-ws); color:var(--bd-headline-color); }
.bd-statement { font-family:var(--bd-statement-family); font-size:var(--bd-statement-size); font-weight:var(--bd-statement-weight); font-style:var(--bd-statement-style); text-transform:var(--bd-statement-transform); text-decoration:var(--bd-statement-decoration); line-height:var(--bd-statement-line); letter-spacing:var(--bd-statement-ls); word-spacing:var(--bd-statement-ws); color:var(--bd-statement-color); }
.bd-body { font-family:var(--bd-body-family); font-size:var(--bd-body-size); font-weight:var(--bd-body-weight); font-style:var(--bd-body-style); text-transform:var(--bd-body-transform); text-decoration:var(--bd-body-decoration); line-height:var(--bd-body-line); letter-spacing:var(--bd-body-ls); word-spacing:var(--bd-body-ws); color:var(--bd-body-color); }
.bd-label { font-family:var(--bd-label-family); font-size:var(--bd-label-size); font-weight:var(--bd-label-weight); font-style:var(--bd-label-style); text-transform:var(--bd-label-transform); text-decoration:var(--bd-label-decoration); line-height:var(--bd-label-line); letter-spacing:var(--bd-label-ls); word-spacing:var(--bd-label-ws); color:var(--bd-label-color); }
.bd-item { font-family:var(--bd-item-family); font-size:var(--bd-item-size); font-weight:var(--bd-item-weight); font-style:var(--bd-item-style); text-transform:var(--bd-item-transform); text-decoration:var(--bd-item-decoration); line-height:var(--bd-item-line); letter-spacing:var(--bd-item-ls); word-spacing:var(--bd-item-ws); color:var(--bd-item-color); }
.bd-kicker { font-family:var(--bd-kicker-family); font-size:var(--bd-kicker-size); font-weight:var(--bd-kicker-weight); font-style:var(--bd-kicker-style); text-transform:var(--bd-kicker-transform); text-decoration:var(--bd-kicker-decoration); line-height:var(--bd-kicker-line); letter-spacing:var(--bd-kicker-ls); word-spacing:var(--bd-kicker-ws); color:var(--bd-kicker-color); display:block; }
.bd-muted { color:var(--bd-c-muted); }

/* buttons */
.bd-btn { display:inline-flex; align-items:center; gap:0; border:0; cursor:pointer; background:var(--bd-c-btn_bg); font-family:var(--bd-button-family); font-size:var(--bd-button-size); font-weight:var(--bd-button-weight); text-transform:var(--bd-button-transform); line-height:var(--bd-button-line); letter-spacing:var(--bd-button-ls); color:var(--bd-button-color); border-radius:25px; position:relative; overflow:hidden; padding:5px 18px 5px 10px; transition:color .4s ease-in-out; }
.bd-btn-ico { background:var(--bd-c-accent); border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; margin-right:10px; position:relative; z-index:2; flex:0 0 auto; }
.bd-btn-ico svg { width:10px; height:16px; fill:var(--bd-c-btn_text); transition:all .4s ease-in-out; }
.bd-btn-txt { position:relative; z-index:2; padding-left:5px; color:var(--bd-c-btn_text); transition:color .4s ease-in-out; }
.bd-btn::before { content:''; position:absolute; top:0; left:0; width:50px; height:100%; background:var(--bd-c-accent); border-radius:25px; transition:width .4s ease-in-out; z-index:1; }
.bd-btn:hover::before { width:100%; }
.bd-btn:focus-visible, .bd-pp-opt:focus-visible, .bd-qty button:focus-visible,
.bd-popup-x:focus-visible, .bd-back:focus-visible { outline:2px solid var(--bd-c-accent); outline-offset:3px; }
.bd-btn:active { transform:translateY(1px); }
.bd-btn[disabled], .bd-btn.is-busy { opacity:.55; cursor:not-allowed; }

.bd-inner { width:min(1140px, 100% - 48px); margin:0 auto; height:100%; will-change:transform; }

/* panel 1 — hero */
.bd-hero { background:var(--bd-c-bg); }
.bd-hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.bd-hero-inner { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:28px; }
.bd-hero .bd-display { text-align:left; }
.bd-hero-catalog { display:flex; gap:80px; margin:26px 0 34px; }
.bd-cat { flex:1 1 25%; display:flex; }
.bd-cat .bd-label { flex:0 0 30%; text-align:center; }
.bd-cat .bd-item { flex:1; text-align:center; color:var(--bd-item-color); }
.bd-hero-bottom { display:flex; gap:80px; margin-bottom:14px; align-items:flex-end; }
.bd-hero-bottom > .bd-statement { flex:0 0 36%; }
.bd-hero-secondary { display:contents; }
.bd-social { flex:1; }
.bd-avatars { display:flex; }
.bd-avatars img { width:100px; height:100px; object-fit:cover; border-radius:50%; border:1px groove #fff2; margin-left:-10px; filter:blur(1px); }
.bd-avatars img:first-child { margin-left:0; }
.bd-rating { display:flex; align-items:center; gap:10px; margin-top:15px; }
.bd-stars { display:inline-flex; gap:2px; }
.bd-stars svg { width:16px; height:16px; fill:var(--bd-c-star_on); }
.bd-trusted { margin-top:15px; }
.bd-hero-cta { flex:0 0 24%; display:flex; flex-direction:column; gap:20px; align-items:flex-start; }

/* panel 2 */
.bd-p2 { background:var(--bd-c-surface); }
.bd-p2-inner { display:flex; flex-direction:column; justify-content:center; gap:48px; }
.bd-p2 .bd-headline { max-width:1040px; }

/* panel 3 */
.bd-p3 { background:var(--bd-c-surface); }
.bd-p3-inner { display:flex; gap:60px; align-items:center; }
.bd-p3-list { flex:0 0 40%; }
.bd-p3-row { border-bottom:1px solid var(--bd-c-border); padding:14px 0; }
.bd-p3-row .bd-item { display:block; text-align:left; }
.bd-p3-btn { margin-top:28px; }
.bd-p3-media { flex:1; min-width:0; }
.bd-p3-media img { width:100%; max-height:60vh; object-fit:cover; }
.bd-p3-caption { display:flex; gap:24px; margin-top:18px; }
.bd-p3-caption .bd-kicker { flex:0 0 38%; }
.bd-p3-caption .bd-body { flex:1; }

/* panel 4 — tunnel */
.bd-tunnel-panel { background:#000; }
.bd-spotlight { position:absolute; inset:0; background:#000; perspective:1000px; overflow:hidden; }
.bd-tunnel { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transform-style:preserve-3d; }
.bd-layer { position:absolute; }
.bd-titem { position:absolute; width:180px; height:220px; }
.bd-titem img { width:100%; height:100%; object-fit:cover; }
.bd-titem-overlay { position:absolute; inset:0; background:#000; opacity:var(--overlay,1); pointer-events:none; }
.bd-tunnel-hint { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); color:var(--bd-c-muted); letter-spacing:4px; z-index:5; opacity:.7; }

/* panel 5 */
.bd-p5 { background:var(--bd-c-surface); }
.bd-p5-inner { display:flex; gap:120px; align-items:center; }
.bd-p5-left { flex:0 0 30%; }
.bd-p5-right { flex:1; }

/* panel 6 */
.bd-p6 { background:var(--bd-c-surface); }
.bd-p6-inner { display:flex; gap:70px; align-items:center; }
.bd-p6-media { flex:0 0 44%; }
.bd-p6-media img { width:100%; max-height:78vh; object-fit:cover; }
.bd-p6-copy { flex:1; display:flex; flex-direction:column; gap:22px; align-items:flex-start; position:relative; }
.bd-p6-copy .bd-body { max-width:420px; }
.bd-p6-video { align-self:flex-end; width:38%; margin-top:8px; }
.bd-p6-video video { width:100%; display:block; }

/* popup */
.bd-popup { position:fixed; inset:0; z-index:9999; display:none; }
.bd-popup.is-open { display:block; }
.bd-popup-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(6px); }
.bd-popup-card { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(880px, 94vw); max-height:92vh; background:var(--bd-c-deep); border:1px solid var(--bd-c-border); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 40px 120px rgba(0,0,0,.6); }
.bd-popup-x { position:absolute; top:10px; right:14px; z-index:10; background:none; border:0; color:var(--bd-c-text); font-size:30px; line-height:1; cursor:pointer; opacity:.7; }
.bd-popup-x:hover { opacity:1; }
.bd-step { display:none; }
.bd-step.is-active { display:flex; }
.bd-step-product { flex-direction:row; }
.bd-pp-media { flex:0 0 44%; min-height:420px; background:#111; overflow:hidden; }
.bd-pp-media img { width:100%; height:100%; object-fit:cover; }
.bd-pp-body { flex:1; padding:38px 34px; display:flex; flex-direction:column; gap:16px; }
.bd-pp-title { font-family:var(--bd-headline-family); font-weight:var(--bd-headline-weight); text-transform:uppercase; font-size:28px; letter-spacing:-1px; color:var(--bd-c-text); }
.bd-pp-price { font-family:var(--bd-statement-family); font-size:22px; color:var(--bd-c-accent); }
.bd-pp-attr { margin-top:2px; }
.bd-pp-attr .bd-kicker { margin-bottom:8px; }
.bd-pp-opts { display:flex; gap:8px; flex-wrap:wrap; }
.bd-pp-opt { border:1px solid var(--bd-c-border); background:transparent; color:var(--bd-c-text); border-radius:20px; padding:7px 16px; cursor:pointer; font-family:var(--bd-button-family); font-size:12px; text-transform:uppercase; letter-spacing:.4px; transition:all .2s; }
.bd-pp-opt.is-sel { background:var(--bd-c-btn_bg); color:var(--bd-c-btn_text); border-color:var(--bd-c-btn_bg); }
.bd-pp-row { display:flex; gap:14px; align-items:center; margin-top:6px; }
.bd-qty { display:flex; align-items:center; border:1px solid var(--bd-c-border); border-radius:20px; overflow:hidden; }
.bd-qty button { width:36px; height:38px; background:transparent; color:var(--bd-c-text); border:0; font-size:17px; cursor:pointer; }
.bd-qty input { width:38px; height:38px; text-align:center; background:transparent; border:0; color:var(--bd-c-text); font-family:var(--bd-button-family); font-size:14px; }
.bd-pp-note { min-height:18px; color:var(--bd-c-muted); font-family:var(--bd-body-family); font-size:12px; }
.bd-pp-add.is-busy { opacity:.6; pointer-events:none; }
.bd-step-checkout { flex-direction:column; height:min(86vh, 780px); }
.bd-checkout-head { display:flex; justify-content:space-between; align-items:center; padding:14px 44px 10px 22px; }
.bd-back { background:none; border:0; color:var(--bd-c-muted); cursor:pointer; font-family:var(--bd-body-family); font-size:13px; }
.bd-back:hover { color:var(--bd-c-text); }
.bd-checkout-frame { position:relative; flex:1; background:#fff; }
.bd-checkout-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.bd-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#fff; }
.bd-loading span { width:34px; height:34px; border:3px solid #ddd; border-top-color:#111; border-radius:50%; animation:bdspin .8s linear infinite; }
@keyframes bdspin { to { transform:rotate(360deg); } }
.bd-step-thanks { align-items:center; justify-content:center; padding:70px 40px; }
.bd-thanks { text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center; max-width:420px; }
.bd-thanks-ico { width:64px; height:64px; border-radius:50%; background:var(--bd-c-accent); color:#000; font-size:30px; display:flex; align-items:center; justify-content:center; }
.bd-thanks h3 { font-family:var(--bd-headline-family); text-transform:uppercase; letter-spacing:-1px; font-size:26px; color:var(--bd-c-text); }

/* split panels (tablet/mobile overflow relief) */
.bd-split-inner { display:flex; flex-direction:column; justify-content:center; gap:22px; }
/* a block moved out of a row layout keeps its flex:1 and would stretch to full height */
.bd-split-inner > * { flex:0 0 auto; width:100%; }
.bd-split-panel .bd-split-inner > .bd-hero-secondary { display:flex; flex-direction:column; gap:20px; }
.bd-split-panel .bd-p3-media img, .bd-split-panel .bd-p6-media img { max-height:46vh; }
.bd-split-panel .bd-p6-copy { display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.bd-split-panel .bd-p6-copy .bd-body { max-width:none; }
.bd-split-panel .bd-p6-video { width:46%; align-self:flex-end; }

/* responsive */
@media (max-width:1024px) {
  .bd-hero-catalog { gap:40px; flex-wrap:wrap; }
  .bd-cat { flex:1 1 44%; }
  .bd-hero-bottom { gap:40px; }
  .bd-p5-inner { gap:60px; }
  .bd-p3-inner, .bd-p6-inner { gap:36px; }
  .bd-avatars img { width:64px; height:64px; }
}
@media (max-width:767px) {
  .bd-inner { width:calc(100% - 32px); }
  .bd-hero-video { display:none; }
  .bd-hero-inner { padding-bottom:18px; }
  .bd-hero-catalog { flex-wrap:wrap; gap:10px 18px; margin:16px 0 20px; }
  .bd-cat { flex:1 1 45%; }
  .bd-hero-bottom { flex-direction:column; gap:18px; align-items:flex-start; }
  .bd-hero-bottom > .bd-statement { flex:auto; }
  .bd-avatars img { width:44px; height:44px; margin-left:-5px; filter:blur(0.5px); }
  .bd-rating, .bd-trusted { margin-top:8px; }
  .bd-hero-cta { flex:auto; gap:12px; }
  .bd-p2-inner { gap:28px; }
  .bd-p3-inner { flex-direction:column; gap:22px; justify-content:center; align-items:stretch; }
  .bd-p3-list { flex:auto; }
  .bd-p3-media img { max-height:40vh; }
  .bd-p3-caption { flex-direction:column; gap:8px; margin-top:12px; }
  .bd-p5-inner { flex-direction:column; gap:22px; justify-content:center; align-items:flex-start; }
  .bd-p6-inner { flex-direction:column; gap:20px; justify-content:center; align-items:stretch; }
  .bd-p6-media { flex:auto; }
  .bd-p6-media img { max-height:40vh; }
  .bd-p6-video { width:55%; }
  .bd-titem { width:116px; height:145px; }
  .bd-step-product { flex-direction:column; overflow:auto; }
  .bd-pp-media { height:200px; min-height:200px; max-height:200px; flex:0 0 auto; }
  /* 44px minimum tap targets on touch screens */
  .bd-qty button { width:46px; height:46px; }
  .bd-qty input { height:46px; }
  .bd-pp-opt { padding:11px 18px; }
  .bd-popup-x { top:6px; right:8px; width:44px; height:44px; font-size:32px; }
  .bd-back { padding:10px 6px; }
  .bd-pp-attr + .bd-pp-attr { margin-top:8px; }
  .bd-pp-body { padding:22px 20px 28px; }
  .bd-popup-card { width:94vw; max-height:94vh; }
  .bd-step-checkout { height:88vh; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-btn, .bd-btn::before, .bd-btn-txt { transition:none !important; }
}

/* ============================================================
   REFINEMENT PASS
   ============================================================ */

/* avatars — back to the small scale of the original build */
.bd-avatars img { width:36px !important; height:36px !important; margin-left:-8px !important;
  filter:blur(0.5px); border:1px solid rgba(255,255,255,.16); }
.bd-avatars img:first-child { margin-left:0 !important; }

/* one background video behind the whole site */
.bd-bg { position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--bd-c-bg); }
.bd-bg-video { width:100%; height:100%; object-fit:cover; display:block; }
/* scrim: keeps the footage present while text stays comfortably readable over it */
.bd-bg::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.55); pointer-events:none; }
.bd-track { z-index:1; }
.bd-panel, .bd-hero, .bd-p2, .bd-p3, .bd-p5, .bd-p6, .bd-tunnel-panel,
.bd-split-panel, .bd-spotlight { background:transparent !important; }

/* ---- interaction states: no third-party colour may leak in ---- */
.bd-app button, .bd-popup button { background-color:transparent; }
.bd-qty button { background:transparent !important; color:var(--bd-c-text) !important;
  transition:color .25s ease, background-color .25s ease; }
.bd-qty button:hover, .bd-qty button:focus, .bd-qty button:active {
  background:transparent !important; color:var(--bd-c-accent) !important; }
.bd-qty input, .bd-qty input:focus { background:transparent !important; color:var(--bd-c-text) !important; outline:none; }
.bd-pp-opt { transition:border-color .25s ease, background-color .25s ease, color .25s ease; }
.bd-pp-opt:hover { background:transparent !important; color:var(--bd-c-text) !important; border-color:var(--bd-c-text) !important; }
.bd-pp-opt.is-sel, .bd-pp-opt.is-sel:hover, .bd-pp-opt.is-sel:focus, .bd-pp-opt.is-sel:active {
  background:var(--bd-c-btn_bg) !important; color:var(--bd-c-btn_text) !important; border-color:var(--bd-c-btn_bg) !important; }
.bd-btn, .bd-btn:hover, .bd-btn:focus, .bd-btn:active, .bd-btn:visited {
  background:var(--bd-c-btn_bg) !important; color:var(--bd-c-btn_text) !important; }
.bd-back { transition:color .25s ease; background:transparent !important; }
.bd-back:hover, .bd-back:focus { color:var(--bd-c-accent) !important; background:transparent !important; }

/* close control — square, our palette, never the Woo pink */
.bd-popup-x { width:38px; height:38px; top:14px; right:14px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent !important; border:1px solid var(--bd-c-border) !important;
  border-radius:18px; /* matches the popup card */ color:var(--bd-c-text) !important; opacity:1;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease; }
/* an SVG cross centres geometrically; the × character does not */
.bd-popup-x svg { width:14px; height:14px; display:block; fill:none;
  stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.bd-popup-x:hover, .bd-popup-x:focus, .bd-popup-x:active {
  background:var(--bd-c-accent) !important; border-color:var(--bd-c-accent) !important;
  color:var(--bd-c-btn_text) !important; }

/* ---- negative space in the order panel ---- */
/* The even half-and-half split is a desktop and tablet arrangement only.
   Unscoped it also hit the phone, where the card is a column: a 50% flex-basis
   became half the HEIGHT and width:50% half the WIDTH, so the photograph sat
   in the top-left quarter with dead black beside it. The phone keeps its
   stacked card — full-width image, 200px tall, copy underneath. */
/* Spacing inside the copy is carried by margins at every width, so the gap
   stays off on the phone too. */
.bd-pp-body { gap:0 !important; }
@media (min-width:768px) {
  .bd-pp-media { flex:0 0 50% !important; width:50%; }
  .bd-pp-body { flex:0 0 50% !important; width:50%; max-width:50%;
    padding:44px 40px 40px !important; justify-content:center; }
}
.bd-pp-body > .bd-kicker { margin-bottom:16px; }
.bd-pp-title { margin-bottom:20px !important; }
.bd-pp-price { margin-bottom:34px !important; }
.bd-pp-attr { margin-bottom:28px !important; }
.bd-pp-attr:last-of-type { margin-bottom:0 !important; }
.bd-pp-attr .bd-kicker { margin-bottom:12px !important; }
#bd-pp-attrs { margin-bottom:34px; }
.bd-pp-row { margin-top:0 !important; }
.bd-pp-note { margin-top:16px !important; }

@media (max-width:767px) {
  .bd-avatars img { width:30px !important; height:30px !important; margin-left:-6px !important; }
  .bd-popup-x { width:44px; height:44px; top:8px; right:8px; }
  .bd-popup-x svg { width:16px; height:16px; }

  /* each section carries its own CTA within one 100vh — tighten the rhythm so it fits */
  .bd-hero-inner { padding-bottom:16px; }
  .bd-hero-catalog { margin:14px 0 16px; gap:6px 14px; }
  .bd-hero-bottom { gap:14px; margin-bottom:6px; }
  .bd-rating, .bd-trusted { margin-top:8px; }
  .bd-hero-cta { gap:12px; }
  .bd-p2-inner { gap:24px; }
  .bd-p3-inner { gap:16px; }
  /* stop the stacked blocks stretching — they should sit together, centred */
  .bd-p3-list, .bd-p3-media, .bd-p6-media, .bd-p6-copy, .bd-p5-left, .bd-p5-right { flex:0 0 auto !important; }
  .bd-p3-row { padding:10px 0; }
  .bd-p3-btn { margin-top:16px; }
  .bd-p3-media img { max-height:26vh; }
  .bd-p3-caption { gap:8px; margin-top:10px; }
  .bd-p5-inner { gap:18px; }
  .bd-p6-inner { gap:16px; }
  .bd-p6-media img { max-height:20vh; }
  .bd-p6-copy { gap:14px; }
  .bd-p6-video { width:34%; margin-top:2px; }
  .bd-pp-body { padding:26px 22px 30px !important; }
  .bd-pp-price { margin-bottom:24px !important; }
  .bd-pp-attr { margin-bottom:22px !important; }
  #bd-pp-attrs { margin-bottom:26px; }
}

/* ============================================================
   DESKTOP / TABLET BAND
   Every full-height section opens on one line and closes on one
   line. 12% is the deepest margin the tallest section (the Grabba
   list, 555px) still clears on a 1366x768 laptop — the common
   screen that sets the limit — so it holds without shrinking type.
   ============================================================ */
@media (min-width:768px) {
  .bd-inner { padding-top:12vh; padding-bottom:12vh; }
  .bd-inner { padding-top:12svh; padding-bottom:12svh; }
  /* the hero stands the full band, wordmark to call-to-action */
  .bd-hero-inner { justify-content:space-between; padding-bottom:12svh; }
  .bd-p2-inner, .bd-split-inner { justify-content:flex-start; }
  /* side-by-side sections hang from the same top line rather than floating centred,
     and their two columns square off against each other top and bottom */
  .bd-p3-inner, .bd-p5-inner, .bd-p6-inner { height:auto; align-items:stretch; }
  .bd-p3-list, .bd-p6-copy { display:flex; flex-direction:column; justify-content:space-between; }
  .bd-p6-media img { max-height:72vh; }
}

/* ============================================================
   MOBILE PASS
   One rhythm for every section: the content opens 15% down the
   screen and leaves 15% clear at the foot.
   ============================================================ */
@media (max-width:767px) {
  .bd-inner { padding-top:15vh; padding-bottom:15vh; }
  .bd-inner { padding-top:15svh; padding-bottom:15svh; }

  /* every section opens on the same line; the hero also closes the band,
     its wordmark and catalogue held together at the top and the
     call-to-action carried down to the 85% line */
  .bd-hero-inner, .bd-p2-inner, .bd-split-inner { justify-content:flex-start !important; }
  /* these two carry two blocks apiece — the spare height goes between them,
     so the section stands the full band rather than trailing off early */
  .bd-p3-inner, .bd-p6-inner { justify-content:space-between !important; }
  /* the lower half takes the space that is going spare and breathes into it,
     rather than bunching against the foot of the band */
  /* one interval governs the hero: catalogue → copy, and rating → call-to-action */
  .bd-hero-inner { --bd-gap:22px; }
  .bd-hero-bottom { flex:1 1 auto !important; margin:var(--bd-gap) 0 0 !important;
    justify-content:space-between !important; gap:var(--bd-gap) !important; }
  /* the copy must not swell to soak up the free space — the gap should take it */
  .bd-hero-bottom > .bd-statement { flex:0 0 auto !important; }
  /* rating and call-to-action travel together, one interval apart */
  .bd-hero-secondary { display:flex !important; flex-direction:column;
    gap:var(--bd-gap); flex:0 0 auto; }
  .bd-hero-catalog { margin:var(--bd-gap) 0 0 !important; }
  .bd-social { flex:0 0 auto; }
  .bd-hero-cta { flex:0 0 auto; gap:16px !important; }

  /* the catalogue reads as a single left-aligned column */
  .bd-hero-catalog { flex-direction:column; flex-wrap:nowrap; gap:8px !important; }
  .bd-cat { flex:0 0 auto !important; width:100%; }
  .bd-cat .bd-label { flex:0 0 56px !important; text-align:left !important; }
  .bd-cat .bd-item { flex:1 1 auto !important; text-align:left !important; }

  /* the wordmark runs the full measure, edge to edge (size set by script) */
  .bd-hero .bd-display { display:block; width:100%; }

}

/* ============================================================
   GALLERY COPY
   On every device the statement lifts out of the horizontal flow
   and holds the top of the gallery, centred on the page, while the
   photographs keep turning behind it.
   ============================================================ */
.bd-sticky { position:absolute; top:0; left:0; right:0; z-index:20; pointer-events:none;
  opacity:0; visibility:hidden; will-change:opacity;
  background:linear-gradient(to bottom, rgba(0,0,0,.9) 0%, rgba(0,0,0,.74) 58%, rgba(0,0,0,0) 100%); }
.bd-sticky-inner { height:auto !important; padding-top:12svh !important; padding-bottom:44px !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:flex-start !important;
  gap:22px; text-align:center; transform:none !important; }
.bd-sticky-inner .bd-p5-left, .bd-sticky-inner .bd-p5-right {
  flex:0 0 auto !important; width:100%; margin:0 auto; text-align:center; }
.bd-sticky-inner .bd-p5-left { max-width:620px; }
.bd-sticky-inner .bd-p5-right { max-width:900px; }
.bd-sticky-inner .bd-kicker, .bd-sticky-inner .bd-headline { text-align:center; }
@media (max-width:767px) {
  .bd-sticky-inner { padding-top:15svh !important; padding-bottom:30px !important; gap:16px; }
}

/* short handsets: the imagery gives way so the band is kept rather than the type shrunk */
@media (max-width:767px) and (max-height:700px) {
  .bd-p3-media img { max-height:20vh; }
  .bd-p6-media img { max-height:18vh; }
  .bd-p6-video { width:32%; }
  .bd-p6-copy { gap:12px; }
}