/* ==========================================================================
   journey.css: the journey page, book.port.html (D-114). Boards d16-journey (1280)
   and m05-journey (390), snapshot v353, with the copy delta of 10 Oct.
   The one light page on the site: bone under the navy frame, as the boards draw it.
   Layout: phones (under 768px) follow m05; from 768px the desktop board's copy and
   form; from 1024px the two columns of d16 with the booking card beside them.
   The one Send button sits under the price breakdown, on every width (12 Oct, Bobby: no sticky bar).
   ========================================================================== */

.nv-journey{
  --jr-ink:#041027;      /* text on bone and white */
  --jr-muted:#444F5A;    /* secondary text on bone and white */
  --jr-hair:#DDD6C8;     /* rules and card edges on bone */
  --jr-control:#5A6570;  /* field borders */
  --jr-dot:#8C99A8;      /* leader dots, step ring */
  --jr-ok:#09594F;       /* the fit tick and links on bone */
  --jr-icon:#005FD6;     /* line icons */
  --jr-blue:#0047A8;     /* chosen tab, chip, step number, card edge */
  --jr-white:#FFFFFF;
  --jr-gut:16px;
  background:#F4F1EA;color:var(--jr-ink)}
@media (min-width:768px){.nv-journey{--jr-gut:32px}}
@media (min-width:1024px){.nv-journey{--jr-gut:40px}}

.jr-wrap{box-sizing:border-box;width:100%;max-width:calc(1200px + 2 * 40px);margin:0 auto;
  padding-left:max(var(--jr-gut),env(safe-area-inset-left));padding-right:max(var(--jr-gut),env(safe-area-inset-right))}

/* copy that differs between the boards: jr-p is the phone board's, jr-w the desktop board's */
@media (max-width:767px){.jr-w{display:none!important}}
@media (min-width:768px){.jr-p{display:none!important}}

/* everything under the frame is a light surface: light form controls, the boards' blue focus ring */
.nv-journey main{color-scheme:light}
.nv-journey main a{color:var(--jr-ok)}
.nv-journey main a:hover{color:var(--jr-ink)}
.nv-journey main :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--jr-icon);outline-offset:2px}
.nv-journey main input::placeholder,.nv-journey main textarea::placeholder{color:var(--jr-muted);opacity:1}
/* until journey.js has filled the page in, the column waits unseen (never with JavaScript off;
   a fail-safe shows it after 3s whatever happens, so it can never stay hidden) */
.nv-js .jr-grid:not([data-jr-ready]){visibility:hidden;animation:jr-failsafe 0s linear 3s forwards}
@keyframes jr-failsafe{to{visibility:visible}}

/* the frame's header spans this page's wider grid, as the board's header does (logo at the
   content's left edge, the number at its right) */
@media (min-width:1024px){.nv-journey .nv-header .nv-wrap{max-width:calc(1200px + 2 * 40px)}}

/* --------------------------------------------------------------------------
   1. The route band under the header (the boards' header pills and "Change")
   -------------------------------------------------------------------------- */
.jr-route{background:var(--navy);color:var(--bone);border-bottom:1px solid var(--line)}
.jr-route__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px;padding-top:12px;padding-bottom:14px}
.nv-journey .jr-route a{color:var(--bone)}
.nv-journey .jr-route :focus-visible{outline-color:var(--blue-300)}
.jr-pills{display:flex;align-items:center;gap:12px;min-width:0}
.jr-pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--navy-700);border-radius:var(--radius);
  background:var(--navy-900);font-size:14px;text-decoration:none;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.jr-pill svg{flex-shrink:0}
