/* =================================================================
   DES Global — Premium Two-Theme Stylesheet
   Fonts: Playfair Display (headings) + Plus Jakarta Sans (body)
   Themes: [data-theme="light"] day  |  [data-theme="dark"] night
   ================================================================= */

/* Fonts loaded via <link> in HTML for performance */

/* ─────────────────────────────────────────
   DESIGN TOKENS — DARK (default)
   ───────────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg:           #07090f;
  --bg2:          #0c1018;
  --surface:      #111724;
  --card:         #161e2e;
  --card-h:       #1c2640;
  --border:       rgba(255,255,255,0.07);
  --border2:      rgba(255,255,255,0.13);

  --accent:       #1D6FFF;
  --accent-l:     #4d8fff;
  --accent-glow:  rgba(29,111,255,0.28);
  --accent-bg:    rgba(29,111,255,0.1);
  --accent-bdr:   rgba(29,111,255,0.25);

  --gold:         #F0A500;
  --teal:         #0ea5a0;

  --text:         #dde3ef;
  --text1:        #dde3ef;
  --text2:        #8b97b0;
  --text3:        #6c7d9d;

  --danger:       #e5484d;

  --shadow-card:  0 2px 12px rgba(0,0,0,0.5);
  --shadow-lg:    0 20px 60px rgba(0,0,0,0.6);
  --shadow-glow:  0 0 40px var(--accent-glow);

  /* Nav */

  /* Hero grad */
  --hero-grad:    radial-gradient(ellipse 90% 70% at 65% 10%, rgba(29,111,255,0.14) 0%, transparent 60%),
                  radial-gradient(ellipse 50% 50% at 5% 90%,  rgba(14,165,160,0.07) 0%, transparent 55%);
  --dot-color:    rgba(255,255,255,0.035);

  --img-filter:   brightness(0.9);
}

/* ─────────────────────────────────────────
   DESIGN TOKENS — LIGHT
   ───────────────────────────────────────── */
[data-theme="light"] {
  --bg:           #f5f7fc;
  --bg2:          #eef1f8;
  --surface:      #ffffff;
  --card:         #ffffff;
  --card-h:       #f0f4ff;
  --border:       rgba(0,0,0,0.07);
  --border2:      rgba(0,0,0,0.13);

  --accent:       #1251CC;
  --accent-l:     #1D6FFF;
  --accent-glow:  rgba(18,81,204,0.2);
  --accent-bg:    rgba(18,81,204,0.07);
  --accent-bdr:   rgba(18,81,204,0.2);

  --gold:         #D18400;
  --teal:         #0a7a76;

  --text:         #1a2035;
  --text1:        #1a2035;
  --text2:        #4b5672;
  --text3:        #5c6d8f;

  --danger:       #c9353a;

  --shadow-card:  0 1px 4px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.12);
  --shadow-glow:  0 0 32px var(--accent-glow);

  --hero-grad:    radial-gradient(ellipse 90% 70% at 65% 10%, rgba(18,81,204,0.07) 0%, transparent 60%),
                  radial-gradient(ellipse 50% 50% at 5% 90%,  rgba(14,165,160,0.05) 0%, transparent 55%);
  --dot-color:    rgba(0,0,0,0.04);

  --img-filter:   brightness(1);
}

/* ─────────────────────────────────────────
   RESET & BASE
   ───────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; scroll-padding-top:90px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  transition: background 0.35s ease, color 0.35s ease;
}
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:3px; }
::selection { background:var(--accent); color:#fff; }

/* ─────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────── */
h1,h2,h3,h4,h5 {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.2;
  color: var(--text);
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 3.2vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.1rem, 1.4vw, 1.25rem); font-weight: 700; letter-spacing: -0.005em; }
h4 { font-weight: 700; letter-spacing: -0.005em; line-height: 1.35; }
h5 { font-family: 'Plus Jakarta Sans', sans-serif; }

p { color: var(--text2); line-height: 1.8; max-width: 68ch; }

a { color: var(--accent-l); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent); }

/* ─────────────────────────────────────────
   LAYOUT
   ───────────────────────────────────────── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
section { padding: 5.5rem 0; }

/* ─────────────────────────────────────────
   EYEBROW / CHIP
   ───────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-l);
  background: var(--accent-bg);
  border: 1px solid var(--accent-bdr);
  border-radius: 100px;
  padding: 0.3rem 0.9rem;
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-l);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ─────────────────────────────────────────
   SECTION HEADER
   ───────────────────────────────────────── */
.sec-hdr { text-align: left; max-width: 720px; margin: 0 0 3.5rem; }
.sec-hdr h2 { margin-bottom: 1.1rem;
  font-size: clamp(1.5rem, 2.2vw, 2rem); }
.sec-hdr p { font-size: 1.05rem; line-height: 1.82; color: var(--text2); margin-left: 0; margin-right: 0;
  max-width: 600px !important; }

/* ─────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.9rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  background: var(--accent-l);
  color: #fff;
  box-shadow: 0 6px 24px var(--accent-glow);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--accent-l);
  border: 1.5px solid var(--accent-bdr);
}
.btn-outline:hover {
  background: var(--accent-bg);
  border-color: var(--accent-l);
  color: var(--accent-l);
}

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border2);
}
.btn-ghost:hover {
  background: var(--card-h);
  border-color: var(--accent-l);
  color: var(--accent-l);
}

.btn-sm { padding: 0.55rem 1.2rem; font-size: 0.82rem; border-radius: 6px; }

/* ─────────────────────────────────────────
   NAV DROPDOWN
   ───────────────────────────────────────── */
