@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&display=swap");
/* Naba Al-Ikram — brand layer. Loaded after style.css; overrides only. */

/* Five Pillars cards ---------------------------------------------------- */
/* The theme laid the copy over the photo, clamped to four lines. The client's
   pillar statements are far longer than that, so the text moves below the
   image and the card is allowed to grow. The number badge stays on the photo. */
.rts-process-item-wrapper .single-process-item{
  height:100%;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid rgba(105,30,51,.12);
  border-radius:20px;
  overflow:hidden;
}
.rts-process-item-wrapper .single-process-item .image-area{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:0;
}
.rts-process-item-wrapper .single-process-item .image-area img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}
.rts-process-item-wrapper .single-process-item:hover .image-area img{ transform:scale(1.04); }
.rts-process-item-wrapper .single-process-item .image-area::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
              rgba(26,16,22,.34) 0%,
              rgba(26,16,22,0) 55%);
  pointer-events:none;
}
.rts-process-item-wrapper .single-process-item .content{
  position:static;
  padding:26px 26px 30px;
}
.rts-process-item-wrapper .single-process-item .content .title{ margin:0; font-size:22px; }
.rts-process-item-wrapper .single-process-item .content .title,
.rts-process-item-wrapper .single-process-item .content .title a{ color:var(--color-heading, #1a1016); }
.rts-process-item-wrapper .single-process-item .content .title a:hover{ color:var(--brand-maroon, #691E33); }
.rts-process-item-wrapper .single-process-item .content .pillar-lede{
  margin:6px 0 12px;
  font-weight:var(--f-medium, 500);
  color:var(--brand-maroon, #691E33);
}
.rts-process-item-wrapper .single-process-item .content .pillar-desc{
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:var(--color-body, #555);
}
/* the numbered badge sits on the photo, top-start */
.rts-process-item-wrapper .single-process-item .inner{
  position:absolute;
  top:0;
  inset-inline-start:0;
  z-index:2;
}

.rts-process-item-wrapper .single-process-item::before,
.rts-process-item-wrapper .single-process-item::after{ display:none; }
.rts-process-item-wrapper .single-process-item .image-area::before{
  background:transparent;
}
.rts-process-item-wrapper .single-process-item .content .title{
  font-size:22px;
  line-height:1.25;
}

/* Quote-on-request replaces the per-day price ---------------------------- */
.car-price .price-tag{
  display:inline-block;
  font-size:15px;
  font-weight:var(--f-medium);
  color:var(--color-primary);
  letter-spacing:.01em;
}
.car-price{ line-height:1.4; }

/* Gold as the accent metal ---------------------------------------------- */
.rts-section-title .subtitle,
.section-title .subtitle,
span.pre-title{ color:var(--color-gold-dark); }

.rts-hero-banner::after,
.banner-bg::after{ background:linear-gradient(180deg,rgba(26,16,22,.55) 0%,rgba(74,20,36,.72) 100%); }

/* Footer sits on brand maroon rather than the stock photo ---------------- */
.rts-footer-area.footer-bg{
  background-color:var(--color-primary-dark);
  background-blend-mode:multiply;
}

/* Logo breathing room ---------------------------------------------------- */
.logo-area .logo img,.logo-area a img{ max-height:56px; width:auto; }
.header-top .logo-area a img{ max-height:48px; }

/* Legal pages ------------------------------------------------------------ */
.legal-page h3.title{ font-size:24px; margin:38px 0 12px; color:var(--color-heading); }
.legal-page p.disc{ margin-bottom:16px; line-height:1.8; }
.legal-page .legal-list{ margin:0 0 18px 0; padding-left:22px; list-style:disc; }
.legal-page .legal-list li{ margin-bottom:10px; line-height:1.75; color:var(--color-body); }
.legal-page a{ color:var(--color-primary); text-decoration:underline; }

/* Quote enquiry modal ---------------------------------------------------- */

.quote-modal .modal-content{
  border:0;
  border-radius:14px;
  background:var(--color-white);
  box-shadow:0 30px 80px -30px rgba(26,16,22,.5);
  overflow:hidden;
}
.quote-modal .modal-header{
  border:0;
  padding:26px 30px 6px;
  align-items:flex-start;
}
.quote-modal .modal-title{
  font-family:var(--font-primary);
  font-size:26px;
  line-height:1.25;
  font-weight:var(--f-semi-bold);
  color:var(--color-heading);
  margin:0;
}
.quote-modal .modal-body{ padding:8px 30px 30px; }
.quote-modal__lede{
  font-size:15px;
  line-height:1.65;
  color:var(--color-body);
  margin:0 0 20px;
}

/* what the reader asked for, carried in from the booking bar */
.quote-modal__summary{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 18px;
  margin:0 0 22px;
  padding:15px 18px;
  background:var(--color-gray);
  border-radius:9px;
  border-inline-start:2px solid var(--color-gold);
}
.quote-modal__summary dt{
  font-size:12.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--color-body);
  font-weight:var(--f-medium);
}
.quote-modal__summary dd{
  margin:0;
  font-size:14.5px;
  color:var(--color-heading);
  font-weight:var(--f-medium);
}

.quote-modal__field{ margin-bottom:14px; }
.quote-modal__field label{
  display:block;
  font-size:13.5px;
  font-weight:var(--f-medium);
  color:var(--color-heading);
  margin-bottom:6px;
}
.quote-modal__field input{
  width:100%;
  height:52px;
  padding:0 16px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-white);
  color:var(--color-heading);
  font-size:15px;
  transition:var(--transition);
}
.quote-modal__field input::placeholder{ color:#A9A1A6; }
.quote-modal__field input:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(105,30,51,.12);
}
.quote-modal__field input.is-invalid{ border-color:#8E2C2C; }

/* "or" divider — either field alone is enough */
.quote-modal__or{
  display:flex;
  align-items:center;
  gap:14px;
  margin:4px 0 14px;
  color:var(--color-body);
  font-size:13px;
}
.quote-modal__or::before,
.quote-modal__or::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--color-border);
}

.quote-modal__error{
  margin:2px 0 16px;
  font-size:13.5px;
  line-height:1.55;
  color:#8E2C2C;
  background:#FBEDED;
  border-radius:7px;
  padding:10px 13px;
}
.quote-modal__submit{ width:100%; justify-content:center; }
.quote-modal__note{
  margin:14px 0 0;
  font-size:12.5px;
  line-height:1.55;
  color:var(--color-body);
}
.quote-modal__note a{ color:var(--color-primary); text-decoration:underline; }

@media (max-width:575px){
  .quote-modal .modal-header{ padding:22px 20px 4px; }
  .quote-modal .modal-body{ padding:6px 20px 24px; }
  .quote-modal .modal-title{ font-size:22px; }
}

/* the theme's filled button relies on inner spans; this one is a plain button */
.quote-modal__submit.rts__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:54px;
  padding:0 22px;
  border:0;
  border-radius:8px;
  background:var(--color-primary);
  color:var(--color-white);
  font-family:var(--font-primary);
  font-size:16px;
  font-weight:var(--f-medium);
  cursor:pointer;
  transition:var(--transition);
}
.quote-modal__submit.rts__btn:hover{ background:var(--color-primary-dark); color:var(--color-white); }
.quote-modal__submit.rts__btn:focus-visible{
  outline:2px solid var(--color-gold-dark); outline-offset:2px;
}

/* B2B enquiry form ------------------------------------------------------- */
.partner-form__lede{
  font-size:14.5px;
  line-height:1.65;
  color:var(--color-body);
  margin:-6px 0 22px;
}
.rts-contact-form .single-input textarea{
  width:100%;
  min-height:120px;
  padding:14px 16px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-white);
  color:var(--color-heading);
  font-family:var(--font-secondary);
  font-size:15px;
  resize:vertical;
}
.rts-contact-form .single-input textarea:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(105,30,51,.12);
}
#partner-enquiry .single-input input{ padding-inline-start:16px; }
#partner-enquiry .single-input .icon{ display:none; }

/* Video hero ------------------------------------------------------------
   The still sits underneath and drifts slowly, so the section looks alive
   even before any footage is dropped into assets/videos/. */
.banner-video{ position:relative; overflow:hidden; }
.hero-video-wrap{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:var(--color-heading);
}
.hero-video__still{
  position:absolute;
  inset:-4%;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{ transform:scale(1.02) translate3d(0,0,0); }
  to  { transform:scale(1.10) translate3d(-1.2%,-1%,0); }
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  /* a missing file leaves this transparent, so the still shows through */
  background:transparent;
  /* hero-video.js attaches the source and adds .is-playing on the first
     decoded frame, so the still cross-fades into the footage rather than
     snapping to it. Phones never get here: the still is the whole hero. */
  opacity:0;
  transition:opacity .8s ease;
}
.hero-video.is-playing{ opacity:1; }
.hero-video__scrim{
  position:absolute;
  inset:0;
  /* Measured against the supplied footage: it contains pure-white frames, so
     white type over the brightest areas was landing at 1.68:1. Compositing in
     sRGB, ~0.6 alpha of ink is what it takes to bring those to 4.5:1. The
     gradient peaks across the middle band where the headline and lede sit and
     eases off top and bottom so the picture still reads. */
  background:
    linear-gradient(180deg,
      rgba(26,16,22,.34)  0%,
      rgba(26,16,22,.48) 18%,
      rgba(26,16,22,.70) 38%,
      rgba(26,16,22,.72) 60%,
      rgba(26,16,22,.70) 80%,
      rgba(74,20,36,.76) 92%,
      rgba(74,20,36,.86) 100%),
    linear-gradient(90deg,
      rgba(74,20,36,.36)  0%,
      rgba(74,20,36,.12) 58%,
      rgba(74,20,36,.24) 100%);
}
.banner-video .container{ position:relative; z-index:2; }

