/* ============================================================
   Prozone AI - site styles
   Brand: Navy #0E2A47, Teal #1FA8B8, on warm off-white.
   ============================================================ */

:root {
  --navy-900: #0a1f36;
  --navy-800: #0e2a47;
  --navy-700: #163657;
  --navy-600: #21476e;
  --navy-500: #2f5a85;

  --teal-700: #14808e;
  --teal-600: #1fa8b8;
  --teal-500: #3fbcc9;
  --teal-100: #d6eef1;
  --teal-50:  #ebf6f8;

  --bg:        #f5f6f4;
  --bg-soft:   #ecedea;
  --bg-card:   #ffffff;
  --bg-dark:   #0a1f36;

  --ink-900: #0a1428;
  --ink-700: #1f2a3d;
  --ink-500: #4a5468;
  --ink-400: #6b7488;
  --ink-300: #9aa1b1;
  --ink-200: #c6cad4;
  --ink-100: #e2e4e9;

  --border:        #d9dbe0;
  --border-strong: #c1c4cc;
  --border-dark:   #1a3454;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  --maxw: 1240px;
  --gutter: 32px;
  --header-h: 100px;

  --shadow-card: 0 1px 0 rgba(10,20,40,0.04), 0 1px 3px rgba(10,20,40,0.06);
  --shadow-pop:  0 12px 32px -12px rgba(10,20,40,0.18), 0 2px 6px rgba(10,20,40,0.06);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

/* Larger-monitor uplift (≥2100px viewport — ultrawide, 4K, split-screen on ultrawide).
   Modest global bump for typography/spacing; aggressive bump specifically for the home hero.
   Laptops and 1080p desktops are unaffected. */
@media (min-width: 2100px) {
  :root { --maxw: 1560px; }

  /* Typography — modest global bump */
  body { font-size: 18px; }
  h1 { font-size: clamp(54px, 3vw, 68px); }
  h2 { font-size: clamp(34px, 2.1vw, 46px); }
  h3 { font-size: clamp(24px, 1.5vw, 32px); }
  h4 { font-size: clamp(19px, 1.2vw, 24px); }
  .lead { font-size: clamp(22px, 1.35vw, 28px); }
  .eyebrow { font-size: 13px; }
  .page-banner h1 { font-size: clamp(48px, 2.8vw, 60px); }

  /* Section + hero spacing */
  .section { padding: 128px 0; }
  .section--tight { padding: 80px 0; }

  /* Nav + buttons */
  .nav a { font-size: 15px; padding: 10px 16px; }
  .nav-cta { padding: 11px 20px !important; }
  .btn { font-size: 15px; padding: 11px 22px; }

  /* ===== HERO gets dedicated uplift ===== */
  .hero { padding: 80px 0 64px; }
  .hero > .container { max-width: 1720px; }
  .hero__inner { grid-template-columns: 1.1fr 1fr; gap: 80px; }
  .hero h1 { font-size: clamp(54px, 3.4vw, 76px); line-height: 1.08; }
  .hero .lead { font-size: clamp(22px, 1.4vw, 28px); line-height: 1.5; max-width: 60ch; }
  .hero__ctas { gap: 16px; }
  .hero .btn { font-size: 16px; padding: 14px 28px; }

  /* Header bar wider + tighter left padding on big screens — see the dedicated
     @media (min-width: 2100px) block lower in this file, after the default
     .site-header__inner rule. */
}

html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink-900);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'ss01', 'cv11';
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* Anchor scroll offset — keep targets below the sticky header */
html { scroll-padding-top: calc(var(--header-h) + 24px); scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ---------- Scroll-triggered fade-in (JS-controlled via IntersectionObserver) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s cubic-bezier(0.16, 1, 0.3, 1), transform .7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Card hover polish (across the site) ---------- */
.work-card,
.case-tile,
.team-card,
.eco-card,
.lex-feature,
.audience {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.work-card:hover,
.team-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 12px 28px -16px rgba(10, 20, 40, 0.18);
  transform: translateY(-2px);
}
.lex-feature:hover,
.eco-card:hover {
  background: #fafbfa;
}
.case-tile:hover {
  background: #fafbfa;
}
.audience:hover {
  border-color: var(--teal-600);
  transform: translateY(-2px);
}
.why__item .num {
  transition: border-color .25s ease, color .25s ease;
}
.why__item:hover .num {
  border-top-color: var(--teal-600);
  color: var(--navy-800);
}

/* Link arrow micro-interaction on card hover */
.work-card .link-arrow,
.case-link {
  transition: color .2s ease;
}
.work-card:hover .link-arrow,
.work-card:hover .link-arrow .arr {
  color: var(--teal-700);
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: 96px 0;
  border-top: 1px solid var(--border);
}
.section--dark {
  background: var(--bg-dark);
  color: #e9ecf2;
  border-top: 1px solid var(--border-dark);
}
.section--soft { background: var(--bg-soft); }
.section--tight { padding: 64px 0; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--navy-800);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
h1 { font-size: clamp(28px, 3.1vw, 42px); letter-spacing: -0.025em; }
h2 { font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.028em; }
h3 { font-size: 20px; letter-spacing: -0.015em; }
p  { margin: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-700);
  font-weight: 500;
}
.section--dark .eyebrow { color: var(--teal-500); }