.has-dropdown { position: relative; }
.nav-caret {
  font-size: 0.6em; opacity: 0.55; margin-left: 0.25rem;
  vertical-align: middle; transition: transform 0.22s; display: inline-block;
}
.has-dropdown:hover .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 9999;
  padding: 0.5rem 1rem 1rem;
  pointer-events: none;
  /* invisible bridge so mouse doesn't lose hover */
  padding-top: 1rem;
  margin-top: 0;
}
/* Bridge element to keep hover alive */
.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 12px;
  background: transparent;
}
.has-dropdown:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.nav-dropdown-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
}
.nav-dropdown-col { display: flex; flex-direction: column; gap: 0.15rem; }
.nav-dropdown-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0.25rem 0.75rem 0.5rem;
}
.nav-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}
.nav-dropdown-item:hover { background: var(--card-h); }
.nav-dropdown-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.nav-dropdown-sub {
  font-size: 0.77rem;
  color: var(--text3);
  line-height: 1.3;
}

/* ─────────────────────────────────────────
   THEME TOGGLE
   ───────────────────────────────────────── */
.theme-toggle {
  width: 42px; height: 42px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border2);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.22s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--card-h);
  border-color: var(--accent-l);
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
/* Logo */

/* Nav links */
nav ul { display:flex; list-style:none; gap:0; align-items:center; flex-wrap:nowrap; white-space:nowrap; }
nav ul li a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text2);
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  transition: all 0.2s;
  white-space: nowrap;
}
nav ul li a:hover, nav ul li a.active {
  color: var(--text);
  background: var(--accent-bg);
}
nav ul li a.active {
  color: var(--accent-l);
  position: relative;
}
nav ul li a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2.5px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* Hamburger */

/* Mobile nav */

/* ─────────────────────────────────────────
   HEADER / NAV
   ───────────────────────────────────────── */

header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  padding: 1rem 0;
  border-bottom: 1px solid transparent;
  transition: background 0.35s, border-color 0.35s, backdrop-filter 0.35s;
}

header .container { padding: 0 1rem; }

header.scrolled {
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-color: transparent;
  box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,0.3);
}

[data-theme="dark"]  header.scrolled { background: rgba(7,9,15,0.96); }

[data-theme="light"] header.scrolled {
  background: rgba(245,247,252,0.98);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 4px 20px rgba(0,0,0,0.08);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.nav-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; min-width: 0; }

/* Logo lock-up (header + footer). Sizes come from three variables so each
   breakpoint only has to set them once. */

.logo {
  --logo-h: 48px; --logo-name: 1.2rem; --logo-tag: 0.6rem;
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none; flex-shrink: 0; min-width: 0;
}

footer .logo { --logo-h: 44px; --logo-name: 1.1rem; }

.logo img { height: var(--logo-h); width: auto; flex-shrink: 0; }

.logo-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--logo-name);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.1;
  transition: color 0.2s;
}

.logo-tag, .footer-tag {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-style: italic;
}

.logo-tag   { font-size: var(--logo-tag); color: var(--text2); letter-spacing: 0.06em; }

.footer-tag { font-size: 0.58rem;         color: var(--text3); letter-spacing: 0.04em; }

header .logo-name, header .logo-tag { white-space: nowrap; }

/* Hamburger (shown below 1240px) */

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

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

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.hamburger.open span:nth-child(2) { opacity: 0; }

.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Full-screen mobile menu */

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 5rem 0 3rem;
  overflow-y: auto;
  background: var(--bg);
}

.mobile-nav.open { display: flex; }

.mobile-nav a {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text2);
  padding: 0.4rem 1.5rem;
  width: 100%;
  transition: color 0.2s;
}

.mobile-nav a:hover { color: var(--accent-l); }

.mobile-nav .mobile-nav-sub { font-size: 0.95rem; padding-left: 2rem; opacity: 0.85; }

.mobile-nav-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0.75rem 1.5rem 0.2rem;
}

.mobile-close {
  position: absolute;
  top: 1rem; right: 1.5rem;
  background: none; border: none;
  color: var(--text2); font-size: 1.5rem; cursor: pointer;
  transition: color 0.2s;
}

.mobile-close:hover { color: var(--text); }

@media (max-width: 1240px) {
  nav { display: none; }                          /* nav collapses into the hamburger menu */
  .nav-right .btn-primary { display: none; }      /* "Free Assessment" lives in the menu instead */
  .hamburger {
    display: flex;
    position: relative;
    z-index: 950;
    padding: 8px;
    -webkit-tap-highlight-color: transparent;
  }
  .logo, footer .logo { --logo-h: 38px; --logo-name: 1rem; --logo-tag: 0.52rem; }
}

/* Phones: logo name wraps onto two lines and the tagline stays visible */

@media (max-width: 600px) {
  header { padding: 0.55rem 0; }
  .nav-inner { gap: 0.4rem; }
  header .nav-right { gap: 0.15rem; }
  .theme-toggle { width: 38px; height: 38px; }
  header .logo {
    --logo-h: 30px;
    --logo-name: clamp(0.78rem, 3.8vw, 0.95rem);
    --logo-tag: clamp(0.5rem, 2.5vw, 0.6rem);
    flex: 0 1 auto;
    gap: 0.55rem;
  }
  header .logo > div { min-width: 0; }
  header .logo-name { letter-spacing: -0.02em; white-space: normal; }
  header .logo-tag { letter-spacing: 0.02em; line-height: 1.25; margin-top: 0.2rem; }
}

@media (max-width: 340px) {
  header .logo { --logo-h: 26px; gap: 0.45rem; }   /* keep the tagline clear of the toggle */
}

