/* =============================================
   FREIGHTROUTE SECTION (REDESIGN)
   ============================================= */

.freightroute-section {
  padding: 92px 0;
  background: var(--off-white);   /* grey (the About section matched it until 2026-10-09, when About went white) */
  position: relative;
  overflow: hidden;
}
.freightroute-section .container {
  position: relative;
  z-index: 1;
}
/* Two-column intro: family pitch + the Freightroute fleet photo, full container width. */
.freightroute-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}
.freightroute-content { color: var(--g800); }
.freightroute-visual { position: relative; order: -1; }   /* photo on the left, copy on the right */
.freightroute-visual img {
  display: block;
  width: 100%;
  height: 100%;                   /* fill the (taller) copy column */
  object-fit: cover;
  object-position: center;   /* symmetric fleet shot - keep the centre trucks framed when cropped */
  border-radius: 16px;
  box-shadow: 0 34px 70px -34px rgba(11,22,40,.55);
}
/* Compact "scale" boxes, folded into the copy column under the paragraphs */
.fr-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 32px 0;
}
.fr-stat {
  padding: 16px 14px;
  background: var(--white);
  border: 1px solid var(--g100);
  border-radius: 10px;
  box-shadow: 0 8px 22px -18px rgba(11,22,40,.4);
}
.fr-stat-num {
  display: block;
  font-family: var(--heading);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.fr-stat-label {
  display: block;
  margin-top: 6px;
  font-family: var(--heading);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.3;
  color: var(--red);
}
.freightroute-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--navy);
  color: var(--white);
  border-radius: 4px;
  font-family: var(--heading);
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 28px;
}
.freightroute-content h2 {
  font-family: var(--heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 24px;
  color: var(--navy);
  letter-spacing: -.02em;
}
.freightroute-content p {
  font-size: 1rem;
  color: var(--g700);
  line-height: 1.8;
  margin-bottom: 16px;
}
.freightroute-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 40px;
}
.freightroute-highlight {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--g100);
  box-shadow: 0 10px 30px -22px rgba(11,22,40,.45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.freightroute-highlight:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -22px rgba(11,22,40,.5);
}
/* Icon sits in a soft red-tinted square - same line-icon language as the service & benefit icons. */
.freightroute-highlight svg {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 9px;
  border-radius: 9px;
  background: rgba(237, 28, 36,.10);
  color: var(--red);
}
.freightroute-highlight svg.highlight-icon-lg {
  width: 40px;
  height: 40px;
}
.freightroute-highlight span {
  font-family: var(--heading);
  font-size: .9375rem;
  color: var(--g600);
  font-weight: 500;
  letter-spacing: .01em;
}
.freightroute-highlight strong {
  color: var(--navy);
  font-weight: 700;
}
.freightroute-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  color: var(--red);
  font-family: var(--heading);
  font-weight: 600;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  position: relative;
  transition: gap .3s;
}
.freightroute-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width .3s cubic-bezier(.16, 1, .3, 1);
}
/* Both set display:inline-flex, which beats the user-agent [hidden]{display:none} - needed so a
   badge / link text cleared in FR8 Creator really disappears instead of leaving a bare icon. */
.freightroute-badge[hidden], .freightroute-link[hidden] { display: none; }
.freightroute-link:hover { gap: 16px; }
.freightroute-link:hover::after { width: 100%; }
.freightroute-link svg { width: 18px; height: 18px; }

/* --- UK Map --- */
.freightroute-map {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.map-inner {
  position: relative;
  width: 80%;
}
.map-pin {
  position: absolute;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -100%);
  z-index: 2;
  cursor: pointer;
}
.map-pin-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.9);
  background: var(--navy);
  color: var(--white);
  font-family: var(--heading);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 8px 16px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 10;
}
.map-pin-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--navy);
}
.map-pin:hover,
.map-pin:focus {
  z-index: 10;
}
.map-pin:hover .map-pin-label,
.map-pin:focus .map-pin-label {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px) scale(1);
}
.map-svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--navy);
  stroke-width: 0.4;
  opacity: 1;
}

/* =============================================
   SERVICES SECTION (REDESIGN)
   ============================================= */