.lead {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 62ch;
}
.section--dark .lead { color: #b9c2d1; }

.mono { font-family: var(--font-mono); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 246, 244, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* Wide-screen header: pull the logo toward the left edge while the rest of the
   page stays inside the centered 1240px container. Placed AFTER the default rule
   so it actually wins on source order (the default uses the same specificity).
   Only active on ultrawide / very-large monitors — laptops and 1080p desktops
   keep the default 1240px header. */
@media (min-width: 2100px) {
  .site-header__inner {
    max-width: 1800px;
    padding-left: 24px;
    padding-right: 24px;
  }
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg, .brand img { height: 68px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.nav a {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--ink-700);
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--navy-800); background: var(--bg-soft); }
.nav a.is-active {
  color: var(--teal-700);
  font-weight: 600;
  position: relative;
}
.nav a.is-active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--teal-700);
  border-radius: 2px;
}
.nav-cta.is-active { background: var(--teal-600) !important; color: #fff !important; }
.nav-cta.is-active::after { display: none; }
.nav-cta {
  background: var(--navy-800);
  color: #fff !important;
  padding: 9px 16px !important;
  margin-left: 8px;
}
.nav-cta:hover { background: var(--navy-700) !important; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  color: var(--navy-800);
  padding: 0;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle:hover { background: var(--bg-soft); }

@media (max-width: 800px) {
  html.js .nav-toggle { display: inline-flex; }
  html.js .nav {
    display: none;
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    background: rgba(245, 246, 244, 0.98);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 24px 24px;
    gap: 4px;
  }
  html.js .nav.is-open { display: flex; }
  html.js .nav a { padding: 12px 14px; font-size: 16px; }
  html.js .nav a.is-active::after { display: none; }
  html.js .nav a.is-active { border-left: 2px solid var(--teal-700); padding-left: 12px; }
  html.js .nav-cta { margin-left: 0 !important; margin-top: 8px; text-align: center; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  letter-spacing: -0.005em;
}
.btn-primary { background: var(--navy-800); color: #fff; }
.btn-primary:hover { background: var(--navy-700); }
.btn-secondary {
  background: transparent;
  color: var(--navy-800);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--navy-800); background: rgba(14,42,71,0.04); }
.btn-teal { background: var(--teal-600); color: #fff; }
.btn-teal:hover { background: var(--teal-700); }
.section--dark .btn-secondary,
.lex-hero .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.25); }
.section--dark .btn-secondary:hover,
.lex-hero .btn-secondary:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.5); }

.btn .arr { transition: transform .15s; }
.btn:hover .arr { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--teal-700);
  font-weight: 500;
  font-size: 14px;
}
.link-arrow:hover { color: var(--navy-800); }
.link-arrow .arr { transition: transform .15s; }
.link-arrow:hover .arr { transform: translateX(3px); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--final { background: rgba(31,168,184,0.12); color: var(--teal-700); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 56px 0 40px;
  overflow: hidden;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
}
.hero > .container { width: 100%; }
.hero__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
  width: 100%;
}
.hero h1 { margin-bottom: 20px; }
.hero .lead { margin-bottom: 28px; max-width: 56ch; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__visual {
  position: relative;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__visual { max-width: 420px; }
  .section { padding: 72px 0; }
}

/* hero meta strip */
.hero-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.hero-strip__item {
  background: var(--bg);
  padding: 18px 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.hero-strip__item .k { font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); letter-spacing: 0.08em; text-transform: uppercase; }
.hero-strip__item .v { font-size: 15px; color: var(--ink-900); font-weight: 500; }
@media (max-width: 800px) {
  .hero-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Solution cards ---------- */
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 32px; margin-bottom: 48px; flex-wrap: wrap;
}
.section-head h2 { max-width: 40ch; }
.section-head .lead { max-width: 60ch; }


/* ---------- Work cards ---------- */
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.work-grid > .work-card:first-child {
  grid-column: 1 / -1;
}
.work-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 320px;
  transition: border-color .2s, transform .2s;
}
.work-card:hover { border-color: var(--border-strong); }
.work-card__media {
  background: var(--navy-800);
  position: relative;
  overflow: hidden;
}
.work-card__body {
  padding: 36px 36px;
  display: flex; flex-direction: column; gap: 14px;
  justify-content: space-between;
}
.work-card__head { display: flex; flex-direction: column; gap: 12px; }
.work-card .meta-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-400); letter-spacing: 0.08em; text-transform: uppercase;
}
.work-card h3 { font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; }
.work-card p { color: var(--ink-500); font-size: 15px; line-height: 1.55; }
.work-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.work-card__tags span {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-soft); color: var(--ink-700);
  padding: 4px 8px; border-radius: 3px;
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card { grid-template-columns: 1fr; min-height: 0; }
  .work-card__media { min-height: 220px; }
}

