/* ================================================================
   THALASSA CONSULTING — Combined Design System
   Design: Original navy/cyan with dark mode
   Content: Bilingual DE/EN structure
   ================================================================ */

/* ----------------------------------------------------------------
   1. FONTS
   ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ----------------------------------------------------------------
   2. CSS VARIABLES — LIGHT MODE
   ---------------------------------------------------------------- */
:root {
  /* Brand colors */
  --navy:         #0B1F2A;
  --navy-mid:     #162F3D;
  --navy-light:   #1E3F52;
  --cyan:         #00A8B5;
  --cyan-dark:    #008F9A;
  --cyan-faint:   #E6F7F8;

  /* Backgrounds */
  --bg:           #F7F9FB;
  --bg-white:     #FFFFFF;

  /* Text */
  --heading:      #0B1F2A;
  --text-dark:    #0B1F2A;
  --text-mid:     #3A5464;
  --text-light:   #6B8A9A;

  /* Borders */
  --border:       #D5E3EB;
  --border-light: #EAF0F4;

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(11,31,42,0.06), 0 2px 8px rgba(11,31,42,0.04);
  --shadow-md:    0 4px 12px rgba(11,31,42,0.08), 0 8px 24px rgba(11,31,42,0.06);
  --shadow-lg:    0 8px 24px rgba(11,31,42,0.10), 0 20px 48px rgba(11,31,42,0.10);

  /* Shape */
  --radius:       8px;
  --radius-lg:    16px;
  --transition:   0.2s ease;

  /* Layout */
  --container-max:     1160px;
  --container-padding: 1.75rem;
  --section-spacing:   104px;
}

/* ----------------------------------------------------------------
   3. DARK MODE
   ---------------------------------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --navy:         #07141C;
  --navy-mid:     #10212C;
  --navy-light:   #173747;
  --cyan-faint:   #0D2A34;
  --bg:           #08131B;
  --bg-white:     #10202B;
  --heading:      #F3F9FC;
  --text-dark:    #EAF2F6;
  --text-mid:     #C3D2DB;
  --text-light:   #92A7B5;
  --border:       #294250;
  --border-light: #18303D;
  --shadow-sm:    0 1px 6px rgba(0,0,0,0.22);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.24);
  --shadow-lg:    0 16px 40px rgba(0,0,0,0.30);
}

html[data-theme="dark"] .nav {
  background: rgba(8,19,27,0.95);
}

html[data-theme="dark"] .nav__mobile {
  background: rgba(8,19,27,0.97);
}

/* ----------------------------------------------------------------
   4. RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:             16px;
  scroll-behavior:       smooth;
  -webkit-font-smoothing: antialiased;
  color-scheme:          light;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size:   16px;
  line-height: 1.65;
  color:       var(--text-dark);
  background:  var(--bg);
}

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

a {
  color:      var(--cyan);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--cyan-dark); }

ul { list-style: none; }

button {
  font-family: inherit;
  cursor:      pointer;
  border:      none;
  outline:     none;
}

/* ----------------------------------------------------------------
   5. TYPOGRAPHY
   ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family:     'Inter', system-ui, -apple-system, sans-serif;
  color:           var(--heading);
  line-height:     1.2;
  font-weight:     700;
  letter-spacing:  -0.02em;
}

h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem);   font-weight: 700; letter-spacing: -0.025em; }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; font-weight: 600; }

p {
  color:     var(--text-mid);
  max-width: 68ch;
}

p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--text-dark); }

/* Label / caption style */
.section__label {
  display:        block;
  font-family:    'Inter', sans-serif;
  font-size:      0.75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--cyan);
  margin-bottom:  14px;
}

