/* Selected Immersive direction: white and black, with slate, stone and silver accents. */
.immersive .case-metric strong,
.immersive .stat strong,
.immersive .preview-copy > b {
  font-variant-numeric: tabular-nums;
}

html.immersive-page {
  background-color: #000;
  scrollbar-color: #858580 #191b19;
  scrollbar-width: thin;
}

/* Keep the thumb centred with equal insets in Chromium and Safari. */
@supports selector(::-webkit-scrollbar) {
  @media (forced-colors: none) {
    html.immersive-page {
      scrollbar-color: auto;
      scrollbar-width: auto;
    }
    html.immersive-page::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }
    html.immersive-page::-webkit-scrollbar-track,
    html.immersive-page::-webkit-scrollbar-corner {
      background: #191b19;
    }
    html.immersive-page::-webkit-scrollbar-thumb {
      background: #858580;
      background-clip: padding-box;
      border: 2px solid transparent;
      border-radius: 8px;
      min-height: 32px;
    }
    html.immersive-page::-webkit-scrollbar-thumb:hover {
      background-color: #a5a59f;
    }
    html.immersive-page::-webkit-scrollbar-button {
      display: none;
      width: 0;
      height: 0;
    }
  }
}

@media (forced-colors: active) {
  html.immersive-page {
    scrollbar-color: auto;
  }
}

.immersive,
.immersive .precision {
  --paper: #fff;
  --ink: #111;
  --muted: #666;
  --line: #ddd;
  --detail: #536983;
  --detail-light: #bdc9d7;
  --detail-wash: #eef2f6;
  --accent: var(--detail);
  --accent-ink: #111;
  color: var(--ink);
  background: var(--paper);
}
.immersive ::selection {
  background: #111;
  color: #fff;
}
.immersive :focus-visible {
  outline-color: currentColor;
}
.immersive .hero {
  background: #111;
  color: #fff;
}
.immersive .hero-image {
  filter: none;
}
.immersive .hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgb(0 0 0 / 46%);
  -webkit-backdrop-filter: saturate(0.65);
  backdrop-filter: saturate(0.65);
  -webkit-mask-image: radial-gradient(ellipse 54% 43% at 50% 47%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 54% 43% at 50% 47%, #000 25%, transparent 100%);
  pointer-events: none;
}
.immersive .hero::after {
  background: linear-gradient(
    180deg,
    #0006 0%,
    #0005 24%,
    #0004 53%,
    #000e 100%
  );
}
.immersive .hero-description,
.immersive .hero-foot {
  color: #e5e5e5;
}
.immersive .hero-content > .eyebrow {
  color: #ddd;
}
.immersive .button:hover {
  background: #333;
}
.immersive .button-accent,
.immersive .closing .button {
  background: #fff;
  color: #111;
  border-color: #ddd;
}
.immersive .button-accent:hover,
.immersive .closing .button:hover {
  background: #e7e7e7;
}
.immersive .nav-links.open {
  background: rgb(17 19 17 / 55%);
  border-color: #ffffff23;
  border-radius: 3px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 48px -28px rgb(0 0 0 / 60%);
}
.immersive .nav-links.open a {
  border-radius: 3px;
  background: #ffffff12;
  border: 1px solid #ffffff14;
}
.immersive .nav-links.open a:hover {
  background: #ffffff28;
}
.immersive .menu-toggle {
  border: 1px solid #ffffff23;
  border-radius: 3px;
  background: #ffffff18;
  color: #fff;
  padding: 8px 12px;
  transition: background 0.2s;
}
.immersive .menu-toggle:hover,
.immersive .menu-toggle[aria-expanded="true"] {
  background: #ffffff28;
}
.immersive .case-feature {
  background: #111;
  color: #fff;
}
.immersive .case-story {
  background: #111;
  border-color: #111;
  color: #fff;
}
.immersive .case-feature-image,
.immersive .case-story-image {
  background: #eee;
}
.immersive .case-feature img,
.immersive .case-story img,
.immersive .industry-image {
  filter: none;
}
.immersive .case-image-label {
  color: #fff;
  background: #111e;
}
.immersive .case-feature-copy > .eyebrow,
.immersive .case-feature-copy > p:not(.eyebrow),
.immersive .case-feature .case-metric span {
  color: #ccc;
}
.immersive .case-feature-bottom {
  border-color: #ffffff30;
}
.immersive .case-story-copy > .eyebrow,
.immersive .case-story-copy > p:not(.eyebrow),
.immersive .case-story .case-metric span {
  color: #ccc;
}
.immersive .case-story-bottom {
  border-color: #ffffff30;
}
.immersive .case-feature .case-metric strong {
  color: #fff;
}
.immersive .case-story .case-metric strong {
  color: #fff;
}
.immersive .precision .industry-card .industry-label {
  color: #666;
}
.immersive .precision .results-band {
  background: #111;
  color: #fff;
  --wave-rgb: 189, 201, 215;
}
.immersive .precision .results-intro .eyebrow,
.immersive .precision .results-intro > p,
.immersive .precision .stat span,
.immersive .precision .result-footer {
  color: #ccc;
}
.immersive .precision .stat strong {
  color: #fff;
}
.immersive .precision .stat {
  border-color: #ffffff40;
}
.immersive .precision .results-wave-canvas {
  mix-blend-mode: normal;
  opacity: 0.6;
}
.immersive .precision .results-band[data-visual="streams"] .results-wave-canvas {
  opacity: 1;
}
.immersive .results-band[data-visual="streams"]::before {
  display: none;
}
.immersive .results-band::before {
  filter: grayscale(1);
}
.immersive .precision .motion-toggle {
  color: #ddd;
  border-color: #ffffff40;
}
.immersive .integration-chain span:nth-of-type(2) {
  background: #111;
  color: #fff;
  border-color: #111;
}
.immersive .closing,
.immersive .site-footer {
  background: #111;
  color: #fff;
}
.immersive .closing .eyebrow,
.immersive .closing p,
.immersive .closing-note,
.immersive .footer-bottom {
  color: #bbb;
}
.immersive .footer-top {
  border-color: #ffffff30;
}

