/* ============================================================
   Finspera 21 — Stylesheet (SolveOrbit-derived)
   Charcoal + teal · bold restyle
   ============================================================ */

/* --- Variables -------------------------------------------- */
:root {
  --primary:       #0F1A28;
  --primary-mid:   #16212F;
  --primary-light: #20303F;
  --accent:        #35B4F2;
  --accent-dark:   #1C9FE0;
  --accent-pale:   #D8F1FB;
  --accent-bright: #57C4FA;
  --white:         #FFFFFF;
  --off-white:     #F5F8F9;
  --grey-50:       #F1F5F6;
  --grey-100:      #E7ECEE;
  --grey-200:      #D3DADD;
  --grey-400:      #828D92;
  --grey-600:      #4E575C;
  --text:          #161D23;

  --font-main:  'Inter', system-ui, sans-serif;
  --font-serif: 'Space Grotesk', 'Inter', sans-serif;

  --max-w:     1200px;
  --radius:    12px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 3px rgba(22,29,35,.06), 0 6px 18px rgba(22,29,35,.06);
  --shadow-md: 0 8px 24px rgba(22,29,35,.10), 0 18px 50px rgba(22,29,35,.08);
  --shadow-lg: 0 18px 56px rgba(22,29,35,.16), 0 40px 100px rgba(22,29,35,.12);
  --glow:      0 0 0 1px rgba(53, 180, 242,.28), 0 10px 40px rgba(53, 180, 242,.30);
  --grad-teal: linear-gradient(135deg, #57C4FA 0%, #0B8AC9 100%);
  --grad-dark: linear-gradient(160deg, #142033 0%, #0E1826 60%, #0B111A 100%);
  --t: 0.26s cubic-bezier(.4,0,.2,1);
}

/* --- Reset & Base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-main);
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
::selection { background: rgba(53, 180, 242,.2); }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
}

/* --- Buttons ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-family: var(--font-main);
  font-size: .825rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t);
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; transition: transform var(--t); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary {
  background: var(--accent);
  color: var(--primary);
  border-color: var(--accent);
}
.btn--primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: 0 8px 24px rgba(53, 180, 242,.28);
  transform: translateY(-1px);
}
.btn--outline {
  background: transparent;
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.3);
}
.btn--outline:hover {
  border-color: rgba(255,255,255,.8);
  color: var(--white);
}
.btn--outline-dark {
  background: transparent;
  color: var(--primary);
  border-color: var(--grey-200);
}
.btn--outline-dark:hover {
  border-color: var(--primary);
}
.btn--full { width: 100%; justify-content: center; }
.btn--lg { padding: 15px 32px; font-size: .875rem; }

/* --- Section Shared --------------------------------------- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.section-label::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.section-label--light { color: rgba(53, 180, 242,.85); }
.section-label--light::before { background: rgba(53, 180, 242,.7); }

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 2.9rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.section-title--light { color: var(--white); }
.section-title--sm { font-size: clamp(1.6rem, 2.5vw, 2.1rem); }

.section-desc {
  font-size: .975rem;
  color: var(--grey-600);
  max-width: 540px;
  line-height: 1.85;
}
.section-desc--light { color: rgba(255,255,255,.55); }

.section-header { margin-bottom: 56px; }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: all var(--t);
}
.nav--solid {
  background: rgba(22,29,35,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 2px 24px rgba(0,0,0,.18);
}
.nav__container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

/* Logo */
.nav__logo { display: flex; align-items: center; gap: 10px; }
.logo-img { height: 54px; width: auto; max-width: 210px; object-fit: contain; }
.logo-fallback { display: flex; flex-direction: column; line-height: 1; }
.logo-fallback__name {
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--white);
  display: flex;
  align-items: flex-start;
  gap: 3px;
  letter-spacing: -.02em;
}
.logo-fallback__name svg { margin-top: 1px; }
.logo-fallback__sub {
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
}

/* Links */
.nav__links { display: flex; align-items: center; gap: 0; }
.nav__item { position: relative; }
.nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  padding: 8px 14px;
  border-radius: var(--radius);
  transition: all var(--t);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-main);
  letter-spacing: .02em;
}
.nav__link:hover { color: var(--white); background: rgba(255,255,255,.06); }
.nav__link--cta {
  background: var(--accent) !important;
  color: var(--primary) !important;
  font-weight: 700;
  margin-left: 8px;
  letter-spacing: .04em;
  font-size: .75rem;
  text-transform: uppercase;
}
.nav__link--cta:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(53, 180, 242,.3);
}
.nav__chevron { width: 13px; height: 13px; transition: transform var(--t); }
.nav__item:hover .nav__chevron { transform: rotate(180deg); }

/* ============================================================
   Mega-menu — full viewport width
   ============================================================ */
.nav__dropdown {
  position: fixed;
  top: 80px;
  left: 0; right: 0;
  width: 100%;
  background: var(--white);
  border-top: 2px solid var(--accent);
  box-shadow: 0 24px 64px rgba(22,29,35,.13), 0 4px 16px rgba(22,29,35,.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  pointer-events: none;
  z-index: 199;
}
.nav__item.open .nav__dropdown {
  opacity: 1; visibility: visible;
  transform: translateY(0); pointer-events: auto;
}

/* Inner layout */
.nav__mega-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 36px 40px 28px;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 40px;
  align-items: start;
}

/* Left zone header */
.nav__mega-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey-400);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.nav__mega-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--grey-100);
}
.nav__mega-sublabel {
  font-size: .78rem;
  color: var(--grey-600);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
}

/* Service/Solution grid */
.nav__mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--grey-100);
  border-radius: 10px;
  overflow: hidden;
}
.nav__mega-grid--2col {
  grid-template-columns: repeat(3, 1fr);
}

/* Individual item */
.nav__mega-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px 20px;
  background: var(--white);
  transition: background var(--t);
  color: inherit;
  position: relative;
}
.nav__mega-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.nav__mega-item:hover { background: var(--grey-50); }
.nav__mega-item:hover::after { transform: scaleX(1); }

.nav__mega-icon {
  width: 38px; height: 38px;
  background: var(--accent-pale);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-dark);
  flex-shrink: 0;
  transition: all var(--t);
}
.nav__mega-icon svg { width: 18px; height: 18px; }
.nav__mega-item:hover .nav__mega-icon { background: var(--accent); color: var(--primary); }

.nav__mega-name {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
  transition: color var(--t);
}
.nav__mega-item:hover .nav__mega-name { color: var(--primary); }
.nav__mega-desc {
  display: block;
  font-size: .75rem;
  color: var(--grey-400);
  line-height: 1.55;
}

/* Solution features list */
.nav__mega-features {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
}
.nav__mega-features li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .71rem;
  color: var(--grey-400);
}
.nav__mega-features li::before {
  content: '';
  width: 3px; height: 3px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.nav__mega-tag {
  display: inline-block;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--accent-pale);
  color: var(--accent-dark);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Right panel — featured CTA */
.nav__mega-panel {
  background: var(--primary);
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.nav__mega-panel-eyebrow {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.nav__mega-panel-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--white);
  line-height: 1.55;
  margin-bottom: 20px;
  font-style: italic;
  flex: 1;
}
.nav__mega-panel-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--accent);
  padding: 10px 16px;
  border-radius: 5px;
  transition: all var(--t);
  margin-bottom: 22px;
  width: fit-content;
}
.nav__mega-panel-btn:hover { background: var(--accent-dark); transform: translateY(-1px); }
.nav__mega-panel-btn svg { width: 12px; height: 12px; }
.nav__mega-panel-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 16px;
}
.nav__mega-panel-stat {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.nav__mega-panel-stat strong {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -.02em;
  line-height: 1;
}
.nav__mega-panel-stat strong span { color: var(--accent); }
.nav__mega-panel-stat em {
  font-style: normal;
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  font-weight: 500;
}

/* Bottom bar */
.nav__mega-bar {
  border-top: 1px solid var(--grey-100);
  background: var(--grey-50);
}
.nav__mega-bar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 12px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__mega-bar-link {
  font-size: .74rem;
  font-weight: 700;
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--t), color var(--t);
}
.nav__mega-bar-link:hover { gap: 10px; color: var(--primary); }
.nav__mega-bar-link svg { width: 13px; height: 13px; }
.nav__mega-bar-tags {
  display: flex;
  gap: 6px;
}
.nav__mega-bar-tag {
  font-size: .61rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--grey-400);
  padding: 3px 8px;
  border: 1px solid var(--grey-200);
  border-radius: 3px;
  background: var(--white);
}
.nav__hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav__hamburger span { display: block; width: 22px; height: 1.5px; background: var(--white); border-radius: 2px; transition: all var(--t); }
.nav__hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--primary);
  overflow: hidden;
}

/* Background */
.hero__bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #12181E 0%, #161D23 50%, #1A2128 100%);
}

/* Subtle background grid texture */
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Content */
.hero__container {
  position: relative; z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero__content { /* left column */ }

/* Dashboard visual — right column */
.hero__visual {
  position: relative;
  z-index: 2;
}

@keyframes float {
  0%, 100% { transform: translateY(0);     box-shadow: 0 32px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04); }
  50%       { transform: translateY(-14px); box-shadow: 0 48px 96px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04); }
}

.hero-dash {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  animation: float 5s ease-in-out infinite;
}

.hero-dash__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.hero-dash__dots { display: flex; gap: 5px; }
.hero-dash__dots span { width: 8px; height: 8px; border-radius: 50%; }
.hero-dash__dots span:nth-child(1) { background: rgba(255,90,90,.45); }
.hero-dash__dots span:nth-child(2) { background: rgba(255,185,50,.45); }
.hero-dash__dots span:nth-child(3) { background: rgba(53, 180, 242,.45); }
.hero-dash__chrome-title {
  font-size: .67rem;
  color: rgba(255,255,255,.25);
  letter-spacing: .07em;
  font-weight: 500;
  margin-left: 4px;
}

.hero-dash__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.hero-dash__metric { padding: 14px 16px; background: rgba(255,255,255,.02); }
.hero-dash__metric-lbl {
  font-size: .6rem; color: rgba(255,255,255,.3);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 4px; font-weight: 600;
}
.hero-dash__metric-val {
  font-size: 1.15rem; font-weight: 700;
  color: var(--white); letter-spacing: -.02em;
  line-height: 1; margin-bottom: 4px;
}
.hero-dash__metric-delta { font-size: .62rem; font-weight: 700; }
.hero-dash__metric-delta--up { color: var(--accent); }
.hero-dash__metric-delta--down { color: rgba(255,130,80,.85); }

.hero-dash__chart-area { padding: 14px 16px 6px; }
.hero-dash__chart-label {
  font-size: .6rem; color: rgba(255,255,255,.2);
  text-transform: uppercase; letter-spacing: .09em;
  margin-bottom: 8px; font-weight: 700;
}
.hero-dash__chart { width: 100%; height: 90px; display: block; }

.hero-dash__items {
  padding: 10px 12px 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.hero-dash__item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  background: rgba(255,255,255,.02);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.04);
}
.hero-dash__tag {
  font-size: .58rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}
.hero-dash__tag--teal { background: rgba(53, 180, 242,.1); color: var(--accent); border: 1px solid rgba(53, 180, 242,.18); }
.hero-dash__tag--blue { background: rgba(100,150,255,.1); color: rgba(140,180,255,.85); border: 1px solid rgba(100,150,255,.18); }
.hero-dash__item-name { font-size: .74rem; color: rgba(255,255,255,.5); flex: 1; }
.hero-dash__pill {
  font-size: .58rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 100px; flex-shrink: 0;
}
.hero-dash__pill--green { background: rgba(53, 180, 242,.1); color: var(--accent); border: 1px solid rgba(53, 180, 242,.18); }
.hero-dash__pill--yellow { background: rgba(255,185,50,.08); color: rgba(255,185,50,.85); border: 1px solid rgba(255,185,50,.15); }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.hero__eyebrow-line { width: 40px; height: 1px; background: var(--accent); }
.hero__eyebrow-text {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

.hero__heading {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6vw, 5.4rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.07;
  letter-spacing: -.02em;
  margin-bottom: 28px;
  max-width: 680px;
}
.hero__heading em {
  font-style: normal;
  color: var(--accent);
}

.hero__subtext {
  font-size: 1.05rem;
  color: rgba(255,255,255,.5);
  max-width: 500px;
  line-height: 1.85;
  margin-bottom: 40px;
  font-weight: 300;
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* Stats bar at bottom of hero */
.hero__stats-bar {
  position: relative; z-index: 2;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 32px 0;
  margin-top: 72px;
}
.hero__stats-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.hero__stat {
  padding: 0 48px;
  border-right: 1px solid rgba(255,255,255,.07);
  flex: 1;
}
.hero__stat:first-child { padding-left: 0; }
.hero__stat:last-child { border-right: none; }
.hero__stat-number {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.hero__stat-number span { color: var(--accent); }
.hero__stat-label {
  font-size: .73rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ============================================================
   Services (Premium List Layout)
   ============================================================ */
.services {
  padding: 120px 0;
  background: var(--white);
}

.services__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 64px;
}
.services__header-desc { padding-bottom: 4px; }

.services__list { border-top: 1px solid var(--grey-100); }

.svc-row {
  display: grid;
  grid-template-columns: 72px 1fr 160px 40px;
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--grey-100);
  transition: all var(--t);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.svc-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform var(--t);
  transform-origin: center;
}
.svc-row:hover::before { transform: scaleY(1); }
.svc-row:hover {
  background: var(--grey-50);
  padding-left: 20px;
  padding-right: 20px;
  margin-left: -20px;
  margin-right: -20px;
}

.svc-row__num {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--grey-200);
  line-height: 1;
  transition: color var(--t);
}
.svc-row:hover .svc-row__num { color: var(--accent); }

.svc-row__body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
  letter-spacing: -.01em;
  transition: color var(--t);
}
.svc-row__body p {
  font-size: .85rem;
  color: var(--grey-400);
  line-height: 1.6;
}

.svc-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.svc-row__tags span {
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey-400);
  background: var(--grey-50);
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--grey-100);
  transition: all var(--t);
}
.svc-row:hover .svc-row__tags span {
  background: var(--accent-pale);
  border-color: rgba(53, 180, 242,.15);
  color: var(--accent-dark);
}

.svc-row__arrow {
  width: 36px; height: 36px;
  border: 1.5px solid var(--grey-200);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--grey-400);
  transition: all var(--t);
  flex-shrink: 0;
  margin-left: auto;
}
.svc-row__arrow svg { width: 14px; height: 14px; }
.svc-row:hover .svc-row__arrow {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--primary);
  transform: translateX(3px);
}

/* ============================================================
   Solutions (Premium Dark Section)
   ============================================================ */
.solutions {
  padding: 120px 0;
  background: var(--primary);
  position: relative;
  overflow: hidden;
}
.solutions::after {
  content: '';
  position: absolute;
  top: -160px; right: -160px;
  width: 640px; height: 640px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
  pointer-events: none;
}
.solutions::before {
  content: '';
  position: absolute;
  bottom: -120px; left: -120px;
  width: 400px; height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(53, 180, 242,.05);
  pointer-events: none;
}

.solutions__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.05);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sol-card {
  background: rgba(255,255,255,.03);
  padding: 48px 40px;
  transition: all var(--t);
  position: relative;
  cursor: pointer;
}
.sol-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 40px; right: 40px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--t);
  transform-origin: left;
}
.sol-card:hover {
  background: rgba(255,255,255,.06);
}
.sol-card:hover::after { transform: scaleX(1); }

.sol-card--featured { background: rgba(53, 180, 242,.06); }
.sol-card--featured::before {
  content: 'Most Used';
  position: absolute;
  top: 24px; right: 24px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(53, 180, 242,.12);
  border: 1px solid rgba(53, 180, 242,.2);
  padding: 4px 10px;
  border-radius: 100px;
}

.sol-card__num {
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 400;
  color: rgba(255,255,255,.06);
  line-height: 1;
  margin-bottom: 24px;
  letter-spacing: -.02em;
}
.sol-card__icon {
  width: 48px; height: 48px;
  color: var(--accent);
  margin-bottom: 20px;
}
.sol-card__icon svg { width: 100%; height: 100%; }
.sol-card__name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.sol-card__type {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.sol-card__desc {
  font-size: .875rem;
  color: rgba(255,255,255,.5);
  line-height: 1.8;
  margin-bottom: 28px;
}
.sol-card__features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}
.sol-card__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
}
.sol-card__features li::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.sol-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  transition: gap var(--t);
}
.sol-card:hover .sol-card__link { gap: 12px; }
.sol-card__link svg { width: 14px; height: 14px; }

/* ============================================================
   About
   ============================================================ */
.about {
  padding: 120px 0;
  background: var(--off-white);
}
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.about__quote {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 400;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 24px;
  font-style: italic;
}
.about__text {
  font-size: .95rem;
  color: var(--grey-600);
  line-height: 1.9;
  margin-bottom: 16px;
}
.about__pillars { margin-top: 36px; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--grey-100); }
.about__pillar {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--grey-100);
  transition: all var(--t);
}
.about__pillar:hover { padding-left: 8px; }
.about__pillar-num {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--accent);
  font-weight: 400;
  width: 28px;
  flex-shrink: 0;
  padding-top: 1px;
}
.about__pillar h4 { font-size: .92rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.about__pillar p { font-size: .83rem; color: var(--grey-600); line-height: 1.65; }

/* About right column - stats */
.about__stats { display: flex; flex-direction: column; gap: 0; }
.about__stat-item {
  padding: 36px 0;
  border-bottom: 1px solid var(--grey-200);
  transition: all var(--t);
}
.about__stat-item:first-child { padding-top: 0; }
.about__stat-item:hover { padding-left: 12px; }
.about__stat-value {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.about__stat-value span { color: var(--accent); }
.about__stat-label {
  font-size: .8rem;
  color: var(--grey-400);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
}
.about__stat-desc {
  font-size: .85rem;
  color: var(--grey-600);
  line-height: 1.6;
  margin-top: 6px;
}

/* ============================================================
   Contact
   ============================================================ */
.contact {
  padding: 120px 0;
  background: var(--primary);
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
}
.contact__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.contact__tagline {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: rgba(255,255,255,.25);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 32px;
  border-left: 2px solid var(--accent);
  padding-left: 20px;
}
.contact__text { font-size: .925rem; color: rgba(255,255,255,.5); line-height: 1.9; margin-bottom: 40px; }
.contact__details { display: flex; flex-direction: column; gap: 20px; }
.contact__detail { display: flex; align-items: flex-start; gap: 14px; }
.contact__detail-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact__detail-icon svg { width: 16px; height: 16px; color: var(--accent); }
.contact__detail-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 3px; display: block; }
.contact__detail a, .contact__detail span { font-size: .9rem; color: rgba(255,255,255,.75); transition: color var(--t); }
.contact__detail a:hover { color: var(--accent); }

/* Form */
.contact__form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  box-shadow: 0 32px 80px rgba(0,0,0,.25);
}
.form__title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--grey-100); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__field { margin-bottom: 14px; }
.form__field label { display: block; font-size: .72rem; font-weight: 700; color: var(--text); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.form__field input,
.form__field select,
.form__field textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--grey-200);
  border-radius: var(--radius);
  font-family: var(--font-main);
  font-size: .875rem;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--t), box-shadow var(--t);
  outline: none; appearance: none;
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(53, 180, 242,.1);
}
.form__field input::placeholder, .form__field textarea::placeholder { color: var(--grey-400); font-size: .85rem; }
.form__field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238D93B0' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.form__field textarea { resize: vertical; min-height: 96px; }
.form__note { text-align: center; font-size: .75rem; color: var(--grey-400); margin-top: 10px; }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: #0F1418; padding-top: 72px; }
.footer__top {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: 80px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer__tagline { font-size: .85rem; color: rgba(255,255,255,.35); line-height: 1.75; margin-top: 16px; margin-bottom: 24px; }
.footer__socials { display: flex; gap: 8px; }
.footer__socials a {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4);
  transition: all var(--t);
}
.footer__socials a svg { width: 15px; height: 15px; }
.footer__socials a:hover { background: rgba(53, 180, 242,.1); border-color: rgba(53, 180, 242,.25); color: var(--accent); }
.footer__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer__col h4 { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 16px; }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: .83rem; color: rgba(255,255,255,.4); transition: color var(--t); }
.footer__col a:hover { color: var(--accent); }
.footer__bottom {
  padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.footer__bottom p { font-size: .75rem; color: rgba(255,255,255,.2); }

/* ============================================================
   Page Hero (inner pages)
   ============================================================ */
.page-hero {
  padding: 140px 0 80px;
  background: var(--primary);
  position: relative;
  overflow: hidden;
}
.page-hero__deco {
  position: absolute;
  right: -80px; top: -80px;
  width: 480px; height: 480px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
  pointer-events: none;
}
.page-hero__deco::before {
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 1px solid rgba(53, 180, 242,.06);
  background: radial-gradient(circle, rgba(53, 180, 242,.03), transparent 70%);
}
.page-hero__inner { position: relative; z-index: 1; max-width: 720px; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  color: rgba(255,255,255,.35);
  margin-bottom: 24px;
}
.breadcrumb a { color: rgba(255,255,255,.4); transition: color var(--t); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { color: rgba(255,255,255,.2); font-size: .7rem; }
.breadcrumb strong { color: rgba(255,255,255,.6); font-weight: 500; }
.page-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(53, 180, 242,.08);
  border: 1px solid rgba(53, 180, 242,.18);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.page-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
.page-hero p {
  font-size: 1rem;
  color: rgba(255,255,255,.55);
  line-height: 1.85;
  margin-bottom: 30px;
  font-weight: 300;
  max-width: 560px;
}

/* ============================================================
   Service Detail Pages
   ============================================================ */
.svc-overview { padding: 88px 0; background: var(--white); }
.svc-overview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.svc-overview__lead {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 20px;
  font-style: italic;
}
.svc-overview__text { font-size: .93rem; color: var(--grey-600); line-height: 1.9; margin-bottom: 14px; }
.svc-highlights { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--grey-100); }
.svc-highlight {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--grey-100);
  transition: all var(--t);
}
.svc-highlight:hover { padding-left: 8px; }
.svc-highlight svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.svc-highlight p { font-size: .875rem; color: var(--grey-600); line-height: 1.65; }
.svc-highlight p strong { display: block; font-size: .92rem; color: var(--text); margin-bottom: 3px; font-weight: 700; }

.svc-capabilities { padding: 88px 0; background: var(--grey-50); }
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--grey-200);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.capability-card {
  background: var(--white);
  padding: 32px 28px;
  transition: all var(--t);
  position: relative;
}
.capability-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.capability-card:hover { background: var(--grey-50); }
.capability-card:hover::after { transform: scaleX(1); }
.capability-card__icon {
  width: 42px; height: 42px;
  background: var(--accent-pale);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-dark);
  margin-bottom: 16px;
}
.capability-card__icon svg { width: 20px; height: 20px; }
.capability-card h3 { font-size: .92rem; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: -.005em; }
.capability-card p { font-size: .83rem; color: var(--grey-600); line-height: 1.7; }

.svc-approach { padding: 88px 0; background: var(--white); }
.approach-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.approach-steps::before {
  content: '';
  position: absolute;
  top: 22px; left: 11%; right: 11%;
  height: 1px;
  background: var(--grey-200);
}
.approach-step { text-align: center; padding: 0 16px; }
.approach-step__num {
  width: 44px; height: 44px;
  background: var(--white);
  border: 2px solid var(--grey-200);
  color: var(--text);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 auto 20px;
  position: relative; z-index: 1;
  transition: all var(--t);
}
.approach-step:hover .approach-step__num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--primary);
}
.approach-step h4 { font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.approach-step p { font-size: .8rem; color: var(--grey-600); line-height: 1.7; }

.svc-cta {
  padding: 88px 0;
  background: var(--grey-50);
  text-align: center;
  border-top: 1px solid var(--grey-100);
}
.svc-cta h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--text); margin-bottom: 12px; letter-spacing: -.01em; }
.svc-cta p { font-size: .93rem; color: var(--grey-600); margin-bottom: 28px; max-width: 440px; margin-left: auto; margin-right: auto; line-height: 1.75; }
.svc-cta .btn-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   Solution Detail Pages
   ============================================================ */
.sol-features { padding: 88px 0; background: var(--white); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--grey-100);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feature-item {
  display: flex;
  gap: 18px;
  padding: 28px;
  background: var(--white);
  transition: all var(--t);
}
.feature-item:hover { background: var(--grey-50); }
.feature-item__icon {
  width: 44px; height: 44px;
  background: var(--accent-pale);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-dark);
  flex-shrink: 0;
}
.feature-item__icon svg { width: 22px; height: 22px; }
.feature-item h3 { font-size: .92rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.feature-item p { font-size: .83rem; color: var(--grey-600); line-height: 1.75; }

.sol-how { padding: 88px 0; background: var(--grey-50); }
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.how-step {
  padding: 32px 28px;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-100);
  position: relative;
  transition: all var(--t);
}
.how-step:hover { border-color: rgba(53, 180, 242,.2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.how-step::before {
  content: '';
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
  transform: scaleX(0);
  transition: transform var(--t);
}
.how-step:hover::before { transform: scaleX(1); }
.how-step__num {
  width: 40px; height: 40px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
  margin-bottom: 16px;
}
.how-step h3 { font-size: .92rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.how-step p { font-size: .83rem; color: var(--grey-600); line-height: 1.75; }

.sol-benefits { padding: 88px 0; background: var(--primary); position: relative; overflow: hidden; }
.sol-benefits::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
}
.benefits-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.benefit-card {
  padding: 32px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
  transition: all var(--t);
}
.benefit-card:hover { background: rgba(255,255,255,.07); border-color: rgba(53, 180, 242,.15); }
.benefit-card__num { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 400; color: rgba(53, 180, 242,.2); line-height: 1; margin-bottom: 16px; letter-spacing: -.02em; }
.benefit-card h3 { font-size: .92rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.benefit-card p { font-size: .83rem; color: rgba(255,255,255,.45); line-height: 1.75; }

/* ============================================================
   Trust Bar (scrolling ticker)
   ============================================================ */
.trust-bar {
  background: var(--primary-mid);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  overflow: hidden;
  padding: 14px 0;
}
.trust-bar__track { overflow: hidden; }
.trust-bar__items {
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
  animation: ticker 28s linear infinite;
  width: max-content;
}
.trust-bar__items span {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
}
.trust-bar__dot { color: var(--accent) !important; opacity: .5 !important; }
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   Scroll Reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .container { padding: 0 28px; }
  .hero__container { padding: 0 28px; padding-bottom: 40px; padding-top: 80px; grid-template-columns: 1fr; }
  .hero__visual { display: none; }
  .hero__stats-inner { padding: 0 28px; }
  .services__header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
  .svc-row { grid-template-columns: 56px 1fr 40px; }
  .svc-row__tags { display: none; }
  .solutions__grid { grid-template-columns: 1fr; }
  .about__inner { grid-template-columns: 1fr; gap: 48px; }
  .contact__grid { grid-template-columns: 1fr; gap: 48px; }
  .svc-overview__grid { grid-template-columns: 1fr; gap: 40px; }
  .capabilities-grid { grid-template-columns: repeat(2, 1fr); }
  .approach-steps { grid-template-columns: repeat(2, 1fr); }
  .approach-steps::before { display: none; }
  .benefits-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .nav__container { padding: 0 20px; }
  .hero__container { padding: 0 20px; padding-top: 80px; }
  .hero__stats-inner { padding: 0 20px; flex-wrap: wrap; gap: 24px; }
  .hero__stat { border-right: none; padding: 0; flex: none; width: 45%; }
  .nav__links {
    display: none; flex-direction: column;
    position: absolute; top: 80px; left: 0; right: 0;
    background: rgba(22,29,35,.98); backdrop-filter: blur(20px);
    padding: 12px; gap: 2px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .nav__links.open { display: flex; }
  .nav__dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: transparent;
    border: none; pointer-events: auto;
    margin: 2px 0;
  }
  .nav__mega-inner { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .nav__mega-panel, .nav__mega-bar, .nav__mega-label { display: none; }
  .nav__mega-grid { background: transparent; gap: 0; grid-template-columns: 1fr; border-radius: 0; }
  .nav__mega-item { background: transparent; padding: 8px 12px; gap: 10px; }
  .nav__mega-item::after { display: none; }
  .nav__mega-item:hover { background: rgba(53, 180, 242,.06); border-radius: 6px; }
  .nav__mega-icon { display: none; }
  .nav__mega-name { color: rgba(255,255,255,.55); font-size: .82rem; margin-bottom: 0; }
  .nav__mega-desc, .nav__mega-features, .nav__mega-tag { display: none; }
  .nav__mega-item:hover .nav__mega-name { color: var(--accent); }
  .nav__hamburger { display: flex; }

  .hero__heading { font-size: clamp(2.4rem, 8vw, 3.2rem); }
  .hero__subtext { font-size: .95rem; }
  .hero__stats-bar { padding: 24px 0; }
  .hero__stat-number { font-size: 2rem; }

  .services, .solutions, .about, .contact { padding: 80px 0; }
  .svc-overview, .svc-capabilities, .svc-approach, .svc-cta,
  .sol-features, .sol-how, .sol-benefits { padding: 64px 0; }
  .section-header { margin-bottom: 36px; }

  .svc-row { grid-template-columns: 44px 1fr 36px; gap: 16px; }
  .svc-row:hover { padding-left: 12px; padding-right: 12px; margin-left: -12px; margin-right: -12px; }
  .svc-row__num { font-size: 1.2rem; }

  .capabilities-grid { grid-template-columns: 1fr; }
  .approach-steps { grid-template-columns: 1fr 1fr; }
  .how-steps { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
  .footer__links { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .form__row { grid-template-columns: 1fr; }
  .contact__form { padding: 28px 22px; }
  .page-hero { padding: 110px 0 56px; }
}

@media (max-width: 480px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { justify-content: center; }
  .footer__links { grid-template-columns: 1fr; }
  .approach-steps { grid-template-columns: 1fr; }
  .hero__stat { width: 100%; }
}

/* ============================================================
   Insights / Blog
   ============================================================ */

.insights-hero {
  background: var(--primary);
  padding: 140px 0 72px;
  position: relative;
  overflow: hidden;
}
.insights-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 65% 50%, rgba(53, 180, 242,.06) 0%, transparent 70%);
}
.insights-hero__inner { position: relative; z-index: 1; max-width: 640px; }
.insights-hero__tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.insights-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -.025em;
  margin-bottom: 14px;
}
.insights-hero p {
  font-size: .95rem;
  color: rgba(255,255,255,.48);
  line-height: 1.8;
}

/* Category filter bar */
.insight-filters {
  padding: 22px 0;
  background: var(--white);
  border-bottom: 1px solid var(--grey-100);
  position: sticky;
  top: 80px;
  z-index: 10;
}
.insight-filters__inner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.insight-filter-btn {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  border: 1.5px solid var(--grey-200);
  background: transparent;
  color: var(--grey-600);
  cursor: pointer;
  transition: all var(--t);
  font-family: var(--font-main);
  letter-spacing: .01em;
}
.insight-filter-btn:hover,
.insight-filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

/* Category tags */
.insight-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  width: fit-content;
  white-space: nowrap;
}
.insight-tag--ifrs     { background: rgba(53, 180, 242,.1);   color: var(--accent-dark); }
.insight-tag--esg      { background: rgba(53, 180, 242,.1);   color: #00569E; }
.insight-tag--tech     { background: rgba(99,102,241,.1);  color: #4338ca; }
.insight-tag--finance  { background: rgba(245,158,11,.1);  color: #b45309; }
.insight-tag--tax      { background: rgba(239,68,68,.1);   color: #b91c1c; }

/* Insights listing section */
.insights-section { padding: 72px 0; background: var(--off-white); }

/* Featured card */
.insight-card--featured {
  display: grid;
  grid-template-columns: 340px 1fr;
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--t);
  margin-bottom: 40px;
  text-decoration: none;
  color: inherit;
}
.insight-card--featured:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.insight-card--featured .insight-card__visual {
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.insight-card--featured .insight-card__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 100% at 30% 50%, rgba(53, 180, 242,.14) 0%, transparent 65%);
}
.insight-card__visual-icon {
  position: relative;
  z-index: 1;
  width: 72px; height: 72px;
  background: rgba(53, 180, 242,.1);
  border: 1px solid rgba(53, 180, 242,.2);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.insight-card__visual-icon svg { width: 36px; height: 36px; }
.insight-card__body {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.insight-card__featured-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: 10px;
}
.insight-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -.015em;
  margin-bottom: 12px;
  transition: color var(--t);
}
.insight-card--featured:hover .insight-card__title { color: var(--accent-dark); }
.insight-card__excerpt {
  font-size: .875rem;
  color: var(--grey-600);
  line-height: 1.75;
  margin-bottom: 20px;
}
.insight-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .73rem;
  color: var(--grey-400);
  flex-wrap: wrap;
}
.insight-card__meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--grey-200); flex-shrink: 0; }
.insight-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin-top: 20px;
  transition: gap var(--t);
}
.insight-card__link:hover { gap: 10px; }
.insight-card__link svg { width: 14px; height: 14px; }

