/* ==========================================================================
   BTT TRAVELS — Main Stylesheet
   Design language adapted from the Loginet logistics theme:
   dark navy + orange accent, bold condensed uppercase headings,
   bracketed section labels, icon cards, counters, accordion, carousel.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand pair sampled straight out of assets/img/logo.png:
     the royal blue of the "BTT" wordmark and the orange of the swoosh. */
  --brand:#0F4DA1;
  --brand-2:#1A63C7;   /* lifted blue, for gradients and hover states */

  /* Navy scale — the brand blue taken down in lightness, same hue,
     so the dark bands read as the logo colour rather than a separate one. */
  --ink:#082A59;
  --ink-2:#0A3570;
  --ink-3:#061D3D;
  --line-dark:#2E4E7A;

  /* Logo orange */
  --accent:#FE6D01;
  --accent-2:#FF9040;
  --accent-soft:rgba(254,109,1,.10);
  --green:#18A957;
  --green-2:#4BE08A;
  --star:#F5A623;      /* review stars read as gold, not as brand orange */

  --body:#5C6B80;
  --heading:#082A59;
  --line:#E3E9F2;
  --soft:#F3F7FC;
  --white:#fff;

  --font-display:'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;

  --radius:14px;
  --radius-lg:22px;
  /* Corner-cut size for the theme's signature notched panels */
  --notch:54px;
  --shadow:0 18px 50px rgba(8,42,89,.10);
  --shadow-lg:0 30px 70px rgba(8,42,89,.16);
  --t:.35s cubic-bezier(.25,.8,.35,1);
}

/* ---------- 2. Base ---------- */
*{ -webkit-tap-highlight-color:transparent; }

html{ scroll-behavior:smooth; scroll-padding-top:110px; }

body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  color:var(--body);
  background:var(--white);
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--heading);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.015em;
}

a{ text-decoration:none; color:inherit; transition:color var(--t); }
img,svg{ max-width:100%; height:auto; }
p:last-child{ margin-bottom:0; }
ul{ list-style:none; padding:0; margin:0; }

::selection{ background:var(--accent); color:#fff; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--soft); }
::-webkit-scrollbar-thumb{ background:var(--ink-2); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* ---------- 3. Layout helpers ---------- */
.section{ padding:110px 0; position:relative; }
.section--tight{ padding:70px 0; }
.section--soft{ background:var(--soft); }
.section--dark{ background:var(--ink); }

.section__head{ margin-bottom:56px; }

.label{
  display:inline-block;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
}
.label--light{ color:var(--accent-2); }

/* Plus Jakarta Sans is far wider than a condensed face, so the display
   sizes here run smaller than they would with a condensed heading font. */
.section__title{
  font-size:clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
  text-transform:uppercase;
  margin-bottom:0;
}
.section__title em{
  font-style:normal;
  color:var(--accent);
  position:relative;
}
.section__title--light{ color:#fff; }
.section__title--light em{ color:var(--accent-2); }

/* Keep the airport-transfer heading as two clean, aligned lines. */
.service-kicker__accent,
.service-kicker__line{
  display:block;
  font-size:.82em;
  white-space:nowrap;
}
@media (max-width:767.98px){
  .service-kicker__accent,
  .service-kicker__line{ white-space:normal; }
}

.section__head .section__title{ margin-bottom:0; }
.section__title + .section__text,
.section__title + .lead-text{ margin-top:22px; }

.section__text{ font-size:16.5px; }
.section__text--light{ color:rgba(255,255,255,.72); }

.lead-text{ font-size:18px; color:#3E5069; }

.contact-location .section__text{
  max-width:760px;
  margin:18px auto 0;
}
.contact-map{
  height:clamp(340px, 48vw, 520px);
  margin-top:36px;
  overflow:hidden;
  border:6px solid #fff;
  border-radius:18px;
  box-shadow:0 18px 48px rgba(8,42,89,.14);
}
.contact-map iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* ---------- 4. Buttons ---------- */
.btn{
  --bs-btn-padding-y:.85rem;
  --bs-btn-padding-x:1.7rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  letter-spacing:.09em;
  text-transform:uppercase;
  border-radius:10px;
  border:0;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  transition:all var(--t);
  position:relative;
  overflow:hidden;
}
.btn i{ font-size:.95em; transition:transform var(--t); }
.btn:hover i{ transform:translateX(3px); }

/* .btn is inline-flex with no justify-content, so a full-width one packs its
   label against the left edge. Centre it. */
.btn.w-100{ justify-content:center; }
.btn-lg{ --bs-btn-padding-y:1.05rem; --bs-btn-padding-x:2.1rem; font-size:18px; }
.btn-sm{ --bs-btn-padding-y:.55rem; --bs-btn-padding-x:1.1rem; font-size:15px; }

.btn-accent{
  background:linear-gradient(100deg, var(--accent), var(--accent-2));
  color:#fff;
  box-shadow:0 10px 26px rgba(254,109,1,.30);
}
.btn-accent:hover{
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(254,109,1,.42);
}

/* Phone call-to-action. Carries the number alongside the label so the offer is
   legible before the tap, with a divider rule between the two. */
.cta-call__num{
  font-weight:800;
  letter-spacing:.02em;
  padding-left:.7rem;
  border-left:1px solid rgba(255,255,255,.4);
}
/* The generic .btn hover slides the icon right, which reads as "forward" on an
   arrow but odd on a handset — pulse it instead. */
.cta-call:hover i{ transform:scale(1.14); }

/* Narrow screens: the label alone is enough, since tapping dials the number. */
@media (max-width:575.98px){
  .cta-call__num{ display:none; }
}

.btn-dark{
  background:var(--ink);
  color:#fff;
}
.btn-dark:hover{ background:var(--accent); color:#fff; transform:translateY(-3px); }

.btn-ghost{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.btn-outline-dark{
  border:2px solid var(--ink);
  color:var(--ink);
  background:transparent;
}
.btn-outline-dark:hover{ background:var(--ink); color:#fff; }

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
}
/* An email is a literal string, so uppercasing it is wrong, and at this
   letter-spacing the address is wider than the card and gets clipped. */
.link-arrow[href^="mailto:"]{
  text-transform:none;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
}
.link-arrow i{ transition:transform var(--t); }
.link-arrow:hover{ color:var(--accent); }
.link-arrow:hover i{ transform:translateX(5px); }

/* ---------- 5. Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .5s ease, visibility .5s ease;
}
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__mark{ display:flex; gap:8px; }
.preloader__mark span{
  width:12px; height:12px; border-radius:50%;
  background:var(--accent);
  animation:bounce .9s infinite ease-in-out;
}
.preloader__mark span:nth-child(2){ animation-delay:.15s; background:var(--accent-2); }
.preloader__mark span:nth-child(3){ animation-delay:.3s; background:#fff; }
@keyframes bounce{ 0%,80%,100%{ transform:translateY(0); opacity:.5 } 40%{ transform:translateY(-14px); opacity:1 } }

/* ---------- 6. Topbar ---------- */
.topbar{
  background:var(--ink-3);
  color:rgba(255,255,255,.72);
  font-size:14px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar__list{ display:flex; gap:28px; align-items:center; }
/* A phone number or an email broken across two lines reads as two values, so
   these never wrap - they drop out whole instead (see the 1300px rule below). */
.topbar__list li{ display:flex; align-items:center; gap:.5rem; flex:none; white-space:nowrap; }
.topbar__addr a{ display:inline-flex; align-items:center; gap:.5rem; }
.topbar__list i{ color:var(--accent); font-size:13px; }
.topbar__list a:hover{ color:var(--accent-2); }

.topbar__right{ display:flex; align-items:center; gap:22px; }
.topbar__badge{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-display); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-2); font-size:14px;
}
.topbar__social{ display:flex; gap:8px; }
.topbar__social a{
  width:30px; height:30px; border-radius:7px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.07);
  font-size:13px;
  transition:all var(--t);
}
.topbar__social a:hover{ background:var(--accent); color:#fff; transform:translateY(-2px); }

/* Below 1300px the three topbar values plus the badge and social icons no
   longer fit on one line. The address drops first - it is the least urgent of
   the three, and the footer and contact panel both still carry it in full.
   1300px is the same threshold the header text lockup uses. */
@media (max-width:1299.98px){ .topbar__list li.topbar__addr{ display:none; } }

/* ---------- 7. Header ---------- */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:1000;
  transition:box-shadow var(--t);
}
.site-header.is-stuck{
  position:fixed; top:0; left:0; right:0;
  box-shadow:0 8px 30px rgba(10,26,47,.10);
  animation:slideDown .4s ease;
}
@keyframes slideDown{ from{ transform:translateY(-100%) } to{ transform:translateY(0) } }

.site-header .navbar{ padding:0; min-height:88px; }

.brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }

/* The badge carries "BTT"; the lockup beside it carries the full name, which
   the logo's own fine print is far too small to render legibly at this size. */
.brand__name{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.brand__name strong{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:800;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--brand);         /* brand blue, straight from the logo */
  white-space:nowrap;
}
.brand__name small{
  font-family:var(--font-body);
  font-size:10px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);        /* brand orange */
  margin-top:5px;
  white-space:nowrap;
}

.brand__logo{
  display:block;
  height:66px;
  width:auto;
  transition:transform var(--t);
}
.brand:hover .brand__logo{ transform:scale(1.04); }
.brand__logo--sm{ height:54px; }
.brand__logo--footer{
  content:url("../img/logo.png");
  height:82px;
  margin-bottom:22px;
}

.main-menu{ gap:0; }
.navbar-nav.main-menu .nav-link{
  font-family:var(--font-display);
  font-size:16px; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink);
  /* 15px rather than 18: seven items at 18 crowd the wordmark on the left and
     the actions on the right. */
  padding:34px 15px;
  white-space:nowrap;
  position:relative;
}
.main-menu .nav-link::after{
  content:''; position:absolute;
  left:15px; right:15px; bottom:28px; height:2px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t);
}
.main-menu .nav-link:hover,
.main-menu .nav-link.active{ color:var(--accent); }
.main-menu .nav-link:hover::after,
.main-menu .nav-link.active::after{ transform:scaleX(1); }
.main-menu .dropdown-toggle::after{ margin-left:.4em; border-top-color:currentColor; }

