/* ==========================================================================
   FINTRIX TECHNOLOGY — 100% ASTRIX INC PIXEL-PERFECT DESIGN SYSTEM
   Exact replication of www.astrixinc.com layout, typography, colors & sections
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --astrix-cyan-bg: #0090c4;
  --astrix-cyan-gradient: linear-gradient(135deg, #0077b6, #0096c7, #00b4d8);
  --astrix-cyan-btn: #0099cc;
  --astrix-cyan-btn-hover: #0080b3;
  --astrix-beige-bg: #f4f0ea;
  --astrix-orange-banner: linear-gradient(90deg, #f7931e, #f15a24);
  --astrix-orange-accent: #f58220;
  --astrix-purple-icon: #3b40be;
  --astrix-purple-light: #f0f2fe;
  --astrix-gold-link: #f7931e;
  --astrix-dark: #333333;
  --astrix-black: #000000;
  --astrix-gray: #666666;
  --astrix-border: #e0e0e0;
  
  --font-main: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Inter', sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  color: var(--astrix-dark);
  background-color: #ffffff;
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* HEADER */
.astrix-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--astrix-border);
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 85px;
}

/* BRAND LOGO — SVG wordmark (assets/fintrix-logo.svg; white variant in the footer) */
.astrix-brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.brand-logo {
  display: block;
  height: 54px;
  width: auto;
}

.astrix-footer-black .brand-logo {
  height: 64px;
}

.astrix-nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.astrix-nav-item {
  position: relative;
}

.astrix-nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: #333333 !important;
  padding: 1.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease;
}

.astrix-nav-link:hover, .astrix-nav-item:hover .astrix-nav-link {
  color: var(--astrix-cyan-btn) !important;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.astrix-btn-cyan {
  background-color: var(--astrix-cyan-btn) !important;
  color: #ffffff !important;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.astrix-btn-cyan:hover {
  background-color: var(--astrix-cyan-btn-hover) !important;
}

.astrix-search-bar {
  display: flex;
  align-items: center;
  background-color: #f4f4f4;
  border: 1px solid #e0e0e0;
  border-radius: 50px;
  padding: 0.4rem 0.9rem;
  width: 170px;
}

.astrix-search-bar input {
  border: none;
  background: transparent;
  font-size: 0.85rem;
  color: #333;
  width: 100%;
  outline: none;
}

.astrix-search-bar svg {
  color: #888;
  flex-shrink: 0;
}

.astrix-mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 600px;
  background: #ffffff !important;
  border: 1px solid var(--astrix-border);
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  z-index: 1100;
}

.astrix-nav-item:hover .astrix-mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-link {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.75rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.mega-menu-link:hover {
  background: var(--astrix-purple-light);
}

.mega-menu-icon {
  width: 36px;
  height: 36px;
  background: #ffffff;
  border: 1px solid var(--astrix-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--astrix-purple-icon);
  flex-shrink: 0;
}

.mega-menu-text h5 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--astrix-dark);
  margin-bottom: 0.2rem;
}

.mega-menu-text p {
  font-size: 0.8rem;
  color: var(--astrix-gray);
  line-height: 1.35;
}

/* ==========================================================================
   ASTRIX HERO BANNER & SLIDESHOW (PERFECT HEAD CLEARANCE & TRUE BOTTOM FLUSH)
   ========================================================================== */