/* Product identity comes from composition, typography and meaningful states. */
.customer-workflows .product-ui {
  color: #222;
}
.customer-workflows .product-ui p,
.customer-workflows .product-feedback,
.customer-workflows .product-eyebrow,
.customer-workflows .product-ui small,
.customer-workflows .product-ui .product-tag,
.customer-workflows .record-meta,
.customer-workflows .part-commercial span,
.customer-workflows .part-commercial label,
.customer-workflows .cost-line,
.customer-workflows .handling-option,
.customer-workflows .comparison-toolbar,
.customer-workflows .repair-summary span,
.customer-workflows .repair-summary small,
.customer-workflows .review-history,
.customer-workflows .manual-heading,
.customer-workflows .manual-foot,
.customer-workflows .preview-copy > span:not(.preview-action),
.customer-workflows .product-outcome p {
  color: #666;
}
.customer-workflows .product-symbol,
.customer-workflows .product-button,
.customer-workflows .repair-ui .product-button,
.customer-workflows .quote-ui .product-button {
  background: #111;
  color: #fff;
}
.customer-workflows .product-button:hover,
.customer-workflows .quote-ui .product-button:hover {
  background: #333;
}
.customer-workflows .product-button:disabled,
.customer-workflows .repair-ui .product-button:disabled,
.customer-workflows .quote-ui .product-button:disabled {
  background: #e5e5e5;
  color: #444;
}
.customer-workflows .repair-ui .product-bar {
  background: #111;
  color: #fff;
}
.customer-workflows .repair-job {
  background: #eee;
  color: #222;
}
.customer-workflows .enquiry-inbox button[aria-pressed="true"] {
  border-left-color: #111;
  background: #f0f0f0;
}
.customer-workflows .part-result {
  background: #f7f7f7;
}
.customer-workflows .match-label,
.customer-workflows .part-source,
.customer-workflows .record-meta .status-good,
.customer-workflows .manual-foot b,
.customer-workflows .preview-copy > b,
.customer-workflows .part-commercial b,
.customer-workflows .product-outcome,
.customer-workflows .quote-total > span:last-child b {
  color: #222;
}
.customer-workflows .match-label .status-dot {
  background: #111;
}
.customer-workflows .product-preview-card[aria-expanded="true"] {
  border-color: #111;
  box-shadow: 0 0 0 1px #111;
}
.customer-workflows .outcome-state {
  background: #222;
  color: #fff;
}
.customer-workflows .product-preview-card:focus-visible,
.customer-workflows button:focus-visible,
.customer-workflows select:focus-visible,
.customer-workflows summary:focus-visible,
.customer-workflows input:focus-visible {
  outline-color: #111;
}
.customer-workflows .repair-table .mismatch {
  background: #f1f1f1;
}
.customer-workflows .repair-table .mismatch td:last-child {
  color: #111;
}
.customer-workflows .repair-table .selected-line {
  box-shadow: inset 3px 0 #111;
}
.customer-workflows .repair-table .reconciled-line {
  background: #fafafa;
}
.customer-workflows input,
.customer-workflows .quote-ui input,
.customer-workflows .margin-control input {
  accent-color: #111;
}
.customer-workflows .quote-ui {
  background: #f7f7f7;
}
.customer-workflows .dispatch-checks,
.customer-workflows .journey-timeline > div > span:last-child,
.customer-workflows .load-spec,
.customer-workflows .freight-context {
  color: #666;
}
.immersive .precision .industry-card .industry-label {
  background: transparent;
}
.immersive .precision .customer-workflows .demo-stage {
  border-color: #ddd;
}
.customer-workflows .demo-caption {
  color: #666;
}
.customer-workflows .demo-replay {
  color: #444;
}