.services {
  padding: 70px 0;
  background: var(--white);
  position: relative;
}
.services-header { text-align: center; margin-bottom: 40px; }
.services-header .section-title { color: var(--navy); margin-bottom: 12px; }
.services-header .section-label { justify-content: center; color: var(--g500); margin-bottom: 0; }
.services-header .section-label::before { display: none; }
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.service-card {
  background: var(--off-white);
  padding: 36px 40px;
  border-radius: 8px;
  border: 1px solid var(--g100);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 24px;
}
.service-icon {
  width: 60px; height: 60px;
  background: rgba(237, 28, 36,.10);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0;
  grid-row: 1;
  grid-column: 1;
  align-self: center;
}
.service-icon svg { width: 30px; height: 30px; color: var(--red); }
.service-card h3 {
  font-family: var(--heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  letter-spacing: -.01em;
}
.service-card p { color: var(--g500); font-size: .9375rem; line-height: 1.8; grid-row: 2; grid-column: 1 / -1; margin-top: 16px; }


/* =============================================
   ABOUT SECTION (REDESIGN)
   ============================================= */

.about { padding: 70px 0; background: var(--white); }   /* white since 2026-10-09 (owner) - was off-white */
.about .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: stretch;
}
.about-image { position: relative; z-index: 0; display: flex; flex-direction: column; }
.about-image-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.about-image-main {
  background: var(--g200);
  border-radius: 8px;
  position: relative; overflow: hidden;
  flex: 1;
  min-height: 0;
}
.about-image-main img {
  display: block;
  width: 100%;
  /* Image is oversized 20% and offset upward 10% so the ±8% scroll-parallax in Animations.js
     never reveals the grey container background at the top or bottom edges. */
  height: 120%;
  object-fit: cover;
  object-position: right center;
  position: absolute;
  top: -10%;
  left: 0;
}
.about-content { padding-left: 20px; margin-top: -4px; }
.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 44px;
}
.about-feature {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 16px;
  border-radius: 6px;
  transition: background .2s;
}
.about-feature:hover { background: var(--off-white); }   /* a white hover vanished once the section went white */
.about-feature-icon {
  width: 28px; height: 28px;
  background: var(--red-glow);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.about-feature-icon svg { width: 16px; height: 16px; color: var(--red); }
.about-feature span {
  font-family: var(--heading);
  font-size: .875rem; font-weight: 500; color: var(--g700);
}

/* =============================================
   MAINTENANCE / COMING-SOON OVERLAY
   ============================================= */
.maintenance-overlay {
  position: fixed; inset: 0; z-index: 10002;   /* above the cookie banner (9999) and every pop-up (10001): the takeover must cover the whole page */
  background: linear-gradient(180deg, var(--navy), var(--navy-mid));
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px;
}
.maintenance-overlay.hidden { display: none; }
.maintenance-inner { max-width: 560px; }
.maintenance-logo { height: 52px; width: auto; margin: 0 auto 30px; }
/* The takeover is a dialog, so its heading is an <h2> and the page keeps exactly one <h1>
   (the hero). This is the only copy of the rule - index.html no longer repeats it. */
.maintenance-overlay h2 {
  font-family: var(--heading); font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 800;
  color: var(--white); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 16px;
}
.maintenance-overlay p { color: rgba(255, 255, 255, .7); font-size: 1.05rem; line-height: 1.7; margin-bottom: 30px; }


/* ============== NEW CMS SECTIONS ============== */
/* testimonials */
/* =============================================
   TESTIMONIALS SECTION
   ============================================= */
.testimonials-section.hidden { display: none; }

.testimonials-section {
  padding: 90px 0;
  background: var(--off-white);
  position: relative;
  overflow: hidden;
}

.testimonials-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.testimonials-header .section-label {
  justify-content: center;
  color: var(--red);
  margin-bottom: 16px;
}
.testimonials-header .section-title {
  color: var(--navy);
  margin-bottom: 16px;
}
.testimonials-header .section-subtitle {
  margin: 0 auto;
  color: var(--g500);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  padding: 36px 32px 32px;
  background: var(--white);
  border: 1px solid var(--g100);
  border-radius: 14px;
  box-shadow: 0 18px 44px -30px rgba(11, 22, 40, .5);
  position: relative;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease;
}
/* display:flex above beats the user-agent [hidden]{display:none}, so a card retired from the CMS
   (quote cleared) needs this companion rule - same pattern as .news-card-link[hidden] below. */
.testimonial-card[hidden] { display: none; }
.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--g200);
  box-shadow: 0 28px 60px -28px rgba(11, 22, 40, .55);
}

.testimonial-quote-mark {
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  color: var(--red);
  opacity: .9;
}
.testimonial-quote-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.testimonial-quote {
  font-family: var(--heading);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--g700);
  font-style: normal;
  margin: 0 0 28px;
}
.testimonial-quote strong { color: var(--navy); font-weight: 700; }
.testimonial-quote a { color: var(--red); text-decoration: underline; }

.testimonial-author {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--g100);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.testimonial-name {
  font-family: var(--heading);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--navy);
}
.testimonial-company {
  font-family: var(--heading);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--red);
}

@media (max-width: 860px) {
  .testimonials-section { padding: 60px 0; }
  .testimonials-header { margin-bottom: 40px; }
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .testimonial-card { padding: 30px 26px 28px; }
}

/* accreditations */
/* =============================================
   ACCREDITATIONS SECTION
   ============================================= */
.accreditations-section {
  padding: 90px 0;
  background: var(--white);
  position: relative;
}
.accreditations-section.hidden { display: none; }

.accreditations-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
/* Centred label: drop the leading red dash and centre the flex row (matches the services header). */
.accreditations-header .section-label {
  justify-content: center;
  margin-bottom: 14px;
}
.accreditations-header .section-label::before { display: none; }
.accreditations-title { margin-bottom: 14px; }
.accreditations-subtitle { margin: 0 auto; }

/* Centred row of five logo tiles - wraps gracefully on narrower screens. */
.accreditations-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
}
/* A tile with a blank label is hidden (index.html applyCmsData) - the display:flex below must not undo that. */
.accreditation-tile[hidden] { display: none; }
.accreditation-tile {
  flex: 1 1 160px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 22px;
  background: var(--off-white);
  border: 1px solid var(--g100);
  border-radius: 12px;
  box-shadow: 0 10px 30px -22px rgba(11, 22, 40, .45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.accreditation-tile:hover {
  transform: translateY(-3px);
  border-color: var(--g200);
  box-shadow: 0 18px 40px -22px rgba(11, 22, 40, .5);
}
.accreditation-logo-wrap {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accreditation-logo {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Logos are mixed brands; a soft grey-out at rest keeps the row cohesive, full colour on hover. */
  filter: grayscale(100%);
  opacity: .8;
  transition: filter .3s ease, opacity .3s ease;
}
.accreditation-tile:hover .accreditation-logo {
  filter: grayscale(0);
  opacity: 1;
}
.accreditation-label {
  font-family: var(--heading);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.3;
  text-align: center;
  color: var(--g700);
}

@media (max-width: 860px) {
  .accreditations-section { padding: 60px 0; }
  .accreditations-header { margin-bottom: 36px; }
  .accreditations-row { gap: 14px; }
  .accreditation-tile {
    flex-basis: 140px;
    padding: 22px 16px;
    gap: 12px;
  }
  .accreditation-logo-wrap { height: 52px; }
  .accreditation-logo { max-height: 52px; }
}

/* faq */
.faq-section.hidden { display:none; }
.faq-section {
  padding: 90px 0;
  background: var(--off-white);
}
.faq-inner {
  max-width: 820px;
  margin: 0 auto;
}
.faq-header {
  text-align: center;
  margin-bottom: 48px;
}
.faq-eyebrow {
  display: inline-block;
  font-family: var(--heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--red-glow);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
/* Cleared in FR8 Creator = gone, not an empty red pill (matches .section-label:empty). */
.faq-eyebrow:empty { display: none; }
.faq-title {
  font-family: var(--heading);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 14px;
}
.faq-subtitle {
  font-size: 17px;
  line-height: 1.7;
  color: var(--g600);
  margin: 0 auto;
  max-width: 620px;
}
.faq-subtitle:empty { display:none; }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item:hover {
  border-color: var(--g500);
}
.faq-item[open] {
  border-color: var(--red);
  box-shadow: 0 10px 30px -16px var(--red-glow);
}
.faq-question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  font-family: var(--heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  user-select: none;
}
.faq-question::-webkit-details-marker { display:none; }
.faq-question:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}
.faq-question-text { flex: 1; }
.faq-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--g100);
  color: var(--g700);
  transition: transform .25s ease, background .2s ease, color .2s ease;
}
.faq-icon svg { width: 16px; height: 16px; }
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  background: var(--red);
  color: var(--white);
}
.faq-answer {
  padding: 0 24px 24px;
  color: var(--g600);
  font-size: 16px;
  line-height: 1.75;
}
.faq-answer > *:first-child { margin-top: 0; }
.faq-answer > *:last-child { margin-bottom: 0; }
.faq-answer a {
  color: var(--red);
  text-decoration: underline;
}
@media (max-width: 860px) {
  .faq-section { padding: 60px 0; }
  .faq-header { margin-bottom: 36px; }
  .faq-question { padding: 18px 18px; font-size: 16px; }
  .faq-answer { padding: 0 18px 20px; }
}