.jr-change{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.jr-card{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;min-height:44px;padding:10px 14px;
  border:1px solid var(--navy-700);border-radius:var(--radius);background:var(--navy-900);font-size:14px;text-decoration:none}
.jr-card__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.jr-card__route{overflow-wrap:anywhere}
.jr-card__arrow{color:var(--muted)}
.jr-card__when{color:var(--muted-img)}
.jr-card__change{flex-shrink:0;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:4px}
@media (max-width:767px){.jr-route__bar{min-height:0;padding-top:4px;padding-bottom:14px}}

/* --------------------------------------------------------------------------
   2. Steps (desktop board) and the page grid
   -------------------------------------------------------------------------- */
.jr-steps{border-bottom:1px solid var(--jr-hair)}
.jr-steps ol{list-style:none;margin:0 auto;min-height:52px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px;font-size:14px;color:var(--jr-muted)}
.jr-steps li{display:flex;align-items:center;gap:8px}
.jr-steps .is-on{color:var(--jr-ink);font-weight:600}
.jr-steps__n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--jr-dot);font-size:12px;font-weight:400}
.jr-steps .is-on .jr-steps__n{background:var(--jr-blue);border-color:var(--jr-blue);color:var(--bone)}
.jr-steps__sep{color:var(--jr-dot)}

.jr-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-top:24px;padding-bottom:48px}
.jr-col{display:flex;flex-direction:column;gap:32px;min-width:0}
@media (min-width:768px){
  .jr-grid{max-width:calc(744px + 2 * var(--jr-gut));padding-top:40px;padding-bottom:64px;gap:40px}
  .jr-col{gap:40px}
}
@media (min-width:1024px){
  .jr-grid{max-width:calc(1200px + 2 * 40px);grid-template-columns:minmax(0,1fr) clamp(340px,31.9vw,408px);gap:48px;align-items:start;padding-bottom:96px}
  /* J6: the booking card stays on screen while the details are filled in. journey.js sets the
     top so a card taller than the window pins by its foot, keeping the send button in view. */
  .jr-side{position:sticky;top:var(--jr-side-top,16px)}
}

.jr-rule{margin:0;border:0;border-top:1px solid var(--jr-hair)}
@media (max-width:767px){.jr-col>.jr-rule{display:none}}
.jr-h2{margin:0 0 16px;font-family:var(--font-display);font-size:22px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--jr-ink)}
.jr-h2--cap{margin-bottom:12px}
.jr-h2--det{margin-bottom:6px}
@media (min-width:768px){
  .jr-h2{font-size:26px;margin-bottom:24px}
  .jr-h2--cap{margin-bottom:16px}
  .jr-h2--det{margin-bottom:6px}
  .jr-h2--pb{margin-bottom:20px}
}

/* --------------------------------------------------------------------------
   3. Intro and the car
   -------------------------------------------------------------------------- */
.jr-eyebrow{margin:0 0 8px;font-family:var(--font-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--jr-muted)}
.jr-h1{margin:0;font-family:var(--font-display);font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--jr-ink);text-wrap:balance}
.jr-sub{margin:10px 0 0;max-width:60ch;color:var(--jr-muted)}
@media (min-width:768px){.jr-h1{font-size:40px;line-height:1.08}.jr-sub{margin-top:12px}}