/* ─────────────────────────────────────────
   HERO
   ───────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 9rem 0 5rem;
  overflow: hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background: var(--hero-grad), var(--bg);
  transition: background 0.35s;
}
.hero-dots {
  position:absolute; inset:0;
  background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
}

.hero-inner {
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.hero-eyebrow {
  display:flex; align-items:center; gap:0.75rem;
  margin-bottom: 1.5rem;
}
.hero-eyebrow-line { width:36px; height:2px; background:var(--accent); }
.hero-eyebrow-text {
  font-family: 'Fira Code', monospace;
  font-size: 0.72rem;
  color: var(--accent-l);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); margin-bottom: 1.5rem; color:var(--text); }
.hero h1 .hl {
  color: var(--accent-l);
  font-style: italic;
}

.hero-desc { font-size:1.08rem; line-height:1.8; margin-bottom:2.5rem; max-width:500px; }

.hero-ctas { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:3rem; }

/* Hero visual */
.hero-visual { position:relative; }
.hero-frame {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid var(--border2);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.hero-frame img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  filter: var(--img-filter);
  transition: filter 0.35s;
}
.hero-frame::after {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 55%);
}

.float-badge {
  position:absolute;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 1rem 1.3rem;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
}
.float-badge.badge-bl {
  bottom:-1.5rem; left:-1.5rem;
}
.float-badge.badge-tr {
  top:-1.25rem; right:-1rem;
  background: var(--accent);
  border-color: var(--accent);
}
.badge-val {
  display:block;
  font-family: 'Playfair Display', serif;
  font-size:1.9rem; font-weight:800;
  color:var(--text); line-height:1;
}
.badge-tr .badge-val { color:#fff; font-size:1.3rem; }
.badge-lbl { font-size:0.75rem; color:var(--text3); margin-top:0.25rem; }
.badge-tr .badge-lbl { color:rgba(255,255,255,0.8); }

/* ─────────────────────────────────────────
   TICKER
   ───────────────────────────────────────── */
.ticker {
  overflow:hidden;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 0;
}
.ticker-track {
  display:flex; gap:3rem;
  width:max-content;
  animation: tick 35s linear infinite;
  white-space: nowrap;
}
.ticker:hover .ticker-track { animation-play-state:paused; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item {
  display:flex; align-items:center; gap:0.6rem;
  font-family: 'Fira Code', monospace;
  font-size:0.72rem; color:var(--text3);
  letter-spacing:0.08em; text-transform:uppercase; flex-shrink:0;
}
.ticker-item::before { content:'◆'; color:var(--accent-l); font-size:0.45rem; }

/* ─────────────────────────────────────────
   SERVICE CARDS
   ───────────────────────────────────────── */
.svc-grid {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.svc-card {
  background: var(--card);
  padding: 2.5rem;
  position:relative;
  overflow:hidden;
  transition: background 0.22s;
  user-select: none; -webkit-user-select: none;
}
.svc-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--accent);
  opacity:0; transition: opacity 0.22s;
}
.svc-card:hover { background:var(--card-h); }
.svc-card:hover::before { opacity:1; }

.svc-card-num {
  font-family:'Fira Code',monospace; font-size:3rem;
  color:var(--text3); opacity:0.15; line-height:1;
}
.svc-icon {
  width:48px; height:48px;
  border-radius:10px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-bdr);
  display:grid; place-items:center;
  margin-bottom:1.5rem;
  transition: all 0.22s;
}
.svc-card:hover .svc-icon { background:var(--accent); border-color:var(--accent); }
.svc-card[id] { scroll-margin-top:90px; }
.mkt-card[id] { scroll-margin-top:100px; }
.svc-icon svg { width:22px; height:22px; color:var(--accent-l); transition:color 0.22s; }
.svc-card:hover .svc-icon svg { color:#fff; }
.svc-card h3 { font-family:'Playfair Display',Georgia,serif; font-size:1.25rem; font-weight:700; margin-bottom:0.75rem; letter-spacing:-0.005em; line-height:1.25; }
.svc-card p { font-size:0.9rem; line-height:1.7; }
.svc-link {
  display:inline-flex; align-items:center; gap:0.3rem;
  margin-top:1.25rem; font-size:0.85rem; font-weight:700;
  color:var(--accent-l); transition: gap 0.2s, color 0.2s;
}
.svc-link:hover { gap:0.6rem; color:var(--accent); }

/* ─────────────────────────────────────────
   METRICS STRIP
   ───────────────────────────────────────── */
.metrics-strip {
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow:hidden;
}
.metric-cell {
  background: var(--surface);
  padding: 2.5rem 2rem;
  text-align:center;
}
.metric-val {
  font-family: 'Playfair Display', serif;
  font-size:3rem; font-weight:800;
  color:var(--text); display:block; line-height:1;
  margin-bottom:0.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.metric-lbl { font-size:0.82rem; color:var(--text3); }

/* ─────────────────────────────────────────
   MARKETS GRID
   ───────────────────────────────────────── */
.mkt-grid {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:1.5rem;
}
.mkt-card {
  border-radius:14px; overflow:hidden;
  background:var(--card);
  border:1px solid var(--border);
  transition: all 0.25s;
  box-shadow: var(--shadow-card);
  user-select: none; -webkit-user-select: none;
  position: relative;
}
.mkt-card:hover {
  border-color:var(--accent-l);
  transform:translateY(-4px);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-l);
}
.mkt-img { aspect-ratio:16/9; overflow:hidden; position:relative; }
.mkt-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.5s ease;
  filter: var(--img-filter);
}
.mkt-card:hover .mkt-img img { transform:scale(1.05); }
.mkt-img::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.6) 100%);
}
.mkt-body { padding:1.5rem; }
.mkt-body h3 { font-family:'Playfair Display',Georgia,serif; font-size:1.15rem; font-weight:700; margin-bottom:0.6rem; letter-spacing:-0.01em; }
.mkt-body p { font-size:0.875rem; line-height:1.65; }

