/* ==========================================================================
   Bull Ride — Design System
   Palette derived from the Bull Ride logo: bull red, logo black, white.
   ========================================================================== */

:root {
  /* Color ------------------------------------------------------------- */
  --ink:        #101112;   /* logo black */
  --ink-2:      #1A1C1E;   /* elevated dark surface */
  --ink-3:      #2B2E31;   /* dark borders */
  --paper:      #FFFFFF;
  --paper-2:    #F4F3F0;   /* warm neutral wash */
  --line:       #E3E1DC;
  --line-2:     #EFEDE9;
  --line-dark:  rgba(255,255,255,.13);
  --muted:      #64686D;
  --muted-2:    #8A8F95;
  --muted-dark: #9AA0A6;

  --red:        #D91F26;   /* Bull Red — 5.1:1 with white */
  --red-deep:   #A8141A;
  --red-ink:    #7E0F14;
  --red-wash:   #FDEDED;

  /* Type -------------------------------------------------------------- */
  /* One family throughout. Hierarchy comes from weight, size, tracking and
     case — not from switching typefaces. */
  --font-sans:    'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-mono:    var(--font-sans);

  --fs-display: clamp(2.6rem, 6.1vw, 5.15rem);
  --fs-h2:      clamp(1.95rem, 4vw, 3.15rem);
  --fs-h3:      clamp(1.2rem, 1.7vw, 1.55rem);
  --fs-lead:    clamp(1.02rem, 1.35vw, 1.2rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.7188rem;

  /* Space ------------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --container: 1280px;
  --gutter: 24px;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16,17,18,.06), 0 2px 8px rgba(16,17,18,.04);
  --shadow-md: 0 2px 4px rgba(16,17,18,.05), 0 12px 32px rgba(16,17,18,.08);
  --shadow-lg: 0 4px 8px rgba(16,17,18,.05), 0 24px 64px rgba(16,17,18,.12);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.br {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.br-dark :focus-visible { outline-color: #FF5A60; }

.br-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
}
.br-skip:focus { left: 12px; top: 12px; }
.br-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Layout ----------------------------------------------------------------- */
.br-wrap {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
}
.br-section { padding-block: clamp(72px, 9vw, 136px); position: relative; }
.br-section--tight { padding-block: clamp(56px, 6vw, 88px); }
.br-wash { background: var(--paper-2); }
.br-dark { background: var(--ink); color: #fff; }
.br-dark .br-lead, .br-dark .br-body { color: var(--muted-dark); }
.br-rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Typography ------------------------------------------------------------- */
.br-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.035em;
  margin: 0;
}
.br-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.028em;
  margin: 0;
}
.br-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.015em;
  margin: 0;
}
.br-h4 {
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.35; margin: 0;
}
.br-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); margin: 0; }
.br-body { color: var(--muted); margin: 0; }
.br-sm { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

.br-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
  margin: 0;
}
.br-dark .br-label { color: var(--muted-dark); }
.br-label--red { color: var(--red); }
.br-mono {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.br-em { color: var(--red); }

/* Section header: mono eyebrow over a hairline — a manifest header ------- */
.br-head { max-width: 780px; }
.br-head__eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  padding-bottom: var(--s-4); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.br-dark .br-head__eyebrow { border-bottom-color: var(--line-dark); }
.br-head__eyebrow::after { content: ""; flex: 1; }
.br-head .br-lead { margin-top: var(--s-5); max-width: 60ch; }

/* Buttons ---------------------------------------------------------------- */
.br-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: -.005em;
  padding: 13px 22px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
  white-space: nowrap;
}
.br-btn:active { transform: translateY(1px); }
.br-btn svg { flex: none; }

.br-btn--primary { background: var(--red); color: #fff; }
.br-btn--primary:hover { background: var(--red-deep); }

.br-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.br-btn--ghost:hover { border-color: var(--ink); background: var(--paper-2); }
.br-dark .br-btn--ghost { color: #fff; border-color: var(--ink-3); }
.br-dark .br-btn--ghost:hover { border-color: #55595D; background: var(--ink-2); }

.br-btn--light { background: #fff; color: var(--ink); }
.br-btn--light:hover { background: var(--paper-2); }

.br-btn--sm { padding: 9px 16px; font-size: var(--fs-xs); }
.br-btn[disabled], .br-btn[aria-disabled="true"] {
  opacity: .45; pointer-events: none;
}

/* Arrow text link */
.br-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--fs-sm); color: var(--ink);
  padding-bottom: 2px;
  box-shadow: inset 0 -1px 0 var(--line);
  transition: box-shadow .2s var(--ease), color .2s var(--ease);
}
.br-link:hover { color: var(--red); box-shadow: inset 0 -1px 0 var(--red); }
.br-link svg { transition: transform .25s var(--ease-out); }
.br-link:hover svg { transform: translateX(3px); }
.br-dark .br-link { color: #fff; box-shadow: inset 0 -1px 0 var(--ink-3); }
.br-dark .br-link:hover { color: #FF5A60; box-shadow: inset 0 -1px 0 #FF5A60; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.br-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.br-nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 12px rgba(16,17,18,.05); }
.br-nav__inner {
  display: flex; align-items: center; gap: var(--s-6);
  height: 76px;
  transition: height .3s var(--ease);
}
/* logo and actions carry equal weight so the menu sits truly centred */
.br-logo, .br-nav__actions { flex: 1 1 0; min-width: 0; }
.br-nav__nav { flex: 0 0 auto; }
.br-nav__actions { justify-content: flex-end; }
.br-nav.is-stuck .br-nav__inner { height: 62px; }

.br-logo { display: flex; align-items: center; gap: 9px; flex: none; }
.br-logo img {
  height: 30px; width: auto;
  mix-blend-mode: multiply;   /* drops the mark's white plate onto any light ground */
  transition: height .3s var(--ease);
}
.br-nav.is-stuck .br-logo img { height: 26px; }
.br-logo__word {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1;
}

.br-nav__menu {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-6); list-style: none; margin: 0; padding: 0;
}
.br-nav__link {
  position: relative; font-size: var(--fs-sm); font-weight: 500;
  color: var(--muted); padding-block: 6px;
  transition: color .2s var(--ease);
}
.br-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease-out);
}
.br-nav__link:hover { color: var(--ink); }
.br-nav__link:hover::after,
.br-nav__link.is-active::after { transform: scaleX(1); }
.br-nav__link.is-active { color: var(--ink); font-weight: 600; }

/* margin-left:auto takes the row's leftover space, so the two store badges
   and the partner button sit against the right edge of the container */
.br-nav__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; margin-left: auto; }

/* Hamburger — a 46px target (above the 44px minimum), on its own surface so
   it reads as a control rather than three loose lines. The bars are centred
   by absolute positioning, which is what lets them cross cleanly into an X
   instead of drifting as the flow collapses. */
.br-burger {
  display: none; position: relative;
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper-2); color: var(--ink);
  cursor: pointer; padding: 0; place-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.br-burger:hover { background: #fff; border-color: var(--ink); }
.br-burger:active { transform: scale(.94); }
.br-burger:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.br-burger span {
  position: absolute; left: 50%; top: 50%;
  display: block; width: 19px; height: 2px; margin-left: -9.5px;
  background: currentColor; border-radius: 2px;
  transition: transform .34s var(--ease-out), opacity .18s var(--ease), width .34s var(--ease-out);
}
.br-burger span:nth-child(1) { transform: translateY(-7px); }
.br-burger span:nth-child(2) { transform: translateY(-1px); }
/* the short bottom bar gives the closed state a deliberate shape */
.br-burger span:nth-child(3) { width: 13px; transform: translateY(5px); }

.br-burger[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.br-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(-1px) rotate(45deg); }
.br-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translateY(-1px) scaleX(.4); }
.br-burger[aria-expanded="true"] span:nth-child(3) { width: 19px; transform: translateY(-1px) rotate(-45deg); }

/* Mobile drawer */
.br-drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--paper);
  padding: 100px var(--gutter) var(--s-7);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y: auto;
}
.br-drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.br-drawer__list { list-style: none; margin: 0 0 auto; padding: 0; }
.br-drawer__list li { border-bottom: 1px solid var(--line-2); }
.br-drawer__list a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  letter-spacing: -.02em; padding: var(--s-4) 0;
}
.br-drawer__actions { display: grid; gap: var(--s-3); padding-top: var(--s-6); }
.br-drawer__actions .br-btn { width: 100%; padding-block: 15px; }