.jr-car{border:2px solid var(--jr-blue);border-radius:var(--radius);overflow:hidden;background:var(--jr-white)}
.jr-car__shot{height:272px;background:radial-gradient(120% 90% at 50% 70%,#0A275C 0%,#09214E 40%,#041027 100%);overflow:hidden}
.jr-car__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
/* The car gallery (D-199, Bobby 12 Oct: Blacklane's car pages). One swipe row that snaps a picture at a time; each
   picture has its own caption on navy glass (bone text) and its own dots, so nothing depends on the script. journey.js
   shows Previous and Next, hidden at the ends. The first picture is the car (eager, the page's largest paint); the rest
   load lazily. Phones show the dots beside the caption to keep the glass short, so the car stays above it. */
.jr-gal{position:relative}
.jr-gal__track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none}
.jr-gal__track::-webkit-scrollbar{display:none}
.jr-gal__track:focus-visible{outline:2px solid var(--blue-300);outline-offset:-4px}
.jr-gal__slide{position:relative;flex:0 0 100%;height:100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.jr-gal__slide + .jr-gal__slide img{object-position:50% 50%}
.jr-gal__cap{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0;padding:9px 12px;border:1px solid rgba(244,241,234,.2);border-radius:var(--radius);
  background:rgba(4,16,39,.7);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  font-size:14px;line-height:1.4;color:var(--bone);text-wrap:pretty}
.jr-gal__dots{display:flex;flex-shrink:0;gap:7px}
.jr-gal__dots i{width:6px;height:6px;border-radius:50%;background:rgba(244,241,234,.45)}
.jr-gal__dots i.is-on{background:var(--teal)}
.jr-gal__btn{position:absolute;top:calc(50% - 22px - 24px);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border:1px solid rgba(4,16,39,.14);border-radius:50%;background:rgba(244,241,234,.88);color:var(--navy);cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color 150ms ease-out}
.jr-gal__btn[hidden]{display:none}
.jr-gal__btn:hover{background:var(--bone)}
.jr-gal__btn:focus-visible{outline:2px solid var(--blue-300);outline-offset:2px}
.jr-gal__btn--prev{left:10px}
.jr-gal__btn--next{right:10px}
@media (min-width:768px){
  .jr-gal__cap{left:16px;right:16px;bottom:16px;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 18px 16px;font-size:16px}
  .jr-gal__btn{top:calc(50% - 22px - 36px)}
  .jr-gal__btn--prev{left:16px}
  .jr-gal__btn--next{right:16px}
}
.jr-car__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 12px;padding:16px 16px 0}
.jr-car__name{order:1;flex:1 1 calc(100% - 100px);font-family:var(--font-display);font-size:18px;font-weight:700}
.jr-car__price{order:2;font-family:var(--font-display);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.jr-car__seats{order:3;font-size:14px;color:var(--jr-muted);align-self:center}
.jr-car__cap{order:4;display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600}
.jr-car__cap>span{display:inline-flex;align-items:center;gap:4px}
.jr-car__cap svg{width:18px;height:18px}
.jr-benefits{list-style:none;margin:12px 16px 0;padding:14px 0 16px;border-top:1px solid var(--jr-hair);display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.jr-benefits li{display:flex;gap:12px;align-items:flex-start}
.jr-benefits svg{flex-shrink:0;width:20px;height:20px;margin-top:2px;color:var(--jr-icon)}
.jr-benefits li>span{display:flex;flex-direction:column;gap:2px}
.jr-benefits b{font-size:16px;line-height:1.3;font-weight:700}
.jr-benefits b+span{font-size:16px;line-height:1.45;color:var(--jr-muted)}
@media (min-width:768px){
  .jr-car__shot{height:auto;aspect-ratio:740/380}
  .jr-car__head{flex-wrap:nowrap;align-items:center;gap:24px;padding:20px 24px 16px}
  .jr-car__name{order:0;flex:0 1 auto;font-size:20px;margin-right:auto}
  .jr-car__cap,.jr-car__price{order:0}
  .jr-car__cap{gap:16px;font-size:15px}
  .jr-car__cap>span{gap:6px}
  .jr-car__cap svg{width:22px;height:22px}
  .jr-car__price{font-size:28px}
  .jr-benefits{margin:0;padding:18px 24px 22px;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px}
  .jr-benefits svg{width:22px;height:22px;margin-top:1px}
  .jr-benefits b{font-size:15px}
  .jr-benefits b+span{min-height:2.9em;font-size:14px}
}
@media (min-width:1024px){.jr-car__shot{height:380px;aspect-ratio:auto}}
.jr-car__cap>span{white-space:nowrap}

/* --------------------------------------------------------------------------
   4. What's included, capacity
   -------------------------------------------------------------------------- */
.jr-incl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;font-size:16px;line-height:1.45}
.jr-incl li{display:flex;flex-direction:column;gap:8px}
.jr-incl svg{width:28px;height:28px;color:var(--jr-icon)}
.jr-incl[hidden]{display:none}   /* three lists, one per mode: journey.js shows the one that fits */
@media (min-width:768px){
  .jr-incl{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;font-size:15px;line-height:1.55}
  .jr-incl li{gap:10px}
  .jr-incl svg{width:32px;height:32px}
}

.jr-tabs{display:flex;gap:20px;border-bottom:1px solid var(--jr-hair)}
.jr-tab{min-height:44px;padding:0 2px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--jr-ink);
  font:600 15px/1 var(--font-body);cursor:pointer}
.jr-tab[aria-selected="true"]{border-bottom-color:var(--jr-blue)}
.jr-panel{padding-top:14px;display:flex;flex-direction:column;gap:12px}
.jr-panel p{margin:0;font-size:16px;color:var(--jr-muted)}
.jr-tag{align-self:flex-start;padding:6px 12px;border-radius:var(--radius);background:var(--jr-blue);color:var(--bone);font-size:13px;font-weight:600}
.jr-frame{height:239px;border-radius:var(--radius);overflow:hidden;background:var(--navy)}
.jr-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
@media (min-width:768px){
  .jr-tabs{gap:24px}
  .jr-panel{padding-top:16px;gap:16px}
  .jr-panel p{font-size:15px}
  .jr-tag{padding:8px 14px;font-size:14px}
  .jr-frame{height:auto;aspect-ratio:744/496}
}

/* --------------------------------------------------------------------------
   5. Your details: the form
   -------------------------------------------------------------------------- */
.jr-details{scroll-margin-top:16px}
.jr-details:focus{outline:none}
.jr-lede{margin:0 0 16px;font-size:16px;color:var(--jr-muted)}
.jr-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
.jr-form>*{grid-column:1/-1;min-width:0}
/* Passengers, Large cases and Smaller bags: three across, on a phone and on a desktop (12 Oct: the flight number moved up to
   the journey, so these three sit together on their own row) */
.jr-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.jr-form>.jr-fld--pc,.jr-form>.jr-fld--time{grid-column:span 1}
.jr-form>.jr-fld--dest,.jr-form>.jr-fld--date{grid-column:span 2}
/* D-192: By the hour has no Where to, and its Duration ("10 hours, £405 (save £45)") needs a full phone row, so the postcode
   gets one too (journey.js sets is-hourly). From 768 the two sit side by side as postcode and Where to do. */
.jr-form>.jr-fld--dur,.jr-form.is-hourly>.jr-fld--pc{grid-column:1/-1}
.jr-form>.jr-fld--after{order:2}
/* D-213: an extra stop's own address, the street and postcode fields as the pickup has them (journey.js shows one block a stop). On a phone the
   street takes the row and the postcode a third of it, as the pickup does; from 768 they sit side by side. */
.jr-form>.jr-stop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
.jr-stop>.jr-fld{grid-column:1/-1}
.jr-stop>.jr-fld--pc{grid-column:span 1}
.jr-fld{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0}
.jr-fld label,.jr-lbl,.jr-fld legend{font-size:14px;font-weight:600;line-height:1.45;color:var(--jr-ink)}
.jr-fld legend{padding:0;margin-bottom:6px}
.jr-opt{font-weight:400;color:var(--jr-muted)}
.jr-inp{box-sizing:border-box;width:100%;min-height:48px;padding:0 14px;border:1px solid var(--jr-control);border-radius:var(--radius);
  background:var(--jr-white);font:16px var(--font-body);color:var(--jr-ink);transition:border-color 150ms ease-out}
select.jr-inp{padding:0 10px}
input[type="date"].jr-inp,input[type="time"].jr-inp{padding:0 10px}
/* iPhone Safari gives date and time fields a built-in minimum width and ignores width:100%, so in the three-column phone
   grid they ran past the screen and the whole journey page could be dragged sideways (Bobby, 12 Oct). iOS only (the
   touch-callout query): plain appearance and min-width:0 make them fit their cell, the value keeps the left edge. */
@supports (-webkit-touch-callout:none){
  input[type="date"].jr-inp,input[type="time"].jr-inp{-webkit-appearance:none;appearance:none;min-width:0;display:block}
  .jr-inp::-webkit-date-and-time-value{text-align:left}
}
/* and the net under it, as every homepage section has: nothing on this page may widen it. clip, not hidden, so main never
   becomes a scroll box and anything sticky inside it still sticks. */
.nv-journey main{overflow-x:clip}
textarea.jr-inp{min-height:0;padding:12px 14px;line-height:1.5;resize:vertical}
/* a field that still needs filling: a heavier ink edge and the reason in words (no new colour) */
.jr-inp[aria-invalid="true"]{border-color:var(--jr-ink);box-shadow:inset 0 0 0 1px var(--jr-ink)}
.jr-err{margin:0;display:flex;gap:6px;align-items:flex-start;font-size:14px;line-height:1.45;font-weight:600;color:var(--jr-ink)}
.jr-err::before{content:"!";flex-shrink:0;display:inline-grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%;
  background:var(--jr-ink);color:var(--bone);font-size:12px;font-weight:700;line-height:1}
.jr-note{margin:-6px 0 0;font-size:14px;color:var(--jr-muted)}
/* a hint inside a field, under its control (D-184, Children): the link keeps a 44px tap height without moving the lines */
.jr-note--fld{margin:0;line-height:1.45}
.jr-note--fld a{padding:12px 0}
.jr-fit{margin:-4px 0 0;display:flex;gap:8px;align-items:flex-start;font-size:16px;line-height:1.45;color:var(--jr-ink)}
.jr-fit.is-ok{color:var(--jr-ok)}
.jr-fit svg{flex-shrink:0;margin-top:3px}
.jr-fit:empty{display:none}
.jr-checks{gap:0}
.jr-check{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:400!important;font-size:16px!important;cursor:pointer}
.jr-check input{width:20px;height:20px;margin:0;accent-color:var(--jr-blue);flex-shrink:0}
.jr-known{list-style:none;margin:0;padding:12px 14px;border:1px solid var(--jr-hair);border-radius:var(--radius);background:var(--jr-white);
  display:flex;flex-direction:column;gap:6px;font-size:16px;color:var(--jr-muted)}
.jr-moods{display:flex;flex-wrap:wrap;gap:8px}
.jr-mood{min-height:44px;padding:0 14px;border:1px solid var(--jr-control);border-radius:var(--radius);background:var(--jr-white);color:var(--jr-ink);
  font:600 14px var(--font-body);cursor:pointer;transition:background-color 150ms ease-out,color 150ms ease-out,border-color 150ms ease-out}
.jr-mood[aria-pressed="true"]{background:var(--jr-blue);border-color:var(--jr-blue);color:var(--bone)}
@media (hover:hover){.jr-inp:hover,.jr-mood:hover{border-color:var(--jr-ink)}.jr-mood[aria-pressed="true"]:hover{border-color:var(--jr-blue)}}
@media (prefers-reduced-motion:reduce){.jr-inp,.jr-mood{transition:none}}
@media (min-width:768px){
  .jr-lede{margin-bottom:20px;font-size:15px}
  .jr-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
  .jr-form>.jr-fld--pc,.jr-form>.jr-fld--dest,.jr-form>.jr-fld--dur,.jr-form>.jr-fld--date,.jr-form>.jr-fld--time,.jr-form>.jr-fld--stops,
  .jr-form.is-hourly>.jr-fld--pc,
  .jr-form>.jr-fld--after{grid-column:auto;order:0}
  .jr-trio{gap:20px}
  .jr-form>.jr-full{grid-column:1/-1}
  .jr-form>.jr-stop{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
  .jr-stop>.jr-fld,.jr-stop>.jr-fld--pc{grid-column:auto}
  .jr-fit{font-size:14px}
  .jr-fit svg{margin-top:1px}
  .jr-known{font-size:14px}
  .jr-mood{padding:0 16px;font-size:15px}
  .jr-check{font-size:15px!important}
}

/* --------------------------------------------------------------------------
   6. Price breakdown
   -------------------------------------------------------------------------- */
.jr-pb{padding:20px 16px;border:1px solid var(--jr-hair);border-radius:var(--radius);background:var(--jr-white)}
/* D-187: a return spelled out, both journeys and the total, above the rows (ink on white, as the rows) */
.jr-legs{list-style:none;margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--jr-hair);display:flex;flex-direction:column;gap:6px;
  font-size:16px;line-height:1.45;color:var(--jr-ink)}
.jr-legs__total{font-weight:700}
/* D-190: the filed fare struck through (muted ink), then the fare paid; "You save" on its own line in the page's ok green */
.jr-legs__was{color:var(--jr-muted);text-decoration-thickness:1px}
.jr-legs__save{display:block;font-weight:600;color:var(--jr-ok)}
@media (min-width:768px){.jr-legs{margin-bottom:20px;padding-bottom:20px;font-size:15px;line-height:1.55}}
.jr-rows{display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.45}
.jr-row{display:flex;align-items:flex-end}
.jr-row>span:first-child{flex:0 1 auto}
.jr-lead{flex:1 0 16px;align-self:flex-end;margin:0 8px .4em;border-bottom:1px dotted var(--jr-dot)}
.jr-v{flex-shrink:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.jr-row--total{font-weight:700}
.jr-pb__rule{margin:16px 0;border:0;border-top:1px solid var(--jr-hair)}
.jr-pb__exact,.jr-pb__quote{margin:12px 0 0;font-size:16px;color:var(--jr-muted)}
.jr-pb__quote{margin:0;color:var(--jr-ink)}
.jr-extras{margin:14px 0 0;font-size:16px;color:var(--jr-muted)}
.jr-please{margin:0 0 10px;font-size:15px;font-weight:600}
.jr-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--jr-muted)}
.jr-notes li{display:flex;gap:10px}
.jr-notes svg{flex-shrink:0;margin-top:2px;color:var(--jr-ink)}
@media (min-width:768px){
  .jr-pb{padding:32px}
  .jr-rows{gap:12px;font-size:15px;line-height:1.55}
  .jr-lead{margin:0 12px .45em}
  .jr-pb__rule{margin:20px 0}
  .jr-pb__rule--note{margin:24px 0 16px}
  .jr-pb__exact,.jr-pb__quote{font-size:15px}
  .jr-extras{margin-top:20px;font-size:14px}
}