/* ─────────────────────────────────────────
   ARTICLE / TALK LAYOUT PRIMITIVES
   (long-form pages built from two-column splits,
   framed diagrams/photos, checklists and stat rows)
   ───────────────────────────────────────── */
.split-2 { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media (max-width:768px) { .split-2 { grid-template-columns:1fr; gap:2rem; } }

.doc-frame {
  background:#fff; padding:1rem; border-radius:12px;
  border:1px solid var(--border2); box-shadow:var(--shadow-card);
}
.doc-frame img { width:100%; height:auto; display:block; border-radius:6px; }

.photo-frame { border-radius:14px; overflow:hidden; border:1px solid var(--border2); box-shadow:var(--shadow-card); }
.photo-frame img { width:100%; height:100%; object-fit:cover; display:block; filter:var(--img-filter); }

.check-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.9rem; }
.check-list li { display:flex; align-items:flex-start; gap:0.75rem; color:var(--text2); font-size:0.95rem; line-height:1.6; }
.check-list svg { flex-shrink:0; width:18px; height:18px; color:var(--accent-l); margin-top:0.15rem; }
.check-list.two-col { display:grid; grid-template-columns:1fr 1fr; gap:0.9rem 2rem; }
@media (max-width:768px) { .check-list.two-col { grid-template-columns:1fr; } }

.stat-row {
  display:grid; gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  margin-top:2.5rem;
}
.stat-row .metric-cell { padding:2rem 1.5rem; }
@media (max-width:620px) {
  .stat-row { grid-template-columns:1fr 1fr !important; }
  .stat-row .metric-cell { padding:1.5rem 0.75rem; }
  .stat-row .metric-val { font-size:2.1rem; }
}
@media (max-width:400px) {
  .stat-row .metric-val { font-size:1.7rem; }
}

.speaker-line { color:var(--text2); font-size:0.95rem; line-height:1.7; }

.mkt-tags { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:1rem; }
.mkt-tag {
  font-family:'Fira Code',monospace;
  font-size:0.68rem; padding:0.2rem 0.55rem;
  border-radius:4px;
  background:var(--accent-bg); border:1px solid var(--accent-bdr);
  color:var(--accent-l); letter-spacing:0.05em;
  cursor:default;
}
a.mkt-tag {
  cursor:pointer;
  text-decoration:none;
  transition: background 0.15s, border-color 0.15s;
}
a.mkt-tag:hover {
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* ─────────────────────────────────────────
   PROCESS STEPS
   ───────────────────────────────────────── */
.process-steps {
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:0;
  position:relative;
}
.process-steps::before {
  content:''; position:absolute;
  top:2.4rem; left:12.5%; right:12.5%; height:1px;
  background: linear-gradient(to right, transparent, var(--accent-l), transparent);
}
.proc-step { padding:2rem 1.5rem; text-align:left; }
.step-dot {
  width:50px; height:50px; border-radius:50%;
  background:var(--surface); border:1.5px solid var(--border2);
  display:grid; place-items:center;
  margin:0 0 1.5rem;
  font-family:'Fira Code',monospace; font-size:0.78rem;
  color:var(--accent-l);
  position:relative; z-index:1;
  transition: all 0.22s;
}
.proc-step:hover .step-dot {
  background:var(--accent); border-color:var(--accent);
  color:#fff; box-shadow:var(--shadow-glow);
}
.proc-step h3 { font-family:'Playfair Display',Georgia,serif; font-size:1.1rem; font-weight:700; margin-bottom:0.6rem; letter-spacing:-0.01em; }
.proc-step p { font-size:0.875rem;
  max-width: 58ch; }

/* ─────────────────────────────────────────
   FULL-WIDTH IMAGE BANNER
   ───────────────────────────────────────── */
.img-banner {
  position:relative; min-height:440px; overflow:hidden;
  display: block;
}
.img-banner img {
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position: center center; display:block;
  filter: var(--img-filter);
  transition: filter 0.35s;
}
.img-banner-overlay {
  position:relative; inset:auto; z-index:1;
  min-height:440px;
  background: linear-gradient(to right, rgba(7,9,15,0.88) 40%, rgba(7,9,15,0.3) 100%);
  display:flex; align-items:center;
  overflow:visible;
  line-height: normal;
}
[data-theme="light"] .img-banner-overlay {
  background: linear-gradient(to right, rgba(7,9,15,0.82) 40%, rgba(7,9,15,0.25) 100%);
}
.img-banner-body {
  width: min(680px, 55%);
  /* Left inset matches .container's actual left edge (2rem base, growing
     with viewport past 1240px) so the overlay text lines up with every
     other heading on the page instead of sitting closer to the edge. */
  padding: 0 3rem 0 max(2rem, calc((100vw - 1240px) / 2 + 2rem));
  flex-shrink: 0;
}
.img-banner-body h2 { font-size:clamp(1.4rem,2.2vw,2rem); font-weight:700; line-height:1.22; margin-bottom:1.25rem; color:#ffffff; text-shadow:0 2px 12px rgba(0,0,0,0.4); user-select:none; -webkit-user-select:none; -moz-user-select:none; }
.img-banner-body p { margin-bottom:1.75rem; color:rgba(255,255,255,0.88); }

/* ── Mobile: the overlay moves into normal flow so the banner grows with its text;
   the photo then sits behind it as an absolutely-positioned layer ── */
@media(max-width:700px) {
  .img-banner { min-height: 320px; }
  .img-banner-overlay {
    background: linear-gradient(180deg, rgba(7,9,15,0.75) 0%, rgba(7,9,15,0.92) 100%);
    min-height: 320px;
  }
  .img-banner-body {
    width: 100%;
    padding: 2.5rem 1.25rem;
  }
  .img-banner-body h2 { margin-bottom: 1rem; }
  .img-banner-body p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    max-width: 100%;
  }
}

/* ─────────────────────────────────────────
   CTA SECTION
   ───────────────────────────────────────── */
.cta-sec {
  position:relative; overflow:hidden;
  background:var(--surface);
  border-top:1px solid var(--border);
  text-align:center;
  padding:7rem 0;
}
.cta-sec::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 100% at 50% 0%,
    rgba(29,111,255,0.18) 0%, transparent 65%);
  opacity: 1;
}
.cta-sec .container { position:relative; }
.cta-sec h2 { margin-bottom:1rem; }
.cta-sec p { max-width:520px; margin:0 auto 2.5rem; font-size:1.05rem; }
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ─────────────────────────────────────────
   MARKET TABS
   ───────────────────────────────────────── */