.main-menu .dropdown-menu{
  border:0; border-top:3px solid var(--accent);
  border-radius:0 0 12px 12px;
  box-shadow:var(--shadow);
  padding:12px 0; margin-top:0; min-width:270px;
}
.main-menu .dropdown-item{
  font-size:15px; font-weight:500;
  padding:9px 22px; color:var(--body);
}
.main-menu .dropdown-item:hover{
  background:var(--accent-soft); color:var(--accent); padding-left:28px;
}

/* The centre nav is flex-grow:1, so the actions must refuse to be squeezed —
   without this the phone number and CTA label wrap onto two lines. */
.header__actions{ align-items:center; gap:18px; flex:0 0 auto; }
.header__actions .btn{ white-space:nowrap; }
.header__call{ display:flex; align-items:center; gap:11px; white-space:nowrap; }
.header__call i{
  width:42px; height:42px; border-radius:11px;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent);
  font-size:19px;
}
.header__call span{ display:flex; flex-direction:column; line-height:1.3; }
.header__call small{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--body); }
.header__call b{ font-family:var(--font-display); font-size:19px; color:var(--ink); }
.header__call:hover b{ color:var(--accent); }

.navbar-toggler{
  border:0; padding:10px; width:48px; height:44px;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  box-shadow:none !important;
  position:relative; z-index:10;
  pointer-events:auto;
  touch-action:manipulation;
  cursor:pointer;
}
.navbar-toggler span{
  display:block; height:2.5px; border-radius:3px;
  background:var(--ink); transition:all var(--t);
}
.navbar-toggler span:nth-child(2){ width:70%; background:var(--accent); }

/* ---------- 8. Mobile nav ---------- */
.offcanvas.offcanvas-end.mobile-nav{
  --bs-offcanvas-width:min(320px, 88vw);
  width:min(320px, 88vw) !important;
  max-width:100vw;
}
.mobile-nav{ background:var(--ink); color:#fff; }
.mobile-nav.mobile-nav--open{
  visibility:visible !important;
  transform:none !important;
}
.mobile-menu-open{ overflow:hidden !important; }
.mobile-menu-backdrop{
  position:fixed; inset:0; z-index:1040;
  display:block; width:100%; height:100%;
  padding:0; border:0;
  background:rgba(0,0,0,.5);
}
.mobile-nav .offcanvas-header{ border-bottom:1px solid rgba(255,255,255,.1); padding:22px 26px; }
.mobile-nav .offcanvas-body{ padding:26px; }

.mobile-menu li + li{ border-top:1px solid rgba(255,255,255,.08); }
.mobile-menu a{
  display:block; padding:14px 0;
  font-family:var(--font-display);
  font-size:20px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.mobile-menu a:hover{ color:var(--accent-2); padding-left:8px; }

.mobile-nav__info{ margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); }
.mobile-nav__info p{ font-size:14px; color:rgba(255,255,255,.7); margin-bottom:8px; }
.mobile-nav__info i{ color:var(--accent); margin-right:8px; }

/* ---------- 9. Hero (slider) ---------- */
/* NOTE: overflow stays visible so the overlapping booking bar can break out of
   the hero. */
.hero{
  position:relative;
  background:var(--ink);
  padding:100px 0 0;
}
.hero--slider{ padding-top:0; }

.hero__carousel{ position:relative; }
.hero__carousel .carousel-item{ position:relative; }

.hero__shot{
  display:block;
  width:100%;
  height:clamp(560px, 76vh, 820px);
  object-fit:cover;
  object-position:center 42%;
}
/* Left-weighted scrim: the copy sits left, and these photos are bright on that
   side, so darken it rather than trusting the picture. */
.hero__scrim{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,29,61,.56) 0%, rgba(6,29,61,.44) 46%, rgba(6,29,61,.13) 100%),
    linear-gradient(180deg, rgba(6,29,61,.30) 0%, transparent 38%, rgba(6,29,61,.30) 100%);
}

/* Absolute wrapper holds the .container so it can still centre normally —
   putting position:absolute on .container itself loses to `.hero .container`. */
.hero__slide{
  position:absolute; inset:0;
  display:flex; align-items:center;
  z-index:2;
}
.hero__slide .container > *{ max-width:660px; }

.hero .container{ position:relative; z-index:2; }

.hero__title{
  font-size:clamp(2.1rem, 1.25rem + 3vw, 3.9rem);
  color:#fff;
  text-transform:uppercase;
  margin-bottom:20px;
}
.hero__title em{
  font-style:normal; color:var(--accent-2);
  display:block;
}

.hero__text{
  color:rgba(255,255,255,.82);
  font-size:17px;
  margin-bottom:30px;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* Staggered entrance, replayed each time a slide becomes active. */
@keyframes heroIn{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:none; }
}
/* fill-mode `backwards`, deliberately not `both`: with `both` the element holds
   the 0% frame (opacity:0) whenever the animation does not actually run, which
   leaves a slide's copy invisible. `backwards` reverts to the natural style, so
   the worst case is "no animation", never "no text". */
.hero__carousel .carousel-item.active .hero__slide .container > *{
  animation:heroIn .7s cubic-bezier(.25,.8,.35,1) backwards;
}
.hero__carousel .carousel-item.active .hero__slide .container > *:nth-child(2){ animation-delay:.09s; }
.hero__carousel .carousel-item.active .hero__slide .container > *:nth-child(3){ animation-delay:.18s; }
.hero__carousel .carousel-item.active .hero__slide .container > *:nth-child(4){ animation-delay:.27s; }

/* Prev / next */
/* Bottom-right pair rather than the usual left/right edges: the copy is
   left-aligned and full-bleed, so a vertically-centred left arrow lands on top
   of the headline. Navy fill because the right of these photos is the bright
   side, where a translucent white button disappears. */
.hero__nav{
  width:52px; height:52px;
  top:auto; bottom:30px;
  transform:none;
  opacity:1;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(6,29,61,.58);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#fff; font-size:20px;
  transition:all var(--t);
}
.carousel-control-prev.hero__nav{ left:auto; right:96px; }
.carousel-control-next.hero__nav{ right:34px; }
.hero__nav:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.hero__nav:focus-visible{ outline:3px solid var(--accent-2); outline-offset:3px; }

