/* ═══════════ fonts.css ═══════════ */
/* Self-hosted variable fonts. Generated by finalize_fonts.py.
 *
 * Replaces the render-blocking fonts.googleapis.com stylesheet. Motive was
 * CLS: with display=swap on a cross-origin stylesheet the browser painted a
 * fallback first, and Quicksand's wider metrics re-wrapped the hero H1 from
 * 132px to 223px tall, measuring 0.29 CLS on the homepage.
 *
 * Now: same origin, preloaded in app/layout.tsx for the latin subset, and
 * the two *_Fallback faces below are metric-matched to Arial so a late swap
 * cannot change the line count.
 *
 * These are variable fonts, so one file per family+subset serves the whole
 * weight range. Do not split them back out into per-weight files. */
@font-face{
  font-family:'Quicksand';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/fonts/Quicksand.latin.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Quicksand';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/fonts/Quicksand.latin-ext.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/fonts/Inter.latin.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/fonts/Inter.latin-ext.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallbacks: Arial adjusted to occupy the same box as the
   real face, so text does not re-wrap when the webfont lands. */
@font-face{
  font-family:'Quicksand Fallback';
  src:local('Arial');
  ascent-override:95.5%;
  descent-override:24.5%;
  line-gap-override:0%;
  size-adjust:102.5%;
}
@font-face{
  font-family:'Inter Fallback';
  src:local('Arial');
  ascent-override:90%;
  descent-override:22.4%;
  line-gap-override:0%;
  size-adjust:107%;
}

/* Albert Sans: the heading face. Applied to every h1-h6 with
   !important in critical.css, so this is the font that decides hero
   line count. Preloaded in app/layout.tsx. */
@font-face{
  font-family:'Albert Sans';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/fonts/AlbertSans.latin-ext.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Albert Sans';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/fonts/AlbertSans.latin.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Albert Sans Fallback';
  src:local('Arial');
  ascent-override:94%;
  descent-override:24%;
  line-gap-override:0%;
  size-adjust:101%;
}

/* ═══════════ critical.css ═══════════ */

/* ================================================
   ARROW FIX: Resize SVG icon inside .rd circle button on tech-cards
   The SVG was 28px inside a 30px circle (no visual padding)
   Shrinking SVG to 14px gives proper icon appearance
   ================================================ */

/* Fix: Arrow SVG size inside circle - make it a proper small icon */
.tech-card .rd > span svg {
  width: 14px !important;
  height: 14px !important;
}

/* Prevent circle from shrinking (keep it round) */
.tech-card .rd > span {
  flex-shrink: 0 !important;
}

/* ================================================ */

/* ================================================
   READABILITY FIX v2: Dark card text on dark backgrounds  
   Inserted at TOP to avoid CSS brace nesting issues
   ================================================ */

/* Fix 1: Challenge card headings and body text - make white on dark bg */
.tech-grid a.tech-card h3,
.tech-grid a.tech-card p,
.sec.soft .tech-card h3,
.sec.soft .tech-card p {
  color: #ffffff !important;
}

/* Fix 2: "See how we solve it" link text */
.tech-grid a.tech-card .rd,
.sec.soft .tech-card .rd {
  color: #ffffff !important;
}

/* Fix 3: Arrow SVG icon - white on blue circle */
.tech-grid a.tech-card .rd > span svg,
.sec.soft .tech-card .rd > span svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Fix 4: Same for sec.black and sec.dark tech-cards globally */
.sec.black .tech-card h3,
.sec.black .tech-card p,
.sec.dark .tech-card h3,
.sec.dark .tech-card p {
  color: #ffffff !important;
}

.sec.black .tech-card .rd,
.sec.dark .tech-card .rd {
  color: #ffffff !important;
}

.sec.black .tech-card .rd > span svg,
.sec.dark .tech-card .rd > span svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* ================================================ */

/* =====================================================
   TCS EXACT FONTS, Houschka-medium + Basis Grotesque
   Loaded directly from TCS CDN
   ===================================================== */
@font-face{font-family:'Basis-regular';src:url('https://www.tcs.com/etc.clientlibs/tcs/clientlibs/clientlib-site/resources/fonts/BasisGrotesque-Regular-Pro.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Basis-light';src:url('https://www.tcs.com/etc.clientlibs/tcs/clientlibs/clientlib-site/resources/fonts/BasisGrotesque-Light-Pro.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Basis-medium';src:url('https://www.tcs.com/etc.clientlibs/tcs/clientlibs/clientlib-site/resources/fonts/BasisGrotesque-Medium-Pro.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Basis-bold';src:url('https://www.tcs.com/etc.clientlibs/tcs/clientlibs/clientlib-site/resources/fonts/BasisGrotesque-Bold-Pro.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Basis-black';src:url('https://www.tcs.com/etc.clientlibs/tcs/clientlibs/clientlib-site/resources/fonts/BasisGrotesque-Black-Pro.woff') format('woff');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Houschka-medium';src:url('https://www.tcs.com/etc.clientlibs/tcs/clientlibs/clientlib-site/resources/fonts/HouschkaRoundedAlt-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Houschka-Light';src:url('https://www.tcs.com/etc.clientlibs/tcs/clientlibs/clientlib-site/resources/fonts/HouschkaRoundedAlt-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}

/* =====================================================
   TYPOGRAPHY OVERRIDES, match TCS exactly
   Headings: Houschka-medium | Body: Basis-regular
   ===================================================== */
body{font-family:'Basis-regular',Arial,sans-serif!important;font-weight:400!important;-webkit-font-smoothing:antialiased!important;letter-spacing:.03125rem!important}
h1,h2,h3,h4,h5,h6{font-family:'Houschka-medium',sans-serif!important;font-weight:500!important;letter-spacing:normal!important}
p,li,td,th,blockquote{font-family:'Basis-regular',sans-serif!important;font-weight:400!important;line-height:1.75!important;letter-spacing:.03125rem!important}
strong,b{font-family:'Basis-bold',sans-serif!important;font-weight:700!important}
nav a,.site-head a,.main-nav a,.nm-nav a,.primary-menu>li>a{font-family:'Basis-regular',sans-serif!important;font-weight:500!important;letter-spacing:.01em!important}
.btn,button[type=submit],.wpcf7-submit,input[type=submit]{font-family:'Houschka-medium',sans-serif!important;font-weight:500!important;letter-spacing:.03em!important}
.eyebrow,[class*=eyebrow],.overline,.label-tag{font-family:'Basis-bold',sans-serif!important;font-weight:700!important;font-size:.78rem!important;letter-spacing:.1em!important}
.section h2,.section h3,.section h4,.sec-title,.sec-head h2,[class*=sec-title]{font-family:'Houschka-medium',sans-serif!important;font-weight:500!important}
.page-hero h1,.page-hero h2,.page-hero h3{font-family:'Houschka-medium',sans-serif!important;font-weight:500!important}
.hero h1,.hero h2,.cin-hero h1,.cin-hero h2,.hero-section h1{font-family:'Houschka-medium',sans-serif!important;font-weight:500!important}
.cta h2,.cta h3,.cta.rv h2{font-family:'Houschka-medium',sans-serif!important;font-weight:500!important}
.site-foot h4,.site-foot h5,footer h4,footer h5,.widget-title{font-family:'Houschka-medium',sans-serif!important;font-weight:500!important}
.tlink{font-family:'Basis-regular',sans-serif!important;font-weight:500!important}
input,textarea,select,.wpcf7-text,.wpcf7-textarea{font-family:'Basis-regular',sans-serif!important}
label,.field label{font-family:'Basis-regular',sans-serif!important;font-weight:600!important}

/* =====================================================
   TCS.COM DITTO DESIGN, aerosoft.ky FINAL
   All font visibility issues fixed
   ===================================================== */

/* === ROOT VARIABLES === */
:root {
  --primary:      #ED1C24;
  --primary-dark: #b3141b;
  --dark:         #1e2222;
  --medium:       #333737;
  --line:         #e7e7e7;
  --nav-h:        72px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
}

/* === GLOBAL BODY FONT === */
body {
  font-family: var(--font) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #212529 !important;
  background: #fff !important;
  padding-top: 72px !important;
}
.admin-bar body { padding-top: 104px !important; }

/* === TYPOGRAPHY, TCS thin headings === */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}
/* Default heading color = dark (overridden to white on dark sections below) */
h1,h2,h3,h4,h5,h6 { color: #212529 !important; font-weight: 800 !important; }
h3,h4 { font-weight: 700 !important; }
h5,h6 { font-weight: 700 !important; }

/* Default paragraph/text = dark */
p, li, span, label, td, th, address, blockquote { color: #212529 !important; }
a { color: #ED1C24 !important; text-decoration: none !important; }
a:hover { color: #b3141b !important; }

/* === HIDE UTILITY BAR === */
.util, div.util { display: none !important; }

/* =====================================================
   NAV, TCS Black Fixed
   ===================================================== */
nav.nav, nav#nav {
  background: #000 !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  height: 72px !important;
  min-height: 72px !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.admin-bar nav.nav, .admin-bar nav#nav { top: 32px !important; }

nav.nav .nav-in {
  background: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 0 32px !important;
  height: 72px !important;
}

/* Nav brand text = white */
nav.nav a.brand,
nav.nav a.brand span,
nav.nav .brand { color: #fff !important; font-size: 22px !important; font-weight: 700 !important; }

/* Nav links = white */
nav.nav a,
nav.nav .nlinks a,
nav.nav ul li a,
nav.nav .nav-item a {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  height: 72px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  background: transparent !important;
  white-space: nowrap !important;
}
nav.nav a:hover { color: #aaa !important; }

/* Nav images (logo) = white */
nav.nav img { filter: brightness(0) invert(1) !important; height: 36px !important; width: auto !important; }

/* Dropdown */
nav.nav .sub-menu, nav.nav [class*="dropdown"], nav.nav .nm-wrap {
  background: #1e2222 !important;
  border: none !important; border-radius: 0 !important;
  padding: 12px 0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}
nav.nav .sub-menu a, nav.nav .nm-wrap a { padding: 10px 24px !important; height: auto !important; min-height: unset !important; font-size: 14px !important; color: #fff !important; }
nav.nav .sub-menu a:hover, nav.nav .nm-wrap a:hover { background: #333737 !important; }

/* Hamburger */
nav.nav .hamburger span, nav.nav [class*="hamburger"] span,
nav.nav .ham span { background: #fff !important; display: block !important; width: 24px !important; height: 2px !important; }

/* Nav list reset */
nav.nav ul { list-style: none !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; }

/* Body padding for fixed nav */
body { padding-top: 72px !important; }
@media (max-width: 991px) {
  nav.nav, nav#nav { height: 64px !important; min-height: 64px !important; }
  nav.nav .nav-in { height: 64px !important; padding: 0 16px !important; }
  nav.nav a, nav.nav .nlinks a { height: 64px !important; }
  body { padding-top: 64px !important; }
}

/* =====================================================
   HERO SECTION, white text on dark/video bg
   ===================================================== */
header.hero, .hero, section.hero, #home {
  color: #fff !important;
}
header.hero h1, header.hero h2, header.hero h3,
header.hero p, header.hero span, header.hero li,
.hero h1, .hero h2, .hero h3,
.hero p, .hero span, .hero li,
.hero-in h1, .hero-in h2, .hero-in p, .hero-in span {
  color: #fff !important;
}

/* Hero buttons */
.hero .btn, .hero a.btn,
header.hero .btn, header.hero a.btn {
  background: transparent !important;
  border: 1.5px solid #fff !important;
  color: #fff !important;
  border-radius: 40px !important;
  padding: 13px 28px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.hero .btn:hover { background: rgba(255,255,255,.15) !important; }

/* Primary hero CTA (filled) */
.hero .btn.btn-primary,
header.hero a.btn-primary,
.hero-in a.btn-primary {
  background: #ED1C24 !important;
  border-color: #ED1C24 !important;
  color: #fff !important;
}

/* =====================================================
   MAIN CONTENT SECTIONS, dark text on white bg
   ===================================================== */
main, #main, .site-main { background: #fff !important; }

/* All sections default: dark text */
.sec h1, .sec h2, .sec h3, .sec h4, .sec h5, .sec h6 { color: #212529 !important; }
.sec p, .sec li, .sec span, .sec label, .sec address { color: #212529 !important; }
.sec a:not(.btn):not([class*="cta"]):not([class*="brand"]):not([style*="color:#fff" i]) { color: #ED1C24 !important; }

/* Specific section classes discovered on the page */
.sec-title, h2.sec-title { color: #212529 !important; font-weight: 800 !important; }
.car-head h2, .car-head p, .car-head span { color: #212529 !important; }
.ncard, .ncard h3, .ncard p, .ncard span { color: #212529 !important; background: #fff !important; }
.ncard a:not(.btn):not([style*="color:#fff" i]) { color: #ED1C24 !important; }
.geo-head h2, .geo-head h3, .geo-head p, .geo-head span { color: #212529 !important; }
.geo-card, .geo-card h3, .geo-card p { color: #212529 !important; }
.geo-num { color: #ED1C24 !important; font-size: clamp(2.2rem,4vw,3.5rem) !important; font-weight: 300 !important; }
.geo-k, .geo-label { color: #747678 !important; font-size: 14px !important; }
.hp-prev-head h2, .hp-prev-head p { color: #212529 !important; }
.hp-side h2, .hp-side h3, .hp-side p { color: #212529 !important; }
.cl-head h2, .cl-head p { color: #212529 !important; }
.sec.soft h2, .sec.soft h3, .sec.soft p { color: #212529 !important; }
.sec.hp-ind h2, .sec.hp-ind h3, .sec.hp-ind p { color: #212529 !important; }
.ac, .ac h3, .ac p, .ac span, .ac label { color: #212529 !important; }
.wrap h2, .wrap h3, .wrap p { color: #212529 !important; }

/* Find-your-fit / quiz section */
.sec.fyf-band h2, .sec.fyf-band h3, .sec.fyf-band p,
.sec.fyf-band span, .sec.fyf-band label, .sec.fyf-band div,
#find-your-fit h2, #find-your-fit h3, #find-your-fit p,
#find-your-fit span, #find-your-fit label, #find-your-fit div,
.fyf-band *, .fyf-band h2, .fyf-band p, .fyf-band span { color: #212529 !important; }

/* Reveal-on-scroll items on white background */
.rv.in h2, .rv.in h3, .rv.in p, .rv.in span, .rv.in li { color: #212529 !important; }

/* =====================================================
   DARK CTA BAND (longrun), white text
   ===================================================== */
.longrun, section.longrun {
  background: #1e2222 !important;
  color: #fff !important;
}
.longrun h2, .longrun h3, .longrun p,
.longrun span, .longrun li { color: #fff !important; }
.longrun a.btn, .longrun .btn {
  border: 1.5px solid #fff !important;
  color: #fff !important;
  background: transparent !important;
  border-radius: 40px !important;
  padding: 13px 28px !important;
}
.longrun a.btn:hover { background: rgba(255,255,255,.12) !important; }

/* =====================================================
   BUTTONS, TCS pill shape
   ===================================================== */
.btn, a.btn, input[type="submit"],
a.button, .wp-block-button__link {
  font-family: var(--font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  border-radius: 40px !important;
  padding: 13px 28px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all .25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.btn-primary, a.btn-primary, input[type="submit"] {
  background: #ED1C24 !important;
  color: #fff !important;
  border: 2px solid #ED1C24 !important;
}
.btn-primary:hover { background: #b3141b !important; border-color: #b3141b !important; }
.btn-outline, .btn-secondary, a.btn-outline {
  background: transparent !important;
  border: 1.5px solid #212529 !important;
  color: #212529 !important;
}
/* Buttons on dark/hero backgrounds get white styling */
.hero .btn-outline, .longrun .btn-outline,
header.hero .btn-outline {
  border-color: #fff !important;
  color: #fff !important;
}

/* =====================================================
   FOOTER, TCS Black
   ===================================================== */
footer, .foot, footer.foot {
  /* footer-stack-fix */
  position: relative !important;
  z-index: 10 !important;
  background: #000 !important;
  color: rgba(255,255,255,.65) !important;
  padding: 0 !important;
  border-top: none !important;
}
footer .wrap, footer .foot-main, footer .foot-inner { padding: 48px 32px !important; background: #000 !important; }
footer h2, footer h3, footer h4, footer h5, footer h6,
footer .widget-title { color: #fff !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .1em !important; margin-bottom: 18px !important; }
footer p, footer li, footer span, footer address { color: rgba(255,255,255,.65) !important; font-size: 14px !important; }
footer a, footer ul li a, footer nav a { color: rgba(255,255,255,.65) !important; text-decoration: none !important; transition: color .2s !important; }
footer a:hover { color: #fff !important; }
footer ul, footer ol { list-style: none !important; padding: 0 !important; margin: 0 !important; }
footer li { margin-bottom: 10px !important; }
footer hr, footer .footer-divider { border: none !important; border-top: 1px solid rgba(255,255,255,.12) !important; margin: 0 !important; }
footer img { filter: brightness(0) invert(1) !important; max-height: 36px !important; width: auto !important; max-width: 160px !important; }
footer .fsoc { display: flex !important; flex-direction: row !important; gap: 14px !important; align-items: center !important; }
footer .fsoc a { color: rgba(255,255,255,.6) !important; padding: 0 !important; border: none !important; font-size: 18px !important; }
footer .fsoc a:hover { color: #fff !important; }
footer .fsoc img { height: 20px !important; max-height: 20px !important; max-width: 20px !important; }
footer .fbot {
  background: #000 !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  padding: 18px 32px !important;
  display: flex !important; flex-wrap: wrap !important;
  align-items: center !important; justify-content: space-between !important; gap: 16px !important;
}
footer .fbot a, footer .fbot span { color: rgba(255,255,255,.45) !important; font-size: 13px !important; }
footer .fbot a { padding: 4px 12px !important; border-right: 1px solid rgba(255,255,255,.2) !important; }
footer .fbot a:last-child { border-right: none !important; }
footer .fbot a:hover { color: #fff !important; }

/* =====================================================
   FORMS
   ===================================================== */
input[type="text"],input[type="email"],input[type="tel"],
input[type="number"],input[type="search"],textarea,select {
  border: 1px solid #e7e7e7 !important;
  border-radius: 0 !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  color: #212529 !important;
  background: #fff !important;
  padding: 13px 16px !important;
}
input:focus, textarea:focus, select:focus { border-color: #ED1C24 !important; box-shadow: none !important; outline: none !important; }
label { color: #212529 !important; font-size: 14px !important; font-weight: 500 !important; }

/* =====================================================
   MISC
   ===================================================== */
nav.nav .nav-item { position: static !important; }
.reveal-stack { overflow: hidden !important; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #999; border-radius: 3px; }
:focus-visible { outline: 2px solid #ED1C24 !important; outline-offset: 2px !important; }

@media (max-width: 767px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.75rem !important; }
}

/* ============================================================
   DARK SECTION OVERRIDES v2, fixes white/dark text balance
   These MUST come last to override earlier generic rules.
   ============================================================ */

/* DARK SECTION CONTAINERS, force WHITE text */
.sec.black *, #solutions *,
.bigc *, .bigc-body *,
.sec.hp-tech *, #technologies-preview *,
.tt-card *,
.sec.recog *, #recognition *,
.longrun *, #contact *,
.why-card * {
  color: #ffffff !important;
}

/* Hero section, keep white text */
.hero *, #home * {
  color: #ffffff !important;
}

/* Footer, keep white text */
.foot *, footer.foot * {
  color: #ffffff !important;
}

/* Eyebrow badges on dark sections, light blue */
.sec.black .eyebrow, #solutions .eyebrow,
.hero .eyebrow, #home .eyebrow,
.sec.hp-tech .eyebrow, .sec.recog .eyebrow,
.longrun .eyebrow, .why-card .eyebrow {
  color: #7EC8FF !important;
}

/* Eyebrow badge on light sections, dark blue */
.eyebrow.lt {
  color: #003d80 !important;
}

/* Buttons inside dark sections keep their styled colors */
.sec.black .btn, #solutions .btn,
.bigc .btn, .hero .btn, #home .btn,
.why-card .btn, .longrun .btn,
.sec.hp-tech .btn, .sec.recog .btn {
  color: inherit !important;
}

/* FAB labels on dark overlay */
.fab-lbl {
  color: #ffffff !important;
}

/* Nav locale on scrolled dark nav */
.nav.scrolled .nav-locale, .nav-in .nav-locale {
  color: rgba(255,255,255,0.75) !important;
}


/* ============================================================
   HIGH SPECIFICITY DARK SECTION OVERRIDES v3
   Use specific element selectors to beat .sec h1/.sec h2 rules
   ============================================================ */

/* Why-card (dark navy blue), white headings and text */
.why-card h1, .why-card h2, .why-card h3, .why-card h4, .why-card h5, .why-card h6 { color: #ffffff !important; }
.why-card p, .why-card li, .why-card span, .why-card label, .why-card address { color: rgba(255,255,255,0.85) !important; }
.why-card .wn, .why-card [class*="wn"] { color: rgba(255,255,255,0.4) !important; }

/* Solutions section (sec.black), white headings and text */
.sec.black h1, .sec.black h2, .sec.black h3, .sec.black h4, .sec.black h5, .sec.black h6 { color: #ffffff !important; }
.sec.black p, .sec.black li, .sec.black span, .sec.black label { color: rgba(255,255,255,0.85) !important; }
#solutions h1, #solutions h2, #solutions h3, #solutions h4, #solutions h5, #solutions h6 { color: #ffffff !important; }
#solutions p, #solutions li, #solutions span { color: rgba(255,255,255,0.85) !important; }

/* bigc service cards, white headings and text */
.bigc h1, .bigc h2, .bigc h3, .bigc h4, .bigc h5, .bigc h6 { color: #ffffff !important; }
.bigc p, .bigc li, .bigc span, .bigc label { color: rgba(255,255,255,0.85) !important; }
.bigc-body h1, .bigc-body h2, .bigc-body h3, .bigc-body p, .bigc-body span { color: #ffffff !important; }

/* Tech section (hp-tech), white headings and text */
.sec.hp-tech h1, .sec.hp-tech h2, .sec.hp-tech h3, .sec.hp-tech h4 { color: #ffffff !important; }
.sec.hp-tech p, .sec.hp-tech li, .sec.hp-tech span { color: rgba(255,255,255,0.85) !important; }
#technologies-preview h1, #technologies-preview h2, #technologies-preview h3 { color: #ffffff !important; }
#technologies-preview p, #technologies-preview li, #technologies-preview span { color: rgba(255,255,255,0.85) !important; }

/* Tech cards (.tt-card), white headings */
.tt-card h1, .tt-card h2, .tt-card h3, .tt-card h4, .tt-card h5, .tt-card h6 { color: #ffffff !important; }
.tt-card p, .tt-card li, .tt-card span { color: rgba(255,255,255,0.85) !important; }
.tt-card .tt-nm { color: #ffffff !important; }

/* Recognition section, white headings and text */
.sec.recog h1, .sec.recog h2, .sec.recog h3, .sec.recog h4 { color: #ffffff !important; }
.sec.recog p, .sec.recog li, .sec.recog span { color: rgba(255,255,255,0.85) !important; }
#recognition h1, #recognition h2, #recognition h3, #recognition p, #recognition span { color: #ffffff !important; }

/* Longrun/CTA section, white headings and text */
.longrun h1, .longrun h2, .longrun h3, .longrun h4 { color: #ffffff !important; }
.longrun p, .longrun li, .longrun span, .longrun address { color: rgba(255,255,255,0.85) !important; }
#contact h1, #contact h2, #contact h3, #contact p, #contact span { color: #ffffff !important; }

/* Hero section, keep white */
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6 { color: #ffffff !important; }
.hero p, .hero li, .hero span { color: rgba(255,255,255,0.9) !important; }
#home h1, #home h2, #home h3, #home p, #home span { color: #ffffff !important; }

/* Sec-title within dark sections gets white override too */
.sec.black .sec-title, .sec.black h2.sec-title { color: #ffffff !important; }
.sec.hp-tech .sec-title, .sec.hp-tech h2.sec-title { color: #ffffff !important; }
.sec.recog .sec-title, .sec.recog h2.sec-title { color: #ffffff !important; }
.longrun .sec-title, .longrun h2.sec-title { color: #ffffff !important; }

/* Eyebrow in dark sections */
.sec.black .eyebrow, .sec.black [class*="eyebrow"] { color: #7EC8FF !important; }
.sec.hp-tech .eyebrow, .sec.recog .eyebrow, .longrun .eyebrow, .why-card .eyebrow { color: #7EC8FF !important; }


/* ============================================================
   ID-SELECTOR OVERRIDES v4, maximum specificity for dark sections
   ID selectors (specificity 1,0,0) beat all class-based rules
   ============================================================ */

/* #why section, why-cards are dark navy, need white text */
#why .why-card h1, #why .why-card h2, #why .why-card h3, #why .why-card h4, #why .why-card h5, #why .why-card h6 { color: #ffffff !important; }
#why .why-card p, #why .why-card li, #why .why-card span, #why .why-card label, #why .why-card address { color: rgba(255,255,255,0.85) !important; }
#why .why-card .wn { color: rgba(255,255,255,0.35) !important; }

/* #solutions section, service cards (bigc) are dark */
#solutions h1, #solutions h2, #solutions h3, #solutions h4 { color: #ffffff !important; }
#solutions p, #solutions li, #solutions span { color: rgba(255,255,255,0.85) !important; }
#solutions .bigc h1, #solutions .bigc h2, #solutions .bigc h3 { color: #ffffff !important; }
#solutions .bigc p, #solutions .bigc span { color: rgba(255,255,255,0.85) !important; }
#solutions .bigc-body * { color: rgba(255,255,255,0.85) !important; }
#solutions .eyebrow { color: #7EC8FF !important; }

/* #technologies-preview section, dark background */
#technologies-preview h1, #technologies-preview h2, #technologies-preview h3, #technologies-preview h4 { color: #ffffff !important; }
#technologies-preview p, #technologies-preview li, #technologies-preview span { color: rgba(255,255,255,0.85) !important; }
#technologies-preview .tt-card h1, #technologies-preview .tt-card h2, #technologies-preview .tt-card h3 { color: #ffffff !important; }
#technologies-preview .tt-card p, #technologies-preview .tt-card span, #technologies-preview .tt-card .tt-nm { color: #ffffff !important; }
#technologies-preview .eyebrow { color: #7EC8FF !important; }

/* #recognition section, dark background */
#recognition h1, #recognition h2, #recognition h3, #recognition h4 { color: #ffffff !important; }
#recognition p, #recognition li, #recognition span { color: rgba(255,255,255,0.85) !important; }
#recognition .eyebrow { color: #7EC8FF !important; }

/* #contact section (longrun CTA), dark background */
#contact h1, #contact h2, #contact h3, #contact h4 { color: #ffffff !important; }
#contact p, #contact li, #contact span, #contact address { color: rgba(255,255,255,0.85) !important; }

/* #home section (hero), dark background */
#home h1, #home h2, #home h3, #home h4 { color: #ffffff !important; }
#home p, #home li, #home span { color: rgba(255,255,255,0.9) !important; }
#home .eyebrow { color: #7EC8FF !important; }


/* ============================================================
   REMAINING DARK SECTION FIXES v5
   - Industries preview cards (#industries-preview)
   - Stories/case study cards (#stories)  
   - Eyebrow badge on hero (#home)
   ============================================================ */

/* Industries preview section, dark background cards */
#industries-preview h1, #industries-preview h2, #industries-preview h3, #industries-preview h4,
#industries-preview h5, #industries-preview h6 { color: #ffffff !important; }
#industries-preview p, #industries-preview li, #industries-preview span { color: rgba(255,255,255,0.85) !important; }
#industries-preview .eyebrow { color: #7EC8FF !important; }

/* Stories / case studies section, dark background */
#stories h1, #stories h2, #stories h3, #stories h4, #stories h5, #stories h6 { color: #ffffff !important; }
#stories p, #stories li, #stories span { color: rgba(255,255,255,0.85) !important; }
#stories .eyebrow { color: #7EC8FF !important; }

/* Eyebrow lt badge, light blue fix for better contrast on hero */
#home .eyebrow.lt, #home .eyebrow {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}

/* Recognition eyebrow, fix contrast */
#recognition .eyebrow.lt, #recognition .eyebrow {
  color: #7EC8FF !important;
  background: rgba(51,153,255,0.2) !important;
}

/* Nav mega-menu dark backdrop, fix dropdown text */
#nav .nav-mega p, #nav .nav-mega li, #nav .nav-mega span, #nav .nav-mega a:not(.btn) { color: rgba(255,255,255,0.85) !important; }
#mnav p, #mnav li, #mnav span, #mnav a:not(.btn) { color: rgba(255,255,255,0.85) !important; }


/* ============================================================
   TCARD DARK NEWS CARDS + FINAL FIXES v6
   ============================================================ */

/* tcard elements (dark bg news/article cards) */
#insights .tcard h1, #insights .tcard h2, #insights .tcard h3, #insights .tcard h4 { color: #ffffff !important; }
#insights .tcard p, #insights .tcard li, #insights .tcard span { color: rgba(255,255,255,0.8) !important; }
#insights .tcard .tcard-tag, #insights .tcard .rd { color: rgba(255,255,255,0.8) !important; }

/* Also for any tcard anywhere on the page */
#stories .tcard h1, #stories .tcard h2, #stories .tcard h3, #stories .tcard h4 { color: #ffffff !important; }
#stories .tcard p, #stories .tcard span { color: rgba(255,255,255,0.8) !important; }

/* Careers section eyebrows */
#careers .eyebrow { color: #7EC8FF !important; background: rgba(51,153,255,0.2) !important; }

/* Industries preview, industry card headings */
#industries-preview h4, #industries-preview h3 { color: #ffffff !important; }
#industries-preview p { color: rgba(255,255,255,0.85) !important; }


/* =============================================================
   FIX v7: 60-SECOND WIZARD + BTN-W COLOR FIX
   ============================================================= */

/* 60-second tool wizard section - dark gradient bg, needs white text */
#find-your-fit h1, #find-your-fit h2, #find-your-fit h3,
#find-your-fit h4, #find-your-fit h5, #find-your-fit h6 { color: #ffffff !important; }
#find-your-fit p, #find-your-fit span, #find-your-fit li,
#find-your-fit div { color: rgba(255,255,255,0.85) !important; }
#find-your-fit .eyebrow, #find-your-fit [class*="eyebrow"] { color: rgba(255,255,255,0.7) !important; }

/* Quiz/outcome panel items inside find-your-fit */
#find-your-fit .rv { color: rgba(255,255,255,0.85) !important; }

/* Fix btn-w (white button) text color - should be dark (ink) not white
   These buttons sit on dark sections but have white bg, so text must be dark */
/* btn-w (white background button) always has dark text to match white bg */
.btn-w, a.btn-w, button.btn-w { color: #0f0f0f; background: #ffffff; }
/* In dark sections, btn-w explicitly keeps dark text (overrides .sec.black * { color: white }) */
.sec.black .btn-w, .hero .btn-w, .longrun .btn-w, .endcta .btn-w,
#contact .btn-w, .dark-band .btn-w, .black-band .btn-w { color: #0f0f0f !important; background: #ffffff !important; }

/* Preserve btn-primary and btn-outline colors on dark sections */
.btn-primary, a.btn-primary { color: #ffffff !important; }
.btn-outline, a.btn-outline { color: #ffffff !important; }


/* =============================================================
   DIAGNOSTIC CINEMATIC PAGE - QUIZ LAYOUT FIX
   dx-* class system - completely unstyled, adding full layout
   ============================================================= */

#dx-quiz-section { background: #f5f7fa; min-height: 80vh; }

#dx-quiz-section .dx-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 80vh;
  box-shadow: 0 4px 32px rgba(0,0,0,0.10);
  border-radius: 16px;
  overflow: hidden;
}

#dx-quiz-section .dx-rail {
  background: #0f1c3f;
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#dx-quiz-section .dx-rail * { color: rgba(255,255,255,0.85) !important; }
#dx-quiz-section .dx-rail-crumb {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45) !important;
}
#dx-quiz-section .dx-rail-title {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff !important;
  margin: 0;
}
#dx-quiz-section .dx-rail-sub {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.7) !important;
  margin: 0;
}
#dx-quiz-section .dx-rail-progress { margin-top: auto; }
#dx-quiz-section .dx-rail-prog-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.55) !important;
  margin-bottom: 8px;
}
#dx-quiz-section .dx-rail-bar {
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}
#dx-quiz-section .dx-rail-bar-fill {
  height: 100%;
  background: #3b82f6;
  border-radius: 2px;
  transition: width 0.4s ease;
}
#dx-quiz-section .dx-rail-dots { display: flex; gap: 6px; flex-wrap: wrap; }
#dx-quiz-section .dx-rail-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: inline-block;
}
#dx-quiz-section .dx-rail-dot.active { background: #3b82f6; }
#dx-quiz-section .dx-rail-dot.done { background: rgba(255,255,255,0.5); }
#dx-quiz-section .dx-rail-foot {
  font-size: 12px;
  color: rgba(255,255,255,0.45) !important;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 12px;
}
#dx-quiz-section .dx-rail-foot strong { color: rgba(255,255,255,0.8) !important; }

#dx-quiz-section .dx-stage-r {
  background: #ffffff;
  padding: 56px 56px 40px;
  display: flex;
  flex-direction: column;
}
#dx-quiz-section .dx-q { flex: 1; display: flex; flex-direction: column; gap: 8px; }
#dx-quiz-section .dx-q-card { display: flex; flex-direction: column; gap: 8px; }
#dx-quiz-section .dx-q-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280 !important;
  margin-bottom: 8px;
}
#dx-quiz-section .dx-q-text {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a !important;
  margin: 0 0 4px;
}
#dx-quiz-section .dx-q-sub {
  font-size: 14px;
  color: #6b7280 !important;
  margin: 0 0 24px;
  line-height: 1.5;
}

#dx-quiz-section .dx-opts {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
#dx-quiz-section .dx-opt {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 18px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  width: 100% !important;
  box-sizing: border-box;
  min-height: 80px;
}
#dx-quiz-section .dx-opt:hover {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
#dx-quiz-section .dx-opt.selected,
#dx-quiz-section .dx-opt.active {
  border-color: #1d4ed8;
  background: #dbeafe;
}
#dx-quiz-section .dx-opt-icon {
  font-size: 20px;
  line-height: 1;
  display: block !important;
  margin-bottom: 6px;
}
#dx-quiz-section .dx-opt-body { display: flex; flex-direction: column; gap: 2px; }
#dx-quiz-section .dx-opt-label {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a !important;
  display: block !important;
  line-height: 1.3;
}
#dx-quiz-section .dx-opt-desc {
  font-size: 12px;
  color: #6b7280 !important;
  display: block !important;
  line-height: 1.4;
}

#dx-quiz-section .dx-q-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
  margin-top: auto;
}
#dx-quiz-section .dx-q-back {
  background: transparent;
  border: 1px solid #d1d5db;
  color: #6b7280 !important;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
#dx-quiz-section .dx-q-next {
  background: #1d4ed8;
  border: 2px solid #1d4ed8;
  color: #ffffff !important;
  padding: 10px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
}

#dx-intro { background: #0f1c3f; }
#dx-intro h1, #dx-intro h2, #dx-intro h3 { color: #ffffff !important; }
#dx-intro p { color: rgba(255,255,255,0.8) !important; }

@media (max-width: 768px) {
  #dx-quiz-section .dx-grid { grid-template-columns: 1fr !important; border-radius: 0 !important; }
  #dx-quiz-section .dx-rail { padding: 28px 20px; }
  #dx-quiz-section .dx-stage-r { padding: 28px 20px 24px; }
  #dx-quiz-section .dx-opts { grid-template-columns: 1fr; }
}


/* =============================================================
   DIAGNOSTIC QUIZ - PREMIUM UPGRADE v2
   High-end agency polish, SVG icons, proper selected states
   ============================================================= */

/* Hide emoji icons - replaced by JS with SVG */
#dx-quiz-section .dx-opt-icon {
  font-size: 0 !important;
  line-height: 0 !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 10px;
  margin-bottom: 14px;
  transition: background 0.2s;
  flex-shrink: 0;
}
#dx-quiz-section .dx-opt-icon svg {
  width: 20px;
  height: 20px;
  stroke: #475569;
}
#dx-quiz-section .dx-opt:hover .dx-opt-icon {
  background: #e0f2fe;
}
#dx-quiz-section .dx-opt:hover .dx-opt-icon svg { stroke: #0369a1; }
#dx-quiz-section .dx-opt.selected .dx-opt-icon {
  background: #1d4ed8;
}
#dx-quiz-section .dx-opt.selected .dx-opt-icon svg { stroke: #ffffff; }

/* Premium option card upgrade */
#dx-quiz-section .dx-opt {
  padding: 20px 22px 18px !important;
  border-radius: 12px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  transition: all 0.18s ease !important;
  position: relative;
}
#dx-quiz-section .dx-opt::after {
  content: '';
  position: absolute;
  top: 18px;
  right: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  transition: all 0.18s ease;
}
#dx-quiz-section .dx-opt:hover {
  border-color: #93c5fd !important;
  background: #f8faff !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.08), 0 2px 8px rgba(0,0,0,0.06) !important;
  transform: translateY(-1px);
}
#dx-quiz-section .dx-opt:hover::after { border-color: #3b82f6; }
#dx-quiz-section .dx-opt.selected {
  border-color: #1d4ed8 !important;
  background: #fff4f4 !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,0.12), 0 2px 8px rgba(0,0,0,0.08) !important;
  transform: translateY(-1px);
}
#dx-quiz-section .dx-opt.selected::after {
  border-color: #1d4ed8;
  background: #1d4ed8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
#dx-quiz-section .dx-opt-label { font-size: 15px !important; font-weight: 600 !important; color: #1e293b !important; }
#dx-quiz-section .dx-opt-desc { font-size: 13px !important; color: #64748b !important; }
#dx-quiz-section .dx-opt.selected .dx-opt-label { color: #1d4ed8 !important; }

/* Premium sidebar upgrade */
#dx-quiz-section .dx-rail {
  background: linear-gradient(160deg, #0f1c3f 0%, #1a3068 100%) !important;
}
#dx-quiz-section .dx-rail-crumb {
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  color: rgba(255,255,255,0.4) !important;
  font-weight: 600 !important;
}
#dx-quiz-section .dx-rail-title {
  font-size: clamp(22px, 1.8vw, 30px) !important;
  letter-spacing: -0.01em;
}

/* Progress dots - more premium */
#dx-quiz-section .dx-rail-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 3px !important;
  transition: all 0.3s ease;
}
#dx-quiz-section .dx-rail-dot.active {
  width: 18px !important;
  background: #60a5fa !important;
}
#dx-quiz-section .dx-rail-bar-fill { background: linear-gradient(90deg, #3b82f6, #60a5fa) !important; }

/* Premium navigation buttons */
#dx-quiz-section .dx-q-back {
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  font-size: 13px !important;
}
#dx-quiz-section .dx-q-next {
  background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(29,78,216,0.3) !important;
  font-size: 14px !important;
  letter-spacing: 0.01em;
  padding: 12px 32px !important;
}
#dx-quiz-section .dx-q-next:hover {
  background: linear-gradient(135deg, #1e40af, #1d4ed8) !important;
  box-shadow: 0 6px 16px rgba(29,78,216,0.4) !important;
  transform: translateY(-1px);
}
#dx-quiz-section .dx-q-next:disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  transform: none;
  cursor: not-allowed;
}

/* Question text upgrade */
#dx-quiz-section .dx-q-num {
  color: #3b82f6 !important;
  letter-spacing: 0.12em !important;
  font-size: 10px !important;
}
#dx-quiz-section .dx-q-text {
  font-size: clamp(18px, 1.8vw, 22px) !important;
  letter-spacing: -0.015em !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}
#dx-quiz-section .dx-q-sub { color: #64748b !important; font-size: 14px !important; }

/* Grid container - premium shadow */
#dx-quiz-section .dx-grid {
  box-shadow: 0 8px 48px rgba(0,0,0,0.14) !important;
  border-radius: 20px !important;
  margin: 40px auto !important;
}
#dx-quiz-section { background: #f0f4f8 !important; padding: 0 24px !important; }

/* ── DIAGNOSTIC PAGE: Phone/CTA section fix ── */
.endcta * { color: rgba(255,255,255,0.9) !important; }
.endcta strong { color: #ffffff !important; }
.endcta a { color: #60a5fa !important; }
.endcta p { color: rgba(255,255,255,0.75) !important; }

/* ── INSIGHTS-CINEMATIC: Service cards premium redesign ── */
.svc-card {
  background: #000000 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  overflow: hidden;
  transition: all 0.25s ease !important;
}
.svc-card:hover {
  border-color: rgba(255,255,255,0.15) !important;
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.3) !important;
}
.svc-card .svc-card-thumb,
.svc-card > div:first-child {
  background: #000000 !important;
}

/* Replace blur/red gradient with clean dark */
.svc-card [style*="background"] { background: #1e293b !important; }


/* ============================================
   CASE STUDY PAGE, CS-* COMPONENT STYLES
   aerosoft.ky/case-*-cinematic/
   ============================================ */

/* Hero */
.cs-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  background: #0a0a0a;
  overflow: hidden;
  padding-bottom: 80px;
}
.cs-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(1.1) brightness(0.55);
}
.cs-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.15) 100%);
  z-index: 1;
}
.cs-hero .wrap { position: relative; z-index: 2; }

/* Hero grid */
.cs-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: flex-end;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 44px;
}
.cs-hero h1 {
  font-family: 'Houschka-medium', Inter, sans-serif;
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.08;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.cs-hero .crumb {
  font-family: 'Houschka-medium', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 18px;
}
.cs-hero .lede {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  max-width: 560px;
}

/* Meta card */
.cs-meta-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 28px 30px;
  min-width: 240px;
  backdrop-filter: blur(8px);
}
.cs-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 0.88rem;
  color: rgba(255,255,255,0.9);
}
.cs-meta-row:last-child { border-bottom: none; }
.cs-meta-row span:first-child {
  color: rgba(255,255,255,0.45);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Stats section */
.cs-stats {
  background: #0a0a0a;
  padding: 70px 0;
  position: relative;
  z-index: 2;
}
.cs-stats-grid {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.cs-stat {
  padding: 36px 32px;
  border-right: 1px solid rgba(255,255,255,0.07);
  background: #111;
}
.cs-stat:first-child { border-radius: 12px 0 0 12px; }
.cs-stat:last-child { border-right: none; border-radius: 0 12px 12px 0; }
.cs-stat-num {
  font-family: 'Houschka-medium', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}
.cs-stat-num span { color: #fff; }
.cs-stat-lbl {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

/* Standard section */
.cs-section {
  background: #fff;
  padding: 100px 0;
  position: relative;
  z-index: 2;
}
.cs-section.dark {
  background: #111;
  color: #fff;
}
.cs-section.dark h2,
.cs-section.dark h3,
.cs-section.dark h4 { color: #fff; }
.cs-section.dark p,
.cs-section.dark li { color: rgba(255,255,255,0.7); }
.cs-section.soft { background: #f4f3f9; }
.cs-section .wrap {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 44px;
}

/* Eyebrow */
.cs-eyebrow {
  font-family: 'Houschka-medium', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ED1C24;
  margin-bottom: 16px;
}
.cs-section.dark .cs-eyebrow { color: rgba(255,255,255,0.45); }
.cs-section h2 {
  font-family: 'Houschka-medium', Inter, sans-serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: #0A0F1E;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.cs-section.dark h2 { color: #fff; }
.cs-section p.intro {
  font-size: 1.1rem;
  color: #5A6480;
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: 56px;
}
.cs-section.dark p.intro { color: rgba(255,255,255,0.6); }

/* Grid 2 cols */
.cs-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

/* Card */
.cs-card {
  border: 1px solid #D0DCF0;
  border-radius: 16px;
  padding: 36px 32px;
  background: #fff;
}
.cs-section.dark .cs-card {
  background: #1a1a1a;
  border-color: rgba(255,255,255,0.08);
}
.cs-section.soft .cs-card {
  background: #fff;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}
.cs-card .num {
  font-family: 'Houschka-medium', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5A6480;
  margin-bottom: 12px;
}
.cs-card h3 {
  font-family: 'Houschka-medium', Inter, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0A0F1E;
  margin-bottom: 16px;
  line-height: 1.2;
}
.cs-section.dark .cs-card h3 { color: #fff; }
.cs-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cs-card ul li {
  padding: 8px 0 8px 20px;
  position: relative;
  font-size: 0.95rem;
  color: #5A6480;
  line-height: 1.5;
  border-bottom: 1px solid #fff4f4;
}
.cs-card ul li:last-child { border-bottom: none; }
.cs-card ul li::before {
  content: ',';
  position: absolute;
  left: 0;
  color: #ED1C24;
  font-weight: 700;
}
.cs-section.dark .cs-card ul li {
  color: rgba(255,255,255,0.6);
  border-bottom-color: rgba(255,255,255,0.06);
}

/* Deliverables */
.cs-deliverables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}
.cs-deliverable {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px 28px;
  background: rgba(255,255,255,0.04);
}
.cs-deliverable .icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.7);
}
.cs-deliverable h4 {
  font-family: 'Houschka-medium', Inter, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.3;
}
.cs-deliverable p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
}

/* Suite row */
.cs-suite-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.cs-suite {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px 28px;
}
.cs-suite .label {
  font-family: 'Houschka-medium', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-bottom: 8px;
}
.cs-suite h3,
.cs-suite h4 {
  font-family: 'Houschka-medium', Inter, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.25;
}
.cs-suite p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin: 0;
}

/* Tech band */
.cs-tech-band {
  background: #0a0a0a;
  padding: 72px 0;
  position: relative;
  z-index: 2;
}
.cs-tech-band .wrap {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 44px;
}
.cs-tech-band .cs-eyebrow { color: rgba(255,255,255,0.4); }
.cs-tech-band h2 {
  font-family: 'Houschka-medium', Inter, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}
.cs-tech-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cs-tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 18px;
  font-family: 'Houschka-medium', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
}

/* Pull quote */
.cs-pull {
  margin: 56px 0;
  padding: 40px 48px;
  border-left: 4px solid #ED1C24;
  background: #fff4f4;
  border-radius: 0 14px 14px 0;
}
.cs-section.dark .cs-pull {
  background: rgba(255,255,255,0.04);
  border-left-color: rgba(255,255,255,0.3);
}
.cs-pull p {
  font-size: 1.25rem;
  font-style: italic;
  color: #0A0F1E !important;
  line-height: 1.55;
  margin: 0 !important;
}
.cs-section.dark .cs-pull p { color: rgba(255,255,255,0.85) !important; }

/* Live band / CTA bands */
.cs-live-band {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #D0DCF0;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}
.cs-live-band .lh {
  font-family: 'Houschka-medium', Inter, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0A0F1E;
  margin-bottom: 4px;
}
.cs-live-band .ls {
  font-size: 0.88rem;
  color: #5A6480;
}
.btn-w-red {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Houschka-medium';
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 22px;
  border-radius: 100px;
  cursor: pointer;
  background: #0a0a0a;
  color: #fff;
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
}
.btn-w-red:hover {
  background: #333;
  transform: translateY(-2px);
}

/* Related section */
.cs-related {
  background: #fff;
  padding: 80px 0;
  position: relative;
  z-index: 2;
}
.cs-related .wrap {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 44px;
}
.cs-related h2 {
  font-family: 'Houschka-medium', Inter, sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: #0A0F1E;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}
.cs-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.cs-related-card {
  display: block;
  border: 1px solid #D0DCF0;
  border-radius: 16px;
  padding: 36px 32px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.25s, transform 0.25s;
}
.cs-related-card:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}
.cs-related-card .crumb {
  font-family: 'Houschka-medium', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5A6480;
  margin-bottom: 12px;
}
.cs-related-card h3 {
  font-family: 'Houschka-medium', Inter, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0A0F1E;
  margin-bottom: 12px;
  line-height: 1.25;
}
.cs-related-card p {
  font-size: 0.92rem;
  color: #5A6480;
  line-height: 1.6;
  margin-bottom: 20px;
}
.cs-related-card .arrow {
  font-family: 'Houschka-medium', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #ED1C24;
}

/* Responsive */
@media (max-width: 900px) {
  .cs-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .cs-stats-grid { grid-template-columns: 1fr 1fr; }
  .cs-grid-2 { grid-template-columns: 1fr; }
  .cs-deliverables { grid-template-columns: 1fr; }
  .cs-suite-row { grid-template-columns: 1fr; }
  .cs-related-grid { grid-template-columns: 1fr; }
  .cs-live-band { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 600px) {
  .cs-stats-grid { grid-template-columns: 1fr 1fr; }
  .cs-stat:first-child { border-radius: 12px 12px 0 0; }
  .cs-stat:last-child { border-radius: 0 0 12px 12px; }
}

/* ============================================
   DARK SECTION TEXT VISIBILITY FIX
   Override global !important color rules
   that make text invisible on dark bg
   ============================================ */

/* Force white text in all dark/black case study sections */
.cs-section.dark h1,
.cs-section.dark h2,
.cs-section.dark h3,
.cs-section.dark h4,
.cs-section.dark h5,
.cs-section.dark h6 { color: #ffffff !important; }

.cs-section.dark p,
.cs-section.dark li,
.cs-section.dark span:not(.cs-eyebrow),
.cs-section.dark .intro { color: rgba(255,255,255,0.72) !important; }

.cs-section.dark .cs-eyebrow { color: rgba(255,255,255,0.45) !important; }

/* Deliverable cards */
.cs-deliverable h4 { color: #ffffff !important; }
.cs-deliverable p { color: rgba(255,255,255,0.65) !important; }

/* Suite cards */
.cs-suite h3,
.cs-suite h4 { color: #ffffff !important; }
.cs-suite p { color: rgba(255,255,255,0.65) !important; }
.cs-suite .label { color: rgba(255,255,255,0.38) !important; }

/* Tech band */
.cs-tech-band h2 { color: #ffffff !important; }
.cs-tech-band .cs-eyebrow { color: rgba(255,255,255,0.4) !important; }
.cs-tech-tag { color: rgba(255,255,255,0.8) !important; }

/* Stats band */
.cs-stats h2,
.cs-stats h3 { color: #ffffff !important; }
.cs-stat-num,
.cs-stat-num span { color: #ffffff !important; }
.cs-stat-lbl { color: rgba(255,255,255,0.5) !important; }

/* Cards inside dark section */
.cs-section.dark .cs-card h3 { color: #ffffff !important; }
.cs-section.dark .cs-card .num { color: rgba(255,255,255,0.45) !important; }
.cs-section.dark .cs-card ul li { color: rgba(255,255,255,0.65) !important; }

/* Hero text */
.cs-hero h1,
.cs-hero h2 { color: #ffffff !important; }
.cs-hero p,
.cs-hero .lede { color: rgba(255,255,255,0.8) !important; }
.cs-hero .crumb { color: rgba(255,255,255,0.5) !important; }


/* =============================================
   INSIGHTS PAGE LAYOUT FIXES
   ============================================= */

/* FIX 1: Hero section - proper padding to show heading */
.hero-in,
header.hero .wrap.hero-in {
  padding-top: 110px !important;
  padding-bottom: 80px !important;
}

header.hero {
  min-height: 700px !important;
}

/* FIX 2: Dark .svc-card body text - force white on dark backgrounds */
.svc-card .bd h3,
.svc-card .bd h3 * {
  color: #ffffff !important;
}

.svc-card .bd p {
  color: rgba(255, 255, 255, 0.75) !important;
}

.svc-card .bd .rd,
.svc-card .bd .rd span:not(.ic) {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* FIX 3: Remove dark gradient background override on card image (.pic) sections */
/* The .svc-card > div:first-child rule was hiding images with dark gradient */
.svc-card .pic:has(img),
.svc-card .svc-card-thumb:has(img) {
  background: none !important;
}

/* FIX 4: Article card number style in pic area */
.svc-card .pic .nm {
  color: rgba(255, 255, 255, 0.55) !important;
}


/* ============================================
   EASYSHOP / WMS CASE STUDY, NEW COMPONENTS
   cs-ba, cs-pillar, cs-process, cs-card-dark
   ============================================ */

/* Before/After comparison block */
.cs-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 48px;
}

.cs-ba-col {
  padding: 36px 32px;
  position: relative;
}

.cs-ba-before {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-right: none;
  border-radius: 16px 0 0 16px;
}

.cs-ba-after {
  background: rgba(237, 28, 36, 0.12);
  border: 1px solid rgba(237, 28, 36,0.25);
  border-left: none;
  border-radius: 0 16px 16px 0;
}

.cs-ba-col .tag {
  display: inline-block;
  font-family: 'Houschka-medium', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.cs-ba-before .tag {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5) !important;
}

.cs-ba-after .tag {
  background: rgba(237, 28, 36,0.2);
  color: #66aaff !important;
}

.cs-ba-col h3 {
  font-family: 'Houschka-medium', Inter, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff !important;
  margin-bottom: 20px;
  line-height: 1.3;
}

.cs-ba-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cs-ba-col ul li {
  padding: 8px 0 8px 20px;
  position: relative;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.cs-ba-col ul li:last-child { border-bottom: none; }

.cs-ba-before ul li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: rgba(255,100,100,0.7);
  font-size: 0.75rem;
  top: 9px;
}

.cs-ba-after ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #66aaff;
  font-weight: 700;
  top: 8px;
}

/* Pillar grid, 2×2 feature pillars */
.cs-pillar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}

.cs-pillar {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 28px 26px;
}

.cs-pillar .icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: rgba(255,255,255,0.65);
}

.cs-pillar h4 {
  font-family: 'Houschka-medium', Inter, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff !important;
  margin-bottom: 8px;
  line-height: 1.3;
}

.cs-pillar p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.6;
  margin: 0;
}

/* Process list */
.cs-process {
  margin-top: 40px;
}

.cs-process-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid #D0DCF0;
}

.cs-process-row:last-child { border-bottom: none; }

.cs-step-num {
  font-family: 'Houschka-medium', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  color: #ED1C24;
  letter-spacing: 0.08em;
  padding-top: 3px;
}

.cs-process-row h4 {
  font-family: 'Houschka-medium', Inter, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0A0F1E;
  margin-bottom: 6px;
  line-height: 1.3;
}

.cs-process-row p {
  font-size: 0.9rem;
  color: #5A6480;
  line-height: 1.6;
  margin: 0;
}

/* cs-card-dark, dark variant of cs-card used in soft/white sections */
.cs-card.cs-card-dark,
.cs-card-dark {
  background: #0A0F1E !important;
  border-color: #0A0F1E !important;
  color: #fff;
}

.cs-card-dark .num {
  color: rgba(255,255,255,0.4) !important;
}

.cs-card-dark h3 {
  color: #fff !important;
}

.cs-card-dark p {
  color: rgba(255,255,255,0.65) !important;
}

/* Dark section cs-grid-2 with cs-card-dark */
.cs-section.dark .cs-grid-2 .cs-card {
  background: #1a1a1a;
  border-color: rgba(255,255,255,0.08);
}

/* Responsive */
@media (max-width: 900px) {
  .cs-ba { grid-template-columns: 1fr; }
  .cs-ba-before { border-right: 1px solid rgba(255,255,255,0.08); border-radius: 16px 16px 0 0; }
  .cs-ba-after { border-left: 1px solid rgba(237, 28, 36,0.25); border-radius: 0 0 16px 16px; }
  .cs-pillar-grid { grid-template-columns: 1fr; }
  .cs-process-row { grid-template-columns: 40px 1fr; gap: 14px; }
}


/* ============================================
   BEFORE/AFTER, WHITE SECTION OVERRIDES
   cs-ba is in cs-section (white bg), not dark
   ============================================ */

/* BA in a light/white section, dark text */
.cs-section:not(.dark) .cs-ba-before {
  background: #f9f9f9;
  border: 1px solid #D0DCF0;
  border-right: none;
}

.cs-section:not(.dark) .cs-ba-after {
  background: #EEF5FF;
  border: 1px solid #A8C8F0;
  border-left: none;
}

.cs-section:not(.dark) .cs-ba-before .tag {
  background: #e8e8e8;
  color: #5A6480 !important;
}

.cs-section:not(.dark) .cs-ba-after .tag {
  background: #C8E0FF;
  color: #0055AA !important;
}

.cs-section:not(.dark) .cs-ba-col h3 {
  color: #0A0F1E !important;
}

.cs-section:not(.dark) .cs-ba-col ul li {
  color: #5A6480 !important;
  border-bottom-color: #E8EEF8;
}

.cs-section:not(.dark) .cs-ba-before ul li::before {
  color: rgba(200, 60, 60, 0.75);
}

.cs-section:not(.dark) .cs-ba-after ul li::before {
  color: #ED1C24;
}

/* Meta card spans, force white in hero */
.cs-hero .cs-meta-row span,
.cs-hero .cs-meta-card span { color: rgba(255,255,255,0.85) !important; }
.cs-hero .cs-meta-row span:first-child,
.cs-hero .cs-meta-card .cs-meta-row > span:first-child { color: rgba(255,255,255,0.45) !important; }

/* Pillar grid text in dark section */
.cs-section.dark .cs-pillar h4 { color: #fff !important; }
.cs-section.dark .cs-pillar p { color: rgba(255,255,255,0.55) !important; }

/* cs-section (white) process rows */
.cs-section:not(.dark) .cs-step-num { color: #ED1C24 !important; }
.cs-section:not(.dark) .cs-process-row h4 { color: #0A0F1E !important; }
.cs-section:not(.dark) .cs-process-row p { color: #5A6480 !important; }
.cs-section:not(.dark) .cs-process-row { border-bottom-color: #D0DCF0; }


/* =============================================
   MANIFESTO PAGE LAYOUT FIXES
   ============================================= */

/* FIX 1: mf-pull - pull quote blocks (were white text on white/light bg) */
.mf-pull {
  background: rgb(15, 23, 42) !important;
  color: #ffffff !important;
  border-left: 4px solid #ED1C24 !important;
  padding: 20px 28px !important;
  margin: 28px 0 !important;
  font-size: 1.1rem !important;
  font-style: italic !important;
  border-radius: 0 8px 8px 0 !important;
  line-height: 1.6 !important;
}

.mf-pull * {
  color: #ffffff !important;
}

/* FIX 2: mf-sig - founder signature (was white, nearly invisible) */
.mf-sig {
  color: rgb(33, 37, 41) !important;
  margin-top: 24px !important;
  font-style: italic !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.mf-sig * {
  color: rgb(33, 37, 41) !important;
}

/* FIX 3: mf-grid - layout for both promise and refuse cards */
.mf-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  margin-top: 32px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* FIX 4: mf-pcard - Promise cards */
.mf-pcard {
  padding: 22px 24px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.mf-pcard:nth-child(even) {
  border-right: none !important;
}

.mf-pcard h3 {
  font-size: 0.97rem !important;
  font-weight: 600 !important;
  color: rgb(15, 23, 42) !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  line-height: 1.4 !important;
}

.mf-pcard h3 * {
  color: rgb(15, 23, 42) !important;
}

/* FIX 5: pc-num - numbered labels (01-06) */
.pc-num {
  display: inline-block !important;
  flex-shrink: 0 !important;
  min-width: 28px !important;
  color: #ED1C24 !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  font-family: 'Houschka-medium', sans-serif !important;
  padding-top: 2px !important;
}

.mf-pcard p {
  font-size: 0.88rem !important;
  color: rgba(33, 37, 41, 0.72) !important;
  line-height: 1.55 !important;
  padding-left: 38px !important;
  margin: 0 !important;
}

/* FIX 6: mf-rcard - Refuse cards */
.mf-rcard {
  padding: 22px 24px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.mf-rcard:nth-child(even) {
  border-right: none !important;
}

.mf-rcard h4 {
  font-size: 0.97rem !important;
  font-weight: 600 !important;
  color: rgb(15, 23, 42) !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  line-height: 1.4 !important;
}

.mf-rcard h4 * {
  color: rgb(15, 23, 42) !important;
}

/* FIX 7: rc-x - the × prefix symbol */
.rc-x {
  display: inline-block !important;
  flex-shrink: 0 !important;
  min-width: 20px !important;
  color: #cc2200 !important;
  font-weight: 700 !important;
  font-size: 1.0rem !important;
}

.mf-rcard p {
  font-size: 0.88rem !important;
  color: rgba(33, 37, 41, 0.72) !important;
  line-height: 1.55 !important;
  padding-left: 30px !important;
  margin: 0 !important;
}

/* FIX 8: mf-quote section - the blockquote section */
.mf-quote {
  background: rgb(15, 23, 42) !important;
  padding: 60px 0 !important;
}

.mf-quote .wrap {
  max-width: 900px !important;
}

.mf-quote blockquote {
  font-size: 1.15rem !important;
  font-style: italic !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin: 0 0 12px !important;
  border-left: 4px solid #ED1C24 !important;
  padding-left: 24px !important;
}

.mf-quote blockquote * {
  color: rgba(255, 255, 255, 0.88) !important;
}

.mf-quote cite {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.04em !important;
  display: block !important;
  padding-left: 28px !important;
}


/* ============================================================
   MGI SHIP, /case-mgi-cinematic/
   New components: cs-ip-band, cs-ip, cs-milestones, cs-milestone,
   ms-num, cs-pillar-5
   ============================================================ */

/* --- IP Transfer Band (white section, 3 columns) --- */
.cs-ip-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}
@media (max-width: 768px) {
  .cs-ip-band {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.cs-ip {
  background: #fff4f4;
  border: 1px solid #D0DCF0;
  border-radius: 1rem;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cs-ip .big {
  font-size: 2.5rem;
  font-weight: 800;
  color: #ED1C24 !important;
  line-height: 1;
  margin-bottom: 0.25rem;
  font-family: inherit;
}

.cs-ip h5 {
  font-size: 1rem;
  font-weight: 700;
  color: #0A0F1E !important;
  margin: 0 0 0.25rem 0;
}

.cs-ip p {
  font-size: 0.9rem;
  color: #5A6480 !important;
  margin: 0;
  line-height: 1.6;
}

/* --- Milestones (soft/light section) --- */
.cs-milestones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 768px) {
  .cs-milestones {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.cs-milestone {
  background: #ffffff;
  border: 1px solid #D0DCF0;
  border-radius: 1rem;
  padding: 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cs-milestone .ms-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ED1C24 !important;
  margin-bottom: 0.5rem;
}

.cs-milestone h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0A0F1E !important;
  margin: 0 0 0.4rem 0;
}

.cs-milestone p {
  font-size: 0.9rem;
  color: #5A6480 !important;
  margin: 0;
  line-height: 1.65;
}

/* --- Pillar-5: 5-column grid variant (dark section) --- */
.cs-pillar-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (max-width: 1024px) {
  .cs-pillar-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .cs-pillar-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* cs-pillar inside cs-pillar-5 (dark section), ensure white text */
.cs-pillar-5 .cs-pillar {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.875rem;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cs-pillar-5 .cs-pillar .icon {
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(237, 28, 36,0.2);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  color: #60AFFF !important;
}

.cs-pillar-5 .cs-pillar .icon svg {
  color: #60AFFF !important;
  stroke: #60AFFF !important;
}

.cs-pillar-5 .cs-pillar h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff !important;
  margin: 0;
  line-height: 1.3;
}

.cs-pillar-5 .cs-pillar p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65) !important;
  margin: 0;
  line-height: 1.55;
}

/* Fix icon font-size specificity override */
#dx-quiz-section .dx-opt-icon {
	  font-size: 22px !important;
	  line-height: 40px !important;
	  display: flex !important;
	  align-items: center !important;
	  justify-content: center !important;
	  text-indent: 0 !important;
	  overflow: visible !important;
	  letter-spacing: 0 !important;
}

/* ===== DIAGNOSTIC PAGE LAYOUT FIXES ===== */

/* Intro section: two-column grid */
.dx-intro-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 60px !important; align-items: start !important; }
.dx-intro-r { max-width: 720px !important; }

/* Intro CTA button */
#dx-intro .btn-p { display: inline-block !important; margin-top: 24px !important; padding: 14px 28px !important; background: #2563eb !important; color: #ffffff !important; border-radius: 6px !important; font-weight: 600 !important; font-size: 15px !important; text-decoration: none !important; }
#dx-intro .btn-p:hover { background: #1d4ed8 !important; color: #ffffff !important; }

/* Quiz sidebar dead space */
.dx-rail { justify-content: space-between !important; }

/* Footer nav items: fix inline-flex merge */
footer .nav-item, [role='contentinfo'] .nav-item { display: flex !important; width: 100% !important; margin-bottom: 6px !important; }
footer .nav-mega, [role='contentinfo'] .nav-mega { display: none !important; }

/* Pre-footer: reduce padding */
.endcta { padding: 48px 0 !important; }

/* Pre-footer phone CTA button */
.endcta a[href^="tel"] { display: inline-block !important; margin-top: 16px !important; padding: 14px 32px !important; background: transparent !important; border: 2px solid #3b82f6 !important; color: #60a5fa !important; border-radius: 6px !important; font-weight: 600 !important; font-size: 17px !important; text-decoration: none !important; }

/* Quiz container margin */
#dx-quiz-section .dx-grid { margin: 0 24px !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 4px 32px rgba(0,0,0,0.10) !important; }

/* Hero text contrast */
#dx-hero h1 { text-shadow: 0 2px 16px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4) !important; color: #ffffff !important; }
#dx-hero .hero-img { filter: brightness(0.55) !important; }

/* ===== END DIAGNOSTIC FIXES ===== */

/* ========================================
   HOW WE WORK PAGE LAYOUT FIXES
   /how-we-work-cinematic/
   ======================================== */

/* --- STEP NUMBERS (.hw-n) --- */
.hw-n {
  font-size: 80px !important;
  font-weight: 700 !important;
  color: #ED1C24 !important;
  opacity: 0.15 !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  letter-spacing: -2px !important;
}

/* --- STEP CONTAINER (.hw-step) --- */
.hw-step {
  border-top: 1px solid rgba(0,0,0,0.12) !important;
  padding: 56px 0 !important;
  display: grid !important;
  grid-template-columns: 80px 1fr 1fr !important;
  grid-template-rows: auto !important;
  gap: 0 48px !important;
  align-items: start !important;
}
.hw-step .hw-n {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  font-size: 64px !important;
  opacity: 0.18 !important;
  padding-top: 4px !important;
  margin-bottom: 0 !important;
}
.hw-step .hw-bd {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.hw-step .hw-meta {
  grid-column: 3 !important;
  grid-row: 1 !important;
  height: auto !important;
}

/* --- STEP TAG LABEL (.hw-tag) --- */
.hw-tag {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #ED1C24 !important;
  margin-bottom: 8px !important;
}

/* --- STEP HEADING & BODY --- */
.hw-bd h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: rgb(15,23,42) !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
}
.hw-bd > p {
  color: rgb(55,65,81) !important;
  margin-bottom: 16px !important;
}
.hw-bd ul {
  padding-left: 20px !important;
  margin-bottom: 20px !important;
}
.hw-bd ul li {
  color: rgb(55,65,81) !important;
  margin-bottom: 4px !important;
}

/* --- DELIVERABLE BOX (.hw-deliv) --- */
.hw-deliv {
  background: rgb(240,246,255) !important;
  border-left: 3px solid #ED1C24 !important;
  border-radius: 6px !important;
  padding: 16px 20px !important;
  margin-top: 20px !important;
}
.hw-deliv .l {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #ED1C24 !important;
  margin-bottom: 6px !important;
}
.hw-deliv .t {
  font-size: 15px !important;
  color: rgb(15,23,42) !important;
  font-style: italic !important;
  line-height: 1.5 !important;
}

/* --- DURATION + CLOCK ICON (.hw-dur) --- */
.hw-dur {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgb(55,65,81) !important;
  margin-bottom: 12px !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
.hw-dur svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: #ED1C24 !important;
  stroke: currentColor !important;
}
.hw-meta > p {
  font-size: 14px !important;
  color: rgb(75,85,99) !important;
  line-height: 1.6 !important;
  font-style: italic !important;
}

/* --- METRIC NUMBERS + LABELS (.num, .lab) --- */
.hw-metric .num {
  font-size: 56px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.hw-metric .lab {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  display: block !important;
}

/* --- FAQ ITEMS (.hw-faq-item, .hw-faq-q, .hw-faq-a) --- */
.hw-faq-item {
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  padding: 0 !important;
}
.hw-faq-q {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px 0 !important;
  cursor: pointer !important;
  color: rgb(15,23,42) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  gap: 16px !important;
}
.hw-faq-q span:first-child {
  flex: 1 !important;
}
.hw-faq-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(15,23,42,0.3) !important;
  font-size: 18px !important;
  color: #ED1C24 !important;
  font-weight: 300 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  transition: transform 0.3s ease !important;
}
.hw-faq-a {
  padding-bottom: 20px !important;
}
.hw-faq-a-in,
.hw-faq-a > p,
.hw-faq-a p {
  color: rgb(55,65,81) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* --- ARTICLE PAGES: Color Fixes (beat global !important) --- */
/* ============================================================
   ARTICLE PAGE, Unified, polished typography & layout
   Font: Inter throughout. Single source of truth.
   ============================================================ */

/* ------ HERO (dark navy header band) ------ */
.article-hero {
  background: #0A0F1E;
  padding: 4rem 2rem 3.5rem;
}
.article-hero-inner {
  max-width: 900px;
  margin: 0 auto;
}
.article-tag {
  display: inline-block;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: rgba(237, 28, 36,0.15);
  border: 1px solid rgba(237, 28, 36,0.3);
  border-radius: 2rem;
  padding: 0.3rem 0.9rem;
  margin-bottom: 1.25rem;
  color: #60AFFF !important;
  font-family: Inter, system-ui, sans-serif !important;
}
.article-title,
.article-hero h1,
.article-hero .article-title {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: clamp(1.9rem, 3.5vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  margin: 0 0 1rem 0 !important;
}
.article-subtitle,
.article-hero p.article-subtitle {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  color: rgba(255,255,255,0.72) !important;
  margin: 0 0 1.5rem 0 !important;
  max-width: 680px;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.article-date,
.article-read-time,
.article-topic,
.article-hero .article-meta span {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
}

/* ------ ARTICLE BODY WRAPPER ------ */
.article-body {
  background: #ffffff;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* ------ ARTICLE CONTENT (white reading area) ------ */
.article-content {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 4rem 2rem 5rem !important;
  background: #ffffff;
}

/* ------ LEAD PARAGRAPH (first big intro) ------ */
.article-content p.lead,
.article-content .article-lead,
.article-lead {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
  letter-spacing: -0.01em !important;
  color: #1A2035 !important;
  margin: 0 0 2.5rem 0 !important;
  padding-bottom: 2rem !important;
  border-bottom: 2px solid #ED1C24 !important;
  font-style: normal !important;
}

/* ------ BODY PARAGRAPHS ------ */
.article-content > p,
.article-content p {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  line-height: 1.85 !important;
  letter-spacing: 0 !important;
  color: #2D3748 !important;
  margin: 0 0 1.6rem 0 !important;
  font-style: normal !important;
}

/* ------ H2 SECTION HEADINGS ------ */
.article-content h2 {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: clamp(1.45rem, 2.5vw, 1.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: #0A0F1E !important;
  margin: 3.5rem 0 1.1rem 0 !important;
  padding-top: 0 !important;
}

/* ------ H3 SUB-HEADINGS ------ */
.article-content h3 {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: #0A0F1E !important;
  margin: 2.5rem 0 0.8rem 0 !important;
}

/* ------ H4 MICRO-HEADINGS ------ */
.article-content h4 {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #ED1C24 !important;
  margin: 2rem 0 0.6rem 0 !important;
}

/* ------ STRONG / BOLD ------ */
.article-content strong,
.article-content b {
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: #0A0F1E !important;
}

/* ------ BLOCKQUOTE (pull-quote callout) ------ */
.article-content blockquote {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
  color: #0A2744 !important;
  background: #EFF6FF !important;
  border-left: 4px solid #ED1C24 !important;
  border-radius: 0 0.75rem 0.75rem 0 !important;
  padding: 1.25rem 1.75rem !important;
  margin: 2.5rem 0 !important;
}
.article-content blockquote p {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
  color: #0A2744 !important;
  margin: 0 !important;
}

/* ------ LISTS ------ */
.article-content ul,
.article-content ol {
  margin: 0 0 1.6rem 1.6rem !important;
  padding: 0 !important;
}
.article-content li,
.article-content > ul li,
.article-content > ol li {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  letter-spacing: 0 !important;
  color: #2D3748 !important;
  margin-bottom: 0.55rem !important;
  font-style: normal !important;
}

/* ------ CALLOUT BOX ------ */
.article-callout {
  background: #EFF6FF;
  border-left: 4px solid #ED1C24;
  border-radius: 0 0.75rem 0.75rem 0;
  padding: 1.5rem 1.75rem;
  margin: 2.5rem 0;
}
.article-callout p,
.article-callout p strong {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
  color: #0A2744 !important;
  margin: 0 !important;
}
.article-callout p strong {
  font-weight: 700 !important;
  color: #003D80 !important;
}

/* ------ STAT ROW ------ */
.article-stat-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.25rem;
  margin: 2.5rem 0;
}
.article-stat {
  background: #fff4f4;
  border: 1px solid #D0DCF0;
  border-radius: 0.875rem;
  padding: 1.25rem;
}
.article-stat-number {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: #ED1C24 !important;
}
.article-stat-label {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.01em !important;
  color: #5A6480 !important;
}

/* ------ CTA BLOCK (dark gradient) ------ */
.article-cta-block {
  background: linear-gradient(135deg, #0A0F1E, #1A2744);
  border-radius: 1.25rem;
  padding: 2.5rem;
  margin: 3.5rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* High-specificity overrides for CTA block inside article-content */
.article-content .article-cta-block h2,
.article-content .article-cta-block h3,
.article-content .article-cta-block h2 *,
.article-content .article-cta-block h3 * {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 0 0.5rem 0 !important;
  padding: 0 !important;
}
.article-content .article-cta-block p,
.article-content .article-cta-block p * {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
  color: rgba(255,255,255,0.78) !important;
  margin: 0 !important;
  font-style: normal !important;
}
.article-cta-btn {
  display: inline-flex;
  align-items: center;
  background: #ED1C24;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none;
  padding: 0.85rem 1.85rem;
  border-radius: 2rem;
  margin-top: 0.5rem;
  align-self: flex-start;
  color: #ffffff !important;
}
.article-cta-btn:hover {
  background: #0052A3;
  color: #ffffff !important;
  text-decoration: none;
}



/* ============================================================
   DIAGNOSTIC PAGE, PREMIUM AGENCY REDESIGN
   High-end marketing agency quality layout
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root {
  --dg-gold:       #c9a84c;
  --dg-gold-light: #e8c97a;
  --dg-blue:       #1a56f0;
  --dg-blue-bright:#3b82f6;
  --dg-ink:        #07080a;
  --dg-dark:       #0d1117;
  --dg-surface:    #111827;
  --dg-panel:      #161d2b;
  --dg-card:       #1c2436;
  --dg-border:     rgba(255,255,255,0.08);
  --dg-border-hi:  rgba(201,168,76,0.45);
  --dg-text:       #f0f2f5;
  --dg-muted:      rgba(240,242,245,0.55);
  --dg-radius:     14px;
  --dg-transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ══════════════════════════════════════════
   HERO, Full-bleed cinematic
   ══════════════════════════════════════════ */

#dx-hero {
  position: relative !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  background: var(--dg-ink) !important;
}

#dx-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    120deg,
    rgba(7,8,10,0.92) 0%,
    rgba(7,8,10,0.70) 50%,
    rgba(7,8,10,0.40) 100%
  ) !important;
  z-index: 1 !important;
}

#dx-hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 280px !important;
  background: linear-gradient(to top, var(--dg-dark) 0%, transparent 100%) !important;
  z-index: 1 !important;
}

#dx-hero .hero-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  filter: brightness(0.7) saturate(0.8) !important;
  transform: scale(1.03) !important;
}

#dx-hero .hero-in {
  position: relative !important;
  z-index: 2 !important;
  padding: 0 80px 100px !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  max-width: 1200px !important;
}

/* Breadcrumb */
#dx-hero .hero-in > *:first-child,
#dx-hero .hero-pre {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--dg-gold) !important;
  margin-bottom: 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#dx-hero .hero-in > *:first-child::before {
  content: '' !important;
  display: inline-block !important;
  width: 32px !important;
  height: 1px !important;
  background: var(--dg-gold) !important;
  opacity: 0.7 !important;
}

/* Hero Headline */
#dx-hero h1 {
  font-size: clamp(3.2rem, 6vw, 5.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  max-width: 800px !important;
  margin-bottom: 40px !important;
  text-shadow: 0 4px 40px rgba(0,0,0,0.5) !important;
}

/* Hero CTA row */
#dx-hero .hero-in a,
#dx-hero .hero-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

#dx-hero .hero-in a svg,
#dx-hero .hero-in a > span:last-child {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--dg-transition) !important;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(6px) !important;
}

/* Scroll indicator */
#dx-hero .scrollcue {
  position: absolute !important;
  bottom: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  color: rgba(255,255,255,0.35) !important;
}

/* ══════════════════════════════════════════
   INTRO, Premium dark editorial split
   ══════════════════════════════════════════ */

#dx-intro {
  background: var(--dg-dark) !important;
  padding: 120px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

#dx-intro::before {
  content: '' !important;
  position: absolute !important;
  top: -200px !important;
  right: -200px !important;
  width: 600px !important;
  height: 600px !important;
  background: radial-gradient(circle, rgba(26,86,240,0.08) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

#dx-intro .wrap {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 80px !important;
}

.dx-intro-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px !important;
  align-items: center !important;
}

/* Left: Large editorial heading */
.dx-intro-l h2 {
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.dx-intro-l h2 br + * ,
.dx-intro-l h2::after {
  display: block !important;
  content: '' !important;
  width: 48px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--dg-gold), transparent) !important;
  margin-top: 28px !important;
  border-radius: 2px !important;
}

/* Right: body + CTA */
.dx-intro-r {
  max-width: 560px !important;
}

.dx-intro-r p {
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: var(--dg-muted) !important;
  margin-bottom: 20px !important;
}

#dx-intro .btn-p {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 12px !important;
  padding: 16px 32px !important;
  background: linear-gradient(135deg, var(--dg-blue) 0%, #1241c7 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 32px rgba(26,86,240,0.35) !important;
  transition: var(--dg-transition) !important;
}

#dx-intro .btn-p:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(26,86,240,0.5) !important;
  color: #ffffff !important;
}

#dx-intro .btn-p::after {
  content: '→' !important;
  font-size: 16px !important;
}

/* ══════════════════════════════════════════
   QUIZ SECTION, Premium dark interactive
   ══════════════════════════════════════════ */

#dx-quiz-section {
  background: var(--dg-dark) !important;
  padding: 0 80px 120px !important;
}

/* dx-grid base styles (no column count here, set per breakpoint below) */
#dx-quiz-section .dx-grid {
  display: grid !important;
  gap: 0 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--dg-border) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 32px 80px rgba(0,0,0,0.6),
    0 8px 24px rgba(0,0,0,0.4) !important;
}

/* Desktop: 2-column layout */
@media (min-width: 769px) {
  #dx-quiz-section .dx-grid {
    grid-template-columns: 340px 1fr !important;
  }
}

/* Mobile: single column, left panel goes above quiz */
@media (max-width: 768px) {
  #dx-quiz-section .dx-grid {
    grid-template-columns: 1fr !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  #dx-quiz-section .dx-rail {
    padding: 28px 20px !important;
    min-height: auto !important;
    position: static !important;
  }
  #dx-quiz-section .dx-stage-r {
    padding: 28px 20px 24px !important;
  }
  #dx-quiz-section {
    padding: 0 0 60px !important;
  }
}

/* ── SIDEBAR ── */
.dx-rail {
  background: var(--dg-panel) !important;
  padding: 48px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 560px !important;
  border-right: 1px solid var(--dg-border) !important;
  position: relative !important;
  overflow: hidden !important;
}

.dx-rail::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--dg-gold) 0%, var(--dg-blue-bright) 100%) !important;
}

.dx-rail::after {
  content: '' !important;
  position: absolute !important;
  bottom: -80px !important;
  right: -80px !important;
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.dx-rail-top .dx-rail-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--dg-gold) !important;
  margin-bottom: 16px !important;
}

.dx-rail-top h3,
.dx-rail-top .dx-rail-heading {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 14px !important;
}

.dx-rail-top p,
.dx-rail-top .dx-rail-desc {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--dg-muted) !important;
}

/* Progress */
.dx-rail-progress {
  padding: 0 !important;
}

.dx-rail-progress > *:first-child {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: rgba(255,255,255,0.4) !important;
  text-transform: uppercase !important;
}

/* Progress bar track */
.dx-rail-progress .dx-prog-bar,
.dx-rail-progress > div:nth-child(2),
.dx-rail-progress [class*="bar"],
.dx-rail-progress [class*="track"] {
  height: 3px !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
}

/* Progress dots */
.dx-rail-progress [class*="dot"],
.dx-rail-progress .dx-dots > *,
.dx-rail-progress > *:last-child > * {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  transition: background 0.2s !important;
}

/* Foot / anonymous badge */
.dx-rail-foot {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--dg-border) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
}

.dx-rail-foot strong,
.dx-rail-foot b {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
}

.dx-rail-foot p,
.dx-rail-foot small {
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  color: var(--dg-muted) !important;
}

/* ── QUESTION PANEL ── */
.dx-stage-r {
  background: var(--dg-surface) !important;
  padding: 56px 64px 52px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Question number */
.dx-q-num {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--dg-gold) !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.dx-q-num::before {
  content: '' !important;
  display: inline-block !important;
  width: 24px !important;
  height: 1.5px !important;
  background: var(--dg-gold) !important;
  opacity: 0.6 !important;
}

/* Question text */
.dx-q-text {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  color: var(--dg-text) !important;
  margin-bottom: 10px !important;
}

/* Sub-hint */
.dx-q-sub {
  font-size: 13.5px !important;
  color: var(--dg-muted) !important;
  margin-bottom: 36px !important;
  line-height: 1.6 !important;
}

/* ── ANSWER OPTIONS GRID ── */
.dx-opts {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-bottom: 40px !important;
  flex: 1 !important;
}

/* Individual option card */
.dx-opt {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding: 22px 24px 22px 22px !important;
  background: var(--dg-card) !important;
  border: 1px solid var(--dg-border) !important;
  border-radius: var(--dg-radius) !important;
  cursor: pointer !important;
  transition: var(--dg-transition) !important;
  text-align: left !important;
  width: 100% !important;
  overflow: hidden !important;
}

.dx-opt::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: var(--dg-radius) !important;
  background: linear-gradient(135deg, rgba(201,168,76,0) 0%, rgba(201,168,76,0) 100%) !important;
  transition: var(--dg-transition) !important;
  opacity: 0 !important;
}

.dx-opt:hover {
  border-color: rgba(201,168,76,0.4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,168,76,0.2) !important;
}

.dx-opt:hover::before {
  opacity: 1 !important;
  background: linear-gradient(135deg, rgba(201,168,76,0.05) 0%, rgba(26,86,240,0.03) 100%) !important;
}

/* Selected state */
.dx-opt.dx-selected,
.dx-opt[aria-pressed="true"] {
  border-color: var(--dg-gold) !important;
  background: rgba(201,168,76,0.08) !important;
  box-shadow: 0 0 0 1px var(--dg-gold), 0 8px 32px rgba(201,168,76,0.15) !important;
}

/* Radio indicator top-right */
.dx-opt input[type="radio"],
.dx-opt > *:last-child:not(.dx-opt-body) {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,0.18) !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Icon */
#dx-quiz-section .dx-opt-icon {
  font-size: 24px !important;
  line-height: 1 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  flex-shrink: 0 !important;
  text-indent: 0 !important;
  overflow: visible !important;
  letter-spacing: 0 !important;
}

.dx-opt:hover .dx-opt-icon {
  background: rgba(201,168,76,0.12) !important;
  border-color: rgba(201,168,76,0.2) !important;
}

/* Label & desc */
.dx-opt-label {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--dg-text) !important;
  display: block !important;
  margin-bottom: 4px !important;
  letter-spacing: -0.01em !important;
}

.dx-opt-desc {
  font-size: 12px !important;
  color: var(--dg-muted) !important;
  line-height: 1.5 !important;
  display: block !important;
}

/* ── NAV BUTTONS ── */
.dx-q-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--dg-border) !important;
}

.dx-q-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  background: transparent !important;
  border: 1px solid var(--dg-border) !important;
  border-radius: 8px !important;
  color: var(--dg-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--dg-transition) !important;
  letter-spacing: 0.02em !important;
}

.dx-q-back:hover {
  border-color: rgba(255,255,255,0.25) !important;
  color: #ffffff !important;
  background: rgba(255,255,255,0.04) !important;
}

#dx-next {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 32px !important;
  background: linear-gradient(135deg, var(--dg-blue) 0%, #1241c7 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  transition: var(--dg-transition) !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 24px rgba(26,86,240,0.35) !important;
}

#dx-next:hover:not([disabled]) {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(26,86,240,0.5) !important;
}

#dx-next[disabled] {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════
   PRE-FOOTER CTA, Cinematic dark
   ══════════════════════════════════════════ */

.endcta {
  background: linear-gradient(180deg, var(--dg-dark) 0%, var(--dg-ink) 100%) !important;
  padding: 100px 80px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.endcta::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 800px !important;
  height: 400px !important;
  background: radial-gradient(ellipse, rgba(26,86,240,0.07) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.endcta p,
.endcta > *:not(a) {
  position: relative !important;
  z-index: 1 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--dg-muted) !important;
  max-width: 540px !important;
  margin: 0 auto 32px !important;
}

.endcta strong,
.endcta b {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.endcta a[href^="tel"] {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 8px !important;
  padding: 18px 40px !important;
  background: transparent !important;
  border: 1.5px solid rgba(201,168,76,0.5) !important;
  border-radius: 8px !important;
  color: var(--dg-gold-light) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: var(--dg-transition) !important;
}

.endcta a[href^="tel"]:hover {
  background: rgba(201,168,76,0.08) !important;
  border-color: var(--dg-gold) !important;
  color: var(--dg-gold-light) !important;
  box-shadow: 0 8px 32px rgba(201,168,76,0.15) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════
   FOOTER, Premium dark
   ══════════════════════════════════════════ */

footer,
[role="contentinfo"] {
  background: var(--dg-ink) !important;
  border-top: 1px solid var(--dg-border) !important;
}

footer .wrap,
[role="contentinfo"] .wrap {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

footer .foot-grid,
[role="contentinfo"] .foot-grid {
  padding: 80px !important;
  gap: 60px !important;
}

footer .brand-logo,
[role="contentinfo"] .brand-logo {
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

footer h5,
[role="contentinfo"] h5 {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--dg-gold) !important;
  margin-bottom: 20px !important;
}

footer .nav-item,
[role="contentinfo"] .nav-item {
  display: flex !important;
  width: 100% !important;
  margin-bottom: 6px !important;
}

footer .nav-mega,
[role="contentinfo"] .nav-mega {
  display: none !important;
}

footer a,
[role="contentinfo"] a {
  font-size: 13.5px !important;
  color: rgba(255,255,255,0.5) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

footer a:hover,
[role="contentinfo"] a:hover {
  color: #ffffff !important;
}

/* ══════════════════════════════════════════
   MICRO DETAILS
   ══════════════════════════════════════════ */

/* Smooth all transitions on diagnostic */
#dx-quiz-section * {
  box-sizing: border-box !important;
}

/* Progress dots visual upgrade */
.dx-prog-dots span,
.dx-dots span,
[class*="prog"] > span {
  transition: background 0.3s, transform 0.3s !important;
}

/* ============================================================
   END PREMIUM REDESIGN
   ============================================================ */


/* ============================================================
   ALL ARTICLE PAGES, article.article template
   Applies to: /article-custom-software-vs-saas/,
   /article-custom-erp-systems/, /article-cayman-custom-software-ai/,
   /article-cayman-competitive-edge/, and all future article-* pages
   ============================================================ */

/* Article body container */
article.article {
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 3.5rem 2rem 4rem !important;
}

.acc-head .num {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #ED1C24 !important;
  min-width: 1.5rem !important;
}

.acc-body {
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: #5A6480 !important;
  padding-top: 0.75rem !important;
}

/* Service cards grid, scoped to desktop only to avoid overriding mobile rules */
@media (min-width: 1001px) {
  .svc-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    margin-top: 2rem !important;
  }
}

/* 2-col tablet (681px-1000px) */
@media (max-width: 1000px) {
  .svc-grid { grid-template-columns: 1fr 1fr !important; gap: 1.25rem !important; margin-top: 1.5rem !important; }
}

/* 1-col mobile (680px and below) */
@media (max-width: 680px) {
  .svc-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
}

.svc-card {
  background: #000000 !important;
  border-radius: 1rem !important;
  padding: 2rem 1.75rem !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  transition: transform 0.2s !important;
}

.svc-card:hover {
  transform: translateY(-3px) !important;
}

.svc-card .nm-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
}

.svc-card .nm-desc {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.65) !important;
}

.svc-card .nm-cta {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #60AFFF !important;
  margin-top: auto !important;
}


/* ================================================
   TOOLS PAGE, TCS BLACK & WHITE, /tools-cinematic/ ONLY
   ALL rules scoped to .page-id-14494 body class
   ================================================ */

/* ---- DESIGN TOKENS (scoped via class) ---- */

/* ---- PAGE BACKGROUNDS, tools page only ---- */
.page-id-14494 #tools,
.page-id-14494 #tools .wrap,
.page-id-14494 .sec,
.page-id-14494 section.sec {
  background: #000000 !important;
}

/* ---- INTRO LEAD HEADING ---- */
.page-id-14494 .lead-h2 {
  font-family: 'Basis-regular',"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif !important;
  color: #ffffff !important;
  font-size: clamp(2.4rem, 3.6vw, 3.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
}

.page-id-14494 .prose {
  font-family: 'Basis-regular',"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
}

/* ---- SECTION PADDING ---- */
.page-id-14494 #tools {
  padding-top: 72px !important;
  padding-bottom: 96px !important;
}

/* ---- GROUP CONTAINERS ---- */
.page-id-14494 .tr-group {
  margin-bottom: 64px !important;
}
.page-id-14494 .tr-group:last-child {
  margin-bottom: 0 !important;
}

.page-id-14494 .tr-group-h {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  padding-bottom: 16px !important;
  margin-bottom: 32px !important;
  border-bottom: 1px solid rgba(255,255,255,0.22) !important;
  gap: 32px !important;
}

.page-id-14494 .tr-group-h .l .eyebrow,
.page-id-14494 .tr-group-h .eyebrow {
  display: block !important;
  font-family: 'Basis-regular',"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
  margin-bottom: 6px !important;
}

.page-id-14494 .tr-group-h .l h3,
.page-id-14494 .tr-group-h h3 {
  font-family: 'Basis-regular',"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif !important;
  color: #ffffff !important;
  font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}

.page-id-14494 .tr-group-h .r {
  font-family: 'Basis-regular',"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.88rem !important;
  line-height: 1.7 !important;
  max-width: 400px !important;
  text-align: right !important;
}

/* ---- CARDS GRID ---- */
.page-id-14494 .tr-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

.page-id-14494 .tr-grid.two {
  grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 900px) {
  .page-id-14494 .tr-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .page-id-14494 .tr-grid,
  .page-id-14494 .tr-grid.two { grid-template-columns: 1fr !important; }
}

/* ---- TOOL CARDS ---- */
.page-id-14494 .tr-card {
  display: flex !important;
  flex-direction: column !important;
  background: #000000 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 32px 28px 28px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  transition: background 0.2s ease !important;
  position: relative !important;
  min-height: 240px !important;
}

.page-id-14494 .tr-card:hover {
  background: #141414 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.page-id-14494 .tr-card::before {
  content: none !important;
}

.page-id-14494 .tr-card.dark {
  background: #000000 !important;
}
.page-id-14494 .tr-card.dark:hover {
  background: #141414 !important;
}
.page-id-14494 .tr-card.dark h4,
.page-id-14494 .tr-card.dark p,
.page-id-14494 .tr-card.dark .rd {
  color: #ffffff !important;
}
.page-id-14494 .tr-card.dark .tr-card-tag {
  color: rgba(255,255,255,0.55) !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* ---- CARD ICON ---- */
.page-id-14494 .tr-card-ic {
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 20px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}
.page-id-14494 .tr-card-ic svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}
.page-id-14494 .tr-card:hover .tr-card-ic {
  border-color: rgba(255,255,255,0.6) !important;
  background: transparent !important;
}

/* ---- TAG BADGE ---- */
.page-id-14494 .tr-card .tr-card-tag,
.page-id-14494 .tr-card-tag {
  display: inline-block !important;
  font-family: 'Basis-regular',"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.6) !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 2px !important;
  padding: 3px 8px !important;
  margin-bottom: 14px !important;
}
.page-id-14494 .tr-card .tr-card-tag.free {
  color: rgba(255,255,255,0.8) !important;
  border-color: rgba(255,255,255,0.4) !important;
  background: transparent !important;
}
.page-id-14494 .tr-card .tr-card-tag.sales {
  color: rgba(255,255,255,0.8) !important;
  border-color: rgba(255,255,255,0.4) !important;
  background: transparent !important;
}

/* ---- CARD TYPOGRAPHY ---- */
.page-id-14494 .tr-card h4 {
  font-family: 'Basis-regular',"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif !important;
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.015em !important;
}

.page-id-14494 .tr-card p,
.page-id-14494 .tr-card > p {
  font-family: 'Basis-regular',"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.85rem !important;
  line-height: 1.75 !important;
  margin: 0 0 20px !important;
  flex: 1 !important;
}

/* ---- CARD CTA LINK ---- */
.page-id-14494 .rd {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Basis-regular',"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin-top: auto !important;
  text-decoration: none !important;
}
.page-id-14494 .tr-card:hover .rd {
  gap: 10px !important;
  color: #ffffff !important;
}
.page-id-14494 .rd .arrow {
  display: inline-flex !important;
  align-items: center !important;
}
.page-id-14494 .rd .arrow svg,
.page-id-14494 .arrow svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}

/* ---- END CTA SECTION, tools page only ---- */
.page-id-14494 section.endcta {
  background: #000000 !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  padding: clamp(80px, 10vw, 130px) 0 !important;
}

.page-id-14494 section.endcta::before {
  content: none !important;
}

.page-id-14494 .endcta h2 {
  font-family: 'Basis-regular',"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif !important;
  color: #ffffff !important;
  font-size: clamp(2.4rem, 5vw, 5rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  text-align: center !important;
}

.page-id-14494 .endcta p {
  color: rgba(255,255,255,0.5) !important;
  text-align: center !important;
  font-size: 1rem !important;
  max-width: 460px !important;
  margin: 0 auto 40px !important;
}

.page-id-14494 .endcta a,
.page-id-14494 .endcta .btn-p {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff !important;
  color: #000000 !important;
  font-family: 'Basis-regular',"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 15px 36px !important;
  border-radius: 2px !important;
  text-decoration: none !important;
}
.page-id-14494 .endcta a:hover,
.page-id-14494 .endcta .btn-p:hover {
  background: rgba(255,255,255,0.88) !important;
  color: #000000 !important;
}

/* ---- WRAP WIDTH ---- */
.page-id-14494 #tools > .wrap {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
}


/* === FIX: tech-card visibility in dark/black sections === */
.sec.black .tech-card,
.sec.dark .tech-card {
  background: #1a1f2e !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.sec.black .tech-card h3,
.sec.black .tech-card h2,
.sec.dark .tech-card h3,
.sec.dark .tech-card h2 {
  color: #ffffff !important;
}
.sec.black .tech-card > p,
.sec.dark .tech-card > p {
  color: rgba(255,255,255,0.75) !important;
}
.sec.black .tech-card .tnum,
.sec.dark .tech-card .tnum {
  color: rgba(255,255,255,0.25) !important;
}
.sec.black .tech-card .tech-tags span,
.sec.dark .tech-card .tech-tags span {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* ============================================================
   DIAGNOSTIC PAGE REDESIGN
   - Intro/content: WHITE bg, BLACK text
   - Quiz/bot section: BLACK bg, WHITE text
   - Answer boxes: NO icons, text only
   ============================================================ */

/* ---- HERO: dark with background photo ---- */
#dx-hero { background: #000 !important; }
#dx-hero h1, #dx-hero h1 .hl-w, #dx-hero .hero-in * { color: #fff !important; }

/* ---- INTRO SECTION: WHITE bg, BLACK text ---- */
#dx-intro, #dx-intro.sec { background: #ffffff !important; }
#dx-intro *, #dx-intro h2, #dx-intro p, #dx-intro a { color: #111111 !important; }
#dx-intro .btn-p, #dx-intro a.btn-p { background: #0055cc !important; color: #ffffff !important; }
#dx-intro .btn-p::after { display: none !important; }

/* ---- QUIZ / BOT SECTION: pure BLACK bg, WHITE text ---- */
.dx-stage, #dx-quiz-section { background: #000000 !important; }
.dx-grid {
  background: #000000 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Sidebar / rail: black */
.dx-rail {
  background: #0a0a0a !important;
  border-right: 1px solid rgba(255,255,255,0.1) !important;
}
.dx-rail * { color: #ffffff !important; }
.dx-rail-crumb { opacity: 0.55 !important; font-size: 0.68rem !important; }
.dx-rail-sub { opacity: 0.65 !important; }
.dx-rail-foot { opacity: 0.45 !important; }
.dx-rail::before { background: #0055cc !important; height: 3px !important; }
.dx-rail-bar { background: rgba(255,255,255,0.12) !important; }
.dx-rail-bar-fill { background: #0055cc !important; }

/* Question / right side: black */
.dx-stage-r { background: #000000 !important; }
.dx-stage-r *, #dx-quiz-section .dx-q-num,
#dx-quiz-section .dx-q-text, #dx-quiz-section .dx-q-sub { color: #ffffff !important; }
#dx-quiz-section .dx-q-num { opacity: 0.4 !important; font-size: 0.68rem !important; }
#dx-quiz-section .dx-q-text { font-size: 1.3rem !important; }
#dx-quiz-section .dx-q-sub { opacity: 0.55 !important; }

/* ---- ANSWER BOXES: BLACK bg, WHITE text, NO ICONS ---- */
#dx-quiz-section .dx-opt {
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 10px !important;
  padding: 20px 22px !important;
  color: #ffffff !important;
}
#dx-quiz-section .dx-opt:hover {
  background: #1c1c1c !important;
  border-color: rgba(255,255,255,0.3) !important;
}
#dx-quiz-section .dx-opt.selected,
#dx-quiz-section .dx-opt.active { background: #0055cc !important; border-color: #0055cc !important; }

/* Hide icons */
#dx-quiz-section .dx-opt .dx-opt-icon,
.dx-opt .dx-opt-icon { display: none !important; }

/* Option text */
#dx-quiz-section .dx-opt .dx-opt-label {
  color: #ffffff !important; font-size: 1rem !important; font-weight: 600 !important;
}
#dx-quiz-section .dx-opt .dx-opt-desc {
  color: rgba(255,255,255,0.55) !important; font-size: 0.82rem !important;
}

/* Nav buttons */
#dx-quiz-section .dx-q-back {
  color: rgba(255,255,255,0.5) !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 6px !important;
}
#dx-quiz-section .dx-q-next {
  background: #0055cc !important; color: #fff !important;
  border: none !important; border-radius: 6px !important; font-weight: 600 !important;
}

/* ---- END CTA PHONE SECTION: WHITE bg, BLACK text ---- */
.endcta { background: #ffffff !important; }
.endcta *, .endcta p, .endcta strong { color: rgba(255,255,255,0.85) !important; }
.endcta a[href^="tel"] {
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 4px;
  font-weight: 700;
  color: #ffffff !important;
}

/* ---- MISC CLEANUP ---- */
.grain { display: none !important; }
.scroll-prog { display: none !important; }
.fab-mail, .fab-call { display: none !important; }
.btn-p::after { display: none !important; }


/* =====================================================================
   ROI CALCULATOR PAGE, LAYOUT IMPROVEMENTS
   Target: /roi-calculator-cinematic/
   ===================================================================== */

/* === HERO SECTION === */
.hero {
  min-height: 100vh !important;
  height: 100vh !important;
  max-height: 800px !important;
}
.hero-in {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  max-width: 820px !important;
  padding: 120px 64px 80px !important;
  text-align: left !important;
}
.hero-in .crumb {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
  margin-bottom: 24px !important;
  display: block !important;
}
.hero-in h1 {
  font-size: clamp(40px, 5vw, 68px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-align: left !important;
  margin-bottom: 36px !important;
  max-width: 700px !important;
  letter-spacing: -0.02em !important;
}
.hero-in h1 .hl-w { display: inline !important; }
a.lets-talk, .hero-in a[href="#calc"] {
  display: inline-flex !important;
  width: auto !important;
  align-self: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
  background: #ED1C24 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  border-radius: 40px !important;
  text-decoration: none !important;
}

/* === CALC SECTION === */
#calc { padding: 80px 0 !important; background: #fafbfd !important; }
#calc .wrap { max-width: 1200px !important; margin: 0 auto !important; padding: 0 64px !important; }
.lead-h2 {
  font-size: 30px !important;
  font-weight: 700 !important;
  text-align: left !important;
  max-width: 540px !important;
  line-height: 1.3 !important;
  color: #111 !important;
  margin-bottom: 28px !important;
}

/* === TAB BUTTONS === */
.rc-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 40px !important;
  border-bottom: 2px solid #e8ecf0 !important;
  padding-bottom: 16px !important;
}
.rc-tab {
  display: inline-flex !important;
  align-items: center !important;
  padding: 9px 20px !important;
  border-radius: 100px !important;
  border: 1.5px solid #d0d8e4 !important;
  background: #f7f9fc !important;
  color: #555 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}
.rc-tab:hover {
  background: #fdf3f3 !important;
  border-color: #ED1C24 !important;
  color: #ED1C24 !important;
}
.rc-tab.active {
  background: #ED1C24 !important;
  border-color: #ED1C24 !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 10px rgba(237, 28, 36,0.28) !important;
}

/* === CALCULATOR LAYOUT === */
.rc-layout {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 52px !important;
  align-items: start !important;
}

/* === HOW WE CALCULATE SECTION === */
.sec.soft { padding: 80px 0 !important; background: #f4f8ff !important; border-top: 1px solid #e4ecf8 !important; }
.sec.soft .eyebrow {
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #ED1C24 !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}
.sec.soft .sec-title {
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #0f0f0f !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  max-width: 480px !important;
}
.sec.soft .prose {
  font-size: 15px !important;
  line-height: 1.72 !important;
  color: #4a5568 !important;
  grid-column: 1 !important;
  grid-row: 3 !important;
  margin-top: 0 !important;
}
.rc-agrid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  grid-column: 2 !important;
  grid-row: 2 / 5 !important;
  align-self: start !important;
}
.rc-acard {
  background: #fff !important;
  border: 1.5px solid #dce6f4 !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
  box-shadow: 0 2px 12px rgba(0,60,140,0.07) !important;
}
.rc-acard strong {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #ED1C24 !important;
  margin-bottom: 8px !important;
}
.rc-acard span {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #555 !important;
  display: block !important;
}

/* === ENDCTA SECTION === */
.endcta { padding: 100px 80px !important; background: #0a0a0a !important; text-align: center !important; }
.endcta .wrap { max-width: 640px !important; margin: 0 auto !important; }
.endcta h2 {
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.02em !important;
}
.endcta p {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.65) !important;
  margin-bottom: 36px !important;
}
.endcta .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ED1C24 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 16px 36px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 20px rgba(237, 28, 36,0.4) !important;
}


/* ===================================
   SOLUTIONS PAGE, LAYOUT FIX
   sol-grid & lead-h2 span full width
   =================================== */
#problems .lead-h2 {
  grid-column: 1 / -1;
  max-width: 60ch;
  margin-bottom: 32px;
}

#problems .sol-grid {
  grid-column: 1 / -1;
}


/* ================================
 *    SCARD BODY TEXT READABILITY FIX
 *    Ensures paragraph text in the
 *    "How it works" cinematic cards
 *    is readable over dark bg images
 * ================================ */
article.scard.rv.in p,
article.scard .scard-body p {
	  color: rgba(255, 255, 255, 0.85) !important;
	  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
}

/* === Bold Font Weights for Homepage === */
/* Override all heading font weights to bold */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .sec-title,
body h2.sec-title,
body [class*="sec-title"],
body .lead-h2,
body .section h2,
body .section h3 {
  font-weight: 800 !important;
  font-family: Quicksand, Inter, sans-serif !important;
}

/* refresh */


/* ==============================================================
   FYF, FIND YOUR FIT, Full layout v2
   Fixes: hero, wizard container, progress bar, steps, options,
   nav buttons, result card, responsive layout
============================================================== */

/* Hero */
.fyf-hero {
  background: linear-gradient(135deg, #0a0f1e 0%, #0d1c3f 50%, #091428 100%);
  padding: 72px 0 60px;
  position: relative;
  overflow: hidden;
}
.fyf-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(237, 28, 36,.22) 0%, transparent 70%);
  pointer-events: none;
}
.fyf-hero .wrap { position: relative; z-index: 1; }
.fyf-hero .crumb {
  font-family: 'Quicksand', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,180,255,.8);
  margin-bottom: 18px;
}
.fyf-hero h1 {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  color: #fff !important;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: 20px;
  max-width: 16ch;
}
.fyf-hero p {
  font-size: 1.06rem;
  color: rgba(255,255,255,.72) !important;
  max-width: 560px;
  line-height: 1.65;
}

/* Wizard section */
.fyf-wizard {
  background: #f4f6fb;
  padding: 0 0 80px;
}
.fyf-wizard .wrap { max-width: 960px; padding: 0 44px; }

/* Card */
.fyf-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e2e6f0;
  box-shadow: 0 8px 40px rgba(0,40,120,.07), 0 2px 8px rgba(0,0,0,.04);
  padding: 48px 52px;
  margin-top: -32px;
  position: relative;
}

/* Progress bar */
.fyf-progress {
  width: 100%;
  height: 4px;
  background: #e8ecf4;
  border-radius: 4px;
  margin-bottom: 40px;
  overflow: hidden;
}
.fyf-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ED1C24, #3399FF);
  border-radius: 4px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  width: 0%;
}

/* Steps, hide all, show only active */
.fyf-step { display: none !important; }
.fyf-step.active { display: block !important; }

.fyf-step-num {
  font-family: 'Quicksand', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ED1C24 !important;
  margin-bottom: 10px;
}
.fyf-step h2 {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 700;
  color: #0a0f1e !important;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.fyf-step .sub {
  font-size: .95rem;
  color: #5a6480 !important;
  margin-bottom: 28px;
  line-height: 1.55;
}

/* Options grid */
.fyf-options {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 12px;
  margin-top: 4px;
  margin-bottom: 0;
}

/* Option button */
.fyf-opt {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 16px 14px;
  background: #f6f7fb;
  border: 1.5px solid #e4e7ee;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
  transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
}
.fyf-opt:hover {
  background: #eef4ff;
  border-color: #ED1C24;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(237, 28, 36,.12);
}
.fyf-opt.selected {
  background: #e8f0fe;
  border-color: #ED1C24;
  box-shadow: 0 0 0 3px rgba(237, 28, 36,.15);
}
.fyf-opt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(237, 28, 36,.1);
  flex-shrink: 0;
  transition: background .18s;
}
.fyf-opt:hover .fyf-opt-icon,
.fyf-opt.selected .fyf-opt-icon { background: rgba(237, 28, 36,.18); }
.fyf-opt-icon svg { width: 18px !important; height: 18px !important; color: #ED1C24; flex-shrink: 0; }
.fyf-opt-body { flex: 1; }
.fyf-opt-label {
  font-size: .88rem;
  font-weight: 600;
  color: #1a2035 !important;
  line-height: 1.4;
}
.fyf-opt.selected .fyf-opt-label { color: #003e8a !important; }
.fyf-opt-arrow {
  align-self: flex-end;
  color: #9aa5c0;
  opacity: 0.5;
  margin-top: 2px;
  transition: opacity .18s, color .18s, transform .18s;
}
.fyf-opt:hover .fyf-opt-arrow { opacity: 1; transform: translateX(2px); }
.fyf-opt.selected .fyf-opt-arrow { opacity: 1; color: #ED1C24; }
.fyf-opt-arrow svg { width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important; display: block; }

/* Nav */
.fyf-nav {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #eaecf4;
  gap: 12px;
}
.fyf-nav .back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Quicksand', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: #5a6480;
  background: transparent;
  border: 1.5px solid #dde1ee;
  border-radius: 100px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all .2s;
}
.fyf-nav .back:hover { color: #ED1C24; border-color: #ED1C24; background: #fff4f4; }
.fyf-nav .next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Quicksand', sans-serif;
  font-size: .92rem;
  font-weight: 700;
  color: #fff !important;
  background: linear-gradient(135deg, #ED1C24, #0052a3);
  border: none;
  border-radius: 100px;
  padding: 12px 28px;
  cursor: pointer;
  transition: all .22s;
  box-shadow: 0 6px 18px rgba(237, 28, 36,.32);
}
.fyf-nav .next:not(:disabled):hover {
  background: linear-gradient(135deg, #0052a3, #003d7a);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(237, 28, 36,.44);
}

/* Result */
.fyf-result { display: none; }
.fyf-result-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Quicksand', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ED1C24 !important;
  background: rgba(237, 28, 36,.08);
  border: 1px solid rgba(237, 28, 36,.2);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 20px;
}
.fyf-result-card {
  background: linear-gradient(135deg, #0a1a3d 0%, #0e2352 100%);
  border-radius: 18px;
  padding: 36px 40px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.fyf-result-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(51,153,255,.2) 0%, transparent 70%);
  pointer-events: none;
}
.fyf-result-card .rh {
  font-family: 'Quicksand', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0,180,255,.85) !important;
  margin-bottom: 10px;
}
.fyf-result-card h3 {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff !important;
  margin-bottom: 14px;
  letter-spacing: -.02em;
}
.fyf-result-card .desc {
  font-size: .97rem;
  color: rgba(255,255,255,.78) !important;
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 600px;
}
.fyf-result-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.fyf-result-stats span { font-size: .88rem; color: rgba(255,255,255,.65) !important; }
.fyf-result-stats strong { display: block; font-family: 'Quicksand', sans-serif; font-weight: 700; color: rgba(255,255,255,.9) !important; font-size: .73rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 3px; }
.fyf-includes { list-style: none !important; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; padding: 0; }
.fyf-includes li { font-family: 'Quicksand', sans-serif; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.85) !important; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 100px; padding: 5px 14px; }
.fyf-result-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.fyf-result-actions .primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .92rem;
  color: #0a0f1e !important; background: #fff; border-radius: 100px;
  padding: 12px 26px; text-decoration: none; transition: all .22s;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.fyf-result-actions .primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.fyf-result-actions .secondary {
  font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: .9rem;
  color: rgba(255,255,255,.8) !important; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; transition: color .18s;
}
.fyf-result-actions .secondary:hover { color: #fff !important; }
.fyf-runner-up { margin-bottom: 20px; }
.fyf-runner-up h4 { font-family: 'Quicksand', sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5a6480 !important; margin-bottom: 12px; }
.fyf-runner-up-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #f6f7fb; border: 1.5px solid #e4e7ee; border-radius: 14px; padding: 18px 22px; text-decoration: none; transition: all .2s; }
.fyf-runner-up-card:hover { background: #eef4ff; border-color: #ED1C24; transform: translateY(-2px); }
.fyf-runner-up-card .ll { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1rem; color: #0a0f1e !important; margin-bottom: 4px; }
.fyf-runner-up-card .ls { font-size: .85rem; color: #5a6480 !important; line-height: 1.45; }
.fyf-runner-up-card .arrow { font-size: 1.1rem; color: #9aa5c0; flex-shrink: 0; transition: transform .2s; }
.fyf-runner-up-card:hover .arrow { transform: translateX(3px); color: #ED1C24; }
.fyf-restart { text-align: center; padding-top: 8px; }
.fyf-restart button { font-family: 'Quicksand', sans-serif; font-size: .85rem; font-weight: 600; color: #9aa5c0; background: transparent; border: none; cursor: pointer; transition: color .2s; padding: 8px 16px; }
.fyf-restart button:hover { color: #ED1C24; }

@media (max-width: 720px) {
  .fyf-hero { padding: 52px 0 44px; }
  .fyf-hero h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .fyf-card { padding: 28px 20px; margin-top: -20px; }
  .fyf-wizard .wrap { padding: 0 20px; }
  .fyf-options { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .fyf-options { grid-template-columns: 1fr; }
  .fyf-card { padding: 22px 16px; }
  .fyf-result-card { padding: 26px 20px; }
}


/* FYF, hide icons, text-only option cards */
.fyf-opt-icon { display: none !important; }
.fyf-opt-arrow { display: none !important; }
.fyf-opt {
  gap: 0 !important;
  padding: 16px 18px !important;
  justify-content: center;
}
.fyf-opt-label {
  font-size: .92rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #1a2035 !important;
}
.fyf-opt.selected .fyf-opt-label { color: #003e8a !important; }


/* ===== Nav Mega Dropdown Text Fix - All Pages =====
   Fixes nm-desc and nm-title color on inner pages
   where body color overrides make text near-invisible */
.nav-mega .nm-title,
.nav-mega .nm-desc,
.nav-mega .nm-links a {
  color: rgba(255, 255, 255, 0.85) !important;
}
.nav-mega .nm-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.nav-mega .nm-desc {
  color: rgba(255, 255, 255, 0.75) !important;
}
/* ===== End Nav Mega Fix ===== */


/* ===================================================================
   QUOTE PAGE - PREMIUM REDESIGN
   =================================================================== */

/* ===== MAIN FRAME - TWO COLUMN LAYOUT ===== */
.qt-frame {
  background: linear-gradient(145deg, #F0F4FF 0%, #FAFBFE 40%, #F0F7FF 100%) !important;
  min-height: calc(100vh - 46px);
  position: relative;
  overflow: hidden;
  display: grid !important;
  grid-template-columns: 1fr 400px !important;
  align-items: start;
  column-gap: 56px !important;
  padding: 64px 72px 100px !important;
  box-sizing: border-box;
  width: 100%;
}

.qt-left {
  position: relative;
  z-index: 1;
  max-width: 100%;
}

.qt-right {
  position: sticky;
  top: 70px;
  z-index: 1;
}

/* ===== CRUMB BADGE ===== */
.qt-frame .crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(237, 28, 36,0.10), rgba(237, 28, 36,0.06));
  border: 1px solid rgba(237, 28, 36,0.22);
  color: #ED1C24;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 22px;
}

/* ===== HERO HEADING ===== */
.qt-frame h1 {
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #0D0D0D;
  margin: 0 0 18px;
}

.qt-frame h1 em, .qt-frame h1 i {
  font-style: italic;
  background: linear-gradient(135deg, #ED1C24, #6366F1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.qt-frame p.sub {
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.7;
  color: #6B7280;
  margin: 0 0 32px;
}

/* ===== FORM CARD ===== */
#qt-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 60px -12px rgba(0,0,0,0.10), 0 4px 16px -2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}

#qt-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ED1C24, #6366F1, #00C9A7);
}

/* ===== FORM GRID ===== */
#qt-form .qt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

#qt-form .qt-row.one {
  grid-template-columns: 1fr;
}

#qt-form .qt-fld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ===== LABELS ===== */
#qt-form label {
  font-size: 0.80rem;
  font-weight: 600;
  color: #1A1A2E;
  letter-spacing: 0.01em;
}

/* ===== INPUTS ===== */
#qt-form input[type=text],
#qt-form input[type=email],
#qt-form input[type=tel],
#qt-form textarea {
  width: 100%;
  padding: 12px 15px;
  font-size: 0.92rem;
  font-weight: 400;
  color: #1A1A2E;
  background: #F7F8FA;
  border: 1.5px solid #E2E5EB;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  box-sizing: border-box;
}

#qt-form input[type=text]:focus,
#qt-form input[type=email]:focus,
#qt-form input[type=tel]:focus,
#qt-form textarea:focus {
  border-color: #ED1C24;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(237, 28, 36,0.12);
}

#qt-form textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
}

/* ===== SERVICE CHIPS ===== */
.qt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

#qt-form button[type=button] {
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #6B7280;
  background: #F7F8FA;
  border: 1.5px solid #E2E5EB;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#qt-form button[type=button]:hover {
  border-color: #ED1C24;
  color: #ED1C24;
  background: rgba(237, 28, 36,0.07);
  transform: translateY(-1px);
}

/* ===== SUBMIT BUTTON ===== */
button.qt-submit {
  width: 100%;
  padding: 15px 28px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: white;
  background: linear-gradient(135deg, #ED1C24 0%, #5B5BD6 100%);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 18px rgba(237, 28, 36,0.38), 0 1px 4px rgba(0,0,0,0.10);
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}

button.qt-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(237, 28, 36,0.48), 0 2px 6px rgba(0,0,0,0.10);
  background: linear-gradient(135deg, #1A8FFF 0%, #6B6BEF 100%);
}

/* ===== SECURE BADGE ===== */
.qt-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.78rem;
  color: #9CA3AF;
  font-weight: 500;
}

/* ===== TRUST SECTION ===== */
.qt-trust {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 10px 30px -6px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  margin-top: 0;
}

.qt-trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.qt-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #F7F8FA;
  border-radius: 10px;
  border: 1px solid #EEF0F5;
  transition: all 0.2s ease;
}

.qt-trust-item:hover {
  background: rgba(237, 28, 36,0.06);
  border-color: rgba(237, 28, 36,0.18);
  transform: translateX(3px);
}

.qt-trust-item svg {
  color: #ED1C24;
  flex-shrink: 0;
  margin-top: 1px;
  width: 18px;
  height: 18px;
}

/* ===== CONTACT SECTION ===== */
.qt-contact {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 24px 28px;
  box-shadow: 0 10px 30px -6px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  margin-top: 16px;
  border-top: none;
}

.qt-contact h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1A1A2E;
  margin-bottom: 14px;
}

.qt-contact a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6B7280;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
  margin-bottom: 2px;
}

.qt-contact a:hover {
  color: #ED1C24;
  background: rgba(237, 28, 36,0.07);
}

.qt-contact a svg {
  color: #ED1C24;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .qt-frame {
    grid-template-columns: 1fr !important;
    padding: 48px 40px 80px !important;
  }
  .qt-right {
    position: static;
  }
}

@media (max-width: 640px) {
  .qt-frame {
    padding: 40px 20px 60px !important;
  }
  #qt-card {
    padding: 24px 20px !important;
  }
}


/* ===== FIX QT-FRAME MAX-WIDTH OVERRIDE ===== */
.qt-frame {
  max-width: 100% !important;
  width: 100% !important;
}


/* qt-chip-active-fix */
.qt-chip.active {
  background: #0A0F1E !important;
  color: #ffffff !important;
  border-color: #0A0F1E !important;
}


/* ===== FIX FAQ ACCORDION (BUTTON-BASED VARIANT) ===== */
/* Reset native button appearance */
button.acc-head {
	  appearance: none !important;
	  -webkit-appearance: none !important;
	  background: transparent !important;
	  border: none !important;
	  outline: none !important;
	  width: 100% !important;
	  text-align: left !important;
	  padding: 28px 4px !important;
	  display: flex !important;
	  align-items: center !important;
	  gap: 26px !important;
	  cursor: pointer !important;
	  font-size: clamp(1.2rem, 2vw, 1.7rem) !important;
	  font-weight: 600 !important;
	  color: var(--ink) !important;
	  font-family: inherit !important;
}
/* Number label */
button.acc-head .acc-num {
	  font-family: Quicksand, sans-serif !important;
	  font-weight: 600 !important;
	  font-size: 1.05rem !important;
	  color: #bdbdbd !important;
	  flex: 0 0 auto !important;
	  min-width: 2ch !important;
}
/* Icon  styled as circular +/- button matching .pm */
button.acc-head .acc-icon {
	  display: block !important;
	  width: 38px !important;
	  height: 38px !important;
	  border-radius: 50% !important;
	  border: 1.5px solid #cfcfcf !important;
	  flex: 0 0 auto !important;
	  position: relative !important;
	  transition: 0.25s !important;
	  margin-left: auto !important;
	  background: transparent !important;
}
/* Horizontal bar of + */
button.acc-head .acc-icon::before {
	  content: "" !important;
	  position: absolute !important;
	  width: 14px !important;
	  height: 2px !important;
	  background: var(--ink) !important;
	  top: 50% !important;
	  left: 50% !important;
	  transform: translate(-50%, -50%) !important;
	  transition: 0.25s !important;
}
/* Vertical bar of + */
button.acc-head .acc-icon::after {
	  content: "" !important;
	  position: absolute !important;
	  width: 2px !important;
	  height: 14px !important;
	  background: var(--ink) !important;
	  top: 50% !important;
	  left: 50% !important;
	  transform: translate(-50%, -50%) !important;
	  transition: 0.25s !important;
}
/* Open state: filled dark circle with white bars (minus sign) */
.acc-item.open button.acc-head .acc-icon {
	  background: var(--ink) !important;
	  border-color: var(--ink) !important;
}
.acc-item.open button.acc-head .acc-icon::before,
.acc-item.open button.acc-head .acc-icon::after {
	  background: #fff !important;
}
.acc-item.open button.acc-head .acc-icon::after {
	  transform: translate(-50%, -50%) scaleY(0) !important;
}
}
}
}
}
}
}
}
}

/* ================================================
   READABILITY FIX: Dark card text on dark backgrounds
   Fixes challenge cards in .sec.soft .tech-grid sections
   where .tech-grid a forces dark bg but text stays dark
   ================================================ */

/* Fix 1: Challenge card headings and body text - make white on dark bg */
.tech-grid a.tech-card h3,
.tech-grid a.tech-card p,
.sec.soft .tech-card h3,
.sec.soft .tech-card p {
  color: #ffffff !important;
}

/* Fix 2: "See how we solve it" link text - make white on dark bg */
.tech-grid a.tech-card .rd,
.sec.soft .tech-card .rd {
  color: #ffffff !important;
}

/* Fix 3: Arrow SVG icon inside blue circle button - make white so it's visible */
.tech-grid a.tech-card .rd > span svg,
.sec.soft .tech-card .rd > span svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Fix 4: Also cover any other .tech-card on dark backgrounds sitewide */
.sec.black .tech-card h3,
.sec.black .tech-card p,
.sec.dark .tech-card h3,
.sec.dark .tech-card p {
  color: #ffffff !important;
}

.sec.black .tech-card .rd,
.sec.dark .tech-card .rd {
  color: #ffffff !important;
}

.sec.black .tech-card .rd > span svg,
.sec.dark .tech-card .rd > span svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* =============================================
   HIDE NUMBERS ON CARDS - Site Wide
   ============================================= */

/* Articles page - image number overlays */
span.nm,
span.n,
.pic span.nm,
.pic .nm {
  display: none !important;
}

/* Homepage - industry/service card numbers */
.inum {
  display: none !important;
}

/* AI Automation page - service card numbers */
.tq3-service-num {
  display: none !important;
}

/* Process step cards - step numbers */
.tq3-process-step {
  display: none !important;
}

/* Industry sector cards - icon area */
.tq3-industry-icon {
  display: none !important;
}

/* =============================================
   HERO VIDEO BRIGHTNESS - AI Automation Page
   ============================================= */
.tq3-hero-overlay {
  background: linear-gradient(to right, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.15)) !important;
}


/* Fix arrow centering in challenge/tech cards - remove bottom margin from SVG inside circle */
.tech-card .rd > span > svg,
.ind-card .rd > span > svg {
  margin-bottom: 0 !important;
}


/* ============================================================
   FADED FONT FIXES - Fix invisible/low-contrast text
   ============================================================ */

/* Fix: .tt-tab.is-active (active tech tab) has white bg but inherits white text 
   from .sec.black * rule, making text invisible (white-on-white) */
.tt-tab.is-active { color: #0f0f0f !important; }

/* Fix: buttons inside .sec.black with white backgrounds need dark text */
.sec.black .btn-w, .hero .btn-w, .longrun .btn-w, .endcta .btn-w,
#contact .btn-w, .dark-band .btn-w, .black-band .btn-w,
.sec.hp-tech .btn-w, #technologies-preview .btn-w, .tt-card .btn-w,
.sec.recog .btn-w, #recognition .btn-w { 
  color: #0f0f0f !important; 
  background: #ffffff !important; 
}

/* Fix: .rv.in elements (reveal cards) in dark sections - ensure proper text visibility */
.sec.black .rv .btn-w, .hero .rv .btn-w {
  color: #0f0f0f !important;
  background: #ffffff !important;
}


/* OVERRIDE: Fix tt-tab.is-active text color - use ID selector for higher specificity */
#technologies-preview .tt-tab.is-active { color: #0f0f0f !important; }

/* ==============================================
   CHALLENGE CARD LAYOUT, COMPLETE FIX v3
   Content at top, CTA at bottom, no gaps
   ============================================== */

/* Both paragraphs should NOT flex-grow */
.tech-card.rv > p {
  flex: 0 0 auto !important;
  margin-bottom: 12px !important;
}

/* Insight block: accent-bordered highlight */
.tech-card.rv > p + p {
  margin-top: 2px !important;
  margin-bottom: 16px !important;
  padding: 12px 15px !important;
  background: rgba(255,255,255,0.07) !important;
  border-left: 3px solid #ED1C24 !important;
  border-radius: 0 5px 5px 0 !important;
  font-size: 0.87rem !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.88) !important;
}

/* CTA: pushed to bottom via margin-top auto (inline style was removed, add back via CSS) */
.tech-card.rv > .rd {
  margin-top: auto !important;
}

/* ============================================================
   TCS-STYLE HERO LAYOUT & FONT WEIGHT FIX
   - Centers content like TCS.com
   - Reduces font weight to 400-500 (not too bold)
   - Positions buttons centered at bottom like TCS
============================================================ */

/* 1. Center the hero content container */
#home .hero-in,
.hero .hero-in {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  justify-content: flex-end !important;
  padding-bottom: 80px !important;
  padding-top: 0 !important;
  height: 100% !important;
  min-height: calc(100vh - 80px) !important;
}

/* 2. Hero h1 font weight, lighter like TCS (font-weight 400) */
#home h1,
.hero h1,
#home h2,
.hero h2 {
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(2.2rem, 4.2vw, 3.8rem) !important;
  max-width: 20ch !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.15 !important;
}

/* 3. Hero paragraph, center and lighter */
#home .hero-in > p,
.hero .hero-in > p {
  text-align: center !important;
  max-width: 52ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 1.05rem !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.80) !important;
  margin-bottom: 32px !important;
}

/* 4. Eyebrow badge, centered */
#home .eyebrow,
.hero .eyebrow {
  text-align: center !important;
  display: inline-block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 24px !important;
}

/* 5. Hero buttons, centered, TCS pill-button style */
.hero .hero-btns,
#home .hero-btns {
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* 6. Gradient overlay, subtle dark edge so text reads, video shows through */
.hero::after {
  background: rgba(0,0,0,0.65) !important;
}

/* Hero text font, ensure bold and bright readable white */
#home .hero h1,
#home h1,
body .hero h1,
header.hero h1,
body header.hero h1 {
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.5) !important;
  font-family: 'Quicksand', 'Inter', sans-serif !important;
}
body .hero p,
body header.hero p {
  color: rgba(255,255,255,0.95) !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6) !important;
}
body .hero .crumb,
body header.hero .crumb {
  color: rgba(255,255,255,0.9) !important;
}

/* 7. Hero video scale, keep it full and cinematic */
#home video.hero-img,
.hero video.hero-img {
  transform: scale(1.04) !important;
}

/* 8. Responsive adjustments */
@media (max-width: 760px) {
  #home .hero-in,
  .hero .hero-in {
    padding-bottom: 60px !important;
  }
  #home h1,
  .hero h1 {
    font-size: clamp(1.9rem, 7vw, 2.6rem) !important;
  }
}


/* ============================================================
   TCS STICKY HERO FIX, hero stays pinned, content rolls over it
   The tcs-polish.css overrides position:sticky with relative !important
   This block restores the correct sticky behavior with higher specificity
============================================================ */

/* 1. Restore sticky positioning, highest specificity to beat tcs-polish.css */
html body header#home.hero,
html body .hero#home,
html body header.hero {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  min-height: 640px !important;
  z-index: 1 !important;
}

/* 2. Restore reveal-stack, sits above hero, scrolls up over it */
html body .reveal-stack {
  position: relative !important;
  z-index: 2 !important;
  background: #fff !important;
  box-shadow: 0 -46px 90px rgba(0,0,0,.55) !important;
  will-change: transform !important;
}

/* 3. First section inside reveal-stack, rounded top corners like TCS */
html body .reveal-stack > .sec:first-child,
html body .reveal-stack > section:first-child {
  border-top-left-radius: 26px !important;
  border-top-right-radius: 26px !important;
}

/* 4. Keep hero-in centering from TCS layout (previous fix) */
html body #home .hero-in,
html body .hero .hero-in {
  position: relative !important;
  z-index: 2 !important;
}

/* 5. Reduce motion override, on prefers-reduced-motion keep static */
@media (prefers-reduced-motion: reduce) {
  html body header#home.hero,
  html body header.hero {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
  }
}


/* ============================================================
   REVEAL-STACK GAP FIX, remove white space between hero & content
   The gap appears because the reveal-stack starts below hero.
   Use negative margin-top to pull it flush against the hero bottom.
   Also ensure box-shadow covers any remaining gap.
============================================================ */

html body .reveal-stack {
  margin-top: -32px !important;
  padding-top: 32px !important;
  box-shadow: 0 -60px 100px rgba(0,0,0,0.6) !important;
}

/* First section rounded top, like TCS white card sliding over video */
html body .reveal-stack > .sec:first-child {
  border-top-left-radius: 28px !important;
  border-top-right-radius: 28px !important;
  /* overflow:hidden removed, was clipping carousel cards */
}


/* ============================================================
   TQ3 HERO FIX, AI Automation & other tq3-template pages
   Apply same TCS sticky hero + centered layout as homepage
============================================================ */

/* 1. Sticky hero, stays pinned, content scrolls over */
html body .tq3-hero {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
}

/* 2. Center the hero body content */
html body .tq3-hero-body {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

/* 3. Center h1 and subtitle */
html body .tq3-hero-h1,
html body h1.tq3-hero-h1 {
  text-align: center !important;
  max-width: 22ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body .tq3-hero-sub {
  text-align: center !important;
  max-width: 54ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4. Center breadcrumb */
html body .tq3-hero-breadcrumb {
  text-align: center !important;
}

/* 5. Center CTA buttons */
html body .tq3-hero-ctas {
  justify-content: center !important;
}

/* 6. Overlay, adjust for centered layout like TCS */
html body .tq3-hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.45) 40%,
    rgba(0,0,0,0.65) 100%
  ) !important;
}

/* 7. All content sections after tq3-hero roll over the pinned video */
html body .tq3-marquee,
html body .tq3-section-wrap,
html body .tq3-section-wrap-alt,
html body .tq3-section-wrap-dark,
html body .tq3-roi-wrap,
html body .tq3-footer {
  position: relative !important;
  z-index: 2 !important;
}

/* 8. First section after hero, dark marquee bar acts as the leading edge */
html body .tq3-marquee {
  margin-top: -32px !important;
  padding-top: 32px !important;
  box-shadow: 0 -60px 100px rgba(0,0,0,0.65) !important;
}

/* 9. First white section gets rounded top corners like TCS */
html body .tq3-section-wrap:first-of-type,
html body .tq3-marquee + .tq3-section-wrap {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* 10. Reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  html body .tq3-hero {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
  }
}


/* ============================
   AEROSOFT CAYMAN, MOBILE PHONE OPTIMIZATIONS
   Version: 2.0 | Date: 2026-05-31
   ============================ */

/* BASE PERFORMANCE */
html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
input, select, textarea { font-size: 16px; }
img { max-width: 100%; height: auto; display: block; }

/* TOUCH SCROLL */
.car-track, [class*="track"] { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; }
.car-track::-webkit-scrollbar { display: none; }
.tcard { scroll-snap-align: start; }
nav, header { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* PHONE (max 480px) */
@media (max-width: 480px) {
  .nlinks, .nav-locale, .nav-contact, .nav-div, .util-in .r { display: none !important; }
  .burger { display: flex !important; }
  .nav-in, .wrap, .util-in, .subnav-in { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; }
  .hero { min-height: 100svh !important; height: auto !important; }
  .hero-in { padding-top: 96px !important; padding-bottom: 64px !important; padding-left: 20px !important; padding-right: 20px !important; }
  .hero h1 { font-size: clamp(1.8rem, 8.5vw, 2.6rem) !important; line-height: 1.12 !important; margin-bottom: 16px !important; letter-spacing: -0.025em !important; }
  .hero p, .hero .lets-talk { font-size: clamp(0.92rem, 4vw, 1.05rem) !important; line-height: 1.65 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .hero-btns { flex-direction: column !important; gap: 12px !important; width: 100% !important; align-items: stretch !important; margin-top: 24px !important; }
  .hero-btns a, .hero-btns .btn { width: 100% !important; text-align: center !important; min-height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1rem !important; border-radius: 999px !important; }
  .sec { padding-top: 56px !important; padding-bottom: 56px !important; }
  .split, .two, .work2, .geo-grid, .fyf-grid, .foot-grid, .why-grid, .svc-grid, .sol-grid, .tt-grid, .recog-grid, .big3, .proc-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .tech-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .ind-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .lead-h2, h2 { font-size: clamp(1.65rem, 7.8vw, 2.3rem) !important; line-height: 1.18 !important; }
  h3 { font-size: clamp(1.05rem, 5vw, 1.35rem) !important; line-height: 1.3 !important; }
  p { line-height: 1.65 !important; }
  .eyebrow, .crumb { font-size: 0.75rem !important; letter-spacing: 0.1em !important; }
  a { min-height: 44px; }
  button { min-height: 44px; }
  .btn, .cta-btn { padding: 14px 22px !important; min-height: 48px !important; }
  .tcard { flex: 0 0 calc(100vw - 40px) !important; max-width: calc(100vw - 40px) !important; }
  [role="tablist"] { overflow-x: auto !important; flex-wrap: nowrap !important; gap: 6px !important; padding-bottom: 8px !important; scrollbar-width: none !important; }
  [role="tablist"]::-webkit-scrollbar { display: none; }
  [role="tablist"] button { white-space: nowrap !important; flex-shrink: 0 !important; font-size: 0.82rem !important; padding: 8px 14px !important; min-height: 40px !important; }
  .mnav { padding: 80px 20px 40px !important; overflow-y: auto !important; }
  .mnav a { min-height: 48px !important; display: flex !important; align-items: center !important; font-size: 1.1rem !important; padding: 12px 0 !important; }
  .foot-grid { grid-template-columns: 1fr !important; }
  .fbot { flex-direction: column !important; gap: 10px !important; text-align: center !important; }
  .car-head { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .bigc { min-height: 220px !important; border-radius: 16px !important; }
  .hp-prev-head { flex-direction: column !important; align-items: flex-start !important; }
  .hp-side { max-width: 100% !important; }
  .endcta h2 { font-size: clamp(1.75rem, 8vw, 2.3rem) !important; }
  .rv { transition-duration: 0.25s !important; }
  .scroll-prog { display: none !important; }
  section, .sec, .wrap { max-width: 100% !important; }
  /* Only clip overflow on sections that don't contain a carousel */
  section:not(:has(.car-track)), .sec:not(:has(.car-track)) { overflow-x: hidden !important; }
  /* Allow carousel car-track to scroll on mobile */
  .car-track { overflow-x: auto !important; }
  /* Ensure ncard shows Read more by using max-width:82vw like scard */
  .ncard { max-width: 82vw !important; }
  /* Ensure .rd link never gets hidden */
  .ncard .rd { display: inline-flex !important; opacity: 1 !important; visibility: visible !important; }
}

/* SMALL PHONE (max 380px) */
@media (max-width: 380px) {
  .hero h1 { font-size: clamp(1.65rem, 9vw, 2.2rem) !important; }
  .lead-h2, h2 { font-size: clamp(1.5rem, 8.5vw, 2rem) !important; }
  .nav-in, .wrap { padding-left: 14px !important; padding-right: 14px !important; }
  .tech-grid, .ind-grid { grid-template-columns: 1fr !important; }
}

/* ============================================
 *    HERO STICKY FIX  image/video stays fixed,
 *    content scrolls up over it
 *    ============================================ */
html body {
	  overflow-x: clip !important;
	  overflow-y: auto !important;
}
html body .tq3-hero {
	  position: sticky !important;
	  top: 0 !important;
	  z-index: 1 !important;
	  height: 100vh !important;
	  min-height: 100vh !important;
}
html body .tq3-hero video,
html body .tq3-hero img {
	  position: absolute !important;
	  inset: 0 !important;
	  width: 100% !important;
	  height: 100% !important;
	  object-fit: cover !important;
}
}
}
}
html {
	  overflow-x: clip !important;
}
}

/* ====== HERO FIXED POSITION FIX ======
 *    Makes hero stay fixed behind scrolling content */
html body .tq3-hero {
	  position: fixed !important;
	  top: 0 !important;
	  left: 0 !important;
	  right: 0 !important;
	  width: 100% !important;
	  z-index: 1 !important;
}
/* Push content below the fixed hero */
html body .tq3-hero + * {
	  position: relative !important;
	  z-index: 2 !important;
	  margin-top: 100vh !important;
	  background: #fff !important;
}
}
}















/* ============================================================
   BRIGHT SHARP WHITE FONTS, ALL HERO SECTIONS SITEWIDE
   ROOT CAUSE FIX: ::after z-index reduced to 1,
   .hero-in raised to z-index 5 so text is ABOVE the overlay
   ============================================================ */

/* Dark overlay for contrast (z-index LOWERED to 1) */
html body header.hero::after,
html body .hero::after,
html body .hero:has(video)::after,
html body .hero:has(video.hero-vid)::after,
html body .page-hero::after,
html body .cin-hero::after {
  background: rgba(0,0,0,0.62) !important;
  background-image: none !important;
  z-index: 1 !important;
}

/* Text containers RAISED to z-index 5 (above overlay) */
html body .hero-in,
html body .hero .hero-in,
html body header.hero .hero-in,
html body #home .hero-in,
html body .page-hero .hero-in,
html body .cin-hero .hero-in,
html body .tq3-hero .wrap,
html body .hero .wrap,
html body header.hero .wrap {
  position: relative !important;
  z-index: 5 !important;
}

/* Pure bright white on EVERY hero text element */
header.hero h1, header.hero h2, header.hero h3, header.hero h4,
header.hero p, header.hero span, header.hero li, header.hero a,
header.hero i, header.hero em, header.hero b, header.hero strong,
header.hero small, header.hero .eyebrow, header.hero .crumb,
header.hero .hl-w, header.hero .hl-w i,
.hero h1, .hero h2, .hero h3, .hero h4,
.hero p, .hero span, .hero li, .hero a,
.hero i, .hero em, .hero b, .hero strong, .hero small,
.hero .eyebrow, .hero .crumb, .hero .hl-w, .hero .hl-w i,
.hero-in h1, .hero-in h2, .hero-in h3, .hero-in h4,
.hero-in p, .hero-in span, .hero-in a, .hero-in li,
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4,
.page-hero p, .page-hero span, .page-hero li, .page-hero a,
.page-hero .eyebrow, .page-hero .crumb,
.cin-hero h1, .cin-hero h2, .cin-hero h3, .cin-hero h4,
.cin-hero p, .cin-hero span, .cin-hero li, .cin-hero a,
.cin-hero .eyebrow, .cin-hero .crumb,
#home h1, #home h2, #home h3, #home h4,
#home p, #home li, #home span, #home a,
.tq3-hero h1, .tq3-hero h2, .tq3-hero p, .tq3-hero span {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Buttons stay white */
.hero .btn, .hero button, .hero-btns a, .hero-btns button,
.page-hero button, .cin-hero button, .tq3-hero button {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.75) !important;
  text-shadow: none !important;
}

/* ============================================================ */


/* Customer Stories - black text on white background */
#stories { background-color: #ffffff !important; }
#stories h1, #stories h2, #stories h3, #stories h4, #stories h5, #stories h6 { color: #111111 !important; }
#stories p, #stories li, #stories span { color: #444444 !important; }
#stories .car-nav button { border-color: #333333 !important; color: #333333 !important; }

/* ============================================
   LAYOUT & TYPOGRAPHY POLISH, Added by AI
   ============================================ */

/* --- Base antialiasing & rendering --- */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html { scroll-behavior: smooth; }

/* --- Body text: Inter for readability --- */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #1c1c2e;
}

/* --- HEADINGS: Quicksand across all levels --- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(2.5rem, 4.2vw, 3.75rem);
  letter-spacing: -0.04em;
  line-height: 1.06;
}

h2 {
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  letter-spacing: -0.03em;
  line-height: 1.14;
  font-weight: 800;
}

h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  letter-spacing: -0.02em;
  line-height: 1.3;
  font-weight: 700;
}

/* --- Paragraph text polish --- */
p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: #3c3c52;
}

.sec.black p, .endcta p {
  color: rgba(255, 255, 255, 0.78);
}

/* --- Section padding: add horizontal breathing room --- */
section.sec > .split,
section.sec > .two,
section.sec > .acc,
section.sec > .label,
section.sec > h2,
section.sec > p.label {
  padding-left: clamp(20px, 3vw, 48px);
  padding-right: clamp(20px, 3vw, 48px);
  box-sizing: border-box;
}

/* Car section head and track */
section.sec > .car-head {
  padding-left: clamp(20px, 3vw, 48px);
  padding-right: clamp(20px, 3vw, 48px);
  box-sizing: border-box;
}

/* --- Improved vertical section spacing --- */
section.sec {
  padding-top: 88px;
  padding-bottom: 88px;
}

section.endcta {
  padding-top: 112px;
  padding-bottom: 112px;
}

/* --- Split layout: refine alignment and gap --- */
.split {
  gap: 80px;
  align-items: center;
}

.split-prose {
  border-left: 2px solid rgba(37, 99, 235, 0.18);
  padding-left: 36px !important;
}

.split-prose p + p {
  margin-top: 1rem;
}

/* --- Eyebrow / label text --- */
p.label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #2563eb !important;
  margin-bottom: 10px !important;
}

.split-text > p:first-child {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #2563eb !important;
  margin-bottom: 10px;
}

/* --- Process cards --- */
article {
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

article:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 48px rgba(0,0,0,0.2);
}

/* --- Dark section cards --- */
.two > div, .two > article {
  padding: 36px;
  border-radius: 12px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.18s ease;
}

/* --- Accordion heading --- */
.acc > button {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* --- Dark section headings --- */
section.sec.black h2,
section.sec.black h3,
section.endcta h2 {
  color: #ffffff;
}

/* --- End CTA section --- */
.endcta {
  text-align: center;
}

.endcta h2 {
  font-size: clamp(1.9rem, 2.8vw, 2.5rem) !important;
  margin-bottom: 18px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Soft section background refinement --- */
section.sec.soft {
  background-color: #f6f8ff;
}

/* --- Font smoothing for lists --- */
ul li, ol li {
  line-height: 1.7;
  font-family: 'Inter', system-ui, sans-serif;
}

/* --- Selection highlight --- */
::selection {
  background: #2563eb1a;
  color: #1c1c2e;
}

/* END TYPOGRAPHY POLISH */


/* ====================================================================
   AI SUB-PAGES, COMPREHENSIVE LAYOUT & TYPOGRAPHY POLISH
   Covers: ai-automation, inbox-triage, document-processing,
           lead-routing, reporting-bi, compliance-filing,
           customer-onboarding, ai-voice-chat, hr-payroll, supply-chain
   ==================================================================== */

/* ---- 1. GLOBAL FONT RENDERING ---- */
.aerosoft-css-cinematic *,
.aerosoft-css-cinematic *::before,
.aerosoft-css-cinematic *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}
html { scroll-behavior: smooth; }

/* ---- 2. BODY BASE ---- */
.aerosoft-css-cinematic body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #14142a;
}

/* ---- 3. HEADINGS, Quicksand across ALL levels ---- */
.aerosoft-css-cinematic h1,
.aerosoft-css-cinematic h2,
.aerosoft-css-cinematic h3,
.aerosoft-css-cinematic h4,
.aerosoft-css-cinematic h5,
.aerosoft-css-cinematic h6 {
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.aerosoft-css-cinematic h1 {
  font-size: clamp(2.6rem, 4.5vw, 4rem) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.06 !important;
}

.aerosoft-css-cinematic h2,
.aerosoft-css-cinematic .lead-h2 {
  font-size: clamp(1.8rem, 2.8vw, 2.5rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.13 !important;
  font-weight: 800 !important;
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
}

.aerosoft-css-cinematic h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.375rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.28 !important;
  font-weight: 700 !important;
}

/* ---- 4. PARAGRAPH & BODY TEXT ---- */
.aerosoft-css-cinematic p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: #3c3c52;
}

.aerosoft-css-cinematic .prose p,
.aerosoft-css-cinematic .bigc-body p,
.aerosoft-css-cinematic .scard-body p,
.aerosoft-css-cinematic section.sec.black p,
.aerosoft-css-cinematic section.sec.black li,
.aerosoft-css-cinematic .endcta p {
  color: rgba(255, 255, 255, 0.82);
}

/* Dark section white text */
.aerosoft-css-cinematic section.sec.black h2,
.aerosoft-css-cinematic section.sec.black h3,
.aerosoft-css-cinematic section.sec.black h4,
.aerosoft-css-cinematic .endcta h2,
.aerosoft-css-cinematic .endcta h3 {
  color: #ffffff !important;
}

/* ---- 5. SECTION SPACING ---- */
.aerosoft-css-cinematic section.sec {
  padding-top: 92px !important;
  padding-bottom: 92px !important;
}

.aerosoft-css-cinematic section.endcta {
  padding-top: 116px !important;
  padding-bottom: 116px !important;
}

/* Soft background tweak */
.aerosoft-css-cinematic section.sec.soft {
  background-color: #f5f7ff;
}

/* ---- 6. WRAP CONTAINER, improved padding ---- */
.aerosoft-css-cinematic .wrap {
  padding-left: clamp(24px, 4vw, 64px) !important;
  padding-right: clamp(24px, 4vw, 64px) !important;
}

/* ---- 7. HERO SECTION ---- */
.aerosoft-css-cinematic .hero {
  position: relative;
}

.aerosoft-css-cinematic .hero-in {
  padding: 120px 64px 96px !important;
}

.aerosoft-css-cinematic .hero h1 {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
  max-width: 820px;
}

/* Breadcrumb / crumb */
.aerosoft-css-cinematic .crumb {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 20px;
  display: block;
}

/* ---- 8. EYEBROW / SECTION LABELS ---- */
.aerosoft-css-cinematic .eyebrow,
.aerosoft-css-cinematic p.label,
.aerosoft-css-cinematic .split-text > p:first-child {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #2563eb !important;
  margin-bottom: 12px !important;
}

/* ---- 9. SPLIT LAYOUT ---- */
.aerosoft-css-cinematic .split {
  gap: 80px !important;
  align-items: center;
}

.aerosoft-css-cinematic .split-img {
  border-radius: 16px;
  overflow: hidden;
}

.aerosoft-css-cinematic .split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Prose column with accent border */
.aerosoft-css-cinematic section.sec .split > .split-img + *,
.aerosoft-css-cinematic section.sec .split > *:last-child {
  /* subtle spacing on right column */
}

/* ---- 10. LEAD-H2 (Large display heading in .wrap) ---- */
.aerosoft-css-cinematic .lead-h2 {
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
  color: #14142a;
}

/* Dark section lead-h2 */
.aerosoft-css-cinematic section.sec.black .lead-h2 {
  color: #ffffff !important;
}

/* ---- 11. PROSE COLUMN ---- */
.aerosoft-css-cinematic .prose {
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.78;
}

.aerosoft-css-cinematic .prose p {
  margin-bottom: 1.1rem;
}

.aerosoft-css-cinematic .prose p:last-child {
  margin-bottom: 0;
}

/* Light section prose */
.aerosoft-css-cinematic section.sec:not(.black) .prose p {
  color: #3c3c52;
}

/* ---- 12. ACCORDION (acc-item / acc-head / acc-body) ---- */
.aerosoft-css-cinematic .acc-item {
  border-top: 1px solid rgba(20, 20, 42, 0.1);
  transition: background 0.18s ease;
}

.aerosoft-css-cinematic .acc-item:last-child {
  border-bottom: 1px solid rgba(20, 20, 42, 0.1);
}

.aerosoft-css-cinematic .acc-head {
  padding: 22px 0 !important;
  cursor: pointer;
  gap: 16px;
}

.aerosoft-css-cinematic .acc-head h3 {
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.35 !important;
  color: #14142a;
  flex: 1;
}

.aerosoft-css-cinematic .num {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  color: #2563eb !important;
  min-width: 24px;
}

.aerosoft-css-cinematic .acc-body {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem !important;
  line-height: 1.78 !important;
  color: #4a4a62;
  padding: 4px 0 24px !important;
  max-width: 72ch;
}

.aerosoft-css-cinematic .acc-body p {
  color: #4a4a62;
  font-size: 0.9375rem;
  line-height: 1.78;
}

/* ---- 13. SERVICE CARDS (.svc-card / .svc-grid) ---- */
.aerosoft-css-cinematic .svc-grid {
  gap: 20px !important;
}

.aerosoft-css-cinematic .svc-card {
  padding: 36px 30px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: #0a0a0a !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.aerosoft-css-cinematic .svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  border-color: rgba(37, 99, 235, 0.25) !important;
}

.aerosoft-css-cinematic .svc-card h3 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin-bottom: 12px;
}

.aerosoft-css-cinematic .svc-card p {
  font-size: 0.9125rem !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Card category / label */
.aerosoft-css-cinematic .scard-cat {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #2563eb !important;
  margin-bottom: 10px;
  display: block;
}

/* ---- 14. BIG CARDS (.bigc), dark two-col feature cards ---- */
.aerosoft-css-cinematic .bigc {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  background: #1a1a1a !important;
}

.aerosoft-css-cinematic .bigc:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.aerosoft-css-cinematic .bigc-body {
  padding: 32px !important;
}

.aerosoft-css-cinematic .bigc-body h3,
.aerosoft-css-cinematic .bigc h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin-bottom: 10px;
}

.aerosoft-css-cinematic .bigc-body p,
.aerosoft-css-cinematic .bigc p {
  font-size: 0.9125rem !important;
  line-height: 1.72 !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* ---- 15. TWO-COLUMN GRID ---- */
.aerosoft-css-cinematic .two {
  gap: 24px !important;
}

/* ---- 16. SCARD (numbered feature cards) ---- */
.aerosoft-css-cinematic .scard {
  border-radius: 16px !important;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.aerosoft-css-cinematic .scard:hover {
  transform: translateY(-2px);
}

.aerosoft-css-cinematic .scard-num {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 3.5rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  color: rgba(255, 255, 255, 0.15) !important;
  display: block;
  margin-bottom: 8px;
}

.aerosoft-css-cinematic .scard-body {
  padding: 32px !important;
}

.aerosoft-css-cinematic .scard-body h3 {
  font-size: 1.175rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin-bottom: 10px;
}

.aerosoft-css-cinematic .scard-body p {
  font-size: 0.9rem !important;
  line-height: 1.72 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ---- 17. PROCESS CAROUSEL (car-head / car-track) ---- */
.aerosoft-css-cinematic .car-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  margin-bottom: 36px !important;
  gap: 16px;
}

.aerosoft-css-cinematic .car-count {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: rgba(20, 20, 42, 0.45);
  letter-spacing: 0.04em;
}

.aerosoft-css-cinematic .car-nav {
  display: flex;
  gap: 8px;
}

.aerosoft-css-cinematic .car-track {
  gap: 20px !important;
}

/* Process step articles */
.aerosoft-css-cinematic .car-track article {
  border-radius: 16px !important;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aerosoft-css-cinematic .car-track article:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}

/* ---- 18. .n (navigation/step numbers inside cards) ---- */
.aerosoft-css-cinematic .n {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}

/* ---- 19. BUTTONS ---- */
.aerosoft-css-cinematic .btn,
.aerosoft-css-cinematic .btn-w,
.aerosoft-css-cinematic .lets-talk {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease !important;
}

.aerosoft-css-cinematic .btn {
  font-size: 0.9375rem !important;
  border-radius: 40px !important;
}

.aerosoft-css-cinematic .btn:hover,
.aerosoft-css-cinematic .lets-talk:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Read More arrow links */
.aerosoft-css-cinematic .rd {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  transition: gap 0.15s ease;
}

.aerosoft-css-cinematic .rd:hover {
  gap: 10px;
}

/* ---- 20. FEAT-LIST (feature bullet list on AI main page) ---- */
.aerosoft-css-cinematic .feat-list {
  list-style: none;
  padding: 0;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aerosoft-css-cinematic .feat-list li {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.aerosoft-css-cinematic .feat-list li::before {
  content: '→';
  color: #2563eb;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---- 21. END CTA SECTION ---- */
.aerosoft-css-cinematic .endcta {
  text-align: center;
  background: #0a0a10 !important;
}

.aerosoft-css-cinematic .endcta h2 {
  font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
  color: #ffffff !important;
  letter-spacing: -0.035em !important;
  line-height: 1.1 !important;
  max-width: 620px;
  margin: 0 auto 20px !important;
}

.aerosoft-css-cinematic .endcta p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  max-width: 52ch;
  margin: 0 auto 36px;
}

.aerosoft-css-cinematic .endcta .btn,
.aerosoft-css-cinematic .endcta a {
  font-weight: 600 !important;
}

/* ---- 22. SCROLL CUE ---- */
.aerosoft-css-cinematic .scrollcue {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* ---- 23. SELECTION HIGHLIGHT ---- */
.aerosoft-css-cinematic ::selection {
  background: rgba(37, 99, 235, 0.12);
  color: #14142a;
}

/* ---- 24. IMAGE POLISH ---- */
.aerosoft-css-cinematic img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---- 25. ACCORDION ON LIGHT SECTIONS (.acc) ---- */
.aerosoft-css-cinematic section.sec .acc > button,
.aerosoft-css-cinematic section.sec button.acc-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0 !important;
  border-bottom: 1px solid #e4e8f5;
}

/* ---- 26. SPLIT-WRAP (AI automation main page variant) ---- */
.aerosoft-css-cinematic .split-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center;
}

/* ---- 27. BD (bordered divider) ---- */
.aerosoft-css-cinematic .bd {
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---- 28. NM (service name in hero) ---- */
.aerosoft-css-cinematic .nm {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

/* ---- 29. STRONG / BOLD TEXT ---- */
.aerosoft-css-cinematic strong,
.aerosoft-css-cinematic b {
  font-weight: 700;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ---- 30. LIST ITEMS ---- */
.aerosoft-css-cinematic ul li,
.aerosoft-css-cinematic ol li {
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.72;
}

/* END AI SUB-PAGES POLISH */


/* ================================================================
   GLOBAL FONT POLISH, AEROSOFT CAYMAN, SITE-WIDE
   Replaces Basis-regular & system-ui fallbacks with Inter.
   Enforces Quicksand for all headings, Inter for all body text.
   ================================================================ */

/* ---- 0. GOOGLE FONTS IMPORT (inline @import for Customizer) ---- */
/* google fonts @import removed: self-hosted in fonts.css */
/* ---- 1. GLOBAL BASE RESET ---- */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: #14142a;
  letter-spacing: 0;
}

/* ---- 2. HEADING SYSTEM, Quicksand across ALL levels, ALL pages ---- */
h1, h2, h3, h4, h5, h6,
.hl-w, .lead-h2 {
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -0.025em;
  color: #0f0f1a;
}

h1, .hl-w {
  font-size: clamp(2.5rem, 4.5vw, 4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.06 !important;
}

h2, .lead-h2 {
  font-size: clamp(1.8rem, 2.8vw, 2.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
}

h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.375rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.28 !important;
}

h4 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.35 !important;
}

h5, h6 {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Dark bg headings stay white */
.hero h1, .hero h2,
.sec.black h1, .sec.black h2, .sec.black h3,
.endcta h1, .endcta h2,
.foot h3, .foot h4, .fcol h3, .fcol h4 {
  color: #ffffff !important;
}

/* ---- 3. PARAGRAPH & BODY COPY ---- */
p, li, td, th, label, figcaption, cite, blockquote {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1rem;
  line-height: 1.75;
  color: #3c3c52;
  letter-spacing: 0;
}

/* Replace ALL Basis-regular instances with Inter */
.nav, .nav *, .nlinks *, .nav-item *,
.hero-in p, .hero-in .sub, .hl-w + p,
.nm-desc, .nm-cta, .nm-feat,
.ncard p, .bigc p, .bigc-body p,
.ind-tx p, .ind-ov,
.fcol p, .fbot p,
.geo-k, .geo-head p,
.svc-card p, .scard-body p,
.acc-body, .acc-body p,
.prose p, .split-prose p,
.wrap p,
.bdg, .badge,
article p, .post p, .entry-content p {
  font-family: 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

/* White body text on dark sections */
.hero p, .hero .sub,
.sec.black p, .sec.black li,
.endcta p, .bigc p, .bigc-body p,
.svc-card p, .scard-body p,
.foot p, .fcol p, .fbot p,
.nm-desc, .geo-card p {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Light section body text */
section.sec:not(.black) p,
section.sec.soft p,
.wrap p:not(.label) {
  color: #3c3c52;
}

/* ---- 4. NAVIGATION ---- */
.nav, .nav-in, .nlinks, .mnav {
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* Main nav links */
.nlinks a, .nav-item > a, nav > ul > li > a {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.5 !important;
}

/* Nav brand / logo text */
.brand-logo, .brand {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* Mega-menu titles */
.nm-title {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.nm-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
}

.nm-cta, .nm-feat a {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* Subnav / mobile nav */
.subnav a, .mnav a {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}

/* Nav locale / contact text */
.nav-locale, .nav-contact {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
}

/* ---- 5. EYEBROWS / OVERLINES ---- */
.eyebrow, p.label, .crumb,
.geo-head > p:first-child,
[class*="eyebrow"], [class*="overline"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}

/* ---- 6. HERO / HOMEPAGE SECTIONS ---- */
/* Hero sub-headline */
.hero-in p, .hero-in .sub, .hero p {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(1rem, 1.25vw, 1.125rem) !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  letter-spacing: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  max-width: 58ch;
}

/* ---- 7. STAT NUMBERS (.geo-num, .inum, counters) ---- */
.geo-num, .stat-num, .inum,
[class*="stat"] .num,
[class*="counter"] {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}

.geo-num {
  font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  font-weight: 700 !important;
}

/* Stat labels */
.geo-k, .stat-label, [class*="stat"] .label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* ---- 8. CARDS ---- */
/* News / insight cards */
.ncard h3 {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 1.175rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

.ncard p {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.72 !important;
  color: #4a4a62;
}

.ncard .scard-cat, .ncard .eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Big cards (.bigc) */
.bigc h3, .bigc-body h3 {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
}

.bigc p, .bigc-body p {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9125rem !important;
  line-height: 1.72 !important;
}

/* Industry cards */
.ind-tx h3 {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.ind-tx p, .ind-ov {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
}

/* ---- 9. BUTTONS ---- */
.btn, .btn-w, .btn-out-w, .lets-talk,
a.btn, button.btn, input[type="submit"],
input[type="button"], button {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.4 !important;
}

.btn, .btn-w, .btn-out-w {
  font-size: 0.9375rem !important;
}

/* FAB (floating action buttons) */
.fab-lbl {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
}

/* ---- 10. FOOTER ---- */
.foot, .foot * {
  font-family: 'Inter', system-ui, sans-serif !important;
}

.foot h3, .foot h4, .fcol h3, .fcol h4,
.foot-brand {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

.fcol a {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
}

.fcol p, .foot p {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
}

/* Footer bottom bar */
.fbot, .fbot * {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;
}

.fbot p, .fbot a {
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* ---- 11. FORMS & INPUTS ---- */
input, textarea, select,
input[type="text"], input[type="email"],
input[type="search"], .search-field {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

::placeholder {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  opacity: 0.6;
}

/* ---- 12. BLOG / INSIGHTS / ARCHIVE PAGES ---- */
.entry-title, .post-title, article h2, article h1 {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

.entry-content, .post-content {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.0625rem !important;
  line-height: 1.78 !important;
  color: #3c3c52;
}

.entry-content p {
  font-size: 1.0625rem !important;
  line-height: 1.78 !important;
  margin-bottom: 1.4em;
}

/* ---- 13. TAGS / BADGES / CATEGORIES ---- */
.bdg, .badge, .tag, .cat,
.scard-cat, [class*="tag-"], [class*="-tag"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ---- 14. GEO / STATS SECTION ---- */
.geo-stats, .geo-stats * {
  font-family: 'Inter', sans-serif !important;
}

.geo-head h2 {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* ---- 15. LONGRUN / TESTIMONIAL / QUOTE ELEMENTS ---- */
.longrun, blockquote, .quote {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  font-style: italic;
}

/* ---- 16. STRONG / EM / SMALL ---- */
strong, b {
  font-family: inherit !important;
  font-weight: 700;
}

em, i {
  font-family: inherit !important;
  font-style: italic;
}

small, .small {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;
  line-height: 1.5;
}

/* ---- 17. SELECTION ---- */
::selection {
  background: rgba(37, 99, 235, 0.12);
  color: #0f0f1a;
}

/* ---- 18. SCROLLCUE ---- */
.scrollcue {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* ---- 19. HP PREV / HOME SECTION HEADINGS ---- */
.hp-prev-head, .hp-prev-cta {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 800 !important;
}

.hp-side p {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9375rem !important;
  line-height: 1.72 !important;
}

/* ---- 20. INSIGHTS CARDS ---- */
.insight-card h3, .post-card h3,
.ncard h3 {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* END GLOBAL FONT POLISH */




/* =============================================
   LUXURY FORM, MONOCHROMATIC BLACK & WHITE
   ============================================= */

/* === Page background: warm off-white linen === */
body.aerosoft-standalone {
  background: #f5f4f0 !important;
}

/* === Crumb / breadcrumb badge === */
.crumb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1px solid #d0cfc9 !important;
  color: #1a1a1a !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 7px 18px !important;
  border-radius: 100px !important;
  margin-bottom: 22px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}

/* === Left column heading === */
.qt-left h1 {
  font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.04em !important;
  color: #0d0d0d !important;
  font-weight: 800 !important;
}

/* Override any coloured italic span */
.qt-left h1 em,
.qt-left h1 span,
.qt-left h1 i {
  color: #0d0d0d !important;
  font-style: italic !important;
}

.qt-left .sub {
  font-size: 1rem !important;
  color: #5c5c56 !important;
  line-height: 1.7 !important;
  letter-spacing: -0.01em !important;
  max-width: 460px !important;
}

/* === FORM CARD === */
.qt-form-card {
  background: #ffffff !important;
  border: 1px solid #e0dfd8 !important;
  border-radius: 24px !important;
  padding: 48px !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 6px 24px rgba(0,0,0,0.06),
    0 32px 80px rgba(0,0,0,0.08) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Hairline top-edge accent */
.qt-form-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 48px !important;
  right: 48px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #c8c7c0 30%, #c8c7c0 70%, transparent) !important;
  pointer-events: none !important;
}

.qt-form-card > form {
  position: relative !important;
  z-index: 1 !important;
}

/* === LABELS === */
.qt-fld label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  transition: color 0.2s ease !important;
}

/* === TEXT / EMAIL / TEL INPUTS === */
.qt-fld input[type="text"],
.qt-fld input[type="email"],
.qt-fld input[type="tel"] {
  width: 100% !important;
  background: #fafaf8 !important;
  border: 1.5px solid #dddcd5 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  font-size: 0.95rem !important;
  font-family: Inter, sans-serif !important;
  color: #0d0d0d !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  outline: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) inset !important;
}

.qt-fld input[type="text"]::placeholder,
.qt-fld input[type="email"]::placeholder,
.qt-fld input[type="tel"]::placeholder {
  color: #b0afa8 !important;
  font-size: 0.9rem !important;
}

.qt-fld input[type="text"]:focus,
.qt-fld input[type="email"]:focus,
.qt-fld input[type="tel"]:focus {
  background: #ffffff !important;
  border-color: #0d0d0d !important;
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.08),
    0 1px 3px rgba(0,0,0,0.05) inset !important;
}

.qt-fld input[type="text"]:hover:not(:focus),
.qt-fld input[type="email"]:hover:not(:focus),
.qt-fld input[type="tel"]:hover:not(:focus) {
  border-color: #b0afa8 !important;
  background: #ffffff !important;
}

/* === TEXTAREA === */
.qt-fld textarea {
  width: 100% !important;
  background: #fafaf8 !important;
  border: 1.5px solid #dddcd5 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  font-size: 0.95rem !important;
  font-family: Inter, sans-serif !important;
  color: #0d0d0d !important;
  min-height: 130px !important;
  resize: vertical !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  outline: none !important;
  line-height: 1.65 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) inset !important;
}

.qt-fld textarea::placeholder {
  color: #b0afa8 !important;
  font-size: 0.9rem !important;
}

.qt-fld textarea:focus {
  background: #ffffff !important;
  border-color: #0d0d0d !important;
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.08),
    0 1px 3px rgba(0,0,0,0.05) inset !important;
}

.qt-fld textarea:hover:not(:focus) {
  border-color: #b0afa8 !important;
  background: #ffffff !important;
}

/* === CHIPS (service type buttons) === */
.qt-chip {
  background: #f5f4f0 !important;
  border: 1.5px solid #dddcd5 !important;
  border-radius: 100px !important;
  padding: 9px 20px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #4a4a45 !important;
  font-family: Inter, sans-serif !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  letter-spacing: 0.01em !important;
}

.qt-chip:hover {
  background: #f0efe9 !important;
  border-color: #888884 !important;
  color: #0d0d0d !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
}

.qt-chip.active,
.qt-chip[aria-pressed="true"],
.qt-chip.selected {
  background: #0d0d0d !important;
  border-color: #0d0d0d !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important;
  transform: translateY(-1px) !important;
}

/* === SUBMIT BUTTON === */
.qt-submit {
  width: 100% !important;
  background: #0d0d0d !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 17px 40px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: all 0.22s ease !important;
  position: relative !important;
  overflow: hidden !important;
  margin-top: 8px !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.2),
    0 1px 4px rgba(0,0,0,0.15) !important;
}

/* Shimmer overlay */
.qt-submit::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

.qt-submit:hover {
  background: #1a1a1a !important;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.3),
    0 2px 6px rgba(0,0,0,0.2) !important;
  transform: translateY(-2px) !important;
}

.qt-submit:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

/* === SECURE BADGE === */
.qt-secure {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 16px !important;
  font-size: 0.75rem !important;
  color: #9a9991 !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* === RIGHT COLUMN: TRUST CARD === */
.qt-trust {
  background: #ffffff !important;
  border: 1px solid #e0dfd8 !important;
  border-radius: 20px !important;
  padding: 36px !important;
  margin-bottom: 18px !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.04),
    0 8px 28px rgba(0,0,0,0.06) !important;
}

.qt-trust h2,
.qt-trust > *:first-child {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0d0d0d !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 22px !important;
}

/* Trust item rows */
.qt-trust-item,
.qt-trust li {
  padding: 14px 0 !important;
  border-bottom: 1px solid #eeede7 !important;
}

.qt-trust-item:last-child,
.qt-trust li:last-child {
  border-bottom: none !important;
}

/* Checkmark icons in trust card, make them dark */
.qt-trust svg,
.qt-trust .icon {
  color: #0d0d0d !important;
  stroke: #0d0d0d !important;
}

/* === CONTACT CARD, deep black luxury === */
.qt-contact {
  background: #0d0d0d !important;
  border-radius: 20px !important;
  padding: 32px 36px !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.3),
    0 1px 4px rgba(0,0,0,0.2) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle grain texture effect */
.qt-contact::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.04) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

.qt-contact h2,
.qt-contact h3,
.qt-contact > *:first-child {
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 22px !important;
  letter-spacing: -0.02em !important;
  position: relative !important;
  z-index: 1 !important;
}

.qt-contact a {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  transition: color 0.18s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.qt-contact a:hover {
  color: #ffffff !important;
}

.qt-contact a + a {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* === ENTRY ANIMATIONS === */
@keyframes luxFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.qt-form-card {
  animation: luxFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.qt-trust {
  animation: luxFadeUp 0.6s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.qt-contact {
  animation: luxFadeUp 0.65s 0.16s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* === Focus label turns black === */
.qt-fld:focus-within label {
  color: #0d0d0d !important;
}


/* =============================================
   B&W OVERRIDES, NEUTRALISE REMAINING COLOUR
   ============================================= */

/* Kill the blue italic in the hero heading, nuclear specificity */
body .qt-left h1 em,
body .qt-left h1 i,
body .qt-left h1 span,
body .qt-left h1 strong,
html body .qt-left h1 em {
  color: #0d0d0d !important;
  background: none !important;
  -webkit-text-fill-color: #0d0d0d !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}

/* Kill any gradient text / background-clip: text trick */
body .qt-left h1 * {
  background-image: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #0d0d0d !important;
  color: #0d0d0d !important;
}

/* Remove the coloured gradient top-border on the form card */
.qt-form-card {
  border-top: 1px solid #e0dfd8 !important;
  border-image: none !important;
  background-image: none !important;
}

/* Ensure page background is warm off-white, not blue */
body.aerosoft-standalone,
.aerosoft-standalone {
  background: #f5f4f0 !important;
  background-image: none !important;
  background-color: #f5f4f0 !important;
}

/* Any accent / brand blue links inside the form section */
.qt-left a,
.qt-left *[style*="color"],
.qt-frame a:not(.qt-contact a) {
  color: #1a1a1a !important;
}

/* Ensure checkmark icons in trust card are black */
.qt-trust svg path,
.qt-trust svg polyline,
.qt-trust svg line {
  stroke: #0d0d0d !important;
}

/* Trust card check icon colour */
.qt-trust .check-icon,
.qt-trust [class*="check"],
.qt-trust [class*="tick"] {
  color: #0d0d0d !important;
  fill: #0d0d0d !important;
}


/* Kill the rainbow/gradient top-border on form card completely */
.qt-form-card,
.qt-form-card::before,
.qt-form-card::after {
  border-image: none !important;
  border-image-source: none !important;
  outline: none !important;
}

.qt-form-card {
  border-top: 1px solid #e0dfd8 !important;
}

/* Also target any wrapper that might hold the coloured bar */
.qt-left > .qt-form-card,
.qt-left > div[class*="card"],
[class*="qt-form"] {
  border-image: none !important;
}


/* Remove the rainbow/coloured 3px ::before bar on form card */
.qt-form-card::before {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  height: 0 !important;
  display: none !important;
}


/* =============================================
   FINAL B&W CLEANUP, SUBMIT & ICONS
   ============================================= */

/* Submit button, force pure black, override theme blue */
body .qt-submit,
body form .qt-submit,
html body .qt-submit,
button.qt-submit {
  background: #0d0d0d !important;
  background-color: #0d0d0d !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.15) !important;
}

body .qt-submit:hover,
html body .qt-submit:hover {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.32), 0 2px 6px rgba(0,0,0,0.2) !important;
  transform: translateY(-2px) !important;
}

/* Contact card icons, override any coloured SVG to white */
.qt-contact svg,
.qt-contact svg *,
.qt-contact svg path,
.qt-contact svg circle {
  color: rgba(255,255,255,0.7) !important;
  fill: rgba(255,255,255,0.7) !important;
  stroke: rgba(255,255,255,0.7) !important;
}




/* ============================================================
   STICKY HERO, MOBILE (all pages)
   Restores the desktop pinned-parallax scroll effect on
   mobile: hero media stays position:fixed while the
   reveal-stack content scrolls up and covers it.

   Key fixes:
   1. Undo contain:strict / contain:size layout, these
      create a new containing block and break position:fixed
   2. Undo overflow:hidden on .hero, also breaks fixed children
   3. Show the video / restore position:fixed + 100svh sizing
   4. Dark fallback for homepage hero (no poster image)
   5. iOS Safari -webkit-overflow-scrolling fix on body
   ============================================================ */

/* ── All mobile sizes (≤ 768px) ── */
@media (max-width: 768px) {

  /* 1. CRITICAL: undo contain that breaks position:fixed */
  .hero {
    contain: none !important;
    overflow: visible !important;
  }
  .hero img,
  .hero video,
  .hero .hero-img,
  .hero .hero-vid {
    contain: none !important;
  }

  /* 2. Show the hero video, override the display:none */
  .hero video.hero-img,
  .hero video.hero-vid {
    display: block !important;
    visibility: visible !important;
  }

  /* 3. Keep hero media pinned to viewport (the parallax engine) */
  .hero img,
  .hero video,
  .hero .hero-img,
  .hero .hero-vid {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    object-fit: cover !important;
    object-position: center center !important;
    will-change: transform !important;
    z-index: 1 !important;
  }

  /* 4. Hero overlay/scrim, also fixed, matches video */
  .hero::after,
  .hero:has(video.hero-vid)::after {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    z-index: 2 !important;
  }

  /* 5. Hero container, sized to viewport so reveal-stack
         starts right below, then scrolls up over the fixed media */
  .hero {
    position: relative !important;
    height: 100svh !important;
    min-height: 100svh !important;
    background: #0a0a0a !important; /* dark fallback while video loads */
  }

  /* 6. Hero content (text + buttons), sits above overlay */
  .hero-in {
    position: relative !important;
    z-index: 3 !important;
  }

  /* 7. Reveal-stack, slides up over the fixed hero.
         Keep its rounded top corners and shadow for the
         luxury scroll feel */
  .reveal-stack {
    position: relative !important;
    z-index: 10 !important;
    border-top-left-radius: 26px !important;
    border-top-right-radius: 26px !important;
    box-shadow: 0 -46px 90px rgba(0,0,0,0.55) !important;
    overflow: hidden !important;
  }

  /* 8. First section inside reveal-stack needs its own
         radius to match the container */
  .reveal-stack > .sec:first-child,
  .reveal-stack > section:first-child {
    border-top-left-radius: 26px !important;
    border-top-right-radius: 26px !important;
  }

  /* 9. The grain overlay, keep it above the video */
  .grain {
    position: fixed !important;
    z-index: 5 !important;
  }
}

/* ── 760px breakpoint, hero text sizing (unchanged from theme) ── */
@media (max-width: 760px) {
  .hero h1 {
    font-size: clamp(1.9rem, 7.2vw, 2.7rem) !important;
  }
  .hero-in {
    padding-top: 120px !important;
    padding-bottom: 88px !important;
  }

  /* Sub-page article heroes, slightly shorter */
  .hero.art {
    height: auto !important;
    min-height: 60svh !important;
  }
  .hero.art .hero-in {
    padding-top: 110px !important;
    padding-bottom: 60px !important;
  }
}

/* ── Small phones ── */
@media (max-width: 430px) {
  .hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.3rem) !important;
  }
  .hero-in {
    padding-top: 104px !important;
    padding-bottom: 70px !important;
  }
}

/* ── iOS Safari: ensure body scroll works with fixed children ── */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    body {
      -webkit-overflow-scrolling: touch !important;
    }
    /* On iOS, fixed positioning inside a stacking context can
       fail if any ancestor has transform/will-change.
       Ensure hero itself has no transform. */
    .hero {
      transform: none !important;
      -webkit-transform: none !important;
    }
  }
}

/* ================================================================
   TOOLS SECTION & CTA BAR, PROPER MOBILE LAYOUT (v2)
   Root cause fix: removed rogue base .svc-grid rule that was 
   overriding media queries. Cards now properly responsive.
   CTA bar (Read manifesto / How we work / All tools) stacks
   vertically on mobile.
   ================================================================ */

/* --- CTA bar below tool cards: stack on mobile --- */
/* The bar is a flex row: [text paragraph] [3 btn btn-dark links] */
@media (max-width: 768px) {
  /* Stack the text + buttons vertically */
  .sec .wrap > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
  }

  /* Button container: allow wrapping */
  .sec .wrap > div:last-child > div:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Each .btn.btn-dark in the CTA bar: auto-width, centered */
  .sec .wrap > div:last-child .btn {
    flex: 1 1 auto !important;
    min-width: 140px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Ensure .svc-card fills full width */
  .svc-card {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* --- Extra-small phones: tighten sizing --- */
@media (max-width: 480px) {
  /* Full-width buttons on very small screens */
  .sec .wrap > div:last-child .btn {
    width: 100% !important;
    min-height: 48px !important;
  }

  .svc-card h3 {
    font-size: 1.1rem !important;
  }

  .svc-card .bd {
    padding: 20px 18px !important;
  }
}

/* ================================================================
   NCARD (What's new / carousel cards), MOBILE READ MORE FIX
   Ensures the "Read more" link is always visible and cards
   don't get clipped by overflow:hidden on parent sections.
   ================================================================ */

/* Make ncard a flex column so .rd always sits at bottom, never clipped */
.ncard {
  display: flex !important;
  flex-direction: column !important;
}

.ncard .pic {
  flex-shrink: 0 !important;
}

.ncard h3 {
  flex-shrink: 0 !important;
}

.ncard p {
  flex: 1 !important;
}

.ncard .rd {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* On mobile: allow horizontal scroll for carousels, don't clip them */
@media (max-width: 768px) {
  .sec:has(.car-track),
  section:has(.car-track) {
    overflow: visible !important;
  }
  
  .car-track {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Ensure ncard max-width allows proper display */
  .ncard {
    max-width: 82vw !important;
    min-width: 280px !important;
  }
}

/* ================================================
   DIAGNOSTIC REPORT SECTION, FONT & TYPOGRAPHY POLISH
   Matches the cinematic dark design language of aerosoft.ky
   Fonts: Quicksand (headings) + Inter (body)
   ================================================ */

/* ---- Report Section Base ---- */
#dx-report-section {
  background: #f5f7fa;
  padding: 80px 0 100px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

#dx-report-section .wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- Eyebrow label ---- */
#dx-report-section .eyebrow {
  display: block;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--dg-blue, #1a56f0) !important;
  margin-bottom: 18px !important;
}

/* ---- Main result heading ---- */
#dx-report-section .dx-res-h1 {
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
  font-size: clamp(28px, 3.5vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  color: #111 !important;
  margin: 0 0 16px !important;
}

#dx-report-section .dx-res-h1 em {
  font-style: normal;
}

/* ---- Result sub-heading ---- */
#dx-report-section #dx-headline-sub,
#dx-report-section .dx-res-sub {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: -0.01em !important;
  color: #444 !important;
  margin: 0 0 48px !important;
  max-width: 600px;
}

/* ---- Score Block ---- */
#dx-report-section .dx-score {
  background: #0d1117;
  border-radius: 20px;
  padding: 40px 44px;
  margin-bottom: 40px;
  display: flex;
  align-items: flex-start;
}

#dx-report-section .dx-score-in {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

#dx-report-section .dx-score-n,
#dx-report-section #dx-score {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-size: clamp(64px, 8vw, 96px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: #fff !important;
  flex-shrink: 0;
}

#dx-report-section .dx-score-l {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.55) !important;
  padding-top: 8px;
  max-width: 200px;
}

#dx-report-section .dx-score-l small {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.55) !important;
}

#dx-report-section .dx-score-d,
#dx-report-section #dx-score-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.65) !important;
  padding-top: 8px;
  max-width: 320px;
}

/* ---- Axes / Score Bars ---- */
#dx-report-section .dx-axes {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 60px;
}

#dx-report-section .dx-axis {
  background: #fff;
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

#dx-report-section .dx-axis-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

#dx-report-section .dx-axis-name {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #111 !important;
}

#dx-report-section .dx-axis-score {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #111 !important;
}

#dx-report-section .dx-axis-score.mid {
  color: #d97706 !important;
}

#dx-report-section .dx-axis-score.high {
  color: var(--dg-blue, #1a56f0) !important;
}

#dx-report-section .dx-axis-bar {
  height: 8px;
  background: #e8ecf0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}

#dx-report-section .dx-axis-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--dg-blue, #1a56f0);
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

#dx-report-section .dx-axis-fill.mid {
  background: #d97706;
}

#dx-report-section .dx-axis-fill.high {
  background: var(--dg-blue, #1a56f0);
}

#dx-report-section .dx-axis-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #666 !important;
  margin: 0 !important;
}

/* ---- Section: Recommendations ---- */
#dx-report-section h3 {
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
  font-size: clamp(22px, 2.5vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  color: #111 !important;
  margin: 0 0 8px !important;
}

#dx-report-section .dx-recs-intro {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: #666 !important;
  margin: 0 0 28px !important;
  line-height: 1.6 !important;
}

#dx-report-section .dx-recs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 64px;
}

#dx-report-section .dx-rec {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  background: #fff;
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  text-decoration: none;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
  border: 1.5px solid transparent;
}

#dx-report-section .dx-rec:hover {
  box-shadow: 0 6px 32px rgba(26,86,240,0.10);
  transform: translateY(-2px);
  border-color: rgba(26,86,240,0.18);
}

#dx-report-section .dx-rec-num {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--dg-blue, #1a56f0) !important;
  background: rgba(26,86,240,0.09);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}

#dx-report-section .dx-rec-body {
  flex: 1;
}

#dx-report-section .dx-rec-tag {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #999 !important;
  display: block;
  margin-bottom: 6px;
}

#dx-report-section .dx-rec-title {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
  color: #111 !important;
  margin: 0 0 6px !important;
}

#dx-report-section .dx-rec-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #666 !important;
  margin: 0 0 10px !important;
}

#dx-report-section .dx-rec-link {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--dg-blue, #1a56f0) !important;
  letter-spacing: -0.005em;
}

/* ---- Insights Row ---- */
#dx-report-section .dx-insights-row {
  margin-bottom: 64px;
}

#dx-report-section .dx-insights-row .eyebrow {
  margin-bottom: 12px !important;
}

#dx-report-section .dx-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 16px;
}

#dx-report-section .dx-insight-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px 22px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  text-decoration: none;
  display: block;
  transition: box-shadow 0.22s, transform 0.22s;
  border: 1.5px solid transparent;
}

#dx-report-section .dx-insight-card:hover {
  box-shadow: 0 6px 28px rgba(26,86,240,0.10);
  transform: translateY(-2px);
  border-color: rgba(26,86,240,0.15);
}

#dx-report-section .dx-insight-tag {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--dg-blue, #1a56f0) !important;
  display: block;
  margin-bottom: 8px;
}

#dx-report-section .dx-insight-title {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.35 !important;
  color: #111 !important;
  margin: 0 0 8px !important;
}

#dx-report-section .dx-insight-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #777 !important;
  margin: 0 !important;
}

#dx-report-section .dx-insights-all {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--dg-blue, #1a56f0) !important;
  text-decoration: none;
  display: inline-block;
  margin-top: 4px;
  letter-spacing: -0.01em;
}

/* ---- Email Capture / CTA Cap ---- */
#dx-report-section .dx-cap {
  background: #0d1117;
  border-radius: 20px;
  padding: 44px 48px;
  margin-bottom: 24px;
  color: #fff;
}

#dx-report-section .dx-cap h3 {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: #fff !important;
  margin: 0 0 10px !important;
}

#dx-report-section .dx-cap > p {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: rgba(255,255,255,0.65) !important;
  line-height: 1.6 !important;
  margin: 0 0 24px !important;
}

#dx-report-section .dx-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#dx-report-section .dx-form-row {
  display: flex;
  gap: 12px;
}

#dx-report-section .dx-form input[type="text"],
#dx-report-section .dx-form input[type="email"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: #111 !important;
  background: #fff !important;
  border: 1.5px solid #e0e4ea !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}

#dx-report-section .dx-form input:focus {
  border-color: var(--dg-blue, #1a56f0) !important;
}

#dx-report-section .dx-form .btn-p,
#dx-report-section .dx-form button.btn-p {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  background: var(--dg-blue, #1a56f0) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 13px 28px !important;
  cursor: pointer !important;
  display: inline-block !important;
  transition: opacity 0.2s !important;
  align-self: flex-start;
}

#dx-report-section .dx-form .btn-p:hover {
  opacity: 0.88 !important;
}

#dx-report-section .dx-form-note {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.45) !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

#dx-report-section .dx-form-honeypot {
  display: none !important;
}

/* ---- Form Success ---- */
#dx-report-section .dx-form-success h4 {
  font-family: 'Quicksand', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 12px 0 6px !important;
}

#dx-report-section .dx-form-success p {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.65) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ---- CTA Row ---- */
#dx-report-section .dx-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

#dx-report-section .dx-cta {
  background: #fff;
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.07);
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.22s, transform 0.22s;
  border: 1.5px solid transparent;
}

#dx-report-section .dx-cta:hover {
  box-shadow: 0 6px 28px rgba(26,86,240,0.10);
  transform: translateY(-2px);
  border-color: rgba(26,86,240,0.15);
}

#dx-report-section .dx-cta h5 {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #111 !important;
  margin: 0 0 6px !important;
}

#dx-report-section .dx-cta p {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #777 !important;
  margin: 0 !important;
}

#dx-report-section .dx-cta-arr {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(26,86,240,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

#dx-report-section .dx-cta:hover .dx-cta-arr {
  background: var(--dg-blue, #1a56f0);
}

/* ---- Restart Button ---- */
#dx-report-section .dx-restart {
  text-align: center;
  margin-top: 12px;
}

#dx-report-section .dx-restart-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #999 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: underline;
}

#dx-report-section .dx-restart-btn:hover {
  color: #555 !important;
}

/* ---- Responsive ---- */
@media (max-width: 680px) {
  #dx-report-section .dx-insights-grid {
    grid-template-columns: 1fr;
  }
  #dx-report-section .dx-cta-row {
    grid-template-columns: 1fr;
  }
  #dx-report-section .dx-cap {
    padding: 30px 24px;
  }
  #dx-report-section .dx-score {
    padding: 28px 24px;
  }
  #dx-report-section .dx-form-row {
    flex-direction: column;
  }
}

/* ================================================
   ROI CALCULATOR PAGE, FONT & BRAND POLISH
   Aligns rc- components to Aerosoft Cayman brand
   Brand blue: #1a56f0 | Quicksand (display) + Inter (body)
   ================================================ */

/* ---- Brand blue alignment (override #ED1C24 with site brand) ---- */
.rc-tab.active {
  background: var(--dg-blue, #1a56f0) !important;
  border-color: var(--dg-blue, #1a56f0) !important;
}

.rc-tab:hover {
  border-color: var(--dg-blue, #1a56f0) !important;
  color: var(--dg-blue, #1a56f0) !important;
  background: rgba(26,86,240,0.05) !important;
}

/* ---- Tab font refinement ---- */
.rc-tab {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ---- Results card: tighter, more cinematic ---- */
.rc-results-card {
  border: none !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.10), 0 2px 16px rgba(0,0,0,0.06) !important;
  border-radius: 20px !important;
}

/* ---- Results eyebrow: use site Inter eyebrow style ---- */
.rc-results-eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  color: var(--dg-blue, #1a56f0) !important;
  text-transform: uppercase !important;
}

/* ---- Big savings number: Quicksand for impact ---- */
.rc-results-total {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-size: clamp(48px, 6vw, 64px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: #0a0a0a !important;
}

/* ---- Breakdown row values: Quicksand for numerics ---- */
.rc-result-val {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--dg-blue, #1a56f0) !important;
  letter-spacing: -0.02em !important;
  font-size: 14px !important;
}

/* ---- Result labels: Inter, clean ---- */
.rc-result-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #556 !important;
  letter-spacing: -0.005em !important;
}

/* ---- Total row: Quicksand, prominent ---- */
.rc-result-row--total .rc-result-label {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #0a0a0a !important;
}

.rc-result-row--total .rc-result-val {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #0f7a50 !important;
}

/* ---- Payback pill: brand blue ---- */
.rc-payback {
  background: rgba(26,86,240,0.06) !important;
  border: 1px solid rgba(26,86,240,0.18) !important;
  border-radius: 12px !important;
}

.rc-payback-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #556 !important;
}

.rc-payback-val {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--dg-blue, #1a56f0) !important;
}

/* ---- CTA button: brand blue, pill style ---- */
.rc-cta-btn {
  background: var(--dg-blue, #1a56f0) !important;
  box-shadow: 0 4px 20px rgba(26,86,240,0.30) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  border-radius: 100px !important;
  transition: opacity 0.2s !important;
}

.rc-cta-btn:hover {
  opacity: 0.88 !important;
}

/* ---- Assumption note: more readable ---- */
.rc-assumption {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #aab !important;
  line-height: 1.55 !important;
  font-style: italic !important;
}

/* ---- Slider controls: Inter, tighter ---- */
.rc-label-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a2e !important;
  letter-spacing: -0.01em !important;
}

.rc-label-value {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--dg-blue, #1a56f0) !important;
}

.rc-range-bounds {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: #aab !important;
  letter-spacing: 0.02em !important;
}

/* ---- Range slider: brand blue track ---- */
.rc-range {
  background: linear-gradient(to right, var(--dg-blue, #1a56f0) 24%, #e0e8f4 24%) !important;
}

.rc-range::-webkit-slider-thumb {
  border-color: var(--dg-blue, #1a56f0) !important;
  box-shadow: 0 2px 8px rgba(26,86,240,0.30) !important;
}

/* ---- Assumption cards: Inter body ---- */
.rc-acard strong {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--dg-blue, #1a56f0) !important;
  text-transform: uppercase !important;
}

.rc-acard span {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #556 !important;
}

/* ---- Lead heading below hero ---- */
#calc .lead-h2 {
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  color: #111 !important;
  max-width: 560px;
}

/* ---- Assumptions section heading ---- */
.sec.soft .sec-title {
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
  font-size: clamp(24px, 2.8vw, 34px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  color: #111 !important;
}

.sec.soft .prose {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #444 !important;
}

/* ---- Responsive adjustments ---- */
@media (max-width: 768px) {
  .rc-results-total {
    font-size: 44px !important;
  }
  .rc-panel-wrap {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================
   TOOLS & RESOURCES PAGE, READABILITY FIXES
   Page ID: 14494, dark-themed toolkit index
   Issues: low-contrast text, Basis-regular font (not brand),
   tiny tags, dim icons, opacity-washed body copy
   ================================================ */

/* ---- Base font replacement: Basis-regular → Inter/Quicksand ---- */
.page-id-14494 .lead-h2 {
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* ---- Prose (intro paragraph), boost from 55% to 85% opacity ---- */
.page-id-14494 .prose,
.page-id-14494 #tools .prose {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}

/* ---- Group header eyebrow, boost from 45% to 65% opacity ---- */
.page-id-14494 .tr-group-h .l .eyebrow,
.page-id-14494 .tr-group-h .eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  letter-spacing: 0.14em !important;
}

/* ---- Group header h3, Inter/Quicksand, full white ---- */
.page-id-14494 .tr-group-h .l h3,
.page-id-14494 .tr-group-h h3 {
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
  color: #ffffff !important;
  font-size: clamp(1.3rem, 2vw, 1.65rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* ---- Group header right-side description, boost from 55% to 80% ---- */
.page-id-14494 .tr-group-h .r {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* ---- Card titles, Inter/Quicksand instead of Basis ---- */
.page-id-14494 .tr-card h4 {
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
}

/* ---- Card body text, boost from 55% to 78% opacity ---- */
.page-id-14494 .tr-card p,
.page-id-14494 .tr-card > p {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

/* ---- Card tag, bigger font, better contrast ---- */
.page-id-14494 .tr-card .tr-card-tag,
.page-id-14494 .tr-card-tag {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: rgba(255, 255, 255, 0.90) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* ---- Free tag: green tint ---- */
.page-id-14494 .tr-card .tr-card-tag.free {
  color: #6ee7b7 !important;
  border-color: rgba(110, 231, 183, 0.35) !important;
}

/* ---- Sales tag: blue tint ---- */
.page-id-14494 .tr-card .tr-card-tag.sales {
  color: rgba(147, 197, 253, 1) !important;
  border-color: rgba(147, 197, 253, 0.35) !important;
}

/* ---- Admin tag: amber tint ---- */
.page-id-14494 .tr-card .tr-card-tag.admin {
  color: rgba(253, 224, 71, 0.90) !important;
  border-color: rgba(253, 224, 71, 0.30) !important;
}

/* ---- Card icon box, more visible border ---- */
.page-id-14494 .tr-card-ic {
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ---- Card CTA link "Read the manifesto →" etc, full white ---- */
.page-id-14494 .tr-card .rd {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ---- Card hover: slightly lighter BG ---- */
.page-id-14494 .tr-card:hover {
  background: rgb(18, 18, 22) !important;
}

/* ---- Card hover: icon box brighter ---- */
.page-id-14494 .tr-card:hover .tr-card-ic {
  border-color: rgba(255, 255, 255, 0.70) !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

/* ---- Grid divider lines, slightly brighter ---- */
.page-id-14494 .tr-grid {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* ---- Group header separator ---- */
.page-id-14494 .tr-group-h {
  border-bottom-color: rgba(255, 255, 255, 0.28) !important;
}

/* ---- Dark cards (admin): same text improvements ---- */
.page-id-14494 .tr-card.dark h4 {
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

.page-id-14494 .tr-card.dark p {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

.page-id-14494 .tr-card.dark .tr-card-tag {
  color: rgba(253, 224, 71, 0.90) !important;
  border-color: rgba(253, 224, 71, 0.30) !important;
}

.page-id-14494 .tr-card.dark .rd {
  color: rgba(255, 255, 255, 0.90) !important;
}

/* ---- Endcta section on this page ---- */
.page-id-14494 .endcta p,
.page-id-14494 section.endcta p {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ============================================================
   CRUMB / PAGE LABEL PILL, All Cinematic Pages
   Fix: Make "Aerosoft Cayman" visible in the white pill badge
   
   Root causes by page type:
   - Diagnostic (#dx-hero): #dx-hero .hero-in > *:first-child { color: var(--dg-gold) }
     Specificity (1,1,0), gold text, fix: (1,2,0) color:#0d1117
   - Other hero pages: body .hero .crumb { color: rgba(255,255,255,0.9) }
     Specificity (0,3,0), white text, fix: (0,4,0) color:#0d1117
   - Quote page (.qt-frame): .crumb { color: #888 } BUT some rule adds white
     Fix: explicit color override
   ============================================================ */

/* 1. Remove the gold bar ::before decoration on diagnostic page */
#dx-hero .hero-in > *:first-child::before,
#dx-hero .hero-in .crumb::before {
  display: none !important;
  content: none !important;
}

/* 2. Diagnostic page: override gold color (1,2,0 beats 1,1,0) */
#dx-hero .hero-in .crumb,
#dx-hero .hero-in > .crumb {
  color: #0d1117 !important;
}

/* 3. Other hero pages (ROI, Tools, Insights): override white color
   Use (0,4,0) to beat the existing (0,3,0) rule */
body .hero .hero-in .crumb,
body .hero-in .crumb {
  color: #0d1117 !important;
}

/* 4. Quote page: crumb in .qt-frame (not in .hero), fix white color */
.qt-frame .crumb,
.page-id-14412 .crumb {
  color: #444 !important;
}


/* ---- CINEMATIC HERO CRUMB: dark pill override ---- */
.aerosoft-css-cinematic header.hero .crumb,
.aerosoft-css-cinematic .hero .crumb,
.aerosoft-css-cinematic .hero-in .crumb {
  background: rgba(13, 17, 23, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 999px !important;
  padding: 7px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Fix: Arrow SVG size inside .ncard .rd circle button (news/insights cards) */
.ncard .rd svg {
  width: 14px !important;
  height: 14px !important;
}

/* Prevent .ncard .rd circle from shrinking */
.ncard .rd {
  flex-shrink: 0 !important;
  min-width: 30px !important;
  min-height: 30px !important;
}

/* Fix: Recognition/Award badge images - constrain size so title & description are visible */
.recog-card .bdg {
  display: block !important;
  width: 100% !important;
  height: 120px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}

.recog-card .bdg img {
  width: auto !important;
  height: 100% !important;
  max-height: 120px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* Prevent cards from stretching to equal height - let them be natural height */
.recog-grid {
  align-items: start !important;
}

/* Fix: Remove aspect-ratio that was forcing .recog-card to be tall */
a.recog-card.rv.in {
  aspect-ratio: auto !important;
}

/* ---- 1. FONT (clean, premium) ---- */
/* google fonts @import removed: self-hosted in fonts.css */
h1,h2,h3,h4,h5,h6,.elementor-heading-title,.page-hero h1,.page-hero h2,.page-hero h3,.hero h1,.hero h2,.cin-hero h1,.hero-section h1,.section h2,.section h3,.sec-head h2,.cta h2,.cta h3{font-family:"Albert Sans",sans-serif!important;font-weight:400!important;letter-spacing:-0.01em!important;line-height:1.06!important;}

h1,.hero h1,section:first-of-type h1,#home h1,header.hero h1,body .hero h1,body header.hero h1{font-family:"Albert Sans",sans-serif!important;font-weight:400!important;letter-spacing:-0.01em!important;line-height:1.06!important;}

body,p,li,.elementor-widget-text-editor,a,button{font-family:"Inter",sans-serif!important;line-height:1.75!important;}

/* ---- 2. BRIGHTEN the hero video + lighten the dark overlay ---- */

.hero video,.hero iframe,.elementor-background-video-container video,

section:first-of-type video,section:first-of-type iframe{

  filter:brightness(1.28) contrast(1.04) saturate(1.06)!important;

}

/* soften the dark overlay so the hero reads brighter (lower opacity = brighter) */

.hero .overlay,.elementor-background-overlay{ opacity:.45!important; background:rgba(10,12,20,.45)!important; }

/* ---- 3. 3D HOVER MOTION on images/cards ---- */

img,.elementor-image img,.service-card,.card,.elementor-widget-image{

  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease!important;

  transform-style:preserve-3d; will-change:transform;

}

.elementor-image:hover img,.service-card:hover,.card:hover,.elementor-widget-image:hover img{

  transform:perspective(1000px) rotateX(3deg) rotateY(-4deg) translateY(-6px) scale(1.02)!important;

  box-shadow:0 30px 60px -28px rgba(0,0,0,.45)!important;

}

@media (prefers-reduced-motion: reduce){ *{transition:none!important;} .elementor-image:hover img{transform:none!important;} }

/* CTA pills declared color:#fff inline were overridden by the global a{color:red}; restore white */
a[style*="color:#fff" i],a[style*="color: #fff" i],a[style*="color:#ffffff" i],a[style*="color: #ffffff" i],a[style*="color:white" i]{color:#fff !important;-webkit-text-fill-color:#fff !important;}


/* FIX-2026-08-16 hero-bright + hp-ind-header */
/* (a) Home hero: lighter scrim + brighter image (was flat rgba(0,0,0,.62)) */
html body #home.hero::after{
  background: linear-gradient(180deg,
    rgba(0,0,0,.44) 0%, rgba(0,0,0,.26) 30%,
    rgba(0,0,0,.30) 58%, rgba(0,0,0,.62) 100%) !important;
  background-image: linear-gradient(180deg,
    rgba(0,0,0,.44) 0%, rgba(0,0,0,.26) 30%,
    rgba(0,0,0,.30) 58%, rgba(0,0,0,.62) 100%) !important;
  z-index: 1 !important;
}
html body #home.hero img{
  filter: saturate(1.16) brightness(1.20) contrast(1.00) !important;
}
/* (b) Industries-preview section HEADER sits on white bg: force dark text
   (broad "#industries-preview h2/p { color:#fff }" rules whitened it invisible).
   .ind-card text stays white on the dark image cards. */
#industries-preview .hp-prev-head h2{ color:#0f0f14 !important; }
#industries-preview .hp-prev-head .hp-side p,
#industries-preview .hp-side p{ color:#5a5a5a !important; }

/* ═══════════ cinematic.css ═══════════ */
/* ===== AeroSoft Cayman — cinematic shared stylesheet ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--black:#0a0a0a;--ink:#101010;--body:#111111;--muted:#1c1c1c;--line:#e4e4e4;--soft:#f4f3f9;
  --accent:#FF0000;--accent-d:#D10000;--maxw:1340px;--ease:cubic-bezier(.22,.61,.36,1)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#fff;color:var(--body);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{font-family:'Quicksand','Inter',sans-serif;color:var(--ink);font-weight:600;line-height:1.12;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%;border:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 44px}
.btn{display:inline-flex;align-items:center;gap:11px;font-family:'Quicksand';font-weight:600;font-size:.95rem;
  padding:15px 30px;border-radius:100px;cursor:pointer;border:1.5px solid transparent;transition:.26s var(--ease);white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-w{background:#fff;color:var(--ink)}.btn-w:hover{transform:translateY(-2px);background:#efefef}
.btn-out-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-out-w:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}
.eyebrow{font-family:'Quicksand';font-weight:700;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lets-talk{display:inline-flex;align-items:center;gap:16px;color:#fff;font-family:'Quicksand';font-weight:600;font-size:1.06rem}
.lets-talk .circ{width:54px;height:54px;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;
  justify-content:center;transition:.26s var(--ease)}
.lets-talk:hover .circ{background:#fff;color:var(--ink)}
.lets-talk .circ svg{width:20px;height:20px}

/* util + nav */
.util{background:#000;color:#9a9a9a;font-size:.78rem}
.util-in{max-width:var(--maxw);margin:0 auto;padding:9px 44px;display:flex;justify-content:space-between}
.util-in .r{display:flex;gap:24px}.util-in a:hover{color:#fff}
.nav{background:#000;position:sticky;top:0;z-index:100;transition:box-shadow .3s var(--ease)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:18px 44px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;font-family:'Quicksand';font-weight:800;font-size:1.16rem;color:#fff}
.brand .s{font-weight:500;opacity:.6}
.lm{width:34px;height:34px;border-radius:6px;background:linear-gradient(135deg,#444,#0a0a0a);position:relative;flex:none}
.lm::before{content:"";position:absolute;inset:6px;border-radius:3px;background:#000}
.lm::after{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:2px;background:#fff}
.nlinks{display:flex;gap:2px;flex-wrap:nowrap;align-items:center}
.nlinks a{white-space:nowrap;font-family:'Quicksand';font-weight:600;font-size:.92rem;color:#cfcfcf;padding:9px 15px}
.nlinks a:hover{color:#fff}
.nright{display:flex;align-items:center;gap:14px}
.burger{display:none;width:44px;height:44px;border:none;background:rgba(255,255,255,.13);border-radius:5px;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:18px;height:2px;background:#fff;border-radius:2px}
.mnav{position:fixed;inset:0;z-index:99;background:#000;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;opacity:0;pointer-events:none;transition:.32s var(--ease)}
.mnav.open{opacity:1;pointer-events:auto}
.mnav a{font-family:'Quicksand';font-weight:700;font-size:1.4rem;color:#d2d2d2;padding:11px}

/* ===== TCS-style top bar ===== */
.brand-logo{display:flex;align-items:center;gap:10px}
.brand-mark{width:32px;height:32px;flex:none}
.brand-mark path,.brand-mark circle{fill:#FF0000}
.brand-wm{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;font-size:1.4rem;
  color:#fff;letter-spacing:-.02em;line-height:1}
.nav-search{width:38px;height:38px;border:none;background:transparent;color:#cfcfcf;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:7px;transition:.2s cubic-bezier(.22,.61,.36,1)}
.nav-search:hover{color:#fff;background:rgba(255,255,255,.1)}
.nav-search svg{width:18px;height:18px}
.nav-div{width:1px;height:22px;background:rgba(255,255,255,.2);flex:none}
.nav-locale{display:flex;align-items:center;gap:7px;color:#cfcfcf;font-family:'Quicksand';
  font-weight:600;font-size:.86rem;cursor:default;white-space:nowrap}
.nav-locale svg{width:15px;height:15px;opacity:.85}
.nav-contact{font-family:'Quicksand';font-weight:600;font-size:.9rem;color:#cfcfcf;
  transition:color .2s;white-space:nowrap}
.nav-contact:hover{color:#fff}
@media(max-width:1000px){.nav-div,.nav-locale,.nav-contact{display:none}}
.search-ov{position:fixed;inset:0;z-index:200;background:rgba(8,8,10,.86);
  display:flex;align-items:flex-start;justify-content:center;padding:13vh 22px 0;
  opacity:0;visibility:hidden;transition:opacity .26s,visibility .26s}
.search-ov.open{opacity:1;visibility:visible}
.search-box{width:100%;max-width:640px;transform:translateY(-16px);
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.search-ov.open .search-box{transform:translateY(0)}
.search-in{width:100%;background:#fff;border:none;border-radius:12px;padding:21px 24px;
  font-family:'Quicksand';font-weight:500;font-size:1.08rem;color:#101010;outline:none;
  box-shadow:0 30px 70px rgba(0,0,0,.5)}
.search-res{margin-top:12px;background:#fff;border-radius:12px;overflow:hidden;max-height:50vh;
  overflow-y:auto;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.search-res a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 22px;
  font-family:'Quicksand';font-weight:600;font-size:.98rem;color:#101010;border-bottom:1px solid #ededed}
.search-res a:last-child{border-bottom:none}
.search-res a:hover{background:#f3f5f8}
.search-res a span{color:#9a9a9a;font-size:.78rem;font-weight:700;flex:none}
.search-res .none{padding:18px 22px;color:#9a9a9a;font-family:'Quicksand';font-size:.92rem}

/* sub-nav */
.subnav{display:none}
.subnav-in{max-width:var(--maxw);margin:0 auto;padding:0 44px;display:flex;align-items:center;gap:6px;overflow-x:auto;
  scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav-in .lbl{font-family:'Quicksand';font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#6f6f6f;padding-right:6px;white-space:nowrap;flex:none}
.subnav-in a{font-family:'Quicksand';font-weight:600;font-size:.84rem;color:#9a9a9a;padding:15px 14px;white-space:nowrap;
  border-bottom:3px solid transparent;transition:.2s}
.subnav-in a:hover{color:#fff}
.subnav-in a.on{color:#fff;border-bottom-color:#fff}

/* hero */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:center;
  background:transparent}
.hero img,.hero video{position:fixed;top:0;left:0;width:100%;height:100vh;object-fit:cover;z-index:1;
  filter:saturate(1.14) brightness(1.05) contrast(1.02);transform-origin:50% 50%;transform:scale(1.16);will-change:transform}
.hero video.hero-vid{filter:saturate(1.08) brightness(1.06) contrast(1.04);transform:scale(1.04)}
.hero:has(video.hero-vid)::after{background:
  linear-gradient(92deg,rgba(0,0,0,.88),rgba(0,0,0,.55) 56%,rgba(0,0,0,.25)),
  linear-gradient(0deg,rgba(0,0,0,.82),transparent 62%),
  radial-gradient(135% 96% at 52% 36%,transparent 50%,rgba(0,0,0,.60))}
/* pinned-hero scroll reveal — content stack slides up over the fixed hero */
.reveal-stack{position:relative;z-index:10;background:#fff;
  box-shadow:0 -46px 90px rgba(0,0,0,.55);will-change:transform}
.reveal-stack>.sec:first-child,.reveal-stack>section:first-child{border-top-left-radius:26px;border-top-right-radius:26px}
.hero-in{transition:opacity .5s var(--ease),transform .5s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .hero{position:relative;height:auto;min-height:100vh}
  .reveal-stack{box-shadow:none}
  .hero-in{transition:none}
}
@keyframes kenburns{from{transform:scale(1.001)}to{transform:scale(1.15)}}
.hero::after{content:"";position:fixed;top:0;left:0;width:100%;height:100vh;z-index:2;background:
  linear-gradient(92deg,rgba(0,0,0,.96),rgba(0,0,0,.80) 56%,rgba(0,0,0,.60)),
  linear-gradient(0deg,rgba(0,0,0,.90),transparent 65%),
  radial-gradient(135% 96% at 52% 36%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.78))}
.hero-in{position:relative;z-index:3;width:100%;padding-top:150px;padding-bottom:132px}
.scrollcue{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);z-index:3;display:flex;
  flex-direction:column;align-items:center;gap:12px;color:rgba(255,255,255,.62);font-family:'Quicksand';
  font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.scrollcue .ln{width:1.5px;height:48px;background:rgba(255,255,255,.22);position:relative;overflow:hidden}
.scrollcue .ln::after{content:"";position:absolute;top:0;left:0;width:100%;height:16px;background:#fff;
  animation:scd 2.1s var(--ease) infinite}
@keyframes scd{0%{transform:translateY(-16px)}100%{transform:translateY(48px)}}
.hero .crumb{font-family:'Quicksand';font-weight:700;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-bottom:26px;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:22px;max-width:780px}
.hero h1{color:#fff;font-size:clamp(2.4rem,4.6vw,4.2rem);font-weight:500;letter-spacing:-.022em;max-width:15ch;margin-bottom:38px}

/* sections */
.sec{padding:clamp(3.6rem,6vw,6rem) 0}
.sec.black{background:#0a0a0a}
.sec.soft{background:var(--soft)}
.lead-h2{font-size:clamp(1.9rem,3.4vw,2.95rem);font-weight:500;letter-spacing:-.018em;max-width:18ch;margin-bottom:26px}
.prose{max-width:760px}
.prose p{font-size:1.12rem;margin-bottom:18px;color:var(--body)}
/* full-width two-column intro */
.sec:has(> .wrap > .prose) > .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:26px 64px;align-items:start}
.sec:has(> .wrap > .prose) .lead-h2{max-width:13ch;margin-bottom:0}
.sec:has(> .wrap > .prose) .prose{max-width:none}
@media(max-width:1000px){
  .sec:has(> .wrap > .prose) > .wrap{display:block}
  .sec:has(> .wrap > .prose) .lead-h2{max-width:18ch;margin-bottom:22px}
}

/* feature split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split-img{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:linear-gradient(150deg,#3a3a3a,#0a0a0a)}
.split-img img{width:100%;height:100%;object-fit:cover;filter:saturate(1.14) brightness(1.05) contrast(1.02)}
.split h3{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:600;margin-bottom:16px}
.split .fl{list-style:none;margin-top:22px}
.split .fl li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:1rem;color:var(--body)}
.split .fl li:last-child{border-bottom:1px solid var(--line)}
.split .fl b{font-family:'Quicksand';color:var(--ink);font-weight:700}
.split .fl .n{font-family:'Quicksand';font-weight:600;color:#bdbdbd;flex:none}

/* two big cards — TCS photo + dark panel */
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.bigc{border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:#1b1b1b}
.bigc img{position:relative;width:100%;aspect-ratio:16/10;object-fit:cover;
  filter:saturate(1.14) brightness(1.05) contrast(1.02);transition:.65s var(--ease)}
.bigc:hover img{transform:scale(1.05)}
.bigc-body{padding:30px 32px 32px;display:flex;flex-direction:column;flex:1}
.bigc-body h3{color:#fff;font-size:1.62rem;font-weight:600;margin-bottom:10px}
.bigc-body p{color:#a8a8a8;font-size:1rem;margin-bottom:26px;flex:1}
.bigc-body .rd{display:inline-flex;align-items:center;gap:14px;font-family:'Quicksand';
  font-weight:700;font-size:.9rem;color:#fff;align-self:flex-start}
.bigc-body .rd svg{width:44px;height:44px;padding:13px;border-radius:50%;flex:none;
  background:var(--accent);color:#fff;transition:transform .25s var(--ease)}
.bigc:hover .rd svg{transform:translateX(4px)}

/* accordion */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{display:flex;align-items:center;gap:26px;padding:28px 4px;cursor:pointer}
.acc-head .num{font-family:'Quicksand';font-weight:600;font-size:1.05rem;color:#bdbdbd;flex:none}
.acc-head h3{font-size:clamp(1.2rem,2vw,1.7rem);font-weight:600;flex:1}
.acc-head .pm{width:38px;height:38px;border-radius:50%;border:1.5px solid #cfcfcf;flex:none;position:relative;transition:.25s}
.acc-head .pm::before,.acc-head .pm::after{content:"";position:absolute;background:var(--ink);transition:.25s}
.acc-head .pm::before{width:14px;height:2px;top:50%;left:50%;transform:translate(-50%,-50%)}
.acc-head .pm::after{width:2px;height:14px;top:50%;left:50%;transform:translate(-50%,-50%)}
.acc-item.open .acc-head .pm{background:var(--ink);border-color:var(--ink)}
.acc-item.open .acc-head .pm::before,.acc-item.open .acc-head .pm::after{background:#fff}
.acc-item.open .acc-head .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.acc-body p{padding:0 4px 30px 70px;font-size:1.04rem;color:var(--body);max-width:820px}

/* numbered carousel */
.car-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.car-head .eyebrow{display:block;margin-bottom:14px}
.car-nav{display:flex;gap:14px;flex:none;align-items:center}
.car-count{font-family:'Quicksand';font-weight:800;font-size:.95rem;letter-spacing:.06em;color:var(--muted)}
.car-count b{color:var(--ink)}
.car-nav button{width:52px;height:52px;border-radius:50%;border:1.5px solid #cfcfcf;background:#fff;color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.24s var(--ease)}
.car-nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.car-nav button svg{width:20px;height:20px}
.car-track{display:flex;gap:24px;overflow-x:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:6px;-ms-overflow-style:none;scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
.car-track>*{scroll-snap-align:start;flex:0 0 auto}
.scard{width:372px;max-width:82vw;min-height:520px;position:relative;border-radius:10px;overflow:hidden;
  display:flex;align-items:flex-end;background:linear-gradient(150deg,#363636,#080808)}
.scard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:saturate(1.38) brightness(1.14) contrast(1.07);transition:.6s var(--ease)}
.scard:hover img{transform:scale(1.05)}
.scard::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 0%,transparent 40%,rgba(0,0,0,.46) 58%,rgba(0,0,0,.92) 100%)}
.scard-body{position:relative;z-index:2;padding:34px}
.scard-num{font-family:'Quicksand';font-weight:600;font-size:4rem;line-height:.82;color:#fff;
  letter-spacing:-.04em;margin-bottom:22px}
.scard-cat{font-family:'Quicksand';font-weight:800;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;margin-bottom:11px}
.scard-body p{color:#c2c2c2;font-size:.95rem}

/* service grid (hub pages) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.svc-card{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:.3s var(--ease)}
.svc-card:hover{box-shadow:0 26px 56px rgba(0,0,0,.17)}
.svc-card .pic{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(150deg,#363636,#0a0a0a)}
.svc-card .pic img{width:100%;height:100%;object-fit:cover;filter:saturate(1.14) brightness(1.05) contrast(1.02);transition:.6s var(--ease)}
.svc-card:hover .pic img{transform:scale(1.06)}
.svc-card .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.78))}
.svc-card .pic .nm{position:absolute;left:20px;bottom:14px;z-index:2;font-family:'Quicksand';font-weight:600;
  font-size:2.2rem;line-height:1;color:#fff;letter-spacing:-.04em}
.svc-card .bd{padding:26px 24px 26px;display:flex;flex-direction:column;flex:1}
.svc-card h3{font-size:1.3rem;font-weight:600;margin-bottom:10px}
.svc-card p{font-size:.95rem;color:var(--body);margin-bottom:20px;flex:1}
.svc-card .rd{display:inline-flex;align-items:center;gap:10px;font-family:'Quicksand';font-weight:700;font-size:.83rem;color:var(--ink)}
.svc-card .rd .ic{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease)}
.svc-card:hover .rd .ic{transform:translateX(3px)}
.svc-card .rd .ic svg{width:13px;height:13px;margin-left:1px}

/* technologies — grouped stack */
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tech-card{border:1px solid var(--line);border-radius:13px;padding:34px 30px 30px;background:#fff;
  display:flex;flex-direction:column;transition:transform .34s var(--ease),box-shadow .34s var(--ease)}
.tech-card:hover{transform:translateY(-7px);box-shadow:0 26px 56px rgba(0,0,0,.14)}
.tech-card .tnum{font-family:'Quicksand';font-weight:600;font-size:.95rem;color:#bdbdbd;margin-bottom:13px}
.tech-card h3{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;margin-bottom:9px;color:var(--ink)}
.tech-card>p{font-size:.97rem;line-height:1.6;color:var(--body);margin-bottom:22px;flex:1}
.tech-tags{display:flex;flex-wrap:wrap;gap:9px}
.tech-tags span,.tech-tags a{font-family:'Quicksand';font-weight:600;font-size:.82rem;padding:8px 14px;border-radius:100px;
  background:#f2f4f7;color:var(--ink);border:1px solid #e6e9ee;transition:.2s var(--ease)}
.tech-tags a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
@media(max-width:980px){.tech-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.tech-grid{grid-template-columns:1fr}}

/* closing CTA */
.endcta{background:#181818;text-align:center;padding:clamp(4.4rem,7vw,7rem) 0}
.endcta h2{color:#fff;font-size:clamp(2.3rem,5vw,4rem);font-weight:500;letter-spacing:-.02em;margin-bottom:18px}
.endcta p{color:#bdbdbd;font-size:1.12rem;max-width:520px;margin:0 auto 32px}

/* footer */
.foot{background:#000;color:#8f8f8f;padding:66px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.9fr 1fr 1fr 1.2fr;gap:44px;margin-bottom:46px}
.foot .brand{margin-bottom:16px}
.foot-brand p{font-size:.92rem;max-width:290px;margin-bottom:18px}
.fcol h5{font-family:'Quicksand';color:#fff;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px}
.fcol a{display:block;font-size:.92rem;margin-bottom:10px;color:#8f8f8f}.fcol a:hover{color:#fff}
.fcol p{font-size:.92rem;margin-bottom:10px}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;font-size:.84rem;color:#6b6b6b;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

.rv{opacity:0;transform:translateY(28px);transition:.8s var(--ease)}
.rv.in{opacity:1;transform:translateY(0)}

@media(max-width:1000px){
  .wrap,.util-in,.nav-in,.subnav-in{padding-left:22px;padding-right:22px}
  .nlinks,.util-in .r{display:none}.burger{display:flex}
  .split,.two,.work2{grid-template-columns:1fr;gap:32px}
  .split-img{order:-1}
  .svc-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .acc-body p{padding-left:4px}
}
@media(max-width:680px){.svc-grid{grid-template-columns:1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}.fbot{flex-direction:column}
  .car-head{flex-direction:column;align-items:flex-start;gap:18px}}
/* ===== cinematic FX layer ===== */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:300;
  background:linear-gradient(90deg,var(--accent),#ff6a4d);box-shadow:0 0 14px rgba(237,28,36,.55)}
.nav.scrolled{box-shadow:0 10px 34px rgba(0,0,0,.5)}
.nav.scrolled .nav-in{padding-top:12px;padding-bottom:12px}
.nav-item{position:relative;display:inline-flex;align-items:center}
.nav-cv{width:12px;height:12px;margin-left:5px;transition:transform .22s var(--ease)}
.nav-item:hover .nav-cv{transform:rotate(180deg)}
.nav-mega{position:absolute;top:100%;left:0;width:100vw;background:#1d1d1f;
  padding:44px max(44px,calc((100vw - 1340px)/2 + 44px));
  display:grid;grid-template-columns:296px 1fr;column-gap:52px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
  box-shadow:0 44px 80px rgba(0,0,0,.6);z-index:130}
.nav-mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:28px}
.nav-item:hover .nav-mega{opacity:1;visibility:visible;transform:translateY(0)}
.nm-feat{border-right:1px solid rgba(255,255,255,.12);padding-right:44px;
  display:flex;flex-direction:column}
.nm-title{font-family:'Quicksand';font-weight:800;font-size:1.55rem;color:#fff;
  letter-spacing:-.02em;margin-bottom:13px}
.nm-desc{font-size:.94rem;line-height:1.62;color:#9a9a9d;margin:0 0 26px}
.nm-cta{margin-top:auto;display:inline-flex;align-items:center;gap:13px;
  font-family:'Quicksand';font-weight:700;font-size:.9rem;color:#fff}
.nm-cta svg{width:34px;height:34px;padding:9px;border-radius:50%;flex:none;
  background:var(--accent);color:#fff;transition:transform .22s var(--ease)}
.nm-cta:hover svg{transform:translateX(3px)}
.nm-links{column-count:3;column-gap:24px;align-self:start}
.nm-links a{display:block;padding:11px 14px;font-family:'Quicksand';font-weight:600;
  font-size:.95rem;color:#cdcdce;border-radius:8px;break-inside:avoid;
  transition:background .16s var(--ease),color .16s var(--ease),padding .16s var(--ease)}
.nm-links a:hover{background:rgba(255,255,255,.07);color:#fff;padding-left:20px}
@media(max-width:900px){
  .nav-mega{grid-template-columns:1fr;padding:26px 24px}
  .nm-feat{border-right:none;border-bottom:1px solid rgba(255,255,255,.12);
    padding-right:0;padding-bottom:22px;margin-bottom:8px}
  .nm-links{column-count:2}
}
.hero h1 .hl-w{display:inline-block;overflow:hidden;vertical-align:top;margin-right:.26em;
  padding-bottom:.12em;margin-bottom:-.12em}
.hero h1 .hl-w i{display:inline-block;font-style:normal;transform:translateY(115%);
  transition:transform .9s cubic-bezier(.16,.84,.3,1)}
.hero h1.in .hl-w i{transform:translateY(0)}
@keyframes heroRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes cueIn{from{opacity:0}to{opacity:1}}
.hero .crumb,.hero .eyebrow{animation:heroRise .9s .12s both cubic-bezier(.16,.84,.3,1)}
.hero p{animation:heroRise .95s .85s both cubic-bezier(.16,.84,.3,1)}
.hero .lets-talk,.hero .hero-btns{animation:heroRise .95s 1.05s both cubic-bezier(.16,.84,.3,1)}
.scrollcue{animation:cueIn 1.1s 1.4s both}
.car-track{cursor:default}
.rv{opacity:0;transform:translateY(40px);
  transition:opacity 1.05s cubic-bezier(.16,.84,.3,1),transform 1.05s cubic-bezier(.16,.84,.3,1)}
.rv.in{opacity:1;transform:none}
.bigc,.svc-card{transition:transform .34s cubic-bezier(.16,.84,.3,1),box-shadow .34s var(--ease);
  will-change:transform}
/* article pages */
.hero.art{min-height:64vh}
.hero.art .hero-in{padding-top:140px;padding-bottom:88px}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 20px;font-family:'Quicksand';font-weight:700;
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:24px}
.article{max-width:860px;margin:0 auto}
.sec:has(.article){padding-top:clamp(3rem,5vw,5.5rem)}
.article .lead{font-size:1.44rem;line-height:1.52;color:var(--ink);font-weight:500;margin-bottom:34px;letter-spacing:-.01em}
.article h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:500;letter-spacing:-.03em;line-height:1.17;margin:56px 0 16px;color:var(--ink)}
.article h3{font-size:1.36rem;font-weight:600;letter-spacing:-.015em;margin:34px 0 10px;color:var(--ink)}
.article p{font-size:1.15rem;line-height:1.8;color:var(--body);margin-bottom:21px}
.article ul{margin:4px 0 24px 0;list-style:none}
.article ul li{position:relative;padding-left:28px;font-size:1.12rem;line-height:1.7;color:var(--body);margin-bottom:12px}
.article ul li::before{content:"";position:absolute;left:2px;top:12px;width:9px;height:9px;border-radius:2px;background:var(--accent)}
.article blockquote{margin:34px 0;padding:10px 0 10px 30px;border-left:3px solid var(--accent);font-size:1.34rem;line-height:1.5;font-weight:500;color:var(--ink)}
@media(prefers-reduced-motion:reduce){
  .hero h1 .hl-w i{transform:none}
  .hero .crumb,.hero .eyebrow,.hero p,.hero .lets-talk,.hero .hero-btns,.scrollcue{animation:none;opacity:1}
  .scroll-prog{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}.rv{opacity:1;transform:none}}
/* keep dark-section text legible after the global text-darkening */
.hero p{color:rgba(255,255,255,.84)}
.hero .eyebrow,.endcta .eyebrow,.bigc .eyebrow{color:rgba(255,255,255,.62)}

/* ===== mobile layout corrections ===== */
html{overflow-x:clip}
@media(max-width:760px){
  .hero{height:auto;min-height:100svh}
  .hero-in{padding-top:116px;padding-bottom:88px}
  .hero .crumb{margin-bottom:18px;padding-bottom:16px}
  .hero h1{font-size:clamp(2rem,7.2vw,2.7rem);margin-bottom:22px}
  .hero.art{min-height:auto}
  .hero.art .hero-in{padding-top:108px;padding-bottom:58px}
  .lets-talk{font-size:.98rem}
  .mnav{justify-content:flex-start;padding:86px 22px 48px;overflow-y:auto;gap:2px}
  .sec{padding:clamp(2.9rem,8vw,4rem) 0}
  .acc-head{gap:14px;padding:22px 2px}
  .acc-body p{padding:0 2px 24px 2px}
  .scard{min-height:432px}
  .endcta{padding:clamp(3.4rem,10vw,4.6rem) 0}
}
@media(max-width:430px){
  .wrap,.util-in,.nav-in,.subnav-in{padding-left:16px;padding-right:16px}
  .hero h1{font-size:clamp(1.78rem,8.2vw,2.3rem)}
  .hero-in{padding-top:104px;padding-bottom:74px}
  .endcta h2{font-size:clamp(1.85rem,8.5vw,2.4rem)}
  .lead-h2{font-size:clamp(1.65rem,7vw,2.1rem)}
}

/* ===== Solutions page cards ===== */
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:980px){.sol-grid{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:680px){.sol-grid{grid-template-columns:1fr}}
.sol-card{position:relative;border:1px solid var(--line);border-radius:14px;padding:34px 28px 30px;background:#fff;display:flex;flex-direction:column;transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease);text-decoration:none;color:inherit;will-change:transform}
.sol-card:hover{transform:translateY(-6px);box-shadow:0 28px 56px rgba(0,0,0,.12);border-color:#d8d8de}
.sol-num{font-family:'Quicksand';font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;display:flex;align-items:center;gap:14px}
.sol-num::after{content:"";flex:1;height:1px;background:var(--line)}
.sol-card h3{font-family:'Quicksand';font-weight:600;font-size:1.24rem;line-height:1.3;letter-spacing:-.018em;color:var(--ink);margin-bottom:14px}
.sol-card .prob{font-size:.99rem;line-height:1.66;color:#3a3a3a;margin-bottom:20px;flex:1}
.sol-cost{font-size:.93rem;line-height:1.55;color:#5d5d63;background:#f7f6fb;border-left:3px solid var(--accent);padding:14px 16px;border-radius:0 8px 8px 0;margin-bottom:24px}
.sol-cost b{color:var(--ink);font-family:'Quicksand';font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:5px}
.sol-cta{margin-top:auto;display:flex;align-items:center;gap:12px;font-family:'Quicksand';font-weight:600;font-size:.92rem;color:var(--ink)}
.sol-cta-line{display:flex;flex-direction:column;line-height:1.25}
.sol-cta-svc{font-weight:500;font-size:.82rem;color:#8a8a8f;margin-top:2px}
.sol-cta-ic{flex:none;margin-left:auto;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .22s var(--ease)}
.sol-card:hover .sol-cta-ic{transform:translateX(3px)}
.sol-cta-ic svg{width:14px;height:14px}

/* ===== QUOTE PAGE FIX ===== */
.qt-secure svg,.qt-trust-item svg,.qt-submit svg,.qt-contact svg,.qt-contact a svg{width:24px;height:24px;flex-shrink:0}
.qt-secure{display:flex;align-items:center;gap:8px;font-size:.88rem;color:#6a6a6a;margin-top:8px}
.qt-trust{margin-top:32px}
.qt-trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:16px}
.qt-trust-item{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;line-height:1.5}
.qt-trust-item svg{margin-top:2px;color:var(--accent)}
.qt-contact{margin-top:40px;border-top:1px solid #e5e5e5;padding-top:32px}
.qt-contact h4{font-family:'Quicksand';font-weight:700;font-size:1rem;margin-bottom:16px}
.qt-contact a{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:.95rem;margin-bottom:10px}
.qt-contact a:hover{color:var(--accent)}
.qt-submit{display:flex;align-items:center;gap:10px;margin-top:24px}
.qt-submit button{display:flex;align-items:center;gap:8px}

/* ===== HOME PAGE SECTIONS ===== */
/* Geo / Where we work */
.geo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.geo-card{border:1px solid #e5e5e5;border-radius:16px;padding:28px;background:#fff;transition:box-shadow .3s}
.geo-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.09)}
.geo-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.geo-num{font-family:'Quicksand';font-weight:700;font-size:.75rem;letter-spacing:.12em;color:var(--accent)}
.geo-bar{flex:1;height:2px;background:var(--accent);border-radius:2px}
.geo-k{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#888;margin-bottom:8px;display:block}
.geo-card h3{font-family:'Quicksand';font-weight:700;font-size:1.1rem;margin-bottom:8px}
.geo-card p{font-size:.92rem;color:#5a5a5a;line-height:1.6}
@media(max-width:860px){.geo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.geo-grid{grid-template-columns:1fr}}

/* FYF Band */
.sec.fyf-band{padding:80px 0}
.fyf-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.fyf-grid .rv{display:block;margin-bottom:14px}
.fyf-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.fyf-tag{padding:6px 14px;border:1px solid #e0e0e0;border-radius:99px;font-size:.84rem;color:#444;white-space:nowrap}
.fyf-img{border-radius:20px;overflow:hidden;aspect-ratio:4/3;width:100%}
.fyf-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.fyf-grid{grid-template-columns:1fr;gap:32px}}

/* Why Aerosoft */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}
.why-card{display:flex;gap:18px;padding:28px;border:1px solid #e5e5e5;border-radius:16px;background:#fff;transition:box-shadow .3s}
.why-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.08)}
.why-card.rv{flex-direction:row-reverse}
.why-ic{width:44px;height:44px;border-radius:12px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.why-ic svg{width:22px;height:22px}
.why-card h3{font-family:'Quicksand';font-weight:700;font-size:1rem;margin-bottom:6px}
.why-card p{font-size:.9rem;color:#5a5a5a;line-height:1.6}
@media(max-width:660px){.why-grid{grid-template-columns:1fr}}

/* Industries & Tech Preview (hp-ind, hp-tech) */
.sec.hp-ind{padding:80px 0}
.sec.hp-tech{padding:80px 0;background:#0a0a0a;color:#fff}
.ind-grid,.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.ind-card,.tech-card{border:1px solid #e5e5e5;border-radius:14px;padding:22px;text-decoration:none;color:var(--ink);transition:all .3s}
.ind-card:hover,.tech-card:hover{border-color:var(--accent);box-shadow:0 4px 20px rgba(0,0,0,.08)}
.ind-card h3,.tech-card h3{font-family:'Quicksand';font-weight:700;font-size:.95rem;margin-bottom:6px}
.ind-card p,.tech-card p{font-size:.85rem;color:#6a6a6a;line-height:1.5}
.ind-card svg,.tech-card svg{width:28px;height:28px;margin-bottom:12px;color:var(--accent)}
.ind-card .rd span svg,.tech-card .rd span svg{width:13px;height:13px;margin-bottom:0;color:#fff}
@media(max-width:980px){.ind-grid,.tech-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:660px){.ind-grid,.tech-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.ind-grid,.tech-grid{grid-template-columns:1fr}}

/* Customer Stories / tt-cards */
.tt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.tt-card{border-radius:16px;overflow:hidden;background:#0f0f0f;color:#fff;position:relative}
.tt-card .tt-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;opacity:.75;transition:opacity .3s}
.tt-card:hover .tt-img{opacity:.9}
.tt-body{padding:20px}
.tt-logo{height:28px;object-fit:contain;margin-bottom:12px;filter:brightness(0) invert(1)}
.tt-card h3{font-family:'Quicksand';font-weight:700;font-size:1rem;line-height:1.3;margin-bottom:8px}
.tt-card p{font-size:.88rem;color:rgba(255,255,255,.7);line-height:1.5}
.tt-card .tt-link{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;color:var(--accent);margin-top:12px;text-decoration:none;font-weight:600}
@media(max-width:860px){.tt-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tt-grid{grid-template-columns:1fr}}

/* Recognition */
.sec.recog{padding:100px 0;background:#0d1118;color:#fff}
.recog-top{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-bottom:56px}
.recog-top h2{font-size:clamp(2.2rem,4vw,3.8rem);color:#fff;margin:0;line-height:1.1;font-weight:700}
.recog-top h2 .ac{color:#ff3b3b}
.recog-top p{color:rgba(255,255,255,.75);font-size:1rem;line-height:1.65;margin:0}
.recog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:0}
.recog-card{border:1px solid #1e2a3a;border-radius:14px;padding:28px;text-align:center;background:#131c2b}
.recog-card img{height:110px;object-fit:contain;margin-bottom:16px}
.recog-card h3{font-family:'Quicksand';font-weight:700;font-size:.95rem;margin-bottom:6px;color:#fff}
.recog-card p{font-size:.85rem;color:rgba(255,255,255,.6)}
@media(max-width:860px){.recog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.recog-grid{grid-template-columns:1fr}}

/* HP Industries & Tech Preview - actual class names */
.hp-prev-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;gap:24px}
.hp-prev-head h2{font-family:'Quicksand';font-weight:800;font-size:2rem;flex:1}
.hp-side{max-width:340px}
.hp-side p{font-size:.95rem;color:#5a5a5a;line-height:1.6;margin-bottom:16px}
.hp-prev-cta{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none}
.hp-prev-cta .ar svg{width:16px;height:16px}
.ind-grid,.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ind-grid a,.tech-grid a{display:block;border-radius:14px;overflow:hidden;position:relative;aspect-ratio:3/4;text-decoration:none;color:#fff;background:#111}
.ind-grid a img,.tech-grid a img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s;opacity:.8}
.ind-grid a:hover img,.tech-grid a:hover img{transform:scale(1.04);opacity:.95}
.ind-ov,.tech-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 50%)}
.ind-tx,.tech-tx{position:absolute;bottom:0;left:0;right:0;padding:18px 16px}
.inum,.tnum{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.6);margin-bottom:4px}
.ind-tx h4,.tech-tx h4{font-family:'Quicksand';font-weight:700;font-size:.95rem;margin-bottom:4px}
.ind-tx p,.tech-tx p{font-size:.8rem;color:rgba(255,255,255,.75);line-height:1.4}
@media(max-width:980px){.ind-grid,.tech-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:660px){.hp-prev-head{flex-direction:column;align-items:flex-start}.hp-side{max-width:100%}.ind-grid,.tech-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.ind-grid,.tech-grid{grid-template-columns:1fr}}

/* Customer Stories Carousel */
.sec#stories{padding:80px 0;overflow:hidden}
.car-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;gap:16px}
.car-nav{display:flex;gap:8px}
.car-nav button{width:40px;height:40px;border-radius:50%;border:1px solid #e0e0e0;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.car-nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.car-nav button svg{width:18px;height:18px}
.car-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
.car-track::-webkit-scrollbar{display:none}
.tcard{flex:0 0 360px;border-radius:20px;overflow:hidden;background:#0f0f0f;color:#fff;text-decoration:none;scroll-snap-align:start;display:flex;flex-direction:column;height:520px}
.tcard video,.tcard img{width:100%;height:70%;object-fit:cover;display:block;flex-shrink:0}
.tcard-body{padding:16px 20px;flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.tcard-tag{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px;display:block}
.tcard h3{font-family:'Quicksand';font-weight:800;font-size:1.25rem;line-height:1.2;margin-bottom:4px;color:#fff}
.tcard p{font-size:.82rem;color:rgba(255,255,255,.65);line-height:1.45;margin-bottom:0}
.tcard .rd{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:600;color:var(--accent)}
.tcard .rd svg{width:16px;height:16px}
@media(max-width:660px){.tcard{flex:0 0 300px}}

/* ===== QUOTE PAGE FULL LAYOUT ===== */
.qt-frame{max-width:760px;margin:0 auto;padding:60px 0 80px}
.crumb{font-size:.82rem;color:#888;margin-bottom:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.qt-left h1{font-family:'Quicksand';font-weight:800;font-size:2.6rem;line-height:1.15;margin-bottom:12px}
.qt-left h1 em{font-style:italic;font-weight:700}
.sub{font-size:1rem;color:#5a5a5a;line-height:1.6;margin-bottom:32px}
.qt-form-card{background:#fff;border:1px solid #e5e5e5;border-radius:20px;padding:36px;box-shadow:0 4px 24px rgba(0,0,0,.06)}
.qt-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.qt-row.one{grid-template-columns:1fr}
.qt-fld{display:flex;flex-direction:column;gap:6px}
.qt-fld label{font-size:.88rem;font-weight:600;color:#333}
.req{color:var(--accent)}
.qt-fld input,.qt-fld textarea,.qt-fld select{border:1px solid #ddd;border-radius:10px;padding:11px 14px;font-size:.95rem;color:var(--ink);font-family:inherit;transition:border .2s;background:#fafafa;width:100%;box-sizing:border-box}
.qt-fld input:focus,.qt-fld textarea:focus{outline:none;border-color:var(--accent);background:#fff}
.qt-fld textarea{resize:vertical;min-height:100px}
.qt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.qt-chip{padding:7px 14px;border:1px solid #ddd;border-radius:99px;font-size:.85rem;cursor:pointer;background:#fafafa;transition:all .2s;font-family:inherit}
.qt-chip.active,.qt-chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.qt-submit-wrap{display:flex;align-items:center;justify-content:space-between;margin-top:24px;flex-wrap:wrap;gap:12px}
.qt-submit button{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:var(--ink);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .2s}
.qt-submit button:hover{background:var(--accent)}
.qt-submit svg{width:20px;height:20px}
@media(max-width:560px){.qt-row{grid-template-columns:1fr}.qt-frame{padding:40px 0 60px}}

/* ===== HOME PAGE LAYOUT FIXES ===== */

/* What's new - ncard carousel */
.ncard{flex:0 0 380px;min-width:0;border-radius:16px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;scroll-snap-align:start;display:block}
.ncard .pic{height:240px;overflow:hidden;background:#eee}
.ncard .pic img{width:100%;height:100%;object-fit:cover;max-width:none}
.ncard h3{font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.1rem;line-height:1.35;margin:16px 16px 8px}
.ncard p{font-size:.88rem;color:#555;line-height:1.55;margin:0 16px 16px}
.ncard .rd{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:600;color:var(--accent);margin:0 16px 20px;text-decoration:none}

/* Big3 service cards (Everything you need section) */
.big3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bigc{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#1a1a1a;color:#fff;text-decoration:none}
.bigc img{width:100%;height:280px;object-fit:cover;display:block;flex-shrink:0}
.bigc-body{padding:28px;flex:1;display:flex;flex-direction:column;gap:12px}
.bigc-body h3{font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.2rem;line-height:1.3;margin:0}
.bigc-body p{font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.75);flex:1;margin:0}
.bigc .rd-circle{width:52px;height:52px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;margin-top:auto;flex-shrink:0}
.bigc .rd-circle svg{width:20px;height:20px;color:#fff}
@media(max-width:860px){.big3{grid-template-columns:1fr}}

/* Tech tabs bar */
.tt-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.tt-tab{padding:8px 18px;border-radius:99px;border:1.5px solid rgba(255,255,255,.25);background:transparent;cursor:pointer;font-size:.88rem;font-weight:600;color:rgba(255,255,255,.7);font-family:inherit;transition:all .2s;white-space:nowrap}
.tt-tab.is-active,.tt-tab:hover{background:#fff;color:#0f1117;border-color:#fff}
.tt-panel{display:none}
.tt-panel.is-active{display:block}
.tt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tt-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #2a2a2a;border-radius:12px;background:#1a1a1a}
.tt-card img,.tt-card svg{width:34px;height:34px;object-fit:contain;flex-shrink:0}
.tt-ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0}
.tk-logo{width:34px;height:34px;object-fit:contain;filter:brightness(0) invert(1)}

.tt-card span{font-size:.9rem;font-weight:600;color:#ffffff}
@media(max-width:680px){.tt-grid{grid-template-columns:repeat(2,1fr)}}

/* Client logos */
.cl-track{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:center;padding:16px 0}
.cl-logo{width:140px;height:auto;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cl-logo svg{width:100%;height:auto;max-height:60px;opacity:.65}
.cl-logo img{width:100%;height:auto;max-height:60px;object-fit:contain;opacity:.65}
.cl-marquee{overflow:hidden}
@media(max-width:660px){.cl-logo{width:100px}}


/* bigc card button/arrow fix */
.bigc-go{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;min-width:52px;border-radius:50%;background:var(--accent,#e83232);flex-shrink:0}
.bigc-go svg{width:22px!important;height:22px!important;max-width:22px!important;color:#fff;flex-shrink:0}
.bigc-row{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto}
.bigc-row p{flex:1;margin:0;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.75)}

/* What's new ncard - white background section */
.sec .ncard{background:#fff;color:#1a1a1a;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.sec.black .ncard,.sec.dark .ncard{background:#1a1a1a;color:#fff}


/* Why Aerosoft section - 4-col grid */
.why-grid{grid-template-columns:repeat(4,1fr)!important;gap:20px}
.why-card{flex-direction:column;background:#0f1c3f;color:#fff;border-radius:16px;padding:28px 24px;gap:12px;border-top:3px solid;border-image:linear-gradient(90deg,#4e8fff,#c850c0) 1;position:relative;overflow:hidden}
.why-card .wn{font-size:2.8rem;font-weight:800;color:#4e8fff;line-height:1;margin-bottom:8px}
.why-card h3{font-family:'Quicksand',sans-serif;font-weight:700;font-size:1rem;line-height:1.35;color:#fff;margin:0}
.why-card p{font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.7);margin:0;flex:1}
@media(max-width:860px){.why-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:540px){.why-grid{grid-template-columns:1fr!important}}


/* Override rv flex direction for why-cards */
.why-card.rv{flex-direction:column!important}
.why-grid .why-card{background:#0f1c3f!important;color:#fff!important}


/* ---- proc (How we work list) ---- */
.proc-list{display:flex;flex-direction:column;gap:0;max-width:800px;margin:48px auto 0}
.proc-step{display:grid;grid-template-columns:72px 1fr;gap:28px;align-items:start;padding:32px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.proc-step:last-child{border-bottom:none}
.proc-n{font-family:'Quicksand',sans-serif;font-size:2.4rem;font-weight:800;color:#FF0000;line-height:1;padding-top:4px}
.proc-tx h3{font-size:1.15rem;font-weight:700;margin-bottom:8px;color:var(--ink)}
.proc-tx p{font-size:.93rem;color:var(--body);line-height:1.65;margin:0}

.tcard:hover{transform:translateY(-4px);box-shadow:0 16px 40px -12px rgba(0,0,0,.4)}

.tt-card:hover{background:#222;border-color:#3a3a3a;transform:translateY(-2px);transition:all .25s ease}

.recog-card:hover{border-color:#2e3d52;transform:translateY(-3px);transition:all .25s ease}


/* ============================================================
   MOBILE NAV ACCORDION — sub-menus inside #mnav
   ============================================================ */

/* Reset nav-item inside mobile menu to block layout */
.mnav .nav-item {
  position: static !important;
  display: block !important;
  width: 100% !important;
}

/* Parent trigger link — full width, space-between with chevron */
.mnav .nav-item > a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 14px 0 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #d2d2d2 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  cursor: pointer !important;
  min-height: 0 !important;
  height: auto !important;
  gap: 8px !important;
}

/* Hide mega panel by default inside mnav */
.mnav .nav-mega {
  position: static !important;
  width: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  box-shadow: none !important;
  background: rgba(255,255,255,0.05) !important;
  padding: 0 !important;
  display: none !important;
  grid-template-columns: 1fr !important;
  border-radius: 10px !important;
  margin: 6px 0 10px !important;
  overflow: hidden !important;
  transition: none !important;
}

/* Show mega panel when nav-item has .open class */
.mnav .nav-item.open > .nav-mega {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Rotate chevron when open */
.mnav .nav-item.open > a .nav-cv {
  transform: rotate(180deg) !important;
}
.mnav .nav-cv {
  transition: transform 0.22s ease !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

/* Featured section: show label only, hide desc and CTA on mobile */
.mnav .nm-feat {
  padding: 12px 16px 8px !important;
  border-right: none !important;
  border-bottom: none !important;
  padding-bottom: 4px !important;
  margin-bottom: 0 !important;
}
.mnav .nm-title {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 0 !important;
}
.mnav .nm-desc {
  display: none !important;
}
.mnav .nm-cta {
  display: none !important;
}

/* Links — single column on small phones */
.mnav .nm-links {
  column-count: 1 !important;
  padding: 4px 8px 12px !important;
  column-gap: 0 !important;
}
.mnav .nm-links a {
  display: flex !important;
  align-items: center !important;
  padding: 11px 12px !important;
  font-size: 0.93rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.8) !important;
  border-radius: 8px !important;
  min-height: 44px !important;
  background: transparent !important;
  transition: background 0.15s, color 0.15s !important;
  break-inside: avoid !important;
}
.mnav .nm-links a:hover,
.mnav .nm-links a:active {
  background: rgba(255,255,255,0.09) !important;
  color: #fff !important;
  padding-left: 16px !important;
}

/* 2-col sub-links on wider phones */
@media(min-width:480px){
  .mnav .nm-links { column-count: 2 !important; }
}

/* Get a Quote CTA */
.mnav a.mnav-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #e63946 !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 15px 28px !important;
  border-radius: 100px !important;
  margin-top: 20px !important;
  width: 100% !important;
  min-height: 52px !important;
  border-bottom: none !important;
  letter-spacing: 0.01em !important;
}
.mnav a.mnav-cta:hover {
  background: #c1121f !important;
}

/* mirror fix: constrain footer social icons (unsized inline SVGs) */
.aerosoft-foot-social{display:flex;gap:14px;align-items:center}
.aerosoft-foot-social a{display:inline-flex;width:auto}
.aerosoft-foot-social svg{width:18px;height:18px;flex:0 0 auto}

/* mirror: TCS-style light headings (Quicksand) */
h1,h2,h3,h4,.dhero h1,.hero h1,.tq3-hero h1,[class*="-head"],[class*="head-"]{font-weight:400 !important;letter-spacing:-.01em}
.eyebrow,.crumb,.tag,.nm-title{font-weight:500 !important}



/* --- Mobile: keep the hero PINNED, but remove the per-frame parallax jitter + heavy shadow --- */
@media (max-width: 820px){
  .hero .hero-img, .hero picture, .hero img, .hero video{ transform: none !important; transition: none !important; }
  .hero-in{ transform: none !important; }
  .reveal-stack{ box-shadow: none !important; }
}

/* ═══════════ tcs-polish.css ═══════════ */
/* =============================================================
   AEROSOFT CAYMAN — TCS-LEVEL DESIGN UPGRADE v3 (FIXED)
   ============================================================= */
/* google fonts @import removed: self-hosted in fonts.css */
/* ---- OVERRIDE ROOT VARIABLES ---- */
:root {
  --primary:        #ED1C24 !important;
  --primary-2:      #3399FF !important;
  --primary-dark:   #b3141b !important;
  --accent:         #ED1C24 !important;
  --accent-2:       #3399FF !important;
  --bg:             #FFFFFF !important;
  --soft:           #fff4f4 !important;
  --soft-2:         #E8F0FE !important;
  --ink:            #0A0F1E !important;
  --body:           #1A2035 !important;
  --muted:          #5A6480 !important;
  --line:           #D0DCF0 !important;
  --line-2:         #B8CCE8 !important;
  --tint:           #EAF3FF !important;
  --tint-2:         #F5F9FF !important;
  --ink-grad:       linear-gradient(118deg,#3399FF 0%,#ED1C24 55%,#b3141b 100%) !important;
  --shadow-s:       0 2px 8px rgba(237, 28, 36,.10),0 1px 3px rgba(0,0,0,.06) !important;
  --shadow-m:       0 8px 30px rgba(237, 28, 36,.14),0 4px 10px rgba(0,0,0,.08) !important;
  --shadow-l:       0 20px 60px rgba(237, 28, 36,.18),0 8px 24px rgba(0,0,0,.12) !important;
  --radius:         12px !important;
  --radius-lg:      20px !important;
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* ============================================================
   EYEBROW / LABEL FIX — change red to blue everywhere
   ============================================================ */

.eyebrow,
.page-hero .eyebrow,
.section .eyebrow,
.sec-head .eyebrow,
[class*="eyebrow"],
.overline,
.label-tag {
  color: var(--primary) !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  font-size: .78rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.eyebrow::before,
.page-hero .eyebrow::before,
[class*="eyebrow"]::before {
  background: var(--primary) !important;
}

/* Hero eyebrow — bright on dark background */
.page-hero .eyebrow,
.hero .eyebrow {
  color: #7EC8FF !important;
}
.page-hero .eyebrow::before,
.hero .eyebrow::before {
  background: #7EC8FF !important;
}

/* ============================================================
   NAVIGATION — clean white bar, NO override on dark-nav pages
   ============================================================ */

/* Only style nav elements that aren't already dark-themed */
.site-head,
.nm-wrap {
  transition: box-shadow .3s ease !important;
}

/* Nav link base color — only on light nav */
.site-head .nav-link,
.site-head .main-nav a,
.nm-nav a,
.primary-menu > li > a,
#main-navigation a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  transition: color .2s, background .2s !important;
}

/* Contact us / CTA button in nav */
.head-cta a,
.nav-cta,
.header-cta,
.nm-cta {
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: 100px !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(237, 28, 36,.35) !important;
  transition: all .2s ease !important;
}
.head-cta a:hover,
.nav-cta:hover,
.header-cta:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(237, 28, 36,.45) !important;
  color: #fff !important;
}

/* Dropdown menus */
.sub-menu,
.dropdown-menu,
.nm-dropdown {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-l) !important;
  border: 1px solid var(--line) !important;
  padding: 10px !important;
  background: #fff !important;
}
.sub-menu a,
.dropdown-menu a {
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: .9rem !important;
  transition: all .15s !important;
}
.sub-menu a:hover,
.dropdown-menu a:hover {
  background: var(--soft) !important;
  color: var(--primary) !important;
}

/* ============================================================
   PAGE HERO — fix text visibility WITHOUT overriding bg colors
   The theme sets its own hero backgrounds. We only ensure text
   is always white and eyebrows are visible.
   ============================================================ */

.page-hero {
  position: relative !important;
  overflow: hidden !important;
}

/* Ensure ALL text in hero is white */
.page-hero h1,
.page-hero h2,
.page-hero h3 {
  color: #fff !important;
  font-weight: 800 !important;
  font-family: 'Quicksand', sans-serif !important;
  text-shadow: none !important;
}

.page-hero p,
.page-hero .lead {
  color: rgba(255,255,255,.82) !important;
}

.page-hero .crumb,
.page-hero [class*="crumb"] {
  color: rgba(255,255,255,.55) !important;
}
.page-hero .crumb a,
.page-hero [class*="crumb"] a {
  color: rgba(255,255,255,.7) !important;
}
.page-hero .crumb a:hover,
.page-hero [class*="crumb"] a:hover {
  color: #fff !important;
}

/* Page hero eyebrow on dark bg */
.page-hero .eyebrow {
  color: #7EC8FF !important;
  background: rgba(51,153,255,.15) !important;
  border: 1px solid rgba(51,153,255,.3) !important;
  border-radius: 100px !important;
  padding: 4px 14px !important;
  font-size: .77rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  display: inline-block !important;
}
.page-hero .eyebrow::before {
  display: none !important;
}

/* ============================================================
   HOME HERO (cinematic standalone) — text visibility
   ============================================================ */

.hero,
.hero-section,
[class*="cine-hero"],
.cin-hero {
  position: relative !important;
}

.hero h1,
.hero h2,
.cin-hero h1,
.cin-hero h2,
.hero-section h1 {
  color: #fff !important;
  font-weight: 800 !important;
  font-family: 'Quicksand', sans-serif !important;
}

.hero p,
.hero .lead,
.cin-hero p {
  color: rgba(255,255,255,.82) !important;
}

/* Hero badge/eyebrow on home */
.hero .eyebrow,
.hero-badge,
.cin-hero .eyebrow {
  color: #7EC8FF !important;
  background: rgba(51,153,255,.18) !important;
  border: 1px solid rgba(51,153,255,.35) !important;
  border-radius: 100px !important;
  padding: 5px 16px !important;
}
.hero .eyebrow::before,
.cin-hero .eyebrow::before {
  display: none !important;
}

/* ============================================================
   BUTTONS — bright blue, always visible
   ============================================================ */

.btn {
  font-family: 'Quicksand', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  border-radius: 100px !important;
  transition: all .25s ease !important;
  text-decoration: none !important;
}

.btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 6px 20px rgba(237, 28, 36,.35) !important;
}
.btn-primary:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(237, 28, 36,.45) !important;
  color: #fff !important;
}

.btn-light {
  background: #fff !important;
  color: var(--primary) !important;
  border-color: var(--line-2) !important;
}
.btn-light:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-m) !important;
}

.btn-white {
  background: #fff !important;
  color: var(--primary) !important;
}
.btn-white:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.2) !important;
  color: var(--primary) !important;
}

.btn-ghost-light {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.45) !important;
}
.btn-ghost-light:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: #fff !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   CTA SECTIONS — fix dark-on-dark text issue
   ============================================================ */

.cta,
.cta.rv,
[class*="cta-section"] {
  position: relative !important;
  overflow: hidden !important;
}

/* CTA with dark/ink background — force white text */
.cta h2,
.cta.rv h2,
.cta h3 {
  color: #fff !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 800 !important;
}

.cta p,
.cta.rv p {
  color: rgba(255,255,255,.78) !important;
}

.cta-call,
.cta-call small {
  color: rgba(255,255,255,.8) !important;
}

/* ============================================================
   SECTION TEXT — ensure body text is always visible
   ============================================================ */

/* White/light sections */
.section,
.section-light,
section {
  /* Keep text dark on light backgrounds */
}

.section h2,
.section h3,
.section h4,
.sec-title,
[class*="sec-title"] {
  color: var(--ink) !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 800 !important;
}

.section p,
.section li {
  color: var(--body) !important;
  line-height: 1.75 !important;
}

/* Dark sections — force white text */
.section.dark,
.section-dark,
[class*="bg-ink"],
[class*="bg-dark"],
[class*="dark-section"],
.rv {
  color: #fff !important;
}
.section.dark h2,
.section.dark h3,
.section-dark h2,
.section-dark h3,
.rv h2,
.rv h3,
.rv h4 {
  color: #fff !important;
}
.section.dark p,
.section-dark p,
.rv p {
  color: rgba(255,255,255,.8) !important;
}

/* Stats / numbers on dark bg */
.stats,
.stat,
[class*="stat"]:not([class*="article-stat"]),
.numbers-row [class*="num"],
.numbers-row strong {
  color: #fff !important;
}
.numbers-row span,
.stat-label,
[class*="stat"]:not([class*="article-stat"]) p {
  color: rgba(255,255,255,.72) !important;
}

/* ============================================================
   CARDS — bright borders, hover lift
   ============================================================ */

.card,
.service-card,
.insight-card,
.case-card,
.ind-card,
[class*="-card"]:not(.navbar-brand):not(.no-card) {
  border-radius: var(--radius-lg) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s !important;
  overflow: hidden !important;
}

.card:hover,
.service-card:hover,
.insight-card:hover,
.case-card:hover,
.ind-card:hover,
[class*="-card"]:not(.navbar-brand):not(.no-card):hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-l) !important;
}

/* Section headings */
.sec-head h2,
.sec-head .sec-title {
  color: var(--ink) !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 800 !important;
}

.sec-head p,
.sec-desc {
  color: var(--muted) !important;
}

/* ============================================================
   TLINK — text arrow links
   ============================================================ */

.tlink {
  color: var(--primary) !important;
  font-weight: 600 !important;
  font-family: 'Quicksand', sans-serif !important;
  transition: gap .2s, color .2s !important;
}
.tlink:hover {
  color: var(--primary-dark) !important;
}
.tlink svg {
  transition: transform .2s !important;
}
.tlink:hover svg {
  transform: translateX(4px) !important;
}

/* ============================================================
   FORMS & INPUTS
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select,
.wpcf7-text,
.wpcf7-textarea,
.wpcf7-select,
.field input,
.field textarea {
  background: #fff !important;
  border: 1.5px solid var(--line-2) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
  font-family: 'Inter', sans-serif !important;
  padding: 12px 16px !important;
  transition: border-color .2s, box-shadow .2s !important;
  outline: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
.wpcf7-text:focus,
.wpcf7-textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(237, 28, 36,.12) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted) !important;
}

label,
.field label {
  font-weight: 600 !important;
  font-size: .88rem !important;
  color: var(--ink) !important;
}

/* Submit buttons */
.wpcf7-submit,
input[type="submit"],
button[type="submit"],
.form-submit button {
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 13px 32px !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(237, 28, 36,.35) !important;
  transition: all .25s ease !important;
}
.wpcf7-submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(237, 28, 36,.45) !important;
}

/* ============================================================
   FOOTER — always dark with white text
   ============================================================ */

.site-foot,
footer,
.site-footer,
#colophon {
  color: rgba(255,255,255,.75) !important;
}

.site-foot h4,
.site-foot h5,
.site-foot .foot-head,
footer h4,
footer h5,
.widget-title {
  color: #fff !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
}

.site-foot a,
.foot-nav a,
footer a {
  color: rgba(255,255,255,.62) !important;
  transition: color .2s !important;
}
.site-foot a:hover,
.foot-nav a:hover,
footer a:hover {
  color: var(--primary-2) !important;
}

.foot-bottom,
.site-foot .foot-bottom {
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.foot-bottom p,
.foot-bottom span,
.copyright {
  color: rgba(255,255,255,.38) !important;
  font-size: .82rem !important;
}

/* Social icons */
.aerosoft-foot-social a,
.foot-social a,
.social-links a {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 50% !important;
  transition: all .2s !important;
}
.aerosoft-foot-social a:hover,
.foot-social a:hover,
.social-links a:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   UTILITY BAR — keep the links visible
   ============================================================ */

.utility,
.head-util,
.util-bar {
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.utility a,
.head-util a,
.util-bar a {
  color: rgba(255,255,255,.72) !important;
  font-size: .82rem !important;
  transition: color .2s !important;
}
.utility a:hover,
.head-util a:hover {
  color: #fff !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination a,
.page-numbers a,
.page-numbers span {
  border-radius: 10px !important;
  transition: all .2s !important;
}
.pagination a:hover,
.page-numbers a:hover,
.pagination .current,
.page-numbers .current {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* ============================================================
   GRAD TEXT — blue gradient
   ============================================================ */

.grad-text {
  background: var(--ink-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--soft); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

/* ============================================================
   FOCUS — accessibility
   ============================================================ */

:focus-visible {
  outline: 3px solid var(--primary) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .eyebrow, [class*="eyebrow"] {
    font-size: .72rem !important;
  }
}

/* ============================================================
   CRITICAL EYEBROW COLOR FIX — override any red !important
   Uses multiple selectors for maximum specificity cascade
   ============================================================ */

/* On white/light sections — vivid blue */
body .eyebrow,
body [class*="eyebrow"],
html body .eyebrow,
.section .eyebrow,
.section-content .eyebrow,
.sec-head .eyebrow,
.split .eyebrow,
.grid-2 .eyebrow,
.grid-3 .eyebrow {
  color: #ED1C24 !important;
}

/* On dark/hero sections — bright light blue */
body .page-hero .eyebrow,
body .hero .eyebrow,
body .page-hero [class*="eyebrow"],
html body .page-hero .eyebrow {
  color: #7EC8FF !important;
  background: rgba(51,153,255,.15) !important;
  border: 1px solid rgba(51,153,255,.3) !important;
  border-radius: 100px !important;
  padding: 4px 14px !important;
}
body .page-hero .eyebrow::before,
body .hero .eyebrow::before {
  display: none !important;
}


/* ==========================================================

/* ==========================================================
   FULL-WIDTH LAYOUT FIX v2 — surgical, non-destructive
   Makes image cards and content sections span full page width
   ========================================================== */

/* 1. Override the CSS variable controlling max container width */
:root {
  --maxw: 100% !important;
}

/* 2. Main page content containers — full width, keep horizontal padding */
.container {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 3. Article/single post narrow container — full width */
.container.narrow {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 4. Prose content area in articles */
.prose {
  max-width: 100% !important;
}

/* 5. Fix article content column to use full width */
.entry-content {
  max-width: 100% !important;
  width: 100% !important;
}

/* 6. Restore nav list styling that may break due to --maxw change */
.main-nav,
.main-nav ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.main-nav li {
  list-style: none !important;
  list-style-type: none !important;
}

/* 7. Card images — make taller for a big, hero feel */
.post .pmedia {
  height: 260px !important;
}

/* 8. Mobile padding stays comfortable */
@media (max-width: 640px) {
  .container,
  .container.narrow {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* NAV FIX — ensure nav links are dark/visible on white header */
.site-head .main-nav a,
.site-head .main-nav li a,
.head-in .main-nav a,
.head-in .main-nav li a {
  color: var(--ink) !important;
}

.site-head .main-nav a:hover,
.head-in .main-nav a:hover {
  color: var(--primary) !important;
  background: rgba(0,0,0,0.05) !important;
}

/* Also fix the nav dropdown arrow/indicator color */
.site-head .main-nav .has-children > a::after,
.site-head .main-nav .menu-item-has-children > a::after {
  border-color: var(--ink) !important;
}


/* CARD TEXT FIX — ensure post/insight card body text is dark/readable */
.post .pbody,
.post .pbody h3,
.post .pbody h2,
.post .pbody p,
.post .pbody .date,
.post .pbody * {
  color: var(--ink) !important;
}

/* Make the "Read more" link use primary brand color */
.post .pbody .tlink,
.post .pbody a {
  color: var(--primary) !important;
}

/* Logo visibility in header */
.site-head .custom-logo-link,
.head-in .custom-logo-link {
  opacity: 1 !important;
  visibility: visible !important;
}


/* ============================================================
   DARK SECTION WHITE TEXT OVERRIDE — v2 fix
   All dark-background sections/cards need white text.
   These rules override the generic dark-text rules above.
   ============================================================ */

/* Define the list of dark containers — all text inside must be white/light */
.sec.black *,
#solutions *,
.bigc *,
.bigc-body *,
.hero *,
#home *,
.sec.hp-tech *,
#technologies-preview *,
.tt-card *,
.sec.recog *,
#recognition *,
.longrun *,
#contact *,
.why-card *,
.svc-band .svc-item *,
.dark-band *,
.black-band * {
  color: #ffffff !important;
}

/* Keep links inside dark sections readable with brand blue */
.sec.black a:not(.btn),
#solutions a:not(.btn),
.bigc a:not(.btn),
.sec.hp-tech a:not(.btn),
#technologies-preview a:not(.btn),
.sec.recog a:not(.btn),
#recognition a:not(.btn),
.why-card a:not(.btn) {
  color: #7EC8FF !important;
}

/* Footer — keep existing white text (it was already working) */
.foot *,
footer.foot *,
.fbot * {
  color: #ffffff !important;
}
.foot a,
footer.foot a,
.fbot a {
  color: rgba(255,255,255,0.75) !important;
}
.foot .fleg,
footer .fleg {
  color: rgba(255,255,255,0.45) !important;
}

/* Eyebrow badge on DARK sections — use white text */
.sec.black .eyebrow,
#solutions .eyebrow,
.hero .eyebrow,
#home .eyebrow,
.sec.hp-tech .eyebrow,
.sec.recog .eyebrow,
.longrun .eyebrow,
.why-card .eyebrow {
  color: #7EC8FF !important;
  background: rgba(51, 153, 255, 0.25) !important;
}

/* Eyebrow badge on LIGHT sections — dark text */
.eyebrow.lt {
  color: #003d80 !important;
  background: rgba(237, 28, 36, 0.12) !important;
}

/* Fix: Hero h1, eyebrow — keep white */
.hero h1,
.hero h2,
.hero p,
.hero .eyebrow,
#home h1,
#home h2,
#home p {
  color: #ffffff !important;
}

/* Tech section — keep white for tt-nm and .sec.hp-tech headings */
.sec.hp-tech h1,
.sec.hp-tech h2,
.sec.hp-tech h3,
.sec.hp-tech p,
.sec.hp-tech span,
.tt-card .tt-nm,
.tt-card p,
.tt-card span {
  color: #ffffff !important;
}

/* Recognition section */
.sec.recog h1,
.sec.recog h2,
.sec.recog h3,
.sec.recog p,
.sec.recog span,
.sec.recog .eyebrow {
  color: #ffffff !important;
}

/* CTA / Longrun section */
.longrun h1,
.longrun h2,
.longrun h3,
.longrun p,
.longrun span {
  color: #ffffff !important;
}

/* Why-card dark navy — white text */
.why-card h1,
.why-card h2,
.why-card h3,
.why-card h4,
.why-card p,
.why-card span {
  color: #ffffff !important;
}

/* ============================================================
   NAV LOCALE / OTHER SMALL FIXES
   ============================================================ */

/* Fix nav-locale Cayman Islands text on dark scrolled nav */
.nav.scrolled .nav-locale,
.nav-in .nav-locale {
  color: rgba(255,255,255,0.75) !important;
}

/* Floating action buttons label — fix "Email us" / "Call us" on dark bg */
.fab-lbl {
  color: #ffffff !important;
}

/* ============================================================
   LIGHT SECTIONS — dark text (in case any got overridden above)
   These have higher specificity for light backgrounds.
   ============================================================ */

/* Light/white section text — keep dark */
.ncard h1, .ncard h2, .ncard h3, .ncard h4, .ncard h5, .ncard h6,
.ncard p, .ncard span, .ncard li, .ncard a,
.geo-card h1, .geo-card h2, .geo-card h3, .geo-card p, .geo-card span,
.post.ncard *, .pbody *, .pbody h1, .pbody h2, .pbody h3, .pbody p {
  color: #212529 !important;
}

/* FYF quiz section - dark gradient bg, needs white text */
.fyf-band *:not(.btn):not(button) {
  color: rgba(255,255,255,0.9) !important;
}

/* Why section outer container — light bg, dark text for heading/intro */
.sec:not(.black):not(.hp-tech):not(.recog) > .wrap > h2,
.sec:not(.black):not(.hp-tech):not(.recog) > .wrap > p,
.sec:not(.black):not(.hp-tech):not(.recog) > .wrap > .sec-title,
.sec:not(.black):not(.hp-tech):not(.recog) > .wrap > .eyebrow:not(.lt) {
  color: #212529 !important;
}

/* geo-card — white bg cards, dark text */
.geo-card,
.geo-card * {
  color: #212529 !important;
}

/* Clients section — light, dark text */
.sec.clients *:not(.btn):not(button) {
  color: #212529 !important;
}


/* ============================================================
   TCARD & REMAINING DARK ELEMENTS — final fixes v6
   ============================================================ */

/* tcard (news cards with dark bg) inside insights, stories etc */
.tcard h1, .tcard h2, .tcard h3, .tcard h4, .tcard h5, .tcard h6,
.tcard-title, .tcard .tcard-tag { color: #ffffff !important; }
.tcard p, .tcard li, .tcard span, .tcard .rd { color: rgba(255,255,255,0.8) !important; }

/* Industries preview cards */
#industries-preview .ind-card h1, #industries-preview .ind-card h2, 
#industries-preview .ind-card h3, #industries-preview .ind-card h4 { color: #ffffff !important; }
#industries-preview .ind-card p, #industries-preview .ind-card span { color: rgba(255,255,255,0.85) !important; }
#industries-preview h4 { color: #ffffff !important; }
#industries-preview p { color: rgba(255,255,255,0.85) !important; }

/* Stories/case study cards */
#stories h4, #stories h3, #stories h2 { color: #ffffff !important; }
#stories p, #stories span { color: rgba(255,255,255,0.85) !important; }

/* Careers section eyebrow */
#careers .eyebrow, #careers .eyebrow.lt { color: #7EC8FF !important; background: rgba(51,153,255,0.2) !important; }


/* ============================================================
   INTERACTIVE TOOLS — MOBILE RESPONSIVE FIXES
   ============================================================ */

/* Diagnostic intro: collapse 2-col to 1-col on mobile */
@media (max-width: 767px) {
  .dx-intro-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .dx-intro-r { max-width: 100% !important; }
  #dx-intro .btn-p { display: block !important; width: 100% !important; text-align: center !important; box-sizing: border-box !important; }
  .dx-grid { grid-template-columns: 1fr !important; min-height: auto !important; }
  .dx-rail { position: static !important; height: auto !important; padding: 20px 16px !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
  .dx-stage-r { padding: 28px 16px 24px !important; }
  .dx-rail-dots { display: none !important; }
}

/* Find-your-fit: options full-width */
@media (max-width: 600px) {
  .fyf-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .fyf-opts { grid-template-columns: 1fr !important; }
  .fyf-step { padding: 24px 16px !important; }
}

/* ROI Calculator: stack tabs + controls */
@media (max-width: 767px) {
  .rc-tabs { flex-wrap: wrap !important; gap: 8px !important; }
  .rc-tab { flex: 1 1 calc(50% - 8px) !important; text-align: center !important; font-size: .82rem !important; }
  .rc-panel { padding: 24px 16px !important; }
  .rc-agrid { grid-template-columns: 1fr !important; grid-column: 1 !important; }
  .rc-results { grid-column: 1 !important; }
  .rc-results-card { padding: 20px 16px !important; }
  .rc-results-total { font-size: 2rem !important; }
}

/* Playbook: hide 3D book cover, stack grid */
@media (max-width: 767px) {
  .pb-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .pb-cover-book { display: none !important; }
  .pb-form-card { padding: 24px 16px !important; }
  .pb-stats { grid-template-columns: 1fr 1fr !important; }
}

/* Quote form: stack */
@media (max-width: 767px) {
  .qt-form-card { padding: 24px 16px !important; }
  .qt-form-grid, .qt-form-row { grid-template-columns: 1fr !important; }
}

/* All tool wraps: no horizontal overflow */
@media (max-width: 767px) {
  .dx-wrap, .rc-wrap, .pb-wrap, .qt-wrap, .fyf-wrap, .wrap { max-width: 100% !important; overflow-x: hidden !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; }
}

/* ── 60-second tool homepage section — responsive grid ── */
.home-sixty-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 860px) {
  .home-sixty-grid { gap: 36px; }
}
@media (max-width: 767px) {
  .home-sixty-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}


/* --- AERO-FIX hero crumb contrast (v2) ---
   The hero breadcrumb pill (.crumb) sits on a solid white background, but generic
   hero rules (e.g. header.hero .crumb { -webkit-text-fill-color:#fff }) made the
   label invisible. Match the dark-on-white style the other .crumb contexts already
   use. Specificity is raised above header.hero .crumb so this wins. */
header.hero .cs-hero-grid .crumb,
.cs-hero-grid .crumb,
.cs-hero .crumb {
  color: #0d1117 !important;
  -webkit-text-fill-color: #0d1117 !important;
  opacity: 1 !important;
}
/* Dark-photo heroes: the pill has a dark translucent bg, so the label is white.
   (The dark-on-white rule above is only correct inside .cs-hero contexts.) */
header.hero .hero-in .crumb,
.hero .hero-in .crumb {
  -webkit-text-fill-color: #fff !important;
}


/* === AERO-FIX technologies tk-grid ===
   These component styles (.tk-* card grid + category nav/header) were missing from
   every stylesheet, so cards rendered as full-width stacked inline boxes and the
   page grew to ~100,000px. Styled to match the site tokens (--primary/--line/etc).
   Logos are mostly simpleicons /white variants, so tiles are dark with white logos. */

.catnav {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  width: fit-content; max-width: 100%;
  margin: 0 auto 44px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 100px;
}
.catnav a {
  display: inline-block; padding: 8px 16px; border-radius: 100px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  color: var(--medium) !important; transition: background .2s, color .2s;
}
.catnav a:hover { background: #f3f4f6; color: var(--primary-dark) !important; }

.cat-head { max-width: 760px; margin: 0 0 40px; }
.cat-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cat-num { font-size: 13px; font-weight: 800; letter-spacing: 1px; color: var(--primary) !important; }
.cat-tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--medium) !important; }
.cat-head h2 { margin: 0 0 14px !important; line-height: 1.15; }
.cat-head p { color: var(--medium) !important; font-size: 17px; line-height: 1.6; margin: 0; }

.tk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px; align-items: stretch;
}
.tk-card {
  display: flex !important; flex-direction: column; height: 100%;
  padding: 24px; background: #fff;
  border: 1px solid var(--line); border-radius: 16px;
  color: var(--dark) !important; text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tk-card:hover {
  transform: translateY(-4px);
  border-color: var(--c, var(--primary));
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.35);
}
.tk-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tk-ic {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c, #14181b);
}
.tk-card .tk-logo {
  width: 26px; height: 26px; object-fit: contain;
  filter: brightness(0) invert(1);   /* force every logo to clean white on the tile */
}
.tk-top h3 { margin: 0 !important; font-size: 18px !important; line-height: 1.2; color: #212529 !important; }
.tk-card p { color: var(--medium) !important; font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.tk-more {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--c, var(--primary)) !important;
}
.tk-more svg { width: 16px; height: 16px; flex: 0 0 auto; }

@media (max-width: 640px) {
  .tk-grid { grid-template-columns: 1fr; }
  .cat-head p { font-size: 16px; }
}


/* === AERO-FIX cs-hero parallax ===
   Case-study heroes (.cs-hero) used a CSS background image, so the parallax engine
   (which transforms a media element) had nothing to move. Background images are now
   real <img class="cs-hero-bg"> elements styled to fill the hero (like .cs-hero video),
   and cinematic.js drives the same scroll motion on them. */
.cs-hero { position: relative; }
.cs-hero .cs-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  transform-origin: center center; will-change: transform;
}
.cs-hero video { transform-origin: center center; will-change: transform; }


/* === AERO-FIX text readability (v3, exact winning chains) ===
   Matches the codebase's #id / .cs-hero ancestor specificity + html body prefix so
   these always win. All white-on-dark or opacity-reset, never invisible.
   Decorative .tnum step accents intentionally left. */
html body .article-hero .article-meta span,
html body .article-date, html body .article-read-time, html body .article-topic { color: rgba(255,255,255,0.85) !important; opacity: 1 !important; }
html body .article-subtitle { color: rgba(255,255,255,0.90) !important; }
html body .cs-section.dark .cs-pillar p, html body .cs-pillar p { color: rgba(255,255,255,0.90) !important; }
html body .cs-section.dark .cs-eyebrow, html body .cs-tech-band .cs-eyebrow, html body .cs-eyebrow { color: rgba(255,255,255,0.82) !important; }
html body .cs-hero .cs-meta-card .cs-meta-row > span:first-child,
html body .cs-hero .cs-meta-row span:first-child,
html body .cs-meta-card .cs-meta-row > span:first-child { color: rgba(255,255,255,0.72) !important; }
html body .cs-section.dark .cs-card .num { color: rgba(255,255,255,0.72) !important; }
html body .cs-suite .label { color: rgba(255,255,255,0.82) !important; }
html body #dx-quiz-section .dx-opt .dx-opt-desc, html body #dx-quiz-section .dx-opt-desc, html body .dx-opt-desc { color: rgba(255,255,255,0.86) !important; }
html body #dx-quiz-section .dx-rail-crumb, html body .dx-rail-crumb { color: rgba(255,255,255,0.85) !important; opacity: 1 !important; }
html body #dx-quiz-section .dx-rail-sub, html body .dx-rail-sub { color: rgba(255,255,255,0.82) !important; opacity: 1 !important; }
html body #dx-quiz-section .dx-q-num { opacity: 0.82 !important; }
html body #dx-quiz-section .dx-q-sub { color: rgba(255,255,255,0.85) !important; opacity: 1 !important; }
html body #why .why-card .wn { color: rgba(255,255,255,0.82) !important; }
html body .acc-head .num { color: #6b7280 !important; }
html body .fbot { color: rgba(255,255,255,0.74) !important; }
html body footer .fbot a, html body footer .fbot span, html body footer .fbot p, html body footer .fbot li { color: rgba(255,255,255,0.82) !important; }
html body .stats-strip .wrap > div > div:nth-child(2),
html body .stats-strip .wrap > div > div:last-child { color: rgba(255,255,255,0.78) !important; }


/* === AERO-FIX mobile layout (v2) === */
@media (max-width: 640px){
  /* stats strip: 4-col inline grid clipped on phones -> stack 2x2 */
  html body .stats-strip .wrap { grid-template-columns: 1fr 1fr !important; gap: 28px 16px !important; padding: 0 20px !important; }
  html body .stats-strip .wrap > div { padding: 0 !important; border-right: none !important; }
  /* article stat cards: 4-in-a-row clipped on phones -> 2x2 */
  html body .article-stat-row { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  /* focused-page nav: bare inline links (Solutions/Quote) overflow on phones;
     burger handles full navigation, so hide them (main nav keeps its .nright) */
  html body nav.nav .nav-in > a:not(.brand) { display: none !important; }
  /* secondary grids that slightly overflow on phones -> single column */
  html body .mf-grid { grid-template-columns: 1fr !important; }
  html body .hw-step { grid-template-columns: 1fr !important; gap: 4px 0 !important; }
}
@media (max-width: 380px){
  html body .article-stat-row { grid-template-columns: 1fr !important; }
}


/* === AERO-FIX insights pic === article-card image fixed at 300px -> responsive */
@media (max-width: 640px){
  html body .svc-card .pic { width: 100% !important; min-width: 0 !important; }
  html body .svc-card .pic img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
}


/* === AERO-FIX hw-step mobile v2 === children are placed via grid-column !important,
   so collapsing needs explicit re-placement: number beside body, meta full-width below */
@media (max-width: 640px){
  html body .hw-step { grid-template-columns: 52px 1fr !important; gap: 0 14px !important; }
  html body .hw-step .hw-n { grid-column: 1 !important; grid-row: 1 !important; font-size: 40px !important; }
  html body .hw-step .hw-bd { grid-column: 2 !important; grid-row: 1 !important; }
  html body .hw-step .hw-meta { grid-column: 1 / -1 !important; grid-row: 2 !important; margin-top: 12px !important; }
}


/* === AERO-FIX logo size === mark was 32x32 (squished from 94x90 viewBox) and far
   bigger than the 22px wordmark. Scale to balance the lockup + preserve aspect ratio. */
html body .brand-logo { gap: 8px !important; }
html body .brand-mark { height: 23px !important; width: auto !important; }


/* === AERO-FIX hw-step mobile v3 === the 2-col (number | content) left an empty 52px
   gutter down each tall step and squeezed content. Stack fully: number on top,
   content + callout full-width. display:block makes the children's grid placement inert. */
@media (max-width: 640px){
  html body .hw-step { display: block !important; }
  html body .hw-step .hw-n { display: block !important; font-size: 38px !important; line-height: 1 !important; opacity: 0.22 !important; margin: 0 0 6px !important; }
  html body .hw-step .hw-bd { display: block !important; }
  html body .hw-step .hw-meta { display: block !important; margin-top: 16px !important; }
}


/* === AERO-FIX tools dark text === the tools page is fully dark (#000), but global
   rules force h2/h3/p to #212529 -> dark-on-dark (1.36 contrast). Make text light. */
.page-id-14494 h1, .page-id-14494 h2, .page-id-14494 h3, .page-id-14494 h4,
.page-id-14494 .lead-h2 { color: #ffffff !important; }
.page-id-14494 p, .page-id-14494 li,
.page-id-14494 .prose, .page-id-14494 .prose p,
.page-id-14494 .acc-body, .page-id-14494 .acc-body p { color: rgba(255,255,255,0.84) !important; }


/* === AERO-FIX hero video brightness === the global hero overlay is rgba(0,0,0,0.62),
   which makes the home video hero look dull. Lighten the overlay for VIDEO heroes only
   (image heroes keep the stronger overlay for text contrast). */
html body header.hero:has(video)::after,
html body .hero:has(video)::after,
html body .hero:has(video.hero-vid)::after {
  background: rgba(0,0,0,0.45) !important;
}
html body header.hero video, html body .hero video.hero-img, html body .hero video {
  filter: brightness(1.34) contrast(1.05) saturate(1.08) !important;
}


/* === AERO-FIX hww metrics === the "Four numbers" section is dark (#0a0a0a) but its
   .sec-title heading stays #101010 (invisible), and the 4-col metrics grid overflows
   on mobile (the "30d" metric clipped out of frame). Scope via :has(.hw-metric). */
html body section:has(.hw-metric) .sec-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
@media (max-width: 640px){
  html body div:has(> .hw-metric) {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 16px !important;
  }
}

/* AERO-FIX tools dark text (text-fill) */
.page-id-14494 h1,.page-id-14494 h2,.page-id-14494 h3,.page-id-14494 h4,.page-id-14494 .lead-h2{ -webkit-text-fill-color:#ffffff !important; }
.page-id-14494 p,.page-id-14494 li,.page-id-14494 .prose,.page-id-14494 .prose p,.page-id-14494 .acc-body p{ -webkit-text-fill-color:rgba(255,255,255,0.84) !important; }


/* === AERO-FIX no gray on black === lift every dark/gray text that sits on a dark
   background to a readable light color (color + -webkit-text-fill-color). All targets
   live in inherently-dark containers, so this can never make them invisible. */

/* article hero category tag */
html body .article-hero .article-tag,
html body .article-hero .article-tag * {
  color: rgba(255,255,255,0.92) !important; -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
}
/* dark footer tagline / body text */
html body .footer-in p, html body .footer-in li,
html body .footer-in a, html body .footer-in span {
  color: rgba(255,255,255,0.80) !important; -webkit-text-fill-color: rgba(255,255,255,0.80) !important;
}
/* nav location pill */
html body .nav-in .loc-pill, html body .nav-in .loc-pill * {
  color: rgba(255,255,255,0.78) !important; -webkit-text-fill-color: rgba(255,255,255,0.78) !important;
}
/* ROI calculator CTA button (blue text on blue button) */
html body a.rc-cta-btn, html body .rc-cta-btn, html body .rc-cta-btn * {
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
/* tools page list / accordion index numbers on the dark page */
body.page-id-14494 .num, body.page-id-14494 .acc-head .num {
  color: rgba(255,255,255,0.62) !important; -webkit-text-fill-color: rgba(255,255,255,0.62) !important;
}
/* dark-section eyebrow that was a dim blue */
html body section:has(.hw-metric) .eyebrow,
html body section[style*="background:#0a0a0a"] .eyebrow {
  color: rgba(255,255,255,0.80) !important; -webkit-text-fill-color: rgba(255,255,255,0.80) !important;
}
/* decorative oversized step numerals: lift from 0.25 so they read on black */
html body .tech-card .tnum, html body .tnum {
  color: rgba(255,255,255,0.5) !important; -webkit-text-fill-color: rgba(255,255,255,0.5) !important;
}

/* === AERO cs-hero pinned reveal (match home hero) ===
   Hero image stays FIXED to the viewport; the content (wrapped in .reveal-stack
   by cinematic.js) scrolls up over it on all breakpoints, exactly like the home
   hero. Layers: image(0) < scrim(1) < hero content(2) < reveal-stack(20). */
html body header.cs-hero,
html body .cs-hero {
  position: relative !important;
  top: auto !important;
  height: 100svh !important;
  min-height: 640px !important;
  overflow: visible !important;
  contain: none !important;
}
html body .cs-hero .cs-hero-bg,
html body .cs-hero > video {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100svh !important;
  object-fit: cover !important;
  z-index: 0 !important;
}
html body .cs-hero::after {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100svh !important;
  z-index: 1 !important;
}
html body .cs-hero .wrap,
html body .cs-hero .cs-hero-grid {
  position: relative !important;
  z-index: 2 !important;
}
html body .cs-hero ~ .reveal-stack {
  z-index: 20 !important;
}

/* ── Nav fit between the burger breakpoint and full desktop ───────────────
   The top-level nav labels are the exact phrases customers search for
   ("Software Development", "Web Development", "App Development", "Digital
   Marketing"), so they are never abbreviated to save room. The spacing and
   type scale down instead, across the range where the desktop nav still shows.

   Why this is needed: .nlinks is hidden and .burger takes over only at
   max-width:1000px, but the nav needs ~1136px including the brand. Without
   this, "Quote" was cut in half and "Contact us" sat 144px off-screen on any
   1001-1160px viewport, which covers common 1024 and 1152 wide laptops.

   Selector specificity matters here. critical.css ships
     nav.nav a, nav.nav .nlinks a, ... { font-size:15px!important; padding:0 16px!important }
   at specificity (0,2,2), so a plain `.nlinks a` override at (0,1,1) loses even
   with !important. These selectors match that weight and win on source order,
   because tcs-polish.css is the last stylesheet the layout loads.

   Measured (brand 133px + nav, vs viewport minus 44px nav-in padding):
     1200px -> 881/1023 ok   1080px -> 773/903 ok
     1024px -> 773/847  ok   1001px -> 773/824 ok                     */
@media (max-width: 1200px) {
  nav.nav .nlinks a,
  nav.nav .nlinks .nav-item > a {
    padding-left: 11px !important;
    padding-right: 11px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 1080px) {
  nav.nav .nlinks a,
  nav.nav .nlinks .nav-item > a {
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 13px !important;
  }
}

/* ── Hero H1 word-split must not re-wrap the heading ──────────────────────
   cinematic.js splits the hero H1 into one <span class="hl-w"> per word to run
   the staggered slide-up reveal. It runs after first paint, so any width change
   it introduces is a layout shift.

   cinematic.css gave .hl-w `margin-right:.26em`, but the split markup already
   keeps the real space between words ("</span> <span>"). The margin was
   therefore additive: every word gap rendered ~1.26x normal, the H1 spilled
   onto an extra line, and it grew 128px -> 203px right after paint.

   Measured on the homepage at 1440x900:
     split + margin  203px   (3 lines)  -> 0.145 CLS
     split, no margin 136px  (2 lines)
     plain unsplit    128px  (2 lines)

   Dropping the margin also gives the heading normal word spacing, which is what
   the unsplit text always used. Specificity is raised past
   cinematic.css `.hero h1 .hl-w` and this file loads last. */
header.hero h1 .hl-w,
.hero h1 .hl-w,
.hero-in h1 .hl-w {
  margin-right: 0 !important;
}

/* The reveal slides each word up from translateY(115%), which needs a clipping
   box to look intentional. critical.css forces `display:inline` on
   .hero-in h1 .hl-w, so overflow:hidden cannot clip and the words were sliding
   in unmasked. inline-block restores the mask without affecting line breaking,
   because the real inter-word space is still in the markup. */
header.hero h1 .hl-w,
.hero h1 .hl-w,
.hero-in h1 .hl-w {
  display: inline-block !important;
  overflow: hidden !important;
  vertical-align: bottom !important;
}

/* ── Accessibility and finish pass ────────────────────────────────────────
   Findings are from an audit of the rendered homepage, not a style opinion.   */

/* 1. Tap targets. WCAG 2.2 SC 2.5.8 sets a 24x24px minimum; the footer social
      links measured 14-20px because `footer .fsoc a{padding:0!important}`
      collapsed them to the glyph. The icon keeps its size, the hit area grows
      around it, so nothing looks different but the links are reachable on a
      touch screen. 44px is the comfortable target, used here since the footer
      has room for it. */
footer .fsoc a,
footer .aerosoft-foot-social a,
.fsoc a,
.aerosoft-foot-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 8px !important;
}
footer .fsoc,
.fsoc,
.aerosoft-foot-social {
  gap: 4px !important;          /* was 14px; the padding now supplies the gap */
}
footer .fsoc a:focus-visible,
.fsoc a:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
}

/* 2. Answer-box contrast. The brand red #ED1C24 on white measures 4.38:1, just
      under the 4.5:1 minimum for text under 24px, which the "IN SHORT" label
      (.78rem) and the tick glyphs both are. #DE1A22 measures 4.92:1 and is
      visually indistinguishable at these sizes. Full-size headings keep the
      brand red, since large text only needs 3:1. */
[data-aeo="1"] span[style*="ED1C24"],
[data-aeo="1"] div[style*="ED1C24"] {
  color: #DE1A22 !important;
}

/* 3. Visible focus for keyboard users. Several interactive elements relied on
      the UA default outline, which is removed by the reset in critical.css. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #ED1C24;
  outline-offset: 3px;
  border-radius: 4px;
}

/* 4. Skip link. The nav now exposes 7 mega menus, so a keyboard or screen
      reader user otherwise tabs through every service link before reaching the
      page. Hidden until focused. */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 14px 22px;
  background: #ED1C24;
  color: #fff;
  font-family: 'Quicksand', 'Quicksand Fallback', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom-right-radius: 10px;
}
.skip-to-content:focus {
  left: 0;
}

/* 5. Respect reduced-motion for the hero word reveal. The words animate from
      translateY(115%); with motion reduced they should simply be present. */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .hl-w i,
  .hero h1.in .hl-w i {
    transform: none !important;
    transition: none !important;
  }
  .rv,
  .rv.in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Brand wordmark measured 297x23px. WCAG 2.2 SC 2.5.8 wants at least 24px in
   both directions, so the height gets 1px of headroom. Purely the hit area. */
.nav-in a.brand,
a.brand {
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── Hero text legibility over photography ────────────────────────────────
   Measured by sampling the hero image's own pixels behind each text block:

     deck  (16.8px)  mean bg contrast 6.34:1   brightest bg 1.08:1
     h1    (60.5px)  mean bg contrast 5.31:1   brightest bg 1.00:1

   The copy was legible across most of the frame and effectively invisible where
   it crossed the lit laptop screen. Two things compounded: the FIX-2026-08-16
   "hero-bright" block lightened the scrim from a flat rgba(0,0,0,.62) to
   .26-.30 through the middle, and the same block added
   `filter: brightness(1.20)` to the image, pushing the bright region to 0.918
   luminance.

   That brightness is a deliberate design choice and is kept. The scrim is
   strengthened only across the vertical band the text occupies (30-68%), so the
   photograph still reads as vivid top and bottom.

   Alpha comes from the measurement, not from eye: brightest sampled pixel is
   sRGB 246, and 246 x (1 - 0.54) = 113, which is luminance 0.162, giving
   1.05 / 0.212 = 4.95:1 against white. That clears the 4.5:1 minimum for the
   deck; the 60px H1 only needs 3:1.

   Specificity note: critical.css sets the deck with `#home .hero-in > p` and
   kills shadows with `header.hero h1 { text-shadow:none !important }`. An ID
   pushes that to (1,1,1), so the selectors below carry an id plus two classes
   to win rather than relying on file order.                                  */
html body #home.hero::after,
html body header.hero::after {
  background: linear-gradient(180deg,
    rgba(0,0,0,.46) 0%,
    rgba(0,0,0,.42) 18%,
    rgba(0,0,0,.54) 30%,
    rgba(0,0,0,.54) 68%,
    rgba(0,0,0,.48) 84%,
    rgba(0,0,0,.64) 100%) !important;
  background-image: linear-gradient(180deg,
    rgba(0,0,0,.46) 0%,
    rgba(0,0,0,.42) 18%,
    rgba(0,0,0,.54) 30%,
    rgba(0,0,0,.54) 68%,
    rgba(0,0,0,.48) 84%,
    rgba(0,0,0,.64) 100%) !important;
}

/* A shadow does not count toward a WCAG ratio, but it is what keeps a letter
   edge crisp where a specular highlight sits directly behind it. Tuned to stay
   invisible against the dark parts of the frame. */
html body #home.hero .hero-in h1,
html body #home .hero-in h1,
html body header.hero .hero-in h1,
html body .hero .hero-in h1 {
  text-shadow: 0 2px 14px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.34) !important;
}

html body #home.hero .hero-in > p,
html body #home .hero-in > p,
html body header.hero .hero-in > p,
html body .hero .hero-in > p {
  color: rgba(255,255,255,.97) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.46), 0 1px 2px rgba(0,0,0,.38) !important;
}

/* The eyebrow chip sits on the same photograph and was the lowest-contrast
   element in the hero at 12px. */
html body #home.hero .hero-in .crumb,
html body header.hero .hero-in .crumb,
html body .hero .hero-in .eyebrow {
  background: rgba(0,0,0,.44) !important;
  border-color: rgba(255,255,255,.36) !important;
  color: #fff !important;
}

/* ── Layout container and reading measure ─────────────────────────────────
   `.wrap` shipped with `max-width:100%`, so content grew with the monitor:

     viewport   widest paragraph   characters per line
     1440px         760px                 85
     1920px         886px                 99
     2560px        1206px                135
     and #contact > .wrap > p at 1920px:  1832px / 229 characters

   Comfortable measure is 45-75 characters; past about 90 the eye loses the
   line return. 229 is the single most damaging thing on a large display.

   Two independent caps, because one is not enough:

   1. `.wrap` gets a 1440px ceiling. Below 1440 nothing moves at all, so the
      common laptop widths render byte-identically to today. Above it the column
      centres instead of stretching. Section backgrounds are on the <section>,
      not on .wrap, so full-bleed bands stay full bleed.

   2. Section prose gets a `ch` measure. `ch` is used rather than px so the cap
      follows the element's own font size and stays ~68 characters whether the
      text is 15px or 18px. Only paragraphs already wider than the cap are
      affected; card and grid copy is narrower and unchanged.

   Left-aligned prose gets max-width only, never `margin-inline:auto`, so the
   text stays on the grid line instead of drifting to the middle of its column.
   The centred intros (#process, #where-we-work) already carry their own 700px
   cap and are deliberately left alone.                                       */

.wrap {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* Section intro and body prose, measured. Selectors mirror the paths found in
   the audit rather than a blanket `p` rule, so nothing inside a card, table or
   carousel is touched. */
section#contact > .wrap > p,
section#recognition > .wrap > .recog-top > p,
section#careers > .wrap > .split > div > p,
.sec > .wrap > .proc-list .proc-tx > p {
  max-width: 68ch;
}

/* The answer box already has an 820px card; its paragraph inherits the card
   width, which lands at 85 characters on a wide screen. */
[data-aeo="1"] p {
  max-width: 68ch;
}

/* Hero copy is centred, so it needs auto margins to stay centred once capped.
   The H1 is deliberately allowed to run wider than prose: it is display type,
   read as a shape rather than scanned line by line. */
.hero-in > p {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* ── Reading measure, shared components ──────────────────────────────────
   The first measure pass named homepage sections, so inner pages were still
   running long. Sampling /web-development, /erp, /healthcare and /react at
   1920px showed the same four components over-running on every one of them,
   which means capping them here fixes all 148 pages at once:

     .acc-body > p              820px   99ch   (FAQ answers)
     .wrap > div > ul > li      816px  103ch   (bullet lists, no cap at all)
     .sec > .wrap > div > p     769px   86ch   (body prose)
     .bigc-body > p             607px   83ch   (large link cards)

   All four are left-aligned, so they take max-width only. Adding
   `margin-inline:auto` would pull them off the grid line they share with the
   heading above them.

   68ch for prose, 62ch for card copy which sits in a narrower column anyway.
   `ch` rather than px so the cap tracks each component's own font size. */

.acc-body > p,
.acc-body > ul > li,
.sec > .wrap > div > p,
.sec > .wrap > p:not([class]) {
  max-width: 68ch;
}

/* Bullet lists had no cap anywhere. Scoped to list items that are real prose,
   not the icon/stat grids which use their own classes. */
.sec .wrap ul:not([class]) > li,
.sec .wrap ul[class=""] > li,
.prose li {
  max-width: 68ch;
}

.bigc-body > p,
.svc-card p,
.scard p {
  max-width: 62ch;
}

/* The blog index intro sits directly in <main class="wrap">, outside the .sec
   scope the rules above use, so it was the last element still running long:
   1120px at 16px, about 140 characters. */
main.wrap > p,
main.wrap > section > p {
  max-width: 68ch;
}

/* Case-study and guide archetypes use their own containers, so they were the
   last two page types still over-running at 2560px:
     .cs-process-row > div > p    1176px  163ch
     .cs-hero-grid   > div > p     952px  119ch
     main.wrap > div > p           860px  108ch  (guide FAQ answers)
     main.wrap > section > ul > li 808px  102ch  (guide answer-box bullets) */
.cs-process-row > div > p,
.cs-hero-grid > div > p,
.cs-hero-grid > div > .lead,
main.wrap > div > p,
main.wrap > section > ul > li,
.article-body > p,
.article-content > p {
  max-width: 68ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHIC CRAFT LAYER
   Every rule below is a response to a measurement taken on the rendered page,
   not a preference. The numbers in each comment are what was observed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tabular figures ──────────────────────────────────────────────────
   Quicksand's default figures are proportional, so a column of step numbers
   does not line up. Measured widths:

     .geo-num  @56px   01 = 51.7px   02 = 61.8px   -> 10.1px ragged
     16px spans        01 = 17.1px   02 = 19.9px   ->  2.8px ragged

   A numbered sequence is data, not prose, so it wants tabular figures. Prose
   keeps proportional figures, which is why this is scoped and not on body. */
.geo-num,
.wn,
.proc-n,
.inum,
.car-count,
.acc-n,
[class*="-num"],
[class*="stat"] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ── 2. Kerning and contextual alternates ────────────────────────────────
   font-feature-settings computed as `normal`, so the browser was free to skip
   pair kerning. Albert Sans and Quicksand both ship real kern tables. */
body,
h1, h2, h3, h4, h5, h6, p, li, a, span, button, input, textarea {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-kerning: normal;
}

/* ── 3. Small-heading leading ────────────────────────────────────────────
   Display type at 40-60px is set at 1.06, which is right: tight leading is
   what makes large type read as designed. The same 1.06 was inherited by H3
   at 22px across 24 cards, where two lines nearly collide.

   Leading has to loosen as size drops. 22px gets 1.18, which keeps the card
   title compact without the lines touching. */
h3,
.sec h3,
.why-card h3,
.scard h3,
.tcard h3,
.svc-card h3 {
  line-height: 1.18 !important;
}
h4, h5, h6 {
  line-height: 1.24 !important;
}

/* ── 4. Widow control ───────────────────────────────────────────────────
   H1 and H2 already carry `text-wrap: balance`. H3 did not, and every widow
   found on the page was an H3 dropping one word onto its last line:

     "Senior engineers, end to end"        -> "end"
     "Delivered in clear milestones"       -> "milestones"
     "Predictive analytics in healthcare"  -> "healthcare"
     "A competitive edge with software"    -> "software"

   `balance` evens the lines of a short block, which is what a heading is.
   `pretty` is the right choice for body copy: it only fixes the last line and
   does not reflow the whole paragraph. */
h3, h4, h5, h6,
.sec-title, .nm-title, .eyebrow, .crumb {
  text-wrap: balance;
}
p, li, figcaption, blockquote, .lead, .nm-desc, dd {
  text-wrap: pretty;
}

/* ── 5. Optical tracking on display type ────────────────────────────────
   Tracking should tighten as type grows. Measured, it went the other way:

     H2 @40px  ls -1px      = -0.025em
     H1 @60px  ls -0.605px  = -0.010em   <- looser than the smaller heading

   The H1 is brought onto the same optical curve. em units so it holds through
   the clamp() range instead of only at one viewport. */
h1,
.hero-in h1,
header.hero h1 {
  letter-spacing: -0.022em !important;
}
h2, .sec-title {
  letter-spacing: -0.024em !important;
}

/* ── 6. Corner radius system ────────────────────────────────────────────
   Radii in use: 8px x146 and 20px x91 are the system. The rest are one-offs
   left behind by different authors: 2px x6, 5px, 7px, 12px x2, 28px, plus
   99px and 100px both being used for the same pill.

   Snapped to the nearest system value. Circles (50%) are untouched. */
[style*="border-radius:7px"], .nav-search { border-radius: 8px !important; }
[style*="border-radius:5px"] { border-radius: 8px !important; }
[style*="border-radius:2px"] { border-radius: 2px; }        /* hairline chips stay */
[style*="border-radius:12px"] { border-radius: 14px !important; }
[style*="border-radius:28px"] { border-radius: 20px !important; }
[style*="border-radius:99px"] { border-radius: 100px !important; }

/* ── 7. Anchor offset under the sticky nav ──────────────────────────────
   The nav is fixed at ~72px and html has `scroll-behavior:smooth`, so every
   in-page jump (#contact, #solutions, the skip link) landed with the target
   heading tucked underneath it. */
:target,
section[id],
header[id],
h1[id], h2[id], h3[id] {
  scroll-margin-top: 96px;
}

/* ── 8. Reduced motion, extended ────────────────────────────────────────
   `scroll-behavior: smooth` is also motion, and it is the one that most often
   triggers vestibular symptoms. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── 1. Numeral column alignment, without tabular figures ────────────────
   `font-variant-numeric: tabular-nums` was applied correctly (computed value
   confirms "lnum","tnum") but Quicksand ships no tnum table, so it is a no-op.
   Probed directly at 100px:

     "11" = 75px   "00" = 120px     identical with and without tnum

   Since the typeface cannot supply a fixed advance, the slot supplies it. The
   numeral sits in a min-width box measured from the widest observed glyph pair
   (.geo-num at 56px: 01 = 51.7px, 02 = 61.8px = 1.10em), so 1.18em clears all
   ten digits with margin. Left-aligned, so the digits themselves still start on
   the same x as the text above and below them.

   Switching these to Inter, which does have tnum, was the alternative. It was
   rejected: it would change the typeface of the largest numerals on the page,
   which is a design decision rather than an alignment fix. */
.geo-num,
.wn,
.proc-n,
.acc-n,
.car-count {
  display: inline-block;
  min-width: 1.18em;
  text-align: left;
  font-variant-numeric: normal;   /* honest: the font has no tabular figures */
  font-feature-settings: "kern" 1;
}

/* ── 2. One authoritative tracking rule ─────────────────────────────────
   The hero H1 is matched by 17 letter-spacing declarations across
   critical.css, cinematic.css, tcs-polish.css and polish.css, ranging from
   -0.01em to -0.04em, most of them !important. The winner was
   `critical.css  h1, .hero h1, ..., #home h1, header.hero h1  -0.01em`,
   which carries both an id and !important.

   Result was an inverted optical curve: the 60px H1 tracked looser (-0.01em)
   than the 40px H2 (-0.025em). Tracking should tighten as size grows.

   This does not fix the underlying accretion, which needs those four files
   consolidated. It puts one rule above the pile, at id-level specificity so it
   actually lands. */
html body #home.hero h1,
html body #home .hero-in h1,
html body header.hero h1,
html body header.hero .hero-in h1,
html body .hero h1 {
  letter-spacing: -0.022em !important;
}
html body #home h2,
html body .sec h2,
html body .sec .sec-title {
  letter-spacing: -0.024em !important;
}

/* ── 3. Hero deck measure, matched to the H1 ─────────────────────────────
   The deck is centred under a balanced H1. Giving it its own balance keeps the
   two blocks reading as one unit instead of a tidy headline over a ragged
   paragraph. */
html body .hero-in > p {
  text-wrap: pretty;
}

/* ── Optical tracking curve, corrected ──────────────────────────────────
   The previous pass moved the H1 from -0.010em to -0.022em, which was still
   looser than the 40px H2 at -0.024em. Tracking must tighten as type grows,
   so the curve was merely less inverted, not fixed.

   Monotonic curve, tightest at the top:
     h1  60px  -0.030em   (-1.81px)
     h2  40px  -0.025em   (-1.00px)
     h3  22px  -0.016em   (-0.35px)
     body      normal
   Set in em so each holds across the clamp() range rather than at one width. */
html body #home.hero h1,
html body #home .hero-in h1,
html body header.hero h1,
html body header.hero .hero-in h1,
html body .hero h1,
html body h1 {
  letter-spacing: -0.030em !important;
}
html body #home h2,
html body .sec h2,
html body .sec .sec-title,
html body h2 {
  letter-spacing: -0.025em !important;
}
html body h3,
html body .sec h3 {
  letter-spacing: -0.016em !important;
}
html body p,
html body li {
  letter-spacing: normal !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRAND CONSISTENCY
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Card accent bar ──────────────────────────────────────────────────
   .why-card carried
     border-image: linear-gradient(90deg, rgb(78,143,255), rgb(200,80,192))
   which is #4E8FFF blue to #C850C0 magenta. Neither colour appears anywhere
   else on the site, and the brand accent is #ED1C24. It reads as a stock
   template gradient sitting on top of a considered dark card.

   Replaced with a red-family gradient so the bar still has depth rather than
   looking like a flat rule, but stays inside the palette. Direction runs light
   to deep, left to right, matching the reading direction. */
.why-card,
.why-grid > .why-card {
  border-image: linear-gradient(90deg, #ED1C24 0%, #B31016 100%) 1 !important;
}

/* ── 2. Pure red to brand red ───────────────────────────────────────────
   Nine rules across cinematic.css and tools.css used rgb(255,0,0) where the
   system colour is #ED1C24. Pure red is a harsher, bluer red; side by side the
   two do not read as the same colour, and one of the offenders is the logo
   mark itself, so the brand mark did not match the brand.

   If the wordmark is genuinely meant to be pure red, delete the .brand-mark
   block below and nothing else changes. */
.brand-mark path,
.brand-mark circle,
.brand .lm,
.lm {
  fill: #ED1C24 !important;
}
.proc-n,
.pb-chap-n,
.sec .pb-chap-n,
.pb-cover-eyebrow,
.sec .pb-cover-eyebrow {
  color: #ED1C24 !important;
}
.pb-fld input:focus,
.pb-fld select:focus,
.pb-fld textarea:focus {
  border-color: #ED1C24 !important;
}
.pb-cta:hover {
  background: #ED1C24 !important;
}

/* ── 3. Interaction feel ────────────────────────────────────────────────
   Nine card classes were transitioning `all`, which animates layout
   properties as well as paint ones and is the usual cause of a hover that
   feels slightly heavy. Narrowed to the three properties that actually
   change, on a single easing curve so every card on the page reacts the same
   way. 180ms out, 240ms back is the standard asymmetry: leaving should feel
   quicker than arriving. */
.why-card,
.svc-card,
.scard,
.tcard,
.bigc,
.geo-card,
.cs-related-card,
[class*="card"] {
  transition:
    transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 240ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.why-card:hover,
.svc-card:hover,
.scard:hover,
.tcard:hover,
.geo-card:hover {
  transition-duration: 180ms !important;
}

/* ── 4. Focus ring on brand, not browser default ────────────────────────
   The reset in critical.css removes the UA outline. The replacement added
   earlier used the brand red, which disappears against the red buttons it
   sometimes lands on. A white inner ring plus red outer keeps it visible on
   both light and dark surfaces. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #ED1C24 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9) !important;
  border-radius: 6px;
}
.sec.black a:focus-visible,
footer a:focus-visible,
.hero a:focus-visible {
  outline-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(237, 28, 36, 0.75) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ELEVATION PASS — benchmarked against idccayman.com
   Measured on that site, not eyeballed:
     section padding  147/147px       (aerosoft: 80 / 88 / 90 / 100)
     body copy        18.72px / 1.60  (aerosoft: 16px / 1.75)
     H1               77.8px / 1.02 / -0.018em / left / Sentient serif
     buttons          0px radius, 12.5px, letter-spacing 1.5-2.34px, caps
     card radius      2px             (aerosoft: 20px)
     palette          deep green + gold + off-white, two accents only

   What transfers to a software brand and what does not is a real distinction.
   Whitespace, type scale, small-caps UI lettering and editorial detailing are
   craft and carry over. A high-contrast serif and 0px geometry are IDC's
   luxury-retail identity; imposing them on a technology brand would be
   costume, so those are left alone and raised separately.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Vertical rhythm ─────────────────────────────────────────────────
   The largest single difference, and the main reason IDC reads as expensive.
   Aerosoft ran 80-100px; four different values, none of them generous. Moving
   to a consistent 128px (desktop) buys the breathing room without the 147px
   that suits a catalogue of ten products more than a page of twelve sections.
   Scales down at narrower widths so mobile does not become a scroll marathon. */
.sec,
section.sec {
  padding-top: 128px !important;
  padding-bottom: 128px !important;
}
.sec.soft,
.sec.black {
  padding-top: 136px !important;
  padding-bottom: 136px !important;
}
/* The answer box sits directly under the hero and keeps its tighter setting. */
.sec[data-aeo="1"] {
  padding-top: 56px !important;
  padding-bottom: 8px !important;
}
@media (max-width: 1080px) {
  .sec, section.sec { padding-top: 96px !important; padding-bottom: 96px !important; }
  .sec.soft, .sec.black { padding-top: 100px !important; padding-bottom: 100px !important; }
}
@media (max-width: 640px) {
  .sec, section.sec,
  .sec.soft, .sec.black { padding-top: 72px !important; padding-bottom: 72px !important; }
}

/* ── 2. Body copy ───────────────────────────────────────────────────────
   16px/1.75 is a documentation setting: small type, loose leading. IDC runs
   18.7px/1.6, which reads as confident rather than dense. 17px/1.66 is the
   measured midpoint and keeps existing line breaks stable. The 68ch measure
   set earlier is in ch, so it tracks this automatically. */
.sec p,
.sec li,
.prose p,
.prose li,
.acc-body p {
  font-size: 17px !important;
  line-height: 1.66 !important;
}
.hero-in > p,
.hero p {
  font-size: 18px !important;
  line-height: 1.62 !important;
}

/* ── 3. Small-caps UI lettering ─────────────────────────────────────────
   Every interactive label on IDC is uppercase at 11.5-13px with 1.5-2.34px of
   tracking. It is the detail that makes a button feel considered rather than
   generic. Aerosoft's buttons were 16px sentence case with no tracking. */
.btn,
.btn-w,
.btn-out-w,
a.lets-talk,
.nm-cta,
.hp-prev-cta,
button[class*="cta"],
a[class*="cta"] {
  text-transform: uppercase !important;
  font-size: 12.5px !important;
  letter-spacing: 0.16em !important;
  font-weight: 600 !important;
}

/* ── 4. Eyebrow with a leading rule ────────────────────────────────────
   IDC sets its kickers as "— THE IDC SIGNATURE": a short rule, then letter-
   spaced caps. It costs one pseudo-element and is the cheapest editorial
   signal on the page. Tracking raised to 0.2em to match. */
.eyebrow,
.sec-eyebrow,
.crumb {
  letter-spacing: 0.2em !important;
}
.sec .eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  margin-right: 12px;
  vertical-align: 0.32em;
  background: currentColor;
  opacity: 0.55;
}

/* ── 5. Ghosted index numerals ─────────────────────────────────────────
   IDC sets its section numbers as large, low-contrast display figures used as
   ornament rather than information. Aerosoft already prints 01-04; they were
   simply set at full strength, competing with the heading beside them.
   Dropped back so the heading leads and the numeral supports it. */
.proc-n,
.geo-num {
  font-size: 3.6rem !important;
  font-weight: 700 !important;
  line-height: 0.9 !important;
  color: rgba(237, 28, 36, 0.22) !important;
}
.sec.black .proc-n,
.sec.black .geo-num,
.geo-card .geo-num {
  color: rgba(255, 255, 255, 0.20) !important;
}
.why-card .wn {
  color: rgba(255, 255, 255, 0.22) !important;
}

/* ── Corrections to the elevation pass ──────────────────────────────────

   1. The 17px body increase was applied via `.sec p`, which also caught card
      copy. In a four-column grid a card column is 273px wide, so 17px dropped
      the measure to 32 characters over 7 lines. Thirteen card paragraphs ended
      up cramped, which is worse than the 16px they started at.

      Prose and card copy are different jobs and need different sizes. Prose
      keeps 17px, cards get 15px, which at 273px reads about 36 characters:
      still narrow, because a four-up grid is narrow, but no longer fighting.

   2. The ghosted numerals took the new size (3.6rem computed) but not the
      colour: `.why-card .wn` stayed at rgba(255,255,255,.82) and .proc-n /
      .geo-num stayed at rgb(33,37,41), both losing to more specific rules
      elsewhere. Raised to id/attribute-level specificity.                    */

/* 1. Card copy back down --------------------------------------------------- */
html body .sec [class*="card"] p,
html body .sec [class*="card"] li,
html body .why-card p,
html body .tcard p,
html body .scard p,
html body .svc-card p,
html body .geo-card p,
html body .bigc-body p,
html body .ind-tx p,
html body .nm-desc {
  font-size: 15px !important;
  line-height: 1.62 !important;
}

/* 2. Ghosted index numerals, at winning specificity ----------------------- */
html body .why-grid .why-card .wn,
html body .why-card .wn {
  color: rgba(255, 255, 255, 0.20) !important;
  font-size: 3.4rem !important;
  line-height: 0.92 !important;
  font-weight: 700 !important;
}
html body .proc-list .proc-step .proc-n,
html body .sec .proc-n {
  color: rgba(237, 28, 36, 0.24) !important;
  font-size: 3.6rem !important;
  line-height: 0.9 !important;
}
html body .geo-card .geo-head .geo-num,
html body .sec .geo-num {
  color: rgba(255, 255, 255, 0.20) !important;
  font-size: 3.4rem !important;
  line-height: 0.92 !important;
}
html body .ind-tx .inum {
  color: rgba(237, 28, 36, 0.34) !important;
}

/* 3. The eyebrow rule should not appear on the hero chip, which is a pill
      with a border and reads as a badge rather than a kicker. */
html body .hero-in .crumb::before,
html body .hero .eyebrow::before {
  content: none !important;
  display: none !important;
}

/* The why-card index numerals resisted three attempts. Cause: tcs-polish
   carries `.sec.black *, #solutions *, .hero *, #home * { color:#fff!important }`
   and `#home *` scores an id, which outranks any class-only selector however
   long. Matching the id here wins on specificity rather than luck. */
html body #home .why-grid .why-card .wn,
html body #home .why-card .wn,
html body #why .why-card .wn {
  color: rgba(255, 255, 255, 0.20) !important;
  font-size: 3.4rem !important;
  line-height: 0.92 !important;
  font-weight: 700 !important;
}

/* ── Ghosted index numerals: visible ornament, not hidden text ────────────
   The earlier pass dropped these to 0.20-0.24 alpha so the heading beside them
   leads. Measured contrast against their actual backdrop:

     .why-card .wn   1.88   faint but legible
     .proc-n         1.46   marginal
     .geo-num        1.00   indistinguishable from the background

   At 1.00 the numeral is not ornament, it is absent, which defeats the point of
   printing it and leaves the markup carrying text nobody can see. Google treats
   hidden text as a problem only when it is used to manipulate ranking, and a
   two-digit index carries no keyword, so this was never a spam risk. It is a
   design and accessibility fix: raised to a level that reads clearly as a
   recessive index while still letting the heading dominate. */
html body #home .why-grid .why-card .wn,
html body #home .why-card .wn,
html body #why .why-card .wn {
  color: rgba(255, 255, 255, 0.34) !important;
}
html body .proc-list .proc-step .proc-n,
html body .sec .proc-n {
  color: rgba(237, 28, 36, 0.42) !important;
}
html body .geo-card .geo-head .geo-num,
html body .sec .geo-num {
  color: rgba(255, 255, 255, 0.38) !important;
}

/* Correction: .geo-num sits on a WHITE card in #where-we-work, so ghosting it
   in white made it invisible (measured contrast 1.00 against rgb(255,255,255)).
   It carries no keyword so it was never a spam issue, but white-on-white text
   is a defect either way. Ghosted in brand red instead, matching .proc-n which
   sits on the same light ground. The white rule is kept only for the genuinely
   dark surfaces. */
html body #where-we-work .geo-num,
html body .geo-card .geo-head .geo-num,
html body .sec .geo-num {
  color: rgba(237, 28, 36, 0.32) !important;
}
html body .sec.black .geo-num,
html body .sec.dark .geo-num {
  color: rgba(255, 255, 255, 0.34) !important;
}

/* ═══════════ tools.css ═══════════ */
/* ===== Tool-page styles extracted from WordPress mirror ===== */

/* --- roi-calculator-cinematic --- */

.rc-layout{display:grid!important;grid-template-columns:1fr 380px!important;gap:52px!important;align-items:start!important;margin-top:8px!important}
.rc-panel{display:flex;flex-direction:column;gap:28px}
.rc-slider-group{display:flex;flex-direction:column;gap:10px}
.rc-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rc-label-text{font-size:14px;font-weight:600;color:#2a2a2a;letter-spacing:-0.01em}
.rc-label-value{font-size:14px;font-weight:700;color:#ED1C24;white-space:nowrap;font-variant-numeric:tabular-nums}
.rc-range{width:100%;height:6px;-webkit-appearance:none;appearance:none;border-radius:100px;outline:none;cursor:pointer;background:linear-gradient(to right,#ED1C24 24%,#e0e8f4 24%)}
.rc-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2.5px solid #ED1C24;box-shadow:0 2px 8px rgba(237, 28, 36,0.3);cursor:pointer}
.rc-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2.5px solid #ED1C24;cursor:pointer}
.rc-range-bounds{display:flex;justify-content:space-between;font-size:11px;color:#9aa5b4;font-weight:500}
.rc-results-card{background:#fff;border:1.5px solid #dce6f4;border-radius:20px;padding:32px;box-shadow:0 8px 40px rgba(0,60,140,0.10);position:sticky;top:90px}
.rc-results-header{text-align:center;margin-bottom:28px;padding-bottom:24px;border-bottom:1.5px solid #eef2f8}
.rc-results-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#ED1C24;margin-bottom:10px}
.rc-results-total{font-size:52px;font-weight:800;color:#0a0a0a;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums}
.rc-results-breakdown{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.rc-result-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.rc-result-label{color:#556;font-weight:500}
.rc-result-val{font-weight:700;color:#1a6bd4;font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-result-row--total{padding-top:14px;border-top:1.5px solid #eef2f8;margin-top:4px}
.rc-result-row--total .rc-result-label{font-weight:700;color:#0a0a0a;font-size:15px}
.rc-result-row--total .rc-result-val{font-size:18px;color:#0f8c5a}
.rc-payback{background:#f0f7ff;border:1px solid #cce0fa;border-radius:10px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:13.5px}
.rc-payback-label{color:#445;font-weight:500}
.rc-payback-val{font-weight:800;color:#ED1C24;font-variant-numeric:tabular-nums}
.rc-assumption{font-size:11.5px;color:#9aa5b4;line-height:1.5;margin-bottom:22px;font-style:italic}
.rc-cta-btn{display:block;width:100%;text-align:center;background:#ED1C24;color:#fff;font-size:14.5px;font-weight:700;padding:15px 24px;border-radius:100px;text-decoration:none;box-shadow:0 4px 16px rgba(237, 28, 36,0.35)}
.rc-panel-wrap{display:grid;grid-template-columns:1fr 380px;gap:52px;align-items:start;margin-top:8px}


/* --- playbook-cinematic --- */

/* ===== PLAYBOOK PAGE LAYOUT FIX, pb- classes ===== */

/* Hero two-column grid */
.sec:has(.pb-hero-grid){background:#0a0a0a;padding:0}
.pb-hero-grid{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;align-items:stretch}
.pb-cover{background:linear-gradient(145deg,#111 0%,#1a1a2e 40%,#0a0a1a 100%);display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,6vw,96px) clamp(32px,5vw,72px);position:relative;overflow:hidden}
.pb-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 30% 40%,rgba(255,0,0,.12),transparent);pointer-events:none}
.pb-cover-book{position:relative;z-index:1;max-width:480px}
.pb-cover-in{display:flex;flex-direction:column;gap:24px}
.pb-cover-eyebrow,.sec .pb-cover-eyebrow,.pb-cover .pb-cover-eyebrow{color:#FF0000!important;font-family:'Quicksand',sans-serif;font-weight:700!important;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.pb-cover-t,.sec .pb-cover-t,.pb-cover-in .pb-cover-t,.pb-hero-grid .pb-cover-t{color:#fff!important;font-weight:700!important;font-family:'Quicksand',sans-serif;font-size:clamp(2.8rem,4.5vw,4.2rem);line-height:1.05;letter-spacing:-.03em;margin:0}
.pb-cover-sub,.pb-hero-grid .pb-cover-sub,.pb-cover .pb-cover-sub{color:rgba(255,255,255,.7)!important;font-size:1.06rem;line-height:1.65;max-width:400px;margin:0}
.pb-cover-foot,.pb-cover .pb-cover-foot{display:flex;align-items:center;gap:12px;font-family:'Quicksand',sans-serif;font-size:.88rem;color:rgba(255,255,255,.5)!important;margin-top:8px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.pb-cover-foot *{color:rgba(255,255,255,.5)!important}

/* Form side */
.pb-hero-grid>div:last-child{background:#fff;display:flex;align-items:center;justify-content:center;padding:clamp(40px,5vw,72px) clamp(28px,4vw,56px)}
.pb-form-card{width:100%;max-width:480px}
.pb-form-card h2,.pb-form-card h1,.pb-hero-grid .pb-form-card h2{color:#101010!important;font-weight:700!important;font-family:'Quicksand',sans-serif;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2;margin-bottom:10px}
.pb-form-card h2 em,.pb-form-card h2 i{font-style:italic;font-weight:400}
.pb-form-card .sub,.pb-hero-grid .pb-form-card .sub{font-size:.97rem;color:#5a5a5a!important;line-height:1.62;margin-bottom:28px}
.pb-fld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.pb-fld label{font-family:'Quicksand',sans-serif;font-size:.85rem;font-weight:600;color:#333}
.pb-fld input,.pb-fld select{border:1.5px solid #e0e0e0;border-radius:10px;padding:12px 16px;font-size:.97rem;color:#101010;background:#fafafa;width:100%;box-sizing:border-box;outline:none;appearance:auto}
.pb-fld input:focus,.pb-fld select:focus{border-color:#FF0000;background:#fff}
.pb-cta{display:inline-flex;align-items:center;gap:12px;background:#101010;color:#fff;border:none;border-radius:100px;padding:15px 32px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:1rem;cursor:pointer;transition:background .22s,transform .22s;margin-top:8px}
.pb-cta:hover{background:#FF0000;transform:translateY(-2px)}
.pb-cta svg{width:18px;height:18px}
.pb-note{display:flex;align-items:center;gap:8px;font-size:.82rem;color:#9a9a9a!important;margin-top:14px;line-height:1.4}
.pb-note svg{width:16px!important;height:16px!important;max-width:16px!important;flex-shrink:0;color:#9a9a9a}

/* What's inside: TOC grid */
.pb-toc{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #e4e4e4;border-radius:12px;overflow:hidden;margin-top:8px;grid-column:1/-1}
.pb-chap{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;padding:22px 24px;border-bottom:1px solid #e4e4e4;border-right:1px solid #e4e4e4;background:#fff}
.pb-chap:nth-child(even){border-right:none}
.pb-chap:nth-last-child(-n+2){border-bottom:none}
.pb-chap-n,.sec .pb-chap-n{color:#FF0000!important;font-family:'Quicksand',sans-serif;font-weight:700!important;font-size:1.8rem;line-height:1}
.pb-chap-bd h3,.sec .pb-chap-bd h3{color:#101010!important;font-weight:700!important;font-size:1rem;margin-bottom:5px;display:block}
.pb-chap-bd,.sec .pb-chap-bd{font-size:.9rem;color:#5a5a5a!important}

/* Stats row */
.pb-stats{display:flex;gap:0;grid-column:1/-1;border:1px solid #e4e4e4;border-radius:12px;overflow:hidden;margin-top:24px}
.pb-stat{flex:1;padding:28px 24px;border-right:1px solid #e4e4e4;text-align:center}
.pb-stat:last-child{border-right:none}
.pb-stat-n,.sec .pb-stat-n{font-family:'Quicksand',sans-serif;font-weight:800!important;font-size:clamp(1.6rem,2.5vw,2.4rem);color:#101010!important;line-height:1;margin-bottom:6px;letter-spacing:-.03em}
.pb-stat-l,.sec .pb-stat-l{font-size:.84rem;color:#6a6a6a!important}

/* Section titles */
.sec-title,.sec .sec-title{font-family:'Quicksand',sans-serif;font-size:clamp(1.7rem,3vw,2.6rem);font-weight:700!important;line-height:1.12;letter-spacing:-.02em;color:#101010!important;margin-bottom:18px}

/* CTA section */
body .endcta h2,html body .endcta h2,section.endcta h2{color:#fff!important;font-weight:500!important}
body .endcta p,html body .endcta p{color:rgba(255,255,255,.75)!important}

/* Responsive */
@media(max-width:900px){
  .pb-hero-grid{grid-template-columns:1fr;min-height:auto}
  .pb-cover{padding:56px 28px;min-height:50vh}
  .pb-hero-grid>div:last-child{padding:40px 24px}
  .pb-toc{grid-template-columns:1fr}
  .pb-chap{border-right:none}
  .pb-stats{flex-wrap:wrap}
  .pb-stat{flex:0 0 50%}
  .pb-stat:nth-child(2){border-right:none}
  .pb-stat:nth-child(n+3){border-top:1px solid #e4e4e4}
}
@media(max-width:560px){
  .pb-stat{flex:0 0 100%;border-right:none;border-bottom:1px solid #e4e4e4}
  .pb-stat:last-child{border-bottom:none}
}

/* ===== FORM CARD BOX FIX ===== */
/* Proper card container for the form */
.pb-form-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid #e8e8ee !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06) !important;
  padding: 36px 36px 32px !important;
}

/* Fix the right column to properly center the card */
.pb-hero-grid > div:last-child {
  background: #f0f4fa !important;
  padding: clamp(40px,5vw,72px) clamp(28px,4vw,56px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fix input border-radius and appearance */
.pb-fld input,
.pb-fld select,
.pb-fld textarea {
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: .97rem !important;
  background: #fafafa !important;
  color: #101010 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color .2s, background .2s !important;
}

.pb-fld input:focus,
.pb-fld select:focus {
  border-color: #FF0000 !important;
  background: #ffffff !important;
}

/* Form heading inside card */
.pb-form-card h2,
.pb-form-card h1 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
  margin-bottom: 8px !important;
  line-height: 1.25 !important;
}

/* Subtitle inside card */
.pb-form-card .sub {
  margin-bottom: 24px !important;
  font-size: .94rem !important;
  line-height: 1.6 !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #eee !important;
}

/* Label spacing */
.pb-fld label {
  font-size: .82rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  color: #444 !important;
  margin-bottom: 0 !important;
}

/* Field spacing */
.pb-fld {
  margin-bottom: 14px !important;
  gap: 5px !important;
}

/* CTA button - full width inside card */
.pb-cta {
  width: 100% !important;
  justify-content: center !important;
  padding: 15px 24px !important;
  border-radius: 12px !important;
  font-size: 1rem !important;
  margin-top: 6px !important;
}

/* Privacy note */
.pb-note {
  margin-top: 10px !important;
  font-size: .8rem !important;
  color: #aaa !important;
  justify-content: center !important;
}

@media(max-width:900px){
  .pb-form-card {
    padding: 28px 22px 24px !important;
  }
  .pb-hero-grid > div:last-child {
    padding: 32px 20px !important;
  }
}



/* --- quote-cinematic --- */

.qt-chip.active {
  background: #0A0F1E !important;
  color: #ffffff !important;
  border-color: #0A0F1E !important;
}



/* ═══════════ polish.css ═══════════ */
/* ============================================================
   Aerosoft polish layer — additive, loaded last, reversible.
   Full-site world-class refinement: rhythm, motion, hierarchy,
   consistency. Propagates to every page via the shared design system.
   ============================================================ */
:root { --pl-ease: cubic-bezier(.22,.61,.36,1); --pl-red:#ED1C24; --pl-red-dk:#d1161e; }

*, *::before, *::after { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
::selection { background: var(--pl-red); color:#fff; }

/* --- Typography: balanced headings, refined tracking --- */
h1, .hero h1 { text-wrap: balance; letter-spacing: -0.015em; }
h2, .sec-title, .lead-h2 { text-wrap: balance; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
.crumb, [class*="eyebrow"], .sec .eyebrow { letter-spacing: .14em; }

/* --- Buttons: tactile, smooth, consistent motion --- */
.btn, .lets-talk, .nm-cta, .qt-chip, .btn-w-red, .hp-prev-cta {
  transition: transform .28s var(--pl-ease), box-shadow .28s var(--pl-ease),
              background-color .28s var(--pl-ease), color .28s var(--pl-ease),
              border-color .28s var(--pl-ease);
  will-change: transform;
}
.btn:hover, .btn-w-red:hover { transform: translateY(-2px); }
.btn:active, .lets-talk:active { transform: translateY(0); transition-duration: .06s; }
.btn-primary { box-shadow: 0 6px 22px rgba(237,28,36,.22); }
.btn-primary:hover { box-shadow: 0 14px 34px rgba(237,28,36,.32); }
.btn-outline:hover { background: rgba(237,28,36,.07); }


/* --- Hero CTA hierarchy: bold red primary + glass secondary --- */
html body .hero a.btn.btn-w {
  background: var(--pl-red) !important; color:#fff !important; border-color: var(--pl-red) !important;
  font-weight:700; box-shadow: 0 8px 26px rgba(237,28,36,.36);
}
html body .hero a.btn.btn-w:hover { background: var(--pl-red-dk) !important; border-color: var(--pl-red-dk) !important; box-shadow: 0 14px 38px rgba(237,28,36,.46); }
html body .hero a.btn.btn-w svg { stroke:#fff !important; }
html body .hero a.btn.btn-out-w {
  background: rgba(10,20,35,.34) !important; color:#fff !important;
  border-color: rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
html body .hero a.btn.btn-out-w:hover { background: rgba(10,20,35,.5) !important; border-color:#fff !important; }

/* --- Hero text legibility over video/imagery --- */
.hero h1, .hero p, .hero .crumb, .hero [class*="badge"], .hero .pill {
  text-shadow: 0 2px 26px rgba(4,8,16,.42), 0 1px 4px rgba(4,8,16,.32);
}

/* --- Forms: premium focus + tactile chips (conversion pages) --- */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
textarea, select { transition: border-color .2s var(--pl-ease), box-shadow .2s var(--pl-ease), background-color .2s; }
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):focus,
textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--pl-red) !important;
  box-shadow: 0 0 0 3px rgba(237,28,36,.14) !important;
}
.qt-chip { cursor: pointer; }
.qt-chip:hover { border-color: var(--pl-red) !important; color: var(--pl-red) !important; transform: translateY(-1px); }

/* --- Cards: premium hover lift --- */
.ncard, .geo-card, .why-card, .tcard, .recog-card, .tt-card, .svc-card, .qt-side {
  transition: transform .32s var(--pl-ease), box-shadow .32s var(--pl-ease);
}
.ncard:hover, .geo-card:hover, .why-card:hover, .tcard:hover,
.recog-card:hover, .tt-card:hover, .svc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 46px rgba(8,12,24,.16);
}

/* --- Nav: underline reveal on links --- */
nav a:not(.btn):not(.nm-cta), .util a:not(.btn) { position: relative; }
nav a:not(.btn):not(.nm-cta)::after {
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background: var(--pl-red); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--pl-ease);
}
nav a:not(.btn):not(.nm-cta):hover::after { transform: scaleX(1); }

/* --- Footer: link hover polish --- */
footer a { transition: color .2s var(--pl-ease), opacity .2s; }
footer a:hover { color:#fff !important; opacity:1 !important; }
footer [class*="social"] a:hover, footer .soc a:hover { color: var(--pl-red) !important; transform: translateY(-2px); }

/* --- Accessibility: visible, on-brand focus --- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--pl-red); outline-offset: 3px; border-radius: 6px;
}
.hero a:focus-visible, .black a:focus-visible { outline-color:#fff; }

/* --- Reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .lets-talk, .nm-cta, .qt-chip, .ncard, .geo-card, .why-card, .tcard,
  .recog-card, .tt-card, .svc-card, .btn-w-red { transition: none !important; }
  .btn:hover, .lets-talk:hover, .qt-chip:hover, .ncard:hover, .geo-card:hover,
  .why-card:hover, .tcard:hover, .recog-card:hover, .tt-card:hover, .svc-card:hover { transform: none !important; }
  nav a::after { transition: none; }
}

/* --- Nav: at laptop widths the locale label pushed Contact Us past the
   viewport edge (nav-in needs 1494px at 1440). The label is decorative;
   drop it before the bar can clip. --- */
@media (max-width: 1700px) {
  .nav-in .nav-locale, .nav-in .nav-div { display: none; }
}
/* Nav fits 1455px at full size; adding Case Studies pushed past 1440.
   These must out-specify the cinematic layer rule
   nav.nav .nlinks a { padding: 0 16px !important }
   hence the html body prefix and !important here too. */
@media (max-width: 1500px) {
  html body nav.nav .nlinks a { padding: 0 9px !important; }
  /* The bar carries a "Contact us" text link AND the Contact Us button in
     .nright - pure duplication. The text link yields first. */
  html body nav.nav .nlinks > a[href$="contact"] { display: none !important; }
}
/* Graduated steps down to the burger breakpoint (1000px). tcs-polish.css
   already scales this band, but its measurements predate the Case Studies
   item (+123px), and these selectors out-specify it - so they must stay at
   least as tight as the steps they override, not looser. */
@media (max-width: 1350px) {
  html body nav.nav .nlinks a,
  html body nav.nav .nlinks .nav-item > a { font-size: 13.5px !important; padding: 0 6px !important; }
}
@media (max-width: 1200px) {
  html body nav.nav .nlinks a,
  html body nav.nav .nlinks .nav-item > a { font-size: 13px !important; padding: 0 5px !important; }
}
/* Below ~1080 the desktop bar only fits at 11px type, which is worse than
   the burger it already has. cinematic.css swaps to the burger at 1000px;
   move that swap up 80px so the cramped 1001-1080 band never renders. */
@media (max-width: 1080px) {
  html body nav.nav .nlinks { display: none !important; }
  html body nav.nav .burger { display: flex !important; }
}
/* --- Quote page trust card: strong ran inline into its description
   ("48-hour proposalReal scope..."). Title sits on its own line. --- */
.qt-trust-item > div strong { display: block; margin-bottom: 3px; }

/* --- Contrast (WCAG AA): #ED1C24 on white is 3.9:1. Darken only text-bearing
   surfaces to #C4151C (5.1:1 with white); decorative accents keep brand red. --- */
.geo-num, .proc-n { color: #C4151C !important; }
#find-your-fit a:not(.btn), .sec a.tlink { color: #C4151C; }
html body .hero a.btn.btn-w,
.btn-primary { background: #C4151C !important; border-color: #C4151C !important; }
html body .hero a.btn.btn-w:hover,
.btn-primary:hover { background: #A81217 !important; border-color: #A81217 !important; }

/* ── Readability: text that measured below WCAG AA on live pages ──────────────
   Audited with a contrast walker over the rendered DOM, not by eye. Ratios in
   comments are the measured "before" values. */

/* .cs-eyebrow is authored white for dark case sections, but most case sections
   are light, where it rendered at ratio 1.00 - literally invisible. Default it
   to the readable brand red and restore white only on dark sections. */
html body .cs-section .cs-eyebrow,
html body .cs-related .cs-eyebrow {
  color: #C4151C !important;
  -webkit-text-fill-color: #C4151C !important;
  opacity: 1 !important;
}
html body .cs-section.dark .cs-eyebrow,
html body .cs-tech-band .cs-eyebrow,
html body .cs-hero .cs-eyebrow {
  color: rgba(255, 255, 255, .92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .92) !important;
}

/* The customer-stories carousel moved from a dark homepage band onto the light
   case-studies page, taking its white heading with it. */
html body .cs-hero ~ .sec .sec-title,
html body .sec .sec-title {
  color: #0d1117 !important;
  -webkit-text-fill-color: #0d1117 !important;
}
html body .sec .car-head p,
html body .sec .sec-title + p {
  color: #3a3a44 !important;
  opacity: 1 !important;
}

/* Light blue on white was unreadable (1.62). */
html body span.eyebrow,
html body span.eyebrow.lt {
  color: #C4151C !important;
  -webkit-text-fill-color: #C4151C !important;
}

/* Step numerals were drawn at 32-42% alpha as decoration, but they carry
   meaning (01, 02, 03), so they have to be legible. */
html body .geo-num,
html body .proc-n,
html body .scard-num {
  color: #C4151C !important;
  -webkit-text-fill-color: #C4151C !important;
  opacity: 1 !important;
}

/* #ED1C24 is 4.11:1 on white - just under AA. The darker brand red is 5.1:1. */
html body .sec .eyebrow,
html body .prose a,
html body table th,
html body .sec a:not(.btn):not(.lets-talk):not(.cs-related-card) {
  color: #C4151C;
}

/* Figure captions under product screenshots. */
html body figure figcaption {
  opacity: 1 !important;
  color: #4a4a57 !important;
}

/* ── Mobile layout, measured at 390x844 ──────────────────────────────────────
   Case heroes were missing the mobile type step the service heroes already
   have, so a 68-character headline set at 40px ran to five lines. */
@media (max-width: 860px) {
  /* Wide comparison tables scroll rather than pushing the page sideways. */
  html body .sec table,
  html body .prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px) {
  html body .cs-hero h1 {
    font-size: 34px !important;
    line-height: 1.1 !important;
  }
  html body .cs-hero .cs-hero-grid { gap: 26px; }
}

@media (max-width: 480px) {
  html body .cs-hero h1 {
    font-size: 27px !important;
    line-height: 1.14 !important;
    letter-spacing: -0.012em;
  }
  html body .cs-hero p {
    font-size: 1rem !important;
    line-height: 1.58 !important;
  }
  /* Clear the floating action button so no row hides behind it. */
  html body .cs-meta-card { margin-bottom: 68px; }
  html body .cs-meta-row { gap: 14px; }
  /* Stat numerals were sized for desktop columns. */
  html body .cs-stat-num { font-size: 2.35rem !important; }
}

@media (max-width: 560px) {
  /* A fixed-width child inside the find-your-fit band exceeded the viewport. */
  html body .sec.fyf-band > div { max-width: 100% !important; }
}

/* ── Wide comparison tables on phones ────────────────────────────────────────
   The tables set an inline min-width:600px, so the parent must do the
   scrolling; :has() keeps every other .rv reveal wrapper unaffected. */
@media (max-width: 860px) {
  html body .sec .rv:has(> table),
  html body .sec .wrap:has(> table),
  html body .prose:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }
  html body .sec table { display: table; }
}
/* Engines without :has(): cap the table instead of scrolling it. */
@supports not selector(:has(> table)) {
  @media (max-width: 860px) {
    html body .sec table {
      min-width: 0 !important;
      width: 100% !important;
      font-size: .82rem !important;
    }
    html body .sec table th,
    html body .sec table td { padding: 10px 8px !important; }
  }
}

/* ── Contrast pass 3 ─────────────────────────────────────────────────────────
   axe reads `color`, so every rule below sets colour AND fill. */

/* Dark bands keep light titles: pass one wrongly darkened these. */
html body section.sec.black .sec-title,
html body section.sec.dark .sec-title,
html body section#solutions .sec-title,
html body .sec.black .sec-title + p,
html body section#solutions .sec-title + p {
  color: rgba(255, 255, 255, .97) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .97) !important;
}

/* White on #ED1C24 is 4.38:1; the darker brand red carries white at ~6.7:1.
   The background is set inline, so !important is required to win. */
html body #find-your-fit a[style],
html body a[style*="#ED1C24"],
html body a[style*="rgb(237, 28, 36)"] {
  background: #C4151C !important;
  border-color: #C4151C !important;
}

/* This CTA sits outside .sec, so the earlier link rule never matched it. */
html body a.hp-prev-cta,
html body .hp-side a {
  color: #C4151C !important;
  -webkit-text-fill-color: #C4151C !important;
}

/* Eyebrow pills: the pale blue tint stayed on `color` even though the fill was
   corrected, so axe still saw light-blue-on-light-blue. Raised specificity. */
html body .wrap span.eyebrow,
html body .wrap .eyebrow,
html body .recog-top span.eyebrow,
html body .split span.eyebrow,
html body span.eyebrow[class],
html body span.eyebrow.lt[class] {
  color: #0B4C7C !important;
  -webkit-text-fill-color: #0B4C7C !important;
}

/* ...but not where the eyebrow sits on a dark hero or dark card. */
html body .hero span.eyebrow,
html body .hero .eyebrow,
html body .cs-hero .eyebrow,
html body section.sec.black .eyebrow,
html body .tcard .eyebrow,
html body .tcard-tag {
  color: rgba(255, 255, 255, .94) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .94) !important;
}

/* ── Contrast pass 4: scope by section, not globally ────────────────────────
   .hp-prev-cta and .eyebrow both appear in light AND dark bands, so the
   blanket colours from passes 1-3 fixed the light ones and broke the dark
   ones. The doubled class (.eyebrow.eyebrow) raises specificity legitimately
   without resorting to a longer ancestor chain. */
html body section.sec.hp-tech a.hp-prev-cta.hp-prev-cta,
html body section.sec.black a.hp-prev-cta.hp-prev-cta,
html body section.sec.dark a.hp-prev-cta.hp-prev-cta,
html body section.sec.hp-tech span.eyebrow.eyebrow,
html body section.sec.black span.eyebrow.eyebrow,
html body section.sec.dark span.eyebrow.eyebrow {
  color: rgba(255, 255, 255, .94) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .94) !important;
}
html body section.sec.recog span.eyebrow.eyebrow,
html body .wrap span.eyebrow.eyebrow {
  color: #0B4C7C !important;
  -webkit-text-fill-color: #0B4C7C !important;
}

/* ── Contrast pass 5: final, ID-level ───────────────────────────────────────
   Every earlier pass won on -webkit-text-fill-color but lost `color` to more
   specific rules (e.g. #recognition .eyebrow, specificity 1-1-0, beats any
   class chain). axe-core reads `color`, so the audit kept failing on text
   that painted correctly. These selectors carry an ID or a doubled class so
   they actually win, and dark bands are enumerated rather than assumed. */

/* Light bands */
html body section.sec.soft .eyebrow.eyebrow,
html body section.sec .eyebrow.eyebrow:not(.lt) {
  color: #C4151C !important;
  -webkit-text-fill-color: #C4151C !important;
}

/* Dark bands take a light eyebrow back */
html body #recognition .eyebrow.eyebrow,
html body #solutions .eyebrow.eyebrow,
html body #technologies-preview .eyebrow.eyebrow,
html body section.sec.black .eyebrow.eyebrow,
html body section.sec.hp-tech .eyebrow.eyebrow,
html body section.sec.recog .eyebrow.eyebrow {
  color: #DCEEFF !important;
  -webkit-text-fill-color: #DCEEFF !important;
  background: rgba(51, 153, 255, .26) !important;
}

/* The customer-stories heading, now on the light case-studies page */
html body #stories .sec-title.sec-title,
html body section#stories .sec-title.sec-title {
  color: #0d1117 !important;
  -webkit-text-fill-color: #0d1117 !important;
}
html body #stories .sec-title.sec-title + p,
html body section#stories .car-head p {
  color: #3a3a44 !important;
  -webkit-text-fill-color: #3a3a44 !important;
}