/* --------------------------------------------------------------------------
   7. The booking card (aside on desktop; on phones the call line and the trust strip) and the Send button
   -------------------------------------------------------------------------- */
.jr-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.jr-map,.jr-sum__top,.jr-sum__chip{display:none}
.jr-sum{display:flex;flex-direction:column;gap:12px}
.jr-promise{margin:0;font-size:16px;line-height:1.5;color:var(--jr-muted)}
.jr-promise b{color:var(--jr-ink);font-weight:600}
.jr-call{margin:0;font-size:16px;color:var(--jr-muted)}
.nv-journey main .jr-call a{display:inline-block;padding:12px 0;margin:-12px 0;font-weight:600;color:var(--jr-ok);text-decoration:none}
.nv-journey main .jr-call a:hover{color:var(--jr-ink)}
.jr-trust{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:12px 14px;border-radius:var(--radius);background:var(--navy);color:var(--muted-img);font-size:13px}
.jr-trust__rate{display:inline-flex;align-items:center;gap:6px;color:var(--bone)}
.jr-trust b{font-weight:600}
/* 4.9 shown as 4.9: four full stars and 90% of the fifth, never five (D-103) */
.jr-stars{--s:14px;--g:2px;position:relative;display:inline-flex;gap:var(--g);color:var(--line-strong)}
.jr-stars svg{width:var(--s);height:var(--s);flex-shrink:0;display:block}
.jr-stars__fill{position:absolute;left:0;top:0;bottom:0;display:inline-flex;gap:var(--g);overflow:hidden;color:var(--teal);width:calc(4 * (var(--s) + var(--g)) + .9 * var(--s))}
.jr-defs{position:absolute;width:0;height:0;overflow:hidden}