/* Indicators — dashes, not dots */
.hero__dots{ margin:0 0 26px; gap:9px; align-items:center; }
.hero__dots button{
  width:34px; height:4px;
  border-radius:99px;
  background:rgba(255,255,255,.42);
  border:0; opacity:1;
  transition:all var(--t);
}
.hero__dots button.active{ background:var(--accent); width:54px; }

/* Trust strip under the slider */
.hero__points{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:12px 34px;
  padding:26px 0 0;
}
.hero__points li{
  display:flex; align-items:center; gap:.45rem;
  white-space:nowrap;
  font-family:var(--font-display);
  font-size:14.5px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.hero__points i{ color:var(--accent-2); font-size:18px; }

/* Booking bar */
.booking{
  position:relative;
  margin-top:70px;
  transform:translateY(50%);
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:26px 28px;
}
.booking__form{
  display:grid;
  grid-template-columns:repeat(4, 1fr) auto;
  gap:18px;
  align-items:end;
}
.booking__field label{
  display:block;
  font-family:var(--font-display);
  font-size:14px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--body);
  margin-bottom:7px;
}
.booking__field .form-control,
.booking__field .form-select{
  border:1px solid var(--line);
  background:var(--soft);
  border-radius:10px;
  padding:.72rem .9rem;
  font-size:15px;
  color:var(--ink);
}
.booking__field .form-control:focus,
.booking__field .form-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
  background:#fff;
}
.booking__btn{ white-space:nowrap; height:47px; }

/* The slider hero adds a trust strip above the bar, so it needs less air. */
.hero--slider .booking{ margin-top:50px; }

/* The section that follows the hero absorbs the overlapping booking bar —
   see .overview in block 11. */

/* ---------- 11. Company overview + metrics ---------- */
/* Sits directly under the hero, so it absorbs the overlapping booking bar. */
.overview{ padding-top:150px; }
.overview__top{ margin-bottom:78px; }

/* -- Pill label -- */
.pill{
  display:inline-block;
  border:1px solid rgba(249,115,72,.45);
  border-radius:100px;
  padding:9px 26px;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:24px;
}

/* -- Centre copy -- */
.overview__copy{ text-align:center; }
.overview__title{
  font-size:clamp(2rem, 1.15rem + 2.9vw, 3.45rem);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:22px;
}
.overview__title span{ color:var(--accent); }
/* Two statements, not one wrapped phrase - break between them rather than
   wherever the centred column happens to run out. Opt-in, because
   about.html's heading in this slot is a single phrase that reads worse
   split ('NETWORK' alone on a line). */
.overview__title--split span{ display:block; }
/* Same trap as .about__title: between lg and the 1400px container step this
   sits in a ~450px column while the clamp is still sized for a wide one, and
   "Powering Business" spills to a third line. Scoped to --split so about.html's
   shorter heading keeps its size. */
@media (min-width:992px) and (max-width:1399.98px){
  .overview__title--split{ font-size:2.6rem; }
}

.overview__text{
  font-size:16.5px;
  line-height:1.85;
  color:var(--body);
  max-width:600px;
  margin:0 auto 38px;
}

/* -- Pill button with inset icon -- */
.btn-pill{
  display:inline-flex;
  align-items:center;
  gap:16px;
  background:var(--ink);
  color:#fff;
  border-radius:100px;
  padding:9px 9px 9px 32px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  letter-spacing:-.005em;
  transition:all var(--t);
}
.btn-pill__icon{
  width:44px; height:44px;
  border-radius:50%;
  display:grid; place-items:center;
  background:#fff;
  color:var(--accent);
  font-size:16px;
  transition:transform var(--t);
}
.btn-pill:hover{
  color:#fff;
  background:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(249,115,72,.32);
}
.btn-pill:hover .btn-pill__icon{ transform:rotate(20deg) scale(1.06); }

/* -- Notched image panels --
   border-radius rounds all four corners, then clip-path slices two of them
   off at 45°. The browser intersects both, giving rounded + cut corners. */
.shot{
  margin:0;
  border-radius:26px;
  overflow:hidden;
  background:var(--ink);
  box-shadow:var(--shadow);
}
.shot svg,
.shot img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:36 / 46;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.25,.8,.35,1);
}
.shot:hover svg,
.shot:hover img{ transform:scale(1.05); }

/* cut top-right + bottom-left */
.shot--l{
  clip-path:polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );
}
/* cut top-left + bottom-right (mirrored) */
.shot--r{
  clip-path:polygon(
    var(--notch) 0,
    100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%,
    0 var(--notch)
  );
}

/* -- Metric cards -- */
.metric{
  display:flex;
  align-items:center;
  gap:24px;
  background:var(--ink);
  border-radius:22px;
  padding:44px 38px;
  min-height:186px;
  transition:transform var(--t), box-shadow var(--t);
}
.metric:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }

.metric--notch-tr{
  clip-path:polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    0 100%
  );
}
.metric--notch-tl{
  clip-path:polygon(
    var(--notch) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--notch)
  );
}

.metric i{
  font-size:52px;
  line-height:1;
  color:var(--accent);
  flex:0 0 auto;
}
.metric__body b{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 1.9rem + 1.5vw, 3.25rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  color:#fff;
  margin-bottom:6px;
}
/* Direct child only — the counter lives in a <span> inside the <b>, and a
   bare `.metric__body span` would shrink and block-break the number. */
.metric__body > span{
  display:block;
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

/* Highlighted (orange) card */
.metric--accent{ background:var(--accent); }
.metric--accent i{ color:#fff; }
.metric--accent .metric__body span{ color:rgba(255,255,255,.85); }

/* ---------- 12. Core features ---------- */
.features__head{ margin-bottom:52px; }
/* Sized to hold the heading on ONE line at every container step. The container
   is stepped (936 / 1116 / 1296), not fluid, so a vw-based clamp overshoots at
   the top of each step and breaks the line - fixed sizes per breakpoint are the
   only way to guarantee it. Measured in Plus Jakarta Sans 800 at this tracking,
   the string renders 31.34x the font-size wide; each size below leaves ~5%
   headroom against its step. Re-measure if the wording changes. */
.features__title{
  font-size:1.35rem;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--ink);
  text-align:right;
  margin:0;
}
@media (min-width:992px){  .features__title{ font-size:1.75rem; } }   /* container  936 */
@media (min-width:1200px){ .features__title{ font-size:2.1rem; } }    /* container 1116 */
@media (min-width:1400px){ .features__title{ font-size:2.45rem; } }   /* container 1296 */

/* Cards step downward from left to right. */
.features__grid > div:nth-child(2) .fcard{ margin-top:30px; }
.features__grid > div:nth-child(3) .fcard{ margin-top:60px; }

.fcard{
  background:#fff;
  border-radius:18px;
  padding:22px 22px 26px;
  /* Deliberately NOT height:100% — the stagger margins make the row taller
     than a card, so stretching would open dead space above the MORE pill.
     Equal heights come from the fixed media ratio + the title min-height. */
  display:flex;
  flex-direction:column;
  box-shadow:0 16px 40px rgba(8,42,89,.07);
  transition:transform var(--t), box-shadow var(--t);
}
.fcard:hover{ transform:translateY(-8px); box-shadow:0 28px 60px rgba(8,42,89,.14); }

.fcard__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}
.fcard__head h4{
  font-size:20px;
  font-weight:800;
  line-height:1.28;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0;
  /* Reserve two lines so a shorter title doesn't leave the card short and
     get stretched by height:100% — that opens a gap above the MORE pill. */
  min-height:2.56em;
}
.fcard__icon{
  flex:0 0 56px;
  width:56px; height:56px;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent);
  color:#fff;
  font-size:23px;
  transition:transform var(--t);
}
.fcard:hover .fcard__icon{ transform:rotate(-10deg) scale(1.06); }

/* Image panel: rounded, with the top-right corner sliced off. */
.fcard__media{
  margin:0 0 24px;
  border-radius:14px;
  overflow:hidden;
  background:var(--ink);
  clip-path:polygon(
    0 0,
    calc(100% - 34px) 0,
    100% 34px,
    100% 100%,
    0 100%
  );
}
.fcard__media svg,
.fcard__media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:5 / 3;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.25,.8,.35,1);
}
.fcard:hover .fcard__media svg,
.fcard:hover .fcard__media img{ transform:scale(1.06); }