/* Grid cards */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.insight-card {
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--t);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.insight-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: rgba(53, 180, 242,.15);
}
.insight-card__top {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.insight-card__top::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 120% at 50% 0%, rgba(53, 180, 242,.1) 0%, transparent 60%);
}
.insight-card__top-icon {
  position: relative;
  z-index: 1;
  width: 48px; height: 48px;
  background: rgba(53, 180, 242,.1);
  border: 1px solid rgba(53, 180, 242,.15);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.insight-card__top-icon svg { width: 24px; height: 24px; }
.insight-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.insight-card .insight-card__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 10px;
  transition: color var(--t);
}
.insight-card:hover .insight-card__title { color: var(--accent-dark); }
.insight-card .insight-card__excerpt {
  font-size: .81rem;
  color: var(--grey-600);
  line-height: 1.72;
  flex: 1;
  margin-bottom: 14px;
}
.insight-card .insight-card__meta {
  font-size: .7rem;
  color: var(--grey-400);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--grey-100);
}

/* ── Article page ─────────────────────────── */
.article-hero {
  background: var(--primary);
  padding: 140px 0 72px;
  position: relative;
  overflow: hidden;
}
.article-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 80% at 80% 50%, rgba(53, 180, 242,.05) 0%, transparent 65%);
}
.article-hero__inner { position: relative; z-index: 1; max-width: 780px; }
.article-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.article-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -.025em;
  margin-bottom: 20px;
}
.article-hero__byline {
  font-size: .84rem;
  color: rgba(255,255,255,.42);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.article-hero__byline strong { color: rgba(255,255,255,.68); }

.article-layout {
  padding: 72px 0 96px;
  background: var(--white);
}
.article-layout__inner {
  display: grid;
  grid-template-columns: 1fr 268px;
  gap: 64px;
  align-items: start;
}
.article-content h2 {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 44px 0 14px;
}
.article-content h2:first-child { margin-top: 0; }
.article-content p {
  font-size: .94rem;
  color: var(--grey-600);
  line-height: 1.88;
  margin-bottom: 18px;
}
.article-content ul {
  list-style: none;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.article-content ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .91rem;
  color: var(--grey-600);
  line-height: 1.7;
}
.article-content ul li::before {
  content: '';
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='8' fill='%231EE39B' fill-opacity='.12'/%3E%3Cpath d='M5 8l2 2 4-4' stroke='%231EE39B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-top: 3px;
}
.article-pullquote {
  margin: 36px 0;
  padding: 26px 30px;
  background: var(--accent-pale);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.article-pullquote p {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.article-sidebar__card {
  background: var(--grey-50);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  position: sticky;
  top: 100px;
}
.article-sidebar__title {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: 14px;
}
.article-sidebar__links { display: flex; flex-direction: column; gap: 11px; }
.article-sidebar__link {
  font-size: .82rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.45;
  transition: color var(--t);
  text-decoration: none;
}
.article-sidebar__link:hover { color: var(--accent-dark); }
.article-sidebar__cta {
  background: var(--primary);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-top: 20px;
}
.article-sidebar__cta h4 { font-size: .9rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.article-sidebar__cta p { font-size: .8rem; color: rgba(255,255,255,.45); line-height: 1.65; margin-bottom: 16px; }

.article-related { padding: 72px 0; background: var(--grey-50); }

/* Responsive */
@media (max-width: 1024px) {
  .insight-card--featured { grid-template-columns: 1fr; }
  .insight-card--featured .insight-card__visual { height: 160px; }
  .insights-grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout__inner { grid-template-columns: 1fr; }
  .article-sidebar__card { position: static; }
  .article-sidebar { display: none; }
}
@media (max-width: 640px) {
  .insights-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Screen Frame — Browser chrome mockup
   ============================================================ */
.screen-frame {
  background: #0c1217;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 40px 96px rgba(0,0,0,.5), 0 12px 24px rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.06);
}
.screen-frame__bar {
  background: #070A0D;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 7px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  flex-shrink: 0;
}
.screen-frame__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.screen-frame__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   ECL Hero (IFRS 9 SaaS Landing Page)
   ============================================================ */
.ecl-hero {
  background: var(--primary);
  position: relative;
  overflow: hidden;
}
.ecl-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 65% at 75% 50%, rgba(53, 180, 242,.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 70% at 10% 80%, rgba(53, 180, 242,.03) 0%, transparent 60%);
  pointer-events: none;
}
.ecl-hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 20%, transparent 100%);
}
.ecl-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  min-height: 100vh;
  padding-top: 100px;
  padding-bottom: 72px;
}
.ecl-hero__content {
  display: flex;
  flex-direction: column;
}
.ecl-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(53, 180, 242,.1);
  border: 1px solid rgba(53, 180, 242,.22);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  width: fit-content;
}
.ecl-hero__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.7); }
}
.ecl-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin-bottom: 20px;
}
.ecl-hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.ecl-hero__sub {
  font-size: .97rem;
  color: rgba(255,255,255,.52);
  line-height: 1.8;
  max-width: 460px;
  margin-bottom: 36px;
}
.ecl-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ecl-hero__visual {
  position: relative;
}
.ecl-hero__visual .screen-frame {
  transform: perspective(1400px) rotateY(-5deg) rotateX(2deg);
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.ecl-hero__visual:hover .screen-frame {
  transform: perspective(1400px) rotateY(-1deg) rotateX(0deg);
}

/* ============================================================
   ECL Stats Bar
   ============================================================ */
.ecl-stats-bar {
  background: var(--primary-mid);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 28px 0;
}
.ecl-stats-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ecl-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 80px;
}
.ecl-stat__val {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.04em;
  line-height: 1;
}
.ecl-stat__val--accent { color: var(--accent); }
.ecl-stat__label {
  font-size: .65rem;
  color: rgba(255,255,255,.38);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.ecl-stat__divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.07);
  flex-shrink: 0;
}

/* ============================================================
   ECL Module Sections
   ============================================================ */
.ecl-module {
  padding: 96px 0;
  background: var(--white);
}
.ecl-module--alt { background: var(--grey-50); }
.ecl-module--dark {
  background: var(--primary);
  position: relative;
  overflow: hidden;
}
.ecl-module--dark::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.03);
  pointer-events: none;
}
.ecl-module__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ecl-module__inner--flip {
  direction: rtl;
}
.ecl-module__inner--flip > * {
  direction: ltr;
}
.ecl-module__num {
  font-family: var(--font-serif);
  font-size: 4.5rem;
  font-weight: 400;
  color: rgba(53, 180, 242,.07);
  line-height: 1;
  margin-bottom: -8px;
  letter-spacing: -.04em;
}
.ecl-module__tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.ecl-module h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin-bottom: 16px;
}
.ecl-module--dark h2 { color: var(--white); }
.ecl-module__desc {
  font-size: .9rem;
  color: var(--grey-600);
  line-height: 1.8;
  margin-bottom: 28px;
}
.ecl-module--dark .ecl-module__desc { color: rgba(255,255,255,.48); }
.ecl-feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ecl-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .84rem;
  color: var(--grey-600);
  line-height: 1.65;
}
.ecl-module--dark .ecl-feature-list li { color: rgba(255,255,255,.5); }
.ecl-feature-list li::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='8' fill='%231EE39B' fill-opacity='.12'/%3E%3Cpath d='M5 8l2 2 4-4' stroke='%231EE39B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-top: 3px;
}
.ecl-module__visual {
  position: relative;
}

/* ============================================================
   ECL Methodology Section
   ============================================================ */
.ecl-method {
  padding: 96px 0;
  background: var(--grey-50);
}
.ecl-method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ecl-method-card {
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--t);
}
.ecl-method-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: rgba(53, 180, 242,.18);
}
.ecl-method-card__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: top;
  display: block;
  border-bottom: 1px solid var(--grey-100);
}
.ecl-method-card__body { padding: 22px; }
.ecl-method-card__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 6px;
}
.ecl-method-card h3 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.4;
}
.ecl-method-card p {
  font-size: .8rem;
  color: var(--grey-600);
  line-height: 1.75;
}

/* ============================================================
   ECL Enterprise Section
   ============================================================ */
.ecl-enterprise {
  padding: 96px 0;
  background: var(--primary);
  position: relative;
  overflow: hidden;
}
.ecl-enterprise::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(53, 180, 242,.25) 40%, rgba(53, 180, 242,.25) 60%, transparent 95%);
}
.ecl-enterprise__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ecl-enterprise__tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.ecl-enterprise h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin-bottom: 16px;
}
.ecl-enterprise__desc {
  font-size: .9rem;
  color: rgba(255,255,255,.48);
  line-height: 1.8;
  margin-bottom: 28px;
}
.ecl-enterprise__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ecl-ent-feat {
  padding: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  transition: all var(--t);
}
.ecl-ent-feat:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(53, 180, 242,.15);
}
.ecl-ent-feat__icon {
  width: 32px;
  height: 32px;
  background: rgba(53, 180, 242,.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 10px;
}
.ecl-ent-feat__icon svg { width: 16px; height: 16px; }
.ecl-ent-feat h4 {
  font-size: .82rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}
.ecl-ent-feat p {
  font-size: .76rem;
  color: rgba(255,255,255,.38);
  line-height: 1.65;
}

/* ============================================================
   ECL Page — Responsive overrides
   ============================================================ */
@media (max-width: 1024px) {
  .ecl-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 120px;
    padding-bottom: 64px;
  }
  .ecl-hero__visual { display: none; }
  .ecl-hero h1 { font-size: clamp(2rem, 7vw, 2.8rem); }
  .ecl-module__inner,
  .ecl-module__inner--flip,
  .ecl-enterprise__inner {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 40px;
  }
  .ecl-method-grid { grid-template-columns: 1fr 1fr; }
  .ecl-module { padding: 64px 0; }
  .ecl-method { padding: 64px 0; }
  .ecl-enterprise { padding: 64px 0; }
}
@media (max-width: 768px) {
  .ecl-stats-bar__inner { justify-content: center; gap: 20px; }
  .ecl-stat__divider { display: none; }
  .ecl-method-grid { grid-template-columns: 1fr; }
  .ecl-enterprise__features { grid-template-columns: 1fr; }
  .ecl-hero__sub { font-size: .9rem; }
}

/* ============================================================
   MODERN RESTYLE v4 — bold charcoal + teal layer
   (appended; later source order overrides base rules)
   ============================================================ */

@keyframes so-spin     { to { transform: rotate(360deg); } }
@keyframes so-spin-rev { to { transform: rotate(-360deg); } }
@keyframes so-pulse    { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes so-blob     { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(26px,-20px) scale(1.12); } }

::selection { background: rgba(53, 180, 242,.22); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent-dark); border-radius: 99px; }

/* ---- Buttons: pill + gradient + glow ---- */
.btn { border-radius: 999px; }
.btn--primary {
  background: var(--grad-teal);
  background-size: 180% 180%;
  color: #fff;
  border: none;
  box-shadow: 0 8px 28px rgba(53, 180, 242,.32);
}
.btn--primary:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: 0 14px 44px rgba(53, 180, 242,.46);
}
.nav__link--cta {
  background: var(--grad-teal) !important;
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(53, 180, 242,.32);
}
.nav__link--cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(53, 180, 242,.5) !important;
}

/* ---- Navigation: deeper glass ---- */
.nav--solid {
  background: rgba(22,29,35,.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(53, 180, 242,.18);
  box-shadow: 0 6px 30px rgba(0,0,0,.28);
}

/* ---- Modern display type ---- */
.hero__heading { font-weight: 600; font-size: clamp(3rem, 6.2vw, 5.6rem); line-height: 1.04; letter-spacing: -.025em; }
.hero__heading em,
.ecl-hero h1 em {
  font-style: normal;
  background: var(--grad-teal);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section-title { font-weight: 600; letter-spacing: -.025em; }

/* ---- Hero: charcoal + animated teal glow + orbital motif ---- */
.hero, .hero__bg { background: var(--grad-dark); }
.hero__bg::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 52% at 80% 26%, rgba(53, 180, 242,.26), transparent 70%),
    radial-gradient(36% 46% at 10% 80%, rgba(53, 180, 242,.13), transparent 72%);
  animation: so-blob 16s ease-in-out infinite;
}
.hero__orbits {
  position: absolute; top: 50%; left: 72%;
  width: 1px; height: 1px;
  transform: translate(-50%,-50%);
  z-index: 1; pointer-events: none;
}
.hero__orbits .ring {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(53, 180, 242,.16);
  border-radius: 50%;
}
.hero__orbits .ring--1 { width: 320px; height: 320px; }
.hero__orbits .ring--2 { width: 520px; height: 520px; border-color: rgba(53, 180, 242,.10); }
.hero__orbits .ring--3 { width: 760px; height: 760px; border-color: rgba(53, 180, 242,.06); }
.hero__orbits .spin { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.hero__orbits .spin--a { animation: so-spin 20s linear infinite; }
.hero__orbits .spin--b { animation: so-spin-rev 30s linear infinite; }
.hero__orbits .node { position: absolute; border-radius: 50%; }
.hero__orbits .node--1 { width: 12px; height: 12px; left: 160px; top: -6px; background: var(--accent-bright); box-shadow: 0 0 18px 3px rgba(53, 180, 242,.8); }
.hero__orbits .node--2 { width: 8px;  height: 8px;  left: 260px; top: -4px; background: var(--accent);        box-shadow: 0 0 14px 2px rgba(53, 180, 242,.7); }
@media (max-width: 1024px) { .hero__orbits { display: none; } }

/* Hero dashboard: frosted glass */
.hero-dash {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(53, 180, 242,.18);
  border-radius: 20px;
}

/* ---- Rounded surfaces + teal glow hovers ---- */
.sol-card, .capability-card, .feature-item, .how-step, .benefit-card,
.insight-card, .insight-card--featured, .article-sidebar__card,
.ecl-method-card, .contact__form, .ecl-ent-feat {
  border-radius: var(--radius-lg);
}
.how-step:hover, .insight-card:hover, .ecl-method-card:hover {
  transform: translateY(-5px);
  border-color: rgba(53, 180, 242,.3);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(53, 180, 242,.16);
}
.insight-card--featured:hover { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(53, 180, 242,.16); }

/* ---- Dark sections: ambient teal glow ---- */
.solutions   { background: radial-gradient(58% 80% at 85% 8%,  rgba(53, 180, 242,.12), transparent 60%), var(--primary); }
.contact     { background: radial-gradient(55% 75% at 12% 92%, rgba(53, 180, 242,.12), transparent 60%), var(--primary); }
.sol-benefits, .ecl-enterprise, .ecl-module--dark {
  background: radial-gradient(50% 70% at 80% 12%, rgba(53, 180, 242,.10), transparent 62%), var(--primary);
}
.sol-card--featured { background: rgba(53, 180, 242,.09); }

/* Footer + trust bar */
.footer { background: #0F1418; }
.trust-bar { background: var(--primary-mid); }

/* Reveal: slightly bolder rise */
.reveal { transform: translateY(26px); }

/* ============================================================
   MODERN RESTYLE v5 — seamless section transitions
   (gradient fades remove hard dark/light seams)
   ============================================================ */

body { background: var(--off-white); }

/* ---- Homepage: fade every dark<->light boundary ---- */
.services {
  background: linear-gradient(to bottom, var(--primary-mid) 0, var(--off-white) 140px);
  padding-top: 168px;
}
.solutions {
  background:
    radial-gradient(56% 78% at 86% 10%, rgba(53, 180, 242,.14), transparent 60%),
    linear-gradient(to bottom,
      var(--off-white) 0,
      var(--primary) 150px,
      var(--primary) calc(100% - 150px),
      var(--off-white) 100%);
  padding-top: 176px;
  padding-bottom: 176px;
}
.contact {
  background:
    radial-gradient(54% 74% at 12% 90%, rgba(53, 180, 242,.14), transparent 60%),
    linear-gradient(to bottom, var(--off-white) 0, var(--primary) 150px, var(--primary) 100%);
  padding-top: 176px;
}

/* ---- Inner-page dark body sections: fade both light-bounded edges ---- */
.sol-benefits, .ecl-enterprise, .ecl-module--dark {
  background:
    radial-gradient(50% 70% at 80% 14%, rgba(53, 180, 242,.12), transparent 62%),
    linear-gradient(to bottom,
      var(--off-white) 0,
      var(--primary) 140px,
      var(--primary) calc(100% - 140px),
      var(--off-white) 100%);
  padding-top: 150px;
  padding-bottom: 150px;
}

/* ---- Inner-page dark heroes: fade bottom into light content ---- */
.page-hero, .insights-hero, .article-hero {
  background: linear-gradient(to bottom,
    var(--primary) 0,
    var(--primary) calc(100% - 130px),
    var(--off-white) 100%);
  padding-bottom: 150px;
}

/* ---- ECL pages: smooth the dark stats bar into the first light module ---- */
.ecl-stats-bar {
  background: linear-gradient(to bottom, var(--primary-mid) 0, var(--primary-mid) 58%, var(--off-white) 100%);
  padding-bottom: 56px;
}
.ecl-module { background: var(--off-white); }
.ecl-module--alt, .ecl-method { background: var(--grey-50); }

/* keep light content sections on the soft canvas */
.svc-overview, .svc-approach, .sol-features, .sol-how,
.article-layout, .article-related, .insights-section, .insight-filters {
  background: var(--off-white);
}
.svc-capabilities, .svc-cta { background: var(--grey-50); }

/* ============================================================
   MODERN RESTYLE v6 — motion
   ============================================================ */
@keyframes so-rise   { from { opacity: 0; transform: translateY(24px); }            to { opacity: 1; transform: none; } }
@keyframes so-rise-r { from { opacity: 0; transform: translateY(30px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes so-grad   { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes so-node   { 0%,100% { box-shadow: 0 0 12px 2px rgba(53, 180, 242,.55); } 50% { box-shadow: 0 0 24px 6px rgba(53, 180, 242,.95); } }

/* Hero load-in stagger */
.hero__content > * { opacity: 0; animation: so-rise .7s cubic-bezier(.4,0,.2,1) forwards; }
.hero__eyebrow  { animation-delay: .05s; }
.hero__heading  { animation-delay: .16s; }
.hero__subtext  { animation-delay: .30s; }
.hero__actions  { animation-delay: .44s; }
.hero__visual    { opacity: 0; animation: so-rise-r .85s .34s cubic-bezier(.4,0,.2,1) forwards; }
.hero__stats-bar { opacity: 0; animation: so-rise .7s .55s ease forwards; }

/* Living accents */
.hero__heading em { background-size: 220% 100%; animation: so-grad 7s ease-in-out infinite alternate; }
.hero__orbits .node { animation: so-node 3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero__content > *, .hero__visual, .hero__stats-bar { opacity: 1 !important; }
}

/* ============================================================
   LIGHT HERO VARIANT — body.lighthero (comparison page only)
   ============================================================ */
.lighthero .nav {
  background: rgba(22,29,35,.92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(53, 180, 242,.18);
}
.lighthero .hero, .lighthero .hero__bg {
  background: linear-gradient(168deg, #FFFFFF 0%, #EEF4F6 55%, #0D1420 100%);
}
.lighthero .hero__bg::before {
  background:
    radial-gradient(44% 54% at 80% 24%, rgba(53, 180, 242,.16), transparent 70%),
    radial-gradient(38% 48% at 8% 82%, rgba(53, 180, 242,.12), transparent 72%);
}
.lighthero .hero__heading { color: var(--text); }
.lighthero .hero__subtext { color: var(--grey-600); }
.lighthero .hero__eyebrow-text { color: var(--grey-400); }
.lighthero .hero__orbits .ring   { border-color: rgba(53, 180, 242,.20); }
.lighthero .hero__orbits .ring--2 { border-color: rgba(53, 180, 242,.14); }
.lighthero .hero__orbits .ring--3 { border-color: rgba(53, 180, 242,.09); }
.lighthero .hero .btn--outline { color: var(--text); border-color: var(--grey-200); }
.lighthero .hero .btn--outline:hover { color: var(--accent); border-color: var(--accent); }
.lighthero .hero__stats-bar { border-top: 1px solid var(--grey-200); }
.lighthero .hero__stat { border-right-color: var(--grey-200); }
.lighthero .hero__stat-number { color: var(--text); }
.lighthero .hero__stat-number span { color: var(--accent); }
.lighthero .hero__stat-label { color: var(--grey-400); }
/* light trust-bar + light services top so the seam stays clean below a light hero */
.lighthero .trust-bar { background: var(--off-white); border-top: 1px solid var(--grey-100); border-bottom: 1px solid var(--grey-100); }
.lighthero .trust-bar__items span { color: var(--grey-400); }
.lighthero .services { background: var(--off-white); padding-top: 120px; }
/* keep the dashboard a solid dark product mockup so its light text stays readable on the light hero */
.lighthero .hero-dash {
  background: var(--primary);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: rgba(22,29,35,.14);
}

/* ============================================================
   CLEAN v9 — solid sections, NO color-blending, de-gimmicked
   (gradient fades between sections looked gimmicky; replaced
   with flat solid backgrounds. Dark hero + dark footer; all
   content sections solid & light. No glow/shimmer/orbital.)
   ============================================================ */

/* ---- Flat solid section backgrounds (remove every gradient blend) ---- */
.hero, .hero__bg { background: var(--primary); }
.hero__bg::after  { display: none; }   /* drop grid texture */
.hero__bg::before { display: none; }   /* drop animated glow blobs */
.services  { background: var(--white);     padding-top: 120px; }
.solutions { background: var(--off-white); padding: 116px 0; }
.about     { background: var(--white); }
.contact   { background: var(--off-white); padding-top: 116px; }
.sol-benefits, .ecl-enterprise, .ecl-module--dark { background: var(--primary); }
.page-hero, .insights-hero, .article-hero { background: var(--primary); }
.ecl-stats-bar { background: var(--primary-mid); }
.solutions::before, .solutions::after,
.contact::before, .contact::after,
.sol-benefits::before, .ecl-enterprise::before, .ecl-module--dark::before { display: none; }

/* ---- Solid dark nav (no frosted-blur blending) ---- */
.nav--solid { background: var(--primary); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(255,255,255,.06); }

/* ---- De-gimmick the hero ---- */
.hero__orbits { display: none; }
.hero__heading em { background: none; -webkit-text-fill-color: var(--accent); color: var(--accent); animation: none; }

/* ---- Solid teal buttons (no gradient / glow / pill) ---- */
.btn { border-radius: 8px; }
.btn--primary { background: var(--accent); color: #fff; border: none; box-shadow: none; animation: none; background-size: auto; }
.btn--primary:hover { background: var(--accent-dark); filter: none; transform: translateY(-1px); box-shadow: none; }
.nav__link--cta { background: var(--accent) !important; color: #fff !important; box-shadow: none; }
.nav__link--cta:hover { background: var(--accent-dark) !important; box-shadow: none !important; transform: none; }

/* ---- Cards: clean hover (no teal glow ring) ---- */
.how-step:hover, .insight-card:hover, .ecl-method-card:hover { box-shadow: var(--shadow-md); border-color: var(--grey-200); transform: translateY(-4px); }

/* ---- Solutions -> light section with clean white cards ---- */
.solutions .section-label--light { color: var(--accent); }
.solutions .section-label--light::before { background: var(--accent); }
.solutions .section-title--light { color: var(--text); }
.solutions .section-desc--light { color: var(--grey-600); }
.solutions__grid { background: transparent; gap: 24px; border-radius: 0; overflow: visible; }
.sol-card { background: var(--white); border: 1px solid var(--grey-100); border-radius: 12px; box-shadow: var(--shadow-sm); }
.sol-card::after { display: none; }
.sol-card:hover { background: var(--white); transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--grey-200); }
.sol-card__num { color: var(--grey-100); }
.sol-card__name { color: var(--text); }
.sol-card__desc, .sol-card__features li { color: var(--grey-600); }
.sol-card--featured { background: var(--white); }
.sol-card--featured::before { color: var(--accent-dark); background: var(--accent-pale); border-color: rgba(53, 180, 242,.25); }

/* ---- Contact -> light section ---- */
.contact .section-label--light { color: var(--accent); }
.contact .section-label--light::before { background: var(--accent); }
.contact .section-title--light { color: var(--text); }
.contact__tagline { color: var(--grey-600); border-left-color: var(--accent); }
.contact__text { color: var(--grey-600); }
.contact__detail-icon { background: var(--white); border: 1px solid var(--grey-200); }
.contact__detail-icon svg { color: var(--accent); }
.contact__detail-label { color: var(--grey-400); }
.contact__detail a, .contact__detail span { color: var(--grey-600); }
.contact__detail a:hover { color: var(--accent); }
.contact__form { border: 1px solid var(--grey-100); box-shadow: var(--shadow-md); }

/* ============================================================
   v10 — yellow + dark-navy palette readability
   Yellow accent on white is unreadable, so on light contexts
   we switch text/icon accents to var(--primary) (dark navy).
   Yellow stays for: dark sections, button BGs (with dark text),
   the trust-bar dots, and the hero "We resolve." em.
   ============================================================ */

/* Buttons & CTA — yellow background needs DARK text */
.btn--primary, .btn--primary:hover { color: var(--primary); }
.nav__link--cta, .nav__link--cta:hover { color: var(--primary) !important; }

/* Section eyebrows / labels on light sections */
.section-label { color: var(--primary); }
.section-label::before { background: var(--primary); }

/* Services list (light) */
.svc-row:hover .svc-row__num { color: var(--primary); }
.svc-row:hover .svc-row__tags span { background: var(--grey-50); color: var(--primary); border-color: var(--grey-200); }
.svc-row:hover .svc-row__arrow { background: var(--accent); border-color: var(--accent); color: var(--primary); }

/* About (light) */
.about__pillar-num { color: var(--primary); }
.about__stat-value span { color: var(--primary); }

/* Solutions cards (light, from v9) */
.sol-card__type { color: var(--primary); }
.sol-card__icon { color: var(--primary); }
.sol-card__link { color: var(--primary); }
.sol-card__features li::before { background: var(--primary); }
.sol-card--featured::before { color: var(--white); background: var(--primary); border-color: var(--primary); }

/* Contact (light, from v9) */
.contact .section-label--light { color: var(--primary); }
.contact .section-label--light::before { background: var(--primary); }
.contact__tagline { border-left-color: var(--primary); }
.contact__detail-icon svg { color: var(--primary); }
.contact__detail a:hover { color: var(--primary); }

/* Form focus (white form) */
.form__field input:focus, .form__field select:focus, .form__field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(22,29,35,.08);
}

/* Inner pages: light cards & icons */
.capability-card__icon, .feature-item__icon { background: var(--grey-50); color: var(--primary); }
.svc-highlight svg { color: var(--primary); }
.how-step__num { background: var(--primary); color: var(--white); }
.how-step::before { background: var(--primary); }
.ecl-module__tag { color: var(--primary); }
.ecl-method-card__label { color: var(--primary); }

/* Mega-menu dropdown (white) */
.nav__mega-icon { background: var(--grey-50); color: var(--primary); }
.nav__mega-item:hover .nav__mega-icon { background: var(--accent); color: var(--primary); }
.nav__mega-features li::before { background: var(--primary); }
.nav__mega-tag { background: var(--accent); color: var(--primary); }
.nav__mega-bar-link, .nav__mega-bar-link:hover { color: var(--primary); }
.nav__mega-item::after { background: var(--accent); }

/* Insights (light) */
.insight-tag--ifrs { background: var(--grey-50); color: var(--primary); }
.insight-card__link { color: var(--primary); }
.insight-card:hover .insight-card__title,
.insight-card--featured:hover .insight-card__title { color: var(--primary); }

/* Article pages (light) */
.article-pullquote { background: var(--grey-50); border-left-color: var(--primary); }
.article-sidebar__link:hover { color: var(--primary); }
.article-content ul li::before, .ecl-feature-list li::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23161D23' fill-opacity='.08'/%3E%3Cpath d='M5 8l2 2 4-4' stroke='%23161D23' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* ============================================================
   v11 — Big 4 editorial + orbits theme
   Restrained typography, generous whitespace, no decorative noise.
   The hero's orbital diagram is the brand's visual signature.
   ============================================================ */

/* Hide the scrolling-ticker trust bar (startup feel, not Big 4) */
.trust-bar { display: none; }

/* ---- Hero refinements ---- */
.hero__container { padding-top: 120px; padding-bottom: 80px; gap: 80px; }
.hero__heading { font-size: clamp(2.6rem, 5.4vw, 4.8rem); font-weight: 600; letter-spacing: -.028em; line-height: 1.05; margin-bottom: 32px; }
.hero__heading em { font-style: normal; color: var(--accent); -webkit-text-fill-color: var(--accent); background: none; animation: none; }
.hero__subtext { font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,.62); max-width: 460px; margin-bottom: 44px; font-weight: 300; }

/* ---- Orbital diagram ---- */
.hero__visual { display: flex; align-items: center; justify-content: center; }
.hero__diagram { width: 100%; height: auto; max-width: 520px; display: block; }
.diagram__pulse { transform-origin: 260px 260px; animation: so-orbit-pulse 4.5s ease-in-out infinite; }
@keyframes so-orbit-pulse { 0%, 100% { opacity: .35; r: 14; } 50% { opacity: .75; r: 18; } }

/* ---- Stats bar: editorial, restrained ---- */
.hero__stats-bar { border-top: 1px solid rgba(255,255,255,.08); padding: 40px 0 0; margin-top: 72px; }
.hero__stat-number { font-size: 2.05rem; font-weight: 600; letter-spacing: -.02em; }
.hero__stat-number span { color: var(--accent); font-weight: 500; }
.hero__stat-label { font-size: .68rem; letter-spacing: .15em; color: rgba(255,255,255,.4); font-weight: 500; text-transform: uppercase; }

/* ---- Section breathing room ---- */
.services, .about { padding: 140px 0; }
.solutions, .contact { padding: 140px 0; }
.services__header, .section-header { margin-bottom: 80px; }

/* ---- Section titles: editorial scale ---- */
.section-title { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 600; letter-spacing: -.024em; line-height: 1.15; }
.section-desc { font-size: 1rem; line-height: 1.75; color: var(--grey-600); }

/* ---- Services list: more whitespace, editorial ---- */
.svc-row { padding: 36px 0; gap: 40px; }
.svc-row__num { font-size: 1.35rem; color: var(--grey-200); font-weight: 400; }
.svc-row__body h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px; }
.svc-row__body p { font-size: .92rem; line-height: 1.7; color: var(--grey-600); }

/* ---- Solutions cards (light): editorial spacing ---- */
.sol-card { padding: 56px 40px 48px; }
.sol-card__num { font-size: 3rem; color: var(--grey-100); font-weight: 400; letter-spacing: -.02em; margin-bottom: 28px; }
.sol-card__name { font-size: 1.35rem; font-weight: 600; letter-spacing: -.015em; }
.sol-card__desc { font-size: .92rem; line-height: 1.75; }

/* ---- About: editorial ---- */
.about__quote { font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.45; font-weight: 400; letter-spacing: -.015em; margin-bottom: 28px; }
.about__text { font-size: .98rem; line-height: 1.85; color: var(--grey-600); }
.about__stat-value { font-size: clamp(2.8rem, 4.4vw, 3.6rem); font-weight: 600; letter-spacing: -.025em; }
.about__stat-label { font-size: .72rem; letter-spacing: .14em; }

/* ---- Contact: editorial, restrained ---- */
.contact__tagline { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.5; font-weight: 400; }
.contact__text { font-size: 1rem; line-height: 1.8; }
.contact__form { padding: 44px; border-radius: 14px; }
.form__title { font-size: 1.1rem; font-weight: 600; }

/* ---- Footer: minimal ---- */
.footer { padding-top: 96px; }
.footer__top { gap: 96px; padding-bottom: 64px; }
.footer__col h4 { font-size: .68rem; letter-spacing: .14em; color: rgba(255,255,255,.4); }

/* ---- Calm hero load-in (no staggered animations) ---- */
.hero__content > *, .hero__visual, .hero__stats-bar { animation: none !important; opacity: 1 !important; }

/* ============================================================
   v12 — Minimal Deloitte-style header (64px navy bar)
   ============================================================ */

/* Always-solid dark nav — same look at all scroll positions */
.nav, .nav--solid {
  background: var(--primary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: none;
}
.nav__container { height: 64px; max-width: 1280px; padding: 0 32px; }

/* Logo (smaller, refined) */
.logo-img { height: 30px; max-width: 200px; }

/* Nav links — mixed case, regular weight, no SHOUTY tracking */
.nav__links { gap: 2px; }
.nav__link {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255,255,255,.78);
  padding: 8px 18px;
  text-transform: none;
}
.nav__link:hover { color: #ffffff; background: transparent; }
.nav__chevron { width: 11px; height: 11px; opacity: .6; }

/* No CTA button in this header */
.nav__link--cta { display: none !important; }

/* Right-side icon cluster (search + contact) */
.nav__icons { display: flex; align-items: center; gap: 4px; margin-left: 16px; }
.nav__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: transparent; border: none;
  color: rgba(255,255,255,.7);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: color 200ms ease, background 200ms ease;
}
.nav__icon:hover { color: #ffffff; background: rgba(255,255,255,.06); }
.nav__icon svg { width: 18px; height: 18px; display: block; }

/* Mega-menu dropdown sits flush under the new 64px header */
.nav__dropdown { top: 64px; }

/* Mobile */
.nav__hamburger span { background: #ffffff; }
@media (max-width: 1024px) { .nav__container { padding: 0 24px; } }
@media (max-width: 768px) {
  .nav__container { padding: 0 20px; }
  .nav__icons { display: none; }
  .nav__links { top: 64px; background: rgba(22,29,35,.98); }
}

/* ============================================================
   v13 — Hero (Section 2): full-bleed, two-column editorial,
   orbital artwork dominates right side, one CTA, no stats bar
   ============================================================ */

.hero {
  min-height: 88vh;
  background: var(--primary);
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}
.hero__bg { display: none; }
.hero__bg::before, .hero__bg::after { display: none; }

.hero__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 32px 64px;
  display: grid;
  grid-template-columns: 45% 1fr;
  gap: 64px;
  align-items: center;
  width: 100%;
}

/* Left — editorial text */
.hero__content { max-width: 540px; }
.hero__heading {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.028em;
  color: #ffffff;
  margin-bottom: 28px;
}
.hero__heading em { font-style: normal; color: var(--accent); -webkit-text-fill-color: var(--accent); background: none; }
.hero__subtext {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,.65);
  margin-bottom: 36px;
  max-width: 440px;
  font-weight: 300;
}
.hero__actions { display: flex; gap: 12px; }
.hero__actions .btn--primary {
  background: var(--accent);
  color: var(--primary);
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: background 200ms ease;
}
.hero__actions .btn--primary:hover {
  background: #1C9FE0;
  transform: none;
  box-shadow: none;
  filter: none;
}

/* Right — orbital artwork */
.hero__visual { display: flex; align-items: center; justify-content: center; }
.hero__diagram { width: 100%; max-width: 540px; height: auto; display: block; }
.diagram__orbit {
  transform-origin: 260px 260px;
  transform-box: fill-box;
  animation: orbit-slow-spin 120s linear infinite;
}
@keyframes orbit-slow-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .diagram__orbit, .diagram__pulse { animation: none !important; }
}

/* Stats bar — removed from hero (moves to About in Section 8) */
.hero__stats-bar { display: none; }

/* Mobile: stack, hide artwork */
@media (max-width: 1024px) {
  .hero__container { grid-template-columns: 1fr; gap: 40px; padding: 96px 24px 56px; }
  .hero__visual { display: none; }
}
@media (max-width: 768px) {
  .hero__container { padding: 88px 20px 48px; }
}

/* ============================================================
   v14 / v15 — Brand Manifesto (Section 3)
   Video background, muted loop. The inner uses position:sticky
   so as the user scrolls into this section it PINS for ~1 extra
   viewport — the page feels "locked" while the video plays.
   ============================================================ */

.manifesto {
  position: relative;
  height: 200vh;                  /* 1 visible viewport + 1 extra viewport of scroll runway while pinned */
  background: var(--primary);
}
.manifesto__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--primary);     /* dark fallback while video buffers */
}
.manifesto__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.manifesto__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,29,35,.42) 0%, rgba(22,29,35,.62) 100%);
  pointer-events: none;
}
.manifesto__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 32px;
  text-align: center;
}
.manifesto__statement {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  line-height: 1.3;
  letter-spacing: -.022em;
  color: #ffffff;
  margin: 0;
  max-width: 1000px;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);   /* legibility safety on any video frame */
}
.manifesto__statement em {
  font-style: normal;
  color: var(--accent);
}