.jr-send{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 16px;border-radius:var(--radius);background:var(--teal);
  font-family:var(--font-display);font-size:18px;font-weight:700;text-decoration:none;text-align:center}
.nv-journey main a.jr-send,.nv-journey main a.jr-send:hover{color:var(--navy)}
.jr-send svg{flex-shrink:0}
.jr-send{transition:background-color 200ms ease-out,color 200ms ease-out;cursor:pointer}   /* an inactive one has no href, so no link cursor of its own */
/* 12 Oct (Bobby): the one Send button sits under the price breakdown. */
.jr-end{display:flex;flex-direction:column;gap:16px}
.jr-sendbox{display:flex;flex-direction:column;gap:12px}
/* Inactive until every required field is filled (aria-disabled, never the disabled attribute: a tap still runs the page's missing-field
   check). Muted from the page's own tokens: a sand fill (the sand is what says inactive), the label in the page ink so it stays AAA (about 13:1)
   in the state the page loads in. Teal returns the moment the booking is complete. */
.nv-journey main a.jr-send[aria-disabled="true"],.nv-journey main a.jr-send[aria-disabled="true"]:hover{background:var(--jr-hair);color:var(--jr-ink)}
@media (prefers-reduced-motion:reduce){.jr-send{transition:none}}
/* D-218, D-220 (13 Oct): the backup line under the promise: "No WhatsApp? Send it by text, or copy the booking and email it, or call". Quiet on purpose (one primary button per view): small muted
   words, the links in the page's link green, one small outlined button. The button is gated like Send (aria-disabled until every required field is
   filled; a tap while it is inactive shows what is missing). Words stay in the page ink or the muted ink, both AAA on the bone. */