/* ---------- Process ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  overflow: hidden;
}
.process__step {
  background: var(--bg-dark);
  padding: 28px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.process__step .num {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--teal-500);
  letter-spacing: 0.12em;
}
.process__step h4 { color: #fff; font-size: 16px; line-height: 1.25; }
.process__step p { color: #98a3b5; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 1100px) {
  .process { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .process { grid-template-columns: 1fr 1fr; }
}

/* ---------- Why grid ---------- */
.why {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.why__item { display: flex; flex-direction: column; gap: 10px; }
.why__item .num {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--teal-700);
  letter-spacing: 0.1em;
  padding-bottom: 12px;
  border-top: 1px solid var(--navy-800);
  padding-top: 12px;
  display: block;
}
.why__item h4 { font-size: 17px; }
.why__item p { font-size: 14px; color: var(--ink-500); }
@media (max-width: 900px) { .why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .why { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.contact-info dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 18px; }
.contact-info dt {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-400); letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 4px;
}
.contact-info dd { margin: 0; font-size: 15px; color: var(--ink-900); }
.contact-info a { color: var(--teal-700); }

.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-400); letter-spacing: 0.08em; text-transform: uppercase;
}
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 15px; padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-900);
  transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal-600);
  box-shadow: 0 0 0 3px rgba(31,168,184,0.15);
}
.field textarea { min-height: 120px; resize: vertical; font-family: inherit; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-900);
  color: #b9c2d1;
  padding: 72px 0 32px;
  border-top: 1px solid var(--border-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.site-footer h5 {
  color: #fff; font-size: 13px; margin: 0 0 16px;
  letter-spacing: 0.05em; text-transform: uppercase;
  font-family: var(--font-mono); font-weight: 500;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer li a { font-size: 14px; color: #b9c2d1; transition: color .15s; }
.site-footer li a:hover { color: #fff; }
.site-footer .brand-block .desc { font-size: 14px; max-width: 36ch; margin-top: 12px; }
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: #7c889b;
  flex-wrap: wrap; gap: 12px;
  font-family: var(--font-mono);
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Page banner (sub-pages) ---------- */
.page-banner .eyebrow { margin-bottom: 16px; display: block; }
.page-banner h1 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 18px; line-height: 1.18; text-wrap: balance; }
.page-banner .lead { max-width: 60ch; }

/* ---------- Lex AI page styles ---------- */
.lex-hero {
  background: var(--bg-dark);
  color: #e9ecf2;
  position: relative; overflow: hidden;
}
.lex-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 80% 20%, rgba(31,168,184,0.12), transparent 50%);
  pointer-events: none;
}
.lex-hero .container { position: relative; }
.lex-hero h1 { color: #fff; }
.lex-hero .lead { color: #b9c2d1; }

.lex-features {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.lex-feature {
  background: var(--bg-card); padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.lex-feature .ico { width: 28px; height: 28px; color: var(--teal-700); }
.lex-feature h4 { font-size: 18px; color: var(--navy-800); }
.lex-feature p { color: var(--ink-500); font-size: 14.5px; }
@media (max-width: 800px) { .lex-features { grid-template-columns: 1fr; } }

.flow {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.flow__step {
  padding: 28px 20px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.flow__step:last-child { border-right: none; }
.flow__step .num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--teal-700); letter-spacing: 0.1em;
}
.flow__step h4 { font-size: 15px; color: var(--navy-800); }
.flow__step p { font-size: 13px; color: var(--ink-500); line-height: 1.5; }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr 1fr; }
  .flow__step { border-right: none; border-bottom: 1px solid var(--border); }
}

.audience-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.audience {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 20px 18px;
  background: var(--bg-card);
  font-size: 14px; color: var(--ink-700);
}
.audience .ico { color: var(--teal-700); margin-bottom: 10px; }
@media (max-width: 900px) { .audience-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 540px) { .audience-grid { grid-template-columns: 1fr 1fr; } }

.disclaimer {
  background: var(--bg-soft);
  border-left: 3px solid var(--teal-600);
  padding: 20px 24px;
  font-size: 14.5px; color: var(--ink-700);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.disclaimer strong { color: var(--navy-800); }

/* ---------- Generic content lists ---------- */
.kv-list {
  display: grid; gap: 16px;
}
.kv-list .row {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 24px; padding: 16px 0;
  border-top: 1px solid var(--border);
}
.kv-list .row:last-child { border-bottom: 1px solid var(--border); }
.kv-list .k {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-400); letter-spacing: 0.08em; text-transform: uppercase;
}
.kv-list .v { font-size: 15px; color: var(--ink-900); }
@media (max-width: 700px) {
  .kv-list .row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy-800);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
  font-size: 14px;
}
.skip-link:focus { left: 0; }

/* ---------- CTA strip (used on most pages) ---------- */
.cta-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.cta-strip__copy h2 { margin-bottom: 14px; }
.cta-strip__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 800px) {
  .cta-strip { grid-template-columns: 1fr; gap: 24px; }
  .cta-strip__actions { justify-content: flex-start; }
}

/* ---------- About row (company page) ---------- */
.about-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
}
.about-row__head h2 { margin-top: 14px; font-size: 32px; }
.about-row__copy {
  display: flex; flex-direction: column; gap: 20px;
  color: var(--ink-700);
  font-size: 16.5px; line-height: 1.65;
  max-width: 62ch;
}
@media (max-width: 800px) {
  .about-row { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Ecosystem grid (company page) ---------- */
.eco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.eco-card {
  background: var(--bg-card);
  padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.eco-card h3 { font-size: 22px; }
.eco-card p { color: var(--ink-500); font-size: 14.5px; }
@media (max-width: 800px) {
  .eco-grid { grid-template-columns: 1fr; }
}

/* ---------- Middle East detail (company page) ---------- */
.me-detail {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
.me-detail__copy {
  display: flex; flex-direction: column; gap: 20px;
  color: #b9c2d1; font-size: 16px; line-height: 1.65;
}
@media (max-width: 800px) {
  .me-detail { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Team / leadership (company page) ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.team-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  background: var(--bg-card);
}
.team-card__head {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 16px;
}
.team-card__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--navy-800);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 22px;
  flex-shrink: 0;
}
.team-card__avatar--teal { background: var(--teal-600); }
.team-card__name { font-size: 18px; font-weight: 600; color: var(--navy-800); }
.team-card__role {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-400);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.team-card__body { color: var(--ink-500); font-size: 14.5px; }
.team-card__body a { color: var(--teal-700); }
@media (max-width: 700px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ---------- KV-list title row modifier ---------- */
.kv-list .v.is-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---------- Lex AI hero override ---------- */
.lex-hero { border-top: none; }

/* ---------- Form footer note ---------- */
.form-actions {
  display: flex; gap: 12px; align-items: center;
  margin-top: 8px; flex-wrap: wrap;
}
.form-actions .note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-400);
  letter-spacing: 0.06em;
}
.form-actions [data-form-status] {
  flex-basis: 100%;
  font-size: 13.5px;
  color: var(--ink-500);
  margin: 4px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background .2s ease, color .2s ease;
}
.form-actions [data-form-status]:empty {
  padding: 0;
  margin: 0;
}
.form-actions [data-form-status][data-state="success"] {
  color: var(--teal-700);
  background: rgba(31, 168, 184, 0.10);
  border: 1px solid rgba(31, 168, 184, 0.25);
}
.form-actions [data-form-status][data-state="error"] {
  color: #b03030;
  background: rgba(176, 48, 48, 0.06);
  border: 1px solid rgba(176, 48, 48, 0.20);
}
.form-actions .note a { color: var(--teal-700); }

/* Honeypot field */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

/* ---------- Contact-info border separator ---------- */
.contact-info dl > .is-divider {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.contact-info dd.is-name { font-weight: 600; color: var(--navy-800); margin-top: 6px; }
.contact-info dd.is-role {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-400);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Brand logos (replaces inline sizing on every page) ---------- */
.brand-logo  { height: 68px; width: auto; }
.footer-logo { height: 28px; width: auto; filter: brightness(0) invert(1); }

/* ---------- Eyebrow defaults inside section heads ---------- */
.section-head .eyebrow,
.about-row__head .eyebrow {
  display: block;
  margin-bottom: 14px;
}
.hero .eyebrow     { display: block; margin-bottom: 24px; }
.lex-hero .eyebrow { display: block; margin-bottom: 20px; }

/* Section-head subhead h2 sizing on the company page */
.about-row__head h2 { font-size: 32px; }

/* ---------- Hero visual size ---------- */
.hero__visual svg { max-width: 380px; }

/* ---------- Work-card tag spacing ---------- */
.work-card__tags { margin-bottom: 18px; }

/* ---------- Button row utility ---------- */
.btn-row     { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-row--mt { margin-top: 48px; }

/* ---------- Lex AI hero layout ---------- */
.lex-hero__layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 800px) {
  .lex-hero__layout { grid-template-columns: 1fr; gap: 40px; }
}
.lex-hero h1     { margin-bottom: 24px; }
.lex-hero .lead  { margin-bottom: 32px; }
.lex-hero__mock {
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
}

/* ---------- Flow card (Lex AI how it works) ---------- */
.flow {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---------- Audience grid item details ---------- */
.audience h4 { font-size: 15px; color: var(--navy-800); margin: 4px 0 6px; }
.audience p  { color: var(--ink-500); font-size: 13px; }

/* ---------- KV-list dark variant (Lex AI roadmap) ---------- */
.kv-list--dark { border-color: rgba(255, 255, 255, 0.1); }
.kv-list--dark .row { border-color: rgba(255, 255, 255, 0.1); }
.kv-list--dark .row:last-child { border-bottom-color: rgba(255, 255, 255, 0.1); }
.kv-list--dark .k { color: var(--teal-500); }
.kv-list--dark .v { color: #fff; }

/* ---------- Compact case study layout (solutions.html) ---------- */
.case-summary {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-700);
  max-width: 75ch;
  margin: 28px 0 0;
}

/* ---------- Engagement cards (solutions.html client engagements) ---------- */
.engagements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.engagement-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.engagement-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 12px 28px -16px rgba(10, 20, 40, 0.18);
  transform: translateY(-2px);
}
.engagement-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.engagement-card__head h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--navy-800);
  margin: 0;
}
.engagement-card__meta {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px 16px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.engagement-card__meta dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0;
  padding-top: 2px;
}
.engagement-card__meta dd {
  margin: 0;
  color: var(--ink-700);
}
.engagement-card__summary {
  font-size: 14.5px;
  color: var(--ink-500);
  line-height: 1.6;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
@media (max-width: 800px) {
  .engagements-grid { grid-template-columns: 1fr; }
}
.case-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 32px;
}
.case-tile {
  background: var(--bg-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section--soft .case-tile { background: #fafbfa; }
.case-tile h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-700);
  font-weight: 500;
  margin: 0;
}
.case-tile p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
}
.case-link { display: inline-flex; margin-top: 28px; }
@media (max-width: 800px) {
  .case-tiles { grid-template-columns: 1fr; }
}

/* ============================================================
   MOTION & INTERACTION LAYER
   - Scroll-reveal animations (IntersectionObserver-driven)
   - Hero entrance animation (index.html only)
   - Card hover lift transitions
   - Subtle SVG pulse on hero indicator dots
   - All gated on prefers-reduced-motion: no-preference
   - All scoped to html.js so no-JS users see content immediately
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Section-level reveal (auto-applies to all main > section, except .hero) ---- */
  html.js main > section:not(.hero):not(.is-visible),
  html.js main > .hero-strip:not(.is-visible) {
    opacity: 0;
    transform: translateY(18px);
  }
  html.js main > section,
  html.js main > .hero-strip {
    transition: opacity .65s ease-out, transform .65s ease-out;
    will-change: opacity, transform;
  }
  html.js main > section.is-visible,
  html.js main > .hero-strip.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ---- Stagger children (applied to grid containers via JS) ---- */
  html.js .stagger:not(.is-visible) > * {
    opacity: 0;
    transform: translateY(10px);
  }
  html.js .stagger > * {
    transition: opacity .55s ease-out, transform .55s ease-out;
  }
  html.js .stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }
  html.js .stagger.is-visible > *:nth-child(1)  { transition-delay: 40ms; }
  html.js .stagger.is-visible > *:nth-child(2)  { transition-delay: 100ms; }
  html.js .stagger.is-visible > *:nth-child(3)  { transition-delay: 160ms; }
  html.js .stagger.is-visible > *:nth-child(4)  { transition-delay: 220ms; }
  html.js .stagger.is-visible > *:nth-child(5)  { transition-delay: 280ms; }
  html.js .stagger.is-visible > *:nth-child(6)  { transition-delay: 340ms; }
  html.js .stagger.is-visible > *:nth-child(7)  { transition-delay: 400ms; }
  html.js .stagger.is-visible > *:nth-child(8)  { transition-delay: 460ms; }
  html.js .stagger.is-visible > *:nth-child(n+9){ transition-delay: 520ms; }

  /* ---- Hero entrance (index.html) ---- */
  html.js .hero .eyebrow,
  html.js .hero h1,
  html.js .hero .lead,
  html.js .hero__ctas,
  html.js .hero__visual {
    opacity: 0;
    transform: translateY(14px);
    animation: hero-in .85s cubic-bezier(.16, 1, .3, 1) forwards;
  }
  html.js .hero .eyebrow  { animation-delay: 0ms; }
  html.js .hero h1        { animation-delay: 80ms; }
  html.js .hero .lead     { animation-delay: 180ms; }
  html.js .hero__ctas     { animation-delay: 280ms; }
  html.js .hero__visual   { animation-delay: 120ms; animation-duration: 1.1s; }

  @keyframes hero-in {
    to { opacity: 1; transform: translateY(0); }
  }

  /* ---- SVG indicator-dot pulse on hero ----
     Direct g > circle children of the hero SVG only — not pattern circles inside <defs>. */
  html.js .hero__visual svg > g > circle {
    animation: dot-pulse 2.8s ease-in-out infinite;
    transform-origin: center;
  }
  html.js .hero__visual svg > g > circle:nth-of-type(2) {
    animation-delay: 1.4s;
  }
  @keyframes dot-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
  }

  /* ---- Subtle card hover lift across the design system ---- */
  html.js .eco-card,
  html.js .lex-feature,
  html.js .case-tile,
  html.js .audience,
  html.js .why__item,
  html.js .team-card,
  html.js .work-card {
    transition: transform .22s ease-out, box-shadow .22s ease-out,
                border-color .2s ease-out, background-color .2s ease-out;
  }
  html.js .eco-card:hover,
  html.js .lex-feature:hover,
  html.js .case-tile:hover,
  html.js .audience:hover {
    transform: translateY(-2px);
  }
  html.js .work-card:hover,
  html.js .team-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -18px rgba(10, 20, 40, 0.20);
  }
  html.js .why__item:hover .num {
    color: var(--teal-600);
  }

  /* ---- Hero CTA + button arrows: keep micro-interaction crisp ---- */
  html.js .btn { transition: background .15s, color .15s, border-color .15s, transform .12s; }
  html.js .btn:active { transform: translateY(1px); }
}