/* ----------------------------------------------------------------
   6. LAYOUT
   ---------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--container-padding);
}

.section {
  padding: var(--section-spacing) 0;
  background: var(--bg);
}

.section--alt {
  background: var(--bg-white);
}

.section--dark {
  background: var(--navy);
}

.section__header {
  margin-bottom: 48px;
}

.section__header h2 {
  margin-bottom: 16px;
}

.section__header p {
  font-size: 1.0625rem;
}

.section__header--center {
  text-align: center;
}

.section__header--center p {
  margin-left:  auto;
  margin-right: auto;
}

/* Grid system */
.grid      { display: grid; gap: 24px; }
.grid--2   { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid--3   { grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid--4   { grid-template-columns: repeat(4, 1fr); gap: 28px; }

/* Split layouts */
.split {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   72px;
  align-items:           center;
}
.split--60-40 { grid-template-columns: 3fr 2fr; }
.split--40-60 { grid-template-columns: 2fr 3fr; }

/* Split image styling */
.split__img {
  width:         100%;
  aspect-ratio:  4/3;
  object-fit:    cover;
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg);
  display:       block;
}

.split__img--tall {
  aspect-ratio: 3/4;
}

/* ----------------------------------------------------------------
   7. NAVIGATION
   ---------------------------------------------------------------- */
.nav {
  position:      sticky;
  top:           0;
  z-index:       100;
  background:    rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  box-shadow:    var(--shadow-sm);
  height:        72px;
  display:       flex;
  align-items:   center;
  transition:    box-shadow 0.25s ease, background 0.25s ease;
}

.nav__container {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  max-width:       var(--container-max);
  margin:          0 auto;
  padding:         0 var(--container-padding);
}

.nav__logo {
  display:         flex;
  align-items:     center;
  text-decoration: none;
  flex-shrink:     0;
}

.nav__logo-img {
  height:      220px;
  width:       auto;
  display:     block;
  margin-top:  18px;
}

.nav__links {
  display:     flex;
  align-items: center;
  gap:         4px;
}

.nav__links li a {
  display:         block;
  padding:         6px 14px;
  font-size:       0.875rem;
  font-weight:     500;
  color:           var(--text-mid);
  border-radius:   var(--radius);
  text-decoration: none;
  transition:      all var(--transition);
  position:        relative;
  letter-spacing:  0.01em;
}

.nav__links li a::after {
  content:    '';
  position:   absolute;
  bottom:     2px;
  left:       14px;
  right:      14px;
  height:     1.5px;
  background: var(--cyan);
  transform:  scaleX(0);
  transition: transform 0.25s ease;
  transform-origin: center;
}

.nav__links li a:hover,
.nav__links li a.active {
  color:           var(--heading);
  background:      transparent;
  text-decoration: none;
}

.nav__links li a:hover::after,
.nav__links li a.active::after {
  transform: scaleX(1);
}

.nav__right {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex-shrink: 0;
}

/* Language switch */
.nav__lang {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   0.8125rem;
}

.nav__lang a {
  color:           var(--text-light);
  text-decoration: none;
  font-weight:     500;
  padding:         2px 3px;
  transition:      color var(--transition);
}

.nav__lang a.active,
.nav__lang a:hover {
  color:           var(--heading);
  text-decoration: none;
}

.nav__lang .sep {
  color: var(--border);
}

/* Theme toggle button */
.nav__theme-toggle {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  padding:     7px 13px;
  border:      1px solid var(--border);
  border-radius: 999px;
  background:  var(--bg);
  color:       var(--heading);
  font-size:   0.8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor:      pointer;
  transition:  background var(--transition), border-color var(--transition), transform var(--transition);
}

.nav__theme-toggle:hover {
  background:    var(--border-light);
  border-color:  var(--cyan);
  transform:     translateY(-1px);
}

.nav__theme-toggle svg {
  width:  16px;
  height: 16px;
}

/* Mobile toggle */
.nav__toggle {
  display:        none;
  flex-direction: column;
  gap:            5px;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        6px 4px;
}

.nav__toggle span {
  display:       block;
  width:         24px;
  height:        2px;
  background:    var(--heading);
  border-radius: 2px;
  transition:    all 0.25s;
}

/* Mobile menu */
.nav__mobile {
  display:              none;
  position:             fixed;
  top:                  72px;
  left:                 0;
  right:                0;
  background:           rgba(255,255,255,0.97);
  backdrop-filter:      blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:        1px solid var(--border-light);
  padding:              16px var(--container-padding) 24px;
  z-index:              99;
  box-shadow:           var(--shadow-md);
}

.nav__mobile.open { display: block; }

.nav__mobile-links {
  display:        flex;
  flex-direction: column;
  margin-bottom:  16px;
}

.nav__mobile-links li a {
  display:         block;
  padding:         10px 8px;
  border-bottom:   1px solid var(--border-light);
  color:           var(--text-mid);
  text-decoration: none;
  font-size:       0.9375rem;
  font-weight:     500;
  transition:      color var(--transition);
}

.nav__mobile-links li:last-child a { border-bottom: none; }

.nav__mobile-links li a:hover {
  color:           var(--heading);
  text-decoration: none;
}

.nav__mobile-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-top:     12px;
  gap:             12px;
}

/* Nav CTA button (in navbar) */
.nav .btn--primary.btn--sm {
  background: var(--cyan);
  color:      #fff;
  border:     none;
  border-radius: var(--radius);
  padding:    8px 20px;
  font-size:  0.9rem;
  font-weight: 600;
}

.nav .btn--primary.btn--sm:hover {
  background: var(--cyan-dark);
  transform:  translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,168,181,0.3);
}

/* ----------------------------------------------------------------
   8. BUTTONS
   ---------------------------------------------------------------- */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         13px 30px;
  border-radius:   var(--radius);
  font-family:     'Inter', sans-serif;
  font-weight:     600;
  font-size:       0.9rem;
  letter-spacing:  0.01em;
  text-decoration: none;
  border:          1.5px solid transparent;
  cursor:          pointer;
  white-space:     nowrap;
  transition:      all 0.22s ease;
  line-height:     1.2;
}

.btn--primary {
  background:   var(--cyan);
  color:        #fff;
  border-color: var(--cyan);
}
.btn--primary:hover {
  background:      var(--cyan-dark);
  border-color:    var(--cyan-dark);
  color:           #fff;
  text-decoration: none;
  transform:       translateY(-1px);
  box-shadow:      0 4px 12px rgba(0,168,181,0.35);
}

.btn--outline {
  background:   transparent;
  color:        var(--cyan);
  border-color: var(--cyan);
}
.btn--outline:hover {
  background:      var(--cyan);
  color:           #fff;
  text-decoration: none;
  transform:       translateY(-1px);
}

.btn--outline-light {
  background:   transparent;
  color:        #fff;
  border-color: rgba(255,255,255,0.5);
}
.btn--outline-light:hover {
  background:      rgba(255,255,255,0.1);
  border-color:    #fff;
  color:           #fff;
  text-decoration: none;
}

.btn--sm  { padding: 9px 20px; font-size: 0.85rem; }
.btn--lg  { padding: 16px 40px; font-size: 1rem; letter-spacing: 0.015em; }

/* ----------------------------------------------------------------
   9. HERO SECTION (Homepage)
   ---------------------------------------------------------------- */
.hero {
  background: var(--navy);
  padding:    120px 0 100px;
  position:   relative;
  overflow:   hidden;
  isolation:  isolate;
  min-height: 88vh;
  display:    flex;
  align-items: center;
}