@media (max-width: 1080px) {
  .br-nav__menu { gap: var(--s-5); }
}
@media (max-width: 900px) {
  .br-nav__menu { display: none; }
  .br-burger { display: grid; }
  .br-nav__actions { margin-left: auto; }
  .br-nav__actions .br-appbtn { display: none; }
  /* The partner CTA is 167px wide and was pushing the burger off the right
     edge of the screen. On mobile the header is logo + burger; the CTA and
     the store badges both live in the drawer. */
  .br-nav__actions .br-btn { display: none; }
  .br-burger { width: 44px; height: 44px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.br-hero { padding-top: calc(76px + clamp(48px, 6vw, 92px)); padding-bottom: clamp(56px, 7vw, 104px); }
.br-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(40px, 5vw, 72px); align-items: center;
}
.br-hero__eyebrow { margin-bottom: var(--s-5); }
.br-hero__title { margin-bottom: var(--s-5); max-width: 13ch; }
.br-hero__lead { max-width: 46ch; margin-bottom: var(--s-7); }
.br-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.br-hero__note {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  max-width: 44ch;
}

/* Route map visual ------------------------------------------------------- */
.br-map {
  position: relative; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: #FBFAF8;
  overflow: hidden; box-shadow: var(--shadow-lg);
  /* one shared clock, so the route, the vehicle and the drop-off pin stay
     in phase across the whole loop */
  --map-cycle: 7.2s;
}
.br-map__canvas { display: block; width: 100%; height: auto; }

.br-map__road { stroke: #E6E3DE; fill: none; stroke-linecap: round; }
.br-map__road--major { stroke: #DEDAD4; }
.br-map__block { fill: #F1EFEB; }
.br-map__water { fill: #EBEEF0; }

.br-map__route-bed { fill: none; stroke: #F0D6D7; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.br-map__route {
  fill: none; stroke: var(--red); stroke-width: 3.25;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--route-len, 900);
  stroke-dashoffset: var(--route-len, 900);
}
/* The route runs as a loop for as long as the map is on screen: it draws
   from the pickup, holds while the drop-off pin lands, then clears from the
   pickup end and starts over. Linear timing keeps the line's head and the
   vehicle locked together. */
.br-map.is-live .br-map__route {
  animation: br-draw-loop var(--map-cycle) linear infinite;
}
@keyframes br-draw-loop {
  0%, 4%    { stroke-dashoffset: var(--route-len, 900); }
  52%, 74%  { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: calc(var(--route-len, 900) * -1); }
}

.br-map__pin { opacity: 0; }
/* the pickup is the fixed point of the loop — it lands once and stays */
.br-map.is-live .br-map__pin--a { animation: br-pop .5s var(--ease-out) .15s forwards; }
.br-map.is-live .br-map__pin--b { animation: br-pin-drop var(--map-cycle) linear infinite; }
@keyframes br-pop {
  0% { opacity: 0; transform: translateY(-6px) scale(.85); }
  100% { opacity: 1; transform: none; }
}
@keyframes br-pin-drop {
  0%, 48%   { opacity: 0; transform: translateY(-6px) scale(.85);
              animation-timing-function: var(--ease-out); }
  56%, 80%  { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; }
}
.br-map__pin { transform-box: fill-box; transform-origin: center bottom; }

.br-map__vehicle { opacity: 0; }
.br-map.is-live .br-map__vehicle {
  offset-path: var(--route-path);
  offset-rotate: 0deg;
  animation: br-travel-loop var(--map-cycle) linear infinite;
}
@keyframes br-travel-loop {
  0%   { offset-distance: 0%; }
  4%   { offset-distance: 0%; opacity: 0; }
  9%   { opacity: 1; }
  52%  { offset-distance: 100%; }
  80%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Floating fare chip on the map */
.br-map__chip {
  position: absolute; top: var(--s-4); left: var(--s-4);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
}
.br-map__chip-row { display: flex; align-items: baseline; gap: var(--s-2); }
.br-map__chip-val {
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: -.02em;
}

/* ==========================================================================
   Problem — before / after
   ========================================================================== */
.br-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: var(--s-8); }
.br-split__col { background: #fff; padding: clamp(24px, 3vw, 40px); }
.br-split__col--after { background: var(--ink); color: #fff; }
.br-split__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--s-4); margin-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.br-split__col--after .br-split__head { border-bottom-color: var(--ink-3); }
.br-split__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.br-split__list li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 13px 0; font-size: var(--fs-sm);
  border-bottom: 1px solid var(--line-2);
}
.br-split__col--after .br-split__list li { border-bottom-color: rgba(255,255,255,.08); }
.br-split__list li:last-child { border-bottom: 0; }
.br-split__idx { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted-2); min-width: 22px; }
.br-split__col--after .br-split__idx { color: var(--red); }
.br-split__col--before li { color: var(--muted); }

/* ==========================================================================
   How it works — the route spine
   ========================================================================== */
.br-steps { position: relative; margin-top: var(--s-9); }
.br-steps__track {
  position: absolute; left: 0; right: 0; top: 34px; height: 2px;
  background: var(--line-2); overflow: hidden;
}
.br-steps__track::after {
  content: ""; position: absolute; inset: 0;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 1.5s var(--ease-out);
}
.br-steps.is-in .br-steps__track::after { transform: scaleX(1); }

.br-steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.br-step { position: relative; padding-top: 0; }
.br-step__num {
  font-family: var(--font-display); font-size: 2.25rem; font-weight: 700;
  letter-spacing: -.04em; line-height: 1; color: var(--ink);
  margin-bottom: var(--s-4);
}
.br-step__node {
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line);
  margin-bottom: var(--s-6);
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.br-steps.is-in .br-step__node { border-color: var(--red); }
.br-steps.is-in .br-step:first-child .br-step__node { background: var(--red); }
.br-step__title { margin-bottom: var(--s-3); }

/* ==========================================================================
   Services — large panels, not a card grid
   ========================================================================== */
.br-services { display: grid; gap: 1px; background: var(--line); margin-top: var(--s-8); border-block: 1px solid var(--line); }
.br-service {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1.05fr) auto auto;
  gap: clamp(20px, 3vw, 48px); align-items: center;
  background: #fff; padding: clamp(24px, 3.2vw, 40px) var(--s-2);
  transition: background-color .3s var(--ease);
}
.br-service:hover { background: var(--paper-2); }
.br-service > * { min-width: 0; }
.br-duo > * { min-width: 0; }
.br-service__code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted-2); }
.br-service__name { margin-bottom: 6px; }
.br-service__spec { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.br-service__tag {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 4px 8px;
}
.br-service__art { flex: none; }
.br-service__go {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--muted); flex: none;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.br-service:hover .br-service__go { background: var(--red); border-color: var(--red); color: #fff; }

/* Vehicle silhouettes drawn as flat geometry — no stock illustration */
.br-veh { display: block; }
.br-veh__body { fill: var(--ink); }
.br-veh__accent { fill: var(--red); }
.br-veh__glass { fill: #C9CDD1; }
.br-veh__wheel { fill: #2B2E31; }

/* ==========================================================================
   Product UI frames
   ========================================================================== */
.br-ui {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; box-shadow: var(--shadow-md); overflow: hidden;
}
.br-dark .br-ui { border-color: var(--ink-3); box-shadow: none; }
.br-ui__bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 12px var(--s-4); border-bottom: 1px solid var(--line);
  background: #FCFBFA;
}
.br-ui__bar-title { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.br-ui__body { padding: var(--s-5); }

/* Booking form UI */
.br-field {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 13px var(--s-4); border: 1px solid var(--line);
  border-radius: var(--r-md); margin-bottom: var(--s-3);
}
.br-field__marker { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.br-field__marker--from { background: var(--ink); }
.br-field__marker--to { background: var(--red); }
.br-field__text { min-width: 0; display: block; flex: 1; }
.br-field__label, .br-field__value { display: block; }
.br-field__label { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.br-field__value { font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.br-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: var(--s-5) 0; }
.br-picker__item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-3); text-align: center;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.br-picker__item.is-on { border-color: var(--red); background: var(--red-wash); }
.br-picker__name { font-family: var(--font-display); font-size: .8125rem; font-weight: 600; margin-top: 6px; }
.br-picker__price { font-family: var(--font-mono); font-size: .6875rem; color: var(--muted); }

.br-rows { display: grid; gap: 1px; }
.br-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 11px 0; border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-sm);
}
.br-row:last-child { border-bottom: 0; }
.br-row__k { color: var(--muted); }
.br-row__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.br-row--total { padding-top: var(--s-4); border-top: 1px solid var(--line); border-bottom: 0; margin-top: var(--s-2); }
.br-row--total .br-row__k { color: var(--ink); font-weight: 600; }
.br-row--total .br-row__v { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }

/* Two-column feature layout */
.br-duo {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
.br-duo--rev .br-duo__media { order: -1; }
.br-duo__copy .br-h2 { margin-bottom: var(--s-5); }

.br-checks { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.br-checks li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.br-checks svg { flex: none; margin-top: 3px; color: var(--red); }

/* ==========================================================================
   Live tracking
   ========================================================================== */
.br-track { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--ink-3); border-radius: var(--r-lg); overflow: hidden; margin-top: var(--s-8); }
.br-track__map { background: #16181A; position: relative; }
.br-track__panel { background: var(--ink-2); padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; }
.br-track__road { stroke: #24272A; fill: none; stroke-linecap: round; }
.br-track__block { fill: #1B1E20; }
.br-track__route { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.br-track__route-bed { fill: none; stroke: #3A2022; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

.br-track__timeline { list-style: none; margin: var(--s-6) 0 0; padding: 0; position: relative; }
.br-track__timeline li { position: relative; padding: 0 0 var(--s-6) var(--s-6); }
.br-track__timeline li::before {
  content: ""; position: absolute; left: 4px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--ink-3); background: var(--ink-2);
}
.br-track__timeline li::after {
  content: ""; position: absolute; left: 8px; top: 17px; bottom: 0; width: 1px;
  background: var(--ink-3);
}
.br-track__timeline li:last-child { padding-bottom: 0; }
.br-track__timeline li:last-child::after { display: none; }
.br-track__timeline li.is-done::before { background: var(--red); border-color: var(--red); }
.br-track__timeline li.is-now::before { border-color: var(--red); box-shadow: 0 0 0 4px rgba(217,31,38,.2); }
.br-track__step { font-family: var(--font-display); font-size: .9375rem; font-weight: 600; }
.br-track__time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted-dark); }

.br-track__eta {
  margin-top: auto; padding-top: var(--s-5); border-top: 1px solid var(--ink-3);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4);
}
.br-track__eta-val { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }

/* ==========================================================================
   Phone frame — customer & partner app
   ========================================================================== */
.br-phones { display: flex; gap: var(--s-5); align-items: flex-end; justify-content: center; }
.br-phone {
  width: 100%; max-width: 268px; flex: none;
  border: 1px solid var(--line); border-radius: 26px;
  background: #fff; padding: 9px;
  box-shadow: var(--shadow-lg);
}
.br-dark .br-phone { border-color: var(--ink-3); background: var(--ink-2); box-shadow: none; }
.br-phone--back { max-width: 232px; margin-bottom: 34px; opacity: .96; }
.br-phone__screen {
  border-radius: 18px; overflow: hidden; background: #FBFAF8;
  border: 1px solid var(--line-2);
}
.br-dark .br-phone__screen { background: #202325; border-color: #2E3134; }
.br-phone__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--s-4) 8px;
  font-family: var(--font-mono); font-size: .625rem; color: var(--muted-2);
}
.br-phone__pad { padding: var(--s-4); }

.br-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px var(--s-4); border-radius: var(--r-md);
  background: var(--red); color: #fff;
}
.br-toggle__state { font-family: var(--font-display); font-size: .875rem; font-weight: 700; }
.br-toggle__switch { width: 34px; height: 19px; border-radius: var(--r-pill); background: rgba(255,255,255,.28); position: relative; }
.br-toggle__switch::after { content: ""; position: absolute; top: 2.5px; right: 2.5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }

.br-offer {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-4); margin-top: var(--s-4);
}
.br-dark .br-offer { border-color: #34383B; }
.br-offer__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.br-offer__amt { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.03em; }
.br-offer__leg { display: flex; gap: var(--s-3); font-size: .75rem; padding: 7px 0; }
.br-offer__btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--s-2); margin-top: var(--s-4); }
.br-offer__btns .br-btn { padding: 9px 10px; font-size: .75rem; }

.br-earn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.br-earn__cell { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); }
.br-dark .br-earn__cell { border-color: #34383B; }
.br-earn__val { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }

/* Bars — real proportional data from the adjacent copy, not decoration */
.br-bars { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-top: var(--s-3); }
.br-bars span { flex: 1; background: var(--line); border-radius: 2px 2px 0 0; }
.br-dark .br-bars span { background: #34383B; }
.br-bars span:last-child { background: var(--red); }

/* ==========================================================================
   Trust
   ========================================================================== */
.br-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: var(--s-8); }
.br-trust__cell { background: #fff; padding: clamp(20px, 2.4vw, 30px); }
.br-trust__ico { color: var(--red); margin-bottom: var(--s-5); }
.br-trust__cell .br-h4 { margin-bottom: var(--s-2); }

/* ==========================================================================
   Photography slots
   ========================================================================== */
.br-photo {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line);
}
.br-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-photo__cap {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  background: rgba(16,17,18,.78); color: #fff;
  backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em;
  padding: 6px 10px; border-radius: var(--r-sm);
}
.br-photo--4x5 { aspect-ratio: 4 / 5; }
.br-photo--3x2 { aspect-ratio: 3 / 2; }
.br-photo--16x9 { aspect-ratio: 16 / 9; }

/* ==========================================================================
   Brand story + CTA
   ========================================================================== */
.br-story__quote {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.9vw, 3.1rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -.03em;
  max-width: 17ch; margin: 0;
}
.br-story__grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(40px, 5vw, 88px); align-items: center; }

