/*
 * Seashore Solutions — AI consulting homepage
 * Source-derived styling is kept in this file so index.html stays semantic and editable.
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans:wght@400;500;600&family=Schibsted+Grotesk:wght@500;600;700;800&display=swap');

:root {
  --navy: #0B1E33;
  --navy-deep: #071524;
  --navy-mid: #12304F;
  --navy-line: #25486D;
  --orange: #FF9C00;
  --orange-soft: #FFB547;
  --blue: #095090;
  --ink: #0B1E33;
  --muted: #4A5563;
  --paper: #F7F4EE;
  --line: #E4DED3;
  --soft-line: #DCD6CB;
  --white: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: #1E3247;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--blue);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

a:hover {
  color: #062F55;
}

button,
input,
textarea,
select {
  font: inherit;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4 {
  font-family: 'Sora', system-ui, sans-serif;
  margin: 0;
  color: #0B2440;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
  line-height: 1.6;
}

.pt-0 { padding-top: 0 !important;}
.pb-0 { padding-bottom: 0 !important;}

.mt-0 { padding-top: 0 !important;}
.mb-0 { padding-bottom: 0 !important;}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Utility Classes (Reusable)
   ============================================================ */

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
  width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-primary {
  background: #FF9C00;
  color: #1A1100;
}

.btn-primary:hover {
  background: #F08F00;
  color: #1A1100;
}

.btn-ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
  background: transparent;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.btn-navy {
  background: #095090;
  color: #FFFFFF;
}

.btn-navy:hover {
  background: #06375F;
  color: #FFFFFF;
}

.navlink {
  color: #1E3247;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  padding: 12px 4px;
}

.navlink:hover {
  color: #095090;
}

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.foot a {
  color: #B9C8D8;
  text-decoration: none;
}

.foot a:hover {
  color: #FFFFFF;
}

.crumb a {
  color: #9FB8D3;
  text-decoration: none;
}

.crumb a:hover {
  color: #FFFFFF;
}

/* Use Case Card */
.uc {
  flex: 1 1 440px;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E3E9F0;
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.uc-n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: #B26A00;
}

.uc-link {
  margin-top: auto;
  padding-top: 8px;
  font-size: 14px;
  color: #5A6E84;
}

.uc-link a {
  font-weight: 600;
  text-decoration: none;
}

/* How It Works Card */
.how {
  flex: 1 1 240px;
  min-width: 0;
  background: #0F2E52;
  border: 1px solid #1F4A78;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
}

.how:hover {
  border-color: #FF9C00;
}

/* Pill Badge */
.pill {
  background: #FFFFFF;
  border: 1px solid #D3DEEA;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 15px;
}

/* Industry Card (Generic - used in multiple pages) */
.ind {
  flex: 1 1 340px;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E3E9F0;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #1E3247;
  display: flex;
  flex-direction: column;
}

.ind:hover {
  border-color: #9FC3E8;
  color: #1E3247;
}

/* Tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tags span {
  background: #EEF4FA;
  color: #06375F;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
}

/* Responsive utilities */
@media (max-width: 820px) {
  .navlinks {
    display: none !important;
  }
  
  .hero-h1 {
    font-size: 38px !important;
  }
  
  .sec-h2 {
    font-size: 30px !important;
  }
  
  .wrap {
    padding: 0 20px;
  }
  
  .hero-pad {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
  }
}


/* ============================================================
   Reusable design tokens & primitives
   ============================================================ */
:root {
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Schibsted Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --container-width: 1360px;
  --page-gutter: 40px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --transition-fast: .2s ease;
  --transition-base: .3s ease;
}

.container {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--container-width));
  margin-inline: auto;
}

.stack { display: flex; flex-direction: column; }
.stack--xs { gap: 4px; }
.stack--sm { gap: 12px; }
.stack--md { gap: 18px; }
.stack--lg { gap: 28px; }