/* ---- Reduced-motion users: animations are disabled, everything appears immediately ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================
   VISUAL DEPTH LAYER  (v2)
   Spotlight cards, scroll progress, animated counters,
   richer page-banners, decorative SVG patterns,
   compact hero meta, marquee, timeline visualizations.
   ============================================================ */

/* ---- Scroll progress bar at top of viewport ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--teal-600), var(--teal-500), var(--teal-700));
  z-index: 100;
  transition: width 80ms linear;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(31, 168, 184, 0.45);
}

/* ---- Hero glow / mesh decoration ---- */
.hero {
  position: relative;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -10% -10% 0 -10%;
  background:
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(31, 168, 184, 0.10), transparent 65%),
    radial-gradient(ellipse 40% 35% at 15% 75%, rgba(14, 42, 71, 0.08), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(14, 42, 71, 0.06) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* ---- Hero visual enhancements (animated SVG elements) ---- */
.hero__visual { position: relative; }
.hero__visual::before {
  content: '';
  position: absolute;
  inset: -8%;
  background: radial-gradient(circle at center, rgba(31, 168, 184, 0.12), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
  animation: glow-breathe 7s ease-in-out infinite;
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.04); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Animated rectangles in hero SVG  */
  html.js .hero__visual svg > g:nth-of-type(1) > rect:nth-child(1),
  html.js .hero__visual svg > g:nth-of-type(1) > rect:nth-child(2),
  html.js .hero__visual svg > g:nth-of-type(1) > rect:nth-child(8),
  html.js .hero__visual svg > g:nth-of-type(1) > rect:nth-child(9) {
    animation: tile-fade 6s ease-in-out infinite;
    transform-origin: center;
  }
  html.js .hero__visual svg > g:nth-of-type(1) > rect:nth-child(2) { animation-delay: 0.6s; }
  html.js .hero__visual svg > g:nth-of-type(1) > rect:nth-child(8) { animation-delay: 1.2s; }
  html.js .hero__visual svg > g:nth-of-type(1) > rect:nth-child(9) { animation-delay: 1.8s; }
  @keyframes tile-fade {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.7; }
  }
  /* Animated connection paths */
  html.js .hero__visual svg path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: draw-path 3.5s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards,
               path-flow 5s ease-in-out 4s infinite;
  }
  @keyframes draw-path {
    to { stroke-dashoffset: 0; }
  }
  @keyframes path-flow {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
  }
}