.br-cta__inner {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: clamp(32px, 4vw, 64px); align-items: end;
}
.br-cta__btns { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ==========================================================================
   Footer
   ========================================================================== */
.br-foot { background: var(--ink); color: #fff; padding-top: clamp(56px, 6vw, 88px); }
.br-foot__top {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px);
  padding-bottom: var(--s-8);
}
.br-foot__logo img { height: 40px; width: auto; margin-bottom: var(--s-5); }
.br-foot__apps { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.br-app {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--ink-3); border-radius: var(--r-md);
  padding: 9px 14px; transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.br-app:hover { border-color: #55595D; background: var(--ink-2); }
.br-app__sub { font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dark); display: block; }
.br-app__name { font-family: var(--font-display); font-size: .8125rem; font-weight: 600; }

.br-foot__col h3 { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); margin: 0 0 var(--s-4); font-weight: 500; }
.br-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.br-foot__col a { font-size: var(--fs-sm); color: #D3D6D9; transition: color .2s var(--ease); }
.br-foot__col a:hover { color: #fff; }

.br-foot__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding-block: var(--s-5);
  border-top: 1px solid var(--ink-3);
}
.br-foot__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.br-foot__legal a, .br-foot__copy { font-size: var(--fs-xs); color: var(--muted-dark); }
.br-foot__legal a:hover { color: #fff; }
.br-foot__social { display: flex; gap: var(--s-2); }
.br-foot__social a {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  border: 1px solid var(--ink-3); display: grid; place-items: center;
  color: var(--muted-dark);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.br-foot__social a:hover { color: #fff; border-color: #55595D; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.br-rev { opacity: 0; transform: translateY(18px); }
.br-rev.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.br-rev--d1.is-in { transition-delay: .08s; }
.br-rev--d2.is-in { transition-delay: .16s; }
.br-rev--d3.is-in { transition-delay: .24s; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .br-nav__menu { gap: var(--s-5); }
  .br-trust { grid-template-columns: 1fr 1fr; }
  .br-service { grid-template-columns: 62px minmax(0,1fr) minmax(0,1fr) auto auto; }
}

@media (max-width: 900px) {
  /* was 20px — tighter than desktop, which read as cramped on a phone */
  :root { --gutter: 24px; }
  .br-nav__menu, .br-nav__actions .br-btn--ghost { display: none; }
  .br-burger { display: grid; }
  .br-nav__actions { margin-left: auto; }

  .br-hero__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .br-hero__title { max-width: 100%; }
  .br-duo, .br-story__grid, .br-track { grid-template-columns: 1fr; }
  .br-duo--rev .br-duo__media { order: 0; }
  .br-cta__inner { grid-template-columns: 1fr; align-items: start; }
  .br-split { grid-template-columns: 1fr; }

  /* Horizontal journey becomes a vertical timeline */
  .br-steps__track { display: none; }
  .br-steps { margin-top: var(--s-7); }
  .br-steps__grid { grid-template-columns: 1fr; gap: 0; }
  .br-step {
    display: grid; grid-template-columns: 46px minmax(0,1fr);
    gap: var(--s-4); padding-bottom: var(--s-6); position: relative;
  }
  .br-step::after {
    content: ""; position: absolute; left: 6px; top: 40px; bottom: 6px;
    width: 2px; background: var(--line-2);
  }
  .br-steps.is-in .br-step::after { background: var(--red); }
  .br-step:last-child { padding-bottom: 0; }
  .br-step:last-child::after { display: none; }
  .br-step__node { grid-row: 1; margin: 6px 0 0; }
  .br-step__num { grid-column: 2; margin-bottom: var(--s-2); font-size: 1.5rem; color: var(--muted-2); }
  .br-step__title, .br-step__copy { grid-column: 2; }

  .br-service {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-3) var(--s-4);
    padding-inline: 0; align-items: start;
  }
  .br-service__code { grid-column: 1 / -1; }
  .br-service__hd   { grid-column: 1; grid-row: 2; }
  .br-service__go   { grid-column: 2; grid-row: 2; }
  .br-service__desc { grid-column: 1 / -1; grid-row: 3; }
  .br-service__art  { display: none; }

  .br-foot__top { grid-template-columns: 1fr 1fr; }
  .br-foot__logo { grid-column: 1 / -1; }

  .br-track__map svg { width: 100%; height: auto; }
}

@media (max-width: 620px) {
  .br-trust { grid-template-columns: 1fr; }
  .br-phones { flex-direction: column; align-items: center; gap: var(--s-6); }
  .br-phone--back { margin-bottom: 0; max-width: 268px; }
  .br-picker { grid-template-columns: 1fr; }
  .br-hero__cta .br-btn { flex: 1 1 100%; }
  .br-foot__top { grid-template-columns: 1fr; }
  .br-foot__bottom { flex-direction: column; align-items: flex-start; }
  .br-map__chip { position: static; margin: var(--s-4); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .br-rev { opacity: 1; transform: none; }
  .br-map__route { stroke-dashoffset: 0; }
  .br-map__pin, .br-map__vehicle { opacity: 1; }
  .br-map__vehicle { offset-distance: 100%; }
  .br-steps__track::after { transform: scaleX(1); }
}

@media print {
  .br-nav, .br-drawer, .br-burger { display: none; }
}

/* ==========================================================================
   Header store badges — Android and iPhone kept separate on purpose. The
   official Play / App Store artwork already carries the button shape, so
   the link adds no border, padding or background of its own.
   ========================================================================== */
.br-appbtn {
  display: inline-flex; border-radius: var(--r-sm);
  transition: opacity .2s var(--ease);
}
.br-appbtn img {
  display: block; height: 38px; width: auto;
  /* the badges ship at 120x40; height drives them so the pair stays level */
}
.br-appbtn:hover { opacity: .8; }
.br-appbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.br-drawer__stores { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.br-drawer__stores .br-appbtn img { height: 44px; }

/* The badges are wider than the text buttons they replaced, and the row runs
   out of width well before the burger takes over at 900px. They step out
   first — the menu and the partner button earn the space. The drawer still
   carries both stores. */
@media (max-width: 1250px) {
  .br-nav__actions .br-appbtn { display: none; }
}

.br-foot__word {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 700;
  letter-spacing: -.035em; margin: 0;
}
.br-foot__contact { display: inline-flex; align-items: center; gap: 7px; }
.br-foot__contact svg { flex: none; opacity: .6; }

/* ==========================================================================
   Lottie holders
   ========================================================================== */
.br-lottie { display: block; width: 100%; height: 100%; }
.br-lottie--inline { width: 44px; height: 44px; flex: none; }
.br-lottie--md { width: 132px; height: 132px; }
.br-lottie--lg { width: 210px; height: 210px; margin-inline: auto; }
.br-lottie svg { display: block; }

.br-lottie-tile {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fff;
}
.br-dark .br-lottie-tile { background: var(--ink-2); border-color: var(--ink-3); }

/* ==========================================================================
   Photography — <picture> with webp + jpg, documentary captions
   ========================================================================== */
.br-photo picture, .br-photo img { display: block; width: 100%; height: 100%; }
.br-photo img { object-fit: cover; }
.br-photo--tall  { aspect-ratio: 3 / 4; }
.br-photo--wide  { aspect-ratio: 21 / 9; }
.br-photo--sq    { aspect-ratio: 1 / 1; }

/* A frame that lets the brand red sit on the image without a filter */
.br-photo--framed { border: 0; box-shadow: var(--shadow-lg); }
.br-photo__rule {
  position: absolute; left: 0; bottom: 0; height: 4px; width: 38%;
  background: var(--red);
}

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */
.br-phero { padding-top: calc(76px + clamp(40px, 5vw, 78px)); padding-bottom: clamp(40px, 5vw, 72px); }
.br-phero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
.br-phero__title { margin-bottom: var(--s-5); max-width: 15ch; }
.br-phero__lead { max-width: 48ch; }
.br-crumb { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); }
.br-crumb a { color: var(--muted-2); }
.br-crumb a:hover { color: var(--red); }
.br-crumb svg { color: var(--muted-2); flex: none; }

/* ==========================================================================
   Forms — partner application
   ========================================================================== */
.br-form { display: grid; gap: var(--s-5); }
.br-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.br-form__row { display: grid; gap: 7px; }
.br-form__row--full { grid-column: 1 / -1; }

.br-form label {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em;
  display: flex; align-items: center; gap: 7px;
}
.br-form label svg { color: var(--muted-2); flex: none; }
.br-form .br-req { color: var(--red); }

.br-input {
  width: 100%; font-family: var(--font-sans); font-size: var(--fs-sm);
  color: var(--ink); background: #fff;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  appearance: none;
}
.br-input:hover { border-color: #CFCCC6; }
.br-input:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(217,31,38,.13);
}
.br-input::placeholder { color: #A9ADB2; }
select.br-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364686D' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px;
}
.br-input--err { border-color: var(--red); background: var(--red-wash); }

.br-err {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--red-deep); margin: 0;
}
.br-err svg { flex: none; }

.br-note {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-md);
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.br-note svg { flex: none; margin-top: 2px; color: var(--red); }

.br-alert {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-5); border-radius: var(--r-md); margin-bottom: var(--s-6);
  border: 1px solid;
}
.br-alert svg { flex: none; margin-top: 1px; }
.br-alert--ok  { background: #F1F8F2; border-color: #CBE5CF; color: #235C2E; }
.br-alert--err { background: var(--red-wash); border-color: #F3C9CB; color: var(--red-ink); }
.br-alert__title { font-weight: 700; margin: 0 0 3px; }

.br-form__submit { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* Application panel sits on the dark ground so the form reads as the focus */
.br-apply {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-lg);
}
.br-apply__aside { background: var(--ink); color: #fff; padding: clamp(28px, 3.2vw, 44px); }
.br-apply__main  { padding: clamp(28px, 3.2vw, 44px); }
.br-apply__list { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.br-apply__list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--muted-dark); }
.br-apply__list svg { flex: none; margin-top: 2px; color: var(--red); }

/* ==========================================================================
   Step / requirement cards with icons
   ========================================================================== */
.br-iconrow { display: flex; gap: var(--s-4); align-items: flex-start; }
.br-iconrow__ico {
  width: 40px; height: 40px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  background: var(--red-wash); color: var(--red);
}
.br-dark .br-iconrow__ico { background: rgba(217,31,38,.16); }
.br-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.br-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 44px); }

/* ==========================================================================
   Service detail panels (services page)
   ========================================================================== */
.br-svc {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(32px, 4vw, 64px); align-items: center;
  padding-block: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line);
}
.br-svc:first-of-type { border-top: 0; }
.br-svc--rev .br-svc__media { order: -1; }
.br-svc__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
.br-svc__spec { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.br-svc__spec-v { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }

@media (max-width: 900px) {
  .br-phero__grid, .br-apply, .br-svc, .br-grid3, .br-grid2 { grid-template-columns: 1fr; }
  .br-svc--rev .br-svc__media { order: 0; }
  .br-form__grid { grid-template-columns: 1fr; }
  .br-nav__actions .br-appbtn { display: none; }
}
@media (max-width: 620px) {
  .br-svc__specs { grid-template-columns: 1fr 1fr; }
  .br-lottie--lg { width: 168px; height: 168px; }
}

/* Quick facts under a page-hero CTA — answers the first questions a
   prospective partner actually asks, instead of leaving the column empty. */
.br-facts {
  list-style: none; margin: var(--s-8) 0 0; padding: var(--s-5) 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: var(--s-3);
}
.br-facts li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.br-facts svg { flex: none; color: var(--red); }

/* Aside content sits top-aligned; the help note is pinned to the base so the
   dark panel reads as deliberate rather than half-empty next to a tall form. */
.br-apply__aside { display: flex; flex-direction: column; }
.br-apply__foot {
  margin-top: auto; padding-top: var(--s-6);
  border-top: 1px solid var(--ink-3);
}
@media (max-width: 900px) {
  .br-apply__foot { margin-top: var(--s-7); }
}

/* ==========================================================================
   MOTION SYSTEM
   Nothing is hidden unless JS has confirmed it can animate it (.has-js),
   and a watchdog force-reveals everything if observers never fire — content
   must never be stranded at opacity 0.
   ========================================================================== */
.br-rev, [data-anim] { opacity: 1; }

.has-js .br-rev,
.has-js [data-anim] { opacity: 0; will-change: opacity, transform; }

.has-js [data-anim="up"]    { transform: translateY(30px); }
.has-js [data-anim="left"]  { transform: translateX(-34px); }
.has-js [data-anim="right"] { transform: translateX(34px); }
.has-js [data-anim="scale"] { transform: scale(.94); }
.has-js [data-anim="mask"]  { opacity: 1; clip-path: inset(0 100% 0 0); }
.has-js [data-anim="rise"]  { transform: translateY(46px) scale(.985); }

.has-js .br-rev.is-in,
.has-js [data-anim].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition:
    opacity   .78s var(--ease-out),
    transform .78s var(--ease-out),
    clip-path 1s   var(--ease-out);
}
.has-js [data-anim].is-in { will-change: auto; }

/* Stagger: children lift in sequence rather than all at once */
.has-js [data-stagger] > * { opacity: 0; transform: translateY(24px); }
.has-js [data-stagger].is-in > * {
  opacity: 1; transform: none;
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
}
.has-js [data-stagger].is-in > *:nth-child(1) { transition-delay: .04s; }
.has-js [data-stagger].is-in > *:nth-child(2) { transition-delay: .12s; }
.has-js [data-stagger].is-in > *:nth-child(3) { transition-delay: .20s; }
.has-js [data-stagger].is-in > *:nth-child(4) { transition-delay: .28s; }
.has-js [data-stagger].is-in > *:nth-child(5) { transition-delay: .36s; }
.has-js [data-stagger].is-in > *:nth-child(6) { transition-delay: .44s; }

/* Hero load sequence — plays immediately, no scroll required */
.has-js [data-enter] > * { opacity: 0; transform: translateY(26px); }
.has-js [data-enter].is-ready > * {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.has-js [data-enter].is-ready > *:nth-child(1) { transition-delay: .06s; }
.has-js [data-enter].is-ready > *:nth-child(2) { transition-delay: .16s; }
.has-js [data-enter].is-ready > *:nth-child(3) { transition-delay: .26s; }
.has-js [data-enter].is-ready > *:nth-child(4) { transition-delay: .36s; }
.has-js [data-enter].is-ready > *:nth-child(5) { transition-delay: .46s; }

/* Photos: gentle drift as they pass through the viewport */
.br-photo img { transition: transform 1.1s var(--ease-out); }
.br-photo--zoom img { transform: scale(1.06); }
.br-photo--zoom.is-in img { transform: scale(1); }
a:hover > .br-photo img,
.br-svc__media:hover .br-photo img { transform: scale(1.035); }

/* Underline that draws in under a section heading */
.br-underline { position: relative; display: inline-block; }
.br-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
}
.has-js .br-underline.is-in::after,
.br-underline.is-in::after { transform: scaleX(1); transition: transform .9s var(--ease-out) .18s; }

/* ==========================================================================
   BEFORE / AFTER — both halves stay visible, so the comparison survives
   after the animation finishes. The red seam is the grid gap itself.
   ========================================================================== */
.br-ba {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  background: var(--red);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 11;
}
.br-ba__half { position: relative; overflow: hidden; margin: 0; }
.br-ba__half img { width: 100%; height: 100%; object-fit: cover; display: block; }

.br-ba__half--before img { filter: grayscale(1) brightness(.62) contrast(1.05); }
.br-ba__half--after  img { filter: saturate(1.04); }

.has-js .br-ba__half--before { opacity: 0; transform: translateX(-22px); }
.has-js .br-ba__half--after  { opacity: 0; transform: translateX(22px); }
.has-js .br-ba.is-in .br-ba__half--before,
.has-js .br-ba.is-in .br-ba__half--after {
  opacity: 1; transform: none;
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.has-js .br-ba.is-in .br-ba__half--after { transition-delay: .16s; }

/* the "after" frame lifts out of grey as it settles */
.has-js .br-ba__half--after img { filter: grayscale(1) brightness(.7); }
.has-js .br-ba.is-in .br-ba__half--after img {
  filter: saturate(1.04) grayscale(0) brightness(1);
  transition: filter 1.1s var(--ease-out) .5s;
}
.br-ba__half--after img { transform: scale(1.05); }
.br-ba.is-in .br-ba__half--after img { transform: scale(1); transition: transform 1.4s var(--ease-out), filter 1.1s var(--ease-out) .5s; }

.br-ba__tag {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 7px 11px; border-radius: var(--r-sm);
  background: rgba(16,17,18,.8); color: #fff; backdrop-filter: blur(6px);
}
.br-ba__tag--on { background: var(--red); }

/* The two lists, side by side under the visual */
.br-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 56px); margin-top: var(--s-8); }
.br-compare__col > .br-label { padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-dark); }
.br-compare__list { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.br-compare__list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.br-compare__list svg { flex: none; margin-top: 2px; }
.br-compare__col--old li { color: var(--muted-dark); }
.br-compare__col--old svg { color: #6E7378; }
.br-compare__col--new svg { color: var(--red); }

/* ==========================================================================
   Marquee — a quiet band of what actually moves on the platform
   ========================================================================== */
.br-band { overflow: hidden; border-block: 1px solid var(--line-dark); padding-block: var(--s-5); }
.br-band__track { display: flex; gap: var(--s-8); width: max-content; animation: br-marquee 38s linear infinite; }
.br-band:hover .br-band__track { animation-play-state: paused; }
.br-band__item {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-sm); color: var(--muted-dark); white-space: nowrap;
}
.br-band__item svg { color: var(--red); flex: none; }
@keyframes br-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .br-compare { grid-template-columns: 1fr; }
  .br-ba { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .br-rev, [data-anim], [data-stagger] > *, [data-enter] > * {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .br-ba__layer--after { clip-path: inset(0 0 0 0) !important; }
  .br-ba__seam { display: none; }
  .br-band__track { animation: none; }
  .br-photo--zoom img { transform: none; }
  .br-underline::after { transform: scaleX(1); }
}

/* ==========================================================================
   FULL-BLEED BAND — "Thousands of streets. One way to move through them."
   The claim is drawn, not just stated: a grid of streets fades up, then a
   single red route threads through it. Anime.js drives the sequence.
   ========================================================================== */
.br-bleed { position: relative; overflow: hidden; background: var(--ink); isolation: isolate; }
.br-bleed picture, .br-bleed img { display: block; width: 100%; }
.br-bleed img {
  height: clamp(360px, 48vw, 600px); object-fit: cover;
  opacity: .46; transform: scale(1.09);
}

/* street grid + route overlay */
.br-bleed__map {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; pointer-events: none;
}
.br-bleed__streets line {
  stroke: rgba(255,255,255,.30); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.br-bleed__route {
  fill: none; stroke: var(--red); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 10px rgba(217,31,38,.55));
}
.br-bleed__dot      { fill: rgba(217,31,38,.35); opacity: 0; }
.br-bleed__dot-core { fill: #fff; opacity: 0; }

/* copy */
.br-bleed__inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(32px, 5vw, 68px);
}
.br-bleed__eyebrow {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
  margin: 0 0 var(--s-5);
}
.br-bleed__quote {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.1vw, 3.4rem);
  font-weight: 700; line-height: 1.03; letter-spacing: -.033em;
  color: #fff; margin: 0; max-width: 20ch;
  text-shadow: 0 2px 26px rgba(0,0,0,.5);
}
/* each line is a mask; its inner span is what slides up */
.br-bleed__line { display: block; }
.br-bleed__quote em { font-style: normal; color: var(--red); }

@media (max-width: 620px) {
  .br-bleed__quote { max-width: none; }
  .br-bleed__streets line { stroke: rgba(255,255,255,.22); }
}

@media (prefers-reduced-motion: reduce) {
  .br-bleed img { transform: scale(1); }
  .br-bleed__dot, .br-bleed__dot-core { display: none; }
  .br-bleed__route { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* Quick facts under a page-hero CTA — answers the first questions a
   prospective partner actually asks, instead of leaving the column empty. */
.br-facts {
  list-style: none; margin: var(--s-8) 0 0; padding: var(--s-5) 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: var(--s-3);
}
.br-facts li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.br-facts svg { flex: none; color: var(--red); }

/* Aside content sits top-aligned; the help note is pinned to the base so the
   dark panel reads as deliberate rather than half-empty next to a tall form. */
.br-apply__aside { display: flex; flex-direction: column; }
.br-apply__foot {
  margin-top: auto; padding-top: var(--s-6);
  border-top: 1px solid var(--ink-3);
}
@media (max-width: 900px) {
  .br-apply__foot { margin-top: var(--s-7); }
}

/* ==========================================================================
   MOTION SYSTEM
   Nothing is hidden unless JS has confirmed it can animate it (.has-js),
   and a watchdog force-reveals everything if observers never fire — content
   must never be stranded at opacity 0.
   ========================================================================== */
.br-rev, [data-anim] { opacity: 1; }

.has-js .br-rev,
.has-js [data-anim] { opacity: 0; will-change: opacity, transform; }

.has-js [data-anim="up"]    { transform: translateY(30px); }
.has-js [data-anim="left"]  { transform: translateX(-34px); }
.has-js [data-anim="right"] { transform: translateX(34px); }
.has-js [data-anim="scale"] { transform: scale(.94); }
.has-js [data-anim="mask"]  { opacity: 1; clip-path: inset(0 100% 0 0); }
.has-js [data-anim="rise"]  { transform: translateY(46px) scale(.985); }

.has-js .br-rev.is-in,
.has-js [data-anim].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition:
    opacity   .78s var(--ease-out),
    transform .78s var(--ease-out),
    clip-path 1s   var(--ease-out);
}
.has-js [data-anim].is-in { will-change: auto; }

/* Stagger: children lift in sequence rather than all at once */
.has-js [data-stagger] > * { opacity: 0; transform: translateY(24px); }
.has-js [data-stagger].is-in > * {
  opacity: 1; transform: none;
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
}
.has-js [data-stagger].is-in > *:nth-child(1) { transition-delay: .04s; }
.has-js [data-stagger].is-in > *:nth-child(2) { transition-delay: .12s; }
.has-js [data-stagger].is-in > *:nth-child(3) { transition-delay: .20s; }
.has-js [data-stagger].is-in > *:nth-child(4) { transition-delay: .28s; }
.has-js [data-stagger].is-in > *:nth-child(5) { transition-delay: .36s; }
.has-js [data-stagger].is-in > *:nth-child(6) { transition-delay: .44s; }

/* Hero load sequence — plays immediately, no scroll required */
.has-js [data-enter] > * { opacity: 0; transform: translateY(26px); }
.has-js [data-enter].is-ready > * {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.has-js [data-enter].is-ready > *:nth-child(1) { transition-delay: .06s; }
.has-js [data-enter].is-ready > *:nth-child(2) { transition-delay: .16s; }
.has-js [data-enter].is-ready > *:nth-child(3) { transition-delay: .26s; }
.has-js [data-enter].is-ready > *:nth-child(4) { transition-delay: .36s; }
.has-js [data-enter].is-ready > *:nth-child(5) { transition-delay: .46s; }

/* Photos: gentle drift as they pass through the viewport */
.br-photo img { transition: transform 1.1s var(--ease-out); }
.br-photo--zoom img { transform: scale(1.06); }
.br-photo--zoom.is-in img { transform: scale(1); }
a:hover > .br-photo img,
.br-svc__media:hover .br-photo img { transform: scale(1.035); }

/* Underline that draws in under a section heading */
.br-underline { position: relative; display: inline-block; }
.br-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
}
.has-js .br-underline.is-in::after,
.br-underline.is-in::after { transform: scaleX(1); transition: transform .9s var(--ease-out) .18s; }

/* ==========================================================================
   BEFORE / AFTER — both halves stay visible, so the comparison survives
   after the animation finishes. The red seam is the grid gap itself.
   ========================================================================== */
.br-ba {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  background: var(--red);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 11;
}
.br-ba__half { position: relative; overflow: hidden; margin: 0; }
.br-ba__half img { width: 100%; height: 100%; object-fit: cover; display: block; }

.br-ba__half--before img { filter: grayscale(1) brightness(.62) contrast(1.05); }
.br-ba__half--after  img { filter: saturate(1.04); }

.has-js .br-ba__half--before { opacity: 0; transform: translateX(-22px); }
.has-js .br-ba__half--after  { opacity: 0; transform: translateX(22px); }
.has-js .br-ba.is-in .br-ba__half--before,
.has-js .br-ba.is-in .br-ba__half--after {
  opacity: 1; transform: none;
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.has-js .br-ba.is-in .br-ba__half--after { transition-delay: .16s; }

/* the "after" frame lifts out of grey as it settles */
.has-js .br-ba__half--after img { filter: grayscale(1) brightness(.7); }
.has-js .br-ba.is-in .br-ba__half--after img {
  filter: saturate(1.04) grayscale(0) brightness(1);
  transition: filter 1.1s var(--ease-out) .5s;
}
.br-ba__half--after img { transform: scale(1.05); }
.br-ba.is-in .br-ba__half--after img { transform: scale(1); transition: transform 1.4s var(--ease-out), filter 1.1s var(--ease-out) .5s; }

.br-ba__tag {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 7px 11px; border-radius: var(--r-sm);
  background: rgba(16,17,18,.8); color: #fff; backdrop-filter: blur(6px);
}
.br-ba__tag--on { background: var(--red); }

/* The two lists, side by side under the visual */
.br-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 56px); margin-top: var(--s-8); }
.br-compare__col > .br-label { padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-dark); }
.br-compare__list { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.br-compare__list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.br-compare__list svg { flex: none; margin-top: 2px; }
.br-compare__col--old li { color: var(--muted-dark); }
.br-compare__col--old svg { color: #6E7378; }
.br-compare__col--new svg { color: var(--red); }

/* ==========================================================================
   Marquee — a quiet band of what actually moves on the platform
   ========================================================================== */
.br-band { overflow: hidden; border-block: 1px solid var(--line-dark); padding-block: var(--s-5); }
.br-band__track { display: flex; gap: var(--s-8); width: max-content; animation: br-marquee 38s linear infinite; }
.br-band:hover .br-band__track { animation-play-state: paused; }
.br-band__item {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-sm); color: var(--muted-dark); white-space: nowrap;
}
.br-band__item svg { color: var(--red); flex: none; }
@keyframes br-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .br-compare { grid-template-columns: 1fr; }
  .br-ba { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .br-rev, [data-anim], [data-stagger] > *, [data-enter] > * {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .br-ba__layer--after { clip-path: inset(0 0 0 0) !important; }
  .br-ba__seam { display: none; }
  .br-band__track { animation: none; }
  .br-photo--zoom img { transform: none; }
  .br-underline::after { transform: scaleX(1); }
}


/* Step badge animation sits out of the flow so the four steps stay aligned */
.br-step { position: relative; }
.br-step__lottie {
  position: absolute; top: -6px; right: 0;
  width: 42px; height: 42px; pointer-events: none;
}
@media (max-width: 900px) {
  .br-step__lottie { top: 0; right: 0; width: 34px; height: 34px; }
}

/* Once the "after" frame has wiped across, the old-way label must go with it */
.br-ba.is-in .br-ba__tag--before {
  opacity: 0;
  transition: opacity .45s var(--ease) 1.35s;
}

/* Reveal transforms (translateX) and marquee tracks must never widen the
   document, even for the moment before they settle. */
.br-section, .br-bleed, .br-band, .br-phero { overflow-x: clip; }
@supports not (overflow-x: clip) {
  .br-section, .br-bleed, .br-band, .br-phero { overflow-x: hidden; }
}
/* smaller travel on narrow screens so nothing swings out of frame */
@media (max-width: 620px) {
  .has-js [data-anim="left"]  { transform: translateX(-16px); }
  .has-js [data-anim="right"] { transform: translateX(16px); }
  .has-js .br-ba__half--before { transform: translateX(-10px); }
  .has-js .br-ba__half--after  { transform: translateX(10px); }
}

/* ==========================================================================
   SERVICE GRID — photography-led, asymmetric so it doesn't read as a card row
   ========================================================================== */
.br-sgrid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  /* explicit row heights so the two cards in a row bottom-align */
  grid-template-rows: clamp(300px, 33vw, 430px) clamp(280px, 29vw, 380px);
  gap: clamp(12px, 1.4vw, 20px); margin-top: var(--s-8);
}
.br-scard {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--ink); display: block; isolation: isolate;
  min-height: 260px;
  /* min-height + aspect-ratio (set at the mobile breakpoints) would otherwise
     grow the card's WIDTH to satisfy the ratio, pushing it past its grid
     track and off the side of the screen. The track owns the width. */
  max-width: 100%;
}
.br-scard:nth-child(1) { grid-column: span 7; }
.br-scard:nth-child(2) { grid-column: span 5; }
.br-scard:nth-child(3) { grid-column: span 5; }
.br-scard:nth-child(4) { grid-column: span 7; }
.br-scard--tall, .br-scard--flat { height: 100%; }