/* Restrained colour identifies actions, selected records and commercial outcomes. */
.immersive .brand-dot,
.immersive .hero .status-dot {
  color: var(--detail-light);
}
.immersive .hero .status-dot {
  background: var(--detail-light);
}
.immersive .button-accent,
.immersive .closing .button {
  background: var(--detail);
  color: #fff;
  border-color: var(--detail);
}
.immersive .button-accent:hover,
.immersive .closing .button:hover {
  background: #3f526a;
  border-color: #3f526a;
}
.immersive .case-feature .case-metric strong,
.immersive .precision .stat strong {
  color: var(--detail-light);
}
.immersive .case-feature-copy > .eyebrow,
.immersive .closing .eyebrow,
.immersive .precision .results-intro .eyebrow {
  color: var(--detail-light);
}
.immersive .case-story .case-metric strong {
  color: var(--detail);
}
.immersive .integration-chain span:nth-of-type(2) {
  background: var(--detail-wash);
  color: var(--detail);
  border-color: #ccd4df;
}
.immersive ::selection {
  background: var(--detail);
  color: #fff;
}
.customer-workflows .product-symbol,
.customer-workflows .quote-ui .product-symbol {
  background: var(--detail);
  color: #fff;
}
.customer-workflows .product-button,
.customer-workflows .repair-ui .product-button,
.customer-workflows .quote-ui .product-button {
  background: #111;
  color: #fff;
}
.customer-workflows .product-button:hover,
.customer-workflows .quote-ui .product-button:hover {
  background: var(--detail);
}
.customer-workflows .enquiry-inbox button[aria-pressed="true"] {
  background: var(--detail-wash);
  border-left-color: var(--detail);
}
.customer-workflows mark,
.customer-workflows .quote-ui mark {
  background: #e7ecf2;
  color: #40516a;
}
.customer-workflows .match-label,
.customer-workflows .part-source,
.customer-workflows .manual-foot b,
.customer-workflows .preview-copy > b,
.customer-workflows .record-meta .status-good,
.customer-workflows .quote-total > span:last-child b {
  color: var(--detail);
}
.customer-workflows .match-label .status-dot {
  background: var(--detail);
}
.customer-workflows .part-result {
  background: #f7f9fb;
  border-color: #dce2e9;
}
.customer-workflows .repair-job,
.customer-workflows .review-status,
.customer-workflows .outcome-state,
.customer-workflows .record-state {
  background: #e7ecf2;
  color: #40516a;
}
.customer-workflows .product-preview-card[aria-expanded="true"] {
  border-color: var(--detail);
  box-shadow: 0 0 0 1px var(--detail);
}
.customer-workflows .product-preview-card:hover {
  border-color: var(--detail);
}
.customer-workflows .outcome-icon {
  color: var(--detail);
  border-color: #c1cbd8;
}
.customer-workflows .product-preview-card:focus-visible,
.customer-workflows button:focus-visible,
.customer-workflows select:focus-visible,
.customer-workflows summary:focus-visible,
.customer-workflows input:focus-visible {
  outline-color: var(--detail);
}
.customer-workflows .repair-table .mismatch {
  background: #f4f3f0;
}
.customer-workflows .repair-table .mismatch td:last-child,
.customer-workflows .line-inspector > div {
  color: var(--detail);
}
.customer-workflows .repair-table .selected-line {
  box-shadow: inset 3px 0 var(--detail);
}
.customer-workflows input,
.customer-workflows .quote-ui input,
.customer-workflows .margin-control input {
  accent-color: var(--detail);
}
.customer-workflows #gasket-highlight,
.customer-workflows #gasket-leader,
.customer-workflows #switch-highlight path {
  stroke: var(--detail);
}
.customer-workflows #drawing-marker,
.customer-workflows #switch-highlight circle {
  fill: var(--detail);
}
.customer-workflows .journey-timeline > div:not(.journey-distance)::after {
  background: var(--detail);
}
.customer-workflows .journey-timeline > div > span:last-child {
  border-left-color: #c1cbd8;
}

