/* =============================================================
   COGNATE HISPANIC MARKETING — Global Stylesheet
   Built from the official Cognate Brandbook.
   Sections:
     1.  Design tokens (:root)
     2.  Reset & base
     3.  Typography & helpers
     4.  Layout (container, section, grid)
     5.  Buttons
     6.  Header / Nav / Dropdown / Language toggle / Mobile nav
     7.  Hero
     8.  Stats
     9.  Section label / eyebrow
     10. Cards (service, case, blog, team, value, feature)
     11. Badges
     12. Network components
     13. Process steps
     14. Quote / testimonial
     15. Forms / meeting selector / Calendly
     16. CTA band
     17. Footer
     18. Decorative motifs (blades, lens, grid)
     19. Reveal-on-scroll
     20. Responsive
   ============================================================= */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand palette (from brandbook CSS variables) */
  --ink:        #070C18;
  --ink-2:      #0E1426;
  --ink-3:      #161B2E;
  --indigo:     #0A0A78;
  --indigo-raw: #080078;
  --electric:   #2800F8;
  --cyan:       #00E0F8;
  --orange:     #F83000;
  --red:        #E00008;
  --mist:       #F4F5F8;
  --paper:      #FFFFFF;
  --line:       #E7E8EE;
  --muted:      #6B6F80;
  --muted-2:    #AEB4CF;

  /* Semantic */
  --bg:            var(--paper);
  --text:          var(--ink);
  --text-soft:     #3A4054;
  --accent:        var(--orange);
  --accent-cool:   var(--electric);

  /* Typography */
  --font-display: "Poppins", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  /* Fluid type scale */
  --fs-hero:    clamp(2.6rem, 6.2vw, 5rem);
  --fs-h1:      clamp(2.1rem, 4.6vw, 3.4rem);
  --fs-h2:      clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --fs-lead:    clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.78rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Radii */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(7,12,24,.06), 0 1px 2px rgba(7,12,24,.04);
  --shadow:    0 10px 30px -12px rgba(7,12,24,.18);
  --shadow-lg: 0 30px 60px -20px rgba(10,10,120,.28);

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 76px;

  /* Motion */
  --ease: cubic-bezier(.16,.84,.44,1);
  --t-fast: .18s;
  --t: .32s;
}

/* ============================================================
   3. TYPOGRAPHY & HELPERS
   ============================================================ */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.2; }
p  { color: var(--text-soft); }

.lead { font-size: var(--fs-lead); color: var(--text-soft); line-height: 1.55; }
.text-balance { text-wrap: balance; }
.muted { color: var(--muted); }

/* Accent helpers used inside headlines */
.hl        { color: var(--electric); }
.hl-cyan   { color: var(--cyan); }
.hl-orange { color: var(--orange); }
.dot       { color: var(--orange); }              /* the signature colored period */
.dot-cyan  { color: var(--cyan); }

/* Cyan subhead + orange underline (brand pattern) */
.subhead {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--cyan);
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.accent-rule {
  width: 54px; height: 4px; border-radius: 4px;
  background: var(--orange);
  margin: var(--space-4) 0;
}
.accent-rule.center { margin-inline: auto; }
.accent-rule.cool { background: linear-gradient(90deg, var(--cyan), var(--electric)); }

/* ============================================================
   4. LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}
.container.narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(3.5rem, 8vw, var(--space-9)); }
.section.tight { padding-block: clamp(2.5rem, 5vw, var(--space-8)); }
.section.pt-0 { padding-top: 0; }

/* Color sections */
.bg-mist  { background: var(--mist); }
.bg-paper { background: var(--paper); }
.bg-ink {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: clip;
}
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink .display { color: #fff; }
.bg-ink p, .bg-ink .lead { color: var(--muted-2); }
.bg-gradient {
  background:
    radial-gradient(1100px 600px at 78% -10%, rgba(40,0,248,.42), transparent 60%),
    radial-gradient(900px 600px at 8% 110%, rgba(0,224,248,.18), transparent 55%),
    linear-gradient(160deg, #0A0F22 0%, var(--ink) 60%);
  color: #fff;
  position: relative;
  overflow: clip;
}
.bg-gradient h1, .bg-gradient h2, .bg-gradient h3 { color: #fff; }
.bg-gradient p, .bg-gradient .lead { color: var(--muted-2); }

/* Grid */
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.center { text-align: center; }
.center .accent-rule { margin-inline: auto; }
.max-60 { max-width: 60ch; }
.max-46 { max-width: 46ch; }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  --btn-bg: var(--electric);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: -0.01em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bg);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t) var(--ease),
              background var(--t) var(--ease),
              border-color var(--t) var(--ease);
  white-space: nowrap;
}
.btn .arrow { transition: transform var(--t) var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(40,0,248,.6); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--electric); --btn-fg: #fff; }
.btn--primary:hover { background: #1d00c8; border-color: #1d00c8; }

.btn--accent { --btn-bg: var(--orange); --btn-fg: #fff; }
.btn--accent:hover { background: #d62800; border-color: #d62800; box-shadow: 0 14px 30px -12px rgba(248,48,0,.55); }

/* Outline (secondary) */
.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: rgba(10,10,120,.25);
}
.btn--outline:hover { border-color: var(--indigo); background: rgba(10,10,120,.04); box-shadow: none; transform: translateY(-2px); }

/* Outline on dark */
.on-dark .btn--outline,
.btn--outline.on-dark {
  color: #fff;
  border-color: rgba(255,255,255,.35);
}
.on-dark .btn--outline:hover,
.btn--outline.on-dark:hover { background: rgba(255,255,255,.08); border-color: #fff; }

.btn--ghost { background: transparent; border-color: transparent; color: var(--text); padding-inline: 0.4rem; }
.btn--ghost:hover { box-shadow: none; color: var(--electric); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }

/* Play button (round) */
.btn-play {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-display); font-weight: 600; color: #fff;
}
.btn-play .circle {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.4);
  transition: var(--t);
}
.btn-play:hover .circle { background: #fff; color: var(--ink); border-color: #fff; }
.btn-play .circle svg { width: 18px; height: 18px; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ============================================================
   6. HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7,12,24,.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
}
.nav {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--space-5);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.brand__mark { width: 38px; height: 38px; }
.brand__word {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.55rem; letter-spacing: -0.02em;
  color: #fff; line-height: 1;
}
.brand__sub {
  display: block; font-family: var(--font-body); font-weight: 600;
  font-size: 0.52rem; letter-spacing: 0.34em; color: var(--cyan);
  margin-top: 2px; text-transform: uppercase;
}

.nav__menu { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.nav__link {
  font-family: var(--font-display); font-weight: 500; font-size: 0.95rem;
  color: rgba(255,255,255,.85);
  padding: 0.5rem 0.85rem; border-radius: var(--radius-sm);
  transition: color var(--t-fast), background var(--t-fast);
  position: relative;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: #fff; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 4px;
  height: 2px; background: var(--orange); border-radius: 2px;
}

/* Dropdown */
.nav__item { position: relative; }
.nav__toggle { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav__toggle .chev { width: 14px; height: 14px; transition: transform var(--t); }
.nav__item:hover .chev, .nav__item:focus-within .chev { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 280px;
  background: #fff; color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 0.6rem; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  border: 1px solid var(--line);
}
.nav__item:hover .dropdown, .nav__item:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.dropdown::before {
  content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.dropdown__link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.8rem; border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}
.dropdown__link:hover { background: var(--mist); }
.dropdown__link .di { width: 30px; height: 30px; flex-shrink: 0; }
.dropdown__link strong { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; display: block; }
.dropdown__link span { font-size: 0.78rem; color: var(--muted); }

/* Language toggle */
.lang {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-pill);
  overflow: hidden; flex-shrink: 0;
}
.lang button {
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
  padding: 0.35rem 0.7rem; color: rgba(255,255,255,.7);
  transition: var(--t-fast);
}
.lang button[aria-pressed="true"] { background: var(--orange); color: #fff; }

.nav__cta { flex-shrink: 0; }

/* Hamburger */
.nav__burger {
  display: none; width: 44px; height: 44px; border-radius: var(--radius-sm);
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  border: 1px solid rgba(255,255,255,.2);
}
.nav__burger span { width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: var(--t); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--ink);
  padding: var(--space-5) clamp(1.1rem,4vw,2rem) var(--space-8);
  transform: translateX(100%); transition: transform var(--t) var(--ease);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a, .mobile-nav .m-acc-btn {
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
  color: #fff; padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between; width: 100%;
}
.mobile-nav .m-sub { display: none; padding-left: var(--space-4); }
.mobile-nav .m-sub.open { display: block; }
.mobile-nav .m-sub a { font-size: 1rem; font-weight: 500; color: var(--muted-2); border-bottom: none; padding: 0.55rem 0; }
.mobile-nav .m-acc-btn .chev { width: 18px; transition: var(--t); }
.mobile-nav .m-acc-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mobile-nav .mobile-actions { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.mobile-nav .lang { align-self: start; }

/* ============================================================
   7. HERO
   ============================================================ */
.hero { position: relative; isolation: isolate; color: #fff; overflow: clip; }
.hero--video { min-height: clamp(560px, 86vh, 820px); display: grid; align-items: center; }
/* Spectrum ring motif — over the video, beneath the hero text (z 1 < 2) */
.hero__ring {
  position: absolute; top: -14%; right: -7%;
  width: min(620px, 56vw); aspect-ratio: 1;
  z-index: 1; pointer-events: none; opacity: .92;
}
@media (max-width: 860px) {
  .hero__ring { width: 78vw; top: -6%; right: -26%; opacity: .5; }
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,12,24,.55) 0%, rgba(7,12,24,.35) 40%, rgba(7,12,24,.92) 100%),
    radial-gradient(900px 500px at 80% 0%, rgba(40,0,248,.35), transparent 60%);
}
.hero__inner { padding-block: clamp(3rem, 8vw, 6rem); position: relative; z-index: 2; }
.hero__title { font-size: var(--fs-hero); color: #fff; max-width: 16ch; }
.hero__lead { margin-top: var(--space-5); max-width: 52ch; color: rgba(255,255,255,.85); font-size: var(--fs-lead); }
.hero__actions { margin-top: var(--space-6); }

/* Standard (interior) hero */
.hero--page { padding-block: clamp(4.5rem, 10vw, 8rem) clamp(3rem,6vw,5rem); }
.hero--page .eyebrow { color: var(--cyan); }
.hero--page .hero__title { max-width: 20ch; }

/* ============================================================
   8. STATS
   ============================================================ */
.statbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; color: var(--ink);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  overflow: hidden;
}
.statbar.on-ink {
  background: rgba(255,255,255,.04); color: #fff;
  border: 1px solid rgba(255,255,255,.12); box-shadow: none; backdrop-filter: blur(6px);
}
.statbar__item { padding: 1.4rem 1.5rem; display: flex; gap: 0.9rem; align-items: center; }
.statbar__item + .statbar__item { border-left: 1px solid var(--line); }
.statbar.on-ink .statbar__item + .statbar__item { border-left-color: rgba(255,255,255,.12); }
.statbar__ic { width: 40px; height: 40px; flex-shrink: 0; }
.statbar__n { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1; }
.statbar.on-ink .statbar__n { color: #fff; }
.statbar__l { font-size: 0.8rem; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.statbar.on-ink .statbar__l { color: var(--muted-2); }

/* Big stat blocks */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--space-5); }
.stat-big__n {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(120deg, var(--electric), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bg-ink .stat-big__n, .bg-gradient .stat-big__n {
  background: linear-gradient(120deg, #5b7bff, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-big__l { margin-top: var(--space-2); color: var(--text-soft); font-weight: 500; }
.bg-ink .stat-big__l, .bg-gradient .stat-big__l { color: var(--muted-2); }

/* ============================================================
   9. EYEBROW / SECTION LABEL
   ============================================================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--indigo);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--orange); border-radius: 2px; }
.eyebrow.center { justify-content: center; }
.bg-ink .eyebrow, .bg-gradient .eyebrow, .hero .eyebrow { color: var(--cyan); }

.section-head { max-width: 60ch; margin-bottom: var(--space-7); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ============================================================
   10. CARDS
   ============================================================ */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }

/* Service card */
.service-card { display: flex; flex-direction: column; gap: var(--space-4); min-height: 100%; }
.service-card .ic-badge {
  width: 56px; height: 56px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(40,0,248,.08), rgba(0,224,248,.12));
  display: grid; place-items: center; flex-shrink: 0;
}
.service-card .ic-badge img { width: 30px; height: 30px; }
.service-card h3 { margin-bottom: 0; }
.service-card .card-num {
  position: absolute; top: var(--space-5); right: var(--space-6);
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  color: var(--muted-2);
}
.service-card ul.ticks { margin-top: auto; display: grid; gap: 0.4rem; }
.ticks li { display: flex; gap: 0.5rem; font-size: 0.9rem; color: var(--text-soft); }
.ticks li::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px;
  background: var(--orange); -webkit-mask: var(--tick) center/contain no-repeat; mask: var(--tick) center/contain no-repeat;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.card-link {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--space-2);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--electric);
}
.card-link .arrow { transition: transform var(--t); }
.card:hover .card-link .arrow, a.card:hover .arrow { transform: translateX(4px); }

/* Feature card on dark */
.feature-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg); padding: var(--space-6); color: #fff;
  transition: var(--t);
}
.feature-card:hover { background: rgba(255,255,255,.07); transform: translateY(-4px); }
.feature-card h3 { color: #fff; margin-bottom: var(--space-2); }
.feature-card p { color: var(--muted-2); }
.feature-card .ic-badge {
  width: 52px; height: 52px; border-radius: var(--radius); margin-bottom: var(--space-4);
  background: rgba(0,224,248,.12); display: grid; place-items: center;
}
.feature-card .ic-badge img { width: 28px; height: 28px; filter: brightness(0) invert(1); opacity: .92; }

/* Case study card */
.case-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.case-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.case-card__media {
  aspect-ratio: 16/10; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--indigo), var(--ink));
  display: grid; place-items: center;
}
.case-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.case-card:hover .case-card__media img { transform: scale(1.05); }
.case-card__client {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: #fff;
  text-align: center; padding: 1rem; letter-spacing: -0.01em;
  position: relative; z-index: 2;
}
.case-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.case-card__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.case-card h3 { font-size: 1.15rem; }
.case-card .case-meta { font-size: 0.82rem; color: var(--muted); margin-top: auto; }

/* Blog/insight card */
.blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; transition: var(--t); height: 100%; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-card__media { aspect-ratio: 16/9; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--electric), var(--indigo)); }
.blog-card__media img { width:100%; height:100%; object-fit: cover; }
.blog-card__cat {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; letter-spacing: .04em;
  background: rgba(7,12,24,.7); color: #fff; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}
.blog-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.blog-card h3 { font-size: 1.15rem; }
.blog-card .blog-meta { font-size: 0.8rem; color: var(--muted); margin-top: auto; display: flex; gap: 0.5rem; align-items: center; }

/* Team card */
.team-card { text-align: center; }
.team-card__photo {
  aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-4);
  background: linear-gradient(140deg, var(--indigo), var(--electric));
  display: grid; place-items: center; position: relative;
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__initials { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; color: rgba(255,255,255,.92); }
.team-card h3 { font-size: 1.1rem; margin-bottom: 2px; }
.team-card .role { font-size: 0.85rem; color: var(--electric); font-weight: 600; font-family: var(--font-display); }
.team-card .bio { font-size: 0.85rem; color: var(--muted); margin-top: var(--space-2); }

/* Value card */
.value-card { padding: var(--space-5); border-radius: var(--radius); background: var(--mist); border: 1px solid transparent; transition: var(--t); }
.value-card:hover { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.value-card .vnum { font-family: var(--font-display); font-weight: 700; color: var(--orange); font-size: 0.85rem; letter-spacing: .1em; }
.value-card h3 { font-size: 1.1rem; margin: var(--space-2) 0; }
.value-card p { font-size: 0.92rem; }

/* ============================================================
   11. BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; letter-spacing: .01em;
  padding: 0.32rem 0.7rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--mist); color: var(--text-soft);
  white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.badge--network { background: rgba(40,0,248,.08); border-color: rgba(40,0,248,.2); color: var(--electric); }
.badge--network::before { background: var(--electric); }
.badge--creative { background: rgba(248,48,0,.08); border-color: rgba(248,48,0,.22); color: #c42600; }
.badge--creative::before { background: var(--orange); }
.badge--mixed { background: rgba(0,224,248,.1); border-color: rgba(0,184,207,.3); color: #0784a0; }
.badge--mixed::before { background: #00B9CF; }
.badge--adtech { background: rgba(10,10,120,.07); border-color: rgba(10,10,120,.2); color: var(--indigo); }
.badge--adtech::before { background: var(--indigo); }
.badge--solid { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.badge--solid::before { background: var(--cyan); }

/* Pill chip (certifications / tags) */
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  font-family: var(--font-display); font-weight: 500; font-size: 0.9rem; color: #fff;
}
.chip img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.chip--light { background: #fff; border-color: var(--line); color: var(--text); box-shadow: var(--shadow-sm); }
.chip--light img { filter: none; }

/* Filters (Work page) */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--space-6); }
.filter-btn {
  font-family: var(--font-display); font-weight: 600; font-size: 0.88rem;
  padding: 0.55rem 1.1rem; border-radius: var(--radius-pill);
  border: 1.5px solid var(--line); background: #fff; color: var(--text-soft);
  transition: var(--t);
}
.filter-btn:hover { border-color: var(--electric); color: var(--electric); }
.filter-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============================================================
   12. NETWORK COMPONENTS
   ============================================================ */