/* ---- Page banner v2 — compact, with visual on the right ---- */
.page-banner {
  position: relative;
  overflow: hidden;
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--border);
}
.page-banner__inner {
  display: grid;
  grid-template-columns: 2.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.page-banner__copy { max-width: none; }
.page-banner__visual {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.page-banner__visual svg { max-width: 380px; width: 100%; }
.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(14, 42, 71, 0.06) 1px, transparent 0);
  background-size: 24px 24px;
  mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.page-banner > .container { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .page-banner__inner { grid-template-columns: 1fr; gap: 32px; }
  .page-banner__visual { min-height: 180px; max-width: 360px; margin: 0 auto; }
  .page-banner { padding: 48px 0 36px; }
}

/* Page banner meta-strip below the headline */
.banner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-500);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.banner-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.banner-meta__item::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--teal-600);
  border-radius: 1px;
}

/* ---- Spotlight card (cursor-tracked highlight) ---- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html.js .spotlight {
    position: relative;
    overflow: hidden;
  }
  html.js .spotlight::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      circle 220px at var(--mx, 50%) var(--my, 50%),
      rgba(31, 168, 184, 0.10),
      transparent 70%
    );
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 0;
  }
  html.js .spotlight:hover::after { opacity: 1; }
  html.js .spotlight > * { position: relative; z-index: 1; }
}


/* ---- Process visual flow with connecting arrows ---- */
.process {
  position: relative;
}
.process__step {
  position: relative;
  transition: background .25s ease;
}
.section--dark .process__step:hover {
  background: #0f2745;
}
.process__step .num {
  display: inline-block;
  border-bottom: 1px solid rgba(31, 168, 184, 0.3);
  padding-bottom: 6px;
  margin-bottom: 4px;
}
.process__step::after {
  content: '';
  position: absolute;
  top: 36px;
  right: -8px;
  width: 16px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--teal-500), transparent);
  z-index: 1;
}
.process__step:nth-child(3n)::after,
.process__step:last-child::after { display: none; }
@media (max-width: 1100px) {
  .process__step::after { display: none; }
}