.br-scard img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  transform: scale(1.04);
  transition: transform 1.2s var(--ease-out), filter .6s var(--ease);
}
.br-scard.is-in img { transform: scale(1); }
.br-scard:hover img { transform: scale(1.07); }

/* Legibility floor for the text, weighted to the bottom of the frame */
.br-scard::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(12,13,14,.92) 0%, rgba(12,13,14,.66) 32%, rgba(12,13,14,.12) 68%, rgba(12,13,14,0) 100%);
}
.br-scard__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(20px, 2.4vw, 32px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4);
}
.br-scard__code { color: rgba(255,255,255,.62); margin-bottom: var(--s-3); }
.br-scard__name {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: clamp(1.3rem, 2.1vw, 1.85rem); letter-spacing: -.025em; line-height: 1.05;
  margin: 0 0 var(--s-3);
}
.br-scard__desc { color: rgba(255,255,255,.78); font-size: var(--fs-sm); margin: 0; max-width: 42ch; }
.br-scard__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.br-scard__tag {
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; border: 1px solid rgba(255,255,255,.34); border-radius: var(--r-sm);
  padding: 4px 9px; backdrop-filter: blur(4px);
}
.br-scard__go {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  border: 1px solid rgba(255,255,255,.36);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.br-scard:hover .br-scard__go {
  background: var(--red); border-color: var(--red); transform: translateX(3px);
}
/* red keyline that draws along the base on hover */
.br-scard__rule {
  position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; z-index: 3;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.br-scard:hover .br-scard__rule { transform: scaleX(1); }

/* ==========================================================================
   OVERLAP COMPOSITION — a photograph with real product UI sitting on it
   ========================================================================== */
.br-show { position: relative; }
.br-show__photo { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.br-show__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.br-show__photo { aspect-ratio: 5 / 4; }

.br-show__card {
  /* kept deliberately under two-thirds so the photograph still reads */
  position: absolute; z-index: 2; width: min(62%, 296px);
  border-radius: var(--r-md); background: #fff;
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 16px 44px rgba(16,17,18,.34);
  backdrop-filter: saturate(180%) blur(2px);
}
.br-show__card--br { right: clamp(12px, 1.4vw, 20px); bottom: clamp(12px, 1.4vw, 20px); }
.br-show__card--bl { left: clamp(12px, 1.4vw, 20px);  bottom: clamp(12px, 1.4vw, 20px); }
.br-show__card--tr { right: clamp(12px, 1.4vw, 20px); top: clamp(12px, 1.4vw, 20px); }
.br-dark .br-show__card { background: var(--ink-2); border-color: var(--ink-3); }

.br-show__badge {
  position: absolute; z-index: 3; width: 84px; height: 84px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-md);
  display: grid; place-items: center;
}
.br-show__badge--tl { left: 14px; top: 14px; }
.br-show__badge--tr { right: 14px; top: 14px; }
.br-dark .br-show__badge { background: var(--ink-2); }
.br-show__badge > div { width: 62px; height: 62px; }

/* Phone that hangs off the edge of a photograph */
.br-show__phone {
  position: absolute; z-index: 2; width: min(44%, 222px);
  left: clamp(14px, 1.6vw, 22px); bottom: clamp(14px, 1.6vw, 22px);
}
.br-show__phone--right { left: auto; right: clamp(14px, 1.6vw, 22px); }
.br-show__phone .br-phone { max-width: 100%; }

.has-js .br-show__card,
.has-js .br-show__phone,
.has-js .br-show__badge { opacity: 0; transform: translateY(22px) scale(.97); }
.has-js .br-show.is-in .br-show__card,
.has-js .br-show.is-in .br-show__phone,
.has-js .br-show.is-in .br-show__badge {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out) .28s, transform .7s var(--ease-out) .28s;
}

@media (max-width: 1080px) {
  .br-scard:nth-child(n) { grid-column: span 6; }
  .br-sgrid { grid-template-rows: none; }
  .br-scard--tall, .br-scard--flat { height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  .br-scard:nth-child(n) { grid-column: span 12; }
  .br-sgrid { grid-template-rows: none; }
  .br-scard--tall, .br-scard--flat { height: auto; aspect-ratio: 3 / 2; }
  .br-show { padding-bottom: 40px; }
  .br-show__card { position: static; width: 100%; margin-top: var(--s-4); }
  /* was min(70%, 240px) — a 240px-wide panel on a 412px screen left the
     booking UI unreadable. It takes the full column instead. */
  .br-show__phone { position: static; width: 100%; margin: var(--s-5) 0 0; }
  .br-show__phone .br-phone { max-width: none; border-radius: 22px; padding: 10px; }
  .br-show__phone .br-phone__screen { border-radius: 16px; }
  /* the type was sized for a 240px mock; it scales up with the frame */
  .br-show__phone .br-phone__top { font-size: .6875rem; padding: 12px var(--s-4) 10px; }
  .br-show__phone .br-field__label { font-size: .6875rem; }
  .br-show__phone .br-field__value { font-size: var(--fs-body); }
  .br-show__phone .br-phone__pad { padding: var(--s-4) var(--s-4) var(--s-5); }
  .br-show__badge { width: 64px; height: 64px; }
  .br-show__badge > div { width: 46px; height: 46px; }
}

/* ==========================================================================
   THE JOURNEY — the four steps are a real sequence, so they're drawn as a
   route with a vehicle running it. Anime.js drives the timeline; these are
   the resting and active states it moves between.
   ========================================================================== */
.br-journey { position: relative; margin-top: clamp(56px, 6vw, 84px); }

/* --- the rail ----------------------------------------------------------
   A transform-scaled bar rather than an SVG dash: stroke-dash length and
   rendered width disagree under non-uniform scaling, which shears the line. */
.br-journey__rail { position: relative; height: 44px; margin-bottom: var(--s-6); }
.br-journey__bed, .br-journey__fill {
  position: absolute; top: 50%; left: 0; right: 0; height: 2px;
  margin-top: -1px; border-radius: 2px;
}
.br-journey__bed  { background: var(--line); }
.br-dark .br-journey__bed { background: var(--ink-3); }
.br-journey__fill {
  background: var(--red);
  transform: scaleX(0); transform-origin: left center;
}

.br-journey__vehicle {
  position: absolute; top: 50%; left: 0;
  display: grid; place-items: center;
  width: 46px; height: 30px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none; z-index: 2;
}
.br-dark .br-journey__vehicle { background: var(--ink-2); border-color: var(--ink-3); }

/* --- the steps --------------------------------------------------------- */
.br-journey__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6);
}
.br-jstep { position: relative; }
.br-jstep__btn {
  display: grid; gap: 0; width: 100%; text-align: left;
  background: none; border: 0; padding: 0 var(--s-4) 0 0; cursor: pointer;
  font: inherit; color: inherit;
}
/* The rail marker holds the car animation, so it is a 34px tile rather than
   the 15px dot it used to be — a vehicle is not legible at dot size. */
