/* ============================================================
   SolveOrbit — Modern Stylesheet v4
   Charcoal + teal · bold restyle
   ============================================================ */

/* --- Variables -------------------------------------------- */
:root {
  --primary:       #161D23;
  --primary-mid:   #1F2832;
  --primary-light: #2A3540;
  --accent:        #B8991D;
  --accent-dark:   #9A7F17;
  --accent-pale:   #EFE7C2;
  --accent-bright: #B8991D;
  --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(184,153,29,.28), 0 10px 40px rgba(184,153,29,.30);
  --grad-teal: linear-gradient(135deg, #B8991D 0%, #B8991D 100%);
  --grad-dark: linear-gradient(160deg, #1C2024 0%, #141619 60%, #101113 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(184,153,29,.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(184,153,29,.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(184,153,29,.85); }
.section-label--light::before { background: rgba(184,153,29,.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(184,153,29,.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(184,153,29,.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(184,153,29,.1); color: var(--accent); border: 1px solid rgba(184,153,29,.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(184,153,29,.1); color: var(--accent); border: 1px solid rgba(184,153,29,.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(184,153,29,.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(184,153,29,.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(184,153,29,.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(184,153,29,.12);
  border: 1px solid rgba(184,153,29,.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(184,153,29,.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(184,153,29,.1); border-color: rgba(184,153,29,.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(184,153,29,.06);
  background: radial-gradient(circle, rgba(184,153,29,.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(184,153,29,.08);
  border: 1px solid rgba(184,153,29,.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(184,153,29,.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(184,153,29,.15); }
.benefit-card__num { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 400; color: rgba(184,153,29,.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(184,153,29,.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(184,153,29,.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(184,153,29,.1);   color: var(--accent-dark); }
.insight-tag--esg      { background: rgba(34,197,94,.1);   color: #15803d; }
.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(184,153,29,.14) 0%, transparent 65%);
}
.insight-card__visual-icon {
  position: relative;
  z-index: 1;
  width: 72px; height: 72px;
  background: rgba(184,153,29,.1);
  border: 1px solid rgba(184,153,29,.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(184,153,29,.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(184,153,29,.1) 0%, transparent 60%);
}
.insight-card__top-icon {
  position: relative;
  z-index: 1;
  width: 48px; height: 48px;
  background: rgba(184,153,29,.1);
  border: 1px solid rgba(184,153,29,.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(184,153,29,.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='%23B8991D' fill-opacity='.12'/%3E%3Cpath d='M5 8l2 2 4-4' stroke='%23B8991D' 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(184,153,29,.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 70% at 10% 80%, rgba(184,153,29,.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(184,153,29,.1);
  border: 1px solid rgba(184,153,29,.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(184,153,29,.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='%23B8991D' fill-opacity='.12'/%3E%3Cpath d='M5 8l2 2 4-4' stroke='%23B8991D' 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(184,153,29,.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(184,153,29,.25) 40%, rgba(184,153,29,.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(184,153,29,.15);
}
.ecl-ent-feat__icon {
  width: 32px;
  height: 32px;
  background: rgba(184,153,29,.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(184,153,29,.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(184,153,29,.32);
}
.btn--primary:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: 0 14px 44px rgba(184,153,29,.46);
}
.nav__link--cta {
  background: var(--grad-teal) !important;
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(184,153,29,.32);
}
.nav__link--cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(184,153,29,.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(184,153,29,.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(184,153,29,.26), transparent 70%),
    radial-gradient(36% 46% at 10% 80%, rgba(184,153,29,.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(184,153,29,.16);
  border-radius: 50%;
}
.hero__orbits .ring--1 { width: 320px; height: 320px; }
.hero__orbits .ring--2 { width: 520px; height: 520px; border-color: rgba(184,153,29,.10); }
.hero__orbits .ring--3 { width: 760px; height: 760px; border-color: rgba(184,153,29,.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(184,153,29,.8); }
.hero__orbits .node--2 { width: 8px;  height: 8px;  left: 260px; top: -4px; background: var(--accent);        box-shadow: 0 0 14px 2px rgba(184,153,29,.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(184,153,29,.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(184,153,29,.3);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(184,153,29,.16);
}
.insight-card--featured:hover { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(184,153,29,.16); }

/* ---- Dark sections: ambient teal glow ---- */
.solutions   { background: radial-gradient(58% 80% at 85% 8%,  rgba(184,153,29,.12), transparent 60%), var(--primary); }
.contact     { background: radial-gradient(55% 75% at 12% 92%, rgba(184,153,29,.12), transparent 60%), var(--primary); }
.sol-benefits, .ecl-enterprise, .ecl-module--dark {
  background: radial-gradient(50% 70% at 80% 12%, rgba(184,153,29,.10), transparent 62%), var(--primary);
}
.sol-card--featured { background: rgba(184,153,29,.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(184,153,29,.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(184,153,29,.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(184,153,29,.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(184,153,29,.55); } 50% { box-shadow: 0 0 24px 6px rgba(184,153,29,.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(184,153,29,.18);
}
.lighthero .hero, .lighthero .hero__bg {
  background: linear-gradient(168deg, #FFFFFF 0%, #EEF4F6 55%, #E4EEF1 100%);
}
.lighthero .hero__bg::before {
  background:
    radial-gradient(44% 54% at 80% 24%, rgba(184,153,29,.16), transparent 70%),
    radial-gradient(38% 48% at 8% 82%, rgba(184,153,29,.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(184,153,29,.20); }
.lighthero .hero__orbits .ring--2 { border-color: rgba(184,153,29,.14); }
.lighthero .hero__orbits .ring--3 { border-color: rgba(184,153,29,.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(184,153,29,.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: #9A7F17;
  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(3, 1fr);
  gap: 32px;
}

/* 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: #9A7F17; 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(184,153,29,.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(184,153,29,.4);
  background: rgba(184,153,29,.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: #9A7F17; 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(184,153,29,.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(184,153,29,.18);
  overflow: hidden;
}
.nav__mega-feat-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 70% 50%, rgba(184,153,29,.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(184,153,29,.35);
  border-radius: 50%;
}
.nav__mega-feat-orbit--mid {
  width: 150px; height: 150px;
  margin: -75px 0 0 -75px;
  border-color: rgba(184,153,29,.20);
}
.nav__mega-feat-orbit--out {
  width: 220px; height: 220px;
  margin: -110px 0 0 -110px;
  border-color: rgba(184,153,29,.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(184,153,29,.18);
}
.nav__mega-feat-art--alt::before {
  background:
    radial-gradient(60% 80% at 30% 60%, rgba(184,153,29,.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: #9A7F17; 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(184,153,29,.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: #9A7F17; 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(184,153,29,.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(184,153,29,.35);
  border-bottom: 1px solid rgba(184,153,29,.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(184,153,29,.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(184,153,29,.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: #4ade80; }
.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(184,153,29,.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(184,153,29,.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: #2E8B57; }
.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: #059669 !important; border-color: #059669 !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: #059669; }

/* ============================================================
   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(184, 153, 29, 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(184, 153, 29, 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(184, 153, 29, 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(184, 153, 29, 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(184, 153, 29, 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(184, 153, 29, 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(184, 153, 29, 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(184, 153, 29, 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(184, 153, 29, 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(184, 153, 29, 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 {
    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 inline below the bar */
  .nav__search--mobile .nav__search-results {
    position: static;
    width: 100%;
    max-width: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 10px;
    box-shadow: none;
    max-height: 60vh;
    transform: none;
    transition: opacity 180ms ease, visibility 180ms ease;
  }
  .nav__search--mobile.is-open .nav__search-results { transform: none; }
  .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(184, 153, 29, 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); }
}