.astrix-hero-banner {
  background: linear-gradient(135deg, #0088c6 0%, #00b4d8 100%) !important;
  color: #ffffff !important;
  position: relative;
  overflow: hidden;
  height: 540px; /* Generous height for full head clearance */
  transition: background 0.6s ease-in-out;
}

/* Distinctive Blue Gradient Themes matching Astrix Inc */
.hero-gradient-1 {
  background: linear-gradient(135deg, #0088c6 0%, #00b4d8 100%) !important;
}

.hero-gradient-2 {
  background: linear-gradient(135deg, #00509d 0%, #0088c6 100%) !important;
}

.hero-gradient-3 {
  background: linear-gradient(135deg, #003566 0%, #0077b6 100%) !important;
}

.hero-bg-solutions {
  background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%) !important;
}

/* AuditCore — warm orange, the one non-blue hero (Astrix uses the same accent) */
.hero-bg-audit {
  background: linear-gradient(135deg, #f5a623 0%, #ea5a1f 100%) !important;
}

.hero-bg-tax {
  background: linear-gradient(135deg, #03045e 0%, #0077b6 100%) !important;
}

/* Insights — brand indigo/violet, so it reads apart from the teal advisory hero */
.hero-bg-insights {
  background: linear-gradient(135deg, #2f3391 0%, #7b5ee0 100%) !important;
}

/* About — the most saturated hero on the site */
.hero-bg-about {
  background: linear-gradient(135deg, #1e3fd8 0%, #00a8f0 55%, #00dcc0 100%) !important;
}

.hero-bg-contact {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%) !important;
}

.hero-bg-advisory {
  background: linear-gradient(135deg, #065a60 0%, #0a9396 100%) !important;
}

.hero-bg-ledgercore {
  background: linear-gradient(135deg, #1b2845 0%, #274690 100%) !important;
}

/* Dot Wave Effect Overlay */
.dot-wave-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
}

.dot-wave-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-slideshow {
  position: relative;
  z-index: 2;
  height: 100%;
}

/* Swipeable carousel: let the browser own vertical scrolling, we take the
   horizontal axis */
.astrix-hero-banner {
  touch-action: pan-y;
  outline: none;
}

.astrix-hero-banner.is-swiping,
.astrix-hero-banner.is-swiping * {
  cursor: grabbing;
  user-select: none;
}

.astrix-hero-banner.is-swiping .hero-visual-people img {
  pointer-events: none;
}

.hero-slide {
  display: none !important;
  height: 100%;
}

.hero-slide.active {
  display: block !important;
  animation: slideFadeIn 0.5s ease forwards;
}

@keyframes slideFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-banner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: flex-end; /* Aligns cutout images flush to bottom of banner */
  height: 100%;
}

.hero-banner-content {
  align-self: center;
  padding-bottom: 2rem;
  padding-top: 2rem;
}

.hero-banner-content h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 3.8vw, 3.2rem);
  font-weight: 700;
  color: #ffffff !important;
  line-height: 1.18;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.hero-banner-desc {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.95) !important;
  margin-bottom: 2rem;
  line-height: 1.6;
  max-width: 560px;
}

.astrix-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: #00aedb !important;
  color: #ffffff !important;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.8rem 1.8rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.astrix-hero-btn:hover {
  background-color: #0088b3 !important;
  transform: translateY(-2px);
}

/* Laptop Slide Visual */
.hero-visual-laptop {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  justify-self: end;
  align-self: center;
}

.hero-visual-laptop img {
  width: 100%;
  height: auto;
  display: block;
}

/* Cutout People Visual (100% FLUSH TO BOTTOM BORDER, ZERO HEAD CLIPPING) */
.hero-visual-people {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;
  height: 100%;
  min-width: 0; /* a wide cutout must not widen its grid column */
  overflow: visible !important; /* NO HEAD CLIPPING! */
}

/* Cutouts are trimmed to the people, so a fixed height gives every banner the
   same scale. Wide group shots that hit the column width shrink inside the box
   and stay anchored to its bottom-right corner. */
.hero-visual-people img {
  height: 490px;
  width: auto;
  max-width: 100%;
  object-position: right bottom;
  display: block;
  vertical-align: bottom;
  margin-bottom: 0 !important; /* Touch absolute bottom border directly! */
  object-fit: contain;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.2));
}

/* Carousel Dots floating absolutely over bottom-center */
.carousel-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  z-index: 20;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.25s ease;
}

.carousel-dot.active {
  background-color: #ffffff;
  transform: scale(1.25);
}

/* OUR SERVICES (WARM BEIGE) */
.astrix-section-services {
  background-color: var(--astrix-beige-bg) !important;
  padding: 6rem 0;
}

.services-head {
  text-align: center;
  margin-bottom: 4rem;
}

.services-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--astrix-dark);
  margin-bottom: 1rem;
}

.services-head p {
  font-size: 1.1rem;
  color: var(--astrix-gray);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}