.fcard__more{
  align-self:flex-start;
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:100px;
  padding:10px 20px;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink);
  transition:all var(--t);
}
.fcard__more i{ font-size:14px; transition:transform var(--t); }
.fcard__more:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.fcard__more:hover i{ transform:translateX(4px); }

/* ---------- 13. About (dark band) ---------- */
.about{
  background:linear-gradient(160deg, #0C3A78, #071F41);
  position:relative;
  overflow:hidden;
}
/* Faint port-silhouette wash, standing in for the reference's ghosted photo. */
.about__bg{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.5;
  background:
    radial-gradient(circle at 82% 18%, rgba(249,115,72,.16), transparent 55%),
    radial-gradient(circle at 8% 92%, rgba(255,255,255,.07), transparent 55%);
}
.about .container{ position:relative; z-index:1; }

.pill--onDark{ border-color:rgba(249,115,72,.55); }

/* Two-line brand lockup between the pill and heading, with equal emphasis. */
.about__brand{
  font-family:var(--font-display);
  font-weight:800;
  /* Responsive brand lockup, enlarged for stronger emphasis in this section. */
  font-size:clamp(1.5rem, 0.95rem + 1.5vw, 2.4rem);
  line-height:1.1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 18px;
}
/* Keep the lockup comfortably sized in the intermediate desktop range. */
@media (min-width:992px) and (max-width:1399.98px){
  .about__brand{ font-size:1.7rem; }
}
.about__brand span{
  display:block;
  margin-top:6px;
  font-size:1em;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--accent-2);
}

.about__title{
  /* Dialled back from a 2.2rem cap so the band leads with the brand lockup
     above it rather than the headline. */
  font-size:clamp(1.25rem, 0.8rem + 1.2vw, 1.9rem);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 30px;
}
.about__title span{ color:var(--accent); }
.about__title em{ font-style:normal; display:block; }

/* Between lg and the 1400px container step, .col-lg-6 gives this heading a
   ~450px column - narrow enough that the viewport-based clamp above still
   overflows onto four lines. Pin a smaller size across that band only. */
@media (min-width:992px) and (max-width:1399.98px){
  .about__title{ font-size:1.4rem; }
}

/* Two-up tick grid */
.about__ticks{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px 28px;
  padding-bottom:28px;
  margin-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.about__ticks li{
  display:flex; align-items:center; gap:10px;
  font-size:15.5px; font-weight:500;
  color:rgba(255,255,255,.92);
}
.about__ticks i{ color:var(--accent); font-size:17px; flex:0 0 auto; }

.about__text{
  font-size:15.5px;
  line-height:1.85;
  color:rgba(255,255,255,.7);
  max-width:470px;
  margin-bottom:32px;
}

/* Same two-up tick grid for light sections. .about__ticks is white-on-dark and
   goes invisible on a soft background, so the ink-coloured variant lives here
   rather than as a modifier that has to override four inherited colours. */
.checklist{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px 30px;
}
.checklist li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:15.5px; line-height:1.6; font-weight:500;
  color:var(--ink);
}
.checklist i{ color:var(--accent); font-size:17px; flex:0 0 auto; margin-top:3px; }

.btn-pill--accent{ background:var(--accent); }
.btn-pill--accent .btn-pill__icon{ color:var(--accent); }
.btn-pill--accent:hover{ background:#fff; color:var(--ink); }
.btn-pill--accent:hover .btn-pill__icon{ background:var(--accent); color:#fff; }

/* -- Overlapping framed visuals --
   Everything is positioned in % against a fixed-ratio stage, so the whole
   composition scales as one unit instead of breaking apart. */
.about__visual{
  position:relative;
  aspect-ratio:492 / 397;
  width:100%;
}

.afig{
  position:absolute;
  margin:0;
  padding:7px;
  border-radius:24px;
  overflow:hidden;
}
.afig svg,
.afig img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:17px;
}

/* Main plate — corner sliced off the TOP-LEFT */
.afig--main{
  left:0; top:0;
  width:84%; height:72%;
  background:rgba(255,255,255,.13);
  clip-path:polygon(52px 0, 100% 0, 100% 100%, 0 100%, 0 52px);
}
.afig--main svg,
.afig--main img{
  clip-path:polygon(45px 0, 100% 0, 100% 100%, 0 100%, 0 45px);
}

/* Inset plate — corner sliced off the TOP-RIGHT */
.afig--sub{
  right:0; bottom:0;
  width:60%; height:52%;
  background:rgba(255,255,255,.82);
  box-shadow:0 26px 60px rgba(0,0,0,.3);
  clip-path:polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 0 100%);
}
.afig--sub svg,
.afig--sub img{
  clip-path:polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
}

/* Orange stat plate straddling both */
.about__badge{
  position:absolute;
  left:13.5%; bottom:11%;
  width:38%;
  background:var(--accent);
  border-radius:12px;
  padding:20px;
  box-shadow:0 22px 50px rgba(249,115,72,.35);
  z-index:2;
}
.about__badge b{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.9rem, 1.1rem + 2.2vw, 2.9rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:#fff;
  margin-bottom:6px;
}
.about__badge > span{
  display:block;
  font-family:var(--font-display);
  /* nowrap + a low floor keeps this on one line at every breakpoint — it
     otherwise wraps around 1024px and the plate changes height. */
  white-space:nowrap;
  font-size:clamp(.58rem, .4rem + .44vw, .82rem);
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
}

/* ---------- 14. Services ---------- */
.services__head{ margin-bottom:46px; }
.services__title{
  font-size:clamp(1.6rem, 1rem + 1.9vw, 2.6rem);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0;
}
.services__title span{ color:var(--accent); }
.services__intro{
  font-size:14.5px;
  line-height:1.8;
  color:var(--body);
  margin:0;
}

/* -- Feature image, corner sliced off the TOP-RIGHT -- */
.svisual{
  position:relative;
  margin:0;
  height:100%;
  min-height:340px;
  border-radius:16px;
  overflow:hidden;
  background:var(--ink);
  clip-path:polygon(
    0 0,
    calc(100% - 46px) 0,
    100% 46px,
    100% 100%,
    0 100%
  );
}
.svisual img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  transition:opacity .18s ease;
}
/* Set by main.js for the moment between swapping the src and the new file
   painting, so the picture crossfades instead of hard-cutting. */
.svisual.is-swapping img,
.svisual.is-swapping figcaption{ opacity:0; }
.svisual figcaption{
  position:absolute;
  left:20px; right:20px; bottom:20px;
  background:rgba(6,29,61,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:16px 18px;
  font-size:14px;
  line-height:1.65;
  color:rgba(255,255,255,.92);
  transition:opacity .18s ease;
}

/* -- Service rows -- */
.slist{ display:flex; flex-direction:column; gap:16px; height:100%; }
.slist li{ flex:1 1 auto; display:flex; }

.srow{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  background:#fff;
  border-radius:16px;
  padding:16px 20px;
  box-shadow:0 10px 30px rgba(8,42,89,.06);
  transition:background var(--t), box-shadow var(--t), transform var(--t);
  /* corner sliced off the TOP-LEFT */
  clip-path:polygon(28px 0, 100% 0, 100% 100%, 0 100%, 0 28px);
}
.srow:hover,
.srow.is-active{
  background:var(--accent);
  box-shadow:0 18px 40px rgba(249,115,72,.28);
}

.srow__icon{
  flex:0 0 54px;
  width:54px; height:54px;
  display:grid; place-items:center;
  background:var(--ink);
  color:#fff;
  font-size:24px;
  border-radius:15px;
  /* small matching cut, bottom-right */
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%);
  transition:background var(--t);
}
.srow:hover .srow__icon,
.srow.is-active .srow__icon{ background:var(--ink-3); }

.srow__body{ flex:1 1 auto; min-width:0; }
.srow__title{
  display:block;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:800;
  letter-spacing:-.01em;
  text-transform:uppercase;
  line-height:1.2;
  color:var(--ink);
  margin-bottom:9px;
  transition:color var(--t);
}
.srow:hover .srow__title,
.srow.is-active .srow__title{ color:#fff; }

.srow__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.srow__tags em{
  font-style:normal;
  font-family:var(--font-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--body);
  border:1px solid var(--line);
  border-radius:100px;
  padding:4px 12px;
  transition:all var(--t);
}
.srow:hover .srow__tags em,
.srow.is-active .srow__tags em{
  color:#fff;
  border-color:rgba(255,255,255,.6);
}

.srow__go{
  flex:0 0 40px;
  width:40px; height:40px;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--soft);
  color:var(--ink);
  font-size:16px;
  transition:all var(--t);
}
/* No rotation here — the glyph is already an up-right arrow, and turning it
   would leave the active row pointing a different way to the rest. */