.tab-btn {
  background:none; border:none;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:0.875rem; font-weight:600;
  color:var(--text3); padding:0.75rem 1.2rem;
  cursor:pointer; border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:all 0.2s;
}
.tab-btn:hover { color:var(--text2); }
.tab-btn.active { color:var(--accent-l); border-bottom-color:var(--accent-l); }

.tab-content { display:none; }
.tab-content.active { display:block; }

/* tab-nav wrapper for markets page */
.tab-nav {
  display:flex; gap:0.3rem; flex-wrap:wrap;
  border-bottom:2px solid var(--border2);
  margin-bottom:2rem;
}

/* ─────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────── */
footer {
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:5rem 0 2rem;
}
.footer-grid {
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr 1fr;
  gap:3rem;
  margin-bottom:4rem;
}
.footer-brand p {
  margin-top:1.25rem; font-size:0.875rem; line-height:1.75; max-width:280px;
  color: var(--text2);
}
.footer-col h5 {
  font-size:0.78rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text3); margin-bottom:1.25rem;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:0.6rem; }
.footer-col ul li a {
  font-size:0.875rem; color:var(--text3); transition:color 0.2s;
}
.footer-col ul li a:hover { color:var(--text); }
.footer-bottom {
  padding-top:2rem; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
}
.footer-bottom p { font-size:0.8rem; color:var(--text3); }
.footer-socials { display:flex; gap:0.5rem; }
.fsoc {
  width:34px; height:34px; border-radius:7px;
  background:var(--card); border:1px solid var(--border);
  display:grid; place-items:center;
  color:var(--text3); transition:all 0.22s;
}
.fsoc:hover { color:var(--accent-l); border-color:var(--accent-l); background:var(--accent-bg); }
.fsoc svg { width:15px; height:15px; }

/* ─────────────────────────────────────────
   SCROLL ANIMATION
   ───────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1),
              transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.reveal.on { opacity:1; transform:translateY(0); }

/* ─────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────── */
@media(max-width:1240px) {
  .hero-inner { grid-template-columns:1fr; gap:2.5rem; }
  .hero-visual { display:block; order:2; }
  .hero-frame { aspect-ratio:16/9; max-height:320px; }
  .hero-content { order:1; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
}
@media(max-width:620px) {
  .hero-frame { aspect-ratio:16/9; max-height:220px; }
}

/* ── Fix: 2-column layouts that never collapsed on mobile, causing
   squeezed/vertical-wrapped text or content appearing to vanish ── */
@media(max-width:780px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 3rem !important; }
  .info-split-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .leader-card-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
}
@media(max-width:900px) {
  /* Ensure theme toggle stays visible on mobile (grid keeps the icon centred) */
  .svc-grid { grid-template-columns:1fr 1fr; }
  .metrics-strip { grid-template-columns:1fr 1fr; }
  /* !important: some pages set an inline grid-template-columns (e.g. repeat(2,1fr))
     on .mkt-grid to force a 2-up layout on desktop; without !important that inline
     style also wins on mobile/tablet and never collapses, squeezing photos/cards
     into thin, stretched-looking slivers. */
  .mkt-grid { grid-template-columns:1fr 1fr !important; }

}
@media(max-width:620px) {
  .svc-grid { grid-template-columns:1fr; }
  .mkt-grid { grid-template-columns:1fr !important; }
  .process-steps { grid-template-columns:1fr 1fr; }
  .process-steps::before { display:none; }

  .footer-grid { grid-template-columns:1fr; }

}

/* Cursor on all clickable cards */
.svc-card, .mkt-card { cursor: pointer; }

/* Hover arrow on market cards */
.mkt-card::after {
  content: '→';
  position: absolute;
  bottom: 1rem; right: 1.25rem;
  font-size: 1.1rem;
  color: var(--accent-l);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s;
}
.mkt-card:hover::after { opacity: 1; transform: translateX(0); }