.services-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
}

.astrix-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Push "Learn More" to a common baseline across all cards in a row */
.astrix-card p {
  flex-grow: 1;
}

.astrix-card-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 1.5rem;
  color: var(--astrix-purple-icon);
  display: flex;
  align-items: center;
  justify-content: center;
}

.astrix-card-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.4;
}

.astrix-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--astrix-dark);
  margin-bottom: 1rem;
}

.astrix-card p {
  font-size: 0.95rem;
  color: var(--astrix-gray);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.astrix-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--astrix-purple-icon);
  transition: gap 0.2s ease;
}

.astrix-card:hover .astrix-card-link {
  gap: 0.65rem;
}

/* NESTED TABS */
.astrix-tabs-section {
  padding: 6rem 0;
  background-color: #ffffff !important;
}

.mega-tabs-container {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--astrix-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  overflow: hidden;
  display: grid;
  grid-template-columns: 360px 1fr;
}

.tabs-heading-sidebar {
  background: #ffffff;
  border-right: 1px solid var(--astrix-border);
  display: flex;
  flex-direction: column;
}

.tab-title-item {
  padding: 22px 36px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #666666;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.tab-title-item:hover {
  color: var(--astrix-purple-icon);
}

.tab-title-item.active {
  color: var(--astrix-purple-icon);
  font-weight: 700;
  background: var(--astrix-purple-light);
}

.tab-title-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 36px;
  background-color: var(--astrix-purple-icon);
  border-radius: 0 4px 4px 0;
}

.tabs-content-body {
  padding: 3.5rem 4rem;
  display: flex;
  align-items: center;
}

.tab-panel-box {
  display: none;
  animation: fadeIn 0.35s ease;
}

.tab-panel-box.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.tab-panel-grid h3 {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--astrix-dark);
  margin-bottom: 1rem;
}

.tab-panel-grid p {
  font-size: 1.05rem;
  color: var(--astrix-gray);
  margin-bottom: 1.75rem;
  line-height: 1.65;
}

/* Section artwork sits at a comfortable size instead of filling the whole
   column — the inline width:100% still applies below this cap */
.tab-panel-grid img {
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Real product screenshots are wide and full of small text — let them use the
   whole column instead of the square-artwork cap */
.tab-panel-grid img.app-shot,
.sol-block-media img.app-shot {
  max-width: 100%;
  border: 1px solid var(--astrix-border);
}

/* ==========================================================================
   CUSTOMER CASE STUDIES — results-led layout (deliberately distinct from the
   3-up whitepaper card grid on the same page)
   ========================================================================== */

.astrix-case-section {
  padding: 6rem 0;
  background-color: #ffffff !important;
}

.case-section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--astrix-border);
}

.case-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--astrix-cyan-btn);
  margin-bottom: 0.75rem;
}

.case-section-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--astrix-dark);
  line-height: 1.15;
}

.case-section-head p {
  font-size: 1.05rem;
  color: var(--astrix-gray);
  line-height: 1.65;
}

/* Featured case study — dark banner with the brand halftone dot texture */
.case-featured {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
  background: linear-gradient(135deg, #03045e 0%, #0077b6 100%);
  border-radius: 16px;
  padding: 3.5rem;
  color: #ffffff;
  margin-bottom: 2rem;
}

.case-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(circle at 88% 12%, #000 0%, transparent 62%);
  mask-image: radial-gradient(circle at 88% 12%, #000 0%, transparent 62%);
  pointer-events: none;
}

.case-featured-body,
.case-metrics {
  position: relative;
  z-index: 1;
}

.case-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  margin-bottom: 1.25rem;
}

.case-featured h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.case-featured p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 46ch;
}

.case-featured-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff !important;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--astrix-orange-accent);
  transition: gap 0.2s ease;
}

.case-featured-link:hover {
  gap: 0.85rem;
}