/* ---- Why-grid v2 — bigger numbers, hover lift ---- */
.why__item {
  position: relative;
  padding: 4px 0;
  border-radius: var(--radius-sm);
  transition: transform .25s ease;
}
.why__item .num {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy-800);
  font-family: var(--font-mono);
}
.why__item .num::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--teal-600);
  vertical-align: middle;
  margin-right: 10px;
}
.why__item h4 {
  margin-top: 6px;
  font-size: 18px;
}

/* ---- Floating decorative elements (used inside hero / sections) ---- */
.hero > .container { position: relative; z-index: 1; }
.float-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.float-shapes > span {
  position: absolute;
  border: 1px solid rgba(31, 168, 184, 0.18);
  border-radius: 2px;
  display: block;
  animation: float-drift 14s ease-in-out infinite;
}
.float-shapes > span:nth-child(1) { width: 80px; height: 80px; top: 10%; left: 5%;  animation-delay: 0s; }
.float-shapes > span:nth-child(2) { width: 36px; height: 36px; top: 60%; left: 12%; animation-delay: 2s; border-color: rgba(14, 42, 71, 0.18); }
.float-shapes > span:nth-child(3) { width: 60px; height: 60px; top: 20%; right: 8%;  animation-delay: 4s; }
.float-shapes > span:nth-child(4) { width: 28px; height: 28px; bottom: 15%; right: 18%; animation-delay: 6s; background: rgba(31, 168, 184, 0.06); }
@keyframes float-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(8px, -12px) rotate(2deg); }
  66%      { transform: translate(-6px, 10px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .float-shapes > span { animation: none; }
}

/* ---- Magnetic / shimmery primary button ---- */
.btn-primary,
.btn-teal {
  position: relative;
  overflow: hidden;
}
.btn-primary::before,
.btn-teal::before {
  content: '';
  position: absolute;
  top: -50%; left: -120%;
  width: 60%; height: 200%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
  transition: left .55s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.btn-primary:hover::before,
.btn-teal:hover::before { left: 130%; }

/* ---- Eco card v2 — visual icon at top ---- */
.eco-card {
  position: relative;
}
.eco-card__icon {
  width: 40px; height: 40px;
  margin-bottom: 12px;
  color: var(--teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 168, 184, 0.08);
  border-radius: var(--radius-sm);
}
.eco-card__icon svg { width: 22px; height: 22px; }
.eco-card .eyebrow { letter-spacing: 0.1em; }
.eco-card__location {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-400);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eco-card__location::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal-600);
  display: inline-block;
}