/* Dark overlay — stronger gradient for readability over photo */
.hero::before {
  content:  '';
  position: absolute;
  inset:    0;
  background:
    linear-gradient(105deg, rgba(11,31,42,0.90) 0%, rgba(11,31,42,0.72) 55%, rgba(11,31,42,0.45) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Photo background */
.hero__photo {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    -1;
}

/* Legacy video background (kept for fallback) */
.hero__video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    -1;
}

.hero .container { position: relative; z-index: 1; }

.hero__content { max-width: 760px; }

.hero h1 {
  color:         #fff;
  margin-bottom: 24px;
  line-height:   1.1;
}

.hero__sub {
  font-size:     1.1875rem;
  font-weight:   400;
  color:         rgba(255,255,255,0.75);
  max-width:     580px;
  margin-bottom: 16px;
  line-height:   1.7;
}

.hero__text {
  font-size:     0.9375rem;
  color:         rgba(255,255,255,0.55);
  max-width:     600px;
  margin-bottom: 40px;
  line-height:   1.8;
}

.hero__cta {
  display:     flex;
  gap:         14px;
  flex-wrap:   wrap;
  align-items: center;
}

.hero__image {
  margin-top:  64px;
  border-top:  1px solid rgba(255,255,255,0.08);
  padding-top: 40px;
}

/* ----------------------------------------------------------------
   10. IMAGE PLACEHOLDERS
   ---------------------------------------------------------------- */
.img-placeholder {
  background:    var(--bg);
  border:        1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--text-light);
  font-size:     0.8125rem;
  font-style:    italic;
  text-align:    center;
  padding:       2rem;
}
.img-placeholder--hero   { height: 320px; }
.img-placeholder--medium { height: 280px; }
.img-placeholder--small  { height: 200px; }
.img-placeholder--case   { aspect-ratio: 16/6; height: auto; min-height: 180px; }

/* ----------------------------------------------------------------
   11. PROBLEM SECTION
   ---------------------------------------------------------------- */
.problem__text p {
  font-size:     1.0625rem;
  line-height:   1.78;
  color:         var(--text-mid);
  margin-bottom: 1.25rem;
  max-width:     72ch;
}
.problem__text p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------
   12. SERVICE CARDS
   ---------------------------------------------------------------- */
.card {
  background:    var(--bg-white);
  border:        1px solid var(--border-light);
  border-top:    3px solid var(--cyan);
  border-radius: var(--radius-lg);
  padding:       32px;
  transition:    all 0.25s ease;
  cursor:        default;
}
.card:hover {
  box-shadow:    var(--shadow-md);
  transform:     translateY(-4px);
  border-color:  var(--border);
}

.card__icon {
  width:         48px;
  height:        48px;
  background:    var(--cyan-faint);
  border-radius: var(--radius);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-bottom: 22px;
  color:         var(--cyan);
}
.card__icon svg { width: 22px; height: 22px; }

.card h3 { margin-bottom: 10px; }

.card p {
  font-size:   0.9rem;
  max-width:   none;
  line-height: 1.7;
}

/* ----------------------------------------------------------------
   13. STEPS / APPROACH
   ---------------------------------------------------------------- */
.steps {
  display:        flex;
  flex-direction: column;
}

.step {
  display:               grid;
  grid-template-columns: 56px 1fr;
  gap:                   32px;
  padding:               36px 0;
  border-bottom:         1px solid var(--border-light);
  align-items:           start;
}
.step:first-child { padding-top: 0; }
.step:last-child  { border-bottom: none; padding-bottom: 0; }

.step__num {
  font-family:    'Inter', sans-serif;
  font-size:      1rem;
  font-weight:    700;
  color:          var(--cyan);
  line-height:    1;
  flex-shrink:    0;
  padding-top:    6px;
  letter-spacing: 0.05em;
  opacity:        0.7;
}

.step__body h3 { margin-bottom: 8px; }
.step__body p  { font-size: 0.9375rem; max-width: none; }

/* ----------------------------------------------------------------
   14. CASE PREVIEW CARDS
   ---------------------------------------------------------------- */
.case-card {
  background:    var(--bg-white);
  border:        1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding:       36px;
  transition:    all 0.25s ease;
  cursor:        default;
}
.case-card:hover {
  box-shadow:   var(--shadow-md);
  transform:    translateY(-4px);
  border-color: var(--border);
}

.case-card__tag {
  display:        inline-block;
  font-size:      0.75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--cyan);
  background:     var(--cyan-faint);
  padding:        3px 10px;
  border-radius:  20px;
  margin-bottom:  16px;
}

.case-card h3 { margin-bottom: 10px; }
.case-card p  { font-size: 0.9rem; }

.case-card__result {
  display:      flex;
  align-items:  center;
  gap:          10px;
  margin-top:   20px;
  padding-top:  20px;
  border-top:   1px solid var(--border-light);
  font-size:    0.9rem;
  font-weight:  600;
  color:        var(--cyan);
}

.case-card__link {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--cyan);
  margin-top:  12px;
}

/* ----------------------------------------------------------------
   15. CASE DETAIL (Full case study)
   ---------------------------------------------------------------- */
.case-detail {
  background:    var(--bg-white);
  border:        1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  margin-bottom: 32px;
}

.case-detail__header {
  padding:       28px 36px;
  border-bottom: 1px solid var(--border-light);
  background:    var(--bg);
}

.case-detail__industry {
  font-family:    'Inter', sans-serif;
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--cyan);
  margin-bottom:  8px;
}