.br-jstep__node {
  position: absolute; top: -76px; left: -9px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
  transform: scale(.7); opacity: .55;
}
.br-jstep__car { display: block; width: 26px; height: 26px; }
.br-jstep__car svg { display: block; }
.br-dark .br-jstep__node { background: var(--ink); border-color: var(--ink-3); }
.br-wash .br-jstep__node { background: var(--paper-2); }

.br-jstep__num {
  display: block;
  font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  letter-spacing: -.04em; line-height: 1; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  transition: color .45s var(--ease);
}
.br-jstep__ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-md);
  margin: var(--s-4) 0 var(--s-4);
  background: var(--line-2); color: var(--muted-2);
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.br-dark .br-jstep__ico { background: var(--ink-2); }
.br-jstep__title { display: block; margin-bottom: var(--s-3); transition: color .45s var(--ease); }
.br-jstep__copy  { display: block; }

/* active state — the vehicle has reached this waypoint */
.br-jstep.is-active .br-jstep__num  { color: var(--ink); }
.br-dark .br-jstep.is-active .br-jstep__num { color: #fff; }
.br-jstep.is-active .br-jstep__ico { background: var(--red); color: #fff; }
/* filling this solid red would bury the vehicle — the ring carries the state */
.br-jstep.is-active .br-jstep__node { border-color: var(--red); background: var(--red-wash); }
.br-jstep.is-passed .br-jstep__node { border-color: var(--red); }
.br-jstep.is-passed .br-jstep__num  { color: var(--muted); }

.br-jstep__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; border-radius: var(--r-sm); }
.br-jstep__btn:hover .br-jstep__ico { background: var(--red-wash); color: var(--red); }
.br-jstep.is-active .br-jstep__btn:hover .br-jstep__ico { background: var(--red); color: #fff; }

/* --- vertical on narrow screens ---------------------------------------- */
@media (max-width: 900px) {
  .br-journey__rail { display: none; }
  .br-journey__steps { grid-template-columns: 1fr; gap: 0; }
  .br-jstep { padding-left: 38px; padding-bottom: var(--s-6); }
  .br-jstep::before {
    content: ""; position: absolute; left: 7px; top: 26px; bottom: 0;
    width: 2px; background: var(--line);
  }
  .br-dark .br-jstep::before { background: var(--ink-3); }
  .br-jstep.is-passed::before, .br-jstep.is-active::before { background: var(--red); }
  .br-jstep:last-child { padding-bottom: 0; }
  .br-jstep:last-child::before { display: none; }
  .br-jstep__node { top: 6px; left: 0; }
  .br-jstep__num { font-size: 1.4rem; }
  .br-jstep__ico { margin-top: var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  .br-journey__vehicle { display: none; }
  .br-jstep__node { transform: none; opacity: 1; }
  .br-journey__fill { transform: scaleX(1); }
}

/* Step content is hidden only while the journey is armed (anime.js confirmed
   loaded); anime's inline opacity then takes over. See bullride-journey.js. */
.br-journey.is-armed .br-jstep__num,
.br-journey.is-armed .br-jstep__ico,
.br-journey.is-armed .br-jstep__title,
.br-journey.is-armed .br-jstep__copy { opacity: 0; }

/* Armed only while anime.js is confirmed present (see bullride-bleed.js). */
/* Grid lines are the only thing anime.js hides up front. */
.br-bleed.is-armed .br-bleed__streets line { opacity: 0; }

/* ==========================================================================
   THE COMPARISON — the five painful steps are struck off one by one while
   the five Bull Ride steps check on. The transformation, made literal.
   Reveal + strikethrough are CSS transitions so they land without JS;
   anime.js only draws the ticks (see bullride-compare.js).
   ========================================================================== */
.br-compare__list li {
  opacity: 1;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.has-js [data-compare] .br-compare__list li { opacity: 0; transform: translateY(16px); }
.has-js [data-compare].is-in .br-compare__list li { opacity: 1; transform: none; }

/* stagger down each column, the two columns marching together */
.has-js [data-compare].is-in .br-compare__list li:nth-child(1) { transition-delay: .05s; }
.has-js [data-compare].is-in .br-compare__list li:nth-child(2) { transition-delay: .16s; }
.has-js [data-compare].is-in .br-compare__list li:nth-child(3) { transition-delay: .27s; }
.has-js [data-compare].is-in .br-compare__list li:nth-child(4) { transition-delay: .38s; }
.has-js [data-compare].is-in .br-compare__list li:nth-child(5) { transition-delay: .49s; }

/* the old way gets crossed out */
.br-strike { position: relative; display: inline-block; }
.br-strike::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%;
  height: 1.5px; background: var(--red); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
}
.has-js [data-compare].is-in .br-strike::after {
  transform: scaleX(1);
  transition: transform .5s var(--ease-out);
}
.has-js [data-compare].is-in .br-compare__list li:nth-child(1) .br-strike::after { transition-delay: .55s; }
.has-js [data-compare].is-in .br-compare__list li:nth-child(2) .br-strike::after { transition-delay: .66s; }
.has-js [data-compare].is-in .br-compare__list li:nth-child(3) .br-strike::after { transition-delay: .77s; }
.has-js [data-compare].is-in .br-compare__list li:nth-child(4) .br-strike::after { transition-delay: .88s; }
.has-js [data-compare].is-in .br-compare__list li:nth-child(5) .br-strike::after { transition-delay: .99s; }
.br-compare__col--old li { transition: color .5s var(--ease); }
.has-js [data-compare].is-in .br-compare__col--old li { color: #6E7378; }

/* ticks are drawn by anime.js; visible by default so a failure is harmless */
.br-tick__mark { stroke-dasharray: none; }

/* a red scan line sweeps the comparison once, tying the two halves together */
.br-ba__sweep {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 4;
  background: linear-gradient(to bottom, transparent, var(--red) 18%, var(--red) 82%, transparent);
  left: 0; opacity: 0; pointer-events: none;
}
.br-ba.is-in .br-ba__sweep { animation: br-ba-sweep 1.5s var(--ease-out) .55s 1; }
@keyframes br-ba-sweep {
  0%   { left: 0;    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .has-js [data-compare] .br-compare__list li { opacity: 1; transform: none; }
  .br-strike::after { transform: scaleX(1); }
  .br-ba__sweep { display: none; }
}

/* ==========================================================================
   LIVE TRACKING MAP — the route draws and the partner runs it, then holds
   position with a live ping. Same CSS mechanism as the hero map (dash draw +
   offset-path), so the finished state is the default and a JS failure is
   harmless: without .is-live the map simply renders complete.
   ========================================================================== */
.br-track__marker { transform: translate(330px, 255px); }   /* resting position */
.br-track__origin, .br-track__pin { transform-box: fill-box; transform-origin: center; }

/* --- armed: only once JS has measured the path ------------------------- */
.br-track.is-live .br-track__route {
  stroke-dasharray: var(--route-len, 900);
  stroke-dashoffset: var(--route-len, 900);
  animation: br-track-draw 1.9s var(--ease-out) .25s forwards;
}
@keyframes br-track-draw { to { stroke-dashoffset: var(--route-stop, 0); } }

.br-track.is-live .br-track__marker {
  offset-path: var(--route-path);
  offset-rotate: 0deg;
  transform: none;
  animation: br-track-travel 1.9s var(--ease-out) .25s forwards;
}
@keyframes br-track-travel {
  from { offset-distance: 0%; }
  to   { offset-distance: 45%; }
}

.br-track.is-live .br-track__origin {
  animation: br-track-pop .55s var(--ease-out) both;
}
@keyframes br-track-pop {
  0% { transform: scale(.4); } 60% { transform: scale(1.45); } 100% { transform: scale(1); }
}
.br-track.is-live .br-track__pin {
  animation: br-track-drop .6s var(--ease-out) .5s both;
}
@keyframes br-track-drop {
  from { transform: translateY(-18px); } to { transform: translateY(0); }
}

/* the ping only breathes while the section is on screen */
.br-track.is-pinging .br-track__ping {
  animation: br-ping 2.4s var(--ease-out) infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes br-ping {
  0%   { transform: scale(.6); opacity: .45; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* panel steps light up behind the partner */
.br-track__timeline li { transition: opacity .5s var(--ease); }
.has-js [data-track] .br-track__timeline li { opacity: .35; }
.has-js [data-track].is-lit .br-track__timeline li { opacity: 1; }
.has-js [data-track].is-lit .br-track__timeline li:nth-child(1) { transition-delay: .35s; }
.has-js [data-track].is-lit .br-track__timeline li:nth-child(2) { transition-delay: .80s; }
.has-js [data-track].is-lit .br-track__timeline li:nth-child(3) { transition-delay: 1.25s; }
.has-js [data-track].is-lit .br-track__timeline li:nth-child(4) { transition-delay: 1.70s; }

@media (prefers-reduced-motion: reduce) {
  .br-track.is-live .br-track__route,
  .br-track.is-live .br-track__marker,
  .br-track.is-live .br-track__origin,
  .br-track.is-live .br-track__pin { animation: none; }
  .br-track.is-live .br-track__route { stroke-dasharray: none; stroke-dashoffset: 0; }
  .br-track.is-live .br-track__marker { offset-path: none; transform: translate(330px, 255px); }
  .br-track.is-pinging .br-track__ping { animation: none; }
  .has-js [data-track] .br-track__timeline li { opacity: 1; }
}

/* ==========================================================================
   FLOW — the long-form journey used on How It Works.
   Each step owns its own rail segment, so the line fills as you read rather
   than depending on scroll maths. Everything rests visible; the .has-js
   guard plus the shared reveal watchdog keep it that way if JS fails.
   ========================================================================== */
.br-flow { position: relative; margin-top: var(--s-8); }

.br-flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(24px, 3.5vw, 56px);
  padding-block: clamp(36px, 4.5vw, 64px);
  align-items: center;
}
.br-flow__step:first-child { padding-top: 0; }
.br-flow__step:last-child  { padding-bottom: 0; }

/* the rail segment that belongs to this step */
.br-flow__step::before {
  content: ""; position: absolute; left: 23px; top: 0; bottom: 0; width: 2px;
  background: var(--line);
}
.br-flow__step::after {
  content: ""; position: absolute; left: 23px; top: 0; bottom: 0; width: 2px;
  background: var(--red);
  transform: scaleY(0); transform-origin: top center;
}
.has-js .br-flow__step.is-in::after {
  transform: scaleY(1);
  transition: transform .9s var(--ease-out) .1s;
}
.br-flow__step:first-child::before,
.br-flow__step:first-child::after { top: 34px; }
.br-flow__step:last-child::before,
.br-flow__step:last-child::after  { bottom: calc(100% - 34px); }
.br-dark .br-flow__step::before { background: var(--ink-3); }

.br-flow__badge {
  position: relative; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); border: 2px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: .9375rem;
  letter-spacing: -.02em; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  transition: border-color .5s var(--ease), background-color .5s var(--ease), color .5s var(--ease);
}
.br-wash .br-flow__badge { background: var(--paper-2); }
.br-dark .br-flow__badge { background: var(--ink); border-color: var(--ink-3); }
.has-js .br-flow__step.is-in .br-flow__badge {
  border-color: var(--red); background: var(--red); color: #fff;
  transition-delay: .35s;
}

.br-flow__title { margin-bottom: var(--s-4); }
.br-flow__points { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.br-flow__points li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.br-flow__points svg { flex: none; margin-top: 3px; color: var(--red); }

.br-flow__media { position: relative; }
.br-flow__panel {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; box-shadow: var(--shadow-md); overflow: hidden;
}
.br-dark .br-flow__panel { background: var(--ink-2); border-color: var(--ink-3); box-shadow: none; }
.br-flow__lottie {
  width: clamp(120px, 15vw, 168px); height: clamp(120px, 15vw, 168px);
  margin-inline: auto;
}

@media (max-width: 980px) {
  .br-flow__step {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--s-5) var(--s-5);
  }
  .br-flow__step::before, .br-flow__step::after { left: 17px; }
  .br-flow__badge { width: 36px; height: 36px; font-size: .8125rem; }
  .br-flow__media { grid-column: 2; margin-top: var(--s-5); }
}

/* ==========================================================================
   PRINCIPLES — the numbered list used on About
   ========================================================================== */
.br-principles { display: grid; gap: 0; margin-top: var(--s-8); border-top: 1px solid var(--line-dark); }
.br-principle {
  display: grid; grid-template-columns: minmax(0, 90px) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(20px, 3vw, 48px);
  padding-block: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--line-dark);
  align-items: baseline;
}
.br-principle__num {
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 700; letter-spacing: -.04em; line-height: 1;
  color: var(--red); font-variant-numeric: tabular-nums;
}
.br-principle__title { margin: 0; }
.br-principle__copy { margin: 0; color: var(--muted-dark); font-size: var(--fs-sm); line-height: 1.62; }

@media (max-width: 860px) {
  .br-principle { grid-template-columns: 56px minmax(0, 1fr); }
  .br-principle__copy { grid-column: 2; margin-top: var(--s-3); }
}

/* ==========================================================================
   AUDIENCE — who the platform serves
   ========================================================================== */
.br-aud {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  grid-template-columns: repeat(3, 1fr); margin-top: var(--s-8);
}
.br-aud__cell {
  background: #fff; padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column;
}
.br-aud__lottie { width: 92px; height: 92px; margin-bottom: var(--s-5); }
.br-aud__cell .br-h3 { margin-bottom: var(--s-3); }
.br-aud__cell .br-link { margin-top: auto; padding-top: var(--s-6); }

@media (max-width: 860px) { .br-aud { grid-template-columns: 1fr; } }

/* The bleed band's photo settles via CSS wherever the anime.js sequence is not
   loaded (it only ships on the homepage). Inline styles from anime win there. */
.br-bleed.is-in img {
  transform: scale(1); opacity: .46;
  transition: transform 1.8s var(--ease-out), opacity 1.2s var(--ease);
}

/* ==========================================================================
   CENTRED HERO — eyebrow, headline, copy, CTA stacked on the axis, with the
   product on a stage beneath and two status cards flanking it. The soft
   ground reuses the site's own street-grid motif rather than generic shapes.
   ========================================================================== */
.br-hero--center {
  position: relative; overflow: hidden;
  padding-top: calc(76px + clamp(48px, 6vw, 96px));
  padding-bottom: clamp(56px, 7vw, 104px);
  text-align: center;
}

/* --- ground ------------------------------------------------------------- */
.br-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.br-hero__grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.br-hero__grid line { stroke: var(--line); stroke-width: 1; opacity: .5; vector-effect: non-scaling-stroke; }
.br-hero__glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.br-hero__glow--a {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  top: -16%; left: 50%; transform: translateX(-58%);
  background: radial-gradient(circle, rgba(217,31,38,.14) 0%, rgba(217,31,38,0) 70%);
}
.br-hero__glow--b {
  width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
  top: 22%; left: 50%; transform: translateX(22%);
  background: radial-gradient(circle, rgba(16,17,18,.08) 0%, rgba(16,17,18,0) 70%);
}
/* the ground fades out before the section ends, so the seam is invisible */
.br-hero--center::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%; z-index: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--paper));
  pointer-events: none;
}

.br-hero__center { position: relative; z-index: 2; max-width: 860px; }

/* --- the stack ---------------------------------------------------------- */
.br-hero__big {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.4vw, 5.1rem);
  font-weight: 700; line-height: .98; letter-spacing: -.038em;
  margin: 0 0 var(--s-5);
}
.br-hero__sub {
  font-size: var(--fs-lead); line-height: 1.55; color: var(--muted);
  max-width: 52ch; margin: 0 auto var(--s-7);
}
.br-hero__cta--center { justify-content: center; }

/* --- the stage ---------------------------------------------------------- */
.br-stage { position: relative; z-index: 2; margin-top: clamp(40px, 5vw, 72px); }
.br-map--wide { max-width: 1040px; margin-inline: auto; }

.br-stage__float {
  position: absolute; z-index: 3; width: 214px;
  padding: 13px 15px; border-radius: var(--r-md);
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(8px);
  border: 1px solid var(--line); box-shadow: 0 14px 38px rgba(16,17,18,.16);
  text-align: left;
}
.br-stage__float--l { left: 0; top: 26%; }
.br-stage__float--r { right: 0; top: 58%; }

.br-stage__row { display: flex; align-items: center; gap: 10px; }
.br-stage__avatar, .br-stage__tick {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
}
.br-stage__avatar { background: var(--paper-2); color: var(--muted); }
.br-stage__tick   { background: var(--red); color: #fff; }
.br-stage__strong { display: block; font-size: .8125rem; font-weight: 600; }
.br-stage__meta   { display: block; font-size: .6875rem; color: var(--muted-2); margin-top: 1px; }

/* they drift gently, and settle when someone prefers less motion */
.br-stage__float[data-float] { animation: br-float 6.5s var(--ease) infinite; }
.br-stage__float--r[data-float] { animation-delay: -3.2s; }
@keyframes br-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.has-js .br-stage__float { opacity: 0; }
.has-js .br-stage.is-in .br-stage__float {
  opacity: 1;
  transition: opacity .7s var(--ease-out) .5s;
}

@media (max-width: 1180px) {
  .br-stage__float--l { left: -8px; top: 18%; }
  .br-stage__float--r { right: -8px; top: 62%; }
}
@media (max-width: 980px) {
  .br-stage__float { display: none; }
}
@media (max-width: 620px) {
  .br-hero__cta--center .br-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .br-stage__float[data-float] { animation: none; }
  .has-js .br-stage__float { opacity: 1; }
}

/* ==========================================================================
   SPLIT HERO — the banner takes the left column and the route map sits
   beside it on the right, filling the first screen. Below 960px the two
   stack and the copy re-centres, which is how the rest of the mobile page
   already reads.
   ========================================================================== */

/* The hero owns the first screen. Padding stays as it was — it clears the
   fixed nav — and the layout centres in whatever is left over. */
.br-hero--split {
  min-height: 90vh;
  display: flex;
  align-items: center;
  text-align: left;
}

.br-hero__layout {
  position: relative; z-index: 2;
  width: 100%;
  display: grid;
  /* the map takes the slightly wider share: the headline wraps comfortably
     at this width, and the route reads better with the extra room */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  /* the map matches the copy top and bottom rather than floating centred */
  align-items: stretch;
  gap: clamp(32px, 4vw, 64px);
}

/* The stage is stretched by the grid, so the card and its canvas take the
   row's full height — the copy column sets it. */
.br-hero--split .br-stage,
.br-hero--split .br-map { height: 100%; }
.br-hero--split .br-map__canvas { height: 100%; }

.br-hero--split .br-hero__center { max-width: none; }
.br-hero--split .br-hero__sub { max-width: 46ch; margin-inline: 0; }
.br-hero--split .br-hero__cta--center { justify-content: flex-start; }
.br-hero--split .br-stage { margin-top: 0; }
.br-hero--split .br-map--wide { max-width: none; }

/* The headline keeps its full display size; what gives instead is the hard
   break, so it wraps to the column rather than being scaled down to fit a
   line it no longer has the width for. */
.br-hero--split .br-hero__big br { display: none; }

/* the ground follows the new axis: warmth behind the type, weight behind the map */
.br-hero--split .br-hero__glow--a { top: -20%; transform: translateX(-110%); }
.br-hero--split .br-hero__glow--b { top: 16%;  transform: translateX(10%); }

/* the status cards keep their size and hang off the map's outer edges */
.br-hero--split .br-stage__float--l { left: -60px; top: 34%; }
.br-hero--split .br-stage__float--r { right: -46px; top: auto; bottom: 4%; }

/* Narrower than this there is no gutter left to hang into and the cards
   would sit squarely on the route, so the map carries the stage alone. */
@media (max-width: 1340px) {
  .br-hero--split .br-stage__float { display: none; }
}

@media (max-width: 960px) {
  .br-hero--split { min-height: 0; display: block; text-align: center; }
  .br-hero__layout { grid-template-columns: 1fr; }
  .br-hero--split .br-stage,
  .br-hero--split .br-map,
  .br-hero--split .br-map__canvas { height: auto; }
  .br-hero--split .br-hero__big br { display: inline; }
  .br-hero--split .br-hero__sub { margin-inline: auto; }
  .br-hero--split .br-hero__cta--center { justify-content: center; }
  .br-hero--split .br-stage { margin-top: clamp(32px, 5vw, 56px); }
  .br-hero--split .br-map--wide { max-width: 640px; margin-inline: auto; }
  .br-hero--split .br-hero__glow--a { transform: translateX(-58%); }
  .br-hero--split .br-hero__glow--b { transform: translateX(22%); }
}

/* ==========================================================================
   HERO EXTRAS — headline accent and the ground behind the type.
   ========================================================================== */
/* the headline accent draws once the hero has entered */
.has-js [data-enter].is-ready .br-underline::after { transform: scaleX(1); }

/* a touch more presence behind the type, still short of a gradient wash */
.br-hero__glow--a {
  width: 54vw; height: 54vw; max-width: 760px; max-height: 760px;
  top: -20%; transform: translateX(-56%);
  background: radial-gradient(circle, rgba(217,31,38,.17) 0%, rgba(217,31,38,0) 68%);
}
.br-hero__glow--b {
  width: 44vw; height: 44vw; max-width: 600px; max-height: 600px;
  top: 26%; transform: translateX(24%);
  background: radial-gradient(circle, rgba(16,17,18,.09) 0%, rgba(16,17,18,0) 70%);
}


/* ==========================================================================
   HEADLINE ACCENT — "ride." wears the speed lines from the Bull Ride mark.
   Letters and streaks rest fully visible; the .has-js guard means a JS
   failure leaves the headline perfectly readable, just unanimated.
   ========================================================================== */
.br-word {
  position: relative;
  display: inline-block;
  color: var(--red);
  padding-bottom: .16em;          /* room for the streaks */
}
.br-word__text { display: inline-block; white-space: nowrap; }
.br-word__l { display: inline-block; }

/* the trailing speed lines, tapering the way they do on the mark */
.br-word__streaks {
  position: absolute; left: 0; right: 0; bottom: .01em;
  display: flex; flex-direction: column; gap: .028em;
  pointer-events: none;
}
.br-word__streaks i {
  display: block; height: .045em; border-radius: .03em;
  background: var(--red); transform-origin: right center;
}
.br-word__streaks i:nth-child(1) { width: 100%; }
.br-word__streaks i:nth-child(2) { width: 74%;  opacity: .72; margin-left: auto; }
.br-word__streaks i:nth-child(3) { width: 46%;  opacity: .48; margin-left: auto; }
.br-word__streaks i:nth-child(4) { width: 22%;  opacity: .28; margin-left: auto; }

/* --- armed: hidden only once JS is confirmed ---------------------------- */
.has-js .br-word__l      { opacity: 0; transform: translateY(.34em); }
.has-js .br-word__streaks i { transform: scaleX(0); }

.has-js [data-enter].is-ready .br-word__l {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out), transform .62s var(--ease-out);
}
.has-js [data-enter].is-ready .br-word__l:nth-child(1) { transition-delay: .30s; }
.has-js [data-enter].is-ready .br-word__l:nth-child(2) { transition-delay: .37s; }
.has-js [data-enter].is-ready .br-word__l:nth-child(3) { transition-delay: .44s; }
.has-js [data-enter].is-ready .br-word__l:nth-child(4) { transition-delay: .51s; }
.has-js [data-enter].is-ready .br-word__l:nth-child(5) { transition-delay: .60s; }

/* Two animations, composed: the bars draw in once, then light travels along
   them forever. The sweep moves a gradient rather than the bar itself, so the
   lines are always drawn — they can never be caught mid-cycle looking blank. */
.br-word__streaks i {
  background: linear-gradient(90deg,
    var(--red) 0%, rgba(217,31,38,.18) 26%, #FF6167 40%, var(--red) 58%, var(--red) 100%);
  background-size: 260% 100%;
  background-position: 120% 0;
}
.has-js [data-enter].is-ready .br-word__streaks i {
  animation:
    br-streak-in .5s cubic-bezier(.16,.9,.3,1) both,
    br-streak-sweep 2.8s linear infinite;
}
.has-js [data-enter].is-ready .br-word__streaks i:nth-child(1) { animation-delay: .70s, 1.20s; }
.has-js [data-enter].is-ready .br-word__streaks i:nth-child(2) { animation-delay: .77s, 1.34s; }
.has-js [data-enter].is-ready .br-word__streaks i:nth-child(3) { animation-delay: .83s, 1.46s; }
.has-js [data-enter].is-ready .br-word__streaks i:nth-child(4) { animation-delay: .88s, 1.56s; }

@keyframes br-streak-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes br-streak-sweep {
  from { background-position: 120% 0; }
  to   { background-position: -80% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .has-js .br-word__l { opacity: 1; transform: none; }
  .has-js [data-enter].is-ready .br-word__streaks i,
  .has-js .br-word__streaks i {
    animation: none; transform: scaleX(1); opacity: 1;
    background: var(--red);
  }
}

/* ==========================================================================
   BOOK — two-column split: the widget on the left, the road on the right.
   ========================================================================== */
.br-book { padding-top: calc(76px + clamp(36px, 4.5vw, 72px)); }
.br-book__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px); align-items: start;
}
.br-book__panel { max-width: 560px; }
.br-book__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -.033em; margin: 0;
}
.br-book__form { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
.br-book__submit { width: 100%; padding-block: 15px; }

/* pickup / drop-off joined by a spine, the way a route reads */
.br-legs { position: relative; }
.br-legs__spine {
  position: absolute; left: 19px; top: 30px; bottom: 30px; width: 2px;
  background: var(--line); border-radius: 2px;
}
.br-leg { position: relative; }
.br-leg + .br-leg { margin-top: var(--s-3); }
.br-leg__dot {
  position: absolute; left: 14px; top: 50%; margin-top: -5px;
  width: 11px; height: 11px; border-radius: 50%; z-index: 2;
}
.br-leg__dot--from { background: var(--ink); }
.br-leg__dot--to   { background: var(--red); }
.br-leg__input { padding-left: 40px; }

.br-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  list-style: none; margin: 0; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto;
}
.br-suggest li {
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); cursor: pointer;
}
.br-suggest li:hover { background: var(--paper-2); }