/* On mobile, pinning is less effective — shorten the runway */
@media (max-width: 768px) {
  .manifesto { height: 130vh; }
  .manifesto__inner { padding: 0 20px; }
}

/* Respect reduced motion — no pin runway, just a normal section */
@media (prefers-reduced-motion: reduce) {
  .manifesto { height: auto; }
  .manifesto__sticky { position: relative; height: 70vh; }
}

/* ============================================================
   v16 — Hero/Manifesto stacked pin (corrects 3 issues)
   1) Hero covers the full screen (100vh) before any video shows.
   2) Hero is the sticky one — it stays LOCKED behind as you scroll.
   3) Manifesto rises over the locked hero at NORMAL scroll speed
      (no pin on the video — it moves 1:1 with the scroll wheel).
   ============================================================ */

.pin-stack { position: relative; }

.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
  z-index: 1;
  overflow: hidden;
}

.manifesto {
  position: relative;
  height: 100vh;
  z-index: 2;
  background: var(--primary);
  overflow: hidden;
}

/* Drop the old sticky-inner / 200vh-runway pattern */
.manifesto__sticky {
  position: relative;
  top: auto;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .hero { position: relative; height: auto; min-height: 100vh; }
  .manifesto { height: auto; min-height: 70vh; }
  .manifesto__sticky { height: auto; min-height: 70vh; }
}

/* ============================================================
   v17 — Hero background image
   Real photograph as backdrop (planet + gold orbit, on-brand).
   SVG orbital diagram is hidden since the image already shows
   an orbit (two orbits would clash). Gradient overlay keeps
   the text on the left fully legible.
   ============================================================ */

.hero {
  background-color: var(--primary);
  background-image: url('../images/hero-bg.png?v=2');
  background-size: cover;
  background-position: right center;     /* keep the planet on the right */
  background-repeat: no-repeat;
}

/* Re-enable the .hero__bg layer as the gradient overlay */
.hero__bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(22,29,35,.92) 0%,
    rgba(22,29,35,.72) 35%,
    rgba(22,29,35,.30) 65%,
    rgba(22,29,35,.10) 100%
  );
  pointer-events: none;
}
.hero__bg::before, .hero__bg::after { display: none; }
.hero__container { position: relative; z-index: 1; }   /* keep text above the overlay */

/* Hide the SVG orbital diagram — the photo IS the orbit now */
.hero__visual { display: none; }

/* Give the text column the room it needs now that the visual is gone */
.hero__container {
  grid-template-columns: minmax(0, 600px);   /* single column, capped width */
  gap: 0;
  justify-content: flex-start;               /* text aligned to left */
}

@media (max-width: 768px) {
  .hero {
    background-position: 65% center;          /* let the planet peek through on small screens */
  }
  .hero__bg {
    background: linear-gradient(
      180deg,
      rgba(22,29,35,.75) 0%,
      rgba(22,29,35,.85) 60%,
      rgba(22,29,35,.92) 100%
    );
  }
}

/* ============================================================
   v18 — Quick-nav pill chips (Section 4)
   Connector strip between the video manifesto and the services
   grid. Three centred outline pills, color-invert on hover.
   ============================================================ */

.quicknav {
  background: #ffffff;
  padding: 72px 32px;
}
.quicknav__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.quicknav__pill {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  padding: 12px 28px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.quicknav__pill:hover {
  background: var(--primary);
  color: #ffffff;
}

@media (max-width: 768px) {
  .quicknav { padding: 56px 20px; }
  .quicknav__pill { padding: 11px 24px; }
}

/* ============================================================
   v19 — Manifesto pills (moved INSIDE the video section,
   sitting just below the brand statement, like Deloitte)
   ============================================================ */

/* Stack statement + pills vertically inside the manifesto */
.manifesto__inner {
  flex-direction: column;
  gap: 40px;
}

.manifesto__pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.manifesto__pill {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  color: var(--primary);
  border: none;
  border-radius: 999px;
  padding: 13px 30px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.manifesto__pill:hover {
  background: var(--accent);
  color: var(--primary);
}

@media (max-width: 768px) {
  .manifesto__inner { gap: 32px; }
  .manifesto__pill { padding: 12px 24px; font-size: 13px; }
}

/* ============================================================
   v20 — Services (Section 5)
   Deloitte pattern: full-width gold "ribbon" header band,
   centered editorial section heading, flat 3×2 white card grid.
   No card borders, no shadows; hover = subtle lift only.
   ============================================================ */

.services {
  background: #F5F7F8;
  padding: 0 0 120px;
  display: block;
}

/* Gold ribbon header (Deloitte signature) */
.services__ribbon {
  background: var(--accent);
  height: 48px;
  display: flex;
  align-items: center;
}
.services__ribbon-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}
.services__ribbon-label {
  color: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Inner container */
.services__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Section header — centered, editorial */
.services__header {
  display: block;
  grid-template-columns: none;
  text-align: center;
  padding: 120px 0 80px;
  max-width: 720px;
  margin: 0 auto;
}
.services__heading {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.15;
  color: var(--primary);
  margin: 0 0 18px;
}
.services__lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--grey-600);
  margin: 0;
  font-weight: 400;
}

/* Card grid */
.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Flat card */
.svc-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 36px 32px 32px;
  text-decoration: none;
  color: inherit;
  border: none;
  box-shadow: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.svc-card__num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.12em;
  margin-bottom: 22px;
}
.svc-card__title {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 14px;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.svc-card__desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--grey-600);
  margin: 0 0 26px;
  flex: 1;
}
.svc-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0;
  text-transform: none;
  transition: gap 200ms ease;
}
.svc-card__link svg { width: 14px; height: 14px; }
.svc-card:hover .svc-card__link { gap: 12px; }

@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .services__header { padding: 96px 0 64px; }
}
@media (max-width: 640px) {
  .services__grid { grid-template-columns: 1fr; }
  .services__container { padding: 0 20px; }
  .services__ribbon-inner { padding: 0 20px; }
  .services__header { padding: 80px 0 56px; }
}

/* ============================================================
   v21 — Solutions (Section 6)
   Deloitte "Our work" pattern: gold ribbon header, dark section,
   alternating 2-column feature rows, one per SaaS platform.
   ============================================================ */

.solutions {
  background: var(--primary);
  padding: 0 0 140px;
  display: block;
  position: relative;
}
.solutions::before, .solutions::after { content: none; }

/* Gold ribbon */
.solutions__ribbon {
  background: var(--accent);
  height: 48px;
  display: flex;
  align-items: center;
}
.solutions__ribbon-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}
.solutions__ribbon-label {
  color: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Inner container */
.solutions__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Section header (centered, white on dark) */
.solutions__header {
  text-align: center;
  padding: 120px 0 96px;
  max-width: 760px;
  margin: 0 auto;
}
.solutions__heading {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 18px;
}
.solutions__lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,.62);
  margin: 0;
  font-weight: 400;
}

/* Feature row (2-column) */
.solutions__feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 56px 0;
}
.solutions__feature + .solutions__feature {
  border-top: 1px solid rgba(255,255,255,.06);
}
.solutions__feature--flip .solutions__feature-text { order: 2; }
.solutions__feature--flip .solutions__feature-visual { order: 1; }

/* Text side */
.solutions__feature-text { max-width: 480px; }
.feature-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-block;
}
.feature-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 18px;
}
.feature-desc {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,.65);
  margin: 0 0 26px;
}
.feature-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.feature-bullets li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
}
.feature-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 10px; height: 1px;
  background: var(--accent);
}
.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0;
  text-decoration: none;
  transition: gap 200ms ease;
}
.feature-link svg { width: 16px; height: 16px; }
.feature-link:hover { gap: 14px; }

/* Visual side (clean editorial panel) */
.solutions__feature-visual {
  position: relative;
}
.feature-art {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.25);
}

@media (max-width: 1024px) {
  .solutions__feature { grid-template-columns: 1fr; gap: 40px; padding: 48px 0; }
  .solutions__feature--flip .solutions__feature-text { order: 1; }
  .solutions__feature--flip .solutions__feature-visual { order: 2; }
  .solutions__header { padding: 96px 0 72px; }
}
@media (max-width: 640px) {
  .solutions__container { padding: 0 20px; }
  .solutions__ribbon-inner { padding: 0 20px; }
  .solutions__header { padding: 80px 0 56px; }
  .solutions__feature { gap: 28px; padding: 36px 0; }
}

/* ============================================================
   v22 — Sticky section ribbons
   Each section's coloured ribbon pins at the top of the viewport
   (just below the 64 px fixed nav) for the duration of its own
   section. When the next section's ribbon arrives, it slides up
   into that same slot and replaces the previous one.
   ============================================================ */

.services__ribbon,
.solutions__ribbon {
  position: sticky;
  top: 64px;        /* sits right below the fixed nav (64 px tall) */
  z-index: 30;      /* above section content; below the nav (z-index 200) */
}

/* Solutions section had `overflow: hidden` from an earlier CSS layer (v4),
   which kills `position: sticky` for any descendant. Undo it. */
.solutions { overflow: visible; }

/* ============================================================
   v23 — Insights teaser (Section 7)
   White section, gold sticky ribbon, flat 4-card grid (text-only),
   "View all insights →" outline pill at the bottom.
   ============================================================ */

.insights {
  background: #FFFFFF;
  padding: 0 0 120px;
  display: block;
  overflow: visible;
}

/* Sticky gold ribbon — same pattern as Services / Solutions */
.insights__ribbon {
  background: var(--accent);
  height: 48px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 64px;
  z-index: 30;
}
.insights__ribbon-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}
.insights__ribbon-label {
  color: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.insights__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Section header */
.insights__header {
  text-align: center;
  padding: 120px 0 80px;
  max-width: 760px;
  margin: 0 auto;
}
.insights__heading {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.15;
  color: var(--primary);
  margin: 0 0 18px;
}
.insights__lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--grey-600);
  margin: 0;
}

/* 4-card grid */
.insights__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Insight card — text-only, white with thin border */
.ins-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--grey-100);
  padding: 32px 28px;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.ins-card:hover {
  transform: translateY(-4px);
  border-color: var(--grey-200);
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.ins-card__tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ins-card__title {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--primary);
  margin: 0 0 14px;
  letter-spacing: -.01em;
  flex: 1;
}
.ins-card__excerpt {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--grey-600);
  margin: 0 0 22px;
}
.ins-card__meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: var(--grey-400);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ins-card__arrow { color: var(--accent); font-size: 14px; }

/* Footer "View all" link */
.insights__footer { margin-top: 64px; text-align: center; }
.insights__viewall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  padding: 14px 32px;
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.insights__viewall:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}
.insights__viewall svg { width: 14px; height: 14px; }

@media (max-width: 1024px) {
  .insights__grid { grid-template-columns: repeat(2, 1fr); }
  .insights__header { padding: 96px 0 64px; }
}
@media (max-width: 640px) {
  .insights__grid { grid-template-columns: 1fr; }
  .insights__container { padding: 0 20px; }
  .insights__ribbon-inner { padding: 0 20px; }
  .insights__header { padding: 80px 0 56px; }
}

/* ============================================================
   v24 — About (Section 8)
   Sticky gold ribbon, off-white section, centered editorial
   header, 60/40 quote+stats body, 3-pillar row, CTA pill.
   ============================================================ */

.about {
  background: #ffffff;          /* distinct from off-white ribbon sections above */
  padding: 0 0 120px;
  display: block;
  overflow: visible;
  border-top: 1px solid var(--grey-100);
}

/* Small gold eyebrow replaces the ribbon — quieter, distinguishes About */
.about__eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* ============================================================
   v25 — Contact (Section 9) — no ribbon, clean editorial
   White section, centered header, 40/60 details-and-form,
   underline-only form inputs (Big-4 minimal aesthetic).
   ============================================================ */

.contact {
  background: #ffffff;
  padding: 0 0 120px;
  display: block;
  position: relative;
  overflow: visible;
  border-top: 1px solid var(--grey-100);
}

.contact__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Header — matches About pattern (eyebrow + centered heading + lede) */
.contact__header {
  text-align: center;
  padding: 120px 0 72px;
  max-width: 720px;
  margin: 0 auto;
}
.contact__eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.contact__heading {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.15;
  color: var(--primary);
  margin: 0 0 18px;
}
.contact__lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--grey-600);
  margin: 0;
}

/* Body — 40/60 split */
.contact__body {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 96px;
  align-items: start;
}

/* Left: details */
.contact__details {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 6px;
}
.contact__intro {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--grey-600);
  margin: 0 0 8px;
}
.contact__detail-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--grey-100);
}
.contact__detail-block:last-child { border-bottom: none; padding-bottom: 0; }
.contact__detail-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--grey-400);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contact__detail-value {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: -.005em;
}
a.contact__detail-value { transition: color 200ms ease; }
a.contact__detail-value:hover { color: var(--accent); }

/* Right: form (underline-only inputs) */
.contact__form {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact__form .form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contact__form .form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.contact__form label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--grey-600);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contact__form input,
.contact__form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--grey-200);
  border-radius: 0;
  padding: 10px 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  color: var(--primary);
  outline: none;
  transition: border-color 200ms ease;
  box-shadow: none;
}
.contact__form input:focus,
.contact__form textarea:focus {
  border-bottom-color: var(--primary);
  box-shadow: none;
}
.contact__form textarea { resize: vertical; min-height: 100px; }

.contact__submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 16px;
  background: var(--accent);
  color: var(--primary);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 14px 30px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.contact__submit:hover { background: #1C9FE0; transform: translateY(-1px); }
.contact__submit svg { width: 14px; height: 14px; }

.contact__note {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: var(--grey-400);
  margin: 8px 0 0;
}

@media (max-width: 1024px) {
  .contact__body { grid-template-columns: 1fr; gap: 56px; }
  .contact__header { padding: 96px 0 56px; }
}
@media (max-width: 640px) {
  .contact__container { padding: 0 20px; }
  .contact__form .form__row { grid-template-columns: 1fr; }
  .contact__header { padding: 80px 0 48px; }
}

/* ============================================================
   v26 — Footer (Section 10) — minimal Big 4
   Dark navy slab. Logo + tagline + socials left. 3 link columns
   right. Single hairline divides body from copyright row.
   Thin gold hairline at the very top bookends the design.
   ============================================================ */

.footer {
  background: #0F1418;
  padding: 0;
  position: relative;
  border-top: 1px solid rgba(53, 180, 242,.35);   /* subtle gold bookend */
}
.footer > .container {
  max-width: 1280px;
  padding: 0 32px;
}

/* Top zone — brand block + link columns */
.footer__top {
  grid-template-columns: 1.2fr 2fr;
  gap: 80px;
  padding: 96px 0 64px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Brand block */
.footer__brand .logo-img { height: 28px; max-width: 180px; }
.footer__tagline {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.5);
  margin: 22px 0 26px;
  max-width: 360px;
  font-weight: 300;
}

/* Social icons */
.footer__socials { display: flex; gap: 10px; }
.footer__socials a {
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.5);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.footer__socials a svg { width: 14px; height: 14px; }
.footer__socials a:hover {
  color: var(--accent);
  border-color: rgba(53, 180, 242,.4);
  background: rgba(53, 180, 242,.06);
}

/* Link columns */
.footer__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.footer__col h4 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__col a {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  letter-spacing: 0;
  transition: color 200ms ease;
}
.footer__col a:hover { color: var(--accent); }

/* Bottom row — copyright + disclaimer */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 28px 0 36px;
}
.footer__bottom p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,.35);
  margin: 0;
  letter-spacing: 0;
}

@media (max-width: 1024px) {
  .footer__top { grid-template-columns: 1fr; gap: 56px; padding: 80px 0 56px; }
}
@media (max-width: 640px) {
  .footer > .container { padding: 0 20px; }
  .footer__links { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; padding: 24px 0 32px; }
}

.about__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Section header (centered, editorial) */
.about__header {
  text-align: center;
  padding: 120px 0 80px;
  max-width: 760px;
  margin: 0 auto;
}
.about__heading {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.15;
  color: var(--primary);
  margin: 0 0 18px;
}
.about__lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--grey-600);
  margin: 0;
}

/* Body — 60/40 split */
.about__body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 96px;
  align-items: start;
  padding-bottom: 96px;
}

/* Left: quote + brand voice */
.about__text-col { max-width: 620px; }
.about__quote {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.018em;
  color: var(--primary);
  margin: 0 0 32px;
  padding-left: 18px;
  border-left: 2px solid var(--accent);
}
.about__text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--grey-600);
  margin: 0 0 18px;
}
.about__text:last-child { margin-bottom: 0; }