.srow:hover .srow__go,
.srow.is-active .srow__go{
  background:#fff;
  color:var(--accent);
  transform:scale(1.06);
}

/* ---------- 15. Fleet ---------- */
.vehicle{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0 0 26px;
  height:100%;
  overflow:hidden;
  transition:all var(--t);
}
.vehicle:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lg); border-color:transparent; }

.vehicle__top{
  position:relative;
  /* The fleet photos are studio shots at a fixed 5:3. Matching that ratio here
     instead of a fixed pixel height means the crop is zero at every card width
     - a fixed height only frames correctly at one column width. */
  aspect-ratio:5 / 3;
  background:var(--soft);
  display:grid; place-items:center;
  overflow:hidden;
}
.vehicle__top::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index:3;
}

/* Vehicle photo fills the card head. A light neutral sits underneath while the
   image loads - these are white-background studio shots, so a navy placeholder
   would flash dark and then jump to white. */
/* Absolutely positioned, not a grid item: .vehicle__top's row is content-sized,
   so a percentage height on a grid child resolves to auto and the photo spills
   out at natural aspect ratio (which also makes object-position a no-op).
   inset:0 against the 170px relative parent gives it a definite box. */
.vehicle__photo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform var(--t);
}
.vehicle:hover .vehicle__photo{ transform:scale(1.06); }

/* No object-position hints and no scrim any more. Both existed for the old
   environmental photos: a short strip cropped a tall photo onto sky or ceiling,
   and the varying brightness needed darkening under the tag. The fleet shots
   are now studio images on a white ground at the box's own ratio, where a navy
   scrim reads as a stain and the tag - solid orange, white text - is legible
   on white without help. */

.vehicle__tag{
  position:absolute; top:16px; left:16px;
  z-index:2;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-display);
  font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:5px 12px; border-radius:6px;
}
.vehicle__tag--green{ background:var(--green); }