/* ── Light-mode SVG diagram readability fixes ── */
[data-theme="light"] svg text {
  fill: #1a1a2e;
}
[data-theme="light"] svg text[fill="currentColor"] {
  fill: #1a1a2e !important;
}
[data-theme="light"] svg [fill-opacity="0.6"] {
  fill-opacity: 0.9 !important;
}
[data-theme="light"] svg [stroke-opacity="0.4"],
[data-theme="light"] svg [stroke-opacity="0.5"] {
  stroke-opacity: 0.75 !important;
}
[data-theme="light"] svg [stroke-opacity="0.6"],
[data-theme="light"] svg [stroke-opacity="0.7"],
[data-theme="light"] svg [stroke-opacity="0.75"],
[data-theme="light"] svg [stroke-opacity="0.85"] {
  stroke-opacity: 0.95 !important;
}
/* Box backgrounds in light mode: use a very light tinted bg */
[data-theme="light"] svg rect[fill="var(--bg)"],
[data-theme="light"] svg rect[fill="var(--surface)"] {
  fill: #f0f4ff;
}
/* Make arrow markers more visible in light mode */
[data-theme="light"] svg marker path[fill="#1D6FFF"] {
  opacity: 1 !important;
}
[data-theme="light"] svg marker path[fill="#00d4a8"] {
  opacity: 1 !important;
}
/* Yellow text in diagrams — unreadable on light bg — darken it */
[data-theme="light"] svg text[fill="#ffd166"] {
  fill: #a07200 !important;
}
[data-theme="light"] svg text[fill="#ff6b35"] {
  fill: #c44500 !important;
}
/* Constraint box text */
[data-theme="light"] svg [fill-opacity="0.08"],
[data-theme="light"] svg [fill-opacity="0.1"],
[data-theme="light"] svg [fill-opacity="0.12"] {
  fill-opacity: 0.12 !important;
}
/* Overall SVG background */
[data-theme="light"] svg[style*="background:var(--surface)"] {
  background: #f7f9ff !important;
  border-color: #c8d4f0 !important;
}

/* Sub-page section h2 — slightly tighter than homepage hero */

/* Body text max-width override for wide-layout sections */

/* =================================================================
   PROFESSIONAL POLISH — v11 refinements
   ================================================================= */

/* Tighter, more purposeful section rhythm on inner pages */
body:not(:has(.hero)) section:first-of-type {
  padding-top: 5rem;
}

/* Page-level hero: richer ambient gradient */
[data-theme="dark"] body > div[style*="padding: 5.5rem"] {
  background: radial-gradient(ellipse 90% 60% at 20% -10%,
    rgba(29,111,255,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 110%,
    rgba(14,165,160,0.07) 0%, transparent 50%),
    var(--bg) !important;
}
[data-theme="light"] body > div[style*="padding: 5.5rem"] {
  background: radial-gradient(ellipse 90% 60% at 20% -10%,
    rgba(18,81,204,0.06) 0%, transparent 55%),
    var(--bg) !important;
}

/* Section alternating bg — smoother with a subtle gradient bleed */
section[style*="background:var(--bg2)"] {
  background: linear-gradient(180deg,
    var(--bg2) 0%, var(--bg2) 90%, var(--bg) 100%) !important;
}

/* Card hover lift — more intentional */
.svc-card:hover, .mkt-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 0 1px var(--accent-bdr);
}