.case-metrics {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.case-metric {
  padding-left: 1.5rem;
  border-left: 3px solid var(--astrix-orange-accent);
}

.case-metric b {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
}

.case-metric span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Supporting case studies — horizontal rows, metric first */
.case-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.case-row {
  display: grid;
  grid-template-columns: 220px 1fr 48px;
  gap: 2.5rem;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--astrix-border);
  border-radius: 12px;
  padding: 2rem 2.25rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.case-row:hover {
  border-color: var(--astrix-cyan-btn);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

.case-row-metric {
  text-align: center;
  padding-right: 2.5rem;
  border-right: 1px solid var(--astrix-border);
}

.case-row-metric b {
  font-family: var(--font-heading);
  font-size: 2.35rem;
  font-weight: 800;
  color: var(--astrix-cyan-btn);
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
  white-space: nowrap;
}

.case-row-metric span {
  font-size: 0.85rem;
  color: var(--astrix-gray);
}

.case-tag-sm {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--astrix-purple-icon);
  margin-bottom: 0.5rem;
}

.case-row-body h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--astrix-dark);
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

.case-row-body p {
  font-size: 0.95rem;
  color: var(--astrix-gray);
  line-height: 1.6;
}

.case-row-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--astrix-purple-light);
  color: var(--astrix-purple-icon);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.case-row:hover .case-row-arrow {
  background: var(--astrix-cyan-btn);
  color: #ffffff;
}

/* ==========================================================================
   SOLUTIONS PAGE — module overview, alternating deep dives, comparison table
   ========================================================================== */

.sol-modules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.sol-module-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: #ffffff;
  border: 1px solid var(--astrix-border);
  border-radius: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sol-module-card:hover {
  transform: translateY(-4px);
  border-color: var(--astrix-cyan-btn);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}

.sol-module-num {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--astrix-cyan-btn);
  margin-bottom: 1.25rem;
}

.sol-module-card.is-consulting .sol-module-num {
  color: var(--astrix-orange-accent);
}

.sol-module-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--astrix-purple-light);
  color: var(--astrix-purple-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.sol-module-icon svg {
  width: 22px;
  height: 22px;
}

/* Product marks (from the AuditCore/TaxCore apps) sit on their app's soft accent */
.sol-module-icon img {
  width: 32px;
  height: 32px;
}

.sol-module-icon.is-auditcore {
  background: #e2ebfc;
}

.sol-module-icon.is-taxcore {
  background: #ede9fe;
}

.sol-module-icon.is-ledgercore {
  background: #fbece5;
}

.sol-module-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--astrix-dark);
  margin-bottom: 0.5rem;
}

.sol-module-card p {
  font-size: 0.92rem;
  color: var(--astrix-gray);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 1.25rem;
}

.sol-module-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--astrix-purple-icon);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.2s ease;
}

.sol-module-card:hover .sol-module-link {
  gap: 0.6rem;
}

/* Deep-dive blocks — media side alternates down the page */
.sol-block {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 4rem;
  align-items: center;
  padding: 4rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.sol-block:first-of-type {
  border-top: none;
  padding-top: 0;
}

.sol-block:last-of-type {
  padding-bottom: 0;
}

.sol-block:nth-of-type(even) .sol-block-media {
  order: -1;
}

.sol-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--astrix-purple-icon);
  background: var(--astrix-purple-light);
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  margin-bottom: 1rem;
}

.sol-eyebrow.is-consulting {
  color: #b45309;
  background: #fdf1e0;
}

.sol-eyebrow.is-onDark {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.sol-block h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  font-weight: 700;
  color: var(--astrix-dark);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.sol-block > div > p {
  font-size: 1.02rem;
  color: var(--astrix-gray);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.sol-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.75rem;
}

.sol-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--astrix-gray);
  line-height: 1.5;
}

.sol-features li b {
  color: var(--astrix-dark);
  font-weight: 700;
}

.sol-features svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--astrix-cyan-btn);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sol-metrics {
  display: flex;
  gap: 2.5rem;
  margin-bottom: 1.75rem;
}

.sol-metric b {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--astrix-cyan-btn);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.sol-metric span {
  font-size: 0.82rem;
  color: var(--astrix-gray);
}

/* Advisory's four-step approach, in place of metrics */
.sol-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.9rem;
  margin-bottom: 1.75rem;
}