.vehicle h4{
  font-size:26px; text-transform:uppercase;
  margin:24px 26px 14px;
}
.vehicle__specs{
  display:flex; flex-wrap:wrap; gap:8px 18px;
  margin:0 26px 22px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.vehicle__specs li{
  display:flex; align-items:center; gap:.4rem;
  font-size:14px; color:var(--body);
}
.vehicle__specs i{ color:var(--accent); }

/* Book Now is the only action in the card foot now that View Details is gone,
   so it centres rather than sitting hard left against an empty right side. */
.vehicle__foot{
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin:0 26px;
}
.vehicle--green .vehicle__top{ background:linear-gradient(135deg,#0C2C1C,#124430); }
.vehicle--green .vehicle__top::after{ background:linear-gradient(90deg,var(--green),var(--green-2)); }

/* ---------- 16. Process ---------- */
.process__head{ margin-bottom:46px; }
.process__title{
  font-size:clamp(1.5rem, 1rem + 1.55vw, 2.2rem);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0;
}
.process__title span{
  display:block;
  color:var(--accent);
}
.process__intro{
  font-size:14.5px;
  line-height:1.8;
  color:var(--body);
  margin:0;
}

/* Flex column so every white plate in the row squares up, whatever the
   copy length. */
.step{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Unclipped wrapper — the connector must escape .step__media's clip-path. */
.step__frame{ position:relative; flex:0 0 auto; }

/* Photo panel, corner sliced off the TOP-RIGHT */
.step__media{
  position:relative;
  margin:0;
  border-radius:16px;
  background:var(--ink);
  clip-path:polygon(
    0 0,
    calc(100% - 40px) 0,
    100% 40px,
    100% 100%,
    0 100%
  );
}
.step__media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:10 / 7;
  object-fit:cover;
  border-radius:16px;
  transition:transform .6s cubic-bezier(.25,.8,.35,1);
}
.step:hover .step__media img{ transform:scale(1.05); }

/* Connector, sitting in the gutter between two cards */
.step__arrow{
  position:absolute;
  right:-22px; top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:50%;
  display:none;
  place-items:center;
  background:var(--accent);
  color:#fff;
  font-size:18px;
  box-shadow:0 0 0 5px #fff, 0 10px 22px rgba(249,115,72,.35);
  z-index:3;
}
/* Only between cards — never trailing off the last one. */
.process__grid > div:not(:last-child) .step__arrow{ display:grid; }

/* White plate pulled up over the photo */
.step__card{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  width:84%;
  margin:-58px auto 0;
  background:#fff;
  border-radius:14px;
  padding:28px 26px 26px;
  box-shadow:0 18px 44px rgba(8,42,89,.10);
  transition:box-shadow var(--t), transform var(--t);
}
.step:hover .step__card{ transform:translateY(-4px); box-shadow:0 26px 56px rgba(8,42,89,.16); }

.step__badge{
  position:absolute;
  top:-14px; left:26px;
  background:var(--accent);
  color:#fff;
  border-radius:100px;
  padding:6px 16px;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(249,115,72,.32);
}

.step h4{
  font-size:21px;
  font-weight:800;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--ink);
  margin:6px 0 10px;
}
.step p{ font-size:15px; line-height:1.7; margin:0; }

/* ---------- 17. Green band ---------- */
.green{ padding-top:0; }
.green__inner{
  background:linear-gradient(135deg, var(--ink), #061D3D 130%);
  border-radius:var(--radius-lg);
  padding:70px 60px;
  position:relative;
  overflow:hidden;
}
.green__inner::before{
  content:''; position:absolute;
  width:460px; height:460px; border-radius:50%;
  background:rgba(24,169,87,.18); filter:blur(80px);
  right:-120px; top:-140px;
}
.green__inner > *{ position:relative; z-index:1; }

.green__card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  padding:26px 22px;
  height:100%;
  transition:all var(--t);
}
.green__card:hover{ background:rgba(255,255,255,.09); transform:translateY(-6px); }
/* Height pinned to the glyph rather than inherited from the body line-height,
   so all four icons sit on the same baseline whatever their glyph metrics. */
.green__card i{
  font-size:28px; color:var(--green-2);
  display:flex; align-items:center;
  height:34px; line-height:1; margin-bottom:29px;
}
.green__card b{
  display:block; font-family:var(--font-display);
  font-size:38px; color:#fff; line-height:1.05; margin-bottom:8px;
  white-space:nowrap;   /* a value and its suffix are one figure - never split them */
}
/* Direct child only. As `.green__card span` this also caught the
   <span class="counter"> inside the <b>, which shrank the number to 14px grey
   and - because of display:block - pushed its "+" / "K" suffix onto its own
   line, leaving these two cards 22px taller than the other two. */
.green__card > span{ font-size:14px; color:rgba(255,255,255,.66); line-height:1.6; display:block; }

/* ---------- 18. Reviews ---------- */
/* Card anatomy follows a review-site entry rather than a pull-quote: who wrote
   it and when comes first, the rating second, the text third, and the owner's
   response sits indented underneath. Replaces the old .testi pull-quote, whose
   giant quote mark and centred marketing voice read as an advert rather than
   something a customer actually wrote. */
.review{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 26px;
  height:100%;
  margin:0;
  transition:all var(--t);
}
.review:hover{ box-shadow:var(--shadow-lg); border-color:transparent; transform:translateY(-6px); }

.review__head{ display:flex; align-items:center; gap:13px; margin-bottom:14px; }

.review__av{
  flex:0 0 46px;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff;
  font-family:var(--font-display); font-size:16px; font-weight:700;
}
/* Letter avatars only read as separate people if they are not all one colour.
   Six fixed hues, assigned per reviewer in the markup. */
.review__av--a{ background:#2E6BC6; }
.review__av--b{ background:#C1522B; }
.review__av--c{ background:#1E8A6B; }
.review__av--d{ background:#7048BE; }
.review__av--e{ background:#A8790C; }
.review__av--f{ background:#AC3F68; }

.review__who{ min-width:0; }
.review__who b{
  display:block;
  font-family:var(--font-display);
  font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.25;
}
.review__who small{
  display:block;
  font-size:12.5px; color:var(--body); line-height:1.5; margin-top:3px;
}

.review__stars{ color:var(--star); font-size:14px; letter-spacing:2.5px; margin-bottom:12px; }
/* The unfilled remainder of a sub-5 rating. Muted, not invisible - a 4-star
   review has to be legible as 4 rather than as a broken 5. */
.review__stars .bi-star{ color:#D3DBE6; }

.review__text{ font-size:15.5px; line-height:1.75; color:#3E5069; margin:0; }

.testi__nav{ display:flex; justify-content:center; gap:14px; margin-top:38px; }
.testi__nav .carousel-control-prev,
.testi__nav .carousel-control-next{
  position:static;
  width:52px; height:52px; border-radius:50%;
  background:#fff; border:1px solid var(--line);
  color:var(--ink); opacity:1;
  display:grid; place-items:center;
  font-size:20px;
  transition:all var(--t);
}
.testi__nav button:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

.clients{ margin-top:76px; padding-top:52px; border-top:1px solid var(--line); text-align:center; }
.clients__label{
  font-family:var(--font-display);
  font-size:16px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--body); margin-bottom:28px;
}
.clients__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px 56px; }
.clients__row span{
  font-family:var(--font-display);
  font-size:27px; font-weight:700; letter-spacing:.12em;
  color:#C3CDDB;
  transition:color var(--t);
  cursor:default;
}
.clients__row span:hover{ color:var(--ink); }

/* ---------- 19. Safety ---------- */
.safety__card{
  background:#fff;
  border-radius:var(--radius);
  padding:32px 28px;
  height:100%;
  border:1px solid var(--line);
  transition:all var(--t);
}
.safety__card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent; }
/* Direct child only — the card's leading glyph. A nested icon (e.g. the arrow
   inside a .link-arrow in the card body) must not pick up the 56px plate. */
.safety__card > i{
  width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--ink); color:var(--accent-2);
  font-size:24px; margin-bottom:18px;
  transition:all var(--t);
}
.safety__card:hover > i{ background:var(--accent); color:#fff; }
.safety__card h5{ font-size:23px; text-transform:uppercase; margin-bottom:10px; }
.safety__card p{ font-size:15px; margin:0; }

/* ---------- 20. FAQ ---------- */
.faq__help{
  display:flex; align-items:center; gap:14px;
  margin-top:30px; padding:22px 24px;
  background:var(--soft); border-radius:var(--radius);
  border-left:4px solid var(--accent);
}
.faq__help i{ font-size:32px; color:var(--accent); }
.faq__help small{ display:block; font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
.faq__help b{ font-family:var(--font-display); font-size:25px; color:var(--ink); }

.accordion-item{
  border:1px solid var(--line);
  border-radius:var(--radius) !important;
  margin-bottom:16px;
  overflow:hidden;
  background:#fff;
}
.accordion-button{
  font-family:var(--font-display);
  font-size:22px; font-weight:600;
  color:var(--ink);
  padding:22px 26px;
  background:#fff;
  box-shadow:none !important;
}
.accordion-button:not(.collapsed){
  background:var(--accent-soft);
  color:var(--accent);
}
.accordion-button::after{
  width:32px; height:32px;
  background:var(--soft) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A1A2F'%3e%3cpath d='M8 3a.5.5 0 0 1 .5.5v4h4a.5.5 0 0 1 0 1h-4v4a.5.5 0 0 1-1 0v-4h-4a.5.5 0 0 1 0-1h4v-4A.5.5 0 0 1 8 3'/%3e%3c/svg%3e") center / 18px no-repeat;
  border-radius:9px;
  transform:none;
  transition:all var(--t);
}
.accordion-button:not(.collapsed)::after{
  background:var(--accent) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M3.5 8a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.5-.5'/%3e%3c/svg%3e") center / 18px no-repeat;
}
.accordion-body{ padding:0 26px 24px; font-size:16px; color:var(--body); }

/* ---------- 21. Blog ---------- */
.post{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  height:100%;
  border:1px solid var(--line);
  transition:all var(--t);
}
.post:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lg); border-color:transparent; }

.post__thumb{
  height:210px; position:relative;
  /* NOT overflow:hidden. .post__date hangs 24px below this box by design, and
     clipping here cuts the month off the badge. The photo is inset:0 so it
     cannot overflow on its own, and .post already clips at the card edge. */
  /* Still a navy ground: it shows while the photo loads, so the card never
     flashes white. */
  background:linear-gradient(135deg, var(--ink), var(--ink-2));
}
/* Same trap as .vehicle__photo: give the image a definite box with inset:0
   rather than a percentage height, or object-fit has nothing to work against. */
.post__img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
/* No hover zoom here: it would need overflow:hidden on the thumb, which clips
   the date badge. The card's lift is the hover affordance. */
/* The date badge is white-on-orange and straddles the photo's bottom edge, so
   darken that edge rather than trusting whatever the picture happens to show. */
.post__thumb::after{
  content:''; position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(6,29,61,0) 45%, rgba(6,29,61,.45) 100%);
}

.post__date{
  position:absolute; left:20px; bottom:-24px; z-index:2;
  width:64px; height:64px; border-radius:12px;
  display:grid; place-content:center; text-align:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  box-shadow:0 12px 26px rgba(254,109,1,.35);
}
.post__date b{ font-family:var(--font-display); font-size:26px; line-height:1; }
.post__date small{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; }

.post__body{ padding:44px 26px 30px; }
.post__meta{ display:flex; gap:20px; margin-bottom:14px; }
.post__meta li{ font-size:13.5px; color:var(--body); display:flex; align-items:center; gap:.4rem; }
.post__meta i{ color:var(--accent); }
.post h4{ font-size:25px; line-height:1.25; margin-bottom:12px; }
.post h4 a:hover{ color:var(--accent); }
.post p{ font-size:15px; margin-bottom:18px; }
.post .link-arrow{ font-size:15px; letter-spacing:.14em; }

/* ---------- 21a. Article (single blog post) ---------- */
.article{ max-width:820px; margin:0 auto; }
.article__meta{ margin-bottom:26px; flex-wrap:wrap; }
.article__figure{ margin:0 0 34px; }
.article__figure img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius);
}
.article__figure figcaption{
  font-size:13.5px; color:var(--body);
  padding-top:12px; text-align:center;
}
.article__lead{
  font-size:19px; line-height:1.75; color:var(--heading);
  font-weight:500; margin-bottom:26px;
}
.article h2{
  font-size:30px; text-transform:uppercase;
  margin:44px 0 16px;
}
.article h3{ font-size:21px; margin:30px 0 12px; }
.article p{ margin-bottom:18px; }
.article__list{ margin:0 0 22px; padding:0; }
.article__list li{
  position:relative; padding-left:30px; margin-bottom:11px;
  color:var(--body); line-height:1.7;
}
.article__list li > i{
  position:absolute; left:0; top:6px;
  color:var(--accent); font-size:15px;
}
.article__quote{
  margin:34px 0; padding:26px 30px;
  background:var(--soft);
  border-left:4px solid var(--accent);
  border-radius:0 12px 12px 0;
  font-family:var(--font-display); font-weight:600;
  font-size:19px; line-height:1.6; color:var(--heading);
}
.article__cta{
  margin-top:44px; padding:30px 34px;
  background:var(--ink); border-radius:var(--radius);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
}
.article__cta p{ color:rgba(255,255,255,.78); margin:0; max-width:520px; }
.article__cta strong{ display:block; color:#fff; font-family:var(--font-display);
  font-size:21px; text-transform:uppercase; margin-bottom:6px; }

@media (max-width:575px){
  .article h2{ font-size:25px; }
  .article__lead{ font-size:17px; }
  .article__quote{ padding:20px 22px; font-size:17px; }
  .article__cta{ padding:24px 22px; }
}

/* Unfilled placeholder in a legal page - a figure BTT still has to supply.
   Deliberately loud: this page would otherwise ship with "[ notice period ]"
   sitting in the body text unnoticed. Delete this rule once none remain. */
.tbd{
  background:#FFF3CD; color:#7A4B00;
  border:1px dashed #E0A800; border-radius:5px;
  padding:0 6px; font-weight:600; white-space:nowrap;
}

/* ---------- 21b. Gallery ---------- */
.gallery__filters{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
  margin-bottom:46px;
}
.gallery__filter{
  font-family:var(--font-display);
  font-size:14px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:11px 24px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff; color:var(--ink);
  cursor:pointer;
  transition:all var(--t);
}
.gallery__filter:hover{ border-color:var(--accent); color:var(--accent); }
.gallery__filter.is-active{
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 10px 24px rgba(254,109,1,.28);
}

.gitem{
  position:relative;
  display:block; width:100%;
  margin:0; padding:0; border:0;
  aspect-ratio:4 / 3;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--ink);
  cursor:pointer;
}
/* Absolutely positioned so the base `img{height:auto}` cannot win and let the
   photo overflow its ratio box. */
.gitem img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.25,.8,.35,1);
}
.gitem:hover img,
.gitem:focus-visible img{ transform:scale(1.08); }