.flex-between { display: flex; justify-content: space-between; align-items: center; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.button-primary {
  background: var(--orange);
  color: var(--ink);
  border-radius: var(--radius-pill);
}

.button-primary:hover { color: var(--ink); transform: translateY(-1px); }

.section-light { background: var(--paper); }
.section-white { background: var(--white); }
.section-dark { background: var(--ink); color: var(--white) !important; }
.section-dark h2 { color: var(--white) !important; }
.section-blue { background: var(--navy-deep); color: var(--white); }

@media only screen and (max-width: 820px) {
  :root { --page-gutter: 24px; }
}

/* Source-derived declarations */

.section-header { background: #ffffff; border-bottom: 1px solid #E4DED3 }
.container-header { max-width: 1360px; margin: 0 auto; padding: 18px 40px; display: flex; align-items: center; gap: 40px }
.brand-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #0B1E33 }
.brand-logo { width: 44px; height: 44px }
.brand-name { font-family: var(--font-heading); font-size: 24px; font-weight: 600; letter-spacing: -0.01em }
.primary-nav { display: flex; gap: 28px; flex-grow: 1; justify-content: center; font-size: 15px; font-weight: 500 }
.nav-link-dropdown { color: #0B1E33; text-decoration: none; display: flex; align-items: center; gap: 6px }
.nav-link { color: #0B1E33; text-decoration: none }
.button-primary.nav-cta { background: #FF9C00; color: #0B1E33; text-decoration: none; font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 999px }
.section-dark { background: #0B1E33; color: #ffffff !important; }
.hero-container { max-width: 1360px; margin: 0 auto; padding: 104px 40px 112px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: center }
.hero-content { display: flex; flex-direction: column; gap: 28px }
.eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; color: #FFB547 }
.hero-title { margin: 0; font-size: 68px; line-height: 1.02; font-weight: 700; letter-spacing: -0.025em }
.hero-description { margin: 0; font-size: 20px; line-height: 1.55; color: #C9D3DF; max-width: 600px }
.hero-actions { display: flex; gap: 14px; align-items: center }
.button-primary.hero-cta { background: #FF9C00; color: #0B1E33; text-decoration: none; font-weight: 600; font-size: 17px; padding: 17px 28px; border-radius: 999px }
.button-secondary.hero-secondary { color: #ffffff; text-decoration: none; font-weight: 500; font-size: 17px; padding: 16px 26px; border-radius: 999px; border: 1px solid #4A6582 }
.hero-meta { font-size: 14px; color: #8FA2B8 }
.maturity-card { background: #12304F; border: 1px solid #25486D; border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 6px }
.maturity-header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 18px }
.card-title { margin: 0; font-size: 22px; font-weight: 600 }
.hero-container h2 { color: #fff;}
.card-kicker { font-family: var(--font-mono); font-size: 12px; color: #8FA2B8 }
.maturity-step { display: flex; gap: 18px; align-items: flex-start; padding: 18px 0; border-top: 1px solid #25486D }
.step-number { font-family: var(--font-mono); font-size: 14px; color: #FFB547; width: 28px }
.stack-sm { display: flex; flex-direction: column; gap: 4px }
.step-title { font-weight: 600; font-size: 18px }
.step-description { font-size: 15px; color: #B7C4D3 }
.maturity-step-active { display: flex; gap: 18px; align-items: flex-start; padding: 18px 20px; margin: 0 -20px; border-radius: 12px; background: #FF9C00; color: #0B1E33 }
.step-number-active { font-family: var(--font-mono); font-size: 14px; width: 28px }
.step-title-active { font-weight: 700; font-size: 18px }
.step-description-active { font-size: 15px }
.stats-container { max-width: 1360px; margin: 0 auto; padding: 44px 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px }
.stat-value { font-family: var(--font-heading); font-size: 44px; font-weight: 700; color: #095090 }
.stat-label { font-size: 15px; color: #4A5563 }
.section-light { background: #F7F4EE }
.section-container { max-width: 1360px; margin: 0 auto; padding: 112px 40px; display: flex; flex-direction: column; gap: 56px }
.section-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.stack-md { display: flex; flex-direction: column; gap: 18px }
.section-eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; color: #A85A00; text-transform: uppercase; }
.section-title-lg { margin: 0; font-size: 48px; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em }
.section-lead { margin: 0; font-size: 19px; line-height: 1.6; color: #36414F; padding-top: 30px; }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.info-card { background: #ffffff; border: 1px solid #E4DED3; border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 14px }
.card-kicker-blue { font-family: var(--font-mono); font-size: 13px; color: #095090 }
.card-title-lg { margin: 0; font-size: 23px; font-weight: 600 }
.card-description { margin: 0; font-size: 16px; line-height: 1.6; color: #4A5563 }
.section-white { background: #ffffff }
.content-stack { display: flex; flex-direction: column; gap: 18px; max-width: 760px }
.section-title-xl { margin: 0; font-size: 56px; line-height: 1.04; font-weight: 700; letter-spacing: -0.025em }
.process-card { background: #F7F4EE; border-radius: 20px; padding: 36px; display: flex; flex-direction: column; gap: 20px }
.lineBox .process-card{ background: #fff; border: 2px solid #F7F4EE; }
.flex-between { display: flex; justify-content: space-between; align-items: center }
.badge { font-size: 12px; font-weight: 600; background: #FF9C00; color: #0B1E33; padding: 5px 10px; border-radius: 999px }
.process-title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.01em }
.list-divided { display: flex; flex-direction: column; border-top: 1px solid #DCD6CB }
.list-item { padding: 13px 0; border-bottom: 1px solid #DCD6CB; font-size: 16px }
.list-item-last { padding: 13px 0; font-size: 16px }
.link-strong { font-weight: 600; font-size: 16px }
.section-blue { background: #062F55; color: #ffffff }
.agentic-container { max-width: 1360px; margin: 0 auto; padding: 112px 40px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: center }
.agentic-content { display: flex; flex-direction: column; gap: 24px }
.section-title-white { margin: 0; font-size: 50px; line-height: 1.06; font-weight: 700; letter-spacing: -0.02em }
.section-lead-white { margin: 0; font-size: 19px; line-height: 1.6; color: #C9D3DF }
.feature-list { display: flex; flex-direction: column; gap: 14px; padding-top: 6px }
.feature-item { display: flex; gap: 14px; align-items: center; font-size: 17px }
.workflow-card { background: #0B1E33; border: 1px solid #25486D; border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 0 }
.workflow-header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 22px }
.workflow-step { display: flex; gap: 18px }
.workflow-marker-column { display: flex; flex-direction: column; align-items: center; width: 34px }
.workflow-marker { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #4A6582; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px }
.workflow-line { width: 1.5px; flex-grow: 1; background: #25486D; min-height: 22px }
.workflow-content { display: flex; flex-direction: column; gap: 4px; padding-bottom: 22px }
.workflow-meta { display: flex; gap: 10px; align-items: center }
.workflow-label { font-weight: 600; font-size: 17px }
.workflow-tag { font-family: var(--font-mono); font-size: 11px; color: #8FA2B8; border: 1px solid #25486D; padding: 3px 8px; border-radius: 6px }
.workflow-marker-active { width: 34px; height: 34px; border-radius: 50%; background: #FF9C00; color: #0B1E33; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: 500 }
.workflow-label-active { font-weight: 600; font-size: 17px; color: #FFB547 }
.workflow-tag-active { font-family: var(--font-mono); font-size: 11px; color: #0B1E33; background: #FFB547; padding: 3px 8px; border-radius: 6px }
.stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid #0B1E33 }
.stage-card { padding: 28px 28px 0 0; display: flex; flex-direction: column; gap: 12px }
.stage-title { margin: 0; font-size: 26px; font-weight: 700 }
.stage-card-middle { padding: 28px 28px 0 28px; border-left: 1px solid #DCD6CB; display: flex; flex-direction: column; gap: 12px }
.stage-card-last { padding: 28px 0 0 28px; border-left: 1px solid #DCD6CB; display: flex; flex-direction: column; gap: 12px }
.industry-card { border: 1px solid #E4DED3; border-radius: 16px; padding: 30px; display: flex; flex-direction: column; gap: 14px }
.industry-description { margin: 0; font-size: 15px; line-height: 1.7; color: #4A5563 }
.platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px }
.platform-card-dark { background: #0B1E33; color: #ffffff; border-radius: 20px; padding: 40px; display: flex; flex-direction: column; gap: 16px }
.platform-card-dark h3 {  color: #ffffff; }
.platform-kicker { font-family: var(--font-mono); font-size: 12px; color: #FFB547 }
.platform-title { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.01em }
.platform-description { margin: 0; font-size: 17px; line-height: 1.6; color: #C9D3DF }
.platform-link { color: #FFB547; font-weight: 600; font-size: 16px }
.platform-card { background: #ffffff; border: 1px solid #E4DED3; border-radius: 20px; padding: 40px; display: flex; flex-direction: column; gap: 16px }
.platform-kicker-blue { font-family: var(--font-mono); font-size: 12px; color: #095090 }
.platform-description-dark { margin: 0; font-size: 17px; line-height: 1.6; color: #4A5563 }
.platform-title-lg { margin: 0; font-size: 28px; font-weight: 700 }
.section-container-spacious { max-width: 1360px; margin: 0 auto; padding: 112px 40px; display: flex; flex-direction: column; gap: 48px }
.section-title-md { margin: 0; font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em }
.testimonial-card { margin: 0; background: #F7F4EE; border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 24px; justify-content: space-between }
.testimonial-quote { margin: 0; font-size: 19px; line-height: 1.55; font-family: var(--font-heading); font-weight: 500 }
.testimonial-author { display: flex; flex-direction: column; gap: 2px }
.testimonial-role { font-size: 14px; color: #4A5563 }
.engagement-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px }
.engagement-card-featured { background: #ffffff; border: 2px solid #FF9C00; border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px }
.engagement-kicker { font-family: var(--font-mono); font-size: 12px; color: #A85A00 }
.engagement-title { margin: 0; font-size: 21px; font-weight: 700 }
.engagement-description { margin: 0; font-size: 15px; line-height: 1.6; color: #4A5563 }
.engagement-meta { font-size: 14px; color: #6B7480 }
.engagement-card { background: #ffffff; border: 1px solid #E4DED3; border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px }
.section-heading-row { display: flex; justify-content: space-between; align-items: end }
.insight-link { text-decoration: none; color: #0B1E33; border-top: 2px solid #0B1E33; padding-top: 22px; display: flex; flex-direction: column; gap: 12px }
.insight-title { font-family: var(--font-heading); font-size: 23px; font-weight: 600; line-height: 1.3 }
.faq-container { max-width: 1360px; margin: 0 auto; padding: 112px 40px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 72px }
.faq-item { padding: 26px 0; border-bottom: 1px solid #DCD6CB; display: flex; flex-direction: column; gap: 10px }
.faq-question { margin: 0; font-size: 20px; font-weight: 600 }
.contact-container { max-width: 1360px; margin: 0 auto; padding: 112px 40px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px }
.contact-title { margin: 0; font-size: 52px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: #fff;}
.contact-details { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; font-size: 17px }
.contact-link { color: #ffffff }
.contact-location { color: #C9D3DF }
.contact-form { background: #12304F; border: 1px solid #25486D; border-radius: 20px; padding: 36px; display: flex; flex-direction: column; gap: 18px }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.form-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #C9D3DF }
.form-control { height: 48px; border-radius: 10px; border: 1px solid #4A6582; background: #0B1E33; color: #ffffff; padding: 0 14px; font-size: 16px; font-family: inherit }
.form-textarea { border-radius: 10px; border: 1px solid #4A6582; background: #0B1E33; color: #ffffff; padding: 12px 14px; font-size: 16px; font-family: inherit; resize: none }
.button-primary.form-submit { background: #FF9C00; color: #0B1E33; border: none; font-weight: 600; font-size: 17px; padding: 17px 28px; border-radius: 999px; font-family: inherit; cursor: pointer; align-self: flex-start }
.site-footer { background: #071524; color: #C9D3DF }
.footer-container { max-width: 1360px; margin: 0 auto; padding: 72px 40px 40px; display: flex; flex-direction: column; gap: 48px }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 40px }
.footer-brand { display: flex; flex-direction: column; gap: 16px }
.footer-brand-link { display: flex; align-items: center; gap: 12px }
.footer-logo { width: 40px; height: 40px; background: #ffffff; border-radius: 10px; padding: 4px }
.footer-brand-name { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: #ffffff }
.footer-description { margin: 0; font-size: 15px; line-height: 1.6; max-width: 300px }
.footer-links { display: flex; flex-direction: column; gap: 12px; font-size: 15px }
.footer-heading { color: #ffffff; font-weight: 600 }
.footer-bottom { display: flex; justify-content: space-between; border-top: 1px solid #1E3450; padding-top: 24px; font-size: 14px; color: #8FA2B8 }

.sx-shell { width: 100%; min-width: 1200px; background: #F7F4EE; }

/* Header and navigation */
.site-header {
  position: relative;
  z-index: 200;
}

.site-header .header-inner {
  position: relative;
}

.brand {
  flex-shrink: 0;
}

.primary-nav a {
  white-space: nowrap;
}

.primary-nav .nav-dropdown-toggle {
  cursor: pointer;
}

.nav-cta {
  white-space: nowrap;
}

.menu-toggle {
  display: none;
  border: 1px solid #D9D4CB;
  background: #ffffff;
  color: var(--ink);
  width: 42px;
  height: 42px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 48px rgba(7, 21, 36, 0.28);
  z-index: 300;
}

.mega-menu[hidden] {
  display: none;
}

.mega-menu-grid {
  max-width: 1360px;
  margin: 0 auto;
  padding: 40px 40px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 300px;
  gap: 40px;
}

.menu-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-column-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.menu-kicker,
.menu-featured-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
}

.menu-kicker {
  color: var(--blue);
}

.menu-title,
.menu-featured-title {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-weight: 700;
}

.menu-title {
  font-size: 20px;
}

.menu-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0;
  text-decoration: none;
}

.menu-link-featured {
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  background: var(--paper);
}

.menu-link:hover {
  color: var(--ink);
}

.menu-link-title {
  font-weight: 600;
  font-size: 16px;
}

.menu-link-desc {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

.menu-inline-title {
  display: flex;
  gap: 8px;
  align-items: center;
}

.menu-badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--orange);
  color: var(--ink);
  padding: 2px 8px;
  border-radius: 999px;
}

.menu-featured-card {
  background: var(--navy);
  color: var(--white);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}

.menu-featured-kicker {
  color: var(--orange-soft);
}

.menu-featured-title {
  font-size: 26px;
  line-height: 1.15;
}

.menu-featured-desc {
  font-size: 15px;
  line-height: 1.55;
  color: #C9D3DF;
}

.menu-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: #C9D3DF;
}

.menu-checks div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.menu-checks div > span {
  color: var(--orange-soft);
  font-weight: 700;
}

.menu-featured-cta {
  background: var(--orange);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 20px;
  border-radius: 999px;
  text-align: center;
}

.menu-featured-cta:hover {
  color: var(--ink);
  transform: translateY(-1px);
}

.menu-featured-footer {
  font-size: 13px;
  line-height: 1.5;
  color: #8FA2B8;
}

.menu-featured-footer a {
  display: block;
  margin-top: 6px;
}

.mega-menu-strip {
  max-width: 1360px;
  margin: 32px auto 0;
  padding: 18px 40px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 14px;
}

.mega-menu-strip > span {
  color: var(--muted);
}

.mega-menu-strip > div {
  display: flex;
  gap: 28px;
  font-weight: 600;
}

/* Basic interactive states */
.primary-nav .is-open {
  color: #A85A00 !important;
  border-bottom: 2px solid var(--orange);
}

body.menu-open {
  overflow-x: hidden;
}

@media only screen and (max-width: 1180px) {
  .site-shell {
    min-width: 0 !important;
  }

  .site-header .header-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
    gap: 20px !important;
  }

  .primary-nav {
    gap: 18px !important;
  }

  #top > div {
    grid-template-columns: 1fr !important;
  }

  #top h1 {
    font-size: 56px !important;
  }

  .mega-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 24px;
    padding-right: 24px;
  }

  .menu-featured-card {
    grid-column: span 2;
  }

  .mega-menu-strip {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media only screen and (max-width: 820px) {
  .site-shell { min-width: 0 !important; }

  .site-header .header-inner {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .menu-toggle {
    display: block;
    margin-left: auto;
    order: 2;
  }

  .primary-nav {
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% + 10px);
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
    justify-content: flex-start !important;
    padding: 14px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(7, 21, 36, .18);
  }

  .primary-nav.is-mobile-open {
    display: flex !important;
  }

  .primary-nav a {
    padding: 12px 10px !important;
    border-bottom: 1px solid #EEE9E1;
  }

  .primary-nav a:last-child {
    border-bottom: 0;
  }

  .nav-cta {
    margin-left: 0 !important;
    font-size: 14px !important;
    padding: 11px 16px !important;
  }

  .mega-menu {
    position: fixed;
    top: 70px;
    left: 12px;
    right: 12px;
    max-height: calc(100vh - 82px);
    overflow: auto;
    border-radius: 16px;
    border: 1px solid var(--line);
  }

  .mega-menu-grid {
    grid-template-columns: 1fr;
    padding: 24px 18px 0;
    gap: 22px;
  }

  .menu-featured-card {
    grid-column: auto;
  }

  .mega-menu-strip {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 18px;
    margin-top: 20px;
  }

  .mega-menu-strip > div {
    flex-wrap: wrap;
    gap: 14px 22px;
  }

  #top > div {
    padding: 72px 24px 80px !important;
  }

  #top h1 {
    font-size: clamp(42px, 9vw, 54px) !important;
  }

  #top p {
    font-size: 18px !important;
  }

  section > div,
  footer > div {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #contact > div {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }

  section > div[style], section .form-textarea {
    min-width: 0 !important;
  }

  #contact form > div {
    grid-template-columns: 1fr !important;
  }

  .site-footer > div > div:first-child {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media only screen and (max-width: 560px) {
  .brand span {
    font-size: 20px !important;
  }

  .brand img {
    width: 38px !important;
    height: 38px !important;
  }

  .nav-cta {
    display: none;
  }

  #top > div {
    padding: 56px 20px 64px !important;
  }

  section > div,
  footer > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #contact h2 {
    font-size: 42px !important;
  }

  .mega-menu {
    top: 64px;
    left: 8px;
    right: 8px;
  }
}

/* =========================================================
   Responsive header + compact Bootstrap Icons menu
   ========================================================= */
.sx-shell {
  min-width: 0;
  overflow-x: hidden;
}

.menu-toggle {
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.menu-toggle .bi {
  line-height: 1;
}

.menu-chevron {
  font-size: 11px;
  transition: transform .2s ease;
}

.nav-dropdown-toggle.is-open .menu-chevron {
  transform: rotate(180deg);
}

.mega-menu {
  left: 20px;
  right: 20px;
  width: auto;
  max-width: 1240px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  overflow: hidden;
}

.mega-menu-grid {
  max-width: none;
  padding: 26px 28px 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.menu-column {
  min-width: 0;
}

.menu-column-heading {
  padding-bottom: 12px;
}

.menu-title {
  font-size: 18px;
}

.menu-link {
  position: relative;
  padding: 11px 12px 11px 34px;
  border-radius: 10px;
}

/* .menu-link::before {
  content: "\\f138";
  position: absolute;
  left: 12px;
  top: 13px;
  font-family: "bootstrap-icons";
  font-size: 13px;
  color: var(--orange);
} */

.menu-link:hover {
  background: #F7F4EE;
  transform: translateX(2px);
}

.menu-link-featured {
  margin: 0;
}

.menu-featured-card {
  padding: 24px;
  border-radius: 16px;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.8fr auto;
  align-items: center;
  gap: 18px 26px;
}

.menu-featured-kicker,
.menu-featured-title,
.menu-featured-desc {
  grid-column: 1;
}

.menu-featured-kicker { grid-row: 1; }
.menu-featured-title { grid-row: 2; }
.menu-featured-desc { grid-row: 3; }
.menu-checks {
  grid-column: 2;
  grid-row: 1 / span 3;
}
.menu-featured-cta {
  grid-column: 3;
  grid-row: 1 / span 3;
  white-space: nowrap;
}

.mega-menu-strip {
  max-width: none;
  margin: 0;
  padding: 14px 28px;
  background: #FAF8F4;
}

@media only screen and (max-width: 1100px) {
  .container-header {
    padding-left: 24px !important;
    padding-right: 24px !important;
    gap: 20px !important;
  }

  .primary-nav {
    gap: 18px !important;
  }

  .brand-name {
    font-size: 21px;
  }

  .mega-menu {
    left: 12px;
    right: 12px;
  }

  .mega-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 820px) {
  .container-header {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .menu-toggle {
    display: flex !important;
    margin-left: auto;
    order: 2;
  }

  .primary-nav {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 8px);
    width: auto;
    padding: 8px;
    border-radius: 14px;
    z-index: 400;
  }

  .primary-nav a {
    min-height: 44px;
    box-sizing: border-box;
    border-bottom: 1px solid #EEE9E1;
  }

  .nav-dropdown-toggle {
    justify-content: space-between;
  }

  .mega-menu {
    position: absolute;
    top: calc(100% + 58px);
    left: 12px;
    right: 12px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    border-radius: 14px;
    border-top: 1px solid var(--line);
  }

  .mega-menu-grid {
    grid-template-columns: 1fr;
    padding: 18px;
    gap: 14px;
  }

  .menu-column-heading {
    padding: 8px 8px 10px;
  }

  .menu-link {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .menu-featured-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .menu-featured-cta {
    width: 100%;
    box-sizing: border-box;
  }

  .mega-menu-strip {
    padding: 14px 18px;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media only screen and (max-width: 560px) {
  .brand-link .brand-name {
    font-size: 18px;
  }

  .brand-logo {
    width: 38px !important;
    height: 38px !important;
  }

  .menu-toggle {
    width: 40px;
    height: 40px;
  }

  .nav-cta {
    display: none;
  }

  .mega-menu {
    left: 8px;
    right: 8px;
  }

  .mega-menu-strip > div {
    flex-direction: column;
    gap: 8px;
  }
}


/* =========================================================
   Mobile off-canvas navigation + mega-menu
   ========================================================= */
@media only screen and (max-width: 820px) {
  body.menu-open,
  body.mega-menu-open {
    overflow: hidden;
  }

  .site-header {
    z-index: 1000;
  }

  .primary-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(88vw, 360px) !important;
    height: 100dvh !important;
    max-height: 100dvh;
    margin: 0 !important;
    padding: 88px 18px 24px !important;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
    background: #ffffff;
    border-radius: 0 18px 18px 0;
    box-shadow: 16px 0 40px rgba(7, 21, 36, .18);
    overflow-y: auto;
    z-index: 1200;
  }

  .primary-nav.is-mobile-open {
    display: flex !important;
  }

  .primary-nav a {
    width: 100%;
    min-height: 52px;
    padding: 14px 8px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #EEE9E1;
  }

  .menu-toggle {
    position: relative;
    z-index: 1200;
  }

  .mega-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(92vw, 430px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 18px 18px 0 !important;
    box-shadow: 16px 0 48px rgba(7, 21, 36, .24);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1500;
    background: #ffffff;
  }

  .mega-menu[hidden] {
    display: none !important;
  }

  .mega-menu-close {
    position: sticky;
    top: 0;
    width: 100%;
    min-height: 58px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
    color: var(--ink);
    font: 600 15px/1 inherit;
    cursor: pointer;
    z-index: 2;
  }

  .mega-menu-close .bi {
    font-size: 18px;
    color: var(--orange);
  }

  .mega-menu-grid {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
    gap: 14px !important;
  }

  .menu-featured-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .mega-menu-strip {
    padding: 14px 18px !important;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media only screen and (max-width: 560px) {
  .primary-nav {
    width: 90vw !important;
  }

  .mega-menu {
    width: 94vw !important;
  }
}

/* =========================================================
   FINAL MOBILE RESPONSIVE FIX
   ========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.sx-shell,
.site-shell {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip;
}

@media only screen and (max-width: 820px) {
  .sx-shell,
  .site-shell {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .site-header,
  .site-header .header-inner {
    width: 100%;
    max-width: 100%;
  }

  .site-header .header-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 12px !important;
  }

  .brand {
    min-width: 0;
    max-width: calc(100% - 56px);
  }

  .brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Every main content wrapper must fit the viewport. */
  section > div,
  footer > div,
  .site-footer > div,
  #top > div,
  #contact > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Collapse all source desktop grids on small screens. */
  section > div,
  #contact > div,
  .site-footer > div > div:first-child {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Prevent long text / cards from forcing horizontal scroll. */
  .hero-container,
  .stats-container,
  .section-container,
  .agentic-container,
  .section-container-spacious,
  .faq-container,
  .contact-container,
  .footer-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-container,
  .section-container,
  .agentic-container,
  .section-container-spacious,
  .faq-container,
  .contact-container {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    gap: 32px !important;
  }

  .stats-container {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    gap: 18px !important;
  }

  .engagement-grid,
  .form-grid,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .contact-title {
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  .brand-name {
    font-size: 19px !important;
  }

  .brand-logo {
    width: 38px !important;
    height: 38px !important;
  }

  img,
  video,
  iframe,
  table {
    max-width: 100%;
  }

  /* Mobile navigation drawer. */
  .primary-nav {
    width: min(86vw, 360px) !important;
    max-width: calc(100vw - 24px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 78px 18px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 0 18px 18px 0 !important;
  }

  .primary-nav a {
    min-width: 0;
    white-space: normal;
  }

  /* Mobile mega menu is a separate left-side panel. */
  .mega-menu {
    width: min(94vw, 430px) !important;
    max-width: calc(100vw - 12px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 0 18px 18px 0 !important;
  }

  .mega-menu-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 18px !important;
  }

  .menu-column,
  .menu-link,
  .menu-featured-card,
  .mega-menu-strip {
    min-width: 0;
    max-width: 100%;
  }

  .menu-link-title,
  .menu-link-desc,
  .menu-featured-title,
  .menu-featured-desc {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .mega-menu-strip > div {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media only screen and (max-width: 480px) {
  .site-header .header-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .brand {
    gap: 8px;
    max-width: calc(100% - 52px);
  }

  .brand span,
  .brand-name {
    font-size: 17px !important;
  }

  .brand-logo {
    width: 34px !important;
    height: 34px !important;
  }

  section > div,
  footer > div,
  .site-footer > div,
  #top > div,
  #contact > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-container,
  .section-container,
  .agentic-container,
  .section-container-spacious,
  .faq-container,
  .contact-container {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
    gap: 26px !important;
  }

  .contact-title {
    font-size: 34px !important;
  }

  .primary-nav {
    width: min(90vw, 340px) !important;
  }

  .mega-menu {
    width: min(94vw, 400px) !important;
  }
}

/* =========================================================
   MOBILE SECTION-BY-SECTION LAYOUT FIX
   Keep every content block inside the viewport on phones.
   ========================================================= */
@media only screen and (max-width: 820px) {
  /* Section containers */
  .hero-container,
  .stats-container,
  .section-container,
  .agentic-container,
  .section-container-spacious,
  .faq-container,
  .contact-container,
  .footer-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* All internal desktop grids become single-column on mobile. */
  .section-intro-grid,
  .card-grid-3,
  .stage-grid,
  .platform-grid,
  .engagement-grid,
  .form-grid,
  .footer-grid {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Point of view / section headings */
  .section-intro-grid {
    display: grid !important;
    gap: 22px !important;
    align-items: start !important;
  }

  .section-title-lg,
  .section-title-xl,
  .section-title-white,
  .section-title-md {
    overflow-wrap: break-word;
    word-break: normal;
  }

  .section-lead,
  .card-description,
  .section-lead-white,
  .industry-description,
  .platform-description,
  .platform-description-dark,
  .engagement-description,
  .footer-description {
    max-width: 100% !important;
    overflow-wrap: break-word;
  }

  /* Cards should never preserve desktop widths. */
  .card-grid-3 > *,
  .platform-grid > *,
  .engagement-grid > *,
  .stage-grid > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* How-we-work four-column strip. */
  .stage-grid {
    display: grid !important;
    gap: 0 !important;
    border-top-width: 2px !important;
  }

  .stage-card,
  .stage-card-middle,
  .stage-card-last {
    padding: 24px 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .stage-card-last {
    border-bottom: 0 !important;
  }

  /* Agentic workflow: keep the timeline readable and horizontal-safe. */
  .feature-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .feature-item {
    min-width: 0 !important;
    width: 100% !important;
  }

  .workflow-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 22px !important;
  }

  .workflow-header {
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }

  .workflow-step {
    min-width: 0 !important;
    width: 100% !important;
  }

  .workflow-content,
  .workflow-meta,
  .stack-sm {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Testimonials and engagement cards. */
  .testimonial-card,
  .engagement-card-featured,
  .engagement-card,
  .platform-card-dark,
  .platform-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 24px !important;
  }

  /* Insights heading + CTA stack on phones. */
  .section-heading-row {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* FAQ content */
  .faq-container {
    gap: 28px !important;
  }

  .faq-item {
    min-width: 0 !important;
    width: 100% !important;
    padding: 22px 0 !important;
  }

  .faq-question {
    overflow-wrap: break-word;
  }

  /* Contact form */
  .contact-container {
    gap: 36px !important;
  }

  .contact-form {
    width: 100% !important;
    min-width: 0 !important;
    padding: 24px !important;
  }

  .form-field,
  .form-control,
  .form-textarea,
  .button-primary.form-submit {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .form-control,
  .form-textarea {
    width: 100% !important;
  }

  .button-primary.form-submit {
    width: 100% !important;
    align-self: stretch !important;
  }

  /* Footer */
  .footer-grid {
    gap: 32px !important;
  }

  .footer-brand,
  .footer-links {
    min-width: 0 !important;
    width: 100% !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Hero buttons stack only when the viewport becomes narrow. */
  .hero-actions {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  .button-primary.hero-cta,
  .button-secondary.hero-secondary {
    min-width: 0 !important;
  }
}

@media only screen and (max-width: 560px) {
  /* Reduce section spacing without making the page cramped. */
  .section-container,
  .section-container-spacious {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    gap: 34px !important;
  }

  .agentic-container,
  .faq-container,
  .contact-container {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .stats-container {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    gap: 26px !important;
  }

  .card-grid-3,
  .platform-grid,
  .engagement-grid {
    gap: 18px !important;
  }

  .info-card,
  .process-card,
  .industry-card,
  .platform-card-dark,
  .platform-card,
  .testimonial-card,
  .engagement-card-featured,
  .engagement-card {
    padding: 20px !important;
    border-radius: 14px !important;
  }

  .section-title-lg,
  .section-title-xl,
  .section-title-white,
  .section-title-md {
    font-size: clamp(30px, 8.5vw, 40px) !important;
    line-height: 1.08 !important;
  }

  .section-lead-white,
  .section-lead {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  .platform-title,
  .platform-title-lg,
  .engagement-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  .testimonial-quote {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .button-primary.hero-cta,
  .button-secondary.hero-secondary {
    width: 100% !important;
    text-align: center !important;
  }

  .workflow-card {
    padding: 18px !important;
  }

  .workflow-step {
    gap: 12px !important;
  }

  .workflow-marker-column {
    flex: 0 0 34px !important;
  }

  .contact-form {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  .button-primary.form-submit {
    font-size: 16px !important;
    padding: 15px 20px !important;
  }
}


/* =========================================================
   MOBILE MENU — REFERENCE-STYLE DRAWER / MEGA MENU
   Existing links and copy are unchanged.
   ========================================================= */
.mobile-menu-overlay {
  display: none;
}

.mobile-nav-head {
  display: none;
}

@media only screen and (max-width: 820px) {
  body.menu-open,
  body.mega-menu-open {
    overflow: hidden !important;
  }

  .mobile-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(7, 21, 36, .46);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility 0s linear .28s;
    z-index: 1090;
    backdrop-filter: blur(2px);
  }

  .mobile-menu-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .28s ease;
  }

  .primary-nav {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(88vw, 370px) !important;
    max-width: calc(100vw - 20px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 18px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 20px 20px 0 !important;
    box-shadow: 18px 0 50px rgba(7, 21, 36, .22) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translate3d(-105%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    transition: transform .38s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .38s;
    z-index: 1200 !important;
    will-change: transform;
  }

  .primary-nav.is-mobile-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition: transform .38s cubic-bezier(.22, .61, .36, 1);
  }

  .mobile-nav-head {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e9e5dd;
    margin-bottom: 4px;
    flex: 0 0 auto;
  }

  .mobile-nav-label {
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #17283f;
  }

  .mobile-nav-close {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9d3c9;
    border-radius: 10px;
    background: #fff;
    color: #17283f;
    cursor: pointer;
    font-size: 17px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }

  .mobile-nav-close:hover,
  .mobile-nav-close:focus-visible {
    background: #f5f2ec;
    color: #f59a00;
    transform: rotate(3deg);
  }

  .primary-nav > a {
    width: 100%;
    min-height: 58px;
    padding: 15px 4px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #e9e5dd !important;
    color: #17283f !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transform: translateX(-8px);
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease, color .2s ease;
  }

  .primary-nav.is-mobile-open > a {
    transform: translateX(0);
    opacity: 1;
  }

  .primary-nav.is-mobile-open > a:nth-of-type(1) { transition-delay: .05s; }
  .primary-nav.is-mobile-open > a:nth-of-type(2) { transition-delay: .09s; }
  .primary-nav.is-mobile-open > a:nth-of-type(3) { transition-delay: .13s; }
  .primary-nav.is-mobile-open > a:nth-of-type(4) { transition-delay: .17s; }
  .primary-nav.is-mobile-open > a:nth-of-type(5) { transition-delay: .21s; }

  .primary-nav > a:hover,
  .primary-nav > a:focus-visible,
  .primary-nav .nav-dropdown-toggle.is-open {
    color: #f39a00 !important;
  }

  .nav-dropdown-toggle .menu-chevron {
    flex: 0 0 auto;
    font-size: 13px;
    transition: transform .28s ease;
  }

  .nav-dropdown-toggle.is-open .menu-chevron {
    transform: rotate(-90deg);
  }


  /* Mega menu: same left-side drawer, with a smooth slide-in. */
  .mega-menu {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(94vw, 430px) !important;
    max-width: calc(100vw - 10px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 20px 20px 0 !important;
    background: #fff !important;
    box-shadow: 18px 0 50px rgba(7, 21, 36, .24) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translate3d(-105%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    opacity: 1 !important;
    transition: transform .38s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .38s;
    z-index: 1500 !important;
    will-change: transform;
  }

  .mega-menu.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition: transform .38s cubic-bezier(.22, .61, .36, 1);
  }

  .mega-menu[hidden] {
    display: block !important;
  }

  .mega-menu-close {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    width: 100% !important;
    min-height: 76px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end !important;
    gap: 9px;
    border: 0 !important;
    border-bottom: 1px solid #e9e5dd !important;
    background: rgba(255,255,255,.96) !important;
    color: #17283f !important;
    font: 600 13px/1 inherit !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    backdrop-filter: blur(8px);
  }

  .mega-menu-close .bi {
    order: 2;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9d3c9;
    border-radius: 10px;
    font-size: 15px;
    color: #17283f;
  }

  .mega-menu-close:hover .bi,
  .mega-menu-close:focus-visible .bi {
    color: #f39a00;
    background: #f8f5ef;
  }

  .mega-menu-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 8px 18px 18px !important;
  }

  .menu-column {
    border-bottom: 1px solid #e9e5dd;
    padding: 14px 0 10px;
  }

  .menu-column-heading {
    padding: 5px 0 12px !important;
  }

  .menu-kicker {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    letter-spacing: .13em;
  }

  .menu-title {
    display: block;
    font-size: 18px !important;
    line-height: 1.25;
  }

  .menu-link,
  .menu-link-featured {
    display: block !important;
    margin: 0 !important;
    padding: 13px 32px 13px 34px !important;
    border-radius: 10px !important;
    transform: none !important;
    background: transparent;
  }

  .menu-link::before {
    left: 7px !important;
    top: 16px !important;
  }

  .menu-link-title {
    display: block;
    font-size: 15px;
    line-height: 1.35;
  }

  .menu-link-desc {
    display: block;
    margin-top: 4px;
    font-size: 12px !important;
    line-height: 1.45;
    color: #617087;
  }

  .menu-link:hover,
  .menu-link:focus-visible {
    background: #f7f4ee !important;
  }

  .menu-featured-card {
    grid-column: auto !important;
    margin-top: 14px;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    border-radius: 14px !important;
  }

  .menu-featured-cta {
    width: 100%;
  }

  .mega-menu-strip {
    margin: 0 !important;
    padding: 16px 18px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .mega-menu-strip > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media only screen and (max-width: 480px) {
  .primary-nav,
  .mega-menu {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
  }

  .mobile-nav-head,
  .mega-menu-close {
    min-height: 68px !important;
  }
}

/* ======================================================================
   MOBILE NAVIGATION - REFERENCE STYLE / TRUE ACCORDION
   ====================================================================== */
@media only screen and (max-width: 820px) {
  body.menu-open,
  body.mega-menu-open {
    overflow: hidden;
  }

  .mobile-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    background: rgba(8, 21, 37, .48) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .28s ease, visibility .28s ease !important;
  }

  .mobile-menu-overlay.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Main drawer: slides left -> right when the hamburger is clicked. */
  .primary-nav {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(390px, calc(100vw - 18px)) !important;
    max-width: 390px !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 24px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff !important;
    box-shadow: 18px 0 55px rgba(8, 21, 37, .22) !important;
    transform: translate3d(-102%, 0, 0) !important;
    opacity: 1 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .42s cubic-bezier(.22,.61,.36,1), visibility 0s linear .42s !important;
    z-index: 1300 !important;
  }

  .primary-nav.is-mobile-open {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform .42s cubic-bezier(.22,.61,.36,1) !important;
  }

  .mobile-nav-head {
    min-height: 82px !important;
    margin: 0 -24px 8px !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #e7e2d9 !important;
    background: #fff !important;
  }

  .mobile-nav-label {
    color: #152945 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
  }

  .mobile-nav-close {
    width: 46px !important;
    height: 46px !important;
    border: 1px solid #d9d3c9 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #152945 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
  }

  .primary-nav > a {
    min-height: 62px !important;
    margin: 0 !important;
    /* padding: 0 4px !important; */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #e7e2d9 !important;
    color: #152945 !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    transform: none !important;
    opacity: 1 !important;

    padding: 0 18px !important;
    width: calc(100% + 48px);
    margin-left: -24px !important;   
  }

  .primary-nav > a.nav-dropdown-toggle.is-open {
    color: #e99000 !important;
  }

  .nav-dropdown-toggle .menu-chevron {
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #d9d3c9 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    transition: transform .25s ease, color .25s ease, background .25s ease !important;
  }

  .nav-dropdown-toggle.is-open .menu-chevron {
    transform: rotate(180deg) !important;
    color: #e99000 !important;
    background: #faf7f1 !important;
  }

  /* Mega menu becomes an accordion panel inside the left drawer, not another drawer. */
  .mega-menu {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f7f5f0 !important;
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: max-height .42s ease, opacity .28s ease, visibility 0s linear .42s !important;
    z-index: auto !important;
  }

  .mega-menu.is-open {
    max-height: 1800px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: max-height .48s ease, opacity .28s ease !important;
  }

  .mega-menu[hidden] {
    display: block !important;
  }

  /* The separate mega-menu close button is unnecessary in accordion mode. */
  .mega-menu-close {
    display: none !important;
  }

  .mega-menu-grid {
    display: block !important;
    padding: 0 !important;
  }

  .menu-column {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #ddd7cc !important;
  }

  .menu-column-heading {
    position: relative !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 15px 42px 15px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    cursor: pointer !important;
    background: #f7f5f0 !important;
    transition: background .22s ease !important;
  }

  .menu-column-heading::after {
    content: '\f282';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%) rotate(0deg);
    border: 1px solid #d7d0c5;
    border-radius: 7px;
    color: #152945;
    font-family: 'bootstrap-icons' !important;
    font-size: 12px;
    transition: transform .25s ease, color .25s ease, background .25s ease;
  }

  .menu-column.is-expanded .menu-column-heading {
    background: #eeece5 !important;
  }

  .menu-column.is-expanded .menu-column-heading::after {
    transform: translateY(-50%) rotate(180deg);
    color: #e99000;
    background: #fff;
  }

  .menu-kicker {
    margin: 0 0 4px !important;
    color: #0d4c9a !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
  }

  .menu-title {
    color: #152945 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  /* Submenu links sit directly under their clicked accordion heading. */
  .menu-column > .menu-link,
  .menu-column > .menu-link-featured {
    display: block !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 16px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    border-radius: 0 !important;
    border-top: 1px solid transparent !important;
    background: #fff !important;
    transform: none !important;
    transition: max-height .32s ease, padding .32s ease, opacity .22s ease, border-color .22s ease !important;
  }

  .menu-column.is-expanded > .menu-link,
  .menu-column.is-expanded > .menu-link-featured {
    max-height: 180px !important;
    padding: 16px 34px 16px 34px !important;
    opacity: 1 !important;
    border-top-color: #e6e0d7 !important;
  }

  /* .menu-column > .menu-link::before,
  .menu-column > .menu-link-featured::before {
    left: 16px !important;
    top: 20px !important;
    color: #e99000 !important;
  } */

  .menu-link-title {
    color: var(--blue) !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .primary-nav .megaMenuMainCnt .menu-link:hover .menu-link-title {
    color: var(--orange) !important;
  }

  .menu-link-desc {
    color: var(--muted) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .menu-featured-card {
    margin: 16px !important;
    padding: 18px !important;
    display: flex !important;
    border-radius: 12px !important;
  }

  .mega-menu-strip {
    margin: 0 !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .mega-menu-strip > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
}


/* =========================================================
   Typography System - Sample HTML Reference
   Content  : IBM Plex Sans
   Headings : Schibsted Grotesk
   ========================================================= */
:root {
  --font-content: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Schibsted Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

html,
body,
.sx-shell {
  font-family: var(--font-content);
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-content);
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-name,
.hero-title,
.card-title,
.step-title,
.step-title-active,
.stat-value,
.section-title-lg,
.card-title-lg,
.section-title-xl,
.process-title,
.section-title-white,
.workflow-label,
.stage-title,
.platform-title,
.platform-title-lg,
.section-title-md,
.testimonial-quote,
.engagement-title,
.insight-title,
.faq-question,
.contact-title,
.footer-brand-name,
.menu-title,
.menu-link-title,
.mobile-nav-link,
.mobile-nav-accordion-title,
.mobile-mega-title,
.mobile-menu-title {
  font-family: var(--font-heading) !important;
}

/* Navigation and body copy stay on IBM Plex Sans. */
.primary-nav,
.button-primary.nav-cta,
.hero-description,
.button-primary.hero-cta,
.button-secondary.hero-secondary,
.hero-meta,
.step-description,
.step-description-active,
.stat-label,
.section-lead,
.card-description,
.list-item,
.list-item-last,
.link-strong,
.section-lead-white,
.feature-item,
.industry-description,
.platform-description,
.platform-link,
.platform-description-dark,
.testimonial-role,
.engagement-description,
.engagement-meta,
.contact-details,
.form-field,
.form-control,
.form-textarea,
.button-primary.form-submit,
.footer-description,
.footer-links,
.footer-bottom,
.menu-link-desc,
.mobile-menu-link,
.mobile-menu-desc,
.mobile-cta,
.mega-menu-strip {
  font-family: var(--font-content) !important;
}

/* Technical eyebrow / index labels retain the mono treatment from the sample. */
.eyebrow,
.card-kicker,
.step-number,
.step-number-active,
.section-eyebrow,
.card-kicker-blue,
.workflow-marker,
.workflow-tag,
.workflow-marker-active,
.workflow-tag-active,
.platform-kicker,
.platform-kicker-blue,
.engagement-kicker,
.menu-kicker,
.mobile-menu-kicker {
  font-family: var(--font-mono) !important;
}

/* Sample heading scale */
.hero-title { color: var(--white); font-size: clamp(42px, 5.35vw, 68px) !important; line-height: 1.02 !important; }
.section-title-lg { font-size: clamp(36px, 3.8vw, 48px) !important; line-height: 1.08 !important; }
.section-title-xl { font-size: clamp(42px, 4.4vw, 56px) !important; line-height: 1.04 !important; }
.section-title-white { color: var(--white); font-size: clamp(38px, 4vw, 50px) !important; line-height: 1.06 !important; }
.platform-title { font-size: clamp(28px, 2.9vw, 34px) !important; line-height: 1.12 !important; }
.section-title-md { font-size: clamp(36px, 3.65vw, 44px) !important; line-height: 1.10 !important; }
.contact-title { font-size: clamp(42px, 4.3vw, 52px) !important; line-height: 1.05 !important; }

@media only screen and (max-width: 820px) {
  .hero-title { font-size: clamp(38px, 10vw, 52px) !important; }
  .section-title-lg { font-size: clamp(32px, 8.5vw, 42px) !important; }
  .section-title-xl { font-size: clamp(38px, 9vw, 48px) !important; }
  .section-title-white { font-size: clamp(34px, 8.5vw, 44px) !important; }
  .platform-title { font-size: clamp(27px, 7vw, 34px) !important; }
  .section-title-md { font-size: clamp(32px, 8vw, 40px) !important; }
  .contact-title { font-size: clamp(36px, 8.8vw, 46px) !important; }

  .menu-title { font-size: 18px !important; }
  .menu-link-title { font-size: 16px !important; }
  .menu-link-desc { font-size: 14px !important; }
}


/* AI assessment modal */
.assessment-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease;
}

.assessment-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.assessment-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 21, 36, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.assessment-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(880px, calc(100vh - 48px));
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(11, 30, 51, .12);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
  transform: translateY(18px) scale(.98);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  scrollbar-width: thin;
}

.assessment-modal.is-open .assessment-modal-dialog {
  transform: translateY(0) scale(1);
}

.assessment-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid #DCD6CB;
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 17px;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.assessment-modal-close:hover {
  background: #F7F4EE;
  border-color: #BFB8AC;
  transform: rotate(3deg);
}

.assessment-modal-header {
  padding: 44px 48px 30px;
  background: linear-gradient(135deg, #0B1E33 0%, #12304F 100%);
  color: #fff;
}

.assessment-modal-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: #FFB547;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
}

.assessment-modal-header h2 {
  margin: 0 56px 10px 0;
  color: #fff;
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -.025em;
}

.assessment-modal-header p {
  max-width: 610px;
  margin: 0;
  color: #C9D3DF;
  font-size: 16px;
  line-height: 1.6;
}

.assessment-form {
  padding: 32px 48px 40px;
  background: #fff;
}

.assessment-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.assessment-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.assessment-form label > span {
  font-family: var(--font-content, 'IBM Plex Sans', sans-serif);
}

.assessment-form input,
.assessment-form select,
.assessment-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #D8D2C8;
  border-radius: 12px;
  background: #FAF9F6;
  color: var(--ink);
  padding: 13px 14px;
  outline: none;
  font-family: var(--font-content, 'IBM Plex Sans', sans-serif);
  font-size: 15px;
  line-height: 1.45;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.assessment-form textarea {
  min-height: 112px;
  resize: vertical;
}

.assessment-form input::placeholder,
.assessment-form textarea::placeholder {
  color: #87919D;
}

.assessment-form input:focus,
.assessment-form select:focus,
.assessment-form textarea:focus {
  border-color: #3D6B99;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(61, 107, 153, .12);
}

.assessment-submit {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font-content, 'IBM Plex Sans', sans-serif);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.assessment-submit:hover {
  background: #FFAA22;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 156, 0, .22);
}

.assessment-form-note {
  margin: 12px 0 0;
  color: #6D7681;
  font-size: 12px;
  text-align: center;
}

.assessment-success {
  margin-top: 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid #C9E5D1;
  border-radius: 12px;
  background: #F2FAF4;
  color: #174D29;
}

.assessment-success > i {
  font-size: 22px;
  line-height: 1;
}

.assessment-success strong,
.assessment-success span {
  display: block;
}

.assessment-success strong {
  font-size: 14px;
  margin-bottom: 3px;
}

.assessment-success span {
  font-size: 13px;
  line-height: 1.45;
}

body.assessment-modal-open {
  overflow: hidden;
}

@media only screen and (max-width: 640px) {
  .assessment-modal {
    padding: 10px;
    align-items: end;
  }

  .assessment-modal-dialog {
    width: 100%;
    max-height: calc(100vh - 20px);
    border-radius: 20px 20px 12px 12px;
  }

  .assessment-modal-header {
    padding: 32px 22px 24px;
  }

  .assessment-modal-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }

  .assessment-modal-header h2 {
    margin-right: 42px;
    font-size: 30px;
  }

  .assessment-modal-header p {
    font-size: 14px;
  }

  .assessment-form {
    padding: 24px 22px 28px;
  }

  .assessment-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}


/* =========================================================
   DESKTOP MEGA MENU — reference-style layout
   Keep desktop menu as one wide panel: 3 content columns +
   a dedicated assessment card on the right.
   ========================================================= */
@media only screen and (min-width: 821px) {
  .mega-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid #E6E1D8 !important;
    border-radius: 0 0 18px 18px !important;
    background: #FFFFFF !important;
    box-shadow: 0 22px 50px rgba(7, 21, 36, .16) !important;
    overflow: hidden !important;
  }

  .mega-menu-close {
    display: none !important;
  }

  .mega-menu-grid {
    width: min(1360px, calc(100% - 80px));
    max-width: 1360px !important;
    margin: 0 auto !important;
    padding: 46px 0 34px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 316px !important;
    gap: 44px !important;
    align-items: start !important;
  }

  .menu-column {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .menu-column-heading {
    padding: 0 0 16px !important;
    margin: 0 0 6px !important;
    gap: 5px !important;
    border-bottom: 1px solid #E3DED5 !important;
  }

  .menu-kicker {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: .11em !important;
    color: #24558A !important;
  }

  .menu-title {
    font-family: 'Schibsted Grotesk', sans-serif !important;
    font-size: 23px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #0B1E33 !important;
  }

  .menu-link,
  .menu-link-featured {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 12px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
    transform: none !important;
  }

  .menu-link::before {
    display: none !important;
  }

  .menu-link-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #0B1E33 !important;
  }

  .menu-link-desc {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #53657A !important;
  }

  .menu-link-featured {
    margin-top: 4px !important;
    padding: 14px 14px !important;
    border-radius: 12px !important;
    background: #F7F4EE !important;
  }

  .menu-link:hover,
  .menu-link-featured:hover {
    background: #F7F4EE !important;
    transform: none !important;
  }

  .menu-link-featured .menu-link-title {
    font-weight: 700 !important;
  }

  .menu-featured-card {
    grid-column: auto !important;
    grid-row: 1 !important;
    align-self: start !important;
    min-width: 0 !important;
    padding: 34px 32px !important;
    border-radius: 20px !important;
    background: #0B1E33 !important;
    color: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .menu-featured-kicker {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: .12em !important;
    color: #FFB547 !important;
  }

  .menu-featured-title {
    font-family: 'Schibsted Grotesk', sans-serif !important;
    font-size: 30px !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
  }

  .menu-featured-desc {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #C9D3DF !important;
  }

  .menu-checks {
    gap: 9px !important;
    padding: 2px 0 4px !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 14px !important;
  }

  .menu-featured-cta {
    width: 100% !important;
    padding: 14px 20px !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  .mega-menu-strip {
    width: min(1360px, calc(100% - 80px));
    max-width: 1360px !important;
    margin: 0 auto !important;
    padding: 18px 0 20px !important;
    border-top: 1px solid #E3DED5 !important;
    background: #FFFFFF !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 14px !important;
  }

  .mega-menu-strip > div {
    gap: 30px !important;
  }

  .mega-menu-strip a {
    color: #24558A !important;
  }
}

@media only screen and (min-width: 821px) and (max-width: 1100px) {
  .mega-menu-grid {
    width: min(1360px, calc(100% - 48px));
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }

  .menu-featured-card {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .mega-menu-strip {
    width: min(1360px, calc(100% - 48px));
  }
}

/* =========================================================
   DESKTOP AI MEGA MENU — reference layout
   Keep existing copy and URLs; only refine the presentation.
   ========================================================= */
@media only screen and (min-width: 821px) {
  .site-header {
    position: relative;
    z-index: 200;
  }

  .mega-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid #E4DED3 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 0 22px 45px rgba(7, 21, 36, .16) !important;
    overflow: visible !important;
    z-index: 350 !important;
  }

  .mega-menu-grid {
    width: min(1600px, calc(100% - 96px)) !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 48px 0 34px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 360px) !important;
    gap: 48px !important;
    align-items: start !important;
  }

  .menu-column {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .menu-column-heading {
    min-height: 72px !important;
    margin: 0 0 10px !important;
    padding: 0 0 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    border-bottom: 1px solid #E4DED3 !important;
  }

  .menu-kicker {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    letter-spacing: .14em !important;
    color: #095090 !important;
  }

  .menu-title {
    font-family: 'Schibsted Grotesk', sans-serif !important;
    font-size: 23px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    color: #0B1E33 !important;
  }

  .menu-link,
  .menu-link-featured {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 14px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    background: transparent !important;
    transform: none !important;
  }

  /* The reference menu uses clean text rows, not icon bullets. */
  .menu-link::before {
    content: none !important;
    display: none !important;
  }

  .menu-link-featured {
    padding: 14px 14px !important;
    margin: 0 0 4px !important;
    background: #F7F4EE !important;
  }

  .menu-link-title {
    font-family: 'Schibsted Grotesk', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    color: #0B1E33 !important;
  }

  .menu-link-desc {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: #5C6978 !important;
  }

  .menu-link:hover,
  .menu-link:focus-visible {
    transform: none !important;
  }

  .menu-link-featured:hover,
  .menu-link-featured:focus-visible {
    background: #F2EEE7 !important;
  }

  .menu-inline-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .menu-badge {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }

  .menu-featured-card {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: start !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 32px !important;
    border-radius: 18px !important;
    background: #0B1E33 !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    box-sizing: border-box !important;
    align-items: flex-start;
  }

  .menu-featured-kicker {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: .13em !important;
    color: #FFB547 !important;
  }

  .menu-featured-title {
    font-family: 'Schibsted Grotesk', sans-serif !important;
    font-size: 30px !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    color: #fff !important;
  }

  .menu-featured-desc {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #C9D3DF !important;
  }

  .menu-checks {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 4px 0 5px !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 14px !important;
    color: #C9D3DF !important;
  }

  .menu-checks div {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .menu-checks div > span {
    color: #FFB547 !important;
    font-weight: 700 !important;
  }

  .menu-featured-cta {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
    padding: 14px 20px !important;
    border-radius: 999px !important;
    background: #FF9C00 !important;
    color: #0B1E33 !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  .menu-featured-footer {
    display: none !important;
  }

  .mega-menu-strip {
    width: min(1600px, calc(100% - 96px)) !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 20px 0 22px !important;
    border-top: 1px solid #E4DED3 !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 14px !important;
  }

  .mega-menu-strip > span {
    color: #617080 !important;
  }

  .mega-menu-strip > div {
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;
  }

  .mega-menu-strip a {
    color: #24558A !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }

  .mega-menu-close {
    display: none !important;
  }
}

@media only screen and (min-width: 821px) and (max-width: 1280px) {
  .mega-menu-grid {
    width: calc(100% - 56px) !important;
    gap: 28px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(270px, 320px) !important;
  }

  .mega-menu-strip {
    width: calc(100% - 56px) !important;
  }

  .menu-title {
    font-size: 20px !important;
  }

  .menu-link-title {
    font-size: 16px !important;
  }
}


/* Reusable container contract: component containers inherit the same responsive width. */
.container-header,
.hero-container,
.stats-container,
.section-container,
.agentic-container,
.section-container-spacious,
.faq-container,
.contact-container,
.footer-container {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--container-width));
  max-width: var(--container-width);
  margin-inline: auto;
}

@media only screen and (max-width: 820px) {
  .container-header,
  .hero-container,
  .stats-container,
  .section-container,
  .agentic-container,
  .section-container-spacious,
  .faq-container,
  .contact-container,
  .footer-container {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--container-width));
  }
}

/* =========================================================
   DESKTOP MEGA MENU — hover interaction
   ========================================================= */
@media only screen and (min-width: 821px) {
  .nav-dropdown-toggle {
    cursor: pointer;
  }
}


/* =========================================================
   MOBILE MENU FIX — submenu panels are siblings of .primary-nav
   in the HTML, so they must remain fixed rather than static.
   ========================================================= */
@media only screen and (max-width: 820px) {
  .primary-nav {
    width: min(390px, calc(100vw - 18px)) !important;
    max-width: 390px !important;
    z-index: 1300 !important;
  }

  .mobile-menu-overlay.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mega-menu {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(390px, calc(100vw - 18px)) !important;
    max-width: 390px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 20px 20px 0 !important;
    background: #fff !important;
    box-shadow: 18px 0 55px rgba(8, 21, 37, .22) !important;
    transform: translate3d(-102%, 0, 0) !important;
    opacity: 1 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1400 !important;
    transition: transform .38s cubic-bezier(.22,.61,.36,1), visibility 0s linear .38s !important;
  }

  .mega-menu.is-open {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform .38s cubic-bezier(.22,.61,.36,1) !important;
  }

  .mega-menu[hidden] {
    display: block !important;
  }

  .mega-menu-close {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    width: 100% !important;
    min-height: 76px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    border: 0 !important;
    border-bottom: 1px solid #e7e2d9 !important;
    background: rgba(255,255,255,.97) !important;
    color: #152945 !important;
  }

  .mega-menu-close:hover,
  .mega-menu-close:focus-visible {
    color: #e99000 !important;
  }

  .mega-menu-grid {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .menu-column {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #ddd7cc !important;
  }

  .menu-column-heading {
    padding: 18px 18px 14px !important;
    margin: 0 !important;
  }

  .menu-link {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 14px 18px !important;
  }

  .menu-featured-card {
    margin: 16px !important;
  }

  .mega-menu-strip {
    padding: 18px !important;
  }
}

@media only screen and (max-width: 480px) {
  .primary-nav,
  .mega-menu {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
  }
}

/* =========================================================
   MOBILE AI SERVICES ACCORDION
   ========================================================= */
@media only screen and (max-width: 820px) {
  .megaMenuMainCnt .mega-menu-grid > .menu-column {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #ddd7cc !important;
  }

  .megaMenuMainCnt .menu-column-heading {
    min-height: 72px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 15px 58px 15px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    cursor: pointer !important;
    user-select: none !important;
    background: #f7f5f0 !important;
  }

  .megaMenuMainCnt .menu-column-heading:focus-visible {
    outline: 2px solid #e99000 !important;
    outline-offset: -2px !important;
  }

  .megaMenuMainCnt .menu-column-heading::after {
    content: '\f282' !important;
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-50%) rotate(0deg) !important;
    /* border: 1px solid #d7d0c5 !important; */
    border-radius: 8px !important;
    color: #152945 !important;
    /* background: #fff !important; */
    font-family: 'bootstrap-icons' !important;
    font-size: 12px !important;
    transition: transform .25s ease, color .25s ease, background .25s ease !important;
  }

  .megaMenuMainCnt .menu-column.is-expanded > .menu-column-heading {
    background: #eeece5 !important;
  }

  .megaMenuMainCnt .menu-column.is-expanded > .menu-column-heading::after {
    transform: translateY(-50%) rotate(180deg) !important;
    color: #e99000 !important;
    /* background: #fff !important; */
  }

  .megaMenuMainCnt .menu-column > .menu-link,
  .megaMenuMainCnt .menu-column > .menu-link-featured {
    display: block !important;
    width: 100% !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 34px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    border-top: 1px solid transparent !important;
    background: #fff !important;
    transform: none !important;
    transition: max-height .32s ease, padding .32s ease, opacity .22s ease, visibility .22s ease, border-color .22s ease !important;
  }

  .megaMenuMainCnt .menu-column.is-expanded > .menu-link,
  .megaMenuMainCnt .menu-column.is-expanded > .menu-link-featured {
    max-height: 190px !important;
    padding: 15px 34px 15px 34px !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-top-color: #e6e0d7 !important;
  }
}

/* =========================================================
   MOBILE INLINE ACCORDION — AI SERVICES
   The AI menu is moved into .primary-nav by script.js on mobile.
   It therefore expands directly below "AI Services" and pushes the
   remaining navigation items down instead of opening a second drawer.
   ========================================================= */
@media only screen and (max-width: 820px) {
  .primary-nav > .mega-menu {
    position: static !important;
    inset: auto !important;
    /* width: 100% !important; */
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    /* padding: 0 !important; */
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
    z-index: auto !important;

    /* padding: 0 18px !important; */
    width: calc(100% + 48px);
    margin-left: -24px !important;
  }

  .primary-nav > .mega-menu[hidden] {
    display: none !important;
  }

  .primary-nav > .mega-menu .mega-menu-close {
    display: none !important;
  }

  .primary-nav > .megaMenuMainCnt .mega-menu-grid {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .primary-nav > .megaMenuMainCnt .menu-column {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e3ddd3 !important;
  }

  .primary-nav > .megaMenuMainCnt .menu-column-heading {
    position: relative !important;
    min-height: 64px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 54px 12px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    background: #fff !important;
    cursor: pointer !important;
  }

  .primary-nav > .megaMenuMainCnt .menu-kicker {
    margin: 0 0 3px !important;
    font-size: 9px !important;
  }

  .primary-nav > .megaMenuMainCnt .menu-title {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .primary-nav > .megaMenuMainCnt .menu-column-heading::after {
    content: '\f282' !important;
    position: absolute !important;
    top: 50% !important;
    right: 17px !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-50%) rotate(0deg) !important;
    border: 0 none;
    border-radius: 8px !important;
    background: none !important;
    color: #152945 !important;
    font-family: 'bootstrap-icons' !important;
    font-size: 14px !important;
    transition: transform .25s ease, color .25s ease, background .25s ease !important;
  }

  .primary-nav > .megaMenuMainCnt .menu-column.is-expanded > .menu-column-heading {
    background: #f7f5f0 !important;
  }

  .primary-nav > .megaMenuMainCnt .menu-column.is-expanded > .menu-column-heading::after {
    transform: translateY(-50%) rotate(180deg) !important;
    color: #e99000 !important;
  }

  .primary-nav > .megaMenuMainCnt .menu-column > .menu-link,
  .primary-nav > .megaMenuMainCnt .menu-column > .menu-link-featured {
    display: none !important;
    width: 100% !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 34px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    border-top: 1px solid transparent !important;
    background: #fff !important;
    transform: none !important;
    transition: max-height .3s ease, padding .3s ease, opacity .2s ease !important;
  }

  .primary-nav > .megaMenuMainCnt .menu-column.is-expanded > .menu-link,
  .primary-nav > .megaMenuMainCnt .menu-column.is-expanded > .menu-link-featured {
    max-height: 180px !important;
    padding: 13px 34px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Keep the mobile AI Services accordion focused on its three sections. */
  .primary-nav > .megaMenuMainCnt .menu-featured-card,
  .primary-nav > .megaMenuMainCnt .mega-menu-strip {
    display: none !important;
  }
  .menu-column-heading { border-bottom: 0 none;}
}

/* =========================================================
   MOBILE ACCORDION — remove collapsed-link blank space
   Hidden submenu links are flex items, so explicitly reset their
   automatic minimum height. This keeps collapsed sections at zero
   height instead of reserving their content height.
   ========================================================= */
@media only screen and (max-width: 820px) {
  .primary-nav > .megaMenuMainCnt .menu-column > .menu-link,
  .primary-nav > .megaMenuMainCnt .menu-column > .menu-link-featured,
  .megaMenuMainCnt .menu-column > .menu-link,
  .megaMenuMainCnt .menu-column > .menu-link-featured {
    min-height: 0 !important;
    height: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }

  .primary-nav > .megaMenuMainCnt .menu-column.is-expanded > .menu-link,
  .primary-nav > .megaMenuMainCnt .menu-column.is-expanded > .menu-link-featured,
  .megaMenuMainCnt .menu-column.is-expanded > .menu-link,
  .megaMenuMainCnt .menu-column.is-expanded > .menu-link-featured {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    display: block !important;
  }
}

/* =========================================================
   MOBILE PLATFORMS — match AI SERVICES inline accordion
   No separate panel, no card background, and no collapsed blank space.
   ========================================================= */
/* @media only screen and (max-width: 820px) {
  .primary-nav > #platforms-menu {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
    z-index: auto !important;
  }

  .primary-nav > #platforms-menu[hidden] {
    display: none !important;
  }

  .primary-nav > #platforms-menu .mega-menu-close,
  .primary-nav > #platforms-menu .menu-featured-card,
  .primary-nav > #platforms-menu .mega-menu-strip {
    display: none !important;
  }

  .primary-nav > #platforms-menu .mega-menu-grid {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .primary-nav > #platforms-menu .menu-column {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e3ddd3 !important;
    background: #fff !important;
  }

  .primary-nav > #platforms-menu .menu-column-heading {
    position: relative !important;
    min-height: 64px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 54px 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    background: #fff !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  .primary-nav > #platforms-menu .menu-kicker {
    margin: 0 0 3px !important;
    font-size: 9px !important;
  }

  .primary-nav > #platforms-menu .menu-title {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .primary-nav > #platforms-menu .menu-column-heading::after {
    content: '\f282' !important;
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-50%) rotate(0deg) !important;
    border: 1px solid #d7d0c5 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #152945 !important;
    font-family: 'bootstrap-icons' !important;
    font-size: 11px !important;
    transition: transform .25s ease, color .25s ease !important;
  }

  .primary-nav > #platforms-menu .menu-column.is-expanded > .menu-column-heading {
    background: #fff !important;
  }

  .primary-nav > #platforms-menu .menu-column.is-expanded > .menu-column-heading::after {
    transform: translateY(-50%) rotate(180deg) !important;
    color: #e99000 !important;
    background: #fff !important;
  }

  .primary-nav > #platforms-menu .menu-column > .menu-link,
  .primary-nav > #platforms-menu .menu-column > .menu-link-featured {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 34px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    border-top: 1px solid transparent !important;
    background: #fff !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: max-height .3s ease, height .3s ease, padding .3s ease, opacity .2s ease, visibility .2s ease !important;
  }

  .primary-nav > #platforms-menu .menu-column.is-expanded > .menu-link,
  .primary-nav > #platforms-menu .menu-column.is-expanded > .menu-link-featured {
    height: auto !important;
    min-height: 0 !important;
    max-height: 180px !important;
    padding: 13px 34px !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-top-color: #e6e0d7 !important;
  }

  .primary-nav > #platforms-menu .menu-link-title,
  .primary-nav > #platforms-menu .menu-link-desc {
    background: transparent !important;
  } 
}*/


/* =========================================================
   AI Strategy & Advisory page — reusable component classes
   Prefix: adv-  (advisory page namespace)
   ========================================================= */

/* ── Hero ─────────────────────────────────────────────── */
.adv-hero {
  background: var(--navy-mid);          /* #12304F, closest to source #072F55 */
  background: #072F55;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.adv-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  pointer-events: none;
}

/* Inner hero wrapper: constrains to 1280px, adds horizontal padding,
   and handles vertical spacing. Does NOT rely on .container class. */
.adv-hero-inner {
  position: relative;
  width: min(calc(100% - 80px), 1280px);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 104px;
  box-sizing: border-box;
}

.adv-hero-content {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.adv-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--orange);
}

.adv-hero-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(36px, 4.5vw, 54px);
  line-height: 1.08;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.02em;
}

.adv-hero-lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: #C9D7E6;
  max-width: 580px;
}

.adv-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;
}

/* Ghost CTA used in the hero alongside the primary */
.button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255,255,255,.55);
  color: var(--white);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.button-ghost:hover {
  background: rgba(255,255,255,.08);
  color: var(--white);
}

/* Navy-filled CTA (used at section level) */
.button-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: var(--white);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.button-navy:hover {
  background: #06375F;
  color: var(--white);
}

.adv-hero-aside {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* White card floating in the dark hero */
.adv-hero-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adv-hero-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.adv-hero-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #B26A00;
}

.adv-service-pill {
  background: #FFF1DB;
  color: #7A4800;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}

.adv-hero-card-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.adv-service-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adv-service-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #E3E9F0;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.adv-service-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.adv-sibling-row {
  display: flex;
  gap: 14px;
}

.adv-sibling-card {
  flex: 1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.adv-sibling-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9FB8D3;
}

.adv-sibling-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--white);
}

/* ── "Why AI stalls" reason items ─────────────────────── */
.adv-reasons-list {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adv-reason-item {
  display: flex;
  gap: 20px;
  padding: 24px;
  border: 1px solid #E3E9F0;
  border-radius: var(--radius-sm);
}

.adv-reason-number {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--orange);
  min-width: 44px;
  flex-shrink: 0;
}

.adv-reason-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.adv-reason-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.adv-reason-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── "Three ways we help" service cards ───────────────── */
.adv-cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.adv-service-card {
  flex: 1 1 320px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.adv-service-card:hover {
  box-shadow: 0 12px 32px rgba(11,30,51,.12);
  transform: translateY(-2px);
  color: var(--ink);
}

.adv-service-card-visual {
  height: 180px;
  position: relative;
  flex-shrink: 0;
}

.adv-service-card-visual svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.adv-service-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.adv-service-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.adv-service-card-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--blue);
}

.adv-service-card-kicker--orange { color: #B26A00; }
.adv-service-card-kicker--teal   { color: #1F6B5E; }

.adv-service-card-duration {
  font-size: 13px;
  color: var(--muted);
}

.adv-service-card-title {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
}

.adv-service-card-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.adv-service-card-link {
  margin-top: auto;
  padding-top: 12px;
  font-weight: 600;
  font-size: 16px;
  color: var(--blue);
}

/* ── "Why Seashore" pillars ───────────────────────────── */
.adv-pillars-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.adv-pillar {
  flex: 1 1 250px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 3px solid var(--blue);
}

.adv-pillar--orange {
  border-top-color: var(--orange);
}

.adv-pillar-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
}

.adv-pillar-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── CTA band ─────────────────────────────────────────── */
.adv-cta-section {
  padding-bottom: 96px;
}

.adv-cta-band {
  background: #072F55;
  border-radius: var(--radius-lg);
  padding: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.adv-cta-band-ring {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 40px solid rgba(255,156,0,.18);
  pointer-events: none;
}

.adv-cta-content {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.adv-cta-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}

.adv-cta-lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #C9D7E6;
}

/* Advisory page shared content container — 1280px max-width with 40px gutters */
.adv-container {
  width: min(calc(100% - 80px), 1280px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 112px;
  padding-bottom: 112px;
  box-sizing: border-box;
}

/* The CTA section uses adv-container but needs no vertical padding of its own
   (the .adv-cta-section handles the bottom spacing) */
.adv-cta-section .adv-container {
  padding-top: 0;
  padding-bottom: 0;
}

/* ── Responsive overrides ─────────────────────────────── */
@media only screen and (max-width: 820px) {
  .adv-hero-inner {
    width: min(calc(100% - 48px), 1280px);
    padding-top: 64px;
    padding-bottom: 72px;
    gap: 36px;
  }

  .adv-container {
    width: min(calc(100% - 48px), 1280px);
    padding-top: 64px;
    padding-bottom: 64px;
    gap: 32px;
  }

  .adv-hero-content,
  .adv-hero-aside {
    flex: 1 1 100%;
  }

  .adv-reasons-list {
    flex: 1 1 100%;
  }

  .adv-cta-band {
    padding: 36px 28px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .adv-cta-content {
    flex: 1 1 100%;
  }
}

@media only screen and (max-width: 560px) {
  .adv-service-card {
    flex: 1 1 100%;
  }

  .adv-pillar {
    flex: 1 1 100%;
  }

  .adv-sibling-row {
    flex-direction: column;
  }

  .adv-cta-band {
    padding: 28px 20px;
  }
}

/* =========================================================
   AI Strategy & Roadmap page — reusable component classes
   Prefix: sr-  (strategy-roadmap namespace)
   ========================================================= */

/* ── Breadcrumb ──────────────────────────────────────── */
.sr-breadcrumb {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: #9FB8D3;
  width: 100%;
}

.sr-breadcrumb a {
  color: #9FB8D3;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sr-breadcrumb a:hover {
  color: var(--white);
}

.sr-breadcrumb-sep {
  color: #4A6582;
}

.sr-breadcrumb-current {
  color: var(--white);
}

/* ── Hero two-col row (breadcrumb + cols stacked vertically) */
.sr-hero-body {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
  width: 100%;
}

.sr-hero-copy {
  flex: 1 1 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Matrix card (white card in dark hero) ───────────── */
.sr-matrix-card {
  flex: 1 1 440px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 28px 70px rgba(0,0,0,.32);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--ink);
}

.sr-matrix-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.sr-matrix-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 0;
}

.sr-matrix-badge {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sr-roadmap-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sr-roadmap-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sr-roadmap-quarters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.sr-quarter {
  border-radius: 6px;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.sr-quarter--q1 { background: var(--orange);  color: #1A1100; }
.sr-quarter--q2 { background: #FFD49A;         color: #3D2600; }
.sr-quarter--q3 { background: var(--blue);     color: var(--white); }
.sr-quarter--q4 { background: #06375F;         color: var(--white); }

/* ── Feature cards grid (What we do) ─────────────────── */
.sr-cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.sr-feature-card {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--line);
}

.sr-feature-card--dark {
  background: var(--navy);
  border-color: var(--navy);
}

.sr-feature-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.sr-feature-card-title--white {
  color: var(--white);
}

.sr-feature-card-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.sr-feature-card-desc--light {
  color: #C9D7E6;
}

/* ── Process steps (How it works) ────────────────────── */
.sr-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
}
.sr-steps-grid.grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sr-step {
  padding: 0 24px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sr-step:last-child {
  padding-right: 0;
}

.sr-step-marker-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sr-step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  flex-shrink: 0;
}

.sr-step-circle--active {
  background: var(--orange);
  color: #1A1100;
}

.sr-step-connector {
  flex: 1;
  height: 2px;
  background: #D3DEEA;
}

.sr-step-week {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #B26A00;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sr-step-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.sr-step-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── What you get / Who it's for ─────────────────────── */
.sr-outcomes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.sr-deliverables-card {
  flex: 1 1 460px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid var(--line);
}

.sr-check-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

.sr-check-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.sr-check-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.sr-audience-col {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sr-audience-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sr-audience-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}

.sr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sr-tag {
  background: var(--white);
  border: 1px solid #D3DEEA;
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 15px;
  color: var(--ink);
}

/* ── FAQ accordion ───────────────────────────────────── */
.sr-faq-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}

.sr-faq-heading-col {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sr-faq-list {
  flex: 2 1 560px;
  min-width: 0;
  border-top: 1px solid var(--line);
}

.sr-faq-item {
  border-bottom: 1px solid var(--line);
}

.sr-faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.sr-faq-item summary::-webkit-details-marker {
  display: none;
}

.sr-faq-item summary::after {
  content: '+';
  color: var(--blue);
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.sr-faq-item[open] summary::after {
  content: '–';
}

.sr-faq-answer {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  padding-bottom: 22px;
}

/* ── Related services ────────────────────────────────── */
.sr-related-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.sr-related-card {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.sr-related-card:hover {
  box-shadow: 0 8px 24px rgba(11,30,51,.1);
  transform: translateY(-2px);
  color: var(--ink);
}

.sr-related-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sr-related-card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
}

.sr-related-card-desc {
  font-size: 15px;
  color: var(--muted);
}

.sr-related-card-arrow {
  color: var(--blue);
  font-size: 22px;
  flex-shrink: 0;
}

/* ── Related section spacing ─────────────────────────── */
.sr-related-section {
  padding-bottom: 96px;
}

.sr-related-section .adv-container {
  padding-top: 0;
  gap: 24px;
}

/* ── Responsive ──────────────────────────────────────── */
@media only screen and (max-width: 1024px) {
  .sr-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .sr-step {
    padding-right: 0;
    padding-bottom: 0;
  }

  .sr-step-connector {
    display: none;
  }
}

@media only screen and (max-width: 820px) {
  .sr-hero-body {
    flex-direction: column;
    gap: 36px;
  }

  .sr-hero-copy,
  .sr-matrix-card {
    flex: 1 1 100%;
  }

  .sr-steps-grid {
    grid-template-columns: 1fr;
  }

  .sr-deliverables-card,
  .sr-audience-col {
    flex: 1 1 100%;
  }

  .sr-faq-heading-col,
  .sr-faq-list {
    flex: 1 1 100%;
  }

  .sr-related-card {
    flex: 1 1 100%;
  }
}

@media only screen and (max-width: 560px) {
  .sr-roadmap-quarters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sr-feature-card {
    flex: 1 1 100%;
  }

  .sr-deliverables-card {
    padding: 24px;
  }
}

/* =========================================================
   AI Governance & Security page — reusable component classes
   Prefix: gs-  (governance-security namespace)
   ========================================================= */

/* ── Hero posture console card ───────────────────────── */
.gs-console-card {
  flex: 1 1 440px;
  min-width: 0;
  background: #0B2440;
  border: 1px solid #1F4A78;
  border-radius: var(--radius-md);
  box-shadow: 0 28px 70px rgba(0,0,0,.4);
  overflow: hidden;
}

.gs-console-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #1F4A78;
}

.gs-console-dots {
  display: flex;
  gap: 6px;
}

.gs-console-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2C4F75;
}

.gs-console-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #9FB8D3;
}

.gs-console-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gs-posture-row {
  display: flex;
  gap: 18px;
  align-items: center;
}

.gs-posture-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gs-posture-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  color: var(--white);
  margin: 0;
}

.gs-posture-desc {
  font-size: 14px;
  color: #9FB8D3;
  margin: 0;
}

.gs-status-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gs-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0F2E52;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
}

.gs-status-label {
  color: #E3ECF5;
}

.gs-status-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.gs-status-badge--green  { background: #1E5C3F; color: #BFF0D4; }
.gs-status-badge--amber  { background: #5A3C00; color: #FFD99A; }
.gs-status-badge--blue   { background: #1F4A78; color: #CFE1F3; }

.gs-console-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #9FB8D3;
  border-top: 1px solid #1F4A78;
  padding-top: 14px;
}

.gs-log-warn  { color: var(--orange); }
.gs-log-info  { color: #FFD99A; }
.gs-log-ok    { color: #7FD6A8; }

/* ── Hero badge alongside eyebrow ────────────────────── */
.gs-hero-eyebrow-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.gs-hero-badge {
  background: var(--orange);
  color: #1A1100;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: .06em;
  font-family: var(--font-mono);
}

/* ── Two-sided security cards ────────────────────────── */
.gs-sides-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.gs-side-card {
  flex: 1 1 460px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gs-side-card-header {
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.gs-side-card-header--blue  { background: var(--blue); }
.gs-side-card-header--navy  { background: var(--navy); }

.gs-side-card-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gs-side-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #FFD08A;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gs-side-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
}

.gs-side-card-body {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.gs-side-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gs-side-item-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.gs-side-item-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── Dark "How it works" steps on navy bg ────────────── */
.gs-steps-section {
  background: var(--navy);
  color: var(--white);
}

.gs-steps-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.gs-step-card {
  flex: 1 1 190px;
  min-width: 0;
  background: #0F2E52;
  border: 1px solid #1F4A78;
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gs-step-card--active {
  background: var(--orange);
  border-color: var(--orange);
}

.gs-step-num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--orange);
}

.gs-step-num--active {
  color: #3D2600;
}

.gs-step-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--white);
}

.gs-step-title--active {
  color: #1A1100;
}

.gs-step-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #B9C8D8;
}

.gs-step-desc--active {
  color: #3D2600;
}

/* ── Frameworks badge block ──────────────────────────── */
.gs-frameworks-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gs-frameworks-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gs-frameworks-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gs-framework-badge {
  background: #EEF4FA;
  color: #06375F;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 15px;
}

/* ── Responsive ──────────────────────────────────────── */
@media only screen and (max-width: 820px) {
  .gs-console-card,
  .gs-side-card {
    flex: 1 1 100%;
  }

  .gs-steps-grid {
    flex-direction: column;
  }

  .gs-step-card {
    flex: 1 1 100%;
  }
}

@media only screen and (max-width: 560px) {
  .gs-side-card-header {
    padding: 20px 22px;
  }

  .gs-side-card-body {
    padding: 20px 22px;
  }
}

/* =========================================================
   AI Adoption & Change Management page — reusable classes
   Prefix: ac-  (adoption-change namespace)
   ========================================================= */

/* ── Hero adoption dashboard card ────────────────────── */
.ac-dashboard-card {
  flex: 1 1 440px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 28px 70px rgba(0,0,0,.32);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--ink);
}

.ac-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.ac-dashboard-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 0;
}

.ac-dashboard-badge {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Legend row */
.ac-legend {
  display: flex;
  gap: 6px;
}

.ac-legend-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ac-legend-swatch {
  height: 6px;
  border-radius: 3px;
}

.ac-legend-swatch--aware    { background: #095090; }
.ac-legend-swatch--trained  { background: #3B7FC4; }
.ac-legend-swatch--using    { background: #3B9C8C; }
.ac-legend-swatch--champion { background: var(--orange); }

.ac-legend-label {
  font-size: 12px;
  color: var(--muted);
}

/* Stacked bar rows */
.ac-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ac-bar-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ac-bar-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.ac-bar-track {
  height: 12px;
  border-radius: 6px;
  background: #EEF2F6;
  display: flex;
  overflow: hidden;
}

.ac-bar-seg {
  height: 100%;
}

/* Next-action nudge */
.ac-next-action {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFF4E2;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.ac-next-action-text {
  font-size: 14px;
  color: #5A3500;
  margin: 0;
}

/* ── "Delivered your way" dark card ──────────────────── */
.ac-delivery-card {
  background: var(--navy);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ac-delivery-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
}

.ac-delivery-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ac-delivery-tag {
  background: #0F2E52;
  color: #E3ECF5;
  border: 1px solid #1F4A78;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
}

/* ── Responsive ──────────────────────────────────────── */
@media only screen and (max-width: 820px) {
  .ac-dashboard-card {
    flex: 1 1 100%;
  }
}

@media only screen and (max-width: 560px) {
  .ac-legend {
    flex-wrap: wrap;
    gap: 10px;
  }

  .ac-legend-item {
    flex: 1 1 40%;
  }
}

/* =========================================================
   sr-cards-grid — 3-column variant (roadmap "What we do")
   First 6 cards: 3 per row. Last row: card 7 = 1 col,
   card 8 (dark featured) = 2 cols wide.
   ========================================================= */
.sr-cards-grid--3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Card that spans 2 of the 3 columns */
.sr-feature-card--span2 {
  grid-column: span 2;
}

@media only screen and (max-width: 1024px) {
  .sr-cards-grid--3col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sr-feature-card--span2 {
    grid-column: span 1;
  }
}

@media only screen and (max-width: 560px) {
  .sr-cards-grid--3col {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Governance & Security — 5-column pillars grid
   Matches reference: all 5 pillars in one equal row with
   coloured top borders, no wrapping on desktop.
   ========================================================= */
.gs-pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

.gs-pillars-grid .adv-pillar {
  flex: none; /* override flex shorthand from adv-pillar */
}

@media only screen and (max-width: 1024px) {
  .gs-pillars-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 640px) {
  .gs-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 420px) {
  .gs-pillars-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   AI Engineering page — reusable component classes
   Prefix: ae-  (ai-engineering namespace)
   ========================================================= */

/* ── Hero system-diagram card ────────────────────────── */
.ae-diagram-card {
  flex: 1 1 440px;
  min-width: 0;
  background: #0B2440;
  border: 1px solid #1F4A78;
  border-radius: var(--radius-md);
  box-shadow: 0 28px 70px rgba(0,0,0,.4);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ae-diagram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ae-diagram-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #9FB8D3;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Systems grid (ERP / CRM / WMS / IoT) */
.ae-sys-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ae-sys-pill {
  background: #0F2E52;
  border: 1px solid #1F4A78;
  color: #E3ECF5;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* AI layer band */
.ae-ai-layer {
  background: var(--orange);
  color: #1A1100;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ae-ai-layer-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  margin: 0;
}

.ae-ai-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ae-ai-tag {
  background: rgba(255,255,255,.55);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 13px;
  font-weight: 600;
}

/* Outcome cards row */
.ae-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ae-outcome-card {
  background: var(--white);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ae-outcome-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.ae-outcome-desc {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* ── Platforms section ───────────────────────────────── */
.ae-platforms-section {
  padding-top: 80px;
  padding-bottom: 80px;
}

.ae-platforms-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.ae-platforms-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.ae-platform-tag {
  border: 1px solid #D3DEEA;
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.ae-platform-tag--featured {
  border-color: #FFC266;
  background: #FFF4E2;
  color: #6B3F00;
}

/* ── Responsive ──────────────────────────────────────── */
@media only screen and (max-width: 820px) {
  .ae-diagram-card {
    flex: 1 1 100%;
  }

  .ae-sys-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ae-outcomes-grid {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 560px) {
  .ae-sys-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   AI Agents & Copilots page — reusable component classes
   Prefix: aac-  (ai-agents-copilots namespace)
   ========================================================= */

/* ── Hero agent workflow card ────────────────────────── */
.aac-agent-card {
  flex: 1 1 440px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 28px 70px rgba(0,0,0,.32);
  overflow: hidden;
  color: var(--body);
}

.aac-agent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.aac-agent-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aac-agent-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.aac-agent-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

.aac-agent-badge {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

.aac-agent-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Agent workflow step */
.aac-step-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.aac-step-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.aac-step-icon--complete {
  background: #E2F3EA;
}

.aac-step-icon--warning {
  background: #FFF1DB;
  color: #9A5B00;
  font-weight: 700;
  font-size: 13px;
}

.aac-step-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.aac-step-title {
  font-weight: 600;
  font-size: 14px;
  margin: 0;
}

.aac-step-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.aac-agent-approval {
  background: var(--bg-light);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.aac-agent-approval-text {
  font-size: 14px;
  color: var(--body);
  margin: 0;
}

.aac-agent-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.aac-agent-btn-primary {
  min-height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 8px;
  background: var(--orange);
  color: #1A1100;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.aac-agent-btn-secondary {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #C9D5E2;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

/* ── Horizontal process steps (How it works) ─────────── */
.aac-process-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.aac-process-step {
  flex: 1 1 200px;
  min-width: 0;
  padding: 0 20px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aac-process-step:last-child {
  padding-right: 0;
}

.aac-process-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aac-process-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  flex: none;
}

.aac-process-num--active {
  background: var(--orange);
  color: #1A1100;
}

.aac-process-line {
  flex: 1;
  height: 2px;
  background: #D3DEEA;
}

.aac-process-title {
  font-size: 20px;
  margin: 0;
  font-weight: 600;
}

.aac-process-desc {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

/* ── What you get + Use cases two-col ────────────────── */
.aac-deliverables-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.aac-deliverables-card {
  flex: 1 1 460px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid var(--line);
}

.aac-deliverables-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 17px;
}

.aac-check-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.aac-check-icon {
  flex: none;
  margin-top: 2px;
}

.aac-use-cases-col {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aac-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aac-pill {
  background: var(--white);
  border: 1px solid #D3DEEA;
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 15px;
}

/* ── Responsive ──────────────────────────────────────── */
@media only screen and (max-width: 820px) {
  .aac-agent-card {
    flex: 1 1 100%;
  }

  .aac-process-step {
    flex: 1 1 100%;
    padding-right: 0;
  }

  .aac-process-line {
    display: none;
  }

  .aac-deliverables-card {
    padding: 28px 20px;
  }
}

@media only screen and (max-width: 560px) {
  .aac-agent-actions {
    flex-direction: column;
  }

  .aac-agent-btn-primary,
  .aac-agent-btn-secondary {
    width: 100%;
  }
}

/* =========================================================
   AI Integration & Automation page — reusable classes
   Prefix: aia-  (ai-integration-automation namespace)
   ========================================================= */

/* ── Hero integration diagram card ───────────────────── */
.aia-diagram-card {
  flex: 1 1 440px;
  min-width: 0;
  background: #0B2440;
  border: 1px solid #1F4A78;
  border-radius: var(--radius-md);
  box-shadow: 0 28px 70px rgba(0,0,0,.4);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aia-diagram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.aia-diagram-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
  margin: 0;
}

.aia-diagram-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #9FB8D3;
}

.aia-diagram-svg {
  display: block;
  width: 100%;
}

.aia-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.aia-metric-card {
  background: #0F2E52;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aia-metric-label {
  font-size: 12px;
  color: #9FB8D3;
  margin: 0;
}

.aia-metric-value {
  font-weight: 700;
  color: var(--white);
  margin: 0;
}

.aia-metric-value--warning {
  color: #FFD08A;
}

.aia-metric-value--success {
  color: #7FD6A8;
}

/* ── Systems pills ───────────────────────────────────── */
.aia-systems-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aia-system-pill {
  background: #EEF4FA;
  color: #06375F;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 15px;
}

.aia-system-pill--featured {
  background: #FFF4E2;
  color: #6B3F00;
}

/* ── Deliverables two-col layout ─────────────────────── */
.aia-deliverables-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.aia-deliverables-card {
  flex: 1 1 460px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid var(--line);
}

.aia-deliverables-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 17px;
}

.aia-systems-col {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.aia-section-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Responsive ──────────────────────────────────────── */
@media only screen and (max-width: 820px) {
  .aia-diagram-card {
    flex: 1 1 100%;
  }

  .aia-metrics-grid {
    grid-template-columns: 1fr;
  }

  .aia-deliverables-card {
    padding: 28px 20px;
  }
}

/* =========================================================
   AI Data & Products page — reusable component classes
   Prefix: adp-  (ai-data-products namespace)
   ========================================================= */

/* ── Hero dashboard preview card ─────────────────────── */
.adp-dashboard-card {
  flex: 1 1 440px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 28px 70px rgba(0,0,0,.32);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--body);
}

.adp-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.adp-dashboard-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
}

.adp-dashboard-badge {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

.adp-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.adp-metric-card {
  background: var(--bg-light);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adp-metric-card--warning {
  background: #FFF4E2;
}

.adp-metric-label {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.adp-metric-label--warning {
  color: #7A4800;
}

.adp-metric-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  margin: 0;
}

.adp-metric-value--warning {
  color: #7A4800;
}

.adp-chart-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.adp-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.adp-chart-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.adp-chart-legend {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.adp-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.adp-legend-line {
  width: 14px;
  height: 2px;
}

.adp-legend-line--actual {
  background: var(--blue);
}

.adp-legend-line--forecast {
  height: 0;
  border-top: 2px dashed #E08800;
}

.adp-chart-svg {
  display: block;
  width: 100%;
}

.adp-search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-light);
  border-radius: 10px;
  padding: 12px 14px;
}

.adp-search-text {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

/* ── Layered service cards ───────────────────────────── */
.adp-layers-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}

.adp-layer-card {
  flex: 1 1 320px;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.adp-layer-header {
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.adp-layer-header--blue {
  background: var(--blue);
}

.adp-layer-header--teal {
  background: #0E4A5C;
}

.adp-layer-header--orange {
  background: var(--orange);
}

.adp-layer-kicker {
  color: #FFD08A;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
}

.adp-layer-kicker--dark {
  color: #3D2600;
}

.adp-layer-title {
  font-size: 20px;
  color: var(--white);
  margin: 0;
}

.adp-layer-title--dark {
  color: #1A1100;
}

.adp-layer-body {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.adp-layer-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adp-layer-item-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.adp-layer-item-desc {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

/* ── Deliverables two-col layout ─────────────────────── */
.adp-deliverables-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.adp-deliverables-card {
  flex: 1 1 460px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid var(--line);
}

.adp-deliverables-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 17px;
}

.adp-examples-col {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Responsive ──────────────────────────────────────── */
@media only screen and (max-width: 820px) {
  .adp-dashboard-card {
    flex: 1 1 100%;
  }

  .adp-metrics-grid {
    grid-template-columns: 1fr;
  }

  .adp-deliverables-card {
    padding: 28px 20px;
  }
}

/* =========================================================
   AI Operations page — reusable component classes
   Prefix: aop-  (ai-operations namespace)
   ========================================================= */

/* ── Hero operations status console ─────────────────── */
.aop-console {
  flex: 1 1 440px;
  min-width: 0;
  background: #0B2440;
  border: 1px solid #1F4A78;
  border-radius: var(--radius-md);
  box-shadow: 0 28px 70px rgba(0,0,0,.4);
  overflow: hidden;
}

.aop-console__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #1F4A78;
}

.aop-console__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--white);
}

.aop-console__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4CC38A;
}

.aop-console__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #9FB8D3;
}

.aop-console__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aop-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #0F2E52;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
}

.aop-status-row__name {
  color: #E3ECF5;
}

.aop-badge--ok {
  background: #1E5C3F;
  color: #BFF0D4;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.aop-badge--warn {
  background: #5A3C00;
  color: #FFD99A;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.aop-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
}

.aop-chart__header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #9FB8D3;
}

.aop-chart__threshold {
  color: #FFD08A;
}

.aop-chart__svg {
  display: block;
}

/* ── Why AI needs operating — numbered cards ─────────── */
.aop-reason-cards {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aop-reason-card {
  display: flex;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.aop-reason-card__number {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--orange);
  min-width: 44px;
}

.aop-reason-card__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aop-reason-card__title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.aop-reason-card__text {
  color: var(--muted);
  line-height: 1.6;
}

/* ── Lifecycle phase cards ──────────────────────────── */
.aop-lifecycle-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
}

.aop-lifecycle-card {
  flex: 1 1 280px;
  min-width: 0;
  background: #0F2E52;
  border: 1px solid #1F4A78;
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  transition: var(--transition-base);
}

.aop-lifecycle-card:hover {
  transform: translateY(-2px);
  border-color: #2F5A88;
}

.aop-lifecycle-card--active {
  background: var(--orange);
  border-color: var(--orange);
}

.aop-lifecycle-card--active:hover {
  background: #F08F00;
  border-color: #F08F00;
}

.aop-lifecycle-card__label {
  font-family: var(--font-mono);
  color: #9FB8D3;
  font-size: 13px;
}

.aop-lifecycle-card--active .aop-lifecycle-card__label {
  color: #3D2600;
}

.aop-lifecycle-card__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}

.aop-lifecycle-card--active .aop-lifecycle-card__title {
  color: #1A1100;
}

.aop-lifecycle-card__desc {
  color: #B9C8D8;
  font-size: 15px;
  line-height: 1.5;
}

.aop-lifecycle-card--active .aop-lifecycle-card__desc {
  color: #3D2600;
}

/* =========================================================
   AI Operations page — Hero & Lifecycle section
   Prefix: aop-  (hero + section wrappers)
   ========================================================= */

/* ── Hero section ───────────────────────────────────── */
.aop-hero {
  position: relative;
  overflow: hidden;
  background: #061E36;
  color: #FFFFFF;
}

.aop-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.aop-hero-inner {
  position: relative;
  width: min(calc(100% - 80px), 1280px);
  margin-inline: auto;
  padding-top: 88px;
  padding-bottom: 104px;
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
}

.aop-hero-content {
  flex: 1 1 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.aop-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
}

.aop-hero-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 54px;
  line-height: 1.08;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.aop-hero-lead {
  margin: 0;
  font-size: 19px;
  color: #C9D7E6;
  max-width: 560px;
  line-height: 1.6;
}

.aop-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.aop-hero-aside {
  flex: 1 1 440px;
  min-width: 0;
}

/* ── Lifecycle dark section wrapper ─────────────────── */
.aop-lifecycle-section {
  background: #0B2440;
  padding-block: 96px;
}

.aop-lifecycle-section .content-stack {
  margin-bottom: 44px;
}

/* Eyebrow & title colour overrides inside the dark section */
.aop-eyebrow--orange {
  color: var(--orange) !important;
}

.aop-title--white {
  color: #FFFFFF !important;
}

/* ── Responsive tweaks ──────────────────────────────── */
@media only screen and (max-width: 820px) {
  .aop-hero-inner {
    padding-top: 56px;
    padding-bottom: 64px;
    width: calc(100% - 40px);
  }

  .aop-hero-title {
    font-size: 38px;
  }

  .aop-hero-aside {
    flex: 1 1 100%;
  }
}

/* =========================================================
   AI Monitoring & MLOps page — reusable component classes
   Prefix: aml-  (ai-monitoring-mlops namespace)
   ========================================================= */

/* ── Hero section ─────────────────────────────────────── */
.aml-hero {
  position: relative;
  overflow: hidden;
  background: #072F55;
  color: #FFFFFF;
}

.aml-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.aml-hero-inner {
  position: relative;
  width: min(calc(100% - 80px), 1280px);
  margin-inline: auto;
  padding-top: 64px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.aml-hero-breadcrumb {
  font-size: 14px;
  color: #9FB8D3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.aml-hero-breadcrumb a {
  color: #9FB8D3;
  text-decoration: none;
}

.aml-hero-breadcrumb a:hover {
  color: #FFFFFF;
}

.aml-hero-breadcrumb__current {
  color: #FFFFFF;
}

.aml-hero-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
}

.aml-hero-content {
  flex: 1 1 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.aml-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
}

.aml-hero-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 54px;
  line-height: 1.08;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.aml-hero-lead {
  margin: 0;
  font-size: 19px;
  color: #C9D7E6;
  max-width: 560px;
  line-height: 1.6;
}

.aml-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;
}

/* ── Hero dashboard card (white) ─────────────────────── */
.aml-dashboard-card {
  flex: 1 1 440px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 28px 70px rgba(0,0,0,.32);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--ink);
}

.aml-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.aml-dashboard-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: #0B2440;
  margin: 0;
}

.aml-dashboard-badge {
  font-size: 12px;
  color: #5A6E84;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

.aml-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.aml-metric {
  background: #F3F6FA;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aml-metric__label {
  font-size: 12px;
  color: #5A6E84;
  margin: 0;
}

.aml-metric__value {
  font-weight: 700;
  color: #0B2440;
  font-size: 15px;
  margin: 0;
}

.aml-metric__value--success {
  color: #1E7A4C;
}

.aml-metric__value--mono {
  font-family: var(--font-mono);
}

.aml-chart-svg {
  display: block;
  width: 100%;
}

.aml-event-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #4A5D72;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.aml-event-log__item {
  display: flex;
  gap: 6px;
}

/* ── Feature cards grid (What we do) ─────────────────── */
.aml-features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.aml-feature-card {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--white);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--line);
}

.aml-feature-card--dark {
  background: #0B2440;
  border-color: #0B2440;
}

.aml-feature-card__icon {
  flex: none;
}

.aml-feature-card__title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

.aml-feature-card--dark .aml-feature-card__title {
  color: #FFFFFF;
}

.aml-feature-card__desc {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
  line-height: 1.6;
}

.aml-feature-card--dark .aml-feature-card__desc {
  color: #C9D7E6;
}

/* ── MLOps loop steps (dark section) ─────────────────── */
.aml-loop-section {
  background: #0B2440;
  padding-block: 96px;
}

.aml-loop-section .content-stack {
  margin-bottom: 44px;
}

.aml-loop-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.aml-loop-step {
  flex: 1 1 170px;
  min-width: 0;
  background: #0F2E52;
  border: 1px solid #1F4A78;
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aml-loop-step--active {
  background: var(--orange);
  border-color: var(--orange);
}

.aml-loop-step__num {
  font-family: var(--font-mono);
  color: var(--orange);
  font-size: 13px;
}

.aml-loop-step--active .aml-loop-step__num {
  color: #3D2600;
}

.aml-loop-step__title {
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
}

.aml-loop-step--active .aml-loop-step__title {
  color: #1A1100;
}

.aml-loop-step__desc {
  color: #B9C8D8;
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

.aml-loop-step--active .aml-loop-step__desc {
  color: #3D2600;
}

/* ── What you get + Who it's for two-col ─────────────── */
.aml-deliverables-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.aml-deliverables-card {
  flex: 1 1 460px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid var(--line);
}

.aml-deliverables-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 17px;
}

.aml-check-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.aml-check-icon {
  flex: none;
  margin-top: 2px;
}

.aml-aside-col {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.aml-aside-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aml-aside-text {
  font-size: 18px;
  color: var(--ink);
  margin: 0;
  line-height: 1.6;
}

.aml-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aml-pill {
  background: var(--white);
  border: 1px solid #D3DEEA;
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 15px;
}

/* ── FAQ accordion ───────────────────────────────────── */
.aml-faq-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
}

.aml-faq-intro {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aml-faq-list {
  flex: 2 1 560px;
  min-width: 0;
  border-top: 1px solid var(--line);
}

.aml-faq-item {
  border-bottom: 1px solid var(--line);
}

.aml-faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.aml-faq-item summary::-webkit-details-marker {
  display: none;
}

.aml-faq-item summary::after {
  content: '+';
  color: var(--blue);
  font-size: 24px;
  line-height: 1;
  flex: none;
}

.aml-faq-item[open] summary::after {
  content: '–';
}

.aml-faq-answer {
  color: var(--muted);
  padding-bottom: 22px;
  margin: 0;
  line-height: 1.6;
}

/* ── Related services row ────────────────────────────── */
.aml-related-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.aml-related-card {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: var(--transition-base);
}

.aml-related-card:hover {
  border-color: #095090;
  transform: translateY(-2px);
}

.aml-related-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aml-related-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  color: #0B2440;
  margin: 0;
}

.aml-related-card__desc {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

.aml-related-card__arrow {
  color: var(--blue);
  font-size: 22px;
  flex: none;
}

/* ── Responsive ──────────────────────────────────────── */
@media only screen and (max-width: 820px) {
  .aml-hero-inner {
    padding-top: 48px;
    padding-bottom: 64px;
    width: calc(100% - 40px);
  }

  .aml-hero-title {
    font-size: 38px;
  }

  .aml-dashboard-card {
    flex: 1 1 100%;
  }

  .aml-metrics-grid {
    grid-template-columns: 1fr;
  }

  .aml-deliverables-card {
    padding: 28px 20px;
  }

  .aml-faq-intro {
    flex: 1 1 100%;
  }
}

/* =========================================================
   Managed AI Support page — reusable component classes
   Prefix: ams-  (ai-managed-support namespace)
   ========================================================= */

/* ── Hero section ─────────────────────────────────────── */
.ams-hero {
  position: relative;
  overflow: hidden;
  background: #061E36;
  color: #FFFFFF;
}

.ams-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ams-hero-inner {
  position: relative;
  width: min(calc(100% - 80px), 1280px);
  margin-inline: auto;
  padding-top: 64px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ams-hero-breadcrumb {
  font-size: 14px;
  color: #9FB8D3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ams-hero-breadcrumb a {
  color: #9FB8D3;
  text-decoration: none;
}

.ams-hero-breadcrumb a:hover {
  color: #FFFFFF;
}

.ams-hero-breadcrumb__current {
  color: #FFFFFF;
}

.ams-hero-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
}

.ams-hero-content {
  flex: 1 1 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ams-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
}

.ams-hero-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 54px;
  line-height: 1.08;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.ams-hero-lead {
  margin: 0;
  font-size: 19px;
  color: #C9D7E6;
  max-width: 560px;
  line-height: 1.6;
}

.ams-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;
}

/* ── Hero incident card (dark navy) ──────────────────── */
.ams-incident-card {
  flex: 1 1 440px;
  min-width: 0;
  background: #0B2440;
  border: 1px solid #1F4A78;
  border-radius: var(--radius-md);
  box-shadow: 0 28px 70px rgba(0,0,0,.4);
  overflow: hidden;
}

.ams-incident-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #1F4A78;
}

.ams-incident-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: #FFFFFF;
  margin: 0;
}

.ams-incident-badge {
  background: #1E5C3F;
  color: #BFF0D4;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.ams-incident-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ams-incident-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ams-incident-subject {
  color: #E3ECF5;
  font-weight: 600;
  margin: 0;
}

.ams-incident-meta {
  font-size: 13px;
  color: #9FB8D3;
  margin: 0;
}

.ams-incident-meta__mono {
  font-family: var(--font-mono);
}

/* ── Timeline ────────────────────────────────────────── */
.ams-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.ams-timeline-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 16px;
}

.ams-timeline-item:last-child {
  padding-bottom: 0;
}

.ams-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  margin-top: 4px;
}

.ams-timeline-dot--alert {
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255,156,0,0.2);
}

.ams-timeline-dot--action {
  background: #7FB6EA;
}

.ams-timeline-dot--success {
  background: #4CC38A;
}

.ams-timeline-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ams-timeline-label {
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  margin: 0;
}

.ams-timeline-desc {
  color: #9FB8D3;
  font-size: 13px;
  margin: 0;
}

/* ── Support tier cards ──────────────────────────────── */
.ams-tiers-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}

.ams-tier-card {
  flex: 1 1 300px;
  min-width: 0;
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ams-tier-card--basic {
  border: 1px solid var(--line);
  background: var(--white);
}

.ams-tier-card--pro {
  background: #0B2440;
  border: none;
}

.ams-tier-card--enterprise {
  border: 2px solid var(--orange);
  background: var(--white);
}

.ams-tier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.ams-tier-badge {
  background: var(--orange);
  color: #1A1100;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.06em;
}

.ams-tier-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

.ams-tier-card--pro .ams-tier-title {
  color: #FFFFFF;
}

.ams-tier-desc {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
  line-height: 1.6;
}

.ams-tier-card--pro .ams-tier-desc {
  color: #C9D7E6;
}

.ams-tier-list {
  margin: 0;
  padding-left: 20px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.ams-tier-card--pro .ams-tier-list {
  color: #E3ECF5;
}

.ams-tier-list li {
  margin: 0 0 8px 0;
}

.ams-tier-list li:last-child {
  margin-bottom: 0;
}

/* ── Deliverables + aside two-col ────────────────────── */
.ams-deliverables-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.ams-deliverables-card {
  flex: 1 1 460px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid var(--line);
}

.ams-deliverables-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 17px;
}

.ams-check-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ams-check-icon {
  flex: none;
  margin-top: 2px;
}

.ams-aside-col {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ams-aside-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ams-aside-text {
  font-size: 18px;
  color: var(--ink);
  margin: 0;
  line-height: 1.6;
}

.ams-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ams-pill {
  background: var(--white);
  border: 1px solid #D3DEEA;
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 15px;
}

/* ── Responsive ──────────────────────────────────────── */
@media only screen and (max-width: 820px) {
  .ams-hero-inner {
    padding-top: 48px;
    padding-bottom: 64px;
    width: calc(100% - 40px);
  }

  .ams-hero-title {
    font-size: 38px;
  }

  .ams-incident-card {
    flex: 1 1 100%;
  }

  .ams-deliverables-card {
    padding: 28px 20px;
  }
}




/* ═══════════════════════════════════════════════════════════════════════
   AI LEGACY MODERNIZATION (alm- namespace)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero section */
.alm-hero {
    background: var(--navy-deep);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    padding: 104px 40px 112px;
}

.alm-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.4;
}

.alm-hero-content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 64px;
    align-items: center;
}

.alm-hero-text {
    flex: 1 1 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.alm-hero-title {
    font-family: var(--font-heading);
    font-size: 62px;
    line-height: 1.04;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
}

.alm-hero-desc {
    font-size: 19px;
    line-height: 1.6;
    color: #C9D3DF;
    max-width: 580px;
}

.alm-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 8px;
}

/* Before/After comparison card in hero */
.alm-comparison-card {
    flex: 1 1 480px;
    min-width: 0;
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: 0 32px 80px rgba(7, 21, 36, 0.4);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.alm-comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alm-comparison-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
}

.alm-comparison-badge {
    font-size: 12px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 5px 12px;
}

.alm-comparison-content {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.alm-comparison-side {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alm-comparison-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.alm-comparison-label--today {
    color: var(--muted);
}

.alm-comparison-label--ready {
    color: var(--blue);
}

.alm-comparison-box {
    border-radius: var(--radius-sm);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.alm-comparison-box--today {
    background: var(--paper);
    border: 1px solid var(--soft-line);
}

.alm-comparison-box--ready {
    background: #ffffff;
    border: 1px solid var(--line);
}

.alm-old-item {
    background: #E9EBF0;
    color: var(--muted);
    border: 1px dashed #BDC3CE;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    font-family: var(--font-mono);
}

.alm-new-item {
    background: #EEF3FA;
    color: var(--blue);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.alm-new-item--primary {
    background: var(--orange);
    color: var(--ink);
    font-weight: 700;
}

.alm-new-item--navy {
    background: var(--blue);
    color: #ffffff;
}

.alm-new-item--green {
    background: #DFF0EC;
    color: #1A5247;
}

.alm-new-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.alm-comparison-note {
    font-size: 12px;
    color: #B05200;
    padding-top: 6px;
}

.alm-comparison-arrow {
    display: flex;
    align-items: center;
}

.alm-comparison-arrow svg {
    width: 32px;
    height: 32px;
    color: var(--orange);
}

/* Three modernization paths section */
.alm-paths-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.alm-path-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.alm-path-card:hover {
    border-color: var(--blue);
    transform: translateY(-2px);
}

.alm-path-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alm-path-label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
}

.alm-path-label--wrap {
    color: var(--blue);
}

.alm-path-label--refactor {
    color: #A85A00;
}

.alm-path-label--rebuild {
    color: #1A5247;
}

.alm-path-speed {
    font-size: 13px;
    color: var(--muted);
}

.alm-path-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

.alm-path-desc {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.alm-path-diagram {
    width: 100%;
    height: 110px;
    margin-bottom: 8px;
}

/* Services grid */
.alm-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.alm-service-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 24px;
    border-top: 3px solid var(--blue);
}

.alm-service-card--highlight {
    border-top-color: var(--orange);
}

.alm-service-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

.alm-service-desc {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

/* Process steps section */
.alm-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.alm-process-card {
    background: var(--navy-mid);
    border: 1px solid var(--navy-line);
    border-radius: var(--radius-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alm-process-card--highlight {
    background: var(--orange);
    border: none;
}

.alm-process-number {
    font-family: var(--font-mono);
    color: var(--orange-soft);
    font-size: 13px;
}

.alm-process-card--highlight .alm-process-number {
    color: var(--ink);
    opacity: 0.7;
}

.alm-process-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
}

.alm-process-card--highlight .alm-process-title {
    color: var(--ink);
}

.alm-process-desc {
    color: #C9D3DF;
    font-size: 15px;
    line-height: 1.6;
}

.alm-process-card--highlight .alm-process-desc {
    color: var(--ink);
    opacity: 0.85;
}

/* Deliverables and info section */
.alm-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 56px;
}

.alm-deliverables-card {
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border: 1px solid var(--line);
}

.alm-deliverables-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.alm-check-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 17px;
    line-height: 1.5;
}

.alm-check-icon {
    flex: none;
    margin-top: 2px;
    width: 22px;
    height: 22px;
    color: var(--orange);
}

.alm-info-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.alm-info-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.alm-info-text {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink);
}

.alm-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.alm-pill {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 11px 18px;
    font-size: 15px;
    color: var(--ink);
}

/* FAQ section */
.alm-faq-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 72px;
}

.alm-faq-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.alm-faq-content {
    border-top: 1px solid var(--line);
}

.alm-faq-item {
    border-bottom: 1px solid var(--line);
}

.alm-faq-item summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 20px;
    color: var(--ink);
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.alm-faq-item summary::-webkit-details-marker {
    display: none;
}

.alm-faq-item summary::after {
    content: '+';
    color: var(--blue);
    font-size: 28px;
    line-height: 1;
    font-family: var(--font-heading);
}

.alm-faq-item[open] summary::after {
    content: '−';
}

.alm-faq-answer {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
    padding-bottom: 24px;
}

/* CTA band */
.alm-cta-band {
    padding: 0 40px 96px;
}

.alm-cta-inner {
    background: var(--navy-deep);
    border-radius: var(--radius-lg);
    padding: 64px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.alm-cta-decoration {
    position: absolute;
    right: -80px;
    top: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 48px solid rgba(255, 156, 0, 0.15);
    pointer-events: none;
}

.alm-cta-text {
    flex: 1 1 500px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

.alm-cta-title {
    font-family: var(--font-heading);
    font-size: 44px;
    line-height: 1.12;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.alm-cta-desc {
    font-size: 18px;
    line-height: 1.6;
    color: #C9D3DF;
}

.alm-cta-button {
    position: relative;
}

/* Related services section */
.alm-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
}

.alm-related-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 28px 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.alm-related-card:hover {
    border-color: var(--blue);
    background: var(--paper);
    transform: translateX(4px);
}

.alm-related-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.alm-related-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 21px;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.alm-related-desc {
    color: var(--muted);
    font-size: 15px;
}

.alm-related-arrow {
    color: var(--blue);
    font-size: 24px;
    transition: transform var(--transition-fast);
}

.alm-related-card:hover .alm-related-arrow {
    transform: translateX(4px);
}

/* Responsive adjustments */
@media (max-width: 980px) {
    .alm-hero {
        padding: 72px 32px 88px;
    }

    .alm-hero-title {
        font-size: 48px;
    }

    .alm-hero-content {
        gap: 48px;
    }

    .alm-comparison-content {
        flex-direction: column;
    }

    .alm-comparison-arrow {
        transform: rotate(90deg);
    }

    .alm-faq-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .alm-cta-inner {
        padding: 48px 32px;
    }

    .alm-cta-title {
        font-size: 36px;
    }

    .alm-info-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 640px) {
    .alm-hero-title {
        font-size: 40px;
    }

    .alm-paths-grid,
    .alm-services-grid,
    .alm-process-grid,
    .alm-related-grid {
        grid-template-columns: 1fr;
    }

    .alm-cta-band {
        padding: 0 24px 64px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   PLATFORMS OVERVIEW (pov- namespace)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero section */
.pov-hero {
    background: var(--navy-deep);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    padding: 104px 40px 112px;
}

.pov-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.45;
}

.pov-hero-content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 64px;
    align-items: center;
}

.pov-hero-text {
    flex: 1 1 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pov-hero-title {
    font-family: var(--font-heading);
    font-size: 62px;
    line-height: 1.04;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
}

.pov-hero-desc {
    font-size: 19px;
    line-height: 1.6;
    color: #C9D3DF;
    max-width: 580px;
}

.pov-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 8px;
}

/* Platform stack diagram */
.pov-stack-diagram {
    flex: 1 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pov-stack-layer {
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.pov-stack-layer--ai {
    background: var(--orange);
    color: var(--ink);
}

.pov-stack-layer--products {
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 18px 50px rgba(7, 21, 36, 0.3);
}

.pov-stack-layer--partners {
    background: #E3EDF7;
    color: var(--ink);
}

.pov-stack-layer--engineering {
    background: var(--navy-mid);
    border: 1px solid var(--navy-line);
    color: #ffffff;
}

.pov-stack-layer__content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pov-stack-layer__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    font-weight: 600;
    text-transform: uppercase;
}

.pov-stack-layer--ai .pov-stack-layer__label,
.pov-stack-layer--products .pov-stack-layer__label {
    color: #5A6E84;
}

.pov-stack-layer--partners .pov-stack-layer__label {
    color: #4A5D72;
}

.pov-stack-layer--engineering .pov-stack-layer__label {
    color: #9FB8D3;
}

.pov-stack-layer__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 16px;
}

.pov-stack-layer--ai .pov-stack-layer__title {
    font-weight: 700;
}

.pov-stack-layer__icon {
    flex: none;
    width: 24px;
    height: 24px;
}

/* Section headers */
.pov-section-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 32px;
}

.pov-section-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 680px;
}

.pov-section-desc {
    font-size: 18px;
    line-height: 1.6;
    color: #B9C8D8;
}

/* Platform tiles/cards */
.pov-tiles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.pov-tile {
    flex: 1 1 320px;
    min-width: 0;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    transition: all var(--transition-fast);
}

.pov-tile:hover {
    border-color: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(11, 30, 51, 0.12);
}

.pov-tile--dark {
    background: var(--navy-mid);
    border-color: var(--navy-line);
    color: #ffffff;
}

.pov-tile--dark:hover {
    border-color: var(--orange);
}

.pov-tile__visual {
    height: 170px;
    position: relative;
    overflow: hidden;
}

.pov-tile__visual--logitrac {
    background: #0A3D6E;
}

.pov-tile__visual--raycatcher {
    background: #0E4A5C;
}

.pov-tile__body {
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.pov-tile__kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
}

.pov-tile__kicker--blue {
    color: var(--blue);
}

.pov-tile__kicker--green {
    color: #1F6B5E;
}

.pov-tile__kicker--orange {
    color: #B26A00;
}

.pov-tile__title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

.pov-tile--dark .pov-tile__title {
    color: #ffffff;
}

.pov-tile__badge {
    background: #FFE2B3;
    color: #6B3F00;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
}

.pov-tile__desc {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

.pov-tile--dark .pov-tile__desc {
    color: #B9C8D8;
}

.pov-tile__icon {
    width: 34px;
    height: 34px;
    flex: none;
}

.pov-tile__more {
    margin-top: auto;
    padding-top: 12px;
    color: var(--blue);
    font-weight: 600;
}

.pov-tile--dark .pov-tile__more {
    color: #FFD08A;
}

/* Partner platform tiles (smaller, no visual) */
.pov-partner-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.pov-partner-tile {
    flex: 1 1 280px;
    min-width: 0;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 26px 28px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all var(--transition-fast);
}

.pov-partner-tile:hover {
    border-color: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(11, 30, 51, 0.1);
}

.pov-partner-tile__icon {
    width: 34px;
    height: 34px;
}

.pov-partner-tile__title {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

.pov-partner-tile__desc {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

.pov-partner-tile__more {
    margin-top: auto;
    padding-top: 8px;
    color: var(--blue);
    font-weight: 600;
}

/* CTA section */
.pov-cta-section {
    padding: 0 40px 96px;
}

.pov-cta-inner {
    background: var(--navy-deep);
    border-radius: var(--radius-lg);
    padding: 64px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.pov-cta-decoration {
    position: absolute;
    right: -80px;
    top: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 48px solid rgba(255, 156, 0, 0.15);
    pointer-events: none;
}

.pov-cta-text {
    flex: 1 1 500px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

.pov-cta-title {
    font-family: var(--font-heading);
    font-size: 40px;
    line-height: 1.15;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.pov-cta-desc {
    font-size: 18px;
    line-height: 1.6;
    color: #C9D3DF;
}

.pov-cta-button {
    position: relative;
}

/* Responsive adjustments */
@media (max-width: 980px) {
    .pov-hero {
        padding: 72px 32px 88px;
    }

    .pov-hero-title {
        font-size: 48px;
    }

    .pov-hero-content {
        gap: 48px;
    }

    .pov-cta-inner {
        padding: 48px 32px;
    }

    .pov-cta-title {
        font-size: 34px;
    }
}

@media (max-width: 640px) {
    .pov-hero-title {
        font-size: 40px;
    }

    .pov-tiles-grid,
    .pov-partner-tiles {
        flex-direction: column;
    }

    .pov-tile,
    .pov-partner-tile {
        flex: 1 1 100%;
    }

    .pov-cta-section {
        padding: 0 24px 64px;
    }

    .pov-section-header {
        margin-bottom: 24px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   LOGITRAC360 (lt- namespace)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero section */
.lt-hero {
    background: var(--navy-deep);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    padding: 64px 40px 96px;
}

.lt-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.5;
}

.lt-hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.lt-hero-content {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: center;
}

.lt-hero-text {
    flex: 1 1 440px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.lt-hero-badge-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.lt-hero-badge {
    background: var(--orange);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
}

.lt-hero-title {
    font-family: var(--font-heading);
    font-size: 62px;
    line-height: 1.04;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
}

.lt-hero-desc {
    font-size: 19px;
    line-height: 1.6;
    color: #C9D3DF;
    max-width: 560px;
}

.lt-hero-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 17px;
    color: #E3ECF5;
}

.lt-hero-feature {
    display: flex;
    gap: 10px;
    align-items: center;
}

.lt-hero-feature svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.lt-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 8px;
}

/* App mockup */
.lt-app-mockup {
    flex: 1 1 520px;
    min-width: 0;
    background: #ffffff;
    border-radius: var(--radius-md);
    box-shadow: 0 28px 70px rgba(7, 21, 36, 0.4);
    overflow: hidden;
    color: var(--ink);
}

.lt-app-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #F3F6FA;
    border-bottom: 1px solid var(--line);
}

.lt-app-dots {
    display: flex;
    gap: 8px;
}

.lt-app-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #C9D5E2;
}

.lt-app-logo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    color: var(--blue);
}

.lt-app-logo span {
    color: var(--orange);
}

.lt-app-label {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted);
}

.lt-app-body {
    display: flex;
}

.lt-app-sidebar {
    width: 120px;
    border-right: 1px solid var(--line);
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lt-app-nav-item {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}

.lt-app-nav-item--active {
    background: #EEF4FA;
    color: var(--blue);
    font-weight: 600;
}

.lt-app-content {
    flex: 1;
    min-width: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lt-app-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.lt-app-section-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
}

.lt-app-section-meta {
    font-size: 11px;
    color: var(--muted);
}

/* Production schedule grid */
.lt-schedule-grid {
    display: grid;
    grid-template-columns: 70px repeat(5, minmax(0, 1fr));
    gap: 6px 4px;
    align-items: center;
    font-size: 11px;
    color: var(--muted);
}

.lt-schedule-label {
    color: var(--ink);
    font-weight: 600;
}

.lt-schedule-bar {
    height: 16px;
    border-radius: 4px;
}

.lt-schedule-bar--primary {
    background: var(--blue);
}

.lt-schedule-bar--light {
    background: #7FB6EA;
}

.lt-schedule-bar--orange {
    background: var(--orange);
}

/* Stats cards */
.lt-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.lt-stat-card {
    background: #F3F6FA;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lt-stat-card--warning {
    background: #FFF4E2;
}

.lt-stat-label {
    font-size: 11px;
    color: var(--muted);
}

.lt-stat-card--warning .lt-stat-label {
    color: #7A4800;
}

.lt-stat-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
}

.lt-stat-card--warning .lt-stat-value {
    color: #7A4800;
}

/* Alert banner */
.lt-alert {
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid #FFD49A;
    background: #FFFBF3;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: #5A3500;
}

.lt-alert svg {
    width: 16px;
    height: 16px;
    flex: none;
}

/* Module cards */
.lt-modules-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.lt-module-card {
    flex: 1 1 260px;
    min-width: 0;
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--line);
    transition: all var(--transition-fast);
}

.lt-module-card:hover {
    border-color: var(--blue);
    transform: translateY(-2px);
}

.lt-module-card--dark {
    background: var(--ink);
    border-color: var(--ink);
}

.lt-module-icon {
    width: 30px;
    height: 30px;
}

.lt-module-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

.lt-module-card--dark .lt-module-title {
    color: #ffffff;
}

.lt-module-desc {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

.lt-module-card--dark .lt-module-desc {
    color: #C9D7E6;
}

/* Feature grid (Zoho Creator benefits) */
.lt-features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.lt-feature-card {
    background: var(--navy-mid);
    border: 1px solid var(--navy-line);
    border-radius: var(--radius-sm);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lt-feature-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.lt-feature-desc {
    color: #B9C8D8;
    font-size: 14px;
    line-height: 1.6;
}

/* Who it's for section */
.lt-audience-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.lt-audience-intro {
    flex: 1 1 460px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lt-audience-title {
    font-family: var(--font-heading);
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.lt-audience-list {
    flex: 1 1 460px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 17px;
}

.lt-check-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.lt-check-icon {
    flex: none;
    margin-top: 2px;
    width: 22px;
    height: 22px;
    color: var(--orange);
}

/* CTA section */
.lt-cta-wrapper {
    padding: 0 0 96px;
}

.lt-cta-inner {
    background: var(--navy-deep);
    border-radius: var(--radius-lg);
    padding: 64px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.lt-cta-decoration {
    position: absolute;
    right: -80px;
    top: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 48px solid rgba(255, 156, 0, 0.15);
    pointer-events: none;
}

.lt-cta-text {
    flex: 1 1 500px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

.lt-cta-title {
    font-family: var(--font-heading);
    font-size: 40px;
    line-height: 1.15;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.lt-cta-desc {
    font-size: 18px;
    line-height: 1.6;
    color: #C9D3DF;
}

.lt-cta-button {
    position: relative;
}

/* Responsive adjustments */
@media (max-width: 980px) {
    .lt-hero {
        padding: 56px 32px 80px;
    }

    .lt-hero-title {
        font-size: 48px;
    }

    .lt-hero-content {
        gap: 40px;
    }

    .lt-app-sidebar {
        display: none;
    }

    .lt-features-grid {
        grid-template-columns: 1fr;
    }

    .lt-cta-inner {
        padding: 48px 32px;
    }

    .lt-cta-title {
        font-size: 34px;
    }
}

@media (max-width: 640px) {
    .lt-hero-title {
        font-size: 40px;
    }

    .lt-modules-grid {
        flex-direction: column;
    }

    .lt-module-card {
        flex: 1 1 100%;
    }

    .lt-stats-grid {
        grid-template-columns: 1fr;
    }

    .lt-cta-wrapper {
        padding: 0 0 64px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   RayCatcher Solar ERP page (rc- namespace)
   ════════════════════════════════════════════════════════════════ */

.rc-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 112px 40px;
}

.rc-breadcrumb {
  font-size: 14px;
  color: #9FB8D3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.rc-breadcrumb a {
  color: #9FB8D3;
  text-decoration: none;
}

.rc-breadcrumb a:hover {
  color: var(--white);
}

.rc-breadcrumb-current {
  color: var(--white);
}

.rc-hero {
  background: var(--navy-deep);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.rc-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.rc-hero-content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.rc-hero-text {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rc-hero-badge-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.rc-hero-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #E3ECF5;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
}

.rc-hero-title {
  font-size: 54px;
  line-height: 1.08;
  color: var(--white);
  font-weight: 700;
  font-family: var(--font-heading);
  margin: 0;
}

.rc-hero-description {
  font-size: 19px;
  color: #C9D7E6;
  max-width: 540px;
  line-height: 1.6;
}

.rc-hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.rc-hero-visual {
  flex: 1 1 500px;
  min-width: 0;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  color: #1E3247;
}

.rc-visual-illustration {
  height: 150px;
  background: #E9F2FA;
  position: relative;
}

.rc-visual-tag {
  position: absolute;
  top: 12px;
  left: 14px;
  background: var(--white);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  color: #5A6E84;
}

.rc-visual-content {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rc-visual-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.rc-visual-project-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: #0B2440;
}

.rc-visual-status {
  font-size: 12px;
  color: #1E7A4C;
  font-weight: 600;
}

.rc-visual-stages {
  display: flex;
  gap: 4px;
  position: relative;
}

.rc-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.rc-stage-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.rc-stage-dot--complete {
  background: var(--blue);
  color: var(--white);
}

.rc-stage-dot--active {
  background: var(--orange);
  color: #1A1100;
}

.rc-stage-dot--pending {
  background: #EEF2F6;
  color: #8A9BAE;
}

.rc-stage-label {
  font-size: 11px;
  color: #4A5D72;
}

.rc-stage-label--active {
  color: #0B2440;
  font-weight: 600;
}

.rc-stage-label--pending {
  color: #8A9BAE;
}

.rc-visual-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  font-size: 12px;
}

.rc-metric {
  background: #F3F6FA;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rc-metric--warning {
  background: #FFF4E2;
}

.rc-metric-label {
  color: #5A6E84;
}

.rc-metric-label--warning {
  color: #7A4800;
}

.rc-metric-value {
  font-weight: 700;
  color: #0B2440;
}

.rc-metric-value--warning {
  color: #7A4800;
}

.rc-challenge {
  padding: 96px 0;
  background: var(--white);
}

.rc-challenge-content {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}

.rc-challenge-left {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rc-challenge-right {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rc-challenge-text {
  font-size: 19px;
  color: var(--muted);
  line-height: 1.6;
}

.rc-modules {
  padding: 96px 0;
  background: #F3F6FA;
}

.rc-modules-container {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.rc-modules-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.rc-modules-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}

.rc-module-group {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--white);
  border: 1px solid #E3E9F0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rc-module-group-header {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rc-module-group-header--blue {
  background: var(--blue);
}

.rc-module-group-header--teal {
  background: #0E4A5C;
}

.rc-module-group-header--orange {
  background: var(--orange);
}

.rc-module-group-header--navy {
  background: var(--navy-deep);
}

.rc-module-group-kicker {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #FFD08A;
}

.rc-module-group-kicker--dark {
  color: #3D2600;
}

.rc-module-group-title {
  font-size: 19px;
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0;
}

.rc-module-group-title--dark {
  color: #1A1100;
}

.rc-module-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 22px;
  border-top: 1px solid #EEF2F6;
}

.rc-module-item-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: #0B2440;
}

.rc-module-item-desc {
  font-size: 14px;
  color: #4A5D72;
}

.rc-audience {
  padding: 96px 0;
  background: var(--white);
}

.rc-audience-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.rc-audience-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.rc-audience-intro {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.6;
}

.rc-audience-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.rc-audience-card {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--white);
  border: 1px solid #E3E9F0;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rc-audience-card-icon {
  width: 30px;
  height: 30px;
  color: var(--blue);
}

.rc-audience-card-title {
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.rc-audience-card-desc {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.rc-cta-band {
  padding: 0 0 96px;
  background: var(--white);
}

.rc-cta-band-inner {
  background: var(--navy-deep);
  border-radius: 20px;
  padding: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.rc-cta-band-glow {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 156, 0, 0.2);
  pointer-events: none;
}

.rc-cta-band-text {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.rc-cta-band-title {
  font-size: 34px;
  color: var(--white);
  line-height: 1.2;
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
}

.rc-cta-band-description {
  font-size: 18px;
  color: #C9D7E6;
  line-height: 1.6;
}

.rc-cta-band-button {
  position: relative;
}

@media (max-width: 820px) {
  .rc-container {
    padding: 64px 20px;
  }

  .rc-hero-title {
    font-size: 38px;
  }

  .section-title-lg {
    font-size: 30px;
  }

  .rc-cta-band-inner {
    padding: 40px 24px;
  }

  .rc-cta-band-title {
    font-size: 28px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   Zoho One, CRM & Creator page (zoho- namespace)
   ════════════════════════════════════════════════════════════════ */

.zoho-breadcrumb {
  font-size: 14px;
  color: #9FB8D3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.zoho-breadcrumb a {
  color: #9FB8D3;
  text-decoration: none;
}

.zoho-breadcrumb a:hover {
  color: var(--white);
}

.zoho-breadcrumb-current {
  color: var(--white);
}

.zoho-hero {
  background: #072F55;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.zoho-hero-content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.zoho-hero-text {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.zoho-hero-title {
  font-size: 54px;
  line-height: 1.08;
  color: var(--white);
  font-weight: 700;
  font-family: var(--font-heading);
  margin: 0;
}

.zoho-hero-description {
  font-size: 19px;
  color: #C9D7E6;
  max-width: 540px;
  line-height: 1.6;
}

.zoho-hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.zoho-hero-visual {
  flex: 1 1 480px;
  min-width: 0;
}

.zoho-challenge {
  padding: 96px 0;
  background: var(--white);
}

.zoho-challenge-content {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}

.zoho-challenge-left {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.zoho-challenge-right {
  flex: 1 1 480px;
  min-width: 0;
  font-size: 19px;
  color: var(--muted);
  line-height: 1.6;
}

.zoho-products {
  padding: 96px 0;
  background: #F3F6FA;
}

.zoho-products-container {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.zoho-products-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.zoho-products-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}

.zoho-product-card {
  flex: 1 1 320px;
  min-width: 0;
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.zoho-product-card--white {
  background: var(--white);
  border: 1px solid #E3E9F0;
}

.zoho-product-card--dark {
  background: var(--navy-deep);
}

.zoho-product-kicker {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--blue);
}

.zoho-product-kicker--orange {
  color: #B26A00;
}

.zoho-product-kicker--light {
  color: #FFD08A;
}

.zoho-product-title {
  font-size: 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.zoho-product-title--light {
  color: var(--white);
}

.zoho-product-desc {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.zoho-product-desc--light {
  color: #C9D7E6;
}

.zoho-product-list {
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #1E3247;
}

.zoho-product-list--light {
  color: #E3ECF5;
}

.zoho-services {
  padding: 96px 0;
  background: var(--white);
}

.zoho-services-container {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.zoho-services-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.zoho-services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.zoho-service-card {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--white);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #E3E9F0;
}

.zoho-service-icon {
  width: 30px;
  height: 30px;
  color: var(--blue);
}

.zoho-service-icon--orange {
  color: #B26A00;
}

.zoho-service-title {
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.zoho-service-desc {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.zoho-cta-band {
  padding: 0 0 96px;
  background: var(--white);
}

.zoho-cta-band-inner {
  background: #072F55;
  border-radius: 20px;
  padding: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.zoho-cta-band-glow {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 40px solid rgba(255, 156, 0, 0.18);
  pointer-events: none;
}

.zoho-cta-band-text {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.zoho-cta-band-title {
  font-size: 34px;
  color: var(--white);
  line-height: 1.2;
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
}

.zoho-cta-band-description {
  font-size: 18px;
  color: #C9D7E6;
  line-height: 1.6;
}

.zoho-cta-band-button {
  position: relative;
}

@media (max-width: 820px) {
  .zoho-hero-title {
    font-size: 38px;
  }

  .zoho-cta-band-inner {
    padding: 40px 24px;
  }

  .zoho-cta-band-title {
    font-size: 28px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   Microsoft page (ms- namespace)
   ════════════════════════════════════════════════════════════════ */

.ms-breadcrumb {
  font-size: 14px;
  color: #9FB8D3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.ms-breadcrumb a {
  color: #9FB8D3;
  text-decoration: none;
}

.ms-breadcrumb a:hover {
  color: var(--white);
}

.ms-breadcrumb-current {
  color: var(--white);
}

.ms-hero {
  background: #061E36;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.ms-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  pointer-events: none;
}

.ms-hero-content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.ms-hero-text {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ms-hero-title {
  font-size: 54px;
  line-height: 1.08;
  color: var(--white);
  font-weight: 700;
  font-family: var(--font-heading);
  margin: 0;
}

.ms-hero-description {
  font-size: 19px;
  color: #C9D7E6;
  max-width: 540px;
  line-height: 1.6;
}

.ms-hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.ms-hero-visual {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ms-layer {
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-layer-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.ms-layer-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
}

.ms-layer-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.ms-layer--orange {
  background: var(--orange);
  color: #1A1100;
}

.ms-layer--white {
  background: var(--white);
  color: #0B2440;
}

.ms-layer--light {
  background: #E3EDF7;
  color: #0B2440;
}

.ms-layer--azure {
  background: #0F2E52;
  border: 1px solid #1F4A78;
  color: var(--white);
}

.ms-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ms-chip {
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 600;
}

.ms-chip--orange-light {
  background: rgba(255, 255, 255, 0.6);
}

.ms-chip--white-blue {
  background: #EEF4FA;
  color: #06375F;
}

.ms-chip--white {
  background: var(--white);
  color: #06375F;
}

.ms-chip--azure {
  background: #1F4A78;
  color: #E3ECF5;
}

.ms-challenge {
  padding: 96px 0;
  background: var(--white);
}

.ms-challenge-content {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}

.ms-challenge-left {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ms-challenge-right {
  flex: 1 1 480px;
  min-width: 0;
  font-size: 19px;
  color: var(--muted);
  line-height: 1.6;
}

.ms-services {
  padding: 96px 0;
  background: #F3F6FA;
}

.ms-services-container {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.ms-services-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.ms-services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.ms-service-card {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--white);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #E3E9F0;
}

.ms-service-icon {
  width: 30px;
  height: 30px;
  color: var(--blue);
}

.ms-service-icon--orange {
  color: #B26A00;
}

.ms-service-title {
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.ms-service-desc {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.ms-cta-band {
  padding: 0 0 96px;
  background: #F3F6FA;
}

.ms-cta-band-inner {
  background: #072F55;
  border-radius: 20px;
  padding: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.ms-cta-band-glow {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 40px solid rgba(255, 156, 0, 0.18);
  pointer-events: none;
}

.ms-cta-band-text {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.ms-cta-band-title {
  font-size: 34px;
  color: var(--white);
  line-height: 1.2;
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
}

.ms-cta-band-description {
  font-size: 18px;
  color: #C9D7E6;
  line-height: 1.6;
}

.ms-cta-band-button {
  position: relative;
}

@media (max-width: 820px) {
  .ms-hero-title {
    font-size: 38px;
  }

  .ms-cta-band-inner {
    padding: 40px 24px;
  }

  .ms-cta-band-title {
    font-size: 28px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   Cloud & Infrastructure page (cloud- namespace)
   ════════════════════════════════════════════════════════════════ */

.cloud-breadcrumb {
  font-size: 14px;
  color: #9FB8D3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.cloud-breadcrumb a {
  color: #9FB8D3;
  text-decoration: none;
}

.cloud-breadcrumb a:hover {
  color: var(--white);
}

.cloud-breadcrumb-current {
  color: var(--white);
}

.cloud-hero {
  background: #072F55;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.cloud-hero-content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.cloud-hero-text {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cloud-hero-title {
  font-size: 54px;
  line-height: 1.08;
  color: var(--white);
  font-weight: 700;
  font-family: var(--font-heading);
  margin: 0;
}

.cloud-hero-description {
  font-size: 19px;
  color: #C9D7E6;
  max-width: 540px;
  line-height: 1.6;
}

.cloud-hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.cloud-hero-visual {
  flex: 1 1 480px;
  min-width: 0;
  background: #0B2440;
  border: 1px solid #1F4A78;
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
  padding: 22px;
}

.cloud-challenge {
  padding: 96px 0;
  background: var(--white);
}

.cloud-challenge-content {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}

.cloud-challenge-left {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cloud-challenge-right {
  flex: 1 1 480px;
  min-width: 0;
  font-size: 19px;
  color: var(--muted);
  line-height: 1.6;
}

.cloud-services {
  padding: 96px 0;
  background: #F3F6FA;
}

.cloud-services-container {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.cloud-services-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.cloud-services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.cloud-service-card {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--white);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #E3E9F0;
}

.cloud-service-card--dark {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}

.cloud-service-icon {
  width: 30px;
  height: 30px;
  color: var(--blue);
}

.cloud-service-icon--orange {
  color: #B26A00;
}

.cloud-service-icon--orange-alt {
  color: var(--orange);
}

.cloud-service-title {
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.cloud-service-title--light {
  color: var(--white);
}

.cloud-service-desc {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.cloud-service-desc--light {
  color: #C9D7E6;
}

.cloud-cta-band {
  padding: 0 0 96px;
  background: #F3F6FA;
}

.cloud-cta-band-inner {
  background: #072F55;
  border-radius: 20px;
  padding: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.cloud-cta-band-glow {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 40px solid rgba(255, 156, 0, 0.18);
  pointer-events: none;
}

.cloud-cta-band-text {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.cloud-cta-band-title {
  font-size: 34px;
  color: var(--white);
  line-height: 1.2;
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
}

.cloud-cta-band-description {
  font-size: 18px;
  color: #C9D7E6;
  line-height: 1.6;
}

.cloud-cta-band-button {
  position: relative;
}

@media (max-width: 820px) {
  .cloud-hero-title {
    font-size: 38px;
  }

  .cloud-cta-band-inner {
    padding: 40px 24px;
  }

  .cloud-cta-band-title {
    font-size: 28px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   Mechanical Engineering page (mech- namespace)
   ════════════════════════════════════════════════════════════════ */

.mech-breadcrumb {
  font-size: 14px;
  color: #9FB8D3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.mech-breadcrumb a {
  color: #9FB8D3;
  text-decoration: none;
}

.mech-breadcrumb a:hover {
  color: var(--white);
}

.mech-breadcrumb-current {
  color: var(--white);
}

.mech-hero {
  background: #0A3D6E;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.mech-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mech-hero-content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.mech-hero-text {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mech-hero-title {
  font-size: 54px;
  line-height: 1.08;
  color: var(--white);
  font-weight: 700;
  font-family: var(--font-heading);
  margin: 0;
}

.mech-hero-description {
  font-size: 19px;
  color: #D6E4F2;
  max-width: 540px;
  line-height: 1.6;
}

.mech-hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.mech-hero-visual {
  flex: 1 1 480px;
  min-width: 0;
  background: rgba(6, 30, 54, 0.55);
  border: 1px solid #5B8FC4;
  border-radius: 14px;
  padding: 18px;
  backdrop-filter: blur(2px);
}

.mech-why {
  padding: 96px 0;
  background: var(--white);
}

.mech-why-content {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}

.mech-why-left {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mech-why-right {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mech-why-text {
  font-size: 19px;
  color: var(--muted);
  line-height: 1.6;
}

.mech-services {
  padding: 96px 0;
  background: #F3F6FA;
}

.mech-services-container {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.mech-services-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.mech-services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.mech-service-card {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--white);
  border: 1px solid #E3E9F0;
  border-radius: 12px;
}

.mech-service-card--dark {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}

.mech-service-number {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #B26A00;
}

.mech-service-number--light {
  color: #FFD08A;
}

.mech-service-title {
  font-size: 17px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.mech-service-title--light {
  color: var(--white);
}

.mech-service-desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.mech-service-desc--light {
  color: #C9D7E6;
}

.mech-tools {
  padding: 96px 0;
  background: var(--navy-deep);
}

.mech-tools-content {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}

.mech-tools-left {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mech-tools-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mech-tools-title {
  font-size: 34px;
  line-height: 1.2;
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
}

.mech-tools-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mech-tools-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #9FB8D3;
  font-weight: 600;
}

.mech-tools-label--padded {
  padding-top: 6px;
}

.mech-tools-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mech-tool-chip {
  background: #0F2E52;
  border: 1px solid #1F4A78;
  color: #E3ECF5;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
}

.mech-tools-chips--mono {
  font-family: var(--font-mono);
}

.mech-tools-right {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mech-industries-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mech-industry-chip {
  background: var(--white);
  border: 1px solid #D3DEEA;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 15px;
  color: var(--ink);
}

.mech-cta-band {
  padding: 96px 0;
  background: var(--white);
}

.mech-cta-band-inner {
  background: #072F55;
  border-radius: 20px;
  padding: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.mech-cta-band-glow {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 40px solid rgba(255, 156, 0, 0.18);
  pointer-events: none;
}

.mech-cta-band-text {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.mech-cta-band-title {
  font-size: 34px;
  color: var(--white);
  line-height: 1.2;
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
}

.mech-cta-band-description {
  font-size: 18px;
  color: #C9D7E6;
  line-height: 1.6;
}

.mech-cta-band-button {
  position: relative;
}

@media (max-width: 820px) {
  .mech-hero-title {
    font-size: 38px;
  }

  .mech-tools-title {
    font-size: 28px;
  }

  .mech-cta-band-inner {
    padding: 40px 24px;
  }

  .mech-cta-band-title {
    font-size: 28px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   Industrial IoT & Edge page (iot- namespace)
   ════════════════════════════════════════════════════════════════ */

.iot-breadcrumb {
  font-size: 14px;
  color: #9FB8D3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.iot-breadcrumb a {
  color: #9FB8D3;
  text-decoration: none;
}

.iot-breadcrumb a:hover {
  color: var(--white);
}

.iot-breadcrumb-current {
  color: var(--white);
}

.iot-hero {
  background: #061E36;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.iot-hero-content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.iot-hero-text {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.iot-hero-title {
  font-size: 54px;
  line-height: 1.08;
  color: var(--white);
  font-weight: 700;
  font-family: var(--font-heading);
  margin: 0;
}

.iot-hero-description {
  font-size: 19px;
  color: #C9D7E6;
  max-width: 520px;
  line-height: 1.6;
}

.iot-hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.iot-hero-visual {
  flex: 1 1 500px;
  min-width: 0;
  background: #0B2440;
  border: 1px solid #1F4A78;
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.iot-tier-header {
  display: flex;
  justify-content: space-between;
}

.iot-tier-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #9FB8D3;
  letter-spacing: 0.08em;
}

.iot-tier-note {
  font-size: 11px;
  color: #7F9BB8;
}

.iot-devices-row {
  display: flex;
  gap: 8px;
}

.iot-device {
  background: #0F2E52;
  border: 1px solid #1F4A78;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.iot-device--alert {
  border-color: var(--orange);
}

.iot-device-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
}

.iot-device-status {
  font-size: 11px;
  color: #9FB8D3;
}

.iot-device-status--warning {
  color: #FFD08A;
}

.iot-gateway {
  background: #1F4A78;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.iot-gateway-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--white);
}

.iot-gateway-badge {
  background: var(--orange);
  color: #1A1100;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.iot-cloud-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.iot-cloud-item {
  background: var(--white);
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  color: #0B2440;
  font-weight: 600;
}

.iot-challenge {
  padding: 96px 0;
  background: var(--white);
}

.iot-challenge-content {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}

.iot-challenge-left {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.iot-challenge-right {
  flex: 1 1 480px;
  min-width: 0;
  font-size: 19px;
  color: var(--muted);
  line-height: 1.6;
}

.iot-services {
  padding: 96px 0;
  background: #F3F6FA;
}

.iot-services-container {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.iot-services-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.iot-services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.iot-service-card {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--white);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #E3E9F0;
}

.iot-service-card--dark {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}

.iot-service-icon {
  width: 30px;
  height: 30px;
  color: var(--blue);
}

.iot-service-icon--orange {
  color: #B26A00;
}

.iot-service-icon--orange-alt {
  color: var(--orange);
}

.iot-service-title {
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.iot-service-title--light {
  color: var(--white);
}

.iot-service-desc {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.iot-service-desc--light {
  color: #C9D7E6;
}

.iot-payoff {
  padding: 96px 0;
  background: var(--white);
}

.iot-payoff-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.iot-payoff-left {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.iot-payoff-text {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.6;
}

.iot-payoff-right {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.iot-payoff-pill {
  background: var(--white);
  border: 1px solid #D3DEEA;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 15px;
  color: var(--ink);
}

.iot-cta-band {
  padding: 0 0 96px;
  background: var(--white);
}

.iot-cta-band-inner {
  background: #072F55;
  border-radius: 20px;
  padding: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.iot-cta-band-glow {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 40px solid rgba(255, 156, 0, 0.18);
  pointer-events: none;
}

.iot-cta-band-text {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.iot-cta-band-title {
  font-size: 34px;
  color: var(--white);
  line-height: 1.2;
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
}

.iot-cta-band-description {
  font-size: 18px;
  color: #C9D7E6;
  line-height: 1.6;
}

.iot-cta-band-button {
  position: relative;
}

@media (max-width: 820px) {
  .iot-hero-title {
    font-size: 38px;
  }

  .iot-cta-band-inner {
    padding: 40px 24px;
  }

  .iot-cta-band-title {
    font-size: 28px;
  }
}


/* ========================================
   Technologies We Use (tech- namespace)
   ======================================== */

.tech-hero {
  background: var(--navy-deep);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.tech-hero__inner {
  position: relative;
  padding: 64px 0 96px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.tech-breadcrumb {
  font-size: 14px;
  color: #9FB8D3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tech-breadcrumb a {
  color: #9FB8D3;
  text-decoration: none;
}

.tech-breadcrumb a:hover {
  color: var(--white);
}

.tech-breadcrumb__current {
  color: var(--white);
}

.tech-hero__content-row {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.tech-hero__text {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tech-hero__eyebrow {
  color: var(--orange);
}

.tech-hero__title {
  font-size: 54px;
  line-height: 1.08;
  color: var(--white);
  font-weight: 700;
  font-family: var(--font-heading);
  margin: 0;
}

.tech-hero__description {
  font-size: 19px;
  color: #C9D7E6;
  max-width: 520px;
  line-height: 1.6;
}

.tech-hero__diagram {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tech-stack-layer {
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.tech-stack-layer__label {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
}

.tech-stack-layer--ai {
  background: var(--orange);
  color: #1A1100;
}

.tech-stack-layer--web {
  background: var(--white);
  color: var(--navy-deep);
}

.tech-stack-layer--services {
  background: #E3EDF7;
  color: var(--navy-deep);
}

.tech-stack-layer--business {
  background: #1F4A78;
  color: var(--white);
}

.tech-stack-layer--business .tech-stack-layer__detail {
  color: #D6E4F2;
}

.tech-stack-layer--data {
  background: #0F2E52;
  border: 1px solid #1F4A78;
  color: var(--white);
}

.tech-stack-layer--data .tech-stack-layer__detail {
  color: #C9D7E6;
}

.tech-section {
  padding: 96px 0;
  background: #F3F6FA;
}

.tech-section__inner {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.tech-section__header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.tech-section__eyebrow {
  color: var(--blue);
}

.tech-section__title {
  font-size: 40px;
  line-height: 1.15;
  font-family: var(--font-heading);
  color: var(--ink);
  margin: 0;
}

.tech-category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.tech-category-card {
  flex: 1 1 340px;
  min-width: 0;
  background: var(--white);
  border: 1px solid #E3E9F0;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tech-category-card--dark {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}

.tech-category-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tech-category-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: #EEF4FA;
}

.tech-category-card--ai .tech-category-card__icon {
  background: #FFF1DB;
}

.tech-category-card--dark .tech-category-card__icon {
  background: #1F4A78;
}

.tech-category-card__title {
  font-size: 19px;
  font-family: var(--font-heading);
  color: var(--ink);
  margin: 0;
}

.tech-category-card--dark .tech-category-card__title {
  color: var(--white);
}

.tech-category-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-category-card__tag {
  background: #EEF4FA;
  color: #06375F;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
}

.tech-category-card--dark .tech-category-card__tag {
  background: #1F4A78;
  color: #E3ECF5;
}

.tech-category-card__description {
  color: #4A5D72;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.tech-category-card--dark .tech-category-card__description {
  color: #C9D7E6;
}

.tech-category-card__description a {
  color: #FFD08A;
  text-decoration: none;
}

.tech-category-card__description a:hover {
  text-decoration: underline;
}

.tech-principles-section {
  padding: 96px 0;
  background: var(--white);
}

.tech-principles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.tech-principle-card {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 3px solid var(--blue);
}

.tech-principle-card--accent {
  border-top-color: var(--orange);
}

.tech-principle-card__title {
  font-size: 19px;
  font-family: var(--font-heading);
  color: var(--ink);
  margin: 0;
}

.tech-principle-card__description {
  color: #4A5D72;
  line-height: 1.6;
  margin: 0;
}

.tech-cta-section {
  padding: 0 0 96px;
  background: var(--white);
}

.tech-cta-band {
  background: var(--navy-deep);
  border-radius: 20px;
  padding: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.tech-cta-band::before {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 40px solid rgba(255, 156, 0, 0.18);
}

.tech-cta-band__content {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.tech-cta-band__title {
  font-size: 34px;
  color: var(--white);
  line-height: 1.2;
  font-family: var(--font-heading);
  margin: 0;
}

.tech-cta-band__description {
  font-size: 18px;
  color: #C9D7E6;
  line-height: 1.6;
  margin: 0;
}

.tech-cta-band__button {
  position: relative;
}

@media (max-width: 820px) {
  .tech-hero__inner {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .tech-hero__title {
    font-size: 38px;
  }

  .tech-section__title {
    font-size: 30px;
  }

  .tech-cta-band {
    padding: 36px 24px;
  }

  .tech-cta-band__title {
    font-size: 28px;
  }
}


/* ========================================
   Industries Overview (ind- namespace)
   ======================================== */

/* Hero Section */
.ind-hero {
  background: #072F55;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

.ind-hero__inner {
  position: relative;
  padding: 88px 0 104px;
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
}

.ind-hero__text {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ind-hero__eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #FF9C00;
}

.ind-hero__title {
  font-size: 56px;
  line-height: 1.06;
  color: #FFFFFF;
  font-weight: 700;
  font-family: 'Sora', system-ui, sans-serif;
  margin: 0;
}

.ind-hero__description {
  font-size: 19px;
  color: #C9D7E6;
  max-width: 560px;
  line-height: 1.6;
  margin: 0;
}

.ind-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.ind-hero__diagram {
  flex: 1 1 420px;
  min-width: 0;
}

.ind-hero__diagram svg {
  display: block;
}

.ind-industries-section {
  padding: 96px 0;
  background: #F3F6FA;
}

.ind-industries-section__inner {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.ind-industries-section__header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}

.ind-industries-section__eyebrow {
  color: var(--blue);
}

.ind-industries-section__title {
  font-size: 40px;
  line-height: 1.15;
  font-family: var(--font-heading);
  color: var(--ink);
  margin: 0;
}

.ind-industry-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.ind-industry-card {
  flex: 1 1 340px;
  min-width: 0;
  background: var(--white);
  border: 1px solid #E3E9F0;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #1E3247;
  display: flex;
  flex-direction: column;
}

.ind-industry-card:hover {
  border-color: #9FC3E8;
  color: #1E3247;
}

.ind-industry-card__header {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ind-industry-card__header--manufacturing {
  background: #0A3D6E;
}

.ind-industry-card__header--logistics {
  background: var(--navy-deep);
}

.ind-industry-card__header--supply {
  background: #0E4A5C;
}

.ind-industry-card__header--field {
  background: #123F6E;
}

.ind-industry-card__header--energy {
  background: #7A4800;
}

.ind-industry-card__header--more {
  background: #1F4A78;
}

.ind-industry-card__title {
  font-size: 22px;
  color: var(--white);
  font-family: var(--font-heading);
  margin: 0;
}

.ind-industry-card__body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.ind-industry-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ind-industry-card__tag {
  background: #EEF4FA;
  color: #06375F;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
}

.ind-industry-card__link {
  margin-top: auto;
  color: var(--blue);
  font-weight: 600;
}

.ind-depth-section {
  padding: 96px 0;
  background: var(--white);
}

.ind-depth-section__inner {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.ind-depth-section__header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.ind-depth-section__eyebrow {
  color: var(--blue);
}

.ind-depth-section__title {
  font-size: 40px;
  line-height: 1.15;
  font-family: var(--font-heading);
  color: var(--ink);
  margin: 0;
}

.ind-depth-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.ind-depth-card {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 3px solid var(--blue);
}

.ind-depth-card--accent {
  border-top-color: var(--orange);
}

.ind-depth-card__title {
  font-size: 20px;
  font-family: var(--font-heading);
  color: var(--ink);
  margin: 0;
}

.ind-depth-card__description {
  color: #4A5D72;
  line-height: 1.6;
  margin: 0;
}

.ind-cta-section {
  padding: 0 0 96px;
  background: var(--white);
}

.ind-cta-band {
  background: var(--navy-deep);
  border-radius: 20px;
  padding: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.ind-cta-band::before {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 40px solid rgba(255, 156, 0, 0.18);
}

.ind-cta-band__content {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.ind-cta-band__title {
  font-size: 34px;
  color: var(--white);
  line-height: 1.2;
  font-family: var(--font-heading);
  margin: 0;
}

.ind-cta-band__description {
  font-size: 18px;
  color: #C9D7E6;
  line-height: 1.6;
  margin: 0;
}

.ind-cta-band__button {
  position: relative;
}

@media (max-width: 820px) {
  .ind-hero__inner {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .ind-hero__title {
    font-size: 38px;
  }

  .ind-industries-section__title,
  .ind-depth-section__title {
    font-size: 30px;
  }

  .ind-cta-band {
    padding: 36px 24px;
  }

  .ind-cta-band__title {
    font-size: 28px;
  }
}

/* ========================================
   INDUSTRIES OVERVIEW PAGE STYLES (ind-)
   ======================================== */

/* Hero Section */
.ind-hero {
    background: #072F55;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.ind-hero__inner {
    position: relative;
    padding-top: 88px;
    padding-bottom: 104px;
    display: flex;
    flex-wrap: wrap;
    gap: 56px;
    align-items: center;
}

.ind-hero__text {
    flex: 1 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ind-hero__eyebrow {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: #FF9C00;
}

.ind-hero__title {
    font-size: 56px;
    line-height: 1.06;
    color: #FFFFFF;
    font-weight: 700;
    font-family: 'Sora', system-ui, sans-serif;
    margin: 0;
    letter-spacing: -0.01em;
}

.ind-hero__description {
    font-size: 19px;
    color: #C9D7E6;
    max-width: 560px;
    margin: 0;
    line-height: 1.6;
}

.ind-hero__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 8px;
}

.ind-hero__diagram {
    flex: 1 1 420px;
    min-width: 0;
}

/* Industries Grid Section */
.ind-industries-section {
    padding: 96px 0;
    background: #F3F6FA;
}

.ind-industries-section__inner {
    display: flex;
    flex-direction: column;
    gap: 44px;
}

.ind-industries-section__header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
}

.ind-industries-section__eyebrow {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: #095090;
}

.ind-industries-section__title {
    font-size: 40px;
    line-height: 1.15;
    font-family: 'Sora', system-ui, sans-serif;
    font-weight: 700;
    color: #0B2440;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Industry Grid */
.ind-industry-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

/* Industry Card */
.ind-industry-card {
    flex: 1 1 340px;
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid #E3E9F0;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #1E3247;
    display: flex;
    flex-direction: column;
}

.ind-industry-card:hover {
    border-color: #9FC3E8;
    color: #1E3247;
}

.ind-industry-card__header {
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ind-industry-card__header--manufacturing {
    background: #0A3D6E;
}

.ind-industry-card__header--logistics {
    background: #0B2440;
}

.ind-industry-card__header--supply-chain {
    background: #0E4A5C;
}

.ind-industry-card__header--field-services {
    background: #123F6E;
}

.ind-industry-card__header--energy {
    background: #7A4800;
}

.ind-industry-card__header--healthcare {
    background: #1F4A78;
}

.ind-industry-card__body {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.ind-industry-card__title {
    font-size: 22px;
    color: #FFFFFF;
    font-family: 'Sora', system-ui, sans-serif;
    font-weight: 700;
    margin: 0;
}

.ind-industry-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ind-industry-card__tag {
    background: #EEF4FA;
    color: #06375F;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
}

.ind-industry-card__link {
    margin-top: auto;
    color: #095090;
    font-weight: 600;
}

/* Industry Depth Section */
.ind-depth-section {
    padding: 96px 0;
    background: #FFFFFF;
}

.ind-depth-section__inner {
    display: flex;
    flex-direction: column;
    gap: 44px;
}

.ind-depth-section__header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
}

.ind-depth-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.ind-depth-card {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    border-top: 3px solid #095090;
}

.ind-depth-card--accent {
    border-top-color: #FF9C00;
}

.ind-depth-card__title {
    font-size: 20px;
    font-family: 'Sora', system-ui, sans-serif;
    font-weight: 700;
    color: #0B2440;
    margin: 0;
}

.ind-depth-card__description {
    color: #4A5D72;
    margin: 0;
    line-height: 1.6;
}

/* CTA Band Section */
.ind-cta-section {
    padding: 0 0 96px;
    background: #FFFFFF;
}

.ind-cta-band {
    background: #072F55;
    border-radius: 20px;
    padding: 56px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.ind-cta-band::before {
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 40px solid rgba(255, 156, 0, 0.18);
}

.ind-cta-band__content {
    flex: 1 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.ind-cta-band__title {
    font-size: 34px;
    color: #FFFFFF;
    line-height: 1.2;
    font-family: 'Sora', system-ui, sans-serif;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

.ind-cta-band__description {
    font-size: 18px;
    color: #C9D7E6;
    margin: 0;
    line-height: 1.6;
}

.ind-cta-band__action {
    position: relative;
}

/* Responsive breakpoint */
@media (max-width: 820px) {
    .ind-hero__inner {
        padding-top: 48px;
        padding-bottom: 64px;
    }
    
    .ind-hero__title {
        font-size: 38px;
    }
    
    .ind-industries-section__title,
    .ind-depth-section__header h2,
    .ind-cta-band__title {
        font-size: 30px;
    }
    
    .ind-cta-band {
        padding: 36px 24px;
    }
}

/* =========================================================
   Industry sub-pages (Manufacturing, Logistics & Warehousing,
   Supply Chain, Field Services, Energy & Solar,
   Healthcare/Retail & more)
   Reusable classes — replaces per-page inline styles.
   ========================================================= */

.ind-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Hero --- */
.ind-hero {
  background: #072F55;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

.ind-hero--deep { background: #061E36; }
.ind-hero--navy { background: #0B2440; }

.ind-hero__inner {
  position: relative;
  padding-top: 64px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ind-crumb {
  font-size: 14px;
  color: #9FB8D3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.ind-crumb > span:last-child { color: #FFFFFF; }

.ind-hero__layout {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.ind-hero__copy {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ind-hero__eyebrow { color: #FF9C00; }

.ind-hero__title {
  font-size: 52px;
  line-height: 1.08;
  color: #FFFFFF;
  font-weight: 700;
}

.ind-hero__lead {
  font-size: 19px;
  color: #C9D7E6;
  max-width: 540px;
}

.ind-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.ind-hero__media {
  flex: 1 1 500px;
  min-width: 0;
}

/* Visual panels used inside the hero illustration */
.ind-visual {
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
  padding: 20px;
}

.ind-visual--dark {
  background: #0B2440;
  border: 1px solid #1F4A78;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
}

.ind-visual--light {
  background: #FFFFFF;
  color: #1E3247;
}

.ind-visual--flush {
  background: #FFFFFF;
  color: #1E3247;
  padding: 0;
  overflow: hidden;
}

.ind-visual__svg { display: block; }

.ind-visual__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
}

.ind-visual__head-title {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 600;
  font-size: 15px;
  color: #0B2440;
}

.ind-visual__note { font-size: 11px; color: #5A6E84; }

/* --- Generic content section wrappers --- */
.ind-section { padding: 96px 0; }
.ind-section--white { background: #FFFFFF; }
.ind-section--paper { background: #F3F6FA; }
.ind-section--navy { background: #0B2440; }
.ind-section--tight { padding: 80px 0; }
.ind-section--flush-bottom { padding: 0 0 96px; }

/* Challenge: eyebrow + heading on the left, paragraph on the right */
.ind-split {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}

.ind-split__head {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ind-split__text {
  flex: 1 1 480px;
  min-width: 0;
  font-size: 19px;
  color: #4A5D72;
}

.ind-eyebrow-blue { color: #095090; }
.ind-eyebrow-orange { color: #FF9C00; }

.ind-h2 { font-size: 40px; line-height: 1.15; }
.ind-h2--sm { font-size: 30px; line-height: 1.2; }
.ind-h2--md { font-size: 38px; line-height: 1.15; }
.ind-h2--white { color: #FFFFFF; }

/* Use-case block */
.ind-block {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.ind-block__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}

.ind-uc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.ind-uc__title { font-size: 21px; }
.ind-uc__text { color: #4A5D72; font-size: 16px; }

/* How-we-help block (dark) */
.ind-help {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ind-help__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.ind-how-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ind-how__tag {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  color: #FF9C00;
  font-size: 12px;
}

.ind-how__title { font-size: 18px; color: #FFFFFF; }
.ind-how__text { color: #B9C8D8; font-size: 14px; }

/* Systems-we-work-with row */
.ind-systems {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}

.ind-systems__head {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ind-systems__pills {
  flex: 2 1 520px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* CTA band */
.ind-cta {
  background: #072F55;
  border-radius: 20px;
  padding: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.ind-cta__ring {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 40px solid rgba(255, 156, 0, 0.18);
}

.ind-cta__content {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.ind-cta__title { font-size: 34px; color: #FFFFFF; line-height: 1.2; }
.ind-cta__text { font-size: 18px; color: #C9D7E6; }
.ind-cta__action { position: relative; }

/* --- Field Services hero card internals --- */
.ind-fs-card {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  color: #1E3247;
}

.ind-fs-card__row { display: flex; flex-wrap: wrap; }

.ind-fs-map {
  flex: 1 1 260px;
  min-width: 0;
  background: #E9F0F6;
  position: relative;
}

.ind-fs-map__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  color: #5A6E84;
}

.ind-fs-detail {
  flex: 1 1 240px;
  min-width: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ind-fs-wo { display: flex; flex-direction: column; gap: 4px; }

.ind-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #5A6E84;
}

.ind-fs-wo__title {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 600;
  font-size: 15px;
  color: #0B2440;
}

.ind-fs-copilot {
  background: #F3F6FA;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.ind-label--blue { color: #095090; font-size: 11px; letter-spacing: 0.08em; font-weight: 700; }

.ind-fs-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  font-size: 12px;
}

.ind-stat {
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ind-stat--green { background: #E6F2EF; }
.ind-stat--green span { color: #1F5E52; }
.ind-stat--green b { color: #0B2440; }
.ind-stat--amber { background: #FFF4E2; }
.ind-stat--amber span,
.ind-stat--amber b { color: #7A4800; }

/* --- Healthcare / Retail hero card internals --- */
.ind-hr-stack { display: flex; flex-direction: column; gap: 14px; }

.ind-hr-card {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
  padding: 18px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: #1E3247;
}

.ind-hr-doc {
  flex: 1 1 160px;
  min-width: 0;
  background: #F3F6FA;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ind-hr-doc__bar { height: 8px; border-radius: 4px; }
.ind-hr-doc__bar--grey { background: #D3DEEA; }
.ind-hr-doc__bar--amber { background: #FFD49A; }
.ind-hr-doc__bar--w40 { width: 40%; }
.ind-hr-doc__bar--w50 { width: 50%; }
.ind-hr-doc__bar--w60 { width: 60%; }
.ind-hr-doc__bar--w70 { width: 70%; }
.ind-hr-doc__bar--w80 { width: 80%; }
.ind-hr-doc__bar--w90 { width: 90%; }

.ind-hr-arrow { display: flex; align-items: center; }

.ind-hr-fields {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.ind-hr-field {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #EEF2F6;
  padding: 4px 0;
}

.ind-hr-field--last { border-bottom: 0; }
.ind-hr-field__key { color: #5A6E84; }
.ind-hr-field__key--flag { color: #9A5B00; }
.ind-hr-field__val--flag { color: #9A5B00; }

.ind-hr-row { display: flex; gap: 14px; flex-wrap: wrap; }

.ind-hr-chat {
  flex: 1 1 240px;
  min-width: 0;
  background: #0F2E52;
  border: 1px solid #1F4A78;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ind-label--muted { color: #9FB8D3; font-size: 11px; letter-spacing: 0.08em; font-weight: 700; }

.ind-hr-bubble {
  padding: 8px 10px;
  font-size: 13px;
}

.ind-hr-bubble--out {
  align-self: flex-end;
  background: #1F4A78;
  color: #E3ECF5;
  border-radius: 10px 10px 2px 10px;
}

.ind-hr-bubble--in {
  align-self: flex-start;
  background: #FFFFFF;
  color: #0B2440;
  border-radius: 10px 10px 10px 2px;
}

.ind-hr-personal {
  flex: 1 1 160px;
  min-width: 0;
  background: #FF9C00;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #1A1100;
}

.ind-hr-personal__title {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 700;
  font-size: 16px;
}

.ind-hr-personal__thumbs { display: flex; gap: 6px; }
.ind-hr-personal__thumb {
  flex: 1;
  height: 36px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}

.ind-visual__note--right { text-align: right; color: #7F9BB8; }

/* --- Energy & Solar hero card internals --- */
.ind-es-card {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  color: #1E3247;
}

.ind-es-sky {
  height: 140px;
  background: #E9F2FA;
  position: relative;
}

.ind-es-sky__badge {
  position: absolute;
  top: 10px;
  left: 12px;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  color: #5A6E84;
}

.ind-es-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ind-es-body__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.ind-es-body__title {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 600;
  font-size: 15px;
  color: #0B2440;
}

.ind-es-body__flag { font-size: 12px; color: #9A5B00; font-weight: 600; }

.ind-es-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  font-size: 12px;
}

.ind-stat--plain { background: #F3F6FA; }
.ind-stat--plain span { color: #5A6E84; }
.ind-stat--plain b { color: #0B2440; }

/* --- Responsive --- */
@media only screen and (max-width: 820px) {
  .ind-hero__title { font-size: 38px !important; }
  .ind-h2 { font-size: 30px !important; }
  .ind-h2--md { font-size: 30px !important; }
  .ind-hero__inner {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
  }
  .ind-section { padding: 64px 0; }
  .ind-section--tight { padding: 56px 0; }
  .ind-section--flush-bottom { padding: 0 0 64px; }
  .ind-cta { padding: 36px; }
  .ind-cta__title { font-size: 28px; }
}

/* =========================================================
   Insights page
   Reusable classes — replaces per-page inline styles.
   ========================================================= */

/* Article card */
.art {
  flex: 1 1 340px;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E3E9F0;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #1E3247;
  display: flex;
  flex-direction: column;
}

.art:hover { border-color: #9FC3E8; color: #1E3247; }

.art-b {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tag--blue { color: #095090; }
.tag--amber { color: #B26A00; }
.tag--teal { color: #1F6B5E; }

.meta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  color: #5A6E84;
  display: flex;
  justify-content: space-between;
}

.meta__read { color: #095090; font-weight: 600; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid #D3DEEA;
  background: #FFFFFF;
  color: #1E3247;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.chip:hover { border-color: #095090; color: #095090; }

.chip--active {
  background: #0B2440;
  color: #FFFFFF;
  border-color: #0B2440;
}

/* Resource (guides & tools) card */
.res {
  flex: 1 1 300px;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E3E9F0;
  border-radius: 16px;
  padding: 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  text-decoration: none;
  color: #1E3247;
}

.res:hover { border-color: #FF9C00; color: #1E3247; }

.res__icon { flex: none; }

.res__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.res__title {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 600;
  font-size: 18px;
  color: #0B2440;
}

.res__text { color: #4A5D72; font-size: 15px; line-height: 1.5; }
.res__link { color: #095090; font-weight: 600; padding-top: 4px; }

/* --- Insights hero --- */
.ins-hero { background: #072F55; color: #FFFFFF; }

.ins-hero__inner {
  padding-top: 72px;
  padding-bottom: 88px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.ins-hero__copy {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ins-hero__eyebrow { color: #FF9C00; }

.ins-hero__title {
  font-size: 52px;
  line-height: 1.08;
  color: #FFFFFF;
  font-weight: 700;
}

.ins-hero__lead { font-size: 19px; color: #C9D7E6; max-width: 520px; }

.ins-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 6px;
}

/* Featured article card inside the hero */
.ins-feature {
  flex: 1 1 520px;
  min-width: 0;
  background: #FFFFFF;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #1E3247;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

.ins-feature__svg { display: block; }

.ins-feature__body {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ins-feature__badges {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ins-feature__pill {
  background: #FF9C00;
  color: #1A1100;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}

.ins-feature__title {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  color: #0B2440;
}

.ins-feature__text { color: #4A5D72; font-size: 16px; line-height: 1.55; }

/* --- Section wrappers --- */
.ins-section { padding: 96px 0; }
.ins-section--latest { padding: 80px 0 96px; background: #F3F6FA; }
.ins-section--white { background: #FFFFFF; }
.ins-section--navy { padding: 80px 0; background: #0B2440; }

.ins-block { display: flex; flex-direction: column; gap: 36px; }

.ins-head-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.ins-head { display: flex; flex-direction: column; gap: 12px; }

.ins-eyebrow-blue { color: #095090; }
.ins-eyebrow-orange { color: #FF9C00; }
.ins-eyebrow-amber { color: #9A5B00; }

.ins-h2 { font-size: 38px; line-height: 1.15; }
.ins-h2--sm { font-size: 34px; line-height: 1.2; }
.ins-h2--xs { font-size: 32px; line-height: 1.2; }
.ins-h2--white { color: #FFFFFF; }

.ins-lead { font-size: 18px; color: #4A5D72; }

.ins-filter { display: flex; flex-wrap: wrap; gap: 10px; }

.ins-grid { display: flex; flex-wrap: wrap; gap: 22px; }

.ins-cards-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.ins-load { display: flex; justify-content: center; padding-top: 8px; }

/* Article card media header (fixed-height SVG banner) */
.art__media { height: 180px; }
.art__media--d1 { background: #0A3D6E; }
.art__media--d2 { background: #0B2440; }
.art__media--d3 { background: #123F6E; }
.art__media--d4 { background: #0E4A5C; }
.art__media--d5 { background: #1F4A78; }
.art__title { font-size: 20px; line-height: 1.3; }
.art__text { color: #4A5D72; font-size: 15px; }

/* Series block (dark) */
.ins-series {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.ins-series__copy {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ins-series__text { font-size: 18px; color: #B9C8D8; }

.ins-series__list {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ins-series__item {
  background: #0F2E52;
  border: 1px solid #1F4A78;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.ins-series__num {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  color: #FF9C00;
}

.ins-series__label { color: #FFFFFF; font-weight: 600; }

/* Newsletter block */
.ins-newsletter {
  background: #FFF4E2;
  border-radius: 20px;
  padding: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}

.ins-newsletter__copy {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ins-newsletter__text { font-size: 17px; color: #4A5D72; }

.ins-newsletter__form {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ins-newsletter__label { font-size: 14px; font-weight: 600; color: #0B2440; }

.ins-newsletter__row { display: flex; gap: 10px; flex-wrap: wrap; }

.ins-newsletter__input {
  flex: 1 1 220px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #C9D5E2;
  border-radius: 999px;
  font-size: 16px;
  font-family: inherit;
  background: #FFFFFF;
  color: #0B2440;
}

.ins-newsletter__btn {
  min-height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  background: #095090;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
}

.ins-newsletter__btn:hover { background: #06375F; }

/* --- Responsive --- */
@media only screen and (max-width: 820px) {
  .ins-hero__title { font-size: 38px !important; }
  .ins-h2,
  .ins-h2--sm,
  .ins-h2--xs { font-size: 30px !important; }
  .ins-hero__inner {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
  }
  .ins-section { padding: 64px 0; }
  .ins-section--latest { padding: 56px 0 64px; }
  .ins-section--navy { padding: 56px 0; }
  .ins-newsletter { padding: 32px; }
}

/* =========================================================
   Government & public sector page
   Reusable classes — replaces per-page inline styles.
   ========================================================= */

/* Simple capability card */
.card {
  flex: 1 1 260px;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E3E9F0;
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card--dark { background: #0B2440; border-color: #0B2440; }
.card__title { font-size: 18px; color: #0B2440; }
.card__title--light { color: #FFFFFF; }
.card__text { color: #4A5D72; font-size: 15px; }
.card__text--light { color: #C9D7E6; font-size: 15px; }

/* Placeholder token */
.ph {
  background: #FFF4E2;
  color: #7A4800;
  border-radius: 4px;
  padding: 0 4px;
}

/* Key/value data row */
.kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #E3E9F0;
  font-size: 16px;
}

.kv__key { color: #4A5D72; }
.kv__val { color: #0B2440; text-align: right; }

/* --- Government hero --- */
.gov-hero { background: #072F55; color: #FFFFFF; position: relative; overflow: hidden; }

.gov-hero__inner {
  position: relative;
  padding-top: 64px;
  padding-bottom: 88px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.gov-hero__layout {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.gov-hero__copy {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.gov-hero__eyebrow { color: #FF9C00; }

.gov-hero__title {
  font-size: 52px;
  line-height: 1.08;
  color: #FFFFFF;
  font-weight: 700;
}

.gov-hero__lead { font-size: 19px; color: #C9D7E6; max-width: 540px; }

.gov-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 6px;
}

.gov-hero__media { flex: 1 1 460px; min-width: 0; }

/* Capability statement preview card */
.gov-cap {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  color: #1E3247;
}

.gov-cap__head {
  background: #0B2440;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gov-cap__head-title {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 700;
  color: #FFFFFF;
}

.gov-cap__head-note {
  font-size: 11px;
  color: #FFD08A;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.gov-cap__body {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  font-size: 12px;
}

.gov-cap__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gov-cap__col-head {
  color: #095090;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.gov-cap__badges {
  grid-column: span 2;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid #E3E9F0;
}

/* --- Section wrappers --- */
.gov-section { padding: 88px 0; }
.gov-section--white { background: #FFFFFF; }
.gov-section--paper { background: #F3F6FA; }
.gov-section--flush-bottom { padding: 0 0 96px; background: #FFFFFF; }

.gov-block { display: flex; flex-direction: column; gap: 36px; }

.gov-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}

.gov-eyebrow-blue { color: #095090; }
.gov-h2 { font-size: 38px; line-height: 1.15; color: #0B2440; }

.gov-cards { display: flex; flex-wrap: wrap; gap: 18px; }

.gov-data {
  background: #FFFFFF;
  border: 1px solid #E3E9F0;
  border-radius: 16px;
  padding: 8px 28px;
}

/* How we work — checklist */
.gov-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gov-check {
  display: flex;
  gap: 12px;
  font-size: 17px;
  color: #1E3247;
}

.gov-check__icon { flex: none; margin-top: 3px; }

/* CTA band (shares look with industry CTA) */
.gov-cta {
  background: #072F55;
  border-radius: 20px;
  padding: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.gov-cta__ring {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 40px solid rgba(255, 156, 0, 0.18);
}

.gov-cta__content {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.gov-cta__title { font-size: 34px; color: #FFFFFF; line-height: 1.2; }
.gov-cta__text { font-size: 18px; color: #C9D7E6; }
.gov-cta__action { position: relative; }

/* --- Responsive --- */
@media only screen and (max-width: 820px) {
  .gov-hero__title { font-size: 38px !important; }
  .gov-h2 { font-size: 30px !important; }
  .gov-hero__inner {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
  }
  .gov-section { padding: 64px 0; }
  .gov-section--flush-bottom { padding: 0 0 64px; }
  .gov-cta { padding: 36px; }
  .gov-cta__title { font-size: 28px; }
}

/* =========================================================
   Company section pages (Company, Our story, Leadership,
   How we work, Certifications, Partners,
   Responsible AI & security, Careers, Contact)
   Reusable classes — replaces per-page inline styles.
   ========================================================= */

/* --- Shared hero --- */
.co-hero { background: #072F55; color: #FFFFFF; position: relative; overflow: hidden; }
.co-hero--deep { background: #061E36; }

.co-hero__inner {
  position: relative;
  padding-top: 64px;
  padding-bottom: 88px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.co-hero__layout {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.co-hero__copy {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.co-hero__eyebrow { color: #FF9C00; }

.co-hero__title {
  font-size: 52px;
  line-height: 1.08;
  color: #FFFFFF;
  font-weight: 700;
}

.co-hero__lead { font-size: 19px; color: #C9D7E6; max-width: 540px; }

.co-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 6px;
}

.co-hero__media { flex: 1 1 460px; min-width: 0; }
.co-hero__svg { display: block; }

/* Hero certified card (Company) */
.co-cert-card {
  background: #0B2440;
  border: 1px solid #1F4A78;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.co-cert-card__kicker { color: #FFD08A; font-size: 12px; }

.co-cert-card__title {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 700;
  font-size: 26px;
  color: #FFFFFF;
  line-height: 1.2;
}

.co-badge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  justify-items: center;
}

/* Certifications hero badge card (dark panel, bigger badges) */
.co-badge-panel {
  background: #0B2440;
  border: 1px solid #1F4A78;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
}

.co-badge-panel__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  justify-items: center;
}

/* --- Section wrappers --- */
.co-section { padding: 88px 0; }
.co-section--white { background: #FFFFFF; }
.co-section--paper { background: #F3F6FA; }
.co-section--navy { background: #0B2440; }
.co-section--flush-bottom { padding: 0 0 96px; background: #FFFFFF; }

.co-block { display: flex; flex-direction: column; gap: 36px; }

.co-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}

.co-eyebrow-blue { color: #095090; }
.co-eyebrow-orange { color: #FF9C00; }

.co-h2 { font-size: 38px; line-height: 1.15; color: #0B2440; }
.co-h2--sm { font-size: 36px; }
.co-h2--white { color: #FFFFFF; }
.co-lead { font-size: 18px; color: #4A5D72; }
.co-lead--light { font-size: 18px; color: #B9C8D8; }

.co-cards { display: flex; flex-wrap: wrap; gap: 18px; }

/* Two-column prose split (Our story / Leadership intro) */
.co-split { display: flex; flex-wrap: wrap; gap: 56px; }

.co-split__head {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.co-split__role { color: #095090; font-weight: 600; }

.co-split__body {
  flex: 1 1 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 18px;
  color: #4A5D72;
}

/* --- Company landing: link-column groups --- */
.co-linkgroups { display: flex; flex-wrap: wrap; gap: 28px; }

.co-linkgroup {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.co-linkgroup__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #D3DEEA;
}

.co-linkgroup__kicker {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #095090;
}

.co-linkgroup__title { font-size: 24px; }

.lnk__title {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 600;
  font-size: 18px;
  color: #0B2440;
}

.lnk__text { color: #4A5D72; font-size: 15px; }

.co-linkgroups a.lnk { display: flex; flex-wrap: wrap; flex-direction: column; gap: 10px; text-decoration: none; background-color: var(--white); padding: 1.5rem; border-radius: var(--radius-sm);}
.co-linkgroups a.lnk:hover { background-color: var(--soft-line);}

/* --- Stat columns (Company at a glance) --- */
.co-stats { display: flex; flex-wrap: wrap; gap: 18px; }

.co-stat {
  flex: 1 1 220px;
  min-width: 0;
  padding-top: 18px;
  border-top: 3px solid #095090;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.co-stat--accent { border-top-color: #FF9C00; }

.co-stat__value {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 700;
  font-size: 40px;
  color: #0B2440;
}

.co-stat__label { color: #4A5D72; }

/* --- Leadership --- */
.co-founder-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  color: #1E3247;
}

.co-avatar {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: #0B2440;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: none;
}

.co-avatar__initials {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 700;
  font-size: 44px;
  color: #FF9C00;
}

.co-avatar__badge {
  position: absolute;
  bottom: -6px;
  background: #FFF4E2;
  color: #7A4800;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}

.co-founder-card__body {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.co-founder-card__name {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 700;
  font-size: 24px;
  color: #0B2440;
}

.co-founder-card__role { color: #095090; font-weight: 600; }
.co-founder-card__loc { color: #4A5D72; font-size: 15px; }

.co-tagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
}

.co-tagrow span {
  background: #EEF4FA;
  color: #06375F;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 6px;
}

/* Experience tiles (Leadership) */
.co-exp-grid { display: flex; flex-wrap: wrap; gap: 14px; }

.co-exp {
  flex: 1 1 200px;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E3E9F0;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.co-exp__cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #095090;
}

.co-exp__cat--amber { color: #B26A00; }

.co-exp__name {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 600;
  color: #0B2440;
}

/* --- How we work / Careers: numbered process steps --- */
.co-steps { display: flex; flex-wrap: wrap; gap: 16px; }

.co-step {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.co-step__head { display: flex; align-items: center; gap: 12px; }

.co-step__num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #095090;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 700;
  flex: none;
}

.co-step__num--accent { background: #FF9C00; color: #1A1100; }

.co-step__line { flex: 1; height: 2px; background: #D3DEEA; }
.co-step__title { font-size: 20px; }
.co-step__text { color: #4A5D72; font-size: 15px; }

/* Numbered steps variant with top border (Careers hiring process) */
.co-pstep {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 3px solid #095090;
}

.co-pstep--accent { border-top-color: #FF9C00; }

.co-pstep__num {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  color: #B26A00;
  font-size: 13px;
}

.co-pstep__title { font-size: 18px; }
.co-pstep__text { color: #4A5D72; font-size: 15px; }

/* --- Checklist (How we work) --- */
.co-checklist { display: flex; flex-direction: column; gap: 12px; }

.co-check {
  display: flex;
  gap: 12px;
  font-size: 17px;
  color: #1E3247;
}

.co-check__icon { flex: none; margin-top: 3px; }

/* --- Certifications cards --- */
.co-cert {
  flex: 1 1 250px;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E3E9F0;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.co-cert__body { display: flex; flex-direction: column; gap: 4px; }

.co-cert__name {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 700;
  font-size: 18px;
  color: #0B2440;
}

.co-cert__desc { color: #4A5D72; font-size: 14px; }

/* --- Frameworks pills (Responsible AI) --- */
.co-frameworks { display: flex; flex-wrap: wrap; gap: 12px; }

.co-framework {
  background: #FFFFFF;
  border: 1px solid #D3DEEA;
  border-radius: 10px;
  padding: 14px 18px;
  font-weight: 600;
  color: #06375F;
}

/* --- Partners cards --- */
.co-partner {
  flex: 1 1 340px;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E3E9F0;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.co-partner__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.co-partner__title { font-size: 22px; }
.co-partner__text { color: #4A5D72; font-size: 15px; }
.co-partner__link { font-weight: 600; text-decoration: none; padding-top: 4px; }
.ph--chip { font-size: 12px; font-weight: 700; padding: 4px 8px; }

/* --- Careers: open-role rows --- */
.co-roles { display: flex; flex-direction: column; gap: 14px; }

.co-role {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.co-role__main { display: flex; flex-direction: column; gap: 4px; }

.co-role__title {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 600;
  font-size: 19px;
  color: #0B2440;
}

.co-role__text { color: #4A5D72; font-size: 15px; }

.co-role__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.co-role__tag {
  background: #EEF4FA;
  color: #06375F;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
}

.co-role__apply { color: #095090; font-weight: 600; padding: 6px 4px; }

.lnk--dashed { background: transparent; border-style: dashed; }

/* --- Contact page --- */
.co-contact { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }

.co-contact-form {
  flex: 2 1 520px;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E3E9F0;
  border-radius: 18px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.co-contact-form__title { font-size: 26px; margin-bottom: 4px; }

/* Two-column field grid; collapses to one column on small screens */
.co-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* Field: label stacked above a full-width control */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.field label {
  font-size: 14px;
  font-weight: 600;
  color: #0B2440;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #D3DEEA;
  border-radius: 10px;
  background: #FFFFFF;
  color: #0B2440;
  font-size: 16px;
  font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #87919D;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: #3D6B99;
  box-shadow: 0 0 0 3px rgba(61, 107, 153, .12);
}

/* Full-width field spans both grid columns */
.field--full { grid-column: 1 / -1; }

.co-textarea { min-height: 150px; resize: vertical; }

@media only screen and (max-width: 640px) {
  .co-form-row { grid-template-columns: minmax(0, 1fr); }
}

.co-form-submit {
  align-self: flex-start;
  min-height: 48px;
  padding: 0 28px;
  border: none;
  border-radius: 999px;
  background: #FF9C00;
  color: #1A1100;
  font-weight: 600;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
}

.co-form-submit:hover { background: #F08F00; }

.co-contact-side {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.co-contact-details {
  background: #0B2440;
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #E3ECF5;
}

.co-contact-details__title { font-size: 20px; color: #FFFFFF; }

.co-contact-row { display: flex; gap: 12px; align-items: center; }
.co-contact-row--top { align-items: flex-start; }
.co-contact-row__icon { flex: none; }
.co-contact-row--top .co-contact-row__icon { margin-top: 2px; }
.co-contact-row__sub { color: #9FB8D3; font-size: 14px; }
.co-contact-link { color: #FFFFFF; text-decoration: none; }

.co-next {
  background: #F3F6FA;
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.co-next__title { font-size: 18px; }
.co-next__row { display: flex; gap: 12px; }

.co-next__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #095090;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex: none;
}

.co-next__text { color: #4A5D72; font-size: 15px; }

/* --- Shared CTA band --- */
.co-cta {
  background: #072F55;
  border-radius: 20px;
  padding: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.co-cta__ring {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 40px solid rgba(255, 156, 0, 0.18);
}

.co-cta__content {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.co-cta__title { font-size: 34px; color: #FFFFFF; line-height: 1.2; }
.co-cta__text { font-size: 18px; color: #C9D7E6; }
.co-cta__action { position: relative; }

/* --- Responsive --- */
@media only screen and (max-width: 820px) {
  .co-hero__title { font-size: 38px !important; }
  .co-h2,
  .co-h2--sm { font-size: 30px !important; }
  .co-hero__inner {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
  }
  .co-section { padding: 64px 0; }
  .co-section--flush-bottom { padding: 0 0 64px; }
  .co-cta { padding: 36px; }
  .co-cta__title { font-size: 28px; }
}

/* =========================================================
   Client stories page
   Reusable classes — replaces per-page inline styles.
   ========================================================= */

/* Hero testimonial stack */
.cs-hero-stack { display: flex; flex-direction: column; gap: 12px; }

.cs-quote-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #1E3247;
}

.cs-quote-card__text {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-size: 20px;
  font-weight: 600;
  color: #0B2440;
  line-height: 1.35;
}

.cs-quote-card__cite { color: #5A6E84; font-size: 14px; }

.cs-stat-row { display: flex; gap: 12px; }

.cs-stat {
  flex: 1;
  background: #0F2E52;
  border: 1px solid #1F4A78;
  border-radius: 12px;
  padding: 16px;
}

.cs-stat__value {
  font-family: var(--font-heading, 'Schibsted Grotesk', sans-serif);
  font-weight: 700;
  font-size: 26px;
  color: #FF9C00;
}

.cs-stat__label { display: block; color: #B9C8D8; font-size: 13px; }

/* Stories grid */
.cs-grid { display: flex; flex-wrap: wrap; gap: 20px; }

.cs-story {
  flex: 1 1 360px;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E3E9F0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cs-story__head {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-story__head--blue { background: #095090; }
.cs-story__head--teal { background: #0E4A5C; }
.cs-story__head--navy { background: #0B2440; }

.cs-story__kicker { color: #FFD08A; font-size: 12px; }

.cs-story__title {
  font-size: 21px;
  color: #FFFFFF;
  line-height: 1.25;
}

.cs-story__body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
  color: #4A5D72;
}

.cs-story__label {
  color: #0B2440;
  display: block;
  padding-bottom: 4px;
}

.cs-story__result {
  background: #F3F6FA;
  border-radius: 10px;
  padding: 14px;
}


#wpcf7-f1850-o1 {flex: 2 1 520px;}