/* Right: stats stacked */
.about__stats-col {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.about-stat { padding-bottom: 28px; border-bottom: 1px solid var(--grey-200); }
.about-stat:last-child { border-bottom: none; padding-bottom: 0; }
.about-stat__value {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--primary);
  margin-bottom: 10px;
}
.about-stat__value span { color: var(--accent); font-weight: 500; }
.about-stat__label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--grey-600);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Pillars row */
.about__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  padding: 64px 0;
  border-top: 1px solid var(--grey-200);
}
.about-pillar { display: flex; flex-direction: column; gap: 12px; }
.about-pillar__num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.about-pillar__title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--primary);
  margin: 0;
  letter-spacing: -.01em;
}
.about-pillar__desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--grey-600);
  margin: 0;
}

/* CTA */
.about__cta { text-align: center; padding-top: 24px; }
.about__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--primary);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 999px;
  transition: background 200ms ease, transform 200ms ease;
}
.about__cta-btn:hover { background: #1C9FE0; transform: translateY(-1px); }
.about__cta-btn svg { width: 14px; height: 14px; }

@media (max-width: 1024px) {
  .about__body { grid-template-columns: 1fr; gap: 56px; padding-bottom: 64px; }
  .about__pillars { grid-template-columns: 1fr; gap: 36px; padding: 48px 0; }
  .about__header { padding: 96px 0 64px; }
}
@media (max-width: 640px) {
  .about__container { padding: 0 20px; }
  .about__ribbon-inner { padding: 0 20px; }
  .about__header { padding: 80px 0 56px; }
}

/* ============================================================
   v27 — About + Contact ribbons (consistency with Services/Solutions/Insights)
   Same gold sticky ribbon pattern as the other sections.
   ============================================================ */

.about__ribbon,
.contact__ribbon {
  background: var(--accent);
  height: 48px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 64px;
  z-index: 30;
}
.about__ribbon-inner,
.contact__ribbon-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}
.about__ribbon-label,
.contact__ribbon-label {
  color: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Hide the old eyebrow now that the ribbon carries the section name */
.about__eyebrow,
.contact__eyebrow { display: none; }

/* Tighten header top padding — ribbon already provides visual anchor */
.about__header { padding: 96px 0 64px; }
.contact__header { padding: 96px 0 56px; }

/* Mobile */
@media (max-width: 640px) {
  .about__ribbon-inner,
  .contact__ribbon-inner { padding: 0 20px; }
}

/* ============================================================
   v28 — Mega dropdowns (Deloitte-style)
   White panel, text-only link columns, small uppercase headers,
   featured aside with subtle orbit art, clean foot bar.
   ============================================================ */

/* Panel container — neutralises old styles, keeps top gold accent */
.nav__dropdown {
  background: #ffffff;
  border-top: 2px solid var(--accent);
  box-shadow: 0 24px 64px rgba(22,29,35,.10), 0 4px 16px rgba(22,29,35,.05);
}

.nav__mega {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

/* Grid: 2 text columns + featured aside (Services) */
.nav__mega-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1.05fr;
  gap: 56px;
  padding: 48px 48px 40px;
  align-items: start;
}
/* Solutions: single wide column + featured aside */
.nav__mega-cols--sol {
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
}

/* Link column */
.nav__mega-col { min-width: 0; }
.nav__mega-col--wide { padding-right: 16px; }

.nav__mega-h {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(53, 180, 242,.45);
  position: relative;
}

.nav__mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.nav__mega-list a {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0;
  transition: transform 220ms ease;
}
.nav__mega-list a:hover { transform: translateX(4px); }

.nav__mega-t {
  display: block;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
  letter-spacing: -.005em;
  margin-bottom: 5px;
  transition: color 200ms ease;
}
.nav__mega-list a:hover .nav__mega-t { color: var(--accent); }

.nav__mega-d {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--grey-600);
  line-height: 1.55;
  letter-spacing: 0;
}

/* Featured aside — subtle navy card with orbit art */
.nav__mega-feat {
  display: flex;
  flex-direction: column;
  background: linear-gradient(155deg, #1B232B 0%, #11171C 100%);
  border-radius: 4px;
  overflow: hidden;
  min-height: 280px;
}
.nav__mega-feat-art {
  position: relative;
  height: 130px;
  background: linear-gradient(155deg, #1F2832 0%, #161D23 100%);
  border-bottom: 1px solid rgba(53, 180, 242,.18);
  overflow: hidden;
}
.nav__mega-feat-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 70% 50%, rgba(53, 180, 242,.10), transparent 65%);
}
.nav__mega-feat-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 90px; height: 90px;
  margin: -45px 0 0 -45px;
  border: 1px solid rgba(53, 180, 242,.35);
  border-radius: 50%;
}
.nav__mega-feat-orbit--mid {
  width: 150px; height: 150px;
  margin: -75px 0 0 -75px;
  border-color: rgba(53, 180, 242,.20);
}
.nav__mega-feat-orbit--out {
  width: 220px; height: 220px;
  margin: -110px 0 0 -110px;
  border-color: rgba(53, 180, 242,.10);
}
.nav__mega-feat-dot {
  position: absolute;
  top: 50%; left: calc(50% + 45px);
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(53, 180, 242,.18);
}
.nav__mega-feat-art--alt::before {
  background:
    radial-gradient(60% 80% at 30% 60%, rgba(53, 180, 242,.12), transparent 65%);
}
.nav__mega-feat-art--alt .nav__mega-feat-dot {
  left: calc(50% - 45px);
}

.nav__mega-feat-body {
  padding: 22px 24px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.nav__mega-feat-eb {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.nav__mega-feat-title {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.35;
  letter-spacing: -.012em;
  margin: 0 0 18px;
  flex: 1;
}
.nav__mega-feat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
  text-transform: uppercase;
  width: fit-content;
  transition: gap 200ms ease, color 200ms ease;
}
.nav__mega-feat-link:hover { gap: 12px; color: #D9B833; }
.nav__mega-feat-link svg { width: 13px; height: 13px; }

/* Foot bar — thin grey divider with View all + CTA */
.nav__mega-foot {
  border-top: 1px solid rgba(22,29,35,.08);
  background: #FAFAF8;
  padding: 16px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__mega-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--primary);
  text-transform: uppercase;
  text-decoration: none;
  transition: gap 200ms ease, color 200ms ease;
}
.nav__mega-foot-link:hover { gap: 12px; color: var(--accent); }
.nav__mega-foot-link svg { width: 13px; height: 13px; }

.nav__mega-foot-cta {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: var(--accent);
  padding: 10px 20px;
  border-radius: 3px;
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease;
}
.nav__mega-foot-cta:hover { background: #1C9FE0; transform: translateY(-1px); }

/* Tablet: drop featured aside, keep link columns */
@media (max-width: 1100px) {
  .nav__mega-cols { grid-template-columns: 1fr 1fr; gap: 48px; padding: 36px 36px 32px; }
  .nav__mega-cols--sol { grid-template-columns: 1fr; }
  .nav__mega-feat { display: none; }
  .nav__mega-foot { padding: 14px 36px; }
}

/* Mobile: single column stack */
@media (max-width: 640px) {
  .nav__dropdown {
    position: static;
    box-shadow: none;
    border-top: none;
    background: transparent;
    opacity: 1; visibility: visible; transform: none;
    pointer-events: auto;
  }
  .nav__mega-cols {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 16px 0 20px;
  }
  .nav__mega-h {
    color: rgba(255,255,255,.5);
    border-bottom-color: rgba(53, 180, 242,.3);
    padding-bottom: 10px;
    margin-bottom: 14px;
  }
  .nav__mega-list { gap: 14px; }
  .nav__mega-t { color: #ffffff; font-size: 14px; margin-bottom: 2px; }
  .nav__mega-d { display: none; }
  .nav__mega-foot {
    background: transparent;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 16px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .nav__mega-foot-link { color: var(--accent); }
  .nav__mega-foot-cta { width: 100%; justify-content: center; }
}

/* ============================================================
   v29 — Bespoke page system (Services / Solutions detail pages)
   Shared Deloitte design tokens; pages mix sections per their need.
   ============================================================ */

/* Neutralise old page-hero / svc-* styles so v29 takes over cleanly.
   (Old pages will be rebuilt, but keep this for any stragglers.) */
.page-hero { padding: 0; background: transparent; min-height: 0; }
.page-hero::before, .page-hero::after { content: none; display: none; }

/* ============ Page Ribbon ============ */
.page-ribbon {
  background: var(--accent);
  height: 48px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 64px;
  z-index: 30;
}
.page-ribbon__inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.page-ribbon__label {
  color: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.page-ribbon__sep {
  color: rgba(255,255,255,.45);
  font-size: 14px;
  font-weight: 300;
}
.page-ribbon__current {
  color: rgba(255,255,255,.85);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ============ Page Hero (editorial centered) ============ */
.p-hero {
  background: #ffffff;
  padding: 80px 0 96px;
  border-bottom: 1px solid var(--grey-100);
  position: relative;
  overflow: hidden;
}
.p-hero__container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
  position: relative;
}
.p-crumbs {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}
.p-crumbs a {
  color: var(--grey-600);
  text-decoration: none;
  transition: color 200ms ease;
}
.p-crumbs a:hover { color: var(--accent); }
.p-crumbs__sep { color: var(--grey-300); font-weight: 300; }
.p-crumbs__here { color: var(--primary); font-weight: 500; }

.p-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.p-eyebrow::before, .p-eyebrow::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--accent);
}

.p-hero h1, .p-h1 {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -.028em;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 24px;
}
.p-hero h1 em, .p-h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.p-hero p, .p-lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 19px;
  line-height: 1.55;
  color: var(--grey-600);
  margin: 0 auto 36px;
  max-width: 720px;
}
.p-actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.p-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 999px;
  transition: background 200ms ease, transform 200ms ease, color 200ms ease, border-color 200ms ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.p-btn--primary { background: var(--accent); color: #ffffff; }
.p-btn--primary:hover { background: #1C9FE0; transform: translateY(-1px); color: #ffffff; }
.p-btn--ghost { background: transparent; color: var(--primary); border-color: var(--grey-200); }
.p-btn--ghost:hover { background: #FAFAF8; border-color: var(--primary); }
.p-btn--dark-ghost { background: transparent; color: #ffffff; border-color: rgba(255,255,255,.3); }
.p-btn--dark-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--accent); }
.p-btn svg { width: 14px; height: 14px; }

/* ============ Page Section ============ */
.p-section {
  padding: 96px 0;
  background: #ffffff;
}
.p-section--off { background: #FAFAF8; }
.p-section--navy {
  background: linear-gradient(155deg, #1B232B 0%, #11171C 100%);
  color: rgba(255,255,255,.85);
  position: relative;
  overflow: hidden;
}
.p-section--navy::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 80% 30%, rgba(53, 180, 242,.08), transparent 60%);
  pointer-events: none;
}
.p-section__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

/* Section header (2-col editorial) */
.p-sec-h {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 64px;
}
.p-sec-h__lhs { max-width: 540px; }
.p-sec-h__eb {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.p-sec-h__eb::before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--accent);
}
.p-sec-h__h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  font-weight: 600;
  color: var(--primary);
  margin: 0;
}
.p-section--navy .p-sec-h__h2 { color: #ffffff; }
.p-sec-h__lede {
  font-family: 'Inter', sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--grey-600);
  margin: 0;
}
.p-section--navy .p-sec-h__lede { color: rgba(255,255,255,.65); }

/* Centered variant */
.p-sec-h--c {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
  align-items: center;
}
.p-sec-h--c .p-sec-h__lhs { max-width: none; }
.p-sec-h--c .p-sec-h__eb { justify-content: center; }
.p-sec-h--c .p-sec-h__eb::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--accent);
}
.p-sec-h--c .p-sec-h__lede { margin-top: 18px; }

/* ============ Split (text + visual / sidebar) ============ */
.p-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: start;
}
.p-split--rev { grid-template-columns: 1fr 1.15fr; }
.p-split__text > p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--grey-600);
  margin: 0 0 18px;
}
.p-split__text > .p-quote {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--primary);
  margin: 0 0 28px;
  padding-left: 18px;
  border-left: 2px solid var(--accent);
}
.p-split__visual { display: flex; flex-direction: column; gap: 0; }

/* Sidebar list (e.g. "Standards we cover") */
.p-list {
  background: #FAFAF8;
  border: 1px solid var(--grey-100);
  border-radius: 4px;
  overflow: hidden;
}
.p-list__h {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 18px 24px;
  background: #ffffff;
  border-bottom: 1px solid var(--grey-100);
}
.p-list__item {
  padding: 16px 24px;
  border-bottom: 1px solid var(--grey-100);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 200ms ease;
}
.p-list__item:last-child { border-bottom: none; }
.p-list__item:hover { background: #ffffff; }
.p-list__t {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -.005em;
}
.p-list__d {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--grey-600);
}

/* ============ Stats Bar ============ */
.p-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(53, 180, 242,.35);
  border-bottom: 1px solid rgba(53, 180, 242,.35);
  padding: 48px 0;
}
.p-stats--3 { grid-template-columns: repeat(3, 1fr); }
.p-stat {
  text-align: center;
  padding: 0 24px;
  position: relative;
}
.p-stat + .p-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  height: 56px;
  margin-top: -28px;
  width: 1px;
  background: rgba(22,29,35,.10);
}
.p-section--navy .p-stat + .p-stat::before { background: rgba(255,255,255,.10); }
.p-stat__num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.6rem, 4.5vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--primary);
  margin-bottom: 12px;
}
.p-section--navy .p-stat__num { color: #ffffff; }
.p-stat__num span { color: var(--accent); font-weight: 500; }
.p-stat__label {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--grey-600);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.p-section--navy .p-stat__label { color: rgba(255,255,255,.55); }

/* ============ Card Grid (text-first, Deloitte) ============ */
.p-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--grey-100);
  border-top: 1px solid var(--grey-100);
  border-bottom: 1px solid var(--grey-100);
}
.p-grid--2 { grid-template-columns: repeat(2, 1fr); }
.p-card {
  background: #ffffff;
  padding: 40px 36px;
  position: relative;
  transition: background 220ms ease;
}
.p-card:hover { background: #FAFAF8; }
.p-card__num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.18em;
  margin-bottom: 18px;
  display: block;
}
.p-card__title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -.012em;
  line-height: 1.3;
  margin: 0 0 12px;
}
.p-card__desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey-600);
  margin: 0;
}

/* ============ Steps (numbered approach) ============ */
.p-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.p-steps--3 { grid-template-columns: repeat(3, 1fr); }
.p-step {
  padding: 32px 0 0;
  border-top: 2px solid var(--accent);
  position: relative;
}
.p-step__num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.18em;
  margin-bottom: 12px;
  display: block;
}
.p-step__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -.012em;
  margin: 0 0 12px;
}
.p-step__desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--grey-600);
  margin: 0;
}
.p-section--navy .p-step__title { color: #ffffff; }
.p-section--navy .p-step__desc { color: rgba(255,255,255,.6); }

/* ============ Pull Quote ============ */
.p-pullquote {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  padding: 0 32px;
}
.p-pullquote__mark {
  font-family: 'Space Grotesk', serif;
  font-size: 72px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: -10px;
  display: block;
  font-weight: 500;
}
.p-pullquote__text {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.4;
  letter-spacing: -.018em;
  font-weight: 500;
  color: var(--primary);
  margin: 0 0 28px;
}
.p-section--navy .p-pullquote__text { color: #ffffff; }
.p-pullquote__attr {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* ============ Related / Cross-sell ============ */
.p-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.p-related--2 { grid-template-columns: repeat(2, 1fr); }
.p-related__card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: #ffffff;
  border: 1px solid var(--grey-100);
  border-radius: 4px;
  text-decoration: none;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.p-related__card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  background: #FAFAF8;
}
.p-related__eb {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.p-related__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 8px;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.p-related__desc {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--grey-600);
  margin: 0 0 16px;
  flex: 1;
}
.p-related__link {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 200ms ease;
}
.p-related__card:hover .p-related__link { gap: 10px; }
.p-related__link svg { width: 12px; height: 12px; }

/* ============ Closing CTA ============ */
.p-cta {
  background: linear-gradient(155deg, #1B232B 0%, #11171C 100%);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.p-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 80% 50%, rgba(53, 180, 242,.14), transparent 60%);
}
.p-cta__container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
  position: relative;
}
.p-cta__eb {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: inline-block;
}
.p-cta__h {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -.022em;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 18px;
}
.p-cta__lede {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,.65);
  margin: 0 auto 36px;
  max-width: 640px;
}
.p-cta__actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============ Product Hero Mockup (Solutions) ============ */
.p-mockup {
  background: linear-gradient(155deg, #1B232B 0%, #11171C 100%);
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 24px 64px rgba(22,29,35,.18);
  border: 1px solid rgba(53, 180, 242,.18);
}
.p-mockup__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.p-mockup__dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
}
.p-mockup__title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.p-mockup__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.p-mockup__kpi {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  padding: 16px;
}
.p-mockup__kpi-label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  color: rgba(255,255,255,.4);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.p-mockup__kpi-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -.02em;
}
.p-mockup__kpi-value--gold { color: var(--accent); }
.p-mockup__kpi-value--green { color: #57C4FA; }
.p-mockup__kpi-meta {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  color: rgba(255,255,255,.3);
  margin-top: 4px;
}
.p-mockup__chart {
  background: rgba(255,255,255,.03);
  border-radius: 6px;
  padding: 18px;
}
.p-mockup__chart-h {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  color: rgba(255,255,255,.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.p-mockup__bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
}
.p-mockup__bars > div {
  flex: 1;
  background: rgba(53, 180, 242,.5);
  border-radius: 3px 3px 0 0;
}
.p-mockup__bar-labels {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.p-mockup__bar-labels > span {
  flex: 1;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,.3);
}

/* ============ Mobile ============ */
@media (max-width: 1024px) {
  .p-sec-h { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .p-split, .p-split--rev { grid-template-columns: 1fr; gap: 48px; }
  .p-grid, .p-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .p-steps, .p-steps--3 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .p-stats, .p-stats--3 { grid-template-columns: repeat(2, 1fr); gap: 32px 0; padding: 36px 0; }
  .p-stat + .p-stat::before { display: none; }
  .p-related, .p-related--2 { grid-template-columns: 1fr; }
  .p-mockup__kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .page-ribbon__inner { padding: 0 20px; }
  .page-ribbon__current { display: none; }
  .p-hero { padding: 56px 0 64px; }
  .p-hero__container { padding: 0 20px; }
  .p-section { padding: 64px 0; }
  .p-section__container { padding: 0 20px; }
  .p-grid, .p-grid--2 { grid-template-columns: 1fr; }
  .p-card { padding: 32px 24px; }
  .p-steps, .p-steps--3 { grid-template-columns: 1fr; }
  .p-cta { padding: 64px 0; }
  .p-cta__container { padding: 0 20px; }
}

/* ============================================================
   v30 — Insights system (index + article)
   Text-first editorial cards, no decorative graphics.
   Deloitte-style listing with featured + filter + grid.
   ============================================================ */

/* Filter pills bar — sticky just under nav, above content */
.ins-filter {
  background: #ffffff;
  border-bottom: 1px solid var(--grey-100);
  position: sticky;
  top: 112px;  /* 64 nav + 48 ribbon */
  z-index: 20;
}
.ins-filter__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  overflow-x: auto;
}
.ins-filter__label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-400);
  margin-right: 12px;
  white-space: nowrap;
}
.ins-filter__btn {
  background: transparent;
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--grey-600);
  cursor: pointer;
  transition: all 200ms ease;
  white-space: nowrap;
}
.ins-filter__btn:hover { color: var(--primary); border-color: var(--primary); }
.ins-filter__btn.is-active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

/* Featured editorial card — big, text-first */
.ins-featured {
  display: block;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(155deg, #1B232B 0%, #11171C 100%);
  position: relative;
  overflow: hidden;
  margin-bottom: 64px;
  transition: transform 220ms ease;
}
.ins-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 85% 20%, rgba(53, 180, 242,.16), transparent 60%);
  pointer-events: none;
}
.ins-featured:hover { transform: translateY(-2px); }
.ins-featured__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  padding: 64px 56px;
  align-items: end;
}
.ins-featured__lhs { max-width: 640px; }
.ins-featured__eb {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.ins-featured__eb::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.ins-featured__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.022em;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 20px;
}
.ins-featured__excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,.7);
  margin: 0 0 28px;
}
.ins-featured__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  font-weight: 500;
}
.ins-featured__meta-dot {
  width: 3px; height: 3px;
  background: rgba(255,255,255,.3);
  border-radius: 50%;
}
.ins-featured__rhs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ins-featured__tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--accent);
  padding: 6px 14px;
  border-radius: 3px;
  margin-bottom: 28px;
  align-self: flex-start;
}
.ins-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 8px;
  transition: gap 200ms ease;
}
.ins-featured:hover .ins-featured__cta { gap: 14px; }
.ins-featured__cta svg { width: 14px; height: 14px; }

/* Article tiles grid */
.ins-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--grey-100);
}
.ins-tile {
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
  background: #ffffff;
  border-right: 1px solid var(--grey-100);
  border-bottom: 1px solid var(--grey-100);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background 220ms ease;
  min-height: 340px;
}
.ins-tile:nth-child(3n) { border-right: none; }
.ins-tile:hover { background: #FAFAF8; }
.ins-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 280ms ease;
}
.ins-tile:hover::before { width: 100%; }

.ins-tile__tag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 24px;
  align-self: flex-start;
  padding-bottom: 4px;
  border-bottom: 1.5px solid currentColor;
}
.ins-tile__tag--ifrs   { color: var(--accent); }
.ins-tile__tag--esg    { color: #0B8AC9; }
.ins-tile__tag--tech   { color: #5B6FB8; }
.ins-tile__tag--tax    { color: #B85B5B; }
.ins-tile__tag--finance{ color: #B8893D; }

.ins-tile__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -.012em;
  line-height: 1.3;
  margin: 0 0 14px;
  transition: color 200ms ease;
}
.ins-tile:hover .ins-tile__title { color: var(--accent); }
.ins-tile__excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--grey-600);
  margin: 0 0 24px;
  flex: 1;
}
.ins-tile__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--grey-400);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--grey-100);
}
.ins-tile__meta-dot {
  width: 3px; height: 3px;
  background: var(--grey-300);
  border-radius: 50%;
}

/* ===== Article page (individual insight) ===== */
.ins-article {
  background: #ffffff;
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--grey-100);
}
.ins-article__container {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 32px;
}
.ins-article__tag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 3px;
  margin-bottom: 24px;
  color: var(--primary);
  background: var(--accent);
}
.ins-article__h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -.026em;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 28px;
  max-width: 820px;
}
.ins-article__byline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--grey-600);
}
.ins-article__byline strong { color: var(--primary); font-weight: 600; }
.ins-article__byline-dot {
  width: 3px; height: 3px;
  background: var(--grey-300);
  border-radius: 50%;
}

/* Article body */
.ins-body {
  padding: 80px 0 96px;
}
.ins-body__container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 80px;
  align-items: start;
}
.ins-body__article {
  max-width: 720px;
}
.ins-body__article > p {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 24px;
}
.ins-body__article > h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.65rem;
  line-height: 1.25;
  letter-spacing: -.018em;
  font-weight: 600;
  color: var(--primary);
  margin: 48px 0 18px;
}
.ins-body__article > h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin: 36px 0 14px;
  letter-spacing: -.012em;
}
.ins-body__article ul,
.ins-body__article ol {
  margin: 0 0 24px;
  padding-left: 24px;
}
.ins-body__article li {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 10px;
}
.ins-body__article strong { font-weight: 600; color: var(--primary); }

.ins-body__article .article-pullquote {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 24px;
  margin: 40px 0;
}
.ins-body__article .article-pullquote p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--primary);
  margin: 0;
}

/* Sidebar */
.ins-side {
  position: sticky;
  top: 130px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ins-side__card {
  background: #FAFAF8;
  border: 1px solid var(--grey-100);
  padding: 26px 24px;
  border-radius: 4px;
}
.ins-side__h {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--grey-100);
}
.ins-side__link {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid rgba(22,29,35,.06);
  line-height: 1.4;
  transition: color 200ms ease, padding-left 200ms ease;
}
.ins-side__link:last-child { border-bottom: none; }
.ins-side__link:hover { color: var(--accent); padding-left: 4px; }

.ins-side__cta {
  background: linear-gradient(155deg, #1B232B 0%, #11171C 100%);
  border: none;
  padding: 24px 22px;
  border-radius: 4px;
  color: rgba(255,255,255,.8);
}
.ins-side__cta-h {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 10px;
  line-height: 1.35;
}
.ins-side__cta-p {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.6);
  margin: 0 0 18px;
}
.ins-side__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
  background: var(--accent);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 3px;
  text-decoration: none;
  transition: background 200ms ease;
}
.ins-side__cta-btn:hover { background: #D9B833; color: #11171C; }

/* "More from Insights" related — uses ins-list pattern */
.ins-more {
  background: #FAFAF8;
  padding: 80px 0;
  border-top: 1px solid var(--grey-100);
}
.ins-more__h {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -.018em;
  margin: 0 0 8px;
}
.ins-more__eb {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.ins-more__eb::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--accent);
}

/* Mobile */
@media (max-width: 1024px) {
  .ins-featured__inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 36px; }
  .ins-list { grid-template-columns: repeat(2, 1fr); }
  .ins-tile:nth-child(3n) { border-right: 1px solid var(--grey-100); }
  .ins-tile:nth-child(2n) { border-right: none; }
  .ins-body__container { grid-template-columns: 1fr; gap: 56px; }
  .ins-side { position: static; }
}
@media (max-width: 640px) {
  .ins-filter { top: 64px; }
  .ins-filter__inner { padding: 14px 20px; }
  .ins-filter__label { display: none; }
  .ins-featured { margin-bottom: 32px; }
  .ins-featured__inner { padding: 36px 24px; gap: 24px; }
  .ins-list { grid-template-columns: 1fr; }
  .ins-tile { border-right: none !important; padding: 32px 20px; min-height: auto; }
  .ins-article { padding: 48px 0 36px; }
  .ins-article__container { padding: 0 20px; }
  .ins-body { padding: 56px 0 64px; }
  .ins-body__container { padding: 0 20px; gap: 40px; }
  .ins-body__article > p, .ins-body__article li { font-size: 16px; }
  .ins-more { padding: 56px 0; }
}

/* ============================================================
   v31 — Mobile responsiveness polish & fixes
   ============================================================ */

/* Global: kill any rogue horizontal scroll WITHOUT breaking position:sticky.
   `overflow-x: hidden` on html/body creates a scroll container that prevents
   descendants from sticking — use `overflow-x: clip` instead (modern browsers
   only; older browsers may show a horizontal scrollbar if some element overflows). */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* iOS Safari URL-bar — use dynamic viewport units for pin-stack */
@supports (height: 100dvh) {
  .pin-stack .hero,
  .pin-stack .manifesto,
  .manifesto__sticky {
    height: 100dvh;
  }
}

/* Make all dropdown content collapsed-by-default on tablet+mobile,
   reveal on .open (tap toggles via JS) — proper mobile mega-menu UX */