/* White and black lead; secondary colours add depth rather than dominate. */
.immersive .button-accent,
.immersive .closing .button {
  background: #fff;
  color: #111;
  border-color: #fff;
}
.immersive .button-accent:hover,
.immersive .closing .button:hover {
  background: #e8edf2;
  border-color: #e8edf2;
}
.immersive .case-feature .case-metric strong,
.immersive .precision .stat strong {
  color: #fff;
}
.immersive .case-story .case-metric strong {
  color: #fff;
}
.immersive .backers {
  background: #f7f6f3;
}
.immersive .precision .results-band {
  background: #12151a;
  margin-inline: 0;
  border-radius: 0;
}
.immersive .precision .results-band .wrap {
  width: calc(100% - var(--gutter) * 2);
}
.immersive .precision .results-band[data-visual="freight"] {
  height: 660px;
  padding: 0;
  background: #141a1d;
  color: #f4f3eb;
}
.immersive [data-visual="freight"]::before { display: none; }
.freight-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.immersive [data-visual="freight"] .wrap {
  position: relative;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.immersive [data-visual="freight"] .results-intro {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 18px;
}
.immersive .precision [data-visual="freight"] .results-intro h2 {
  font-size: clamp(68px, 8.4vw, 122px);
  line-height: 1.04;
}
.immersive [data-visual="freight"] .results-intro > p {
  padding-top: 0;
  max-width: 380px;
  color: #c1c9c8;
}
.immersive [data-visual="freight"] .result-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  align-items: center;
  gap: 20px;
  margin-top: 0;
}
.immersive [data-visual="freight"] .result-footer a { pointer-events: auto; }
[data-freight-section] .cargo-target {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: center;
}
[data-freight-section] .cargo-target:hover { outline: 1px solid #e2e5d644; outline-offset: -6px; }
[data-freight-section] .cargo-target:focus-visible { outline: 2px solid #e2d9ac; outline-offset: -4px; }
@media (max-width: 600px) {
  .immersive .precision .results-band[data-visual="freight"] { height: 640px; }
  .immersive [data-visual="freight"] .results-intro { top: 32px; gap: 16px; }
  .immersive .precision [data-visual="freight"] .results-intro h2 { font-size: 62px; }
  .immersive [data-visual="freight"] .results-intro > p { max-width: 270px; font-size: 13px; }
}
.immersive .stat-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 4px;
  color: #ccc;
  font-size: 12px;
  text-underline-offset: 5px;
}
.immersive .stat-link .icon { width: 15px; height: 15px; }
.immersive .stat-link:hover { color: #fff; text-decoration: underline; }
.immersive .case-feature {
  background: #18191c;
}
.customer-workflows .preview-screen {
  background: #eef0f3;
}
.customer-workflows .preview-screen:after {
  background: linear-gradient(transparent, #eef0f3);
}
.customer-workflows .repair-ui {
  --detail: #716a62;
  --detail-wash: #f4f2ee;
}
.customer-workflows .repair-ui .product-bar {
  background: #252525;
}
.customer-workflows .correction-rail,
.customer-workflows .repair-summary {
  background: #f4f3f0;
}
.customer-workflows .repair-job,
.customer-workflows .review-status {
  background: #eae6df;
  color: #625c54;
}
.customer-workflows .quote-ui {
  --detail: #5b6680;
  --detail-wash: #f0f2f6;
  background: #f6f7fa;
}
.customer-workflows .quote-ui .load-spec,
.customer-workflows .quote-ui .freight-context {
  background: #edf0f5;
}
.customer-workflows .manual-view {
  background: #f3f6f9;
}

/* Edge-to-edge viewport hero, including short mobile and landscape screens. */
.immersive .hero {
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  max-height: none;
}
.immersive .hero-content {
  justify-content: center;
  padding: 90px var(--gutter) 150px;
}
.immersive .hero-content #hero-title {
  font-size: clamp(38px, 5.35vw, 80px);
}
.immersive .hero-content > .eyebrow {
  margin-bottom: 24px;
}
.immersive .hero-description {
  max-width: 560px;
  text-wrap: balance;
  margin-top: 30px;
}
.immersive .hero .button {
  margin-top: 56px;
}
.immersive .hero-scroll {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  color: #e5e5e5;
  font-size: 12px;
}
.immersive .hero-scroll:hover {
  color: #fff;
}
@media (max-width: 600px) {
  .immersive .hero-content {
    padding: 100px var(--gutter) 85px;
  }
  .immersive .hero-content #hero-title {
    font-size: clamp(31px, 8.8vw, 44px);
  }
}
@media (max-height: 700px) {
  .immersive .hero-content {
    padding-top: 85px;
    padding-bottom: 65px;
  }
  .immersive .hero-content #hero-title {
    font-size: clamp(30px, 5.4vw, 58px);
  }
  .immersive .hero-content > .eyebrow {
    margin-bottom: 14px;
  }
  .immersive .hero-description {
    margin-top: 16px;
    font-size: 13px;
  }
  .immersive .hero .button {
    margin-top: 20px;
    min-height: 44px;
  }
}
@media (max-height: 450px) {
  .immersive .masthead {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .immersive .hero-content {
    padding-top: 74px;
    padding-bottom: 38px;
  }
  .immersive .hero-content #hero-title {
    font-size: clamp(24px, 6.6dvh, 30px);
  }
  .immersive .hero-content > .eyebrow {
    margin-bottom: 8px;
    font-size: 8px;
  }
  .immersive .hero-description {
    max-width: 560px;
    margin-top: 10px;
    font-size: 11px;
  }
  .immersive .hero .button {
    min-height: 36px;
    padding: 8px 14px;
    margin-top: 12px;
    font-size: 11px;
  }
  .immersive .hero-foot {
    bottom: 12px;
  }
  .immersive .hero-scroll {
    bottom: 0;
    min-height: 32px;
    font-size: 10px;
    padding-block: 4px;
  }
}