/* news */
/* =============================================
   LATEST NEWS SECTION
   ============================================= */
.news-section {
  padding: 90px 0;
  background: var(--off-white);
  position: relative;
}
.news-section.hidden { display: none; }
.news-header { text-align: center; margin-bottom: 48px; }
.news-header .section-label { justify-content: center; }
.news-header .section-label::before { display: none; }
.news-header .section-title { margin-bottom: 16px; }
.news-header .section-subtitle { max-width: 620px; margin: 0 auto; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--g100);
  border-radius: 12px;
  padding: 32px 30px;
  box-shadow: 0 14px 36px -26px rgba(11,22,40,.45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Companion to the CMS "clear the headline to retire this card" rule: .news-card sets display:flex,
   which beats the user-agent [hidden]{display:none}. */
.news-card[hidden] { display: none; }
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px -26px rgba(11,22,40,.5);
  border-color: var(--g200);
}
.news-card-date {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--heading);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--red);
  background: var(--red-glow);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
}
/* A cleared date must not leave a bare pink pill behind. */
.news-card-date:empty { display: none; }
.news-card-headline {
  font-family: var(--heading);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  letter-spacing: -.01em;
  margin-bottom: 12px;
}
.news-card-excerpt {
  font-size: .9375rem;
  color: var(--g600);
  line-height: 1.75;
}
.news-card-excerpt p { margin-bottom: 10px; }
.news-card-excerpt p:last-child { margin-bottom: 0; }
.news-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--red);
  font-family: var(--heading);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: gap .3s;
}
.news-card-link:hover { gap: 14px; }
.news-card-link .arrow { transition: transform .3s; }
.news-card-link:hover .arrow { transform: translateX(3px); }
.news-card-link[hidden] { display: none; }

@media (max-width: 860px) {
  .news-section { padding: 60px 0; }
  .news-grid { grid-template-columns: 1fr; gap: 18px; }
  .news-header { margin-bottom: 36px; }
}

/* careers */
/* =============================================
   CAREERS - navy call-to-action band
   ============================================= */
.careers-section { padding: 90px 0; background: var(--off-white); }
.careers-section.hidden { display: none; }

.careers-band {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: 18px;
  padding: 64px 56px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(11, 22, 40, .28);
}
/* Soft red glow accent in the corner so the band does not read as a flat block. */
.careers-band::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--red-glow) 0%, rgba(237, 28, 36, 0) 70%);
  pointer-events: none;
}
.careers-band > * { position: relative; z-index: 1; }

.careers-title {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--white);
  margin: 0 auto;
  max-width: 18ch;
}

.careers-body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--g200);
  margin: 18px auto 0;
  max-width: 60ch;
}
.careers-body strong { color: var(--white); font-weight: 700; }
.careers-body a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.careers-body a:hover { color: var(--g200); }