.sol-steps span {
  position: relative;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--astrix-dark);
  background: #ffffff;
  border: 1px solid var(--astrix-border);
  padding: 0.45rem 0.9rem;
  border-radius: 50px;
}

/* the arrow sits in the gap between pills, not inside them */
.sol-steps span:not(:last-child)::after {
  content: "→";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.6rem;
  color: var(--astrix-gray);
}

.sol-block-media img,
.sol-block-media .sol-media-video {
  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.13);
}

.sol-block-media .sol-media-video {
  background: #0b1220; /* avoids a white flash before the first frame paints */
}

/* Comparison table */
.sol-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--astrix-border);
  border-radius: 14px;
  background: #ffffff;
}

.sol-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.sol-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--astrix-gray);
  background: #faf9f7;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--astrix-border);
}

.sol-table td {
  padding: 1.35rem 1.5rem;
  font-size: 0.95rem;
  color: var(--astrix-gray);
  line-height: 1.55;
  vertical-align: top;
  border-bottom: 1px solid #f1f1f1;
}

.sol-table tbody tr:last-child td {
  border-bottom: none;
}

.sol-table td:first-child {
  font-weight: 700;
  color: var(--astrix-dark);
  white-space: nowrap;
}

.sol-table tbody tr:hover {
  background: #fcfbfa;
}

/* Security band */
.sol-security {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0;
  background: linear-gradient(135deg, #03045e 0%, #0077b6 100%);
  color: #ffffff;
}

.sol-security::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(circle at 15% 15%, #000 0%, transparent 58%);
  mask-image: radial-gradient(circle at 15% 15%, #000 0%, transparent 58%);
  pointer-events: none;
}

.sol-security-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 4rem;
  align-items: center;
}

.sol-security h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.sol-security p {
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  max-width: 52ch;
}

.sol-security-stats {
  display: flex;
  gap: 2.75rem;
  margin-top: 2rem;
}

.sol-security-stats b {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.35rem;
}

.sol-security-stats span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
}

.sol-security-media img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
}

/* ORANGE WEBINARS BANNER */
.astrix-webinars-banner {
  background: var(--astrix-orange-banner) !important;
  color: #ffffff !important;
  padding: 4.5rem 0;
}

.webinars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.webinars-content h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  font-weight: 700;
  color: #ffffff !important;
  margin-bottom: 1rem;
}

.webinars-content p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.6;
}

.webinar-card-box {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 1.75rem;
  margin-bottom: 1.25rem;
  color: #ffffff;
}

.webinar-card-box span {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(0,0,0,0.25);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
}

.webinar-card-box h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0.75rem 0 0.5rem 0;
}

.webinar-card-box a {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: underline;
}

/* STATS BAR */
.astrix-stats-bar {
  background-color: #ffffff !important;
  border-top: 1px solid var(--astrix-border);
  border-bottom: 1px solid var(--astrix-border);
  padding: 3.5rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.stat-box b {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  color: var(--astrix-cyan-btn);
  display: block;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-box span {
  font-size: 0.95rem;
  color: var(--astrix-gray);
  font-weight: 500;
}

/* BLACK FOOTER */
.astrix-footer-black {
  background-color: var(--astrix-black) !important;
  color: #ffffff !important;
  padding: 5rem 0 2.5rem 0;
  font-size: 0.9rem;
}

.footer-black-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 4rem;
}

.footer-gold-links {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.footer-gold-links a {
  color: var(--astrix-gold-link) !important;
  font-size: 1.05rem;
  font-weight: 600;
}

.footer-bottom-row {
  border-top: 1px solid #222222;
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #888888;
  font-size: 0.85rem;
}

.social-icons-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.social-icons-row a {
  color: #ffffff !important;
}

/* CONTACT DETAILS */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #ffffff;
  border: 1px solid var(--astrix-border);
  padding: 1.5rem;
  border-radius: 10px;
}

.contact-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--astrix-purple-light);
  color: var(--astrix-purple-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-card-icon svg {
  width: 20px;
  height: 20px;
}

.contact-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--astrix-dark);
  margin-bottom: 0.35rem;
}

.contact-card p {
  color: var(--astrix-gray);
  font-size: 0.9rem;
  line-height: 1.6;
}