.gitem__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:58px 20px 18px;
  background:linear-gradient(180deg, transparent, rgba(6,29,61,.9));
  color:#fff; text-align:left;
  font-family:var(--font-display);
  font-size:15.5px; font-weight:700; line-height:1.35;
  opacity:0; transform:translateY(10px);
  transition:all var(--t);
}
.gitem__zoom{
  position:absolute; top:16px; right:16px;
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--accent); color:#fff; font-size:16px;
  opacity:0; transform:scale(.6);
  transition:all var(--t);
}
.gitem:hover .gitem__cap,
.gitem:focus-visible .gitem__cap,
.gitem:hover .gitem__zoom,
.gitem:focus-visible .gitem__zoom{ opacity:1; transform:none; }

.gitem:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

/* Lightbox */
.gallery-modal .modal-content{
  background:var(--ink-3);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
/* Cap by viewport height, not width: a portrait shot at modal-xl width is
   taller than the screen, which pushed the caption below the fold. */
.gallery-modal img{
  display:block;
  margin:0 auto;
  width:auto; height:auto;
  max-width:100%;
  max-height:calc(100vh - 190px);
}
.gallery-modal__cap{
  margin:0; padding:18px 22px;
  color:rgba(255,255,255,.86);
  font-family:var(--font-display);
  font-weight:600; font-size:15.5px;
}
.gallery-modal__close{
  position:absolute; top:14px; right:14px; z-index:5;
  padding:11px; border-radius:10px;
  background-color:rgba(6,29,61,.72);
  opacity:1;
}

@media (max-width:575.98px){
  .gallery__filter{ padding:9px 17px; font-size:13px; letter-spacing:.1em; }
  .gitem__cap{ opacity:1; transform:none; font-size:14.5px; }
}

/* ---------- 22. Contact ---------- */
.contact__panel{
  background:linear-gradient(135deg, var(--ink), var(--ink-2));
  border-radius:var(--radius-lg);
  padding:64px 58px;
  position:relative;
  overflow:hidden;
}
.contact__panel::before{
  content:''; position:absolute;
  width:480px; height:480px; border-radius:50%;
  background:rgba(254,109,1,.16); filter:blur(90px);
  left:-160px; bottom:-200px;
}
.contact__panel > *{ position:relative; z-index:1; }

.contact__list{ margin-top:36px; }
.contact__list li{
  display:flex; align-items:center; gap:16px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.contact__list li > div{ min-width:0; }
.contact__list li:last-child{ border-bottom:0; }
.contact__list i{
  width:48px; height:48px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.07); color:var(--accent-2);
  font-size:20px; flex:0 0 48px;
}
.contact__list small{
  display:block; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.contact__list b{
  display:block;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
  font-family:var(--font-display);
  font-size:22px;
  color:#fff;
}

/* The info column runs ~145px taller than the form, which left the bottom-right
   of the panel empty. From lg up the form fills its column and the textarea row
   absorbs the slack, so both columns finish on the same line. Laid out as a grid
   because a wrapped flex row distributes leftover height across every line —
   here only the textarea should grow. */
@media (min-width:992px){
  .contact__form{ height:100%; display:flex; flex-direction:column; }
  .contact__form > .row{
    flex:1 1 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto minmax(122px,1fr) auto;
    gap:1rem;
    margin:0;
  }
  .contact__form > .row > [class*="col-"]{
    width:auto; max-width:none;
    padding:0; margin:0;
  }
  .contact__form > .row > .col-12{ grid-column:1 / -1; }
  .contact__form textarea.form-control{ height:100%; resize:none; }
}

.contact__form .form-control,
.contact__form .form-select{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  border-radius:10px;
  padding:.95rem 1.1rem;
  font-size:15px;
}
.contact__form .form-control::placeholder{ color:rgba(255,255,255,.45); }
.contact__form .form-select{ color:rgba(255,255,255,.75); }
.contact__form .form-select option{ background:var(--ink); color:#fff; }
.contact__form .form-control:focus,
.contact__form .form-select:focus{
  background:rgba(255,255,255,.10);
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(254,109,1,.20);
  color:#fff;
}
/* main.js puts .was-validated on the form element, which IS .contact__form, so
   this has to be a compound selector - as a descendant selector it never
   matched and invalid fields stayed unmarked. */
.contact__form.was-validated .form-control:invalid,
.contact__form.was-validated .form-select:invalid{ border-color:#ff6b6b; }
/* Bootstrap also paints every *valid* field green under .was-validated, which
   lights up the empty optional fields as though they had been filled in
   correctly. Only the problems need marking, so put the untouched fields back
   to the resting border. */
.contact__form.was-validated .form-control:valid,
.contact__form.was-validated .form-select:valid{
  border-color:rgba(255,255,255,.14);
  background-image:none;
}
.contact__note{
  margin-top:16px;
  font-size:14.5px;
  color:var(--green-2);
  display:flex; align-items:center; gap:.5rem;
}

/* ---------- 23. Footer ---------- */
.footer{
  background:#fff;
  color:var(--body);
  padding-top:88px;
  border-top:1px solid var(--line);
}
.footer__main{ padding-bottom:60px; }
.brand--footer{
  display:inline-flex;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
}
.brand--footer .brand__logo--footer{ margin-bottom:0; }
.brand--footer .brand__name{ display:flex; }
.brand--footer .brand__name strong{ font-size:25px; }
.brand--footer .brand__name small{ font-size:11px; }

.footer__about{ font-size:15px; line-height:1.8; margin-bottom:22px; }
.footer__social{ display:flex; gap:10px; }
.footer__social a{
  width:40px; height:40px; border-radius:11px;
  display:grid; place-items:center;
  background:#EEF3F9;
  font-size:16px; color:var(--brand);
  transition:all var(--t);
}
.footer__social a:hover{ background:var(--accent); color:#fff; transform:translateY(-4px); }

.footer__title{
  color:var(--ink); font-size:24px; text-transform:uppercase;
  margin-bottom:24px; position:relative; padding-bottom:14px;
}
.footer__title::after{
  content:''; position:absolute; left:0; bottom:0;
  width:38px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.footer__links li{ margin-bottom:11px; }
.footer__links a{ color:var(--body); font-size:15px; position:relative; padding-left:0; transition:all var(--t); }
.footer__links a:hover{ color:var(--accent); padding-left:8px; }

.footer__news{ display:flex; gap:8px; margin-bottom:22px; }
.footer__news .form-control{
  background:#F5F8FC;
  border:1px solid #D8E1EC;
  color:var(--ink); border-radius:10px; font-size:15px; padding:.8rem 1rem;
}
.footer__news .form-control::placeholder{ color:#78879A; }
.footer__news .form-control:focus{
  background:#fff;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(254,109,1,.12); color:var(--ink);
}
.footer__news .btn{ padding:.8rem 1.1rem; }

/* The address wraps to 2-3 lines in this column, so the icon pins to the
   first line rather than floating in the middle of the block. */
.footer__contact li{
  color:var(--body);
  font-size:14.5px; line-height:1.55; margin-bottom:9px;
  display:flex; align-items:flex-start; gap:.6rem;
  overflow-wrap:anywhere;   /* the email is long enough to overflow the column */
}
.footer__contact i{ color:var(--accent); flex:none; line-height:inherit; }

.footer__bottom{
  border-top:1px solid var(--line);
  padding:26px 0;
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between;
}
.footer__bottom p{ font-size:14.5px; margin:0; }
.footer__bottom ul{ display:flex; gap:26px; }
.footer__bottom a{ color:var(--body); font-size:14.5px; }
.footer__bottom a:hover{ color:var(--accent); }

/* ---------- 24. Back to top ---------- */
.to-top{
  position:fixed; right:26px; bottom:26px; z-index:900;
  width:50px; height:50px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; font-size:20px;
  box-shadow:0 14px 30px rgba(254,109,1,.35);
  opacity:0; visibility:hidden; transform:translateY(18px);
  transition:all var(--t);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ color:#fff; transform:translateY(-4px); }

/* Floating WhatsApp and phone shortcuts shared by every page. */
.quick-contact{
  position:fixed;
  left:22px;
  bottom:24px;
  z-index:950;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.quick-contact__btn{
  min-width:142px;
  height:48px;
  padding:0 17px;
  border-radius:24px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  box-shadow:0 10px 26px rgba(8,42,89,.22);
  transition:transform var(--t), box-shadow var(--t);
}
.quick-contact__btn i{ font-size:20px; }
.quick-contact__btn--whatsapp{ background:#25D366; }
.quick-contact__btn--phone{ background:var(--ink); }
.quick-contact__btn:hover{
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(8,42,89,.28);
}

/* ---------- 24b. Page banner (inner pages only) ---------- */
/* Stands in for the hero on about/services/fleet/blog/contact. Reuses the
   hero's navy + glow + grid treatment so an inner page reads as the same site,
   at roughly a third of the height. */
.page-banner{
  position:relative;
  background:var(--ink);
  padding:78px 0 84px;
  overflow:hidden;
}
.page-banner__bg{ position:absolute; inset:0; pointer-events:none; }
.page-banner__glow{
  position:absolute; border-radius:50%; filter:blur(90px);
  width:420px; height:420px;
}
.page-banner__glow--1{ background:rgba(254,109,1,.20); top:-190px; right:-90px; }
.page-banner__glow--2{ background:rgba(26,99,199,.34); bottom:-220px; left:-120px; }
.page-banner__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
}
.page-banner .container{ position:relative; z-index:2; }

.page-banner__title{
  font-size:clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
  color:#fff;
  text-transform:uppercase;
  margin:0 0 18px;
}
.page-banner__title em{ font-style:normal; color:var(--accent-2); }
.page-banner__text{
  color:rgba(255,255,255,.72);
  font-size:17px;
  max-width:620px;
  margin:0 0 26px;
}

/* Breadcrumb */
.crumb{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.55rem;
  font-family:var(--font-display);
  font-size:14px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.crumb a{ color:rgba(255,255,255,.68); }
.crumb a:hover{ color:var(--accent-2); }
.crumb i{ font-size:11px; color:rgba(255,255,255,.35); }
.crumb span[aria-current]{ color:var(--accent); }

/* ---------- 25. Scroll reveal ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.25,.8,.35,1);
}
[data-reveal].is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ---------- 26. Responsive ---------- */

/* Bootstrap's .g-5 gives a row -24px side margins, but .container only has
   12px padding — that leaks 12px of horizontal overflow once the container
   goes full-width. Columns are stacked at this size anyway, so drop the
   horizontal gutter to match the container padding. */
@media (max-width:575.98px){
  .row.g-5,
  .row.gx-5{ --bs-gutter-x:1.5rem; }
}

/* Between the xl nav breakpoint and ~1500px the brand lockup, seven nav items
   and both header actions no longer fit on one line. The helpline block goes
   first — the same number is already in the topbar. */
/* Header fitting. The container caps at 1320px, and with seven menu items the
   row needs: brand 262 + menu 729 + actions 210 = ~1201. That leaves no room
   for the helpline block (a further 226px), at any viewport - the container
   stops growing long before the content does. The number is already in the
   topbar directly above, so it comes out of the header rather than clipping the
   Get A Quote button off the right edge. */
.header__call{ display:none; }

/* Below 1400 the container steps down to 1140, which the brand wordmark no
   longer fits alongside seven items. The logo badge carries the identity on its
   own from here down to the hamburger at 1200. */
@media (max-width:1399.98px){
  .brand__name{ display:none; }
}

@media (max-width:1199px){
  .site-header .navbar{ min-height:78px; }
  .booking__form{ grid-template-columns:repeat(2,1fr); }
  .booking__btn{ grid-column:1 / -1; justify-content:center; }
  /* Cards stack or re-wrap below lg, so the connectors no longer line up. */
  .process__grid .step__arrow{ display:none !important; }
  .green__inner,
  .contact__panel{ padding:52px 40px; }
}

@media (max-width:991px){
  .section{ padding:80px 0; }
  .overview{ padding-top:120px; }
  .overview__top{ margin-bottom:58px; }
  /* Metrics go full-width below lg, so shrink the corner cut to suit a
     short, wide band rather than a tall card. */
  :root{ --notch:40px; }
  .metric{ padding:32px 30px; min-height:0; }
  /* The descending stagger only reads as intentional in a 3-across row. */
  .features__grid > div:nth-child(2) .fcard,
  .features__grid > div:nth-child(3) .fcard{ margin-top:0; }
  .features__title{ text-align:left; }
  .features__head{ margin-bottom:42px; }
  /* Corner cuts shrink with the plates so they stay in proportion. */
  .afig--main{ clip-path:polygon(38px 0, 100% 0, 100% 100%, 0 100%, 0 38px); }
  .afig--main svg, .afig--main img{ clip-path:polygon(32px 0, 100% 0, 100% 100%, 0 100%, 0 32px); }
  .afig--sub{ clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); }
  .afig--sub svg, .afig--sub img{ clip-path:polygon(0 0, calc(100% - 29px) 0, 100% 29px, 100% 100%, 0 100%); }
  .about__visual{ margin-top:20px; }
  .section__head{ margin-bottom:42px; }
  .footer{ padding-top:70px; }
}

@media (max-width:767px){
  .section{ padding:64px 0; }
  .booking{ transform:translateY(40px); padding:22px 20px; margin-top:56px; }
  .booking__form{ grid-template-columns:1fr; gap:14px; }
  .overview{ padding-top:100px; }
  /* Shrink the corner cuts so they stay proportional on small cards */
  :root{ --notch:38px; }
  .metric i{ font-size:42px; }
  .shot svg, .shot img{ aspect-ratio:16 / 11; }
  .hero__actions .btn{ flex:1 1 100%; justify-content:center; }
  /* Arrows would sit on top of the copy at this width; dots are enough. */
  .hero__nav{ display:none; }
  .hero__shot{ height:clamp(510px, 84vh, 660px); }
  .hero__points{ gap:10px 20px; padding-top:22px; }
  .green__inner,
  .contact__panel{ padding:40px 24px; }
  .about__ticks{ grid-template-columns:1fr; gap:12px; }
  .checklist{ grid-template-columns:1fr; gap:12px; }
  .about__badge{ padding:14px 16px; border-radius:10px; }
  .afig{ padding:5px; border-radius:18px; }
  .afig--main{ clip-path:polygon(28px 0, 100% 0, 100% 100%, 0 100%, 0 28px); }
  .afig--main svg, .afig--main img{ clip-path:polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); border-radius:13px; }
  .afig--sub{ clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
  .afig--sub svg, .afig--sub img{ clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); border-radius:13px; }
  .step__card{ width:88%; margin-top:-46px; padding:24px 22px 22px; }
  .footer__bottom{ justify-content:center; text-align:center; }
  .footer__bottom ul{ gap:18px; }
  .clients__row{ gap:18px 30px; }
  .clients__row span{ font-size:21px; }
}

@media (max-width:575px){
  .brand__logo{ height:50px; }
  .brand__name strong{ font-size:17px; }
  .brand__name small{ font-size:8.5px; letter-spacing:.19em; }
  .brand--footer{ gap:10px; }
  .brand--footer .brand__logo--footer{ height:64px; }
  .brand--footer .brand__name strong{ font-size:19px; }
  .brand--footer .brand__name small{ font-size:8.5px; }
  .review{ padding:24px 20px; }
  .contact__list b{ font-size:17px; }
  .to-top{ right:16px; bottom:16px; }
  .quick-contact{ left:14px; bottom:14px; gap:8px; }
  .quick-contact__btn{
    min-width:46px;
    width:46px;
    height:46px;
    padding:0;
    justify-content:center;
  }
  .quick-contact__btn span{ display:none; }
}