.br-phone-in { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-2); }
.br-phone-in__code { text-align: center; }

/* --- the confirmation ---------------------------------------------------- */
.br-book__done-mark { display: block; margin-bottom: var(--s-5); }
.br-book__legs { margin-top: var(--s-6); }
.br-book__handoff {
  margin-top: var(--s-7); padding: var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper-2);
}
.br-book__phone {
  display: inline-block; padding: 1px 7px; border-radius: var(--r-sm);
  background: var(--red-wash); color: var(--red-ink);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

@media (max-width: 900px) {
  .br-book__grid { grid-template-columns: 1fr; }
  .br-book__media { order: -1; }
  .br-book__panel { max-width: none; }
}


/* ==========================================================================
   BLOG — index cards and the article body
   ========================================================================== */
.br-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }

/* The whole card is the hit area: the title holds the only link and its
   ::after covers the card, so the markup keeps one link per post. */
.br-post {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.br-post:hover { border-color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-3px); }

.br-post__media { overflow: hidden; }
.br-post__media .br-photo { border-radius: 0; }

.br-post__body {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--s-5) var(--s-5) var(--s-4);
}
.br-post__meta { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.br-post__title { margin-bottom: var(--s-3); }
.br-post__title a { color: var(--ink); }
.br-post__title a::after { content: ""; position: absolute; inset: 0; }
.br-post:hover .br-post__title a { color: var(--red); }
.br-post__excerpt { margin-bottom: var(--s-5); }

.br-post__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-top: auto;
  padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.br-post__date { font-size: var(--fs-xs); color: var(--muted-2); }
.br-post__go {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--red);
}
.br-post__go svg { transition: transform .2s var(--ease); }
.br-post:hover .br-post__go svg { transform: translateX(3px); }