.jr-desk{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:4px;padding-top:16px;border-top:1px solid var(--jr-hair)}
.jr-desk__line{margin:0;font-size:14px;line-height:1.5;color:var(--jr-muted)}
.nv-journey main .jr-desk__line a{display:inline-block;padding:12px 0;margin:-12px 0;font-weight:600;color:var(--jr-ok);text-decoration:underline;text-underline-offset:2px}
.nv-journey main .jr-desk__line a:hover{color:var(--jr-ink)}
/* the text link is gated like Send (D-220): with no href it is a role=button anchor, muted like the inactive Copy booking, and still shows what is missing on a tap */
.nv-journey main .jr-desk__line a[data-jr-sms]{cursor:pointer}
.nv-journey main .jr-desk__line a[data-jr-sms][aria-disabled="true"]{color:var(--jr-muted)}
.jr-copy{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--jr-control);border-radius:var(--radius);
  background:transparent;color:var(--jr-ink);font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1;cursor:pointer;
  transition:background-color 150ms ease-out,border-color 150ms ease-out}
@media (hover:hover){.jr-copy:hover{background:var(--jr-white);border-color:var(--jr-ink)}}
.jr-copy[aria-disabled="true"]{border-color:var(--jr-control);color:var(--jr-muted)}   /* inactive: the muted ink (still AAA); complete: the page ink and a darker edge */
.jr-copy[aria-disabled="false"]{border-color:var(--jr-ink)}
@media (prefers-reduced-motion:reduce){.jr-copy{transition:none}}