.contact-card a {
  color: var(--astrix-cyan-btn);
  font-weight: 600;
}

.contact-card a:hover {
  text-decoration: underline;
}

/* MODAL */
.astrix-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.astrix-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.astrix-modal-box {
  background: #ffffff;
  border-radius: 12px;
  width: 100%;
  max-width: 540px;
  padding: 2.5rem;
  position: relative;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--astrix-dark);
  margin-bottom: 0.4rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  font-family: inherit; /* textarea/select default to monospace otherwise */
  color: var(--astrix-dark);
  border: 1px solid var(--astrix-border);
  border-radius: 6px;
  background-color: #fafafa;
}

.form-control:focus {
  outline: none;
  border-color: var(--astrix-cyan-btn);
  box-shadow: 0 0 0 3px rgba(0, 153, 204, 0.15);
}

/* Contact forms — inline validation and send status (see initContactForms) */
.form-control[aria-invalid="true"] {
  border-color: #d93025;
  background-color: #fffafa;
}

.form-control[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.15);
}

/* .form-group prefix outranks section rules like `.tab-panel-grid p` */
.form-group .field-error {
  margin-top: 0.4rem;
  font-size: 0.8125rem !important;
  line-height: 1.4;
  color: #c5221f;
}

textarea.form-control {
  display: block; /* inline-block leaves a baseline gap above the error line */
}

.form-honeypot {
  display: none !important;
}

form[data-contact-form] button[disabled] {
  opacity: 0.7;
  cursor: progress;
}

.form-status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem !important;
  line-height: 1.5;
}

.form-status.is-success {
  background: #e8f5ee;
  color: #17663a;
}

.form-status.is-error {
  background: #fdecea;
  color: #b3261e;
}

.form-status a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
}

.container {
  width: 100% !important;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem !important;
  box-sizing: border-box !important;
}

.astrix-header {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

.header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   MOTION — scroll reveal, interactive hero dot field, hover polish
   ========================================================================== */

/* Individual hero dots. js/main.js writes a 0–1 wave strength into --lit for
   every dot inside the ripple around the pointer, so a wake of swelling dots
   follows the cursor across the field. The short transition keeps the trailing
   edge soft as dots drop out of range. */
.dot-wave-bg circle.hd {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s ease-out, fill 0.35s ease-out, filter 0.35s ease-out;
}

.dot-wave-bg circle.hd.is-lit {
  fill: rgba(255, 255, 255, calc(0.12 + var(--lit, 0) * 0.8));
  filter: drop-shadow(0 0 calc(var(--lit, 0) * 5px) rgba(255, 255, 255, 0.55));
  transform: scale(calc(1 + var(--lit, 0) * 2.1));
  transition: transform 0.12s linear, fill 0.12s linear, filter 0.12s linear;
}

/* Applied by js/main.js, so content is never hidden without scripting */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hover polish — everything that can move, moves a little */
.astrix-card {
  transition: transform 0.28s ease;
}

.astrix-card:hover {
  transform: translateY(-5px);
}

.astrix-card-icon {
  transition: transform 0.28s ease, color 0.2s ease;
}

.astrix-card:hover .astrix-card-icon {
  transform: scale(1.07);
}

.astrix-btn-cyan {
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.astrix-btn-cyan:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 153, 204, 0.28);
}

.stat-box {
  transition: transform 0.28s ease;
}

.stat-box:hover {
  transform: translateY(-3px);
}

.stat-box b {
  transition: color 0.2s ease;
  display: inline-block;
}

.webinar-card-box {
  transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease;
}

.webinar-card-box:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
}