/* The navigation CTA uses the same translucent style as the security page. */
.immersive:not(.security-page) .hero-cta {
  background: rgb(17 19 17 / 64%);
  border-color: rgb(255 255 255 / 32%);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-height: 52px;
  padding: 14px 20px;
  gap: 34px;
}
.immersive:not(.security-page) .hero-cta:hover {
  background: rgb(17 19 17 / 80%);
  border-color: rgb(255 255 255 / 50%);
}
@media (max-width: 600px), (max-height: 450px) {
  .immersive:not(.security-page) :is(.nav-cta, .hero-cta) {
    padding: 8px 14px;
    font-size: 11px;
    gap: 18px;
    min-height: 36px;
  }
}

/* Anchor the hero booking action where the exploration link previously sat. */
.immersive .hero > .hero-booking {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 24px;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.immersive .hero > .hero-booking:hover {
  transform: translateX(-50%) translateY(-2px);
}
@media (max-height: 450px) {
  .immersive .hero > .hero-booking { bottom: 10px; }
}

.immersive .hero-image {
  animation: hero-settle 60s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.security-hero-image {
  animation: hero-settle 16s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
@keyframes hero-settle {
  from {
    transform: scale(1.16);
  }
  to {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .immersive .hero-image,
  .security-hero-image {
    animation: none;
  }
}