/* readers who ask for less motion get the still, held steady */
@media (prefers-reduced-motion: reduce){
  .hero-video{ display:none; }
  .hero-video__still{ animation:none; inset:0; }
}

/* The footage has bright crowd frames, and the scrim alone cannot be trusted
   frame by frame. A soft shadow keeps the type readable over any of them
   without darkening the picture further. */
.banner-video .banner-title{
  text-shadow:0 2px 20px rgba(26,16,22,.55), 0 1px 3px rgba(26,16,22,.4);
}
.banner-video .banner-content-center-area .desc{
  text-shadow:0 1px 12px rgba(26,16,22,.7), 0 1px 2px rgba(26,16,22,.5);
}

/* Home variant picker — the two homepages are up for comparison, so mark
   which one you are currently looking at. */
.nav-area .submenu a.is-current-variant,
.mainmenu .submenu a.is-current-variant{
  color:var(--color-primary);
  font-weight:var(--f-semi-bold);
}
.nav-area .submenu a.is-current-variant::before{
  content:"";
  display:inline-block;
  width:5px; height:5px;
  margin-inline-end:8px;
  border-radius:50%;
  background:var(--color-gold);
  vertical-align:middle;
}

/* Legal pages -----------------------------------------------------------
   These are built on the theme's blog-details layout, which brings two
   inherited surprises: a sports-car hero image hard-coded in CSS, and a
   flex list that forces every <li> to 30% width. */
.rts-breadcrumb-area.blog-details{
  background:
    linear-gradient(180deg, rgba(26,16,22,.50) 0%, rgba(74,20,36,.78) 100%),
    url(../images/portfolio-breadcrumb.webp) center/cover no-repeat;
}
.rts-breadcrumb-area.blog-details .breadcrumb-area-wrapper .left p{
  color:var(--color-gold-light);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:13px;
}
.legal-page .legal-list{
  display:block;                 /* not the theme's flex row */
  list-style:disc;
  padding-inline-start:22px;
  margin:0 0 18px;
}
.legal-page .legal-list li{
  display:list-item;             /* not flex, and not 30% wide */
  width:auto;
  gap:0;
  margin-bottom:10px;
  line-height:1.75;
  color:var(--color-body);
}
.legal-page p.disc{ max-width:68ch; }

/* Hero video modal ------------------------------------------------------
   The theme's play button pointed at a bare youtube.com/watch with no video
   id, so it opened an empty Magnific iframe. This plays the local file. */
.video-modal .modal-content{
  position:relative;
  border:0;
  border-radius:12px;
  overflow:hidden;
  background:var(--color-heading);
}
.video-modal__player{
  display:block;
  width:100%;
  height:auto;
  max-height:78vh;
  background:#000;
}
.video-modal .btn-close{
  position:absolute;
  top:12px;
  inset-inline-end:12px;
  z-index:3;
  padding:9px;
  border-radius:50%;
  background-color:var(--color-white);
  opacity:.92;
}
.video-modal .btn-close:hover{ opacity:1; }

/* Mobile off-canvas menu ------------------------------------------------
   The theme hides the panel with `right:-100%` but gives it a fixed 465px
   width, so on any viewport narrower than the panel the remainder stays on
   screen. The live theme fixes this with `.side-bar{width:310px}` inside a
   575px media query; that rule is missing from our downloaded style.css.
   Capping against the viewport as well makes it hold at any width:
   at 300px the panel is 258px and -300px of offset clears it completely. */
@media only screen and (max-width: 575px){
  .side-bar{ width:min(310px, 86vw); }
}

/* Below 465px the horizontal lockup gets squeezed to ~91px, which makes the
   wordmark illegible and leaves no gap before the language switcher. Drop to
   the shield alone. Scoped to <header> so the footer keeps the full lockup,
   where there is room for it. */
@media only screen and (max-width: 465px){
  header .logo-area a,
  header .logo-area a.logo{
    display:inline-block;
    width:52px;
    height:49px;
    background:url(../images/logo-mark.png) left center/contain no-repeat;
  }
  header .logo-area a img{ display:none; }
  /* breathing room now that the two sit closer together */
  header .lang-switch{ margin-inline-start:10px; }
}

/* ======================================================================
   Client feedback round (2026-09-08) — global chrome
   Socials: LinkedIn, Instagram, Facebook, TikTok only; icons enlarged and
   repeated in the footer. Contacts split B2C / B2B with real WhatsApp
   deep links. See docs/build-plan-feedback-round.md.
   ====================================================================== */

/* --- Social icons, header ------------------------------------------- */
/* The theme ships 20px marks at an 8px gap. The client asked for these to
   read larger, so scale the mark itself rather than the row. */
.header-social{ gap:12px !important; }
.header-social img{
  width:30px;
  height:30px;
  transition:transform .25s ease, opacity .25s ease;
}
.header-social a:hover img{ transform:translateY(-2px); }

/* --- WhatsApp link beside the navbar phone --------------------------- */
/* The navbar carries a single number (the client's call); the WhatsApp mark
   sits beside it so the same line serves both. */