/* ---- Lex AI feature icon block ---- */
.lex-feature .ico {
  width: 36px;
  height: 36px;
  background: rgba(31, 168, 184, 0.08);
  border-radius: var(--radius-sm);
  padding: 6px;
  color: var(--teal-700);
}

/* ---- Animated typing on Lex AI hero ---- */
@media (prefers-reduced-motion: no-preference) {
  html.js .lex-hero__mock text.typed {
    opacity: 0;
    animation: type-fade 0.6s ease-out 0.6s forwards;
  }
  @keyframes type-fade {
    to { opacity: 1; }
  }
}

/* ---- Compact case timeline (solutions.html) ---- */
.case-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 24px 0 32px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.case-timeline__phase {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 0;
}
.case-timeline__phase + .case-timeline__phase {
  padding-left: 14px;
  border-left: 1px solid var(--border);
}
.case-timeline__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-200);
}
.case-timeline__phase--done   .case-timeline__dot { background: var(--teal-600); }
.case-timeline__phase--active .case-timeline__dot {
  background: var(--teal-600);
  box-shadow: 0 0 0 4px rgba(31, 168, 184, 0.18);
  animation: pulse-dot 2s ease-in-out infinite;
}
.case-timeline__phase--active { color: var(--navy-800); font-weight: 500; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(31, 168, 184, 0.15); }
  50%      { box-shadow: 0 0 0 7px rgba(31, 168, 184, 0.05); }
}