/* Eyebrow pill — cleaner dot pulse on hover */
section:hover .eyebrow::before,
.sec-hdr:hover .eyebrow::before {
  transform: scale(1.4);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* Metric stat cards — refined number weight */

/* Process steps — refined connecting line in dark */
[data-theme="dark"] .process-steps::before {
  background: linear-gradient(to right,
    transparent, rgba(29,111,255,0.5), rgba(14,165,160,0.3), transparent);
  opacity: 0.7;
}

/* CTA section — stronger ambient glow */
[data-theme="light"] .cta-sec::before {
  background: radial-gradient(ellipse 80% 100% at 50% 0%,
    rgba(18,81,204,0.1) 0%, transparent 65%);
}

/* Footer — richer brand description contrast */

/* Nav active indicator — bolder underline */

/* Button primary — subtle shimmer on hover */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.btn-primary:hover::after {
  transform: translateX(100%);
}

/* Scroll reveal — slightly longer, more elegant */

/* Publication bridge card — responsive */
@media (max-width: 680px) {
  .reveal[style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr !important;
  }
}

/* svc-grid — 2-col on mid screens for about page philosophy */
@media (min-width: 901px) and (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* svc-grid modifier: exactly 4 cards — use a 2x2 layout instead of 3-up/1-down */
@media (min-width: 1101px) {
  .svc-grid.svc-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* process-steps modifier: exactly 3 steps — center them in a 3-col row instead
   of leaving them stuck in the first 3 of a 4-col grid */
@media (min-width: 901px) {
  .process-steps.process-steps-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .process-steps.process-steps-3::before {
    left: 16.67%;
    right: 16.67%;
  }
}

/* Subtle horizontal rule between expertise list items */
.mkt-card ul li {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.45rem;
}
.mkt-card ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Engineering figures (MultiMaxx / OptiMaxx): dark frame in both themes.
   .orig-figure-light is for charts drawn on a white background. */
.orig-figure {
  background: #070b14;
  border-radius: 16px;
  border: 1px solid var(--border2);
  padding: 1rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.orig-figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.orig-figure figcaption {
  margin-top: 1rem;
  padding-bottom: 0.25rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.78rem;
  color: #b4c0d8;
  letter-spacing: 0.05em;
}
.orig-figure.orig-figure-light { background: #fcfefd; }
.orig-figure.orig-figure-light figcaption { color: #3b4763; }

/* =================================================================
   MOBILE RESPONSIVE FIXES — v12
   Fixes: header overflow, logo sizing, section spacing, typography
   ================================================================= */

/* ── Viewport safety ── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Container: tighter padding on phones ── */
@media (max-width: 480px) {
  .container { padding: 0 1rem; }
}

/* ── Sections: reduce top/bottom padding on mobile ── */
@media (max-width: 768px) {
  section { padding: 3.5rem 0; }
  .sec-hdr { margin-bottom: 2.5rem; }
  .hero { padding: 7rem 0 3.5rem; min-height: auto; }
}

@media (max-width: 480px) {
  section { padding: 2.5rem 0; }
  .hero { padding: 5.5rem 0 2.5rem; }
}

/* ── Hero CTA buttons: stack on very small screens ── */
@media (max-width: 420px) {
  .hero-ctas { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
}

/* ── CTA section buttons: stack on mobile ── */
@media (max-width: 520px) {
  .cta-sec .btn,
  section .btn + .btn {
    display: block;
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ── Process steps: single column on phone ── */
@media (max-width: 480px) {
  .process-steps { grid-template-columns: 1fr !important; }
}

/* ── Footer grid: single column below 480px ── */
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 2rem; }
  footer { padding: 3rem 0 1.5rem; }
}

/* ── Footer bottom: stack ── */
@media (max-width: 560px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ── Featured success block: stack ── */
@media (max-width: 560px) {
  .featured-success { flex-direction: column; }
}

/* ── Metrics strip: always 2 cols on phone ── */
@media (max-width: 420px) {
  .metrics-strip { grid-template-columns: 1fr 1fr !important; gap: 0.75rem; }
}

/* ── Maxx grid: single col below 380px ── */
@media (max-width: 380px) {
  .maxx-grid { grid-template-columns: 1fr !important; }
}

/* ── Trust bar: wrap ── */

/* ── Image banner: auto height on mobile ── */
@media (max-width: 768px) {
  /* Let the banner grow with its text (a fixed height clipped the copy) */
  .img-banner { height: auto; }
}

/* ── Prevent long words/URLs from breaking layout ── */
h1, h2, h3, h4, p, a, li, span {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Result rows: stack icon + text on mobile ── */
@media (max-width: 420px) {
  .result-row { flex-direction: column; }
}

/* =================================================================
   MOBILE FIXES v14 — hamburger, img-banner gap, cta spacing
   ================================================================= */

/* ── cta-sec: reduce massive padding on mobile ── */
@media (max-width: 768px) {
  .cta-sec { padding: 3.5rem 0; }
}
@media (max-width: 480px) {
  .cta-sec { padding: 2.5rem 0; }
}

/* ── img-banner: ensure no gap below by removing overflow:visible ── */

/* ─────────────────────────────────────────
   RESOURCES DROPDOWN (single-column variant of the Solutions dropdown)
   ───────────────────────────────────────── */
.nav-dropdown.nav-dropdown-narrow { min-width: 300px; }
.nav-dropdown-narrow .nav-dropdown-inner { grid-template-columns: 1fr; }
/* Dropdown items never show the top-nav underline indicator */
.nav-dropdown a.active::after { display: none; }
.nav-dropdown a.nav-dropdown-item.active { background: var(--accent-bg); }
.nav-dropdown a.nav-dropdown-item.active .nav-dropdown-title { color: var(--accent-l); }

/* ─────────────────────────────────────────
   PROCESS STEPS — centered 3-up variant (homepage "Why Trust DES")
   ───────────────────────────────────────── */
.process-steps.process-steps-center .proc-step { text-align: center; }
.process-steps.process-steps-center .step-dot { margin-left: auto; margin-right: auto; }
.process-steps.process-steps-center .proc-step p { margin-left: auto; margin-right: auto; }

/* =================================================================
   MOBILE FIXES v15
   1. Header logo lock-up shows the tagline on phones
   2. Smaller (but still clearly > body copy) headings on mobile
   3. Contact form: nothing spills out of its box on phones
   4. Centered page-hero variant (Contact, Industries)
   Tune the heading sizes by editing the clamp() values in section 2.
   ================================================================= */

/* ── 2. Heading scale on mobile ──
   h1 ≈ 32px · h2 ≈ 22–23px · h3 ≈ 17–19px · body copy 16px            */
@media (max-width: 768px) {
  h1,
  .hero h1 {
    font-size: clamp(1.75rem, 8.2vw, 2.25rem);
    line-height: 1.15;
  }
  h2,
  .sec-hdr h2,
  .img-banner-body h2 {
    font-size: clamp(1.35rem, 5.8vw, 1.6rem);
    line-height: 1.22;
  }
}

/* ── 3. Contact form ── */
@media (max-width: 600px) {
  .contact-form-card { padding: 1.5rem 1.15rem !important; }
  .contact-form-card .radio-row { flex-wrap: wrap; gap: 0.6rem 1.5rem !important; }
  .contact-form-card .captcha-box { padding: 1rem !important; }
  .contact-form-card #captchaCanvas { width: 100%; height: auto; }
  .contact-form-card #captchaInput {
    letter-spacing: 0.04em !important;   /* wide tracking made the placeholder overflow */
    font-size: 1rem !important;
  }
  /* placeholder in normal case so the full hint fits; typed code stays uppercase */
  .contact-form-card #captchaInput::placeholder {
    text-transform: none;
    letter-spacing: 0;
  }
  .contact-form-card .btn-submit {
    white-space: normal;                 /* let the long label wrap instead of clipping */
    text-align: center;
    line-height: 1.35;
    padding: 0.95rem 1rem !important;
    font-size: 1rem !important;
  }
}
@media (max-width: 480px) {
  .contact-form-card .form-row-2 { grid-template-columns: 1fr !important; }
}

/* ── 4. Page hero — left-aligned to match the rest of the site ──
   Applies to every inner-page hero (the full-bleed div carrying the
   "5.5rem 0 3.5rem" hero padding), regardless of whether that inline
   style was written as "padding: 5.5rem" or "padding:5.5rem" (both
   exist across the site), not just the ones explicitly flagged with
   .page-hero-center — so About Us, Presentations, Variability
   Management, Free Assessment, EMRS, MultiMaxx, OptiMaxx, Combustion,
   Terms, Privacy, etc. all line up with Industries/Contact. */
body > div[style*="5.5rem"] > .container,
.page-hero-center > .container { width: 100%; }

/* =================================================================
   HOMEPAGE SECTIONS — FAQ, trust bar, Maxx suite cards, results list,
   industry cards, featured success. (Moved here from a \3c style> block in
   index.html; kept at the end of the file so it still wins ties against
   the responsive rules above, exactly as it did before.)
   ================================================================= */
/* ── FAQ SECTION ───────────────────────── */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.faq-item { background: var(--card); border: 1px solid var(--border2); border-radius: 12px; overflow: hidden; transition: border-color 0.2s; }
.faq-item:hover { border-color: var(--accent-bdr); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 1.6rem; text-align: left;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 600;
  color: var(--text); line-height: 1.45;
}
.faq-q .faq-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--accent-l); color: var(--accent-l); display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: transform 0.25s, background 0.2s; }
.faq-item.open .faq-q .faq-icon { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.25s; }
.faq-item.open .faq-a { max-height: 600px; }
.faq-a p { padding: 0 1.6rem 1.4rem; color: var(--text2); font-size: 0.97rem; line-height: 1.78; max-width: 100%; }
/* ── TRUST BAR ─────────────────────────── */
.trust-bar { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.2rem; }
.trust-item { display: flex; align-items: center; gap: 0.45rem; font-family: 'Fira Code', monospace; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text2); }
.trust-item::before { content: '✓'; color: var(--teal); font-weight: 700; font-size: 0.85rem; }
/* ── MAXX SUITE GRID ───────────────────── */
.maxx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.maxx-card {
  background: var(--card); border: 1px solid var(--border2); border-radius: 16px;
  padding: 2rem 1.75rem; position: relative; overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s;
  display: block; text-decoration: none; color: inherit;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.maxx-card:hover { transform: translateY(-5px); box-shadow: 0 24px 64px rgba(29,111,255,0.18); border-color: var(--accent); color: inherit; text-decoration: none; }
.maxx-card:hover .maxx-card-cta { color: var(--accent); gap: 0.6rem; }
.maxx-card:hover .maxx-card-icon { background: var(--accent); border-color: var(--accent); }
.maxx-card:hover .maxx-card-icon svg { stroke: #fff; }
.maxx-card-num { font-family: 'Fira Code', monospace; font-size: 0.68rem; letter-spacing: 0.14em; color: var(--accent-l); opacity: 0.7; margin-bottom: 1rem; display: block; }
.maxx-card-icon { width: 44px; height: 44px; background: var(--accent-bg); border: 1px solid var(--accent-bdr); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; transition: background 0.22s, border-color 0.22s; }
.maxx-card-icon svg { width: 22px; height: 22px; stroke: var(--accent-l); transition: stroke 0.22s; }
.maxx-card h3 { font-size: 1.05rem; margin-bottom: 0.65rem; color: var(--text); }
.maxx-card p { font-size: 0.92rem; color: var(--text2); line-height: 1.72; max-width: 100%; margin-bottom: 1.2rem; }
.maxx-card-cta { display: inline-flex; align-items: center; gap: 0.35rem; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--accent-l); letter-spacing: 0.02em; transition: color 0.2s, gap 0.2s; }
.maxx-card-cta svg { width: 14px; height: 14px; stroke: currentColor; flex-shrink: 0; }
/* ── RESULTS STRIP ─────────────────────── */
.results-list { display: flex; flex-direction: column; gap: 0.75rem; max-width: 820px; margin: 0 auto; }
.result-row { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.4rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.result-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: var(--accent-bg); border: 1px solid var(--accent-bdr); display: flex; align-items: center; justify-content: center; }
.result-icon svg { width: 16px; height: 16px; stroke: var(--accent-l); }
.result-text strong { color: var(--text); font-weight: 700; display: block; margin-bottom: 0.15rem; font-size: 0.97rem; }
.result-text span { color: var(--text2); font-size: 0.88rem; }
/* ── INDUSTRIES GRID ───────────────────── */
.industry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.industry-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem 1.4rem; text-align: center; transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s; display: block; text-decoration: none; color: inherit; cursor: pointer; user-select: none; -webkit-user-select: none; }
.industry-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(29,111,255,0.15); color: inherit; text-decoration: none; }
.industry-card:hover .industry-card-icon { transform: scale(1.15); }
.industry-card:hover h3 { color: var(--accent-l); }
.industry-card-icon { font-size: 2.2rem; margin-bottom: 0.75rem; display: block; transition: transform 0.22s; line-height: 1; }
.industry-card h3 { font-size: 0.95rem; color: var(--text); margin-bottom: 0.4rem; transition: color 0.22s; }
.industry-card-link { font-size: 0.75rem; color: var(--accent-l); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; letter-spacing: 0.04em; opacity: 0; transition: opacity 0.22s; display: block; }
.industry-card:hover .industry-card-link { opacity: 1; }
/* ── FEATURED SUCCESS ──────────────────── */
.featured-success { background: linear-gradient(135deg, var(--accent-bg) 0%, transparent 100%); border: 1px solid var(--accent-bdr); border-radius: 16px; padding: 2rem 2.2rem; margin-top: 3rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.featured-success-badge { flex-shrink: 0; background: var(--accent); color: #fff; border-radius: 10px; padding: 0.9rem 1.4rem; text-align: center; }
.featured-success-badge .badge-pct { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 800; line-height: 1; }
.featured-success-badge .badge-lbl { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; margin-top: 0.2rem; }
.featured-success-text strong { display: block; color: var(--text); font-size: 1rem; font-weight: 700; margin-bottom: 0.35rem; }
.featured-success-text p { color: var(--text2); font-size: 0.9rem; max-width: 100%; margin: 0; }