.footer-gold-links a {
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.footer-gold-links a:hover {
  color: #ffb703 !important;
  transform: translateX(4px);
}

.footer-bottom-row a {
  transition: color 0.2s ease;
}

.footer-bottom-row a:hover {
  color: #ffffff !important;
}

.social-icons-row a {
  display: inline-flex;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.85;
}

.social-icons-row a:hover {
  transform: translateY(-3px);
  opacity: 1;
}

.contact-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.contact-card:hover {
  border-color: var(--astrix-cyan-btn);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.contact-card-icon {
  transition: background 0.2s ease, color 0.2s ease;
}

.contact-card:hover .contact-card-icon {
  background: var(--astrix-cyan-btn);
  color: #ffffff;
}

.mega-menu-icon {
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.mega-menu-link:hover .mega-menu-icon {
  border-color: var(--astrix-purple-icon);
  transform: scale(1.06);
}

.sol-block-media img,
.sol-block-media .sol-media-video,
.tab-panel-grid img {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sol-block-media img:hover,
.sol-block-media .sol-media-video:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.18);
}

.sol-table tbody tr {
  transition: background 0.2s ease;
}

.sol-steps span {
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.sol-steps span:hover {
  border-color: var(--astrix-cyan-btn);
  transform: translateY(-2px);
}

.form-control {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.astrix-search-bar {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.astrix-search-bar:focus-within {
  border-color: var(--astrix-cyan-btn);
  background-color: #ffffff;
}

/* Respect the system setting — no reveals, no drifting, no hover travel */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   MOBILE NAVIGATION (hamburger + slide-in drawer, Astrix style)
   Markup is injected by js/main.js so every page picks it up automatically.
   ========================================================================== */

.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--astrix-border);
  border-radius: 8px;
  color: #222222;
  cursor: pointer;
  flex-shrink: 0;
}

.mobile-nav-toggle svg {
  width: 22px;
  height: 22px;
}

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 1400;
}

.mobile-nav-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 88vw);
  background: #ffffff;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-nav-panel.open {
  transform: translateX(0);
}

body.mobile-nav-open {
  overflow: hidden;
}

.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--astrix-border);
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 2;
}

.mobile-nav-close {
  width: 38px;
  height: 38px;
  border: none;
  background: #f4f4f4;
  border-radius: 50%;
  font-size: 1.35rem;
  line-height: 1;
  color: #333;
  cursor: pointer;
}

.mobile-nav-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 1.25rem 0.5rem 1.25rem;
  background-color: #f4f4f4;
  border: 1px solid #e0e0e0;
  border-radius: 50px;
  padding: 0.6rem 1rem;
}

.mobile-nav-search input {
  border: none;
  background: transparent;
  font-size: 0.9rem;
  color: #333;
  width: 100%;
  outline: none;
  font-family: inherit;
}

.mobile-nav-search svg {
  color: #888;
  flex-shrink: 0;
}

.mobile-nav-list {
  padding: 0.5rem 0 1rem 0;
}

.mobile-nav-group {
  border-bottom: 1px solid #f0f0f0;
}

.mobile-nav-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: #222222;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.mobile-nav-group-head svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--astrix-gray);
}

.mobile-nav-group.open .mobile-nav-group-head {
  color: var(--astrix-cyan-btn);
}

.mobile-nav-group.open .mobile-nav-group-head svg {
  transform: rotate(180deg);
}

.mobile-nav-sub {
  display: none;
  padding: 0 1.25rem 0.75rem 1.25rem;
}

.mobile-nav-group.open .mobile-nav-sub {
  display: block;
}

.mobile-nav-sub a {
  display: block;
  padding: 0.6rem 0.9rem;
  font-size: 0.92rem;
  color: var(--astrix-gray);
  border-radius: 8px;
}

.mobile-nav-sub a:hover,
.mobile-nav-sub a:active {
  background: var(--astrix-purple-light);
  color: var(--astrix-purple-icon);
}

.mobile-nav-sub a.mobile-nav-overview {
  font-weight: 600;
  color: var(--astrix-purple-icon);
}

.mobile-nav-cta {
  padding: 0.5rem 1.25rem 2rem 1.25rem;
}