.careers-cta {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.careers-cta .btn-chevron { transition: transform .25s; }
.careers-cta:hover .btn-chevron { transform: translateX(4px); }

@media (max-width: 860px) {
  .careers-section { padding: 60px 0; }
  .careers-band { padding: 44px 28px; border-radius: 14px; }
  .careers-title { max-width: none; }
}

/* promo */
.promo-section.hidden { display: none; }
.promo-section {
  padding: 90px 0;
  background: var(--off-white);
}
.promo-section .promo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--red);
  color: var(--white);
  text-align: center;
  padding: 16px 32px;
  border-radius: 8px;
  font-family: 'Oxanium', sans-serif;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  box-shadow: 0 4px 24px var(--red-glow);
}
.promo-section .promo-bar a {
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.promo-section .promo-bar a:hover { opacity: .85; }
@media (max-width: 860px) {
  .promo-section { padding: 60px 0; }
  .promo-section .promo-bar { padding: 14px 20px; }
}


/* =============================================
   ENQUIRY FORM  (#quote)
   Added 2026-08-05 - the site previously had no way to capture a lead.
   ============================================= */

.enquiry { padding: 70px 0; background: var(--white); }   /* white since 2026-10-09 (owner) - was off-white */
.enquiry-inner {
  background: var(--white);
  border: 1px solid var(--g200);   /* g100 was enough on the old grey section; on white the card needs a firmer edge */
  border-radius: 16px;
  padding: 48px;
  box-shadow: 0 30px 70px -45px rgba(11, 22, 40, .5);
}
/* The heading sits ABOVE the card since 2026-10-09 (it was inside it, with a subtitle line that was removed) - spaced like
   .sustain-header so it reads like the other sections' headings, but WITHOUT its 760px width limit: at full size the title
   is ~780px wide, and the owner wants "Tell Us What You Need Moving" on ONE line (760px pushed "Moving" down). It now fits
   on one line at every width down to ~600px; on phones it has to wrap, and text-wrap: balance splits it evenly instead of
   leaving one word on its own. */
.enquiry-head { text-align: center; margin: 0 0 40px; }
.enquiry-head .section-label { justify-content: center; margin-bottom: 14px; }
.enquiry-head .section-label::before { display: none; }
.enquiry-head .section-title { color: var(--navy); margin-bottom: 14px; text-wrap: balance; }

.enquiry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.enquiry-form .field { display: flex; flex-direction: column; gap: 8px; }
.enquiry-form .field-wide { grid-column: 1 / -1; }
/* display:flex above beats the user-agent [hidden]{display:none}, so a question switched off in FR8
   Creator (and the two spare questions, which ship with no label) needs this companion rule. */
.enquiry-form .field[hidden] { display: none; }
.enquiry-form label {
  font-family: var(--heading);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--g700);
}
.enquiry-form .req { color: var(--red); margin-left: 2px; }
.enquiry-form input,
.enquiry-form .cs-trigger,
.enquiry-form textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--body);
  font-size: .9375rem;
  color: var(--navy);
  background: var(--off-white);
  border: 1px solid var(--g200);
  border-radius: 8px;
  line-height: 1.7;           /* same line box as .cs-value, so the dropdown matches the inputs */
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.enquiry-form textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.enquiry-form input:hover,
.enquiry-form .cs-trigger:hover,
.enquiry-form textarea:hover { border-color: var(--g300); }   /* was --g400, which does not exist: it showed navy, like the focus edge (audit 2026-10-09) */
/* The box being typed in (owner, 2026-10-09: no red line around it): a firm navy edge - the 1px border plus a 1px inset
   line, so it reads as 2px without moving anything - and no halo. That edge is the focus indicator for mouse and keyboard
   alike, so there is no extra outline. */
.enquiry-form input:focus,
.enquiry-form .cs-trigger:focus,
.enquiry-form textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.enquiry-form input:focus-visible,
.enquiry-form .cs-trigger:focus-visible,
.enquiry-form textarea:focus-visible { outline: none; }

/* A required field left empty (or a bad email address) is outlined red until the visitor types in it - the only red. */
.enquiry-form .field.invalid input,
.enquiry-form .field.invalid textarea { border-color: var(--red); background: rgba(237, 28, 36, .04); }
.enquiry-form .field.invalid input:focus,
.enquiry-form .field.invalid textarea:focus { box-shadow: inset 0 0 0 1px var(--red); }

/* #eq-postcode still carries style="text-transform:uppercase" so what the visitor TYPES is
   upper case. It no longer needs the ::placeholder counter-rules that used to keep the
   "e.g. TQ12 6SQ" hint in lower case: the owner had that example removed on 2026-10-08. */

/* --- Custom "What do you need?" dropdown (replaces the native <select>, 2026-10-08) ---
   The trigger is in the shared field rule above, so border, radius, background, focus ring and
   padding are the text inputs' own. The panel is dressed like the navbar dropdowns: opaque
   white, navy rows, off-white hover with a red edge, and a red tick on the chosen row. */
.custom-select { position: relative; }
.enquiry-form .cs-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* An EMPTY control (nothing chosen yet) must be exactly as tall as a filled one, so the line
   box is pinned here rather than left to depend on the text being there. */
.cs-value {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.7;
  min-height: 1.7em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* chevron-right turned to point down, and up again while the list is open */
.cs-caret {
  flex: 0 0 auto;
  color: var(--g500);
  transform: rotate(90deg);
  transition: transform .2s ease, color .2s ease;
}
.cs-trigger[aria-expanded="true"] .cs-caret { transform: rotate(-90deg); color: var(--red); }
.cs-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 340px;        /* all six rows fit; the cap is only a safety net */
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--g100);
  border-radius: 8px;
  box-shadow: 0 18px 40px -22px rgba(11, 22, 40, .45);
}
.cs-list[hidden] { display: none; }
/* Not enough room below the field: the script flips the panel above it. */
.custom-select.cs-up .cs-list { top: auto; bottom: calc(100% + 6px); }
.cs-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--navy);
  border-radius: 6px;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.cs-option-text { flex: 1 1 auto; }
/* A row with no wording is not offered (FR8 Creator's "What do you need?" list, and the two spare rows):
   display:flex above beats the user-agent [hidden]{display:none}, same as .cs-list[hidden]. */
.cs-option[hidden] { display: none; }
/* .cs-active is the keyboard row (aria-activedescendant); hover is the mouse equivalent. */
.cs-option:hover,
.cs-option.cs-active { background: var(--off-white); border-left-color: var(--red); }
.cs-option[aria-selected="true"] { color: var(--red); font-weight: 700; }
.cs-mark { flex: 0 0 auto; color: var(--red); opacity: 0; }
.cs-option[aria-selected="true"] .cs-mark { opacity: 1; }
@keyframes csPanelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.cs-list:not([hidden]) { animation: csPanelIn .14s ease both; }
@media (prefers-reduced-motion: reduce) {
  .cs-list:not([hidden]) { animation: none; }
  .cs-caret, .cs-option { transition: none; }
}

/* --- "Sent" (2026-10-08; made "super satisfying" in green #009E00, 2026-10-09; the tick moved INTO the button, owner
   2026-10-09 later: "make the cool tick and animation happen in the box, not next to it") ---
   Everything happens inside the Send button: it turns #009E00 and keeps its exact size (the script pins its width and
   height, so nothing in it or around it moves); after the word "Sent" the tick plays - a white ring draws, the disc
   fills white, the #009E00 tick draws on it, then the tick pops (the burst of eight dots was removed at the owner's
   request, 2026-10-09). NOTHING MOVES "Sent" (owner, 2026-10-09: "the tick animation seems to nudge the Sent"): the tick
   takes no height of its own - a 22px disc drawn in a 0-height box - because it was taller than the button's ~18px text
   line (a <button> takes its line height from the browser) and made the button ~4px taller when it appeared; and the
   whole button no longer springs (scaling it moved "Sent", and with the mouse still on the button it also cancelled the
   2px hover lift - a drop and a jump). The only
   green is #009E00; no glow. Started by the enquiry script (#eq-submit.is-sent and .eq-sent.is-running) ONLY after the
   Supabase insert really succeeded. */