.market-list { display: grid; gap: var(--space-3); }
.market {
  display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: var(--space-3);
}
.market__name { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
.market__bar { height: 10px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.bg-ink .market__bar, .bg-gradient .market__bar { background: rgba(255,255,255,.1); }
.market__fill {
  display: block;          /* span defaults to inline, which ignores width/height */
  height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #3f5bff, var(--cyan));
  box-shadow: 0 0 14px rgba(0, 224, 248, .35);
  width: 0; transition: width 1s var(--ease);
}
.market__pct { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; text-align: right; }
.bg-ink .market__pct, .bg-gradient .market__pct { color: #fff; }

.callout {
  border-left: 4px solid var(--orange);
  background: rgba(248,48,0,.06);
  padding: var(--space-5); border-radius: 0 var(--radius) var(--radius) 0;
}
.bg-ink .callout, .bg-gradient .callout { background: rgba(248,48,0,.12); }
.callout strong { color: var(--orange); }

.dual-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.panel {
  padding: var(--space-7); border-radius: var(--radius-lg); position: relative; overflow: hidden;
}
.panel--adv { background: linear-gradient(160deg, var(--indigo), var(--ink)); color: #fff; }
.panel--pub { background: linear-gradient(160deg, #1a1208, #2a1304); color: #fff; }
.panel h3 { color: #fff; }
.panel p { color: var(--muted-2); }
.panel .ticks li { color: rgba(255,255,255,.82); }
.panel .ticks li::before { background: var(--cyan); }
.panel--pub .ticks li::before { background: var(--orange); }

/* ============================================================
   13. PROCESS STEPS
   ============================================================ */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); counter-reset: step; }
.process__step { position: relative; padding-top: var(--space-6); }
.process__step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-display); font-weight: 800; font-size: 2.4rem;
  color: transparent; -webkit-text-stroke: 1.5px rgba(10,10,120,.25);
  position: absolute; top: -0.5rem; left: 0; line-height: 1;
}
.bg-ink .process__step::before, .bg-gradient .process__step::before { -webkit-text-stroke-color: rgba(0,224,248,.4); }
.process__step h3 { font-size: 1.15rem; margin-bottom: var(--space-2); }
.process__step .pline { width: 100%; height: 2px; background: linear-gradient(90deg, var(--electric), transparent); margin-bottom: var(--space-4); }

/* ============================================================
   14. QUOTE / TESTIMONIAL
   ============================================================ */
.quote {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.28; letter-spacing: -0.02em;
  max-width: 24ch;
}
.quote-block { display: grid; gap: var(--space-5); }
.quote-mark { font-family: var(--font-display); font-size: 3rem; color: var(--orange); line-height: 0.5; }
.quote-cite { font-size: 0.9rem; color: var(--muted); }
.quote-cite strong { color: var(--text); font-family: var(--font-display); display: block; }
.bg-ink .quote-cite strong, .bg-gradient .quote-cite strong { color: #fff; }

/* ============================================================
   15. FORMS / MEETING SELECTOR / CALENDLY
   ============================================================ */
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: 0.4rem; }
.field label { font-family: var(--font-display); font-weight: 500; font-size: 0.85rem; }
.field .req { color: var(--orange); }
.field input, .field select, .field textarea {
  padding: 0.8rem 1rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--electric); box-shadow: 0 0 0 4px rgba(40,0,248,.1);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-note { font-size: 0.8rem; color: var(--muted); }

/* Form card */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, var(--space-7)); box-shadow: var(--shadow); }

/* Success message */
.form-success {
  display: none; text-align: center; padding: var(--space-7);
  background: rgba(0,224,248,.06); border: 1px solid rgba(0,184,207,.25); border-radius: var(--radius-lg);
}
.form-success.show { display: block; animation: pop .4s var(--ease); }
.form-success .check {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--space-4);
  background: linear-gradient(135deg, var(--electric), var(--cyan)); display: grid; place-items: center;
}
.form-success .check svg { width: 32px; height: 32px; stroke: #fff; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Meeting type selector */
.meeting-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.meeting-type {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-5); border-radius: var(--radius); cursor: pointer;
  border: 2px solid var(--line); background: #fff; transition: var(--t); text-align: left; width: 100%;
}
.meeting-type:hover { border-color: rgba(40,0,248,.3); transform: translateY(-2px); }
.meeting-type[aria-pressed="true"] { border-color: var(--electric); background: rgba(40,0,248,.04); box-shadow: 0 0 0 4px rgba(40,0,248,.08); }
.meeting-type .mt-ic { width: 48px; height: 48px; border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(40,0,248,.08), rgba(0,224,248,.14)); display: grid; place-items: center; flex-shrink: 0; }
.meeting-type .mt-ic img { width: 26px; height: 26px; }
.meeting-type h3 { font-size: 1rem; margin-bottom: 2px; }
.meeting-type p { font-size: 0.82rem; margin: 0; }
.meeting-type .mt-check { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; display: grid; place-items: center; transition: var(--t); }
.meeting-type[aria-pressed="true"] .mt-check { background: var(--electric); border-color: var(--electric); }
.meeting-type[aria-pressed="true"] .mt-check::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* Trust signals */
.trust-list { display: grid; gap: var(--space-3); }
.trust-list li { display: flex; gap: 0.75rem; align-items: center; font-size: 0.95rem; }
.trust-list li .tcheck { width: 26px; height: 26px; border-radius: 50%; background: rgba(0,224,248,.14); display: grid; place-items: center; flex-shrink: 0; }
.trust-list li .tcheck svg { width: 15px; height: 15px; stroke: var(--electric); }
.bg-ink .trust-list li, .bg-gradient .trust-list li, .panel .trust-list li { color: rgba(255,255,255,.9); }
.bg-ink .trust-list .tcheck svg, .panel .trust-list .tcheck svg { stroke: var(--cyan); }

/* Calendly placeholder */
.calendly {
  border: 2px dashed rgba(10,10,120,.25); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--mist), #fff);
  min-height: 520px; display: grid; place-items: center; text-align: center; padding: var(--space-7);
}
.calendly__inner { max-width: 380px; }
.calendly .cal-ic { width: 64px; height: 64px; margin: 0 auto var(--space-4); }
.calendly code { background: rgba(10,10,120,.08); padding: 0.15rem 0.45rem; border-radius: 6px; font-size: 0.82rem; color: var(--indigo); }