@media (min-width:768px){
  .jr-sum{padding:24px;border:1px solid var(--jr-hair);border-radius:var(--radius);background:var(--jr-white);gap:16px}
  .jr-sum__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
  .jr-sum__car{margin:0;font-family:var(--font-display);font-size:18px;font-weight:700}
  .jr-sum__drv{margin:0;font-size:14px;color:var(--jr-muted)}
  .jr-sum__price{margin:0;font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
  .jr-sum__chip{display:block;align-self:flex-start;margin:0;padding:6px 10px;border:1px solid var(--jr-blue);border-radius:var(--radius);color:var(--jr-blue);font-size:13px;font-weight:600}
  .jr-promise,.jr-call{font-size:14px}
  .jr-trust{gap:6px 14px;padding:14px 16px}
}
@media (min-width:1024px){
  .jr-map{display:block;position:relative;height:230px;border-radius:var(--radius);overflow:hidden;background:var(--navy);color:var(--bone)}
  .jr-map svg{position:absolute;inset:0;width:100%;height:100%}
  .jr-map__tag{position:absolute;display:flex;flex-direction:column;max-width:70%;padding:6px 10px;border-radius:var(--radius);
    background:rgba(9,33,78,.92);font-size:13px;line-height:1.35}
  .jr-map__tag b{font-weight:600}
  .jr-map__tag--pick{left:16px;bottom:14px}
  .jr-map__tag--drop{right:16px;top:64px;text-align:right;align-items:flex-end}
}

/* --------------------------------------------------------------------------
   8. 1024 to 1199px: the desktop board's two columns, tightened so nothing wraps awkwardly
   -------------------------------------------------------------------------- */
@media (min-width:1024px) and (max-width:1199px){
  .jr-grid{grid-template-columns:minmax(0,1fr) 372px;gap:32px}
  .jr-car__head{gap:16px}
  .jr-car__name{font-size:18px}
  .jr-sum{padding:20px}
  .jr-sum__price{font-size:24px}
}
@media print{.jr-route{display:none!important}}