/* "Keep reading" always shows one post fewer than the index, so it gets its
   own track count rather than leaving a hole in the three-column grid. */
.br-blog__grid--more { grid-template-columns: repeat(2, 1fr); }

.br-blog__cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
}

/* --- article ------------------------------------------------------------ */
.br-article__title { max-width: 20ch; margin-bottom: var(--s-5); }
.br-article__meta { display: flex; align-items: center; gap: var(--s-2); }
.br-article__cover { margin-bottom: clamp(32px, 4vw, 56px); }

/* One measure for the body copy: long lines are what makes an article
   tiring to read, so the column is capped rather than the container. */
.br-prose { max-width: 68ch; }
/* Rhythm is owned by the flow, not by the elements: zero every child, then
   let the adjacent-sibling rule put the space back. Setting margin on
   .br-prose p instead would outrank it on specificity and collapse it. */
.br-prose > * { margin: 0; }
.br-prose > * + * { margin-top: var(--s-5); }
.br-prose p { font-size: var(--fs-body); line-height: 1.75; color: var(--muted); }
.br-prose strong { color: var(--ink); font-weight: 600; }
.br-prose__lead { font-size: var(--fs-lead) !important; line-height: 1.6 !important; color: var(--ink) !important; }
.br-prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2; color: var(--ink);
  /* no margin here — it would outrank the flow rule above; padding adds the
     extra breathing room a section break wants */
  padding-top: var(--s-5);
}
.br-prose > h2 + * { margin-top: var(--s-4); }
.br-prose ul { margin: 0; padding-left: 0; list-style: none; }
.br-prose li {
  position: relative; padding-left: var(--s-6);
  font-size: var(--fs-body); line-height: 1.7; color: var(--muted);
}
.br-prose li + li { margin-top: var(--s-4); }
.br-prose li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 14px; height: 2px; border-radius: 2px; background: var(--red);
}