/* Contact info list */
.contact-list { display: grid; gap: var(--space-5); }
.contact-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-item .ci-ic { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--mist); display: grid; place-items: center; flex-shrink: 0; }
.contact-item .ci-ic img { width: 24px; height: 24px; }
.bg-ink .contact-item .ci-ic, .bg-gradient .contact-item .ci-ic { background: rgba(255,255,255,.06); }
.bg-ink .contact-item .ci-ic img, .bg-gradient .contact-item .ci-ic img { filter: brightness(0) invert(1); }
.contact-item h4 { font-family: var(--font-display); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 2px; }
.contact-item a, .contact-item p { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--text); }
.bg-ink .contact-item a, .bg-ink .contact-item p, .bg-gradient .contact-item a, .bg-gradient .contact-item p { color: #fff; }

.placeholder-note {
  font-size: 0.72rem; font-style: italic; color: var(--orange);
  display: inline-block; background: rgba(248,48,0,.08); padding: 0.1rem 0.45rem; border-radius: 6px; margin-left: 0.4rem;
}

/* ============================================================
   16. CTA BAND
   ============================================================ */
.cta-band { position: relative; overflow: clip; }
.cta-band__inner {
  background: linear-gradient(130deg, var(--indigo) 0%, var(--electric) 55%, #3a18ff 100%);
  border-radius: var(--radius-lg); padding: clamp(2.2rem, 6vw, 4.5rem);
  color: #fff; position: relative; overflow: hidden; text-align: center;
}
.cta-band__inner h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.cta-band__inner p { color: rgba(255,255,255,.85); max-width: 50ch; margin: var(--space-4) auto 0; }
.cta-band__inner .btn-row { justify-content: center; margin-top: var(--space-6); }
.cta-band__inner .blade-deco { position: absolute; opacity: .5; }

/* ============================================================
   17. FOOTER
   ============================================================ */
.footer { background: var(--ink); color: var(--muted-2); padding-block: var(--space-8) var(--space-6); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--space-7); }
.footer .brand__word { font-size: 1.5rem; }
.footer__tag { margin-top: var(--space-4); max-width: 34ch; color: var(--muted-2); font-size: 0.95rem; }
.footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.footer__social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.15); transition: var(--t);
}
.footer__social a:hover { background: var(--electric); border-color: var(--electric); transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; fill: #fff; }
.footer__col h4 { color: #fff; font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: var(--space-4); }
.footer__col ul { display: grid; gap: 0.6rem; }
.footer__col a, .footer__col li { font-size: 0.92rem; color: var(--muted-2); transition: color var(--t-fast); }
.footer__col a:hover { color: #fff; }
.footer__col .muted-line { color: var(--muted); }
.footer__bottom {
  margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-size: 0.82rem; color: var(--muted);
}
.footer__bottom a:hover { color: #fff; }

/* ============================================================
   18. DECORATIVE MOTIFS
   ============================================================ */
.blade { position: absolute; z-index: -1; pointer-events: none; }
.blade--tr { top: -60px; right: -60px; width: 320px; opacity: .8; }
.blade--bl { bottom: -80px; left: -60px; width: 300px; opacity: .7; }
.lens-deco { position: absolute; z-index: -1; pointer-events: none; opacity: .9; }
.dot-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask: radial-gradient(60% 60% at 50% 40%, #000, transparent);
  mask: radial-gradient(60% 60% at 50% 40%, #000, transparent);
}
.lens-watermark {
  position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: min(640px, 60%); opacity: .14; z-index: 0; pointer-events: none;
}

/* Media: brand creative figure frame */
.brand-figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.brand-figure img { width: 100%; display: block; }

/* Logo strip */
.logo-strip { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: center; opacity: .85; }
.logo-strip span { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--muted); letter-spacing: -0.01em; }

/* ============================================================
   19. REVEAL ON SCROLL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* Language visibility (JS swaps innerHTML; this is a no-FOUC guard) */
[hidden] { display: none !important; }

/* ============================================================
   20. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-7); }
  .statbar { grid-template-columns: repeat(2, 1fr); }
  .statbar__item:nth-child(3) { border-left: none; }
  .statbar__item:nth-child(odd) { border-left: none; }
  .statbar__item:nth-child(3), .statbar__item:nth-child(4) { border-top: 1px solid var(--line); }
  .statbar.on-ink .statbar__item:nth-child(3), .statbar.on-ink .statbar__item:nth-child(4) { border-top-color: rgba(255,255,255,.12); }
}

@media (max-width: 860px) {
  /* Show mobile nav controls, hide desktop menu */
  .nav__menu { display: none; }
  .nav__cta.desktop-only { display: none; }
  .nav__burger { display: flex; }
  .lang.desktop-only { display: none; }

  .split, .dual-panel { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .meeting-types { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .split.reverse-m > *:first-child { order: 2; }
}

@media (max-width: 600px) {
  :root { --header-h: 64px; }
  .grid-2, .grid-4, .grid-3 { grid-template-columns: 1fr; }
  .statbar { grid-template-columns: 1fr; }
  .statbar__item + .statbar__item { border-left: none; border-top: 1px solid var(--line); }
  .statbar.on-ink .statbar__item + .statbar__item { border-top-color: rgba(255,255,255,.12); }
  .field-row { grid-template-columns: 1fr; }
  .market { grid-template-columns: 92px 1fr 44px; }
  .footer__bottom { flex-direction: column; }
  .btn--block-m { display: flex; width: 100%; justify-content: center; }
  .hero__title { max-width: 100%; }
}

/* Desktop-only / mobile-only utilities */
.desktop-only { }
.mobile-only { display: none; }
@media (max-width: 860px) { .mobile-only { display: revert; } }

/* ============================================================
   WP/ELEMENTOR ADAPTERS (brand variants for native Elementor widgets)
   ============================================================ */
.elementor-button.cog-btn{border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;padding:.85rem 1.5rem;transition:transform .18s var(--ease),box-shadow .32s var(--ease),background .32s var(--ease)}
.elementor-button.cog-btn:hover{transform:translateY(-2px)}
.elementor-button.cog-btn-primary{background-color:var(--electric);color:#fff}
.elementor-button.cog-btn-primary:hover{background-color:#1d00c8;box-shadow:0 14px 30px -12px rgba(40,0,248,.6)}
.elementor-button.cog-btn-accent{background-color:var(--orange);color:#fff}
.elementor-button.cog-btn-accent:hover{background-color:#d62800;box-shadow:0 14px 30px -12px rgba(248,48,0,.55)}
.elementor-button.cog-btn-outline{background:transparent;border:2px solid rgba(10,10,120,.25);color:var(--ink)}
.elementor-button.cog-btn-outline:hover{border-color:var(--indigo);background:rgba(10,10,120,.04)}
.elementor-button.cog-btn-outline-light{background:transparent;border:2px solid rgba(255,255,255,.35);color:#fff}
.elementor-button.cog-btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* keep brand headings/lead readable inside Elementor heading/text widgets */
.cog-hero-title{font-size:var(--fs-hero)!important;color:#fff}
.cog-on-dark{color:#fff}

/* ====== Elementor container layout guards (brand classes must win over .e-con) ====== */
.e-con.split{display:grid!important;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.e-con.grid{display:grid!important}
.e-con.statbar{display:grid!important}
.e-con.process{display:grid!important}
.e-con.dual-panel{display:grid!important}
.e-con.market-list{display:grid!important}
.e-con.meeting-types{display:grid!important}
.e-con.btn-row{display:flex!important}
.e-con.brand-figure{display:block!important}
.e-con.cta-band__inner{display:block!important}
.e-con.card,.e-con.service-card,.e-con.value-card,.e-con.feature-card,.e-con.panel,.e-con.statbar__item,.e-con.process__step{display:flex!important;flex-direction:column}
@media(max-width:860px){.e-con.split,.e-con.grid-3,.e-con.dual-panel,.e-con.meeting-types{grid-template-columns:1fr!important}}
@media(max-width:1024px){.e-con.grid-4{grid-template-columns:repeat(2,1fr)!important}.e-con.process{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:600px){.e-con.grid-2,.e-con.grid-4,.e-con.grid-3,.e-con.statbar{grid-template-columns:1fr!important}}
/* Elementor heading inherits brand sizes when class present */
.elementor-widget-heading .elementor-heading-title{font-family:var(--font-display)}
.hero__title .elementor-heading-title,.elementor-heading-title.hero__title{font-size:var(--fs-hero)}
.elementor-element .lead p{margin:0}
.elementor-widget-text-editor .eyebrow{margin:0}

/* ===== builder helper classes ===== */
.cog-btn-lg{padding:1.05rem 1.9rem!important;font-size:1.05rem!important}
.cta-band__inner .eyebrow,.cog-eyebrow-light{color:#fff!important}
.cta-band__inner .eyebrow::before{background:#fff}
.cog-eye-cyan{color:var(--cyan)!important}
.cog-eye-orange{color:var(--orange)!important}
.cta-band--accent{background:linear-gradient(130deg,#7a1400,var(--orange) 60%,#ff5a2b)!important}
.hero .lead,.hero__lead{color:rgba(255,255,255,.85)}
.hero p,.hero .elementor-widget-text-editor{color:rgba(255,255,255,.9)}
.hero .eyebrow{color:var(--cyan)}
.cog-statbar-lift{margin-top:-56px;position:relative;z-index:5}
.elementor-button.cog-btn .elementor-button-content-wrapper{gap:.5em}
.panel .eyebrow{color:var(--cyan)}
/* keep text-editor brand colors on dark sections */
.bg-ink .elementor-widget-text-editor,.bg-gradient .elementor-widget-text-editor{color:var(--muted-2)}
.bg-ink .elementor-widget-text-editor .eyebrow,.bg-gradient .elementor-widget-text-editor .eyebrow{color:var(--cyan)}

/* ===== Theme Builder header ===== */
.site-header{padding:0}
.site-header .nav.container{display:flex;align-items:center;justify-content:space-between;min-height:76px}
.site-header .elementor-nav-menu .elementor-item{color:rgba(255,255,255,.85)!important;font-family:var(--font-display);font-weight:500;font-size:.95rem;padding:.5rem .85rem!important;fill:rgba(255,255,255,.85)}
.site-header .elementor-nav-menu .elementor-item:hover,.site-header .elementor-nav-menu .current-menu-item .elementor-item{color:#fff!important}
.site-header .elementor-nav-menu--main .elementor-nav-menu .sub-menu,.site-header .elementor-nav-menu__container.elementor-nav-menu--dropdown{background:#fff!important;border-radius:14px!important;box-shadow:var(--shadow-lg);padding:.5rem!important;border:1px solid var(--line)}
.site-header .sub-menu .elementor-sub-item{color:var(--ink)!important;border-radius:8px;font-weight:500}
.site-header .sub-menu .elementor-sub-item:hover{background:var(--mist)!important;color:var(--indigo)!important}
.site-header .elementor-menu-toggle{color:#fff!important}
.cog-nav-right{margin-left:auto}

/* ===== Theme Builder footer ===== */
.e-con.footer{display:block!important}
.e-con.footer .container{display:block!important}
.e-con.footer__grid{display:grid!important;grid-template-columns:1.4fr 1fr 1.2fr;gap:var(--space-7)}
.e-con.footer__col{display:flex!important;flex-direction:column;gap:.2rem}
@media(max-width:860px){.e-con.footer__grid{grid-template-columns:1fr!important;gap:var(--space-6)}}
.footer .elementor-nav-menu .elementor-item{color:var(--muted-2)!important;padding:.3rem 0!important;font-size:.92rem;font-family:var(--font-display)}
.footer .elementor-nav-menu .elementor-item:hover{color:#fff!important;background:transparent!important}
.footer .elementor-widget-html,.footer .elementor-widget-text-editor{color:var(--muted-2)}

.lang a{font-family:var(--font-display);font-weight:600;font-size:.8rem;padding:.35rem .7rem;color:rgba(255,255,255,.7);text-decoration:none}.lang a.active{background:var(--orange);color:#fff}.lang a:hover{color:#fff}.site-header .cog-nav-right .lang{margin:0 .2rem}

/* ===== Elementor global tokens (kit-CSS pipeline fallback) ===== */
:root{--e-global-typography-primary-font-family:'Poppins';--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:'Poppins';--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:'Inter';--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:'Inter';--e-global-typography-accent-font-weight:600;--e-global-color-primary:#2800F8;--e-global-color-secondary:#0A0A78;--e-global-color-text:#070C18;--e-global-color-accent:#F83000;--e-global-color-cogcyan:#00E0F8;--e-global-color-cogmist:#F4F5F8;--e-global-color-cogmuted:#6B6F80;--e-global-color-cogred:#E00008;}

/* ===== QA: brand buttons must beat Elementor default button (accent) ===== */
.elementor-widget-button .elementor-button.cog-btn{border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;padding:.85rem 1.5rem;display:inline-flex;align-items:center;gap:.5em;transition:transform .18s var(--ease),box-shadow .32s var(--ease),background-color .32s var(--ease)}
.elementor-widget-button .elementor-button.cog-btn:hover{transform:translateY(-2px)}
.elementor-widget-button .elementor-button.cog-btn-primary{background-color:var(--electric);color:#fff}
.elementor-widget-button .elementor-button.cog-btn-primary:hover{background-color:#1d00c8;box-shadow:0 14px 30px -12px rgba(40,0,248,.6)}
.elementor-widget-button .elementor-button.cog-btn-accent{background-color:var(--orange);color:#fff}
.elementor-widget-button .elementor-button.cog-btn-accent:hover{background-color:#d62800;box-shadow:0 14px 30px -12px rgba(248,48,0,.55)}
.elementor-widget-button .elementor-button.cog-btn-outline{background-color:transparent;border:2px solid rgba(10,10,120,.25);color:var(--ink)}
.elementor-widget-button .elementor-button.cog-btn-outline:hover{border-color:var(--indigo);background-color:rgba(10,10,120,.04)}
.elementor-widget-button .elementor-button.cog-btn-outline-light{background-color:transparent;border:2px solid rgba(255,255,255,.35);color:#fff}
.elementor-widget-button .elementor-button.cog-btn-outline-light:hover{border-color:#fff;background-color:rgba(255,255,255,.08)}
.elementor-widget-button .elementor-button.cog-btn-lg{padding:1.05rem 1.9rem;font-size:1.05rem}

/* ===== QA2: brand buttons (classes are on .elementor-widget-button wrapper, style the inner .elementor-button) ===== */
.elementor-widget-button.cog-btn .elementor-button{border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;padding:.85rem 1.5rem;transition:transform .18s var(--ease),box-shadow .32s var(--ease),background-color .32s var(--ease),border-color .32s}
.elementor-widget-button.cog-btn .elementor-button:hover{transform:translateY(-2px)}
.elementor-widget-button.cog-btn-primary .elementor-button{background-color:var(--electric);color:#fff}
.elementor-widget-button.cog-btn-primary .elementor-button:hover{background-color:#1d00c8;box-shadow:0 14px 30px -12px rgba(40,0,248,.6)}
.elementor-widget-button.cog-btn-accent .elementor-button{background-color:var(--orange);color:#fff}
.elementor-widget-button.cog-btn-accent .elementor-button:hover{background-color:#d62800;box-shadow:0 14px 30px -12px rgba(248,48,0,.55)}
.elementor-widget-button.cog-btn-outline .elementor-button{background-color:transparent;border:2px solid rgba(10,10,120,.25);color:var(--ink)}
.elementor-widget-button.cog-btn-outline .elementor-button:hover{border-color:var(--indigo);background-color:rgba(10,10,120,.04)}
.elementor-widget-button.cog-btn-outline-light .elementor-button{background-color:transparent;border:2px solid rgba(255,255,255,.35);color:#fff}
.elementor-widget-button.cog-btn-outline-light .elementor-button:hover{border-color:#fff;background-color:rgba(255,255,255,.08)}
.elementor-widget-button.cog-btn-lg .elementor-button{padding:1.05rem 1.9rem;font-size:1.05rem}
/* button arrow icon spacing */
.elementor-widget-button.cog-btn .elementor-button .elementor-button-icon{margin-inline-start:.1em}

/* ===== QA3: heading colors (Elementor binds heading color to primary; restore local ink default + white on dark) ===== */
.elementor-widget-heading.elementor-element .elementor-heading-title{color:var(--ink)}
.bg-ink .elementor-widget-heading.elementor-element .elementor-heading-title,.bg-gradient .elementor-widget-heading.elementor-element .elementor-heading-title,.cog-on-dark .elementor-widget-heading.elementor-element .elementor-heading-title,.hero .elementor-widget-heading.elementor-element .elementor-heading-title,.panel .elementor-widget-heading.elementor-element .elementor-heading-title,.cta-band__inner .elementor-widget-heading.elementor-element .elementor-heading-title,.footer .elementor-widget-heading.elementor-element .elementor-heading-title{color:#fff}
.elementor-heading-title .hl{color:var(--electric)}.elementor-heading-title .hl-cyan{color:var(--cyan)}.elementor-heading-title .hl-orange{color:var(--orange)}.elementor-heading-title .dot{color:var(--orange)}

/* ===== QA4: Services dropdown icons+desc, hero ring position, image rounding ===== */
/* Dropdown items: icon + title + description (match local .dropdown__link) */
.site-header .elementor-nav-menu--dropdown .elementor-sub-item,.site-header .sub-menu .elementor-sub-item{display:flex!important;align-items:center;gap:.75rem;padding:.7rem .8rem!important;border-radius:8px;white-space:normal!important;line-height:1.3;height:auto!important}
.site-header .elementor-nav-menu--dropdown .sub-menu,.site-header .elementor-nav-menu__container.elementor-nav-menu--dropdown,.site-header .elementor-nav-menu--main .sub-menu{min-width:300px!important;padding:.5rem!important}
.site-header .cog-dd-di{width:30px;height:30px;flex-shrink:0;filter:none}
.site-header .cog-dd-text{display:flex;flex-direction:column;gap:1px}
.site-header .cog-dd-text strong{font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--ink);line-height:1.2}
.site-header .cog-dd-desc{font-size:.78rem;color:var(--muted);font-weight:400}
.site-header .sub-menu .elementor-sub-item:hover .cog-dd-text strong,.site-header .elementor-nav-menu--dropdown .elementor-sub-item:hover .cog-dd-text strong{color:var(--indigo)!important}
/* Hero spectrum ring: make the html widget fill the hero so the ring (top:-14%) reaches the header */
.hero.hero--video{position:relative}
.hero--video > .elementor-widget-html{position:absolute!important;inset:0;z-index:1;pointer-events:none;overflow:visible;margin:0!important}
.hero--video > .elementor-widget-html > .elementor-widget-container{position:static;height:100%;overflow:visible}
.hero__ring{position:absolute;top:-14%;right:-7%;width:min(620px,56vw);aspect-ratio:1;z-index:1;pointer-events:none;opacity:.92}
@media(max-width:860px){.hero__ring{width:78vw;top:-6%;right:-26%;opacity:.5}}
/* Rounded image corners (brand figures + card media) */
.brand-figure{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.brand-figure img,.brand-figure .elementor-widget-image img,.brand-figure .elementor-widget-container{border-radius:var(--radius-lg);overflow:hidden;display:block}

/* ===== QA5: home hero fidelity (title 2 lines, lead 3 lines, buttons left, statbar straddle) ===== */
/* constrain on the inner element where font-size is correct */
.hero__title .elementor-heading-title{max-width:16ch}
.hero--video .hero__lead p,.hero--video .hero__lead .elementor-widget-container{max-width:52ch}
/* hero buttons flush-left with the text, no widget indent */
.hero .btn-row{justify-content:flex-start!important;padding:0!important;margin-left:0!important}
.hero .btn-row .elementor-widget-button{margin:0!important}
/* statbar straddles the hero/white boundary: section starts at hero bottom, the card lifts up onto the hero */
.cog-statbar-lift{margin-top:0!important;padding-top:0!important}
.cog-statbar-lift > .e-con{margin-top:-56px;position:relative;z-index:5}

/* ===== QA6: header pixel-match (slate bg, 1200 width centered, logo 1-line) ===== */
/* (b) BACKGROUND: match the local slate. Local = rgba(7,12,24,.82) over a WHITE body.
   On WP the translucent header composites over a dark backdrop (renders near-black),
   so paint ink@82% over a guaranteed white base -> exact local slate, backdrop-independent. */
.site-header{
  background:#fff;
  background-image:linear-gradient(rgba(7,12,24,.82),rgba(7,12,24,.82));
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff;padding:0;
}
/* keep inner Elementor containers transparent so the header slate is the only bg painted */
.site-header > .e-con-inner,.site-header .nav.container,.site-header .cog-nav-right{background-color:transparent}
/* (c) WIDTH: 1200px centered content + local clamp() padding + 76px bar height */
.site-header .nav.container{width:100%;max-width:var(--container,1200px);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)!important;padding-block:0!important;display:flex;align-items:center;gap:var(--space-5,1.5rem);min-height:var(--header-h,76px)}
/* (a) LOGO: tagline never breaks mid-phrase + brand column never shrinks under flex pressure */
.site-header .brand__sub{white-space:nowrap}
.site-header .elementor-widget-html,.site-header .elementor-widget-html>.elementor-widget-container,.site-header .brand{flex:0 0 auto;width:auto;max-width:none}
.site-header .brand{display:inline-flex;align-items:center;gap:.6rem}
/* re-pin brand sizing to the local values (guard against Elementor img/typography overrides) */
.site-header .brand__mark{width:38px;height:38px;flex-shrink:0}
.site-header .brand__word{font-family:var(--font-display);font-weight:700;font-size:1.55rem;letter-spacing:-.02em;color:#fff;line-height:1}
.site-header .brand__sub{display:block;font-family:var(--font-body);font-weight:600;font-size:.52rem;letter-spacing:.34em;color:var(--cyan,#00E0F8);margin-top:2px;text-transform:uppercase;white-space:nowrap}
@media (max-width:600px){.site-header .nav.container{min-height:64px}}

/* ===== QA7: CTA arrow (header+hero) + book-a-meeting grid fit ===== */
.site-header .elementor-widget-button.cog-btn-primary .elementor-button,.hero .elementor-widget-button.cog-btn-primary .elementor-button{display:inline-flex;align-items:center;gap:.55em}
.site-header .elementor-widget-button.cog-btn-primary .elementor-button::after,.hero .elementor-widget-button.cog-btn-primary .elementor-button::after{content:'';width:18px;height:18px;flex:0 0 auto;background-color:currentColor;-webkit-mask:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZSc+PHBhdGggZD0nTTUgMTJoMTRNMTMgNmw2IDYtNiA2JyBzdHJva2U9JyMwMDAnIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJy8+PC9zdmc+') center/contain no-repeat;mask:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZSc+PHBhdGggZD0nTTUgMTJoMTRNMTMgNmw2IDYtNiA2JyBzdHJva2U9JyMwMDAnIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJy8+PC9zdmc+') center/contain no-repeat;transition:transform .3s var(--ease,cubic-bezier(.16,.84,.44,1))}
.site-header .elementor-widget-button.cog-btn-primary .elementor-button:hover::after,.hero .elementor-widget-button.cog-btn-primary .elementor-button:hover::after{transform:translateX(4px)}
/* book-a-meeting: break the grid min-content floor so the split + cards fit (no overflow/overlap with Calendly) */
.e-con.split>*{min-width:0}
.meeting-types{min-width:0}
.meeting-type{min-width:0}
.meeting-type>span{min-width:0}


/* ===== QA8: remove dark frame around header (the .elementor-location-header wrapper has a dark bg + insets .site-header) ===== */
header.elementor-location-header{background:transparent!important;background-color:transparent!important;padding:0!important;margin:0!important;border:0!important;box-shadow:none!important}
.site-header{margin:0!important}

/* ===== QA9: statbar item -> compact horizontal (icon left, text right) like local, fix height ===== */
.statbar .statbar__item{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:.9rem;padding:1.4rem 1.5rem!important;text-align:left}
/* icon widget sizes to content (40px) instead of full width, so it sits inline-left not stacked-on-top */
.statbar .statbar__item>.elementor-widget-image{flex:0 0 auto;width:auto!important;max-width:none}
.statbar .statbar__item>.elementor-widget-image>.elementor-widget-container{width:auto}
.statbar .statbar__ic,.statbar .statbar__ic img{width:40px!important;height:40px!important}
/* text wrapper takes the rest, left-aligned, tight */
.statbar .statbar__item>.e-con{flex:1 1 auto;min-width:0;text-align:left;gap:2px}
.statbar .statbar__n{font-size:1.5rem;line-height:1}
.statbar .statbar__l{font-size:.8rem;line-height:1.3;margin-top:2px}

/* ===== QA10: responsive polish — kill h-overflow, stack remaining grids, hero/header at phone ===== */
/* (1) document-level h-overflow safety net (restores stripped body overflow-x; clip keeps sticky header) */
html{overflow-x:clip}
/* (2) break the min-content floor on brand grid/flex children so a long word/wide card can't push a track past the viewport */
.e-con.split>*,.e-con.grid>*,.e-con.grid-2>*,.e-con.grid-3>*,.e-con.grid-4>*,.e-con.statbar>*,.e-con.process>*,.e-con.dual-panel>*,.e-con.market-list>*,.e-con.markets>*,.e-con.meeting-types>*{min-width:0}
.e-con.card,.e-con.service-card,.e-con.value-card,.e-con.feature-card,.e-con.panel,.elementor-widget-heading .elementor-heading-title,.elementor-widget-text-editor{overflow-wrap:break-word}
/* (3) stack the grids the 600px guard missed (process only went 2-col at 1024; markets never stacked) */
@media(max-width:600px){.e-con.process,.e-con.market-list,.e-con.markets{grid-template-columns:1fr!important}}
/* (4) hero at phone: side padding + let oversized H1/lead wrap (fixes clipped hero titles on team/insights/services/about/home) */
@media(max-width:600px){
  .e-con.hero,.e-con.hero--video,.e-con.hero--page{padding-inline:clamp(1.1rem,5vw,1.5rem)!important}
  .hero__title .elementor-heading-title{max-width:100%;overflow-wrap:break-word}
  .hero--video .hero__lead p,.hero--video .hero__lead .elementor-widget-container,.hero__lead p,.hero__lead .elementor-widget-container{max-width:100%}
}
/* (5) header at phone: lang switcher + CTA live OUTSIDE the nav-menu burger; let them shrink/wrap instead of overflowing/overlapping the hero eyebrow */
@media(max-width:860px){
  .site-header .nav.container{flex-wrap:wrap;row-gap:.5rem;column-gap:.75rem}
  .site-header .cog-nav-right{margin-left:auto;flex-wrap:wrap;justify-content:flex-end;min-width:0}
  .site-header .cog-nav-right .elementor-widget-button{flex:0 1 auto;min-width:0}
  .site-header .cog-nav-right .elementor-widget-button .elementor-button{white-space:nowrap;max-width:100%}
}
@media(max-width:600px){.e-con.hero--page{padding-block-start:clamp(5.5rem,16vw,7rem)!important}}

/* ===== QA11: hero mobile fit — contain inner container + title/lead to viewport so big headings wrap (no clip) ===== */
@media(max-width:600px){
  .e-con.hero>.e-con,.e-con.hero--page>.e-con,.e-con.hero--video>.e-con{width:auto!important;max-width:100%!important}
  .hero__title,.hero--page .hero__title,.hero--video .hero__title,.hero__title .elementor-heading-title{max-width:100%!important;overflow-wrap:break-word}
  .hero__lead,.hero__lead p,.hero__lead .elementor-widget-container,.hero .lead,.hero .lead p{max-width:100%!important}
  .hero .eyebrow,.hero__eyebrow{max-width:100%!important;overflow-wrap:break-word}
}

/* ===== QA12: mobile header = logo + burger; lang + CTA moved into the burger dropdown ===== */
@media(min-width:1025px){.site-header .cog-burger-extra{display:none!important}}
@media(max-width:1024px){
  .site-header .cog-nav-right>.elementor-widget-shortcode,.site-header .cog-nav-right>.elementor-widget-button{display:none!important}
  .site-header .nav.container{flex-wrap:nowrap!important}
  .site-header .cog-nav-right{flex-wrap:nowrap!important;margin-left:auto}
  .site-header .elementor-nav-menu__container.elementor-nav-menu--dropdown{background-color:var(--ink-2,#0E1426)!important}
  .site-header .elementor-nav-menu--dropdown a.elementor-item{color:rgba(255,255,255,.9)!important}
  .site-header .elementor-nav-menu--dropdown .cog-burger-lang{display:inline-block!important;width:auto!important;border:0!important}
  .site-header .elementor-nav-menu--dropdown .cog-burger-lang a.elementor-item{display:inline-block;padding:.5rem .9rem!important;color:rgba(255,255,255,.55)!important;border:0!important}
  .site-header .elementor-nav-menu--dropdown .cog-burger-lang.cog-current a.elementor-item{color:#fff!important;font-weight:700}
  .site-header .elementor-nav-menu--dropdown .cog-burger-cta a.elementor-item{background:var(--electric)!important;color:#fff!important;border-radius:var(--radius-pill);margin:.6rem 1rem!important;justify-content:center;text-align:center;font-weight:600}
}


/* ===== QA13: mobile burger toggle -> white + clearly visible, right side ===== */
.site-header .cog-nav-right{align-items:center}
.site-header .elementor-menu-toggle{color:#fff!important;opacity:1!important}
.site-header .elementor-menu-toggle svg,.site-header .elementor-menu-toggle .e-font-icon-svg,.site-header .elementor-menu-toggle__icon--open svg,.site-header .elementor-menu-toggle__icon--close svg,.site-header .elementor-menu-toggle i{fill:#fff!important;color:#fff!important}
.site-header .elementor-menu-toggle svg{width:34px!important;height:34px!important}


/* ===== QA14: book-a-meeting split + cards true 50/50 (minmax removes the min-content floor that let cards overflow into the Calendly) ===== */
@media(min-width:861px){
  .e-con.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .meeting-types{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ===== QA15: mobile burger -> hard right (nav-menu widget had reserved the desktop menu width, floating the burger left) ===== */
@media(max-width:1024px){
  .site-header .elementor-nav-menu--main{display:none!important}
  .site-header .cog-nav-right{justify-content:flex-end!important;gap:0}
  .site-header .cog-nav-right>.elementor-widget-nav-menu{flex:0 0 auto!important;width:auto!important;max-width:max-content!important}
  .site-header .elementor-nav-menu--toggle{display:flex!important;justify-content:flex-end!important;width:auto!important}
  .site-header .elementor-menu-toggle{margin-left:auto!important}
}

/* ===== QA16: right-align the burger toggle inside the (wide) nav-menu widget so it sits hard-right ===== */
@media(max-width:1024px){
  .site-header .cog-nav-right .elementor-widget-nav-menu>.elementor-widget-container{display:flex!important;flex-direction:column;align-items:flex-end!important}
  .site-header .elementor-menu-toggle{margin:0 0 0 auto!important}
}




/* ===== QA17: mobile dropdown -> full-width below the header, anchored to header (not the right-aligned widget), scrollable (was opening off-screen/clipped after the burger moved right) ===== */
@media(max-width:1024px){
  .site-header,.site-header .nav.container{position:sticky}
  .site-header .nav.container,.site-header .cog-nav-right,.site-header .elementor-widget-nav-menu,.site-header .elementor-widget-nav-menu>.elementor-widget-container{position:static!important}
  .site-header .elementor-nav-menu__container.elementor-nav-menu--dropdown{position:absolute!important;top:100%!important;left:0!important;right:0!important;width:auto!important;max-width:none!important;margin-top:0!important;max-height:calc(100vh - var(--header-h,64px))!important;overflow-y:auto!important;z-index:1000!important;border-radius:0!important}
}


/* ===== QA18: clean mobile burger hard-right + full-width dropdown below header, scrollable (supersedes QA15/16/17 conflicts) ===== */
@media(max-width:1024px){
  .site-header .elementor-nav-menu--main{display:none!important}
  .site-header .nav.container,.site-header .cog-nav-right,.site-header .cog-nav-right>.elementor-widget-nav-menu,.site-header .cog-nav-right>.elementor-widget-nav-menu>.elementor-widget-container{position:static!important}
  .site-header .cog-nav-right{justify-content:flex-end!important;gap:0}
  .site-header .cog-nav-right>.elementor-widget-nav-menu{flex:0 0 auto!important;width:auto!important}
  .site-header .cog-nav-right>.elementor-widget-nav-menu>.elementor-widget-container{display:block!important;width:auto!important;align-items:initial!important}
  .site-header .elementor-menu-toggle{margin-left:auto!important}
  .site-header .elementor-nav-menu__container.elementor-nav-menu--dropdown{position:absolute!important;top:100%!important;left:0!important;right:0!important;width:auto!important;max-width:none!important;margin:0!important;max-height:calc(100vh - 56px)!important;overflow-y:auto!important;z-index:1000!important;border-radius:0!important}
}




/* ===== QA19: burger hidden on desktop (>1024) — QA13's unscoped display:flex was leaking it onto desktop ===== */
@media(min-width:1025px){.site-header .elementor-menu-toggle{display:none!important}}

/* =====================================================================
   QA20: interior-page pixel-perfect pass (audit vs local source of truth)
   ===================================================================== */
/* G1. Container width + gutters -> match local .container (1200 + clamp padding) */
.e-con.e-con-boxed>.e-con-inner{max-width:var(--container,1200px);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}
/* G2. Interior hero H1: force local hero__title typography over Elementor widget inline */
.hero--page .hero__title,.hero--page .elementor-widget-heading .elementor-heading-title{font-family:var(--font-display)!important;font-weight:700!important;font-size:var(--fs-hero)!important;line-height:1.06!important;letter-spacing:-.02em;color:#fff;max-width:20ch}
@media(max-width:600px){.hero--page .hero__title,.hero--page .elementor-widget-heading .elementor-heading-title{max-width:100%}}
/* G3. Section H2 size token */
.e-con .section-head .elementor-heading-title{font-size:var(--fs-h2)}
/* G4. Hero lead -> 52ch */
.hero--page .hero__lead,.hero--page .hero__lead p,.hero--page .lead,.hero--page .lead p{max-width:52ch}
/* G5. bg-ink re-assert (once the class is on the container) */
.e-con.bg-ink{background-color:var(--ink)}
/* Card normalization: 'feature-card' was over-applied -> render .card LIGHT. The 4 dark gradient
   service feature cards are separate plain blocks (rebuilt separately), so they are unaffected here. */
.e-con.card,.e-con.card.feature-card{background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--radius-lg);padding:var(--space-6)}
.e-con.card .elementor-heading-title{color:var(--ink)}
.e-con.card .elementor-widget-text-editor,.e-con.card p{color:var(--text-soft)}
.e-con.card .ic-badge{background:linear-gradient(135deg,rgba(40,0,248,.08),rgba(0,224,248,.14))!important}
.e-con.card .ic-badge img{filter:none!important}
/* G13. tick lists reset (mobile indentation) */
.e-con ul.ticks,.elementor ul.ticks{list-style:none;margin:0;padding-left:0}
/* G10. book-a-meeting hero centering backstop */
.e-con.hero--center,.hero--page.is-center{text-align:center}
.e-con.hero--center .hero__title,.e-con.hero--center .hero__lead{margin-inline:auto}
.e-con.hero--center .eyebrow{justify-content:center}
/* G14. work case-card media tile + centered client label (desktop) */
.e-con .case-card__media{aspect-ratio:16/10;min-height:220px;display:grid;place-items:center}
.e-con .case-card__client{display:block;color:#fff;z-index:2;text-align:center;font-family:var(--font-display);font-weight:700;font-size:1.4rem;line-height:1.1;letter-spacing:-.01em;padding:1rem}
/* G15. footer: kill current-page active-link leak + muted bottom links */
.footer__col a.elementor-item-active,.footer__col a[aria-current],.footer__col .elementor-item-active{color:var(--muted-2)!important;text-decoration:none;box-shadow:none;border-bottom:0}
.footer__bottom a{color:var(--muted)}
/* G16. partnerships CTA white button */
.cta-band__inner .btn--primary.is-white,.cta-band .cog-btn-white .elementor-button{background:#fff!important;color:var(--ink)!important;border-color:#fff!important}

/* ===== QA21: interior minor fixes ===== */
/* contact 'Or reach us directly' -> fs-h3 (lost its inline size) */
.cog-h3 .elementor-heading-title{font-size:var(--fs-h3)!important;line-height:1.2;letter-spacing:-.01em;font-weight:700}
/* benefits/expertise/AI/FORMATS cards: left-align content (local default), team member cards stay centered */
.e-con.card.feature-card{text-align:left}
/* partnerships CTA white button hover keeps white-ish */
.cta-band .cog-btn-white .elementor-button:hover{background:rgba(255,255,255,.92)!important;color:var(--ink)!important}

/* ===== QA22: service subpages ===== */
/* double-arrow: drop the QA7 ::after arrow when the button already carries an Elementor icon */
.hero .cog-btn-primary .elementor-button:has(.elementor-button-icon)::after,
.site-header .cog-btn-primary .elementor-button:has(.elementor-button-icon)::after{content:none!important;-webkit-mask:none!important;mask:none!important}


/* ============================================================
   QA23 — CTA band parity with local source-of-truth
   (cool blade decoration, orange eyebrow dash, ES no-arrow)
   ============================================================ */
.cta-band__inner{position:relative}
.cta-band__inner::before{content:"";position:absolute;left:-30px;bottom:-40px;width:240px;height:240px;background:url("img/color-blades.svg") center/contain no-repeat;opacity:.5;pointer-events:none;z-index:0}
.cta-band__inner > *{position:relative;z-index:1}
.cta-band__inner .eyebrow::before{background:var(--orange)}
html[lang^="es"] .cta-band__inner .elementor-button .elementor-button-icon{display:none}

/* ============================================================
   QA24 — header Client Portal button (dynamic, outline-light)
   Desktop-only is inherited from the existing mobile rule:
   .site-header .cog-nav-right>.elementor-widget-shortcode{display:none}
   ============================================================ */
.site-header .cog-portal-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;font-size:.92rem;line-height:1;padding:.66rem 1.15rem;margin:0 .55rem;background:transparent;border:2px solid rgba(255,255,255,.38);color:#fff;text-decoration:none;white-space:nowrap;transition:transform .18s var(--ease,cubic-bezier(.16,.84,.44,1)),border-color .3s var(--ease,cubic-bezier(.16,.84,.44,1)),background-color .3s var(--ease,cubic-bezier(.16,.84,.44,1))}
.site-header .cog-portal-btn:hover,.site-header .cog-portal-btn:focus-visible{border-color:#fff;background:rgba(255,255,255,.1);color:#fff;transform:translateY(-2px)}
.site-header .cog-nav-right>.elementor-widget-shortcode:has(.cog-portal-btn){display:flex;align-items:center;flex:0 0 auto}

/* QA24b — keep the header nav on one line after adding the Client Login button */
.site-header .cog-nav-right .elementor-nav-menu{flex-wrap:nowrap!important}
.site-header .cog-nav-right .elementor-nav-menu>li>.elementor-item{padding-left:.56rem!important;padding-right:.56rem!important;white-space:nowrap}
.site-header .cog-portal-btn{padding:.5rem .85rem;margin:0 .34rem;font-size:.875rem}

/* ============================================================
   QA25 — Services dropdown: the active/current item must look
   identical to the non-active items (remove the gray bg)
   ============================================================ */
.site-header .sub-menu li.current-menu-item,
.site-header .sub-menu li.current_page_item,
.site-header .sub-menu a.elementor-sub-item.elementor-item-active,
.site-header .sub-menu .current-menu-item>a.elementor-sub-item{background:transparent!important;background-color:transparent!important}
/* keep the hover highlight working on the active item too */
.site-header .sub-menu a.elementor-sub-item.elementor-item-active:hover{background:var(--mist)!important}

/* ============================================================
   QA26 — mobile: interior sections stacked horizontal padding
   (section + boxed + QA20 inner + grid) squeezed cards to ~68%
   width. Drop the redundant inner gutter on small screens so
   cards/content use the full mobile width.
   ============================================================ */
@media (max-width:600px){
  .e-con.e-con-boxed>.e-con-inner{padding-inline:0 !important}
  .elementor > .e-con.e-con-full{padding-inline:clamp(16px,4.5vw,20px) !important}
}

/* ============================================================
   QA27 — meeting-type selector (book-a-meeting / agendar-reunión)
   The grid overrides were inverted: 1-col on desktop, 2-col
   squished on mobile → cut text + overlapping check. Replace with
   ONE self-adapting grid: 1 column when the container is narrow
   (this page's left column + phones), 2 only when truly wide. Also
   let the button text wrap and keep the radio from overlapping.
   ============================================================ */
.meeting-types{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) !important;gap:var(--space-4)}
.meeting-type{min-width:0}
.meeting-type>span{min-width:0;overflow-wrap:anywhere}
.meeting-type h3,.meeting-type p{white-space:normal;overflow-wrap:anywhere}
.meeting-type .mt-check{flex-shrink:0}

/* ============================================================
   QA28 — focus outline lingered on nav links/buttons after a
   MOUSE click (the blue box, visible until the page navigated).
   Remove it for pointer focus; keep a clean brand ring for
   KEYBOARD users only (accessibility).
   ============================================================ */
:focus:not(:focus-visible){outline:none !important}
a:focus-visible,button:focus-visible,.elementor-item:focus-visible,.elementor-sub-item:focus-visible,.cog-portal-btn:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--electric) !important;outline-offset:3px;border-radius:4px}

/* ============================================================
   CAMPAIGN OS / Premium Hispanic Network — commercial section
   ============================================================ */
.cognate-anchor{display:block;height:0;scroll-margin-top:96px}
.cognate-trust-line{margin-top:1.1rem;font-size:.9rem;color:rgba(255,255,255,.75);max-width:46ch}
/* channel pills */
.cognate-pills{display:flex;flex-wrap:wrap;gap:.6rem}
.cognate-channel-pill{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:600;font-size:.9rem;letter-spacing:-.01em;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);padding:.55rem 1.05rem;transition:transform .18s var(--ease,ease),border-color .25s,box-shadow .25s}
.cognate-channel-pill:hover{transform:translateY(-2px);border-color:rgba(40,0,248,.35);box-shadow:0 10px 24px -16px rgba(40,0,248,.4)}
/* packages */
.cognate-packages-head{margin-bottom:2rem}
.cognate-packages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.6rem);align-items:start}
.cognate-package-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.4rem,2.5vw,2rem)}
.cognate-package-card:nth-child(2){border-color:rgba(40,0,248,.4);box-shadow:0 24px 60px -34px rgba(40,0,248,.45)}
.cognate-pkg-badge{display:inline-block;align-self:flex-start;font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--indigo);background:linear-gradient(135deg,rgba(40,0,248,.08),rgba(0,224,248,.14));border-radius:var(--radius-pill);padding:.4rem .8rem;margin-bottom:1rem}
.cognate-package-card h3{font-size:1.3rem;line-height:1.15;margin-bottom:.5rem;color:var(--ink)}
.cognate-pkg-ideal{color:var(--text-soft);font-size:.95rem;margin-bottom:1.1rem}
.cognate-pkg-inc{margin:0 0 1.1rem!important;padding-left:0!important;list-style:none}
.cognate-pkg-inc li{position:relative;padding-left:1.6rem;margin:.45rem 0;font-size:.92rem;color:var(--ink)}
.cognate-pkg-inc li::before{content:"";position:absolute;left:0;top:.5em;width:.7rem;height:.7rem;border-radius:50%;background:linear-gradient(135deg,var(--electric),var(--cyan))}
.cognate-pkg-details{margin:0 0 1rem;border-top:1px solid var(--line);padding-top:.9rem}
.cognate-pkg-details>summary{cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:600;font-size:.88rem;color:var(--indigo);display:flex;align-items:center;gap:.4rem}
.cognate-pkg-details>summary::-webkit-details-marker{display:none}
.cognate-pkg-details>summary::after{content:"+";margin-left:auto;font-size:1.1rem;line-height:1;transition:transform .2s}
.cognate-pkg-details[open]>summary::after{content:"\2212"}
.cognate-pkg-detail{margin-top:.8rem}
.cognate-pkg-detail p{font-size:.88rem;color:var(--text-soft);margin:.5rem 0;line-height:1.5}
.cognate-pkg-detail strong{color:var(--ink)}
.cognate-pkg-note{font-size:.8rem;color:var(--muted);margin:0 0 1.1rem;line-height:1.45}
.cognate-pkg-cta{margin-top:auto;justify-content:center;text-align:center;width:100%}
.cognate-pkg-micro{display:block;text-align:center;font-size:.76rem;color:var(--muted);margin-top:.55rem}
@media(max-width:880px){.cognate-packages{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* Campaign OS brief form (Elementor Pro) — brand styling */
.cognate-proposal-form-widget .elementor-field-group>.elementor-field-label{font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--ink);margin-bottom:.4rem}
.cognate-proposal-form-widget .elementor-field-textual,.cognate-proposal-form-widget select.elementor-field{width:100%;border:1px solid var(--line);border-radius:10px;padding:.72rem .9rem;font-size:.95rem;background:#fff;color:var(--ink);font-family:inherit}
.cognate-proposal-form-widget .elementor-field-textual:focus,.cognate-proposal-form-widget select.elementor-field:focus{outline:none;border-color:var(--electric);box-shadow:0 0 0 4px rgba(40,0,248,.1)}
.cognate-proposal-form-widget textarea.elementor-field-textual{min-height:120px}
.cognate-proposal-form-widget .elementor-field-subgroup{display:flex;flex-wrap:wrap;gap:.5rem .95rem;margin-top:.15rem}
.cognate-proposal-form-widget .elementor-field-subgroup .elementor-field-option{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--ink)}
.cognate-proposal-form-widget .elementor-field-required .elementor-field-label:after{content:" *";color:var(--orange)}
.cognate-proposal-form-widget .elementor-button{background:var(--electric);color:#fff;border:0;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;padding:.95rem 1.6rem;font-size:1rem;transition:transform .18s var(--ease,ease),background-color .25s,box-shadow .3s}
.cognate-proposal-form-widget .elementor-button:hover{background:#1d00c8;transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(40,0,248,.6)}
.cognate-proposal-form-widget .elementor-message{border-radius:10px}

/* Campaign OS — the orchestration layer (differentiator) */
.cognate-orch{color:#fff}
.cognate-orch-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.cognate-orch-copy h2{color:#fff;max-width:18ch}
.cognate-orch-vs{margin-top:1.2rem;display:flex;flex-direction:column;gap:.3rem}
.cognate-orch-vs span{color:rgba(255,255,255,.55);font-size:1rem}
.cognate-orch-claim{margin-top:1.1rem;font-size:1.12rem;line-height:1.5;color:#fff}
.cognate-orch-claim strong{color:var(--cyan)}
.cognate-orch-diagram{display:flex;flex-direction:column;align-items:center;gap:.85rem}
.cognate-orch-os{width:100%;text-align:center;border-radius:16px;padding:1.3rem 1rem;background:linear-gradient(135deg,rgba(40,0,248,.92),rgba(0,224,248,.6));box-shadow:0 22px 55px -22px rgba(0,224,248,.55)}
.cognate-orch-os-name{display:block;font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:#fff}
.cognate-orch-os-caps{display:block;margin-top:.35rem;font-size:.82rem;color:rgba(255,255,255,.92)}
.cognate-orch-conn{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.5);text-align:center}
.cognate-orch-conn::before{content:"";display:block;width:2px;height:18px;background:linear-gradient(rgba(0,224,248,.85),transparent);margin:0 auto .4rem}
.cognate-orch-base{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem}
.cognate-orch-base span{font-family:var(--font-display);font-weight:600;font-size:.85rem;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-pill);padding:.45rem .9rem}
.cognate-orch-base .own{color:#fff;border-color:transparent;background:linear-gradient(135deg,rgba(248,48,0,.92),rgba(248,48,0,.62))}
.cognate-orch-foot{margin-top:2.4rem;border-top:1px solid rgba(255,255,255,.12);padding-top:1.6rem}
.cognate-orch-solves{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.cognate-orch-solves .lbl{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);margin-right:.3rem}
.cognate-orch-solves .pill{font-size:.85rem;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-pill);padding:.45rem .85rem}
.cognate-orch-proof{margin-top:1.3rem;font-size:.85rem;color:rgba(255,255,255,.55)}
@media(max-width:860px){.cognate-orch-grid{grid-template-columns:1fr;gap:2rem}.cognate-orch-copy h2{max-width:100%}}

/* Home — Campaign OS intro band */
.cognate-home-os{background:linear-gradient(135deg,#F4F5F8 0%,rgba(40,0,248,.05) 55%,rgba(0,224,248,.07) 100%) !important}
.cognate-home-os .eyebrow{color:var(--electric)}
.cognate-home-os h2{max-width:22ch}
.cognate-home-os .lead{max-width:58ch}

/* QA30 — header now carries 6 nav items + 2 buttons: tighten to keep one line on desktop */
@media(min-width:1025px){
  .site-header .cog-nav-right .elementor-nav-menu>li>.elementor-item{padding-left:.45rem !important;padding-right:.45rem !important;font-size:.92rem}
  .site-header .cog-portal-btn{padding:.48rem .8rem;margin:0 .3rem;font-size:.85rem}
  .site-header .cog-btn-primary .elementor-button{padding:.62rem 1.05rem !important}
  .site-header .lang a{padding:.32rem .55rem;font-size:.78rem}
  .site-header .cog-nav-right{gap:.15rem}
}

/* QA31 — Campaign OS brief form: submit button uses brand electric (matches primary CTA), not the theme accent (orange) */
.cognate-proposal-form-widget form .elementor-button,
.cognate-proposal-form-widget .elementor-button[type="submit"]{
  background-color:var(--electric);
  border-color:var(--electric);
  color:#fff;
}
.cognate-proposal-form-widget form .elementor-button:hover,
.cognate-proposal-form-widget .elementor-button[type="submit"]:hover{
  background-color:#1d00c8;
  box-shadow:0 14px 30px -12px rgba(40,0,248,.6);
}


/* ============================================================
   QA32 — Channels funnel diagram + packages restyle (EN+ES)
   workflow-designed: Inset funnel + media-deck labels + dark featured card
   ============================================================ */
/* ===== Channels & formats — Inset funnel (taper + media-deck labels) ===== */
.cognate-funnel{
  position:relative;
  max-width:880px;
  margin:34px auto 0;
  font-family:var(--font-body,"Inter",sans-serif);
}
.cognate-funnel-flow{
  display:flex;align-items:center;gap:14px;
  max-width:560px;margin:0 auto 20px;
}
.cognate-funnel-flow-label{
  font-family:var(--font-display,"Poppins",sans-serif);
  font-weight:700;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted,#6B6F80);white-space:nowrap;
}
.cognate-funnel-flow-label--end{color:var(--electric,#2800F8);}
.cognate-funnel-flow-track{
  position:relative;flex:1 1 auto;height:2px;border-radius:999px;
  background:linear-gradient(90deg,var(--electric,#2800F8),var(--cyan,#00E0F8));
}
.cognate-funnel-flow-track::after{
  content:"";position:absolute;right:-1px;top:50%;
  width:7px;height:7px;border-right:2px solid var(--cyan,#00E0F8);
  border-bottom:2px solid var(--cyan,#00E0F8);
  transform:translateY(-50%) rotate(-45deg);
}
.cognate-funnel-panel{
  position:relative;
  min-height:380px;
  display:flex;flex-direction:column;justify-content:center;
  gap:16px;
  padding:38px 30px;
  border-radius:var(--radius-lg,22px);
  background:
    radial-gradient(120% 90% at 50% -8%, rgba(40,0,248,.28), transparent 60%),
    linear-gradient(180deg, var(--ink-2,#0E1426), var(--ink,#070C18));
  box-shadow:0 30px 60px -28px rgba(10,10,120,.45);
  overflow:hidden;
}
.cognate-funnel-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 32%, transparent 80%);
          mask-image:radial-gradient(120% 100% at 50% 0%, #000 32%, transparent 80%);
}
.cognate-funnel-spine{
  position:absolute;left:50%;top:42px;bottom:42px;width:2px;
  transform:translateX(-50%);z-index:0;
}
.cognate-funnel-rail{
  position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(180deg,
    var(--electric,#2800F8), var(--cyan,#00E0F8) 72%, rgba(0,224,248,0));
  opacity:.85;
}
.cognate-funnel-arrow{
  position:absolute;left:50%;width:8px;height:8px;
  border-right:2px solid var(--cyan,#00E0F8);
  border-bottom:2px solid var(--cyan,#00E0F8);
  transform:translateX(-50%) rotate(45deg);opacity:.8;
}
.cognate-funnel-arrow--1{top:34%;}
.cognate-funnel-arrow--2{top:66%;border-color:var(--orange,#F83000);}
.cognate-funnel-tier{
  position:relative;z-index:1;
  margin:0 auto;width:100%;
  display:flex;align-items:center;gap:22px;
  padding:22px 26px;
  border-radius:var(--radius,14px);
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
}
.cognate-funnel-tier--1{max-width:100%;}
.cognate-funnel-tier--2{max-width:84%;}
.cognate-funnel-tier--3{
  max-width:66%;
  background:linear-gradient(180deg, rgba(40,0,248,.26), rgba(0,224,248,.10));
  border-color:rgba(0,224,248,.34);
  box-shadow:0 16px 36px -22px rgba(40,0,248,.6);
}
.cognate-funnel-meta{
  flex:0 0 auto;min-width:184px;
  display:flex;align-items:center;gap:13px;
}
.cognate-funnel-index{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;
  font-family:var(--font-display,"Poppins",sans-serif);
  font-weight:800;font-size:.86rem;color:#fff;
  background:linear-gradient(135deg, var(--electric,#2800F8), var(--cyan,#00E0F8));
  box-shadow:0 8px 16px -8px rgba(40,0,248,.6);
}
.cognate-funnel-index--accent{
  background:linear-gradient(135deg, var(--orange,#F83000), #FF6A3D);
  box-shadow:0 8px 16px -8px rgba(248,48,0,.55);
}
.cognate-funnel-titles{display:flex;flex-direction:column;gap:3px;min-width:0;}
.cognate-funnel-step{
  font-family:var(--font-display,"Poppins",sans-serif);
  font-weight:700;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan,#00E0F8);
}
.cognate-funnel-step--accent{color:#FF8A5C;}
.cognate-funnel-name{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-display,"Poppins",sans-serif);
  font-weight:600;font-size:1.02rem;line-height:1.15;color:#fff;
}
.cognate-funnel-glyph{flex:0 0 auto;color:var(--cyan,#00E0F8);opacity:.95;}
.cognate-funnel-tier--3 .cognate-funnel-glyph{color:#FF8A5C;}
.cognate-funnel-count{
  flex:0 0 auto;margin-left:auto;align-self:flex-start;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 7px;border-radius:999px;
  font-family:var(--font-display,"Poppins",sans-serif);
  font-weight:700;font-size:.72rem;color:#EAF6FF;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
}
.cognate-funnel-count--accent{
  color:#fff;background:rgba(248,48,0,.18);border-color:rgba(248,48,0,.5);
}
.cognate-funnel-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;flex:1 1 auto;}
.cognate-chip{
  display:inline-flex;align-items:center;
  padding:9px 16px;border-radius:var(--radius-pill,999px);
  font-family:var(--font-display,"Poppins",sans-serif);
  font-weight:600;font-size:.82rem;color:#EAF6FF;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.cognate-chip:hover{
  transform:translateY(-2px);color:#fff;border-color:transparent;
  background:linear-gradient(135deg, var(--electric,#2800F8), var(--cyan,#00E0F8));
}
.cognate-chip--accent{
  background:rgba(248,48,0,.12);border-color:rgba(248,48,0,.42);
}
.cognate-chip--accent:hover{
  background:linear-gradient(135deg, var(--orange,#F83000), #FF6A3D);border-color:transparent;
}
.cognate-funnel-foot{
  max-width:580px;margin:18px auto 0;text-align:center;
  font-family:var(--font-body,"Inter",sans-serif);
  font-size:.9rem;line-height:1.5;color:var(--text-soft,#3A4054);
}
@media (max-width:900px){
  .cognate-funnel-tier--2{max-width:92%;}
  .cognate-funnel-tier--3{max-width:78%;}
  .cognate-funnel-meta{min-width:168px;}
  .cognate-funnel{max-width:100%;}
}
@media (max-width:600px){
  .cognate-funnel{margin-top:26px;}
  .cognate-funnel-flow{margin-bottom:16px;gap:10px;}
  .cognate-funnel-flow-label{font-size:.58rem;letter-spacing:.14em;}
  .cognate-funnel-panel{min-height:0;padding:24px 16px;gap:13px;}
  .cognate-funnel-panel::before{background-size:34px 34px;}
  .cognate-funnel-spine{display:none;}
  .cognate-funnel-tier,
  .cognate-funnel-tier--1,
  .cognate-funnel-tier--2,
  .cognate-funnel-tier--3{
    max-width:100%;
    flex-direction:column;align-items:flex-start;gap:14px;
    padding:18px;
  }
  .cognate-funnel-index{width:34px;height:34px;}
  .cognate-funnel-meta{min-width:0;width:100%;}
  .cognate-funnel-chips{justify-content:flex-start;width:100%;}
  .cognate-chip{min-height:40px;}
  .cognate-funnel-foot{font-size:.86rem;margin-top:14px;}
}

/* ===== Packages — card background treatment ===== */
.cognate-package-card{
  position:relative;
  background:linear-gradient(180deg, var(--paper,#FFFFFF) 0%, #F7F8FC 100%);
  border:1px solid var(--line,#E7E8EE);
  border-radius:var(--radius-lg,22px);
  box-shadow:0 18px 40px -28px rgba(7,12,24,.4), 0 2px 6px -4px rgba(7,12,24,.14);
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;
}
.cognate-package-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--electric,#2800F8), var(--cyan,#00E0F8));
  opacity:.55;
}
.cognate-package-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 56px -28px rgba(7,12,24,.5), 0 4px 10px -5px rgba(7,12,24,.18);
}
.cognate-package-card:nth-child(2){
  background:
    radial-gradient(130% 120% at 50% -10%, rgba(40,0,248,.20) 0%, transparent 58%),
    linear-gradient(165deg, var(--ink-2,#0E1426) 0%, var(--ink,#070C18) 100%);
  border-color:rgba(40,0,248,.45);
  box-shadow:0 30px 60px -24px rgba(10,10,120,.55), 0 4px 12px -6px rgba(7,12,24,.4);
  transform:translateY(-6px);
  z-index:1;
}
.cognate-package-card:nth-child(2)::before{height:4px;opacity:1;}
.cognate-package-card:nth-child(2):hover{
  transform:translateY(-10px);
  box-shadow:0 38px 72px -26px rgba(10,10,120,.62), 0 6px 16px -8px rgba(7,12,24,.45);
}
.cognate-package-card:nth-child(2) :is(h1,h2,h3,h4,h5,h6,strong,b){color:#FFFFFF;}
.cognate-package-card:nth-child(2) :is(p,li,span,small,em){color:#C7CCDE;}
.cognate-package-card:nth-child(2) :is(.cognate-package-price,.cognate-pkg-price){color:#FFFFFF;}
.cognate-package-card:nth-child(2) :is(hr,li){border-color:rgba(255,255,255,.14);}
.cognate-package-card:nth-child(2) summary{color:#EAEBF2;}
@media (max-width:600px){
  .cognate-package-card{border-radius:var(--radius,14px);}
  .cognate-package-card:nth-child(2),
  .cognate-package-card:nth-child(2):hover{transform:none;}
}

/* ===== Packages — CTA as a real filled brand button ===== */
.cognate-pkg-cta.cog-btn.cog-btn-primary,
.cognate-pkg-cta,
a.cognate-pkg-cta{
  display:block;width:100%;box-sizing:border-box;
  margin-top:22px;padding:14px 24px;
  text-align:center;text-decoration:none;
  font-family:var(--font-display,"Poppins",sans-serif);
  font-weight:600;font-size:.95rem;line-height:1.2;letter-spacing:.01em;
  color:#FFFFFF;
  background:var(--electric,#2800F8);
  border:1px solid var(--electric,#2800F8);
  border-radius:var(--radius-pill,999px);
  box-shadow:0 10px 22px -10px rgba(40,0,248,.55);
  cursor:pointer;
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cognate-pkg-cta.cog-btn.cog-btn-primary:hover,
.cognate-pkg-cta:hover,
a.cognate-pkg-cta:hover,
.cognate-pkg-cta.cog-btn.cog-btn-primary:focus-visible,
.cognate-pkg-cta:focus-visible,
a.cognate-pkg-cta:focus-visible{
  color:#FFFFFF;
  background:#1d00c8;
  border-color:#1d00c8;
  transform:translateY(-2px);
  box-shadow:0 16px 30px -12px rgba(40,0,248,.62);
}
.cognate-pkg-cta.cog-btn.cog-btn-primary:active,
.cognate-pkg-cta:active,
a.cognate-pkg-cta:active{
  transform:translateY(0);
  box-shadow:0 8px 18px -10px rgba(40,0,248,.5);
}
.cognate-pkg-cta:focus-visible,
a.cognate-pkg-cta:focus-visible{outline:3px solid var(--cyan,#00E0F8);outline-offset:2px;}
.cognate-package-card:nth-child(2) .cognate-pkg-cta,
.cognate-package-card:nth-child(2) a.cognate-pkg-cta{
  background:linear-gradient(135deg, var(--electric,#2800F8), var(--cyan,#00E0F8));
  border-color:transparent;
  box-shadow:0 12px 26px -10px rgba(0,224,248,.45);
}
.cognate-package-card:nth-child(2) .cognate-pkg-cta:hover,
.cognate-package-card:nth-child(2) a.cognate-pkg-cta:hover{
  background:linear-gradient(135deg, #1d00c8, #00c4da);
  box-shadow:0 18px 34px -12px rgba(0,224,248,.5);
}

/* QA32b — dark featured card: badge contrast + divider */
.cognate-package-card:nth-child(2) .cognate-pkg-badge{color:#EAF6FF;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);}
.cognate-package-card:nth-child(2) .cognate-pkg-details{border-top-color:rgba(255,255,255,.14);}
.cognate-package-card:nth-child(2) .cognate-pkg-cta{margin-top:auto;}

/* QA32c — host CSS optimizer strips multi-layer (comma-separated) background values; restate the two dark surfaces with a solid color + single-layer gradient (minifier-safe) */
.cognate-funnel-panel{background-color:#070C18;background-image:radial-gradient(120% 90% at 50% 0%, rgba(40,0,248,.30), transparent 60%);}
.cognate-package-card:nth-child(2){background-color:#070C18;background-image:radial-gradient(130% 120% at 50% 0%, rgba(40,0,248,.22), transparent 58%);}

/* QA32d — host optimizer strips ALL css gradient() values site-wide; restate the design's key surfaces + accents as solid/rgba colors (which survive) */
/* funnel accents */
.cognate-funnel-flow-track{background:#2800F8;}
.cognate-funnel-index{background:#2800F8;}
.cognate-funnel-index--accent{background:#F83000;}
.cognate-funnel-tier{background:rgba(255,255,255,.05);}
.cognate-funnel-tier--3{background:rgba(40,0,248,.18);}
.cognate-chip:hover{background:#2800F8;}
.cognate-chip--accent:hover{background:#F83000;}
/* package cards */
.cognate-package-card{background:#EDF0FA;}
.cognate-package-card::before{background:#2800F8;}
.cognate-package-card:nth-child(2){background:#070C18;}
.cognate-package-card:nth-child(2)::before{background:#00E0F8;}
.cognate-package-card:nth-child(2) .cognate-pkg-cta{background:#2800F8;}

/* ===== QA33 — Campaign OS brief: multi-step wizard (Elementor) brand styling, electric-primary, solid colors ===== */
.cognate-proposal-form-widget .e-form__indicators{margin:0 0 2.2rem;align-items:flex-start;}
.cognate-proposal-form-widget .e-form__indicators__indicator{flex:0 0 auto;}
.cognate-proposal-form-widget .e-form__indicators__indicator__number{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;line-height:1;
  border:2px solid var(--line,#E7E8EE);background:#fff;color:var(--muted-2,#AEB4CF);
  font-family:var(--font-display,"Poppins",sans-serif);font-weight:700;font-size:.95rem;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.cognate-proposal-form-widget .e-form__indicators__indicator__label{
  font-family:var(--font-display,"Poppins",sans-serif);font-weight:600;font-size:.8rem;
  margin-top:.55rem;color:var(--muted,#6B6F80);transition:color .2s ease;
}
.cognate-proposal-form-widget .e-form__indicators__indicator--state-active .e-form__indicators__indicator__number,
.cognate-proposal-form-widget .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__number{
  background:var(--electric,#2800F8);border-color:var(--electric,#2800F8);color:#fff;
  box-shadow:0 8px 18px -8px rgba(40,0,248,.5);
}
.cognate-proposal-form-widget .e-form__indicators__indicator--state-active .e-form__indicators__indicator__label{color:var(--electric,#2800F8);}
.cognate-proposal-form-widget .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__label{color:var(--ink,#070C18);}
.cognate-proposal-form-widget .e-form__indicators__indicator__separator{background:var(--line,#E7E8EE);height:2px;margin-top:19px;}
.cognate-proposal-form-widget .e-form__indicators__indicator--state-completed + .e-form__indicators__indicator__separator{background:var(--electric,#2800F8);}
/* step nav: previous button = outline secondary (next/submit stay electric) */
.cognate-proposal-form-widget .e-form__buttons__wrapper__button-previous{
  background:#fff;color:var(--electric,#2800F8);border:1.5px solid var(--electric,#2800F8);box-shadow:none;
}
.cognate-proposal-form-widget .e-form__buttons__wrapper__button-previous:hover{background:var(--electric,#2800F8);color:#fff;}
.cognate-proposal-form-widget .e-form__buttons{gap:.8rem;}

/* QA33b — wizard Back button = outline secondary (out-specify the form button rule) */
.cognate-proposal-form-widget form .elementor-button.e-form__buttons__wrapper__button-previous{background:#fff;color:var(--electric,#2800F8);border:1.5px solid var(--electric,#2800F8);box-shadow:none;}
.cognate-proposal-form-widget form .elementor-button.e-form__buttons__wrapper__button-previous:hover{background:var(--electric,#2800F8);color:#fff;}

/* QA33c — wizard indicator on mobile: 4 even columns (circle + wrapped title), drop connector lines so all steps fit ≤600px */
@media(max-width:600px){
  .cognate-proposal-form-widget .e-form__indicators{margin-bottom:1.7rem;gap:2px;}
  .cognate-proposal-form-widget .e-form__indicators__indicator__separator{display:none;}
  .cognate-proposal-form-widget .e-form__indicators__indicator{flex:1 1 0;min-width:0;}
  .cognate-proposal-form-widget .e-form__indicators__indicator__number{width:32px;height:32px;font-size:.8rem;}
  .cognate-proposal-form-widget .e-form__indicators__indicator__label{font-size:.6rem;line-height:1.18;margin-top:.4rem;text-align:center;white-space:normal;padding:0 2px;}
}

/* QA33d — wizard nav buttons side by side (Back | Continue/Submit), not stacked */
.cognate-proposal-form-widget .e-form__buttons{flex-wrap:nowrap;gap:.75rem;align-items:stretch;}
.cognate-proposal-form-widget .e-form__buttons>*{flex:1 1 0;min-width:0;margin-bottom:0;}
.cognate-proposal-form-widget .e-form__buttons .elementor-button{width:100%;}

/* QA33f — Back button text rendered white (a higher-specificity rule wins on color); force electric (necessary !important) */
.cognate-proposal-form-widget .e-form__buttons__wrapper__button-previous,
.cognate-proposal-form-widget .e-form__buttons__wrapper__button-previous *{color:var(--electric,#2800F8) !important;}
.cognate-proposal-form-widget .e-form__buttons__wrapper__button-previous:hover,
.cognate-proposal-form-widget .e-form__buttons__wrapper__button-previous:hover *{color:#fff !important;}

/* QA34 — white cards inside a dark (bg-ink) section: keep card titles dark (they were inheriting the section's light heading color → white-on-white) */
.bg-ink .card h3,
.bg-ink .feature-card h3{color:var(--ink);}

/* QA34b — out-specify the bg-ink heading-whitening rule for white cards (0,5,0 beats 0,4,0) */
.bg-ink .card .elementor-widget-heading.elementor-element .elementor-heading-title,
.bg-ink .feature-card .elementor-widget-heading.elementor-element .elementor-heading-title{color:var(--ink);}

/* QA36 — host optimizer strips the multi-layer gradients on white-text sections for ANONYMOUS visitors (logged-in admins still see the gradient). Solid dark fallbacks keep .bg-gradient + .cta-band__inner dark for the public so white text/numbers + buttons stay visible. */
.bg-gradient{background-color:#0A0F22;}
.cta-band__inner{background-color:#0A0A78;}
.hero--page{background-color:#0A0F22;}

/* QA37 — .stat-big__n used gradient text-fill (color:transparent + background-clip:text); the host optimizer strips the gradient for anonymous visitors → invisible numbers. Force a solid fill. */
.stat-big__n{background:none !important;color:var(--electric);-webkit-text-fill-color:var(--electric);}
.bg-ink .stat-big__n,.bg-gradient .stat-big__n{color:var(--cyan);-webkit-text-fill-color:var(--cyan);}

/* QA38 — Locations FAQ accordion */
.cognate-faq{max-width:820px;margin:0 auto;}
.cognate-faq-item{border:1px solid var(--line);border-radius:14px;margin-bottom:.8rem;padding:0 1.3rem;background:#fff;}
.cognate-faq-item>summary{cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:600;font-size:1.04rem;color:var(--ink);padding:1.1rem 0;display:flex;align-items:flex-start;gap:.6rem;}
.cognate-faq-item>summary::-webkit-details-marker{display:none}
.cognate-faq-item>summary::after{content:"+";margin-left:auto;font-size:1.4rem;color:var(--electric);line-height:1;flex:0 0 auto}
.cognate-faq-item[open]>summary::after{content:"\2212"}
.cognate-faq-a{padding:0 0 1.2rem;color:var(--text-soft);line-height:1.6}
.cognate-faq-a p{margin:0}

/* QA39 — mega-footer link columns (SEO internal-linking surface) */
.footer__grid--links{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding-bottom:2.4rem;margin-bottom:2.4rem;border-bottom:1px solid rgba(255,255,255,.12);}
.footer__heading{font-family:var(--font-display);font-weight:700;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:#fff;margin:0 0 1rem;}
.footer__links{list-style:none;margin:0;padding:0;}
.footer__links li{margin:.5rem 0;}
.footer__links a{color:#AEB4CF;font-size:.92rem;text-decoration:none;transition:color .18s;}
.footer__links a:hover{color:#fff;}
@media(max-width:780px){.footer__grid--links{grid-template-columns:repeat(2,1fr);gap:1.6rem 1.2rem;}}
@media(max-width:440px){.footer__grid--links{grid-template-columns:1fr;}}

/* QA39b — force grid over Elementor's default container flex-column */
.footer__grid--links{display:grid !important;align-items:start;}
.footer__grid--links>.footer__col{width:auto;}


/* QA40 — team card LinkedIn link */
.team-card__linkedin{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-top:var(--space-3);border-radius:50%;color:var(--electric);background:rgba(40,0,248,.08);transition:color .15s ease, background .15s ease, transform .15s ease;}
.team-card__linkedin:hover,.team-card__linkedin:focus-visible{color:#fff;background:var(--electric);transform:translateY(-1px);}
.team-card__linkedin svg{display:block;}
.bg-ink .team-card__linkedin,.bg-gradient .team-card__linkedin{color:var(--cyan);background:rgba(255,255,255,.10);}
.bg-ink .team-card__linkedin:hover,.bg-ink .team-card__linkedin:focus-visible,.bg-gradient .team-card__linkedin:hover,.bg-gradient .team-card__linkedin:focus-visible{color:#0A0F22;background:var(--cyan);}


/* QA41 — Locations 'Where we go local': city photo header band (Gemini watermark cropped) */
.market-cards > .e-con{ position:relative; overflow:hidden; padding-top:188px !important; }
.market-cards > .e-con::before{ content:''; position:absolute; top:0; left:0; right:0; height:160px; background-size:cover; background-position:center 30%; background-repeat:no-repeat; box-shadow:inset 0 -3px 0 0 var(--electric); z-index:0; }
.market-cards > .e-con > *{ position:relative; z-index:1; }
.market-cards > .e-con:nth-child(1)::before{ background-image:url('https://www.cognatehispanic.com/wp-content/uploads/2026/06/new_york-manhattan-brooklyn-queens-bronx-1024x559.webp'); }
.market-cards > .e-con:nth-child(2)::before{ background-image:url('https://www.cognatehispanic.com/wp-content/uploads/2026/06/miami_ft_lauderdale-florida-1024x559.png'); }
.market-cards > .e-con:nth-child(3)::before{ background-image:url('https://www.cognatehispanic.com/wp-content/uploads/2026/06/los_angeles-california-1024x559.png'); }
.market-cards > .e-con:nth-child(4)::before{ background-image:url('https://www.cognatehispanic.com/wp-content/uploads/2026/06/dallas-fortworth-texas-1024x559.webp'); }
.market-cards > .e-con:nth-child(5)::before{ background-image:url('https://www.cognatehispanic.com/wp-content/uploads/2026/06/houston-texas-1024x559.png'); }
.market-cards > .e-con:nth-child(6)::before{ background-image:url('https://www.cognatehispanic.com/wp-content/uploads/2026/06/chicago-illinois-1024x559.webp'); }
@media (max-width:782px){ .market-cards > .e-con{ padding-top:204px !important; } .market-cards > .e-con::before{ height:176px; } }


/* QA42 — Team culture collage */
.cognate-culture{ max-width:var(--container); margin:0 auto; padding:clamp(2.5rem,6vw,5rem) 24px; }
.cognate-culture__head{ max-width:760px; margin-bottom:clamp(1.4rem,3vw,2.4rem); }
.cognate-culture__head h2{ margin-top:.4rem; }
.cognate-culture__head .lead{ margin-top:.85rem; }
.culture-collage{ display:flex; flex-direction:column; gap:12px; }
.culture-collage .cc{ position:relative; overflow:hidden; border-radius:16px; background:var(--mist); }
.culture-collage .cc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s var(--ease); }
.culture-collage .cc:hover img{ transform:scale(1.045); }
.cc--hero{ aspect-ratio:2/1; }
.cc--hero img{ object-position:center 42%; }
.cc-row{ display:flex; gap:12px; }
.cc-row .cc{ flex-grow:var(--ar,1); flex-basis:0; }
.cc-row .cc::before{ content:''; display:block; padding-bottom:calc(100% / var(--ar,1)); }
@media (max-width:760px){ .cc--hero{ aspect-ratio:3/2; } .cc-row{ flex-direction:column; } .cc-row .cc{ flex:none; } }


/* QA43 — legal/long-form pages */
.cognate-legal{ max-width:800px; }
.cognate-legal .legal-updated{ color:var(--muted); font-size:.9rem; margin:0 0 1.6rem; }
.cognate-legal h2{ font-family:var(--font-display); font-size:1.4rem; margin:2.4rem 0 .6rem; color:var(--ink); }
.cognate-legal h3{ font-family:var(--font-display); font-size:1.08rem; margin:1.6rem 0 .4rem; color:var(--ink); }
.cognate-legal p{ margin:0 0 1rem; color:var(--text-soft); line-height:1.75; }
.cognate-legal ul{ margin:0 0 1.1rem 1.2rem; color:var(--text-soft); line-height:1.75; }
.cognate-legal li{ margin:.35rem 0; }
.cognate-legal a{ color:var(--electric); text-decoration:underline; }
.cognate-legal strong{ color:var(--ink); }


/* QA44 — Work: single case page (solid colors only) */
.cognate-case-hero{position:relative;overflow:hidden;padding:clamp(4rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem);}
.cognate-case-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.30;z-index:0;}
.cognate-case-hero::after{content:'';position:absolute;inset:0;background:rgba(7,12,24,.55);z-index:0;}
.cognate-case-hero__inner{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:0 24px;}
.cognate-case-hero__client{color:var(--cyan);font-family:var(--font-display);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.85rem;margin:1rem 0 .4rem;}
.cognate-case-hero__title{color:#fff;font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin:0;}
.cognate-case-hero__lead{color:rgba(255,255,255,.82);font-size:var(--fs-lead);margin-top:1rem;max-width:60ch;}
.cognate-case-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem;}
.cognate-chip{font-size:.78rem;font-weight:600;padding:.3rem .7rem;border-radius:var(--radius-pill);background:rgba(255,255,255,.10);color:#fff;}
.cognate-chip--ind{background:rgba(0,224,248,.16);color:var(--cyan);}
.cognate-chip--svc{background:rgba(40,0,248,.22);color:#cdbcff;}
.case-badge{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.3rem .7rem;border-radius:6px;color:#fff;}
.case-badge.badge--network{background:var(--electric);}
.case-badge.badge--creative{background:var(--orange);}
.case-badge.badge--mixed{background:var(--indigo);}
.case-badge.badge--tech{background:var(--cyan);color:var(--ink);}
.cognate-wrap{max-width:820px;margin:0 auto;padding:clamp(2.5rem,5vw,4rem) 24px;}
.cognate-wrap-wide{max-width:1120px;margin:0 auto;padding:clamp(2.5rem,5vw,4rem) 24px;}
.cognate-case-body h2,.cognate-case-results h2,.cognate-case-related h2{font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--ink);margin:0 0 .6rem;}
.cognate-case-block{margin-bottom:2rem;}
.cognate-case-block p,.cognate-case-results p{color:var(--text-soft);line-height:1.75;}
.cognate-case-role{color:var(--muted);font-size:.95rem;margin-bottom:1.5rem;}
.cognate-case-role strong{color:var(--ink);}
.cognate-metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;padding:1.8rem;background:var(--mist);border-radius:var(--radius-lg);}
.cognate-metric{text-align:center;}
.cognate-metric__v{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,4vw,3rem);color:var(--electric);line-height:1;}
.cognate-metric__l{display:block;color:var(--ink);font-weight:600;margin-top:.4rem;}
.cognate-metric__s{display:block;color:var(--muted);font-size:.78rem;margin-top:.2rem;}
.cognate-case-quote{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:600;color:var(--ink);border-left:4px solid var(--electric);padding-left:1.2rem;margin:2rem 0 0;}
.cognate-case-quote cite{display:block;font-size:.95rem;font-weight:500;color:var(--muted);font-style:normal;margin-top:.6rem;}
.cognate-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.cognate-gallery-item{margin:0;border-radius:var(--radius);overflow:hidden;}
.cognate-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;}
.cognate-gallery-item figcaption{font-size:.82rem;color:var(--muted);padding:.5rem .2rem;}
.cognate-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem;}
.cognate-related-card{display:flex;flex-direction:column;gap:.3rem;padding:1.3rem;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;transition:border-color .2s,transform .2s;}
.cognate-related-card:hover{border-color:var(--electric);transform:translateY(-2px);}
.cognate-related-card__client{color:var(--electric);font-weight:600;font-size:.85rem;}
.cognate-related-card__title{color:var(--ink);font-family:var(--font-display);font-weight:600;}
.cognate-related-card__go{color:var(--muted);font-size:.85rem;margin-top:.3rem;}
.cognate-btn{display:inline-block;background:var(--electric);color:#fff;font-family:var(--font-display);font-weight:600;padding:.85rem 1.8rem;border-radius:var(--radius-pill);text-decoration:none;}
.cognate-btn:hover{background:#1d00c0;}
.cognate-case-video iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--radius);}
@media(max-width:760px){.cognate-related-grid{grid-template-columns:1fr;}}


/* QA45 — Work landing grid */
.cognate-work-wrap{max-width:var(--container);margin:0 auto;}
.cognate-work-featured{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2.5rem;}
.cognate-work-featured .case-card__media{aspect-ratio:16/9;}
.cognate-work-featured .case-card h3{font-size:1.4rem;}
a.case-card--full{text-decoration:none;color:inherit;}
a.case-card--full:hover{text-decoration:none;}
.case-card__excerpt{color:var(--text-soft);font-size:.9rem;line-height:1.6;}
.case-card__go{color:var(--electric);font-weight:600;font-size:.88rem;font-family:var(--font-display);margin-top:auto;}
.case-card--mention .case-card__logo{display:grid;place-items:center;min-height:130px;padding:1.5rem;background:#fff;}
.case-card--mention .cognate-work-logo{max-height:60px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s;}
.case-card--mention:hover .cognate-work-logo{filter:none;opacity:1;}
.case-card--mention .cognate-work-logoname{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:1.1rem;text-align:center;}
@media(max-width:760px){.cognate-work-featured{grid-template-columns:1fr;}}


/* QA46 — Work landing value section */
.cognate-work-value{background:var(--mist);border-radius:var(--radius-lg);padding:clamp(2.5rem,5vw,4rem);margin:3rem 0;}
.cognate-work-value__head{max-width:760px;margin-bottom:2rem;}
.cognate-work-value__head h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.2rem);color:var(--ink);margin:.4rem 0 .6rem;}
.cognate-work-value__head .lead{color:var(--text-soft);}
.cognate-work-value__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
.cognate-work-value__item h3{font-family:var(--font-display);font-size:1.05rem;color:var(--electric);margin:0 0 .4rem;}
.cognate-work-value__item p{color:var(--text-soft);font-size:.92rem;line-height:1.6;}
@media(max-width:860px){.cognate-work-value__grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.cognate-work-value__grid{grid-template-columns:1fr;}}


/* QA47 — case hero client logo chip */
.cognate-case-hero__logo{display:inline-flex;align-items:center;background:#fff;border-radius:12px;padding:.65rem 1rem;margin:0 0 1.3rem;box-shadow:0 4px 16px rgba(0,0,0,.18);}
.cognate-case-hero__logo img{max-height:46px;width:auto;display:block;}