#eq-submit { max-width: 100%; }
#eq-submit.is-sending,
#eq-submit.is-sent { justify-content: center; }
#eq-submit.is-sent,
#eq-submit.is-sent:hover { background: #009E00; }

.eq-sent {
  position: relative;
  top: -.134em;                 /* level with the capitals, like .btn-chevron */
  display: block;
  flex: 0 0 22px;               /* its width is kept for the disc ... */
  height: 0;                    /* ... but no height: the button can never grow when it appears */
}
.eq-sent[hidden] { display: none; }
.eq-sent-mark { position: absolute; left: 0; top: -11px; display: block; overflow: visible; transform-origin: 50% 50%; }   /* the 22px disc, centred on the line */
.eq-sent-fill { fill: var(--white); opacity: 0; }
.eq-sent-ring {
  fill: none;
  stroke: var(--white);
  stroke-width: 4;
  stroke-dasharray: 151;        /* 2 x pi x r, r = 24 */
  stroke-dashoffset: 151;
  transform: rotate(-90deg);    /* start the sweep at 12 o'clock */
  transform-origin: 26px 26px;
}
.eq-sent-tick {
  fill: none;
  stroke: #009E00;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
}
.eq-sent.is-running .eq-sent-ring { animation: eqSentRing .42s cubic-bezier(.16, 1, .3, 1) .1s forwards; }
.eq-sent.is-running .eq-sent-fill { animation: eqSentFill .26s ease .42s forwards; }
.eq-sent.is-running .eq-sent-tick { animation: eqSentTick .3s cubic-bezier(.16, 1, .3, 1) .54s forwards; }
.eq-sent.is-running .eq-sent-mark { animation: eqSentPop .5s cubic-bezier(.34, 1.56, .64, 1) .72s both; }
@keyframes eqSentRing { to { stroke-dashoffset: 0; } }
@keyframes eqSentFill { to { opacity: 1; } }
@keyframes eqSentTick { to { stroke-dashoffset: 0; } }
@keyframes eqSentPop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* Reduced motion: the finished state straight away - the green button with its white disc and tick; no drawing and
   no pop. (Variables.css also clamps every animation to .01ms, but it does not clamp the DELAYS - so the
   end state is set here.) */
@media (prefers-reduced-motion: reduce) {
  .eq-sent.is-running .eq-sent-ring,
  .eq-sent.is-running .eq-sent-fill,
  .eq-sent.is-running .eq-sent-tick,
  .eq-sent.is-running .eq-sent-mark { animation: none; }
  .eq-sent.is-running .eq-sent-ring,
  .eq-sent.is-running .eq-sent-tick { stroke-dashoffset: 0; }
  .eq-sent.is-running .eq-sent-fill { opacity: 1; }
}
/* While the button is working or done, its chevron stands aside - "Sending…" and "Sent" are
   states, not a way forward. */
#eq-submit.is-sending .btn-chevron,
#eq-submit.is-sent .btn-chevron { display: none; }

/* Honeypot - off-screen rather than display:none, which some bots detect and skip. */
.enquiry-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* The one validation message (owner, 2026-10-09): beside Send instead of red text under every field - the fields that
   need attention are outlined in red (.field.invalid above). The SAME SIZE AND SHAPE as the Send button (owner, later:
   "it is too big"): the enquiry script measures the button and hands its width and height over as --eq-btn-w and
   --eq-btn-h (a <button> takes its line height from the browser, so the old "same padding + same line height" sum left
   the pill about 6px taller - and much wider), so the message sits on two lines in slightly smaller type. Its 4px
   corners are the button's. Navy text on a faint brand-red tint, a brand-red edge and "i": readable, no glow. Full
   width under the full-width button on phones. */
.eq-alert {
  display: inline-flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: var(--eq-btn-w, auto);
  min-height: var(--eq-btn-h, auto);
  padding: 4px 12px;
  border: 1px solid rgba(237, 28, 36, .4);
  border-radius: 4px;
  background: rgba(237, 28, 36, .06);
  color: var(--navy);
  font-family: var(--body);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25;
  animation: eqAlertIn .25s ease-out;
}
.eq-alert[hidden] { display: none; }
.eq-alert svg { flex: 0 0 auto; color: var(--red); }
@keyframes eqAlertIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .eq-alert { animation: none; } }
.enquiry-note { font-size: .875rem; color: var(--g600); margin: 0; }
.enquiry-note a { color: var(--red); font-weight: 600; }
#eq-submit[disabled] { opacity: .6; cursor: not-allowed; }

.enquiry-status { margin: 20px 0 0; font-size: .9375rem; font-weight: 600; line-height: 1.7; }
.enquiry-status:empty { display: none; }
/* Owner, 2026-10-09 (later): no "Thanks - your enquiry has been sent" line on screen - the green button and its tick say
   it. The words stay for screen readers only (role=status still announces them). The other messages - the wait after
   too many sends, the "send it by email instead" link - still show, in red. */