/* ---- World-map dotted illustration utility ---- */
.page-banner__visual svg.world-dots,
.world-dots {
  width: 100%;
  height: auto;
  max-width: 570px;
}
.world-dots circle.pin {
  animation: pin-pulse 2.4s ease-in-out infinite;
}
.world-dots circle.pin:nth-of-type(2) { animation-delay: 1.2s; }
@keyframes pin-pulse {
  0%, 100% { opacity: 0.5; r: 4; }
  50%      { opacity: 1; r: 6; }
}
@media (prefers-reduced-motion: reduce) {
  .world-dots circle.pin { animation: none; opacity: 1; }
}

/* ---- Section divider gradient line (between sections) ---- */
.section + .section {
  position: relative;
}
.section + .section::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  width: 80px; height: 1px;
  background: linear-gradient(to right, transparent, var(--teal-600), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

/* ---- Glow chip (for status / "live" etc.) ---- */
.chip-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(31, 168, 184, 0.12);
  color: var(--teal-700);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(31, 168, 184, 0.2);
}
.chip-live__dot {
  width: 8px; height: 8px;
  background: var(--teal-600);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(31, 168, 184, 0.18);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ---- CTA strip v2 — gradient background ---- */
.section--dark .cta-strip {
  position: relative;
}
.cta-strip {
  position: relative;
  isolation: isolate;
}
.section--dark .cta-strip::before {
  content: '';
  position: absolute;
  inset: -28px -32px;
  background: radial-gradient(ellipse at 30% 50%, rgba(31, 168, 184, 0.10), transparent 60%);
  pointer-events: none;
  z-index: -1;
  border-radius: var(--radius);
}

/* ---- Responsive: hide page-banner visual on small screens to keep banner compact ---- */
@media (max-width: 640px) {
  .page-banner__visual { display: none; }
  .page-banner__inner { grid-template-columns: 1fr; }
}

/* ---- Pulse-on-scroll utility (used by JS to mark just-revealed elements) ---- */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal-pop {
    animation: pop-in 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes pop-in {
    0%   { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
}

/* ---- Section-head subtle decoration ---- */
.section-head h2 {
  position: relative;
}

/* ---- Solutions: dense grid view of 8 areas (top of solutions page) ---- */
.solutions-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 24px;
}
.sol-overview {
  background: var(--bg-card);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  position: relative;
}
.sol-overview .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--teal-700);
  letter-spacing: 0.1em;
}
.sol-overview h4 {
  font-size: 15px;
  color: var(--navy-800);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}
.sol-overview .ico {
  color: var(--teal-700);
  width: 22px; height: 22px;
}
@media (max-width: 900px) { .solutions-overview { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .solutions-overview { grid-template-columns: 1fr; } }

/* ---- Hero strip v2: icons before keys ---- */
.hero-strip__item .k {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-strip__item .k .ico {
  color: var(--teal-700);
  width: 13px;
  height: 13px;
}
.hero-strip {
  position: relative;
}
.hero-strip__item {
  transition: background .2s ease;
}
.hero-strip__item:hover { background: #fafbfa; }


/* ---- Lex AI mock — interactive hover state ---- */
.lex-hero__mock {
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s ease;
}
@media (hover: hover) {
  .lex-hero__layout > div:last-child:hover .lex-hero__mock {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4);
  }
}

/* ---- Index hero h1 — text gradient accent on second word ---- */
.text-accent {
  background: linear-gradient(120deg, var(--teal-700), var(--teal-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ---- Force section padding tighter on mobile so content shows up faster ---- */
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .section--tight { padding: 40px 0; }
  .section-head { margin-bottom: 32px; }
}

/* ---- Visual divider between hero strip items keys/values ---- */
.hero-strip__item .v {
  border-top: 1px solid transparent;
  padding-top: 4px;
}

/* ---- Improve link-arrow visual prominence ---- */
.link-arrow {
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.link-arrow:hover {
  border-bottom-color: var(--teal-600);
}

/* ---- Backdrop pattern for darker sections ---- */
.section--dark {
  position: relative;
  isolation: isolate;
}
.section--dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(31, 168, 184, 0.10) 1px, transparent 0);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
.section--dark > .container { position: relative; z-index: 1; }

/* ---- Tablet/phone: page-banner stacking ---- */
@media (max-width: 800px) {
  .page-banner h1 { font-size: clamp(24px, 5.2vw, 34px); }
}