@media (max-width: 1024px) {
  .nav__dropdown {
    position: static !important;
    box-shadow: none !important;
    border-top: none !important;
    background: transparent !important;
    transform: none !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 320ms ease, opacity 200ms ease;
    padding: 0;
  }
  .nav__item.open .nav__dropdown {
    max-height: 2000px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* Chevron rotates when open on touch */
  .nav__item.open .nav__chevron { transform: rotate(180deg); }
}

/* ===== Insights filter: must sit below the ribbon on every breakpoint ===== */
@media (max-width: 640px) {
  .ins-filter { top: 112px; }  /* 64 nav + 48 ribbon — was wrongly set to 64 */
}

/* ===== Hero / heading floors on small screens ===== */
@media (max-width: 640px) {
  .p-hero h1, .p-h1 {
    font-size: clamp(1.85rem, 7vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -.022em;
  }
  .p-hero p, .p-lede { font-size: 16px; }
  .ins-article__h1 {
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    line-height: 1.15;
  }
  .ins-featured__title {
    font-size: clamp(1.35rem, 5.5vw, 1.8rem);
    line-height: 1.25;
  }
  .ins-featured__excerpt { font-size: 14px; }
  .p-cta__h { font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.2; }
  .p-cta__lede { font-size: 15px; }
  .p-sec-h__h2 { font-size: clamp(1.6rem, 5.5vw, 2.2rem); line-height: 1.18; }
}

/* Home hero: shrink the giant heading on phones */
@media (max-width: 640px) {
  .hero__heading {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 1.08;
  }
  .hero__subtext { font-size: 15px; }
}

/* ===== Eyebrow rules — shrink on tight viewports so they don't wrap ===== */
@media (max-width: 480px) {
  .p-eyebrow, .ins-featured__eb, .ins-more__eb, .p-sec-h__eb,
  .about__eyebrow, .contact__eyebrow, .p-cta__eb {
    font-size: 11px;
    letter-spacing: 0.16em;
    gap: 10px;
  }
  .p-eyebrow::before, .p-eyebrow::after,
  .p-sec-h__eb::before, .p-sec-h--c .p-sec-h__eb::after,
  .ins-featured__eb::before, .ins-more__eb::before {
    width: 18px;
  }
}

/* ===== Page hero crumbs: wrap to centered ===== */
@media (max-width: 640px) {
  .p-crumbs {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 22px;
    row-gap: 6px;
  }
}

/* ===== Product Mockup on solution pages ===== */
@media (max-width: 640px) {
  .p-mockup { padding: 18px; border-radius: 6px; }
  .p-mockup__bar { margin-bottom: 16px; }
  .p-mockup__title { font-size: 10px; }
  .p-mockup__kpis { gap: 8px; }
  .p-mockup__kpi { padding: 12px 10px; }
  .p-mockup__kpi-label { font-size: 9.5px; }
  .p-mockup__kpi-value { font-size: 17px; }
  .p-mockup__kpi-meta { font-size: 9.5px; }
  .p-mockup__chart { padding: 14px; }
  .p-mockup__chart-h { font-size: 9.5px; margin-bottom: 10px; }
  .p-mockup__bars { height: 56px; gap: 4px; }
  .p-mockup__bar-labels { gap: 4px; }
  .p-mockup__bar-labels > span { font-size: 9px; }
}

/* ===== Contact form: bigger tap targets ===== */
@media (max-width: 640px) {
  .contact__form input,
  .contact__form textarea {
    padding: 14px 0;
    min-height: 48px;
    font-size: 16px;  /* prevents iOS auto-zoom on focus */
  }
  .contact__form label { font-size: 12px; }
  .contact__submit { padding: 14px 28px; min-height: 48px; }
}

/* ===== p-related & p-grid: better tablet behaviour ===== */
@media (max-width: 1024px) {
  .p-related, .p-related--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .p-related, .p-related--2 { grid-template-columns: 1fr; }
  .p-related__card { padding: 24px 22px; }
}

/* ===== Ins-tile: kill phantom right border on last child (2-col layout) ===== */
@media (min-width: 641px) and (max-width: 1024px) {
  .ins-tile:last-child { border-right: none; }
}

/* ===== Filter pills: compact on phones, less padding ===== */
@media (max-width: 640px) {
  .ins-filter__inner { padding: 12px 16px; gap: 6px; }
  .ins-filter__btn { padding: 6px 12px; font-size: 12px; }
}

/* ===== Article body: comfortable reading on phones ===== */
@media (max-width: 640px) {
  .ins-body__article > p,
  .ins-body__article li { font-size: 15.5px; line-height: 1.7; }
  .ins-body__article > h2 { font-size: 1.35rem; margin: 36px 0 14px; line-height: 1.25; }
  .ins-body__article > h3 { font-size: 1.1rem; margin: 28px 0 12px; }
  .ins-body__article .article-pullquote { margin: 28px 0; padding-left: 18px; }
  .ins-body__article .article-pullquote p { font-size: 1.1rem; }
}

/* ===== Trust-bar: slow the marquee on small screens so it's readable ===== */
@media (max-width: 640px) {
  .trust-bar__items { animation-duration: 50s; }
}

/* ===== Section padding compression on very small screens ===== */
@media (max-width: 480px) {
  .p-section { padding: 56px 0; }
  .p-hero { padding: 48px 0 56px; }
  .p-cta { padding: 56px 0; }
  .ins-body { padding: 48px 0 56px; }
  .ins-article { padding: 36px 0 32px; }
}

/* ===== Page ribbon on mobile: tighter, label only ===== */
@media (max-width: 640px) {
  .page-ribbon { height: 44px; }
  .page-ribbon__label { font-size: 13px; }
  /* current page name already hidden via existing rule */
}

/* ===== Service/Solution sticky ribbons: tighter on mobile ===== */
@media (max-width: 640px) {
  .services__ribbon, .solutions__ribbon, .insights__ribbon,
  .about__ribbon, .contact__ribbon { height: 44px; }
  .services__ribbon-label, .solutions__ribbon-label, .insights__ribbon-label,
  .about__ribbon-label, .contact__ribbon-label { font-size: 13px; }
}

/* ===== Header offset adjustment for shorter ribbon ===== */
@media (max-width: 640px) {
  .services__ribbon, .solutions__ribbon, .insights__ribbon,
  .about__ribbon, .contact__ribbon, .page-ribbon { top: 64px; }
  /* Insights filter sits below 44px ribbon on mobile */
  .ins-filter { top: 108px; }  /* 64 + 44 */
}

/* ===== Footer: tighter on phone, single column at very small ===== */
@media (max-width: 640px) {
  .footer__top { gap: 40px; padding: 56px 0 36px; }
  .footer__brand .logo-img { height: 26px; }
}
@media (max-width: 480px) {
  .footer__links { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== Page split: tighter gap on mobile ===== */
@media (max-width: 640px) {
  .p-split, .p-split--rev { gap: 36px; }
  .p-split__text > .p-quote { font-size: 1.15rem; padding-left: 14px; }
  .p-split__text > p { font-size: 15px; line-height: 1.75; }
  .p-list__h { padding: 14px 18px; font-size: 10.5px; }
  .p-list__item { padding: 14px 18px; }
}

/* ===== Stats bar: cleaner stacking on phones ===== */
@media (max-width: 640px) {
  .p-stats, .p-stats--3 {
    grid-template-columns: 1fr 1fr;
    gap: 28px 0;
    padding: 28px 0;
  }
  .p-stat__num { font-size: clamp(1.9rem, 7vw, 2.4rem); }
  .p-stat__label { font-size: 10.5px; letter-spacing: 0.1em; }
}

/* ===== Featured insight card: tighter on phones ===== */
@media (max-width: 640px) {
  .ins-featured__inner { padding: 28px 22px; }
  .ins-featured__eb { font-size: 10.5px; margin-bottom: 18px; }
  .ins-featured__tag { font-size: 10px; padding: 5px 12px; margin-bottom: 20px; }
  .ins-featured__meta { font-size: 10.5px; gap: 10px; flex-wrap: wrap; }
}

/* ===== Nav: tighter container on mobile ===== */
@media (max-width: 640px) {
  .nav__logo .logo-img { height: 24px; }
}

/* ===== Hero CTA buttons: stack on phone ===== */
@media (max-width: 480px) {
  .p-actions, .p-cta__actions { flex-direction: column; width: 100%; align-items: stretch; }
  .p-actions .p-btn, .p-cta__actions .p-btn {
    justify-content: center;
    width: 100%;
  }
}

/* ===== About section: tighter pillars stack ===== */
@media (max-width: 640px) {
  .about__heading { font-size: clamp(1.7rem, 6vw, 2.4rem); }
  .contact__heading { font-size: clamp(1.7rem, 6vw, 2.4rem); }
  .about__quote { font-size: 1.15rem; padding-left: 14px; }
  .contact__intro { font-size: 15px; }
}

/* ===== Solution feature visual: cap image height to prevent towering ===== */
@media (max-width: 640px) {
  .feature-art img,
  .solution-screenshot img { max-height: 280px; object-fit: contain; }
}

/* ===== Contact form honeypot — hidden from real users, only bots fill it ===== */
.form__honey {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Contact form success / error states */
.contact__submit.is-ok    { background: #0A6FBE !important; border-color: #0A6FBE !important; color: #fff !important; }
.contact__submit.is-error { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important; }
.contact__note.is-error   { color: #b91c1c; }
.contact__note.is-ok      { color: #0A6FBE; }

/* ============================================================
   v32 — Search modal + mobile menu overhaul
   ============================================================ */

/* ============ Search modal ============ */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 88px 24px 24px;
}
.search-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.search-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 17, 24, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.search-modal__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  border: 1px solid rgba(53, 180, 242, 0.2);
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease;
}
.search-modal.is-open .search-modal__panel {
  transform: translateY(0);
  opacity: 1;
}
.search-modal__top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--grey-100);
  flex-shrink: 0;
}
.search-modal__icon {
  width: 18px;
  height: 18px;
  color: var(--grey-400);
  flex-shrink: 0;
}
.search-modal__top input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--primary);
  padding: 6px 0;
  -webkit-appearance: none;
  appearance: none;
}
.search-modal__top input::placeholder { color: var(--grey-400); }
.search-modal__top input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-modal__close {
  background: transparent;
  border: 1px solid var(--grey-200);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--grey-600);
  transition: all 180ms ease;
  flex-shrink: 0;
}
.search-modal__close:hover { color: var(--primary); border-color: var(--primary); }
.search-modal__close svg { width: 14px; height: 14px; }

.search-modal__hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--grey-400);
  letter-spacing: 0.04em;
}
.search-chip {
  background: var(--off-white, #FAFAF8);
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  transition: all 180ms ease;
}
.search-chip:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); }

.search-modal__results {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 12px;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  text-decoration: none;
  color: inherit;
  transition: background 160ms ease;
  border-bottom: 1px solid rgba(22, 29, 35, 0.04);
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--off-white, #FAFAF8); }
.search-result__type {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(53, 180, 242, 0.1);
  padding: 4px 8px;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 60px;
  text-align: center;
}
.search-result__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.search-result__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -.01em;
  line-height: 1.3;
}
.search-result__desc {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--grey-600);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.search-result__arrow {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 160ms ease, transform 160ms ease;
}
.search-result:hover .search-result__arrow { opacity: 1; transform: translateX(2px); }
.search-result mark {
  background: rgba(53, 180, 242, 0.22);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}
.search-empty {
  padding: 32px 20px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--grey-600);
}

/* Mobile tweaks for search modal */
@media (max-width: 640px) {
  .search-modal { padding: 60px 12px 12px; }
  .search-modal__panel { max-height: calc(100vh - 80px); border-radius: 10px; }
  .search-modal__top { padding: 14px 16px; }
  .search-modal__top input { font-size: 16px; /* prevents iOS auto-zoom */ }
  .search-modal__hint { padding: 12px 16px 16px; }
  .search-result { padding: 12px 16px; gap: 10px; }
  .search-result__type { min-width: 52px; padding: 3px 6px; font-size: 9.5px; }
  .search-result__title { font-size: 13.5px; }
  .search-result__desc { font-size: 11.5px; }
}

/* ============ Mobile menu overhaul ============ */

/* Tablet (769-1024): tighter spacing for the contact icon
   (Desktop search is hidden via the v33 rule below; nav__icons itself stays
   visible at tablet so the contact icon shows, hidden at ≤768px via v33.) */
@media (max-width: 1024px) {
  .nav__icons {
    gap: 0;
    margin-left: 0;
    margin-right: 8px;
  }
}

/* Mobile drawer styling */
@media (max-width: 768px) {
  .nav__links {
    top: 64px;
    background: rgba(22, 29, 35, 0.985);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 14px 12px 28px;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav__item { width: 100%; display: block; }

  /* Top-level link / dropdown button on mobile */
  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 14px 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
    border: 0;
    text-align: left;
    border-radius: 8px;
    display: flex;
    align-items: center;
  }
  .nav__link:hover, .nav__link:focus {
    background: rgba(255, 255, 255, 0.05) !important;
  }
  .nav__chevron {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    flex-shrink: 0;
    transition: transform 240ms ease;
  }

  /* New dropdown structure styles for mobile drawer */
  .nav__mega { padding: 4px 0 8px; }
  .nav__mega-cols {
    display: block;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  .nav__mega-col { padding: 0; margin: 0; }
  .nav__mega-h {
    padding: 10px 16px 6px;
    margin: 8px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(53, 180, 242, 0.9);
    border-bottom: none;
  }
  .nav__mega-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav__mega-list li {
    width: 100%;
    list-style: none;
    margin: 0;
  }
  .nav__mega-list a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 6px;
    color: inherit;
  }
  .nav__mega-list a:hover,
  .nav__mega-list a:focus {
    background: rgba(53, 180, 242, 0.08);
  }
  .nav__mega-t {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -.005em;
  }
  .nav__mega-d {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.45;
  }

  /* Hide featured panel + footer bar inside mobile drawer */
  .nav__mega-feat,
  .nav__mega-foot { display: none !important; }

  /* Hide all OLD dropdown class names in case any remain */
  .nav__mega-inner,
  .nav__mega-grid,
  .nav__mega-item,
  .nav__mega-name,
  .nav__mega-desc,
  .nav__mega-features,
  .nav__mega-tag,
  .nav__mega-icon,
  .nav__mega-label,
  .nav__mega-panel,
  .nav__mega-bar,
  .nav__mega-sublabel { display: none !important; }

  /* Open state chevron flip */
  .nav__item.open > .nav__link .nav__chevron { transform: rotate(180deg); }

  /* Hide the desktop-only mega-menu rule about full-viewport pos */
  .nav__dropdown {
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02) !important;
  }
  .nav__item.open .nav__dropdown { background: rgba(255, 255, 255, 0.03) !important; }

  /* Visible search inside drawer (in addition to nav icon) — bottom anchor */
  .nav__icon[aria-label="Search"] {
    width: 36px;
    height: 36px;
  }
}

/* Hamburger button — tighter spacing + clean style */
@media (max-width: 1024px) {
  .nav__hamburger {
    display: flex !important;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    gap: 4px;
    flex-direction: column;
    margin-left: 4px;
  }
  .nav__hamburger span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 240ms ease;
  }
  .nav__hamburger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav__hamburger.open span:nth-child(2) { opacity: 0; }
  .nav__hamburger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
}

/* ============================================================
   v33 — Inline header search (collapsible icon → expanding strip)
   ============================================================ */

/* Old modal — fully hidden / unused now */
.search-modal { display: none !important; }

/* Search root container */
.nav__search {
  position: relative;
  display: flex;
  align-items: center;
}

/* ---- DESKTOP: collapsed icon by default, expands on .is-expanded ---- */
.nav__search--desktop {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  /* No overflow: hidden — would clip the dropdown panel.
     Input + close button collapse to zero width instead (see rules below). */
  transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background 220ms ease,
              border-color 220ms ease;
}

/* The toggle button (initial icon) */
.nav__search-toggle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  padding: 0;
  transition: color 180ms ease, background 180ms ease;
}
.nav__search-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}
.nav__search:not(.is-expanded) .nav__search-toggle:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