.enquiry-status.ok {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.enquiry-status.err { color: var(--red); }

@media (max-width: 768px) {
  .enquiry { padding: 48px 0; }
  .enquiry-inner { padding: 28px 20px; border-radius: 12px; }
  .enquiry-grid { grid-template-columns: 1fr; }
  .enquiry-actions { gap: 16px; justify-content: center; }
  .enquiry-actions .btn { width: 100%; justify-content: center; }
  .eq-alert { width: 100%; justify-content: center; text-align: center; }
}

/* =============================================
   TECHNOLOGY  (#technology)  - added 2026-09-24
   Navy band between the white Services and the About section (white since 2026-10-09); the card shape
   is the .service-card grid restated for dark ground. 4 boxes since 2026-10-08 (the nine cards merged into four):
   one row of four on desktop, 2 x 2 from 1100px down, one column on phones.
   ============================================= */
.technology { padding: 90px 0; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); position: relative; overflow: hidden; }
.technology::before { content:''; position:absolute; top:-160px; right:-160px; width:420px; height:420px;
  background: radial-gradient(circle, var(--red-glow) 0%, rgba(237,28,36,0) 70%); pointer-events:none; }
.technology > .container { position: relative; z-index: 1; }
.tech-header { text-align: center; max-width: 760px; margin: 0 auto 44px; }
/* The only .section-label on a dark ground. The inherited var(--red) is ~4.1:1 on --navy and
   ~3.8:1 on --navy-mid at 11.2px/700 - under AA. White is 18.8:1 on both gradient stops. */
.tech-header .section-label { justify-content: center; margin-bottom: 14px; color: var(--white); }
.tech-header .section-label::before { display: none; }
.tech-title { color: var(--white); margin-bottom: 14px; }
.tech-intro { color: var(--g300); margin: 0 auto; }
.tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }   /* 4 across: the four boxes (2026-10-08) */
/* The four boxes are the same solid navy as the Fr8Tracker frames below, with the same edge (owner, 2026-10-12:
   "make the colour of the technology boxes the same as the colour of tracker stage 1 2 3 ... a nicer colour"). */
.tech-card { background: var(--navy-light); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 26px 24px; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.tech-card[hidden] { display: none; }
.tech-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); background: #22324C; }   /* the same navy, a shade lighter */
.tech-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(237,28,36,.16);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.tech-icon svg { color: var(--red); }
.tech-card h3 { font-family: var(--heading); font-size: 1rem; font-weight: 700; color: var(--white); letter-spacing: -.01em; margin-bottom: 10px; }
.tech-card p { color: var(--g300); font-size: .9rem; line-height: 1.7; }
.tech-card p strong { color: var(--white); }
/* Every box opens a pop-up since 2026-10-08 (box 4, Report & Invoice, the invoice pop-up): the same round chevron
   opener as the Sustainability cards, and the whole box is its click area (the button's ::after covers the box).
   The box is a column whose text takes the spare height, so the four chevrons line up along the bottom of the row.
   (.tech-card[hidden] above still wins: it is the more specific rule.) */
.tech-card--popup { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; }
.tech-card--popup p { flex-grow: 1; }
.tech-detail[hidden] { display: none; }
.tech-more { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-top: 18px;
  padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(237,28,36,.16); color: var(--red);
  transition: background .25s ease, color .25s ease; }
.tech-more::after { content: ''; position: absolute; inset: 0; border-radius: 12px; }
.tech-more:focus { outline: none; }
.tech-more:focus-visible::after { outline: 2px solid var(--red); outline-offset: 3px; }
.tech-card--popup:hover .tech-more, .tech-more:focus-visible { background: var(--red); color: var(--white); }   /* no glow (owner, 2026-10-08) */
.tech-card--popup:hover .sustain-more-chevron, .tech-more:focus-visible .sustain-more-chevron { animation: sustainNudge .9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tech-card--popup:hover .sustain-more-chevron, .tech-more:focus-visible .sustain-more-chevron { animation: none; transform: translateX(3px); }
}
/* Fr8Tracker (owner, 2026-10-12: "a space for 3 photos ... the 3 stages of tracker ... super clean", then "a title
   called Fr8Tracker and a little blurb underneath ... the 1 2 3 in the middle of the tracker stages ... remove [the
   captions] from under the photos"). The title and its line centred, then the three photos as one journey: each
   stage's number sits in the middle above its photo, on one thin line running through all three numbers, and every
   photo has an identical frame (same width and shape whatever size each picture is - set --tech-shot-ratio to the
   photos' own shape once they arrive, so nothing is cropped or banded). Hidden until a photo exists (index.html). */
.tech-shots-wrap { margin-top: 56px; }
.tech-shots-wrap[hidden], .tech-shot[hidden] { display: none; }
.tech-shots-head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.tech-shots-title { font-family: var(--heading); font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 800; color: var(--white);
  letter-spacing: -.02em; line-height: 1.2; margin-bottom: 10px; }
.tech-shots-intro { color: var(--g300); font-size: 1rem; line-height: 1.7; }
.tech-shots { --tech-shot-ratio: 72 / 55; --tech-shot-gap: 28px;   /* 72 / 55 = the owner's photos (2880 x 2200), until each loads */
  list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: var(--tech-shot-gap); }