.case-detail__header h2 {
  font-size:     1.5rem;
  margin-bottom: 0;
}

.case-detail__image {
  border-bottom: 1px solid var(--border-light);
}

.case-detail__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
}

.case-detail__col {
  padding: 24px 36px;
}

.case-detail__col + .case-detail__col {
  border-left: 1px solid var(--border-light);
}

.case-detail__col .col-label {
  display:        block;
  font-family:    'Inter', sans-serif;
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-light);
  margin-bottom:  8px;
}

.case-detail__col p {
  font-size:   0.9375rem;
  max-width:   none;
  line-height: 1.65;
}

.case-detail__result {
  padding:       24px 36px;
  background:    var(--cyan-faint);
  border-top:    1px solid var(--border-light);
}

.case-detail__result .col-label {
  display:        block;
  font-family:    'Inter', sans-serif;
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--cyan-dark);
  margin-bottom:  8px;
}

.case-detail__result p {
  font-size:   0.9375rem;
  font-weight: 600;
  color:       var(--heading);
  max-width:   none;
  margin:      0;
}

/* ----------------------------------------------------------------
   16. ARTICLE CARDS
   ---------------------------------------------------------------- */
.article-card {
  background:    var(--bg-white);
  border:        1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  transition:    all var(--transition);
}
.article-card:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-2px);
}

.article-card__image { border-bottom: 1px solid var(--border-light); }

.article-card__body { padding: 28px; flex: 1; display: flex; flex-direction: column; }

.article-card__meta {
  font-size:      0.75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--cyan);
  background:     var(--cyan-faint);
  display:        inline-block;
  padding:        3px 10px;
  border-radius:  20px;
  margin-bottom:  14px;
}

.article-card h3 { margin-bottom: 8px; }
.article-card p  { font-size: 0.9rem; flex: 1; max-width: none; }

.article-card__link {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--cyan);
  margin-top:  16px;
}

/* Article teaser sections */
.article-teaser { scroll-margin-top: 80px; }
.article-teaser h2 { margin-bottom: 20px; }
.article-teaser p  { font-size: 1rem; line-height: 1.75; margin-bottom: 1rem; max-width: 72ch; }
.article-teaser a  { font-weight: 600; color: var(--cyan); }
.article-teaser a:hover { color: var(--cyan-dark); }

/* ----------------------------------------------------------------
   17. CONTACT FORM
   ---------------------------------------------------------------- */
.form {
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

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

.form__field label {
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--text-dark);
}

.form__field input,
.form__field textarea,
.form__field select {
  width:        100%;
  padding:      10px 14px;
  border:       1.5px solid var(--border);
  border-radius: var(--radius);
  font-family:  'Inter', sans-serif;
  font-size:    0.9375rem;
  color:        var(--text-dark);
  background:   var(--bg);
  transition:   border-color var(--transition), background var(--transition);
  outline:      none;
  appearance:   none;
}

.form__field input:focus,
.form__field textarea:focus {
  border-color: var(--cyan);
  background:   var(--bg-white);
}

.form__field textarea {
  resize:      vertical;
  min-height:  136px;
  line-height: 1.65;
}

.field-error {
  font-size: 0.8125rem;
  color:     #DC2626;
  display:   none;
}

.form__field.is-invalid input,
.form__field.is-invalid textarea {
  border-color: #DC2626;
}
.form__field.is-invalid .field-error { display: block; }

.form__row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

.form__note {
  font-size: 0.8rem;
  color:     var(--text-light);
  margin:    0;
  max-width: none;
}
.form__note a { color: var(--text-light); text-decoration: underline; }
.form__note a:hover { color: var(--text-mid); }

.form__success {
  display:       none;
  padding:       24px 28px;
  background:    var(--cyan-faint);
  border:        1px solid rgba(0,168,181,0.25);
  border-radius: var(--radius-lg);
  font-size:     0.9375rem;
  color:         var(--heading);
  line-height:   1.6;
}

/* ----------------------------------------------------------------
   18. CONTACT INFO
   ---------------------------------------------------------------- */
.contact-info {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.contact-info__item {
  display:     flex;
  align-items: flex-start;
  gap:         14px;
  padding:     16px 0;
  border-bottom: 1px solid var(--border-light);
}
.contact-info__item:last-child { border-bottom: none; }

.contact-info__icon {
  width:           38px;
  height:          38px;
  min-width:       38px;
  background:      var(--cyan-faint);
  border-radius:   var(--radius);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.contact-info__icon svg { width: 18px; height: 18px; color: var(--cyan); }

.ci-label {
  display:        block;
  font-size:      0.775rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--text-light);
  margin-bottom:  2px;
}

.contact-info__item a,
.contact-info__item p {
  font-size:   0.9375rem;
  font-weight: 500;
  color:       var(--text-dark);
  margin:      0;
  max-width:   none;
}

.contact-info__item a:hover { color: var(--cyan); }

/* ----------------------------------------------------------------
   19. ABOUT — PRINCIPLES & CHECK-LIST
   ---------------------------------------------------------------- */
.principle-list {
  display:        flex;
  flex-direction: column;
}

.principle-item {
  padding:       24px 0;
  border-bottom: 1px solid var(--border-light);
}
.principle-item:last-child { border-bottom: none; padding-bottom: 0; }

.principle-item h4 {
  font-family: 'Inter', sans-serif;
  font-size:   1rem;
  font-weight: 700;
  color:       var(--heading);
  margin-bottom: 6px;
}

.principle-item p {
  font-size: 0.9rem;
  max-width: none;
  margin:    0;
}

/* Check list (with dash prefix) */
.check-list {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding:        0;
}

.check-list li {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-size:   0.9375rem;
  color:       var(--text-mid);
  line-height: 1.5;
}

.check-list li::before {
  content:     '';
  display:     block;
  width:       18px;
  height:      18px;
  min-width:   18px;
  margin-top:  2px;
  background:  var(--cyan-faint);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300A8B5'%3E%3Cpath d='M13.5 3.5L6 11 2.5 7.5l-1 1L6 13l8.5-8.5-1-1z'/%3E%3C/svg%3E");
  background-size:     11px;
  background-repeat:   no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Trust block (text-only trust content) */
.trust-block p {
  font-size:     1.0625rem;
  line-height:   1.78;
  margin-bottom: 1.25rem;
  max-width:     72ch;
}

/* ----------------------------------------------------------------
   20. PAGE HEADER (Interior pages)
   ---------------------------------------------------------------- */
.page-header {
  background:  var(--navy);
  padding:     80px 0 72px;
  position:    relative;
  overflow:    hidden;
  isolation:   isolate;
}

.page-header::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(105deg, rgba(11,31,42,0.92) 0%, rgba(11,31,42,0.70) 60%, rgba(11,31,42,0.50) 100%);
  pointer-events: none;
  z-index:  0;
}

/* Photo background for page headers */
.page-header__photo {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    -1;
}

.page-header .container { position: relative; z-index: 1; }

.page-header__video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    -1;
}