/* Input — hidden in collapsed state */
.nav__search-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  width: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.nav__search-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.nav__search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.nav__search-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* Close (X) button — collapsed to zero width by default, expands when search opens */
.nav__search-close {
  width: 0;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: width 240ms ease, margin 240ms ease,
              opacity 200ms ease, visibility 200ms ease,
              background 180ms ease;
}
.nav__search-close:hover { background: rgba(53, 180, 242, 0.5); color: #ffffff; }
.nav__search-close svg { width: 11px; height: 11px; display: block; flex-shrink: 0; }

/* ---- EXPANDED state ---- */
.nav__search--desktop.is-expanded {
  width: 320px;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(53, 180, 242, 0.35);
  padding-right: 0;
}
.nav__search--desktop.is-expanded .nav__search-toggle {
  cursor: default;
  color: rgba(255, 255, 255, 0.55);
}
.nav__search--desktop.is-expanded .nav__search-toggle:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
}
.nav__search--desktop.is-expanded .nav__search-input {
  width: auto;
  opacity: 1;
  pointer-events: auto;
  padding: 0 6px 0 2px;
}
.nav__search--desktop.is-expanded .nav__search-close {
  width: 26px;
  margin-right: 5px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Results dropdown */
.nav__search-results {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 400px;
  max-width: calc(100vw - 32px);
  max-height: min(460px, calc(100vh - 100px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  border: 1px solid rgba(53, 180, 242, 0.22);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  z-index: 220;
  padding: 6px;
}
.nav__search.is-open .nav__search-results {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__search-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 10px;
}
.nav__search-hint-label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-400);
  margin-right: 4px;
}
.nav__search-chip {
  background: var(--off-white, #FAFAF8);
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  padding: 5px 11px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  transition: all 160ms ease;
}
.nav__search-chip:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.nav__search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  transition: background 160ms ease;
}
.nav__search-result + .nav__search-result { margin-top: 2px; }
.nav__search-result:hover { background: var(--off-white, #FAFAF8); }

.nav__search-result__type {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(53, 180, 242, 0.1);
  padding: 3px 7px;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 56px;
  text-align: center;
}
.nav__search-result__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.nav__search-result__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -.008em;
  line-height: 1.3;
}
.nav__search-result__desc {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--grey-600);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.nav__search-result__arrow {
  width: 12px;
  height: 12px;
  color: var(--accent);
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 160ms ease, transform 160ms ease;
}
.nav__search-result:hover .nav__search-result__arrow { opacity: 1; transform: translateX(2px); }
.nav__search-result mark {
  background: rgba(53, 180, 242, 0.22);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}
.nav__search-empty {
  padding: 24px 16px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--grey-600);
}

/* Mobile drawer search lives inside nav__links; hide desktop search on phone */
.nav__mobile-search-wrap { display: none; }

/* Phone (≤768px): hide the entire nav__icons row.
   Drawer has its own search; contact still reachable from drawer + footer. */
@media (max-width: 768px) {
  .nav__icons { display: none !important; }
}

@media (max-width: 1024px) {
  /* Tablet & phone: hide the desktop pill search entirely.
     !important to defend against older cascade layers and inline display:flex. */
  .nav__search--desktop { display: none !important; }
  .nav__mobile-search-wrap {
    display: block;
    list-style: none;
    margin: 4px 0 12px;
    padding: 0 4px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Mobile search bar — always shown, never collapses */
  .nav__search--mobile {
    position: relative;
    width: 100%;
    height: 44px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    overflow: visible;
    padding: 0 4px 0 0;
  }
  /* Toggle button on mobile is just a decorative icon (non-clickable focus-wise) */
  .nav__search--mobile .nav__search-toggle {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    cursor: text;
    pointer-events: none;
  }
  .nav__search--mobile .nav__search-toggle svg { width: 16px; height: 16px; }
  /* Input always visible on mobile */
  .nav__search--mobile .nav__search-input {
    width: auto;
    flex: 1;
    opacity: 1;
    pointer-events: auto;
    font-size: 15px;
    padding: 0 4px;
  }
  .nav__search--mobile .nav__search-close {
    width: 30px;
    height: 30px;
    margin-right: 4px;
  }
  .nav__search--mobile .nav__search-close svg { width: 12px; height: 12px; }
  /* Show close button only when there's a value */
  .nav__search--mobile.has-value .nav__search-close {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Results drop below the bar as an overlay (kept out of the flex row so the
     input can fill its width — a `static` results div was squishing it to 8px). */
  .nav__search--mobile .nav__search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    background: #10161E;
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    max-height: 60vh;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    z-index: 240;
  }
  .nav__search--mobile.is-open .nav__search-results { transform: translateY(0); }
  .nav__search--mobile .nav__search-result { padding: 12px; }
  .nav__search--mobile .nav__search-result:hover { background: rgba(255, 255, 255, 0.05); }
  .nav__search--mobile .nav__search-result__type {
    background: rgba(53, 180, 242, 0.18);
  }
  .nav__search--mobile .nav__search-result__title { color: #ffffff; }
  .nav__search--mobile .nav__search-result__desc { color: rgba(255, 255, 255, 0.55); }
  .nav__search--mobile .nav__search-empty { color: rgba(255, 255, 255, 0.6); }
  .nav__search--mobile .nav__search-result__arrow { color: var(--accent); }
}


/* ── Finspera 21 · re-theme overrides ───────────────────────── */
:root { --accent-ink: #0B8AC9; }         /* deeper blue for small text on white */
.section-label:not(.section-label--light),
.p-eyebrow, .p-sec-h__eb, .p-cta__eb,
.feature-label, .ins-featured__eb, .ins-more__eb,
.services__ribbon-label, .solutions__ribbon-label, .insights__ribbon-label,
.about__ribbon-label, .contact__ribbon-label, .page-ribbon__label,
.svc-card__link, .feature-link, .p-related__link {
  color: var(--accent-ink);
}
/* selection + focus rings in brand blue */
::selection { background: rgba(53, 180, 242,.22); }


/* ── Finspera 21 · contrast fixes (post-recolor review) ── */
.p-btn--primary{ color:var(--primary); }
.p-btn--primary:hover{ color:var(--primary); }
.search-chip:hover{ color:var(--primary); border-color:var(--accent); }
.ins-tile__tag--ifrs{ color:var(--accent-ink); }
.ins-tile:hover .ins-tile__title{ color:var(--accent-ink); }
.p-stat__num span{ color:var(--accent-ink); }
.p-section--navy .p-stat__num span{ color:var(--accent-bright); }


/* ── Finspera 21 · hero image + ribbon/cta contrast fixes ── */
.hero__bg{
  display:block !important;
  background:
    radial-gradient(58% 78% at 76% 46%, rgba(28, 159, 224,.20), transparent 62%),
    linear-gradient(90deg, #0A1019 0%, #0B1320 52%, #091019 100%) !important;
}
.hero__bg::before, .hero__bg::after{ display:none !important; }
.hero__visual{ display:none !important; }   /* replaced by the animated .hero__motion graphic */
@media (max-width:768px){
  .hero__bg{
    background:
      radial-gradient(90% 55% at 62% 26%, rgba(28, 159, 224,.16), transparent 60%),
      linear-gradient(180deg, #0A1019 0%, #0B1320 100%) !important;
  }
}
/* Ribbon labels sit on the azure ribbon → dark navy so they're legible (were invisible) */
.services__ribbon-label, .solutions__ribbon-label, .insights__ribbon-label,
.about__ribbon-label, .contact__ribbon-label,
.page-ribbon__label, .page-ribbon__current, .page-ribbon__sep{
  color: var(--primary);
}
/* Closing CTA eyebrow sits on a dark panel → bright accent */
.p-cta__eb{ color: var(--accent-bright); }


/* ── Finspera 21 · wider layout + ribbon legibility (requested) ── */
:root{ --max-w: 1400px; }
.container, .nav__container,
.hero__container, .hero__stats-inner,
.services__container, .solutions__container, .insights__container, .about__container, .contact__container,
.services__ribbon-inner, .solutions__ribbon-inner, .insights__ribbon-inner, .about__ribbon-inner, .contact__ribbon-inner,
.p-section__container, .p-hero__container, .page-ribbon__inner,
.ins-body__container, .ins-article__container{
  max-width: 1400px;
}
/* Ribbon: deeper blue bar with WHITE BOLD labels (clearly legible) */
.services__ribbon, .insights__ribbon, .about__ribbon, .contact__ribbon, .page-ribbon{
  background: #00569E !important;
}
.services__ribbon-label, .insights__ribbon-label, .about__ribbon-label,
.contact__ribbon-label, .page-ribbon__label, .page-ribbon__current{
  color:#ffffff !important; font-weight:700 !important; letter-spacing:.02em;
}
.page-ribbon__sep{ color:rgba(255,255,255,.55) !important; }


/* ── Finspera 21 · modern polish (same logo blues, more contemporary) ── */
.btn--primary, .p-btn--primary, .contact__submit, .about__cta-btn, .ins-side__cta-btn, .nav__mega-foot-cta{
  background-image: linear-gradient(135deg,#0B8AC9 0%,#00569E 100%) !important;
  color:#ffffff !important; border-color:transparent !important;
}
.btn--primary:hover, .p-btn--primary:hover, .contact__submit:hover, .about__cta-btn:hover, .ins-side__cta-btn:hover{
  background-image: linear-gradient(135deg,#0F86CC 0%,#0B8AC9 100%) !important;
  box-shadow: 0 12px 30px -8px rgba(0, 86, 158,.55) !important;
  transform: translateY(-1px);
}
.btn--primary svg, .p-btn--primary svg, .contact__submit svg{ color:#fff; }
/* accent word in the hero — bright blue gradient text for a modern lift on the dark hero */
.hero__heading em{
  background: linear-gradient(100deg,#7FD2FF 0%,#2AA8F0 55%,#35B4F2 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#2AA8F0;
}
/* social icons: subtle brand-blue hover */
.footer__socials a{ transition:color .2s, transform .2s; }
.footer__socials a:hover{ color:#57C4FA; transform:translateY(-2px); }


/* ── IFRS 9 ECL solution — flow diagrams, formula, callouts ── */
.ecl-flow{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:stretch; margin-top:12px; }
.ecl-flow__step{ position:relative; padding:26px 22px; background:#fff; border:1px solid #E7ECEE; border-radius:14px; box-shadow:0 1px 2px rgba(22,29,35,.05); }
.ecl-flow__step:not(:last-child){ margin-right:34px; }
.ecl-flow__step:not(:last-child)::after{ content:''; position:absolute; right:-31px; top:50%; transform:translateY(-50%); width:22px; height:2px; background:#00569E; }
.ecl-flow__step:not(:last-child)::before{ content:''; position:absolute; right:-34px; top:50%; transform:translateY(-50%); width:0;height:0; border-left:9px solid #00569E; border-top:6px solid transparent; border-bottom:6px solid transparent; z-index:2; }
.ecl-flow__n{ display:inline-flex; align-items:center; justify-content:center; width:36px;height:36px; border-radius:10px; background:linear-gradient(135deg,#0B8AC9,#00569E); color:#fff; font-weight:700; font-size:15px; margin-bottom:14px; }
.ecl-flow__step h4{ font-family:var(--font-serif); font-size:1.04rem; color:var(--primary); margin-bottom:7px; line-height:1.2; }
.ecl-flow__step p{ font-size:13.5px; color:var(--grey-600); line-height:1.55; }
@media (max-width:900px){
  .ecl-flow{ grid-auto-flow:row; grid-auto-columns:auto; gap:40px; }
  .ecl-flow__step:not(:last-child){ margin-right:0; }
  .ecl-flow__step:not(:last-child)::after{ left:32px; right:auto; top:auto; bottom:-30px; transform:none; width:2px; height:18px; }
  .ecl-flow__step:not(:last-child)::before{ left:26px; right:auto; top:auto; bottom:-34px; transform:none; border-left:6px solid transparent; border-right:6px solid transparent; border-top:9px solid #00569E; border-bottom:0; }
}
/* stage model */
.ecl-stages{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:12px; }
.ecl-stage{ border-radius:16px; padding:28px 26px; color:#fff; position:relative; overflow:hidden; }
.ecl-stage--1{ background:linear-gradient(150deg,#0F86CC,#0B8AC9); }
.ecl-stage--2{ background:linear-gradient(150deg,#0B8AC9,#00569E); }
.ecl-stage--3{ background:linear-gradient(150deg,#00447E,#08243E); }
.ecl-stage__tag{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.ecl-stage__h{ font-family:var(--font-serif); font-size:1.5rem; margin:8px 0 4px; }
.ecl-stage__ecl{ font-size:13px; font-weight:600; background:rgba(255,255,255,.16); display:inline-block; padding:4px 12px; border-radius:100px; margin-bottom:14px; }
.ecl-stage p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.82); }
.ecl-stage__trigger{ margin-top:16px; font-size:12.5px; color:rgba(255,255,255,.7); border-top:1px solid rgba(255,255,255,.16); padding-top:12px; }
@media (max-width:800px){ .ecl-stages{ grid-template-columns:1fr; } }
/* ECL formula strip */
.ecl-formula{ background:linear-gradient(135deg,#071627,#08243E); border-radius:16px; padding:38px 32px; text-align:center; color:#fff; }
.ecl-formula__eq{ font-family:var(--font-serif); font-size:clamp(1.3rem,3vw,2rem); letter-spacing:.01em; }
.ecl-formula__eq b{ color:#7FD2FF; font-weight:600; }
.ecl-formula__note{ margin-top:16px; font-size:14px; color:rgba(255,255,255,.6); max-width:680px; margin-inline:auto; }
/* dark section wrapper for flows on navy */
.ecl-band{ background:var(--off-white); }


/* ── FAQ items (solution + service pages) ── */
.faq-item{ padding:24px 0; border-top:1px solid #E7ECEE; }
.faq-item:first-child{ border-top:0; padding-top:6px; }
.faq-item:last-child{ border-bottom:1px solid #E7ECEE; padding-bottom:28px; }
.faq-item h3{ font-family:var(--font-serif); font-size:1.14rem; color:var(--primary); margin-bottom:10px; line-height:1.3; }
.faq-item p{ font-size:15px; color:var(--grey-600); line-height:1.72; }

/* ── Solutions ribbon — match the other deep-blue ribbons ── */
.solutions__ribbon{ background:#00569E !important; }
.solutions__ribbon-label{ color:#ffffff !important; font-weight:700 !important; letter-spacing:.02em; }

/* ── ECL solution page — extra mobile polish ── */
@media (max-width:768px){
  .ecl-formula{ padding:28px 20px; }
  .ecl-formula__eq{ font-size:1.15rem; line-height:1.4; }
  .ecl-formula__note{ font-size:13px; }
  .ecl-module__content h2, .ecl-enterprise__content h2{ font-size:1.5rem; line-height:1.2; }
  .ecl-stats-bar__inner{ flex-wrap:wrap; gap:16px 26px; }
  .ecl-stat{ min-width:44%; }
  .screen-frame__img{ width:100%; height:auto; }
}
@media (max-width:600px){
  .container{ padding:0 20px; }
  .ecl-flow__step{ padding:20px 18px; }
  .ecl-stage{ padding:24px 20px; }
  .ecl-hero h1{ font-size:1.9rem; }
  .p-cta__h, .p-sec-h__h2, .section-title{ font-size:clamp(1.55rem,7vw,2rem); }
  .faq-item h3{ font-size:1.05rem; }
}

/* ── Solution page: align .container to the site-standard inner column ──
   Every other inner page (services/insights/about/contact/articles) insets both
   its content and its sticky ribbon at 32px (→20px ≤640). The hand-built solution
   page used the wider 40px .container for its hero and most sections, so the
   page-ribbon "Solutions" label sat 8px inside of (misaligned with) the hero and
   content beneath it. Scoping .container to 32/20 here makes the ribbon, hero and
   every section share one left edge — matching every other ribbon on the site. */
.page-solution .container{ padding:0 32px; }
@media (max-width:640px){ .page-solution .container{ padding:0 20px; } }


/* ============================================================
   Finspera 21 · MOTION + MODERN POLISH (2026 refresh)
   ============================================================ */

/* ── Scroll reveal ──────────────────────────────────────────
   Content is fully visible without JS. Only once JS confirms motion
   is wanted (adds html.reveal-ready) do elements start hidden and rise
   in. Never hidden when the user prefers reduced motion. */
@media (prefers-reduced-motion: no-preference){
  html.reveal-ready .reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .74s cubic-bezier(.16,.82,.30,1),
               transform .74s cubic-bezier(.16,.82,.30,1);
    will-change:opacity, transform;
  }
  html.reveal-ready .reveal.visible{ opacity:1; transform:none; }
}

/* ── Micro-interactions ─────────────────────────────────────*/
/* Service cards: firmer lift + brand-blue shadow + growing top accent */
.svc-card{ position:relative; overflow:hidden; transition:transform .4s cubic-bezier(.16,.82,.3,1), box-shadow .4s ease; }
.svc-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#35B4F2,#00569E);
  transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.16,.82,.3,1);
}
.svc-card:hover{ transform:translateY(-7px); box-shadow:0 26px 50px -24px rgba(0, 86, 158,.45); }
.svc-card:hover::before{ transform:scaleX(1); }
.svc-card:hover .svc-card__num{ color:var(--accent-ink); }

/* Insight cards: same language */
.ins-card{ position:relative; overflow:hidden; transition:transform .4s cubic-bezier(.16,.82,.3,1), box-shadow .4s ease, border-color .3s ease; }
.ins-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#35B4F2,#00569E);
  transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.16,.82,.3,1);
}
.ins-card:hover{ transform:translateY(-7px); box-shadow:0 26px 50px -24px rgba(0, 86, 158,.4); border-color:rgba(53, 180, 242,.35); }
.ins-card:hover::before{ transform:scaleX(1); }
.ins-card:hover .ins-card__title{ color:var(--accent-ink); }
.ins-card__title{ transition:color .3s ease; }
.ins-card__arrow{ display:inline-block; transition:transform .3s ease; }
.ins-card:hover .ins-card__arrow{ transform:translateX(5px); }

/* Arrow nudges on text links + view-all */
.feature-link svg, .insights__viewall svg, .about__cta-btn svg{ transition:transform .3s ease; }
.feature-link:hover svg, .insights__viewall:hover svg, .about__cta-btn:hover svg{ transform:translateX(5px); }

/* Featured / solution image: gentle zoom on hover */
.solutions__feature-visual{ overflow:hidden; border-radius:14px; }
.solutions__feature-visual .feature-art{ transition:transform .7s cubic-bezier(.16,.82,.3,1); display:block; }
.solutions__feature:hover .feature-art{ transform:scale(1.04); }

/* Primary buttons: light sheen sweep on hover */
.btn--primary, .p-btn--primary, .about__cta-btn{ position:relative; overflow:hidden; }
.btn--primary::after, .p-btn--primary::after, .about__cta-btn::after{
  content:''; position:absolute; top:0; left:-140%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg); transition:left .6s ease; pointer-events:none;
}
.btn--primary:hover::after, .p-btn--primary:hover::after, .about__cta-btn:hover::after{ left:150%; }

/* Trust-bar marquee: soft fade at both edges (modern) */
.trust-bar{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }

/* Hero gradient word: slow living shimmer (decorative, cannot hide text) */
@media (prefers-reduced-motion: no-preference){
  .hero__heading em{ background-size:200% auto; animation:fs-shimmer 7s ease-in-out infinite; }
}
@keyframes fs-shimmer{ 0%,100%{ background-position:0% center } 50%{ background-position:100% center } }


/* ============================================================
   NEW HOME SECTIONS — shared shell
   ============================================================ */
.home-sec{ background:#ffffff; }
.home-sec--tint{ background:var(--off-white); }
.home-sec__container{ max-width:1400px; margin:0 auto; padding:96px 32px 104px; }
.home-sec__head{ max-width:760px; margin:0 auto 60px; text-align:center; }
/* Sticky section ribbon — same behaviour as Services/Solutions/Insights ribbons */
.home-ribbon{ background:#00569E; height:48px; display:flex; align-items:center; position:sticky; top:64px; z-index:30; }
.home-ribbon__inner{ max-width:1400px; width:100%; margin:0 auto; padding:0 32px; }
.home-ribbon__label{ color:#ffffff; font-family:'Inter',system-ui,sans-serif; font-size:14px; font-weight:700; letter-spacing:.02em; }
.home-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Inter',system-ui,sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:18px;
}
.home-eyebrow::before{ content:''; width:26px; height:2px; background:linear-gradient(90deg,#35B4F2,#00569E); border-radius:2px; }
.home-sec__heading{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  font-size:clamp(2rem,3.6vw,2.75rem); font-weight:600; letter-spacing:-.022em;
  line-height:1.15; color:var(--primary); margin:0 0 18px;
}
.home-sec__lede{ font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.6; color:var(--grey-600); margin:0; }

/* ── Why Finspera — value grid ──────────────────────────────*/
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.value-card{
  background:#fff; border:1px solid var(--grey-100); border-radius:16px; padding:34px 30px;
  position:relative; overflow:hidden;
  transition:transform .4s cubic-bezier(.16,.82,.3,1), box-shadow .4s ease, border-color .3s ease;
}
.value-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -26px rgba(0, 86, 158,.4); border-color:rgba(53, 180, 242,.35); }
.value-card__ic{
  width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg, rgba(53, 180, 242,.14), rgba(0, 86, 158,.12)); margin-bottom:20px;
}
.value-card__ic svg{ width:24px; height:24px; stroke:var(--accent-ink); fill:none; }
.value-card__t{ font-family:'Space Grotesk','Inter',sans-serif; font-size:18px; font-weight:600; color:var(--primary); margin:0 0 10px; letter-spacing:-.01em; }
.value-card__d{ font-family:'Inter',system-ui,sans-serif; font-size:14.5px; line-height:1.65; color:var(--grey-600); margin:0; }

/* ── How we work — dark process band ────────────────────────*/
.process{ background:var(--primary); color:#fff; overflow:visible;
  background-image:radial-gradient(ellipse 70% 80% at 80% 10%, rgba(53, 180, 242,.16), transparent 60%); }
.process .home-sec__heading{ color:#fff; }
.process .home-eyebrow{ color:var(--accent-bright); }
.process .home-sec__lede{ color:rgba(255,255,255,.62); }
.process__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.proc-step{ position:relative; padding-top:8px; }
.proc-step__n{
  width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; color:#fff;
  background:linear-gradient(140deg,#35B4F2,#00569E); margin-bottom:22px; box-shadow:0 10px 26px -10px rgba(53, 180, 242,.6);
}
.proc-step:not(:last-child)::after{
  content:''; position:absolute; top:27px; left:66px; right:-13px; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.05));
}
.proc-step__t{ font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:600; margin:0 0 10px; letter-spacing:-.01em; }
.proc-step__d{ font-family:'Inter',system-ui,sans-serif; font-size:14.5px; line-height:1.68; color:rgba(255,255,255,.6); margin:0; }

/* ── Who we work with — sector grid ─────────────────────────*/
.sector-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sector-card{
  display:flex; gap:16px; align-items:flex-start;
  background:#fff; border:1px solid var(--grey-100); border-radius:14px; padding:26px 24px;
  transition:transform .4s cubic-bezier(.16,.82,.3,1), box-shadow .4s ease, border-color .3s ease;
}
.sector-card:hover{ transform:translateY(-5px); box-shadow:0 20px 44px -26px rgba(0, 86, 158,.38); border-color:rgba(53, 180, 242,.3); }
.sector-card__ic{ flex:none; width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg, rgba(53, 180, 242,.14), rgba(0, 86, 158,.12)); }
.sector-card__ic svg{ width:21px; height:21px; stroke:var(--accent-ink); fill:none; }
.sector-card__t{ font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:600; color:var(--primary); margin:0 0 5px; letter-spacing:-.01em; }
.sector-card__d{ font-family:'Inter',system-ui,sans-serif; font-size:13.5px; line-height:1.6; color:var(--grey-600); margin:0; }

/* ── Responsive for new sections ────────────────────────────*/
@media (max-width:1024px){
  .value-grid, .sector-grid{ grid-template-columns:repeat(2,1fr); }
  .process__grid{ grid-template-columns:repeat(2,1fr); gap:34px 26px; }
  .proc-step:not(:last-child)::after{ display:none; }
  .home-sec__container{ padding:74px 32px 86px; }
}
@media (max-width:640px){
  .value-grid, .sector-grid, .process__grid{ grid-template-columns:1fr; }
  .home-sec__container{ padding:58px 20px 70px; }
  .home-sec__head{ margin-bottom:44px; }
  .home-ribbon{ height:44px; }
  .home-ribbon__inner{ padding:0 20px; }
}


/* ============================================================
   Hero animated motion graphic — a generated financial growth
   chart (rising bars + trend line that draws itself + a value dot
   that travels the line). Self-contained SVG, CSS-animated,
   reduced-motion safe. Not a logo / not the old static image.
   ============================================================ */
.hero__motion{
  position:absolute; top:50%; right:0; transform:translateY(-50%);
  width:58%; max-width:920px; aspect-ratio:860 / 620;
  z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 24%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 24%, #000 100%);
}
.hero-mg{ width:100%; height:100%; display:block; }
/* The chart (bars + area + trend line) is ALWAYS fully visible — no entrance
   hiding — so it reads correctly with or without JS/animation. The motion is
   the continuous loops below: a value dot climbing the growth line, a pulsing
   "current value" node, a breathing glow and drifting particles. */
.mg-ambient{ opacity:.16; transform-box:fill-box; transform-origin:center; }
.mg-node-glow{ opacity:.7; transform-box:fill-box; transform-origin:center; }
.mg-node{ transform-box:fill-box; transform-origin:center; }
.mg-bar{ transform-box:fill-box; transform-origin:bottom; }
.mg-dot{ transform-box:fill-box; transform-origin:center; }
.mg-runner{ opacity:0; transform-box:fill-box; }   /* only shown while travelling */

@media (prefers-reduced-motion: no-preference){
  .mg-runner{ animation:mg-run 7s ease-in-out 1s infinite; }
  .mg-node, .mg-node-glow{ animation:mg-pulse 2.8s ease-in-out infinite; }
  .mg-ambient{ animation:mg-breathe 8s ease-in-out infinite; }
  .mg-trend{ animation:mg-lineglow 3.8s ease-in-out infinite; }
  .mg-dot{ animation:mg-drift 6.5s ease-in-out infinite; }
  .mg-dot.d2{ animation-duration:8s;   animation-delay:1s; }
  .mg-dot.d3{ animation-duration:7.2s; animation-delay:.6s; }
  .mg-dot.d4{ animation-duration:9s;   animation-delay:1.8s; }
  .mg-dot.d5{ animation-duration:7.8s; animation-delay:2.4s; }
}

@keyframes mg-pulse{   0%,100%{ transform:scale(.9);  opacity:.7 } 50%{ transform:scale(1.16); opacity:1 } }
@keyframes mg-breathe{ 0%,100%{ opacity:.12; transform:scale(1) } 50%{ opacity:.22; transform:scale(1.06) } }
@keyframes mg-drift{   0%,100%{ transform:translate(0,0); opacity:.35 } 50%{ transform:translate(14px,-16px); opacity:.85 } }
@keyframes mg-lineglow{0%,100%{ opacity:.82 } 50%{ opacity:1 } }
@keyframes mg-run{
  0%{    transform:translate(70px,432px);  opacity:0 }
  6%{    opacity:1 }
  14.3%{ transform:translate(239px,352px) }
  28.6%{ transform:translate(337px,322px) }
  42.9%{ transform:translate(435px,286px) }
  57.1%{ transform:translate(533px,300px) }
  71.4%{ transform:translate(631px,240px) }
  85.7%{ transform:translate(729px,188px) }
  95%{   opacity:1 }
  100%{  transform:translate(792px,168px); opacity:0 }
}

@media (max-width:1100px){ .hero__motion{ width:66%; opacity:.9; } }
@media (max-width:768px){ .hero__motion{ display:none; } }


/* ================================================================
   FINSPERA 21 — DARK EMERALD GLASS THEME (Payon-inspired retheme)
   Appended last so it overrides the base light theme.
   ================================================================ */

/* ============ [foundation] ============ */
/* ===== FOUNDATION: dark + emerald token redefinition ===== */
:root {
  --primary:       #0B111C !important;
  --primary-mid:   #0D1420 !important;
  --primary-light: #131C2A !important;
  --accent:        #35B4F2 !important;
  --accent-dark:   #0FA0E9 !important;
  --accent-bright: #7FD2FF !important;
  --accent-ink:    #35B4F2 !important;
  --accent-pale:   rgba(53, 180, 242,.12) !important;
  --white:         #FFFFFF !important;
  --off-white:     #0A0F1A !important;
  --grey-50:       #0E1421 !important;
  --grey-100:      rgba(255,255,255,.08) !important;
  --grey-200:      rgba(255,255,255,.14) !important;
  --grey-400:      #7E8B99 !important;
  --grey-600:      #AEBAC6 !important;
  --text:          #E9EFF4 !important;
}

/* Page canvas */
html { background: #070B12; }
body {
  background: #070B12 !important;
  color: #AEBAC6 !important;
  position: relative;
}

/* Faint fixed emerald radial glow behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 60% at 72% 0%, rgba(53, 180, 242,.07), transparent 62%),
    radial-gradient(50% 50% at 8% 100%, rgba(53, 180, 242,.05), transparent 60%);
}

/* Base headings -> light */
h1, h2, h3, h4, h5, h6 {
  color: #F2F7FA !important;
}

/* Generic body copy -> muted light */
p, li, dd, dt, blockquote, figcaption, small, label, td, th, span {
  color: #AEBAC6;
}

/* Text selection -> emerald */
::selection {
  background: rgba(53, 180, 242,.30);
  color: #F2F7FA;
}
::-moz-selection {
  background: rgba(53, 180, 242,.30);
  color: #F2F7FA;
}

/* Dark custom scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(53, 180, 242,.35) #0A0F1A;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #0A0F1A;
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.10);
  border-radius: 100px;
  border: 3px solid #0A0F1A;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(53, 180, 242,.45);
}
::-webkit-scrollbar-corner {
  background: #0A0F1A;
}

/* ============ [nav-footer] ============ */
/* ===== NAV + FOOTER — dark emerald glassmorphic override ===== */

/* --- Nav shell --- */
.nav {
  background: rgba(10,15,26,.72) !important;
  backdrop-filter: saturate(140%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.nav--solid,
.nav, .nav--solid {
  background: rgba(7,11,18,.9) !important;
  backdrop-filter: saturate(140%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset !important;
}
.lighthero .nav { background: rgba(10,15,26,.55) !important; }
.nav__container { background: transparent !important; }

/* --- Logo --- */
.nav__logo { color: #F2F7FA !important; }
.nav__logo svg, .nav__logo path { fill: currentColor; }
.nav__logo:hover { color: #35B4F2 !important; }

/* --- Nav links --- */
.nav__links { background: transparent !important; }
.nav__link {
  color: #AEBAC6 !important;
  border-radius: 10px !important;
}
.nav__link:hover,
.nav__link.is-active,
.nav__item.open > .nav__link {
  color: #35B4F2 !important;
  background: rgba(53, 180, 242,.08) !important;
}

/* Icons within nav */
.nav__icon,
.nav__link svg { color: #AEBAC6 !important; }
.nav__link:hover .nav__icon,
.nav__link:hover svg,
.nav__icon:hover { color: #35B4F2 !important; }

/* --- Contact / CTA pill --- */
.nav__cta,
.nav__link--cta,
.nav__link--cta:hover {
  background: linear-gradient(180deg,#57C4FA,#0FA0E9) !important;
  color: #041420 !important;
  border: 0 !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 34px -10px rgba(53, 180, 242,.55) !important;
}
.nav__cta:hover,
.nav__link--cta:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 40px -10px rgba(53, 180, 242,.7) !important;
}

/* --- Mobile dropdown menu panel --- */
.nav__dropdown {
  background: #0A0F1A !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
}

/* --- Mega menu panel (glass) --- */
.nav__mega,
.nav__mega-inner {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
  backdrop-filter: saturate(140%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(16px) !important;
  background-image: radial-gradient(60% 60% at 72% 0%, rgba(53, 180, 242,.07), transparent 62%) !important;
}
.nav__mega-inner { background-color: transparent !important; }

.nav__mega-label { color: #7E8B99 !important; }
.nav__mega-label::after { background: rgba(255,255,255,.08) !important; }
.nav__mega-sublabel { color: #AEBAC6 !important; }

.nav__mega-grid,
.nav__mega-grid--2col {
  background: rgba(255,255,255,.02) !important;
  border-radius: 14px !important;
}

.nav__mega-item {
  background: transparent !important;
  border-radius: 12px !important;
}
.nav__mega-item:hover {
  background: rgba(53, 180, 242,.08) !important;
}
.nav__mega-item::after { background: #35B4F2 !important; }

.nav__mega-icon {
  background: rgba(255,255,255,.06) !important;
  color: #35B4F2 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
}
.nav__mega-item:hover .nav__mega-icon {
  background: linear-gradient(180deg,#57C4FA,#0FA0E9) !important;
  color: #041420 !important;
  border-color: transparent !important;
}

.nav__mega-name { color: #F2F7FA !important; }
.nav__mega-item:hover .nav__mega-name { color: #35B4F2 !important; }
.nav__mega-desc { color: #AEBAC6 !important; }

.nav__mega-features li { color: #AEBAC6 !important; }
.nav__mega-features li::before { background: #35B4F2 !important; }

.nav__mega-tag {
  background: rgba(53, 180, 242,.14) !important;
  color: #7FD2FF !important;
  border: 1px solid rgba(53, 180, 242,.25) !important;
  border-radius: 100px !important;
}

/* Mega side panel */
.nav__mega-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset !important;
}
.nav__mega-panel-eyebrow { color: #35B4F2 !important; }
.nav__mega-panel-title { color: #F2F7FA !important; }
.nav__mega-panel-btn {
  background: linear-gradient(180deg,#57C4FA,#0FA0E9) !important;
  color: #041420 !important;
  border: 0 !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 34px -10px rgba(53, 180, 242,.55) !important;
}
.nav__mega-panel-btn:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg,#57C4FA,#0FA0E9) !important;
  box-shadow: 0 14px 40px -10px rgba(53, 180, 242,.7) !important;
}
.nav__mega-panel-stat strong { color: #F2F7FA !important; }
.nav__mega-panel-stat strong span { color: #35B4F2 !important; }
.nav__mega-panel-stat em { color: #7E8B99 !important; }

/* Mega bar */
.nav__mega-bar {
  background: rgba(255,255,255,.02) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.nav__mega-bar-link,
.nav__mega-bar-link:hover { color: #AEBAC6 !important; }
.nav__mega-bar-link:hover { color: #35B4F2 !important; }
.nav__mega-bar-tag {
  background: rgba(255,255,255,.06) !important;
  color: #AEBAC6 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 100px !important;
}

/* Mega foot */
.nav__mega-foot {
  background: rgba(255,255,255,.02) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.nav__mega-foot-link,
.nav__mega-foot-link:hover { color: #AEBAC6 !important; }
.nav__mega-foot-link:hover { color: #35B4F2 !important; }
.nav__mega-foot-cta,
.nav__mega-foot-cta:hover {
  background: linear-gradient(180deg,#57C4FA,#0FA0E9) !important;
  color: #041420 !important;
  border: 0 !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 34px -10px rgba(53, 180, 242,.55) !important;
}
.nav__mega-foot-cta:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 40px -10px rgba(53, 180, 242,.7) !important;
}

/* --- Nav search --- */
.nav__search { background: transparent !important; }
.nav__search-toggle {
  color: #AEBAC6 !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 100px !important;
}
.nav__search-toggle svg { color: inherit !important; }
.nav__search:not(.is-expanded) .nav__search-toggle:hover {
  color: #35B4F2 !important;
  border-color: rgba(53, 180, 242,.38) !important;
}
.nav__search-input {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #EAF1F6 !important;
}
.nav__search-input:focus {
  border-color: #35B4F2 !important;
  box-shadow: 0 0 0 3px rgba(53, 180, 242,.15) !important;
}
.nav__search-input::placeholder { color: rgba(255,255,255,.4) !important; }
.nav__search-close {
  color: #AEBAC6 !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 100px !important;
}
.nav__search-close:hover {
  background: rgba(53, 180, 242,.5) !important;
  color: #041420 !important;
}

/* Search results — dark glass */
.nav__search-results {
  background: linear-gradient(180deg, rgba(13,20,32,.98), rgba(10,15,26,.98)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
  backdrop-filter: saturate(140%) blur(18px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(18px) !important;
}
.nav__search-hint { color: #7E8B99 !important; }
.nav__search-hint-label { color: #7E8B99 !important; }
.nav__search-chip {
  background: rgba(255,255,255,.05) !important;
  color: #AEBAC6 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 100px !important;
}
.nav__search-chip:hover {
  background: rgba(53, 180, 242,.12) !important;
  color: #7FD2FF !important;
  border-color: rgba(53, 180, 242,.38) !important;
}
.nav__search-result { border-radius: 12px !important; }
.nav__search-result:hover { background: rgba(53, 180, 242,.08) !important; }
.nav__search-result__type { color: #35B4F2 !important; }
.nav__search-result__title { color: #F2F7FA !important; }
.nav__search-result__desc { color: #AEBAC6 !important; }
.nav__search-result__arrow { color: #35B4F2 !important; }

/* ===== FOOTER ===== */
.footer {
  background: #070B12 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  background-image: radial-gradient(60% 60% at 72% 0%, rgba(53, 180, 242,.07), transparent 62%) !important;
}
.footer__col h4 { color: #F2F7FA !important; }
.footer__col a { color: #AEBAC6 !important; }
.footer__col a:hover { color: #35B4F2 !important; }
.footer__socials a {
  color: #AEBAC6 !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
}
.footer__socials a:hover {
  background: rgba(53, 180, 242,.12) !important;
  border-color: rgba(53, 180, 242,.38) !important;
  color: #35B4F2 !important;
}
.footer__legal,
.footer__legal a,
.footer__bottom,
.footer__copyright { color: #7E8B99 !important; }
.footer__legal a:hover { color: #35B4F2 !important; }
.footer hr,
.footer__divider { border-color: rgba(255,255,255,.08) !important; background: rgba(255,255,255,.08) !important; }

/* ============ [buttons-forms] ============ */
/* ============================================================
   GROUP: buttons-forms — dark emerald glassmorphic overrides
   ============================================================ */

/* ---- Primary CTAs → emerald pill recipe ---- */
.btn--primary,
.p-btn--primary,
.contact__submit,
.about__cta-btn,
.ins-side__cta-btn,
.nav__mega-foot-cta,
.btn--lg {
  background: linear-gradient(180deg,#57C4FA,#0FA0E9) !important;
  background-image: linear-gradient(180deg,#57C4FA,#0FA0E9) !important;
  color: #041420 !important;
  border: 0 !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 34px -10px rgba(53, 180, 242,.55) !important;
  text-shadow: none !important;
}
.btn--primary *,
.p-btn--primary *,
.contact__submit *,
.about__cta-btn *,
.ins-side__cta-btn *,
.nav__mega-foot-cta *,
.btn--lg * {
  color: #041420 !important;
  fill: #041420 !important;
  stroke: #041420 !important;
}
.btn--primary:hover,
.p-btn--primary:hover,
.contact__submit:hover,
.about__cta-btn:hover,
.ins-side__cta-btn:hover,
.nav__mega-foot-cta:hover,
.btn--lg:hover,
.btn--primary:focus-visible,
.p-btn--primary:focus-visible,
.contact__submit:focus-visible,
.about__cta-btn:focus-visible,
.ins-side__cta-btn:focus-visible,
.nav__mega-foot-cta:focus-visible,
.btn--lg:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 40px -10px rgba(53, 180, 242,.7) !important;
}

/* ---- Secondary / ghost buttons → transparent, light text, emerald on hover ---- */
.btn--outline,
.btn--ghost,
.p-btn--ghost,
.p-btn--dark-ghost,
.btn--dark-ghost {
  background: transparent !important;
  background-image: none !important;
  color: #F2F7FA !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 100px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn--outline *,
.btn--ghost *,
.p-btn--ghost *,
.p-btn--dark-ghost *,
.btn--dark-ghost * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
.btn--outline:hover,
.btn--ghost:hover,
.p-btn--ghost:hover,
.p-btn--dark-ghost:hover,
.btn--dark-ghost:hover,
.btn--outline:focus-visible,
.btn--ghost:focus-visible,
.p-btn--ghost:focus-visible,
.p-btn--dark-ghost:focus-visible,
.btn--dark-ghost:focus-visible {
  background: rgba(53, 180, 242,.08) !important;
  border-color: rgba(53, 180, 242,.55) !important;
  color: #7FD2FF !important;
  box-shadow: 0 0 0 3px rgba(53, 180, 242,.12) !important;
}

/* ---- Emerald text links with emerald arrow ---- */
.svc-card__link,
.feature-link,
.insights__viewall,
.p-related__link {
  color: #35B4F2 !important;
  fill: #35B4F2 !important;
  stroke: #35B4F2 !important;
}
.svc-card__link *,
.feature-link *,
.insights__viewall *,
.p-related__link * {
  color: #35B4F2 !important;
  fill: #35B4F2 !important;
  stroke: #35B4F2 !important;
}
.svc-card__link:hover,
.feature-link:hover,
.insights__viewall:hover,
.p-related__link:hover {
  color: #7FD2FF !important;
}
.svc-card__link:hover *,
.feature-link:hover *,
.insights__viewall:hover *,
.p-related__link:hover * {
  color: #7FD2FF !important;
  fill: #7FD2FF !important;
  stroke: #7FD2FF !important;
}

/* ---- Contact form: glass container ---- */
.contact__form {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.form__title {
  color: #F2F7FA !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.form__note { color: #7E8B99 !important; }

/* ---- Form fields ---- */
.form__field label {
  color: #F2F7FA !important;
}
.form__field input,
.form__field select,
.form__field textarea {
  background: rgba(255,255,255,.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #EAF1F6 !important;
  border-radius: 12px !important;
}
.form__field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231EE39B' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}
.form__field input::placeholder,
.form__field textarea::placeholder {
  color: rgba(255,255,255,.4) !important;
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  border-color: #35B4F2 !important;
  box-shadow: 0 0 0 3px rgba(53, 180, 242,.15) !important;
  background: rgba(255,255,255,.06) !important;
}

/* ============ [hero] ============ */
/* ===== HERO GROUP — dark emerald glassmorphic override ===== */
.hero {
  background: #070B12 !important;
}

/* Planet-horizon glow arc at top-center over near-black base */
.hero__bg,
.lighthero .hero__bg {
  background:
    radial-gradient(120% 90% at 50% -30%,
      rgba(40,140,255,.28),
      rgba(53, 180, 242,.14) 30%,
      transparent 60%),
    #070B12 !important;
  display: block !important;
}
.hero__bg::before { display: none !important; }
.hero__bg::after { display: none !important; }

/* Heading */
.hero__heading,
.lighthero .hero__heading {
  color: #F2F7FA !important;
}

/* Emphasis word — solid emerald, kill old blue gradient text */
.hero__heading em {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: #35B4F2 !important;
  color: #35B4F2 !important;
  animation: none !important;
}

/* Subtext */
.hero__subtext,
.lighthero .hero__subtext {
  color: #AEBAC6 !important;
}

/* Primary CTA — emerald pill recipe */
.hero__actions .btn,
.hero__actions .btn--primary {
  background: linear-gradient(180deg,#57C4FA,#0FA0E9) !important;
  color: #041420 !important;
  border: 0 !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 34px -10px rgba(53, 180, 242,.55) !important;
}
.hero__actions .btn:hover,
.hero__actions .btn--primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 40px -10px rgba(53, 180, 242,.7) !important;
}

/* Stats bar — hairline top border */
.hero__stats-bar,
.lighthero .hero__stats-bar {
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.hero__stat {
  border-right-color: rgba(255,255,255,.08) !important;
}
.hero__stat-number,
.lighthero .hero__stat-number {
  color: #F2F7FA !important;
}
.hero__stat-number span,
.lighthero .hero__stat-number span {
  color: #35B4F2 !important;
}
.hero__stat-label,
.lighthero .hero__stat-label {
  color: #7E8B99 !important;
}

/* Manifesto — stays dark, ensure text light */
.manifesto {
  background: #0A0F1A !important;
}
.manifesto__overlay {
  background: linear-gradient(180deg, rgba(7,11,18,.55), rgba(7,11,18,.82)) !important;
}
.manifesto__statement {
  color: #F2F7FA !important;
}
.manifesto__statement em {
  background: none !important;
  -webkit-text-fill-color: #35B4F2 !important;
  color: #35B4F2 !important;
}
.manifesto__pill {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 100px !important;
  color: #F2F7FA !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
}
.manifesto__pill:hover {
  border-color: rgba(53, 180, 242,.38) !important;
  color: #35B4F2 !important;
  box-shadow: 0 26px 60px -30px rgba(53, 180, 242,.28) !important;
}

/* Trust bar — dark, muted, hairline seams */
.trust-bar,
.lighthero .trust-bar {
  background: #0A0F1A !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  display: block !important;
}
.trust-bar__items span,
.lighthero .trust-bar__items span {
  color: #7E8B99 !important;
}
.trust-bar__dot {
  color: #35B4F2 !important;
  opacity: .5 !important;
}

/* ============ [home-sections] ============ */
/* ============================================================
   HOME SECTIONS — dark emerald glassmorphic override
   ============================================================ */

/* ── Section shells → dark, alternating, subtle emerald glow ── */
.services,
.insights,
.home-sec {
  background: #0A0F1A !important;
  background-image: radial-gradient(60% 60% at 72% 0%, rgba(53, 180, 242,.07), transparent 62%) !important;
}
.home-sec--tint,
.about {
  background: #0D1420 !important;
  background-image: radial-gradient(60% 60% at 28% 0%, rgba(53, 180, 242,.07), transparent 62%) !important;
}
.solutions {
  background: #0A0F1A !important;
  background-image: radial-gradient(56% 78% at 86% 10%, rgba(53, 180, 242,.10), transparent 60%) !important;
}
.contact {
  background: #070B12 !important;
  background-image: radial-gradient(54% 74% at 12% 90%, rgba(53, 180, 242,.10), transparent 60%) !important;
}
/* process already dark — refresh emerald glow */
.process {
  background: #070B12 !important;
  background-image: radial-gradient(ellipse 70% 80% at 80% 10%, rgba(53, 180, 242,.14), transparent 60%) !important;
  color: #AEBAC6 !important;
}

/* ── Section headings / ledes / eyebrows ── */
.services__heading,
.solutions__heading,
.insights__heading,
.about__heading,
.contact__heading,
.home-sec__heading,
.process .home-sec__heading {
  color: #F2F7FA !important;
}
.services__lede,
.solutions__lede,
.insights__lede,
.about__lede,
.contact__lede,
.home-sec__lede,
.process .home-sec__lede {
  color: #AEBAC6 !important;
}
.home-eyebrow,
.process .home-eyebrow {
  color: #35B4F2 !important;
}
.home-eyebrow::before {
  background: linear-gradient(90deg, #35B4F2, #0FA0E9) !important;
}

/* ── RIBBONS → dark glass with emerald labels ── */
.services__ribbon,
.solutions__ribbon,
.insights__ribbon,
.about__ribbon,
.contact__ribbon,
.home-ribbon,
.page-ribbon {
  background: rgba(255,255,255,.03) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.services__ribbon-label,
.solutions__ribbon-label,
.insights__ribbon-label,
.about__ribbon-label,
.contact__ribbon-label,
.home-ribbon__label,
.page-ribbon__label,
.page-ribbon__current {
  color: #35B4F2 !important;
}

/* ── GLASS CARD recipe (shared) ── */
.svc-card,
.value-card,
.sector-card,
.ins-card,
.solutions__feature {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
  color: #AEBAC6 !important;
}
.svc-card:hover,
.value-card:hover,
.sector-card:hover,
.ins-card:hover,
.solutions__feature:hover {
  border-color: rgba(53, 180, 242,.38) !important;
  box-shadow: 0 26px 60px -30px rgba(53, 180, 242,.28) !important;
  transform: translateY(-6px) !important;
}
/* top-accent lines → emerald */
.svc-card::before,
.ins-card::before {
  background: linear-gradient(90deg, #35B4F2, #0FA0E9) !important;
}
.solutions__feature + .solutions__feature {
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* ── Service cards ── */
.svc-card__num {
  color: #35B4F2 !important;
}
.svc-card:hover .svc-card__num {
  color: #7FD2FF !important;
}
.svc-card__title {
  color: #F2F7FA !important;
}
.svc-card__desc {
  color: #AEBAC6 !important;
}
.svc-card__link {
  color: #35B4F2 !important;
}

/* ── Value cards ── */
.value-card__ic {
  background: linear-gradient(140deg, rgba(53, 180, 242,.18), rgba(15, 160, 233,.12)) !important;
  border: 1px solid rgba(53, 180, 242,.20) !important;
}
.value-card__ic svg {
  stroke: #35B4F2 !important;
}
.value-card__t {
  color: #F2F7FA !important;
}
.value-card__d {
  color: #AEBAC6 !important;
}

/* ── Sector cards ── */
.sector-card__ic {
  background: linear-gradient(140deg, rgba(53, 180, 242,.18), rgba(15, 160, 233,.12)) !important;
  border: 1px solid rgba(53, 180, 242,.20) !important;
}
.sector-card__ic svg {
  stroke: #35B4F2 !important;
}
.sector-card__t {
  color: #F2F7FA !important;
}
.sector-card__d {
  color: #AEBAC6 !important;
}

/* ── Insight cards ── */
.ins-card__tag {
  color: #35B4F2 !important;
  background: rgba(53, 180, 242,.10) !important;
  border-color: rgba(53, 180, 242,.25) !important;
}
.ins-card__title {
  color: #F2F7FA !important;
}
.ins-card:hover .ins-card__title {
  color: #7FD2FF !important;
}
.ins-card__excerpt {
  color: #AEBAC6 !important;
}
.ins-card__meta {
  color: #7E8B99 !important;
}
.ins-card__arrow {
  color: #35B4F2 !important;
}
.insights__viewall {
  color: #35B4F2 !important;
}

/* ── Solutions feature ── */
.solutions__feature-visual {
  border-radius: 14px !important;
}
.feature-label {
  color: #35B4F2 !important;
}
.feature-name {
  color: #F2F7FA !important;
}
.feature-desc {
  color: #AEBAC6 !important;
}
.feature-bullets li {
  color: #AEBAC6 !important;
}
.feature-bullets li::before,
.feature-bullets li::marker {
  color: #35B4F2 !important;
}
.feature-link {
  color: #35B4F2 !important;
}

/* ── Process steps ── */
.proc-step__n {
  background: linear-gradient(180deg, #57C4FA, #0FA0E9) !important;
  color: #041420 !important;
  box-shadow: 0 10px 26px -10px rgba(53, 180, 242,.6) !important;
}
.proc-step:not(:last-child)::after {
  background: linear-gradient(90deg, rgba(53, 180, 242,.42), rgba(53, 180, 242,.05)) !important;
}
.proc-step__t {
  color: #F2F7FA !important;
}
.proc-step__d {
  color: #AEBAC6 !important;
}

/* ── About ── */
.about__quote {
  color: #F2F7FA !important;
}
.about__text {
  color: #AEBAC6 !important;
}
.about-stat__value {
  color: #F2F7FA !important;
}
.about-stat__value span {
  color: #35B4F2 !important;
}
.about-stat__label {
  color: #7E8B99 !important;
}
.about-pillar {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
}
.about-pillar__num {
  color: #35B4F2 !important;
}
.about-pillar__title {
  color: #F2F7FA !important;
}
.about-pillar__desc {
  color: #AEBAC6 !important;
}
.about__cta-btn {
  background: linear-gradient(180deg, #57C4FA, #0FA0E9) !important;
  color: #041420 !important;
  border: 0 !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 34px -10px rgba(53, 180, 242,.55) !important;
}
.about__cta-btn:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 40px -10px rgba(53, 180, 242,.7) !important;
}

/* ── Contact ── */
.contact__intro {
  color: #AEBAC6 !important;
}
.contact__details {
  color: #AEBAC6 !important;
}
.contact__detail-block {
  border-color: rgba(255,255,255,.08) !important;
}
.contact__detail-label {
  color: #7E8B99 !important;
}
.contact__detail-value,
.contact__detail a,
.contact__detail span {
  color: #EAF1F6 !important;
}
a.contact__detail-value:hover,
.contact__detail a:hover {
  color: #35B4F2 !important;
}

/* Contact form → glass */
.contact__form {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
}
.contact__form label {
  color: #AEBAC6 !important;
}
.contact__form input,
.contact__form textarea,
.contact__form select {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #EAF1F6 !important;
}
.contact__form input::placeholder,
.contact__form textarea::placeholder {
  color: rgba(255,255,255,.4) !important;
}
.contact__form input:focus,
.contact__form textarea:focus,
.contact__form select:focus {
  border-color: #35B4F2 !important;
  box-shadow: 0 0 0 3px rgba(53, 180, 242,.15) !important;
  outline: none !important;
}
.contact__submit {
  background: linear-gradient(180deg, #57C4FA, #0FA0E9) !important;
  color: #041420 !important;
  border: 0 !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 34px -10px rgba(53, 180, 242,.55) !important;
}
.contact__submit:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg, #57C4FA, #0FA0E9) !important;
  box-shadow: 0 14px 40px -10px rgba(53, 180, 242,.7) !important;
}
.contact__note {
  color: #7E8B99 !important;
}
/* WhatsApp icon stays green (already #25D366 inline) — leave untouched */

/* ============ [service-pages] ============ */
/* ============ SERVICE PAGES — dark emerald glass overrides ============ */

/* Hero */
.p-hero {
  background: #0A0F1A !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background-image: radial-gradient(60% 60% at 72% 0%, rgba(53, 180, 242,.07), transparent 62%) !important;
}
.p-hero h1, .p-h1 { color: #F2F7FA !important; }
.p-hero h1 em, .p-h1 em { color: #35B4F2 !important; }
.p-hero p, .p-lede { color: #AEBAC6 !important; }

/* Breadcrumbs */
.p-crumbs a { color: #AEBAC6 !important; }
.p-crumbs a:hover { color: #35B4F2 !important; }
.p-crumbs__sep { color: #7E8B99 !important; }
.p-crumbs__here { color: #F2F7FA !important; }

/* Sections */
.p-section { background: #070B12 !important; }
.p-section--off { background: #0D1420 !important; }
.p-section--navy {
  background: #0A0F1A !important;
  background-image: linear-gradient(155deg, #0D1420 0%, #070B12 100%) !important;
  color: #AEBAC6 !important;
}
.p-section--navy::before {
  background: radial-gradient(50% 60% at 80% 30%, rgba(53, 180, 242,.09), transparent 60%) !important;
}

/* Section header */
.p-sec-h__eb { color: #35B4F2 !important; }
.p-sec-h__eb::before, .p-sec-h__eb::after { background: #35B4F2 !important; }
.p-sec-h__h2 { color: #F2F7FA !important; }
.p-section--navy .p-sec-h__h2 { color: #F2F7FA !important; }
.p-sec-h__lede { color: #AEBAC6 !important; }
.p-section--navy .p-sec-h__lede { color: #AEBAC6 !important; }
.p-sec-h--c .p-sec-h__eb::after { background: #35B4F2 !important; }

/* Split / editorial quote */
.p-split__text > p { color: #AEBAC6 !important; }
.p-quote,
.p-split__text > .p-quote {
  color: #F2F7FA !important;
  border-left: 2px solid #35B4F2 !important;
}

/* Sidebar list — glass */
.p-list {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
}
.p-list__h {
  color: #F2F7FA !important;
  background: rgba(255,255,255,.04) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.p-list__item { border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.p-list__item:last-child { border-bottom: none !important; }
.p-list__item:hover { background: rgba(53, 180, 242,.08) !important; }
.p-list__t { color: #F2F7FA !important; }
.p-list__d { color: #AEBAC6 !important; }

/* Card grid — glass */
.p-grid {
  background: rgba(255,255,255,.08) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.p-card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease !important;
}
.p-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border-color: rgba(53, 180, 242,.38) !important;
  box-shadow: 0 26px 60px -30px rgba(53, 180, 242,.28) !important;
  transform: translateY(-6px) !important;
}
.p-card__num { color: #35B4F2 !important; }
.p-card__title { color: #F2F7FA !important; }
.p-card__desc { color: #AEBAC6 !important; }

/* Stats bar — glass */
.p-stats {
  border-top: 1px solid rgba(53, 180, 242,.28) !important;
  border-bottom: 1px solid rgba(53, 180, 242,.28) !important;
}
.p-stat {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
}
.p-stat + .p-stat::before { background: transparent !important; }
.p-section--navy .p-stat + .p-stat::before { background: transparent !important; }
.p-stat__num { color: #F2F7FA !important; }
.p-section--navy .p-stat__num { color: #F2F7FA !important; }
.p-stat__num span { color: #35B4F2 !important; }
.p-stat__label { color: #AEBAC6 !important; }
.p-section--navy .p-stat__label { color: #AEBAC6 !important; }

/* Steps */
.p-step { border-top: 2px solid #35B4F2 !important; }
.p-step__num { color: #35B4F2 !important; }
.p-step__title { color: #F2F7FA !important; }
.p-step__desc { color: #AEBAC6 !important; }
.p-section--navy .p-step__title { color: #F2F7FA !important; }
.p-section--navy .p-step__desc { color: #AEBAC6 !important; }

/* Pull quote */
.p-pullquote__mark { color: #35B4F2 !important; }
.p-pullquote__text { color: #F2F7FA !important; }
.p-section--navy .p-pullquote__text { color: #F2F7FA !important; }
.p-pullquote__attr { color: #35B4F2 !important; }

/* Related / cross-sell — glass */
.p-related__card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease !important;
}
.p-related__card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border-color: rgba(53, 180, 242,.38) !important;
  box-shadow: 0 26px 60px -30px rgba(53, 180, 242,.28) !important;
  transform: translateY(-6px) !important;
}
.p-related__eb { color: #35B4F2 !important; }
.p-related__title { color: #F2F7FA !important; }
.p-related__desc { color: #AEBAC6 !important; }
.p-related__link { color: #35B4F2 !important; }

/* Closing CTA — dark glass panel with emerald glow */
.p-cta {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)), #0A0F1A !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.p-cta::before {
  background: radial-gradient(60% 60% at 80% 50%, rgba(53, 180, 242,.14), transparent 60%) !important;
}
.p-cta__eb { color: #35B4F2 !important; }
.p-cta__h { color: #F2F7FA !important; }
.p-cta__lede { color: #AEBAC6 !important; }

/* FAQ */
.faq-list { color: #AEBAC6 !important; }
.faq-item { border-top: 1px solid rgba(255,255,255,.08) !important; }
.faq-item:first-child { border-top: 0 !important; }
.faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.faq-item h3 { color: #F2F7FA !important; }
.faq-item p { color: #AEBAC6 !important; }

/* ============ [insight-pages] ============ */
/* ============================================================
   INSIGHT PAGES — dark emerald glassmorphic override
   ============================================================ */

/* ---- Insights index hero ---- */
.p-hero {
  background: #0A0F1A !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background-image: radial-gradient(60% 60% at 72% 0%, rgba(53, 180, 242,.07), transparent 62%) !important;
}
.p-hero h1, .p-hero .p-h1 {
  color: #F2F7FA !important;
}
.p-hero h1 em, .p-hero .p-h1 em {
  color: #35B4F2 !important;
}
.p-hero p, .p-hero .p-lede {
  color: #AEBAC6 !important;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.ins-filter {
  background: #0A0F1A !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.ins-filter__label {
  color: #7E8B99 !important;
}
.ins-filter__btn {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #AEBAC6 !important;
}
.ins-filter__btn:hover {
  color: #35B4F2 !important;
  border-color: rgba(53, 180, 242,.38) !important;
}
.ins-filter__btn.is-active {
  background: linear-gradient(180deg,#57C4FA,#0FA0E9) !important;
  color: #041420 !important;
  border-color: transparent !important;
  box-shadow: 0 10px 34px -10px rgba(53, 180, 242,.55) !important;
}

/* ============================================================
   FEATURED CARD (glass, larger)
   ============================================================ */
.ins-featured {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
  backdrop-filter: blur(14px) !important;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important;
}
.ins-featured::before {
  background: radial-gradient(60% 80% at 85% 20%, rgba(53, 180, 242,.10), transparent 60%) !important;
}
.ins-featured:hover {
  border-color: rgba(53, 180, 242,.38) !important;
  box-shadow: 0 26px 60px -30px rgba(53, 180, 242,.28) !important;
  transform: translateY(-6px) !important;
}
.ins-featured__eb {
  color: #35B4F2 !important;
}
.ins-featured__eb::before {
  background: #35B4F2 !important;
}
.ins-featured__title {
  color: #F2F7FA !important;
}
.ins-featured__excerpt {
  color: #AEBAC6 !important;
}
.ins-featured__meta {
  color: #7E8B99 !important;
}
.ins-featured__meta-dot {
  background: rgba(255,255,255,.3) !important;
}
.ins-featured__tag {
  color: #041420 !important;
  background: linear-gradient(180deg,#57C4FA,#0FA0E9) !important;
  border-radius: 100px !important;
  box-shadow: 0 10px 34px -10px rgba(53, 180, 242,.55) !important;
}
.ins-featured__cta {
  color: #35B4F2 !important;
}

/* ============================================================
   TILE GRID (glass + hover)
   ============================================================ */
.ins-list {
  border-top: none !important;
}
.ins-tile {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
  backdrop-filter: blur(14px) !important;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important;
}
.ins-tile:nth-child(3n),
.ins-tile:nth-child(2n) {
  border-right: 1px solid rgba(255,255,255,.08) !important;
}
.ins-tile:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border-color: rgba(53, 180, 242,.38) !important;
  box-shadow: 0 26px 60px -30px rgba(53, 180, 242,.28) !important;
  transform: translateY(-6px) !important;
}
.ins-tile::before {
  background: #35B4F2 !important;
}
.ins-tile__tag {
  color: #35B4F2 !important;
}
.ins-tile__tag--ifrs    { color: #35B4F2 !important; }
.ins-tile__tag--esg     { color: #7FD2FF !important; }
.ins-tile__tag--tech    { color: #7FD2FF !important; }
.ins-tile__tag--tax     { color: #0FA0E9 !important; }
.ins-tile__tag--finance { color: #0FA0E9 !important; }
.ins-tile__title {
  color: #F2F7FA !important;
}
.ins-tile:hover .ins-tile__title {
  color: #35B4F2 !important;
}
.ins-tile__excerpt {
  color: #AEBAC6 !important;
}
.ins-tile__meta {
  color: #7E8B99 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.ins-tile__meta-dot {
  background: rgba(255,255,255,.3) !important;
}

/* ============================================================
   ARTICLE HEADER
   ============================================================ */
.ins-article {
  background: #0A0F1A !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background-image: radial-gradient(60% 60% at 72% 0%, rgba(53, 180, 242,.07), transparent 62%) !important;
}
.ins-article__tag {
  color: #041420 !important;
  background: linear-gradient(180deg,#57C4FA,#0FA0E9) !important;
  border-radius: 100px !important;
  box-shadow: 0 10px 34px -10px rgba(53, 180, 242,.55) !important;
}
.ins-article__h1 {
  color: #F2F7FA !important;
}
.ins-article__byline {
  color: #AEBAC6 !important;
}
.ins-article__byline strong {
  color: #35B4F2 !important;
}
.ins-article__byline-dot {
  background: rgba(255,255,255,.3) !important;
}

/* ============================================================
   ARTICLE BODY
   ============================================================ */
.ins-body {
  background: #070B12 !important;
}
.ins-body__article > p {
  color: #C3CDD8 !important;
}
.ins-body__article a {
  color: #35B4F2 !important;
  text-decoration-color: rgba(53, 180, 242,.5) !important;
}
.ins-body__article a:hover {
  color: #7FD2FF !important;
}
.ins-body__article > h2,
.ins-body__article > h3 {
  color: #F2F7FA !important;
}
.ins-body__article ul,
.ins-body__article ol {
  color: #AEBAC6 !important;
}
.ins-body__article li {
  color: #AEBAC6 !important;
}
.ins-body__article strong {
  color: #F2F7FA !important;
}

/* Pullquote / blockquote — dark glass, emerald bar */
.ins-body__article .article-pullquote,
.ins-body__article blockquote,
.article-pullquote {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border-left: 3px solid #35B4F2 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
}
.ins-body__article .article-pullquote p,
.ins-body__article blockquote p,
.article-pullquote p {
  color: #F2F7FA !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.ins-side__card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
  backdrop-filter: blur(14px) !important;
}
.ins-side__h {
  color: #F2F7FA !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.ins-side__link {
  color: #AEBAC6 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.ins-side__link:hover {
  color: #35B4F2 !important;
}

/* Sidebar CTA — dark glass with emerald glow */
.ins-side__cta {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)), radial-gradient(70% 70% at 78% 8%, rgba(53, 180, 242,.14), transparent 62%) !important;
  color: #AEBAC6 !important;
}
.ins-side__cta-h {
  color: #F2F7FA !important;
}
.ins-side__cta-p {
  color: #AEBAC6 !important;
}
.ins-side__cta-btn {
  background: linear-gradient(180deg,#57C4FA,#0FA0E9) !important;
  color: #041420 !important;
  border: 0 !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 34px -10px rgba(53, 180, 242,.55) !important;
}
.ins-side__cta-btn:hover {
  background: linear-gradient(180deg,#57C4FA,#0FA0E9) !important;
  color: #041420 !important;
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 40px -10px rgba(53, 180, 242,.7) !important;
}

/* ============================================================
   MORE FROM INSIGHTS
   ============================================================ */
.ins-more {
  background: #0D1420 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.ins-more__h {
  color: #F2F7FA !important;
}
.ins-more__eb {
  color: #35B4F2 !important;
}
.ins-more__eb::before {
  background: #35B4F2 !important;
}

/* ============ [solution-ecl] ============ */
/* ============ SOLUTION ECL — dark emerald glass system ============ */

/* ---- Hero ---- */
.ecl-hero{ background:#070B12 !important; }
.ecl-hero__bg{ background:
  radial-gradient(60% 60% at 72% 0%, rgba(53, 180, 242,.10), transparent 62%),
  radial-gradient(70% 50% at 12% 8%, rgba(53, 180, 242,.05), transparent 60%),
  #070B12 !important; }
.ecl-hero__bg::before{
  background:radial-gradient(50% 55% at 78% 6%, rgba(53, 180, 242,.14), transparent 64%) !important;
  opacity:1 !important; }
.ecl-hero__badge{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(53, 180, 242,.30) !important;
  color:#35B4F2 !important;
  border-radius:100px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px -18px rgba(0,0,0,.8) !important; }
.ecl-hero__badge::before{ background:#35B4F2 !important; box-shadow:0 0 10px rgba(53, 180, 242,.7) !important; }
.ecl-hero h1{ color:#F2F7FA !important; }
.ecl-hero h1 em{ color:#35B4F2 !important; font-style:normal !important; background:none !important; -webkit-text-fill-color:#35B4F2 !important; }
.ecl-hero__sub{ color:#AEBAC6 !important; }

/* ---- Stats bar (glass strip) ---- */
.ecl-stats-bar{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset !important; }
.ecl-stat__val{ color:#F2F7FA !important; }
.ecl-stat__val--accent{ color:#35B4F2 !important; }
.ecl-stat__label{ color:#7E8B99 !important; }
.ecl-stat__divider{ background:rgba(255,255,255,.08) !important; }

/* ---- Modules / bands (dark surfaces) ---- */
.ecl-module{ background:#0A0F1A !important; }
.ecl-module--alt{ background:#0D1420 !important; }
.ecl-module--dark{ background:#070B12 !important; }
.ecl-module--dark::before{
  background:radial-gradient(60% 60% at 72% 0%, rgba(53, 180, 242,.07), transparent 62%) !important; }
.ecl-module h2, .ecl-module--dark h2{ color:#F2F7FA !important; }
.ecl-module__desc, .ecl-module--dark .ecl-module__desc{ color:#AEBAC6 !important; }
.ecl-module__num{ color:rgba(53, 180, 242,.22) !important; }
.ecl-module__tag{ color:#35B4F2 !important; }
.ecl-feature-list li, .ecl-module--dark .ecl-feature-list li{ color:#AEBAC6 !important; }
.ecl-band{ background:#0A0F1A !important; }

/* ---- Flow steps (glass + hover) + emerald connectors ---- */
.ecl-flow__step{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.ecl-flow__step:hover{
  border-color:rgba(53, 180, 242,.38) !important;
  box-shadow:0 26px 60px -30px rgba(53, 180, 242,.28) !important;
  transform:translateY(-6px); }
.ecl-flow__step:not(:last-child)::after{ background:#35B4F2 !important; }
.ecl-flow__step:not(:last-child)::before{ border-left-color:#35B4F2 !important; border-top-color:#35B4F2 !important; }
.ecl-flow__n{
  background:linear-gradient(180deg,#57C4FA,#0FA0E9) !important;
  color:#041420 !important;
  border-radius:10px !important;
  box-shadow:0 10px 28px -12px rgba(53, 180, 242,.55) !important; }
.ecl-flow__step h4{ color:#F2F7FA !important; }
.ecl-flow__step p{ color:#AEBAC6 !important; }
@media (max-width:800px){
  .ecl-flow__step:not(:last-child)::after{ background:#35B4F2 !important; }
  .ecl-flow__step:not(:last-child)::before{ border-top-color:#35B4F2 !important; }
}

/* ---- Stage cards (emerald gradient family) ---- */
.ecl-stage--1{ background:linear-gradient(150deg,#35B4F2,#0FA0E9) !important; color:#041420 !important; }
.ecl-stage--2{ background:linear-gradient(150deg,#0FA0E9,#00569E) !important; color:#F2F7FA !important; }
.ecl-stage--3{ background:linear-gradient(150deg,#0A4C6E,#08243E) !important; color:#F2F7FA !important; }
.ecl-stage--1 .ecl-stage__tag,
.ecl-stage--1 .ecl-stage__h{ color:#041420 !important; }
.ecl-stage--1 p{ color:rgba(4, 18, 30,.78) !important; }
.ecl-stage--1 .ecl-stage__trigger{ color:rgba(4, 18, 30,.72) !important; border-top-color:rgba(4, 18, 30,.18) !important; }
.ecl-stage--1 .ecl-stage__ecl{ background:rgba(4, 18, 30,.14) !important; color:#041420 !important; }
.ecl-stage--2 p, .ecl-stage--3 p{ color:rgba(242,247,250,.82) !important; }
.ecl-stage--2 .ecl-stage__trigger, .ecl-stage--3 .ecl-stage__trigger{ color:rgba(242,247,250,.7) !important; border-top-color:rgba(255,255,255,.16) !important; }
.ecl-stage__ecl{ background:rgba(255,255,255,.16) !important; border-radius:100px !important; }

/* ---- Formula (dark glass, emerald accents) ---- */
.ecl-formula{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  color:#F2F7FA !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important; }
.ecl-formula__eq{ color:#F2F7FA !important; }
.ecl-formula__eq b{ color:#35B4F2 !important; }
.ecl-formula__note{ color:#7E8B99 !important; }

/* ---- Benefit cards (glass + hover) ---- */
.benefit-card{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.benefit-card:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important;
  border-color:rgba(53, 180, 242,.38) !important;
  box-shadow:0 26px 60px -30px rgba(53, 180, 242,.28) !important;
  transform:translateY(-6px); }
.benefit-card__num{ color:#35B4F2 !important; }
.benefit-card h3{ color:#F2F7FA !important; }
.benefit-card p{ color:#AEBAC6 !important; }

/* ---- Screen frame (dark chrome) ---- */
.screen-frame{
  background:#0D1420 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important; }
.screen-frame__bar{
  background:rgba(255,255,255,.03) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important; }
.screen-frame__dot{ background:rgba(255,255,255,.18) !important; }
.screen-frame__img{ border-radius:0 0 18px 18px !important; }

/* ---- Method cards (glass) ---- */
.ecl-method-card{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.ecl-method-card:hover{
  border-color:rgba(53, 180, 242,.38) !important;
  box-shadow:0 26px 60px -30px rgba(53, 180, 242,.28) !important;
  transform:translateY(-6px) !important; }
.ecl-method-card__body{ background:transparent !important; }
.ecl-method-card__label{ color:#35B4F2 !important; }
.ecl-method-card h3{ color:#F2F7FA !important; }
.ecl-method-card p{ color:#AEBAC6 !important; }

/* ---- Enterprise feature cards (glass) ---- */
.ecl-ent-feat{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.ecl-ent-feat:hover{
  border-color:rgba(53, 180, 242,.38) !important;
  box-shadow:0 26px 60px -30px rgba(53, 180, 242,.28) !important;
  transform:translateY(-6px) !important; }
.ecl-ent-feat__icon{
  background:rgba(53, 180, 242,.12) !important;
  border:1px solid rgba(53, 180, 242,.28) !important;
  color:#35B4F2 !important;
  border-radius:12px !important; }
.ecl-ent-feat__icon svg{ color:#35B4F2 !important; stroke:#35B4F2 !important; }
.ecl-ent-feat h4{ color:#F2F7FA !important; }
.ecl-ent-feat p{ color:#AEBAC6 !important; }

/* ---- Related section on this page ---- */
.p-related{ background:#0A0F1A !important; }
.p-related h2, .p-related h3, .p-related h4{ color:#F2F7FA !important; }
.p-related p{ color:#AEBAC6 !important; }
.p-related a{ color:#35B4F2 !important; }
.p-related .p-related__card,
.p-related article,
.p-related li{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -34px rgba(0,0,0,.85) !important; }

/* ── theme patch: mega-menu item titles (base colours them var(--primary), now dark) ── */
.nav__mega-t{ color:#F2F7FA !important; }
.nav__mega-list a:hover .nav__mega-t{ color:#35B4F2 !important; }

/* ================================================================
   HERO + TOP NAV — reference (Payon-style) layout, logo-blue accent
   ================================================================ */

/* ---- Transparent floating nav at top; pill-group of links ---- */
.nav:not(.nav--solid){ background:transparent !important; border-bottom-color:transparent !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:none !important; }

@media (min-width:769px){
  .nav__container{ position:relative !important; }
  .nav__mobile-search-wrap{ display:none !important; }
  .nav__search--desktop{ display:flex !important; }
  /* centered rounded glass pill-group */
  .nav__links{
    position:absolute !important; left:50% !important; top:50% !important;
    transform:translate(-50%,-50%) !important; width:auto !important;
    background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.09) !important;
    border-radius:100px !important; padding:5px !important; gap:2px !important;
    -webkit-backdrop-filter:blur(12px) !important; backdrop-filter:blur(12px) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px -18px rgba(0,0,0,.6) !important;
  }
  .nav__links > .nav__item > .nav__link{
    border-radius:100px !important; padding:9px 17px !important; color:#C3CDD8 !important;
    font-weight:500 !important; transition:background .2s ease, color .2s ease !important;
  }
  .nav__links > .nav__item > .nav__link:hover,
  .nav__item--dropdown.open > .nav__link{ background:rgba(53,180,242,.16) !important; color:#FFFFFF !important; }
  /* active pill (Home on homepage) — filled azure like the reference */
  .nav__link.is-active{
    background:linear-gradient(180deg,#57C4FA,#2AA8F0) !important; color:#04121E !important;
    box-shadow:0 8px 22px -10px rgba(53,180,242,.6) !important;
  }
}

/* ---- "Schedule a Call" CTA pill (right side) ---- */
.nav__cta{
  display:inline-flex !important; align-items:center; gap:7px; white-space:nowrap;
  background:linear-gradient(180deg,#57C4FA,#2AA8F0) !important; color:#04121E !important;
  padding:9px 18px !important; border-radius:100px !important; font-weight:600 !important;
  font-size:13px !important; text-decoration:none;
  box-shadow:0 10px 30px -10px rgba(53,180,242,.55) !important;
  transition:filter .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.nav__cta:hover{ filter:brightness(1.06); transform:translateY(-1px);
  box-shadow:0 14px 38px -10px rgba(53,180,242,.72) !important; }
.nav__cta svg{ width:15px; height:15px; flex-shrink:0; }

/* ================================================================
   HERO — centered composition + planet-horizon glow arc
   ================================================================ */
.hero{ overflow:hidden !important; }   /* keep base position:sticky so the hero pins on scroll */
.hero__motion, .hero__visual{ display:none !important; }   /* drop the side chart */
.hero__bg{ background:#05070D !important; }

/* the glowing planet arc — sits well below the nav bar */
.hero::after{
  content:""; position:absolute; left:50%; top:210px; transform:translateX(-50%);
  width:min(1700px,180vw); aspect-ratio:1 / 1; border-radius:50%;
  background:#05070D; z-index:1; pointer-events:none;
  box-shadow:
    inset 0 2px 0 1px rgba(175,218,255,.85),
    inset 0 44px 90px -34px rgba(53,180,242,.5),
    0 -8px 130px 12px rgba(53,180,242,.30);
}

.hero__container{ position:relative !important; z-index:2 !important;
  display:flex !important; flex-direction:column !important; align-items:center !important;
  justify-content:center !important; text-align:center !important; }
.hero__content{ max-width:840px !important; margin:0 auto !important; text-align:center !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; }

/* pill badge above heading */
.hero__badge{
  display:inline-flex !important; align-items:center; gap:9px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:#C3CDD8; font-size:13px; font-weight:500; letter-spacing:.01em;
  padding:8px 17px; border-radius:100px; margin-bottom:26px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hero__badge-dot{ width:7px; height:7px; border-radius:50%; background:#35B4F2;
  box-shadow:0 0 10px 1px rgba(53,180,242,.9); flex-shrink:0; }

/* big two-tone centered heading */
.hero__heading{ text-align:center !important; margin:0 auto 22px !important;
  font-size:clamp(2.7rem,6.6vw,5rem) !important; line-height:1.04 !important;
  letter-spacing:-.02em !important; font-weight:700 !important; color:#F2F7FA !important; }
.hero__heading em{ font-style:normal !important; color:#35B4F2 !important;
  background:none !important; -webkit-text-fill-color:#35B4F2 !important; }

.hero__subtext{ text-align:center !important; margin:0 auto 34px !important;
  max-width:560px !important; color:#AEBAC6 !important; font-size:1.02rem !important; }
.hero__actions{ justify-content:center !important; }
.hero .btn--lg{ padding:16px 34px !important; font-size:15px !important; border-radius:100px !important; }
.hero__stats-bar{ position:relative; z-index:2; }

@media (max-width:768px){
  .hero::after{ top:150px; width:210vw; }
  .hero__heading{ font-size:clamp(2.2rem,10vw,3rem) !important; }
}

/* ================================================================
   FEEDBACK FIXES (blue theme round 2)
   ================================================================ */

/* (4) Ribbon labels — larger, brighter, clearly legible */
.services__ribbon-label, .solutions__ribbon-label, .insights__ribbon-label,
.about__ribbon-label, .contact__ribbon-label, .page-ribbon__label,
.home-ribbon__label, .page-ribbon__current{
  font-size:15.5px !important; font-weight:600 !important; letter-spacing:.05em !important;
  color:#5CC8FF !important;
}
.services__ribbon, .solutions__ribbon, .insights__ribbon, .about__ribbon,
.contact__ribbon, .home-ribbon, .page-ribbon{
  background:rgba(53,180,242,.06) !important; border-bottom:1px solid rgba(53,180,242,.14) !important;
}

/* (7) Service-page capabilities grid: 4 cards -> symmetric 2x2 (was 3+1) */
.p-grid{ grid-template-columns:repeat(2,1fr) !important; }
@media (max-width:720px){ .p-grid{ grid-template-columns:1fr !important; } }

/* (2) Mega dropdowns — position under the trigger (not the narrow pill-group),
   give real width, drop the cramped featured aside, breathe */
@media (min-width:769px){
  .nav__item--dropdown{ position:relative !important; }
  .nav__dropdown{
    position:absolute !important; top:calc(100% + 12px) !important;
    left:50% !important; right:auto !important; transform:translateX(-50%) !important;
    width:660px !important; max-width:min(94vw,720px) !important;
    border-radius:18px !important; overflow:hidden;
  }
  .nav__mega{ max-width:100% !important; margin:0 !important; }
  .nav__mega-cols{ grid-template-columns:1fr 1fr !important; gap:36px !important; padding:32px 34px !important; }
  .nav__mega-cols--sol{ grid-template-columns:1fr !important; gap:8px !important; padding:26px 30px !important; }
  .nav__mega-feat{ display:none !important; }
  .nav__mega-h{ font-size:11px !important; letter-spacing:.14em !important; margin-bottom:14px !important; }
  .nav__mega-t{ font-size:14.5px !important; line-height:1.25 !important; margin-bottom:3px !important; }
  .nav__mega-d{ font-size:12.5px !important; line-height:1.5 !important; }
  .nav__mega-list li + li{ margin-top:14px !important; }
  .nav__mega-foot{ padding:16px 34px !important; }
}

/* (5) A little more breathing room inside the glass boxes */
.value-card{ padding:34px 32px !important; }
.sector-card{ padding:26px 26px !important; }
.svc-card{ padding:36px 32px 32px !important; }
.p-card{ padding:34px 30px !important; }
.benefit-card{ padding:30px 30px !important; }
.ecl-flow__step{ padding:28px 24px !important; }
.faq-item{ padding:24px 26px !important; }
.ins-tile{ padding:30px 28px !important; }

/* ================================================================
   Round 3: generous breathing room inside every glass box
   (the borders were hugging the content). Desktop-scoped.
   ================================================================ */
@media (min-width:769px){
  .solutions__feature{ padding:48px 52px !important; }   /* was 56px 0 -> content touched the border */
  .contact__form{ padding:46px 48px !important; }
  .value-card{ padding:38px 34px !important; }
  .sector-card{ padding:32px 30px !important; }
  .svc-card{ padding:40px 36px 36px !important; }
  .ins-card{ padding:36px 32px !important; }
  .p-card{ padding:40px 36px !important; }
  .p-related__card{ padding:36px 32px !important; }
  .benefit-card{ padding:34px 32px !important; }
  .ecl-flow__step{ padding:34px 30px !important; }
  .ecl-ent-feat{ padding:30px 28px !important; }   /* was 18px */
  .ecl-method-card{ padding:34px 30px !important; }
  .ecl-formula{ padding:44px 42px !important; }
  .ins-tile{ padding:36px 32px !important; }
  .ins-featured__inner{ padding:48px 44px !important; }
  .ins-side__card{ padding:32px 30px !important; }
  .ins-side__cta{ padding:34px 30px !important; }
  .about-pillar{ padding:34px 30px !important; }
  .about-stat{ padding:28px 26px !important; }
  .faq-item{ padding:28px 32px !important; }
  .article-pullquote{ padding:30px 36px !important; }
  .p-stat{ padding:28px 26px !important; }        /* was 0 24px -> content touched top/bottom border */
  .p-list{ padding:0 !important; }                /* keep full-width dividers; items provide the inset */
  .p-list__h{ padding:18px 24px !important; }
  .p-list__item{ padding:18px 24px !important; }
}

/* mobile: give the stacked feature box horizontal breathing room too (was padding:*px 0) */
@media (max-width:768px){
  .solutions__feature{ padding:30px 22px !important; }
}

/* ================================================================
   FAQ — two-column accordion cards (native <details>, no JS)
   + symmetric "Our approach" steps
   ================================================================ */
.faq2{ max-width:1060px; margin:44px auto 0; padding:22px; border-radius:26px;
  background:radial-gradient(90% 120% at 50% 0%, rgba(53,180,242,.06), transparent 62%); }
.faq2__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.faq2__col{ display:flex; flex-direction:column; gap:16px; }
.faq-card{ background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden;
  transition:border-color .25s ease, background .25s ease; }
.faq-card[open]{ border-color:rgba(53,180,242,.32);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); }
.faq-card__q{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; cursor:pointer; list-style:none; color:#F2F7FA; font-weight:600;
  font-size:15px; font-family:'Space Grotesk','Inter',sans-serif; line-height:1.35; }
.faq-card__q::-webkit-details-marker{ display:none; }
.faq-card__q::marker{ content:""; }
.faq-card__ic{ position:relative; flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition:background .2s, border-color .2s; }
.faq-card__ic::before, .faq-card__ic::after{ content:""; position:absolute; top:50%; left:50%;
  background:#AEBAC6; transition:opacity .2s ease, background .2s ease; }
.faq-card__ic::before{ width:11px; height:1.6px; transform:translate(-50%,-50%); }
.faq-card__ic::after{ width:1.6px; height:11px; transform:translate(-50%,-50%); }
.faq-card[open] .faq-card__ic{ background:rgba(53,180,242,.16); border-color:rgba(53,180,242,.42); }
.faq-card[open] .faq-card__ic::before, .faq-card[open] .faq-card__ic::after{ background:#57C4FA; }
.faq-card[open] .faq-card__ic::after{ opacity:0; }          /* + -> - when open */
.faq-card__a{ padding:0 22px 22px; color:#AEBAC6; font-size:14px; line-height:1.72; }
.faq2__cta{ display:flex; align-items:center; justify-content:center; gap:16px;
  margin:24px auto 0; width:max-content; max-width:100%; padding:9px 9px 9px 20px; border-radius:100px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); }
.faq2__cta-q{ display:flex; align-items:center; gap:10px; color:#AEBAC6; font-size:14px; }
.faq2__cta-mark{ width:22px; height:22px; border-radius:50%; background:rgba(53,180,242,.16);
  color:#57C4FA; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.faq2__cta-btn{ background:linear-gradient(180deg,#57C4FA,#2AA8F0) !important; color:#04121E !important;
  font-weight:600; font-size:13px; padding:9px 18px; border-radius:100px; white-space:nowrap;
  box-shadow:0 8px 24px -10px rgba(53,180,242,.55); }
@media (max-width:760px){ .faq2__grid{ grid-template-columns:1fr; } .faq2{ padding:6px; } }

/* "Our approach" steps: centered, wrap evenly (4 or 5 steps -> no lonely orphan) */
.p-steps{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important;
  gap:30px 26px !important; }
.p-step{ flex:1 1 220px !important; max-width:300px !important; }
@media (max-width:520px){ .p-step{ flex:1 1 100% !important; max-width:none !important; } }

/* ================================================================
   v70 — batch fixes: search collision, all-page active pill,
   persistent mobile CTA bar, IFRS 18 spotlight
   ================================================================ */

/* (1) Desktop search collision: when the search strip expands, hide the
   centered nav pill-group so the two no longer overlap. */
@media (min-width:769px){
  .nav--searching .nav__links{
    opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
    transition:opacity .2s ease, visibility .2s ease !important;
  }
}

/* (6) Active pill must survive hover / open on the dropdown triggers too,
   and the chevron must stay dark on the filled azure pill. */
@media (min-width:769px){
  .nav__links .nav__item--dropdown.open > .nav__link.is-active,
  .nav__links .nav__item--dropdown > .nav__link.is-active,
  .nav__links .nav__link.is-active:hover{
    background:linear-gradient(180deg,#57C4FA,#2AA8F0) !important; color:#04121E !important;
    box-shadow:0 8px 22px -10px rgba(53,180,242,.6) !important;
  }
  .nav__links .nav__link.is-active .nav__chevron{ color:#04121E !important; }
}

/* (2) Persistent mobile CTA bar, fixed to the bottom of every page on phones */
.mobile-cta{ display:none; }
@media (max-width:768px){
  .mobile-cta{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:900;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg, rgba(7,11,18,0) 0%, rgba(7,11,18,.85) 30%, rgba(7,11,18,.97) 100%);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    pointer-events:none;   /* transparent top fade passes clicks through to content */
  }
  .mobile-cta__btn{
    pointer-events:auto;
    display:flex; align-items:center; justify-content:center; gap:9px;
    width:100%; padding:15px 20px; border-radius:100px; text-decoration:none;
    background:linear-gradient(180deg,#57C4FA,#2AA8F0); color:#04121E;
    font-family:'Space Grotesk','Inter',sans-serif; font-weight:700; font-size:15px;
    box-shadow:0 12px 34px -10px rgba(53,180,242,.7), 0 2px 0 rgba(255,255,255,.25) inset;
  }
  .mobile-cta__btn svg{ width:16px; height:16px; flex-shrink:0; }
  /* reserve space so the fixed bar never hides the footer's last line */
  body{ padding-bottom:80px; }
}

/* (5) IFRS 18 spotlight, a dedicated highlighted section on the IFRS page.
   Renders only when a service defines a "spotlight" in content.json. */
.p-spotlight{
  position:relative; border-radius:24px; overflow:hidden; padding:48px 52px;
  background:linear-gradient(180deg, rgba(53,180,242,.10), rgba(53,180,242,.03));
  border:1px solid rgba(53,180,242,.22);
  box-shadow:0 30px 80px -40px rgba(53,180,242,.4);
}
.p-spotlight__eb{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#5CC8FF; margin-bottom:14px; }
.p-spotlight__h{ font-family:'Space Grotesk','Inter',sans-serif; font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.16; color:#F2F7FA; margin:0 0 14px; max-width:760px; letter-spacing:-.01em; }
.p-spotlight__lede{ color:#AEBAC6; font-size:1.02rem; line-height:1.7; max-width:720px; margin:0 0 32px; }
.p-spotlight__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.p-spotlight__card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:16px; padding:24px 26px; }
.p-spotlight__card h3{ font-family:'Space Grotesk','Inter',sans-serif; font-size:16px; color:#F2F7FA; margin:0 0 8px; }
.p-spotlight__card p{ color:#AEBAC6; font-size:14px; line-height:1.62; margin:0; }
@media (max-width:760px){
  .p-spotlight{ padding:32px 24px; }
  .p-spotlight__grid{ grid-template-columns:1fr; }
}

/* (7) Contact form, multi-select "Areas of interest" chips */
.form__grouplabel{ display:block; margin-bottom:12px; font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:#8EA0B2; }
.form__grouphint{ text-transform:none; letter-spacing:0; font-weight:400; color:#6E7C8B; font-size:12px; }
.form__checks{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form__check{ position:relative; display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09);
  transition:border-color .18s ease, background .18s ease; }
.form__check:hover{ border-color:rgba(53,180,242,.35); background:rgba(53,180,242,.05); }
.form__check input{ position:absolute; opacity:0; width:0; height:0; }
.form__check-box{ flex-shrink:0; width:18px; height:18px; border-radius:5px;
  border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.04);
  position:relative; transition:background .18s ease, border-color .18s ease; }
.form__check-box::after{ content:""; position:absolute; left:5px; top:1.5px; width:5px; height:9px;
  border:solid #04121E; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
  transition:transform .16s ease; }
.form__check input:checked ~ .form__check-box{ background:#35B4F2; border-color:#35B4F2; }
.form__check input:checked ~ .form__check-box::after{ transform:rotate(45deg) scale(1); }
.form__check input:focus-visible ~ .form__check-box{ box-shadow:0 0 0 3px rgba(53,180,242,.3); }
.form__check-txt{ font-size:13.5px; color:#C3CDD8; line-height:1.3; }
.form__check:has(input:checked){ border-color:rgba(53,180,242,.45); background:rgba(53,180,242,.08); }
.form__check:has(input:checked) .form__check-txt{ color:#F2F7FA; }
@media (max-width:520px){ .form__checks{ grid-template-columns:1fr; } }

/* ================================================================
   v71 — hero 2-button, traffic-light ECL stages, mobile fixes,
   search inner-box removal, consistent active nav pill
   ================================================================ */

/* (1) Hero: two buttons side by side; outline secondary */
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.hero .btn--outline{
  background:rgba(255,255,255,.04) !important; color:#EAF1F6 !important;
  border:1px solid rgba(87,196,250,.5) !important;
  padding:16px 30px !important; font-size:15px !important; border-radius:100px !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .2s ease, border-color .2s ease, transform .2s ease !important;
}
.hero .btn--outline:hover{ background:rgba(53,180,242,.14) !important; border-color:#57C4FA !important; transform:translateY(-1px); }
@media (max-width:600px){
  .hero__actions{ flex-direction:column; width:100%; max-width:330px; margin-left:auto; margin-right:auto; }
  .hero__actions .btn{ width:100%; }
}

/* (2) Nizor: three-stage ECL model with green / yellow / red traffic-light colours */
.ecl-tstages{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px; }
.ecl-tstage{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:28px 26px; border-top-width:3px; }
.ecl-tstage__tag{ display:inline-block; font-size:13px; font-weight:600; padding:5px 12px; border-radius:8px; margin-bottom:16px; }
.ecl-tstage__h{ font-family:'Space Grotesk','Inter',sans-serif; font-size:17px; color:#F2F7FA; margin:0 0 6px; }
.ecl-tstage__ecl{ font-size:13.5px; font-weight:600; margin-bottom:16px; }
.ecl-tstage__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.ecl-tstage__list li{ position:relative; padding-left:18px; color:#AEBAC6; font-size:14px; line-height:1.5; }
.ecl-tstage__list li::before{ content:""; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; }
.ecl-tstage--g{ border-top-color:#2ac840; }
.ecl-tstage--g .ecl-tstage__tag{ background:rgba(42,200,64,.14); color:#3ddc84; }
.ecl-tstage--g .ecl-tstage__ecl{ color:#3ddc84; }
.ecl-tstage--g .ecl-tstage__list li::before{ background:#2ac840; }
.ecl-tstage--y{ border-top-color:#ffbe2e; }
.ecl-tstage--y .ecl-tstage__tag{ background:rgba(255,190,46,.14); color:#ffca55; }
.ecl-tstage--y .ecl-tstage__ecl{ color:#ffca55; }
.ecl-tstage--y .ecl-tstage__list li::before{ background:#ffbe2e; }
.ecl-tstage--r{ border-top-color:#ff5f57; }
.ecl-tstage--r .ecl-tstage__tag{ background:rgba(255,95,87,.14); color:#ff7b73; }
.ecl-tstage--r .ecl-tstage__ecl{ color:#ff7b73; }
.ecl-tstage--r .ecl-tstage__list li::before{ background:#ff5f57; }
.ecl-sicr{ margin-top:22px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:26px 28px; }
.ecl-sicr__h{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:600; font-size:15px; color:#F2F7FA; margin-bottom:20px; }
.ecl-sicr__h svg{ width:20px; height:20px; color:#35B4F2; flex-shrink:0; }
.ecl-sicr__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ecl-sicr__item{ position:relative; padding-left:18px; color:#AEBAC6; font-size:14px; }
.ecl-sicr__item::before{ content:""; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; background:#35B4F2; }
@media (max-width:860px){ .ecl-tstages{ grid-template-columns:1fr; } .ecl-sicr__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ecl-sicr__grid{ grid-template-columns:1fr; } }

/* (4) Mobile dropdown: solid opaque background (was translucent -> unreadable) */
@media (max-width:1024px){
  .nav__dropdown,
  .nav__item.open .nav__dropdown{
    background:#0D1420 !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    border:1px solid rgba(255,255,255,.08) !important;
  }
}

/* (5) Mobile: generous padding inside boxes (desktop fix was min-width:769 only) */
@media (max-width:768px){
  .p-stat{ padding:24px 22px !important; }
  .p-card{ padding:28px 24px !important; }
  .p-list__h, .p-list__item{ padding:16px 20px !important; }
  .value-card{ padding:28px 24px !important; }
  .sector-card{ padding:24px 22px !important; }
  .svc-card{ padding:30px 26px !important; }
  .benefit-card{ padding:26px 24px !important; }
  .contact__form{ padding:28px 22px !important; }
  .p-spotlight{ padding:28px 22px !important; }
  .ecl-tstage{ padding:24px 22px !important; }
  .ecl-sicr{ padding:22px 22px !important; }
}

/* (6) Mobile ribbon: show the current page name (was display:none) + truncate safely */
@media (max-width:1024px){
  .page-ribbon__current{ display:inline !important; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .page-ribbon__inner{ min-width:0; }
}

/* (7) Search field: no inner rectangle box (input blends into the pill), mobile + desktop */
.nav__search-input,
.nav__search-input:focus{
  background:transparent !important; border:0 !important;
  box-shadow:none !important; outline:none !important;
}

/* (8) Active nav pill: ALWAYS black text on filled blue, in every state (hover/open/focus) */
@media (min-width:769px){
  .nav__links .nav__link.is-active,
  .nav__links .nav__link.is-active:hover,
  .nav__links .nav__link.is-active:focus,
  .nav__links .nav__item--dropdown.open > .nav__link.is-active,
  .nav__links .nav__item--dropdown > .nav__link.is-active:hover{
    background:linear-gradient(180deg,#57C4FA,#2AA8F0) !important;
    color:#04121E !important;
    box-shadow:0 8px 22px -10px rgba(53,180,242,.6) !important;
  }
  .nav__links .nav__link.is-active,
  .nav__links .nav__link.is-active *,
  .nav__links .nav__link.is-active .nav__chevron{ color:#04121E !important; }
}

/* (6b) Mobile: reserve room so the sticky page-ribbon stops overlapping (cutting)
   the hero breadcrumb/heading beneath it on service pages. */
@media (max-width:768px){
  .p-hero{ padding-top:82px !important; }
}
@media (max-width:768px){
  .ins-article{ padding-top:74px !important; }   /* clear the sticky ribbon on article pages too */
}

/* ================================================================
   v72 — mobile CTA polish, checkbox fill-chip (no tick),
   solid mobile drawer, matched hero button typography
   ================================================================ */

/* (1) Persistent mobile CTA: slimmer + guaranteed dark, readable text */
@media (max-width:768px){
  .mobile-cta{ padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px)) !important; }
  .mobile-cta__btn{ padding:13px 20px !important; font-size:14.5px !important; font-weight:600 !important;
    box-shadow:0 8px 22px -12px rgba(53,180,242,.6), 0 1px 0 rgba(255,255,255,.25) inset !important; }
  body{ padding-bottom:72px !important; }
}
.mobile-cta__btn,
.mobile-cta__btn *{ color:#04121E !important; }
.mobile-cta__btn svg{ stroke:#04121E !important; }

/* (2) Contact form chips: no tick — selecting fills the chip blue, text goes black */
.form__check-box{ display:none !important; }
.form__check{ padding:13px 16px !important; }
.form__check:has(input:checked){ background:#35B4F2 !important; border-color:#35B4F2 !important; box-shadow:none !important; }
.form__check:has(input:checked) .form__check-txt{ color:#04121E !important; font-weight:600 !important; }
.form__check:has(input:focus-visible){ box-shadow:0 0 0 3px rgba(53,180,242,.3) !important; }

/* (3) Mobile nav drawer + dropdowns: SOLID opaque background. The dark-glass
   override (~line 7513) forced .nav__links transparent, so the whole drawer was
   see-through over scrolled content. */
@media (max-width:1024px){
  .nav__links,
  .nav__links.open{
    background:#0A0F1A !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .nav__dropdown,
  .nav__item.open .nav__dropdown{
    background:#0D1420 !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
}

/* (4) Hero buttons: identical typography (both 15px, but one was UPPERCASE + tracked) */
.hero__actions .btn{
  font-size:15px !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  padding:16px 32px !important;
}

/* ================================================================
   v73 — neutralise the browser autofill white/yellow background on
   the dark contact form (Chrome/Edge/Safari paint autofilled inputs
   with a light background that breaks the dark theme).
   ================================================================ */
.contact__form input:-webkit-autofill,
.contact__form input:-webkit-autofill:hover,
.contact__form input:-webkit-autofill:active,
.contact__form textarea:-webkit-autofill,
.contact__form select:-webkit-autofill{
  -webkit-text-fill-color:#EAF1F6 !important;
  -webkit-box-shadow:0 0 0 1000px #11151B inset !important;
  box-shadow:0 0 0 1000px #11151B inset !important;
  caret-color:#EAF1F6 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  /* keep the autofilled bg from ever painting (belt + braces with the inset shadow) */
  transition:background-color 6000000s ease-in-out 0s, color 6000000s ease-in-out 0s !important;
}
.contact__form input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #11151B inset, 0 0 0 3px rgba(53,180,242,.15) !important;
  box-shadow:0 0 0 1000px #11151B inset, 0 0 0 3px rgba(53,180,242,.15) !important;
  border-color:#35B4F2 !important;
}
/* Firefox: it honours background-color directly */
.contact__form input:autofill,
.contact__form textarea:autofill{
  background:#11151B !important; color:#EAF1F6 !important;
}