.hdr-wa{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  margin-inline-start:10px;
  border-radius:50%;
  background:#25D366;
  color:#fff !important;
  font-size:14px;
  vertical-align:middle;
  transition:transform .25s ease;
}
.hdr-wa:hover{ transform:scale(1.08); color:#fff !important; }

/* --- Social icons, footer copyright bar ------------------------------ */
.copyright-area .copyright-area-inner .footer-social{ gap:14px !important; }
.copyright-area .copyright-area-inner .footer-social li a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  color:#fff;
  font-size:16px;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.copyright-area .copyright-area-inner .footer-social li a:hover{
  background:var(--brand-gold, #C4A262);
  border-color:var(--brand-gold, #C4A262);
  color:#3d1220;
  transform:translateY(-2px);
}

/* --- Social icons, mobile drawer ------------------------------------- */
.rts-social-style-one ul{ display:flex; align-items:center; gap:12px; }
.rts-social-style-one ul li a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:1px solid rgba(105,30,51,.25);
  border-radius:50%;
  color:var(--brand-maroon, #691E33);
  font-size:16px;
}
.rts-social-style-one ul li a:hover{
  background:var(--brand-maroon, #691E33);
  color:#fff;
}

/* The footer contact column is the theme's original single phone line and
   single mailbox: the B2C/B2B split tried here read badly at that width.
   All the numbers still live on the contact page and in the page CTAs. */


@media only screen and (max-width: 575px){
  .header-social img{ width:26px; height:26px; }
  .cta-inner .contact--stack{ flex-direction:column; align-items:stretch; }
}

/* The navbar phone cell is narrow, so the WhatsApp mark dropped onto a second
   line. Keeping the number and the mark in one flex row holds them together. */
.get-touch-area .map-area .text .tel-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.get-touch-area .map-area .text .tel-row .hdr-wa{
  margin-inline-start:0;
  width:24px;
  height:24px;
  font-size:13px;
}

/* The fixed back-to-top button sits at right:30px and now lands on top of the
   fourth footer social mark. Reserve room for it in the copyright bar. */
.copyright-area .copyright-area-inner{ padding-inline-end:64px; }

/* The bundled fa-brands webfont is FA5-era and has no glyph at U+E07B, so
   `fa-tiktok` rendered as an empty circle. Mask our own glyph instead, which
   also lets it inherit currentColor like the font icons around it. */
.ico-tiktok{
  display:inline-block;
  width:1em;
  height:1em;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M448%2C209.91a210.06%2C210.06%2C0%2C0%2C1-122.77-39.25V349.38A162.55%2C162.55%2C0%2C1%2C1%2C185%2C188.31V278.2a74.62%2C74.62%2C0%2C1%2C0%2C52.23%2C71.18V0l88%2C0a121.18%2C121.18%2C0%2C0%2C0%2C1.86%2C22.17h0A122.18%2C122.18%2C0%2C0%2C0%2C381%2C102.39a121.43%2C121.43%2C0%2C0%2C0%2C67%2C20.14Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M448%2C209.91a210.06%2C210.06%2C0%2C0%2C1-122.77-39.25V349.38A162.55%2C162.55%2C0%2C1%2C1%2C185%2C188.31V278.2a74.62%2C74.62%2C0%2C1%2C0%2C52.23%2C71.18V0l88%2C0a121.18%2C121.18%2C0%2C0%2C0%2C1.86%2C22.17h0A122.18%2C122.18%2C0%2C0%2C0%2C381%2C102.39a121.43%2C121.43%2C0%2C0%2C0%2C67%2C20.14Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}


/* ======================================================================
   Homepage, client feedback round (2026-09-08)
   ====================================================================== */

/* A short lede under a section heading. The theme had no slot for one. */
.rts-section-title .section-lede{
  max-width:760px;
  margin:18px auto 0;
  font-size:17px;
  line-height:1.65;
  color:var(--color-body, #555);
}
.rts-section-title:not(.text-center) .section-lede{ margin-inline:0; }


/* Why Choose: the market on one side, Naba on the other. Single column on
   narrow screens, where a side-by-side comparison stops being readable. */
.compare-wrapper{
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:30px;
  align-items:stretch;
}
.compare-col{
  border-radius:14px;
  padding:34px 32px;
}
.compare-col--market{
  background:#f4f1ee;
  border:1px solid rgba(105,30,51,.10);
}
.compare-col--naba{
  background:var(--brand-maroon, #691E33);
  color:#fff;
}
.compare-col__title{
  font-size:20px;
  margin:0 0 22px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(105,30,51,.16);
}
.compare-col--naba .compare-col__title{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.22);
}
.compare-list{ margin:0; padding:0; list-style:none; }
.compare-list > li{ position:relative; padding-inline-start:32px; }
.compare-list > li + li{ margin-top:16px; }
.compare-list > li::before{
  position:absolute;
  inset-inline-start:0;
  top:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Font Awesome 6 Pro", "Font Awesome 6 Free";
  font-weight:900;
  font-size:10px;
}
/* what the market does: muted, deliberately flat against the maroon */
.compare-list--market > li{ color:#6b6259; }
.compare-list--market > li::before{
  content:"\f00d";              /* xmark */
  background:rgba(105,30,51,.09);
  color:#8d6a75;
}
.compare-list--naba > li::before{
  content:"\f00c";              /* check */
  background:var(--brand-gold, #C4A262);
  color:#4a1424;
}
.compare-list--naba .title{
  font-size:17px;
  color:#fff;
  margin:0 0 4px;
}
.compare-list--naba p{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
}

@media only screen and (max-width: 991px){
  .compare-wrapper{ grid-template-columns:1fr; }
  .compare-col{ padding:28px 24px; }
}

/* Core Values -- six cards, each pairing the English name with its Arabic. */
.value-card{
  height:100%;
  padding:32px 28px;
  border:1px solid rgba(105,30,51,.12);
  border-radius:14px;
  background:#fff;
  transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.value-card:hover{
  transform:translateY(-4px);
  border-color:rgba(105,30,51,.28);
  box-shadow:0 18px 40px -24px rgba(74,20,36,.35);
}
.value-card__icon{
  width:60px;
  height:60px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(196,162,98,.16);
}
.value-card__icon img{ width:30px; height:30px; }
.value-card__title{
  font-size:20px;
  margin:0 0 10px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
}
.value-card__ar{
  font-size:15px;
  font-weight:var(--f-regular, 400);
  color:var(--brand-gold, #C4A262);
}
.value-card p{ margin:0; line-height:1.65; }

/* rts-section-gapTop only pads the top, so the values grid ran straight into
   the pillars heading below it. */
.rts-values-area{ padding-bottom:60px; }
@media only screen and (max-width: 767px){
  .rts-values-area{ padding-bottom:36px; }
}

/* Closing CTA: same box, same colours, now over a photographic plate. The
   gradient does the legibility work so the maroon still reads as the brand. */
.rts-cta-area .cta-inner--image{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.rts-cta-area .cta-inner--image::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(100deg,
    rgba(74,20,36,.94) 0%,
    rgba(74,20,36,.88) 42%,
    rgba(105,30,51,.62) 100%);
}
/* the theme's decorative shapes sit at z-index:-1, which the new plate would
   otherwise cover */
.rts-cta-area .cta-inner--image .shape{ z-index:0; opacity:.5; }

/* ======================================================================
   About page, client feedback round (2026-09-08)
   ====================================================================== */

/* Video at the top of an inner page. The breadcrumb block was a jarallax
   photo; the video layers sit behind its container, and the theme's own dark
   ::before is dropped because the hero scrim now does that work. */
.rts-breadcrumb-area.breadcrumb-video{ position:relative; overflow:hidden; }
.rts-breadcrumb-area.breadcrumb-video::before{ display:none; }
.rts-breadcrumb-area.breadcrumb-video .container,
.rts-breadcrumb-area.breadcrumb-video .nav-bread-crumb{ position:relative; z-index:2; }
/* the inner-page band is shorter than the homepage hero, so the scrim is
   flattened -- the homepage gradient peaks where a headline and lede sit */
.rts-breadcrumb-area.breadcrumb-video .hero-video__scrim{
  background:
    linear-gradient(180deg,
      rgba(26,16,22,.62) 0%,
      rgba(26,16,22,.70) 55%,
      rgba(74,20,36,.80) 100%);
}

/* Founding story: a pull quote for the "what we saw" passage. */
.story-pull{
  margin:30px 0 0;
  padding:22px 26px;
  border-inline-start:3px solid var(--brand-gold, #C4A262);
  background:#f7f4f1;
  border-radius:0 12px 12px 0;
}
.story-pull__label{
  display:block;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brand-maroon, #691E33);
  margin-bottom:8px;
}
.story-pull p{ margin:0; font-size:16px; line-height:1.7; font-style:italic; }

/* Mission and vision, side by side. */
.mission-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:30px;
}
.mission-card{
  padding:38px 34px;
  border-radius:16px;
  border:1px solid rgba(105,30,51,.12);
  background:#fff;
}
.mission-card--vision{
  background:var(--brand-maroon, #691E33);
  border-color:transparent;
  color:#fff;
}
.mission-card__kicker{
  display:block;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-gold, #C4A262);
  margin-bottom:14px;
}
.mission-card__title{
  font-size:24px;
  line-height:1.35;
  margin:0 0 16px;
}
.mission-card--vision .mission-card__title{ color:#fff; }
.mission-card p{ margin:0; line-height:1.75; }
.mission-card--vision p{ color:rgba(255,255,255,.8); }
.rts-mission-area{ padding-bottom:20px; }

/* The Kingdom-wide stat carries a map instead of a counted number. The theme
   pins every stat icon to 46px, so this one has to out-rank that, and the
   tiles are stretched to a common height now that one of them has no numeral. */
.rts-counter-area-two .counter-inner{ align-items:stretch; }
.rts-counter-area-two .counter-inner .inner{ justify-content:center; }
.rts-counter-area-two .counter-inner .inner.stat-inner--map .icon img{
  width:104px;
  height:auto;
}
.rts-counter-area-two .counter-inner .inner.stat-inner--map .text .desc{
  margin-top:4px;
  font-size:17px;
}


@media only screen and (max-width: 991px){
  .mission-grid{ grid-template-columns:1fr; }
}

/* ======================================================================
   Fleet pages, client feedback round (2026-09-08)
   ====================================================================== */

/* The client's fleet statement, above the grid. */
.fleet-statement{
  max-width:880px;
  margin:46px auto 0;
  text-align:center;
  font-size:17px;
  line-height:1.75;
}

/* Every card now carries the model name under the tier name, and two
   actions: Details to the vehicle's own page, Book Now into the quote modal. */
.single-car-list-item .car-model{
  margin:-6px 0 14px;
  font-size:15px;
  color:#8a7f75;
}
.single-car-list-item .car-actions{
  display:flex;
  gap:10px;
  margin-top:18px;
}
.single-car-list-item .car-actions .rts-btn{
  flex:1 1 0;
  text-align:center;
  padding:12px 14px;
  font-size:15px;
}
.single-car-list-item .car-actions__details{
  border:1px solid rgba(105,30,51,.28);
  color:var(--brand-maroon, #691E33);
}
.single-car-list-item .car-actions__details:hover{
  background:var(--brand-maroon, #691E33);
  color:#fff;
}

/* Detail pages: vehicles with a single photograph get a plain image where the
   template had a three-slide carousel with a thumb rail. */
.vehicle-hero-image img{
  width:100%;
  height:auto;
  border-radius:20px;
  display:block;
}


/* The detail sidebar carries four contact buttons now, so they stack. */
.contact-button-area{ display:flex; flex-direction:column; gap:10px; }
.contact-button-area .rts-btn{ justify-content:center; }

@media only screen and (max-width: 991px){
  .single-car-list-item .car-actions{ flex-direction:column; }
}

/* Bootstrap ships .btn-primary as #0d6efd and the theme has no base rule for
   .rts-btn, so every .rts-btn.btn-primary on the vehicle pages rendered
   Bootstrap blue -- the sidebar buttons included, before these pages existed.
   Brand colours, stated once here. */
.rts-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  border-radius:8px;
  font-size:16px;
  font-weight:var(--f-medium, 500);
  line-height:1.2;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.rts-btn.radius-small{ border-radius:8px; }
.rts-btn.btn-primary,
.rts-btn.btn-primary:focus{
  background:var(--brand-maroon, #691E33) !important;
  border-color:var(--brand-maroon, #691E33) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.rts-btn.btn-primary:hover{
  background:#54172a !important;
  border-color:#54172a !important;
  color:#fff !important;
}
/* the sidebar's WhatsApp button should read as WhatsApp */
.rts-btn.whatsapp{
  background:#25D366;
  color:#fff !important;
}
.rts-btn.whatsapp:hover{ filter:brightness(.94); color:#fff !important; }
.rts-btn.telegram{
  background:#f1ece8;
  color:var(--brand-maroon, #691E33) !important;
}

/* "Live GPS on every journey" is the detail-page phrasing; on a card it wraps
   to two lines, so the cards get the short form. */
.single-car-list-item .car-list-service li span{ line-height:1.35; }

/* Core Values, visibility fix (2026-09-08) -----------------------------
   As first built, white cards sat on the white page separated only by a
   1px rgba(105,30,51,.12) border: 1.29:1 against the page, so the cards did
   not read as cards at all. The Arabic name in brand gold (#C4A262) came out
   at 2.42:1 on white, which fails AA for 15px text.

   The section now carries the theme's cream, the cards stay white and lift
   off it with a shadow, and the Arabic sits on a darker gold at 4.97:1. */
.rts-values-area{
  background:var(--color-gray, #FBF8F3);
  padding-top:80px;
}
.rts-values-area .value-card{
  background:#fff;
  border-color:rgba(105,30,51,.10);
  box-shadow:0 12px 30px -20px rgba(74,20,36,.30);
}
.rts-values-area .value-card:hover{
  border-color:rgba(105,30,51,.24);
  box-shadow:0 20px 44px -24px rgba(74,20,36,.42);
}
.rts-values-area .value-card__ar{
  color:#8A6B2F;
  font-size:16px;
}

/* Same gold-on-white problem as the Core Values Arabic: the kicker is brand
   gold on both mission and vision cards, which is 4.74:1 on the maroon vision
   card (passes) but 2.42:1 on the white mission card (fails). Darker gold on
   the light card only, so the pair still reads as one set. */
.mission-card--mission .mission-card__kicker{ color:#8A6B2F; }

/* ======================================================================
   "Call us" CTA card, rebuilt (2026-09-08)
   Four stacked links -- two numbers at heading size, then two longer
   WhatsApp lines -- gave the card no hierarchy and read as four similar
   strings. One row per number now: region, number, WhatsApp pill, inside a
   panel that reads as the contact detail rather than more headline.
   ====================================================================== */
.rts-cta-area .cta-inner{ gap:40px; }

.cta-contact{
  flex-shrink:0;
  min-width:340px;
  padding:8px 26px;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
}
.cta-contact__row{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "region region"
    "num    wa";
  align-items:center;
  gap:2px 18px;
  padding:20px 0;
}
.cta-contact__row + .cta-contact__row{ border-top:1px solid rgba(255,255,255,.16); }

.cta-contact__region{
  grid-area:region;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-gold-light, #E0CFA4);
}
.cta-contact__num{
  grid-area:num;
  font-size:26px;
  line-height:1.15;
  font-weight:var(--f-medium, 500);
  color:#fff;
  white-space:nowrap;
}
.cta-contact__num:hover{ color:var(--color-gold-light, #E0CFA4); }
.cta-contact__wa{
  grid-area:wa;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:999px;
  background:#25D366;
  color:#fff !important;
  font-size:14px;
  white-space:nowrap;
}
.cta-contact__wa:hover{ filter:brightness(.94); }

/* The theme's decorative squiggle and dot now collide with the contact
   panel -- they sat behind plain text before -- and on the photographic
   plate they read as scratches on the picture. Off in both variants. */
.rts-cta-area .cta-inner .shape{ display:none; }

.cta-contact__num{ display:inline-flex; align-items:center; gap:12px; }
.cta-contact__num i{ font-size:17px; color:var(--color-gold-light, #E0CFA4); }

@media only screen and (max-width: 991px){
  .rts-cta-area .cta-inner{ flex-direction:column; align-items:flex-start; }
  .cta-contact{ width:100%; min-width:0; }
}
@media only screen and (max-width: 575px){
  .cta-contact__num{ font-size:22px; }
  .cta-contact__row{ grid-template-columns:1fr; grid-template-areas:"region" "num" "wa"; gap:8px; }
  .cta-contact__wa{ justify-self:start; }
}


/* ======================================================================
   "Call us" CTA — the plaque (2026-09-08)
   The functional version was a headline beside a list of numbers: correct,
   and completely flat. This treats the card as a brass plaque on a maroon
   ground — gold double hairline, fine grain over the photograph, a keel-arch
   ornament, and the numbers engraved as rows. The headline's second clause
   takes a display serif; everything else stays on the site's Outfit/Inter.
   ====================================================================== */

.rts-cta-area .cta-inner{
  display:block;
  position:relative;
  overflow:hidden;
  padding:0;
  border-radius:20px;
  background:
    radial-gradient(120% 140% at 12% 0%, #7d2740 0%, rgba(125,39,64,0) 58%),
    linear-gradient(135deg, #5c1a2c 0%, #43121f 52%, #5c1a2c 100%);
}
/* grain, so the maroon reads as a surface and not a fill */
.rts-cta-area .cta-inner::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.5%22%2F%3E%3C%2Fsvg%3E");
  background-size:180px 180px;
  opacity:.05;
  pointer-events:none;
  mix-blend-mode:overlay;
}
/* the photographic plate sits under the gradient at low strength */
.rts-cta-area .cta-inner--image{
  background-blend-mode:normal;
}
.rts-cta-area .cta-inner--image::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(118deg, rgba(67,18,31,.96) 0%, rgba(67,18,31,.88) 46%, rgba(92,26,44,.72) 100%);
}

/* gold double hairline, inset like a plaque frame */
.cta-plaque{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  gap:56px;
  align-items:center;
  margin:14px;
  padding:56px 54px;
  border:1px solid rgba(196,162,98,.42);
  border-radius:14px;
}
.cta-plaque::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(196,162,98,.16);
  border-radius:9px;
  pointer-events:none;
}

.cta-plaque__kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--color-gold-light, #E0CFA4);
}
.cta-plaque__kicker::before{
  content:"";
  width:34px;
  height:1px;
  background:linear-gradient(90deg, rgba(196,162,98,0), #C4A262);
}
.cta-plaque__title{
  margin:18px 0 0;
  color:#fff;
  font-size:clamp(30px, 3.4vw, 46px);
  line-height:1.14;
  letter-spacing:-.01em;
  text-transform:none;
  max-width:15ch;
}
.cta-plaque__title em{
  display:block;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-style:italic;
  font-weight:600;
  color:var(--color-gold-light, #E0CFA4);
  font-size:1.12em;
  line-height:1.05;
}
.cta-plaque__note{
  margin:20px 0 0;
  max-width:44ch;
  color:rgba(255,255,255,.72);
  font-size:16px;
  line-height:1.7;
}

/* the engraved panel */
.cta-plaque__panel{
  position:relative;
  padding:28px 32px 12px;
  border-radius:12px;
  /* deep enough that the numbers sit on a surface of their own rather
     than directly on the crowd photograph behind the card */
  background:linear-gradient(180deg, rgba(38,10,18,.52) 0%, rgba(38,10,18,.34) 100%);
  border:1px solid rgba(196,162,98,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
/* The ornament sits inside the panel: straddling the top border needed an
   opaque backing behind it, and that read as a pasted rectangle over the
   gradient. */
.cta-plaque__ornament{
  display:block;
  width:120px;
  height:34px;
  margin:0 auto 22px;
  opacity:.9;
}

.plaque-rows{ margin:0; padding:0; list-style:none; }
.plaque-row{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"region region" "num wa";
  align-items:center;
  gap:6px 20px;
  padding:22px 0;
}
.plaque-row + .plaque-row{
  border-top:1px solid rgba(196,162,98,.22);
}
.plaque-row__region{
  grid-area:region;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(224,207,164,.85);
}
.plaque-row__num{
  grid-area:num;
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  color:#fff;
  font-size:clamp(21px, 1.9vw, 27px);
  font-weight:500;
  letter-spacing:.005em;
  white-space:nowrap;
  transition:color .25s ease;
}
.plaque-row__ico{
  width:17px;
  height:17px;
  flex:0 0 auto;
  fill:var(--color-gold-light, #E0CFA4);
  transition:transform .3s ease;
}
.plaque-row__num:hover{ color:var(--color-gold-light, #E0CFA4); }
.plaque-row__num:hover .plaque-row__ico{ transform:rotate(-12deg) scale(1.06); }

.plaque-row__wa{
  grid-area:wa;
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:11px 20px;
  border-radius:999px;
  background:linear-gradient(180deg, #2ee06f 0%, #1eb257 100%);
  color:#08301a !important;
  font-size:14px;
  font-weight:500;
  box-shadow:0 8px 20px -12px rgba(30,178,87,.9);
  transition:transform .25s ease, box-shadow .25s ease;
}
.plaque-row__wa i{ font-size:16px; }
.plaque-row__wa:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px -12px rgba(30,178,87,.95);
  color:#08301a !important;
}
/* a slow shine, once, on hover -- the one flourish in the card */
.plaque-row__wa::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:38%;
  left:-45%;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform:skewX(-18deg);
}
.plaque-row__wa:hover::after{ animation:plaqueShine .75s ease-out; }
@keyframes plaqueShine{ to{ left:120%; } }

.plaque-row__num:focus-visible,
.plaque-row__wa:focus-visible{
  outline:2px solid var(--color-gold-light, #E0CFA4);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  .plaque-row__wa:hover::after{ animation:none; }
  .plaque-row__num:hover .plaque-row__ico{ transform:none; }
  .plaque-row__wa:hover{ transform:none; }
}

@media only screen and (max-width: 1199px){
  .cta-plaque{ grid-template-columns:1fr; gap:40px; padding:44px 38px; }
  .cta-plaque__title{ max-width:none; }
}
@media only screen and (max-width: 575px){
  .cta-plaque{ margin:10px; padding:34px 22px; }
  .cta-plaque__panel{ padding:30px 20px 8px; }
  .plaque-row{ grid-template-columns:1fr; grid-template-areas:"region" "num" "wa"; gap:10px; }
  .plaque-row{ justify-items:center; }
  .plaque-row__wa{ justify-self:center; }
}

/* The Partners plaque carries a third row for the trade mailbox. An email
   address is far longer than a phone number, so it drops a size and is
   allowed to wrap; there is no WhatsApp pill beside it. */
.plaque-row--mail{ grid-template-areas:"region" "num"; grid-template-columns:1fr; }
.plaque-row__num--mail{
  font-size:clamp(16px, 1.25vw, 19px);
  white-space:normal;
  word-break:break-word;
}
.plaque-row__ico--mail{ fill:none; color:var(--color-gold-light, #E0CFA4); }

/* Partners intro: three buttons now (enquiry, trade line, mailbox), so the
   row wraps rather than squeezing them onto one line. */
.rts-service-area .button-area{ flex-wrap:wrap; gap:16px; }
.rts-service-area .button-area .call-btn{ margin:0; }

/* ======================================================================
   Routes & Transfers — the route explorer (2026-09-08)
   Twenty-nine routes are too many for cards, and a flat list tells the
   reader nothing about the journey. So the list drives a schematic map of
   the Kingdom: the route draws itself between its nodes, and a card per
   stop says what we do there. All motion is transform/opacity plus one
   stroke-dashoffset, and prefers-reduced-motion lands on the end state.
   ====================================================================== */
.rts-routes-area{ background:var(--color-gray, #FBF8F3); }

.routes-explorer{
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:30px;
  align-items:start;
}

/* --- group tabs ------------------------------------------------------- */
.routes-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.routes-tab{
  padding:9px 15px;
  border:1px solid rgba(105,30,51,.18);
  border-radius:999px;
  background:#fff;
  color:#5c5057;
  font-size:13px;
  line-height:1.2;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.routes-tab:hover{ border-color:rgba(105,30,51,.42); color:var(--brand-maroon, #691E33); }
.routes-tab.is-active{
  background:var(--brand-maroon, #691E33);
  border-color:var(--brand-maroon, #691E33);
  color:#fff;
}

/* --- the route list --------------------------------------------------- */
.routes-list{
  margin:0;
  padding:6px;
  list-style:none;
  max-height:560px;
  overflow-y:auto;
  background:#fff;
  border:1px solid rgba(105,30,51,.12);
  border-radius:14px;
  scrollbar-width:thin;
}
.routes-list::-webkit-scrollbar{ width:8px; }
.routes-list::-webkit-scrollbar-thumb{ background:rgba(105,30,51,.22); border-radius:8px; }
.routes-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--color-heading, #1a1016);
  font-size:15px;
  line-height:1.35;
  text-align:start;
  cursor:pointer;
  animation:routeItemIn .32s ease both;
  animation-delay:calc(var(--i, 0) * 18ms);
  transition:background .2s ease, color .2s ease;
}
.routes-item:hover{ background:rgba(196,162,98,.14); }
.routes-item.is-active{
  background:var(--brand-maroon, #691E33);
  color:#fff;
}
.routes-item__count{
  flex:0 0 auto;
  min-width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(105,30,51,.10);
  color:var(--brand-maroon, #691E33);
  font-size:12px;
}
.routes-item.is-active .routes-item__count{ background:rgba(255,255,255,.2); color:#fff; }
@keyframes routeItemIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* --- the map ---------------------------------------------------------- */
.routes-map{
  position:relative;
  padding:18px 18px 6px;
  background:#fff;
  border:1px solid rgba(105,30,51,.12);
  border-radius:16px;
}
.routes-map__svg{ display:block; width:100%; height:auto; }
.routes-map__land{
  fill:rgba(105,30,51,.055);
  stroke:rgba(105,30,51,.34);
  stroke-width:1.1;
  stroke-linejoin:round;
}
.routes-map__route{
  stroke:var(--brand-gold, #C4A262);
  stroke-width:2.1;
  stroke-linecap:round;
  filter:drop-shadow(0 1px 2px rgba(105,30,51,.28));
}
.routes-marker{ opacity:0; transform:scale(.6); transform-box:fill-box; transform-origin:center;
  transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--i, 0) * 160ms + 420ms); }
.routes-marker.is-shown{ opacity:1; transform:none; }
.routes-marker__halo{ fill:rgba(196,162,98,.28); }
.routes-marker__dot{ fill:var(--brand-maroon, #691E33); stroke:#fff; stroke-width:1; }
.routes-map__note{
  margin:10px 0 0;
  font-size:12px;
  color:#8a7f75;
  text-align:center;
}

/* --- the stop cards --------------------------------------------------- */
.routes-detail{ margin-top:24px; }
.routes-detail__title{
  margin:0 0 4px;
  font-size:26px;
  line-height:1.25;
}
.routes-detail__label{
  display:block;
  margin-bottom:18px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8a7f75;
}
.stop-cards{ margin:0; padding:0; list-style:none; }
.stop-card{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  padding:0 0 22px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease;
  transition-delay:calc(var(--i, 0) * 110ms + 200ms);
}
.stop-card.is-shown{ opacity:1; transform:none; }
/* the thread between stops, drawn down the numbers */
.stop-card:not(:last-child) .stop-card__index::after{
  content:"";
  position:absolute;
  inset-inline-start:50%;
  top:34px;
  bottom:-22px;
  width:1px;
  background:linear-gradient(180deg, rgba(196,162,98,.85), rgba(196,162,98,.15));
  transform:translateX(-50%);
}
.stop-card__index{ position:relative; }
.stop-card__num{
  position:relative;
  z-index:1;
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--brand-maroon, #691E33);
  color:#fff;
  font-size:15px;
  font-weight:var(--f-medium, 500);
}
.stop-card__body{
  padding:0 0 4px;
}
.stop-card__title{
  margin:5px 0 6px;
  font-size:19px;
  line-height:1.3;
}
.stop-card__text{
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:var(--color-body, #555);
}
.routes-detail__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:4px;
}
/* the theme stretches <button> to full width, so the quote control filled
   its own line while the anchor beside it sized to its label */
.routes-detail__actions .rts-btn{ flex:0 0 auto; width:auto; }
.routes-detail__ask{
  border:1px solid rgba(105,30,51,.28);
  color:var(--brand-maroon, #691E33);
}
.routes-detail__ask:hover{ background:var(--brand-maroon, #691E33); color:#fff; }

.routes-tab:focus-visible,
.routes-item:focus-visible{
  outline:2px solid var(--brand-maroon, #691E33);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .routes-item{ animation:none; }
  .stop-card{ opacity:1; transform:none; transition:none; }
  .routes-marker{ opacity:1; transform:none; transition:none; }
}

@media only screen and (max-width: 1199px){
  .routes-explorer{ grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:24px; }
}
@media only screen and (max-width: 991px){
  .routes-explorer{ grid-template-columns:1fr; }
  .routes-list{ max-height:320px; }
}
@media only screen and (max-width: 575px){
  .routes-map{ padding:12px 12px 4px; }
  .routes-detail__title{ font-size:22px; }
  .stop-card{ gap:14px; }
}

/* Stop labels on the map. Font size and stroke widths are set in JS against
   the current frame, so they stay a constant size on screen while the view
   zooms between a 40km hop and a cross-Kingdom run. */
.routes-label{
  fill:var(--color-heading, #1a1016);
  paint-order:stroke;
  stroke:#fff;
  stroke-width:1.8px;
  stroke-linejoin:round;
  font-weight:500;
  opacity:0;
  transition:opacity .35s ease;
  transition-delay:calc(var(--i, 0) * 160ms + 560ms);
}
.routes-label.is-shown{ opacity:1; }
.routes-map__svg{ aspect-ratio:4 / 3; height:auto; }
@media (prefers-reduced-motion: reduce){
  .routes-label{ opacity:1; transition:none; }
}


/* ======================================================================
   Partners CTA — the dispatch desk (2026-09-08)
   The plaque (above) is the site-wide "call us" card and appears on twenty
   pages. The client asked for the Partners numbers in a *different* style,
   so this is a deliberate counterpart rather than a variant: an ink field
   holding two ivory dispatch slips, one per desk, with the number set large
   and tabular and the two actions split out beneath a perforated rule.
   Scoped to .rts-cta-area--desk so none of the plaque rules above apply.
   ====================================================================== */

.rts-cta-area--desk .cta-desk{
  position:relative;
  overflow:hidden;
  padding:54px 54px 0;
  border-radius:20px;
  background:
    radial-gradient(110% 130% at 88% 0%, rgba(105,30,51,.55) 0%, rgba(105,30,51,0) 60%),
    linear-gradient(160deg, #1F0B13 0%, #2A0F1A 54%, #3A1624 100%);
}
/* same grain as the plaque, so the two cards read as one family */
.rts-cta-area--desk .cta-desk::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.5%22%2F%3E%3C%2Fsvg%3E");
  background-size:180px 180px;
  opacity:.05;
  pointer-events:none;
  mix-blend-mode:overlay;
}
/* gold hairline along the top edge, like a docket header */
.rts-cta-area--desk .cta-desk::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg, rgba(196,162,98,0) 0%, #C4A262 18%, #C4A262 82%, rgba(196,162,98,0) 100%);
}

.cta-desk__head{ position:relative; z-index:2; max-width:640px; }
.cta-desk__stamp{
  display:inline-block;
  padding:6px 14px;
  border:1px solid rgba(196,162,98,.5);
  border-radius:3px;
  font-size:11px;
  font-weight:var(--f-medium, 500);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--color-gold-light, #E0CFA4);
}
.cta-desk__title{
  margin:20px 0 0;
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.14;
  color:#fff;
}
.cta-desk__title em{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-style:italic;
  font-weight:600;
  color:var(--color-gold-light, #E0CFA4);
}
.cta-desk__note{
  margin:14px 0 0;
  max-width:52ch;
  font-size:15px;
  line-height:1.7;
  color:var(--color-body-two, #D9CFC4);
}

/* the slips ---------------------------------------------------------- */
.cta-desk__slips{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px;
  margin-top:40px;
}
.desk-slip{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:28px 28px 26px;
  border-radius:14px;
  background:var(--color-ivory, #FBF8F3);
  box-shadow:0 20px 48px -28px rgba(0,0,0,.65);
}
/* maroon spine, so each slip reads as torn from a book */
.desk-slip::before{
  content:"";
  position:absolute;
  inset-block:18px;
  inset-inline-start:0;
  width:3px;
  border-radius:3px;
  background:linear-gradient(180deg, var(--brand-maroon, #691E33), var(--color-gold-dark, #8F7233));
}
.desk-slip__region{
  display:block;
  font-size:11px;
  font-weight:var(--f-medium, 500);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-gold-dark, #8F7233);
}
.desk-slip__num{
  display:block;
  margin:12px 0 0;
  font-size:clamp(26px, 2.6vw, 34px);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  line-height:1.1;
  color:var(--color-primary, #691E33);
  transition:color .2s ease;
}
.desk-slip__num:hover,
.desk-slip__num:focus-visible{ color:var(--color-primary-dark, #4A1424); }
.desk-slip__for{
  margin:10px 0 0;
  font-size:14px;
  line-height:1.65;
  color:var(--color-body, #4A4247);
}
/* perforated rule above the actions */
.desk-slip__acts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
  padding-top:20px;
  border-top:1px dashed rgba(105,30,51,.28);
}
.desk-slip__act{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 18px;
  border:1px solid var(--color-primary, #691E33);
  border-radius:8px;
  font-size:14px;
  font-weight:var(--f-medium, 500);
  color:#fff;
  background:var(--color-primary, #691E33);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.desk-slip__act:hover{ background:var(--color-primary-dark, #4A1424); border-color:var(--color-primary-dark, #4A1424); color:#fff; }
.desk-slip__act--wa{ background:transparent; color:var(--color-primary, #691E33); }
.desk-slip__act--wa:hover{ background:rgba(105,30,51,.08); color:var(--color-primary-dark, #4A1424); }
.desk-slip__act svg{ width:17px; height:17px; fill:currentColor; }
.desk-slip__act i{ font-size:16px; }
.desk-slip__num:focus-visible,
.desk-slip__act:focus-visible,
.cta-desk__mail a:focus-visible{
  outline:2px solid var(--color-gold-dark, #8F7233);
  outline-offset:3px;
}
.desk-slip__act--wa:focus-visible{ outline-color:var(--color-primary, #691E33); }

/* the mail strip sits on the ink, flush to the card's bottom edge -------- */
.cta-desk__mail{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 18px;
  margin:34px -54px 0;
  padding:20px 54px;
  border-top:1px solid rgba(196,162,98,.24);
  font-size:15px;
  color:var(--color-body-two, #D9CFC4);
}
.cta-desk__mail a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:var(--f-medium, 500);
  color:var(--color-gold-light, #E0CFA4);
  transition:color .2s ease;
}
.cta-desk__mail a:hover{ color:#fff; }
.cta-desk__mail svg{ width:18px; height:18px; }
.cta-desk__mail span{ opacity:.85; }

@media only screen and (max-width: 991px){
  .rts-cta-area--desk .cta-desk{ padding:44px 32px 0; }
  .cta-desk__slips{ grid-template-columns:1fr; gap:18px; }
  .cta-desk__mail{ margin:28px -32px 0; padding:18px 32px; }
}
@media only screen and (max-width: 575px){
  .rts-cta-area--desk .cta-desk{ padding:34px 22px 0; }
  .desk-slip{ padding:24px 22px; }
  .desk-slip__acts .desk-slip__act{ flex:1 1 auto; justify-content:center; }
  .cta-desk__mail{ margin:24px -22px 0; padding:18px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .desk-slip__num, .desk-slip__act, .cta-desk__mail a{ transition:none; }
}

/* the docket meta beside the headline — the trade terms an operator asks for
   before they dial, and the reason the head column is not left half empty */
.cta-desk__top{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:24px 56px;
  align-items:start;
}
.cta-desk__head{ max-width:none; }
.cta-desk__meta{
  margin:8px 0 0;
  padding:0;
  border-top:1px solid rgba(196,162,98,.26);
}
.cta-desk__meta-row{
  display:grid;
  gap:3px;
  padding:14px 2px;
  border-bottom:1px solid rgba(196,162,98,.16);
}
.cta-desk__meta dt{
  margin:0;
  font-size:11px;
  font-weight:var(--f-medium, 500);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-gold-light, #E0CFA4);
}
.cta-desk__meta dd{
  margin:0;
  font-size:15px;
  line-height:1.55;
  color:#fff;
}

/* the slip's spine is clipped to the card radius, not left hanging off it */
.desk-slip{ overflow:hidden; }
.desk-slip::before{ width:4px; inset-block:0; border-radius:0; }

@media only screen and (max-width: 991px){
  .cta-desk__top{ grid-template-columns:1fr; gap:28px; }
  .cta-desk__meta{ margin-top:0; }
}

/* --- Floating WhatsApp bubble ----------------------------------------- */
/* Client feedback: a direct WhatsApp entry point on every page, sitting just
   above the back-to-top control. `.progress-wrap` is 46px at bottom:30px, so
   this clears it by 14px. It is always visible, unlike back-to-top, because it
   is a contact route rather than a navigation aid. */
.wa-bubble{
  position:fixed;
  right:30px;
  bottom:90px;
  z-index:10001;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  color:#fff !important;
  font-size:28px;
  line-height:1;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  transition:transform .25s ease, box-shadow .25s ease;
}
.wa-bubble:hover,
.wa-bubble:focus-visible{
  color:#fff !important;
  transform:scale(1.07);
  box-shadow:0 10px 28px rgba(0,0,0,.3);
}
.wa-bubble:focus-visible{ outline:3px solid var(--brand-gold, #C4A262); outline-offset:3px; }

/* The label rides out of the bubble on hover on pointer devices only; on touch
   it would sit permanently over the page. */
.wa-bubble__label{
  position:absolute;
  right:calc(100% + 12px);
  white-space:nowrap;
  padding:8px 14px;
  border-radius:999px;
  background:var(--brand-maroon, #691E33);
  color:#fff;
  font-size:14px;
  font-weight:500;
  opacity:0;
  transform:translateX(8px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
@media (hover:hover){
  .wa-bubble:hover .wa-bubble__label,
  .wa-bubble:focus-visible .wa-bubble__label{ opacity:1; transform:translateX(0); }
}
@media only screen and (max-width: 575px){
  .wa-bubble{ width:52px; height:52px; font-size:26px; right:20px; bottom:84px; }
}
@media (prefers-reduced-motion: reduce){
  .wa-bubble, .wa-bubble__label{ transition:none; }
  .wa-bubble:hover{ transform:none; }
}

/* --- Number links default to WhatsApp -------------------------------- */
/* Client rule: a number opens WhatsApp unless the control says "Call". The
   navbar circle beside the number is therefore the call route, and the footer
   gets a short explicit Call beside its number. */
.hdr-call{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  margin-inline-start:10px;
  border-radius:50%;
  background:var(--brand-maroon, #691E33);
  color:#fff !important;
  font-size:12px;
  vertical-align:middle;
  transition:transform .25s ease;
}
.hdr-call:hover{ transform:scale(1.08); color:#fff !important; }
.get-touch-area .map-area .text .tel-row .hdr-call{
  margin-inline-start:0;
  width:24px;
  height:24px;
  font-size:11px;
}
/* The footer column is narrow, so the explicit Call route is a short inline
   link after the number rather than a pill that wraps to its own line. The
   separator is a pseudo-element so the spacing survives RTL. */
.ftr-call{
  display:inline;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:.85;
}
.ftr-call::before{ content:"\00B7"; margin:0 9px; opacity:.65; }
.ftr-call:hover{ color:var(--brand-gold, #C4A262) !important; opacity:1; }

/* The theme sets the footer contact number as a block, which pushed the Call
   link onto its own line. Both belong on one row. */
.get-touch .map-area .text a{ display:inline; }

@media (prefers-reduced-motion: reduce){
  .hdr-call{ transition:none; }
  .hdr-call:hover{ transform:none; }
}

/* --- Contact page: one card per audience ----------------------------- */
/* The footer carries a single contact line by design, so the B2C / B2B split
   the client asked for lives here: pilgrims in one card, the trade in the next,
   each with its own numbers and mailbox. */
.rts-contact-area2 .inner .contact-wrapper--aud{ padding:48px 24px; }
.rts-contact-area2 .inner .contact-wrapper--aud .title{
  font-size:24px;
  line-height:1.3;
  margin-bottom:4px;
}
.rts-contact-area2 .inner .contact-wrapper--aud .aud-note{
  margin:0 0 20px;
  font-size:14px;
  color:var(--color-body);
  opacity:.75;
}
.rts-contact-area2 .inner .contact-wrapper--aud ul{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
}
.aud-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.aud-row__region{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brand-gold, #C4A262);
  font-weight:600;
}
.rts-contact-area2 .inner .contact-wrapper--aud ul li a.aud-row__wa{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:9px 18px;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  font-weight:500;
  white-space:nowrap;
  transition:filter .25s ease;
}
.rts-contact-area2 .inner .contact-wrapper--aud ul li a.aud-row__wa:hover{ filter:brightness(.93); color:#fff; }
.rts-contact-area2 .inner .contact-wrapper--aud ul li a.aud-row__call{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-maroon, #691E33);
  border-bottom:1px solid rgba(105,30,51,.35);
  line-height:1.2;
}
.rts-contact-area2 .inner .contact-wrapper--aud ul li a.aud-row__call:hover{ color:var(--brand-gold, #C4A262); border-color:var(--brand-gold, #C4A262); }
.aud-mail{ margin-top:6px; }
.rts-contact-area2 .inner .contact-wrapper--aud ul li.aud-mail a{ word-break:break-word; }
@media only screen and (max-width: 991px){
  .rts-contact-area2 .inner .contact-wrapper--aud{ padding:36px 18px; width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .rts-contact-area2 .inner .contact-wrapper--aud ul li a.aud-row__wa{ transition:none; }
}

/* --- Footer contact column: readable at the same size as the link list ---- */
/* The theme set the labels at 14px and the values at 12px on line-height 1,
   which read as fine print beside the 16px/26px "Useful Links" column. Both
   now match that column. */
.footer-wrapper-style-between .single-wized.get-in-touch ul li .text p{
  font-size:16px;
  line-height:26px;
  margin-bottom:2px;
}
.footer-wrapper-style-between .single-wized.get-in-touch ul li .text a{
  font-size:16px;
  line-height:26px;
}
/* The Call link stays a step down: it is a secondary route beside the number,
   not a peer of it. Specific enough to beat the .text a rule above. */
.footer-wrapper-style-between .single-wized.get-in-touch ul li .text a.ftr-call{
  font-size:14px;
  line-height:26px;
}

/* At 16px the number wrapped inside the theme's 45%-wide cell. With the
   Working Hours row gone there are only three items, so the column runs as a
   single stack and every value sits on one line. */
.footer-wrapper-style-between .single-wized.get-in-touch ul{ gap:22px; }
.footer-wrapper-style-between .single-wized.get-in-touch ul li{ width:100%; }

/* --- Fleet grid: reserve the image box before it loads -------------------- */
/* The card images are lazy-loaded and the theme styles them `height:100%`
   inside a parent with no height, so an unloaded image measures zero. Isotope
   lays this grid out on window.load, before the below-the-fold images arrive,
   so it measured the lower cards ~240px short, set the container height from
   that, and the last row spilled over the "Who We Are" heading beneath it.
   Every fleet photograph is 800x600, so stating the ratio gives the card its
   full height from the first paint and isotope measures the truth. */
.single-car-list-item .car-image{ aspect-ratio: 4 / 3; }
.single-car-list-item .car-image img{ display: block; }

/* --- Film modal ----------------------------------------------------------- */
/* The film that plays here is the only one of the client's clips with no "Veo"
   export mark on it, so it plays at its own ratio. It is already letterboxed to
   about 1.92:1 inside a 16:9 frame, and those bars are the film's own look.
   If a watermarked clip is ever put back in this modal, add `.video-modal__player
   --crop` below to it: 2:1 anchored top drops the bottom 11%, which is where the
   mark sits. */
.video-modal__player{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-modal__player--crop{
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center top;
}

/* --- Testimonial avatars: one size, not whatever is left over ------------- */
/* The theme only rounds this image's corners; it never sizes it. The thumb is a
   flex item with no basis, so it gave up width to the text beside it and every
   card ended up different (110 / 87 / 104 / 88px), the longest job title losing
   the most. Pinned to the smallest of those, which is the one that read best. */
.single-testimonials-item .author-area .author-thumb{
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
}
.single-testimonials-item .author-area .author-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The quote bubble (`.inner-icon`) is an 80px opaque block pinned to the bottom
   corner of the card, and it paints over whatever is under it. The theme's own
   roles were short enough never to reach it; ours ("Religious Travel Organiser
   — Toronto, Canada") ran straight underneath and looked truncated. Reserve its
   width so the text wraps before it instead. */
.single-testimonials-item .author-area{ padding-inline-end: 84px; }

/* With the avatar no longer giving up width, the name and role have to take the
   shrinking instead. A flex item will not go below its content width without
   this, so the longer job titles were running past the card edge. */
.single-testimonials-item .author-area .author-content{
  min-width: 0;
  flex: 1 1 auto;
}
.single-testimonials-item .author-area .author-content .author-role{
  display: block;
  overflow-wrap: anywhere;
}
@media only screen and (max-width: 575px){
  .single-testimonials-item .author-area .author-thumb{
    flex-basis: 72px;
    width: 72px;
    height: 72px;
  }
}

/* ===================================================================== */
/* Client feedback round 2 — 2026-09-13                                  */
/* ===================================================================== */

/* A9 — vehicle chooser icons -------------------------------------------- */
/* The seven body-type marks were 48–56px wide inside a 73x66 tile, drawn at
   1.4px in #691E33: small, thin and low-contrast, which is exactly what the
   client reported. The SVGs themselves now carry a heavier stroke, the deeper
   #4A1424, and 1.28x their old intrinsic size — scaled in the file rather than
   forced to one CSS width, so a coach still reads wider than a sedan. The tile
   grows to keep its air around them. */
.rts-category-wrapper .single-category-item .icon{
  width: 92px;
  height: 78px;
}
.rts-category-wrapper .single-category-item .icon img{
  max-width: none;
}

/* A2 — social marks in the sticky header -------------------------------- */
/* Reported on tablet, not laptop. Two things stack up in the 992–1200px band:
   style.css narrows the social row's gap there, and the sticky header runs a
   shorter bar, so the 30px marks set once in this sheet end up the smallest
   thing in a row of larger controls. Give them a floor that the flex row
   cannot shrink, and a step up across the tablet band in both states. */
.header-social img{
  flex: 0 0 auto;
}
@media only screen and (min-width: 992px) and (max-width: 1200px){
  .header-social{ gap: 12px !important; }
  .header-social img{
    width: 34px;
    height: 34px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px){
  .header-social img{
    width: 32px;
    height: 32px;
  }
}
/* the sticky bar is shorter, so the marks must not be allowed to ride down
   with it — they keep their size in both states */
.header--sticky.sticky .header-social img{
  width: 30px;
  height: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px){
  .header--sticky.sticky .header-social img{
    width: 34px;
    height: 34px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px){
  .header--sticky.sticky .header-social img{
    width: 32px;
    height: 32px;
  }
}

/* A3 — WhatsApp number picker ------------------------------------------- */
/* Built by wa-choose.js and appended to <body>, so it reuses the quote
   modal's shell (.quote-modal) and only the rows are new. */
.wa-choose__rows{
  display: grid;
  gap: 12px;
}
.wa-choose__row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(105, 30, 51, .16);
  border-radius: 11px;
  background: var(--color-gray);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.wa-choose__row:hover,
.wa-choose__row:focus-visible{
  border-color: var(--brand-maroon, #691E33);
  background: var(--color-white);
  transform: translateY(-1px);
}
.wa-choose__mark{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
}
.wa-choose__text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wa-choose__label{
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-body);
  font-weight: var(--f-medium);
}
.wa-choose__num{
  font-size: 18px;
  font-weight: var(--f-semi-bold);
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce){
  .wa-choose__row{ transition: none; }
  .wa-choose__row:hover,
  .wa-choose__row:focus-visible{ transform: none; }
}
@media only screen and (max-width: 575px){
  .wa-choose__num{ font-size: 16.5px; }
}

/* E1 - both numbers in the footer ---------------------------------------- */
/* The theme forces every anchor in this cell inline so the number and its Call
   link share a row; a block wrapper per line is what lets a second number join
   without the two running together. */
.get-touch .map-area .text .ftr-line{ display:block; }
.get-touch .map-area .text .ftr-line + .ftr-line{ margin-top:6px; }

/* B1 - Services hero, anchored to the top of its frame ------------------- */
/* The band is 2.44:1 at 1440 against 16:9 footage, so a centred `cover` crop
   takes 110px off the top - and in this clip both faces sit in the upper
   third. Anchoring to the top lands them below the header instead. The still
   is a 1.4:1 cut of the same shot, centred on the two men rather than on the
   frame, so the phone hero (which never loads the video) shows the same thing
   the desktop one does. */
.hero-video-wrap--top .hero-video{ object-position: center top; }
.hero-video-wrap--top .hero-video__still{
  background-position: center top;
  inset: 0;
  animation: none;
}

/* Vehicle hero spec icons ------------------------------------------------ */
/* ic-seat / ic-luggage / ic-gps are drawn in brand maroon because their other
   home is the fleet cards, on white. Over the video hero the theme already
   sets this row's text to white and the maroon all but vanished. The same
   files are reused rather than forked, so one icon cannot drift from the
   other: the theme's own brightness/invert idiom takes them to white here. */
.rts-breadcrumb-area .breadcrumb-area-wrapper.breadcrumb-two .breadcrumb-list li img{
  filter: brightness(0) invert(1);
}

/* Modals above the sticky header ----------------------------------------- */
/* The theme pins `.header--sticky.sticky` at z-index 9999 and this sheet puts
   the floating WhatsApp bubble at 10001, while Bootstrap ships its modal at
   1055 over a 1050 backdrop. So every modal on the site - the quotation form,
   the WhatsApp picker and the film - opened *underneath* the navbar, and the
   bubble floated over the top of it. Both layers move above the two. */
.modal-backdrop{ z-index: 10010; }
.modal{ z-index: 10020; }

/* ...and give them their backdrop back ----------------------------------- */
/* The bundled Bootstrap build carries `.modal-backdrop.fade{opacity:0}` AFTER
   `.modal-backdrop.show{opacity:.5}`. Equal specificity, so the later rule
   wins, and the element holds both classes - which means no modal on this site
   has ever dimmed the page behind it. One more class beats both. */
.modal-backdrop.fade.show{ opacity: .5; }

/* "or similar" is a qualifier, not part of the name ---------------------- */
/* It sat at the model's own size and weight, so "Toyota Coaster or similar"
   read as though the whole phrase were the vehicle. Set like an "up to" or a
   sale qualifier: smaller, lighter, quieter - still legible, but clearly a
   note about the name rather than more of it. Sized in em so it tracks each
   place it appears, from the 48px hero h1 down to the card model line. */
.or-similar{
  font-size: .62em;
  font-weight: var(--f-regular, 400);
  letter-spacing: .01em;
  opacity: .72;
  white-space: nowrap;
}
/* on the card model line the host text is already small and grey, so the same
   ratio would take it under 10px - ease off there */
.car-model .or-similar{ font-size: .88em; opacity: .8; }

/* --- Ivory page ground (site-wide, 2026-09-14) ---------------------------
   Client picked the ivory sample, so the swap it proved out moves here and
   applies everywhere. The theme builds depth from two tokens:

     --color-white  #fff      the page ground. Card corner notches are faked
                              with `box-shadow: 20px 0 0 0 var(--color-white)`,
                              so they vanish only while it matches the body.
     --color-gray   #FBF8F3   every tinted panel and card — which is the very
                              colour being asked for, so an ivory body would
                              flatten all of them into the ground.

   Painting `body{background}` alone therefore looks broken. Swapping the two
   roles instead means the ground, the notch shadows, the header and every
   section fill all follow from the tokens with no per-component patching. */
:root{
  --color-white:#FBF8F3;   /* the page ground, and whatever fakes it */
  --color-gray:#FFFFFF;    /* cards and tinted panels now lift off it */
}
body{ background:var(--color-white); }

/* The one thing the swap cannot reach: the market column in Why Choose is a
   hardcoded #f4f1ee, which all but vanishes on an ivory ground. (The banner
   pagination shape is the other, and that fill lives inside the SVG — the
   markup points at bg-shape-ivory.svg instead.) */
.compare-col--market{ background:#fff; }

/* --- Routes: make direction unmistakable --------------------------------- */
/* Two routes between the same pair draw the same line and list the same two
   stop titles; only the order differs. So the origin and the destination are
   given different marks, and the direction is also stated in words. */
.routes-detail__dir{
  margin: 2px 0 14px;
  font-size: 15px;
  color: var(--brand-maroon, #691E33);
  opacity: .85;
}
.routes-marker.is-origin .routes-marker__dot{
  fill: var(--brand-gold, #C4A262);
  stroke: var(--brand-maroon, #691E33);
  stroke-width: 1.1;
}
.routes-marker.is-destination .routes-marker__dot{
  fill: var(--brand-maroon, #691E33);
}
.routes-marker.is-destination .routes-marker__halo{
  fill: rgba(105, 30, 51, .18);
}


/* ------------------------------------------------------------------
   Route landing pages — the breadcrumb tab.

   The theme pins .nav-bread-crumb to the bottom-right of the hero at a
   fixed 266px by 70px, with 20px links inside and no horizontal
   padding. That fits the two short words every other page puts there
   ("Home / Sedan") and nothing longer. The route pages need
   "Routes / Jeddah -> Madinah", which overflowed the box and overlapped
   the hero behind it.

   So on these pages the tab sizes to its content instead of to a fixed
   width. It stays pinned right, keeps the theme's corner radius and
   both curve pseudo-elements, and never grows wider than the viewport.

   Scoped to .breadcrumb-route, which only pages/route.blade.php sets,
   so no other breadcrumb on the site changes.
   ------------------------------------------------------------------ */
.rts-breadcrumb-area.breadcrumb-route .nav-bread-crumb{
  width: auto;
  max-width: calc(100% - 24px);
  padding-inline: 34px;
}
.rts-breadcrumb-area.breadcrumb-route .nav-bread-crumb .nav-inner{
  white-space: nowrap;
}

/* The hero is short on phones and the tab is 20px type; let it step
   down rather than eat the whole width. */
@media (max-width: 767px){
  .rts-breadcrumb-area.breadcrumb-route .nav-bread-crumb{
    padding-inline: 20px;
  }
  .rts-breadcrumb-area.breadcrumb-route .nav-bread-crumb .nav-inner a{
    font-size: 16px;
  }
}

/* ===================================================================== */
/* Trust and provenance — 2026-09-17                                     */
/*                                                                       */
/* Three additions, all answering the same audit finding: the site       */
/* asserted things a visitor had no way to check. Numbers it can now      */
/* publish, avatars that stopped pretending to be photographs, and a      */
/* line saying where the quotes came from.                               */
/* ===================================================================== */

/* --- Footer registration line ---------------------------------------- */
/* Sits in the first footer column, under the guide paragraph and above the
   sign-up field. It was briefly in the copyright bar; it reads better here,
   beside the pitch it underwrites, than as a third item competing with the
   copyright sentence and the social marks.

   One line per number rather than dot-separated: the column is a third of
   the footer, and two labelled numbers on one line wrapped mid-number --
   the one place a registration number must not break.

   Renders at all only once real numbers exist; see
   partials/registration.blade.php. */
.ftr-registration{
  margin:-6px 0 26px;
  font-size:13px;
  line-height:1.75;
  color:rgba(255,255,255,.66) !important;
}
.ftr-registration__item{
  display:block;
}
/* The numbers are Latin digits inside an RTL paragraph on the Arabic and
   Urdu footers. <bdi> already isolates them; this stops a number being split
   across a line break, which reads as two facts. */
.ftr-registration__item bdi{
  white-space:nowrap;
}

/* --- Footer build credit ---------------------------------------------- */
/* Appended to the copyright sentence rather than made a sibling of it, so
   the copyright bar stays at two flex children. Dimmer than the copyright
   text beside it: it is attribution, not a claim on the page. */
.ftr-credit{
  display:inline-block;
  margin-inline-start:6px;
  opacity:.72;
}
.ftr-credit::before{
  content:"\00B7";
  margin-inline-end:8px;
  opacity:.7;
}
.ftr-credit a{
  color:inherit;
  border-bottom:1px solid rgba(255,255,255,.28);
  transition:color .25s ease, border-color .25s ease;
}
.ftr-credit a:hover{
  color:var(--brand-gold, #C4A262) !important;
  border-color:var(--brand-gold, #C4A262);
}

/* --- Testimonial monograms ------------------------------------------- */
/* Every card used the same guest-avatar-placeholder.webp, so four different
   people wore one stock face. A reader who notices reads the whole section
   as fabricated, which is the opposite of what an avatar is there to do.
   An initial claims nothing it cannot support.

   Inherits the 88px box already pinned on .author-thumb above, so the card
   geometry and the 575px step-down are unchanged. */
.single-testimonials-item .author-area .author-thumb .author-initial{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--brand-maroon, #691E33);
  border:1px solid rgba(196,162,98,.55);
  color:var(--brand-gold, #C4A262);
  font-family:"Cormorant Garamond", serif;
  font-size:34px;
  line-height:1;
  font-weight:600;
  user-select:none;
}

/* --- Testimonial provenance note -------------------------------------- */
/* Sits under the slider, not inside a card: it describes the whole set. */
.testimonial-note{
  margin:26px auto 0;
  max-width:760px;
  text-align:center;
  font-size:14px;
  line-height:1.7;
  color:rgba(26,16,22,.62);
}

/* --- Error pages ------------------------------------------------------- */
/* Anything that is not one of the routed URLs used to get Laravel's stock
   white 404: no header, no footer, no Arabic, no way back. These pages reuse
   the inner-page breadcrumb hero, so the only new rules are for the body. */
.error-page{
  text-align:center;
  padding-block:10px 20px;
}
.error-page__code{
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(88px, 18vw, 180px);
  line-height:.9;
  margin:0 0 10px;
  color:rgba(105,30,51,.12);
  letter-spacing:.02em;
}
.error-page__body{
  max-width:640px;
  margin:0 auto 34px;
  font-size:17px;
  line-height:1.8;
}
.error-page__links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 12px;
  margin:0;
  padding:0;
  list-style:none;
}
.error-page__links a{
  display:inline-block;
  padding:11px 22px;
  border:1px solid rgba(105,30,51,.22);
  border-radius:999px;
  font-size:15px;
  line-height:1.2;
  color:var(--brand-maroon, #691E33);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.error-page__links a:hover{
  background:var(--brand-maroon, #691E33);
  border-color:var(--brand-maroon, #691E33);
  color:#fff;
}