.page-header .section__label { color: var(--cyan); }

.page-header h1 {
  color:         #fff;
  max-width:     680px;
  margin-bottom: 20px;
}

.page-header p {
  color:       rgba(255,255,255,0.70);
  max-width:   580px;
  font-size:   1.0625rem;
  margin:      0;
  line-height: 1.75;
  font-weight: 400;
}

/* ----------------------------------------------------------------
   21. CTA SECTION
   ---------------------------------------------------------------- */
.cta-section {
  background: var(--navy);
  padding:    var(--section-spacing) 0;
  text-align: center;
  position:   relative;
  overflow:   hidden;
}

.cta-section::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: radial-gradient(ellipse at 60% 50%, rgba(0,168,181,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section h2 {
  color:         #fff;
  margin-bottom: 16px;
}

.cta-section p {
  color:         rgba(255,255,255,0.65);
  margin:        0 auto 36px;
  max-width:     520px;
  font-size:     1.0625rem;
}

.cta-actions {
  display:         flex;
  justify-content: center;
  gap:             16px;
  flex-wrap:       wrap;
  align-items:     center;
}

/* Override primary btn in dark context */
.cta-section .btn--primary {
  background:   var(--cyan);
  border-color: var(--cyan);
}
.cta-section .btn--primary:hover {
  background:   var(--cyan-dark);
  border-color: var(--cyan-dark);
}

/* ----------------------------------------------------------------
   22. FOOTER
   ---------------------------------------------------------------- */
.footer {
  background: var(--navy);
  padding:    64px 0 0;
  color:      rgba(255,255,255,0.65);
}

.footer__grid {
  display:               grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap:                   48px;
  padding-bottom:        48px;
  border-bottom:         1px solid rgba(255,255,255,0.07);
}

.footer__brand .brand-name {
  font-family:     'Inter', sans-serif;
  font-size:       1.05rem;
  font-weight:     700;
  letter-spacing:  -0.01em;
  color:           #fff;
  display:         block;
  margin-bottom:   8px;
  text-decoration: none;
}

.footer__brand p {
  font-size:  0.875rem;
  line-height: 1.6;
  color:      rgba(255,255,255,0.55);
  max-width:  none;
  margin:     0;
}

.footer__col h4 {
  font-family:    'Inter', sans-serif;
  font-size:      0.75rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          rgba(255,255,255,0.45);
  margin-bottom:  16px;
}

.footer__col ul {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.footer__col ul li a {
  font-size:       0.875rem;
  color:           rgba(255,255,255,0.55);
  text-decoration: none;
  transition:      color var(--transition);
}

.footer__col ul li a:hover { color: #fff; }

.footer__col .contact-line {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.footer__col .contact-line p {
  font-size: 0.875rem;
  color:     rgba(255,255,255,0.55);
  max-width: none;
  margin:    0;
}

.footer__col .contact-line a {
  font-size:       0.875rem;
  color:           rgba(255,255,255,0.55);
  text-decoration: none;
  transition:      color var(--transition);
}

.footer__col .contact-line a:hover { color: var(--cyan); }

.footer__bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         24px 0;
  flex-wrap:       wrap;
  gap:             12px;
}

.footer__bottom p {
  font-size: 0.8125rem;
  color:     rgba(255,255,255,0.3);
  margin:    0;
  max-width: none;
}

.footer__bottom-links {
  display: flex;
  gap:     20px;
}

.footer__bottom-links a {
  font-size:       0.8125rem;
  color:           rgba(255,255,255,0.3);
  text-decoration: none;
  transition:      color var(--transition);
}
.footer__bottom-links a:hover { color: rgba(255,255,255,0.65); }

/* ----------------------------------------------------------------
   23. LEGAL PAGES
   ---------------------------------------------------------------- */
.legal-page { padding: 64px 0; }

.legal-content { max-width: 720px; }

.legal-content h1 { margin-bottom: 8px; }

.legal-date {
  font-size:     0.875rem;
  color:         var(--text-light);
  margin-bottom: 48px;
  max-width:     none;
}

.legal-content h2 {
  font-size:  1.3rem;
  margin:     2.5rem 0 0.75rem;
}

.legal-content h3 {
  font-family: 'Inter', sans-serif;
  font-size:   1rem;
  font-weight: 700;
  color:       var(--heading);
  margin:      1.75rem 0 0.5rem;
}

.legal-content p {
  font-size:     0.9375rem;
  margin-bottom: 0.875rem;
  max-width:     none;
  line-height:   1.75;
}

.legal-content ul {
  padding-left:  20px;
  margin-bottom: 14px;
  list-style:    disc;
}

.legal-content li {
  font-size:     0.9375rem;
  color:         var(--text-mid);
  margin-bottom: 4px;
}

.legal-content a { color: var(--cyan); }

.address-block {
  font-style:  normal;
  line-height: 1.7;
  font-size:   0.9375rem;
  color:       var(--text-mid);
  margin-bottom: 1rem;
}

/* ----------------------------------------------------------------
   24. QUESTIONNAIRE / LOGIN AREA
   ---------------------------------------------------------------- */
.questionnaire-page { min-height: 70vh; padding: var(--section-spacing) 0; }

.login-box {
  max-width:     440px;
  background:    var(--bg-white);
  border:        1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding:       40px;
  box-shadow:    var(--shadow-sm);
}

.login-box h2 {
  font-size:     1.5rem;
  margin-bottom: 8px;
}

.login-box > p {
  font-size:     0.9375rem;
  margin-bottom: 28px;
  max-width:     none;
}

.login-error {
  display:   none;
  font-size: 0.8125rem;
  color:     #DC2626;
  margin-top: 6px;
}

.questionnaire-content { display: none; }

.questionnaire-form h2 {
  font-size:     1.75rem;
  margin-bottom: 8px;
}

.questionnaire-form > p {
  margin-bottom: 40px;
}

.q-section {
  margin-bottom:  32px;
  padding-bottom: 32px;
  border-bottom:  1px solid var(--border-light);
}
.q-section:last-of-type { border-bottom: none; }

.q-section h3 {
  font-family: 'Inter', sans-serif;
  font-size:   0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:       var(--text-light);
  margin-bottom: 20px;
}

/* ----------------------------------------------------------------
   25. UTILITY CLASSES
   ---------------------------------------------------------------- */
.text-muted   { color: var(--text-light); }
.text-accent  { color: var(--cyan); }
.text-small   { font-size: 0.875rem; }
.text-center  { text-align: center; }
.no-max-width { max-width: none; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: 1.5rem; }

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

/* ----------------------------------------------------------------
   26. RESPONSIVE — TABLET (≤ 1024px)
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --section-spacing: 80px; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split { gap: 48px; }
}

/* ----------------------------------------------------------------
   27. RESPONSIVE — MOBILE (≤ 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --section-spacing:   60px;
    --container-padding: 1.25rem;
  }

  /* Nav */
  .nav__links,
  .nav__right .btn { display: none; }
  .nav__toggle { display: flex; }

  /* Hero */
  .hero { padding: 80px 0 64px; min-height: auto; }

  /* Grids */
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .split,
  .split--60-40,
  .split--40-60 { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Case detail */
  .case-detail__grid { grid-template-columns: 1fr; }
  .case-detail__col + .case-detail__col {
    border-left:  none;
    border-top:   1px solid var(--border-light);
  }
  .case-detail__col { padding: 20px 24px; }
  .case-detail__result { padding: 20px 24px; }
  .case-detail__header { padding: 20px 24px; }

  /* Form */
  .form__row { grid-template-columns: 1fr; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  /* Login */
  .login-box { padding: 28px 20px; }
}

/* ----------------------------------------------------------------
   28. RESPONSIVE — SMALL (≤ 480px)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }

  .hero__cta,
  .cta-actions { flex-direction: column; align-items: stretch; }

  .btn { width: 100%; justify-content: center; }
}

/* ----------------------------------------------------------------
   29. APPROACH — "HOW WE WORK" SECTION BACKGROUND
   ---------------------------------------------------------------- */
.section--approach-bg {
  position:   relative;
  overflow:   hidden;
  isolation:  isolate;
}
.section--approach-bg::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: url('../assets/images/approach-section-bg.png') center/cover no-repeat;
  z-index:    -1;
  opacity:    0.18;
}

/* ----------------------------------------------------------------
   29. SCROLL REVEAL ANIMATIONS
   ---------------------------------------------------------------- */

[class*="reveal"] {
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Up — headings, paragraphs, steps */
.reveal {
  opacity:   0;
  transform: translateY(40px);
}

/* From left — left split columns, labels */
.reveal--left {
  opacity:   0;
  transform: translateX(-48px);
}

/* From right — right split columns */
.reveal--right {
  opacity:   0;
  transform: translateX(48px);
}

/* Scale — cards */
.reveal--scale {
  opacity:   0;
  transform: translateY(24px) scale(0.96);
}

/* Fade only — subtle secondary text */
.reveal--fade {
  opacity:   0;
  transform: none;
}

/* Visible state */
.reveal.is-visible,
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible,
.reveal--fade.is-visible {
  opacity:   1;
  transform: none;
}

/* Stagger delays */
.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }
.reveal--delay-4 { transition-delay: 0.32s; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  [class*="reveal"] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ----------------------------------------------------------------
   30. ENHANCED INTERACTIONS
   ---------------------------------------------------------------- */

/* Nav — deepen shadow when page is scrolled */
.nav--scrolled {
  box-shadow: 0 2px 24px rgba(11,31,42,0.12);
  border-bottom-color: var(--border);
}

/* Cards — stronger lift + cyan glow + 3D tilt (tilt set via JS inline style) */
.card {
  transform-style: preserve-3d;
  will-change:     transform;
}
.card:hover {
  box-shadow:      0 8px 28px rgba(0,168,181,0.12), var(--shadow-md);
  transform:       translateY(-6px);
  border-top-color: var(--cyan);
}

/* Buttons — glow pulse on hover */
.btn--primary:hover {
  box-shadow: 0 6px 20px rgba(0,168,181,0.45);
  transform:  translateY(-2px);
}
.btn--outline:hover {
  box-shadow: 0 6px 20px rgba(0,168,181,0.25);
  transform:  translateY(-2px);
}
.btn--outline-light:hover {
  box-shadow: 0 6px 20px rgba(255,255,255,0.15);
  transform:  translateY(-2px);
}

/* Section label — animated underline on hover */
.section__label {
  display:  inline-block;
  position: relative;
}
.section__label::after {
  content:    '';
  position:   absolute;
  left: 0; bottom: -2px;
  width:      0;
  height:     2px;
  background: var(--cyan);
  transition: width 0.35s ease;
}
.section__label:hover::after { width: 100%; }

/* Nav links — subtle slide-up underline */
.nav__links li a {
  position: relative;
}
.nav__links li a::after {
  content:    '';
  position:   absolute;
  left: 50%; bottom: 2px;
  transform:  translateX(-50%);
  width:      0;
  height:     2px;
  background: var(--cyan);
  border-radius: 2px;
  transition: width 0.25s ease;
}
.nav__links li a:hover::after,
.nav__links li a.active::after { width: 60%; }

/* ── Hero Stats Bar ────────────────────────────────────────────────────── */
@keyframes statFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__stats {
  display:         grid;
  grid-template-columns: repeat(4, 1fr);
  gap:             0;
  margin-top:      56px;
  border-top:      1px solid rgba(255,255,255,0.15);
  padding-top:     40px;
}

.hero__stat {
  display:         flex;
  flex-direction:  column;
  gap:             6px;
  padding:         0 24px 0 0;
  border-right:    1px solid rgba(255,255,255,0.12);
  opacity:         0;
  animation:       statFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero__stat:nth-child(1) { animation-delay: 0.1s; }
.hero__stat:nth-child(2) { animation-delay: 0.25s; }
.hero__stat:nth-child(3) { animation-delay: 0.4s; }
.hero__stat:nth-child(4) { animation-delay: 0.55s; }

.hero__stat:last-child {
  border-right:    none;
  padding-right:   0;
  padding-left:    24px;
}

.hero__stat:not(:first-child) {
  padding-left:    24px;
}

.hero__stat-value {
  font-size:       2.25rem;
  font-weight:     700;
  color:           #fff;
  line-height:     1;
  letter-spacing:  -0.02em;
}

.hero__stat-symbol {
  color: var(--cyan);
  font-weight: 700;
}

.hero__stat-label {
  font-size:       0.8125rem;
  color:           rgba(255,255,255,0.55);
  line-height:     1.4;
  text-transform:  uppercase;
  letter-spacing:  0.04em;
}

@media (max-width: 768px) {
  .hero__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 0;
    padding-top: 32px;
    margin-top: 40px;
  }
  .hero__stat {
    border-right: none;
    padding: 0;
  }
  .hero__stat:not(:first-child) {
    padding-left: 0;
  }
  .hero__stat:last-child {
    padding-left: 0;
  }
  .hero__stat:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.12);
    padding-right: 24px;
  }
  .hero__stat:nth-child(even) {
    padding-left: 24px;
  }
}

/* ----------------------------------------------------------------
   31. CASE STUDIES — ACCORDION
   ---------------------------------------------------------------- */

/* Hero header */
.cs-hero {
  background: var(--navy);
  padding:    80px 0 72px;
  position:   relative;
  overflow:   hidden;
  isolation:  isolate;
}

.cs-hero::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(105deg, rgba(11,31,42,0.92) 0%, rgba(11,31,42,0.70) 60%, rgba(11,31,42,0.50) 100%);
  pointer-events: none;
  z-index:  0;
}

.cs-hero__photo {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    -1;
}

.cs-hero .container { position: relative; z-index: 1; }

.cs-hero .section__label { color: var(--cyan); }

.cs-hero h1 {
  color:         #fff;
  max-width:     680px;
  margin-bottom: 20px;
}

.cs-hero__sub {
  color:       rgba(255,255,255,0.70);
  max-width:   580px;
  font-size:   1.0625rem;
  margin:      0;
  line-height: 1.75;
  font-weight: 400;
}

/* Accordion container */
.cs-accordion {
  display:        flex;
  flex-direction: column;
  border:         1px solid var(--border);
  border-radius:  var(--radius-lg);
  overflow:       hidden;
  box-shadow:     var(--shadow-md);
}

/* Each item */
.cs-item {
  border-bottom: 1px solid var(--border);
  background:    var(--bg-white);
}
.cs-item:last-child { border-bottom: none; }

/* Clickable header row */
.cs-header {
  display:     flex;
  align-items: center;
  gap:         24px;
  width:       100%;
  padding:     28px 32px;
  background:  none;
  border:      none;
  cursor:      pointer;
  text-align:  left;
  color:       var(--text-dark);
  transition:  background 0.2s ease;
}
.cs-header:hover { background: var(--cyan-faint); }

.cs-item.is-open > .cs-header {
  background:    var(--cyan-faint);
  border-bottom: 1px solid var(--border-light);
}

/* Number */
.cs-num {
  font-family:  'Inter', sans-serif;
  font-size:    1.5rem;
  font-weight:  700;
  color:        var(--cyan);
  opacity:      0.5;
  letter-spacing: 0.05em;
  min-width:    52px;
  line-height:  1;
  transition:   opacity 0.2s ease;
  flex-shrink:  0;
}
.cs-item.is-open .cs-num,
.cs-header:hover .cs-num { opacity: 1; }

/* Meta */
.cs-meta {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            5px;
  min-width:      0;
}

.cs-tag {
  display:        inline-block;
  font-size:      0.72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--cyan);
  background:     var(--cyan-faint);
  padding:        3px 10px;
  border-radius:  100px;
  width:          fit-content;
}

.cs-title {
  font-size:   1.125rem;
  font-weight: 700;
  color:       var(--heading);
  margin:      0;
  line-height: 1.35;
}

.cs-teaser {
  font-size:   0.875rem;
  color:       var(--text-light);
  margin:      0;
  max-width:   none;
  line-height: 1.55;
}

/* KPI */
.cs-kpi {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            3px;
  flex-shrink:    0;
  min-width:      110px;
}

.cs-kpi__value {
  font-size:      1.875rem;
  font-weight:    700;
  color:          var(--cyan);
  line-height:    1;
  letter-spacing: -0.02em;
}

.cs-kpi__label {
  font-size:      0.72rem;
  color:          var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align:     right;
}

/* Chevron */
.cs-chevron {
  flex-shrink: 0;
  color:       var(--text-light);
  display:     flex;
  align-items: center;
  transition:  transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
               color 0.2s ease;
}
.cs-item.is-open .cs-chevron {
  transform: rotate(180deg);
  color:     var(--cyan);
}

/* Collapsible body */
.cs-body {
  max-height:  0;
  overflow:    hidden;
  transition:  max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-item.is-open .cs-body { max-height: 3200px; }

.cs-body__inner { padding: 40px 32px 44px; }

/* Two-column grid */
.cs-body__grid {
  display:               grid;
  grid-template-columns: 1fr 280px;
  gap:                   48px;
  align-items:           start;
}

/* Content column */
.cs-body__content h3 {
  font-size:     1.0625rem;
  font-weight:   700;
  color:         var(--heading);
  margin:        28px 0 10px;
}
.cs-body__content h3:first-child { margin-top: 0; }

.cs-body__content h4 {
  font-size:   0.9375rem;
  font-weight: 600;
  color:       var(--heading);
  margin:      20px 0 8px;
}

.cs-body__content p {
  font-size:     0.9375rem;
  color:         var(--text-mid);
  line-height:   1.75;
  margin-bottom: 12px;
  max-width:     none;
}

.cs-body__content ul {
  padding:        0;
  list-style:     none;
  margin:         0 0 16px;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.cs-body__content ul li {
  font-size:    0.9375rem;
  color:        var(--text-mid);
  padding-left: 20px;
  position:     relative;
  line-height:  1.6;
}

.cs-body__content ul li::before {
  content:     '–';
  position:    absolute;
  left:        0;
  color:       var(--cyan);
  font-weight: 700;
}

/* Blockquote */
.cs-body__content blockquote {
  margin:        24px 0;
  padding:       14px 20px 14px 22px;
  border-left:   3px solid var(--cyan);
  background:    var(--cyan-faint);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style:    italic;
  font-size:     0.9375rem;
  color:         var(--text-dark);
  line-height:   1.65;
}

/* Disclaimer */
.cs-disclaimer {
  font-size:  0.8rem;
  color:      var(--text-light);
  font-style: italic;
  margin-top: 24px;
  max-width:  none;
}

/* Sidebar */
.cs-body__sidebar {
  display:        flex;
  flex-direction: column;
  gap:            14px;
  position:       sticky;
  top:            100px;
}

/* Result card */
.cs-result-card {
  background:    var(--navy);
  border-radius: var(--radius-lg);
  padding:       20px 22px;
}

.cs-result-card__label {
  font-size:      0.72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          rgba(255,255,255,0.4);
  margin-bottom:  10px;
  max-width:      none;
}

.cs-result-card__value {
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--cyan);
  line-height: 1.1;
  margin:      0 0 4px;
  max-width:   none;
}

.cs-result-card__desc {
  font-size:  0.875rem;
  color:      rgba(255,255,255,0.55);
  margin:     0;
  max-width:  none;
  line-height: 1.5;
}

.cs-result-card ul {
  padding:        0;
  list-style:     none;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            7px;
}

.cs-result-card ul li {
  font-size:    0.875rem;
  color:        rgba(255,255,255,0.6);
  padding-left: 18px;
  position:     relative;
  line-height:  1.5;
}

.cs-result-card ul li::before {
  content:   '✓';
  position:  absolute;
  left:      0;
  color:     var(--cyan);
  font-size: 0.75rem;
  top:       2px;
}

/* Responsive */
@media (max-width: 1024px) {
  .cs-body__grid { grid-template-columns: 1fr 240px; gap: 32px; }
}

@media (max-width: 768px) {
  .cs-header { padding: 20px; gap: 14px; }
  .cs-num    { font-size: 1.4rem; min-width: 36px; }
  .cs-kpi    { display: none; }
  .cs-teaser { display: none; }
  .cs-body__inner { padding: 24px 20px 28px; }
  .cs-body__grid  { grid-template-columns: 1fr; gap: 24px; }
  .cs-body__sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .cs-result-card { flex: 1; min-width: 200px; }
}