/* ================================================
   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:      #0b7abe;
  --primary-dark: #004999;
  --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: #0b7abe !important; text-decoration: none !important; }
a:hover { color: #004999 !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: #0b7abe !important;
  border-color: #0b7abe !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"]) { color: #0b7abe !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) { color: #0b7abe !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: #0b7abe !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: #0b7abe !important;
  color: #fff !important;
  border: 2px solid #0b7abe !important;
}
.btn-primary:hover { background: #004999 !important; border-color: #004999 !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 {
  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: #0b7abe !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 #0b7abe !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: #f0f6ff !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: #0066CC;
  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 #F0F6FF;
}
.cs-card ul li:last-child { border-bottom: none; }
.cs-card ul li::before {
  content: ',';
  position: absolute;
  left: 0;
  color: #0066CC;
  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 #0066CC;
  background: #F0F6FF;
  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: #0066CC;
}

/* 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(0, 102, 204, 0.12);
  border: 1px solid rgba(0,102,204,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(0,102,204,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: #0066CC;
  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(0,102,204,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: #0066CC;
}

/* 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: #0066CC !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 #0b7abe !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: #0b7abe !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 #0b7abe !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: #F0F6FF;
  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: #0066CC !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: #0066CC !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(0,102,204,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: #0b7abe !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: #0b7abe !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 #0b7abe !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: #0b7abe !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: #0b7abe !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: #0b7abe !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(0,102,204,0.15);
  border: 1px solid rgba(0,102,204,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 #0066CC !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: #0066CC !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 #0066CC !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 #0066CC;
  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: #F0F6FF;
  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: #0066CC !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: #0066CC;
  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: #0066CC !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: #0066cc !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: #eef3fb !important;
  border-color: #0066cc !important;
  color: #0066cc !important;
}
.rc-tab.active {
  background: #0066cc !important;
  border-color: #0066cc !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 10px rgba(0,102,204,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: #0066cc !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: #0066cc !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: #0066cc !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(0,102,204,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(0,102,204,.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, #0066CC, #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: #0066CC !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: #0066CC;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,102,204,.12);
}
.fyf-opt.selected {
  background: #e8f0fe;
  border-color: #0066CC;
  box-shadow: 0 0 0 3px rgba(0,102,204,.15);
}
.fyf-opt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(0,102,204,.1);
  flex-shrink: 0;
  transition: background .18s;
}
.fyf-opt:hover .fyf-opt-icon,
.fyf-opt.selected .fyf-opt-icon { background: rgba(0,102,204,.18); }
.fyf-opt-icon svg { width: 18px !important; height: 18px !important; color: #0066CC; 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: #0066CC; }
.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: #0066CC; border-color: #0066CC; background: #f0f6ff; }
.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, #0066CC, #0052a3);
  border: none;
  border-radius: 100px;
  padding: 12px 28px;
  cursor: pointer;
  transition: all .22s;
  box-shadow: 0 6px 18px rgba(0,102,204,.32);
}
.fyf-nav .next:not(:disabled):hover {
  background: linear-gradient(135deg, #0052a3, #003d7a);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,102,204,.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: #0066CC !important;
  background: rgba(0,102,204,.08);
  border: 1px solid rgba(0,102,204,.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: #0066CC; 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: #0066CC; }
.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: #0066CC; }

@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(10,132,255,0.10), rgba(10,132,255,0.06));
  border: 1px solid rgba(10,132,255,0.22);
  color: #0A84FF;
  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, #0A84FF, #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, #0A84FF, #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: #0A84FF;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(10,132,255,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: #0A84FF;
  color: #0A84FF;
  background: rgba(10,132,255,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, #0A84FF 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(10,132,255,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(10,132,255,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(10,132,255,0.06);
  border-color: rgba(10,132,255,0.18);
  transform: translateX(3px);
}

.qt-trust-item svg {
  color: #0A84FF;
  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: #0A84FF;
  background: rgba(10,132,255,0.07);
}

.qt-contact a svg {
  color: #0A84FF;
  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 #0066cc !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) ---- */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---- 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 #0066cc 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) ---- */

@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300;400;500;600&family=Inter:wght@400;500&display=swap');

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;} }