.tech-shot { flex: 0 1 calc((100% - 2 * var(--tech-shot-gap)) / 3); min-width: 0; margin: 0; }
.tech-shot-marker { display: flex; align-items: center; margin-bottom: 16px; }
.tech-shot-step { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(237,28,36,.16); color: var(--red); font-family: var(--heading); font-size: .95rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
/* The line: half on each side of the number, each half reaching across half the gap to meet the next stage's, so
   it runs unbroken from number 1 to number 3 through the middle of each stage; none before the first stage shown
   or after the last (visibility, not display, so the number stays exactly in the middle). */
.tech-shot-marker::before, .tech-shot-marker::after { content: ''; flex: 1 1 0; height: 2px; background: rgba(255,255,255,.12); }
.tech-shot-marker::before { margin: 0 12px 0 calc(-.5 * var(--tech-shot-gap)); }
.tech-shot-marker::after { margin: 0 calc(-.5 * var(--tech-shot-gap)) 0 12px; }
.tech-shot:first-child .tech-shot-marker::before, .tech-shot:last-child .tech-shot-marker::after { visibility: hidden; }
.tech-shot:not(.tech-shot:not([hidden]) ~ .tech-shot) .tech-shot-marker::before { visibility: hidden; }   /* own rules: a browser that */
.tech-shot:not(:has(~ .tech-shot:not([hidden]))) .tech-shot-marker::after { visibility: hidden; }        /* can't read one drops only it */
/* Each frame is a button that opens its photo bigger (owner, 2026-10-12). It takes the photo's own shape once the
   photo has loaded (the script at the end of index.html), so the photo fills it exactly; until then it has the shape
   above. NO edge and no background (owner, 2026-10-12: rounded corners "not quite perfect" - audited at 6x: the thin
   see-through white edge showed as a grey-blue ring round the light photos, and because it sat inside the frame's shape
   the photo was drawn ~0.3px narrower, so the ring looked thicker at the sides than at the top). The photo itself
   carries the rounded corners too (border-radius: inherit), so they stay round even while the frame lifts. */
.tech-shot-frame { display: block; width: 100%; aspect-ratio: var(--tech-shot-ratio); margin: 0; padding: 0;
  font: inherit; color: inherit; -webkit-appearance: none; appearance: none;
  cursor: pointer;   /* the pointing finger like every other button, not a magnifier (owner, 2026-10-12) */
  border: 0; border-radius: 14px; overflow: hidden; background: transparent;
  transition: transform .25s ease; }
.tech-shot-frame:hover { transform: translateY(-3px); }   /* a lift, no glow */
.tech-shot-frame:focus { outline: none; }
.tech-shot-frame:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.tech-shot-frame img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
/* Enlarged in the photo viewer: the same 14px corners as on the page (the Gallery's photos keep their 6px). */
.gallery-modal.is-tracker .gallery-figure img { border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .tech-shot-frame { transition: none; } .tech-shot-frame:hover { transform: none; } }

/* =============================================
   KEY CLIENTS  (#clients)  - added 2026-09-24
   ============================================= */
.clients { padding: 70px 0; background: var(--white); }
.clients.hidden { display: none; }   /* only if the CMS switches show_clients off - see WP1 steps 12/27 */
.clients-inner { text-align: center; }
.clients-inner .section-label { justify-content: center; margin-bottom: 14px; }
.clients-inner .section-label::before { display: none; }
.clients-title { margin-bottom: 14px; }
.clients-intro { max-width: 620px; margin: 0 auto 36px; }
.clients-strip { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.client-chip { font-family: var(--heading); font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.4px; color: var(--g700); background: var(--off-white); border: 1px solid var(--g200);
  border-radius: 999px; padding: 11px 20px; transition: color .25s ease, border-color .25s ease; }
.client-chip:hover { color: var(--navy); border-color: var(--g300); }
.client-chip[hidden] { display: none; }   /* a flex item still needs display:none */

/* =============================================
   SUSTAINABILITY  (#sustainability)  - added 2026-09-24
   ============================================= */
.sustainability { padding: 80px 0; background: var(--off-white); }
.sustain-header { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.sustain-header .section-label { justify-content: center; margin-bottom: 14px; }
.sustain-header .section-label::before { display: none; }
.sustain-title { margin-bottom: 14px; }
.sustain-text { margin: 0 auto; }
.sustain-text-2 { margin-top: 14px; color: var(--g500); font-size: .9375rem; line-height: 1.8; }
/* Four boxes since 2026-10-08 (the nine cards merged into four): one row of four on desktop, 2 x 2 from 1100px down. */
.sustain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sustain-card { background: var(--white); border: 1px solid var(--g100); border-radius: 12px; padding: 28px 26px;
  box-shadow: 0 10px 30px -24px rgba(11,22,40,.45); }
/* Icon beside the title (owner, 2026-09-25), description full width underneath. */
.sustain-card[hidden] { display: none; }
.sustain-card { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; align-content: start; }
.sustain-icon { width: 56px; height: 56px; border-radius: 13px; background: rgba(237,28,36,.10);
  display: flex; align-items: center; justify-content: center; }
.sustain-icon svg { color: var(--red); }
/* Every word starts with a capital (owner), even if a title is typed in lower case in FR8 Creator. */
.sustain-card h3 { font-family: var(--heading); font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0; letter-spacing: -.01em; line-height: 1.3; text-transform: capitalize; }
.sustain-card p { grid-column: 1 / -1; margin-top: 14px; color: var(--g500); font-size: .9rem; line-height: 1.75; }
/* Each card opens a pop-up with the fuller story (owner, 2026-09-25). The "Read more" button's ::after
   covers the whole card, so the card is one big click / tap target with a single keyboard stop. */
/* Rows: icon + title / description (takes the spare height) / Read more - so every Read more lines up at the bottom. */
.sustain-card { grid-template-rows: auto 1fr auto; }
.sustain-card p { align-self: start; }
.sustain-card { position: relative; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sustain-card:hover { transform: translateY(-3px); border-color: rgba(237,28,36,.28); box-shadow: 0 18px 36px -24px rgba(11,22,40,.55); }
/* The pop-up opener: a round chevron button, bottom-left (owner: no "Read more" text on every card).
   Its accessible name is still "Read more" (visually hidden) + the card title (aria-describedby). */
.sustain-more { grid-column: 1 / -1; justify-self: start; align-self: end; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-top: 18px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(237,28,36,.10); color: var(--red); transition: background .25s ease, color .25s ease; }
.sustain-more::after { content: ''; position: absolute; inset: 0; border-radius: 12px; }
.sustain-more:focus { outline: none; }
.sustain-more:focus-visible::after { outline: 2px solid var(--red); outline-offset: 3px; }
.sustain-more-chevron { display: block; transition: transform .25s ease; }
/* Hover (or keyboard focus): the button fills red and the chevron nudges right, over and over - "this opens". */
.sustain-card:hover .sustain-more, .sustain-more:focus-visible { background: var(--red); color: var(--white); }   /* no glow (owner, 2026-10-08) */
.sustain-card:hover .sustain-more-chevron, .sustain-more:focus-visible .sustain-more-chevron { animation: sustainNudge .9s ease-in-out infinite; }
@keyframes sustainNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .sustain-card:hover .sustain-more-chevron, .sustain-more:focus-visible .sustain-more-chevron { animation: none; transform: translateX(3px); }
}

/* Accreditations: logo still to come - the label becomes the badge (2026-09-24) */
.accreditation-logo-wrap[hidden] { display: none; }   /* [hidden] alone cannot beat display:flex */
.accreditation-tile--text { justify-content: center; min-height: 96px; }
.accreditation-tile--text .accreditation-label { font-size: .82rem; letter-spacing: 1.4px; color: var(--navy); }
.accreditation-tile--text::before { content: ''; width: 22px; height: 2px; background: var(--red); border-radius: 1px; }

@media (max-width: 1100px) {
  .tech-grid, .sustain-grid { grid-template-columns: repeat(2, 1fr); }   /* four boxes -> 2 x 2 (both sections, 2026-10-08) */
}
@media (max-width: 860px) {
  .technology { padding: 60px 0; }
  .tech-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* Fr8Tracker stages stacked 1, 2, 3 (one under the other); the centred numbers alone show the order. */
  .tech-shots { flex-direction: column; align-items: center; gap: 32px; }
  .tech-shot { flex: none; width: 100%; max-width: 520px; }
  .tech-shot-marker::before, .tech-shot-marker::after { visibility: hidden; }
  .tech-card { padding: 22px 20px; }
  .clients { padding: 52px 0; }
  .clients-strip { gap: 8px; }
  .client-chip { font-size: .7rem; padding: 9px 14px; letter-spacing: 1.1px; }
  .sustainability { padding: 56px 0; }
  .sustain-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sustain-card { padding: 24px 22px; }
}

/* gallery */
/* =============================================
   GALLERY - photos chosen in FR8 Creator's Photo Library (grid + full-screen viewer)
   ============================================= */
.gallery-section {
  padding: 90px 0;
  background: var(--white);
  position: relative;
}
.gallery-section.hidden { display: none; }
.gallery-header { text-align: center; margin-bottom: 44px; }
.gallery-header .section-label { justify-content: center; }
.gallery-header .section-label::before { display: none; }
.gallery-header .section-title { margin-bottom: 16px; }
.gallery-header .section-subtitle { max-width: 620px; margin: 0 auto; }
.gallery-header .section-subtitle[hidden] { display: none; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--g100);
  cursor: zoom-in;
  box-shadow: 0 14px 36px -28px rgba(11,22,40,.55);
}
.gallery-item[hidden] { display: none; }
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 var(--red);
  transition: box-shadow .25s ease;
  pointer-events: none;
}
.gallery-item:hover img { transform: scale(1.045); }
.gallery-item:hover::after { box-shadow: inset 0 0 0 3px var(--red); }
.gallery-item:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.gallery-more-wrap { display: flex; justify-content: center; margin-top: 32px; }
.gallery-more[hidden] { display: none; }

@media (max-width: 1100px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .gallery-section { padding: 60px 0; }
  .gallery-header { margin-bottom: 32px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gallery-item { border-radius: 8px; }
}

/* Viewer (the overlay behaviour comes from .login-modal in Components.css) */
/* Above the cookie banner (9999) as well: a full-screen photo should not have a bar across it. */
.gallery-modal { padding: 0; z-index: 10001; }
/* The viewer's own 94% dim was removed 2026-10-07 - every pop-up uses the one light --popup-dim
   (Variables.css). The page now shows through, so the controls and the photo count below carry
   their own dark backgrounds instead of relying on a dark backdrop to be seen. */
.gallery-viewer {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 84px;
  pointer-events: none;           /* clicks on the empty area reach the backdrop, which closes */
}
.gallery-viewer > * { pointer-events: auto; }
.gallery-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.gallery-figure img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 170px);
  max-height: calc(100dvh - 170px);
  object-fit: contain;
  border-radius: 6px;
  background: var(--navy-mid);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.gallery-figure figcaption {
  font-family: var(--heading);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--white);
  background: rgba(11, 22, 40, .78);   /* its own pill: the page behind is light now */
  padding: 5px 14px;
  border-radius: 999px;
}
.gallery-figure figcaption:empty { display: none; }
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 22, 40, .72);   /* dark disc: visible over a light page as well as a dark photo */
  color: var(--white);
  box-shadow: 0 6px 18px rgba(11, 22, 40, .25);
  cursor: pointer;
  transition: background .2s ease;
}
.gallery-nav[hidden] { display: none; }
.gallery-nav:hover { background: var(--red); }
.gallery-nav:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.gallery-prev { left: 18px; }
.gallery-next { right: 18px; }
.gallery-modal .gallery-close {
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(11, 22, 40, .72);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(11, 22, 40, .25);
}
.gallery-modal .gallery-close:hover { background: var(--red); color: var(--white); }
.gallery-modal .gallery-close:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

@media (max-width: 640px) {
  .gallery-viewer { padding: 64px 12px 92px; }
  .gallery-figure img { max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); }
  .gallery-nav { top: auto; bottom: 22px; transform: none; width: 48px; height: 48px; }
  .gallery-prev { left: calc(50% - 64px); }
  .gallery-next { right: calc(50% - 64px); }
}

/* stripes */
/* =============================================
   OPTIONAL SECTIONS - alternate grey / white by what is visible (stripeOptionalSections in index.html), so
   two of them never share a colour, nor with the section above (or, after a dark one, below / the footer). Only
   a reorder that drops a run between a grey and a white fixed section can leave one edge matching - two colours
   can't avoid that. The #main-content id outranks each section's own colour.
   ============================================= */
#main-content > .section-tint { background: var(--off-white); }
#main-content > .section-white { background: var(--white); }
/* Cards step off their section, as everywhere else on the site: the accreditation tiles (grey, made for a white
   section) turn white on grey, and the white news / testimonial / FAQ cards turn grey on white. */
#main-content > .section-tint .accreditation-tile { background: var(--white); }
#main-content > .section-white .news-card,
#main-content > .section-white .testimonial-card,
#main-content > .section-white .faq-item { background: var(--off-white); }