/* Minimal page system for Services and Engagement pages.
   Every rule is prefixed with .ms- so existing pages are unaffected. */
:root {
  --ms-ink: #0b1533;
  --ms-text: #4a5068;
  --ms-muted: #7a8099;
  --ms-line: #e6e8f0;
  --ms-tint: #f7f8fc;
  --ms-accent: #3f51e8;
  --ms-navy: #0d2a5c;
  --ms-radius: 14px;
}

.ms-page { background: #fff; color: var(--ms-text); }
.ms-container { max-width: 1200px; margin: 0 auto; padding: 0 15px 0 33px; } /* left edge matches the logo, right edge matches the Get a Quote button */
@media (max-width: 991px) { .ms-container { padding: 0 24px; } }

.ms-hero { padding: 72px 0 56px; border-bottom: 1px solid var(--ms-line); }
.ms-breadcrumb { display: flex; gap: 8px; font-size: 14px; color: var(--ms-muted); margin-bottom: 16px; }
.ms-breadcrumb a { color: var(--ms-muted); text-decoration: none; }
.ms-breadcrumb a:hover { color: var(--ms-accent); }
.ms-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ms-accent); margin: 0 0 12px; }
.ms-title { font-size: clamp(34px, 5vw, 52px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ms-ink); margin: 0 0 18px; font-weight: 600; max-width: 820px; }
.ms-lead { font-size: 19px; line-height: 1.6; max-width: 680px; margin: 0 0 28px; color: var(--ms-text); }

.ms-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ms-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: 15px; text-decoration: none; background: var(--ms-navy); color: #fff; border: 1px solid var(--ms-navy); transition: opacity .2s ease; }
.ms-btn:hover { opacity: .88; color: #fff; }
.ms-btn--ghost { background: transparent; color: var(--ms-navy); }
.ms-btn--ghost:hover { color: var(--ms-navy); background: var(--ms-tint); opacity: 1; }
.ms-btn--light { background: #fff; color: var(--ms-navy); border-color: #fff; }
.ms-btn--light:hover { color: var(--ms-navy); }
.ms-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }

.ms-section { padding: 64px 0; }
.ms-section--tint { background: var(--ms-tint); }
.ms-h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ms-ink); margin: 0 0 28px; font-weight: 600; }
.ms-sub { margin: -16px 0 28px; max-width: 640px; line-height: 1.6; }

.ms-grid { display: grid; gap: 1px; background: var(--ms-line); border: 1px solid var(--ms-line); border-radius: var(--ms-radius); overflow: hidden; }
.ms-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ms-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ms-item { background: #fff; padding: 28px; }
.ms-item-title { font-size: 18px; line-height: 1.3; color: var(--ms-ink); margin: 0 0 8px; font-weight: 600; }
.ms-item-text { margin: 0; line-height: 1.6; font-size: 16px; }
.ms-note { margin: 24px 0 0; line-height: 1.6; }
.ms-note a, .ms-item-text a { color: var(--ms-accent); }

/* Service cards on the overview page */
a.ms-card { display: flex; flex-direction: column; gap: 10px; background: #fff; padding: 28px; text-decoration: none; color: inherit; transition: background .2s ease; }
a.ms-card:hover { background: var(--ms-tint); }
.ms-card-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #eef0fd; color: var(--ms-accent); font-size: 16px; }
.ms-card-more { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--ms-accent); }

.ms-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ms-step { border-top: 2px solid var(--ms-ink); padding-top: 16px; }
.ms-step-num { display: block; font-size: 13px; font-weight: 600; color: var(--ms-muted); margin-bottom: 8px; }

.ms-links { display: flex; flex-wrap: wrap; gap: 10px; }
.ms-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--ms-line); border-radius: 999px; color: var(--ms-ink); text-decoration: none; font-size: 15px; transition: border-color .2s ease; }
.ms-link i { color: var(--ms-accent); font-size: 13px; }
.ms-link:hover { border-color: var(--ms-accent); color: var(--ms-ink); }

/* Engagement model rows */
.ms-model { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 32px 0; border-top: 1px solid var(--ms-line); scroll-margin-top: 100px; }
.ms-model:last-child { border-bottom: 1px solid var(--ms-line); }
.ms-model-fit { font-size: 15px; color: var(--ms-muted); margin: 10px 0 0; }
.ms-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ms-checks li { position: relative; padding-left: 26px; line-height: 1.5; }
.ms-checks li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 1px; font-size: 13px; color: var(--ms-accent); }