.mobile-nav-cta .astrix-btn-cyan {
  width: 100%;
  padding: 0.85rem 1.5rem;
  font-size: 0.95rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {
  .astrix-nav {
    display: none !important;
  }
  .astrix-search-bar {
    display: none !important;
  }
  .mobile-nav-toggle {
    display: inline-flex;
  }
  .header-inner {
    height: 65px !important;
  }
  .brand-logo {
    height: 42px;
  }
  .tab-panel-grid, .hero-banner-grid, .webinars-grid, .mega-tabs-container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  /* Stacked tabs: no gap between the title list and the panel below it */
  .mega-tabs-container {
    gap: 0 !important;
  }
  .tabs-heading-sidebar {
    border-right: none !important;
    border-bottom: 1px solid var(--astrix-border);
  }

  /* Hero: let the banner grow with its stacked content instead of clipping it */
  .astrix-hero-banner {
    height: auto !important;
    min-height: auto !important;
    padding: 2.5rem 0 0 0 !important;
  }
  .hero-slideshow,
  .hero-slide,
  .hero-banner-grid {
    height: auto !important;
  }
  .hero-banner-grid {
    gap: 1.5rem !important;
    align-items: stretch !important;
  }
  .hero-banner-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .hero-visual-people {
    justify-content: center !important;
    align-items: flex-end !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 0.5rem !important;
  }
  /* Fixed height keeps every slide the same size so the page doesn't jump
     while the carousel rotates. margin-bottom:0 + block display let the cutout
     stand on the bottom edge of the band instead of floating above it. */
  .hero-visual-people img {
    height: 380px !important;
    max-height: 380px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin-bottom: 0 !important;
    /* Once max-width clamps a wide cutout, object-fit letterboxes it inside the
       380px box and the figure floats. Anchor the picture to the box's bottom
       so it keeps standing on the edge of the band at every width. */
    object-position: center bottom !important;
  }
  /* Dots stay overlaid on the lower edge of the cutout — putting them in flow
     below it is what pushed the figure off the bottom of the banner. */
  .carousel-dots {
    bottom: 0.85rem;
  }

  .services-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-black-inner {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  .footer-bottom-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
  }
  .header-actions {
    gap: 0.5rem !important;
  }
  .astrix-btn-cyan {
    padding: 0.45rem 0.9rem !important;
    font-size: 0.8rem !important;
  }
  .mobile-nav-cta .astrix-btn-cyan {
    padding: 0.85rem 1.5rem !important;
    font-size: 0.95rem !important;
  }
  .tabs-content-body {
    padding: 2rem 1.5rem !important;
  }
  .tab-title-item {
    padding: 16px 22px !important;
    font-size: 0.98rem !important;
  }
  .astrix-section-services,
  .astrix-tabs-section,
  .astrix-case-section {
    padding: 4rem 0 !important;
  }

  /* Case studies stack */
  .case-section-head {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    align-items: start !important;
  }
  .case-featured {
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
    padding: 2.5rem !important;
  }
  .case-metrics {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem !important;
  }
  .case-metric b {
    font-size: 2.2rem;
  }
  .case-row {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding: 1.75rem !important;
  }
  .case-row-metric {
    text-align: left !important;
    padding-right: 0 !important;
    padding-bottom: 1.25rem;
    border-right: none !important;
    border-bottom: 1px solid var(--astrix-border);
  }
  .case-row-arrow {
    display: none !important;
  }

  /* Solutions page stacks */
  .sol-modules {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .sol-block,
  .sol-security-grid {
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
  }
  .sol-block {
    padding: 3rem 0 !important;
  }
  /* keep the copy above the artwork once stacked */
  .sol-block:nth-of-type(even) .sol-block-media {
    order: 0 !important;
  }
  .sol-security {
    padding: 4rem 0 !important;
  }
  .sol-security-stats,
  .sol-metrics {
    flex-wrap: wrap;
    gap: 1.5rem 2rem !important;
  }
}

@media (max-width: 768px) {
  .services-cards-grid, .stats-grid, .footer-links-col {
    grid-template-columns: 1fr !important;
  }
  .astrix-hero-title, h1 {
    font-size: 1.8rem !important;
    line-height: 1.25 !important;
  }
  p {
    font-size: 0.95rem !important;
  }
  .container {
    padding: 0 1rem !important;
  }
  .services-cards-grid {
    gap: 2.5rem 1.5rem !important;
  }
  .hero-visual-people img {
    height: 300px !important;
    max-height: 300px !important;
  }
  .stats-grid {
    gap: 2.25rem !important;
  }
  .sol-modules {
    grid-template-columns: 1fr !important;
  }
}