/* Legal pages render whatever HTML the admin panel holds, so the modifier
   covers the tags a rich-text editor emits rather than only the set our own
   posts use. */
.br-prose--legal { max-width: 76ch; }
.br-prose--legal h1, .br-prose--legal h2,
.br-prose--legal h3, .br-prose--legal h4 {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.25; padding-top: var(--s-5);
}
.br-prose--legal h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.br-prose--legal h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
.br-prose--legal h3 { font-size: 1.2rem; }
.br-prose--legal h4 { font-size: 1.0625rem; font-weight: 600; }
.br-prose--legal ol { margin: 0; padding-left: var(--s-6); list-style: decimal; }
.br-prose--legal ol li { padding-left: var(--s-2); }
.br-prose--legal ol li::before { content: none; }
.br-prose--legal a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.br-prose--legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.br-prose--legal th, .br-prose--legal td {
  border: 1px solid var(--line); padding: var(--s-3); text-align: left; vertical-align: top;
}
.br-prose--legal th { background: var(--paper-2); font-weight: 600; color: var(--ink); }

.br-article__end {
  margin-top: clamp(40px, 5vw, 64px); padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .br-blog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .br-blog__grid { grid-template-columns: 1fr; }
  .br-blog__cta { flex-direction: column; align-items: flex-start; }
  .br-blog__cta .br-btn { width: 100%; justify-content: center; }
}


/* ==========================================================================
   MOBILE — full-bleed panels and an app-style main menu
   ========================================================================== */

/* The tracking panel sits on a dark section, so 24px of gutter on each side
   read as an inset box rather than a screen. On a phone it spans the full
   width, the way a card does in an app. */
@media (max-width: 900px) {
  .br-track {
    margin-inline: calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter) * 2);
    border-left: 0; border-right: 0;
    border-radius: 0;
  }
}

/* --- the drawer, as a mobile app menu ----------------------------------- */
/* Rows are 56px+ so they are comfortable thumb targets, and each one shows
   what it is rather than only where it goes. */
.br-drawer__list a {
  gap: var(--s-4); padding: var(--s-3) 0; min-height: 54px;
  font-size: 1.3125rem;
}
.br-drawer__list a .br-drawer__go { flex: none; color: var(--muted-2); transition: transform .2s var(--ease), color .2s var(--ease); }
.br-drawer__list a:hover .br-drawer__go,
.br-drawer__list a:active .br-drawer__go { color: var(--red); transform: translateX(3px); }
.br-drawer__list a.is-active { color: var(--red); }
.br-drawer__sub {
  display: block; font-family: var(--font-sans); font-size: var(--fs-xs);
  font-weight: 400; letter-spacing: 0; color: var(--muted-2); margin-top: 3px;
}

.br-drawer__apps { padding-top: var(--s-5); }
.br-drawer__apps > .br-label { margin-bottom: var(--s-3); }

/* Sits at the end of the flow, and drops to the bottom of the panel when the
   menu is shorter than the screen. Not sticky: pinned, it painted over the
   last menu row instead of letting it scroll past. */
.br-drawer__actions {
  margin-top: auto;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-2);
}
.br-drawer__actions .br-btn { min-height: 52px; }
.br-drawer__contact {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--muted); padding-top: var(--s-2);
}
.br-drawer__contact a { color: var(--ink); font-weight: 600; }

/* clears the fixed header, which stays visible while the drawer is open */
@media (max-width: 900px) {
  .br-drawer { padding-top: 92px; }
  .br-drawer__list { margin-bottom: 0; }
}


/* ==========================================================================
   MOBILE TAB BAR — the app pattern: the primary destinations stay on screen
   instead of living behind a menu. Shown only where the desktop nav is gone.
   ========================================================================== */
.br-tabbar { display: none; }

@media (max-width: 900px) {
  .br-tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 98;
    display: grid; grid-template-columns: repeat(5, 1fr);
    align-items: end;
    background: rgba(255,255,255,.94);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--line);
    /* clears the iOS home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .br-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-height: 58px; padding: 8px 2px 9px;
    background: none; border: 0; cursor: pointer;
    color: var(--muted-2); font-family: inherit;
    font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s var(--ease);
  }
  .br-tab svg { display: block; transition: transform .2s var(--ease-out); }
  .br-tab:active { color: var(--ink); }
  .br-tab:active svg { transform: scale(.9); }
  .br-tab:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; border-radius: 10px; }

  /* current section, so you always know where you are */
  .br-tab.is-active { color: var(--red); }
  .br-tab.is-active .br-tab__dot { opacity: 1; transform: none; }
  .br-tab__dot {
    width: 4px; height: 4px; border-radius: 50%; background: var(--red);
    opacity: 0; transform: translateY(-3px);
    transition: opacity .2s var(--ease), transform .2s var(--ease-out);
  }

  /* The booking action is the reason the app exists, so it is raised out of
     the bar rather than sitting level with the navigation. */
  .br-tab--cta { position: relative; }
  .br-tab--cta .br-tab__fab {
    display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--red); color: #fff;
    margin-top: -20px; margin-bottom: 1px;
    box-shadow: 0 6px 18px rgba(217,31,38,.34), 0 1px 2px rgba(16,17,18,.12);
    border: 3px solid var(--paper);
    transition: transform .18s var(--ease-out);
  }
  .br-tab--cta:active .br-tab__fab { transform: scale(.92); }
  .br-tab--cta { color: var(--ink); }

  /* The bar floats over the page, so the page has to end above it. The
     raised Book button makes the bar 68px, not the 58px row height. */
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* the drawer covers the bar, and the burger inside the header closes it */
.br-drawer { z-index: 99; }

@media (prefers-reduced-motion: reduce) {
  .br-tab svg, .br-tab__dot, .br-tab--cta .br-tab__fab { transition: none; }
}

@media print { .br-tabbar { display: none; } }


/* ==========================================================================
   LIVE PHONE — the tracking mock reads as in-progress rather than a still
   ========================================================================== */

/* A ring leaves the destination marker on a slow beat: the "we are receiving
   position updates" signal every tracking UI uses. */
.br-phone--live .br-field__marker--to { position: relative; }
.br-phone--live .br-field__marker--to::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--red);
  animation: br-live-ping 2.4s var(--ease-out) infinite;
}
@keyframes br-live-ping {
  0%       { transform: scale(1);   opacity: .85; }
  70%,100% { transform: scale(3.2); opacity: 0; }
}

/* Progress toward the drop-off, sitting under the status bar. */
.br-phone__progress {
  display: block; height: 2px; background: var(--line-2);
  margin: 0 var(--s-4); border-radius: 2px; overflow: hidden;
}
.br-phone__progress i {
  display: block; height: 100%; width: 40%;
  background: var(--red); border-radius: 2px;
  transform-origin: left center;
  animation: br-live-progress 5.2s var(--ease) infinite;
}
@keyframes br-live-progress {
  0%       { width: 12%; opacity: .55; }
  55%      { width: 76%; opacity: 1; }
  85%,100% { width: 92%; opacity: .8; }
}

/* Rows arrive in sequence with the panel, so the card assembles itself. */
.has-js .br-phone--live .br-phone__row { opacity: 0; transform: translateY(10px); }
.has-js .br-show.is-in .br-phone--live .br-phone__row {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.has-js .br-show.is-in .br-phone--live .br-phone__row:nth-of-type(1) { transition-delay: .5s; }
.has-js .br-show.is-in .br-phone--live .br-phone__row:nth-of-type(2) { transition-delay: .66s; }

@media (prefers-reduced-motion: reduce) {
  .br-phone--live .br-field__marker--to::after,
  .br-phone__progress i { animation: none; }
  .br-phone__progress i { width: 76%; }
  .has-js .br-phone--live .br-phone__row { opacity: 1; transform: none; }
}