.ms-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--ms-navy); color: #fff; border-radius: var(--ms-radius); padding: 40px; }
.ms-cta-title { color: #fff; margin: 0 0 8px; font-size: 26px; font-weight: 600; }
.ms-cta-text { margin: 0; color: rgba(255,255,255,.8); max-width: 520px; line-height: 1.6; }

@media (max-width: 900px) {
  .ms-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .ms-steps { grid-template-columns: repeat(2, 1fr); }
  .ms-model { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
  .ms-container { padding: 0 16px; }
  .ms-hero { padding: 48px 0 40px; }
  .ms-lead { font-size: 17px; }
  .ms-section { padding: 48px 0; }
  .ms-grid--2, .ms-grid--3, .ms-steps { grid-template-columns: 1fr; }
  .ms-item, a.ms-card { padding: 22px; }
  .ms-cta { padding: 28px; }
}

/* Navigation helpers */
.ms-nav-divider { align-self: stretch; width: 100%; flex: none; height: 0; border-top: 1px solid rgba(0, 0, 0, .1); margin: 8px 0; }
@media (min-width: 992px) { .ms-nav-mobile-only { display: none !important; } }

/* Fixes: clear the fixed 81px navbar, and neutralise global heading styles */
.ms-hero { padding-top: 150px; }
a.ms-card { align-items: flex-start; text-align: left; }
.ms-item-title, .ms-cta-title, .ms-h2 { letter-spacing: -0.01em; }
.ms-item-title { letter-spacing: 0; }
@media (max-width: 600px) { .ms-hero { padding-top: 120px; } }
/* Desktop dropdowns size to their longest item instead of a fixed 210px */
@media (min-width: 992px) {
  .nav-dropdown-list { width: max-content; min-width: 210px; padding-right: 28px; }
  .nav-dropdown-link-wrapper { align-items: flex-start; }
  .nav-dropdown-link { width: auto; white-space: nowrap; }
}

/* FutureTech product rows */
.ms-hero .ms-links { margin-top: 8px; }
.ms-product {
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-areas: "info caps" "action caps";
  grid-template-rows: auto 1fr;
  column-gap: 56px;
  padding: 56px 0;
  border-top: 1px solid var(--ms-line);
  scroll-margin-top: 100px;
}
.ms-product:first-child { border-top: 0; padding-top: 0; }
.ms-product-info { grid-area: info; }
.ms-product-caps { grid-area: caps; }
.ms-product-action { grid-area: action; padding-top: 24px; }
.ms-product-tag { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ms-product-tag .ms-eyebrow { margin: 0; }
.ms-eyebrow--sm { font-size: 12px; }
.ms-product-name { font-size: 28px; line-height: 1.2; color: var(--ms-ink); margin: 0 0 12px; font-weight: 600; letter-spacing: -0.01em; }

@media (max-width: 900px) {
  .ms-product { grid-template-columns: 1fr; grid-template-areas: "info" "caps" "action"; grid-template-rows: auto; row-gap: 24px; padding: 44px 0; }
  .ms-product-action { padding-top: 0; }
}
@media (max-width: 600px) {
  /* Capabilities become a compact list instead of bordered boxes */
  .ms-product-caps { display: block; border: 0; border-radius: 0; background: none; }
  .ms-product-caps .ms-item { padding: 14px 0; border-top: 1px solid var(--ms-line); }
  .ms-product-caps .ms-item:last-child { border-bottom: 1px solid var(--ms-line); }
  .ms-product-caps .ms-item-title { font-size: 16px; margin-bottom: 4px; }
  .ms-product-caps .ms-item-text { font-size: 15px; }
  .ms-product-name { font-size: 24px; }
  /* Product jump links scroll sideways instead of wrapping onto four rows */
  .ms-jump { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .ms-jump::-webkit-scrollbar { display: none; }
  .ms-jump .ms-link { flex: 0 0 auto; }
}

/* Industry pages */
.ms-need { display: flex; flex-direction: column; }
.ms-need-link { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ms-accent); text-decoration: none; }
.ms-need-link:hover { text-decoration: underline; }
a.ms-card--muted { background: var(--ms-tint); }
a.ms-card--muted:hover { background: #eef0f8; }
.ms-sub a { color: var(--ms-accent); }

/* Products-by-industry table */
.ms-table-wrap { overflow-x: auto; border: 1px solid var(--ms-line); border-radius: var(--ms-radius); background: #fff; }
.ms-table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.ms-col-industry { width: 24%; }
.ms-table th, .ms-table td { padding: 0 12px; height: 56px; border-bottom: 1px solid var(--ms-line); text-align: center; vertical-align: middle; position: relative; }
.ms-table thead th { height: auto; padding: 20px 12px 18px; background: var(--ms-tint); vertical-align: bottom; }
.ms-table thead th:first-child, .ms-table th[scope="row"] { text-align: left; padding-left: 24px; }
.ms-th-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-muted); }
.ms-th-product { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ms-ink); text-decoration: none; hyphens: none; overflow-wrap: normal; }
.ms-th-product .ms-card-icon { width: 36px; height: 36px; font-size: 15px; transition: background .2s ease, color .2s ease; }
.ms-th-product:hover { color: var(--ms-accent); }
.ms-th-product:hover .ms-card-icon { background: var(--ms-accent); color: #fff; }
.ms-row-industry { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; color: var(--ms-ink); text-decoration: none; }
.ms-row-industry i { width: 18px; text-align: center; color: var(--ms-muted); font-size: 14px; }
.ms-row-industry:hover { color: var(--ms-accent); }
.ms-row-industry:hover i { color: var(--ms-accent); }
.ms-table tbody tr { transition: background .15s ease; }
.ms-table tbody tr:hover { background: #fafbff; }
.ms-table tbody tr:last-child th, .ms-table tbody tr:last-child td { border-bottom: 0; }
.ms-check { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eef0fd; color: var(--ms-accent); font-size: 12px; }
.ms-dash { display: inline-block; width: 12px; height: 2px; border-radius: 2px; background: var(--ms-line); vertical-align: middle; }
.ms-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Grid sizing and phone layouts for Industries */
.ms-grid--1 { grid-template-columns: 1fr; max-width: 560px; }
@media (min-width: 601px) { a.ms-card--muted { grid-column: span 2; } } /* fills the last row of the 11-card overview */
@media (max-width: 600px) {
  .ms-grid--2.ms-grid, .ms-grid--1 { max-width: none; }
  a.ms-card { padding: 20px; gap: 6px; }
  a.ms-card .ms-card-more { display: none; } /* the whole card is the link */
  /* Products table becomes one row per industry with product tags */
  .ms-table-wrap { overflow: visible; }
  .ms-table { min-width: 0; display: block; }
  .ms-table thead { display: none; }
  .ms-table tbody, .ms-table tr { display: block; }
  .ms-table tr { padding: 14px 16px; border-bottom: 1px solid var(--ms-line); }
  .ms-table tbody tr:last-child { border-bottom: 0; }
  .ms-table colgroup { display: none; }
  .ms-table th[scope="row"] { display: block; height: auto; padding: 0 0 10px; border: 0; }
  .ms-table td { display: none; height: auto; padding: 0; border: 0; }
  .ms-table td.is-yes { display: inline-block; margin: 0 6px 6px 0; }
  .ms-table td.is-yes .ms-check { display: none; }
  .ms-table td.is-yes::after { content: attr(data-label); display: inline-block; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: #eef0fd; color: var(--ms-ink); }
}
/* Header: icons on one line, names hang from the top so wrapping does not shift icons */
.ms-table thead th { vertical-align: top; }
.ms-table thead th:first-child { vertical-align: bottom; }

/* Homepage: small fixes only */
.collection-item-feature-home-2 { min-height: 0; }
.content-feature.feature-3-type { width: auto; padding-right: 30px; }
.button-features { margin-top: 20px; }
.home-products h3 { font-size: 22px; line-height: 1.25; margin-bottom: 10px; }
.home-products h3 a { color: var(--ms-ink); text-decoration: none; }
.home-products h3 a:hover { color: var(--ms-accent); }
.home-product-soon h3 { color: var(--ms-muted); }

/* =========================================================
   Homepage sections: Industries, Capabilities, Products, Engagement
   Uses the homepage palette (--primary, --primary-20, --gray) so the
   sections sit naturally next to the existing Services cards.
   ========================================================= */
.hx-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; background: var(--primary-20, #606df133); color: var(--primary, #606df1); font-size: 18px; transition: background .25s ease, color .25s ease; }
.hx-title { display: block; margin: 0; font-size: 20px; line-height: 1.3; font-weight: 500; color: var(--primary-dark, #272727); }
.hx-text { display: block; margin: 0; font-size: 15px; line-height: 1.6; color: var(--paragraph-gray, #58585a); }
.hx-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary, #606df1); }

/* Shared card surface, matching the Services cards above */
.hx-industry, .hx-layer, .hx-product, .hx-model {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--primary-20, #606df133); border-radius: var(--radius-24px, 24px);
  background: var(--gray, #fafafa); color: inherit; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
a.hx-industry:hover, a.hx-product:hover, a.hx-model:hover {
  transform: translateY(-4px); border-color: var(--primary, #606df1); background: #fff;
  box-shadow: 0 16px 36px rgba(96, 109, 241, .12);
}
a.hx-industry:hover .hx-icon, a.hx-product:hover .hx-icon, a.hx-model:hover .hx-icon { background: var(--primary, #606df1); color: #fff; }

/* Industries: 5 x 2 tiles */
.hx-industries { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 32px; }
.hx-industry { padding: 22px 20px 24px; }
.hx-industry-name { display: block; margin-top: 6px; font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--primary-dark, #272727); }
.hx-industry-text { display: block; font-size: 14px; line-height: 1.55; color: var(--paragraph-gray, #58585a); }
.hx-arrow { position: absolute; top: 24px; right: 20px; font-size: 14px; color: var(--primary, #606df1); opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
a.hx-industry:hover .hx-arrow { opacity: 1; transform: none; }

/* Engineering capabilities: 4 stack layers */
.hx-layers { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: none; }
.hx-layer { padding: 28px 24px; background: #fff; }
.hx-layer-num { position: absolute; top: 26px; right: 24px; font-size: 13px; font-weight: 600; color: #b9bfd6; }
.hx-layer .hx-title { margin-top: 8px; }
.hx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hx-chips span { padding: 6px 14px; border-radius: 999px; background: var(--gray, #fafafa); border: 1px solid var(--primary-20, #606df133); font-size: 14px; color: var(--primary-dark, #272727); }

/* Products: 3 x 2 cards */
.hx-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.hx-product { padding: 28px; background: #fff; }
.hx-product-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.hx-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 15px; font-weight: 500; color: var(--primary, #606df1); }
.hx-more i { font-size: 12px; transition: transform .25s ease; }
a.hx-product:hover .hx-more i { transform: translateX(4px); }
.hx-product--soon { border-style: dashed; background: transparent; }
.hx-product--soon .hx-icon { background: #eceef5; color: #8a90a8; }
.hx-product--soon .hx-eyebrow { color: #8a90a8; }
.hx-product--soon .hx-title { color: #6b7088; }

/* Engagement: 4 model cards */
.hx-models { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.hx-model { padding: 28px 24px; background: #fff; }
.hx-model .hx-title { margin-top: 8px; }
.hx-fit { display: block; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--primary-20, #606df133); font-size: 14px; line-height: 1.5; color: var(--paragraph-gray, #58585a); }
.hx-fit strong { color: var(--primary-dark, #272727); font-weight: 500; }

@media (max-width: 1100px) {
  .hx-industries { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
  .hx-layers, .hx-models { grid-template-columns: repeat(2, 1fr); }
  .hx-products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hx-industries { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
  .hx-industry { padding: 16px; gap: 8px; border-radius: 16px; }
  .hx-industry .hx-icon { width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }
  .hx-industry-name { font-size: 15px; margin-top: 2px; }
  .hx-industry-text, .hx-arrow { display: none; }
  .hx-layers, .hx-models, .hx-products { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .hx-layer, .hx-model, .hx-product { padding: 22px; border-radius: 18px; }
  .hx-title { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-industry, .hx-layer, .hx-product, .hx-model, .hx-arrow, .hx-more i { transition: none; }
  a.hx-industry:hover, a.hx-product:hover, a.hx-model:hover { transform: none; }
}
/* Cards inherit centred text from the theme; keep everything left-aligned like the Services cards */
.hx-industry, .hx-layer, .hx-product, .hx-model { text-align: left; align-items: flex-start; }
.hx-chips, .hx-product-top { justify-content: flex-start; }
/* Phones: compact cards so the four sections stay short (the whole card is the link) */
@media (max-width: 600px) {
  .hx-product, .hx-model { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; padding: 16px 18px; align-items: center; }
  .hx-product-top { display: contents; }
  .hx-product .hx-icon, .hx-model .hx-icon { grid-row: span 2; width: 40px; height: 40px; font-size: 16px; }
  .hx-product .hx-eyebrow, .hx-more, .hx-fit { display: none; }
  .hx-product .hx-title, .hx-model .hx-title { margin: 0; font-size: 16px; align-self: end; }
  .hx-product .hx-text, .hx-model .hx-text { font-size: 14px; line-height: 1.45; align-self: start; }
  .hx-layers { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hx-layer { padding: 16px; gap: 6px; }
  .hx-layer-num, .hx-layer .hx-text { display: none; }
  .hx-layer .hx-icon { width: 36px; height: 36px; font-size: 15px; }
  .hx-layer .hx-title { font-size: 16px; margin-top: 2px; }
  .hx-chips { gap: 6px; margin-top: 4px; }
  .hx-chips span { padding: 4px 10px; font-size: 13px; }
}

/* Homepage white boxes (Services, Product & Innovation): the theme gives
   .big-background top padding only, so the last row of cards touched the border. */
.big-background.hx-box { padding-top: 60px; padding-bottom: 60px; }
@media (max-width: 991px) { .big-background.hx-box { padding-top: 48px; padding-bottom: 48px; } }
@media (max-width: 600px) { .big-background.hx-box { padding-top: 32px; padding-bottom: 32px; } }

/* =========================================================
   Closing call to action (partials/cta.php)
   Replaces the earlier simple .ms-cta rules above.
   ========================================================= */
.ms-cta {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main actions" "foot foot";
  gap: 28px 48px; align-items: center; flex-wrap: initial; justify-content: initial;
  padding: 44px 48px 28px; border-radius: 20px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #1b3f80 0%, var(--ms-navy) 55%);
}
.ms-cta-main { grid-area: main; }
.ms-cta-title { margin: 0 0 8px; color: #fff; font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.ms-cta-text { margin: 0; color: rgba(255, 255, 255, .82); font-size: 17px; line-height: 1.6; max-width: 560px; }
.ms-cta-points { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ms-cta-points li { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .92); font-size: 15px; }
.ms-cta-points i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(127, 240, 255, .16); color: #7ff0ff; font-size: 10px; }
.ms-cta-actions { grid-area: actions; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ms-cta-actions .ms-btn { padding: 14px 26px; font-size: 16px; }
.ms-cta-link { color: #fff; font-size: 15px; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 4px; }
.ms-cta-link:hover { color: #fff; text-decoration-color: #fff; }
.ms-cta-foot { grid-area: foot; display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; color: rgba(255, 255, 255, .7); }
.ms-cta-foot a, .ms-cta-foot span { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .85); text-decoration: none; }
.ms-cta-foot a:hover { color: #fff; text-decoration: underline; }
.ms-cta-foot i { color: #9fb2ff; }
.ms-btn--light:focus-visible, .ms-cta-link:focus-visible, .ms-cta-foot a:focus-visible { outline: 2px solid #7ff0ff; outline-offset: 3px; }

@media (max-width: 767px) {
  .ms-cta { grid-template-columns: 1fr; grid-template-areas: "main" "actions" "foot"; gap: 24px; padding: 32px 24px 22px; }
  .ms-cta-actions { align-items: stretch; }
  .ms-cta-actions .ms-btn { justify-content: center; }
  .ms-cta-link { text-align: center; }
  .ms-cta-points { flex-direction: column; gap: 10px; }
}

/* =========================================================
   Footer: tablet and phone layout (desktop unchanged)
   The theme switched the brand block to a single row below 992px, which
   squeezed the logo (boxed to 140px, image at 135%) next to the address.
   ========================================================= */
@media (max-width: 991px) {
  .footer-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; justify-content: initial; align-items: start; margin-bottom: 40px; }
  .footer-brand-wrapper { grid-column: 1 / -1; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 6px; width: 100%; margin: 0; text-align: left; }
  .footer-brand, .footer-brand.w--current { width: auto; padding-left: 0; }
  .footer-logo-container { display: block; }
  .footer-logo, .footer-logo-name { width: 240px; max-width: 100%; height: auto; max-height: none; margin-left: 0; }
  .footer-address { margin-top: 10px; text-align: left; max-width: 420px; }
  .footer-email-link { display: inline-flex; align-items: center; margin-top: 4px; }
  .footer-links-wrapper { width: auto; align-items: flex-start; justify-content: flex-start; text-align: left; }
  .footer-bottom-wrapper { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .copyright-wrapper, .footer-social-icons-wrapper { width: 100%; }
  .footer-copyright { text-align: left; justify-content: flex-start; }
  .footer-social-icons-wrapper { justify-content: flex-start; gap: 24px; }
}
@media (max-width: 479px) {
  .footer-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .footer-logo, .footer-logo-name { width: 220px; }
}
/* Phones: Company and Links side by side, then Services across the full width in two columns,
   with tighter link spacing (each link keeps a ~32px tap height) */
@media (max-width: 767px) {
  .footer-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .footer-col-company { order: 1; }
  .footer-col-links { order: 2; }
  .footer-col-services { order: 3; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
  .footer-col-services .title-footer { grid-column: 1 / -1; }
  .footer-links-wrapper { gap: 6px; }
  .footer-links-wrapper .title-footer { margin-bottom: 6px; }
  .footer-links-wrapper .footer-link { display: block; padding: 4px 0; font-size: 15px; line-height: 1.5; }
}

/* FutureTech: verified platform facts under the flagship product */
.ms-facts-band { margin-top: 8px; padding: 24px 28px; background: var(--ms-tint); border: 1px solid var(--ms-line); border-radius: var(--ms-radius); }
.ms-facts-band .ms-selector-label { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-muted); }
.ms-checks--2 { grid-template-columns: 1fr 1fr; gap: 10px 32px; }
@media (max-width: 600px) { .ms-checks--2 { grid-template-columns: 1fr; } .ms-facts-band { padding: 20px; } }

/* Homepage: flagship product spotlight (Product & Innovation section) */
.hx-flagship { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; margin-top: 32px; padding: 36px; text-align: left; border: 1px solid var(--primary-20, #606df133); border-radius: var(--radius-24px, 24px); background: #fff; }
.hx-flagship-main { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hx-flagship-name { margin: 4px 0 0; font-size: 30px; line-height: 1.2; font-weight: 500; color: var(--primary-dark, #272727); }
.hx-flagship .hx-fit { margin-top: 4px; padding-top: 0; border-top: 0; }
.hx-flagship-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 8px; }
.hx-flagship-actions .hx-more { margin: 0; padding: 0; text-decoration: none; }
.hx-flagship-actions .hx-more:hover i { transform: translateX(4px); }
.hx-flagship-caps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.hx-flagship-caps li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--gray, #fafafa); border: 1px solid var(--primary-20, #606df133); }
.hx-flagship-caps strong { font-weight: 500; font-size: 16px; color: var(--primary-dark, #272727); }
.hx-flagship-caps span { font-size: 14px; line-height: 1.5; color: var(--paragraph-gray, #58585a); }
@media (max-width: 991px) { .hx-flagship { grid-template-columns: 1fr; gap: 28px; padding: 28px; } }
@media (max-width: 600px) {
  .hx-flagship { padding: 22px; border-radius: 18px; margin-top: 24px; }
  .hx-flagship-name { font-size: 24px; }
  .hx-flagship-caps { grid-template-columns: 1fr; gap: 8px; }
  .hx-flagship-caps li { padding: 12px 14px; }
  .hx-flagship-caps span { display: none; }
}

/* Accessibility: contrast and link visibility (axe colour-contrast, link-in-text-block) */
:root { --ms-muted: #5c6178; }
.ms-note a, .ms-sub a, .ms-item-text a, .ms-model-fit a, .queue-section a { text-decoration: underline; text-underline-offset: 3px; }
.footer-email-link { color: #0a5bb5; }
/* Brand purple (#606df1) is too light for small text; use a darker shade of the same hue */
.subtitle-text, .snapshot-label, .hx-eyebrow, .hx-more { color: #3d48c4; }
.hx-layer-num { color: #6b7088; }
.faq-cta-panel .secondary-button { color: #3d48c4; }
.hx-flagship-caps li { text-align: left; align-items: flex-start; }
.hx-flagship-actions .hx-more { display: inline-flex; }
@media (max-width: 600px) { .hx-flagship .hx-fit { display: block; } }

/* Homepage flagship: edition links */
.hx-editions { display: grid; gap: 10px; width: 100%; margin-top: 4px; }
.hx-edition { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--primary-20, #606df133); border-radius: 14px; background: var(--gray, #fafafa); color: inherit; text-decoration: none; text-align: left; transition: border-color .2s ease, background .2s ease; }
.hx-edition:hover { border-color: var(--primary, #606df1); background: #fff; }
.hx-edition i { margin-top: 3px; width: 18px; text-align: center; color: #3d48c4; }
.hx-edition span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.5; color: var(--paragraph-gray, #58585a); }
.hx-edition strong { font-size: 16px; font-weight: 500; color: var(--primary-dark, #272727); }

/* Product status chips and capability areas (flagship product pages) */
.ms-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.ms-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ms-status--live { background: #e6f6ee; color: #136c43; }
.ms-status--partial { background: #e9eefc; color: #2a44a8; }
.ms-status--dev { background: #fff3dc; color: #8a5300; }
.ms-status-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; padding: 14px 16px; max-width: 760px; border: 1px solid var(--ms-line); border-radius: 12px; background: #fff; }
.ms-status-note p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ms-text); }
.ms-areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ms-area { background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-radius); padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.ms-area-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ms-area-head .ms-item-title { margin: 0; }
.ms-area .ms-checks { gap: 8px; }
.ms-area .ms-checks li { font-size: 15px; }
@media (max-width: 767px) { .ms-areas { grid-template-columns: 1fr; } .ms-status-note { flex-direction: column; gap: 8px; } }

/* Products hub: portfolio cards and flagship comparison */
.ms-portfolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ms-portfolio-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--ms-line); border-radius: var(--ms-radius); background: #fff; color: inherit; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease; }
a.ms-portfolio-card:hover { border-color: var(--ms-accent); box-shadow: 0 14px 34px rgba(13, 42, 92, .08); }
.ms-portfolio-card--flagship { border-top: 3px solid var(--ms-navy); }
.ms-portfolio-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ms-portfolio-card .ms-eyebrow { margin: 0; }
.ms-portfolio-card .ms-product-name { margin: 0; font-size: 22px; }
.ms-portfolio-card .ms-model-fit { margin: 0; }
.ms-portfolio-card .ms-card-more { margin-top: auto; padding-top: 8px; }
.ms-portfolio-editions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 8px; }
.ms-portfolio-editions a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ms-tint); color: var(--ms-ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.ms-portfolio-editions a i { color: var(--ms-accent); width: 16px; text-align: center; }
.ms-portfolio-editions a:hover { background: #eef0fd; }
.ms-compare { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.ms-compare th, .ms-compare td { padding: 14px 18px; border-bottom: 1px solid var(--ms-line); text-align: left; vertical-align: top; line-height: 1.5; }
.ms-compare thead th { background: var(--ms-tint); font-size: 16px; }
.ms-compare thead a { color: var(--ms-ink); text-decoration: none; }
.ms-compare thead a:hover { color: var(--ms-accent); }
.ms-compare tbody th { width: 20%; font-weight: 600; color: var(--ms-ink); }
.ms-compare tbody tr:last-child th, .ms-compare tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 991px) { .ms-portfolio { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ms-portfolio { grid-template-columns: 1fr; } .ms-table-wrap .ms-compare { min-width: 560px; } }
@media (max-width: 600px) { .ms-section .ms-table-wrap:has(.ms-compare) { overflow-x: auto; } }

/* Homepage portfolio: two flagships + QueueStream */
.hx-portfolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.hx-product--flagship { border-top: 3px solid var(--ms-navy, #0d2a5c); }
.hx-product-top { justify-content: space-between; width: 100%; }
.hx-portfolio .hx-editions { margin-top: auto; padding-top: 6px; }
.hx-portfolio .hx-edition { padding: 10px 12px; align-items: center; }
.hx-portfolio .hx-edition i { margin-top: 0; }
@media (max-width: 991px) { .hx-portfolio { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .hx-portfolio { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .hx-portfolio .hx-product { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; }
  .hx-portfolio .hx-product-top { display: flex; }
  .hx-portfolio .hx-product .hx-eyebrow, .hx-portfolio .hx-more { display: inline-flex; }
  .hx-portfolio .hx-product .hx-icon { grid-row: auto; }
  /* The compact grid layout above sets align-self: end/start, which in this column layout pushes text right */
  .hx-portfolio .hx-product .hx-title, .hx-portfolio .hx-product .hx-text { align-self: stretch; }
  .hx-portfolio .hx-product .hx-title { font-size: 18px; margin-top: 2px; }
}
.ms-portfolio-card { text-align: left; align-items: flex-start; }
.ms-portfolio-card .ms-portfolio-top, .ms-portfolio-card .ms-portfolio-editions { align-self: stretch; }
.nav-dropdown-link { text-transform: none; }

/* FutureTech vertical product rows: capability cards with status, edition links */
.ms-product-tag { flex-wrap: wrap; }
.ms-caps { grid-area: caps; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-content: start; }
.ms-cap { padding: 18px 20px; border: 1px solid var(--ms-line); border-radius: 12px; background: #fff; }
.ms-cap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ms-cap-head .ms-item-title { margin: 0; font-size: 16px; }
.ms-cap-head .ms-status { font-size: 11px; padding: 3px 8px; }
.ms-cap .ms-item-text { font-size: 14px; line-height: 1.55; }
.ms-editions { display: grid; gap: 8px; margin-top: 18px; max-width: 460px; }
.ms-editions a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ms-line); border-radius: 12px; background: var(--ms-tint); color: var(--ms-ink); text-decoration: none; }
.ms-editions a:hover { border-color: var(--ms-accent); background: #fff; }
.ms-editions a > i { color: var(--ms-accent); width: 18px; text-align: center; }
.ms-editions a > span:first-of-type { display: flex; flex-direction: column; gap: 2px; flex: 1; font-size: 14px; color: var(--ms-text); }
.ms-editions strong { font-size: 15px; font-weight: 600; color: var(--ms-ink); }
@media (max-width: 600px) {
  .ms-caps { grid-template-columns: 1fr; gap: 8px; }
  .ms-cap { padding: 14px 16px; }
}

/* Pre-release product status (TravelOS) */
.ms-status--preview { background: #efe9fd; color: #5a2db3; }
.ms-status--built { background: #e6f6ee; color: #136c43; }
.hx-portfolio { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .hx-portfolio { grid-template-columns: 1fr; } }

/* FAQ: four question groups as a balanced 2 x 2 grid on wider screens */
@media (min-width: 768px) { .modern-faq-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .modern-faq-wrapper .modern-faq-column { width: auto; max-width: none; } }
.faq-cta-panel { margin-top: 40px; }

/* Contact forms: note shown when the message has been started from the visitor's context */
.lead-context-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 10px; background: #eef0fd; color: #2a3266; font-size: 14px; line-height: 1.5; text-align: left; }
.lead-context-note i { margin-top: 3px; color: #3d48c4; }
.form-contact .lead-context-note { margin-bottom: 4px; }

/* =========================================================
   Mobile and tablet navigation (below 992px), with public/js/mobile-nav.js
   ========================================================= */
@media (max-width: 991px) {
  /* The open menu is a screen-height panel that scrolls on its own */
  .nav-menu[data-nav-menu-open] {
    position: fixed !important; top: 0 !important; left: 0; bottom: 0;
    height: 100vh !important; height: 100dvh !important; max-height: 100dvh;
    width: min(340px, 86vw) !important;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
    padding-bottom: 32px;
    box-shadow: 0 0 0 100vmax rgba(5, 11, 36, .38); /* dims the page behind */
  }
  html.ctc-nav-open, html.ctc-nav-open body { overflow: hidden; }

  /* Accordion dropdowns: closed until tapped. future-tech.css shows every list below 992px
     (and Webflow adds .w--open on touch), so hide them all unless our .is-open is set. */
  .nav-menu .nav-dropdown .w-dropdown-list { display: none !important; }
  .nav-menu .nav-dropdown.is-open .w-dropdown-list { display: flex !important; position: static; }
  .nav-menu .nav-dropdown-toggle { cursor: pointer; }
  .nav-menu .nav-dropdown-icon { transition: transform .2s ease; }
  .nav-menu .nav-dropdown.is-open .nav-dropdown-icon { transform: rotate(180deg); }
  .nav-menu .nav-dropdown-toggle:focus-visible, .nav-menu a:focus-visible, .close-menu-button:focus-visible, .menu-button:focus-visible { outline: 2px solid #3d48c4; outline-offset: 2px; }

  /* Comfortable touch targets */
  .nav-menu .nav-link, .nav-menu .nav-dropdown-toggle { min-height: 44px; display: flex; align-items: center; }
  .nav-menu .nav-dropdown-link { min-height: 40px; display: flex; align-items: center; }
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) { .nav-menu .nav-dropdown-icon { transition: none; } }

/* Very small phones: long single-word headings (e.g. "Telecommunications") must fit */
.ms-title, .ms-h2, .ms-product-name { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 360px) { .ms-title { font-size: 30px; } }

/* ===== QA round fixes (Oct 2026) ===== */
/* Related-services strip sits right above the CTA: trim its bottom padding */
.ms-section--related { padding-bottom: 24px; }
.ms-section--related .ms-h2 { margin-bottom: 20px; }

/* Homepage Engineering Capabilities: breathing room above the tinted band */
.section.hx-capabilities, .section.hx-engagement { padding-top: 70px; }
@media (max-width: 767px) { .section.hx-capabilities, .section.hx-engagement { padding-top: 48px; } }

/* Capability cards size to their own content instead of stretching to the tallest */
.hx-layers { align-items: stretch; }
.hx-layer { padding: 24px 22px; gap: 8px; }
.hx-layer .hx-chips { margin-top: auto; padding-top: 10px; gap: 6px; }
.hx-layer .hx-chips span { padding: 4px 11px; font-size: 13px; line-height: 1.4; }
/* Title block already has a 50px bottom margin; the cards' own top margin doubled the gap */
.hx-capabilities .features-title-wrapper { margin-bottom: 32px; }
.hx-capabilities .hx-layers { margin-top: 0; }

/* How we work: each step is a card */
.ms-step { position: relative; background: #fff; border: 1px solid var(--ms-line); border-top: 3px solid var(--ms-accent); border-radius: var(--ms-radius); padding: 22px 22px 24px; box-shadow: 0 8px 24px rgba(15, 23, 42, .05); }
.ms-step-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ms-tint); color: var(--ms-accent); font-size: 13px; margin-bottom: 12px; }

/* ===== Insights: article pages and listing ===== */
.ms-article-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; font-size: 14px; color: var(--ms-muted); }
.ms-article-meta span { display: inline-flex; align-items: center; gap: 8px; }
.ms-article-meta i { color: var(--ms-accent); font-size: 13px; }
.ms-article-body-section { padding-top: 40px; }
.ms-article-cover { margin: 0 0 36px; max-width: 860px; border-radius: var(--ms-radius); overflow: hidden; border: 1px solid var(--ms-line); }
.ms-article-cover-img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.ms-article-body { max-width: 760px; font-size: 17px; line-height: 1.75; color: var(--ms-text); }
.ms-article-body p { margin: 0 0 20px; }
.ms-article-body h2 { font-size: 24px; line-height: 1.3; font-weight: 600; color: var(--ms-ink); margin: 36px 0 12px; letter-spacing: -0.01em; }
.ms-article-body ul, .ms-article-body ol { margin: 0 0 20px; padding-left: 24px; }
.ms-article-body li { margin-bottom: 10px; }
.ms-article-body strong { color: var(--ms-ink); font-weight: 600; }
.ms-article-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--ms-line); max-width: 760px; }
.ms-post-card-img { display: block; margin: -28px -28px 16px; border-bottom: 1px solid var(--ms-line); }
.ms-post-card-img { align-self: stretch; }
.ms-post-card-img picture { display: block; }
.ms-post-card-cover { display: block; width: 100%; height: 170px; object-fit: cover; }
.blog-card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ms-muted); }
.blog-card-meta span:first-child { color: var(--ms-accent); }
@media (max-width: 767px) {
  .ms-article-body { font-size: 16px; }
  .ms-article-body h2 { font-size: 21px; margin-top: 28px; }
  .ms-post-card-img { margin: -22px -22px 14px; }
}

/* ===== Homepage pillars (index.php) ===== */
.pillars-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pillar-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 36px; border: 1px solid var(--primary-20, #dbe1ea); border-radius: 16px; background: rgba(255, 255, 255, .55); box-sizing: border-box; }
.pillar-card .pillar-tag { display: inline-flex; width: auto; margin: 0 0 18px; padding: 6px 14px; }
.pillar-card .pillar-title { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; margin: 0 0 16px; }
.pillar-card p { margin: 0 0 24px; }
.pillar-card .pillar-actions { margin-top: auto; }
@media (max-width: 767px) {
  .pillars-grid { grid-template-columns: 1fr; gap: 16px; }
  .pillar-card { padding: 24px; }
}

/* Section right after a boxed panel (.section.without-space): the theme's 120px top padding
   at 1280px+ left a large empty gap below the panel */
.section.without-space + .section { padding-top: 60px; }
/* future-tech.css forces 40px bottom padding on every .section with !important,
   which also added hidden space under the boxed panels */
.section.without-space { padding-bottom: 0 !important; }
.big-background.hx-box { padding-bottom: 48px; }
@media (max-width: 600px) { .big-background.hx-box { padding-bottom: 32px; } }

/* ===== Homepage Why CTC: icon cards, same surface and type scale as the other homepage cards ===== */
.hx-why .section-title-wrapper { max-width: 760px; margin-bottom: 36px; }
.hx-reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hx-reason {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 26px;
  border: 1px solid var(--primary-20, #606df133); border-radius: var(--radius-24px, 24px); background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.hx-reason .hx-title { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.hx-reason .hx-text { margin: 0; }
.hx-reason:hover { border-color: var(--primary, #606df1); box-shadow: 0 12px 30px rgba(96, 109, 241, .08); }
@media (max-width: 991px) { .hx-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .hx-reasons { grid-template-columns: 1fr; gap: 12px; }
  .hx-reason { padding: 22px 20px; }
  .hx-reason .hx-title { font-size: 18px; }
  .hx-why .section-title-wrapper { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { .hx-reason { transition: none; } }

/* Footer social icon: Font Awesome icon (the Webflow brand font is not loaded) */
.footer-social-icon { display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 22px; line-height: 1; }
.footer-social-icon:hover { color: #0a66c2; }

/* About page: dark "Showcases" band */
@media (min-width: 1280px) { .section.dark-bg { padding-top: 80px; } }
.section.dark-bg .subtitle-text { background-color: rgba(255, 255, 255, .1); color: #c9cdff; }
.section.dark-bg .primary-button { background-color: #fff; border-color: #fff; color: var(--ms-navy, #0d2a5c); }
.section.dark-bg .primary-button:hover { background-color: #e6e9ff; border-color: #e6e9ff; color: var(--ms-navy, #0d2a5c); }
/* Showcase card with a separate mobile image (<picture>): keep the image filling the fixed-height link */
.case-wrapper-link > picture { display: block; width: 100%; height: 100%; }
@media (max-width: 767px) { .case-wrapper-link > picture .project-img { object-fit: cover; } }
@media (max-width: 479px) {
  .case-wrapper-link:has(> picture) { height: auto; }
  .case-wrapper-link > picture .project-img { height: auto; aspect-ratio: 3 / 2; }
}
/* About page: team section right after the dark band */
@media (min-width: 1280px) { .section.about-team { padding-top: 80px; } }
.about-team .section-title-wrapper { max-width: 760px; }
/* Team cards: uniform 4:5 photos (pre-cropped with matching head framing), name block aligned under them; 4 / 2 / 1 per row */
.about-team .grid-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.about-team .team-member-wrapper { display: flex; flex-direction: column; height: 100%; }
.about-team .team-member-wrapper picture { display: block; margin-bottom: 20px; }
.about-team .team-member-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0%; border-radius: var(--radius-8px); background-color: #eef1f6; margin-bottom: 0; }
.about-team .info-team { align-items: flex-start; }
.about-team .info-team h5 { margin-top: 0; margin-bottom: 4px; }
@media (max-width: 991px) { .about-team .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .about-team .grid-2 { grid-template-columns: minmax(0, 1fr); } .about-team .team-member-wrapper { max-width: 420px; width: 100%; margin-inline: auto; } }
/* Why CTC page: decorative pie-chart and earnings cards are hidden on phones */
@media (max-width: 767px) { .right-content-why-wrap { display: none; } }
/* Our Mission page: values section right after the banner image */
@media (min-width: 1280px) { .section.mission-values { padding-top: 70px; } }
/* Badges in dark page banners (Our Mission, Why CTC): the default lavender-on-blue is unreadable on dark */
.value-banner .subtitle-text, .dark-banner .subtitle-text, .subtitle-text:has(+ h1.white-text) { background-color: rgba(255, 255, 255, .12); color: #d6d9ff; }
.value-banner .subtitle-text .icon-subtitle, .dark-banner .subtitle-text .icon-subtitle { filter: brightness(0) invert(1); opacity: .85; }
/* Our Mission "Core values that drive CTC Tech": avoid leaving "Tech" alone on the last line */
.mission-values .left-title-company-wrap h2 { text-wrap: balance; }
/* Our Mission: numbers row spans the full width now that the template video button is gone */
.info-company-wrap .numbers-company-wrap { width: 100%; }
.numbers-company-wrap .number-item:last-child { border-right: 0; }

/* Product pages: left-aligned section headers start at the content edge, not 860px-centred */
.queue-section-header:has(.section-label--left) { margin-left: 0; margin-right: 0; }

/* QueueStream FAQ: native <details> accordion (the Webflow accordion had no height animation, so answers stayed hidden) */
.qs-faq-list { display: flex; flex-direction: column; gap: 12px; }
.qs-faq-item { background: #fff; border: 1px solid var(--primary-20, #606df133); border-radius: 16px; transition: border-color .2s ease, box-shadow .2s ease; }
.qs-faq-item:hover, .qs-faq-item[open] { border-color: rgba(96, 109, 241, .45); box-shadow: 0 10px 28px rgba(15, 23, 42, .06); }
.qs-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--primary-dark, #272727); }
.qs-faq-item summary::-webkit-details-marker { display: none; }
.qs-faq-item summary:focus-visible { outline: 2px solid #3d48c4; outline-offset: 2px; border-radius: 16px; }
.qs-faq-icon { position: relative; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; background: var(--primary-20, #606df133); transition: background .2s ease; }
.qs-faq-icon::before, .qs-faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--primary, #606df1); transition: transform .2s ease, background .2s ease; }
.qs-faq-icon::after { transform: rotate(90deg); }
.qs-faq-item[open] .qs-faq-icon { background: var(--primary, #606df1); }
.qs-faq-item[open] .qs-faq-icon::before, .qs-faq-item[open] .qs-faq-icon::after { background: #fff; }
.qs-faq-item[open] .qs-faq-icon::after { transform: rotate(0deg); }
.qs-faq-item p { margin: 0; padding: 0 24px 22px; font-size: 16px; line-height: 1.7; color: var(--paragraph-gray, #58585a); }
@media (max-width: 600px) {
  .qs-faq-item summary { padding: 16px 18px; font-size: 16px; }
  .qs-faq-item p { padding: 0 18px 18px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .qs-faq-item, .qs-faq-icon, .qs-faq-icon::before, .qs-faq-icon::after { transition: none; } }
/* Product page outcome cards: card-sized titles instead of the global h3 size */
.snapshot-card h3 { font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; margin: 6px 0 10px; }
@media (max-width: 600px) { .snapshot-card h3 { font-size: 20px; } }

/* Patient journey stepper animation (public/js/journey-progress.js): the line grows into the next stop */
.journey-path.is-animated .journey-connector { position: relative; overflow: hidden; background: var(--primary-20); }
.journey-path.is-animated .journey-connector::after { content: ""; position: absolute; inset: 0; background: var(--primary); transform: scaleX(0); transform-origin: left center; transition: transform .6s ease; }
.journey-path.is-animated .journey-connector.is-done { background: var(--primary-20); }
.journey-path.is-animated .journey-connector.is-done::after { transform: scaleX(1); }
.journey-path.is-animated .journey-node__dot { transition: background-color .35s ease, border-color .35s ease, color .35s ease; }
.journey-path.is-animated .journey-node__label { transition: color .35s ease; }
.journey-path.is-resetting .journey-connector::after, .journey-path.is-resetting .journey-node__dot, .journey-path.is-resetting .journey-node__label { transition: none; }
/* Completed journey: a short "all done" pulse on the last stop */
.journey-path.is-complete .journey-node:last-child .journey-node__dot { animation: journeyPulse 1.2s ease-out 1; }
@media (max-width: 991px) {
  .journey-path.is-animated:not(.journey-path--compact) .journey-connector::after { transform: scaleY(0); transform-origin: center top; }
  .journey-path.is-animated:not(.journey-path--compact) .journey-connector.is-done::after { transform: scaleY(1); }
  /* Vertical layout: the base min-width: 14px made the 2px line render as a thick bar */
  .journey-path:not(.journey-path--compact) .journey-connector { min-width: 0; width: 2px; }
}
/* Product hero on phones: the text is centred, so centre the buttons too and give the visual some room */
@media (max-width: 767px) {
  .feature-details-banner .banner-title-wrapper .buttons-wrapper { justify-content: center; }
  .feature-details-banner .product-visual-abstract { margin-top: 28px; }
}

/* Decorative background images never take taps or clicks. On About (phones), the "Our team" glow image
   (img.background, negative top offset) overlapped and swallowed taps on the "Explore FutureTech" button above it. */
img.background, img.background-1, img.background-2, img.background-3, img.background-4,
img.background-absolute-1, img.background-absolute-2, img.background-absolute-3,
img.background-cta, img.background-image-1, img.background-image-3, img.background-image-4,
img.image-background-2 { pointer-events: none; }

/* Banking & Fintech page: a .queue-section that ends its section keeps no 72px bottom margin;
   it stacked with the section padding and left a large empty gap between sections */
.base-container > .queue-section:last-child { margin-bottom: 0; }

/* Uppercase section labels (Banking, QueueStream, Consultation) on phones: the pill had no max width and
   overflow: hidden, so with 0.28em letter spacing the end of a long label could be cut off at the screen edge */
@media (max-width: 767px) {
  .section-label { max-width: 100%; box-sizing: border-box; padding: 8px 18px; }
  .section-label span { min-width: 0; letter-spacing: 0.16em; overflow-wrap: anywhere; line-height: 1.5; }
}

/* Two tinted sections in a row (industry pages: "What we do" then "Products for ..."): same background,
   so drop the second one's top padding instead of stacking 64px + 64px of empty space */
.ms-section--tint + .ms-section--tint { padding-top: 0; }
/* Industry pages: two white sections in a row (e.g. "Other industries" then the closing call to action)
   also stacked their padding into a large blank band; keep one section's worth of space */
.ms-page--industry .ms-section:not(.ms-section--tint) + .ms-section:not(.ms-section--tint) { padding-top: 0; }

/* Blog cards (Blog, About, Why CTC): "Read more" sat right after the excerpt, so cards with shorter
   text had their button higher. Cards fill the row height and pin the button to the bottom. */
.collection-item-blog { display: flex; flex-direction: column; }
.collection-item-blog .link-block { flex: none; }
.collection-item-blog .content-blog-wrapper { flex: 1 1 auto; justify-content: flex-start; }
.collection-item-blog .button-blog-wrapper { margin-top: auto; padding-top: 30px; }